/************ GENERAL STUFF ****************/ .border-left-introduction {
border-left: 4px solid #485E65; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} .border-left-introduction-unique {
border-left: 4px solid #485E65; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} .border-left-introduction-our-solution {
border-left: 4px solid #485E65; padding-left: 35px; padding-bottom: 20px; margin-bottom: 50px;
} .border-left-project {
border-left: 4px solid #73918A; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} .border-left-procedures {
border-left: 4px solid #556E3F; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} .border-left-practices {
border-left: 4px solid #76925E; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} .border-left-prospects {
border-left: 4px solid #B3AA5A; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} .border-left-credits {
border-left: 4px solid #CAC27F; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} .border-left-invsisble {
border-left: 4px solid #fff; padding-left: 35px; padding-bottom: 20px; margin-bottom: 100px;
} div.topShadow {
box-shadow: 0 -2px 0 rgba(0,0,0,.1), 0 -2px 5px rgba(0,0,0,.3); position:relative;
}
/********************************************************************/
/********************* HOME PAGE **********************/
/********************************************************************/
- homePage {
width: 100%; height:96vh; text-align: center; background: rgba(135, 222, 237, 0.7); /* For browsers that do not support gradients */ background: -webkit-linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* For Firefox 3.6 to 15 */ background: linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* Standard syntax (must be last) */ box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1); position:relative; overflow:hidden;
}
- homePage2 {
text-align: center; position: absolute; bottom:-8px; left:5%; overflow:hidden; width:90%;
}
- homePageBackground {
overflow:hidden;
}
- homePage3 {
text-align: center; position: absolute; top:-50px; right:0px; overflow:hidden; width:90%;
}
- homePageCloud1, #homePageCloud2, #homePageCloud3, #homePageCloud4, {
width:90%;
}
- homeCloud1 {
text-align: center; position: absolute; bottom:0px; right:0px; overflow:hidden; width:200%; animation-name: Cloud1Anim; animation-duration: 85s; animation-timing-function: linear; animation-play-state: running; -webkit-animation-name: Cloud1Anim; -webkit-animation-duration: 85s; -webkit-animation-timing-function: linear; -webkit-animation-play-state: running;
}
- homeCloud2 {
text-align: center; position: absolute; bottom:0px; right:0px; overflow:hidden; width:200%; animation-name: Cloud1Anim; animation-duration: 105s; animation-timing-function: linear; animation-play-state: running; -webkit-animation-name: Cloud1Anim; -webkit-animation-duration: 105s; -webkit-animation-timing-function: linear; -webkit-animation-play-state: running;
}
- homeCloud3 {
text-align: center; position: absolute; bottom:0px; right:0px; overflow:hidden; width:200%; animation-name: Cloud1Anim; animation-duration: 95s; animation-timing-function: linear; animation-play-state: running; -webkit-animation-name: Cloud1Anim; -webkit-animation-duration: 95s; -webkit-animation-timing-function: linear; -webkit-animation-play-state: running;
}
- homeCloud4 {
text-align: center; position: absolute; bottom:0px; right:0px; overflow:hidden; width:200%; animation-name: Cloud1Anim; animation-duration: 98s; animation-timing-function: linear; animation-play-state: running; -webkit-animation-name: Cloud1Anim; -webkit-animation-duration: 98s; -webkit-animation-timing-function: linear; -webkit-animation-play-state: running;
}
@keyframes Cloud1Anim {
0% { transform: translateX(0); } 100% { transform: translateX(50%); }
}
- homePageText {
position:absolute; text-align:center; top:20%; width: 100%; margin: 0 auto;
}
- homePage p {
text-align: center; letter-spacing: 0.13em; margin-top: 0; padding-top: 0;
}
/********************************************************************/
/********************* ABSTRACT **********************/
/********************************************************************/
- abstract {
padding-bottom: 14px; padding-top: 22px;
}
- about-our-wiki {
padding-bottom: 22px; padding-top: 14px;
}
div#scrollWritten {
-ms-transform: rotate(-12deg); -webkit-transform: rotate(-12deg); transform: rotate(-12deg); padding:50px; text-align:center;
}
- sketchAbstract {
width: 100%;
}
/********************************************************************/
/********************* PRESENTATION **********************/
/********************************************************************/
.evolutionPlacement {
position: absolute; width: 40%; bottom: 8%;
}
.shadowDropBottom {
box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);
}
.contentHeadline {
background-color: #fff; box-shadow: 0 -2px 0 rgba(0,0,0,.1), 0 -2px 5px rgba(0,0,0,.5); margin-top: 0px; width: 100%; height: 50vh; z-index: 5;
}
.centerContentHeadline {
align-items: center; display: flex; justify-content: center; height: 102%; position:relative; background: #FFF; padding-bottom:100px;
}
- HQ_page p.headline {
font-family: "open sans"; font-size: 500%; font-weight:500; letter-spacing: 0.12em;
}
p#headlineIntroduction {
color: #1D353D;
}
p#headlineProject {
color: #39675B;
}
p#headlineProcedures {
color: #3F5E23;
}
p#headlinePractices {
color: #556E3F;
}
p#headlineProspects {
color: #B3AA5A;
}
p#headlineCredits {
color: #CAC27F;
}
.presentationBackground {
box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);
}
.magic {
width: 100%; height: 12px; background: rgba(0,0,0,.5);
}
.magicMagic {
width: 100%; height: 20px; background: rgba(0,0,0,.6);
}
.margin-bottom-200 {
margin-bottom:200px;
}
.margin-bottom-5 {
padding-bottom:5px;
}
.coverPicture {
height: 400px; width: 100%; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;
}
- teamCoverPicture {
background: url('https://static.igem.org/mediawiki/2017/a/ab/T--SDU-Denmark--GroupPictureDelft.jpg');
}
- attributionsCoverPicture {
background: #ddd;
}
- collaborationsCoverPicture {
background: url('https://static.igem.org/mediawiki/2017/6/60/T--SDU-Denmark--european_meetup.jpg');
}
- final-words-CoverPicture {
background: url('https://static.igem.org/mediawiki/2017/6/60/T--SDU-Denmark--european_meetup.jpg');
}
.team-rows {
margin-top: 100px; margin-bottom: 100px;
}
.team-top-rows {
margin-bottom: 100px;
}
.margin-top-50 {
margin-top: 50px;
}
.margin-top-200 {
margin-top: 200px;
}
.memberPicture {
width: 100%;
}
.medalPicture {
width: 75%;
}
.verticalAlignColumns {
float: none; display: inline-block; vertical-align: middle; margin-right: -4px;
}
@media only screen and (max-width: 1000px) {
#HQ_page p.headline { font-size: 350%; }
.coverPicture { height: 300px; }
}
@media only screen and (max-width: 768px) {
#HQ_page p.headline { font-size: 300%; }
.coverPicture { height: 300px; }
#HQ_page h2 { font-size:250%; }
}
@media only screen and (min-width: 768px) {
.verticalAlignColumnsAbstract { float: none; display: inline-block; vertical-align: middle; margin-right: -4px; }
}
@media only screen and (max-width: 600px) {
#HQ_page p.headline { font-size: 250%; }
}
@media only screen and (max-width: 520px) {
.padding0.left{ padding-left:0; } .padding0.right{ padding-right:0; }
.coverPicture { height: 150px; } #HQ_page h2 { font-size:200%; }
#HQ_page p.headline { font-size: 225%; }
}
@media only screen and (max-width: 450px) {
#HQ_page p.headline { font-size: 200%; }
}
@media only screen and (max-width: 400px) {
#HQ_page h2 { font-size: 160%; } #HQ_page p.headline { font-size: 150%; }
}