/*
Theme Name:     aperitivocontest 2.0
Description:    Aperitivo Project
Author:         toolbox

*/
:root {
  --orange-color: #ffffff;  
  --main-color: #ffffff;  
  --border-color: #ffffff;
  --form-border-color: #ffffff;  
  --main-background-color: #000000;
  
  --mobile-nav-color: #ffffff;
  --mobile-nav-bacground-color: #f2a71e;
  
  --nav-height: 5vh;  
  --nav-margin-bottom : 0;
  
  --full-page-height: calc(100vh - 40vh - 4vh - var(--nav-margin-bottom));
  
  --button-color: #ffffff;
  --button-background-color: #000000;  
  
  --checkbox-border-color: #ffffff;
  --checkbox-fill-color: #ffffff;
  
  --popup-background-color: #000000;
  --popup-color: #ffffff;
}

@media only screen and (max-width:1024px) and (orientation: landscape) {    
    :root {
      --nav-height: 10vh;
      --nav-margin-bottom : 0;
      --full-page-height: calc(100vh - 40vh - var(--nav-height) - var(--nav-margin-bottom));
    }    
}

html{
    font-size: 16px;    
}

body{ 
    background-color: var(--main-background-color);
    color: var(--main-color); 
    font-family: 'AvertaPE', sans-serif;
    font-size: 1rem;       
    width: 100%; 
    top: 0px;
    height:100vh;  
    position: relative;
}

a{
    text-decoration: none;
    color: #ffffff;    
}

*:focus {
    outline: none;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
/*  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;*/
    background-color: #000000;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--border-color); 
/*  border-radius: 10px;*/
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--border-color); 
}

img{
    pointer-events: none
}

/*
* Συνηθως Διαφορετικα
*/

.background{
    position: absolute;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    top: 0;
    left: 0;
}

.isxis{
    width: 50%;
    margin: 4% auto 0 auto;
}

.politiki, .bottom-line .oroi{
    display: block;
    width: 40%;
    text-align: center;
    font-size: 0.8rem;
}

.bottom-line .oroi{
    margin-left: 10%;
}

.politiki{
    margin-right: 10%;
}

.bottom-line a.active{
    font-weight: bold;
    color: var(--orange-color);
}

.form-field.more-top-gap{
    margin-top: 2rem;
}

.bottom-line{
    position: absolute;
    width: 45%;
    height: 7vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.left-area{
    display: inline-block;
    width: 48%;
    height: 100vh;    
    position: relative;
    float: left;
    margin-right: 10%;
}

.top-image{
    margin-top: 7vh;
    margin-left: 5vw;
    width: auto;
    height: 80vh;
}

.simplepage.special-width{
    width: 85%;
    margin: 0 15% 0 0;
}

.title{
    width: 76%;
    max-width: 574px;
    margin: 7% auto;
}

.drone{
    display: none;
    position: absolute;
    width: 7vw;
    top: 27vh;
    left: 50%;
    z-index: 5;
}

.campari{
    display: none;    
    position: absolute;
    width: 6vw;
    top: 72vh;
    left: 53%;
    z-index: 5;
}

.petseta{
    display: none;    
    position: absolute;
    width: 9vw;
    top: 19vh;
    right: 2px;
    z-index: 5;
}

.hat{
    display: none;    
    position: absolute;
    width: 7vw;
    top: 71vh;
    right: 2px;
    z-index: 5;
}

.show-effecs .hat,.show-effecs .petseta, .show-effecs .campari, .show-effecs .drone{
    display: block;
}

/*
* Συνηθως Διαφορετικα
*/

.main-area{
    display: inline-block;    
    width: 42%;
    height: 100vh;
    position: relative;
    float: left;    
}

.main-pc{
    display: block;
    width: 100%;
    float: left;
    height: var(--nav-height);
    margin-bottom: var(--nav-margin-bottom);
}

.main-pc a{
    display: inline-block;
    width: calc(100%/3);
    float: left;
    text-align: center;
    padding-top: 2.5vh;
    height: calc(var(--nav-height) - 2.5vh - var(--nav-margin-bottom));    
}

.main-pc a.active span{
    font-weight: bold;
    color: var(--orange-color);
}

.content-area{
    display: block;
    float: left;
    width: 100%;
    height: calc(100vh - var(--nav-height) - var(--nav-margin-bottom));
}

.content-area .main-logo{
    width: 50%;
    margin: 0 25%;
    float: left;
}

.simplepage{
    display: none;
    height: var(--full-page-height);  
    float: left;
    width: 100%;
}

.simplepage.active{
    display: block;
}

.simplepage h2{
    text-align: center;
    font-size: 1rem;
    padding-top: 6rem;
    padding-bottom: 2rem;
    color: var(--orange-color);
}

.show-form{
    display: block;
    width: 100%;
    margin: 4% 0 0 0;
}

.scroll{
    width: 80%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 auto;
    padding-right: 2%;
    height: 40vh;    
    text-align: justify;
}

.endoftime, .formresult{
    text-align: center;
}

.endoftime p, .formresult p{
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding-bottom: 1%;
}

.endoftime{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: 50vh;    
}

.return-action a{
    padding-bottom: 2%;
    font-weight: bold;
}

#theresult .simple-content{
    text-align: center;
}

