<style>

/* ----------------------------------------------------------------------- BODY --- */
    
*
    {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        }
        
html, body
    {
        box-sizing: border-box;
        margin: 0;
        
        width: 100vw;
        
        overflow-x: hidden;
        
        background: #c4c4c4;
        font-size: 100%;
        
        color: #181716;
      
        /*------ scrollbars ausblenden -------*/
        .element { overflow: -moz-scrollbars-none; }
        .element { -ms-overflow-style: none; }
        .element::-webkit-scrollbar { width: 0 !important }
        }
        
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto; 
        


panels
{
    box-sizing: border-box;
    background-color: #c4c4c4;
    
}
        
section
    {
        box-sizing: border-box;
        position: relative;
        width: auto;
        overflow: auto;
        }
        
.seperator
        {
        box-sizing: border-box;
        display: block;       
        background: #efefef;
        
        margin-left: 2vh;
        margin-right: 2vh;

        z-index: 8;
        }
            
        
.one
    {   
        box-sizing: border-box;
        
        background-image: url('img/3.jpg');
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
        
        height: 99vh;
        
        margin-top: 2vh;
        margin-left: 2vh;
        margin-right: 2vh;
        
        overflow: hidden;
        }

.two
    {
        background-image: url('img/oliver-mies.jpg');
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
        
        height: 75vh;
        
        margin-left: 2vh;
        margin-right: 2vh;
        
        overflow: hidden;
        }
        
.three
    {
        background-image: url('img/2.jpg');
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
        
        height: 50vh;
        
        margin-left: 2vh;
        margin-right: 2vh;
        
        overflow: hidden;
        }

.four
    {
        background-image: url('img/4.jpg');
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
        
        height: 25vh;
        
        margin-left: 2vh;
        margin-right: 2vh;
        
        overflow: hidden;
        }

.scroll-up
    {
        display: block;
        position: absolute;
        
        font-family: Economica, sans-serif;
        font-size: 28px;
        font-weight: 900;
        
        color: #fff;
        
        text-align: center;
        top: 5px;
        width: 100%;
        
        opacity: 1;
        
        z-index: 10;
        }
        
.scroll-bottom
    {
        display: block;
        position: absolute;
        
        font-family: Economica, sans-serif;
        font-size: 28px;
        font-weight: 900;
        
        color: #fff;
        
        text-align: center;
        bottom: 5px;
        width: 100%;
        
        opacity: 1;
        
        z-index: 10;
        }        
        
.logo
    {
        display: block;
        position: fixed;
        background-image: url('img/logo.png');
        background-size: contain;
        
        right: 6em;
        top: 4em;
        width: 20vh;
        height: 20vh;
        
        z-index: 10;
        }

.add
    {
        display: block;
        position: fixed;
        background-image: url('img/claim.png');
        background-size: contain;
        background-repeat: no-repeat;
        
        right: 6em;
        bottom: 4em;
        width: 25vh;
        height: 5vh;
        
        z-index: 10;
        }   

.txt
    {   position: absolute;
        margin-top: 6em;
        margin-left: 6em;
        margin-right: 25em;
        margin-bottom: 6em;
        
        min-height: 100%;
        min-width: 65%;
        
        }

.txt2
    {
        padding-top: 8vw;
        padding-bottom: 8vw;
        margin-left: 6em;
        margin-right: 25em;
        margin-bottom: 22em;
        
        min-height: 100%;
        min-width: 65%;
        }

h1
    {
        margin-top:25%; padding-top:0;
            
        font-family: Economica, sans-serif;
        font-size: 15vh;
        line-height: 15vh;
        color: #00aeca;
        
        text-shadow:
        0px 0px 10px #c4c4c4; 
        }

h2
    {
        margin-top:0; padding-top:0;
        
        font-family: Economica, sans-serif;
        font-size: 6vh;
        color: #00aeca;
        
        text-shadow:
        0px 0px 10px #c4c4c4; 
        }
        
h3
    {
        margin-top:0; padding-top:0;padding-bottom: 0;
        
        font-family: Economica, sans-serif;
        font-size: 6vh;
        color: #181716;
        
        text-align: right;
        
        text-shadow:
        0px 0px 10px #c4c4c4; 
        }
        
        
h4 {    margin-top:0; padding-top:0;
        
        font-family: Economica, sans-serif;
        font-size: 3vh;
        color: #181716;
        
        text-align: right;
        
        text-shadow:
        0px 0px 10px #c4c4c4;
    
}
        
p
    {
        font-family: Roboto Condensed, sans-serif;
        font-weight: 300;
        
        color: #181716;
        
        line-height: 1.25em;
        font-size:  1.1em;
        
        letter-spacing: 0.05em;
        }
        
form
    {
        font-family: Roboto Condensed, sans-serif;
        font-weight: 300;
        letter-spacing: 0.05em;
        }
        
