Difference between revisions of "Team:IIT Kharagpur/style"

Line 1,507: Line 1,507:
  
 
.survey-div {
 
.survey-div {
 +
        width:100%;
 
         height:300px;
 
         height:300px;
 
         padding:50px;
 
         padding:50px;

Revision as of 19:20, 3 October 2015

@font-face { font-family:'Roboto-Condensed-Light'; src:url('https://static.igem.org/mediawiki/2015/0/0a/IIT_Kharagpur_roboto_condensed_light.ttf'); }


@font-face { font-family:'Harabara'; src:url(../fonts/Harabara.otf); }

@font-face { font-family:'Boycott'; src:url("https://static.igem.org/mediawiki/2015/4/4d/IIT_Kharagpur_Boycott.ttf"); }

@font-face { font-family:'MyriadPro'; src:url(../fonts/MYRIADPRO-SEMIBOLD.woff); }

@font-face { font-family:'Lato-Regular'; src:url(../fonts/Lato-Regular.ttf); }

@font-face { font-family:'Lato-Semibold'; src:url(../fonts/Lato-Semibold.ttf); }

@font-face { src:url("http://fonts.googleapis.com/css?family=Open+Sans" ); }


  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;}


  1. top_menu_14 {

height: 20px; z-index: 100; top: 0; position:absolute; width: 100%; color:#fff; font-family: Quicksand; src: url(../fonts/Quicksand-Regular.ttf); letter-spacing:2px; background-color:rgba(0,0,0,0.85); }

  1. globalWrapper, #content {

width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px; font-size: 100%; }

  1. top_menu_inside {
 display: block;
 position: relative;
 width: 960px;
 height: 100%;
 margin: 0px auto;
 padding: 0 10px;
 border-left: 1px solid #c8c8c8;
 border-right: 1px solid #c8c8c8;
 font-family: 'arial', sans-serif;
 font-size: 12px;
 font-weight: 400;
 color: #ffffff;

}

html, body, .wrapper { width: 100%; height: 100%; min-height:100%; background-color: transparent; }

.navbar { margin: 0 auto; margin-top: 1em; padding: 1em; border-radius: 10px; } .tint { 

  background: rgba(0,0,255, 0.5);

}



.menu-show { margin-top:-20px; background-color:rgba(0,0,0,0.80);

}

.jumbo-home { overflow: hidden; background-blend-mode: overlay; background:#142D2D url("IIT_Kharagpur_home_jumbo_background.jpg") center center; background-size: cover; height:100%; width:100%; 

       position: relative;


}

@media only screen and (min-width: 1472px) { .jumbo-home,.jumbo-team,.jumbo-project,.jumbo-notebook,.jumbo-safety,.jumbo-practices,.jumbo-blog,.jumbo-parts,.jumbo-modeling,.jumbo-attributions { 

   min-height: 1030px;

max-height:1200px} }

@media only screen and (min-width: 992px) { .jumbo-home,.jumbo-team,.jumbo-project,.jumbo-notebook,.jumbo-safety,.jumbo-practices,.jumbo-blog,.jumbo-parts,.jumbo-modeling,.jumbo-attributions { 

   min-height: 820px;}

}

h3 {font-family: 'Roboto-Condensed-Light';}

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

 .jumbo-home,.jumbo-team,.jumbo-project,.jumbo-notebook,.jumbo-safety,.jumbo-practices,.jumbo-blog,.jumbo-parts,.jumbo-modeling,.jumbo-attributions {
   min-height: 700px;
   width: 100%;
   
 }

}

.menu { 

 top:20px;
 height:auto;
 display: block;
 margin-left: auto;
 margin-right: auto;
 /*padding: 0px 5px 0px 5px;*/
 position: fixed;
 width: 100%;
 z-index: 1000;
 transition:all .5s ease;

}

.team-menu { background-color:rgba(0,0,0,0.30); }

.menu > ul { 

 position: relative;
 width:auto;
 /*border:2px solid #fff;*/
 text-align: center;
 margin-left: auto ;
 margin-right: auto;

margin-bottom:0; 

 list-style: none;

} .menu-li { 

 font: bold 12px/18px sans-serif;
 display: inline-block;
 height:35px;
 border:2px solid transparent;
 text-transform: uppercase;
 line-height: 13px;
 cursor:pointer;
 padding: 5px 10px 10px 10px;
 font-size: 1.2em;
 letter-spacing: .2em;
 color: #fff;
 margin-bottom: 5px;
 margin-left: 1px;
 margin-right: 1px;
 position: relative;
 font-weight:bold;
 
 transition: all 0.5s ease;

}


