Difference between revisions of "Template:INSA-Lyon/style"

Revision as of 16:51, 14 November 2016 (view source) Mickaelhubert (Talk | contribs) (→‎==) ← Older edit		Revision as of 16:46, 17 November 2016 (view source) Suxiaohui (Talk | contribs) Newer edit →
Line 2,850:		Line 2,850:
	#top {		#top {
	background-attachment: fixed;		background-attachment: fixed;
−	background-image: url("https://static.igem.org/mediawiki/2016/3/31/T--INSA-Lyon--fondtop.png");	+	background-image: url("https://static.igem.org/mediawiki/2016/0/08/T--INSA-Lyon--Banner_HomePage_Results.png");
	min-height:100vh;		min-height:100vh;
	background-position: center;		background-position: center;

---

Revision as of 16:46, 17 November 2016

/* Table of Content

======================================

1. BASIC TYPOGRAPHY
2. HEADER
3. MENU
4. SLIDER
5. ABSTRACT
6. SAFETY
7. ABOUT
8. OUR TEAM
9. LOGOS BRAND
10. FOOTER
11. ERROR PAGE
12. RESPONSIVE STYLE

/*--------------------*/ /* BASIC TYPOGRAPHY */ /*--------------------*/

body,html{

 	height: 100%;	

}

