Team:Lethbridge HS/CSS
@font-face{ font-family: 'Mohave'; src:url('https://static.igem.org/mediawiki/2015/5/50/Mohave.otf'); } @font-face { font-family: "Flaticon"; src: url("https://static.igem.org/mediawiki/2015/9/99/LethHS2015_flaticon.eot"); src: url("../flaticon.eot#iefix") format("embedded-opentype"), url("https://static.igem.org/mediawiki/2015/e/e1/LethHS2015_flaticon.woff") format("woff"), url("https://static.igem.org/mediawiki/2015/f/ff/LethHS2015_flaticon.svg") format("svg"); font-weight: normal; font-style: normal; } .flaticon-agreement:before { content: "\e000"; } .flaticon-book228:before { content: "\e001"; } .flaticon-book229:before { content: "\e002"; } .flaticon-brainstorm:before { content: "\e003"; } .flaticon-bricks3:before { content: "\e004"; } .flaticon-businessman276:before { content: "\e005"; } .flaticon-cone10:before { content: "\e006"; } .flaticon-dna9:before { content: "\e007"; } .flaticon-familiar17:before { content: "\e008"; } .flaticon-game10:before { content: "\e009"; } .flaticon-male172:before { content: "\e00a"; } .flaticon-prize3:before { content: "\e00b"; } .flaticon-smartphone66:before { content: "\e00c"; }
.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: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%;
}
- 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; height:80vh;
}
- 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;
}
- 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:6vw; 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: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; 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: 10000000000000000000000; 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;
} .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; border-bottom: 4px solid #FFE545; border-radius: 5%;
}
- /
.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: 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%; }
- 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{ font-size: 2vw; } #subTitleText2{ 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%;
} .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: 3em; margin-bottom: 3%; } #subTitleText{ font-size:3em; 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{ font-size:2em; 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:1920px){
.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:1080px) and (max-width:1920px){
#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: 5%; 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:1080px) and (max-width:1920px){
.projectTitleMainScreen{
margin-top:20%;
}
- subTitleText2{
margin-top:6%; font-size:4em; } .switchButton{ margin-bottom:-10%; }
}
- headerText{
margin-bottom:-20% !important; }
- subTitleText2{
margin-top:0; }
.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;
}