Template:Shenzhen SFLS/css/style

@font-face{ font-family: JohnstonITCStd-Light; src:url("https://static.igem.org/mediawiki/2017/5/55/Sfls-JohnstonITCStd-Light.otf");

}

@font-face{ font-family: Montserrat-Light; src:url("https://static.igem.org/mediawiki/2017/c/c7/Sfls-Montserrat-Light.otf"); } /*没有字体*/

body {

 font-family: JohnstonITCStd-Light;
 font-weight: 400;
 font-size: 16px;
 line-height: 1.7;
 color:#193651;/*body font color*/
 background: #fff;

}

1. page {

 position: relative;
 overflow-x: hidden;
 width: 100%;
 height: 100%;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

/*没有背景*/ /*background-image: url(images/Background.svg); background-attachment: fixed;*/

} .offcanvas #page {

 overflow: hidden;
 position: absolute;

} .offcanvas #page:after {

 -webkit-transition: 2s;
 -o-transition: 2s;
 transition: 2s;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 101;
 background: rgba(0, 0, 0, 0.7);
 content: "";

}

a {

 color: #fc3842;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

} a:hover, a:active, a:focus {

 color: #fc3842;
 outline: none;
 text-decoration: none;

}

p {

 margin-bottom: 20px;

} .copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden; }

h1, h2, h3, h4, h5, h6, figure {

 color: #000;
 font-family: Montserrat-Light, sans-serif;
 font-weight: 400;
 margin: 0 0 20px 0;

}

-webkit-selection {

 color: #fff;
 background: #fc3842;

}

-moz-selection {

 color: #fff;
 background: #fc3842;

}

selection {

 color: #fff;
 background: #fc3842;

}

.sfls-nav {

 padding: 20px 0;

width: 100%; position:fixed; -webkit-transform:translateZ(0); z-index: 50; background-color: rgba(255,255,255,1);

box-shadow: 0px 14px 33px -9px rgba(200,200,200,0.5);

/* background: #fff;*/ } @media screen and (max-width: 768px) {

 .sfls-nav {
   padding: 20px 0;

position: inherit; background-color:rgba(0,0,0,0); box-shadow:0px 14px 33px -9px rgba(0,0,0,0);

 }

}

@media screen and (max-width: 768px) {

 .sfls-nav #sfls-logo{

display: none;

 }

} .sfls-nav #sfls-logo {

 font-size: 15px;
 margin: 0;
 padding: 0;
 text-transform: none;
 font-weight: normal;
 font-family:Montserrat-Light, sans-serif;

} .sfls-nav a {

 padding: 1px 10px;
 color: #fc3842;

/* Big logo color*/ } @media screen and (max-width: 768px) {

 .sfls-nav .menu-1, .sfls-nav .menu-2 {
   display: none;
 }

} .sfls-nav .menu-2 li.search {

 float: left;
 width: 83%;

font-family: JohnstonITCStd-Light; -webkit-transition: 0.3s;

 -o-transition: 0.3s;
 transition: 0.3s;
 padding: 0;
 margin: -5px 0 0 0;

} .sfls-nav .menu-2 li input[type=text] {

 padding: 6px 10px;
 width: 40%;
 border: none;
 float: right;
 font-size: 13px;
 margin-top: 4px;
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;

} .sfls-nav .menu-2 li input[type=text]:focus {

 width: 100%;
 outline: none;
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);

} .sfls-nav .menu-2 li button {

 margin-top: 4px;
 padding: 5px;
 background: transparent;
 border: none;

} .sfls-nav .menu-2 li button i {

 color: rgba(0, 0, 0, 0.5);

} .sfls-nav .menu-2 li button:hover, .sfls-nav .menu-2 li button:focus {

 background: transparent !important;

} .sfls-nav .menu-2 li button:hover i, .sfls-nav .menu-2 li button:focus i {

 color: black;

} .sfls-nav .menu-2 li.shopping-cart {

 float: right;

} .sfls-nav .menu-2 li a.cart {

 color: black;

} .sfls-nav .menu-2 li a.cart span {

 position: relative;

} .sfls-nav .menu-2 li a.cart span small {

 position: absolute;
 top: -20px;
 right: -15px;
 padding: 10px 6px;
 line-height: 0;
 font-size: 11px;
 background: #fc3842;
 color: white;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;

} .sfls-nav ul { position: relative;

 padding: 0px;
 margin: 0px;

} .sfls-nav ul li {

 padding: 0;
 margin: 0;
 list-style: none;
 display: inline-block;
 font-family: "Montserrat-Regular", sans-serif;

}

