/*
Theme Name:     Games Light v2
Description:    Game Projects
Author:         toolbox

*/
:root {
  --animate-delay: 0.5s;
}

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

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


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

html,
body {
    height: 100%;
}

body{
    background-color: #97c8c1;    
}

.jconfirm .jconfirm-holder{
    width: 50%;
    margin: 0 auto;
}
.jconfirm-box{text-align: center;}
.jconfirm.jconfirm-light .jconfirm-box{background-color: #d8006c !important; border: 1px solid #ffffff;}
.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: #ffffff !important; background-color: transparent !important;}
.jconfirm-title-c{font-family: 'AvertaPE', sans-serif; line-height: 1.5; font-weight: 400; color: #ffffff;}
.jconfirm-content{font-family: 'AvertaPE', sans-serif; font-weight: 400; color: #ffffff;}

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

#home{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2022/10/arxiki-selida-new.jpg');
    background-position: top left;
    background-repeat: no-repeat;
}

#home .fancybox{
    color: #ffffff;
    text-decoration: none;
    display: block;
    left: 1692px;
    position: absolute;
    top: 1015px;
    width: 100px;
    font-size: 0.8rem;
}

.init-slide{
    background-color: #97c8c1;
    width: 1920px;
    height: 1080px;
    display: none;
    
    font-family: 'AvertaPE', sans-serif;    
    color: #ffffff;
    
    text-align: center;    
}

.active{
    display: block;
}

h2{
    font-size: 1.4rem;
    line-height: 1.6rem;
}

.heading{
    padding-top: 150px;
    padding-bottom: 80px;
    margin: 0 auto;
}

.no-padding-top{
    padding-top: 0!important;
}

.no-padding-bottom{
    padding-bottom: 0!important;
}

.init-slide h2{
    padding: 2rem;
}

.start-action{
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    top: 0;
    left: 0;
    position: absolute;
    width: 150px;
    text-align: left;
}

#backtohome{
    display: block;
    width: 314px;
    height: 100px;
    color: #ffffff;
    background-color: transparent;
    position: relative;
    margin: 0 auto;
    font-size: 20px;
    top: 820px;
    border: 0;
}

#home button{
    display: block;
    width: 250px;
    height: 132px;
    position: relative;
    left: 730px;
    top: 850px;
    border: 0;    
    background-color: transparent;
}

#home button img, .heading img, .game-choise img{
    width: 100%;
    height: auto;
}

#choose-game{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2022/10/screen-2-choose-game-2.jpg');
    background-position: top left;
    background-repeat: no-repeat;    
}

#thankyou.winner{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2022/11/batist-thx.jpg');
    background-position: top left;
    background-repeat: no-repeat;        
}

#thankyou.no-gift{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2023/06/success-no-gift-1.jpg');
    background-position: top left;
    background-repeat: no-repeat;        
}

#thankyou.bluettoth{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2023/06/kerdisesB.jpg');
    background-position: top left;
    background-repeat: no-repeat;        
}

#thankyou.shower{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2023/06/kerdisesA.jpg');
    background-position: top left;
    background-repeat: no-repeat;        
}

#thankyou.loser{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2023/06/prospathise-xana.jpg');
    background-position: top left;
    background-repeat: no-repeat;        
}

#choose-game .heading{
    width: 1000px;
}

.game-selection{    
    display: flex;
    text-align: center;
    justify-content: center;
}

.box-selection{
    width: 228px;
    margin-left: 20px;
    margin-right: 20px;
}

.game-choise{
    width: 228px;
    height: 421px;
    border: 0;
    background-color: transparent;
    display: flex;
    align-items: flex-start;
    align-self: flex-start;
}

.game-choise:hover{
    cursor: pointer;
}

/*
* Forma Diagonismos
*/

#form.winner{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2022/10/screen-3-forma-1.jpg');
    background-position: top left;
    background-repeat: no-repeat;
}

#form.loser{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2022/10/exases-background.jpg');
    background-position: top left;
    background-repeat: no-repeat;
}

#form .start-action{
    text-align: center;
    left: 885px;
    top: 1000px
}

#form .heading{
    display: none;
}

#form.winner .heading.winner-top{
    width: 605px;
    display: block;
}

#form.loser .heading.loser-top{
    width: 665px;
    display: block;    
}

#forma-diagonismos{
    width: 500px;
    margin: 0 auto;
}

#forma-diagonismos input{
    display: inline-block; float: left; 
    width: 100%; 
    border-left: 0; border-top: 0; border-right: 0; border-bottom: 2px solid #ffffff; 
    margin-bottom: 1%;
    padding: 2% 0 1% 0;
    background-color: transparent;
    color: #ffffff;
    font-size: 1.2rem;
}

#forma-diagonismos input.active, #forma-diagonismos .form-control.active, #symmetoxi.active{
    position: relative;
    z-index: 10;
}

