@font-face {
    font-family: 'Helvetica-UltraCompressed';
    src: url('../fonts/HelveticaNeueLTStd-Cn.otf') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica-Roman';
    src: url('../fonts/Helvetica Neue CE 55 Roman.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}


* { margin: 0; padding: 0; border:none;}
body {font-family: 'Helvetica-Roman', arial, sans-serif; font-size: 18px;  line-height: 24px;}

p {font-size: 18px;  line-height: 24px;}

h1 {padding-bottom: 10px; font-family: 'Helvetica-UltraCompressed', arial, sans-serif; letter-spacing: 1px; line-height: 40px; }
h2 {font-family: 'Helvetica-UltraCompressed', arial, sans-serif; letter-spacing: 1px; font-size: 18px; text-transform: uppercase; margin-bottom: 10px;}

#header {width: 100%; height: auto; }
#header-nav {width: 1250px; height: 50px; background: #87a8c7; margin: 0 auto;}

#logo {height: 40px; margin-left: 100px; float: left; margin-top: 3px;}

#navigation {float: left; color: #fff; font-size: 20px;  margin-top: 17px; margin-left: 40px;}
#navigation a {text-decoration: none; color: #fff; font-family: 'Helvetica-UltraCompressed', arial, sans-serif; letter-spacing: 1px;}
#navigation a:hover {color: #000;}
.spacer {height: 25px; width: 2px; position: absolute; margin-top: -2px;}

#header-content {height: 375px; width: 1250px; background: blue; margin: 0 auto;}

#headerimage {width: 1250px; height: auto;}

#main {width: 1250px; height: auto; margin: 0 auto;}
#content {width: 960px; min-height: 780px; background: #fff; margin: 0 auto; margin-top: 60px; text-align: justify;}

.first-news {float: left; text-align: justify; margin-bottom: 100px; position: relative;}
.second-news {float: right; text-align: justify; margin-bottom: 100px; position: relative;}
.first-news a {text-decoration: none;} 
.second-news a {text-decoration: none;}
.newsimage {width: 490px; height: 350px; float: left; margin-right: 15px;}
.newsheaderline {text-transform: uppercase; margin-bottom: 0px;  float: left;  width: 440px;}

.button {width: 135px; height: 21px; background: #87a8c7; text-transform: uppercase; color: #fff; text-align: center; padding-top: 2px; font-size: 15px; }
.button2 {width: 135px; height: 21px; background: #87a8c7; text-transform: uppercase; color: #fff; text-align: center; padding-top: 2px; font-size: 15px;}
.button3 {width: 185px; height: 21px; background: #87a8c7; text-transform: uppercase; color: #fff; text-align: center; padding-top: 0px; font-size: 15px; margin:0 auto; cursor: pointer;}

.buttonclose {width: 110px; height: 22px; background: #87a8c7; text-transform: uppercase; color: #fff; text-align: center; padding-top: 2px; font-size: 15px;}
.buttonclose2 {width: 110px; height: 22px; background: #87a8c7; text-transform: uppercase; color: #fff; text-align: center; padding-top: 2px; font-size: 15px;}

#footer {width: 100%; height: auto;}
#footer-content {width: 1250px; height: 750px; margin: 0 auto;}
.slides {width: 960px; height: 250px; margin: 0 auto;}
.slider {width: 900px;}
#productslider {background: #f2f8f9; height: 380px; width: 100%;}
#productslider a {text-decoration: none;}

.slick-prev {margin-left: 25px!important; width: 50px!important; height: 50px!important; background-image: url(../images/arrow-left.png)!important; background-size: contain!important; background-repeat: no-repeat!important;}
.slick-next {margin-right: -65px!important;width: 50px!important; height: 50px!important; background-image: url(../images/arrow-right.png)!important; background-size: contain!important; background-repeat: no-repeat!important;}
.slick-slide img {margin-left: 25px;}
.slick-list {margin-left: 35px!important; width: 900px!important;}



#footer-image {
    
    width: 100%; 
    /* The image used */
    background-image: url("../images/saveair.de-parallax.jpg");

    /* Set a specific height */
    min-height: 150px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: 55% 480px;
    background-repeat: no-repeat;
    background-size: contain;}

#footer-image img {width: 100%; height: auto;}

#social-icons {width: 100%; height: 180px; }
.social-icon {width: 90px; filter: grayscale(1); margin-top: 50px;}
.next {margin-left: 120px;}
#icons-content {width: 960px; margin: 0 auto;}
#footer-line {width: 1250px; height: 40px; background: #87a8c7; margin: 0 auto;}

.first-content {display: none; text-align: justify;}
.first-content a {color: #87a8c7;}
.first-content a:hover {color: #000;}

.clearing-item {float: none; clear: both;}

.desc-text {margin-top: 80px; }
#desc-text {width: 455px; float: right;}


#sobo-einblenden {bottom: 0; position: absolute; right: 0; cursor: pointer;}
#sobo-einblenden:hover .button {background: #F3F7FA; color: #87A8C7; cursor: pointer;}
#sobo-ausblenden {float: left; cursor: pointer;}
#sobo-ausblenden:hover .buttonclose {background: #F3F7FA; color: #87A8C7;  cursor: pointer;}

.button3:hover {background: #F3F7FA; color: #87A8C7;  cursor: pointer;}

#sobo-einblenden2 {bottom: 0; position: absolute; right: 0; }
#sobo-ausblenden2 {float: left; }

.slick-list {
    margin-left: 0px !important;
    width: 1250px !important;
}
.singlenewsslides {width: 1250px; margin: 0 auto; height: 375px;}


#footer-content .slick-list {
    margin-left: 35px !important;
    width: 900px !important;
}


.parallax-section {
    position: relative;
    max-width: 1600px;
    height:400px;
    margin:50px auto;
}
.parallax-child-section {
    clip: rect(0, auto, auto, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:400px;
    display: table;
}
.paratext{
    position: relative;
    vertical-align: middle;
    z-index: 2;
    text-align: center;
    display: table-cell;
}
#test{
    background: url("../images/saveair.de-parallax.jpg");
    background-position: 100% 100%!important;
}
.fw-main-row{
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    will-change: transform;
    z-index: 1;
    background-attachment:scroll;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}




@media only screen and (max-height: 1050px) {

    #footer-image {background-size: contain; background-image: url("../images/saveair.de-parallax2.jpg"); background-position: 50% 100%;}

}




@media only screen and (max-height: 550px) {

    #footer-image {background-size: cover; background-image: url("../images/saveair.de-parallax3.jpg"); background-position: 50% 50%;}

}