html, body {
    padding: 0px;
    margin: 0px;
    
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight:300;
    font-style: normal;
    /* font-variation-settings: "wdth" 100; */
    scroll-behavior: smooth;
}

.whitelogo130-gallery{
    /* margin-top: -42px; */
    width:90%;
    max-width: 372px;
}

.linksolid{
    color: #16325B;
    text-decoration: none;
}

a.linksolid:hover{
    color: #16325B;
    text-decoration: none;
}

.linksolid1{
    color: #16325B;
    text-decoration: underline;
}

a.linksolid1:hover{
    color: #16325B;
    text-decoration: none;
}

.backgal{
    width:100%;
margin: 0 auto;
background: url("../images/backgal.jpg");
background-repeat: no-repeat;
background-size: 100%;
padding-bottom: 66px;
background-position: center bottom;

}

.karavaki {
    position: absolute;
    right: 0.47vw;
    max-width: 330px;
    width: 13vw;
  }

.roloiblue{
    position: absolute;
    left: 1.97vw;
    max-width: 230px;
    width: 12vw;
    top:120px
}

.gallerypage{
    background-color: #16325B; 
}


.txtgal{
    margin: 0 auto;
    text-align: center;
    width: 88%;
    max-width: 820px;
    color: #ffffff;
    font-size: 16px;
}

.maingallerytop{
    padding-top: 96px;
    background-color: #16325B;
    margin: 0 auto;
    width: 100%;
    /* min-height: 122px; */
    text-align: center;
    padding-bottom: 16px;

}

.intro-section1{
    font-size: 1vw;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    /* display: none; */
}

.intro-section{
    font-size: 1vw;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
}

.menubutton{
    cursor: pointer;
    padding-left: 37px;
}

.main-section{
    display: none;
    background-color: #e9e9e9;
    min-height: 100vh;
}
.img-logo{
    width: 48px;
}
.blutmobile{
    display: inline-block;
    background: #16325B 0% 0% no-repeat padding-box;
    text-decoration: none;
    font-weight: 400;
border-radius: 19px;
font-size: 18px; color: #ffffff; 
padding: 8px 22px 8px 22px;
margin-right: 4px;
cursor: pointer;
}
a.blutmobile:hover{
    display: inline-block;
    background: #16325B 0% 0% no-repeat padding-box;
    text-decoration: none;
    font-weight: 400;
border-radius: 19px;
font-size: 18px; color: #ffffff; 
padding: 8px 22px 8px 22px;
margin-right: 4px;
cursor: pointer;
}

.blut{
    display: inline-block;
    background: #16325B 0% 0% no-repeat padding-box;
    text-decoration: none;
    font-weight: 400;
border-radius: 19px;
font-size: 18px; color: #ffffff; 
padding: 8px 22px 8px 22px;
margin-right: 4px;
cursor: pointer;
}
a.blut:hover{
    display: inline-block;
    background: #16325B 0% 0% no-repeat padding-box;
    text-decoration: none;
    font-weight: 400;
border-radius: 19px;
font-size: 18px; color: #ffffff; 
padding: 8px 22px 8px 22px;
margin-right: 4px;

cursor: pointer;
}
.fbb{display: flex; justify-content: flex-end;
    padding-right: 33px;
}

.menucont{
    z-index: 44;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    /* justify-content:center; */
    align-items: center;
    width: 100%;
    background-color: #ffffff;
    height: 76px;
    min-height: 76px;
    justify-content: space-between;
}
.socimg{
    /* padding-top: 33px; */
    max-width: 34px;
    padding: 4px 0px 0px 0px;
}

.socimginsta{
    /* padding-top: 33px; */
    max-width: 36px;
}
.menuicon{

    padding-left: 16px;
    flex: 1;
}
.logomenu{
    flex:0;
    text-align: center;
}
.socials{
    text-align: right;
    padding-right: 16px;
    align-items: center; 
    flex: 1;
    align-self: center;
}