/*导航栏*/ .sfls-nav ul li a {

 font-size: 13px;
 padding: 30px 10px;
 text-transform: uppercase;

 color:rgba(0,162,195,1);
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

} .sfls-nav ul li a:hover, .sfls-nav ul li a:focus, .sfls-nav ul li a:active {

 color: #fc3842;

} .sfls-nav ul li a.cart {

 color: #fc3842;

} .sfls-nav ul li a.cart span {

 position: relative;

} .sfls-nav ul li a.cart span small {

 position: absolute;
 top: -20px;
 right: -15px;
 padding: 10px 6px;
 line-height: 0;
 font-size: 12px;
 background:#7CB5C0;
 color: white;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;

} .sfls-nav ul li.has-dropdown {

 position: relative;

} .sfls-nav ul li.has-dropdown .dropdown {

 width: 150px;
 -webkit-box-shadow: 0px 14px 33px -9px rgba(252,56,66, 0.75);
 -moz-box-shadow: 0px 14px 33px -9px rgba(252,56,66, 0.75);
 box-shadow: 0px 14px 33px -9px rgba(252,56,66, 0.75);
 z-index: 1002;
 visibility: hidden;
 opacity: 0;
 position: absolute;
 top: 40px;
 left: 0;
 text-align: left;
 background: #fc3842;
 padding: 20px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition: 0s;
 -o-transition: 0s;
 transition: 0s;

} .sfls-nav ul li.has-dropdown .dropdown:before {

 bottom: 100%;
 left: 40px;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-bottom-color:#ef2235 ;
 border-width: 8px;
 margin-left: -8px;

} .sfls-nav ul li.has-dropdown .dropdown li {

 display: block;
 margin-bottom: 7px;

} .sfls-nav ul li.has-dropdown .dropdown li:last-child {

 margin-bottom: 0;

} /*导航栏拖下*/ .sfls-nav ul li.has-dropdown .dropdown li a {

 padding: 2px 0;
 display: block;
 color:#ffca54;
 line-height: 1.2;

font-family: Montserrat-Light, sans-serif;

 text-transform: uppercase;

 font-size: 12px;

} .sfls-nav ul li.has-dropdown .dropdown li a:hover {

 color: #fff;

} .sfls-nav ul li.has-dropdown:hover a, .sfls-nav ul li.has-dropdown:focus a { /* 导航栏字体颜色*/ } .sfls-nav ul li.active > a {

 color: #FFAF00 !important;

} .sfls-nav ul li .form-group {

 border: 1px solid red;
 width: 100%;

}

1. sfls-navbar{

position: fixed; display: inline-block; z-index:30; width:250px; left:300px; top:300px; /*margin-top: 300px; margin-left: 15%;*/ border-radius: 20px; background-color: rgba(255,255,255,0.8); -webkit-box-shadow: 0px 10px 24px -7px rgba(50,50,50, 0.35);

 -moz-box-shadow: 0px 10px 24px -7px    rgba(50,50,50, 0.35);
 -ms-box-shadow: 0px 10px 24px -7px     rgba(50,50,50, 0.35);
 -o-box-shadow: 0px 10px 24px -7px      rgba(50,50,50, 0.35);
 box-shadow: 0px 10px 24px -7px         rgba(50,50,50, 0.35);

opacity: 0;

 visibility: hidden;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

}

1. sfls-navbar.active {

 opacity: 1;
 visibility: visible;

}

1. sfls-navbar li{

list-style: none; }

1. sfls-navbar a{

color: #00A2C3; font-family: "Montserrat-Regular", sans-serif; padding-top: 10px; display:block; font-size: 13px; }

1. sfls-product{

position: relative; margin:25px; }

1. sfls-hero {

 background: #fff url("") no-repeat center center;

}

1. sfls-hero .btn {

 font-size: 24px;

}

1. sfls-hero .btn.btn-primary {

 padding: 15px 25px !important;

}

1. sfls-hero .flexslider {

 border: none;
 z-index: 1;
 margin-bottom: 0;

}

1. sfls-hero .flexslider .slides {

 position: relative;
 overflow: hidden;

}

1. sfls-hero .flexslider .slides li {

 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
 min-height: 800px;

}

1. sfls-hero .flexslider .flex-control-nav {

 bottom: 40px;
 z-index: 1000;

}

1. sfls-hero .flexslider .flex-control-nav li a {

 background: rgba(255, 255, 255, 0.2);
 box-shadow: none;
 width: 12px;
 height: 12px;
 cursor: pointer;

}

1. sfls-hero .flexslider .flex-control-nav li a.flex-active {

 cursor: pointer;
 background: rgba(255, 255, 255, 0.7);

}

1. sfls-hero .flexslider .flex-direction-nav {

 display: none;

}

1. sfls-hero .flexslider .slider-text {

 display: table;
 opacity: 0;
 min-height: 700px;

}

1. sfls-hero .flexslider .slider-text > .slider-text-inner {

 display: table-cell;
 vertical-align: middle;
 min-height: 700px;

}

1. sfls-hero .flexslider .slider-text > .slider-text-inner h2 {

 font-size: 24px;
 font-weight: 400;
 color: #000;
 text-transform: uppercase;
 letter-spacing: 2px;

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

 #sfls-hero .flexslider .slider-text > .slider-text-inner h2 {
   font-size: 40px;
 }

}

1. sfls-hero .flexslider .slider-text > .slider-text-inner .desc {

 background: rgba(255, 255, 255, 0.9);
 padding: 40px;

}

