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

Revision as of 22:47, 31 August 2015

/***

Minimal header: removes the search bar and header image and readjusts font colours in the menus.

Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code! Check out their wikis at: https://2011.igem.org/Team:Brown-Stanford https://2012.igem.org/Team:Lethbridge

- - /

content h1.firstHeading {

       visibility: hidden;

}ewe

p-logo {

       display: none;

}

searchform {

   display: none;

}

.left-menu {

       background: none

} .left-menu a {

   color: #000;

}

div#top-section { /*the div containing the entire top bar*/

       height: 20px;
       margin-bottom: -63px !important;
       margin: 0px 0px 0px -10px;
       width: 1222px;
       border: none;

}

content{

       margin: 10px 0px 0px -11px;
       width: 1230px;
       border: none;

}

search-controls {

       overflow:hidden;
       display:none;
       background: none;
       position: absolute;
       top: 170px;
       right: 40px;

}

div#header {

       width: 1200px;
       text-align: left;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 0px !important;

}

menubar {

       position: absolute;
       color: black;
       background-color: #ffffff;

}

.left-menu, .right-menu{

       position: absolute;
       background: none;
       color: black;

}

.left-menu li a, .right-menu li a {

       color: #000 !important;

}

.left-menu ul li, .right-menu ul li a{

       background: none;
       color: #000 !important;

}

.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {

   color: #000 !important;

}

catlinks{

       display:none;

}

/*important for background colours*/ .mediawiki{

       background: #ffffff;

}

.mediawiki {

       border: none;
       width: 1200px;
       background: transparent;

}

globalWrapper {

       width: 1200px;

}

footer-box {

       width: 1210px;
       margin: 0px 0px 0px -11px;
       border: 1px solid #c4c4c4;
       background-color: #f4f4ff

}

/***End minimal header***/

{

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

}

.animateBody{

    -webkit-animation: fadeAnimation 1s 1;
   -moz-animation: fadeAnimation 1s 1;
   -o-animation: fadeAnimation 1s 1;
   animation: fadeAnimation 1s 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:#31B2DE; 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{

}

regularPageBody{

   background-color: white;
   padding-left: 10%;
   padding-right: 10%;
   padding-top: 4%;
   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;

}

pageTitleText{

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

}

pageSubtitleText{

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

}

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;

}

titleImg{

   margin-top: 3%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0;

} .regularimg{

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

} .page_header{

   margin: 0;

}

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;

}

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

}

titleSlide{

   margin-bottom: 0;
   padding-bottom: 3%;
   background-image:url("../images/323_1dsc9529.jpg");
   background-size:cover;
       background-position: center center;
   background-repeat: no-repeat;
   height: 100%;
   background-attachment: fixed;

}

titleSlideFirstTime{

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

}

mainTitleText{

   font-size:3vw;
   color: white;
   margin-bottom: 5px;
   text-align: center;
   font-weight: 100;
   margin-top: 3vh;

} .navbar-toggle{

   margin-top: 6vh;

}

subTitleText{

   font-weight: 200;
   font-size: 5em;
   color: white;
   margin-top: -2%;

}

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;

}

darker{

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

}

projectTitle{

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

}

titleText{

   margin-bottom: 9%;

}

titleSlide h1 small{

   color: white;

}

.beePic{

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

}

titleSlide_hp{

   background-color:transparent;
   margin-bottom: 0;
   padding-bottom: 0;
    background-image:url("../images/hummingbird-bird-bee-fly-background-bokeh.jpg");
   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;
   background-attachment: fixed;

}

titleSlide_hp h1{

   font-size:6vw;
   
   color: white;

}

titleSlide_hp h1 small{

   color: white;

}

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;

}

titleSlide_notebook h1{

   font-size:6vw;
   color: white;

}

titleSlide_notebook small{

   color: white;

}

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;

}

titleSlide_project h1{

   font-size:6vw;
   
   color: white;

}

titleSlide_project small{

   color: white;

}

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;

}

titleSlide_software h1{

   font-size:6vw;
   color: white;

}

titleSlide_software small{

   color: white;

}

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;

}

titleSlide_team h1{

   font-size:6vw;
   color: white;

}

titleSlide_team small{

   color: white;

}

slide1 {

   margin-top: 0;

background-color: white;

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

}

slide1 h1{

   font-size:5vw;

}

slide1HomePage {

   margin-top: 0;

background-color:white;

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

}

slide1HomePage h1{

   font-size:6vw;
   
   margin-bottom: auto;

}

slide2 {

background-color:#FFFDCD ;

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

}

slide2 h1{

   color:white;
   color:black;
   font-size:6vw;
   margin-top: 5%;
   margin-bottom: 3%;

}