.mainer1{
    display: flex;
    justify-content:center;
    align-items: center;
    padding-top: 0px;
    width: 100%;
    text-align: center;
    background: url("../images/back-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100dvh;
}

.mainer1in{
    width: 80%;
    padding-top: 33px;
    text-align: center;
    background: url("../images/layer1.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 80dvh;
    padding-left: 12px;
    padding-right: 12px;
}

.f1{
    font-size: max(1.95em, 22px) ;
    line-height: max(1.22em, 22px) ;
    font-weight: 400;
    color: #16325B;
}


.f2{
    padding-left:20px ;
    padding-right:20px ;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    color: #16325B;
    padding-top: 12px;
}

.form1{
    padding-top: 34px;
    display: flex;
    justify-content:center;
    align-items: center;
    gap:10px;
    flex-wrap: wrap;
}
.f-1-block, .f-2-block, .f-3-block{
/* flex-grow: 1; */

}
.f-4-block{
    /* flex-grow: 1; */
   
    /* width:100% */
    flex-basis: 100%;
    }

    .extra1{
padding-top: 17px;
    }
    .f-5-block {

        flex-basis: 100%;   
    }   


.buton1{
    background: #16325B 0% 0% no-repeat padding-box;
    text-decoration: none;
    font-weight: 400;
border-radius: 19px;
font-size: 18px; color: #ffffff; 
padding: 8px 22px 8px 22px !important;
width:134px;
margin: auto;
cursor: pointer;
border-width:0px ;
}

.buton2{
    background: #ffffff 0% 0% no-repeat padding-box;
    text-decoration: none;
    font-weight: 400;
border-radius: 19px;
font-size: 18px; color: #16325B; 
padding: 8px 22px 8px 22px !important;
width:134px;
margin: auto;
cursor: pointer;
border-width:0px ;
margin-top: 33px;
}

a.buton2:hover{
    background: #ffffff 0% 0% no-repeat padding-box;
    text-decoration: none;
    font-weight: 400;
border-radius: 19px;
font-size: 18px; color: #16325B; 
padding: 8px 22px 8px 22px !important;
width:134px;
margin: auto;
cursor: pointer;
border-width:0px ;
margin-top: 33px;
}




#form-date{
    font-size: max(1.5em, 14px) ;
}
#form-month{
    font-size: max(1.5em, 14px) ;
}
#form-year{

    font-size: max(1.5em, 14px) ;
}
#form-countries{
    /* font-size: 22px !important; */
    font-size: max(1.5em, 14px) ;
}
.logo1{
    width: 100%;
    max-width: 430px;
}



.face1{
    display: flex;

    /* min-height: 70vh; */
    color: #ffffff;
    padding-top: 75px;
}
.face11{
    flex: 1;
    /* background-color: #818181; */
    background-image: url("../images/backmap.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.face12{
    background-color: #16325B;
    flex: 1;
    text-align: center;
}
.face13{
    flex: 2;
    text-align: center;
}
.left-map{
    padding-top: 34px;
    width: 70%;
    /* margin: 0 auto; */

}
.whitelogo130{
    margin-top: 42px;
    width:90%;
    max-width: 402px;
}
.whitelogo130-mobile{
    margin-top: 29px;
    width:90%;
    max-width: 402px;
   display: none;
    
}
.wboxer{
    margin: 0 auto;
    width: 88%; padding: 14px;
    color: #ffffff;
    /* font-size: 16px; */
}
.potirakia{
    max-width: 77px;

}
.potirakia-mobile{
display:none;
}
.agyra{
    margin:0 auto; max-width: 151px; display: block; margin-top: -94px;
}
.face2{

    margin: 0 auto; width:100%; background-image: url('../images/group1.jpg'); background-repeat: no-repeat;
background-size: cover; margin-top: -95px; 
padding-top: 91px;
padding-bottom: 91px;
display: flex;
align-items: center;
min-height: 83vh;
}
.face21{
flex: 1;
text-align: center;
padding: 18px;

}

.face22{
    flex: 1;
    padding: 33px;
    align-items: center;
}
.bottlesofouzo{
    max-width: 483px;
    width: 100%;
}
.face22big{
    padding-top: 16px;
    font-size: 33px;
    font-weight:700;
    color: #ffffff;
}
.face22txt{
    padding-top: 28px;
    font-size: 16px;
width: 90%;
max-width: 555px;
    color: #ffffff; 
}

.face3{

    margin: 0 auto; width:100%; background-image: url('../images/oldpaper.png'); background-repeat: no-repeat;
background-size: cover; margin-top: -37px; 
padding-top: 91px;
padding-bottom: 91px;
display: flex;
align-items: center;
min-height: 55vh;
}
.face31{
    flex: 1;
    /* text-align: center; */
    color: #16325B;
    padding: 18px;
    /* max-width: 444px; */
    align-items: center;
    padding-left: 47px;
}
.face32{
    flex: 1;
    text-align: right;
    align-items: center;
    padding: 18px;
    padding-right: 52px;
}

.face31big{
    font-size: 30px;
    font-weight: 600;
    line-height: 34px;
}
.mapform{
    width: 90%;
    max-width: 645px;
}
.roloi{
    position: absolute; right:0.47vw;  max-width: 400px ; 
    width: 20vw
}
.hashtag{
    position: absolute; right:4vw; margin-top:-53px; max-width: 308px ; width: 32vw
}

.formline  {
    font-size: 16px;
    border-width: 0px;
    background-color: transparent;
    border-bottom-color: #16325B;
    border-bottom-width: 2px;
    border-radius:0;
    color: #16325B;
    padding: 0px;
    outline: none !important;
    text-align: left;
}

.formline:focus {
    font-size: 16px;
    border-width: 0px;
    padding: 0px;
    background-color: transparent;
    border-bottom-color: #16325B;
    border-bottom-width: 2px;
    border-radius:0;
    color: #16325B;
    outline: none !important;
    text-align: left;
}
.addepi{
    /* background-color: #ffffff; padding: 4px; */
}
#contestForm{
    font-size: 16px;
}