1. sfls-hero .flexslider .slider-text > .slider-text-inner .desc .price {

 font-size: 14px;
 letter-spacing: 3px;
 display: block;
 margin-bottom: 20px;

}

1. sfls-hero .flexslider .slider-text > .slider-text-inner .btn {

 font-size: 18px;

}

1. sfls-hero .flexslider .slider-text > .slider-text-inner .sfls-lead {

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

}

1. sfls-hero .flexslider .slider-text > .slider-text-inner .sfls-lead .icon-heart {

 color: #d9534f;

}

1. sfls-header,
2. sfls-counter,

.sfls-bg {

 background-size: cover;
 background-position: top center;
 background-repeat: no-repeat;
 position: relative;

}

.sfls-bg {

 background-size: cover;
 background-position: center center;
 position: relative;
 width: 100%;
 float: left;
 position: relative;

}

1. sfls-counter {

 height: 100px;

}

1. sfls-counter .display-t,
2. sfls-counter .display-tc {

 height: 500px;
 display: table;
 width: 100%;

} @media screen and (max-width: 992px) {

 #sfls-counter {
   height: inherit;
   padding: 7em 0;
 }
 #sfls-counter .display-t,
 #sfls-counter .display-tc {
   height: inherit;
 }

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

 #sfls-counter {
   height: inherit;
   padding: 7em 0;
 }
 #sfls-counter .display-t,
 #sfls-counter .display-tc {
   height: inherit;
 }

}

1. sfls-homepage{

margin: 25px; margin-top:0px; }

1. sfls-homepage .row{

margin: 25px; }

.width-full-box{ width: 1200px; background-color: #333;

}

.sfls-cover {

 height: 800px;
 background-size: contain;
 background-position: top center;
 background-repeat: no-repeat;
 position: relative;
 float:right;
 width: 100%;

} .sfls-cover .overlay {

 z-index: 0;
 position: absolute;
 bottom: 0;
 top: 0;
 left: 0;
 right: 0;
 background: rgba(0, 0, 0, 0.2);

/* banner颜色深*/ } .sfls-cover > .sfls-container {

 position: relative;
 z-index: 10;

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

 .sfls-cover {
   height: 600px;
 }

} .sfls-cover .display-t, .sfls-cover .display-tc {

 z-index: 9;
 height: 900px;
 display: table;
 width: 100%;

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

 .sfls-cover .display-t,
 .sfls-cover .display-tc {
   height: 600px;
 }

} .sfls-cover.sfls-cover-sm { top:80px;

 height: 200px;

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

 .sfls-cover.sfls-cover-sm {
   height: 200px;
 }

} .sfls-cover.sfls-cover-sm .display-t, .sfls-cover.sfls-cover-sm .display-tc {

 height: 200px;
 display: table;
 width: 100%;

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

 .sfls-cover.sfls-cover-sm .display-t,
 .sfls-cover.sfls-cover-sm .display-tc {
   height: 200px;
 }

}

.about-content {

 margin-bottom: 7em;

} .about-content img {

 border: 1px solid rgba(0, 0, 0, 0.05);
 padding: 10px;

} .about-content .desc {

 margin-bottom: 3em;

}

.sfls-staff {

 text-align: center;
 margin-bottom: 30px;

} .sfls-staff img {

 width: 170px;
 margin-bottom: 20px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;

} .sfls-staff h3 {

 font-size: 24px;
 margin-bottom: 5px;

} .sfls-staff p {

 margin-bottom: 30px;

} .sfls-staff .role {

 color: #bfbfbf;
 margin-bottom: 30px;
 font-weight: normal;
 display: block;

}

.sfls-social-icons {

 margin: 0;
 padding: 0;

} .sfls-social-icons li {

 margin: 0;
 padding: 0;
 list-style: none;
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;

} .sfls-social-icons li a {

 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;
 color: #fc3842;
 padding-left: 10px;
 padding-right: 10px;

} .sfls-social-icons li a i {

 font-size: 20px;

}

.sfls-contact-info ul {

 padding: 0;
 margin: 0;

} .sfls-contact-info ul li {

 padding: 0 0 0 40px;
 margin: 0 0 30px 0;
 list-style: none;
 position: relative;

} .sfls-contact-info ul li:before {

 color: #fc3842;
 position: absolute;
 left: 0;
 top: .05em;
 font-family: Montserrat-Light, sans-serif;

speak: none;

 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

} .sfls-contact-info ul li.address:before {

 font-size: 30px;
 content: "\e9d1";

} .sfls-contact-info ul li.phone:before {

 font-size: 23px;
 content: "\e9f4";

} .sfls-contact-info ul li.email:before {

 font-size: 23px;
 content: "\e9da";

} .sfls-contact-info ul li.url:before {

 font-size: 23px;
 content: "\e9af";

}

1. sfls-header .display-tc,
2. sfls-counter .display-tc,

.sfls-cover .display-tc {

 display: table-cell !important;
 vertical-align: middle;

}

