/*
Theme Name:     soupline ajax
Description:    Soupline Ajax Project
Author:         toolbox

*/
:root {
  --main-color: #231f20;  
  --border-color: #231f20;
  --form-border-color: #231f20;  
  --border-color-scrollbar: #ffffff;  
  --main-background-color: #7acfdd;
  
  --mobile-nav-color: #016548;
  --mobile-nav-bacground-color: #ffffff;
  
  --nav-height: 7vh;  
  --nav-margin-bottom : 4vh;
  
  --full-page-height: calc(100vh - 40vh - 4vh - var(--nav-margin-bottom));
  
  --button-color: #de2826;
  --button-background-color: #ffffff;  
  
  --checkbox-border-color: #231f20;
  --checkbox-fill-color: #231f20;
  
  --popup-background-color: #7acfdd;
  --popup-color: #ffffff;
}

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

@font-face {
	font-family: 'PFEncoreSansPro';
        src: url('./fonts/PFEncoreSansPro-Regular.otf') 
            format('opentype');  
}

@font-face {
	font-family: 'PFEncoreSansPro-Medium';
        src: url('./fonts/PFEncoreSansPro-Medium.otf') 
            format('opentype');  
}

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

html{
    font-size: 16px;    
}

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

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

a{
    text-decoration: none;
    color: #231f20;    
}

*:focus {
    outline: none;
}

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

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

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

img{
    pointer-events: none
}

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

#fake-click{
    width: 45%;
    height: 80vh;
    margin: 10vh 0 0 10vh;    
    z-index: 10;
    position: absolute;        
    
}    

.background{
    position: absolute;
    width: auto;
    height: 80vh;
    object-fit: cover;
    top: 10vh;
    left: 10vh;
    
}

.isxis{
    width: 50%;
    margin: 4% 25% 0 25%;
    text-align: center;
    float: left;
}

.politiki{
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 1vh;
    font-size: 0.8rem;
}

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

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

#success-message{
    margin: 5vh 0 5vh 23%;
    width: 50%;    
}

.cloud{
    width: 5.5vw;
    position: absolute;
    z-index: 10;
    
}

#left-cloud{
    top: 76vh;
    left: 59%;    
    
}

#top-cloud{
    top: 20vh;
    right: 5vw;    
    display: none;
}

.area-politiki #top-cloud, .area-theresult #top-cloud, .area-oroi #top-cloud, .area-form #top-cloud{
    display: block;
}

.main-area{
    width: 48%;
    margin-left: 50%;
    margin-right: 2%;
    height: 100vh;
    position: relative;
}

.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-family: 'PFEncoreSansPro-Bold', sans-serif;
    font-weight: bold;
}

.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;
}

.title-header{
    width: 40%;    
    margin: 1rem 30%;    
}

#oroi .title-header{
    width: 36%;    
    margin-left: 32%;    
    margin-right: 32%;        
}

#theresult .title-header{
    width: 22%;    
    margin-left: 39%;    
    margin-right: 39%;        
}

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

.simplepage.active{
    display: block;
}

.simplepage.active .endoftime, .formresult.active{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: var(--full-page-height);      
}

.simplepage h2{
    text-align: center;
    font-size: 1rem;
    padding-top: 2rem;    
    padding-bottom: 2rem;
}

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

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

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

.endoftime p, .formresult p{
    display: block;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.6rem;
    padding-bottom: 1%;
}

.return-action a{
    font-family: 'PFEncoreSansPro-Bold', sans-serif;    
    padding-bottom: 2%;    
    font-weight: bold;
}

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

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

.simple-content strong, strong, .area-politiki .politiki{
    font-family: 'PFEncoreSansPro-Bold', sans-serif;    
    font-weight: bold;    
}

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

.full-image a{
    display: block;
}

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

.mobile{
    display: none !important;
}

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

    border-bottom: 1rem solid #ffffff;
    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 #ffffff;

    margin: 0 auto;  
    
}

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

/*
* Form Area
*/

.form-field{
    display: block;
    text-align: center;    
    width: 60%;
    font-size: 1rem;
    margin: 0 auto 1rem auto;
    padding-top: 0;
    padding-bottom: 0.8rem;
    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; /* Αφαιρεί την καμπύλη */
    -webkit-appearance: none; /* Αφαιρεί default iOS στυλ */
    appearance: none;    
}

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

.form-control{
    border: 0;    
    width: 80%;
    margin: 0 0 1rem 20%;
    
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;    
    text-align: left;    
}

.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{
    font-family: 'PFEncoreSansPro-Bold', sans-serif;    
    border: 0;
    display: block;
    background-color: var(--button-background-color);
    color: var(--button-color);
    width: 170px;
    height: 40px;
    margin: 2rem auto 2rem auto;
    font-size: 1.2rem;
    font-weight: bold;
    
    overflow: hidden;
    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; font-size: 20px;}
