/*
Theme Name:     dettolforall 7.0
Description:    Dettol Project
Author:         toolbox

*/
:root {
  --green-color: #24b34d;  
  --main-color: #ffffff;  
  --yellow-color: #ffff00;
  --border-color: #A9C340;
  --form-border-color: #ffffff;  
  --form-main-color: #008bcc;   
  --main-background-color: #008bcc;
  
  --mobile-nav-color: #008e32;
  --mobile-nav-bacground-color: #ffffff;
  
  --nav-height: 9vh;  
  --nav-margin-top: 3vh;
  --nav-margin-bottom: 3vh;  
  --full-page-height: 100vh;
  --full-page-height-sp: 100vh;
  
  --button-color: #ffffff;
  --button-background-color: #00783F;  
  
  --checkbox-border-color: #ffffff;
  --checkbox-fill-color: #ffffff;
  
  --popup-background-color: #ffffff;
  --popup-color: #016548;
}

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

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

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

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

@font-face {
	font-family: 'Helvetica-Condesed-Regular';
        src: url('./fonts/cfhlcnrg.ttf') 
            format('truetype');  
}

@font-face {
	font-family: 'Helvetica-Condesed-Bold';
        src: url('./fonts/cfhlcnbd.ttf') 
            format('truetype');  
}

@font-face {
	font-family: 'Myriad-Pro';
        src: url('./fonts/Myriad-Pro-Regular.ttf') 
            format('truetype');  
}

html{
    font-size: 16px;    
}

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

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: var(--main-background-color);
    
}

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

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff; 
/*  border-radius: 10px;*/
}

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FF0007; 
}

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

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

/*
* Συνηθως Διαφορετικα
*/
.area-oroi .isxis, .area-politiki .isxis, .area-theresult .isxis, .formresult, .area-form .isxis, .area-home .isxis, .area-home.closed.yes .isxis{
    display: none;    
}

.col{
    height: 47vh;
    display: inline-block;
    float: left;
}

.col.width-30{
    width: 30vw;
}

.col.width-35{
    width: 35vw;
}

.line-one{
    background-color: #ffffff;
    width: 100%;
    height: 42vh;
}

.line-one .top-left, .line-one .bottom-right{
    width: auto;
    height: 38vh;
    position: absolute;
}

.line-one .top-left{
    top: 0;
    left: 0;
}

.line-one .bottom-right{
    right: 0;
    bottom: -1px;
}

.kathariotita{
    width: auto;
    height: 25vh;
    position: absolute;
    z-index: 3;
    top: 5vh;
    left: calc(50% - 11vw);
}

.relative{
    position: relative;
    overflow: hidden;
}


.line-two{
    background-color: var(--main-background-color);
    border-top: 1px solid #9ce8ff;
    width: 100%;
    height: calc(58vh - 1px);    
    position: relative;
    overflow: hidden;
}

.pseudoline{
    width: 100%;
    height: 1px;
    background-color: #9ce8ff;
}

.line-two h1{
    background-color: var(--green-color);
    font-family: "PFFutura", sans-serif;
    border-bottom: 1vh #ffffff solid;
    font-size: 2.5rem;
    height: 7.5vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.line-two .fix-middle{
    display: block;
    height: 48vh;  
    margin-top: 2vh;
}

img.main-text{
    display: block;
    width: auto;
    height: 29vh;
    margin: 6vh auto 6vh auto;
}

.show-oroi{
    width: 10vw;
    position: absolute;
    right: 2vw;
    bottom: 0;
    
}

.header{
    display: none;
    height: 13.5vh;
    background-color: #ffffff;
    border-bottom: 0.5vh solid #24b34d;
    text-align: center;
    position: relative;
}

.area-form .header, .area-oroi .header, .area-oroi .isxis, .area-home.closed .isxis, .area-home.closed .header, .theformresult .isxis{
    display: block;
}

#form, #oroi, #endoftime, .formresult.active, #theresult.active{
    border-top: 1vh solid #ffffff;    
}

#form, #theresult.active{
    height: 85vh;
}

