Team:Berlin/css/cover.css

/*

* Base structure
*/

html, body {

 height: 100%;

} body {

 color: #fff;
 text-align: center;

}

/* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper {

 display: table;
 width: 100%;
 height: 100%; /* For at least Firefox */
 min-height: 100%;
 background: url('../img/background/Team_Berlin_igem_background_start.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-sub {

 display: table;
 width: 100%;
 height: 370px; /* For at least Firefox */
 min-height: 370px;
 background: url('../img/background/Team_Berlin_igem_background_start.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-sub-team {

 display: table;
 width: 100%;
 height: 370px; /* For at least Firefox */
 min-height: 370px;
 background: url('../img/background/Team_Berlin_igem_background_team.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-sub-project {

 display: table;
 width: 100%;
 height: 370px; /* For at least Firefox */
 min-height: 370px;
 background: url('../img/background/Team_Berlin_igem_background_project.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-sub-workshop {

 display: table;
 width: 100%;
 height: 370px; /* For at least Firefox */
 min-height: 370px;
 background: url('../img/background/Team_Berlin_igem_background_workshop.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-sub-safety {

 display: table;
 width: 100%;
 height: 370px; /* For at least Firefox */
 min-height: 370px;
 background: url('../img/background/Team_Berlin_igem08_small.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-sub-contact {

 display: table;
 width: 100%;
 height: 370px; /* For at least Firefox */
 min-height: 370px;
 background: url('../img/background/Team_Berlin_igem02_small.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-sub-apply {

 display: table;
 width: 100%;
 height: 370px; /* For at least Firefox */
 min-height: 370px;
 background: url('../img/background/Team_Berlin_igem_background_apply.jpg'); 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.site-wrapper-inner {

 display: table-cell;
 vertical-align: top;

} .cover-container {

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

}

/* Padding for spacing */ .inner {

}

.inner-workshop {

 background-color: white;

}

/*

* Cover
*/

/*

* Footer
*/

.mastfoot {

 color: #999; /* IE8 proofing */
 color: rgba(255,255,255,.5);

}

/*

* Affix and center
*/

@media (min-width: 768px) {

 /* Pull out the header and footer */
 .masthead {
   position: fixed;
   top: 0;
 }
 .mastfoot {
   position: fixed;
   bottom: 0;
 }
 /* Start the vertical centering */
 .site-wrapper-inner {
   /*vertical-align: middle;*/
 }
 /* Handle the widths */
 .masthead,
 .mastfoot,
 .cover-container {
   width: 100%; /* Must be percentage or pixels for horizontal alignment */
 }

}

@media (min-width: 992px) {

 .masthead,
 .mastfoot,
 .cover-container {
   width: 1017px;
 }

}

.masthead{

 z-index: 10;

}

/* Media Querie small

• • • • • • • • • • • • • • • • • /

@media (max-width: 468px){

   .site-wrapper {
     /*background: rgba(0,0,0,.5);*/
     max-height: 400px;
   }

   .site-wrapper-inner{
     padding: 0;
     max-height: 400px;
   }
   

.site-wrapper-sub, .site-wrapper-sub-team, .site-wrapper-sub-project, .site-wrapper-sub-workshop, .site-wrapper-sub-safety, .site-wrapper-sub-contact{ background: none; height: 0; min-height: 0;

   }

 	.site-wrapper{

background: black;

 	}

}

@media (max-width: 768px){ .site-wrapper-sub, .site-wrapper-sub-team, .site-wrapper-sub-project, .site-wrapper-sub-workshop, .site-wrapper-sub-safety, .site-wrapper-sub-contact{ background: none; height: 0; min-height: 0;

   }

 	.site-wrapper{

background: black;

 	}

}