slide2 h1 small{

   color:black;

}

slide3 {

background-color:#283339;

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

}

slide3 h1{

   color:white;
   font-size:6vw;
   margin-top: 5%;
   margin-bottom: 3%;

}

slide3 h1 small{

   color:white;

}

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;

}

slide4 h1{

   color:white;
   font-size:6vw;
   margin-top: 10%;
   margin-bottom: auto;

}

slide4 h1 small{

   color:white;

}

slide5 {

background-color: black;

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

}

slide5 h1{

   color:white;
   font-size:6vw;
   margin-top: 10%;
   margin-bottom: auto;

}

slide5 h1 small{

   color:white;

}

subPagesSlide{

   padding: 1%;
   margin-bottom: 0%;
   background-color: #101926;
   margin-bottom: 0;
   text-align: center;

}

subPagesSlide img{

   margin-bottom: 0;
   margin: 0;
   padding: 0;
   margin-left: auto;
   margin-right: auto;

} .tile{

   width: 80%;
   height: 20vh; 
   background-color: black;
   border: 5px solid white;
   margin-left: auto;
   margin-right: auto;
   margin: 5%;
   overflow: hidden;

} .secondSlideText{

   margin-top: 110%;

} .tile div{

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

   -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{

   -webkit-transform:translate(0px, -80%);
   -moz-transform:translate(0px, -80%);
   -o-transform:translate(0px, -80%);
   transform:translate(0px, -80%);

} .tile p{

   color: white;
   font-size: 2.3em;
   font-weight: 100;

} .tile img{

   margin-left: auto;
   margin-right: auto;
   margin-bottom: -8%;
   margin-top: -5%;

} .tile1{

      background-image:url("../images/looking-molecular-structure-3696469-ji.jpg");
   background-size:cover;
       background-position: left top;
   background-repeat: no-repeat;

} .tile2{

   background-color: #3EC7F3;
   color: white;

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

}

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

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

} .arrow_down_2{

   width:0;
   height:0;
   border-left: 35px solid transparent;
   border-right: 35px solid transparent;
   border-top: 35px solid #FFE545;
   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;

} .makeNavBarColor{

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

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

}

navItems{

   margin-left: 15%;

} .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: -4%;

} .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;
   border-bottom: 8px solid #FFE545;
   border-radius: 5%;

} /**********************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%;

}

datelist{

   display: none;

}

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: 2em;

} .stick{

  position: fixed;
  top:22%;

}

mainBodySideBar{

  margin-top: 1%;

} .sideBarContent{

} .sideBarContent li{

   list-style-type: none;
   font-size: 2em;
   /*background-color:rgba(49,178,222,0.2);*/

} .sideBarItemActive{

  /* background-color: #31B2DE;*/
   border: 3px solid #FFE545;
   border-radius: 10%;
   color: #FFE545;
   font-weight: 120;
   font-size: 2em;
   margin-left: 2px;
   background-color: rgba(255,229,69,0.2);

} /*****************************************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: auto;
   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: 160;
   height: 180;

} .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: 3em;
   }
   #subTitleText{
       font-size: 1.5em;  
       margin-bottom: -1%;
   }
   .subTextBox{
       padding: 0;    
   }
   .downImg{
      /* margin-top: 16vh; */   
   }
   .bio-slide{
       width: 300px;    
   }
   .navBarSwitchButton{
   width:12vw;
   height: 12vw;
   }

} @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{
       font-size: 2vw;    
   }

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

}

    #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: 3em;
       margin-bottom: 3%;
   }
   #subTitleText{
       font-size:3em;  
       margin-bottom: -1%;
   }
   .subTextBox{
       padding: 0;    
   }
   .navbar-nav li{
   margin: 0;

}

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;

}

   #titleImg{
       margin-top: 10vh;    
   }

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

   .subTextBox{

}

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

}

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

} }*/

@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{

   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;    
   }
   .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;    
   }
   .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;    
   }
   .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:1920px){

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

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

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

} @media screen and (max-height:1080px) and (max-width:1920px){

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

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

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

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

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

}

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

} @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: 3%;
       margin-bottom: -1%;
   }
   #projectIcon{
         max-width: 50%;
       margin-top: -2%;
     
   }
   .downImg{
       margin-top: %;  
       
       max-width: 30%;
   }

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

   #mainTitleText{
       margin-top: 2%;
       
   }
   #projectIcon{
         max-width: 20%;
       margin-top: 2%;    
      
   }
   .downImg{
       margin-top: 12%;  
       
       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: 10%;  
       
       max-width: 20%;
   }

} @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: 5%;

}

mainTitleText{

}