#form *{
    font-family: 'Helvetica-Condesed-Regular', sans-serif;
}

#oroi, #endoftime, .formresult.active{
    height: 73.5vh;
    border-bottom: 1vh solid #ffffff;        
}

#oroi .fix-middle, .formresult.active, #theresult.active .fix-middle{
    display: block;
}

#endoftime, .formresult.active{
    position: relative;
    
}

#theresult.active h2{
    display: none;
    
}

#theresult.active .image-nikites{
    width: auto;
    height:18vh;    
    margin: 3vh auto 1vh auto;
    display: block;
    
}

#theresult.active .scroll p{
    font-size: 1.3rem;
    line-height: 1.6rem;
    
}

#theresult.active .scroll p.infos{
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

#theresult.active .show-oroi-simple{
    text-align: center;
    margin: 2vh auto 0 auto;
    display: block;
}

#theresult.active .show-oroi-simple img{
    height: 7vh;
    width: auto;
}

.products{
    width: auto;
    height:35vh;
    left: 22vw;
    position: absolute;
    bottom: 0;
}

.message{
    width: auto;
    height:25vh;
    margin: 5vh auto 0 auto;
    display: block;
}

.area-form .header .go-home img, .area-oroi .header .go-home img, .area-home.closed .header .go-home img{
    width: auto;
    top: 2vh;
    height: 13vh;
    position: absolute;
    z-index: 5;
    left: 42vw;
}

.isxis{
    height: 10vh;
    background-color: #ffffff;
    border-top: 0.5vh solid #24b34d;
    width: 100%;
    float: left;
    color: var(--main-background-color);
}

.isxis p{
    text-align: center;
    padding: 1vh 0;
    font-family: 'Myriad-Pro', sans-serif;    
}

.fix-middle.the-form{
    height: 65vh;
}

.fix-middle.the-form p{
    display: block;        
    font-size: 1.3rem;
    width: 100vw;
}

.fix-middle.the-form p.info{
    margin-top: 1.5vh;
    text-align: center;
}

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

    .line-two h1{
        font-size: 1.9rem;
    }    
    
    .line-two p{
        font-size: 1.5rem;
        line-height: 1.7rem;
        padding-bottom: 0.5rem;
    }

    .line-two p.time{
        padding-top: 0.5rem;
        font-size: 1rem;
        line-height: 1.2rem;    
    }
    
    .isxis p{
        font-size: 0.8rem;
        padding: 0.6vh 0;        
    }
    
}

.strong, strong{
    font-weight: bold;
    font-family: 'Semibold', sans-serif;
}

.center{
    text-align: center;
}

.left-area, .main-area, .lorida{
    display: inline-block;
    float: left;
    
}

.left-area{
    width: 52%;
    height: 89vh;
    position: relative;
    overflow: hidden;
    
}

.main-area{
    width: 100%;
    height: 100vh;
    position: relative;
    
}

.fix-middle{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.content-area{
    display: block;
    float: left;
    width: 100%;
    height: var(--full-page-height);
}

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

.simplepage.active{
    display: block;
}

.area-theresult #theresult.simplepage.active,
#home.simplepage.active,
.area-form .simplepage.active,
.area-form .simplepage.active{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    
}

.simplepage h2{
    font-family: 'ExtraBold';        
    text-align: center;
    font-size: 1.5rem;
    padding-top: 1.5rem;    
    padding-bottom: 1.5rem;
    font-weight: bold;
    
}

.show-form{
    display: block;
    width: 12vw;
    margin: 1rem auto;     
    background-color: transparent;
    
}

@media screen and (max-width:1316px){
    .show-form{
        width: 14vw;
        
    }    
}

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

.scroll *{
    font-family: 'Helvetica-Condesed-Regular', sans-serif;
}

.scroll strong{
    font-family: 'Helvetica-Condesed-Bold', sans-serif;    
}

#theresult.active .scroll{
    height: 45vh;        
    margin-left: 13%;
}

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

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

#theresult .simple-content.endoftime{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.full-image a{
    display: block;
}

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