ul li a{ 

 text-decoration: none;
 color:#fff;
 transition: all 0.4s ease;

}

.menu-div { 

 width:auto;

}

.menu-img { 

 float: left;
 height:23px;
 margin-right: 5px;

}

.menu-logo { display:none; text-align: center; /*display: inline-block;*/ height:auto; 

 /*border:2px solid transparent;*/
 text-transform: uppercase;
 line-height: 20px;
 cursor:pointer;
 padding:3px 0 2px 0;
 font-size: 15px;
 font-weight: bold;
 font: sans-serif;
 text-align: left;
 letter-spacing: .15em;
 color: #fff;
 transition: all 0.5s ease;
 margin-left: -50px;

} .menu-logo-img { height:40px; float: left; margin-right: 10px; margin-top: 2px }

.menu-logo-text { text-align: center; float:right; margin-top: 3px; }

.menu > ul > li > a{ 

  color:#fff;

transition: all 0.5s ease; }

.menu > ul > li:hover > a { 

  color:#17bcb8;

}

.menu-logo a { color:#fff; }

.menu-text { color:#fff; 

 float:right;
 margin-top: 4px;

}

.menu-li:hover { 

 color:#17bcb8;
 border:2px solid;

}

/*ul li:hover a { 

 color:#17bcb8;

}*/

.menu > ul > li > ul { 

 padding: 0;
 position: absolute;
 background-color:rgba(0,0,0,0.80);
 top: 28px;
 left: -30%;
 width: 250px;
 /*border-top:5px solid transparent;*/
 height: auto;
 transition: all 0.5s ease;
 box-shadow: none;
 display: none;
 opacity: 0;
 visibility: hidden;
 border-radius: 2px;
 z-index: 1;

}


.menu > ul > li > ul::before { 

 content: "";
 width: 0px;
 height: 0px;
 border: 0.8em solid transparent;
 position: absolute;
 left: 45%;
 top: -22px;
 border-bottom: 10px solid rgba(0,0,0,0.80);

}

.menu > ul > li > ul > li { 

 border-bottom:5px solid transparent;
 display: block; 
 padding:10px;
 color: #fff;
 height:auto;
 transition: all 0.2s linear;

}

.menu > ul > li > ul > li:hover { 

 color:#17bcb8;
 background: #fff; 
 border-bottom:5px solid #17bcb8;

}

.menu > ul > li > ul >li a{ 

color:#fff;

}

.menu > ul > li > ul >li:hover a{ 

color:#17bcb8;

}

.menu ul li:hover ul { 

 display: block;
 opacity: 1;
 visibility: visible;

}


.logo { width:650px; height:200px; position: absolute; top:45%; left:50%; margin-left: -325px; margin-top: -100px;

}

.logo-text { width:auto; margin-left: auto; margin-right: auto; font-size: 50px; color:#fff; padding:5px; text-align: center;

}

.logo-text a { color:#fff; font-family:'Harabara'; letter-spacing: .1em; text-decoration:none; font-weight:bold; transition: all 0.5s ease; }

.logo-text:hover a { color:#17bcb8; }

.team-logo-outer { position: absolute; top:40%; left:15%; margin-left: -90px; margin-top: -90px; width:180px; height: 180px; 

   -webkit-animation-name: spin;
   -webkit-animation-duration: 20000ms;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -moz-animation-name: spin;
   -moz-animation-duration: 20000ms;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
   -ms-animation-name: spin;
   -ms-animation-duration: 20000ms;
   -ms-animation-iteration-count: infinite;
   -ms-animation-timing-function: linear;
   -o-transition: rotate(3600deg);

}

@-moz-keyframes spin { 

   from { -moz-transform: rotate(0deg); }
   to { -moz-transform: rotate(360deg); }

} @-webkit-keyframes spin { 

   from { -webkit-transform: rotate(0deg); }
   to { -webkit-transform: rotate(360deg); }

} @keyframes spin { 

   from {transform:rotate(0deg);}
   to {transform:rotate(360deg);}

}

.team-logo-inner { position: absolute; top:40%; left:15%; width:100px; height: 100px; margin-left: -50px; margin-top:-50px; }

.home-text { position: absolute; top:40%; left:55%; width:420px; height: 100px; margin-left: -150px; margin-top: -50px; }

.home-text-icon { position: absolute; top:75%; left:50%; width:400px; height:100px; margin-left: -200px; margin-top: -100px; transition:all 0.4s ease; }



.scroller1 {

width:60px; height:60px; border-radius:6px; margin-top:9%; margin-left:93%; background-color: #17bcb8 ; text-align: center; padding-top:20px; cursor:pointer; text-decoration:none; }

.color-rail { 

 margin-top: -30px;
 height: 10px;
 left: 0;
 width: 100%;
 }

.color-rail div { float:left; width:12.5%; height:10px; }

.white { background: #ebeef4; }

.light-gray { 

 background: #aab9c0;

}

.gray { 

 background: #2b3842;

}

.dark-gray { 

 background: #212835;

}

.black { 

 background: #0c1116;

}

.dark-teal { 

 background: #1c6060;

}

.teal { 

 background: #1e7c7a;

}

.orange { 

 background: #f44e04;

}

.main-mid1 { height:auto; padding-top:10px; padding-bottom:20px; overflow: hidden;

}

.project-heading { text-align:center; }

.project-description { font-size:17px; padding:20px; color:#000; /*font-family:'Lato-Regular';*/ font-family:'Roboto-Condensed-Light'; text-align: justify; display:block; margin-left: auto; margin-right: auto; background-color: #E1E3E4; line-height:2em; width:100%; opacity: .7;

}


h2 { font-size: 45px;

font-family:'Roboto-Condensed-Light'; color:#2b3842; }

.main-mid1 img { display: block; margin-left: auto; margin-right: auto; }

.main-mid2{ height:800px; padding:0; }

.carousel-caption { font-size: 40px; }

.main-mid3{

}

.details1 { margin-top: 10px; margin-bottom:10px; display:block; width: 100%; height: 400px; margin-left:2%; border:2px solid; cursor:pointer; text-align: center; font-size: 20px; font-weight: bold; padding: 80px; }

.details2 { margin-top: 10px; margin-bottom:10px; display:block; width: 100%; height: 190px; margin-left:2%; border:2px solid; cursor:pointer; text-align: center; font-size: 20px; font-weight: bold; padding: 80px; }

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

   .details {
   	width: 80%;
   	margin-left:auto;
   	margin-right: auto;
           }

   .scroller2 {
   	width:40px;
   	height:40px;
   }

   .menu {
   	margin-top:-10px;
   }

   .menu-items > ul >li {
   	font-size: 20px;
   }

} .details:hover { background:linear-gradient(to bottom, rgba(54, 100, 139, 0.6) 0%, rgba(54, 100, 139, 0.6) 100%);

}

.main-mid4 {

}

.main-video { margin:40px 8% 0 5%; width:90%; padding:10px 10px 10px 10px; }

.scroller2 { 

       display:none;

float:right; margin-right: -2%; width:60px; height:60px; border-radius:6px; background-color: #17bcb8 ; text-align: center; padding-top:20px; cursor:pointer; text-decoration:none; }


.footer1 { position: absolute; display: block; height: auto; background-color:rgba(0,0,0,0.80); z-index: 1000; width:100%; }

.footer2 { background-color: rgba(0,0,0,0.90); position: absolute; width: 100%; margin-top: 120px;

}

.footer-content { display: block; margin-left: auto; margin-right: auto; padding:15px; height:120px; max-width: 1200px; }

.footer-content a { font-size: 1.4em; line-height: 1.2em; text-decoration: none; color:#fff; font-weight: 600; }

footer-content img { 

       width:auto;

}

.footer1 h3 { 

       margin-top:0px;

color:#fff; }

.footer-cr { padding: 20px float:left; color: #fff; }

.social { float:left; margin-right: 10px; width:40px; height:40px; }

.mail-button { background-color: #17bcb8 !important; -webkit-tap-highlight-color: transparent; will-change: opacity, transform; -webkit-transition: all .3s ease-out; 

   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   transition: all .3s ease-out;
   border: none;
   border-radius: 2px;
   float:left;
   height: 39px;
   line-height: 39px;
   outline: 0;
   padding: 0 2rem;
   text-transform: uppercase;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

.mail-button a { font-size: 1.1em; 

   font-weight: bold;
   color:#fff;

}


/*Project Page*/

.project-mid1,.modeling-mid1 { padding:20px 0 20px 0; }



/* Team Page */

.jumbo-team { position: relative; background-blend-mode: overlay; overflow: hidden; /*background: #335353 url("IIT_Kharagpur_team-jumbo-back.jpg") center center; background-size: cover;*/ height:100%; width:100%;

padding-top:0; margin-bottom:0; }

.jumbo-attributions { position: relative; background-blend-mode: overlay; overflow: hidden; background: #335353 url("IIT_Kharagpur_team-jumbo-back.jpg") center center; background-size: cover; height:100%; width:100%;

padding-top:0; margin-bottom:0; }

.team-text-div1 { position: absolute; width:1000px; 

   top:50%;
   left: 50%;
   margin-left: -500px;
   margin-top: -100px;

}

.team-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }

.team-text-div2 { position: absolute; width:400px; top:70%; left:50%; margin-left:-200px; transition:all 0.3s ease; }

.team-text-div2:hover { width:380px; margin-left: -190px; }

.team-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;

}

.team-mid2{

}

.team-heading { text-align:center; }

.team-description { padding:20px; }

.member-div { border:3px solid #17bcb8; margin:10px 2% 10px 2%; padding: 10px; border-radius: 3%; width:29% ; height:600px; overflow: hidden; }

@media screen and (max-width: 992px) { .member-div { width:auto;

}

}


.member-photo-div { overflow: hidden; display: block; margin-right: auto; margin-left: auto; background-blend-mode: multiply; border-radius: 50%; border:5px solid #17bcb8; width:250px; height:250px; transition: all .4s linear; }

.harsheel { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_harsheel.png"); background-size: cover; }

.harsheel:hover { background: url("Team_IIT_Kharagpur_harsheel.png"); border:10px solid #17bcb8; background-size: cover; }

.krishna { background: #80B2B2 url("IIT_Kharagpur_team_krishna.png"); background-size: cover; }

.krishna:hover { background: url("IIT_Kharagpur_team_krishna.png"); background-size: cover; border:10px solid #17bcb8; }

.yogesh { background: #80B2B2 url("IIT_Kharagpur_team_yogesh.png"); background-size: cover; }

.yogesh:hover { background: url("IIT_Kharagpur_team_yogesh.png"); background-size: cover; border:10px solid #17bcb8; }

.vivek:hover { background: url("IIT_Kharagpur_team_vivek.png"); background-size: cover; border:10px solid #17bcb8; }

.vivek { background: #80B2B2 url("IIT_Kharagpur_team_vivek.png"); background-size: cover; }

.roshan:hover { background: url("IIT_Kharagpur_team_roshan.png"); background-size: cover; border:10px solid #17bcb8; }

.roshan { background: #80B2B2 url("IIT_Kharagpur_team_roshan.png"); background-size: cover; }

.sriram:hover { background: url("IIT_Kharagpur_team_sriram.png"); background-size: cover; border:10px solid #17bcb8; }

.sriram { background: #80B2B2 url("IIT_Kharagpur_team_sriram.png"); background-size: cover; }

.varshit:hover { background: url("IIT_Kharagpur_team_varshit.png"); background-size: cover; border:10px solid #17bcb8; }

.varshit { background: #80B2B2 url("IIT_Kharagpur_team_varshit.png"); background-size: cover; }


.swati { background: #80B2B2 url("IIT_Kharagpur_team_swati.png"); background-size: cover; }

.swati:hover { background: url("IIT_Kharagpur_team_swati.png"); background-size: cover; border:10px solid #17bcb8; }

.ashutosh { background: #80B2B2 url("../img/ashutosh.png"); background-size: cover; }

.ashutosh:hover { background: url("../img/ashutosh.png"); background-size: cover; border:10px solid #17bcb8; }

.adarsh { background: hsl(200,50%,50%) url("Member-photo-div_adarsh.png"); background-size: cover; }

.adarsh:hover { background: url("Member-photo-div_adarsh.png"); border:10px solid #17bcb8; background-size: cover; }

.bhavya { background: hsl(200,50%,50%) url("../img/harsheel.png"); background-size: cover; }

.bhavya:hover { background: url("../img/harsheel.png"); border:10px solid #17bcb8; background-size: cover; }

.jugal { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_jugal.png"); background-size: cover; }

.jugal:hover { background: url("Team_IIT_Kharagpur_jugal.png"); border:10px solid #17bcb8; background-size: cover; }

.rhushikesh { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_rp.png"); background-size: cover; }

.rhushikesh:hover { background: url("Team_IIT_Kharagpur_rp.png"); border:10px solid #17bcb8; background-size: cover; }

.pruthvi { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_pp.png"); background-size: cover; }

.pruthvi:hover { background: url("Team_IIT_Kharagpur_pp.png"); border:10px solid #17bcb8; background-size: cover; }

.debrishi { background: hsl(200,50%,50%) url("../img/harsheel.png"); background-size: cover; }

.debrishi:hover { background: url("../img/harsheel.png"); border:10px solid #17bcb8; background-size: cover; }

.karan { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_karan.png"); background-size: cover; }

.karan:hover { background: url("Team_IIT_Kharagpur_karan.png"); border:10px solid #17bcb8; background-size: cover; }

.dipasha { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_dipasaha.png"); background-size: cover; }

.dipasha:hover { background: url("Team_IIT_Kharagpur_dipasaha.png"); border:10px solid #17bcb8; background-size: cover; }

.manojna { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_satyam.png"); background-size: cover; }

.manojna:hover { background: url("Team_IIT_Kharagpur_satyam.png"); border:10px solid #17bcb8; background-size: cover; }

.sanjay { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_sanjay.png"); background-size: cover; }

.sanjay:hover { background: url("Team_IIT_Kharagpur_sanjay.png"); border:10px solid #17bcb8; background-size: cover; }

.satyam { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_satyam.png"); background-size: cover; }

.satyam:hover { background: url("Team_IIT_Kharagpur_satyam.png"); border:10px solid #17bcb8; background-size: cover; }

.shaurya { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_shau.png"); background-size: cover; }

.shaurya:hover { background: url("Team_IIT_Kharagpur_shau.png"); border:10px solid #17bcb8; background-size: cover; }

.chetan { background: hsl(200,50%,50%) url("Team_IIT_Kharagpur_chetan.png"); background-size: cover; }

.chetan:hover { background: url("Team_IIT_Kharagpur_chetan.png"); border:10px solid #17bcb8; background-size: cover; }


.member-desc-div { display:block; margin-right:auto; margin-left: auto; padding:15px; color:#000; text-align: left;

}

.member-desc-div h4 { text-align: center; color:#17bcb8; font-weight: bold; }

.prof-div { margin-top: 10px; margin-bottom: 10px; border:3px solid #17bcb8 ; border-radius: 4px; display:block; width:100%; padding:10px; overflow: hidden; }

.prof-pic-div { border:5px solid #17bcb8; float:left; border-radius: 50%; display:block; width:240px; height:240px; margin-left: 20px; margin-top:10px; background-blend-mode: multiply; transition: all .4s linear; }

.prof-desc-div { padding:10px; display:block; float:right; width:70%; margin:20px 50px 0 20px; }

.prof-desc-div h4 { color:#17bcb8; font-weight: bold; } .prof-desc-div h5 { color:#17bcb8; font-weight: bold; }

.agneyo { background: #80B2B2 url("IIT_Kharagpur_team_agneyo.jpg"); background-size: cover; }

.agneyo:hover { background: url("IIT_Kharagpur_team_agneyo.jpg"); background-size: cover; border:10px solid #17bcb8; }

.maiti { background: #80B2B2 url("Team_IIT_Kharagpur_mkm.png"); background-size: cover; }

.maiti:hover { background: url("Team_IIT_Kharagpur_mkm.png"); background-size: cover; border:10px solid #17bcb8; }

.team-mid3 { padding:10px; }

.team-mid3 h2 { text-align: center; font-weight: bold; }

.team-mid3 h3 { text-align: center; font-weight: bold; }

.sponsor1 { display: block; border-radius: 4px; width:100%; height:180px; background-color: #80B2B2; padding:30px; margin-top: 10px; margin-bottom: 10px; }

.sponsor1 img { display: block; margin-left: auto; margin-right: auto; }

.sponsor2 { padding:30px; border-radius: 4px; display:block; height:180px; color:#fff; background-color: #80B2B2; margin-top: 10px; margin-bottom: 10px; }

/* Project Page */

.jumbo-project { position: relative; overflow: hidden; background: #163747 url("IIT_Kharagpur_background-texture-2.jpg") center center; background-size: cover; height:100%; width:100%; }

.project-text-div1 { position: absolute; width:1100px; 

   top:50%;
   left: 50%;
   margin-left: -550px;
   margin-top: -100px;

}

.project-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }

.project-text-div2 { position: absolute; width:500px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -50px;
   transition:all 0.3s ease;

}

.project-text-div2:hover { width:480px; margin-left: -240px; }

.project-text2 { display: block; margin-right: auto; margin-left: auto; width:100%; transition:all 0.3s ease; }

.jumbo-achievements { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }

.achievements-text-div1 { position: absolute; width:1100px; 

   top:50%;
   left: 50%;
   margin-left: -550px;
   margin-top: -100px;

}

.achievements-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }

.achievements-text-div2 { position: absolute; width:500px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -20px;
   transition:all 0.3s ease;

}

.achievements-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;

}

.achievements-text-div2:hover { width:480px; margin-left: -240px; }

.jumbo-safety { position: relative; overflow: hidden; background: #335353 url("../img/background1.jpg") center center; background-size: cover; height:80%; width:100%; }

.safety-text-div1 { position: absolute; width:600px; 

   top:40%;
   left: 35%;
   margin-left: -300px;
   margin-top: -100px;
   color: #fff;

line-height:1.7em; 

   font-size: 3em;
   font-family: "Boycott";
   word-spacing: 1px;

}

h2 { text-align: center; }

.safety-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }

.safety-text-div2 { position: absolute; width:600px; 

   top:55%;
   left: 50%;
   margin-left: -300px;
   margin-top: -50px;

}


.safety-text2 { display: block; margin-right: auto; margin-left: auto; width:100%; transition:all 0.3s ease;

}

.safety-text2:hover { /*width:95%;*/

}

.safety-mid1 { padding:20px 0 20px 0; }

.safety-desc { width:auto; font-size: 1.3em; margin-top: 5px; margin-bottom: 5px; font-family: 'Lato-Semibold'; }

.safety-desc-img { margin-top: 5px; width:100%; height:400px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transition: opacity .4s; 

   -moz-transition: opacity .4s;
   -o-transition: opacity .4s;
   -ms-transition: opacity .4s;

transition: opacity .4s; }

.lab-training { margin-top: 10px; padding: 10px 10px 10px 10px; width:auto; height:auto; background-color: #FCFCFC; font-size: 1.2em; font-family: 'Lato-Semibold'; line-height: 2em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.lab-training-img { width:100%; height:auto; }

.lab-training-img-div { margin-top: 10px; width:auto; height:auto; background-color: #FCFCFC; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.jumbo-modeling { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }

.modeling-text-div1 { position: absolute; width:600px; 

   top:50%;
   left: 50%;
   margin-left: -300px;
   margin-top: -100px;

}

.modeling-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }

.modeling-text-div2 { position: absolute; width:500px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -50px;
   transition:all 0.3s ease;

}


.modeling-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;


}

.modeling-text-div2:hover { width:480px; margin-left: -240px; }

.jumbo-notebook { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }

.notebook-text-div1 { position: absolute; width:600px; 

   top:50%;
   left: 50%;
   margin-left: -300px;
   margin-top: -100px;

}

.notebook-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }

.notebook-text-div2 { position: absolute; width:500px; height:100px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -50px;
   transition:all 0.3s ease;

}


.notebook-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;


}

.notebook-text-div2:hover { width:480px; margin-left: :-240px; }

.survey-div { 

       width:100%;
       height:300px;
       padding:50px;

}

.grid { padding: 20px 20px 100px 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center; }

.grid li { display: inline-block; width: 440px; margin: 0; padding: 20px; text-align: left; position: relative; }

.grid figure { margin: 0; position: relative; }

.grid figure img { max-width: 100%; display: block; position: relative; }

.grid figcaption { position: absolute; top: 0; left: 0; padding: 20px; background: #2c3f52; color: #ed4e6e; }

.grid figcaption h3 { margin: 0; padding: 0; color: #fff; }

.grid figcaption span:before { content: 'by '; }

.grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; }

.cs-style-4 li { perspective: 1700px; perspective-origin: 0 50%; }

.cs-style-4 figure { transform-style: preserve-3d; }

.cs-style-4 figure > div { overflow: hidden; }

.cs-style-4 figure img { transition: transform 0.4s; }

.no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img { transform: translateX(25%); }

.cs-style-4 figcaption { height: 100%; width: 50%; opacity: 0; backface-visibility: hidden; transform-origin: 0 0; transform: rotateY(-90deg); transition: transform 0.4s, opacity 0.1s 0.3s; }

.no-touch .cs-style-4 figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption { opacity: 1; transform: rotateY(0deg); transition: transform 0.4s, opacity 0.1s; }

.cs-style-4 figcaption a { position: absolute; bottom: 20px; right: 20px; }