/*
Theme Name:     palmolivecontest11
Description:    Palmolive Project
Author:         toolbox

*/
:root {
  --main-color: #046334;  
  --border-color: #A9C340;
  --form-border-color: #046334;  
  --main-background-color: #ffffff;
  
  --mobile-nav-color: #016548;
  --mobile-nav-bacground-color: #ffffff;
  
  --nav-height: 5vh;  
  --nav-margin-bottom : 1vh;
  
  --full-page-height: calc(100vh - 27vh - var(--nav-margin-bottom));
  --full-page-home: 60vh;
  
  
  --button-color: #046334;
  --button-background-color: #ffffff;  
  
  --checkbox-border-color: #046334;
  --checkbox-fill-color: #046334;
  
  --popup-background-color: #ffffff;
  --popup-color: #046334;
}

@font-face {
	font-family: 'GothamGRBook';
        src: url('./fonts/GothamGRBook.otf') 
            format('truetype');  
}

@font-face {
	font-family: 'GothamGreek-Bold';
        src: url('./fonts/GothamGreek-Bold.otf') 
            format('truetype');  
        font-weight: bold;        
}

@font-face {
	font-family: 'GothamGRMedium';
        src: url('./fonts/GothamGRMedium.otf') 
            format('truetype');  
}

/* 
 * Tablet Landscape 
 */
@media only screen and (min-width:768px) and (max-width:1124px) and (orientation: landscape) {    
    :root {

      --nav-height: 3vh;  
      --nav-margin-bottom : 1vh;

      --full-page-height: calc(100vh - 35vh - var(--nav-margin-bottom));

    }
}

@media only screen and (min-width:768px) and (max-width:1124px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {    
    .main-pc{
        width: 50%;
        margin-left: 50%;
        
    }
}

@media only screen and (min-width:768px) and (max-width:1124px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {    
    :root {

      --nav-height: 3vh;  
      --nav-margin-bottom : 1vh;

      --full-page-height: calc(100vh - 15vh - var(--nav-margin-bottom));

    }
}

html{
    font-size: 16px;    
    
}

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

body *{
    font-family: 'GothamGRBook', sans-serif;    
}

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

.caligraphy{
/*    font-family: 'CFReklama';    */
}

*:focus {
    outline: none;
    
}

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

/* Track */
::-webkit-scrollbar-track {
/*  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;*/
  background: transparent; 
}

.simple::-webkit-scrollbar-track {
/*  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;*/
    background-color: #ffffff;
    
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--main-color); 
/*  border-radius: 10px;*/
}

.simple::-webkit-scrollbar-thumb {
  background: #000000; 
  
/*  border-radius: 10px;*/
}

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

.simple::-webkit-scrollbar-thumb:hover {
  background: #000000; 
  
}

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

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

.background.pc{
    height: 110vh;    
    top: -10vh;    
}

.isxis{
    color: #000;
    margin-top: 2%;
    width: 94%;
    text-align: center;
    margin-left: 2%;
}

.fix-middle{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: calc(100vh - var(--nav-height) - var(--nav-margin-bottom));
}

.bottom-area{
    position: absolute;
    bottom: 2vh;    
    width: 100%;
    text-align: center;
}

.bottom-area a#politiki{
    padding-left: 1vw;
}

.bottom-area a{
    font-size: 1rem;    
}

.isxis p{
    text-align: center;
    padding-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.3rem;
}

.bottom-area a{
    color: var(--main-color);
}

.strong{
    font-family: 'GothamGreek-Bold';    
    font-weight: bold;
}

#bottom-right-flowers{
    position: absolute;
    width: 50vw;
    z-index: 34;
    right: 4vw;
    bottom: -4px;
    
}

#bottom-right-flowers.new{
    width: 53vw;    
    bottom: 1vh;
    
}

.left-elemnts{
    top: 0;
    left: 0;
    position: absolute;    
    z-index: 20;
    width: auto;
    height: 100vh;
    left: -5vw;
}

.right-elemnts{
    top: 0;
    right: 0;    
    position: absolute;    
    z-index: 18;
    width: auto;
    height: 60vh;
}


.left-elemnts img, .right-elemnts img{
    width: auto;
    height: 100%;
}

.sklavenitis{
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 10vw;
    border: 0;
    padding: 0;
    overflow: hidden;
    z-index: 6;    
}

.sklavenitis img{
    position: relative;
    bottom: -3px;
}

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

.show-result{
    text-align: center;
    font-size: 1.5rem;
    display: none;
    color: #000000;
    font-family: 'GothamGreek-Bold';
}

.show-result.active{
    display: block;
    margin: 20vh auto;
    width: 20vw;
}

.nikites-logo{
    width: 10vw;
    margin: 0 auto;
}

.remove-field{
    display: none !important;
}

.mobile-special{
    display: none;
}

.area-theresult #theresult.active h2.caligraphy{
    font-size: 1.9rem;
    padding-top: 1rem;
}

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


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

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

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

    border-top: 1.4rem solid var(--main-color);

    margin: 0 auto;  
    
}

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

.hide-on-home, .nikites-logo{
    display: none!important;
}

