Difference between revisions of "Team:SDU-Denmark/css/content"

 
(159 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
/************ GENERAL STUFF ****************/
 +
.border-left-introduction {
 +
    border-left: 4px solid #485E65;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 40px;
 +
}
 +
.border-left-introduction-unique {
 +
    border-left: 4px solid #485E65;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 40px;
 +
}
 +
.border-left-introduction-our-solution {
 +
    border-left: 4px solid #485E65;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 20px;
 +
}
 +
.border-left-project {
 +
    border-left: 4px solid #73918A;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 40px;
 +
}
 +
.border-left-procedures {
 +
    border-left: 4px solid #556E3F;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 40px;
 +
}
 +
.border-left-practices {
 +
    border-left: 4px solid #76925E;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 40px;
 +
}
 +
.border-left-prospects {
 +
    border-left: 4px solid #B3AA5A;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 40px;
 +
}
 +
.border-left-credits {
 +
    border-left: 4px solid #CAC27F;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 40px;
 +
}
 +
.border-left-invsisble {
 +
    border-left: 4px solid #fff;
 +
    padding-left: 35px;
 +
    padding-bottom: 20px;
 +
    margin-bottom: 100px;
 +
}
 +
.border-left-achievements {
 +
    border-left: 4px solid #485E65;
 +
    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 {
 
#homePage {
 
   width: 100%;
 
   width: 100%;
−
   height:97vh;
+
   height:96vh;
 
   text-align: center;
 
   text-align: center;
 
     background:  rgba(135, 222, 237, 0.7); /* For browsers that do not support gradients */     
 
     background:  rgba(135, 222, 237, 0.7); /* For browsers that do not support gradients */     
Line 10: Line 81:
 
   box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);
 
   box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);
 
   position:relative;
 
   position:relative;
−
  z-index:2;
 
 
   overflow:hidden;
 
   overflow:hidden;
 
}
 
}
Line 37: Line 107:
  
  
−
#homePageCloud1, #homePageCloud2, #homePageCloud3, #homePageCloud4,  {
+
#homePageCloud1, #homePageCloud2, #homePageCloud3, #homePageCloud4, #homePageCloud5,  {
 
   width:90%;
 
   width:90%;
 
}
 
}
  
−
#homeCloud1 {
+
 
−
  height:50%
+
−
  position:absolute;
+
−
}
+
−
#homeCloud2 {
+
−
  height:50%
+
−
  position:absolute;
+
−
}
+
−
#homeCloud3 {
+
−
  height:50%
+
−
  position:absolute;
+
−
}
+
−
#homeCloud4 {
+
−
  height:50%
+
−
  position:absolute;
+
−
}
+
  
 
#homeCloud1 {
 
#homeCloud1 {
Line 66: Line 121:
 
   width:200%;
 
   width:200%;
 
     animation-name: Cloud1Anim;
 
     animation-name: Cloud1Anim;
−
     animation-duration: 55s;
+
     animation-duration: 85s;
 
     animation-timing-function: linear;
 
     animation-timing-function: linear;
 
     animation-play-state: running;
 
     animation-play-state: running;
 
     -webkit-animation-name: Cloud1Anim;
 
     -webkit-animation-name: Cloud1Anim;
−
     -webkit-animation-duration: 55s;
+
     -webkit-animation-duration: 85s;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-play-state: running;
 
     -webkit-animation-play-state: running;
Line 83: Line 138:
 
   width:200%;
 
   width:200%;
 
     animation-name: Cloud1Anim;
 
     animation-name: Cloud1Anim;
−
     animation-duration: 58s;
+
     animation-duration: 105s;
 
     animation-timing-function: linear;
 
     animation-timing-function: linear;
 
     animation-play-state: running;
 
     animation-play-state: running;
 
     -webkit-animation-name: Cloud1Anim;
 
     -webkit-animation-name: Cloud1Anim;
−
     -webkit-animation-duration: 58s;
+
     -webkit-animation-duration: 105s;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-play-state: running;
 
     -webkit-animation-play-state: running;
Line 101: Line 156:
 
   width:200%;
 
   width:200%;
 
     animation-name: Cloud1Anim;
 
     animation-name: Cloud1Anim;
−
     animation-duration: 56s;
+
     animation-duration: 95s;
 
     animation-timing-function: linear;
 
     animation-timing-function: linear;
 
     animation-play-state: running;
 
     animation-play-state: running;
 
     -webkit-animation-name: Cloud1Anim;
 
     -webkit-animation-name: Cloud1Anim;
