*, *:after, *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html, body { height:100%;  margin:0; padding:0;  font-family: 'Futura Md BT'; font-weight:normal; overflow-x: hidden; background:url(../img/bg_2.jpg) no-repeat; background-size:cover; }
body { overflow-x:hidden !important;  }
h1, h2, h3, h4, h5, h6 { font-family: 'Futura Md BT';  padding:0; margin:0; font-weight:normal; margin-bottom:10px; color:#333; }
h5  { font-size:18px; }
p, li  { line-height:24px; font-size:15px; color:#666;  font-family: 'Futura Md BT'; font-weight: normal; }
li  { margin-bottom:10px; }
a { color:#000; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; transition:all .2s ease-in-out; text-decoration:none; }
a:hover,a:focus { text-decoration:none; outline:0;  } 
.clear { clear:both; float:none !important; width:100% !important; }
.ie6,.ie7,.ie8,.ie9, img{ border:none; }


.shadow { border:none; border-radius:0px; background:#fff;
    padding: 30px;
    -moz-box-shadow: 0 0 50px 0 rgba(130,128,128,0.25);
    -webkit-box-shadow: 0 0 50px 0 rgb(130 128 128 / 25%);
    box-shadow: 0 0 50px 0 rgb(130 128 128 / 25%);
}

.white { color:#fff; }
section .container .row .d-flex { height:100vh;  align-items:center; justify-content:center; /* border:1px solid#ddd; */ }

#congrat .img-fluid { width:70%; margin:0 auto; display:block; }

.btn-warning  { padding:8px 70px; }

/* ===== FullScreen =====*/

@font-face {
    font-family: 'Futura Md BT';
    src: url('../fonts/FuturaBT-Medium.eot');
    src: url('../fonts/FuturaBT-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FuturaBT-Medium.woff2') format('woff2'),
        url('../fonts/FuturaBT-Medium.woff') format('woff'),
        url('../fonts/FuturaBT-Medium.ttf') format('truetype'),
        url('../fonts/FuturaBT-Medium.svg#FuturaBT-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura Bk BT';
    src: url('../fonts/FuturaBT-Book.eot');
    src: url('../fonts/FuturaBT-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FuturaBT-Book.woff2') format('woff2'),
        url('../fonts/FuturaBT-Book.woff') format('woff'),
        url('../fonts/FuturaBT-Book.ttf') format('truetype'),
        url('../fonts/FuturaBT-Book.svg#FuturaBT-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura BdCn BT';
    src: url('../fonts/FuturaBT-BoldCondensed.eot');
    src: url('../fonts/FuturaBT-BoldCondensed.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FuturaBT-BoldCondensed.woff2') format('woff2'),
        url('../fonts/FuturaBT-BoldCondensed.woff') format('woff'),
        url('../fonts/FuturaBT-BoldCondensed.ttf') format('truetype'),
        url('../fonts/FuturaBT-BoldCondensed.svg#FuturaBT-BoldCondensed') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura';
    src: url('../fonts/Futura-Bold.eot');
    src: url('../fonts/Futura-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Futura-Bold.woff2') format('woff2'),
        url('../fonts/Futura-Bold.woff') format('woff'),
        url('../fonts/Futura-Bold.ttf') format('truetype'),
        url('../fonts/Futura-Bold.svg#Futura-Bold') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}




header { padding:10px 0; position:fixed; top:0px; width:100%; z-index:9;   }
header .col-sm-6 { }
header .col-sm-6 img.unlock_future { height:80px; }
header .col-sm-6 img.nayara_ { height:60px; }


.left_pattern  { position:fixed; left:0px; height:100%; }
.right_pattern { position:fixed; right:0px; height:100%; }


#fullscreen { background:#fff; } 
.html5-fullscreen-api { position: relative; }
.html5-fullscreen-api .fs-button { z-index:100; display:inline-block; background:#fff; width:32px; height:32px; position:absolute; top:10px; right:10px; cursor:pointer; line-height:normal; text-align:center;  }
.html5-fullscreen-api .fs-button:after { display: inline-block; width: 100%; height: 100%; font-size: 32px; font-family: 'ModernPictogramsNormal'; color:#000; cursor: pointer; content: "v"; }
.html5-fullscreen-api .fs-button:hover:after { color:#000; }
#fullscreen:-webkit-full-screen .fs-button:after { content: "u"; color:#000; }
#fullscreen:-moz-full-screen .fs-button:after { content: "u"; color:#000; }

.html5-puzzle {
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /********************/
    /* board background */
    /********************/
    border: 1px solid #aaa;
}

.html5-puzzle div,
.html5-puzzle ul,
.html5-puzzle li,
.html5-puzzle canvas { margin: 0; padding: 0; }

.hide { display: none; }

.clear { clear: both; }


/* ===== Welcome ===== */
.welcome { padding-top:130px; }
.welcome .col-lg-6 { position:relative; /* border:1px solid#ddd; */ height:400px; }

.title_anchor { font-size:36px; color:#fff; text-shadow:2px 2px 6px#000; border-radius: 80px 80px 0 0; background:#ed991f;  width:140px; height:240px; padding-top:90px;
 display:block; position:absolute; line-height:normal;  }
.title_anchor:hover { background:#e3921c; color:#fff; }

.welcome .col-lg-6.first_sec .title_anchor { left:45%; top:68%; transform:translate(-45%, -68%);  }
.welcome .col-lg-6.second_sec .title_anchor { left:55%; top:68%; transform:translate(-55%, -68%);  }

@media (min-width:1800px) {
.welcome { padding-top:170px; }
.welcome .col-lg-6 { height:500px; }
.welcome .col-lg-6 .title_anchor { background:#ed991f; height:320px; width:180px; padding-top:100px;  }
.welcome .col-lg-6.first_sec .title_anchor { left:26%; top:74%; transform:translate(-26%, -74%); }
.welcome .col-lg-6.second_sec .title_anchor { left:75%; top:74%; transform:translate(-75%, -74%); }
}



/* ===== Quiz ===== */

.quiz_landing { padding-top:90px; }
.quiz_landing .puzzle_title { color:#000; } 


.puzzle_title.question_title { width:900px !important; color:#fff; height:140px; font-size:30px; line-height:40px; padding:10px 55px; margin:0 auto 90px auto; position:relative; }
.puzzle_title.question_title span { position:absolute; top:50%; transform:translateY(-50%); left:60px; width: 88%;  z-index:0;  }
.puzzle_title.question_title img { position:absolute; top:-14px; left:0px; right:0px;  z-index:-1;  }



.question_listing { width:90% !important; margin:0 auto; }
.question_listing h4 { margin-bottom:20px; }
.question_listing ul { margin-bottom:40px; padding-left:0px; }
.question_listing ul li { float:left; padding:0px 20px; width:50%; list-style:none; margin-bottom:30px; }

.question_listing .submit { margin-top:30px;  }
.question_listing .submit .btn { background:url(../img/puzzletitle_bg.png) no-repeat; background-size:cover; width:300px; height:76px; color:#fff; font-size:22px;  padding:10px 15px; border:none; border-radius:4px;  }


.congratulation_text { padding-top:40px;  }
.congratulation_text h1 {font-size:60px; }
.congratulation_text h2 { width:120px; height:120px; background:#ff481e; color:#fff; font-size:60px; border-radius:50%; margin:0 auto 50px auto; padding-top:23px; font-weight:600; }
.social { }
.social a { width:70px; margin:6px 6px; display:inline-block; }


.question_listing.congratulation_text {  padding-top:0px !important; }


@media (max-width:1600px) {
	
.puzzle_title.question_title { width:700px !important; height:103px; font-size:24px; line-height:40px; padding:10px 55px; margin:0 auto 50px auto; position:relative; }
.puzzle_title.question_title span { left:60px; width:83%;  }

.question_listing { width:70% !important; margin:0 auto; }
.question_listing ul li { float:left; padding:0px 10px; width:50%; margin-bottom:20px; }

}


:root {
	--white: #ffffff;
	--light: #f0eff3;
	--black: #000000;
	--dark-blue: #1f2029;
	--dark-light: #353746;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
}


.checkbox:checked ~ .background-color{ background-color: var(--white); }

[type="checkbox"]:checked, [type="checkbox"]:not(:checked), 
[type="radio"]:checked, [type="radio"]:not(:checked){ position: absolute; left: -9999px; width: 0; height: 0; visibility: hidden; }

.checkbox:checked + label, .checkbox:not(:checked) + label{ position: relative; width: 70px; display: inline-block; padding: 0; margin: 0 auto; text-align: center; margin: 17px 0;
margin-top: 100px; height: 6px; border-radius: 4px; background-image: linear-gradient(298deg, var(--red), var(--yellow)); z-index: 100 !important; }

.checkbox:checked + label:before, .checkbox:not(:checked) + label:before { position: absolute; font-family: 'unicons'; cursor: pointer; top: -17px; z-index: 2; font-size: 20px;
line-height: 40px; text-align: center; width: 40px; height: 40px; border-radius: 50%; -webkit-transition: all 300ms linear; transition: all 300ms linear;  }

.checkbox:not(:checked) + label:before { content: '\eac1'; left: 0; color: var(--grey); background-color: var(--dark-light); box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07); }

.checkbox:checked + label:before { content: '\eb8f'; left: 30px; color: var(--yellow); background-color: var(--dark-blue); box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); }

.checkbox:checked ~ .section .container .row .col-12 p{ color: var(--dark-blue); }

.checkbox-tools:checked + label,
.checkbox-tools:not(:checked) + label{ position:relative; display:inline-block; padding:32px 30px 0px 40px; height:92px; width:100%; font-size:24px;  overflow: hidden; cursor: pointer;  color: var(--white); -webkit-transition: all 300ms linear; transition: all 300ms linear;  }

.checkbox-tools:not(:checked) + label{ background:url(../img/ans_bg.png) no-repeat; background-size:cover; color:#fff; }

.checkbox-tools:checked + label{ background:url(../img/selected_bg.png) no-repeat; background-size:cover; }
.checkbox-tools.wrong_select + label { background:url(../img/wrong_bg.png) no-repeat; background-size:cover; }
.checkbox-tools.right_select + label { background:url(../img/right_bg.png) no-repeat; background-size:cover; }

.checkbox-tools:not(:checked) + label:hover{ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
.checkbox-tools:checked + label::before,
.checkbox-tools:not(:checked) + label::before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow)); z-index: -1; }

.checkbox-tools:checked + label .uil,
.checkbox-tools:not(:checked) + label .uil{ font-size: 24px; line-height: 24px; display: block; padding-bottom: 10px; }

.checkbox:checked ~ .section .container .row .col-12 .checkbox-tools:not(:checked) + label{
	background-color: var(--light);
	color: var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 260px;
	font-size: 52px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	text-transform: uppercase;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	-webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}
.checkbox-budget:not(:checked) + label{
	background-color: var(--dark-light);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
	position: relative;
	display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
	position: absolute;
	content: attr(data-hover);
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	-webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
    color: var(--white);
	-webkit-transition: max-height 0.3s;
	-moz-transition: max-height 0.3s;
	transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
	max-height: 0;
}
.checkbox-budget:checked + label span::before{
	max-height: 100%;
}

.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
	background-color: var(--light);
	-webkit-text-stroke: 1px var(--dark-blue);
    text-stroke: 1px var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-booking:checked + label,
.checkbox-booking:not(:checked) + label{
	position: relative;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	text-align: center;
	padding: 0;
	padding: 6px 25px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 16px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
    color: var(--white);
	text-transform: uppercase;
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-booking:checked + label::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:not(:checked) + label:hover::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:checked + label::before,
.checkbox-booking:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}
.checkbox-booking:checked + label::after,
.checkbox-booking:not(:checked) + label::after{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:checked + label::after{
	opacity: 0;
}
.checkbox-booking:checked + label .uil,
.checkbox-booking:not(:checked) + label .uil{
	font-size: 20px;
}
.checkbox-booking:checked + label .text,
.checkbox-booking:not(:checked) + label .text{
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 300ms linear;
	transition: opacity 300ms linear;
}
.checkbox-booking:checked + label .text{
	opacity: 0.6;
}
.checkbox-booking:checked + label .text::after,
.checkbox-booking:not(:checked) + label .text::after{
	position: absolute;
	content: '';
	width: 0;
	left: 0;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label .text::after{
	width: 0;
}
.checkbox-booking:checked + label .text::after{
	width: 100%;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label{
	background-color: var(--light);
    color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label::after,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label::after{
	background-color: var(--light);
}




@media (min-width:1800px) {
.quiz_landing { padding-top:130px; }
 
}
@media (max-width:1600px) {

.checkbox-tools:checked + label, .checkbox-tools:not(:checked) + label { padding:25px 30px 0px 40px; font-size:20px; height:84px; }

}


/* ===== Puzzle ===== */

.puzzle_landing { padding-top:90px; }
.puzzle_title { width:380px; margin:0 auto 62px auto; position:relative; color:#afc2c8; z-index:99; }
.puzzle_title img { position:absolute; top:-14px; left:0px; right:0px;  z-index:-1;  }
 

.puzzle_landing iframe { border:none; outline:none; background:#fff !important; width:900px; height:440px; }


@media (min-width:1800px) {
.puzzle_landing { padding-top:130px; }
.puzzle_landing iframe { border:none; outline:none; background:#fff !important; width:900px; height:540px; }
}



/*== Jigsaw puzzle ==*/
div#canvas-wrap { width: 100%; height: 100%; background:#fff; }
	
canvas#canvas, canvas#buffer, canvas#image-preview { position: absolute; top: 45px; left: 0; }
canvas#canvas { z-index: 100; }
.loading  #canvas-wrap { background: url(../images/loader.html) no-repeat center; }
.loading  canvas { visibility: hidden; }
canvas#buffer { z-index: 70; }
canvas#image-preview.show { left: 50%; opacity: .5; z-index: 1000; pointer-events: none; }

/*== Options bar ==*/
div#game-options ul { margin: 0 auto; }
div#game-options { 
    z-index: 500;
    top: 0;
    left:0px;
    position: absolute;
    padding: 5px 10px 5px 30px;
    width: 100%;
    height: 50px; padding-top:10px;
    /*
    border-bottom: 1px solid #000;
	-moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black; */
}

div#game-options ul li { 
    float: left;
    list-style: none;
    line-height: 25px;
}

div#game-options ul li b {
    margin: 0 10px; font-size: 16px;
}

/*== Clock ==*/
#clock { width: 80px; display: block; text-align: center; }
#clock { width: 96px; }

/*== Select ==*/
div#game-options div.styled-select select { outline: none; background: transparent; width: 125px; padding: 5px; font-size: 13px; border: none; height: 28px; -webkit-appearance: none; }
div#game-options div.styled-select { width: 100px; height: 28px; margin-right: 10px; overflow: hidden; background: url(../images/arrow.png) right no-repeat #f3f3f3; border: 1px solid #333; }

/*== Share buttons ==*/
#share-twitter, #share-facebook {
    text-indent: -10000px;
    width: 32px;
    height: 32px;
    display: block;
    cursor:pointer;
}

/*== Crear puzzle ==*/
#image-error { color: red; margin: 0 10px; display: none; }
#dnd { display: none }

#game-options #create {
    display: none;
    right: 25px;
    position: absolute;
}

#game-options #create .add {
    background: url(../images/plus.png)  10px 6px no-repeat #f3f3f3;
    padding-left: 30px;
}
/*== Modal window ==*/

div#congrat { text-align: center; }

div#help {
    font-size: 15px;
}

div#help ul { margin-left: 10px; }

/*== mobile ==*/
@media screen and (max-width: 960px) {
    div#game-options { left: -30px; }
    #clock { width: 96px;  }
    #SHOW_EDGE, #SHOW_MIDDLE, #SHOW_ALL,#SHOW_FILEPICKER { display: none; }
}

@media screen and (max-width: 479px) {
    #SHOW_HELP, #clock { display: none; }
    #JIGSAW_SHUFFLE { margin-left: 15px; }
    #SHOW_PREVIEW { margin-right: 10px; }
}


.select_puzzle { }
.select_puzzle .shadow { padding:10px; }
.select_puzzle  h2 { color:#fff; font-weight:bold; }
.select_puzzle .col-lg-4 > a  { font-size:22px; padding:10px 0; display:block; text-decoration:none; color:#fff; font-weight:bold; }


.fill_details { }
.fill_details form label { font-family: 'Lato'; font-size:16px; font-weight:bold; color:#fff;  }
.fill_details form .form-control { height:50px; font-family: 'Lato'; font-size:16px; color:#333;  border:2px solid#ddd; }
.fill_details form .submit { margin-top:22px; }
.fill_details form .submit .btn { border:none; }



.leaderboard { padding:100px 0 50px 0; }
.leaderboard .table { background:rgb(0 0 0 / 36%); 
-moz-box-shadow: 0 0 50px 0 rgba(130,128,128,0.25);
-webkit-box-shadow: 0 0 50px 0 rgb(130 128 128 / 25%);
box-shadow: 0 0 50px 0 rgb(130 128 128 / 25%);
}
.table-bordered td, .table-bordered th { border: 1px solid #575757; }

.leaderboard .table th { font-size:22px; color:#fff; }
.leaderboard .table td { font-size:18px;  color:#fff; }



.home_button { position:fixed; right:15px; bottom:15px; padding:10px 30px; color:#fff; background-color:#bb0737; border-color:#bb0737; }