.jconfirm-title-c{font-family: 'PFEncoreSansPro', sans-serif; line-height: 1.5; font-weight: 400; color: var(--popup-color);}
.jconfirm-content{font-family: 'PFEncoreSansPro', sans-serif; font-weight: 400; color: var(--popup-color);}

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons{
    width: 100%;
}

/*
 * 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: 'PFEncoreSansPro', 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-family: 'PFEncoreSansPro-Bold', sans-serif;    
    font-weight: bold;
}

.simple a{
    font-family: 'PFEncoreSansPro-Bold', sans-serif;    
    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{
        text-align: right;
        font-family: 'PFEncoreSansPro-Bold', sans-serif;    
	height:80px;
	line-height:20px;
	padding:0 10px;
	color: #ffffff;
	text-decoration:none;
        
}

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

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

span.icon-bar{
	position:absolute;
	right:12px;
	display:block;
	width:26px;
	height:2px;
	background-color: var(--border-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: transparent;
	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: 70px;
                right: 50px;
		width: 200px;
		height: 0;
		padding: 0;
		overflow:hidden;
                background: linear-gradient(to right, #292461, #22447f);
                
	}
	ul.nav-menu.active{
		height:auto;
	}
	ul.nav-menu li{
		width:100%;
	}
	ul.nav-menu li a{
		width:85%;
		padding:0;
                padding-right: 15%;
		text-align: right;
                
                display: flex;
                justify-content: flex-end;
                flex-wrap: wrap;
                align-content: center;                
                
		background-color: transparent;                
                
	}

        
	.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, #left-cloud, #top-cloud{display: none !important;}
    .mobile{display: block !important;}    
 
    body{
        position: relative;
    }
    
    ul.nav-menu li a.more-height{
        height: 100px;
        line-height: 1.2rem;
    }

    #fake-click{
        width: 70%;
        margin: 60px 15% 0 15%;    
        z-index: 10;
        position: relative;        
    }    
    
    .area-politiki .nav-menu.active .more-height,    
    .area-theresult .nav-menu.active .nikites,    
    .area-oroi .nav-menu.active .oroi, 
    .area-form .nav-menu.active .forma{
        font-weight: bold;
    }
    
    .formresult{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        height: auto;        
    }
    
    .simplepage.active .endoftime{
        margin-top: 12%;
        height: auto;                
        margin-bottom: 12%;        
    }
    
    #success-message{
        margin: 5vh 0 5vh 0%;
    }
    
    #theresult .title-header{
        width: 26%;
        margin-left: 37%;
        margin-right: 37%;        
    }
    
    .jconfirm .jconfirm-holder{
        width: 70%;
    }    

    .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{font-size: 24px;}
    
    .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content{
        width  : 90%!important;
        height : 90%!important;
        max-width  : 90%!important;
        max-height : 90%!important;
    }
    
    
    .mobile.background{
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        height: auto;
        top: 60px;
        left: 0;
    }    
    
    
    .main-area{
        width: 100%;
        margin-top: 0;
        margin-left: 0%;
        margin-right: 0%;
        height: auto;
        float: left;
    }    
    
    .content-area, .simplepage{
        height: auto;
    }
    
    .content-area .main-logo{
        width: 90%;
        margin: 0 5%;
        display: none;
    }
    
    .show-form{
        width: 50%;
        margin-left: 20%;
        margin-right: 30%;
    }
    
    .isxis{
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 5%;
    }
    
    .form-field{
        width: 70%;
        
    }
    
    #form{
        position: relative;
    }
    
    .form-control{
        margin-left: 15%;
        margin-right: 15%;
    }
    
    .scroll{
        margin-bottom: 5%;
        
    }
    
    .endoftime, .formresult{
        height: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        
    }
    
    .simple-content{
        font-size: 1.1rem;
        line-height: 1.3rem;
    }
    
    .arrow-up, .arrow-down{
        position: relative;
        padding-top: 20px;        
    }
    
    .checkbox-text{
        line-height: 1.3rem;
    }
    
    #simetoxi{
        margin-top: 1rem;
    }
    
    #mobile-cloud{
        left: 10%;
        width: 15vw;
        bottom: 10px;
    }
}

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

/* 
 * Tablet Landscape 
 */
@media only screen and (min-width:927px) and (max-width:1024px) and (orientation: landscape) {
    .main-area{
        width: 52%;
        margin-left: 48%;
        margin-right: 0;     
        height: 95vh;
        
    }
    
    .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%;        
    }
    
    .show-form{
        width: 80%;        
    }
    
    .content-area{
        height: 85vh;        
    }
    
    .isxis{
        width: 60%;
    }
}