/* Comunes */

.kofradia-logo-white { background-repeat: no-repeat; background-position: center; }
.thefont {font-family: 'IBM Plex Mono', serif !important;}
.thecolor, strong {color:#fff}
body, .bg-light {background-color:rgba(0,0,100,0.5) !important;font-family: 'IBM Plex Mono', serif !important;color:#eee;}
a {color:#eee;}
a:hover{color:#222;text-decoration:none}
p#datos a, .bg-dark-da a {text-decoration:underline}
p#datos a:hover {color:#fff}
.navbar-da {font-size: 3rem;}
.navbar a  {color:#fff;}
.nav-link {position:relative;}
.nav-link .badge {font-size:45%;position:absolute;top:15px;right:-5px;}
.btn-primary {background:#222 !important}
.btn-success { color: #fff; background-color: #32d36e; border-color: #32d36e; }
.btn-danger { color: #fff; background-color: #bf4d36; border-color: #bf4d36; }
.btn-da {padding: 2rem 1rem;}
.bg-cover {background-size:cover;background-position:center;background-repeat:no-repeat}
.bg-contain {background-size:contain;background-position:center;background-repeat:no-repeat}
.fixed-cover {position:fixed;bottom:0;right:0;left:0;top:0}
.back-1 {z-index:-1;background-image:url('img/fondo.jpg');}
.splash {z-index:9999;background-color:#222;}
.bg-success { background-color: #32d36e !important; }
.bg-velo {background-color:rgba(0,0,0,0.5);}
#enter {display:block;}
.container-answer {margin-top:100px !important;}
.modal-header {border-bottom:solid 1px #222}
hr {border-top: 1px solid #fff;}
.btn-pistas-on {background-color: #32d36e; border-color: #32d36e; color:#222;}

.card {
	padding:0; 
	border-radius: 8px;
	border: rgba(255,255,255,0.75) solid 1px;
	background: #131a20;
	background: linear-gradient(3deg, rgba(19,26,32,1) 0%, rgba(19,26,32,1) 45%, rgba(32,44,55,1) 100%);
	box-shadow: 0px 8px 10px rgba(0,0,0,0.8), 0px -4px 5px rgba(255,255,255,0.25);
	background: linear-gradient(0deg, rgba(200,200,255,0.18) 0%, rgba(200,200,255,0.20) 75%, rgba(200,200,255,0.30) 100%);
	box-shadow: 0px 8px 10px rgba(0,0,0,0.8), 0px -4px 5px rgba(255,255,255,0.25);
}
.card-da-mensaje {height:100%;background:rgba(255,0,0,0.5);color:#eee !important}
.card-da-mensaje-on {height:100%;background:rgba(0,200,0,0.5);color:#eee !important}
.card-da-pista {background:rgba(0,200,0,0.5);color:#eee !important}

.new-mensaje {/*transform: translateY(-50%); top: 50%; position: absolute; left: 0; right: 0;*/}

.inputspecial, .inputspecial:focus {background: rgba(255,255,255,0.5);/*border: none;*/font-size: 2rem;}

.active {background:#222}
.active:hover {background:222;}
.active .card-body {opacity:1;}
a.active, .inputspecial:focus {color:#fff;background:transparent}
a.active:hover {color:#fff;text-decoration:none}
.active a i.fa-check-circle, i.fa-check-circle {display:none}
.active i.fa-check-circle {display:block}

.no-cover, .ok, .no, .gameover, .win, .pistas, .entrada-enigma, .aviso-mapa {display:none;z-index:9999;background-color:rgba(255,153,0,.8)}
.no-cover, .gameover {background-color:rgba(255,0,0,1)}
.no-cover {z-index:-1;}
.ok {}
.no-2 {background-image:url('img/no.gif');}
.no-3 {background-image:url('img/no-2.gif');}
.no-4 {background-image:url('img/no-3.gif');}
.pistas {background-color:#999}
#avisoPista, #avisoMensaje {display:none;top:30%;left:10%;right:10%;bottom:30%}
.entrada-enigma {background-color:rgba(0,200,25,0.75);display:block;}
.win {display:block;background-image:url('img/fin.jpg');}
.btn-close {position:absolute;bottom:30px;right:40px }
.btn-ok div.img, #btn-entrada div.img, #btn-entrada-win div.img {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.btn-no {position: fixed;top:0;left:0;bottom:0;right:0;}

/* ANIMATIONS */
.flash { animation-name: parpadeo; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name:parpadeo; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; }
@-moz-keyframes parpadeo{ 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
@-webkit-keyframes parpadeo { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
@keyframes parpadeo { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }

#answerForm input {text-align:center;text-transform:uppercase;color:#fff}
h1, .h1 {line-height:1;margin-bottom:1rem}
.title-enigma {font-size:5rem;margin-top:40% !important}

/* Estructura */


/* Animated Modal */
.animated-modal { max-width: 550px; border-radius: 4px; overflow: hidden; transform: translateY(-50px); transition: all .7s; }
.animated-modal h1 { transform: translateY(-50px); opacity: 0; transition-property: transform, opacity; transition-duration: .4s; }
.fancybox-slide--current .animated-modal, .fancybox-slide--current .animated-modal h1 { transform: translateY(0); opacity: 1; }
.fancybox-slide--current .animated-modal h1 { transition-delay: .1s; }
.fancybox-button {width:80px !important;height:80px !important}
.fancybox-button--zoom {display:none !important}

#myProgress {padding:0;height:21px;margin-top:5px;width:100%;position:relative;text-align:center;background-color:rgba(200,200,255,0.20);/*background-image:url('img/force-tube.jpg');*/border: 1px solid #fff;background-size:cover;border-radius:8px}
#tiempo {text-align:center;position:relative;font-size:2rem;}
#theBar {height:2px;position:absolute;right:10px;top:10px;z-index:5;background-color: #fff; box-shadow: 0 0 1px 2px #fff, 0 0 5px 8px #32d36e, 0 0 150px 50px #32d36e;border-radius:5px;}

#theBarCode {height: 18px; position: absolute; right: 0px; top: 0; z-index: 5; overflow:hidden; background-color: transparent; border-radius: 5px; bottom: 0; left: 0px;}
#theBarCode span {display: inline-block;position:relative;width:20%;height:18px;}
#theBarCode span.b1 {background-color:#7dd6e9;border-top-left-radius:7px;border-bottom-left-radius:7px;}
#theBarCode span.b2 {background-color:#999;}
#theBarCode span.b3 {background-color:#b7ae51;}
#theBarCode span.b4 {background-color:red;}
#theBarCode span.b5 {background-color:orange;border-top-right-radius:7px;border-bottom-right-radius:7px;}

.bg-dark-da { background-color: rgba(200,200,255,0.5) !important; border: solid 1px #fff; }
.modal-header { border-bottom: solid 1px #fff; }

/* Mensajes */

/* Pantalla Enigma */

/* Modals */