.mobile{
    display: none !important;
}

/*
* Form Area
*/

.form-field{
    display: inline-block;
    width: calc(40vw - 1rem);
    height: 4vh;
    font-size: 1rem;
    margin: 0;
    padding: 0.5vh 0.5rem;
    border: 0;
    background-color: #ffffff;
    color: var(--form-main-color);
    font-weight: bold;
}

.fix-middle.the-form p.form-line{
    display: block;
    width: 70vw;
    margin: 0 28vw 0 2vw;        
    padding: 0;
}

.fix-middle.the-form p.form-line label{
    width: 29vw;
    margin-right: 1vw;
    display: inline-block;
    text-align: right;
}

input::placeholder {
    color: var(--form-main-color);
    font-weight: bold;  
}

.form-control{
    border: 0;    
    width: 70vw;
    margin: 0 0 0 28vw;        
    background-color: transparent;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;    
    color: var(--form-border-color);
}

.form-control input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;    
    font: inherit;
    color: transparent;
    width: 2vh;
    height: 2vh;
    border: 0.2vh solid var(--checkbox-border-color);
    transform: translateY(-0.075em);        
    display: grid;
    place-content: center;    
}

input[type="checkbox"]::before {
  content: "";
  width: 1.8vh;
  height: 1.8vh;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 2vh 2vh 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);
}

.the-form .show-oroi{
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0 auto;
    width: 10vw;
}

.isxis .show-oroi-simple{
    display: block;
    margin: 1vh auto 2vh auto;
    width: 10vw;
    text-align: center;
}

.isxis .show-oroi-simple img{
    height: 5vh;
    width: auto;
}

@media screen and (max-width:1150px){
    .form-control{
        font-size: 0.9rem;
    }
}

#simetoxi:hover{
    cursor: pointer;
}

#simetoxi{
    border: 0;
    display: block;
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;  
    position: relative;
    height: 20vh;
    text-align: center;
}

#simetoxi img{
    width: auto;
    height: 20vh;
}

/*
* 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: 'Sans-Regular', sans-serif; line-height: 1.5; font-weight: 400; color: var(--popup-color);}
.jconfirm-content{font-family: 'Sans-Regular', 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: 'Helvetica-Condesed-Regular', sans-serif;
    font-size: 1.2rem;       
    width: 96%; 
    top: 0px;
    height: auto!important;
    padding: 2%;
    overflow: auto;
}

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

.simple strong{
    font-weight: bold;
}

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

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

/*
 * Fancy Box Area
*/