input:focus {
    /* outline:none !important;  */
    outline:0px !important; 
    box-shadow: none !important;
}

.face4{
margin: 0 auto; width:100%;  margin-top: -27px; 
background-color: #16325B;
display: flex;
align-items: center;
/* min-height: 50vh; */
color: #ffffff;
background-size:21%;
background-image: url('../images/gonia.png'); background-repeat: no-repeat;
background-position: right bottom ;
}

.face41{
    flex: 2;
    /* min-height: 50vh; */
    height: 50vh;
}
.face42{
    /* height: 50vh; */
    flex: 1;
    text-align: left;
    padding: 22px;
    padding-left: 50px;
   
}

.face41in{
    display: flex;
    width: 100%;
    height: 100%;
}

  
  .boxe1:hover {
    flex: 2;
  }
  .boxe2:hover {
    flex: 2;
  }

  .boxe3:hover {
    flex: 2;
  }



.boxe1{
    transition: flex 1s ease-out 100ms;
    flex: 1;
    height: 100%;
    width: 100%;
    background-image: url('../images/footer1.jpg?id=2'); background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.boxe2{
    transition: flex 1s ease-out 100ms;
    flex: 1;
    background-image: url('../images/footer2.jpg'); background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    height: 100%;
    width: 100%;
}
.boxe3{
    transition: flex 1s ease-out 100ms;
    flex: 1;
    background-image: url('../images/footer3.jpg'); background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

.footerh{
    font-size: 33px;
    font-weight: 700;
    padding-left: 9px;
}
.footert{
    font-size: 16px;
    padding-left: 9px;
}

.containergreyfooter{
    font-size: 14px;
    display: flex;
    background-color: #D1D1D1;
    min-height: 44px;
    align-content: space-between;
    padding-left: 53px;
}

.ffin1{
  padding: 12px;
    flex: 1;
}
.ffin2{
    flex: 1;  padding: 12px; text-align: right;
}

 /* The Overlay (background) */


#myNav{
    display: none;
}

 .overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 55; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(22,50,91); /* Black fallback color */
    background-color: rgba(22,50,91, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }
  
  /* The navigation links inside the overlay */
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #ffffff;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
  }
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 56px;
  }

  /* menu action to form hide */
  @media only screen and (max-width: 843px) {

    .blut{
     display: none;
    }
} 

.roloi2{
    display: none;

}

.face5{
    display: none;
}

.wboxer1{
    padding-top: 40px;
    width:100%

}


.wboxer1mobile{
    width:100%;
display:none;
}

