Team:BIT-China/src/css/style

@import url(https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css);

html,body { margin: 0; padding: 0;

 height: 100%;
 width: 100%;

} body {

 height: 100%;
 width: 100%;
 background-color: rgba(242,215,188,0.4);

} a {

 font-family: 'Quicksand', sans-serif;

} /*.screen-hidden {

 overflow: hidden;

}*/

  • {

-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

} .navbar-static-top, .navbar, .navbar-default, .container {

 border: 0;
 margin: 0;
 box-sizing: border-box;

} /*@media (min-width: 768px) .navbar-static-top {

   border-radius: 0;

}*/ .navbar-static-top {

   z-index: 1000;
   border-width: 0 0 1px;

} /*@media (min-width: 768px) .navbar {

   border-radius: 4px;

}*/ .navbar-brand img {

 /*width: 100%;*/
 font-size: 0;
 padding: 0;
 margin: 0;
  height: 100%;

} .navbar { width: 100%;

 min-width: 920px;

background-color: rgba(8,41,59,1);

 background-image: url("https://static.igem.org/mediawiki/2017/3/38/Bit-china-2017logo.svg");
 background-size: auto 100%;
 left: 0;
   /*border-color: #e7e7e7;*/
   /*position: relative;*/
   min-height: 70px;
   /*margin-bottom: 20px;*/
   /*border: 1px solid transparent;*/

} .navbar-header {

 width: 200px;
 height: 50px;

display: block;

   float: left;

} .navbar-nav {

 /*margin-left: 100px;*/

float: left; list-style: none; }

  1. navbar a {
   text-decoration: none;
   font-size: 13px;
   font-weight: bold;

}

  1. navbar * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

  1. navbar ul,
  2. navbar li {
   margin: 0;

}

  1. navbar ul {

padding: 0; }

  1. navbar * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

} .navbar .myactive { background-color: rgba(255,255,255,0.1); } @media (min-width: 768px) .navbar-nav>li {

   float: left;

} .nav { margin: 0; } .nav>li { padding: 0 10px;

   position: relative;
   display: block;
   float: left;

} /*.nav>li a {

 position: relative;
 display: block;
 padding-top: 25px;
 padding-bottom: 25px;
 line-height: 20px;
 color: #ccc;
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav>li a:hover {

 color: rgba(255,255,255,0.5);*/

} /*------------------------dropup dropdown------------------------*/ .dropup, .dropdown {

 position: relative;

} .dropdown-toggle:focus {

 outline: 0;

} .dropdown-menu {

 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 list-style: none;
 font-size: 14px;
 text-align: left;
 background-color: #fff;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 background-clip: padding-box;

} .dropdown-menu.pull-right {

 right: 0;
 left: auto;

} .dropdown-menu .divider {

 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;

} .dropdown-menu > li > a {

 display: block;
 padding: 3px 20px;
 clear: both;
 font-weight: normal;
 line-height: 1.42857143;
 color: #333333;
 white-space: nowrap;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

 text-decoration: none;
 color: #fff;
 background-color: #f5f5f5;
 font-size: 2em;

} .dropdown-menu > .myactive > a, .dropdown-menu > .myactive > a:hover, .dropdown-menu > .myactive > a:focus {

 color: #fff;
 text-decoration: none;
 outline: 0;
 background-color: #f5f5f5;

} .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {

 color: #fff;

} .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {

 text-decoration: none;
 background-color: transparent;
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 cursor: not-allowed;

} .open > .dropdown-menu {

 display: block;

} .open > a {

 outline: 0;

} .dropdown-menu-right {

 left: auto;
 right: 0;

} .dropdown-menu-left {

 left: 0;
 right: auto;

} .dropdown-header {

 display: block;
 padding: 3px 20px;
 font-size: 12px;
 line-height: 1.42857143;
 color: #777777;
 white-space: nowrap;

} .dropdown-backdrop {

 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 z-index: 990;

} /*------------------------dropup dropdown------------------------*/ /*.movepic-container {

 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 display: flex;
 text-align: center;
 overflow: hidden;

}*/ ul,ol,li {

 /*font-size: 0;*//*控制ol,li之间没有空隙*/
 list-style: none;
 /*padding: 0;*/

}