/*
 * Mobile Portrait
*/
@media (max-width: 926px) {
    .pc{display: none !important;}
    .mobile{display: block !important;}    
 
    body{
        overflow: auto;
    }
    
    .isxis .show-oroi-simple{
        width: 15vw;
    }    
    
    #form, #theresult.active, #oroi, #endoftime, .formresult.active, .isxis{
        height: auto;
    }
    
    #oroi.active .fix-middle{
        margin-bottom: 3vh;
    }
    
    .isxis .show-oroi-simple img{
        width: 100%;
        height: auto;
    }
    
    .area-form .header .go-home img, .area-oroi .header .go-home img, .area-home.closed .header .go-home img{
        width: 30vw;
        top: 2vh;
        height: auto;
        left: calc(50% - 15vw);
    }    
    
    #theresult.active .image-nikites{
        width: 90vw;
        height: auto;
    }
    
    .line-one, .line-two{
        height: auto;
    }
    
    .line-one .top-left, .line-one .bottom-right{
        position: relative;
    }
    
    .line-one .top-left, .line-one .bottom-right {
        width: 70vw;
        height: auto;
    }    
    
    .line-one img{
        display: block;
    }
    
    .line-one .bottom-right{
        margin-left: 45vw;
    }
    
    .kathariotita{
        position: relative;
        left: auto;
        top: -4vh;
        width: 70vw;
        height: auto;
        margin: 0 auto 0.5rem auto;
    }
    
    .line-two h1{
        height: auto;
        padding: 1rem 0;
    }
    
    .line-two .fix-middle{
        height: auto;
    }
    
    .show-form {
        width: 24vw;
    }

    .line-two .fix-middle{
        display: block;
    }
    
    .show-oroi{
        display: block;
        width: 20vw;        
        position: relative;
        bottom: auto;
        right: auto;
        margin: 0 auto;
    }
    
    .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;
        
    }
        
    
    .content-area, .simplepage, .area-form .simplepage, .fix-middle.the-form{
        height: auto;
    }
    
    #simetoxi{
        width: 50vw;
        height: auto;
    }
    
    #simetoxi img{
        width: 100%;
        height: auto;
    }
    
    .header-title{
        font-size: 1.5rem;
        padding: 0 0 1rem 0;
    }
    
    
    .isxis p{
        font-size: 0.7rem;
        line-height: 1rem;
    }
        
    .fix-middle.the-form p.form-line{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .fix-middle.the-form p.info{
        margin-top: 10.5vh;
        margin-bottom: 2vh;
    }
    
    .form-control{
        margin-left: 10%;
        margin-right: 10%;
        
    }
    
    .form-field {
        width: calc(60vw - 1rem);
        margin-bottom: 2vh;
    }

    
    .scroll{
        margin-bottom: 5%;
        
    }
    
    .simple-content{
        font-size: 1rem;
        line-height: 1.2rem;
        
    }    
    
    .form-control.form-field{
        width: 90vw;
        margin-left: 5vw;
        margin-right: 0;
    }
    
    .area-theresult #theresult.simplepage.active{
        display: block;
    }    
    
    .the-form .show-oroi{
        width: 25vw;
        margin-top: 20vh;
    }
    
    .message{
        width: 80vw;
        height: auto;
        margin-bottom: 46vh;
    }
    
    .products{
        width: 100%;
        height: auto;
        left: 0;
    }
    
    .main-area{
        height: auto;
    }
    
    img.main-text{
        width: 87vw;
        height: auto;
        margin-bottom: 0;
        margin: 5vh auto 4vh auto;        
    }
}

@media (max-width: 480px) {                
    .header{
        height: 8.5vh;
    }
    
    .line-two h1{
        font-size: 1.5rem;
    }
    
    .area-form .header .go-home img, .area-oroi .header .go-home img, .area-home.closed .header .go-home img{
        top: 2vh;
        width: 30vw;
        height: auto;
        left: calc(50% - 15vw);        
    }
    
    .isxis .show-oroi-simple{
        width: 30vw;
    }
    
    .the-form .show-oroi{
        width: 34vw;
    }
    
    .scroll{
        height: 42vh;
    }
    
    .line-two p{
        font-size: 1.1rem;
        line-height: 1.5rem;
    }
    
    .line-two p strong{
        font-size: 1.3rem;        
    }
    
    .line-two p.time{
        font-size: 0.9rem;        
        line-height: 1.1rem;
    }
    
    .show-form {
        width: 45vw;
    }    
    
    .show-oroi{
        width: 35vw;        
    }
    
    #simetoxi{
        width: 98vw;
        height: auto;
        margin-left: 1vw;
    } 
    
    .fix-middle.the-form p.form-line label{
        width: 28vw;
        margin-right: 2vw;
    }
    
    .fix-middle.the-form p{
        font-size: 1.1rem;
        
    }
    
    .fix-middle.the-form p.info{
        font-size: 1rem;        
    }
    
    .form-control.form-field {
        width: 90vw;
        margin-left: 5vw;
        margin-right: 0;
    }
}

@media screen and (min-width:700px) and (max-width: 936px){

    .form-control.form-field {
        width: 70vw;
        margin-left: 15vw;
    }

}

@media (max-width: 415px) {
    
}

/* 
 * Mobile Landscape 
 */
@media only screen and (max-width:926px) and (orientation: landscape) {

}

/* 
 * Tablet Landscape 
 */
@media only screen and (min-width:927px) and (max-width:1024px) and (orientation: landscape) {
 
}