Difference between revisions of "Team:Lethbridge HS/CSS"

 
(377 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
@font-face{
 +
font-family: 'Mohave';
 +
src:url('https://static.igem.org/mediawiki/2015/5/50/Mohave.otf');
 +
}
 +
@font-face{
 +
font-family: 'existence';
 +
src:url('https://static.igem.org/mediawiki/2015/0/03/LethHS2015_raleway.otf');
 +
font-weight:100;
 +
}
 +
@font-face {
 +
font-family: "Flaticon";
 +
src: url("https://static.igem.org/mediawiki/2015/0/04/LethHS2015_flaticon5.eot");
 +
src: url("../flaticon.eot#iefix") format("embedded-opentype"),
 +
url("https://static.igem.org/mediawiki/2015/5/53/LethHS2015_flaticon5.woff") format("woff"),
 +
url("https://static.igem.org/mediawiki/2015/c/cb/LethHS2015_flaticon5.svg") format("svg");
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
.flaticon-book228:before {
 +
content: "\e000";
 +
}
 +
.flaticon-brainstorm:before {
 +
content: "\e001";
 +
}
 +
.flaticon-bricks3:before {
 +
content: "\e002";
 +
}
 +
.flaticon-business53:before {
 +
content: "\e003";
 +
}
 +
.flaticon-cone10:before {
 +
content: "\e004";
 +
}
 +
.flaticon-dna9:before {
 +
content: "\e005";
 +
}
 +
.flaticon-erlenmeyer1:before {
 +
content: "\e006";
 +
}
 +
.flaticon-familiar17:before {
 +
content: "\e007";
 +
}
 +
.flaticon-prize3:before {
 +
content: "\e008";
 +
}
 +
 +
 
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
 
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
−
line-height:0.5;
+
line-height:1;
 
border:none;
 
border:none;
 
}
 
}
Line 20: Line 67:
 
     overflow-x:hidden;
 
     overflow-x:hidden;
 
margin-top:-1%;
 
margin-top:-1%;
 +
padding-bottom:0;
 
}
 
}
  
Line 37: Line 85:
 
     background-repeat: no-repeat;*/
 
     background-repeat: no-repeat;*/
 
     width:100%;
 
     width:100%;
 +
margin:0;
 
}
 
}
  
Line 65: Line 114:
 
width:50%;
 
width:50%;
 
height:1vw*0.2;
 
height:1vw*0.2;
−
background-color:#31B2DE;
+
background-color:#0e83cd;
 
border-radius:5%;
 
border-radius:5%;
 
margin:0;
 
margin:0;
Line 93: Line 142:
 
}
 
}
  
 +
#bodyContent h1, #bodyContent h2 {
 +
  /*margin-bottom:0;*/ 
 +
}
  
 
#regularPageBody{
 
#regularPageBody{
 
     background-color: white;
 
     background-color: white;
−
     padding-left: 10%;
+
     padding-left: 2%;
−
     padding-right: 10%;
+
     padding-right: 2%;
−
     padding-top: 4%;
+
     padding-top: 1%;
 
     padding-bottom: 4%;
 
     padding-bottom: 4%;
 
      
 
      
Line 142: Line 194:
 
     margin-left: auto;
 
     margin-left: auto;
 
     margin-right: auto;
 
     margin-right: auto;
 +
    margin-bottom: 0;
 +
}
 +
.pageIcon{
 +
    margin-top: 3%;
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
}
 
}
 
.regularimg{
 
.regularimg{
 
      
 
      
−
    margin-left: auto;
+
  /*  margin-left: auto;*/
 
     margin-right: auto;
 
     margin-right: auto;
  
Line 205: Line 261:
 
      
 
      
 
}
 
}
 +
figure{
 +
display:table;
 +
}
 +
figure img{
 +
display:block;
  
 +
}
 +
figcaption{
 +
display:table-caption;
 +
caption-side:bottom;
 +
  background-color: #31B2DE;
 +
text-align:center;
 +
}
 
.downImgText{
 
.downImgText{
 
     font-size:3vw;
 
     font-size:3vw;
Line 281: Line 349:
 
          
 
          
 
}
 
}
 +
 
.body_team{
 
.body_team{
 
background-size: 80vh 60vh;
 
background-size: 80vh 60vh;
Line 304: Line 373:
 
         background-position:center center;
 
         background-position:center center;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
−
     height: 100vh;
+
     height: 105vh;
  
 
    
 
    
Line 318: Line 387:
 
         background-position: center center;
 
         background-position: center center;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
−
     height: 100vh;
+
     height:100vh;
  
 
}
 
}
 
#mainTitleText{
 
#mainTitleText{
−
     font-size:3vw;
+
     font-size:2em;
 
     color: white;
 
     color: white;
 
     margin-bottom: 5px;
 
     margin-bottom: 5px;
Line 334: Line 403:
 
}
 
}
 
#subTitleText{
 
#subTitleText{
 +
    font-weight: 200;
 +
    font-size: 5em;
 +
    color: white;
 +
    margin-top: -2%;
 +
   
 +
}
 +
#subTitleText2{
 
     font-weight: 200;
 
     font-weight: 200;
 
     font-size: 5em;
 
     font-size: 5em;
Line 376: Line 452:
 
}
 
}
 
#titleSlide_hp{
 
#titleSlide_hp{
 +
margin-top: -9%;
 
     background-color:transparent;
 
     background-color:transparent;
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
     padding-bottom: 0;
 
     padding-bottom: 0;
−
     background-image:url("../images/hummingbird-bird-bee-fly-background-bokeh.jpg");
+
     background-image:url("https://static.igem.org/mediawiki/2015/a/a8/LethHS2015_hp_back.jpg");
 
     background-size:cover;
 
     background-size:cover;
 
         background-position: left top;
 
         background-position: left top;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
−
    background-attachment: fixed;
+
 
−
   
+
 
      
 
      
 
}
 
}
Line 469: Line 545:
 
     margin-top: 0;
 
     margin-top: 0;
 
background-color: white;
 
background-color: white;
−
    padding: 0;
+
 
 
     text-align: center;
 
     text-align: center;
 
     margin-bottom: 0;
 
     margin-bottom: 0;
Line 477: Line 553:
 
}
 
}
 
#slide1 h1{
 
#slide1 h1{
 +
    font-size:3em;
 +
   
 +
   
 +
   
 +
}
 +
#slide2 h1{
 +
    font-size:3em;
 +
   
 +
   
 +
   
 +
}
 +
 +
 +
#slide5 {
 +
    margin-top: 0;
 +
background-color: white;
 +
    padding: 0;
 +
    text-align: center;
 +
    margin-bottom: 0;
 +
  display: block;
 +
    position: relative;
 +
    z:1;
 +
}
 +
#slide5 h1{
 
     font-size:5vw;
 
     font-size:5vw;
 
      
 
      
Line 482: Line 582:
 
      
 
      
 
}
 
}
 +
 +
 +
 +
 
#slide1HomePage {
 
#slide1HomePage {
 
     margin-top: 0;
 
     margin-top: 0;
Line 509: Line 613:
 
     color:white;
 
     color:white;
 
     color:black;
 
     color:black;
−
     font-size:6vw;
+
     font-size:3em;
 
     margin-top: 5%;
 
     margin-top: 5%;
 
     margin-bottom: 3%;
 
     margin-bottom: 3%;
Line 519: Line 623:
 
}
 
}
 
#slide3 {
 
#slide3 {
−
background-color:#283339;
+
background-color:white;
 
      
 
      
 
     text-align: center;
 
     text-align: center;
Line 527: Line 631:
 
#slide3 h1{
 
#slide3 h1{
 
     color:white;
 
     color:white;
−
     font-size:6vw;
+
     font-size:3em;
 
     margin-top: 5%;
 
     margin-top: 5%;
 
     margin-bottom: 3%;
 
     margin-bottom: 3%;
Line 549: Line 653:
 
#slide4 h1{
 
#slide4 h1{
 
     color:white;
 
     color:white;
−
     font-size:6vw;
+
     font-size:3em;
 
     margin-top: 10%;
 
     margin-top: 10%;
 
     margin-bottom: auto;
 
     margin-bottom: auto;
Line 565: Line 669:
 
#slide5 h1{
 
#slide5 h1{
 
     color:white;
 
     color:white;
−
     font-size:6vw;
+
     font-size:3em;
 
     margin-top: 10%;
 
     margin-top: 10%;
 
     margin-bottom: auto;
 
     margin-bottom: auto;
Line 578: Line 682:
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
     text-align: center;
 
     text-align: center;
−
      
+
     height:13vh;
 +
color:white;
 +
}
 +
#subPagesSlide p{
 +
color:white;
 +
font-weight:100;
 +
}
 +
#subPagesSlide p:hover{
 +
color:#FFE545;
 
}
 
}
 
#subPagesSlide img{
 
