/* html_template */

body{background-color: peachpuff; margin: 0px;}

.borderRed{border: 2px solid red;}
.borderBlue{border: 2px solid blue;}
.borderGreen{border: 2px solid green;}

*{ font-family:"headLineFont"; box-sizing:border-box;}
ul{list-style-type: none;}
a{text-decoration: none;}

/*.menuHeader {
    font-family: headLineFont;
    margin-top: 5px;
    margin-left: 0px;
}*/


/* ==============mainBox */
.mainBox {
    margin: auto;
    width: 80%;
    min-height: 500px;
    position:relative;
}

/* ==============header */
.headerBox {
    position: relative;
    /*display: flex;
    flex-direction: row;*/
    background-image: url(../img/bacalao.png);
    background-size:cover;
    background-repeat: no-repeat;


}

.headerBox , .menuNameBox{
   
    height: 250px;
    /* background-color: aqua; */

}
.menuNameBox{
   /* display: block;*/
    background-image: url(assets/icons/LogoMontseWebseite.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 250px;
    margin-top:0px; 
    /*padding-left: 5px; */
    width: 30%;}
    h1{
        font-size: 50px;
    }
    
.nameBox{
    position: absolute;
    top: 10px;
    left:40%;
    height: 50px; 
    font-size: 45px;
    text-align: center;
    width: 40%;
    color: rgb(237, 252, 255);}
    
    


.menuBox {
    font-family: headLineFont;
    margin-top: 5px;
    margin-left: 0px;
    position: fixed;

    width: 80%;
    min-height: 30px;
    /* background-color: rgb(7, 247, 11); */
    margin: 0px;
}
/*  linke seite des Header mit dem Namen */

/* name "Uwe Lehmann"*/
.menuHeaderBox {

    width: 50%;
    height: 60px;
    margin: auto;
    margin-left: 0px;
    padding-left: 10px;
}
.navBox{
    margin: auto;
    width: 100%;
    height:60px;
    padding-right:20px;
    /* background-color: rgb(17, 122, 235); */
}

.iconBox{
    background-image: url( assets/icons/menuIcon.svg);
    background-repeat: no-repeat;
    background-position-x: right;
    display:block;
    width: 60px;
    height: 60px;
   
}



/* ==============menu */

.wrapperMenueBtn {
    min-width: 100px;
    min-height: 50px;

    position: absolute;

    right: 0px;
}
.wrapperMenueBtn:hover , .thumbScrollhover_effect{ min-width: 51px;}

.hover {
    user-select:  none;
    -webkit-touch-callout: none;        
    }

#logoImg {
        display: block;
        width: 60px;
        height: 60px;
        /* background-color: rgb(23, 137, 237); */
 }

 .navBox {
    margin: auto;
    width: 80%;
    height: 80px;
    /* background-color: #cccccc; */
    position: fixed;
    top: 20px;
    left: 0px;
    right: 0px;
    display: flex;
}

.subMenue {
    margin-top: -25px;
    margin-right: 0px;
    padding:0;    
    padding-top: 25px;
    width: 100%;
    height: 60px;
    float: right;


}
.subMenue li{
    /* width: 10%; */
    margin:10px;
    display: table;
    vertical-align: middle;
    border: 1px solid black;
    border-radius: 5%;
    float: right;
    background-color: aliceblue;

} 
.subMenue a{
    padding:0;
    display: table;
    text-decoration:none;

    vertical-align: middle;
    width: 120px;  
    height: 30px;
    color: black;
    text-align: center;
    padding-top: 4px;
}   
.subMenue a:hover{
    color: black;

}


#clickBtn {
    width: 40px;
    height: 40px;
    /* background-color: #208f3c; */
    margin-right: 0px;
}


/* https://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers */

#clickBtn:hover #logoImg, .thumbScrollhover_effect{
    opacity: 0.1;

}
.subMenue a:hover, .thumbScrollhover_effect{
    color:rgb(148, 64, 153);
    font-size: 20px;
    font-weight:bold;
    margin-bottom: 6px;
}




/* ===================== */


.contentHeaderBox {
    margin: auto;
    margin-top: 20px;
    width: 100%;
    height: 40px;
    /* background-color: rgb(226, 43, 43); */
    margin-bottom: 20px;
}
.contentBox {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin: auto;
    width: 100%;
    min-height: 720px;

}

.imageBox{
    width: 30%;
    min-height: auto;

    background-image: url(../img/gelaguetza.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.textBox{
    width: 30%;
    min-height: auto;
    font-size: 18px;

    
}
.imageLink{
    z-index: 100;
    position: absolute;
    
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
/* =========== AIRPORTS===*/


/* =========== AIRPORTS===*/å




.contentBox .map .imageLink:hover + .imageBox {
  /* Styles to apply when hovering over imageLink */
  border-color: rgb(245, 5, 113);
  background-color: lightblue;
}
.itsMe {
    height: auto; 
    width: 30%;

    background-image: url(../img/itsMe.png);
    background-repeat: no-repeat;
    background-size: contain;
}
/* impressum Kontakt*/
.impressumText{
    line-height: 100%;
}
.impressumText_field{

    margin-top: 30px;;
}

.footer{
    margin: auto;
    min-height: 30px;
    width: 150px;
    margin-right: 0px;
    margin-top: -20px;
    text-align: center;
    font-size: 20px;
    background-color: rgb(239, 170, 145);


}