"

From 2014.igem.org

html, body{

  font-family: 'Ubuntu', sans-serif;
   font-size: 100%;
   background-color: #FFF;

} body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } /*-----start-header----*/ .header{ position: relative; padding: 2em 0; } .bg{ background: url(../images/bg.jpg) no-repeat 0px 0px; min-height: 809px; background-size: 100% 100%; } .contact-no{ float: left; } .contact-no span{ font-size: 1.5em; color: #9DA0B2; font-weight: 500; margin-top: 1.2em; display: block; text-transform: uppercase; } .contact-order{ float:right; } .contact-order a{ font-size: 1.3em; color: #9DA0B2; font-weight: 500; margin-top: 1.5em; display: block; text-transform: uppercase; border-bottom: 2.5px dashed; } .contact-order a:hover{ text-decoration:none; color:#44C1F3; } .logo{ position:absolute; left: 45%; } /*----navbar-nav----*/ .top-nav ul li a{ color: #FFF; padding: 0.1em 2.7em; font-size: 1.1em; font-weight: 500; text-transform: uppercase; } .top-nav ul li.active a{ background: url(../images/active-ico.png) no-repeat 50% 100%; } .top-nav ul li a:hover{ color:#44C1F3; } .logo a{ display:block; } /* top-nav */ .top-nav:before, .top-nav:after {

   content: " ";
   display: table;

} .top-nav:after {

   clear: both;

} nav { position: relative; top: 615px; } nav ul { padding: 0; } nav li { display: inline; float: left; position:relative; } nav a { color: #fff; display: inline-block; text-align: center; text-decoration: none; line-height: 40px; } nav a:hover{ text-decoration:none; color:#00A2C1; } nav a#pull { display: none; } /*Styles for screen 600px and lower*/ @media screen and (max-width: 768px) { nav {

 		height: auto;
 	}
 	nav ul {
 		width: 100%;
 		display: block;
 		height: auto;
 	}
 	nav li {
 		width: 100%;
 		position: relative;
 	}
 	nav li a {

border-bottom: 1px solid #eee; }

 	nav a {

text-align: left; width: 100%; text-indent: 25px;

 	}

} /*Styles for screen 515px and lower*/ @media only screen and (max-width : 768px) { nav { border-bottom: 0; } nav ul { display: none; height: auto; margin:0; background: #fff; } nav a#pull { display: block; position: relative; color: #F26D7D; text-align: right; position: absolute; /*--top:35px;--*/ } nav a#pull:after { content:""; background: url('nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } nav a#pull img{ margin-right:2%; padding-top: 65px; } .top-nav ul li a { color: #2C3E50; padding: 0em 0; } } /*Smartphone*/ @media only screen and (max-width : 320px) { nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #576979; } } /*----start-about----*/ .about{ padding:5em 0; } .about-left p{ font-size: 3.5em; text-transform: uppercase; font-weight: 100; color: #000000; width: 76%; } .about-left p span{ color:#00AAEF; } .about-left p label{ font-weight:500; } .about-right h3,.about-right span{ font-weight: 400; color: #000; font-size: 1.2em; } .about-right span{ margin-top:1em; display:block; } .about-right p,.about-right li{ color: #222222; font-size: 0.9em; font-weight: 500; line-height: 1.8em; font-family: 'Open Sans', sans-serif; } /*-----start-gallery---*/ .gallery{ background:#EEEEEE; padding:3em 0; } .head h3{ color: #000000; font-size: 3em; text-transform: uppercase; font-weight: 300; width: 17.3%; margin: 0 auto; } .head span{ width: 189px; height: 13px; display: block; background: url(../images/head-border.png) no-repeat 0px 0px; margin-top: 0.15em; } /* Self Clearing Goodness */ /* Strip /*-----------------------------------------------------------------------------------*/ .b-link-stripe{ position:relative; display:inline-block; vertical-align:top; font-weight: 300; overflow:hidden; width: 100%; } .b-link-stripe .b-wrapper{ position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; color:#ffffff; overflow:hidden; } .b-link-stripe .b-line{ position:absolute; top:0; bottom:0; width:20%; background:rgba(75, 202, 255, 0.85); transition:all 0.5s linear; -moz-transition:all 0.5s linear; -ms-transition:all 0.5s linear; -o-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; opacity:0; visibility:hidden; /* lt-ie9 */ } /* lt-ie9 */ .b-link-stripe:hover .b-line{ visibility:visible; } .b-link-stripe .b-line1{ left:0; } .b-link-stripe .b-line2{ left:20%; transition-delay:0.1s !important; -moz-transition-delay:0.1s !important; -ms-transition-delay:0.1s !important; -o-transition-delay:0.1s !important; -webkit-transition-delay:0.1s !important; } .b-link-stripe .b-line3{ left:40%; transition-delay:0.2s !important; -moz-transition-delay:0.2s !important; -ms-transition-delay:0.2s !important; -o-transition-delay:0.2s !important; -webkit-transition-delay:0.2s !important; } .b-link-stripe .b-line4{ left:60%; transition-delay:0.3s !important; -moz-transition-delay:0.3s !important; -ms-transition-delay:0.3s !important; -o-transition-delay:0.3s !important; -webkit-transition-delay:0.3s !important; } .b-link-stripe .b-line5{ left:80%; transition-delay:0.4s !important; -moz-transition-delay:0.4s !important; -ms-transition-delay:0.4s !important; -o-transition-delay:0.4s !important; -webkit-transition-delay:0.4s !important; } .b-link-stripe:hover .b-line{ opacity:1; } /*-----------------------------------------------------------------------------------*/ /* Animation effects /*-----------------------------------------------------------------------------------*/ .b-animate-go{ text-decoration:none; } .b-animate{ transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; visibility: hidden; font-size:1.1em; font-weight:700; } .b-animate img{ margin-top: 4%; display: -webkit-inline-box; } .b-animate span{ display:block; font-size: 2em; text-transform: uppercase; padding-top: 2.3em; display: block; font-weight: 500; } .b-animate button{ background: #000; padding: 0.9em 1.8em; color: #00AAEF; text-transform: uppercase; font-size: 0.875em; border: none; border-radius: 0.3em; margin: 0.8em auto; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; outline: none; } .b-animate button:hover{ background:#3B3B43; color:#fff; } .b-animate label{ display:block; font-size:0.875em; margin-top:0.5em; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; -o-transition:0.5s all; } .b-animate label:hover{ color:#000; cursor:pointer; } /* lt-ie9 */ .b-animate-go:hover .b-animate{ visibility:visible; } .b-from-left{ position: relative; left: -100%; background: rgba(0, 170, 239, 0.63); background-size: 100% 100%; top: 0px; margin: 0; min-height: 307px; } .b-animate-go:hover .b-from-left{ left:0; } h3.m_4{ float:left; } /*--default--*/ .default{ background:#515f67; padding:6% 0; } p.m_7{ color: #FFF; font-size:15px; line-height: 1.8em; margin:5% 0; } h3.m_21 { color: #FFF; font-size: 2em; font-family: 'Open Sans', sans-serif; text-transform: uppercase; } .m_22 { position: relative; margin-bottom: 10%; } .m_8 { position: relative; margin-bottom: 10%; } span.default_line { width: 50px; display: block; border-bottom: 2px solid #FFF; position: absolute; bottom:0px; } .button a{ color:#29353C; font-size:0.85em; text-transform: uppercase; font-weight:bold; text-decoration: none; cursor: pointer; padding: 12px 35px 9px 35px; display: inline-block; outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; border:2px solid #29353C; } .button a:hover { background:#fff; border:2px solid #fff; color:#00B3FD; } .more-portfolio-grids{ text-align: center; background: #35353F; padding: 3em 0; } .more-portfolio-grids a{ color: #FFF; border: 2px solid #FFF; padding: 0.8em 2em; text-transform: uppercase; font-size: 1.1em; border-radius: 0.5em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; -o-border-radius: 0.5em; -ms-border-radius: 0.5em; } .more-portfolio-grids a:hover{ color:#000; border-color:#000; text-decoration:none; } /*----*/ /*-----start-gallery----*/ .gallery-grids{ padding:3em 0 0 0; } .port-pic{ width:100%; } .place{ color: #000; font-weight: 500; padding: 0.5em 1em; } .place a{ color:#00AAEF; } .place a:hover{ text-decoration:none; color:#222; } .view-gallery-btn{ background: #00AAEF; color: #FFF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; padding: 0.875em 0em; width: 15%; display: block; margin: 0 auto; text-align: center; } .view-gallery-btn:hover{ background:#000; color:#fff; text-decoration:none; } /*----start-consulation-----*/ .consulation{ padding:3em 0; } .c-head h3 { width: 28.3%; } .c-head span{ margin-left: 1.3em; } .consulation-left h4{ font-size: 2em; color: #000; font-weight: 400; width: 60%; line-height: 1.5em; } .consulation-left p{ color: #222; font-family: 'Open Sans', sans-serif; line-height: 1.8em; font-size: 0.9em; width: 65%; } /*-----*/ .consulation-right input[type="text"]{ background:#EEEEEE; color:#696969; text-align:center; width:100%; padding:1em; margin:10px 0; border:1px solid #EEEEEE; font-family: 'Open Sans', sans-serif; font-weight:600; -webkit-appearance: none; transition: border-color 0.3s; -o-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -webkit-transition: border-color 0.3s; text-transform:uppercase; outline:none; } .consulation-right input[type="text"]:hover,.consulation-right input[type="text"]:focus{ border-color:#00AAEF; } .consulation-right input[type="submit"]{ background: #00AAEF; color: #FFF; border: 1px solid #00AAEF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; width: 100%; padding: 1em; margin: 10px 0; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .consulation-right input[type="submit"]:hover{ background:#000000; border: 1px solid #000; } .consulation-grids{ padding:4em 0 0 0; } .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} /*----start-Testimonials-----*/ .testmonials{ background:#EEEEEE; padding:3em 0; } .testmonial-grid h5{ margin:0.5em 0 0 0; } .t-pic{ border-radius:30em; -webkit-border-radius:30em; -moz-border-radius:30em; -o-border-radius:30em; -ms-border-radius:30em; } .testmonial-grid h5 a{ color: #222; font-size: 1.8em; } .testmonial-grid h5 a:hover{ text-decoration:none; color:#00AAEF; } .testmonial-grid span{ color:#696973; font-style:italic; font-family: 'Open Sans', sans-serif; } .testmonial-grid p{ color: #000; width: 80%; margin: 0.5em auto; font-family: 'Open Sans', sans-serif; } .testmonials-grids{ padding-top:4em; } /*----- start-contact----*/ .contact{ padding:3em 0; } .contact-left a,.contact-left p,.contact-left p label{ color:#000; font-size:1.5em; display: block; } .contact-left a:hover{ color:#00AAEF; text-decoration:none; } .contact-left p label{ display: block; font-weight: normal; font-size: 1em; } .contact-right input[type="text"],.contact-right textarea{ background:#EEEEEE; color:#696969; text-align:center; width:100%; padding:1em; margin:10px 0; border:1px solid #EEEEEE; font-family: 'Open Sans', sans-serif; font-weight:600; -webkit-appearance: none; transition: border-color 0.3s; -o-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -webkit-transition: border-color 0.3s; text-transform:uppercase; outline:none; } .contact-right input[type="text"]:hover,.contact-right input[type="text"]:focus,.contact-right textarea:hover,.contact-right textarea:focus{ border-color:#00AAEF; } .contact-right input[type="submit"]{ background: #00AAEF; color: #FFF; border: 1px solid #00AAEF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; width: 100%; padding: 1em; margin: 10px 0; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .contact-right input[type="submit"]:hover{ background:#000000; border: 1px solid #000; } .contact-right textarea{ min-height:150px; resize:none; } .contact-grids{ padding-top:3em; } /*------start-contact----*/ .footer{ background: url(../images/footer-bg.jpg) no-repeat 0px 0px; min-height: 500px; background-size: cover; } .footer a img{ margin-top: 18%; } .copy-right{ color: #FFF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; margin-top: 15%; font-weight: 600; } .copy-right a{ color:#000; } .copy-right a:hover{ color:#00AAEF; text-decoration:none; }

1. toTop {

display: none; text-decoration: none; position: fixed; bottom: 26px; right: 3%; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url("../images/to-top1.png") no-repeat 0px 0px; border-radius: 30em; }

1. toTopHover {

width: 40px; height: 40px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } /*--responsive design--*/ @media (max-width:1366px){

.top-nav ul li a {

padding: 0.1em 1.9em;

}

} @media (max-width:1024px){

.top-nav ul li a {

padding: 0.1em 1.8em; font-size:1em;

}
.bg {
   min-height: 600px;
}
nav {

top:410px;

}
.about-left p {

font-size:3em;

}
.head h3 {

font-size:2em;

}
.head span {

background-size:65%;

}
.footer {

min-height: 400px;

}
.copy-right {

margin-top: 15%;

}

} @media (max-width:800px){

.bg {
   min-height: 500px;
}
nav {

top:310px;

}
.top-nav ul li a {

padding: 0.1em 1.5em; font-size: 0.85em;

}
.about-left p {

font-size: 2em;

}
.testmonials-grids {

padding-top: 2em;

}
.contact-grids {

padding-top: 1em;

}
.footer {

min-height: 300px;

}
.consulation-grids {

padding: 1em 0 0 0;

}
.head span {

background-size: 50%;

}
.testmonial-grid {

margin-bottom: 30px;

}
.contact-left p, .contact-left p label {

font-size: 1em; font-weight: 500;

}
.contact-left a, .contact-left p, .contact-left p label {

font-size: 1em; font-weight: 500;

}

} @media (max-width:768px){

.bg {
   min-height:400px;
}
nav {

top: -127px;

}
.top-nav ul li a {

padding: 0.1em 1.5em; font-size: 0.85em;

}
.about-left p {

font-size: 2em;

}
.testmonials-grids {

padding-top: 2em;

}
.contact-grids {

padding-top: 1em;

}
.footer {

min-height: 300px;

}
.consulation-grids {

padding: 1em 0 0 0;

}
.contact-order {

display: none;

}

} @media (max-width:480px){

.contact-no span {

font-size: 1em; margin-top: 0.2em;

}
.logo {

left: 41%; top: 17px;

}
nav {

top: -70px;

}
.bg {
  min-height: 250px;
}
.about {

padding: 2em 0;

}
.about-left p {

font-size:1.5em; font-weight:400; width:100%;

}
.consulation-left h4 {

font-size: 1.4em; width:100%;

}
.head h3 {

width: 30.3%;

}
.gallery-grids {

padding: 1em 0 0 0;

}
.view-gallery-btn {

padding: 0.75em; width: 32%;

}
.head h3 {

font-size: 1.5em; font-weight: 400;

}
.head span {

background-size: 50%;

}
.b-animate span {

font-size: 1.5em;

}
.footer {

min-height: 200px;

}
.consulation-left p {

line-height: 1.5em; font-size: 0.8125em; width: 100%;

}
.consulation-right input[type="text"], .consulation-right input[type="submit"], .contact-right input[type="text"], .contact-right textarea {
	padding: 0.7em;
	font-size:0.85em;
}
.testmonials-grids {

padding-top: 1em;

}
nav a#pull img {

padding-top:40px;

}
nav {

top: -98px;

}
.contact-no {

margin-top: 10px;

}

} @media (max-width:320px){

 .contact-no {

display: none;

}
.logo {

left: 27%; top: 14px;

}
nav {

top: -64px;

}
.bg {

min-height: 200px;

}
.about-left p {

font-size: 1.2em;

}
.about-right h3, .about-right span {

font-weight: 600; font-size: 0.95em; margin: 10px 0;

}
.head h3 {

width: 55.3%;

}
.view-gallery-btn {

padding: 0.6em; width: 40%; font-size: 0.8125em;

}
.consulation-left h4 {

font-size: 1em; width: 100%; font-weight: 500;

}
.consulation-grids {

padding: 0;

}
.b-animate span {

font-size: 1em;

}
.b-animate button {

padding: 0.5em 1em; font-size: 0.8125em;

}

}