@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");

*, *:after, *:before {
  box-sizing: border-box; 
}

body {
	font-size: 1.1em;		
	margin: 0;
	overflow-x: hidden;
	font-family: 'Josefin Sans', Verdana, sans-serif;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #013447;
}


.theme-intro {
	background-color: #013447;
	color: #ffffff;
	padding: 12px;
	min-height: 100vh;	
	padding-left: 32px;
	padding-right: 32px;
}

@media screen and (min-width: 768px) {
    .theme-intro {
		max-width: 768px;
		margin: 0 auto;
	}
}

.theme-intro__img.center {
    display: block;
    margin: 36px auto;
    width: fit-content;
}

.theme-intro h1 {
    font-size: 24px;
    display: block;
    padding-bottom: 16px;
    margin: 0;
	text-align: center;
}

.theme-intro p {
    padding-bottom: 10px;
    display: block;
    margin: 0;
}

.theme-intro img {
    max-width: 100%;
    height: auto;
}

.theme-intro a {
	color: #ffffff;
}

#previous-button {
	display: inline-block;
    background-color: #E1523D;
    border-radius: 30px;
    color: #FFFFFF;
    padding: 0.75rem 1rem;	
}

/** HEADER MESSAGES */
.theme-notification {
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	top: 12px;
	background-color: #ffffff;
	color: #000000;
	border: 3px solid #C2BB00;
	border-radius: 20px;
	padding: 16px; 
	max-width: 756px;
	margin: 0 auto;
	z-index: 90;
    font-size: 1.2em; 		
}

.theme-notification.active {
    display: block; 
}

.theme-notification.error {
  border: 3px solid #FF0000;
}

/** Green ok in case of info or correct */
.theme-notification i {
    color: #C2BB00;
    font-size: 20px; 
}

/** Red cross in case of error */
.theme-notification em {
    color: #FF0000;
    font-size: 20px; 
}

.theme-notification-button {
	background-color: #E1523D;
	display: block;	
	color: #ffffff;
    width: fit-content;
    padding: 12px;
    text-align: center;
	border: 0px solid #000000;
    border-radius: 30px;	
	margin-top: 10px;
	float: right;
}

/** THEME CONTENT INPUT FIELD */
.theme-input {
	margin-top: 5px;
}

.theme-input label {
	display: block;
    margin-bottom: 12px;
}

.theme-input input {
	display: block;
	border-radius: 32px;
	border: 1px solid #013447;
	box-shadow: 0px 3px 6px #00000029;
	width: 100%;
	padding: 20px;
}



/** THEME BUTTONS */
.btn {
	display: block;
	text-decoration: none;
	width: fit-content;
	padding: 12px;
	min-width: 90px;
	text-align: center;
	margin-bottom: 24px;
	position: relative;
	z-index:90;
	color: #ffffff;	
}

.btn-submit {
    margin: 16px auto; 
	border-radius: 30px;	
}

.btn-big {
	width: 296px;
	min-height: 80px;
	border-radius: 15px;	
	font-size: 1.5em;
}

/** .theme-content a could override this*/
.theme-content a.btn {
	color: #ffffff;
}

.btn-red {
    background-color: #E1523D;
    color: #ffffff;
}
	
.btn-key {
	position: relative;
    padding-right: 70px;
}

.btn-key::after {
	content: '';
	background-image: url("../assets/img/key-white.png");
	background-size: contain;
	width: 30px;
	height: 12px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.75s ease;
}
.btn-key:hover::after {
    right: 5px;
    transform: translateY(-50%) scaleY(-1);
}

.btn-inactive {
    opacity: 0.2;
}

.btn-half {
    width: 48%;
    margin-right: 2%;
    margin-right: 2%;
    display: inline-block;
}

.btn-half + btn-half {
      margin-left: 1%;
      margin-right: 0;
}

.btn-keyonly {
    margin-left: 50%;
    transform: translateX(-50%);
    width: 100%; 
}

.has-explanation {
	padding-top: 45px; 
	margin-top: 30px;
}

.btn-explanation {
	font-family: 'Handlee', cursive;
	position: absolute;
	bottom: 55%;
	width: auto;
	left: 40%;
	transform: rotate(348deg) translateX(-50%);
}
  .btn-explanation img {
    display: block;
    margin-top: 4px;
}


/** CHOOSE LANGUAGE FLAGS */
.languages img {
  padding: 10px;
}

