sketchpad@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
html {margin: 0;padding: 0;}
body {margin: 0;padding: 0;overflow-y: scroll;min-width: 260px;font-size: 14px;line-height: 2;font-family: 'Ubuntu', sans-serif;background: var(--main);color: #fff;}
:root{
    --main: #669990;
    --second: #006663;
    --pal: #9fbfba;
}
/********************************************************************************************************************************** COMMON ELEMENTS */
.t-left {	text-align: left;}
.t-right {text-align: right;}
.t-center {	text-align: center;}
.t-justify {	text-align: justify;}
.t-center p{text-align: center;}
/************************** By wthered */

/***************************************/

a, a:focus {color: var(--second);cursor: pointer;outline: none;text-decoration: none;}
a:hover {color: #fff;text-decoration:none;}
a img {	border: none;}
p {padding: 0 0 10px 0;margin: 0;}
p, ul, ol {-webkit-user-select: none;-webkit-touch-callout: none; -moz-user-select: none;-ms-user-select: none;user-select: none;}
ul, ol {margin: 10px 0 10px 10px;}
hr {background: #dcd7ca;border: none;clear: both;height: 1px;margin: 25px 0;	padding: 0;width: 100%;}
sup {font-size: 75%}

.full-width {	width: 100%;}
.max-width {max-width: 100%;}
.v-top {vertical-align: top;}
.small {font-size: 13px;}
.very-small {	font-size: 11px;	line-height: 1.2;}
.gray {color: #f5efe0;}
.clear {display: block;height: 0;clear: both;}
.sprite {background-position: top left;background-repeat: no-repeat;}
.sprite:hover {background-position: bottom left;background-repeat: no-repeat;}
.nowrap {	white-space: nowrap;}
.uc {display: block;padding: 80px 20px;text-align: center;font-size: 30px;color: #C1C1C1;}

h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: 0.8em;font-weight: 100;	line-height: 1.2;font-family: 'Ubuntu', sans-serif;}
h1 {font-size: 2.4em;font-family: 'Ubuntu', sans-serif;}
h2 {	font-size: 1.9em;font-family: 'Ubuntu', sans-serif;}
h3 {font-size: 1.6em;font-family: 'Ubuntu', sans-serif;}
h4 {font-size: 1.3em;font-family: 'Ubuntu', sans-serif;}
h5 {font-size: 1.2em;font-family: 'Ubuntu', sans-serif;}
h6 {font-size: 1.1em;font-family: 'Ubuntu', sans-serif;}
p{ font-family: 'Ubuntu', sans-serif;}
b, strong {font-weight: bold;}
.info p {text-align: justify;display: block;font-size: 14px;}
p {text-align: justify;font-size: 16px;}
p.captcha-clear{text-align: left;font-size: 12px;}

.img-left, .img-right {float: none;margin: 0 0 20px 0;display: block;}
.img-border {border: 3px solid #6f6f6f;}
a:hover .img-border {	border: 3px solid #cd2653;}

table {	border-collapse: collapse;width: 100%;font-size: 20px;margin-bottom: 20px;}
td, th {vertical-align: top;padding: 15px 0px;font-size: 16px;}
.td-number{text-align: end;padding: 5px 0px;line-height: 50px;}
.number {text-align: center; background-color: var(--second); border-radius: 100%; color: #fff;height: 50px;width: 50px;display: inline-block;}
i, em {	font-style: italic;}

.msg {display: block;color:red;text-align:center;font-size: 20px;font-family: 'Ubuntu', sans-serif;}
.msg.success {color:var(--main)}
iframe {max-width: 100%;}
.no-border, .no-border td, .no-border th {border: 0;}
.center-xs, .t-right.center-xs, .t-left.center-xs {	text-align: center}
.small-xs {	font-size: 80%;}

.show-hide-head{text-align:center;cursor:pointer;padding:5px 10px;background-color:#888;color:#fff;transition:0.3s;font-size:1.3em;font-weight:bold;border-radius: 40px;margin-top: 50px;}
.show-hide-head:hover,.show-hide-head.current{background-color:#f3742d;transition:0.3s;}
.show-hide-content{display: none;padding: 15px;margin-bottom: 30px;border-radius: 0 0 5px 5px;}
.cse-ums-submit{margin:10px 0;}
.input,.input-line, #captcha,#cse-ums-input{display:block;width:100%;border:2px solid #d6d6d6;background:#fff;padding:10px;line-height:1.2;color:#000;border-radius:3px;}
textarea.input,textarea.input-line{min-height:200px;}
/* #captcha{width:120px;}
#captcha-img{border:1px solid #cccccc;}
.label,.captcha-clear{font-size:80%;font-weight:bold;margin:10px 0 0 2px;color:#666666;}
.redstar,#captcha-required{color:red;} */

.question-label{display: inline; max-width: 100%;margin-bottom: 5px;font-weight: 700;}
.questions-num {text-align: right;color: #fff;;font-size: 25px;}
.form-table td{padding:5px 8px 5px 0;vertical-align:top;color:#a1a5af;border:none !important;}
/* a.button, .button, .cse-ums-submit, .newsletter-button{display:block;text-decoration: none;border:none;padding:12px 30px;width:100%;margin:auto;background:var(--second);border:2px solid var(--second);color:#fff;text-align:center;vertical-align:top;cursor:pointer;border-radius: 5px}
.button.small{padding:4px 8px;}
.button.cancel{border:2px solid #96979a;color:#96979a;background-color: transparent;margin-top: 10px}
.button:hover, .cse-ums-submit:hover, .newsletter-button:hover{background:#fff;border:2px solid var(--second);color:var(--second);}
.button {display: block;margin: auto;} */
#captcha-container{font-size:12px;}
#captcha-required{color:red;}
#captcha-img, #new-captcha-img{border:1px solid #adadad;height:40px;margin:4px 0;width:130px;background-color:#fff;}
#captchaimage{display:inline-block;}
#captcha-refresh{display:inline-block;vertical-align:8px;}
#captcha{width:130px;}


.wrap {position: relative;width: 100%;}
#top-wrap {padding: 5px 0;background-color: #cd2653;}
#header-wrap {padding: 10px 0;background-color: #fff;}
.wrap-lang {background-color: #f0f0f0;height: 35px;}

.game-title{padding: 10px 0px;text-align: center;color: var(--main);font-weight: bold;background: #fff;font-size: 18px}

#logo {width: 260px;max-width: 80%;display: block;margin: auto;margin-bottom:-20px;padding: 20px 0;}
#lang-menu-link-gr, #lang-menu-link-en {display: inline-block;	width: 26px;	height: 26px;}
#lang-menu{position:absolute;right:15px;top:5px;}
.lang-menu-link{display:inline-block;width:40px;height:40px;border-radius: 100%;}
.lang-menu-icon{width:25px;height:25px;display:block;border-radius:100%;}
.lang-menu-label-long{display:none;}
.lang-menu-label-short{display:none;}
.lang-block{margin-top: 200px;}

.wrap-main {margin-bottom: 40px;min-height: 420px;margin-top: 20px;}

.wrap.wrap-footer{color:#ffff;/*background-image: linear-gradient(#ffffff, var(--main));*/}
.social{margin:25px 0 0;}
.social img{display:inline-block;border-radius:100%;opacity:0.7;margin:6px;box-shadow:-5px 5px 10px rgba(0,0,0,0.2);width: 40px;}
.social a:hover img{opacity:1;}
.bottom-menu{margin-bottom:40px;}
.bottom-item-link{display:inline-block;margin:0 15px;color:#ffff;}
.bottom-item-link:hover{color:var(--main);text-decoration: none;}
.logged-info {width: 100%;display: block;margin: auto;margin-top: 35px;}
.question-point.logged-info {display: none;}

a.home-button {text-decoration: none;line-height: 1.5}
.home-button {width: 100%;height: 50px;display: block;text-align: center; color: #000;border-radius:5px;font-weight: bold;font-size: 16px;margin-bottom: 25px;border: 2px solid #d6d6d6;}
.home-button.selected {background-image: linear-gradient(to right, var(--main) , var(--main));color: #fff;border:none;line-height: 1.5}
.form {border: 2px solid #d6d6d6;padding: 25px;border-radius: 5px;min-height: 450px;background:#fff;color: #000;}
.show-hide-head-forgot{color: #000}
.form p{color: #000;}
.form label{color: #000;}
.form a{color: var(--second)}
.form a:hover{color: var(--main)}
.form.messageform {padding: 20px;min-height: 350px;}
.form.photographform {padding: 20px;min-height: 235px;margin-bottom: 20px;}
.col-xs-6.no-gap-r { padding-right: 0px;}
.col-xs-6.no-gap-l {padding-left: 0px;}
.button.login{margin-top: 42px;width: 100%}
.button.registration{width: 100%;}
.button.registration:hover{background: var(--second);color: #fff;}
.good-luck{color: var(--main);font-size: 20px;display: block;text-align: center;}
.social-login-table td, th{border: none;}
.login-form-table td, th{border: none;}
table.login-form-table {color: #000;}
.login-form-table input {width: 100%}
.login-form-table input:hover{background: var(--second);color: #fff;}
.terms a{color: var(--main)}
.terms a:hover {color: #000;}

.bg-entry{background:url(../images/layout/entry.jpg) no-repeat;position: fixed;box-sizing: border-box;background-size: contain;background-position: top;display: block;width: 100vw;height: 100vh;padding: 0;margin-left: -15px;margin-bottom: -50px;margin-top: -21px}
.bg-entry .button{top: 75%;background-color: rgba(255, 255, 255, 0.7);}
.bg-entry .button:hover{background-color: transparent;}


.show {font-size: 24px;text-align: center;margin:0 0px 20px;font-family: 'Ubuntu', sans-serif;color: #fff;background-color: var(--second);line-height: 1.5;border-radius: 8px;border: solid 1px var(--second)}
.show p{font-size: 24px;padding: 0px;text-align: center;font-family: 'Ubuntu', sans-serif;}

.instructions-form{font-size: 18px;font-weight: bold;}

.continue-btn {background-image: linear-gradient(to right, var(--main) , var(--main));color: #fff;display: block;text-align: center;border-radius: 5px; font-weight: bold;font-size: 24px;width: 160px;height: 50px;margin: auto;margin-top: 20px;padding-top:11px;}
.back-btn {font-size: 20px;}
#timestop {display: block;text-align:center;font-size:20px;}
#timestop  button {border: none;background-color: transparent;color: var(--main);font-weight: bold;}

.scan {font-size: 22px;color: var(--main); font-weight: bold;text-align: center; display: block; line-height: 1.3;margin-bottom: 15px; text-shadow: 0 0 black;}
#reader{display:inline-block;width:360px;}
.scanner-button{position:fixed;padding:5px;border-radius:0 0 0 5px;background-color:var(--second);top:35px;right:0;width:50px;}
.scanner-button:hover{background-color:#222;transition:0.3s}
.scanner-image{max-width:100%}

.ums-radio-list > li{display: inline-block;padding: 0 10px;}
.ums-radio-list label, .ums-checkbox-list label {cursor: pointer;font-weight: normal;}
input[type=checkbox], input[type=radio] {cursor: pointer;}

/********************************************************************************* questions */
.sentence, .user-answer{text-align:left;font-size:16px;color:#fff;line-height:2;width:95%;margin-bottom:20px;}
.answers{text-align:center;margin: auto;}
.answer{display:inline-block;font-size:16px;text-align:center;padding:10px;margin-bottom:20px;width:100%;color:#000;border:2px solid var(--main);background-color:#fff;border-radius:15px;cursor: pointer;}
.answer:hover, .answer.selected{cursor:pointer;background-color:var(--second);color: #fff;}
/* .answer.selected{background-color:var(--pal);} */
#confirm-answer{text-align:center;margin-top:30px;min-height:50px;cursor: pointer;display: none}
#confirm-answer #next-button, #confirm-puzzle #next-button{display:none;width: 200px;}
 #confirm-final{display:none;}
.correct-answer, .correct-answered{display:none;text-align:center;position: relative;background-color:#59b562;color:#fff;font-size:120%;border-radius:20px;padding:10px;margin:20px 0px;margin-top: -55px;}
.correct-answer.wrong, .correct-answered.wrong{background-color:#c44a5b;}
.correct-answered{display:block;margin-top:0px;}
.answered-msg{display: block;text-align: center;font-size: 18px;}
#confirm-next{margin-top: -30px;}
.question-continue {display: none;}
/* #time-left{width:100%;text-align:center;color:var(--main);padding:5px 10px;font-size:18px;border-radius:10px;z-index:2011;border: 2px solid var(--main);} */
#time-left{width:100px;;text-align:center;color:#fff;padding:5px 10px;font-size:18px;border-radius:10px;z-index:2011;border: 2px solid var(--main);margin: 0px 0 10px 0px;}
.points{margin-bottom: -50px;}

.overlay{position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.4);transition:0.3s;}
.message-tile{display: grid;align-items: center;position:relative;height:100px;text-overflow: ellipsis;overflow: hidden;background-size:cover;background-position:center;padding:0px;color:#fff;text-align:center;line-height:1.5;}
.message-tile:hover{color:#fff;}
.message-tile:hover .overlay{background:rgba(0,0,0,0.7);}
.selected.message-tile{border: 2px solid #fff;}

.no-gutter > [class*='col-'] {padding-right: 0;padding-left: 0;}
.row.same-height-xs{display:flex;width: 100%;margin: 0px;}

.fancybox-message {display: none;}

.word-box, .puzzle-box{border:2px solid #000;border-radius:10px;padding:10px;margin-bottom: 30px;}
.drag-word{position:relative;display:inline-block;text-align:left;width:80%;height: 50px;padding:2px;border:2px solid var(--main);background-color:#fff;border-radius:10px;margin:5px 0px;cursor:grab;}
.word-head{display:inline-block;color:#002b7f;font-size:16px;margin:5px 5px 5px 13px;border-radius:5px;}
.word-head:hover{cursor:pointer;color:#e8112d;}
.droppable{height:70px;width:100%;border:2px solid #002b7f;border-radius:10px;margin:5px 0px;}
.droppable-active{border:2px solid #e8112d;border-radius:10px;}
.droppable-hover{border:2px solid forestgreen;border-radius:10px;}

.image-frame{background-size: cover;background-image: url("https://eecummings.homoludens.org/images/image-frame.jpg");margin-bottom: 20px;}
.image-frame img{object-fit: cover;margin: auto;display: block; width: 250px; height: 300px;border-image-repeat: repeat;padding-top: 50px;}

.sponsor img {width: 150px;display: block;margin: auto;}
.sponsor p {text-align: center;color: #fff;}

.membership span{display: block;text-align: justify;}

.logout{border: none;background: none;color: var(--second);}
.logout:hover {color: #fff;}
.messenger p {text-align: center;}
/* .messenger a:hover {color: var(--main)} */
.total-time{text-align: center;font-size: 18px;color: var(--main);display: block;}

/* .button.back {background-color: var(--second);display: block;margin:auto;} */
/* .leaderboard .button.back {height: 30px;padding:1px 0px;width: 200px;}
.button.back:hover{background:#fff;border:2px solid var(--second);color:var(--second);} */
#nickname-button {display:none;width: 100%;margin: 0px;}

.leaderboard-table th,  .statistics-table td, .statistics-table th{text-align:center !important;border:1px solid #dbdbdb !important;padding:5px 2px;background-color: var(--second); color: #fff;font-size: 14px;}
.leaderboard-table td {text-align:center !important;border:1px solid var(--second) !important;padding:5px 2px; font-size: 16px;}
.leaderboard-table, .statistics-table {width:100%}
.leaderboard-row-grey {background-color:var(--pal) !important;color: var(--second)}
.leaderboard-row-white {background-color:#f9f9f9 !important;color: var(--second)}

.gal3-preloader {min-height: 200px;text-align: center;}
.gal3-container {text-align: center;margin: 10px 0 10px 0;}
.gal3-thumb {display: inline-block;vertical-align: middle;text-align: center;border: 1px solid #c0c0c0;;border-radius: 4px;overflow: hidden;}
.gal3-thumb {width: 150px;height: 100px;padding: 2px;margin: 4px 2px;}
.gal3-link {display: block;width: 100%;height: 100%;border-radius: 3px;overflow: hidden;opacity: 0.7;background-size: cover;background-position: center;background-repeat: no-repeat;transition: 0.3s;}
.gal3-link:hover {opacity: 1;}
.gal-left-container {text-align: center;margin: 10px 0 10px 0;}
.gal-left-thumb {display: inline-block;vertical-align: middle;text-align: center;background: rgba(255, 255, 255, 0.6);border: 1px solid #9b9b9b;border-radius: 4px;overflow: hidden;width: 150px;height: 100px;padding: 2px;margin: 4px 2px;}
.gal-left-thumb a, .gal-home-thumb a {display: block;width: 100%;height: 100%;border-radius: 3px;overflow: hidden;opacity: 1;background-size: cover;background-position: center;background-repeat: no-repeat;transition: 0.3s;}
.gal-left-thumb:hover {border: 1px solid #555;}


.question-img{width: 100%;display: block; margin: auto;}
.page-img, .message-img, .question-img {width: 100%;display: block; margin: auto;margin-bottom: 20px;}

.countdown, .over  {text-align: center;font-size: 40px;line-height: 0.6;margin-top: 0px;font-family: 'Ubuntu', sans-serif;color: var(--main);}
.countdown span {font-size: 20px;}
.countdown span.time-over{font-size: 40px;line-height: 1;}
#countdown {min-height:80px}

.timer, .over  {text-align: center;font-size: 40px;line-height: 0.6;margin-top: 0px;font-family: 'Ubuntu', sans-serif;color: var(--main);margin-top: 20px;}
.timer span {font-size: 20px;}
.timer span.time-over{font-size: 40px;line-height: 1;}
/* #timer {min-height:80px} */

.embed-title {text-align: center;font-size: 20px;color: var(--main);}

.ticket-select-block{display:inline-block;position:relative;padding:0;border:0;width:70%;margin:0 0 15px 0;overflow:hidden;cursor:pointer;}
.ticket-select-block.selected{border:0;}
.ticket-movie-img{display:block;width:90%;height:160px;position:relative;left:5%;border-radius:15px;background-position:center;background-size:cover;}
.ticket-movie-title{position:absolute;bottom:0;left:5%;width:90%;font-size:12px;line-height:1.2;font-weight:bold;display:block;padding:10px;border-radius:0 0 15px 15px;color:#fff;background:rgba(0,0,0,0.5);text-align:center;white-space:normal;transition:0.3s;}
.ticket-select-block:hover .ticket-movie-title, .ticket-select-block.selected .ticket-movie-title{background:var(--second);}
#submit-cinema {display: none;}

.gift-img{width: 100%;max-width: 300px;height: auto;}

#game-left{text-align: center;margin: 20px;font-size: 20px;background: var(--second);max-width: 300px;margin: 20px auto;}

/* button */
.button {position: relative;display: flex;top: 90%;height: 60px;margin: auto;width: 165px;align-items: center;gap: 4px;padding: 16px 36px;border: 4px solid;border-color: transparent;font-size: 16px;background-color: inherit;border-radius: 100px;font-weight: 600;color: var(--second);box-shadow: 0 0 0 2px var(--second);cursor: pointer;overflow: hidden;transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.button svg {position: absolute;width: 24px;fill: var(--second);z-index: 9;transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.button .arr-1 {right: 16px;}
.button .arr-2 {left: -25%;}
.button .circle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 20px;height: 20px;background-color: var(--second);border-radius: 50%;opacity: 0;transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.button .text {z-index: 1;transform: translateX(-12px);transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.button:hover {box-shadow: 0 0 0 12px transparent;color: #2b2534;}
.button:hover .arr-1 {right: -25%;}
.button:hover .arr-2 {left: 16px;}
.button:hover .text {transform: translateX(12px);color:#fff;}
.button:hover svg {fill: #fff;}
.button:active { scale: 0.95;box-shadow: 0 0 0 4px var(--second);}
.button:hover .circle {width: 220px;height: 220px;opacity: 1;}
.button.map{width: 285px}
.button.map:hover .circle {width: 305px;}
.welcome .button {width: 280px;}
.welcome .button:hover .circle {width: 300px;}
.leaderboard .button.back {width: 290px;}
.leaderboard .button:hover .circle {width: 300px;}
.button.evaluation{width: 240px;}
.button.evaluation:hover .circle {width: 250px;}
.button.end-btn:hover{background-color: var(--second);color: #fff;}
.button.back {width: 300px}
.button:hover .circle {width: 320px;}
.evaluation-submit.button:hover{background-color: var(--second);color: #fff;}
.evaluation-submit.button{margin: 10px auto;}

@media (min-width: 768px) {
  .fake-apple img {width: 50%}
  .wrap-main {margin-bottom: 40px;min-height: 300px;}
  .logged-info {width: 550px;}
  .leaderboard-table th,  .statistics-table td, .statistics-table th{font-size: 16px;}
  /* a.button, .button, .cse-ums-submit, .newsletter-button{width:345px;} */
  /* #time-left{float:right;width:100px;margin: 0px 0 10px 10px;} */
}

@media (min-width: 992px) {
  .form, .canvas-drawing {width: 500px; margin: auto;}
  .message-img, .gal3-container{padding: 0 20px;max-width: 35%;float: right;}
  .question-img, .page-img {width: 40%;}
}

@media (min-width: 1200px) {
}