.simple-content p{
    padding-bottom: 0.8rem;    
}

.simple-content strong{
    font-weight: bold;    
}

.simple-content a{
    text-decoration: underline;
}

.full-image a{
    display: block;
}

.full-image img{
    width: 100%; height: auto;    
}

.full-image-height img{
    width: auto; height: 100%;    
}

.mobile{
    display: none !important;
}

.arrow-up{
    width: 0; 
    height: 0; 
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;

    border-bottom: 1rem solid var(--orange-color);
    margin: 1rem auto 0.5rem auto;
    
}

.arrow-down{
    width: 0; 
    height: 0; 
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;

    border-top: 1rem solid var(--orange-color);

    margin: 0 auto;  
    
}

.arrow-up:hover, .arrow-down:hover{
    cursor: pointer;
}

.resultarea{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: 50vh;    
}

.participation-ok{
    width: 55%;
}

.full-image.pc img.nikites-banner, .full-image.pc img.oroi-banner{
    display: none;
}

.area-theresult .full-image.pc img.nikites-banner, .show-nikites .full-image.pc img.nikites-banner{
    display: block;
}

.area-oroi .full-image.pc img.oroi-banner{
    display: block;
}    

.form-elements{
    width: 80%;
    margin: 0 auto;
}

/*
* Form Area
*/

.form-field{
    display: block;
    width: 100%;
    font-size: 1rem;
    margin: 0 auto 1rem auto;
    padding-top: 0;
    padding-bottom: 0.1rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--form-border-color);
    background-color: transparent;
    color: var(--main-color);
    border-radius: 0;
}

input::placeholder {
  color: var(--main-color);
}

.form-control{
    border: 0;    
    width: 90%;
    margin: 0 0 1rem 10%;
    
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;  
    padding-top: 1rem;
}

.form-control input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;
    
    font: inherit;
    color: transparent;
    width: 1em;
    height: 1em;
    border: 0.15em solid var(--checkbox-border-color);
    border-radius: 0.15em;
    transform: translateY(-0.075em);    
    
    display: grid;
    place-content: center;    
}

.form-control .checkbox-text a{
    padding-bottom: 1px;
    border-bottom: 1px solid var(--main-color);
}

input[type="checkbox"]::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--checkbox-fill-color);
  
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);  
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

#simetoxi:hover{
    cursor: pointer;
}

#simetoxi{
    border: 0;
    display: block;
    background-color: transparent;
    color: transparent;
    width: 210px;
    height: 60px;
    margin: 2rem auto 2rem auto;
    font-size: 1.6rem;    
    padding-right: 0;
    padding-left: 0;    
    position: relative;
}

/*
* Form Area
*/

.jconfirm .jconfirm-holder{
    width: 50%;
    margin: 0 auto;
}
.jconfirm-box{text-align: center;}
.jconfirm.jconfirm-light .jconfirm-box{background-color: var(--popup-background-color) !important; border: 1px solid color: var(--popup-color);}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content, .jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll{ min-height: 20px;}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{color: var(--popup-color) !important; background-color: transparent !important;}
.jconfirm-title-c{font-family: 'Source Sans Pro', sans-serif; line-height: 1.5; font-weight: 400; color: var(--popup-color);}
.jconfirm-content{font-family: 'Source Sans Pro', sans-serif; font-weight: 400; color: var(--popup-color);}

