@font-face {font-family: 'Open Sans', arial;}

/**{
    font-family: 'Open Sans', arial;
    padding:0;
    margin:0;
}
*/
.bb{
    /*
    border: 1px solid blue;
    box-sizing: border-box;
    */
}

body{
    padding:0;
}

#langBox{
	position:fixed;
	top:2em;
	right:2em;

}

.logoImg{
    position: relative;
    width:8em;
    left:-8em;
}
#sideMenu{
    text-align: right;
    position: absolute;
    left: -17em;
    padding-right: 1em;
    /*border-right: 2px solid black;*/
    
}
.mainBox{
    position:relative;
    font-size:1.2em;
    padding-top: 8em;
    margin: 0 auto;
    margin-bottom: 3em;
}

.blackLink{
    color:black;
    text-decoration: none;
    font-size: 1.3em;
}

.coverLink{
    text-decoration:none;
    color:#03393a; /*#03393a  #002c38*/
}

.menuFont{
    font-weight:bold;
    font-family: 'Open Sans', arial;
}

.normalFont{
    font-weight:normal;
    font-family: 'Open Sans', arial;
}
.halfWide{
    position:relative;
    float:left;
    text-align:right;
}
.mapDrawn{
    position:relative;
    float:right;
}

#mapContainer .mapDrawn{
    cursor: pointer;
}

iframe{
    width:100%;
    height:100%;
    margin-bottom:2em;
}

.gallerypic{
    position: relative;
    float:left;
    width: 28%;
    margin:1em;
}
/*.gallerypic>img{
    width:100%;
    transition: transform .2s;
    z-index:1;
}
.gallerypic>img:hover{
  transform: scale(3);
  z-index:99;
}*/
img{
    width:100%;
}
.gallerypic{
    width:28%;
    transition: transform .2s;
    z-index:1;
}
.gallerypic:hover{
  transform: scale(3);
  z-index:99;
}

#footer{
    position: fixed;
    bottom:0;
    width:99%;
    text-align:center;
    background-color:white;
}

.top-to-bottom {
    position:absolute;
    height:20em;
    left:-3.5em;
    border-width: 1px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}
#bigMap{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color:black;
    background-image:url("path3big.png");
    background-repeat: no-repeat;
     background-size: contain;
    z-index:99;
}

@media (min-device-width: 2560px) { /*over 1920 */
    .mainBox{font-size:1.2em;}
}
@media (max-device-width: 2560px) { /*1920*/
    .mainBox{font-size:1.2em;}
}
@media (max-device-width: 1919px) { /*1680*/
    .mainBox{font-size:1.2em;}
}
@media (max-device-width: 1679px) { /*1600*/
    .mainBox{font-size:1.2em;}
}
@media (max-device-width: 1599px) { /*1440*/
    .mainBox{font-size:1em;}
}
@media (max-device-width: 1439px) { /*1360,1366*/
    .mainBox{font-size:1em;}
}
@media (max-device-width: 1359px) { /*1280*/
    .mainBox{font-size:0.9em;}
}
@media (max-device-width: 1151px) { /*1024*/
    .mainBox{font-size:0.9em;}
}
@media (max-device-width: 1023px) { /*800*/
    .mainBox{
        font-size:1em;
        padding-top: 4em;
        padding-left:5vw;
        padding-right:5vw;
    }
    .logoImg{
        position: relative;
        width:8em;
        left:0;
        margin:0 0 2em 0;
    }
    
    #sideMenu{display: none;}
    .top-to-bottom{display: none;}
    
    .gallerypic{
        position: relative;
        float:left;
        width: 90vw;
        padding:0 0 1em 0;
        
    }
    .gallerypic>img{
        position: relative;
        float:left;
        width:90vw;
        transition:none;
    }
    .gallerypic>img:hover {
        transform: none;
        z-index:auto;
    }
    #footer{display: none;}
}