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

Line 1: Line 1:
−
<html>
+
@font-face {
−
<head>
+
font-family:'Harabara';
−
<!-- Team Page style -->
+
src:url(../fonts/Harabara.otf);
−
<style type="text/css">
+
}
 +
 
 +
@font-face {
 +
font-family:'Boycott';
 +
src:url(../fonts/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);
 +
}
 +
 
 +
 
 +
 
 +
.header1{
 +
position:fixed;
 +
width:100%;
 +
z-index:1000;
 +
border:2px solid;
 +
padding: 20px;
 +
}
 +
 
 +
.menu-show {
 +
margin-top:-20px;
 +
background-color:rgba(0,0,0,0.80);
 +
-moz-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25);
 +
-webkit-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25);
 +
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25);
 +
}
 +
 
 +
.jumbo-home {
 +
overflow: hidden;
 +
background-blend-mode: overlay;
 +
background:#142D2D url("../img/4.jpg") center center;
 +
background-size: cover;
 +
height:99%;
 +
width:100%;
 +
}
 +
 
 +
.menu {
 +
 
 +
  top:20px;
 +
  height:55px;
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  padding: 0px 5px 0px 5px;
 +
  position: fixed;
 +
  width: 100%;
 +
  z-index: 1000;
 +
  transition:all .5s ease;
 +
}
 +
 
 +