−
     -webkit-animation-duration: 56s;
+
     -webkit-animation-duration: 95s;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-play-state: running;
 
     -webkit-animation-play-state: running;
Line 120: Line 175:
 
   width:200%;
 
   width:200%;
 
     animation-name: Cloud1Anim;
 
     animation-name: Cloud1Anim;
−
     animation-duration: 57s;
+
     animation-duration: 98s;
 
     animation-timing-function: linear;
 
     animation-timing-function: linear;
 
     animation-play-state: running;
 
     animation-play-state: running;
 
     -webkit-animation-name: Cloud1Anim;
 
     -webkit-animation-name: Cloud1Anim;
−
     -webkit-animation-duration: 57s;
+
     -webkit-animation-duration: 98s;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-timing-function: linear;
 
     -webkit-animation-play-state: running;
 
     -webkit-animation-play-state: running;
 
}
 
}
 +
 +
 +
#homeCloud5 {
 +
  text-align: center;
 +
  position: absolute;
 +
  bottom:0px;
 +
  right:0px;
 +
  overflow:hidden;
 +
  width:300%;
 +
    animation-name: Cloud2Anim;
 +
    animation-duration: 105s;
 +
    animation-timing-function: linear;
 +
    animation-play-state: running;
 +
    -webkit-animation-name: Cloud2Anim;
 +
    -webkit-animation-duration: 105s;
 +
    -webkit-animation-timing-function: linear;
 +
    -webkit-animation-play-state: running;
 +
}
 +
  
  
Line 138: Line 212:
 
   }
 
   }
 
}
 
}
 +
 +
@keyframes Cloud2Anim {
 +
  0% {
 +
    transform: translateX(0);
 +
  }
 +
  100% {
 +
    transform: translateX(66.67%);
 +
  }
 +
}
 +
 +
  
  
Line 143: Line 228:
  
 
#homePageText {
 
#homePageText {
−
   position:absolute;
+
   position:relative;
 
   text-align:center;
 
   text-align:center;
−
   top:25%;
+
   top:20%;
−
  z-index:3;
+
 
   width: 100%;
 
   width: 100%;
 
   margin: 0 auto;
 
   margin: 0 auto;
 +
  z-index: 100;
 
}
 
}
  
  
−
 
−
.hr {
 
−
  display: inline-block;
 
−
}
 
−
.hr:after {
 
−
  content: '';
 
−
  display: block;
 
−
  border-top: 1px solid black;
 
−
  margin: 1% 0.4% 0% 0.4%;
 
−
}
 
  
  
 
#homePage p {
 
#homePage p {
 
     text-align: center;
 
     text-align: center;
−
     letter-spacing: 0.13em;
+
     letter-spacing: 2.1em;
 +
    margin-left: 2em;
 
     margin-top: 0;
 
     margin-top: 0;
 
     padding-top: 0;
 
     padding-top: 0;
 
}
 
}
 +
 +
 +
 +
 +
/********************************************************************/
 +
/********************* ABSTRACT **********************/
 +
/********************************************************************/
  
  
  
 
#abstract {
 
#abstract {
−
  padding-bottom:40px;
+
    padding-bottom: 14px;
 +
    padding-top: 22px;
 
}
 
}
  
−
#abstractPictureOuter {
+
#about-our-wiki {
−
  text-align: center;
+
    padding-bottom: 22px;
−
  margin-top:100px;
+
    padding-top: 14px;
 
}
 
}
  
−
#abstractPicture {
+
 
−
  display: inline-block;
+
 
−
  width:300px;
+
div#scrollWritten {
−
  height:300px;
+
    -ms-transform: rotate(-12deg);
−
  background: url(https://static.igem.org/mediawiki/2017/a/a0/T--SDU-Denmark--LeafActive.jpg);
+
    -webkit-transform: rotate(-12deg);
−
  background-size: 100% 100%;
+
    transform: rotate(-12deg);
−
  background-repeat: no-repeat;
+
    padding:50px;
 +
    text-align:center;
 
}
 
}
  
  
−
#presentationContent {
+
#sketchAbstract {
−
   background-color: rgba(153, 172, 168, 0.3);
+
   width: 100%;
−
  padding-top:1px;
+
}
−
  box-shadow:0 -2px 0 rgba(0,0,0,.1),0 -2px 5px rgba(0,0,0,.5);
