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


/*span {
    padding-top: 100px;
} */
* { /* * deswegen, da es für alle gelten soll!!!*/
    -webkit-box-sizing:border-box;      /*-webkit- für WEBKIT-Browser*/
    -moz-box-sizing:border-box;         /*-moz- für Mozilla*/
    box-sizing:border-box;  
}

body {
    font-family: GloberBold, 'Open Sans', Arial, sans-serif;     /*Arial haben wir hinzugefügt, warum auch immer!!!*/
    background-color: #ffffff;*/
}

img {
       max-width: 100%; /*Maximale Breit für Bilder soll 100 % sein, damit sie sich flexibel anpassen!*/
       height: auto; /*Damit die Bilder nicht verzerrt werden, muss man die Höhe proportional berechnen und das passiert mit height*/
}

h1 {
    margin-top: 90px;
    color: #ffffff;
    font-family: GloberBold;
	font-weight: normal;
	font-style: normal;
	text-align: center;
}

h2 {
    margin-top: 5px;
    text-align: center;
    font-size: 30px;
    font-family: GloberBold;
	font-weight: normal;
	font-style: normal;
}

h3 {
    margin-top: 100px;
    text-align: center;
    color: #ffffff;
    font-family: GloberBold;
	font-weight: normal;
	font-style: normal;
}

h4 {
    text-align: center;
    color: #ffffff;
}

/*Logo*/
h5 {
     text-align: center;
     margin-top: 20px;
}

h6 {
    text-align: center;
}

strong {
         font-family: GloberBold;
	     font-weight: normal;
	     font-style: normal;
}

p {
         font-family: GloberBold;
	     font-weight: normal;
	     font-style: normal;
}

.site-nav,
.site-header,
.site-inhalt,
.site-video,
.site-rezensionen,
.site-calltoaction,
.site-footer {
    width: 100%;   /*Die Breite benötigt man, weil man es floaten lassen will.*/
    float: left;
}

.site-nav  {

              background: black;          
}

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

/* nav slider */
a.nav-show {float: right;}
a.nav-hide {float: right;}

a.nav-hide {display:none;}

.nav-slider {display: none;}

#nav-open:target .nav-slider {display:block;}
#nav-open:target a.nav-hide {display:block;}

#nav-open:target a.nav-show {display: none;}

}

/*sollte unter dem Mousover stehen*/
@media screen and (min-width:535px) {

    a.nav-show,
    a.nav-hide {display: none;}     /*Mit disem Befehl verstecke ich die beiden Menübuttons in der Largeversion!!!*/
    
    .site-nav li {float: left;}    /*dies sind nun die Listenelemente*/
    
  
}

.site-header   {
     background: black;
     padding-top: 2em;     /*Abstand von oben*/
     padding-bottom: 2em;  /*Abstand von unten*/
     text-align: center;
}

.site-inhalt   {
     background: black;
     padding-top: 1em;      /*Abstand von oben*/
     padding-bottom: 2em;   /*Abstand von unten*/
     text-align: center;
}
  
.site-video    {
     background: black;
     padding-top: 2em;      /*Abstand von oben*/
     padding-bottom: 2em;   /*Abstand von unten*/
}

.site-rezensionen  {
     padding-top: 2em;      /*Abstand von oben*/
     padding-bottom: 2em;   /*Abstand von unten*/
}

.site-calltoaction  {
     padding-top: 1px;      /*Abstand von oben*/
     padding-bottom: 2em;   /*Abstand von unten*/
}


.site-footer  {
     background: black;
     color: black;
     padding-top: 2em;      /*Abstand von oben*/
     padding-bottom: 2em;   /*Abstand von unten*/
}



/*Raster*/
.container {
    max-width: 960px;  
    margin: 0 auto;  
}

.container1 {
    max-width: 0 auto;
    margin: 0 auto; 
}

.row {
	width:100%;        
	float:left;       
}

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

@media screen and (max-width:600px) {  /*geht von 0 bis 600 px; besser wäre em statt px; hier benötigen wir es nicht*/
    
/* 2 spaltiges Raster in der kleinen Layout-Version */
.small-1 {width:50%;}
.small-2 {width:100%;}

}

@media screen and (min-width:600px) {   /*geht von 600 px bis unendlich, besser wäre em statt px; hier benötigen wir es nicht*/

/* 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%;}

}