@media screen and (min-width: 678px) {

 img {
 width: 100%;
 }

} @media screen and (min-width: 1024px) {

 img {
 width: 100%;
 }

} .page-border {

  width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 display: flex;
 text-align: center;
 overflow: hidden;
 /*margin: auto;*/
 /*overflow: hidden;*/

}

  1. fullpage {
 position: relative;
 top: 0;
 height: 100%;
 /*position: fixed;*/
 width: 100%;
 /*top: -50px;*/
 /*top: -667px;控制出现那一页图片*/
 text-align: center;
 font-size: 0;
 /*translate3d(0px, px , 0px);*/
 -webkit-transition: all 0.7s;
 -moz-transition: all 0.7s;
 -o-transition: all 0.7s;
 transition: all 0.7s;

} img {

 margin: auto;

} .fp-section {

 /*position: absolute;*/
 /*visible的时候要加上*/
 display: flex;
 height: 100%;
 width: 100%;
 
 /*-webkit-transition: all 1.5s;
 -moz-transition: all 1.5s;
 -o-transition: all 1.5s;
 transition: all 1.5s;*/
 
 animation-duration: 0.5s;
 animation-timing-function: ease-out;
 animation-name: slidein;

} @keyframes slidein {

 from {
   transform: translateY(500px);
 }
 to {
   transform: translateY(0);
 }

}


.circle {

 display: none;
 z-index: 100;
 position: fixed;
 width: 100%;
 bottom: 60px;
 display: flex;
 

} .circle ol {

   display: none;
 margin: auto;

} .circle li {

 float: left;
 margin: 2em;

} .circle li span {

 display: block;
 height: 20px;
 width: 20px;
 border: 6px solid #333;
 border-radius: 50%;
 margin: auto;
 background-color: #fff;

} .circle li span:hover {

 opacity: 0.8;
 box-shadow: 2px 2px 2px #fff;

} .fa-circle {

 color: #444;
 text-shadow: 2px 2px 2px #fff;

}


  1. Maxamed {
 width: 100%;
 display: flex;
 position: fixed;
 bottom: 3em;

} .nav__mine {

 position: relative;
 margin: auto;

}

.nav__item {

 line-height: 1;
 position: relative;
 /*display: block;*/
 margin: 10px;
 padding: 0;
 letter-spacing: 0;
 color: currentColor;
 border: 0;
 background: none;
 -webkit-tap-highlight-color: rgba(0,0,0,0);

}

.nav__item:focus {

 outline: none;

} .nav--maxamed .nav__item {

 width: 36px;
 height: 36px;

}

.nav--maxamed .nav__item::before {

 content: ;
 position: absolute;
 top: 0.75em;
 right: 0;
 width: 16px;
 height: 16px;
 box-shadow: inset 0 0 0 6px #3F598E;
 border: 2px solid #fff;
 border-radius: 50%;
 -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
 transition: transform 0.3s, box-shadow 0.3s;

}

.nav--maxamed .nav__item:not(.nav__item--current):focus::before, .nav--maxamed .nav__item:not(.nav__item--current):hover::before {

 box-shadow: inset 0 0 0 6px #1D3045;

}

.nav--maxamed .nav__item--current::before {

 -webkit-transform: scale3d(1.75,1.75,1);
 transform: scale3d(1.75,1.75,1);
 box-shadow: inset 0 0 0 1px #3F598E;

}

.nav--maxamed .nav__item-title {

 position: absolute;
 left: 3.5em;
 top: 0;
 pointer-events: none;
 padding: 0.75em 0;
 font-weight: bold;
 white-space: nowrap;
 -webkit-transform-origin: 0 50%;
 transform-origin: 0 50%;
 opacity: 0;
 -webkit-transform: scale3d(0.5,0.5,1);
 transform: scale3d(0.5,0.5,1);
 -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
 transition-timing-function: cubic-bezier(0.2,1,0.3,1);

}

