@font-face {
  font-weight: 400;
  font-style:  normal;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-Regular.woff2') format('woff2');
}
@font-face {
  font-weight: 400;
  font-style:  italic;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-Italic.woff2') format('woff2');
}

@font-face {
  font-weight: 500;
  font-style:  normal;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-Medium.woff2') format('woff2');
}
@font-face {
  font-weight: 500;
  font-style:  italic;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-MediumItalic.woff2') format('woff2');
}

@font-face {
  font-weight: 700;
  font-style:  normal;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-Bold.woff2') format('woff2');
}
@font-face {
  font-weight: 700;
  font-style:  italic;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-BoldItalic.woff2') format('woff2');
}

@font-face {
  font-weight: 900;
  font-style:  normal;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-Black.woff2') format('woff2');
}
@font-face {
  font-weight: 900;
  font-style:  italic;
  font-family: 'Inter-Loom';

  src: url('https://cdn.useloom.com/assets/fonts/inter/Inter-UI-BlackItalic.woff2') format('woff2');
}
body{
	  
	}
	
	
	
.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }	
#contentBody{
	background-color: rgba(255, 255, 255, 0.75);
}

.jumbotron { padding: 4rem 0rem!important;}
.card-quiz {
	background-color: red;
	width: 100%;
	background-color: #fff;
	margin: 0px auto 40px auto;
	border-radius: 6px;
	text-align: center;
	padding: 10px;
}

div.start .card-quiz {
	display: block;
}

div.start .card-quiz p, .question.card-quiz span.question {
	font-size: 20px;
}

.card-quiz.question {
	display: none;
}

.card-quiz.question.active {
	display: block;
}

.card-quiz.question .options {
	padding: 0;
	list-style: none;
	margin-top: 15px;
}

.card-quiz.question .options > li {
	margin: 5px 0px;
}

.card-quiz.question .options > li label {
	background-color: #7ED2CF;
	display: block;
	padding: 10px;
	border-radius: 20px;
}

.card-quiz.question .options > li label:hover {
	background-color: #8EE8E5;
}

.card-quiz.question .options > li input:checked + label {
	background-color: #4D8E8C !important;
	color: #fff;
}

.card-quiz.question .options > li input {
	opacity: 0;
	display: none;
}

.finish {
	display: none;
}

.card-quiz.finish p {
	font-size: 22px;
}

.card-quiz.finish .final_points {
	font-size: 40px;
	font-weight: bolder;
}


div.countdown {
	float: right;
}

div.points, div.lifes {
	float: left;
	-webkit-transition: color 1s;
    transition: color 1s;
}

div.points.animate.right {
	color: #767D76;
	font-size: 28px;
}

div.points.animate.wrong, div.lifes.animate.wrong {
	color: #bf0000;	
}
div.lifes.animate.wrong {font-size: 30px;}

div.countdown,  div.points, div.lifes {
	font-weight: bold;
	margin: 0px 5px;
	color: #000;
	padding: 0px;
	font-size: 25px;
}

.record{font-size: 4vw;}

.record dd {text-align: right;}
.title-record{font-size: 5vw; text-align:center;}
 .hurryup{visibility: hidden;}
 .stage {        
       /* display: flex;*/
        height: 0px;
        width: 100%;
        position: absolute;
        top: 30vw;
        left: 0vw;
    }
    .box {
        align-self: flex-end;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        font-size: 10vw;
        text-shadow: -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000, 2px 2px 0px #000;
        color: red;
		font-weight: bold;
        height: 23px;
        margin: 0 auto 0 auto;
        transform-origin: bottom;
        width: 100px;
    }
    .bounce-7 {
        animation-name: bounce-7;
        animation-timing-function: ease;
    }
    @keyframes bounce-7 {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-100px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
    }
    
.sprite { background: url('/imaxes/HurryUp.png') no-repeat top left;  animation-duration: 1s;
        animation-iteration-count: infinite; } 
.sprite.hurry {
	visibility: hidden;
	background-position: 0 0; 
	width: 175px; 
	height: 175px;
	margin-top: -260px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto; }  
	.hurry {
        animation-name: hurry;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1.5);
    }
    @keyframes hurry {
        0%   { transform: scale(1,1)      translateX(0); }
        10%  { transform: scale(1.1,.9)   translateX(0); }
        30%  { transform: scale(.9,1.1)   translateX(-100px); }
        50%  { transform: scale(1.05,.95) translateX(0); }
        57%  { transform: scale(1,1)      translateX(-7px); }
        64%  { transform: scale(1,1)      translateX(0); }
        100% { transform: scale(1,1)      translateX(0); }
    } 
    
.letra{min-width: 30px;}
.aforcado{width:100%;}  
.casilla{	
	background-color: #17a294!important;
	border-radius:0!important;
	border:1px solid black!important;
	font-size:10px!important;
	width: 30px!important;
	height: 30px!important;}
	

	
.jumbotron {
	padding: 2rem 0rem 3rem 0rem !important;
}	
	
.imagen-aforcado{margin: 0 15%;}	
	
	
@media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
        .box {font-size: 5vw;}
        .stage { top: 10vw;}
        .letra{min-width: 40px;}
        .casilla{
	font-size:18px!important;
	font-weight:bold;
	width: 40px!important;
	height: 40px!important;}
	.imagen-aforcado{margin: 0;}
      }	 
        
      
@media (min-width: 1024px) {
	.box {font-size: 4vw;}
	.record{font-size: 1vw;}
	  .title-record{font-size: 2vw; text-align:center;} 
	
}

@media (min-width: 1200px) {
	.box {font-size: 3vw;}
	}
	
@media (min-width: 1600px) {
	.box {font-size: 2vw;}
	}