.languages a {
	width: 50%;
    display: inline-block;
}

/** iFrame op laatste pagina met locatie foto's */
iframe {
	margin-bottom: 20px;
}


/** HIGH SCORE zig zag*/
/** https://codepen.io/chris22smith/pen/NWWRWxJ */
.table-score {
  margin-left: auto;
  margin-right: auto;
  border-collapse:separate;
  border-spacing:.5em 1em;
  
}

.table-score tbody tr:nth-child(odd) {
    transform:rotate(1deg);
}

.table-score thead tr,
  tbody tr:nth-child(even) {
    transform:rotate(-1deg);
}

.table-score td {
    background-color:#fff;
    color:#013447; 
	padding: 5px;
	font-size: 1.1em;
}

.table-score th {
    background-color:#E1523D;
    color:#fff;
	padding: 5px;
	font-size: 1.2em;			
}


/** FINAL PAGE REVIEW */

.feedback-container {
}

.feedback-btn {
	margin-top: 70px;
}

.feedback-star-widget {
	text-align: center;
}

.feedback-container form{
    display: none;
}

.feedback-star-widget input {
    display: none;
}

.feedback-post{
	display: none;
}

.feedback-text {
	text-align: center;
	font-size: 1.3em;	
	color: #fd4;	
}

.feedback-textarea #feedback {
	width: 100%;
	height: 100px;
    padding: 5px;
	margin: 12px 0px 20px 0px;
}

.feedback-label {
	color: #998229;	
	font-size: 30px;
	padding: 4px;
	transition: all 0.2s ease;
}

.feedback-label-checked {
	color: #fd4;
}

/**
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label{
	color: #fd4;
}
input:checked ~ label{
	color: #fd4;
}
*/


input:checked ~ form{
	display: block;
}



/** FINAL PAGE SHOW OTHER CITIES*/
.theme-more-tours {
	display: flex;
}

.theme-more-tours::-webkit-scrollbar,
.theme-more-tours::scrollbar {
	display: none;
}

.theme-single-tour {
	margin-right: 16px;
	min-width: 134px;
}

.theme-single-tour__icons {
	display: flex;
}

.theme-single-tour__icons > img {
	margin-right: 8px;
}

.theme-single-tour__lang {
	display: flex;
	margin-left: 8px;
}

.theme-single-tour__lang img {
	margin-left: -8px;
}

.theme-single-tour__title {
	padding: 12px 0;
}

.theme-single-tour__link {
	color: #E1523D;
	text-decoration: none;
}

.theme-single-tour a {
	color: #E1523D;
}



/** JQUERY CONFIRM */
.jconfirm-box {
    max-width: 700px;
}

#nrofplayers {
	text-align: center;
	font-size: 3em;			
}

.rolescontainer {
	display: flex;
	margin-bottom: 10px;
}

.role {
	color: #000000;
	font-size: 1.1em;
	width: 120px;
	height: 50px;
	background-color: #ffffff;
	padding: 5px;
	border-radius: 5px;
	float: left;
	margin-right: 10px;
	text-align: center;
}

.role.selected {
	border-style: solid;
	border-color: red;
	border-width: 3px;	
}

.role.disabled {
	background-color: #666666;
}

.roledescription {
  float: left;
  width: 60%;
}

#teamcode {
	text-align: center;	
	font-size: 1.5em;	
}

.mission-level {
	color: #ffff00;
}


.raadsel {
	text-align: center;
	font-weight: bold;	
	font-size: 2.5em;
}

ul.ulraadsel {
	text-align: center;
	font-weight: bold;	
	font-size: 1.5em;
	list-style-type: none;
}

ul.ulraadsel li {
	margin-bottom:10px;
}

.theme-intro img {
	max-width:100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 30px;
	height: auto;
}

h1.allmissions {
	margin-top: 30px;
	margin-bottom: 30px;
	color: #ff0000;
}

h1.allmissions2 {
	margin-top: 70px;
	margin-bottom: 30px;
}

p.wwfurl {
	text-align: center;
    font-weight: bold;
    font-size: 2.5em;	
	margin: 15px 10px 40px;
}

p.wwfgamecode {
	text-align: center;
    font-weight: bold;
    font-size: 2.5em;	
	color: #E1523D;
	margin: 15px 10px 40px;
}

p.docentenhandleiding {
	text-align: center;	
}