+
 
 +
 
 +
 
 +
 
 +
/********************************************************************/
 +
/********************* PRESENTATION **********************/
 +
/********************************************************************/
 +
 
  
 +
.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: 40vh;
 +
    padding-top: 10%;
 +
    z-index: 5;
 +
}
  
−
#presentationGradient {
+
 
 +
 
 +
 
 +
.centerContentHeadline {
 +
    align-items: center;
 +
    display: flex;
 +
    justify-content: center;
 +
    height: 102%;
 +
    position:relative;
 +
    background: #FFF;
 +
    padding-bottom:100px;
 +
}
 +
 
 +
 
 +
.graphicsPlacement {
 +
  position: absolute;
 +
  bottom: 2%;
 +
  width: 10%;
 +
}
 +
 
 +
 
 +
#HQ_page p.headline {
 +
  font-family: "open sans";
 +
  font-size: 500%;
 +
  font-weight:400;
 +
  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;
 +
}
 +
 
 +
 
 +
#attributionsCoverPicture {
 +
    background: #ddd;
 +
}
 +
 
 +
 
 +
 
 +
.team-rows {
 +
    margin-top: 100px;
 +
    margin-bottom: 100px;
 +
}
 +
 
 +
.team-top-rows {
 +
    margin-bottom: 100px;
 +
}
 +
 
 +
.margin-bottom-75 {
 +
    margin-bottom: 75px;
 +
}
 +
 
 +
.margin-top-50 {
 +
    margin-top: 50px;
 +
}
 +
 
 +
.padding-top-125 {
 +
    padding-top: 125px;
 +
}
 +
 
 +
.margin-top-200 {
 +
    margin-top: 200px;
 +
}
 +
 
 +
.memberPicture {
 +
    width: 100%;
 +
}
 +
 
 +
.medalPicture {
 +
    width: 75%;
 +
}
 +
 
 +
.medalPicture {
 +
    width: 75%;
 +
}
 +
 
 +
#HQ_page div.project-design-headline {
 +
  text-align:center;
 +
  margin-bottom:50px;
 +
}
 +
 
 +
#HQ_page .energy-storing-unit-overview {
 +
    background-color: rgba(252, 248, 211, 0.3);
 +
    border-radius: 10px;
 +
    border: 1px solid rgba(0,0,0,0.3)
 +
}
 +
 
 +
#HQ_page .energy-converting-unit-overview {
 +
    background-color: rgba(57, 103, 91, 0.15);
 +
    border-radius: 10px;
 +
    border: 1px solid rgba(0,0,0,0.3)
 +
}
 +
 
 +
.verticalAlignColumns {
 +
    float: none;
 +
    display: inline-block;
 +
    vertical-align: middle;
 +
    margin-right: -4px;
 +
}
 +
 
 +
#HQ_page div.integrated-practices-prototypes {
 +
    text-align:center;
 +
    margin:50px 0px;
 +
}
 +
 
 +
 
 +
#HQ_page img.interview-images {
 +
    border-radius: 50%;
 +
    width: 100px;
 +
    border: 10px solid #fefefe;
 
     height: 100px;
 
     height: 100px;
−
     background: rgba(153, 172, 168, 0.1); /* For browsers that do not support gradients */    
+
     box-shadow: 0 0px 0 rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.3);
−
    background: -webkit-linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* For Safari 5.1 to 6.0 */
+
   float: left;
−
     background: -o-linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* For Opera 11.1 to 12.0 */
+
  margin-right: 20px;
−
     background: -moz-linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* For Firefox 3.6 to 15 */
+
}
−
     background: linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* Standard syntax (must be last) */
+
 
 +
 
 +
#HQ_page img.education-images {
 +
  box-shadow: 0 0px 0 rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.3);
 +
  border-radius: 10px;
 +
}
 +
 
 +
 
 +
#HQ_page object.listing-item-symbol {
 +
     width: 20px;
 +
    margin-bottom: 0;
 +
    margin-right: 25px;
 +
    margin-left: 18px;
 +
}
 +
 
 +
 
 +
 
 +
@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%;
 +
  }
 
}
 
}

Latest revision as of 23:24, 1 November 2017

