@charset "UTF-8";
/* CSS Document */


html {
  box-sizing: border-box;
}
*, ::before, ::after {
  box-sizing: inherit;
}
ul {
	padding: 0;
	list-style: none;
}

.clear {
	clear: both;
	}

body {
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  line-height: 1.8;
  font-weight: 300;
  color: #000; 
  background-color: #fff;
  margin: 0;
}
header,
main,
section,
footer {
	width:100%;
	float:left;
}
main {
    display: block;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
p {
	font-size: 1em;
}
h1, h2, h3, h4 {
  text-transform: uppercase;
  text-align: left;
 }
h1 { 
	font-weight: 300;
	font-size: 1.8em; 
	line-height: 1.6; 
	letter-spacing: .05em;
}

h2 { 
	font-weight: 700;
	font-size: 1.25em; 
	letter-spacing: .07em;
	line-height: 1.8em;  
}
.scetch {
    font-family: "Cabin Sketch", Helvetica, Arial, sans-serif;
    font-size: 1.2em; 
}

h3 { 
	font-weight: 800;
	font-size: 1em;  
	letter-spacing: .12em;
}
h3 span { 
	border: #666 1px dotted;
    padding: .2em;
    margin: .8em 1.5em .8em 0;
    background-color: #151515;
    color: #fff;
    letter-spacing: .15em;
    line-height: 2;
}
h3 span:hover { 
	background-color: #fff;
    color: #000;
}

h4 { 
	font-weight: 400;
	font-size: 1em; 
	line-height: 0;
    padding-top: .8em;	
}
.agb {
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0;  
}
#agb h4 {
    line-height: 1.5;  
}

strong {
	font-weight: 800;
    letter-spacing: .1em;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color:#111; 
  text-decoration: none;	
}
a:hover {
  color:#333;
 }

/* Headerbild
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#logo {
    width: auto;
    text-align: center;
}
.logotype {
    width: 12em;
    height: auto;
    margin: 2em;
}

#hintergrundbild{
	background-image: url('../img/spirello_header_S.jpg');
    background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	background-position: center;
	height: 300px;
	width: 100%;
}

.text_headerbild {
    text-align: center;
    padding: 6em 0;
    margin: 0;
}
.line {
    padding: 3em 0;
}
img {
    margin-top: 2em;
    width: 100%;
    height: auto;
}
.movie_wrapper {
    position: relative;
    margin: 3em 0 5em 0;
    height: 0;
    padding-bottom: 50%;
    width: 100%;
    height: auto;
}
.movie {
    position: absolute;
    width: 100%;
    height: 100%;
}
ol {
    list-style: decimal;
}

.under-construction {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.construction {
    border: 2px #666 solid;
    padding: 1em;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
	padding: 1em;
}
.baustelle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
	padding: 1em;
}
.footer-baustelle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
	padding: 1em;
}

.center{
	text-align: center;
}

/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Navigation Ende
–––––––––––––––––––––––––––––––––––––––––––––––––– */


footer {
    padding: 2em 0;
    color: #fff;
	letter-spacing: .08em;
	background-color: #151515;
}
footer a {
    color: #fff;
}
footer span {
    color: #434343;
}
footer h2 {
    letter-spacing: .1em;
}
footer h4 {
    margin: 0;
}


/* Media Queries
––––––––––––––––––––––––––––––––––––––––––––––––––*/

@media screen and (min-width:500px) {
    h1 { 
	font-size: 2.5em; 
}

h2 { 
	font-size: 1.6em;  
}
.scetch {
    font-size: 1.2em; 
}

h3 { 
	font-size: 1.2em;  
}

h4 { 
	font-size: 1.1em; 
	
}
    #hintergrundbild{
	background-image: url('../img/spirello_header_M.jpg');
	height: 400px;
}
}

@media screen and (min-width:700px) {
    h1 { 
	font-size: 3.55em; 
}

    h2 { 
	font-size: 2.3em;  
}
    .scetch {
    font-size: 1.2em; 
}
    footer h2 {
    font-size: 2em; 
}

    #hintergrundbild{
	background-image: url('../img/spirello_header_L.jpg');
	height: 600px;
}
}
		
	
/* Raster 
––––––––––––––––––––––––––––––––––––––––––––––––––*/

.container {
	max-width: 700px;
	margin: 0 auto;
}
.container-large {
	max-width: 1000px;
	margin: 0 auto;
}
.row {
	width:100%;
	float:left;
}

.columns { 
	float:left;
	padding-left:1em;
	padding-right:1em;
}

@media screen and (max-width:700px) {

/* 1 spaltiges Raster in der kleinen Layout-Version 
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.small-1 {width:50%;}
.small-2 {width:100%;}

}



@media screen and (min-width:700px) {

/* 12-spaltiges Raster in der großen Layout-Version 
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.large-1 {width:8.333333%;}
.large-2 {width:16.666666%;}
.large-3 {width:25%;}
.large-4 {width:33.333333%;}
.large-5 {width:41.666666%;}
.large-6 {width:50%;}
.large-7 {width:58.333333%;}
.large-8 {width:66.666666%;}
.large-9 {width:75%;}
.large-10 {width:83.333333%;}
.large-11 {width:91.666666%;}
.large-12 {width:100%;}
}