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

/* ******************* ALLGEMEINE FORMATIERUNG ***************************************
*************************************************************************************/

/* 770px width mobile View*/


/*
    COLORCODES:
        black: #000000
        grey: #222222
        blue: #008EBE
        darker blue: #00749C
        pure white: #FFFFFF
        darker white: #F3F3F3
*/

input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html, body{
    background-color: #FFFFFF;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family:  Eurostile, Calibri, Helvetica, sans-serif;
}

/* ******************* Placeholders **************************************************
*************************************************************************************/

.placeholderBlack{
    width: 100%;
    height: 10px;
    background-color: #222222;
}

.placeholderWhite{
    width: 100%;
    height: 10px;
    background-color: #FFFFFF;
}

/* ******************* Top Button ****************************************************
*************************************************************************************/

#goToTopButton{
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #008EBE; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    opacity: 0.5;
}

#goToTopButton:hover{
    opacity: 1;
} 


/* ******************* NAVIGATION Desktop ********************************************
*************************************************************************************/

#mainNavigation{
    width: 100%;
    height: 60px;
    background-color: #FFFFFF;
    /*border-bottom: 1px solid black;*/
    padding: 0;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

#logo{
    width: 137px;
    height: 44px;
}

.topMenu{
    width: 80%;
    max-width: 1000px;
    height: 44px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between; /* align horizontal */
}

.topMenuLinks{
    width: 137px;
    height: 44px;
    float: left;
    display: flex;
    box-sizing: border-box;
}

#mainNavigation .topMenu .topMenuLinks a{
    text-decoration: none;
    width: 110px;
    height: 44px;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    color: black;
    border-bottom: 3px solid transparent;
}

#mainNavigation .topMenu .topMenuLinks a:hover{
	/*background-color: #008EBE;*/
    border-bottom-color: #008EBE;
	color: #008EBE;
	/*-webkit-transition: all 400ms ease-in;
	-moz-transition: all 400ms ease-in;
	-ms-transition: all 400ms ease-in;
	-o-transition: all 400ms ease-in;
	transition: all 400ms ease-in;
    */
}

@media(max-width: 770px){
    #mainNavigation{
        display: none;
    }
}

/* ******************* NAVIGATION Mobile *********************************************
*************************************************************************************/

#mainNavigationMobile{
    width: 100%;
    height: 60px;
    background-color: #FFFFFF;
    /*border-bottom: 1px solid black;*/
    padding: 0;
    margin-bottom: 70px;
}

#imageContainer{
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logoMobile{
    width: 137px;
    height: 44px;
    margin-top: 10px;
}

#mobileContainer{
    width: 100%;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

.topMenuMobile{
    width: 80%;
    max-width: 1000px;
    height: 44px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between; /* align horizontal */
}

.topMenuLinksMobile{
    width: auto;
    height: 44px;
    float: left;
    display: flex;
    box-sizing: border-box;
}

#mainNavigationMobile .topMenuMobile .topMenuLinksMobile a{
    text-decoration: none;
    width: auto;
    height: 28px;
    margin-top: 20px;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    border-bottom: 2px solid #008EBE;
    color: #008EBE;
    font-weight: bold;
}

@media(min-width: 770px){
    #mainNavigationMobile{
        display: none;
    }
}

/* ******************* Headers *******************************************************
*************************************************************************************/

h1{
    margin: 0;
}

.headers{
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
}

#imprintHeader{
    padding-top: 17px;
    padding-bottom: 0px;
}

/* ******************* Home **********************************************************
*************************************************************************************/

#homeSection{
    width: 100%;
    background-color: #F3F3F3;
    overflow: auto;
}

#homeHeaderSection{
    width: 100%;
    display: flex;
    justify-content: center;
}

#homeHeaderTextSection{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    max-width: 1000px;
    line-height: 2em;
}

#homeContentWrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    float: left;
}

#homeContentSection{
    width: 80%;
    max-width: 1000px;;
}

#slideshow{
    width: 50%;
    float: left;
}

#slideshow img{
    width: 100%;
}

#homeTextSection{
    width: 50%;
    float: left;
    line-height: 2em;
}

#homeText{
    width: 100%;
    max-width: 1000px;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

@media(max-width: 770px){
    #homeSection{
        width: 100%;
        background-color: #F3F3F3;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    #homeContentWrapper{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    
    #homeContentSection{
        width: 80%;
        max-width: 1000px;;
    }
    
    #slideshow{
        width: 100%;
    }
    
    #slideshow img{
        width: 100%;
    }
    
    #homeTextSection{
        width: 100%;
        margin-top: 20px;
        line-height: 2em;
    }
    
    #homeText{
        width: 100%;
        max-width: 1000px;
        margin: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ******************* About Us ******************************************************
*************************************************************************************/

#aboutUsSection{
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    overflow: auto;
}

#aboutUsHeaderSection{
    width: 100%;
    display: flex;
    justify-content: center;
}

#aboutUsHeaderTextSection{
    width: 80%;
    max-width: 1000px;
    line-height: 2em;
}

#aboutUsTextSection{
    width: 100%;
    display: flex;
    justify-content: center;
}

#aboutUsText{
    width: 80%;
    max-width: 1000px;
    line-height: 2em;
    margin: 0;
    padding-bottom: 20px;
}


/* ******************* Contact *******************************************************
*************************************************************************************/

/* Add a background color and some padding around the form */
#contactSection{
    background-color: #F3F3F3;
    display: flex;
    justify-content: center; /* align horizontal */
}

#contactTextSection{
    width: 80%;
    max-width: 1000px;
    line-height: 2em;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea{
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit]{
    background-color: #008EBE;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover{
    background-color: #00749C;
}

#country{
    background-color: #FFFFFF;
}


/* ******************* Imprint *******************************************************
*************************************************************************************/


#imprintSection{
    width: 100%;
    background-color: #FFFFFF;
}

#imprintHeaderSection{
    width: 100%;
    display: flex;
    justify-content: center;
}

#imprintHeaderTextSection{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    max-width: 1000px;
    line-height: 2em;
}

.imprintBoxesSection{
    display: flex;
    justify-content: center; /* align horizontal */
}

.imprintBoxes{
    box-sizing: border-box;
    background-color: transparent;
    width: 40%;
    max-width: 490px;
    height: auto;
}

.imprintText{
    margin: 0;
    font-size: 20px;
}

@media(max-width: 770px){
    .imprintText{
        font-size: 12px;
    }
}

#imprintContactSection{
    margin-left: 10%;
    margin-top: 30px;
    border-bottom: 1px solid black;
}

#imprintAddressSection{
    margin-right: 10%;
    margin-top: 30px;
    text-align: right;
    border-bottom: 1px solid black;
}

#imprintBankSection{
    margin-left: 10%;
    margin-bottom: 10px;
    margin-top: 10px;
}

#imprintCompanySection{
    margin-right: 10%;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: right;
}

/* ******************* Footer ********************************************************
*************************************************************************************/

footer{
    width: 100%;
    height: 30px;
    background-color: #F3F3F3;
    color: black;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */   
}