.col
    {
        width: 27.5%;
        float: left;
        margin-right: 2.5%; 
        }
        
.coltwo
    {   height: auto;
        width: 47%;
        float: left;
        
        margin-right: 2.5%;
        }
        
a{
        text-decoration: none;
        color: #00aeca;
    }
        
   
@media screen and (max-width: 1024px){
.logo
    {   right: 15vw;
        top: 12vw;
        width: 20vh;
        height: 20vh;
        position: absolute;    
        }
.add
    {
        right: 15vw;
        bottom: 12vw;
        width: 25vh;
        height: 5vh;
        position: absolute;    
        }
.seperator
    {
        height: auto;
        margin-left: 2vh;
        margin-right: 2vh;
        padding-bottom: 5vh;
        }
h1 {
        
        margin-top: 0;
        
        }
        
.txt
    {
        position: absolute;
        margin-top: 6em;
        margin-left: 6em;
        margin-right: auto;
        margin-bottom: 6em;
        
        height: auto;
        width: 80%;
        }   
.txt2
    {
        margin: 70% auto auto auto;
        margin-top: auto;

        padding-top: 8vw;
        padding-bottom: 8vw;
        
        
        height: auto;
        min-height: 100%;
        width: 80%;
        }

.col
    {
        width: 100%;
        height: auto;
        }
        
.coltwo
    {
        width: 100%;
        height: auto;
        }
        
h1
    {   margin-top: 25vh;
        
        padding-bottom: 0;
            
        font-family: Economica, sans-serif;
        font-size: 10vw;
        line-height: 10vw;
        color: #00aeca;
        
        text-shadow:
        0px 0px 10px #c4c4c4; 
        }

h2
    {   margin-top:10px; padding-top:0;
        
        font-family: Economica, sans-serif;
        font-size: 20px;
        color: #00aeca;
        
        text-shadow:
        0px 0px 10px #c4c4c4; 
        }

h3
    {
        margin-top:0; padding-top:0;padding-bottom: 0;
        
        font-family: Economica, sans-serif;
        font-size: 20px;
        color: #181716;
        
        text-align: right;
        
        text-shadow:
        0px 0px 10px #c4c4c4; 
        }
        
h4
    {
        margin-top:0; padding-top:0;padding-bottom: 0;
        
        font-family: Economica, sans-serif;
        font-size: 20px;
        color: #181716;
        
        text-align: right;
        
        text-shadow:
        0px 0px 10px #c4c4c4; 
        }  
        
p
    {
        font-family: Roboto Condensed, sans-serif;
        font-weight: 300;
        
        color: #181716;
        
        line-height: 16px;
        font-size:  14px;
        
        letter-spacing: 0.05em;
        }
        
form
    {
        font-family: Roboto Condensed, sans-serif;
        font-weight: 300;
        
        line-height: 16px;
        font-size:  14px;
        }
        

.scroll-bottom
    {
        visibility: hidden;
    }
        
.scroll-up
    {
        visibility: hidden;
    }
}

@media screen
@media (orientation: landscape)
@media (max-width: 568px)
{
.txt
    {
        margin-top: 0;
        height: 100%;
        width: 80%;
           
        margin-left: auto;
        margin-right: auto;
        vertical-align: middle;
        } 
}

@media screen
@media (max-width: 320px){


.add{
    visibility: hidden;
    }
}
/* ----------------------------------------------------------------------- BODY --- */

/*

.scrollable {
    
        box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
*/


/*

.items {
    height: auto;
    overflow: visible;
    width:1000%;
    -webkit-animation: hscroll 100s infinite;
    -moz-animation: hscroll 100s infinite;
    -ms-animation: hscroll 100s infinite;
}

.item {
    height: auto;
    width:10%;
    display: block;
    float: left;
    padding-right: 2%;
}

@-webkit-keyframes hscroll {
    0%   { margin-left: 0; visibility: visible; opacity: 1;}
    9%  { margin-left: 0; }
    10%  { margin-left: -120%; }
    19% { margin-left: -120%; }
    20% { margin-left: -240%; }
    29%  { margin-left: -240%; }
    30%  { margin-left: -360%; }
    39% { margin-left: -360%; }
    40% { margin-left: -480%; }
    49%  { margin-left: -480%; }
    50%  { margin-left: -600%; }
    59% { margin-left: -600%; }
    60% { margin-left: -720%; }
    69%  { margin-left: -720%; }
    70%  { margin-left: -840%; }
    79% { margin-left: -840%; }
    80% { margin-left: -960%; }
    89%  { margin-left: -960%; }
    90% { margin-left: -1080%;  opacity: 1; }
    99 %  { margin-left: -1080%; opacity: 0; }
  100%  { margin-left: 0; opacity: 0; }
}

@-moz-keyframes hscroll {
  0%   { margin-left: 0; }
5 %  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-ms-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}?

/* ---------------------------PARALLAX-------------------------------*/

</style>