1. sfls-header .display-tc h1, #sfls-header .display-tc h2,
2. sfls-counter .display-tc h1,
3. sfls-counter .display-tc h2,

.sfls-cover .display-tc h1, .sfls-cover .display-tc h2 {

 margin: 0;
 padding: 0;
 color: white;

}

1. sfls-header .display-tc h1,
2. sfls-counter .display-tc h1,

.sfls-cover .display-tc h1 {

 margin-bottom: 0px;
 font-size: 60px;
 line-height: 1.5;
 text-transform: uppercase;
 font-weight: 700;

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

 #sfls-header .display-tc h1,
 #sfls-counter .display-tc h1,
 .sfls-cover .display-tc h1 {
   font-size: 40px;
 }

}

1. sfls-header .display-tc h2,
2. sfls-counter .display-tc h2,

.sfls-cover .display-tc h2 {

 font-size: 20px;
 line-height: 1.5;
 margin-bottom: 30px;
 font-family: JohnstonITCStd-Light;

}

1. sfls-header .display-tc h2 a,
2. sfls-counter .display-tc h2 a,

.sfls-cover .display-tc h2 a {

 color: rgba(255, 255, 255, 0.7);
 border-bottom: 1px solid rgba(255, 255, 255, 0.6);

}

1. sfls-header .display-tc .btn,
2. sfls-counter .display-tc .btn,

.sfls-cover .display-tc .btn {

 padding: 15px 30px;
 background: #fc3842 !important;
 color: #fff;
 border: none !important;
 font-size: 18px;
 text-transform: uppercase;

}

1. sfls-header .display-tc .btn:hover,
2. sfls-counter .display-tc .btn:hover,

.sfls-cover .display-tc .btn:hover {

 background: #fc3842 !important;
 -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
 -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
 box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;

}

1. sfls-header .display-tc .form-inline .form-group,
2. sfls-counter .display-tc .form-inline .form-group,

.sfls-cover .display-tc .form-inline .form-group {

 width: 100% !important;
 margin-bottom: 10px;

}

1. sfls-header .display-tc .form-inline .form-group .form-control,
2. sfls-counter .display-tc .form-inline .form-group .form-control,

.sfls-cover .display-tc .form-inline .form-group .form-control {

 width: 100%;
 background: #fff;
 border: none;

}

1. sfls-counter {

 text-align: center;

}

1. sfls-counter .counter {

 font-size: 50px;
 margin-bottom: 10px;
 color: #000;
 font-weight: 100;
 display: block;

}

1. sfls-counter .counter-label {

 margin-bottom: 0;
 text-transform: uppercase;
 color: rgba(0, 0, 0, 0.5);
 letter-spacing: 1px;
 font-family: Montserrat-Light, sans-serif;}

1. sfls-counter .feature-center {

 padding: 40px 20px;
 background: rgba(255, 255, 255, 0.8);

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

 #sfls-counter .feature-center {
   margin-bottom: 50px;
 }

}

1. sfls-counter .icon {

 width: 70px;
 height: 70px;
 text-align: center;
 background: #fc3842;
 -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
 box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
 margin-bottom: 20px;

}

1. sfls-counter .icon i {

 height: 70px;
 color: #fff;

}

1. sfls-counter .icon i:before {

 display: block;
 text-align: center;
 margin-left: 3px;

}