.nav--maxamed .nav__item--current .nav__item-title {

 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);

}


/*====================下拉栏=============================*/ .caret {

   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 5px;
   vertical-align: middle;
   border-top: 4px dashed;
   border-top: 4px solid \9;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;

} .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {

   /*color: transparent;*/
   color: white;
   /*background-color: #e7e7e7;*/
   background-color:  transparent;

} .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {

   color: #fff;

}

.nav>li a {

 position: relative;
 display: block;
 padding-top: 25px;
 padding-bottom: 25px;
 line-height: 20px;
 color: white;
 /*background-color: #08293b;*/
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.nav li>.dropdown-a {

 position: relative;
 display: block;
 height: 50px;
 /*padding-top: 25px;*/
 /*padding-bottom: 15px;*/
 /*line-height: 50px;*/
 color: white;
 background-color: #F8A886;
 vertical-align:middle;
 text-align: center;
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav li>.dropdown-a>span {

 display: block;
 position: relative;
 top: -15px;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav>li a:hover {

 /*background-color: transparent;*/
 color: #fff;

}

  1. navbar .dropdown-a:hover {
 background-color: #F8A886;
 opacity: 0.8;

}

  1. navbar>ul>li>a:hover {
  color: #F8A886;

}

  1. navbar>.nav>.myactive:hover {
 color: #fff;

} .main-nav-link {

 border: 0;
 margin: 0;
 height: 50px;

} .dropdown-menu li:first-child .dropdown-a{

 border-top-right-radius: 10px;
 border-top-left-radius: 10px;

} .dropdown-menu li:first-child {

 border-top-right-radius: 10px;
 border-top-left-radius: 10px;

} .dropdown-menu li:last-child .dropdown-a{

 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;

} .dropdown-menu li:last-child {

 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;

} .dropdown-menu {

 border: 0;
 border-radius: 10px;
  -webkit-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;

} .nav>.dropdown>.dropdown-menu {

 border-radius: 10px;

} .dropdown-menu:before {

 /*z-index: 10000;*/
 content: ;
 position: absolute;
 bottom: 100%;
 left: 30%;
 right: auto;
 -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
         transform: translateX(-50%);
 height: 0;
 width: 0;
 border: 8px solid transparent;
 border-bottom-color: #F8A886;
 -webkit-transition: opacity .3s;
 transition: opacity .3s;

}


/*===========下拉菜单动画============*/ .nav li>.dropdown-a>span {

 padding: 5px 20px;
 text-decoration: none;
 -webkit-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;

}

.nav li>.dropdown-a>span:before {

 content: "";
 position: absolute;
 bottom: 0;
 width: 0;
 border-bottom: solid 2px;

}

.nav li>.dropdown-a>span:before {

 left: 0;

}

.nav li>.dropdown-a>span:hover {

 color: #fff;

}

.nav li>.dropdown-a>span:hover:before {

 width: 80%;
 left: 10%;

}

.nav li>.dropdown-a>span:before {

 -webkit-transition: width .2s ease-in-out;
 transition: width .2s ease-in-out;

}

/*=====================my-main-container========================*/ .my-main-container, .my-banner {

 position: relative;
 top: 70px;
 margin: 0;

} .my-main-container {

 display: flex;

} .my-pdf {

 margin: auto;
 padding-top: 100px;
 min-width: 856px;

} .my-banner {

 z-index: 1000;
 width: 100%;

} .my-backTop {

 width: 40px;
 position: fixed;
 bottom: 40px;
 right: 40px;
 z-index: 1000;
 cursor: pointer;
 color: #F8A886;
 text-decoration: none;

} .my-backTop:hover {

 text-decoration: none;

} .my-backTop span {

 font-size: 15px;
 font-weight: bold;

} .my-backTop img, .my-backTop span {

   -webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;

} .my-backTop:hover img {

 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

} .my-backTop:hover span {

 font-size: 20px;
 color: #F8A886;

}

/*=================================*/

  1. hexGrid {
 width: 95%;
 height: 100%;
 margin-top: 100px;
 /*padding: 20px;*/
 box-sizing: border-box; 
 display: flex;
 flex-flow: row wrap;           /*//从左到右、从上到下、多列显示*/
 -webkit-flex-flow: row wrap;   
 /*justify-content: space-between;*/
 /*四个并列元素两头对齐,剩下空间平均分配*/
 align-items: center;           /*//侧轴对齐居中*/

}

  1. hexGrid>li {
 padding: 0;
 margin: 50px 0;
 width: 20%;

}

  1. hexGrid>li:first-child {
 width: 30%;
 left: 20%;

}

  1. hexGrid>li:nth-child(2) {
 width: 30%;
 left: 30%;
 margin-right: 30%;

}

  1. hexGrid>li img {
 width: 80%;

} .hex, .hexIn {

 padding: 0;
 margin: 0;

} .hex {

 position: relative;
 list-style-type: none;
 float: left;
 overflow: hidden;
 outline:1px solid transparent; 
 animation-play-state: paused; 
 animation-name: drive;
 animation-duration: 1s;
 animation-iteration-count: infinite;
   /*-webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;*/

} .hex:hover {

 animation-play-state: running;
 /*webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 transform: rotate(10deg);*/
 

}

@keyframes drive {

 0% {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 animation-timing-function: ease-out;
 }
 25% {
 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 transform: rotate(10deg);
 animation-timing-function: ease-in;
 }
 50% {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 animation-timing-function: ease-out;
 } 
 75% {
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
 transform: rotate(-10deg);
 animation-timing-function: ease-in;
 }
 100% {
  -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 animation-timing-function: ease-out;
 } 

} .hexIn {

 width: 100%;
 text-align: center;
 /*display: flex;*/

} .hexIn p {

 z-index: 1000;
 position: absolute;
 /*margin: auto;*/

} .hexIn h1 {

 position: absolute;
 bottom: 25px;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 width: 80%;


}

/*============================*/ .title-h1 {

 font-weight: bold;

} .title-h2 {

 font-weight: bold;
 text-shadow: 1px 1px 10px rgba(8,41,59,0.5);
 text-decoration: underline;

} .title-h3 {

 margin: 2em 0 1em 0;
 font-weight: bold;
 color: #234464;

} .title-h4 {

 font-weight: bolder;
 text-indent: 4em;

} p {

 line-height: 1.5em;

} .my-content-p {

 width: 100%;
 margin: auto;
 font-family: Roboto, sans-serif;
   /*font-size: 14px;*/
   /*line-height: 1.42857143;*/
   /*color: #333;*/
 font-weight: 500;
 font-size: 18px !important;
 line-height: 1.5;
 margin-bottom: 20px;
 color: #333;

}



/*====================*/

  1. popup-change-task {
 position: fixed;
 /*display: -webkit-flex;
   display: flex;*/
 /*position: absolute;*/
 top: 0;
 left: 0;
 z-index: 100;
 display: none;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.7);

} .popup-board {

 /*position: relative;*/
 height: 300px;
 width: 450px;
 margin: auto;
 border-radius: 20px;
 background-color: rgba(242,215,188,1);
 box-shadow: 5px 5px 20px #222;
 animation-duration: 0.5s;
 animation-timing-function: ease-out;
 animation-name: slidein;

} .popup-board header {

 border-radius: 20px 20px 0 0;
 position: relative;
 width: 100%;
 height: 40px;
 background-color: #F8A886;
 text-align: center;

} .popup-board header h1 {

 margin: 0;
 font-size: 1.3rem;
 color: #333;
 line-height: 40px;

} .popup-board header i {

 position: absolute;
 top: 12px;
 right: 12px;
 cursor: pointer;

} .popup-board header i:hover {

 opacity: 0.8;

} .popup-board section {

 margin: 10%;
 /*text-align: center;*/

} .popup-board footer {

 position: relative;
 width: 100%;
 height: 40px;
 text-align: center;

}