#symmetoxi{
    background-color: #d8006c;
    color: #ffffff;
    border-radius: 10px;
    border: 1px solid #d8006c;
    padding: 2% 8%;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 4%;
}

#symmetoxi.active{
    margin: 4% auto 0 auto;    
}

#symmetoxi:hover{
    cursor: pointer;
}

#forma-diagonismos ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff;
  opacity: 1; /* Firefox */
}

#forma-diagonismos :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ffffff;
}

#forma-diagonismos ::-ms-input-placeholder { /* Microsoft Edge */
  color: #ffffff;
}

input:focus{
    outline: none;
}

.form-control {
    float: left;
    margin-top: 1rem;
    
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.1;

    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;  
}

#forma-diagonismos 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: 2.15em;
    height: 2.15em;
    border: 0.15em solid #ffffff;
    border-radius: 0.15em;
    transform: translateY(-0.075em);    
    
    display: grid;
    place-content: center;    
}

.form-control + .form-control {
    margin-top: 1em;
}

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

span.checkbox-text{
    padding-top: 0.5em;
    text-align: left;
    padding-left: 1.2em;
}

.checkbox-text a{
    color: #ffffff;
}

.akoustika{
    width: 306px;
    height: 590px;
    position: absolute;
    top: 310px;
    right: 350px;
}

/*
 * Remember Me
*/

#remember-me, #put-order, #match-maker{
    background-image: url('https://spreadbatistesecret.gr/thegame/wp-content/uploads/2022/10/games-background.jpg');
    background-position: top left;
    background-repeat: no-repeat;
}

#remember-me .heading img{
    display: none;
}

#remember-me .heading.vima-one{
    width: 1145px;
}

#remember-me .heading.vima-one img.vima-one{
    display: block;
}

#remember-me .heading.vima-two{
    width: 793px;
}

#remember-me .heading.vima-two img.vima-two{
    display: block;
}

.remember-thee-game-image{
    position: absolute;
    top: 130px;
    left: 100px;    
}

#remember-me .remember-thee-game-image{
    width: 226px;
    height: 157px;
}

#match-maker .remember-thee-game-image{
    width: 185px;
    height: 159px;
}

#put-order .remember-thee-game-image{
    width: 249px;
    height: 196px;
}

#remember-me .start-action{
    left: 1250px;
    top: 855px;
}

.cards, .card, .view{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cards{
  height: 552px;
  width: 552px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wrapper{
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto;    
}

.show-grey{
    width: 552px;
    height: 552px;
    position: absolute;
    background-color: transparent;
    opacity: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}

.show-grey button{
    opacity: 100%;
    width: 174px;
    height: 174px;
}

.show-grey button img{
    width: 100%;
    height: auto;
}

.cards .card{
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  height: calc(100% / 3 - 2px);
  width: calc(100% / 3 - 2px);
}

.shake{
  animation: shake 0.35s ease-in-out;
}
@keyframes shake {
  0%, 100%{
    transform: translateX(0);
  }
  20%{
    transform: translateX(-13px);
  }
  40%{
    transform: translateX(13px);
  }
  60%{
    transform: translateX(-8px);
  }
  80%{
    transform: translateX(8px);
  }
}

.card .view{
  width: 176px;
  height: 176px;
  position: absolute;
  background: transparent;
  pointer-events: none;
  backface-visibility: hidden;
  transition: transform 0.25s linear;
}
.card .front-view img{
    width: 100%;
    height: auto;
}
.card .back-view img{
  max-width: 100%;
}
.card .back-view{
  transform: rotateY(-180deg);
}
.card.flip .back-view{
  transform: rotateY(0);
}

.card.flip .front-view{
  transform: rotateY(180deg);
}

.card.show-effect{
    position: relative;
    transition: 0.5s;
    overflow: hidden;
}

.card.show-effect span{
    position: absolute;
    display: block;   
    filter: hue-rotate(270deg);
}

.card.show-effect span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,transparent, #ffffff);
    animation: animate1 1s linear infinite;
}

@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
.card.show-effect span:nth-child(2){
    top: -100%;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,transparent, #ffffff);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
.card.show-effect span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(270deg,transparent, #ffffff);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}


.card.show-effect span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(360deg,transparent, #ffffff);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

.blink_img {
  animation: blinker 0.5s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}

/*
 * Put Order
*/

#put-order .heading{
    width: 969px;
    padding-bottom: 60px;
}

#put-order .start-action{
    top: 865px;
    left: 1375px;
}

.dropbox{
    display: block;
    height:260px;
    width:260px;
    margin:10px;
    color: #ffffff;
}

.dragbox{
    height:260px;
    width:260px;
    float:left;
    margin:10px;
}

.dragbox img, .dropbox img{
    width: 100%;
    height: auto;
}

.puzzle-area{
    display: block;
    margin: 0 auto;
}

#put-order .puzzle-area{
    width: 1120px;
    height: 600px;  
}

.puzzle-top, .puzzle-bottom{
    display: flex;
    align-items:center;
    justify-content:center;        
    margin: 0 auto;
}

#put-order .puzzle-top, #put-order .puzzle-bottom{
    width: 1120px;
    height: 260px;
}    