/* .sfls-bg-section {

 background: rgba(0, 0, 0, 0.05);

}

• /

1. sfls-services,
2. sfls-started,
3. sfls-testimonial,
4. sfls-started,
5. sfls-product,
6. sfls-about,
7. sfls-contact,
8. sfls-footer {

 padding: 7em 0;
 clear: both;

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

 #sfls-services,
 #sfls-started,
 #sfls-testimonial,
 #sfls-started,
 #sfls-product,
 #sfls-about,
 #sfls-contact,
 #sfls-footer {
   padding: 3em 0;
 }

}

.feature-center {

 padding-left: 20px;
 padding-right: 20px;
 float: left;
 width: 100%;
 margin-bottom: 40px;

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

 .feature-center {
   margin-bottom: 50px;
 }

} .feature-center .desc {

 padding-left: 180px;

} .feature-center .icon {

 width: 90px;
 height: 90px;
 background: #fc3842;
 display: table;
 text-align: center;
 margin: 0 auto 30px auto;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;

} .feature-center .icon i {

 display: table-cell;
 vertical-align: middle;
 height: 90px;
 font-size: 40px;
 line-height: 40px;
 color: #fff;

} .feature-center p, .feature-center h3 {

 margin-bottom: 30px;

} .feature-center h3 {

 text-transform: uppercase;
 font-size: 15px;
 letter-spacing: 1px;
 font-weight: 600;

}

.product {

 margin-bottom: 40px;

} .product .product-grid {

 background-size: cover;
 background-position: top center;
 background-repeat: no-repeat;
 position: relative;
 height: 350px;
 margin-bottom: 20px;
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;

} .product .product-grid .sale {

 position: absolute;
 top: 10px;
 left: 10px;
 padding: 10px;
 z-index: 100;
 background: #fc3842;
 color: #fff;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;

} .product .product-grid .inner {

 display: table;
 height: 350px;
 width: 100%;
 opacity: 0;
 background: rgba(0, 0, 0, 0.3);
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;

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

 .product .product-grid .inner {
   opacity: 1;
   background: transparent;
 }

} .product .product-grid .inner p {

 display: table-cell;
 vertical-align: middle;

} .product .product-grid .inner p .icon {

 padding: 7px 10px;
 color: #fff;
 background: #fc3842;

} .product .product-grid .inner p .icon:hover, .product .product-grid .inner p .icon:focus {

 color: #fc3842;
 background: #fff;

} .product .desc h3 {

 font-size: 14px;
 letter-spacing: 1px;
 text-transform: uppercase;
 margin-bottom: 5px;
 font-weight: bold;
 line-height: 24px;

} .product .desc h3 a {

 color: #000;

} .product .desc .price {

 letter-spacing: 2px;
 text-transform: uppercase;

} .product:hover .product-grid, .product:focus .product-grid {

 -webkit-box-shadow: 0px 10px 24px -7px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0px 10px 24px -7px rgba(0, 0, 0, 0.35);
 -ms-box-shadow: 0px 10px 24px -7px rgba(0, 0, 0, 0.35);
 -o-box-shadow: 0px 10px 24px -7px rgba(0, 0, 0, 0.35);
 box-shadow: 0px 10px 24px -7px rgba(0, 0, 0, 0.35);

} .product:hover .inner, .product:focus .inner {

 opacity: 1;

} .product:hover .desc h3 a, .product:focus .desc h3 a {

 color: #fc3842;

}

.product-carousel {

 margin-bottom: 7em;

}

.sfls-tabs .sfls-tab-nav {

 clear: both;
 margin: 0 0 3em 0;
 padding: 3px;
 float: left;
 width: 100%;
 background: #00cfc8;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 border-radius: 4px;

} .sfls-tabs .sfls-tab-nav li {

 float: left;
 margin: 0;
 padding: 0;
 width: 33.33%;
 text-align: center;
 list-style: none;
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;

} .sfls-tabs .sfls-tab-nav li .icon {

 font-size: 30px;

} .sfls-tabs .sfls-tab-nav li a {

 padding: 20px;
 width: 100%;
 float: left;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 border-radius: 4px;
 color: #FFF;

} .sfls-tabs .sfls-tab-nav li a:hover { color: #193651;

} .sfls-tabs .sfls-tab-nav li.active a {

 background: #fff;

color: #fc3842;

} .sfls-tabs .sfls-tab-content-wrap {

 clear: both;
 position: relative;
 top: 70px;

} .sfls-tabs .sfls-tab-content-wrap .tab-content {

 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 opacity: 0;
 visibility: hidden;

} .sfls-tabs .sfls-tab-content-wrap .tab-content.active {

 opacity: 1;
 visibility: visible;

} .sfls-tabs .sfls-tab-content-wrap .tab-content .price {

 letter-spacing: 2px;
 border: 2px solid #fc3842;
 display: inline-block;
 margin-bottom: 20px;
 padding: 7px 20px 10px 20px;

} .sfls-tabs .sfls-tab-content-wrap ul {

 padding: 0;
 margin: 0;
 margin-bottom: 3em;

} .sfls-tabs .sfls-tab-content-wrap h3{

 color: #fc3842;

} .sfls-tabs .sfls-tab-content-wrap ul li {

 list-style: none;
 margin-bottom: 20px;
 position: relative;
 padding-left: 30px;

} .sfls-tabs .sfls-tab-content-wrap ul li:before {

 font-family: Montserrat-Light, sans-serif;

position: absolute;

 top: 0;
 left: 0;
 content: '\e116';

} .sfls-tabs .sfls-tab-content-wrap .feed {

 width: 100%;
 float: left;
 margin-bottom: 7em;

} .sfls-tabs .sfls-tab-content-wrap .feed > div {

 width: 100%;
 float: left;
 margin-bottom: 1em;

} .sfls-tabs .sfls-tab-content-wrap .feed > div blockquote {

 border-left: 0;
 padding: 20px;
 background: rgba(255,202,84, 1);

} .sfls-tabs .sfls-tab-content-wrap .feed > div h3 { font-family: Montserrat-Light, sans-serif;

 font-size: 18px;
 display: inline-block;
 padding-right: 20px;

color: #00A2C3; } .sfls-tabs .sfls-tab-content-wrap .feed > div .rate {

 color: #ffba00;

} .sfls-tabs .icon-xlg {

 font-size: 400px;
 margin-bottom: 30px;
 text-align: center;

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

 .sfls-tabs .icon-xlg {
   font-size: 300px;
 }

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

 .sfls-tabs .icon-xlg {
   font-size: 200px;
 }

} .sfls-tabs .icon-xlg i {

 color: #fc3842;

}

.sfls-heading {

 margin-bottom: 5em;

} .sfls-heading.sfls-heading-sm {

 margin-bottom: 2em;

} .sfls-heading h2 {

 font-size: 24px;
 margin-bottom: 20px;
 line-height: 1.5;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #000;

} .sfls-heading p {

 font-size: 18px;
 line-height: 1.5;
 color: #828282;

} .sfls-heading span {

 display: block;
 margin-bottom: 10px;
 text-transform: uppercase;
 font-size: 12px;
 letter-spacing: 2px;
 font-family: Montserrat-Light, sans-serif;

}

1. sfls-testimonial {

 background: transparent;

}

1. sfls-testimonial .testimony-slide {

 text-align: center;

} /*背景颜色*/

1. sfls-testimonial .testimony-slide span {

 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-weight: 700;
 display: block;

}

1. sfls-testimonial .testimony-slide figure {

 margin-bottom: 10px;
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;

}

1. sfls-testimonial .testimony-slide figure img {

 width: 100px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;

}

1. sfls-testimonial .testimony-slide blockquote {

 border: none;
 margin: 30px auto;
 width: 50%;
 position: relative;
 padding: 0;

} @media screen and (max-width: 992px) {

 #sfls-testimonial .testimony-slide blockquote {
   width: 100%;
 }

}

1. sfls-testimonial .arrow-thumb {

 position: absolute;
 top: 40%;
 display: block;
 width: 100%;

}

1. sfls-testimonial .arrow-thumb a {

 font-size: 32px;
 color: #dadada;

}

1. sfls-testimonial .arrow-thumb a:hover, #sfls-testimonial .arrow-thumb a:focus, #sfls-testimonial .arrow-thumb a:active {

 text-decoration: none;

}

1. sfls-started {

 background: #fc3842;

}

1. sfls-started .sfls-heading h2 {

 color: #fff;
 margin-bottom: 20px !important;

}

1. sfls-started .sfls-heading p {

 color: rgba(255, 255, 255, 0.6);

}

1. sfls-started .form-control {

 background: rgba(255, 255, 255, 0.2);
 border: none !important;
 color: #fff;
 font-size: 16px !important;
 width: 100%;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

}

1. sfls-started .form-control::-webkit-input-placeholder {

 color: #fff;

}

1. sfls-started .form-control:-moz-placeholder {

 /* Firefox 18- */
 color: #fff;

}

1. sfls-started .form-control::-moz-placeholder {

 /* Firefox 19+ */
 color: #fff;

}

1. sfls-started .form-control:-ms-input-placeholder {

 color: #fff;

}

1. sfls-started .form-control:focus {

 background: rgba(255, 255, 255, 0.3);

}

1. sfls-started .btn {

 height: 54px;
 border: none !important;
 background: rgba(0, 0, 0, 0.8);
 color: #fff;
 font-size: 16px;
 text-transform: uppercase;
 font-weight: 400;
 padding-left: 50px;
 padding-right: 50px;

}

1. sfls-started .form-inline .form-group {

 width: 100% !important;
 margin-bottom: 10px;

}

1. sfls-started .form-inline .form-group .form-control {

 width: 100%;

}

1. sfls-footer {

}

1. sfls-footer .sfls-footer-links {

 padding: 0;
 margin: 0;

}

1. sfls-footer .sfls-footer-links li {

 padding: 0;
 margin: 0;
 list-style: none;

} /*脚注*/

1. sfls-footer .sfls-footer-links li a {

padding:5px 8px;

color: #00A2C3; }

1. sfls-footer .sfls-footer-links li a:hover {

color: #fc3842;

}

1. sfls-footer .sfls-widget {

 margin-bottom: 30px;

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

 #sfls-footer .sfls-widget {
   text-align: left;
 }

}

1. sfls-footer .sfls-widget p {

color: #fc3842; }

1. sfls-footer .sfls-widget h3 {

 margin-bottom: 15px;

color:#fc3842;

 font-weight: bold;
 font-size: 18px;
 letter-spacing: 2px;
 text-transform: uppercase;

}

1. sfls-footer .copyright .block {

 display: block;

}

1. sfls-footer .copyright{

color:#FFAF00; }

1. map {

 height: 500px;
 width: 100%;

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

 #map {
   height: 400px;
 }

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

 #map {
   height: 200px;
 }

}

1. sfls-offcanvas {

 position: absolute;
 z-index: 1901;
 width: 270px;
 background: black;
 top: 0;
 right: 0;
 top: 0;
 bottom: 0;
 padding: 45px 40px 40px 40px;
 overflow-y: auto;
 display: none;
 -moz-transform: translateX(270px);
 -webkit-transform: translateX(270px);
 -ms-transform: translateX(270px);
 -o-transform: translateX(270px);
 transform: translateX(270px);
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

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

 #sfls-offcanvas {
   display: block;
 }

} .offcanvas #sfls-offcanvas {

 -moz-transform: translateX(0px);
 -webkit-transform: translateX(0px);
 -ms-transform: translateX(0px);
 -o-transform: translateX(0px);
 transform: translateX(0px);

}

1. sfls-offcanvas a {

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

}

1. sfls-offcanvas a:hover {

 color: rgba(255, 255, 255, 0.8);

}

1. sfls-offcanvas ul {

 padding: 0;
 margin: 0;

}

1. sfls-offcanvas ul li {

 padding: 0;
 margin: 0;
 list-style: none;

}

1. sfls-offcanvas ul li.search {

 float: left;
 width: 100%;
 font-family: JohnstonITCStd-Light;

-webkit-transition: 0.3s;

 -o-transition: 0.3s;
 transition: 0.3s;
 padding: 0;
 margin: 5px 0 0 0;

}

1. sfls-offcanvas ul li input[type=text] {

 padding: 6px 10px;
 width: 100%;
 border: 1px solid rgba(255, 255, 255, 0.1);
 float: right;
 font-size: 13px;
 margin-top: 4px;
 background: transparent;
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;

}

1. sfls-offcanvas ul li input[type=text]:focus {

 width: 100%;
 outline: none;

}

1. sfls-offcanvas ul li button {

 margin-top: 4px;
 padding: 6px;
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.1);
 margin-left: 1px;

}

1. sfls-offcanvas ul li button i {

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

}

1. sfls-offcanvas ul li button:hover, #sfls-offcanvas ul li button:focus {

 background: transparent !important;

}

1. sfls-offcanvas ul li button:hover i, #sfls-offcanvas ul li button:focus i {

 color: white;

}

1. sfls-offcanvas ul li.shopping-cart {

 float: left;

}

1. sfls-offcanvas ul li a.cart {

 display: block;
 margin-top: 30px;
 color: rgba(255, 255, 255, 0.5);

}

1. sfls-offcanvas ul li a.cart span {

 position: relative;

}

1. sfls-offcanvas ul li a.cart span small {

 position: absolute;
 top: -20px;
 right: -15px;
 padding: 10px 6px;
 line-height: 0;
 font-size: 11px;
 background: #fc3842;
 color: white;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;

}

1. sfls-offcanvas ul li > ul {

 padding-left: 20px;
 display: none;

}

1. sfls-offcanvas ul li.offcanvas-has-dropdown > a {

 display: block;
 position: relative;

}

1. sfls-offcanvas ul li.offcanvas-has-dropdown > a:after {

 position: absolute;
 right: 0px;
 font-family: Montserrat-Light, sans-serif;

speak: none;

 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 content: "\e921";
 font-size: 20px;
 color: rgba(255, 255, 255, 0.2);
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

}

1. sfls-offcanvas ul li.offcanvas-has-dropdown.active a:after {

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

}

.uppercase {

 font-size: 14px;
 color: #000;
 margin-bottom: 10px;
 font-weight: 700;
 text-transform: uppercase;

} /*回到顶部*/ .gototop {

 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 999;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

} .gototop.active {

 opacity: 1;
 visibility: visible;

} .gototop a {

 width: 70px;
 height: 70px;
 display: table;
 background: rgba(0,0,0,0);

background-image: url("https://static.igem.org/mediawiki/2017/a/a4/Sfls-Gototop.svg");

 color: #fff;
 text-align: center;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 border-radius: 4px;

} .gototop a i {

 height: 50px;
 display: table-cell;
 vertical-align: middle;

} .gototop a:hover, .gototop a:active, .gototop a:focus {

 text-decoration: none;
 outline: none;

background-image: url("https://static.igem.org/mediawiki/2017/6/64/Sfls-Gototophover.svg"); }

.sfls-nav-toggle {

 width: 25px;
 height: 25px;
 cursor: pointer;
 text-decoration: none;

} .sfls-nav-toggle.active i::before, .sfls-nav-toggle.active i::after {

 background: #444;

} .sfls-nav-toggle:hover, .sfls-nav-toggle:focus, .sfls-nav-toggle:active {

 outline: none;
 border-bottom: none !important;

} .sfls-nav-toggle i {

 position: relative;
 display: inline-block;
 width: 25px;
 height: 2px;
 color: #252525;
 font: bold 14px/.4 Helvetica;
 text-transform: uppercase;
 text-indent: -55px;
 background: #252525;
 transition: all .2s ease-out;

} .sfls-nav-toggle i::before, .sfls-nav-toggle i::after {

 content: ;
 width: 25px;
 height: 2px;
 background: #252525;
 position: absolute;
 left: 0;
 transition: all .2s ease-out;

} .sfls-nav-toggle.sfls-nav-white > i {

 color: #fff;
 background: #000;

} .sfls-nav-toggle.sfls-nav-white > i::before, .sfls-nav-toggle.sfls-nav-white > i::after {

 background: #000;

}

.sfls-nav-toggle i::before {

 top: -7px;

}

.sfls-nav-toggle i::after {

 bottom: -7px;

}

.sfls-nav-toggle:hover i::before {

 top: -10px;

}

.sfls-nav-toggle:hover i::after {

 bottom: -10px;

}

.sfls-nav-toggle.active i {

 background: transparent;

}