@media only screen and (max-width: 640px) {


    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 26px;
        color: #ffffff;
        display: block; /* Display block instead of inline */
        transition: 0.3s; /* Transition effects on hover (color) */
      }

    .karavaki {
        position: absolute;
        right: 0.47vw;
        max-width: 330px;
        width: 13vw;
        display: none;
      }
    
    .roloiblue{
        display: none;
        position: absolute;
        left: 1.97vw;
        max-width: 230px;
        width: 12vw;
        top:120px
    }

    .mainer1in{
        width: 92%;
        padding-top: 30px;
        text-align: center;
        background: url("../images/layer1.png");
        background-repeat: no-repeat;
        background-size: cover;
        height: 80dvh;
        padding-left: 12px;
        padding-right: 12px;
    }

    .fbb{display: flex; justify-content: flex-end;
        padding-right: 0px;
    }

    .menuicon{
        padding-left: 0px;
        flex: 1;
    }

    .menubutton{
        cursor: pointer;
        padding-left: 17px;
    }

    .face31{
        flex: 1;
        /* text-align: center; */
        color: #16325B;
        padding: 18px;
        /* max-width: 444px; */
        align-items: center;
        padding-left: 18px;
    }

    .face31big{
        font-size: 22px;
        font-weight: 600;
        line-height: 22px;
    }

    .face22txt{
        padding-top: 20px;
        font-size: 16px;
        line-height: 16px;
    width: 100%;
    max-width: 555px;
        color: #ffffff; 
    }

    .face22big{
        padding-top: 16px;
        font-size: 22px;
        line-height:23px ;
        font-weight:700;
        color: #ffffff;
    }

    .bottlesofouzo{
        max-width: 463px;
        width: 88%;
    }

    
    .face2{
        margin: 0 auto; width:100%; background-image: url('../images/group1.jpg'); background-repeat: no-repeat;
    background-size: cover; margin-top: -90px; 
    padding-top: 91px;
    padding-bottom: 91px;
    display: flex;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    }

    .face21{
order:2;
padding-top: 0px;
    }

    .face22{
        order:1;
        padding: 17px;
        padding-bottom: 0px;
        /* flex: 1 0 100%; */
    }

  

    .face3{
        margin: 0 auto; width:100%; background-image: url('../images/oldpaper.png'); background-repeat: no-repeat;
    background-size: cover; margin-top: -29px; 
    padding-top: 91px;
    padding-bottom: 91px;
    display: flex;
    align-items: center;
    min-height: 55vh;
    flex-direction: column;
    }

    .potirakia-mobile{
        display:block;
        margin-top: -12px;
        width: 100%;
        }
        .potirakia{
            display:none;
            }

    .agyra{
        margin:0 auto; max-width: 101px; display: block; margin-top: -64px;
    }


    .face11{
     display: none;
    } 

    .whitelogo130{
        margin-top: 42px;
        width:90%;
        max-width: 402px;
        display: none;
    }
    .whitelogo130-mobile{
        margin-top: 29px;
        width:90%;
        max-width: 402px;
       display: inline-block;
        
    }

    .wboxer{
        margin: 0 auto;
        width: 88%; padding: 14px;
        color: #16325B;
        /* font-weight: bold; */
        font-size: 20px;
        line-height: 20px;
    }

    .wboxer1mobile{
        width:100%;
    display:block;
    font-size: 18px;
    line-height: 19px;
    font-weight: 400;
    }

    .wboxer1{
        width:100%;
    display:none;
    }


    .face12{
        background-color:transparent;
        flex: 1;
        text-align: center;
        background-image: url('../images/map-back1.png'); background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }


    .face4{
        margin: 0 auto; width:100%;  margin-top: -27px; 
        background-color: #16325B;
        display: flex;
        align-items: center;
        /* min-height: 50vh; */
        color: #ffffff;
        background-size:28%;
        background-image: url('../images/gonia.png'); background-repeat: no-repeat;
        background-position: right bottom ;
        flex-direction: column;
        min-height: 245px;
        }

    .face41{
      display: none;
        flex: 1;
        /* min-height: 50vh; */
        /* height: 50vh; */
        order: 2;
    }


.face42{
    /* height: 50vh; */
    flex: 1;
    text-align: left;
    padding: 12px;
    padding-bottom: 29px;
    padding-left: 12px;
    order: 1;

   
}

.footerh{
    font-size: 22px;
    font-weight: 700;
    padding-left: 9px;
}

    .roloi{
        position: absolute; right:0.47vw;  max-width: 400px ; 
        width: 20vw;
        display: none;
    }
    .roloi2{
        position: absolute; right:0.47vw;  max-width: 400px ;
        margin-top: 32px; 
        width: 49vw;
        display: block;
    }

    .face5{
      
        display: flex;
        align-items: center;
        margin: 0 auto;
        width: 100%;
        height: 55vw;

    }

    /* .face5in{
        display: flex;
        width: 100%;
        height: 100%;
    } */

} 


@media only screen and (min-width: 2200px) {
    .face1{
        display: flex;
    
        /* min-height: 70vh; */
        color: #ffffff;
        padding-top: 75px;
        align-items: center;
        background-color: #16325B;
    }

    .whitelogo130{

        width:90%;
        max-width: 402px;
    }

    .f1{

        font-size: 33px ;
        /* line-height: max(1.9em, 22px) ; */
        font-weight: 400;
        color: #16325B;
    }

    #form-date{
        font-size: max(1.1em, 14px) ;
    }
    #form-month{
        font-size: max(1.1em, 14px) ;
    }
    #form-year{
    
        font-size: max(1.1em, 14px) ;
    }
    #form-countries{
        /* font-size: 22px !important; */
        font-size: max(1.1em, 14px) ;
    }
 
   

 
 } 


@media only screen and (max-width: 500px) {
   

   .face11{
    display: none;
   } 

    .logo1{
        width: 77%;
        max-width: 430px;
    }

} 

/* case of sml height screen */
    @media (max-height: 786px) and (min-width: 500px) {

        .logo1{
            width: 25dvh;
            
        }
        .f1{

            font-size: max(1.9em, 22px) ;
            /* line-height: max(1.9em, 22px) ; */
            font-weight: 400;
            color: #16325B;
        }

        #form-date{
            font-size: max(1.1em, 14px) ;
        }
        #form-month{
            font-size: max(1.1em, 14px) ;
        }
        #form-year{
        
            font-size: max(1.1em, 14px) ;
        }
        #form-countries{
            /* font-size: 22px !important; */
            font-size: max(1.1em, 14px) ;
        }
     
  
    
}

  
  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }