Difference between revisions of "Team:Lethbridge HS/CSS"
| (9 intermediate revisions by the same user not shown) | |||
| Line 10: | Line 10: | ||
@font-face { | @font-face { | ||
font-family: "Flaticon"; | font-family: "Flaticon"; | ||
| − | src: url("https://static.igem.org/mediawiki/2015/ | + | src: url("https://static.igem.org/mediawiki/2015/0/04/LethHS2015_flaticon5.eot"); |
src: url("../flaticon.eot#iefix") format("embedded-opentype"), | src: url("../flaticon.eot#iefix") format("embedded-opentype"), | ||
| − | url("https://static.igem.org/mediawiki/2015/ | + | url("https://static.igem.org/mediawiki/2015/5/53/LethHS2015_flaticon5.woff") format("woff"), |
| − | url("https://static.igem.org/mediawiki/2015/ | + | url("https://static.igem.org/mediawiki/2015/c/cb/LethHS2015_flaticon5.svg") format("svg"); |
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
| − | + | .flaticon-book228:before { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | .flaticon- | + | |
content: "\e000"; | content: "\e000"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-brainstorm:before { |
content: "\e001"; | content: "\e001"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-bricks3:before { |
content: "\e002"; | content: "\e002"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-business53:before { |
content: "\e003"; | content: "\e003"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-cone10:before { |
content: "\e004"; | content: "\e004"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-dna9:before { |
content: "\e005"; | content: "\e005"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-erlenmeyer1:before { |
content: "\e006"; | content: "\e006"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-familiar17:before { |
content: "\e007"; | content: "\e007"; | ||
} | } | ||
| − | .flaticon- | + | .flaticon-prize3:before { |
content: "\e008"; | content: "\e008"; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 1,395: | Line 1,370: | ||
#mainTitleText{ | #mainTitleText{ | ||
margin-top: 20%; | margin-top: 20%; | ||
| − | + | font-size:2em; | |
| + | |||
} | } | ||
#subTitleText{ | #subTitleText{ | ||
| − | + | font-size:4em; | |
margin-bottom: -1%; | margin-bottom: -1%; | ||
} | } | ||
| Line 1,541: | Line 1,517: | ||
#mainTitleText{ | #mainTitleText{ | ||
margin-top: 20%; | margin-top: 20%; | ||
| − | font-size: | + | font-size: 1em; |
margin-bottom: 3%; | margin-bottom: 3%; | ||
} | } | ||
| Line 2,662: | Line 2,638: | ||
.contentSubSubTitle{ | .contentSubSubTitle{ | ||
font-weight: 300; | font-weight: 300; | ||
| − | margin-top: | + | margin-top: 0%; |
margin-bottom: 3%; | margin-bottom: 3%; | ||
font-size:1.5em; | font-size:1.5em; | ||
| Line 2,743: | Line 2,719: | ||
.noteIcon:before { | .noteIcon:before { | ||
| − | font-family: ' | + | font-family: 'Flaticon'; |
speak: none; | speak: none; | ||
font-size: 31px; | font-size: 31px; | ||
| Line 2,810: | Line 2,786: | ||
#navItems{ | #navItems{ | ||
margin-right:5%; | margin-right:5%; | ||
| − | margin-top: | + | 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;
}
- content{
margin: 10px 0px 0px -11px;
width: 101%;
border: none;
overflow-x:hidden; } .mediawiki {
border: none;
width: 101%;
background: transparent;
overflow-x:hidden; }
- globalWrapper {
width: 100%; overflow-x:hidden;
margin-top:-1%; padding-bottom:0; }
- 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;
}
- 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{
}
- bodyContent h1, #bodyContent h2 {
/*margin-bottom:0;*/
}
- 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;
}
- 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;
} .pageIcon{
margin-top: 3%; 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;
} 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;
}
- titleSlide{
margin-top: -9%;
padding-bottom: 3%;
background-image:url("
");
background-size:cover;
background-position:center center;
background-repeat: no-repeat;
height: 105vh;
}
- titleSlideFirstTime{
margin-top: -9%;
margin-bottom: 0;
padding-bottom: 3%;
background-image:url("
");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
height:100vh;
}
- mainTitleText{
font-size:2em; 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%;
}
- subTitleText2{
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{
margin-top: -9%;
background-color:transparent;
margin-bottom: 0;
padding-bottom: 0;
background-image:url("
");
background-size:cover;
background-position: left top;
background-repeat: no-repeat;
}
- 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;
text-align: center; margin-bottom: 0; display: block; position: relative; z:1;
}
- 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;
}
- 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:3em; margin-top: 5%; margin-bottom: 3%;
}
- slide2 h1 small{
color:black;
}
- slide3 {
background-color:white;
text-align: center; display: block; position: relative;
}
- slide3 h1{
color:white; font-size:3em; 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:3em; 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:3em; 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; height:13vh;
color:white; }
- subPagesSlide p{
color:white; font-weight:100; }
- subPagesSlide p:hover{
color:#FFE545; }
- 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;
}
- 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%;
}
- 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: 1em;
} .stick{
position: fixed; top:14%;
}
- 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%;
}
- 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;
}
- 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%;
}
- 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;
}
- 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{
}
- 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%;
}
- 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){
#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%;
}
- 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%;
}
- 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%;
}
- 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){
#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%; }
- 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("
");
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%; }
}