#subPagesSlide img{
Line 589: Line 701:
 
    
 
    
 
}
 
}
−
.tile{
+
 
−
    width: 80%;
+
.pageIcon {
−
    height: 20vh;  
+
font-size: 0px;
−
    background-color: black;
+
cursor: pointer;
−
    border: 5px solid white;
+
width: 200px;
−
    margin-left: auto;
+
height: 200px;
−
    margin-right: auto;
+
text-align: center;
−
    margin: 5%;
+
position: relative;
−
    overflow: hidden;
+
z-index: 1;
−
 
+
color: #fff;
 +
margin-left:auto;
 +
margin-right:auto;
 +
 
 
}
 
}
−
.secondSlideText{
+
 
−
    margin-top: 110%;
+
 
 +
.pageIcon:before {
 +
font-family: 'Flaticon';
 +
speak: none;
 +
font-size: 180px;
 +
line-height: 180px;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
display: block;
 +
-webkit-font-smoothing: antialiased;
 +
text-align:center;
 +
margin-left:auto;
 +
margin-right:auto;
 
}
 
}
−
.tile div{
+
.tileDescription{
−
    -webkit-transition: all .2s ease-in-out;
+
text-align:center;
−
-moz-transition: all .2s ease-in-out;
+
color:white;
−
-o-transition: all .2s ease-in-out;
+
−
transition: all .2s ease-in-out;
+
−
   
+
−
    -webkit-transition: all .2s ease-in-out;
+
−
    -moz-transition: all .2s ease-in-out;
+
−
    -o-transition: all .2s ease-in-out;
+
−
    transition: all .2s ease-in-out;
+
 
}
 
}
−
.tile:hover div{
 
  
 +
.tile {
 +
display: inline-block;
 +
font-size: 0px;
 +
cursor: pointer;
 +
margin: 15px 30px;
 +
width: 90px;
 +
height: 90px;
 +
border-radius: 50%;
 +
text-align: center;
 +
position: relative;
 +
z-index: 1;
 +
color: #fff;
 
      
 
      
−
     -webkit-transform:translate(0px, -80%);
+
     background: rgba(255,255,255,0.1);
−
    -moz-transform:translate(0px, -80%);
+
-webkit-transition: background 0.2s, color 0.2s;
−
    -o-transform:translate(0px, -80%);
+
-moz-transition: background 0.2s, color 0.2s;
−
    transform:translate(0px, -80%);
+
transition: background 0.2s, color 0.2s;
 
}
 
}
−
.tile p{
+
 
 +
.tile:after {
 +
pointer-events: none;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
border-radius: 50%;
 +
content: '';
 +
-webkit-box-sizing: content-box;
 +
-moz-box-sizing: content-box;
 +
box-sizing: content-box;
 
      
 
      
−
    color: white;
+
    top: -7px;
−
    font-size: 2.3em;
+
left: -7px;
−
    font-weight: 100;
+
padding: 7px;
 +
box-shadow: 0 0 0 4px #fff;
 +
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
 +
-webkit-transform: scale(.8);
 +
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
 +
-moz-transform: scale(.8);
 +
-ms-transform: scale(.8);
 +
transition: transform 0.2s, opacity 0.2s;
 +
transform: scale(.8);
 +
opacity: 0;
 
}
 
}
−
.tile img{
+
 
−
    margin-left: auto;
+
.tile:before {
−
    margin-right: auto;
+
font-family: 'Flaticon';
−
    margin-bottom: -8%;
+
speak: none;
−
    margin-top: -5%;
+
font-size: 48px;
 +
line-height: 90px;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
display: block;
 +
-webkit-font-smoothing: antialiased;
 
}
 
}
−
.tile1{
+
.tile:hover{
−
      background-image:url("../images/looking-molecular-structure-3696469-ji.jpg");
+
    background-color: rgba(255, 255, 255, 1);
−
     background-size:cover;
+
     color: #0e83cd;
−
        background-position: left top;
+
−
    background-repeat: no-repeat;
+
 
}
 
}
−
.tile2{
+
.tile_yellow:hover{
−
     background-color: #3EC7F3;
+
     background-color: rgba(255, 255, 255, 1);
−
     color: white;
+
     color: #eea303;
 
}
 
}
−
.sub_page_Button p{
+
.tile:after{
−
 
+
     -webkit-transform:scale(1.2);
−
     color: white;
+
     -moz-transform:scale(1.2);
−
     margin-bottom: 0;
+
     -ms-transform:scale(1.2);
−
     margin: 0;
+
     transform:scale(1.2);
−
    padding: 0;
+
−
    font-size: 1.2em;
+
−
     font-weight: 100;
+
 
}
 
}
−
.sub_Page_Button{
+
.tile:hover:after{
−
    margin: 0;
+
-webkit-transform: scale(1);
−
   
+
-moz-transform: scale(1);
−
    width: 90%;
+
-ms-transform: scale(1);
−
    margin-bottom: 0;
+
transform: scale(1);
−
    display: inline-block;
+
opacity: 1;
−
   
+
−
    padding-bottom: 0px;
+
−
    border: 3px solid transparent;
+
−
    border-radius: 5px;
+
−
    box-shadow: 0 0 1px rgba(0,0,0,0);
+
−
    overflow: hidden;
+
−
    -webkit-transition-duration: 0.3s;
+
−
    transition-duration: 0.3s;
+
−
    -webkit-transition-property: color, background-color;
+
−
    transition-property: color, background-color;
+
 
}
 
}
−
.sub_page_Button h2{
+
.secondSlideText{
−
     margin-top: -0.5px;
+
     margin-top: 110%;
−
}
+
−
.sub_Page_Button:hover p, .sub_Page_Button:focus p, .sub_Page_Button:active p{
+
−
    /*background-color: #2098d1;*/
+
−
    color:#FFE545;
+
−
   
+
 
}
 
}
 +
  
 
/*************************Slide Down Arrows*********************************/
 
/*************************Slide Down Arrows*********************************/
Line 685: Line 825:
 
     border-left: 35px solid transparent;
 
     border-left: 35px solid transparent;
 
     border-right: 35px solid transparent;
 
     border-right: 35px solid transparent;
−
     border-top: 35px solid #E9E9E9;
+
     border-top: 35px solid white;
 
     margin-left: 82vw;
 
     margin-left: 82vw;
 
}
 
}
 +
 
.arrow_down_2{
 
.arrow_down_2{
 
     width:0;
 
     width:0;
Line 693: Line 834:
 
     border-left: 35px solid transparent;
 
     border-left: 35px solid transparent;
 
     border-right: 35px solid transparent;
 
     border-right: 35px solid transparent;
−
     border-top: 35px solid #FFE545;
+
     border-top: 35px solid white;
 
     margin-left: 82vw;
 
     margin-left: 82vw;
 
}
 
}
Line 706: Line 847:
 
     border: 0px solid black;
 
     border: 0px solid black;
 
     height: auto;
 
     height: auto;
 +
z-index:5;
 
}
 
}
 
.makeNavBarColor{
 
.makeNavBarColor{
Line 720: Line 862:
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
     font-size: 1.4em;
 
     font-size: 1.4em;
−
      
+
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
      
 
      
 
}
 
}
Line 726: Line 868:
 
     font-size:0.9em;
 
     font-size:0.9em;
 
     margin-left: 15%;
 
     margin-left: 15%;
−
font-weight:100;
+
font-weight:200;
 
}
 
}
 
.navbar-inverse .navbar-nav>li>a{
 
.navbar-inverse .navbar-nav>li>a{
Line 740: Line 882:
 
     margin-left: 25%;
 
     margin-left: 25%;
 
     margin-top: -2%;
 
     margin-top: -2%;
 +
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
 
}
 
}
 
.navbar-brand{
 
.navbar-brand{
 
     white-space: nowrap;
 
     white-space: nowrap;
 
}
 
}
 +
 
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
 
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
 
     /*background-color: #2098d1;*/
 
     /*background-color: #2098d1;*/
 
     background-color: transparent;
 
     background-color: transparent;
−
     border-bottom: 8px solid #FFE545;
+
}
 +
.active{
 +
     border-bottom: 4px solid #FFE545;
 
     border-radius: 5%;
 
     border-radius: 5%;
 
}
 
}
 +
 +
.biofilmsActive{
 +
    border-bottom: 4px solid #31B2DE;
 +
}
 +
 
/**********************Nav Bar End***********************************/
 
/**********************Nav Bar End***********************************/
  
Line 782: Line 933:
 
     padding-top:5px;
 
     padding-top:5px;
 
     padding-bottom: 5px;
 
     padding-bottom: 5px;
−
     font-size: 2em;
+
     font-size: 1em;
 
}
 
}
 
.stick{
 
.stick{
 
   position: fixed;
 
   position: fixed;
−
   top:22%;
+
   top:14%;
 
      
 
      
 
}
 
}
 +
 
#mainBodySideBar{
 
#mainBodySideBar{
 
   margin-top: 1%;
 
   margin-top: 1%;
 +
  
 
}
 
}
 
.sideBarContent{
 
.sideBarContent{
−
      
+
     list-style-type: none;
 +
width:300px;
 
}
 
}
 
.sideBarContent li{
 
.sideBarContent li{
 
     list-style-type: none;
 
     list-style-type: none;
−
    font-size: 2em;
+
color:#A8A39D;
 +
font-weight:100;
 
     /*background-color:rgba(49,178,222,0.2);*/
 
     /*background-color:rgba(49,178,222,0.2);*/
 +
margin-bottom:0px;
 +
margin-top:0;
 +
margin-bottom:10px;
 +
padding:0;
 
}
 
}
−
.sideBarItemActive{
+
.sideBarContent h1{
−
  /* background-color: #31B2DE;*/
+
margin:0;
−
    border: 3px solid #FFE545;
+
padding:0;
−
    border-radius: 10%;
+
−
    color: #FFE545;
+
−
    font-weight: 120;
+
−
    font-size: 2em;
+
−
    margin-left: 2px;
+
−
    background-color: rgba(255,229,69,0.2);
+
 
}
 
}
 +
.sideBarContent h2{
 +
margin:0;
 +
padding:0;
 +
 +
}
 +
.sideBarContent h3{
 +
margin:0;
 +
margin-left:5%;
 +
padding:0;
 +
}
 +
.sideBarContent p{
 +
margin:0;
 +
margin-left:5%;
 +
padding:0;
 +
word-wrap:break;
 +
 +
}
 +
 
/*****************************************Time line*********************************/
 
/*****************************************Time line*********************************/
 
.timeline{
 
.timeline{
Line 842: Line 1,013:
 
.tl_month h2{
 
.tl_month h2{
 
     float:inherit;
 
     float:inherit;
−
     margin-top: auto;
+
     margin-top: -1%;
 
     margin-bottom: auto;
 
     margin-bottom: auto;
 
     color: #283339;
 
     color: #283339;
Line 1,061: Line 1,232:
 
    
 
    
 
     margin-left: 40%;
 
     margin-left: 40%;
−
     width: 160;
+
     width: 160px;
−
     height: 180;
+
     height: 180px;
 
}
 
}
 
.quote_div{
 
.quote_div{
Line 1,199: Line 1,370:
 
     #mainTitleText{
 
     #mainTitleText{
 
         margin-top: 20%;
 
         margin-top: 20%;
−
        font-size: 3em;
+
font-size:2em;
 +
       
 
     }
 
     }
 
     #subTitleText{
 
     #subTitleText{
 +
    font-size:4em;
 +
        margin-bottom: -1%;
 +
    }
 +
#subTitleText2{
 
         font-size: 1.5em;   
 
         font-size: 1.5em;   
 
         margin-bottom: -1%;
 
         margin-bottom: -1%;
Line 1,212: Line 1,388:
 
     }
 
     }
 
     .bio-slide{
 
     .bio-slide{
−
         width: 300px;     
+
         width: 400px;     
 
     }
 
     }
 
     .navBarSwitchButton{
 
     .navBarSwitchButton{
 
     width:12vw;
 
     width:12vw;
 
     height: 12vw;
 
     height: 12vw;
 +
    }
 +
}
 +
@media screen and (max-width:600px){
 +
    .bio-slide{
 +
        width: 300px;   
 
     }
 
     }
 
}
 
}
Line 1,291: Line 1,472:
 
@media only screen and (min-width:1600px){
 
@media only screen and (min-width:1600px){
 
   #subTitleText{
 
   #subTitleText{
−
         font-size: 2vw;    
+
          
 +
    }
 +
   #subTitleText2{
 +
       
 
     }  
 
     }  
 
}
 
}
Line 1,310: Line 1,494:
 
     margin-top: 0%;
 
     margin-top: 0%;
 
        
 
        
 +
}
 +
.stick{
 +
 +
  top:11%; 
 
}
 
}
 
     #mainTitleText{
 
     #mainTitleText{
Line 1,329: Line 1,517:
 
     #mainTitleText{
 
     #mainTitleText{
 
         margin-top: 20%;
 
         margin-top: 20%;
−
         font-size: 3em;
+
         font-size: 1em;
 
         margin-bottom: 3%;
 
         margin-bottom: 3%;
 
     }
 
     }
 
     #subTitleText{
 
     #subTitleText{
 +
     
 +
        margin-bottom: -1%;
 +
    }
 +
    #subTitleText2{
 
         font-size:3em;   
 
         font-size:3em;   
 
         margin-bottom: -1%;
 
         margin-bottom: -1%;