/************ GENERAL STUFF ****************/ .border-left-introduction { 

   border-left: 4px solid #485E65;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-introduction-unique { 

   border-left: 4px solid #485E65;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-introduction-our-solution { 

   border-left: 4px solid #485E65;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 20px;

} .border-left-project { 

   border-left: 4px solid #73918A;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-procedures { 

   border-left: 4px solid #556E3F;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-practices { 

   border-left: 4px solid #76925E;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-prospects { 

   border-left: 4px solid #B3AA5A;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-credits { 

   border-left: 4px solid #CAC27F;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-invsisble { 

   border-left: 4px solid #fff;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 100px;

} .border-left-achievements { 

   border-left: 4px solid #485E65;
   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 **********************/ /********************************************************************/

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

}

  1. homePage2 {
 text-align: center;
 position: absolute;
 bottom:-8px;
 left:5%;
 overflow:hidden;
 width:90%;

}

  1. homePageBackground {
 overflow:hidden;

}

  1. homePage3 {
 text-align: center;
 position: absolute;
 top:-50px;
 right:0px;
 overflow:hidden;
 width:90%;

}


  1. homePageCloud1, #homePageCloud2, #homePageCloud3, #homePageCloud4, #homePageCloud5, {
 width:90%;

}


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

}

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

}

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

}


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

}


  1. homeCloud5 {
 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:300%;
   animation-name: Cloud2Anim;
   animation-duration: 105s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud2Anim;
   -webkit-animation-duration: 105s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}


@keyframes Cloud1Anim { 

 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(50%);
 }

}

@keyframes Cloud2Anim { 

 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(66.67%);
 }

}




  1. homePageText {
 position:relative;
 text-align:center;
 top:20%;
 width: 100%;
 margin: 0 auto;
 z-index: 100;

}



  1. homePage p {
   text-align: center;
   letter-spacing: 2.1em;
   margin-left: 2em;
   margin-top: 0;
   padding-top: 0;

}



/********************************************************************/ /********************* ABSTRACT **********************/ /********************************************************************/


  1. abstract {
   padding-bottom: 14px;
   padding-top: 22px;

}

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

}


  1. sketchAbstract {
 width: 100%;

}



/********************************************************************/ /********************* PRESENTATION **********************/ /********************************************************************/


.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: 40vh;
   padding-top: 10%;
   z-index: 5;

}



.centerContentHeadline { 

   align-items: center;
   display: flex;
   justify-content: center;
   height: 102%;
   position:relative;
   background: #FFF;
   padding-bottom:100px;

}


.graphicsPlacement { 

 position: absolute;
 bottom: 2%;
 width: 10%;

}


  1. HQ_page p.headline {
 font-family: "open sans";
 font-size: 500%;
 font-weight:400;
 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;

}


  1. attributionsCoverPicture {
   background: #ddd;

}


.team-rows { 

   margin-top: 100px;
   margin-bottom: 100px;

}

.team-top-rows { 

   margin-bottom: 100px;

}

.margin-bottom-75 { 

   margin-bottom: 75px;

}

.margin-top-50 { 

   margin-top: 50px;

}

.padding-top-125 { 

   padding-top: 125px;

}

.margin-top-200 { 

   margin-top: 200px;

}

.memberPicture { 

   width: 100%;

}

.medalPicture { 

   width: 75%;

}

.medalPicture { 

   width: 75%;

}

  1. HQ_page div.project-design-headline {
 text-align:center;
 margin-bottom:50px;

}

  1. HQ_page .energy-storing-unit-overview {
   background-color: rgba(252, 248, 211, 0.3);
   border-radius: 10px;
   border: 1px solid rgba(0,0,0,0.3)

}

  1. HQ_page .energy-converting-unit-overview {
   background-color: rgba(57, 103, 91, 0.15);
   border-radius: 10px;
   border: 1px solid rgba(0,0,0,0.3)

}

.verticalAlignColumns { 

   float: none;
   display: inline-block;
   vertical-align: middle;
   margin-right: -4px;

}

  1. HQ_page div.integrated-practices-prototypes {
   text-align:center;
   margin:50px 0px;

}


  1. HQ_page img.interview-images {
   border-radius: 50%;
   width: 100px;
   border: 10px solid #fefefe;
   height: 100px;
   box-shadow: 0 0px 0 rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.3);
  float: left;
  margin-right: 20px;

}


  1. HQ_page img.education-images {
  box-shadow: 0 0px 0 rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.3);
  border-radius: 10px;

}


  1. HQ_page object.listing-item-symbol {
   width: 20px;
   margin-bottom: 0;
   margin-right: 25px;
   margin-left: 18px;

}


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

}