.menu > ul {
 +
  position: relative;
 +
  width:auto;
 +
  /*border:2px solid #fff;*/
 +
  text-align: center;
 +
  margin-left: auto ;
 +
  margin-right: auto;
 +
  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: 15px;
 +
  letter-spacing: .2em;
 +
  color: #fff;
 +
  margin-bottom: 7px;
 +
  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 {
 +
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: 4px
 +
}
 +
 
 +
.menu-logo-text {
 +
text-align: center;
 +
float:right;
 +
margin-top: 5px;
 +
}
 +
 
 +
.menu-text {
 +
  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: 33px;
 +
  left: -15%;
 +
  width: 200px;
 +
  /*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: #F1F1F2;
 +
  border-bottom:5px solid #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:450px;
 +
height:100px;
 +
margin-left: -225px;
 +
margin-top: -100px;
 +
transition:all 0.4s ease;
 +
}
 +
 
 +
.home-text-icon:hover {
 +
width:430px;
 +
height:80px;
 +
margin-left: -215px;
 +
margin-top: -90px;
 +
}
 +
 
 +
 
 +
 
 +
.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;
 +
 
 +
}
 +
 
 +
.main-mid1 img {
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 
 +
.main-mid2{
 +
height:800px;
 +
padding:0;
 +
}
 +
 
 +
.carousel-caption {
 +
font-size: 40px;
 +
}
 +
 
 +
.main-mid3{
 +
 
 +
}
 +
 
 +
.details {
 +
margin-top: 10px;
 +
margin-bottom:10px;
 +
display:block;
 +
width: 100%;
 +
height: 200px;
 +
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 {
 +
 
 +
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;
 +
}
 +
 
 +
.footer1 h3 {
 +
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;
 +
   
 +
    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 {
 
.jumbo-team {
 
position: relative;
 
position: relative;
−
+
background-blend-mode: overlay;
 
overflow: hidden;
 
overflow: hidden;
−
background: #335353 url("../img/team2.jpg") center center;
+
background: #335353 url("../img/team-img1.jpg") center center;
 
background-size: cover;
 
background-size: cover;
 
height:99%;
 
height:99%;
 
width:100%;
 
width:100%;
 
}
 
}
−
 
  
 
.team-text-div1 {
 
.team-text-div1 {
Line 69: Line 633:
 
padding: 10px;
 
padding: 10px;
 
border-radius: 3%;
 
border-radius: 3%;
−
width:25% ;
+
width:29% ;
−
height:625px;
+
height:auto;
 
overflow: hidden;
 
overflow: hidden;
 
}
 
}
Line 98: Line 662:
  
 
.harsheel {
 
.harsheel {
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/6/60/Team_IIT_Kharagpur_harsheel.png");
+
background: hsl(200,50%,50%) url("../img/harsheel.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
 
.harsheel:hover {
 
.harsheel:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/6/60/Team_IIT_Kharagpur_harsheel.png");
+
background:  url("../img/harsheel.png");
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
 
background-size: cover;
 
background-size: cover;
Line 109: Line 673:
  
 
.krishna {
 
.krishna {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/4/43/Team_IIT_Kharagpur_krishna.png");
+
background: #80B2B2 url("../img/krishna.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
 
.krishna:hover {
 
.krishna:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/4/43/Team_IIT_Kharagpur_krishna.png");
+
background:  url("../img/krishna.png");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
Line 120: Line 684:
  
 
.yogesh {
 
.yogesh {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/e/eb/Team_IIT_Kharagpur_yogesh.png");
+
background: #80B2B2 url("../img/yogesh.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
 
.yogesh:hover {
 
.yogesh:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/e/eb/Team_IIT_Kharagpur_yogesh.png");
+
background:  url("../img/yogesh.png");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
Line 131: Line 695:
  
 
.vivek:hover {
 
.vivek:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/e/e0/Team_IIT_Kharagpur_vivek.png");
+
background:  url("../img/vivek.png");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
Line 137: Line 701:
  
 
.vivek {
 
.vivek {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/e/e0/Team_IIT_Kharagpur_vivek.png");
+
background: #80B2B2 url("../img/vivek.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
 +
.roshan:hover {
 +
background:  url("../img/roshan.png");
 +
background-size: cover;
 +
border:10px solid #17bcb8;
 +
}
  
 +
.roshan {
 +
background: #80B2B2 url("../img/roshan.png");
 +
background-size: cover;
 +
}
  
 
.sriram:hover {
 
.sriram:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/3/30/Team_IIT_Kharagpur_sriram.png");
+
background:  url("../img/sriram.png");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
Line 150: Line 723:
  
 
.sriram {
 
.sriram {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/3/30/Team_IIT_Kharagpur_sriram.png");
+
background: #80B2B2 url("../img/sriram.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
 
.varshit:hover {
 
.varshit:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/4/49/Team_IIT_Kharagpur_varshit.png");
+
background:  url("../img/varshit.png");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
Line 161: Line 734:
  
 
.varshit {
 
.varshit {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/4/49/Team_IIT_Kharagpur_varshit.png");
+
background: #80B2B2 url("../img/varshit.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
Line 168: Line 741:
  
 
.swati {
 
.swati {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/8/8a/Team_IIT_Kharagpur_swati.png");
+
background: #80B2B2 url("../img/swati.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
 
.swati:hover {
 
.swati:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/8/8a/Team_IIT_Kharagpur_swati.png");
+
background:  url("../img/swati.png");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
 
}
 
}
  
−
 
+
.ashutosh {
−
.rushikesh {
+
background: #80B2B2 url("../img/ashutosh.png");
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/0/0a/Team_IIT_Kharagpur_Rhushikesh.png");
+
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
−
.rushikesh:hover {
+
.ashutosh:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/0/0a/Team_IIT_Kharagpur_Rhushikesh.png");
+
background:  url("../img/ashutosh.png");
−
border:10px solid #17bcb8;
+
 
background-size: cover;
 
background-size: cover;
−
}.adarsh {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/a/a6/Team_IIT_Kharagpur_Aadarsh.png");
 
−
background-size: cover;
 
−
}
 
−
 
−
.adarsh:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/a/a6/Team_IIT_Kharagpur_Aadarsh.png");
 
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
−
background-size: cover;
 
−
}.jugal {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/0/09/Team_IIT_Kharagpur_jugal.png");
 
−
background-size: cover;
 
 
}
 
}
−
 
−
.jugal:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/0/09/Team_IIT_Kharagpur_jugal.png");
 
−
border:10px solid #17bcb8;
 
−
background-size: cover;
 
−
}.pruthvi {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/4/4c/Team_IIT_Kharagpur_Pruthvi.png");
 
−
background-size: cover;
 
−
}
 
−
 
−
.pruthvi:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/4/4c/Team_IIT_Kharagpur_Pruthvi.png");
 
−
border:10px solid #17bcb8;
 
−
background-size: cover;
 
−
}.karan {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/e/ec/Team_IIT_Kharagpur_Karan.png");
 
−
background-size: cover;
 
−
}
 
−
 
−
.karan:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/e/ec/Team_IIT_Kharagpur_Karan.png");
 
−
border:10px solid #17bcb8;
 
−
background-size: cover;
 
−
}.dipasha {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/2/2e/Team_IIT_Kharagpur_dipasha.png");
 
−
background-size: cover;
 
−
}
 
−
 
−
.dipasha:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/2/2e/Team_IIT_Kharagpur_dipasha.png");
 
−
border:10px solid #17bcb8;
 
−
background-size: cover;
 
−
}.debrishi {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/9/97/Team_IIT_Kharagpur_Devrishi.png");
 
−
background-size: cover;
 
−
}
 
−
 
−
.debrishi:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/9/97/Team_IIT_Kharagpur_Devrishi.png");
 
−
border:10px solid #17bcb8;
 
−
background-size: cover;
 
−
}.bhavya {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/e/e6/Team_IIT_Kharagpur_bhavya.png");
 
−
background-size: cover;
 
−
}
 
−
 
−
.bhavya:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/e/e6/Team_IIT_Kharagpur_bhavya.png");
 
−
border:10px solid #17bcb8;
 
−
background-size: cover;
 
−
}.sanjay {
 
−
background: hsl(200,50%,50%) url("https://static.igem.org/mediawiki/2015/8/89/Team_IIT_Kharagpur_sanjay.png");
 
−
background-size: cover;
 
−
}
 
−
 
−
.sanjay:hover {
 
−
background:  url("https://static.igem.org/mediawiki/2015/8/89/Team_IIT_Kharagpur_sanjay.png");
 
−
border:10px solid #17bcb8;
 
−
background-size: cover;
 
−
}
 
−
 
  
  
Line 322: Line 821:
  
 
.agneyo {
 
.agneyo {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/d/d3/Team_IIT_Kharagpur_Agneyo.png");
+
background: #80B2B2 url("../img/agneyo.jpg");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
 
.agneyo:hover {
 
.agneyo:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/d/d3/Team_IIT_Kharagpur_Agneyo.png");
+
background:  url("../img/agneyo.jpg");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
 
}
 
}
  
−
.mkm {
+
.sdey {
−
background: #80B2B2 url("https://static.igem.org/mediawiki/2015/6/62/Team_IIT_Kharagpur_Prof_Mkm.png");
+
background: #80B2B2 url("../img/sdey.png");
 
background-size: cover;
 
background-size: cover;
 
}
 
}
  
−
.mkm:hover {
+
.sdey:hover {
−
background:  url("https://static.igem.org/mediawiki/2015/6/62/Team_IIT_Kharagpur_Prof_Mkm.png");
+
background:  url("../img/sdey.png");
 
background-size: cover;
 
background-size: cover;
 
border:10px solid #17bcb8;
 
border:10px solid #17bcb8;
Line 356: Line 855:
 
font-weight: bold;
 
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 {
 
.sponsor2 {
 
padding:30px;
 
padding:30px;
Line 362: Line 879:
 
height:180px;
 
height:180px;
 
color:#fff;
 
color:#fff;
−
background-color: #00A388;
+
background-color: #80B2B2;
 
margin-top: 10px;
 
margin-top: 10px;
 
margin-bottom: 10px;
 
margin-bottom: 10px;
 
}
 
}
−
</style>
+
 
−
</head>
+
/* Project Page */
−
<body>
+
 
−
</body>
+
.jumbo-project {
−
</html>
+
position: relative;
 +
overflow: hidden;
 +
background: #335353 url("../img/common-bg.jpg") center center;
 +
background-size: cover;
 +
height:99%;
 +
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;
 +
    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;
 +
}

Revision as of 17:09, 17 September 2015

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

@font-face { font-family:'Boycott'; src:url(../fonts/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); }


.header1{ position:fixed; width:100%; z-index:1000; border:2px solid; padding: 20px; }

.menu-show { margin-top:-20px; background-color:rgba(0,0,0,0.80); -moz-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25); }

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

.menu { 

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

}

.menu > ul { 

 position: relative;
 width:auto;
 /*border:2px solid #fff;*/
 text-align: center;
 margin-left: auto ;
 margin-right: auto;
 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: 15px;
 letter-spacing: .2em;
 color: #fff;
 margin-bottom: 7px;
 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 { 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: 4px }

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

.menu-text { 

 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: 33px;
 left: -15%;
 width: 200px;
 /*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: #F1F1F2; 
 border-bottom:5px solid #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:450px; height:100px; margin-left: -225px; margin-top: -100px; transition:all 0.4s ease; }

.home-text-icon:hover { width:430px; height:80px; margin-left: -215px; margin-top: -90px; }


.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;

}

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

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

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

.main-mid3{

}

.details { margin-top: 10px; margin-bottom:10px; display:block; width: 100%; height: 200px; 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 {

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; }

.footer1 h3 { 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;
   
   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("../img/team-img1.jpg") center center; background-size: cover; height:99%; width:100%; }

.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:auto; 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("../img/harsheel.png"); background-size: cover; }

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

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

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

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

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

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

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

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

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

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

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

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

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


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

.swati:hover { background: url("../img/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; }


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

}

.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:20px; 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("../img/agneyo.jpg"); background-size: cover; }

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

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

.sdey:hover { background: url("../img/sdey.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: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; 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;
   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; }