Line 1,341: Line 1,533:
 
     .navbar-nav li{
 
     .navbar-nav li{
 
     margin: 0;
 
     margin: 0;
−
 
+
 
 +
}
 +
#titleImg{
 +
margin-top:4%;
 +
}
 +
.pageIcon{
 +
margin-top:4%;
 +
}
 +
#titleSlide_hp{
 +
margin-top:-13%;
 +
}
 +
.subtitletext2{
 +
margin-bottom:30%;
 +
}
 +
#titleSlideFirstTime{
 +
margin-top:-13%;
 +
}
 +
.downImg{
 +
margin-top:14%;
 +
}
 +
#titleSlide{
 +
    margin-top: -12%;
 +
 
 +
 
 +
 
 +
 
 +
 
 
}
 
}
 
      
 
      
Line 1,347: Line 1,565:
 
#navItems{
 
#navItems{
 
      
 
      
−
     margin-left: 12%;
+
      
 
     margin-top: 2%;
 
     margin-top: 2%;
 
}
 
}
Line 1,360: Line 1,578:
 
     color: white;
 
     color: white;
 
      
 
      
−
     margin-left: 85%;
+
     margin-left: 70%;
 
      
 
      
 
}
 
}
Line 1,370: Line 1,588:
 
         margin-top: 10vh;     
 
         margin-top: 10vh;     
 
     }
 
     }
 +
.pageIcon{
 +
        margin-top: 10vh;   
 +
    }
 +
 +
.switchButton{
 +
width:80%;
 +
 +
}
 
      
 
      
 
}
 
}
Line 1,383: Line 1,609:
 
     }
 
     }
 
     #subTitleText{
 
     #subTitleText{
 +
     
 +
        margin-bottom: -1%;
 +
    }
 +
#subTitleText2{
 
         font-size:2em;   
 
         font-size:2em;   
 
         margin-bottom: -1%;
 
         margin-bottom: -1%;
Line 1,446: Line 1,676:
 
}*/
 
}*/
  
−
@media screen and (max-height:600px) and (max-width:1024px){
+
 
−
    #navItems{
+
−
   
+
−
    margin-left: 0vw;
+
−
    margin-top: 0%;
+
−
     
+
−
}
+
−
    #mainTitleText{
+
−
        margin-top: 14vh;
+
−
    }
+
−
   
+
−
    .navbar-brand h1{
+
−
    color: white;
+
−
    margin: 0;
+
−
    margin-left: 6vw;
+
−
   
+
−
}
+
−
}
+
 
.body{
 
.body{
 
     zoom:100%;
 
     zoom:100%;
Line 1,599: Line 1,812:
 
}
 
}
 
     #titleImg{
 
     #titleImg{
 +
        margin-top: 10vh;   
 +
    }
 +
.pageIcon{
 
         margin-top: 10vh;     
 
         margin-top: 10vh;     
 
     }
 
     }
Line 1,639: Line 1,855:
 
}
 
}
 
     #titleImg{
 
     #titleImg{
 +
        margin-top: 10vh;   
 +
    }
 +
.pageIcon{
 
         margin-top: 10vh;     
 
         margin-top: 10vh;     
 
     }
 
     }
Line 1,679: Line 1,898:
 
}
 
}
 
     #titleImg{
 
     #titleImg{
 +
        margin-top: 10vh;   
 +
    }
 +
.pageIcon{
 
         margin-top: 10vh;     
 
         margin-top: 10vh;     
 
     }
 
     }
Line 1,748: Line 1,970:
 
     }
 
     }
 
}
 
}
−
@media screen and (max-width:1920px){
+
@media screen and (max-width:3000px){
  
 
     .navBarSwitchButton{
 
     .navBarSwitchButton{
−
     width:63px;
+
     width:55px;
−
     height: 63px;
+
     height: 55px;
 +
margin-top:8%;
 +
margin-bottom:-5%;
 
     }
 
     }
 
}
 
}
Line 1,761: Line 1,985:
 
     }
 
     }
 
     .downImg{
 
     .downImg{
−
         margin-top: 5%;     
+
         margin-top: -2%;     
 
     }
 
     }
 
     .projectIcon{
 
     .projectIcon{
−
           
+
         
 
     }
 
     }
 +
#titleSlide{
 +
    margin-top: -13%;
 +
 
}
 
}
−
@media screen and (max-height:1080px) and (max-width:1920px){
+
}
 +
 
 +
@media screen and (max-height:2000px) and (max-width:3000px){
 
     #mainTitleText{
 
     #mainTitleText{
−
         margin-top: 3%;
+
         margin-top: 7%;
 
         margin-bottom: 1%;
 
         margin-bottom: 1%;
 
     }
 
     }
Line 1,782: Line 2,011:
 
         max-width: 30%;
 
         max-width: 30%;
 
     }
 
     }
 +
#titleImg{
 +
margin-top:10%;
 +
}
 +
.pageIcon{
 +
margin-top:10%;
 +
}
 +
.stick{
 +
 +
  top:30%; 
 +
}
 +
.projectTitleMainScreen{
 +
margin-top:20%;
 +
}
 +
#subTitleText2{
 +
margin-top:6%;
 +
font-size:2em;
 +
}
 +
.switchButton{
 +
}
 +
 +
}
 +
@media screen and (max-height:600px) and (max-width:1024px){
 +
    #navItems{
 +
   
 +
    margin-left: 0vw;
 +
    margin-top: 0%;
 +
     
 +
}
 +
    #mainTitleText{
 +
        margin-top: 14vh;
 +
    }
 +
   
 +
    .navbar-brand h1{
 +
    color: white;
 +
    margin: 0;
 +
    margin-left: 6vw;
 +
   
 +
}
 +
#titleImg{
 +
margin-top:0%;
 +
}
 +
.pageIcon{
 +
margin-top:0%;
 +
}
 
}
 
}
 
@media screen and (max-height:900px) and (max-width:1440px){
 
@media screen and (max-height:900px) and (max-width:1440px){
Line 1,798: Line 2,071:
 
         max-width: 30%;
 
         max-width: 30%;
 
     }
 
     }
 +
.stick{
 +
  position: fixed;
 +
  top:24%;
 +
   
 +
}
 
}
 
}
 
@media screen and (max-height:1024px) and (max-width:1280px){
 
@media screen and (max-height:1024px) and (max-width:1280px){
Line 1,814: Line 2,092:
 
         max-width: 30%;
 
         max-width: 30%;
 
     }
 
     }
 +
.stick{
 +
 +
  top:32%;
 +
   
 +
}
 
}
 
}
 
@media screen and (max-height:768px) and (max-width:1366px){
 
@media screen and (max-height:768px) and (max-width:1366px){
 
     #mainTitleText{
 
     #mainTitleText{
−
         margin-top: 3%;
+
         margin-top: 5%;
 
         margin-bottom: -1%;
 
         margin-bottom: -1%;
 
     }
 
     }
Line 1,825: Line 2,108:
 
        
 
        
 
     }
 
     }
 +
.stick{
 +
 +
  top:14%; 
 +
}
 
     .downImg{
 
     .downImg{
 
         margin-top: 5%;   
 
         margin-top: 5%;   
Line 1,830: Line 2,117:
 
         max-width: 30%;
 
         max-width: 30%;
 
     }
 
     }
 +
#titleImg{
 +
margin-top:4%;
 
}
 
}
 +
.pageIcon{
 +
margin-top:4%;
 +
}
 +
}
 +
@media screen and (max-height:768px) and (max-width:1024px){
  
 +
.stick{
 +
 +
  top:18%; 
 +
}
 +
}
 
@media screen and (max-height:800px) and (max-width:1280px){
 
@media screen and (max-height:800px) and (max-width:1280px){
 
     #mainTitleText{
 
     #mainTitleText{
Line 1,847: Line 2,146:
 
         max-width: 30%;
 
         max-width: 30%;
 
     }
 
     }
 +
.stick{
 +
  top:19%;
 +
   
 +
}
 
}
 
}
 
@media screen and (max-height:769px) and (max-width:1024px){
 
@media screen and (max-height:769px) and (max-width:1024px){
Line 1,882: Line 2,185:
 
@media screen and (max-height:720px) and (max-width:1280px){
 
@media screen and (max-height:720px) and (max-width:1280px){
 
     #mainTitleText{
 
     #mainTitleText{
−
         margin-top: 3%;
+
         margin-top: 5%;
 
         margin-bottom: -1%;
 
         margin-bottom: -1%;
 
     }
 
     }
Line 1,895: Line 2,198:
 
         max-width: 30%;
 
         max-width: 30%;
 
     }
 
     }
 +
#titleImg{
 +
margin-top:4%;
 +
}
 +
.pageIcon{
 +
margin-top:4%;
 +
}
 +
}
 +
@media screen and (max-height:600px) and (max-width:1024px){
 +
.pageIcon{
 +
margin-top:0%;
 +
}
 
}
 
}
 
@media screen and (max-height:600px) and (max-width:1024px){
 
@media screen and (max-height:600px) and (max-width:1024px){
 
     #mainTitleText{
 
     #mainTitleText{
−
         margin-top: 2%;
+
         margin-top: 5%;
 
          
 
          
 
     }
 
     }
Line 1,907: Line 2,221:
 
     }
 
     }
 
     .downImg{
 
     .downImg{
−
         margin-top: 12%;   
+
         margin-top: 8%;   
 
          
 
          
 
         max-width: 30%;
 
         max-width: 30%;
Line 1,925: Line 2,239:
  
 
     .downImg{
 
     .downImg{
−
         margin-top: 10%;   
+
         margin-top: 6%;   
 
          
 
          
 
         max-width: 20%;
 
         max-width: 20%;
 
     }
 
     }
 +
#titleSlide_hp{
 +
margin-top:-12%;
 +
height:90vh;
 +
}
 +
#titleImg{
 +
margin-top:6%;
 +
}
 +
.pageIcon{
 +
margin-top:6%;
 +
}
 +
}
 +
@media screen and (max-height:1024px) and (max-width:768px){
 +
 +
.downImg{
 +
margin-top:25%;
 +
}
 
}
 
}
 
@media screen and (max-height:600px) and (max-width:400px){
 
@media screen and (max-height:600px) and (max-width:400px){
Line 2,045: Line 2,375:
 
}
 
}
 
.sponsorImg{
 
.sponsorImg{
−
     margin-left: 5%;
+
     margin-left: 3%;
 +
margin-top:5%;
 
}
 
}
 
#mainTitleText{
 
#mainTitleText{
 
      
 
      
 +
}
 +
  .navbar-brand h1{
 +
    margin: 0;
 +
      margin-top:-4%;
 +
 +
       
 +
   
 +
}
 +
      #navItems{
 +
   
 +
    margin: 0;
 +
}
 +
 +
 +
.navbar-brand{
 +
float:none;
 +
padding:0;
 +
}
 +
