Team:NKU CHINA/css/style

@font-face {

 font-family: myTitle;
 src: url(https://static.igem.org/mediawiki/2018/d/d6/T--NKU_CHINA--font_imagination.ttf);

}

body {

   padding-top: 100px;

}

/*background CSS*/ .myBackground {

    filter: url(blur.svg#blur);       
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);    
    filter: blur(5px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);   
    height: 110%; 
    width: 110%; 
    margin-top: -150px; 
    margin-left: -30px;
    position: fixed;
    z-index: -1;
}

/*background CSS*/

/* navbar CSS*/ .navbar {

   left: -20px !important;
   right: -20px !important;
   top: -20px !important;
   padding-top: 25px;
   padding-bottom: 5px;
   padding-left: 25px;
   padding-right: 25px;
   background-color: rgba(0,0,0,0.8);
   border-color: transparent;
   border: 0;
   font-size: 20px !important;
   letter-spacing: 1px;
   margin-top: 10px;
   transition: background-color 0.5s ease-out;

}

.navbar-nav {

   margin-top: 1em !important;

}

.navbar li {

   margin: 0 2px;
   border-radius: 5px;

}

/* Add a gray color to all navbar links */ .navbar li a, .navbar .navbar-brand {

   color: #fff;
   border-radius: 5px;

}

/* the color of the single Link ('safety') on hover */ .navbar-nav li a:hover {

   color: #fff;//changed

}

/* The active link this seems to be useless at the moment*/ .navbar-nav li.active a {

   color: white;
   background-color: rgba(0,0,0,0.8);

}

/* Remove border color from the collapsible button */ .navbar-default .navbar-toggle {

   border-color: transparent;

}

.navbar-default {

   border-color:transparent;

}

.navbar-collapse>ul:before {

   content: "";
   margin-top: 40px;

}

@media (min-width: 768px){

   .navbar-collapse>ul:before {
       content: "";
       margin-top: 0px;
   }

   .navbar-right {
       margin-right: 2% !important;
   }

   .navbar-header {
       margin-left: 2% !important;
   }
   
   .navbar>li>a {
       padding: 10px 15px;
   }

} @media (max-width: 761px){ .dropdown-menu li a {

   color: #ffffff;
   letter-spacing: 1px;

} }

/* the color of the Dropdown on click */ .open .dropdown-toggle {

   color: #193759;//changed
   background-color: #fff;

}

/* the color of the Dropdown links */ .dropdown-menu li a {

   color: #000;
   letter-spacing: 1px;

}

/* the color of the dropdown links on hover */ .dropdown-menu li a:hover {

   background-color: rgba(0,0,0,0.8);

}

.navbar-toggle .icon-bar {

   background: white;

}

.navbar-header img {

   height: 80px !important;

}

.nav .open>a, .nav>li>a:hover, .nav .open:hover>a, .nav .dropdown:hover>a{

   background-color: white;
   border: none;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   box-shadow: 0px 6px 12px rgba(0,0,0,.175);
   color: black;

}

.nav .open .dropdown-menu, .nav .dropdown-menu {

   border: none;
   border-top-left-radius: 4px !important;

}

.nav .open>a:hover, .nav a:focus {

   background-color: white !important;

}

@media (min-width: 979px) {

 ul.nav li.dropdown:hover > ul.dropdown-menu {
   display: block;
 }

}

@media (min-width: 1200px) {

   .container {
       width: 1000px;
   }

} /* navbar CSS*/

/*team's picture*/ .col-1-bottom {

 display: block;
 width: 100%;
 height: 100%;
 -webkit-transform: scale(1, 1);
 -moz-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
 transform: scale(1, 1);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;

} .col-1-bottom img {

 display: block;
 position: relative;
 max-width: 100%;
 max-height: 100%;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

}

.col-1-bottom {

 top: 0;
 left: 0;
 position: absolute;
 left: 15px;

} .col-1-bottom .info-text {

 display: block;
 position: relative;
 padding: 2em;
 float: left;
 left: 50%;
 top: 50%;
 text-align:center;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

} .info-text h5{

   color:#fff;
   font-size:2.0em;
   padding-top: 1.5em;
   padding-bottom:1.5em;
   margin-bottom:0.5em;

} .info-text p{

   color:#fff;
   font-size:0.9em;
   line-height:2em;

} .col-1 {

 display: block;
 position: relative;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -ms-perspective: 800px;
 -o-perspective: 800px;
 perspective: 800px;
 -webkit-transform-style: preserve3d;
 -moz-transform-style: preserve3d;
 -ms-transform-style: preserve3d;
 -o-transform-style: preserve3d;
 transform-style: preserve3d;

} .col-1 .col-1-top {

 z-index: 1;

} .col-1 .col-1-bottom {

 background: rgba(0, 0, 0, 0.6);
 z-index: 2;
 filter: alpha(opacity=0);
 -wekbit-opacity: 0;
 -moz-opacity: 0;
 opacity: 0;
 border-radius: 50%;

}

.col-1.bottom .col-1-bottom {

 -webkit-transform: translateY(100%) rotateX(-90deg);
 -moz-transform: translateY(100%) rotateX(-90deg);
 -ms-transform: translateY(100%) rotateX(-90deg);
 -o-transform: translateY(100%) rotateX(-90deg);
 transform: translateY(100%) rotateX(-90deg);
 -webkit-transform-origin: top;
 -moz-transform-origin: top;
 -ms-transform-origin: top;
 -o-transform-origin: top;
 transform-origin: top;

} .info-text a:focus {

 outline: none;

} .info-text a {

 text-decoration: none;

} /*--wthree--*/ /*--agileinfo--*/ .col-1:hover .col-1-bottom {

 -webkit-transition: 0.6s;
 -moz-transition: 0.6s;
 -ms-transition: 0.6s;
 -o-transition: 0.6s;
 transition: 0.6s;
 filter: alpha(opacity=100);
 -wekbit-opacity: 1;
 -moz-opacity: 1;
 opacity: 1;
 -webkit-transform: translateX(0) rotateY(0);
 -moz-transform: translateX(0) rotateY(0);
 -ms-transform: translateX(0) rotateY(0);
 -o-transform: translateX(0) rotateY(0);
 transform: translateX(0) rotateY(0);

}

/*backTotop设计*/ .cd-top {

 display: inline-block;
 height: 50px;
 width: 50px;
 position: fixed;
 bottom: 40px;
 right: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 background: rgba(0, 0, 0, 0) url(../images/up-arrow.svg) no-repeat center 50%;
 background-size:70%;
 border:1px solid #fff;
 visibility: hidden;
 opacity: 0;
 -webkit-transition: opacity .3s 0s, visibility 0s .3s;
 -moz-transition: opacity .3s 0s, visibility 0s .3s;
 transition: opacity .3s 0s, visibility 0s .3s;

} .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {

 -webkit-transition: opacity .3s 0s, visibility 0s 0s;
 -moz-transition: opacity .3s 0s, visibility 0s 0s;
 transition: opacity .3s 0s, visibility 0s 0s;

} .cd-top.cd-is-visible { /*按钮可视化*/

 visibility: visible;
 opacity: 1;

} .cd-top.cd-fade-out { /*下拉过程按钮隐藏*/

 opacity: .5;

} .cd-top:hover {

 background-color: #000;
 opacity: 1;

}

/*-- footer section --*/ .myFooter {

 margin-top: 100px;

} .footer-w3ls ul.social-icons1 {

   padding-top: 30px;

} .footer-w3ls ul.social-icons1 li {

 display:inline;
 list-style:none;

} .footer-w3ls ul.social-icons1 li a {

 margin-right:2px;

} .footer-w3ls ul.social-icons1 li a i.fa {

 font-size:20px;
 color:black;
 width:50px;
 height:50px;
 line-height:50px;
 text-align:center;
 background-color:white;
 border-radius:50%;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -o-border-radius:50%;
 -ms-border-radius:50%;

} .footer-w3ls ul.social-icons1 li a i.fa:hover {

   -webkit-animation: spin 2s linear infinite;
 animation: spin 2s linear infinite;
 -moz-animation: spin 2s linear infinite;
 -o-animation: spin 2s linear infinite;
 -ms-animation: spin 2s linear infinite;

} @-webkit-keyframes spin {

 0% { -webkit-transform: rotate(0deg); }
 100% { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }

} .footer-w3ls ul.social-icons1 li a i.fa.fa-envelope-o:hover {

   background-color: #1da1f2;
   color: #fff;
   border-color: #1da1f2;

} .footer-w3ls ul.social-icons1 li a i.fa.fa-twitter:hover {

   background-color: #1da1f2;
   color: #fff;
   border-color: #1da1f2;

} .footer-w3ls ul.social-icons1 li a i.fa.fa-facebook:hover {

   background-color: #3b5998;
   color: #fff;
   border-color: #3b5998;

} .footer-w3ls ul.social-icons1 li a i.fa.fa-instagram:hover {

   background-color: #3b5998;
   color: #fff;
   border-color: #3b5998;

} .Copyright {

 margin-top: 20px;

} /*-- footer section --*/