@import url('https://fonts.googleapis.com/css?family=Titillium+Web');



html {

}
body {
    margin:0px;
}
* {
    box-sizing:border-box;
    font-family: "Titillium Web", sans-serif;
}
div {
    overflow:hidden;
}



.container {
    width:75%;
    margin-left:auto;
    margin-right:auto;
}
.container.full {
    width:100%;
}
.container.half {
    width:50%;
}
.container.third {
    width:calc(100%/3);
}
.container.small {
    width:25%;
}
.container.float {
    float:left;
}



.warning_message_background {
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.8);
    z-index:10;
}
.warning_message_background .warning_message {
    margin-top:15vh;
    background-color:#ffffff;
}
.warning_message_background .warning_message h3 {
    margin:0px;
    padding:20px;
    background-color:#f1f1f1;
}
.warning_message_background .warning_message p {
    margin:0px;
    padding:20px;
}
.warning_message_background .warning_message button {
    float:right;
    margin:20px;
    margin-top:0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    color:#ffffff;
    background-color:#3c7073;
    border:0px;
    cursor:pointer;
    font-size:inherit;
}



.menu {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    padding:20px;
    background-color:#ffffff;
    box-shadow:0px 0px 3px rgba(0,0,0,0.5);
    z-index:3;
}
.menu img {
    float:left;
    height:40px;
    cursor:pointer;
}
.menu ul {
    float:right;
    margin:0px;
    padding:0px;
    list-style-type:none;
}
.menu ul li {
    overflow:visible;
    position:relative;
    display:inline-block;
    padding-left:10px;
    padding-right:10px;
    padding-top:12px;
    cursor:pointer;
    color:#757575;
    transition:all .3s;
}
.menu ul li:hover {
    color:#000000;
}
.menu ul li.active {
    color:#000000;
}
.menu .menu-slider {
    position:absolute;
    bottom:0px;
    width:100px;
    height:3px;
    background-color:#3c7073;
    transition:all .3s;
}
.menu .menu-response-button {
    display:none;
    float:right;
    font-size:20px;
    margin-top:10px;
    cursor:pointer;
}



.content {
    margin-top:80px;
    background-color:#ffffff;
}



.slider-wrap {
    margin-top:20px;
}
.slider {
    position:relative;
    height:60vh;
}
.slider figure {
    position:absolute;
    left:0;
    top:0;
    width:300%;
    height:100%;
    margin:0px;
    transition:all .3s;
}
.slider figure .slide {
    position:relative;
    float:left;
    width:calc(100% / 3);
    height:100%;
    background-position:center;
    background-size:cover;
}
.slider .slider-button-left, .slider .slider-button-right {
    position:absolute;
    top:calc(50% - 25px);
    padding-left:15px;
    padding-right:15px;
    padding-bottom:3px;
    color:#ffffff;
    background-color:rgba(0,0,0,0.3);
    font-size:45px;
    cursor:pointer;
    transition:all .3s;
}
.slider .slider-button-left {
    left:-100%;
}
.slider:hover .slider-button-left {
    left:20px;
}
.slider .slider-button-right {
    right:-100%;
}
.slider:hover .slider-button-right {
    right:20px;
}
.slider .slider-button-left:hover, .slider .slider-button-right:hover {
    background-color:#3c7073;
}
.slider .slider-info {
    display:none;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    padding:20px;
    color:#ffffff;
    background-color:rgba(0,0,0,0.5);
    transition:all .3s;
}
.slider .slider-info.active {
    display:inline-block;
}
.slider:hover .slider-info {
    background-color:rgba(0,0,0,0.8);
    padding-bottom:30px;
}



.news {
    margin-top:50px;
}
.news .news-headline {
    width:10%;
    margin:0px;
    padding-top:20px;
    padding-bottom:20px;
    color:#ffffff;
    background-color:#022c70;
    border-right:1px dashed #ffffff;
    text-align:center;
    font-size:inherit;
    font-weight:bold;
}
.news .news-feed {
    display:inline-block;
    padding:20px;
    padding-top:0px;
    padding-bottom:0px;
    color:#022c70;
    background-color:#f1f1f1;
    border-left:5px solid #022c70;
    border-right:5px solid #022c70;
    font-size:inherit;
    font-size:20px;
}
.news .news-feed p {
    display:none;
}
.news .news-feed p.active {
    display:inline-block;
}



.teasers {
    display:table;
    padding-top:50px;
    padding-bottom:15vh;
}
.teasers .teaser {
    display:table-cell;
    width:calc( 100% / 3 );
    padding:40px;
    padding-top:10vh;
    padding-bottom:40px;
    background-color:#f1f1f1;
    text-align:justify;
}
.teasers .teaser:nth-child(even) {
    background-color:#3c7073;
    color:#ffffff;
}
.teasers .teaser a {
    text-decoration:none;
    color:#3c7073;
    font-weight:bold;
}
.teasers .teaser:nth-child(even) a {
    color:#ffffff;
}
.teasers .teaser i {
    display:block;
    font-size:50px;
    margin-bottom:40px;
}
.teasers .teaser button {
    margin-top:40px;
    padding:10px;
    padding-right:20px;
    padding-left:0px;
    font-size:inherit;
    border:0px;
    background-color:#f1f1f1;
    cursor:pointer;
    transition:all .3s;
}
.teasers .teaser button:hover {

    padding-left:20px;
    background-color:#c5c5c5;
}
.teasers .teaser button:focus {
    outline:none;
}
.teasers .teaser:nth-child(even) button {
    color:#ffffff;
    background-color:#3c7073;
}
.teasers .teaser:nth-child(even) button:hover {
    color:#000000;
    background-color:#ffffff;
}