.nav{
 +
margin-top:2%;
 +
}
 +
 +
 +
.sub_page_Button p{
 +
 
 +
    color: white;
 +
    margin-bottom: 0;
 +
    margin: 0;
 +
    padding: 0;
 +
    font-size: 1.2em;
 +
    font-weight: 100;
 +
}
 +
.sub_Page_Button{
 +
    margin: 0;
 +
   
 +
    width: 90%;
 +
    margin-bottom: 0;
 +
    display: inline-block;
 +
   
 +
    padding-bottom: 0px;
 +
    border: 3px solid transparent;
 +
    border-radius: 5px;
 +
    box-shadow:  0 0 1px rgba(0,0,0,0);
 +
    overflow: hidden;
 +
    -webkit-transition-duration: 0.3s;
 +
    transition-duration: 0.3s;
 +
    -webkit-transition-property: color, background-color;
 +
    transition-property: color, background-color;
 +
}
 +
.sub_page_Button h2{
 +
    margin-top: -0.5px;
 +
}
 +
.sub_Page_Button:hover p, .sub_Page_Button:focus p, .sub_Page_Button:active p{
 +
    /*background-color: #2098d1;*/
 +
    color:#FFE545;
 +
   
 +
}
 +
 +
 +
a{
 +
 +
text-decoration:none;
 +
}
 +
a:hover{
 +
 +
text-decoration:none;
 +
}
 +
ul {
 +
    list-style-type: none;
 +
list-style-image:none;
 +
}
 +
a:visited{
 +
 +
text-decoration:none;
 +
}
 +
 +
a, a:visited, a:active {
 +
   
 +
text-decoration:none;
 +
}
 +
@media screen and projection{
 +
a:visited{
 +
 +
text-decoration:none;
 +
}
 +
}
 +
li{
 +
text-decoration:none;
 +
border:none;
 +
 +
}
 +
@media screen and projection{
 +
a:active{
 +
 +
text-decoration:none;
 +
border:none;
 +
}
 +
}
 +
a:active{
 +
 +
text-decoration:none;
 +
border:none;
 +
}
 +
 +
.sideBarItemActive{
 +
  /* background-color: #31B2DE;*/
 +
  /*  border: 3px solid #FFE545;*/
 +
    border-radius: 10%;*/
 +
   
 +
 
 +
color:black;
 +
 +
  /* background-color: rgba(255,229,69,0.2);*/
 +
}
 +
a:link{
 +
color:inherit;
 +
text-decoration:none;
 +
border:none;
 +
 +
}
 +
 +
.sideBarItemActive p{
 +
 
 +
color:black;
 +
 +
}
 +
.sideBarItemActive h2{
 +
 
 +
color:black;
 +
 +
}
 +
.sideBarItemActive h1{
 +
 
 +
color:black;
 +
 +
}
 +
.sideBarItemActive h3{
 +
 
 +
color:black;
 +
 +
}
 +
 +
@media screen and (max-width:1020px){
 +
.navbar-brand h1{
 +
font-size:1em;
 +
    margin-top:26%;
 +
}
 +
#navItems{
 +
font-size:1em;
 +
}
 +
.navbar-nav li{
 +
font-size:1em;
 +
margin-top:1%;
 +
}
 +
.texItem{
 +
margin-top:5%;
 +
}
 +
.textItem{
 +
 +
}
 +
.picItem{
 +
 +
}
 +
}
 +
@media screen and (max-width:873px){
 +
.navbar-brand h1{
 +
font-size:1em;
 +
    margin-top:26%;
 +
margin-left:360%;
 +
}
 +
#navItems{
 +
font-size:1em;
 +
margin-right:8%;
 +
margin-top:-3%;
 +
}
 +
.navbar-nav li{
 +
font-size:1em;
 +
margin-top:1%;
 +
}
 +
.texItem{
 +
margin-top:5%;
 +
}
 +
.textItem{
 +
 +
}
 +
.picItem{
 +
 +
}
 +
}
 +
@media screen and (max-width:800px){
 +
.navbar-brand h1{
 +
font-size:1em;
 +
    margin-top:26%;
 +
margin-left:300%;
 +
}
 +
#navItems{
 +
font-size:1em;
 +
margin-left:-5%;
 +
margin-top:-3%;
 +
margin-right:0;
 +
}
 +
.navbar-nav li{
 +
font-size:1em;
 +
margin-top:1%;
 +
}
 +
.texItem{
 +
margin-top:5%;
 +
}
 +
.textItem{
 +
 +
}
 +
.picItem{
 +
 +
}
 +
 +
}
 +
 +
@media screen and (max-width:770px){
 +
.navbar-brand h1{
 +
font-size:1em;
 +
    margin-top:26%;
 +
margin-left:300%;
 +
}
 +
#navItems{
 +
font-size:1em;
 +
margin-right:0%;
 +
margin-top:-3%;
 +
}
 +
.navbar-nav li{
 +
font-size:1em;
 +
margin-top:1%;
 +
}
 +
.texItem{
 +
margin-top:5%;
 +
}
 +
.textItem{
 +
 +
}
 +
.picItem{
 +
 +
}
 +
 +
 +
 +
 +
}
 +
.contentSubTitle{
 +
    font-weight: 200;
 +
    margin-top: 0%;
 +
    margin-bottom: 3%;
 +
font-size:2.3em;
 +
color:black;
 +
margin-left:auto;
 +
margin-right:auto;
 +
 +
}
 +
.contentSubSubTitle{
 +
    font-weight: 300;
 +
    margin-top: 0%;
 +
    margin-bottom: 3%;
 +
font-size:1.5em;
 +
color:black;
 +
}
 +
@media screen and (min-width:1400px){
 +
.sideBarContent{
 +
width:350px;
 +
}
 +
}
 +
@media screen and (max-width:1200px){
 +
.sideBarContent{
 +
width:250px;
 +
}
 +
}
 +
@media screen and (max-height:1024px) and (max-width:768px){
 +
 +
#subTitleText2{
 +
margin-bottom:20%;
 +
}
 +
 +
   
 +
}
 +
@media screen and (max-height:2000px) and (max-width:3000px){
 +
.projectTitleMainScreen{
 +
margin-top:20%;
 +
}
 +
#subTitleText2{
 +
margin-top:6%;
 +
font-size:4em;
 +
}
 +
.switchButton{
 +
margin-bottom:-10%;
 +
}
 +
 +
}
 +
 +
#headerText{
 +
margin-bottom:-20% !important;
 +
}
 +
 +
 +
.slide7{
 +
    margin-top: 0;
 +
background-image:url("https://static.igem.org/mediawiki/2015/8/81/LethHS2015_team_cover_dark.jpg");
 +
    background-size:cover;
 +
        background-position: left top;
 +
    background-repeat: no-repeat;
 +
    padding: 0;
 +
    text-align: center;
 +
    margin-bottom: 0;
 +
  display: block;
 +
    position: relative;
 +
    z:1;
 +
}
 +
.slide7 h1{
 +
    font-size:5vw;
 +
   
 +
   
 +
   
 +
}
 +
.tl_label h2{
 +
    margin-top:0;
 +
font-weight:200;
 +
}
 +
.noteIcon {
 +
font-size: 0px;
 +
cursor: pointer;
 +
width: auto;
 +
height: auto;
 +
text-align: center;
 +
position: relative;
 +
z-index: 1;
 +
color: #fff;
 +
margin-left:auto;
 +
margin-right:auto;
 +
 +
}
 +
 +
 +
.noteIcon:before {
 +
font-family: 'Flaticon';
 +
speak: none;
 +
font-size: 31px;
 +
line-height: 40px;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
display: block;
 +
-webkit-font-smoothing: antialiased;
 +
text-align:center;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
.aspects_orange{
 +
background-color:#eea303;
 +
}
 +
 +
.notvisible{
 +
display:none;
 +
}
 +
 +
@media (max-width:1200px) {
 +
.bigPadding{
 +
padding-left:5%;
 +
padding-right:5%;
 +
}
 +
}
 +
@media (max-width:1920px) {
 +
.bigPadding{
 +
padding-left:15%;
 +
padding-right:15%;
 +
}
 +
}
 +
#slide1 h1{
 +
margin-top:-1%;
 +
margin-bottom:-1%;
 +
margin-bottom:15px;
 +
}
 +
#slide2 h1{
 +
margin-top:-1%;
 +
margin-bottom:-1%;
 +
margin-bottom:15px;
 +
}
 +
@media screen and (max-width:2500px){
 +
#slide1 h1{font-size:5em;
 +
}
 +
#slide2 h1{font-size:5em;
 +
}
 +
 +
}
 +
 +
@media screen and (max-width:1200px){
 +
#slide1 h1{
 +
font-size:3em;
 +
}
 +
#slide2 h1{
 +
font-size:3em;
 +
}
 +
}
 +
@media screen and (max-width:768px){
 +
#nav-head{
 +
margin:0;
 +
display:none;
 +
}
 +
#navItems{
 +
margin-right:5%;
 +
margin-top:2%;
 +
 +
}
 +
}
 +
@media screen and (max-width:2500px){
 +
.contentPageImg{
 +
width:20%;
 +
}
 +
 +
}
 +
@media screen and (max-width:800px){
 +
.contentPageImg{
 +
width:40%;
 +
}
 +
 
}
 
}

Latest revision as of 00:12, 19 September 2015