.closing-submissions .hide-on-home{
    display: block!important;    
}

.submition-closed .hide-on-home, .nikites-logo.show-only-on-nikies{
    display: block!important;    
}

.main-area{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 100vh;
    position: relative;
    z-index: 30;
}

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

.main-pc a{
    font-family: 'GothamGRMedium';    
    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));    
    color: var(--main-color);
}

.main-pc a#a-theresult{
    width: 23%;
}

.main-pc a.active span{
    font-family: 'GothamGreek-Bold';        
    font-weight: bold;
}

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

.content-area .main-logo{
    width: 46%;
    margin: 10% 27% 0 27%;
    float: left;
}

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

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

.simplepage.active{
    display: block;
    
}

.simplepage h2{
    text-align: center;
    font-size: 1.2rem;
    font-family: 'GothamGreek-Bold';        
    font-weight: bold;
    padding-top: 3rem;    
    padding-bottom: 2rem;
    
}

.show-form{
    display: block;
    width: 23vw;
    margin: 0 auto 0 auto;
    
}

.scroll{
    width: 50%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 auto;
    padding-right: 2%;
    height: calc(var(--full-page-height) - 11% - 22vh);    
    text-align: justify;
    
}

.endoftime, .formresult{
    width: 80%;   
    margin: 11vh 10% 0 10%;    
    text-align: center;
    height: calc(var(--full-page-height) - 30vh);        
}

.endoftime p, .formresult p{
    font-size: 1.5rem;
    line-height: 1.7rem;
    padding-bottom: 1%;
    color: var(--main-color);    
}

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

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

.simple-content{
    color: #000000;
}

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

.simple-content strong{
    font-family: 'GothamGreek-Bold';        
    font-weight: bold;    
}

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

.full-image a{
    display: block;
}

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

.mobile{
    display: none !important;
}

/*
* Form Area
*/

.form-field{
    display: block;
    width: 50%;
    font-size: 1rem;
    margin: 0 auto 0.5rem auto;
    padding-top: 0;
    padding-bottom: 0.5rem;
    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;
}

.form-field a{
    color: var(--main-color);
}

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

.form-control{
    border: 0;    
    width: 60%;
    margin: 1rem 0 1rem 25%;
    
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;    
}

.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, .pseudo-button:hover{
    cursor: pointer;
    
}

#simetoxi, .pseudo-button{
    border: 0;
    display: block;
    background-color: var(--button-background-color);
    color: var(--button-color);
    width: 210px;
    height: 40px;
    margin: 1.5rem auto 1.5rem auto;
    font-size: 1.5rem;
    border-top: 6px solid #A9C340;
    border-bottom: 6px solid #A9C340;  
    font-family: 'GothamGreek-Bold';        
    font-weight: bold;
    
    overflow: hidden;
    padding-right: 30px;
    padding-left: 30px;    
    position: relative;
    
}

.pseudo-button{
    margin: 0.5rem auto 0 auto;
    height: auto;
    padding: 5px 10px;
    font-size: 1rem;    
    text-align: center;
}

/*
* 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%;
    overflow: auto;
    
}

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

.simple strong{
    font-family: 'GothamGreek-Bold';        
    font-weight: bold;
}

.simple a{
    font-family: 'GothamGreek-Bold';        
    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: 4%;
        right: 5%;
        width: 200px;
}
nav.navigation.active{
    background-color: #dc2790;
}

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:45px;
	line-height:20px;
	padding:0 10px;
	color: var(--mobile-nav-color);
	text-decoration:none;
}

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

.nav-toggle.active span.icon-bar{
    background-color: #ffffff;
    
}

span.icon-bar{
	position:absolute;
	right:12px;
	display:block;
	width:26px;
	height:2px;
	background-color: var(--main-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:61;
}
.nav-overlay{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
	z-index:60;
	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:50px;
		width:100%;
		height:0;
		padding:0;
		overflow:hidden;
                
	}
	ul.nav-menu.active{
		height:auto;
                
	}
	ul.nav-menu li{
		width:200px;
                
	}
	ul.nav-menu li a{
		width: 90%;
		padding:0 0 5% 10%;
		background: #dc2790;
                color: #ffffff;
                
	}

        ul.nav-menu li a.oroi, ul.nav-menu li a.nikites{
            padding-bottom: 0;
            height: 35px; 
        }
        
        
	.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;}    
    body{
        overflow: auto;
    }
    .background{
        width: 100%;
        height: 110vh;
    }
    
    .pseudo-button{
        margin-bottom: 0.5rem;
    }
    
    ul.nav-menu li a.more-height{
        height: 90px;
        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;
    }
    
    nav a.mselected{
        font-family: 'GothamGreek-Bold';            
        font-weight: bold;
        
    }
    
    .show-result {        
        font-size: 1.3rem;
        padding-bottom: 0;
    }
    
    .show-result.active{
        width: 60vw;
        margin-top: 15vh;
        margin-bottom: 15vh;        
    }
    
    .scroll{
        width: 80%;
        height: calc(var(--full-page-height) - 20vh);
        
    }
    
    .simple-content p{
        font-size: 0.9rem;
        line-height: 1.1rem;
        
    }
    
    .simplepage h2{
        font-size: 1.3rem;
        line-height: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        
    }
    
    .area-theresult #theresult.active h2.caligraphy{
        font-size: 1.5rem;
        line-height: 1.7rem;        
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;      
        
    }
        
    .fix-middle{
        min-height: 500px;
        height: auto;
        
    }
    
    #top-left-flowers{
        width: 90vw;
    }
    
    .main-area{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        height: 100vh;
        float: left;
        margin-top: 80px;
        overflow: hidden;        
        
    }    
    
/*    .closing-submissions.submition-closed.area-theresult .background{
        height: 130vh;         
        
    }*/
    