#put-order .puzzle-bottom{
    margin-top: 50px;
}

/*
 * Match Maker
*/

#match-maker .heading{
    width: 1043px;
    padding-bottom: 55px;
}

#match-maker .start-action{
    left: 1380px;
    top: 850px;
}

#match-maker .puzzle-area{
    width: 1125px;
    height: 700px;  
}

#match-maker .dropbox{
    width:68px;
    height:263px;
    margin: 10px 80px;
}

#match-maker .dragbox{
    height:205px;
    width:205px;
}

#match-maker .puzzle-top{
    width: 1125px;
    height: 260px;
}    

#match-maker .puzzle-bottom{
    margin-top: 50px;
    width: 1125px;
    height: 260px;
}    

/*
* Custom Player
*/

#videoarea{
    position: relative;
    overflow: hidden;
}

#video {
  width: 1960px;
  height: 1080px;
  margin: 0;
  position: relative;
  left: -20px;
}

video{
  width: 1960px;
  height: 1080px;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/*Spinner load*/
/*.poster {
  width: 38px;
  height: 38px;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: rotateZ(45deg);
}

.poster .cube {
	position: relative;
	transform: rotateZ(45deg);
}

.poster .cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);
}

.poster .cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(43,160,199);
	animation: cube 1.08s infinite linear both;
	transform-origin: 100% 100%;
}

.poster .c2 {
	transform: scale(1.1) rotateZ(90deg);
}

.poster .c3 {
	transform: scale(1.1) rotateZ(180deg);
}

.poster .c4 {
	transform: scale(1.1) rotateZ(270deg);
}

.poster .c2:before {
	animation-delay: 0.135s;
}

.poster .c3:before {
	animation-delay: 0.27s;
}

.poster .c4:before {
	animation-delay: 0.405s;
}

@keyframes cube {
	0%, 10% {
		transform: perspective(70px) rotateX(-180deg);
		opacity: 0;
	}
  
	25%, 75% {
		transform: perspective(70px) rotateX(0deg);
		opacity: 1;
	}
  
  90%, 100% {
    transform: perspective(70px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes bg-pan-top {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}*/

/*
 * Keyboard
*/

#keyboard-area{
    width: 900px;
    height: 350px;
    position: absolute;
    top: 725px;
    z-index: 40;
    left: 510px;
    background-color: #d8006c;    
    padding-left: 10px;
    display: none;
}

#keyboard-area #en, #keyboard-area #el{
    display: none;
}

#keyboard-area .active-keyboard{
    display: grid!important;
}

#keyboard-area.active{
    display: block;
}

.field-output{
    font-size: 2rem;
}

.keyboard-base {
    max-width: 880px;
    padding: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #d8006c;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(30, 30px);
    grid-template-rows: repeat(5, 60px);
    grid-gap: 1px;
}


.key, .inactive {
    background-color: #d8006c;
    border: 2px solid #ffffff;
    border-radius: 5px;
    grid-column: span 2;
    font-size: 20px;
    text-align: center;
    padding-top: 17px;
}

.key:hover {
  border: 1px solid #eeeeee;
  
}

.delete {
    grid-column: span 4;
}

.tab, .inactivetab {
    grid-column: span 3;
}

.backslash, .inactivebackslash {
    grid-column: span 3;
}

.capslock {
    grid-column: span 4;
}

.label-caps, .label-low{
    display: none;
    text-transform: none;    
}

.uppercase .label-caps{
    display: block;
}

.lowercase .label-low{
    display: block;
}

.lowercase{
    text-transform: lowercase;
}

.uppercase{
    text-transform: uppercase;
}

.return, .inactivereturn {
    grid-column: span 4;
}

.leftshift, .lang {
    grid-column: span 5;
}

.rightshift, .okkey, .inactiverightshift {
    grid-column: span 5;
}

.leftctrl {
    grid-column: span 3;

}

.command {
    grid-column: span 3;
    font-size: 14px;

}

.space {
    grid-column: span 13;
    width: 864px;

}

.keyboard-overlay, .video-overlay, .empty-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.keyboard-overlay.active, .video-overlay.active, .empty-overlay.active{
    opacity: 1;   
    visibility: visible;
}

.video-overlay.active .replay{
    display: block;
    margin-left: 1200px;
    margin-top: 860px;
} 

#empty{
    background-color: #000000;
}

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}