@font-face{ font-family: 'Mohave'; src:url('https://static.igem.org/mediawiki/2015/5/50/Mohave.otf'); } @font-face{ font-family: 'existence'; src:url('https://static.igem.org/mediawiki/2015/0/03/LethHS2015_raleway.otf'); font-weight:100; } @font-face { font-family: "Flaticon"; src: url("https://static.igem.org/mediawiki/2015/0/04/LethHS2015_flaticon5.eot"); src: url("../flaticon.eot#iefix") format("embedded-opentype"), url("https://static.igem.org/mediawiki/2015/5/53/LethHS2015_flaticon5.woff") format("woff"), url("https://static.igem.org/mediawiki/2015/c/cb/LethHS2015_flaticon5.svg") format("svg"); font-weight: normal; font-style: normal; } .flaticon-book228:before { content: "\e000"; } .flaticon-brainstorm:before { content: "\e001"; } .flaticon-bricks3:before { content: "\e002"; } .flaticon-business53:before { content: "\e003"; } .flaticon-cone10:before { content: "\e004"; } .flaticon-dna9:before { content: "\e005"; } .flaticon-erlenmeyer1:before { content: "\e006"; } .flaticon-familiar17:before { content: "\e007"; } .flaticon-prize3:before { content: "\e008"; }


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ line-height:1; border:none; }

  1. content{
       margin: 10px 0px 0px -11px;
       width: 101%;
       border: none;

overflow-x:hidden; } .mediawiki { 

       border: none;
       width: 101%;
       background: transparent;

overflow-x:hidden; }

  1. globalWrapper {
       width: 100%;
   overflow-x:hidden;

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

  1. content h1.firstHeading {
       visibility: hidden;

}


  • {
   margin: 0;
   padding: 0;

} body { /*background-image:url("../images/vintage-grass-field-background.jpg"); background-size:cover; background-attachment:fixed; 

   background-repeat: no-repeat;*/
    width:100%;

margin:0; }

.animateBody{ 

    -webkit-animation: fadeAnimation 1s 1;
   -moz-animation: fadeAnimation 1s 1;
   -o-animation: fadeAnimation 1s 1;
   animation: fadeAnimation 1s 1;

}

  1. coloredTitle{
   color:#FFE545;

} .navBarSwitchButton{ 

   width:5vw;
   height: 5vw;
   background-color:#FFE545;
   border-radius:5%;
   margin: 0;
   padding: 0;
   margin-top: -10%;
   padding: 10%;

} .switchButton{ width:50%; height:1vw*0.2; background-color:#0e83cd; border-radius:5%; margin:0; padding:0; margin-left:auto; margin-right:auto; padding:5%; } .mytitle{ 

   content:"hello world";

} .switchButton:hover{ -webkit-transform: scale(1.2); 

   transform: scale(1.2);

} .content{ 

   background-color: white;
   padding-left: 10%;
   padding-right: 10%;

} .choosePic{

} .appear{


}

  1. bodyContent h1, #bodyContent h2 {
 /*margin-bottom:0;*/

}

  1. regularPageBody{
   background-color: white;
   padding-left: 2%;
   padding-right: 2%;
   padding-top: 1%;
   padding-bottom: 4%;
   
      -webkit-transition: opacity 0.5s ease-out;
      -moz-transition: opacity 0.5s ease-out;
       -ms-transition: opacity 0.5s ease-out;
        -o-transition: opacity 0.5s ease-out;
           transition: opacity 0.5s ease-out;

}

  1. pageTitleText{
   margin-top: 0%;
   text-align: center;
   margin-bottom: %;
   font-size:5em;
   color:white;

}

  1. pageSubtitleText{
   margin-top: 0%;
   text-align: center;
   margin-bottom: 3%;
   font-size:3em;
   color:white;

}

  1. pageTitleText span{
   font-size:1em;

} .slideButton{ 

   width: 10%;
   border: 2px solid black;
   background-color: transparent;

   margin: 2% auto;
   padding: 5px;
   border-radius: 5%;

} .slideButton p{ 

   margin-bottom: -0.05%;
   color:black;

}

  1. titleImg{
   margin-top: 3%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0;

} .pageIcon{ 

   margin-top: 3%;
   margin-bottom: 0;

} .regularimg{ 

 /*  margin-left: auto;*/
   margin-right: auto;

} .page_header{ 

   margin: 0;

}

  1. carousel-generic{
  margin-top: auto;
   margin-bottom: auto;

} .caorusel-inner{ 

   margin-right: auto;
   margin-left: auto;

} .carousel-caption{ 

   position: relative;
   text-align: center;

} .carousel-indicators .active { 

 background-color: #31B2DE;

} .carousel-indicators { 

   position: relative;
   display: block;
 margin-top: 5%;
   margin-left: -40%;

} .carousel-indicators li{ 

   border: 1px solid #31B2DE;

} .slideTitle{ 

   font-weight: 100;
   margin-top: 5%;
   margin-bottom: 3%;

} .img2{ 

   margin-left: 30%;

-webkit-filter: grayscale(50%); filter: grayscale(50%); filter:gray; 

   max-width: 60%;
   height:auto;

} .downImg{ 

   text-align: center;
   margin: 0;
   margin-right:auto;
   margin-left: auto;
   
   -webkit-animation: fadeAnimation 2.5s infinite;
   -moz-animation: fadeAnimation 2.5s infinite;
   -o-animation: fadeAnimation 2.5s infinite;
   animation: fadeAnimation 2.5s infinite;
   max-width: 20%;
   height:auto;

} figure{ display:table; } figure img{ display:block;

} figcaption{ display:table-caption; caption-side:bottom; 

 background-color: #31B2DE;

text-align:center; } .downImgText{ 

   font-size:3vw;
   color:white;
   text-align: center;
   margin-top:-4%;
   color:white;

} @keyframes fadeAnimation{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% { opacity:100% }

} @-o-keyframes fadeAnimation{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% {opacity: 1; }

} @-moz-keyframes fadeAnimation{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% {opacity: 1; }

} @-webkit-keyframes fadeAnimation{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% {opacity: 1; }

}

@media (max-width:1200px) { 

   .img2{
       margin-left:auto;
       margin-right:auto;  
   }
   .regularimg{
         
   }
   #carousel-generic{
       margin-left: auto;
       margin-right: auto;
   }
   .carousel-indicators{
       margin-right: 0%;
       margin-left: -30%;
   }
   .subTextBox{
           
   }

.stick{

} 

   #regularPageBody{
   padding-left: 5%;
   padding-right: 5%;

} } /* @media (max-height:800px) { 

   .body_project{

background-size: 80vh 60vh; } .body_notebook{ background-size: 80vh 60vh; } .body_human_practices{ 

   background-size: 80vh 60vh;

} .body_software{ 

    background-size: 80vh 60vh;

}

.body_team{ background-size: 80vh 60vh;

} }

  • /


.img2:hover{ -webkit-filter: grayscale(0%); filter:grayscale(0%); filter:none; } .jumbotron{ 

   margin-bottom: 0;

}

  1. titleSlide{
   margin-top: -9%;
   padding-bottom: 3%;
   background-image:url("LethHS2015_bees_intro_back.jpg");
   background-size:cover;
       background-position:center center;
   background-repeat: no-repeat;
   height: 105vh;



}

  1. titleSlideFirstTime{
margin-top: -9%;
   margin-bottom: 0;
   padding-bottom: 3%;
   background-image:url("LethHS2015_BridgeonHorizon.png");
   background-size:cover;
       background-position: center center;
   background-repeat: no-repeat;
   height:100vh;

}

  1. mainTitleText{
   font-size:2em;
   color: white;
   margin-bottom: 5px;
   text-align: center;
   font-weight: 100;
   margin-top: 3vh;

} .navbar-toggle{ 

   margin-top: 6vh;

}

  1. subTitleText{
   font-weight: 200;
   font-size: 5em;
   color: white;
   margin-top: -2%;

}

  1. subTitleText2{
   font-weight: 200;
   font-size: 5em;
   color: white;
   margin-top: -2%;

}

  1. subTextBox{
   margin-top: 5px;
   background-color: rgba(1,1,1,0.5);
   border-radius: 10%;
   
   border: 3px solid #FFE545;
   
   padding: 15px;
    margin-left: auto;
   margin-right: auto;
   text-align: center;

}

  1. darker{
  background-color: rgba(1,1,1,0.3);

}

  1. projectTitle{
   border-radius: 5%;
   background-color: rgba(1,1,1,0.0);
   width: 100%;

}

  1. titleText{
   margin-bottom: 9%;

}

  1. titleSlide h1 small{
   color: white;

}

.beePic{ 

   margin-top: -4%;
   margin-left: auto;
   margin-right: auto;

}

  1. titleSlide_hp{
margin-top: -9%;
   background-color:transparent;
   margin-bottom: 0;
   padding-bottom: 0;
    background-image:url("LethHS2015_hp_back.jpg");
   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;


}

  1. titleSlide_hp h1{
   font-size:6vw;
   
   color: white;

}

  1. titleSlide_hp h1 small{
   color: white;

}

  1. titleSlide_notebook{
   background-color:transparent;
   margin-bottom: 0;
   padding-bottom: 3%;
    background-image:url("../images/grass-field-with-flowers02.jpg");
   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;

}

  1. titleSlide_notebook h1{
   font-size:6vw;
   color: white;

}

  1. titleSlide_notebook small{
   color: white;

}

  1. titleSlide_project{
   background-color:transparent;
   margin-bottom: 0;
   padding-bottom: 0;
    background-image:url("../images/Honeycomb-with-bees_1920x1080.jpg");
   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;

}

  1. titleSlide_project h1{
   font-size:6vw;
   
   color: white;

}

  1. titleSlide_project small{
   color: white;

}

  1. titleSlide_software{
   background-color:transparent;
   margin-bottom: 0;
   padding-bottom: 0;
    background-image:url("../images/Rocky-Mountain-Scenery-1920x1080-wallpapershd.org.jpg");
   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;

}

  1. titleSlide_software h1{
   font-size:6vw;
   color: white;

}

  1. titleSlide_software small{
   color: white;

}

  1. titleSlide_team{
   background-color:transparent;
   margin-bottom: 0;
   padding-bottom: 0;
    background-image:url("../images/TeamPhoto2.png");
   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;

}

  1. titleSlide_team h1{
   font-size:6vw;
   color: white;

}

  1. titleSlide_team small{
   color: white;

}


  1. slide1 {
   margin-top: 0;

background-color: white; 

   text-align: center;
   margin-bottom: 0;
  display: block;
   position: relative;
   z:1;

}

  1. slide1 h1{
   font-size:3em;

}

  1. slide2 h1{
   font-size:3em;

}


  1. slide5 {
   margin-top: 0;

background-color: white; 

   padding: 0;
   text-align: center;
   margin-bottom: 0;
  display: block;
   position: relative;
   z:1;

}

  1. slide5 h1{
   font-size:5vw;

}



  1. slide1HomePage {
   margin-top: 0;

background-color:white; 

   padding: 0;
   text-align: center;
   margin-bottom: 0;
  display: block;
   position: relative;

}

  1. slide1HomePage h1{
   font-size:6vw;
   
   margin-bottom: auto;

}

  1. slide2 {

background-color:#FFFDCD ; 

   text-align: center;
   margin-bottom: 0;
   display: block;
   position: relative;

}

  1. slide2 h1{
   color:white;
   color:black;
   font-size:3em;
   margin-top: 5%;
   margin-bottom: 3%;

}

  1. slide2 h1 small{
   color:black;

}

  1. slide3 {

background-color:white; 

   text-align: center;
   display: block;
   position: relative;

}

  1. slide3 h1{
   color:white;
   font-size:3em;
   margin-top: 5%;
   margin-bottom: 3%;

}

  1. slide3 h1 small{
   color:white;

}

  1. slide4 {

background-image:url("../images/BridgeonHorizon.png"); 

   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;
   background-attachment: fixed;
   text-align: center;
   display: block;
   position: relative;
   padding: 0;

}

  1. slide4 h1{
   color:white;
   font-size:3em;
   margin-top: 10%;
   margin-bottom: auto;

}

  1. slide4 h1 small{
   color:white;

}

  1. slide5 {

background-color: black; 

   text-align: center;
   display: block;
   position: relative;

}

  1. slide5 h1{
   color:white;
   font-size:3em;
   margin-top: 10%;
   margin-bottom: auto;

}

  1. slide5 h1 small{
   color:white;

}

  1. subPagesSlide{
   padding: 1%;
   margin-bottom: 0%;
   background-color: #101926;
   margin-bottom: 0;
   text-align: center;
   height:13vh;

color:white; }

  1. subPagesSlide p{

color:white; font-weight:100; }

  1. subPagesSlide p:hover{

color:#FFE545; }

  1. subPagesSlide img{
   margin-bottom: 0;
   margin: 0;
   padding: 0;
   margin-left: auto;
   margin-right: auto;

}

.pageIcon { font-size: 0px; cursor: pointer; width: 200px; height: 200px; text-align: center; position: relative; z-index: 1; color: #fff; margin-left:auto; margin-right:auto;

}


.pageIcon:before { font-family: 'Flaticon'; speak: none; font-size: 180px; line-height: 180px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; text-align:center; margin-left:auto; margin-right:auto; } .tileDescription{ text-align:center; color:white; }

.tile { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 30px; width: 90px; height: 90px; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; 

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

-webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; }

.tile:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; 

   	top: -7px;

left: -7px; padding: 7px; box-shadow: 0 0 0 4px #fff; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -webkit-transform: scale(.8); -moz-transition: -moz-transform 0.2s, opacity 0.2s; -moz-transform: scale(.8); -ms-transform: scale(.8); transition: transform 0.2s, opacity 0.2s; transform: scale(.8); opacity: 0; }

.tile:before { font-family: 'Flaticon'; speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .tile:hover{ 

   background-color: rgba(255, 255, 255, 1);
   color: #0e83cd;

} .tile_yellow:hover{ 

   background-color: rgba(255, 255, 255, 1);
   color: #eea303;

} .tile:after{ 

   -webkit-transform:scale(1.2);
   -moz-transform:scale(1.2);
   -ms-transform:scale(1.2);
   transform:scale(1.2);

} .tile:hover:after{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .secondSlideText{ 

   margin-top: 110%;

}


/*************************Slide Down Arrows*********************************/ .arrow_down_1{ 

   width:0;
   height:0;
   border-left: 35px solid transparent;
   border-right: 35px solid transparent;
   border-top: 35px solid white;
   margin-left: 82vw;

}