/*
 * Fancy Box Area
*/

.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content{
    width  : 70%!important;
    height : 70%!important;
    max-width  : 70%!important;
    max-height : 70%!important;
    margin: 0;
}

.fancybox__iframe html,
.fancybox__iframe body{
    background-color: #ffffff;    
}

body.simple{ 
    background-color: #ffffff;
    color: #000000; 
    font-family: 'Georgia', sans-serif;
    font-size: 1.2rem;       
    width: 96%; 
    top: 0px;
    height: auto;
    padding: 2%;
}

.simple p{
    padding-bottom: 1rem;
    text-align: justify;
}

.simple strong{
    font-weight: bold;
}

.simple a{
    font-weight: bold;    
    color: #000000;     
}

/*
 * Fancy Box Area
*/

/* Mobile Menu */
nav.navigation{
        display: none;
	position:absolute;
	height:50px;
	background-color:transparent;
	z-index:2;
        top: 0;
        width: 100%;
}
nav.navigation.active{
    background-color: transparent;
}

ul.nav-menu, ul.nav-menu li, ul.nav-menu li a{
	float:left;
}
ul.nav-menu{
	padding-left:10px;
}
ul.nav-menu li a{
	height:50px;
	line-height:50px;
	padding:0 10px;
	color: var(--mobile-nav-color);
	text-decoration:none;
}

.nav-toggle{
	position:absolute;
	top:20px;
	right:20px;
	width:50px;
	height:50px;
	background-color:transparent;
	cursor:pointer;
}

.nav-toggle.active span.icon-bar{background-color: var(--orange-color);}

span.icon-bar{
	position:absolute;
	right:12px;
	display:block;
	width:26px;
	height:3px;
	background-color:var(--orange-color);
}
.icon-bar:nth-child(1){
  top:17px;
}
.icon-bar:nth-child(2){
  top:24px;
}
.icon-bar:nth-child(3){
  top:31px;
}
.nav-overlay{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
	z-index:1;
	opacity:0;
	visibility:hidden;
}
.nav-overlay.active{
	opacity:1;
	visibility:visible;
}