.moto {
    padding-top:20vh;
    padding-bottom:20vh;
    background-image:url("../images/balloon.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    font-size:24px;
    text-align:center;
}
.moto p {
    display:inline-block;
    margin:0px;
    padding:20px;
    color:#ffffff;
    background-color:rgba(0,0,0,0.8);
    border-left:2px solid #3c7073;
    text-transform:uppercase;
}



.articles {
    background-color:#ffffff;
    margin-top:20vh;
    margin-bottom:20vh;
}
.articles .articles-background {
    background-image:url("../images/balloon.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}
.articles .article-white-space {
    height:20vh;
    background-color:#ffffff;
}
.articles .article {
    position:relative;
    display:table;
}
.articles .article .article-info {
    display:table-cell;
    width:75%;
    padding:20px;
    background-color:#ffffff;
}
.articles .article .article-info h2 {
    margin-top:0px;
}
.articles .article .article-button {
    position:relative;
    display:table-cell;
    width:25%;
    padding:0px;
    text-align:center;
    font-size:24px;
    cursor:pointer;
    color:#ffffff;
    background-color:rgba(0,0,0,0.1);
    transition:all .3s;
}
.articles .article .article-button:hover {
    color:#000000;
    background-color:#f1f1f1;
}
.articles .article .article-button .article-button-text {
    position:absolute;
    top:calc(50% - 24px);
    width:100%;
    text-align:center;
}
.articles .article .article-button i {
    padding-left:10px;
    padding-right:10px;
}



.headline {
    padding-top:20vh;
    padding-bottom:20vh;
    text-align:center;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}
.headline h1 {
    display:inline-block;
    padding:10px;
    color:#ffffff;
    background-color:rgba(0,0,0,0.8);
    border-left:2px solid #3c7073;
}



.textboxes {
    padding-top:10vh;
    padding-bottom:10vh;
}
.textboxes .textbox {
    margin-top:20px;
    margin-bottom:20px;
    padding:20px;
}
.textboxes .textbox .textbox {
    margin:0px;
    padding:0px;
}
.textboxes .textbox .textbox:nth-child(even) {
    padding-right:20px;
}
.textboxes .textbox .textbox:nth-child(odd) {
    padding-left:20px;
}
.textboxes .textbox p {
    text-align:justify;
    padding-left:23px;
}
.textboxes .textbox h2 {
    padding-left:20px;
    border-left:3px solid #3c7073;
}
.textboxes .textbox h3 {
    padding-left:23px;
}
.textboxes .textbox img {
    float:left;
    width:128px;
    margin:20px;
    margin-left:23px;
}
.textboxes .textbox img.half {
    width:calc(50% - 43px);
}
.textboxes .textbox img.full {
    width:calc(100% - 43px);
}



.contact {
    padding-top:20px;
    padding-bottom:20px;
    background-color:#f1f1f1;
}
.contact h2 {
    text-align:center;
    margin-bottom:20px;
}
.contact input:focus, .contact select:focus, .contact textarea:focus, .contact button:focus {
    outline:none;
}
.contact input:focus, .contact select:focus, .contact textarea:focus {
    box-shadow:0px 0px 3px #3c7073;
}
.contact input {
    float:left;
    width:calc(50% - 10px);
    margin:5px;
    padding:10px;
    background-color:#ffffff;
    border:0px;
    font-size:inherit;
}
.contact select {
    float:left;
    width:calc(50% - 10px);
    margin:5px;
    padding:10px;
    padding-top:9.5px;
    padding-bottom:9.5px;
    color:#757575;
    background-color:#ffffff;
    border:0px;
    font-size:inherit;
}
.contact textarea {
    width:calc(100% - 10px);
    margin:5px;
    padding:10px;
    background-color:#ffffff;
    border:0px;
    font-size:inherit;
    resize:vertical;
    min-height:140px;
    max-height:560px;
}
.contact button {
    float:right;
    margin:5px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    color:#ffffff;
    background-color:#3c7073;
    border:0px;
    cursor:pointer;
    font-size:inherit;
}



.footer {
    padding-top:5vh;
    padding-bottom:5vh;
    color:#ffffff;
    background-color:#323232;
}
.footer h3 {
    padding-left:20px;
    border-left:2px solid #ffffff;
}
.footer ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
}
.footer ul li {
    padding-left:20px;
    color:#c5c5c5;
    transition:all .3s;
}
.footer ul li:hover {
    color:#ffffff;
    border-left:2px solid #ffffff;
}

@media screen and (max-width: 1280px){
    .container {
        width:90%;
    }
}
@media screen and (max-width: 1000px){
    .teasers .teaser {
        display:inline-block;
        width:100%;
    }
}
@media screen and (max-width: 900px){
    .slider-wrap .slider {
        height:100vh;
    }
    .footer .container.third {
        width:100%;
    }
    .textboxes .textbox {
        width:100%;
    }
    .menu ul {
        display:none;
        position:fixed;
        top:80px;
        left:0px;
        width:100%;
        background-color:#ffffff;
        border-top:1px solid #f1f1f1;
    }
    .menu ul li {
        width:100%;
        padding:20px;
    }
    .menu-slider {
        display:none;
    }
    .menu .menu-response-button {
        display:inline-block;
    }
}