.arrow_down_2{ 

   width:0;
   height:0;
   border-left: 35px solid transparent;
   border-right: 35px solid transparent;
   border-top: 35px solid white;
   margin-left: 82vw;

}


/**********************Nav Bar***********************************/ .menu { 

   background-color: rgba(1,1,1,0.2);
   /*background-color: rgba(1,1,1,0.3);*//* 0.8 for transparent */
   border-color: transparent;
   padding-bottom: 0;
   border: 0px solid black;
   height: auto;

z-index:5; } .makeNavBarColor{ 

   background-color: rgba(1,1,1,1);

} .navbar-nav li{ 

   margin-top: 1%;
   padding-left:0;
   padding-right:0;
   padding-bottom: 0;
   margin-left: 0;
   margin-right:0;
   margin-bottom: 0;
   font-size: 1.4em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

  1. navItems{
   font-size:0.9em;
   margin-left: 15%;

font-weight:200; } .navbar-inverse .navbar-nav>li>a{ 

   color:white;

} .dropdown:hover .dropdown-menu{ 

   display: block;

}

.navbar-brand h1{ 

   color: white;
   margin: 0;
   margin-left: 25%;
   margin-top: -2%;

font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; } .navbar-brand{ 

   white-space: nowrap;

}

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

   /*background-color: #2098d1;*/
   background-color: transparent;

} .active{ 

   border-bottom: 4px solid #FFE545;
   border-radius: 5%;

}

.biofilmsActive{ 

   border-bottom: 4px solid #31B2DE;

}

/**********************Nav Bar End***********************************/

/*************************Content Pages******************************/ .page_Title{ 

   color: black;
   font-size: 9em;
   text-align:center;

} .contentContainer{ 

   background-color: white;
   margin-left:3%;
   margin-right:3%;
   padding:2%;

}

.noteBookMonthLabels{ 

   margin: left:3%;

}

  1. datelist{
   display: none;

}

  1. dateList li{
   list-style-type: none;
   font-size: 1em;

} .notebookSidebar{ 

   box-shadow: 0px 0px 5px #888888;

} .notebookSideBar h1{ 

   padding-top:5px;
   padding-bottom: 5px;
   font-size: 1em;

} .stick{ 

  position: fixed;
  top:14%;

}

  1. mainBodySideBar{
  margin-top: 1%;


} .sideBarContent{ 

   list-style-type: none;

width:300px; } .sideBarContent li{ 

   list-style-type: none;

color:#A8A39D; font-weight:100; 

   /*background-color:rgba(49,178,222,0.2);*/

margin-bottom:0px; margin-top:0; margin-bottom:10px; padding:0; } .sideBarContent h1{ margin:0; padding:0; } .sideBarContent h2{ margin:0; padding:0;

} .sideBarContent h3{ margin:0; margin-left:5%; padding:0; } .sideBarContent p{ margin:0; margin-left:5%; padding:0; word-wrap:break;

}

/*****************************************Time line*********************************/ .timeline{ 

   list-style: none;
   position: relative;

} .timeline:before{ 

   content: ;
   position: absolute;
   top: 0;
   bottom: 0;
   width: 10px;
   left: 20%;
   margin-left: -10px;
   background: #afdcf8;

} .timeline li{ 

   position: relative;

} .tl_month{ 

   width: 100%;
   height: 50px;
   background-color: #afdcf8;
   margin-bottom: 15px;
      vertical-align: center;
   padding-top: 0.75%;
   padding-left: auto;
   padding-right: auto;

} .tl_month h2{ 

   float:inherit;
   margin-top: -1%;
   margin-bottom: auto;
   color: #283339;

} .tl_time { 

   display: block;
   width: 25%;
   margin-top:2%;
   padding-right: 100px;
   position: absolute;
   font-size:20;
   color:#31B2DE;

} /**************************How to make font size on notebook responsive*******/ .tl_label{ 

   margin-bottom: 15px;
   margin-left: 25%;
   color: black;
   border: 3px solid #31B2DE;
   position: relative;
   border-radius: 5px;
   background: white;
   padding-left: 2%;
   padding-right: 2%;
   cursor: pointer;

} .tl_label h2{ 

   margin-bottom: 15px;

} .tl_label:before{ 

   right: 100%;
   border: solid transparent;
   content: ;
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-right-color: #31B2DE;
   border-width: 1vw;
   top: 1vw;

} .dateContent{ 

   display: none;
   padding: 10px;

} .tl_icon{ 

   width: 40px;
   height: 40px;
   position: absolute;
   background: #31B2DE;
   margin-top:1%;
   border-radius: 50%;
   box-shadow:  0 0 0 8px #afdcf8;
   top:0;
   
   position: relative;
   float: left;
   left: auto;
   left: 20%;
   margin-left: -25px;

} .tl_icon img{ 

   margin-top:4px;
   margin-left: 2px;

} .caption{ 

   text-align:center;

}

/*******************************************************************/ .team-member {

margin-top: 1%; 


     -webkit-transition: opacity 0.5s ease-in;
      -moz-transition: opacity 0.5s ease-in;
       -ms-transition: opacity 0.5s ease-in;
        -o-transition: opacity 0.5s ease-in;
           transition: opacity 0.5s ease-in;

}

.team-member img{ 

       margin-left: 15%;

} .team_pop_up{ 

   overflow: hidden;
   opacity: 0;
   height: 0;
  width: 0;
     -webkit-transition: opacity 0.5s ease-in;
      -moz-transition: opacity 0.5s ease-in;
       -ms-transition: opacity 0.5s ease-in;
        -o-transition: opacity 0.5s ease-in;
           transition: opacity 0.5s ease-in;

} .team_pop_up.no-animation{ 

   animation: none;

} .activeTeamPopUp{ 

     -webkit-transform: translateX(0px);
 -moz-transform: translateX(0px);
 -ms-transform: translateX(0px);
 -o-transform: translateX(0px);
 transform: translateX(0px);
     -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 transition-duration: 0.3s;

} .removeTeamPopUp{ 

    -webkit-transform: translateX(800px);
 -moz-transform: translateX(800px);
 -ms-transform: translateX(800px);
 -o-transform: translateX(800px);
 transform: translateX(800px);
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 transition-duration: 0.3s;

} .removeTeamPopUpStart{ 

    -webkit-transform: translateX(800px);
 -moz-transform: translateX(800px);
 -ms-transform: translateX(800px);
 -o-transform: translateX(800px);
 transform: translateX(800px);
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.0s;
 -moz-transition-duration: 0.0s;
 transition-duration: 0.0s;

} .hideTeamPopUp{ 

   display: none;

} .hideTeamPageBackground{ 

   opacity: 0.2;

} .remove-dark-cover{ 

   display: none;

} .member-desc {

}

.desc-pic {

}

.bio-slide{ 

   position: fixed;
   right: 0;
   top:0;
   z-index: 1000000000000000;
   height: 100%;
   width:600px;
   background-color: #283339;
   -webkit-overflow-scrolling: touch;
   
   overflow-y:auto;

} .bio-slide-content{ 

   padding-right: 12%;
   padding-left: 12%;

} .bio-slide-content h1{ 

   text-align: center;
   color: white;

} .bio-slide-content p{ 

   margin-top: 10%;
   font-size:1.2em;
   color: white;

} .wide_line{ 

   height: 5px;
   width: 90%;
   border-radius: 5%;
   background-color:#E9E9E9; 
   margin-left: auto;
   margin-right: auto;

} .wideProfilePic{ 

   width:100%;
   height: auto;

} .bio-personal{ 

   width: 100%;
   text-align: center;

} .dark-cover{ 

   top:0;
   right: 0;
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: rgba(1,1,1,0.7);
   display: none;

} .display-dark-cover{ 

   display: block;

} .profile-pic{ 

   margin-top: 6%;
  
   margin-left: 40%;
   width: 160px;
   height: 180px;

} .quote_div{ 

   background-color:#E9E9E9; 
   padding: 9%;
   width:90%;
   margin-top: 9%;
   border-radius: 5%;
   margin-left: -5%;

} .quote_div:before{ 

   margin-top: 9%;
   right:99%;
   border: solid transparent;
   content: ;
   height: 0;
   width: 0;
   position: absolute;
   border-width: 1vw;
   border-right-color: #E9E9E9;
   top: 1vw;

} .quote{ 

   font-size: 1.5em;
   color: black;

} .exit_bio{ 

   float:left;
   position: absolute;
   background-color: #31B2DE;
   border-radius: 5%;
   margin-top: 0%;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
   color:white;
   padding: 5px;

} .exit_bio h1{

}

@keyframes fadein{ 

   from{ opacity:0; }
   to {opacity: 1; }

} @-moz-keyframes fadein{ 

   from {opacity:0; }
   to {opacity:1;}

} @-webkit-keyframes fadein{ 

   from{ opacity:0; }
   to{ opacity: 1; }

} @-ms-keyframes fadein{ 

   from { opacity:0; }
   to {opacity: 1; }

} @-o-keyframes fadein{ 

   from { opacity:0; }
   to { opacity:1; }

}