nav.navigation{
	z-index:11;
}
.nav-overlay{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
	z-index:10;
	opacity:0;
	visibility:hidden;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.nav-overlay.active{
	opacity:1;
	visibility:visible;
}

@media screen and (max-width:926px){           
    
        span.icon-bar{
            -webkit-transition-duration: 0.3s;
            -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
        }
    
	ul.nav-menu{
		position:absolute;
                top: 40px;
                right: 70px;
                width: 60vw;
		height:0;
		padding:0;
		overflow:hidden;
	}
	ul.nav-menu.active{
		height:auto;
	}
	ul.nav-menu li{
		width:100%;
	}
	ul.nav-menu li a{
		width:calc(100% - 1rem);
                height: 60px;
                line-height: 25px;                
		padding:1rem 0 0 1rem;
		text-align: left;
		background-color: var(--mobile-nav-bacground-color);
	}

        ul.nav-menu li a.active{
            font-weight: bold;
        }
        
        ul.nav-menu li a.nikites{
                height: 30px;            
        }
        
	.nav-toggle{
		display:block;
	}
        
        .nav-toggle.active .icon-bar:nth-child(1){
            top:24px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .nav-toggle.active .icon-bar:nth-child(2){
                width:0;
        }
        .nav-toggle.active .icon-bar:nth-child(3){
                top:24px;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                transform: rotate(-45deg);
        }
}

/*
 * Mobile Portrait
*/
@media (max-width: 926px) {
    .pc{display: none !important;}
    .mobile{display: block !important;}    
 
    .background.mobile{
        min-height: 100vh;
    }
    
    body{
        height: auto;
    }
    
    ul.nav-menu li a.more-height{
        height: 100px;
        line-height: 1.2rem;
    }
    
    .jconfirm .jconfirm-holder{
        width: 70%;
    }    
    
    .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content{
        width  : 90%!important;
        height : 90%!important;
        max-width  : 90%!important;
        max-height : 90%!important;
    }
    
    .simplepage{
        position: relative;
    }
    
    .top-area{
        position: absolute;
        top: 30px;
        left: 5vw;
        z-index: 1;
    }
    
    .header-image{
        display: block;
        width: 60vw;        
    }
    
    .main-area{
        width: 90vw;
        margin-top: 30%;
        margin-left: 10vw;
        margin-right: 0%;
        margin-bottom: 0;
        height: auto;
        float: left;
        z-index: 3;
    }    
    
    .top-home-slide{
        width: 80vw;
    }
    
    .top-slide{
        position: relative;
        top: -30px;
        width: 85vw;
    }    
    
    .content-area, .simplepage{
        height: auto;
    }
    
    .content-area .main-logo{
        width: 90%;
        margin: 0 5%;
    }
    
    .show-form{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        position: relative;
        top: -35px;
    }
    
    .title{
        width: 60%;
        margin-left: 15%;
        margin-right: 25%;
        margin-top: 0;
        position: relative;
        top: -20px;        
    }
    
    #form .title{
        margin-left: 18%;
        margin-right: 22%;        
    }
    
    .form-elements, .simple-content.scroll, .arrow-up, .arrow-down, .simplepage h2, .resultarea{
        position: relative;
        top: -50px;                
        padding-top: 20px;
    }
    
    #oroi .simple-content.scroll{
        margin-top: 50px;        
    }
    
    #politiki.simplepage h2{
        padding-top: 4rem;
    } 
    
    .form-elements p{
        text-align: center;
        font-size: 0.7rem;
    }
    
    .form-field{
        width: 90%;        
        margin-left: 2.5%;
    }
    
    .form-field#area{
        display: inline-block;
        float: left;        
        width: 50%;
        margin: 0 0 0.7rem 2.5%;
        
    }
    
    .form-field#zip{
        display: inline-block;
        float: left;        
        width: 35%;
        margin: 0 0 0.7rem 0;        
        
    }    
    
    .form-control.form-field{
        margin-left: 0;
        margin-right: 3%;
        width: 25%;
    }
    
    .form-control{
        display: block;
    }
    
    .form-control input[type="checkbox"]{
        width: 2em;
        height: 2em;
        
    }
    
    .checkbox-text{
        font-size: 0.6rem;
        line-height: 0.7rem;
    }
    
    input[type="checkbox"]::before{
        width: 1.8em;
        height: 1.8em;   
        box-shadow: inset 1.8em 1.8em var(--checkbox-fill-color);
    }
    
    .scroll{
        margin-bottom: 5%;
        
    }
    
    .endoftime, .formresult{
        height: auto;
        
    }

    .endoftime p, .formresult p{
        font-size: 1rem;
        line-height: 1.2rem;
        
    }
    
    .endoftime{
        height: 30vh;
        
    }
    
    .simple-content{
        font-size: 1.1rem;
        line-height: 1.3rem;
        
    }
    
    .simplepage.special-width{
        width: 100%;
        margin: 0;
        
    }
    
    .vertical-text {
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(-90deg);
        transform-origin: left top;
        white-space: nowrap;
        
    }

    .vertical-text p {
        margin: 0;
        padding: 3.5vw 0 0 0;
        font-size: 0.7rem;
        
    }    
    
    .full-image.mobile img.nikites-banner, .full-image.mobile img.oroi-banner{
        display: none;
        
    }
    
    .area-theresult .full-image.mobile img.nikites-banner, .show-nikites .full-image.mobile img.nikites-banner{
        display: block;
        
    }
    
    .area-oroi .full-image.mobile img.oroi-banner{
        display: block;
        
    }    

    #simetoxi{
        width: 40vw;
        height: auto;
        margin: 0;
        position: relative;
        top: -110px;
        left: 35%;        
        
    }
    
    .form-elements{
        width: 90%;
        margin: 0 0 0 5%;
    }
    
    .participation-ok{
        margin: 0 8% 0 0;
    }
    
}

/* 
 * Tablet Landscape 
 */
@media only screen and (min-width:927px) and (max-width:1024px) and (orientation: landscape) {
    
    .main-pc{
        display: flex;
        align-items: center;
        text-align: center;        
        
    }
    
    .main-pc a{
        line-height: 1.2rem;
        
    }
    
    .content-area .main-logo{
        width: 60%;
        margin: 0 20%;        
    }    
}