.sfls-nav-toggle.active i::before {

 background: #fff;
 top: 0;
 -webkit-transform: rotateZ(45deg);
 -moz-transform: rotateZ(45deg);
 -ms-transform: rotateZ(45deg);
 -o-transform: rotateZ(45deg);
 transform: rotateZ(45deg);

}

.sfls-nav-toggle.active i::after {

 background: #fff;
 bottom: 0;
 -webkit-transform: rotateZ(-45deg);
 -moz-transform: rotateZ(-45deg);
 -ms-transform: rotateZ(-45deg);
 -o-transform: rotateZ(-45deg);
 transform: rotateZ(-45deg);

}

.sfls-nav-toggle {

 position: absolute;
 right: 0px;
 top: 10px;
 z-index: 21;
 padding: 6px 0 0 0;
 display: block;
 margin: 0 auto;
 display: none;
 height: 44px;
 width: 44px;
 z-index: 2001;
 border-bottom: none !important;

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

 .sfls-nav-toggle {
   display: block;
 }

}

.btn {

 margin-right: 4px;
 margin-bottom: 4px;
 font-family: Montserrat-Light, sans-serif;

font-size: 16px;

 font-weight: 400;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 -ms-border-radius: 2px;
 border-radius: 2px;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;
 padding: 8px 20px;

} .btn.btn-md {

 padding: 8px 20px !important;

} .btn.btn-lg {

 padding: 18px 36px !important;

} .btn:hover, .btn:active, .btn:focus { color: white;

 box-shadow: none !important;
 outline: none !important;

}

.btn-primary { color: #fff;

 background: #fc3842;

 border: 2px solid #fc3842;

} .btn-primary:hover, .btn-primary:focus, .btn-primary:active {

 background: #ef2235 !important;

 border-color: #ef2235 !important;

} .btn-primary.btn-outline { border-color: #00A2C3; border-radius: 10px; color:#00A2C3;

 background: transparent;
 border: 2px solid;

} .btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active { color: #fff;

 background: #fc3842;

}

.btn-success {

 background: #5cb85c;
 color: #fff;
 border: 2px solid #5cb85c;

} /* .btn-success:hover, .btn-success:focus, .btn-success:active {

 background: #4cae4c !important;
 border-color: #4cae4c !important;

}

• /

.btn-success.btn-outline {

 background: transparent;
 color: #5cb85c;
 border: 2px solid #5cb85c;

} .btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {

 background: #5cb85c;
 color: #fff;

}

.btn-info {

 background: #5bc0de;
 color: #fff;
 border: 2px solid #5bc0de;

} .btn-info:hover, .btn-info:focus, .btn-info:active {

 background: #46b8da !important;
 border-color: #46b8da !important;

} .btn-info.btn-outline {

 background: transparent;
 color: #5bc0de;
 border: 2px solid #5bc0de;

} .btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {

 background: #5bc0de;
 color: #fff;

}

.btn-warning {

 background: #f0ad4e;
 color: #fff;
 border: 2px solid #f0ad4e;

} .btn-warning:hover, .btn-warning:focus, .btn-warning:active {

 background: #eea236 !important;
 border-color: #eea236 !important;

} .btn-warning.btn-outline {

 background: transparent;
 color: #f0ad4e;
 border: 2px solid #f0ad4e;

} .btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {

 background: #f0ad4e;
 color: #fff;

}

.btn-danger {

 background: #d9534f;
 color: #fff;
 border: 2px solid #d9534f;

} .btn-danger:hover, .btn-danger:focus, .btn-danger:active {

 background: #d43f3a !important;
 border-color: #d43f3a !important;

} .btn-danger.btn-outline {

 background: transparent;
 color: #d9534f;
 border: 2px solid #d9534f;

} .btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {

 background: #d9534f;
 color: #fff;

}

.btn-outline {

 background: none;
 border: 2px solid gray;
 font-size: 16px;
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;

} .btn-outline:hover, .btn-outline:focus, .btn-outline:active {

 box-shadow: none;

}

.btn.with-arrow {

 position: relative;
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;

} .btn.with-arrow i {

 visibility: hidden;
 opacity: 0;
 position: absolute;
 right: 0px;
 top: 50%;
 margin-top: -8px;
 -webkit-transition: 0.2s;
 -o-transition: 0.2s;
 transition: 0.2s;

} .btn.with-arrow:hover {

 padding-right: 50px;

} .btn.with-arrow:hover i {

 color: #fff;
 right: 18px;
 visibility: visible;
 opacity: 1;

}

.form-control {

 box-shadow: none;
 background: transparent;
 border: 2px solid rgba(0, 0, 0, 0.1);
 height: 54px;
 font-size: 18px;
 font-weight: 300;

} .form-control:active, .form-control:focus {

 outline: none;
 box-shadow: none;
 border-color: #fc3842;

}

.row-pb-md {

 padding-bottom: 4em !important;

}

.row-pb-sm {

 padding-bottom: 2em !important;

}

.sfls-loader {

 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url("") center no-repeat #fff;

}

.js .animate-box {

 opacity: 0;

}