@keyframes fadeout{ 

   from{ opacity:1; }
   to {opacity: 0; }

} @-moz-keyframes fadeout{ 

   from {opacity:1; }
   to {opacity:0;}

} @-webkit-keyframes fadeout{ 

   from{ opacity:1; }
   to{ opacity: 0; }

} @-ms-keyframes fadeout{ 

   from { opacity:1; }
   to {opacity: 0; }

} @-o-keyframes fadeout{ 

   from { opacity:1; }
   to { opacity:0; }

}

/***************TOOLTIP FUNCTIONALITY ****************/

.tooltip { display: inline; position: relative; }

.tooltip:hover:after { background: #333; background: rgba(0,0,0,0.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; }

/****************ANIMATION ************************/

@keyframes changepic { from {background: url("images/team/sample1.jpg") no repeat left top;} to {background: url("images/team/sample2.jpg") no repeat left top;} }

@keyframes movedown { from {margin-bottom: -0.25cm;} to {margin-bottom: 7.5cm;} }


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

   .navBarSwitchButton{
   width:7vw;
   height: 7vw;
   }

}

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

   .subTextBox{

} 

   #nav-head{
       margin-left: -16%;  
       
   }
   #mainTitleText{
       margin-top: 20%;

font-size:2em; 

   }
   #subTitleText{
    font-size:4em;
       margin-bottom: -1%;
   }
  1. subTitleText2{
       font-size: 1.5em;  
       margin-bottom: -1%;
   }
   .subTextBox{
       padding: 0;    
   }
   .downImg{
      /* margin-top: 16vh; */   
   }
   .bio-slide{
       width: 400px;    
   }
   .navBarSwitchButton{
   width:12vw;
   height: 12vw;
   }

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

   .bio-slide{
       width: 300px;    
   }

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

   .navBarSwitchButton{
   width:50px;
   height: 50px;
   }

}

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

   .subTextBox{
       
   }
   #nav-head{
       margin-left: -16%;  
       
   }
   #mainTitleText{
       
   }
   #subTitleText{
      
   }
   .subTextBox{
          
   }
   #navItems{
   
   margin-left: 16%;
   margin-top: 0%;

}

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

   .subTextBox{
       
   }
   #nav-head{
       margin-left: -30%;  
       
   }
   #mainTitleText{
       
   }
   #subTitleText{
      
   }
   .subTextBox{
          
   }
   #navItems{
   
   margin-right: -15%;
   margin-top: 0%;

}

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

   .downImg{
     /*  margin-top: 16vh;  */  
   }
   .slideButton{
       width:30%;    
   }

} @media only screen and (min-width:1024px){ 

  .navbar-brand h1{
   font-size:1.5em

}

} @media only screen and (min-width:1600px){ 

  #subTitleText{
       
   } 
  #subTitleText2{
       
   }

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

       .tl_time {
       
       
   }
         .sideBarContent{
       display: none;
   }

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

   #navItems{
   
   margin-left: -15%;
   margin-top: 0%;

} .stick{ 

  top:11%;

} 

    #mainTitleText{
       margin-top: 14vh;
   }
   
   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: 8vw;

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

   .subTextBox{

} 

   #mainTitleText{
       margin-top: 20%;
       font-size: 1em;
       margin-bottom: 3%;
   }
   #subTitleText{
      
       margin-bottom: -1%;
   }
   #subTitleText2{
       font-size:3em;  
       margin-bottom: -1%;
   }
   .subTextBox{
       padding: 0;    
   }
   .navbar-nav li{
   margin: 0;

}

  1. titleImg{

margin-top:4%; } .pageIcon{ margin-top:4%; }

  1. titleSlide_hp{

margin-top:-13%; } .subtitletext2{ margin-bottom:30%; }

  1. titleSlideFirstTime{

margin-top:-13%; } .downImg{ margin-top:14%; }

  1. titleSlide{
   margin-top: -12%;



}


  1. navItems{


   margin-top: 2%;

} .navbar-inverse .navbar-nav>li>a{ 

   color:white;

} .dropdown:hover .dropdown-menu{ 

   display: block;

}

.navbar-brand h1{ 

   color: white;
   
   margin-left: 70%;

} .navbar-brand{ 

   white-space:nowrap;

} 

   #titleImg{
       margin-top: 10vh;    
   }

.pageIcon{ 

       margin-top: 10vh;    
   }

.switchButton{ width:80%;

}

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

   .subTextBox{

} 

   #mainTitleText{
       margin-top: 10%;
       font-size: 3em;
       margin-bottom: 3%;
   }
   #subTitleText{
      
       margin-bottom: -1%;
   }
#subTitleText2{
       font-size:2em;  
       margin-bottom: -1%;
   }
   .subTextBox{
       padding: 0;    
   }
   .navbar-nav li{
   margin: 0;

}

  1. navItems{
   margin-left: 12%;
   margin-top: 2%;

} .navbar-inverse .navbar-nav>li>a{ 

   color:white;

} .dropdown:hover .dropdown-menu{ 

   display: block;

}

.navbar-brand h1{ 

   color: white;
   margin: 0;
   margin-left: 85%;

} .navbar-brand{ 

   white-space:nowrap;

}

}

@media screen and (min-height:1024px) and (min-width:1280px){ 

   .downImg{
       /*margin-top: 25vh; */   
   }
   #mainTitleText{
       margin-bottom: 3%;
   }

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

   .downImg{
       margin-top: 14vh;    
   }

} @media screen and (max-height:600px){ 

   .downImg{
       margin-top:1vh;    
   }

} /* @media screen and (max-width:1024px){ 

   #navItems{
   
   margin-left: 12%;
   margin-top: 0%;

} }*/


.body{ 

   zoom:100%;

}

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

   .arrow_down_1{

   margin-left: 52vw;

} .arrow_down_2{ 

   margin-left: 52vw;

} 

   .navbar-brand h1{
   margin-left: auto;
       margin-top: -5%;

} 

   #nav-head{
      margin-left: auto;
       margin-right: auto;
       padding-bottom: 5%;
   }
   
   .navbar-toggle{
   margin-top: 1vh;

} 

   .menu {
   background-color: rgba(1,1,1,0.8);


} 

   .slideButton{
       width:50%;    
   }

} .downImg{ 

   position: relative;
 top: 50%;
 transform: translateY(-50%);

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

     #navItems{
   
   margin-left: 10%;
   margin-top: 0%;

} 

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: 10vw;

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

     #navItems{
   
   margin-left: 5%;
   margin-top: 0%;

} 

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: 10vw;

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

     #navItems{
   
   margin-left: -8%;
   margin-top: 0%;

} 

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: 10vw;

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

     #navItems{
   
   margin-left: -10%;
   margin-top: 0%;

} 

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: 10vw;
       font-size: 1.4em;

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

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: auto;
       margin-right: auto;
       font-size: 2em;

} 

     #navItems{
   
   margin-left: 12%;
   margin-top: 0%;

} .navbar-inverse .navbar-nav>li>a{ 

   color:white;

} .dropdown:hover .dropdown-menu{ 

   display: block;

}

.navbar-brand h1{ 

   color: white;
   margin: 0;
   margin-left: 135%;

} .navbar-brand{ 

   white-space:nowrap;

} 

   #titleImg{
       margin-top: 10vh;    
   }

.pageIcon{ 

       margin-top: 10vh;    
   }
   .menu {


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

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: auto;
       margin-right: auto;
       font-size: 2em;

} 

     #navItems{
   
   margin-left: 5%;
   margin-top: 0%;

} .navbar-inverse .navbar-nav>li>a{ 

   color:white;

} .dropdown:hover .dropdown-menu{ 

   display: block;

}

.navbar-brand h1{ 

   color: white;
   margin: 0;
   margin-left: 110%;

} .navbar-brand{ 

   white-space:nowrap;

} 

   #titleImg{
       margin-top: 10vh;    
   }

.pageIcon{ 

       margin-top: 10vh;    
   }
   .menu {


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

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: auto;
       margin-right: auto;
       font-size: 2em;

} 

     #navItems{
   
   margin-left: 3%;
   margin-top: 0%;

} .navbar-inverse .navbar-nav>li>a{ 

   color:white;

} .dropdown:hover .dropdown-menu{ 

   display: block;

}

.navbar-brand h1{ 

   color: white;
   margin: 0;
   margin-left: 110%;

} .navbar-brand{ 

   white-space:nowrap;

} 

   #titleImg{
       margin-top: 10vh;    
   }
.pageIcon{
       margin-top: 10vh;    
   }
   .menu {


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

   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: auto;
       margin-right: auto;
       font-size: 1.4em;

} 

     #navItems{
   
   margin-left: 12%;
   margin-top: 0%;

}


.navbar-brand h1{ 

   color: white;
   margin: 0;
   margin-left: 0%;
   margin-top: -4%;

} .navbar-brand{ 

   white-space:nowrap;

} 

   .navbar-toggle{
   margin-top: 2vh;

}

} @media screen and (max-height:1300px){ 

   .downImg{
       margin-top: 9vh;    
   }

} @media screen and (max-height:1000px){ 

   .downImg{
       margin-top: 7vh;    
   }

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

   .downImg{
       margin-top: 5vh;    
   }
   #mainTitleText{
       margin-top: 5%;
       
   }

} @media screen and (max-height:600px){ 

   .downImg{
       margin-top:1vh;    
   }
    #mainTitleText{
       margin-top: 0%;
       
   }

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

   .navBarSwitchButton{
   width:55px;
   height: 55px;

margin-top:8%; margin-bottom:-5%; 

   }

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

   #mainTitleText{
       margin-top: 6%;
       margin-bottom: -1%;
   }
   .downImg{
       margin-top: -2%;    
   }
   .projectIcon{
         
   }
  1. titleSlide{
   margin-top: -13%;

} }

@media screen and (max-height:2000px) and (max-width:3000px){ 

   #mainTitleText{
       margin-top: 7%;
       margin-bottom: 1%;
   }
   #projectIcon{
         max-width: 100%;
       margin-top: 3%;    
      
   }
   .downImg{
       margin-top: 12%;  
       
       max-width: 30%;
   }
  1. titleImg{

margin-top:10%; } .pageIcon{ margin-top:10%; } .stick{ 

  top:30%;

} .projectTitleMainScreen{ margin-top:20%; }

  1. subTitleText2{

margin-top:6%; font-size:2em; } .switchButton{ }

} @media screen and (max-height:600px) and (max-width:1024px){ 

   #navItems{
   
   margin-left: 0vw;
   margin-top: 0%;

} 

    #mainTitleText{
       margin-top: 14vh;
   }
   
   .navbar-brand h1{
   color: white;
   margin: 0;
   margin-left: 6vw;

}

  1. titleImg{

margin-top:0%; } .pageIcon{ margin-top:0%; } } @media screen and (max-height:900px) and (max-width:1440px){ 

   #mainTitleText{
       margin-top: 3%;
       margin-bottom: 1%;
   }
   #projectIcon{
         max-width: 100%;
       margin-top: 3%;    
      
   }
   .downImg{
       margin-top: 12%;  
       
       max-width: 30%;
   }