/*    .area-form .background{
        height: 140vh;        
        
    }    
    
    .area-oroi .background{
        height: 130.3vh;        
        
    }    

    .area-theresult .background{
        height: 129.7vh;        
        
    }  
    
     .area-politiki .background{
        height: 130.1vh;
    }   */
    
    .area-politiki .background.simple-background,
    .area-oroi .background.simple-background{
        display: none;
    }
    
    .area-politiki .background.mobile-special,
    .area-oroi .background.mobile-special{
        display: block;
    }    
    
    .area-form .main-area{
        height: 110vh;                
    }
    
    .area-oroi .main-area,
    .area-theresult .main-area, .area-politiki .main-area{
        margin-top: 10vh;        
        height: 120vh;                
    }
    
    .form-field.more-top-gap{
        margin-top: 1rem;
        
    }
    
    .content-area, .simplepage{
        width: 100%;
        height: auto;
        margin-left: 0;
        
    }
    
    .content-area .main-logo{
        width: 70%;
        margin: 0 auto;
        
    }
    
    .checkbox-text{
        font-size: 0.8rem;
    }
    
    #simetoxi{
        width: 180px;
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 1rem;
    }
    
    #bottom-flowers{
        position: relative;
        bottom: 0px;
        z-index: 2;
        
    }
    
    .area-politiki #top-left-flowers, .area-oroi #top-left-flowers,
    .area-politiki #bottom-flowers, .area-oroi #bottom-flowers{
        display: none !important;
    }
    
    .sklavenitis{
        bottom: -4px;
        z-index: 5;
        
    }
    
    .sklavenitis img{
        bottom: 0;
        
    }
    
    .show-form{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        
    }
    
    .isxis{
        width: 100%;
        margin: 1rem auto 0 auto;
    }
    
    .isxis p{
        font-size: 0.7rem;
        line-height: 0.9rem;
    }    
    
    .form-field{
        width: 60%;
        border-radius: 0;
    }
    
    .form-control{
        margin-left: 15%;
        margin-right: 5%;
        width: 80%;    
        
    }
    
    .scroll{
        margin-bottom: 5%;
        
    }
    
    .formresult{
        height: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        
    }
    
    .endoftime{
        height: auto;
        margin-top: 25%;
        margin-bottom: 5%;
        
    }    
    
    .endoftime p, .formresult p{
        font-size: 1.1rem;
        line-height: 1.3rem;
        
    }
    
    .simple-content{
        font-size: 1.1rem;
        line-height: 1.3rem;
        
    } 
    
    .sklavenitis{
        position: absolute;
        width: 40vw;
        left: 30vw;
    }
    
    .nikites-logo{
        width: 100%;
        
    }
    
    .nikites-logo img{
        width: 30%;
        display: block;
        margin: 0 auto;
        
    }
    
    .products{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        float: left;
        margin-top: 15%;
        position: absolute;
/*        bottom: -4px;*/
    }
    
    .area-form .products, .area-oroi .products, .area-politiki .products, .closing-submissions.submition-closed.area-theresult .products, .closing-submissions .products{
        margin-top: 0%;        
    }
    
    .area-theresult .products{
        margin-top: 44%;        
    }
    
    .closing-submissions #form.simplepage{
        height: 55.2vh;
    }    
    
    .closing-submissions #home.simplepage{
        height: 48vh;
    }
}

/* 
 * Mobile Landscape 
 */
@media only screen and (max-width:926px) and (orientation: landscape) {
    .main-area{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        height: auto;
        float: left;
        
    }    
}

/* 
 * Tablet Landscape 
 */
@media only screen and (min-width:768px) and (max-width:1124px) and (orientation: landscape) {    
    .main-pc{
        width: 50%;
        margin-left: 50%;
        
    }
    .content-area {
        height: calc(100vh - 4vh - var(--nav-height) - var(--nav-margin-bottom));
        
    }        
}

@media only screen and (min-width:768px) and (max-width:1124px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {    
    .main-pc{
        width: 50%;
        margin-left: 50%;
        
    }
    .content-area {
        height: calc(100vh - 4vh - var(--nav-height) - var(--nav-margin-bottom));
        
    }        
}

@media only screen and (min-width:768px) and (max-width:1124px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {    
    .main-pc{
        width: 50%;
        margin-left: 50%;
        
    }
    
    .content-area {
        height: calc(100vh - 4vh - var(--nav-height) - var(--nav-margin-bottom));
        
    }    
}