body { font-family: 'Open Sans', sans-serif; font-size: 16px; overflow-x: hidden !important; color: #838282; }

ul{ padding: 0; margin: 0; list-style: none; }

a{ text-decoration: none; color: #2f2f2f; }

a:focus{ outline: none; text-decoration: none; }

a:visited {

 color: #c70303;

}

h1,h2,h3,h4,h5,h6{ font-family: 'Lato', sans-serif; }

h2 { color: #fff; font-size: 30px; font-weight: 700; line-height: 40px; margin: 0;

       padding-top: 40px;

padding-bottom: 5px; }

h4{

 color: #c61525;
 font-size: 25px;

}

h7{

  font-size: 16px;
  text-align: left;

}

img{

border:none;

}

.figure{

 font-size:14px;
 line-height: 15px;
 padding-bottom: 30px;
 text-align: left;

}

.video{

   max-width: 100%;
   height: auto;

}

1. sidebar.affix {

   top: 70vh;
   

}

.contents-sidebar {

   padding-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
   background-color: white;

}

.contents-sidebar .nav>li>a {

   color: #999;
   padding: 4px 20px;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.4em;
   margin-bottom: 10px;

}

.contents-sidebar .nav .nav>li>a {

   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 20px;
   font-size: 12px;

}

.contents-sidebar .nav .nav .nav>li>a {

   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 20px;
   font-size: 11px;

}

.contents-sidebar .nav>.active>a {

   color: #d7000e;

}

.contents-sidebar .nav>li>a {

   border-left: 2px solid transparent;

} .contents-sidebar .nav>.active>a, .contents-sidebar .nav>li>a:hover, .contents-sidebar .nav>li>a:focus {

   color: #d7000e;
   text-decoration: none;
   background-color: transparent;
   border-left: 2px solid #d7000e;
   font-weight: 700;

}

.contents-sidebar .nav .nav>.active>a, .contents-sidebar .nav .nav>li>a:hover, .contents-sidebar .nav .nav>li>a:focus {

   font-weight: 500;

}

.contents-sidebar .nav ul.nav {

   display: none;

}

.contents-sidebar .nav>.active>ul.nav {

   display: block;

}

1. sidebar {

   max-height: 85vh;
   overflow: auto;

}

/* Preloader */

1. preloader {

 position: fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:#fff; /* change if the mask should have another color then white */
 z-index:99999; /* makes sure it stays on top */ 

}

1. status {

 width:200px;
 height:200px;
 position:absolute;
 left:50%; /* centers the loading animation horizontally one the screen */
 top:50%; /* centers the loading animation vertically one the screen */
 background-image:url(""); /* path to your loading animation */
 background-repeat:no-repeat;
 background-position:center;
 margin:-100px 0 0 -100px; /* is width and height divided by two */

}

/*scrol to top*/

.scrollToTop {

 bottom: 60px;
 border-radius: 4px;
 display: none;
 font-size: 32px;
 line-height: 45px;
 font-weight: bold;
 height: 50px;
 position: fixed;
 right: 50px;
 text-align: center;
 text-decoration: none;
 width: 50px;
 z-index: 999;
 color: #fff;    
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -ms-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.scrollToTop:hover, .scrollToTop:focus{

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

}

/*--------------------*/ /* HEADER */ /*--------------------*/

1. header{

float: left; display: inline; width: 100%; }

.header-top{ background-color: #333; display: none; float: left; width: 100%; padding: 20px 0; }

1. search{

margin: 0 auto; width: 70%; }

1. search input {

 background-color: inherit;
 border: medium none;
 color: #fff;
 float: left;
 height: 100%;
 text-align: center;
 width: 95%;

}

1. search button[type="submit"] {

 background: inherit;
 border: medium none;
 color: #fff;
 height: 20px;
 width: 30px;

}

1. search-icon {

 font-size: 20px;
 height: 35px;
 line-height: 35px;
 position: absolute;
 right: 8%;
 text-align: center;
 top: 20px;
 width: 35px;

}

.header-bottom{ background-color: rgba(0, 0, 0, 0.02); border-bottom: 1px solid #e4e4e4; color: #949494; font-size: 12px; height: 20px; display: inline; float: left; width: 100%; overflow: hidden; padding: 0 15px; transition: all 0.3s ease 0s; }

.header-contact{ display: inline; float: left; width: 100%; }

.header-contact ul{} .header-contact ul li {

 border-left: 1px solid #e4e4e4;
 display: inline-block;
 float: left;
 margin-right: 10px;
 padding: 10px 12px;

}

.header-contact ul li:last-child{ border-right: 1px solid #e4e4e4; }

.phone{ font-size: 14px; }

.phone i{ margin-right: 5px; }

.mail{ font-size: 14px; } .mail i{ margin-right: 5px; }

.header-login{ display: inline; float: left; text-align: right; width: 100%; }

.login {

 border-left: 1px solid #e4e4e4;
 border-right: 1px solid #e4e4e4;
 color: #949494;
 display: inline-block;
 font-size: 14px;
 line-height: 20px;
 padding: 10px 15px;
 text-decoration: none;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.login:hover, .login:focus{ color: #fff; text-decoration: none; outline: none; }

/*login modal window*/

1. login-form {

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

}

1. login-form .modal-dialog {

 margin: 130px auto;
 width: 400px;

}

1. login-content {

 border-radius: 0;

}

1. login-content .modal-title {

 font-size: 20px;

}

1. login-content .modal-title i{

 margin-right: 5px;

}

1. login-content .form-group input{

 height: 35px;
 border-radius: 0;

}

1. login-content .form-control:focus {

 box-shadow: none;  

}

.loginbox label {

 float: left;
 width: 100%;

}

.loginbox label input{

 float: left;
 margin-right: 5px;

}

.loginbox label span {

 font-weight: normal;

}

.loginbox .signin-btn {

 border-radius: 0;
 margin-top: 10px;
 color: #fff;

}

.footer-box {

 text-align: left;
 font-size: 15px;

}

.footer-box a:hover, .footer-box a:focus{

 text-decoration: none;
 outline: none;

}

1. signup-content {

 display: none;

}

1. signup-content {

 border-radius: 0;

}

1. signup-content .modal-title {

 font-size: 20px;

}

1. signup-content .modal-title i{

 margin-right: 5px;

}

1. signup-content .form-group input{

 height: 35px;
 border-radius: 0;

}

1. signup-content .form-control:focus {

 box-shadow: none;  

}

.signupbox span {

 display: inline-block;
 font-size: 15px;
 margin-bottom: 10px;

}

.signupbox span a:hover{

 text-decoration: none;
 outline: none;

}

/*--------------------*/ /* MENU */ /*--------------------*/

1. menu-area{

background-color: #fff; display: inline; float: left; width: 100%; position: relative; }

1. menu-area #navbar {

 padding-right: 70px;

}

1. menu-area .navbar-default {

 background-color: #fff;
 border-color: #fff;
 margin-bottom: 0;

}

.navbar-brand {

 font-family: "Lato",sans-serif;
 font-size: 25px;
 font-weight: bold;
 margin-top: 14px;
 text-transform: uppercase;

}

.navbar-brand:hover, .navbar-brand:focus{ text-decoration: none; outline: none; }

.navbar-brand > img {

 display: block;
 margin-top: -20px;

}

.main-nav li {

 padding: 15px 0;
 position: relative;
 margin: 0 5px;

}

.navbar-default .navbar-nav > li > a {

 color: #333;
 display: inline-block !important;
 font-family: "Lato",sans-serif;
 font-size: 14px;
 padding-left: 10px;
 padding-right: 10px;
 text-transform: uppercase;
 width: 100%;

}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { border-top: 0px solid #d7000e; background: none; }

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

 background-color: transparent;  

}

.navbar-nav > li > a::before {

 background-color: transparent;
 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 0;  
 -webkit-transition: all 0.3s ease-in-out 0s;
 -o-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
 width: 0;

}

.main-nav > li > a:hover::before, .navbar-default .navbar-nav > .active > a::before, .navbar-default .navbar-nav > .open > a:hover::before {

 width: 100%;

}

.main-nav .dropdown:hover .dropdown-toggle::before{ width: 100%; }

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

 background-color: transparent; 

}

.navbar-nav > li > .dropdown-menu li {

 padding: 0;

}

.navbar-nav > li > .dropdown-menu > li > a { color: #333; font-family: "Lato",sans-serif; font-size: 14px; padding: 8px 20px; text-transform: uppercase; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-nav > li > .dropdown-menu > li > a:focus{ background-color: transparent; }

/*--------------------*/ /* SLIDER */ /*--------------------*/

1. slider{

display: inline; float: left; width: 100%; }

.main-slider {

 display: inline;
 float: left;
 height: 900px;
 margin-bottom: 0;
 width: 100%;

} .main-slider .slick-list {

 height: 100%;  

}

.single-slide{ float: left; display: inline; width: 100%; }

.single-slide img{ width: 100%; }

.slide-content {

 background-color: rgba(0, 0, 0, 0.7);
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;

}

.main-slider .slick-prev {

 left: 23px;

}

.main-slider .slick-next {

 right: 20px;

}

.main-slider .slick-prev, .main-slider .slick-next {

 background-color: rgba(0,0,0,0.5);
 top: 48%;
 height: 50px;
 width: 50px;
 z-index: 999;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.main-slider .slick-prev::before {

 content: "\f104";
 font-family: fontAwesome;
 font-size: 30px;

}

.main-slider .slick-next::before {

 content: "\f105";
 font-family: fontAwesome;
 font-size: 30px;

}

.main-slider .slick-dots {

 bottom: 10px;  

}

.main-slider .slick-dots li {

 background-color: rgba(0, 0, 0, 0.6);
 border-radius: 50%;

}

.main-slider .slick-dots li button::before {

 font-size: 25px;
 line-height: 21px;

}

.slide-article {

 display: inline;
 float: left;
 padding-left: 0px;
 padding-right: 20px;
 padding-top: 500px;
 width: 100%;

}

.slide-article h1 {

 color: #fff;
 font-size: 45px;
 font-weight: bold;
 line-height: 55px;
 margin-bottom: 25px;
 text-transform: uppercase;

}

.slide-article p {

 color: #fff;
 margin-bottom: 50px;

}

.read-more-btn{ color: #fff; border: 1px solid #fff; display: inline-block; padding: 22px 22px; font-weight: 700px; font-size: 16px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.read-more-btn:hover, .read-more-btn:focus{ color: #fff; text-decoration: none; outline: none; }

.slider-img{

 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;

}

/*--------------------*/ /* ABSTRACT */ /*--------------------*/

1. abstract{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.abstract-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.single-abstract{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-abstract:hover .abstract-icon{ color: #444; }

.single-abstract .abstract-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-abstract:hover .feat-title{ color: #444; }

.single-abstract p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* COLLABORATIONS */ /*--------------------*/

1. collaborations{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 25px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.collaborations-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.collaborations-content p{

 text-indent:50px;

}

.single-collaborations{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-collaborations:hover .collaborations-icon{ color: #444; }

.single-collaborations .collaborations-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-collaborations:hover .feat-title{ color: #444; }

.single-collaborations p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* HP */ /*--------------------*/

1. hp{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. hp a{

 font-size:16px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.hp-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.hp-content p{

 text-indent:50px;
 text-align:justify;

}

.single-hp{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-hp:hover .hp-icon{ color: #444; }

.single-hp .hp-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-hp:hover .feat-title{ color: #444; }

.single-hp p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* GOLD */ /*--------------------*/

1. gold{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. gold a{

 font-size:16px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.gold-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.gold-content p{

 text-indent:50px;
 text-align:justify;

}

.single-gold{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-gold:hover .gold-icon{ color: #444; }

.single-gold .gold-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-gold:hover .feat-title{ color: #444; }

.single-gold p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* SILVER */ /*--------------------*/

1. silver{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. silver a{

 font-size:16px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.silver-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.silver-content p{

 text-indent:50px;
 text-align:justify;

}

.single-silver{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-silver:hover .silver-icon{ color: #444; }

.single-silver .silver-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-silver:hover .feat-title{ color: #444; }

.single-silver p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* RESULTS */ /*--------------------*/

1. results{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. results a{

 font-size:16px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.results-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.results-content p{

 text-indent:50px;
 text-align:justify;

}

.single-results{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-results:hover .results-icon{ color: #444; }

.single-results .results-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-results:hover .feat-title{ color: #444; }

.single-results p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* ENGAGEMENT */ /*--------------------*/

1. engagement{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. engagement a{

 font-size:16px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.engagement-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.engagement-content p{

 text-indent:50px;
 text-align:justify;

}

.single-engagement{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-engagement:hover .engagement-icon{ color: #444; }

.single-engagement .engagement-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-engagement:hover .feat-title{ color: #444; }

.single-engagement p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* DESCRIPTION */ /*--------------------*/

1. description{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. description a{

 font-size:16px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.description-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.description-content p{

 text-indent:50px;
 text-align:justify;

}

.single-gold{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-description:hover .gold-icon{ color: #444; }

.single-description .gold-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-description:hover .feat-title{ color: #444; }

.single-description p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* DESIGN */ /*--------------------*/

1. design{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. design a{

 font-size: 16px;

}

1. design howdesign{

 text-align: right;

}

1. design h7{

 text-align: left;
 color: #d7000e;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.design-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.design-content p{

 text-indent:50px;
 text-align:right;

}

/*--------------------*/ /* INTEGRATED */ /*--------------------*/

1. integrated{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. integrated a{

 font-size: 16px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.integrated-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.integrated-content p{

 text-indent:50px;
 text-align:right;

}

/*--------------------*/ /* MODELING */ /*--------------------*/

1. modeling{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. modeling figcaption{

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

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.modeling-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.modeling-content p{

 text-indent:50px;
 text-align:justify;

}

.single-modeling{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-modeling:hover .safety-icon{ color: #444; }

.single-modeling .modeling-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-modeling:hover .feat-title{ color: #444; }

.single-modeling p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* INTERLAB */ /*--------------------*/

1. interlab{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. interlab a{

 font-size:16px;

}

1. interlabsummary h3{

       font-size: 35px;

position: relative; color: #d7000e; }

1. plcalibration h4{

       font-size: 25px;

position: relative; color: #d7000e; }

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.interlab-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.interlab-content p{

 text-indent:50px;
 text-align:justify;

}

.single-interlab{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-interlab:hover .gold-icon{ color: #444; }

.single-interlab .gold-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.interlab-gold:hover .feat-title{ color: #444; }

.interlab-gold p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* ACHIEVEMENTS */ /*--------------------*/

1. achievements{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. achievements a:link {

 color: #10b2c1;

}

1. achievements a:visited {

 color: #c61525;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.subtitle a:visited {

 color: #10b2c1;

}

.achievements-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.achievements-content p{

 text-indent:50px;
 text-align:justify;

}

.single-achievements{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-achievements:hover .achievements-icon{ color: #444; }

.single-achievements .achievements-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-achievements:hover .feat-title{ color: #444; }

.single-achievements p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* PARTS */ /*--------------------*/

1. parts{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. parts h4{

 color: #c61525;

}

1. parts h2{

 padding-top: 100px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 20px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.parts-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.parts-content p{

 text-indent:50px;
 text-align:justify;

}

/*--------------------*/ /* PROTOCOLS */ /*--------------------*/

1. protocols{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. protocols h4{

 color: #c61525;

}

1. protocols h2{

 padding-top: 100px;

}

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 20px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.protocols-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.protocols-content p{

 text-indent:50px;
 text-align:justify;

}

/*--------------------*/ /* SOFTWARE */ /*--------------------*/

1. software{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.software-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.software-content p{

 text-indent:50px;
 text-align:justify;

}

/*--------------------*/ /* ATTRIBUTIONS */ /*--------------------*/

1. attributions{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.attributions-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.attributions-content p{

 text-indent:50px;
 text-align:justify;

}

/*--------------------*/ /* SAFETY */ /*--------------------*/

1. safety{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.safety-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.safety-content p{

 text-indent:50px;
 text-align:justify;

}

.single-safety{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-safety:hover .safety-icon{ color: #444; }

.single-safety .safety-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-safety:hover .feat-title{ color: #444; }

.single-safety p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* PROOF */ /*--------------------*/

1. proof{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

.title-area {

 display: inline;
 float: left;
 padding: 0 150px;
 text-align: center;
 width: 100%;

}

.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }

.title-area .line {

 background-color: #777;
 display: inline-block;
 height: 2px;
 width: 60px;

}

.title-area p {

 color: #303030;
 line-height: 25px;
 margin-top: 20px;

}

.subtitle{ display: inline; float: left; width: 100%; }

.subtitle h3{ font-size: 35px; position: relative; color: #d7000e; }

.subtitle h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.proof-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.proof-content p{

 text-indent:50px;
 text-align:justify;

}

.single-proof{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-proof:hover .safety-icon{ color: #444; }

.single-proof .safety-icon {

 font-size: 35px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.single-proof:hover .feat-title{ color: #444; }

.single-proof p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* ABOUT */ /*--------------------*/

1. about{

background-color: #f8f8f8; display: inline; float: left; padding: 70px 0; width: 100%; }

.about-content { display: inline; float: left; margin-top: 50px; width: 100%; }

.our-skill{ display: inline; float: left; width: 100%; }

.our-skill h3{ position: relative; }

.our-skill h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.our-skill-content{ display: inline; float: left; width: 100%; margin-top: 50px; }

.our-skill-content p{ margin-bottom: 32px; }

.our-skill-content .progress {

 background-color: #f5f5f5;
 height: 30px; 
 border-radius: 0;
 margin-bottom: 24px;

}

.our-skill-content .progressbar-back-text, .our-skill-content .progressbar-front-text {

 font-size: 14px;
 height: 100%;
 line-height: 30px;  

}

.progress-title {

 font-size: 15px;
 font-weight: bold;
 left: 20px;
 line-height: 29px;
 position: absolute;
 text-transform: uppercase;
 top: 0;

}

.why-choose-us{ display: inline; float: left; width: 100%; }

.why-choose-us h3{ position: relative; }

.why-choose-us h3::after {

 content: "";
 height: 2px;
 left: 0;
 position: absolute;
 top: 40px;
 width: 65px;

}

.why-choose-group{ margin-top: 50px; }

.panel-group .panel {

 border-radius: 0px;

}

.panel-default > .panel-heading {

 background-color: #fff;
 border-color: #ddd;
 border-radius: 0;
 color: #333;
 padding: 0;

}

.panel-title > a { color: #222;

 display: block;
 padding: 10px 15px;

}

.panel-title > a:hover, .panel-title > a:focus{

	text-decoration: none;
	outline: none;

}

.panel-title > a span {

 float: right;
 font-size: 20px;

}

.why-choose-group .panel-body p {

 color: #555;
 font-size: 15px;
 line-height: 22px;

}

.why-choose-img {

 display: inline-block;
 float: left;
 margin-right: 14px;
 margin-bottom: 3px;
 width: 20%;

}

.six-sec-ease-in-out {

   -webkit-transition: width 6s ease-in-out;
   -moz-transition: width 6s ease-in-out;
   -ms-transition: width 6s ease-in-out;
   -o-transition: width 6s ease-in-out;
   transition: width 6s ease-in-out;

}

/*--------------------*/ /* TOP */ /*--------------------*/

1. top {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h5{ color: #c1000c;

       font-size: 45px;
       text-shadow: 2px 2px 4px white;

}

.top-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.top-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 50px;
 padding: 30px;

}

/*--------------------*/ /* TOP GOLD*/ /*--------------------*/

1. topgold {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topgold-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topgold-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP ACHIEVEMENTS*/ /*--------------------*/

1. topachievements {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topachievements-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topachievements-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP SAFETY*/ /*--------------------*/

1. topsafety {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topsafety-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topsafety-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP APTAMER*/ /*--------------------*/

1. topaptamer {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topaptamer-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topaptamer-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP HUMAN*/ /*--------------------*/

1. tophuman {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.tophuman-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.tophuman-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP INTEGRATED*/ /*--------------------*/

1. topintegrated {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topintegrated-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topintegrated-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP PROTOCOLS*/ /*--------------------*/

1. topprotocols {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topprotocols-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topprotocols-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP SOFTWARE*/ /*--------------------*/

1. topsoft {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topsoft-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topsoft-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP TEAM*/ /*--------------------*/

1. topteam {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

.topteam-overlay{

 background-color: rgba(0,0,0,0.7);
 height: 100vh;
 width:40vh;

}

.topteam-area{

 display: inline;
 float: left;
 margin-top: 10vh;
 width:100%;
 padding:50px;
 /*background-color: rgba(0,0,0,0.7);*/

}

.topteam-area h2{ color: #c1000c;

       text-shadow: 2px 2px 4px white;

}

.topteam-area p{ text-size:40px; }

/*--------------------*/ /* TOP COLLABORATIONS*/ /*--------------------*/

1. topcollaborations {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c; }

.topcollaborations-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topcollaborations-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP DESCRIPTION*/ /*--------------------*/

1. topdesc {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.toppdesc-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topdesc-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP PARTS*/ /*--------------------*/

1. topparts {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topparts-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topparts-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP ATTRIBUTIONS*/ /*--------------------*/

1. topattributions {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topattributions-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topattributions-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP DESIGN*/ /*--------------------*/

1. topdesign {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topdesign-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topdesign-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP PROOF*/ /*--------------------*/

1. topproof {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topproof-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topproof-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP RESULTS*/ /*--------------------*/

1. topresults {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topresults-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topresults-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP NOTEBOOK*/ /*--------------------*/

1. topnotebook {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topnotebook-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topnotebook-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP INTERLAB*/ /*--------------------*/

1. topinterlab {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topinterlab-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topinterlab-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP MODELLING*/ /*--------------------*/

1. topmodelling {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topmodelling-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topmodelling-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP HP*/ /*--------------------*/

1. tophp {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.tophp-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.tophp-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP SILVER*/ /*--------------------*/

1. topsilver {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topsilver-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topsilver-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP PRACTICES*/ /*--------------------*/

1. toppractices {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.toppractices-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.toppractices-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP ENGAGEMENT*/ /*--------------------*/

1. topengagement {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topengagement-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topengagement-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* OUR TEAM */ /*--------------------*/

1. our-team {

 display: inline;
 float: left;
 padding: 70px 0;
 width: 100%;
 padding-top: 100px;
 padding-left: 20vh;

}

1. our-team p{

 text-align:center;

}

.our-team-content{ display: inline; float: left; margin-top: 50px; width: 100%; }

.single-team-member {

 border: 2px solid #f5f5f5;
 display: inline;
 float: left;
 margin-top: 50px;
 margin-bottom: 50px;
 padding: 10px;
 padding-bottom: 50px;
 position: relative;
 text-align: center !important;
 width: 100%; 
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.single-team-member:hover{ -webkit-box-shadow: 0 8px 6px -6px #000; -moz-box-shadow: 0 8px 6px -6px #000; box-shadow: 0 8px 6px -6px #000; }

.team-member-img {

 background-color: #ffffff;
 margin-top: -65px;
 position: relative;

}

.team-member-img img{ width: 100%; }

.team-member-name {

 display: inline;
 float: left;
 padding: 25px 0 15px;
 width: 100%;

}

.team-member-name p {

 color: #222;
 font-size: 25px;
 font-weight: bold
 text-transform: uppercase;
 margin-bottom: 0;
 text-align: center;

}

.team-member-name span {

 color: #222;
 font-size: 14px;

}

.single-team-member > p {

 color: #222;
 font-size: 14px;
 line-height: 20px;
 padding: 0 10px;
 text-align: center;

}

.single-team-member:hover .team-member-link{ color: #fff; }

.single-team-member:hover .team-member-link>a{ color: #fff; }

.team-member-link {

 background: #fff none repeat scroll 0 0;
 color: #555;
 bottom: -20px;
 left: 0;  
 margin: 0 auto;
 position: absolute;
 right: 0;
 text-align: center;
 width: 80%;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.team-member-link a {

 display: inline-block;
 padding: 3px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.team-member-link a:visited {

 color: #c70303;

} .team-member-link a:hover, .team-member-link a:focus{

 display: inline-block;
 outline: none;

}

/*--------------------*/ /* LOGOS BRAND */ /*--------------------*/

1. logos-brand{

 background-color: #fff;
 display: inline;
 float: left;
 padding: 70px 0;
 width: 100%;

}

.logos-brand-area{

 display: inline;
 float: left;
 width: 100%;

}

.logos-brand-slide {

 margin-bottom: 0;
 width: 100%;

}

.logos-brand-slide .slick-slide{

 outline: none;

}

.single-brand {

 background-color: #f8f8f8;
 border: 1px solid #ccc;
 display: inline;
 float: left;
 height: 120px;
 padding-top: 10px;
 text-align: center;
 width: 100%;

}

.single-brand img {

 display: inline-block;

}

/*--------------------*/ /* FOOTER */ /*--------------------*/

1. footer{

 background-color: #171717;
 display: inline;
 float: left;
 padding: 10px 0;
 width: 100%;

}

.footer-left{

 display: inline;
 float: left;
 width: 100%;

}

.footer-left p {

 color: #5c5c5c;
 font-size: 14px;
 margin: 0;

}

.footer-left p a{

 color: #5c5c5c;

}

.footer-left p a:hover{

 text-decoration: none;
 outline: none;

}

.footer-right{

 display: inline;
 float: left;
 text-align: right;
 width: 100%;

}

.footer-right a{

 color: #5c5c5c;
 font-size: 18px;
 padding: 0 10px;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

/*--------------------*/ /* ERROR PAGE */ /*--------------------*/

1. error{

 display: inline;
 float: left;
 padding: 70px 0;
 width: 100%;

}

.errror-page-area{

 display: inline;
 float: left;
 text-align: center;
 width: 100%;

}

.error-title {

 border-radius: 50%;
 color: #fff;
 display: inline-block;
 font-size: 75px;
 margin-top: 0px;
 margin-bottom: 10px;
 padding: 40px 50px;

}

.error-content{

 display: inline;
 float: left;
 text-align: center;
 width: 100%;

}

.error-content span {

 font-size: 35px;
 font-weight: 300;

}

.error-content p {

 font-size: 18px;
 margin-top: 10px;

}

.error-content .error-home {

 color: #fff;
 display: inline-block;
 margin-top: 60px;
 padding: 10px 15px;

}

/*======================/////////////// START RESPONSIVE STYLE =====================///////////////////////*/

@media(max-width:1199px ){ #search-icon { right: 4%; }

 .slide-article {  
   padding-left: 30px;
   padding-right: 0;
   padding-top: 90px;  
 }
 .slide-article h1 {
   font-size: 40px;  
 }
 .blog-news-title h2,
 .blog-news-title h2 > a {  
   font-size: 18px;    
 }
 .main-slider {  
   height: auto;    
 }  

}

@media(max-width:991px ){ #menu-area #navbar {

   padding-right: 55px;
 }
 .navbar-default .navbar-nav > li > a {  
   font-size: 13px;
   padding-left: 4px;
   padding-right: 4px; 
 }
 #search {
   margin: 0 auto;
   width: 90%;
 }
 #search-icon {
   right: 3%;
 }
 .slide-article {
   padding-left: 60px;
   padding-right: 0;
   padding-top: 15px;
 }
 .slide-article h1 {
   font-size: 30px;
   line-height: 35px;
 }
 .slide-article p {
   color: #fff;
   margin-bottom: 40px;
 }
 .why-choose-us {
   margin-top: 20px;
 }
 .single-counter {
   margin-bottom: 30px;
 }
 .single-table-price {
   margin-bottom: 40px;
 }
 .single-team-member {
   margin-bottom: 50px;
 }
 .slick-prev {
   left: -10px;
 }
 .slick-next {
   right: -10px;
 }
 .blog-news-single {
   margin-bottom: 30px;    
 }
 .title-area {
   padding: 0 100px;
 }
 .single-portfolio {
   width: 33.33%;
 }
 .single-item-content::after {  
   width: 87%;
 }
 .blog-side-bar {
   margin-top: 50px;
 }
 .contact-area-right {
   margin-top: 40px;
 }

}

@media(max-width:767px ){

 .header-bottom {    
   padding: 0;   
 }

.header-contact ul li:last-child {

   display: none;
 }
 .navbar-brand { 
   margin-top: 0;  
 }
 #search-icon {
   right: 11%;
   top: 5px;
 }
 .main-nav li {
   padding: 0;
 }  
 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
   background-color: #fff;
 }  
 #search {
   width: 100%;
 }
 #menu-area #navbar {
   padding-right: 15px;
 }
 .slider-img {
   display: none;
 }
 .slide-article {
   padding-top: 10px;
 }
 .title-area {
   padding: 0 30px;
 }
 .single-abstract {
   text-align: center;
   padding: 0 15px;
 }
 .single-page-header-left {
   text-align: center;
 }
 .single-page-header-right .breadcrumb {
   text-align: center;
   margin-top: 20px;
 }
 .footer-left {
   text-align: center;
   margin-bottom: 20px;
 }
 .footer-right {
   text-align: center;
 }
 .portfolio-menu {
   padding: 0;
 }
 .portfolio-menu ul li {
   margin: 0 3px 10px;
   padding: 6px 10px;
 }
 .blog-single-tag {
   text-align: center;
 }
 .blog-single-social {
   text-align: center;
   margin-top: 20px;
 }

}

@media(max-width:480px ){ #search input {

   width: 85%;
 }
 #search-icon {
   right: 15%;
   top: 5px;
 }
 .slide-article h1 {
   font-size: 18px;
   line-height: 22px;
   margin-bottom: 10px;
 }
 .slide-article p {
   margin-bottom: 15px;
   font-size: 14px;
 }
 .read-more-btn {
   font-size: 14px;
   padding: 8px 14px;
 }
 .main-slider .slick-prev, .main-slider .slick-next {
   height: 40px;
   top: 46%;
   width: 40px;
 }
 .title-area .title {
   font-size: 25px;
   line-height: 26px;
   padding-bottom: 0px;
 }
 .title-area {
   padding: 0;
 }
 .title-area p {    
   line-height: 23px;   
   font-size: 15px;
 }
 .single-abstract p {
   font-size: 14px;
 }
 .our-skill-content p {
   font-size: 14px;
 }
 .why-choose-group .panel-body p {
   font-size: 14px;
 }
 .subscrib-form {
   width: 100%;
 }
 .footer-left {
   text-align: center;
   margin-bottom: 20px;
 }
 .footer-right {
   text-align: center;
 }
 #login-form .modal-dialog {  
   width: 350px;
 }
 .overlay {
   padding: 50px 0;
 }
 .single-portfolio {
   width: 50%;
 }
 .single-item-content::after {
   width: 85%;
 }
 .portfolio-menu ul li {
   padding: 4px 5px;
   font-size: 12px;
 }
 .blog-archive-left .blog-news-img {
   height: 320px;
 }
 .blog-navigation-prev {
   margin-bottom: 10px;
 }

}

@media(max-width:360px ){

 .login {    
     padding: 10px;    
 }  
 .single-slide {
   height: 200px;    
 }
 .single-slide img {
   height: 100%;   
 }
 #menu-area .navbar-toggle {
   padding: 8px 6px;    
 }

.phone {

   font-size: 12px;
 }
 .header-contact ul li {
   margin-right: 0;
   padding: 10px 8px;
 }
 #search-icon {
   right: 20%;
   top: 5px;
 }
 .slide-article {
   padding-top: 0;
   padding-left: 0;
 }
 .slide-article p {
   font-size: 12px;
   margin-bottom: 10px;
 }
 .slide-article h1 {
   font-size: 15px;
   line-height: 16px;
   margin-bottom: 8px;
 }
 .read-more-btn {
   font-size: 12px;
   padding: 5px 8px;
 }
 #testimonial .title-area {
   padding: 0;
 }
 .subscribe-area h2 {
   font-size: 25px;
   letter-spacing: 0;
   margin-bottom: 25px;
 }
 .subscrib-form input {
   font-size: 15px;
   height: 40px;    
 }
 .subscribe-btn {
   font-size: 15px;    
   height: 40px;
   width: 95px;
 }
 #login-form .modal-dialog {  
   width: 320px;
 }
 #search input {
   font-size: 14px;
 }
 .overlay {
   padding: 20px 0;
 }
  .single-portfolio {
   width: 100%;
 }
 .single-item-content::after {
   left: 15px;
   width: 92%;
 }
 .portfolio-menu ul li {
   padding: 4px 5px;
   font-size: 12px;
 }
 .blog-archive-left .blog-news-img {
   height: 250px;
 }
 .comments-form textarea {
   width: 100%;
 }
 .header-contact {   
   margin-left: -10px;    
 }
 .header-contact ul li {
  border: none;
 }
 .phone {
   font-size: 12px;
   width: 135%;
 }
 

}

@media(max-width:320px ){ #login-form .modal-dialog {

   width: 300px;
 }
 .footer-box {
   font-size: 14px;
 }
 .header-contact ul li {  
   padding: 10px 0 10px 3px;
 }
 .subscribe-area h2 {
   font-size: 22px;
 }
 .footer-left p {
   font-size: 12px;
 }
 .footer-right a {
   font-size: 16px;
 }

.single-item-content::after {

   width: 91%;
 }
 .blog-archive-left .blog-news-img {
   height: 220px;
 }

}