.stick{ 

  position: fixed;
  top:24%;

} } @media screen and (max-height:1024px) and (max-width:1280px){ 

   #mainTitleText{
       margin-top: 3%;
       margin-bottom: 1%;
   }
   #projectIcon{
         max-width: 90%;
       margin-top: 8%;    
      
   }
   .downImg{
       margin-top: 12%;  
       
       max-width: 30%;
   }

.stick{ 

  top:32%;

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

   #mainTitleText{
       margin-top: 5%;
       margin-bottom: -1%;
   }
   #projectIcon{
         max-width: 50%;
       
      
   }

.stick{ 

  top:14%;

} 

   .downImg{
       margin-top: 5%;  
       
       max-width: 30%;
   }
  1. titleImg{

margin-top:4%; } .pageIcon{ margin-top:4%; } } @media screen and (max-height:768px) and (max-width:1024px){

.stick{ 

  top:18%;

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

   #mainTitleText{
       margin-top: 3%;
       margin-bottom: -1%;
   }
   #projectIcon{
         max-width: 50%;
       
      
   }
   .downImg{
       margin-top: 10%;  
       
       max-width: 30%;
   }

.stick{ 

  top:19%;

} } @media screen and (max-height:769px) and (max-width:1024px){ 

   #mainTitleText{
       margin-top: 3%;
       margin-bottom: 1%;
   }
   #projectIcon{
         max-width: 90%;
       margin-top: 1%;    
      
   }
   .downImg{
       margin-top: 6%;  
       
       max-width: 30%;
   }

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

   #mainTitleText{
       margin-top: 10%;
       margin-bottom: 1%;
   }
   #projectIcon{
         max-width: 90%;
       margin-top: 8%;    
      
   }
   .downImg{
       margin-top: 12%;  
       
       max-width: 30%;
   }

} @media screen and (max-height:720px) and (max-width:1280px){ 

   #mainTitleText{
       margin-top: 5%;
       margin-bottom: -1%;
   }
   #projectIcon{
         max-width: 50%;
       margin-top: -2%;
     
   }
   .downImg{
       margin-top: %;  
       
       max-width: 30%;
   }
  1. titleImg{

margin-top:4%; } .pageIcon{ margin-top:4%; } } @media screen and (max-height:600px) and (max-width:1024px){ .pageIcon{ margin-top:0%; } } @media screen and (max-height:600px) and (max-width:1024px){ 

   #mainTitleText{
       margin-top: 5%;
       
   }
   #projectIcon{
         max-width: 20%;
       margin-top: 2%;    
      
   }
   .downImg{
       margin-top: 8%;  
       
       max-width: 30%;
   }

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

   #mainTitleText{
       margin-top: 9%;
       margin-bottom: 1%;
       
   }
   #projectIcon{
         max-width: 26%;
       
      
   }

   .downImg{
       margin-top: 6%;  
       
       max-width: 20%;
   }
  1. titleSlide_hp{

margin-top:-12%; height:90vh; }

  1. titleImg{

margin-top:6%; } .pageIcon{ margin-top:6%; } } @media screen and (max-height:1024px) and (max-width:768px){

.downImg{ margin-top:25%; } } @media screen and (max-height:600px) and (max-width:400px){ 

   #projectIcon{
         max-width: 50%;
       
      
   }

   .downImg{
       margin-top: 20%;  
       
       max-width: 30%;
   }

} @media screen and (max-height:600px) and (max-width:400px){ 

   #projectIcon{
         max-width: 30%;
       
      
   }
   #projectTitle{
       margin-top: 4%;    
   }
   .downImg{
       margin-top: 8%;  
       
       max-width: 20%;
   }

} @media screen and (max-height:600px) and (min-width:1024px){ 

   #projectIcon{
         max-width: 20%;
       margin-top: -3%;
      
   }
   #projectTitle{
       margin-top: 0%;
      
   }
   .downImg{
       margin-top: 4%;  
       
       max-width: 10%;
   }

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

   .profile-pic{
   margin-top: 6%;
  
   margin-left: 30%;
   width: 160;
   height: 180;
       float:left;

} 

   .quote_div{
   background-color:#E9E9E9; 
   padding: 5%;
   width:80%;
   margin-top: 9%;
   border-radius: 5%;
   margin-left: 5%;
       float:left;

} 

   .quote{

   font-size: 1em;

} 

   .quote_div:before{
   
       margin-right: -10%;

} }

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

   .profile-pic{
   margin-top: 6%;
  
   margin-left: 24%;
   width: 160;
   height: 180;

} 

   .quote_div{
   background-color:#E9E9E9; 
   padding: 5%;
   width:90%;
   margin-top: 9%;
   border-radius: 5%;
   margin-left: 5%;

} 

   .quote{

   font-size: 1em;

} 

   .quote_div:before{
   margin-top: -10%;
       margin-left: 0%;
   right:100%;
   border: solid transparent;
   content: ;
   height: 0;
   width: 0;
   position: absolute;
   top: 1vw;
   border-left: 1vw solid transparent;

border-right: 1vw solid transparent;

border-bottom: 1vw solid transparent; } } .sponsorImg{ 

   margin-left: 3%;

margin-top:5%; }

  1. mainTitleText{

} 

  .navbar-brand h1{
   margin: 0;
      margin-top:-4%;


} 

     #navItems{
   
   margin: 0;

}


.navbar-brand{ float:none; padding:0; } .nav{ margin-top:2%; }


.sub_page_Button p{ 

   color: white;
   margin-bottom: 0;
   margin: 0;
   padding: 0;
   font-size: 1.2em;
   font-weight: 100;

} .sub_Page_Button{ 

   margin: 0;
    
   width: 90%;
   margin-bottom: 0;
   display: inline-block;
   
   padding-bottom: 0px;
   border: 3px solid transparent;
   border-radius: 5px;
   box-shadow:  0 0 1px rgba(0,0,0,0);
   overflow: hidden;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: color, background-color;
   transition-property: color, background-color;

} .sub_page_Button h2{ 

   margin-top: -0.5px;

} .sub_Page_Button:hover p, .sub_Page_Button:focus p, .sub_Page_Button:active p{ 

   /*background-color: #2098d1;*/
   color:#FFE545;

}


a{

text-decoration:none; } a:hover{

text-decoration:none; } ul { 

   list-style-type: none;

list-style-image:none; } a:visited{

text-decoration:none; }

a, a:visited, a:active {

text-decoration:none; } @media screen and projection{ a:visited{

text-decoration:none; } } li{ text-decoration:none; border:none;

} @media screen and projection{ a:active{

text-decoration:none; border:none; } } a:active{

text-decoration:none; border:none; }

.sideBarItemActive{ 

  /* background-color: #31B2DE;*/
 /*  border: 3px solid #FFE545;*/
   border-radius: 10%;*/

color:black; 

  /* background-color: rgba(255,229,69,0.2);*/

} a:link{ color:inherit; text-decoration:none; border:none;

}

.sideBarItemActive p{

color:black;

} .sideBarItemActive h2{

color:black;

} .sideBarItemActive h1{

color:black;

} .sideBarItemActive h3{

color:black;

}

@media screen and (max-width:1020px){ .navbar-brand h1{ font-size:1em; 

   margin-top:26%;

}

  1. navItems{

font-size:1em; } .navbar-nav li{ font-size:1em; margin-top:1%; } .texItem{ margin-top:5%; } .textItem{

} .picItem{

} } @media screen and (max-width:873px){ .navbar-brand h1{ font-size:1em; 

   margin-top:26%;

margin-left:360%; }

  1. navItems{

font-size:1em; margin-right:8%; margin-top:-3%; } .navbar-nav li{ font-size:1em; margin-top:1%; } .texItem{ margin-top:5%; } .textItem{

} .picItem{

} } @media screen and (max-width:800px){ .navbar-brand h1{ font-size:1em; 

   margin-top:26%;

margin-left:300%; }

  1. navItems{

font-size:1em; margin-left:-5%; margin-top:-3%; margin-right:0; } .navbar-nav li{ font-size:1em; margin-top:1%; } .texItem{ margin-top:5%; } .textItem{

} .picItem{

}

}

@media screen and (max-width:770px){ .navbar-brand h1{ font-size:1em; 

   margin-top:26%;

margin-left:300%; }

  1. navItems{

font-size:1em; margin-right:0%; margin-top:-3%; } .navbar-nav li{ font-size:1em; margin-top:1%; } .texItem{ margin-top:5%; } .textItem{

} .picItem{

}



} .contentSubTitle{ 

   font-weight: 200;
   margin-top: 0%;
   margin-bottom: 3%;

font-size:2.3em; color:black; margin-left:auto; margin-right:auto;

} .contentSubSubTitle{ 

   font-weight: 300;
   margin-top: 0%;
   margin-bottom: 3%;

font-size:1.5em; color:black; } @media screen and (min-width:1400px){ .sideBarContent{ width:350px; } } @media screen and (max-width:1200px){ .sideBarContent{ width:250px; } } @media screen and (max-height:1024px) and (max-width:768px){

  1. subTitleText2{

margin-bottom:20%; }


} @media screen and (max-height:2000px) and (max-width:3000px){ .projectTitleMainScreen{ margin-top:20%; }

  1. subTitleText2{

margin-top:6%; font-size:4em; } .switchButton{ margin-bottom:-10%; }

}

  1. headerText{

margin-bottom:-20% !important; }


.slide7{ 

   margin-top: 0;

background-image:url("LethHS2015_team_cover_dark.jpg"); 

   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;
   padding: 0;
   text-align: center;
   margin-bottom: 0;
  display: block;
   position: relative;
   z:1;

} .slide7 h1{ 

   font-size:5vw;

} .tl_label h2{ 

   margin-top:0;

font-weight:200; } .noteIcon { font-size: 0px; cursor: pointer; width: auto; height: auto; text-align: center; position: relative; z-index: 1; color: #fff; margin-left:auto; margin-right:auto;

}


.noteIcon:before { font-family: 'Flaticon'; speak: none; font-size: 31px; line-height: 40px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; text-align:center; margin-left:auto; margin-right:auto; } .aspects_orange{ background-color:#eea303; }

.notvisible{ display:none; }

@media (max-width:1200px) { .bigPadding{ padding-left:5%; padding-right:5%; } } @media (max-width:1920px) { .bigPadding{ padding-left:15%; padding-right:15%; } }

  1. slide1 h1{

margin-top:-1%; margin-bottom:-1%; margin-bottom:15px; }

  1. slide2 h1{

margin-top:-1%; margin-bottom:-1%; margin-bottom:15px; } @media screen and (max-width:2500px){

  1. slide1 h1{font-size:5em;

}

  1. slide2 h1{font-size:5em;

}

}

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

  1. slide1 h1{

font-size:3em; }

  1. slide2 h1{

font-size:3em; } } @media screen and (max-width:768px){

  1. nav-head{

margin:0; display:none; }

  1. navItems{

margin-right:5%; margin-top:2%;

} } @media screen and (max-width:2500px){ .contentPageImg{ width:20%; }

} @media screen and (max-width:800px){ .contentPageImg{ width:40%; }

}