@charset "utf-8";

/* AUTHOR: ALBERTO FERNÁNDEZ GARCÍA - EDICIONES BOLANDA - 02/2016; */



/* GOOGLE FONTS */

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://fonts.googleapis.com/css?family=nunito:400,300italic,300,100italic");
@import url('https://fonts.googleapis.com/css?family=Nunito:400,600');





*{margin:0;padding:0;}
html{
  background: transparent;
  width: 100%;
  height: 100vh;
  position: relative;
}

/* REPRODUCTOR */

.rplayer{ 
  background: linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.5)
    );
  padding-top: 10px;
  padding-right: 6px;
  padding-left: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
  position:fixed;
  bottom:20px;
  left:20px;
  z-index:999;

}

body{font-family: 'nunito', sans-serif; 
background:url("../assets/pattern.png");
color:#fff;font-size:18px; letter-spacing: 3px; font-weight: 300; text-transform: uppercase;
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;

}


@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

h1{font-size:34px;color: #4b4b40;margin-bottom: 30px;}
h2{font-size:34px;color: #f2b115;margin-bottom: 30px;}
div, p, a, li, td { -webkit-text-size-adjust:none; }
p{font-size:20px;line-height:21px;margin-bottom:12px;color:#fff;  font-family: 'nunito', sans-serif;}
p:last-child{margin-bottom:0px;}

input{
  background: #f68f0a;
  color: #fff; 
  border: 2px solid #f68f0a; 
  font-family: 'nunito', sans-serif; 
  font-size: 21px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
  border-radius: 4px;}

img{display:block; margin: 0 auto;} /* remove bottom padding */ 

.font{font-size: 25px;}
 
}

.passbg{background:transparent url("") no-repeat; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.failbg{background:transparent url("") no-repeat; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.timesupbg{background:transparent url("") no-repeat; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.title{border:2px solid #0069a9; border-radius: 0px; background: #fff;}

.orangebg{background:rgba(253, 199, 70, 1);}
.border{border:2px solid transparent;}
.lightBox{background:rgba(255,255,255,0.9);padding:20px;border-radius:0px; -moz-border-radius:0px;border:1px solid #ddd;}

#timeoutContainer{height:100%;} /* allows for vertical alignment */
#scoreContainer{height:100%;} /* allows for vertical alignment */
.glow{text-shadow: none;}
.white{color:#fff;}
.black{color:#111;}
.grey{color:#666;}
.orange{color:#fff;}
.cent{text-align:center;}

.p_16{font-size:16px;line-height:21px;}
.p_24{font-size:35px;line-height:50px;}
.p_30{font-size:30px;line-height:35px;}
.p_32{font-size:32px;line-height:40px;}
.p_42{font-size:42px;line-height:40px;}


.mcqRadioBtn{width:12px;height:12px;background:#fff;border:1px solid #999;border-radius:5px; -moz-border-radius:5px;}
.optionBox{background:#f68f0a;padding:20px;border:none;border-radius:5px; -moz-border-radius:5px;overflow:hidden !important;}
.optionOverCss{background:#f68f0a;padding:20px;border:none;border-radius:5px; -moz-border-radius:5px;}
.optionOverCss p{color:;}
.optionOutCss{background:#f68f0a;color:#fff;padding:20px;border:none;border-radius:5px; -moz-border-radius:5px;
	-webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;}

.btnOverCss input{background:#f68f0a; color:#fff; border: 2px solid #f68f0a; font-family: 'nunito', sans-serif; border-radius: 5px; font-size: 30px;}




.btnOutCss input{
  background: #f68f0a; 
  color:#fff; 
  border: 2px solid #f68f0a; 
  font-family: 'nunito', sans-serif; 
  font-size: 21px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
  border-radius: 5px; 
  
}
.btnOverCss:hover input{
  background: #f68f0a; 
  color:#fff; 
  border: 2px solid #f68f0a; 
  font-family: 'nunito', sans-serif; 
  font-size: 21px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
  border-radius: 5px; 
    
}
.btnOutCss:hover input{
 background: #f68f0a; 
  color:#fff; 
  border: 2px solid #f68f0a 
  font-family: 'nunito', sans-serif; 
  font-size: 21px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
  border-radius: 5px;   

}

.vertical-align {
  position: relative !important;
  top: 50% !important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* timer */
#timerContainer{text-align: center;}
#timer{margin-top:150px;background:transparent none no-repeat 0px 0px;display:none;opacity:1;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50) ;-moz-opacity:0.5;position:relative !important;}

@media (max-width: 992px) {
  #col1{margin-top:110px;} /* pushes the question down allowing space for the timer */
  #timerRow{width:100%;}
  #timerContainer{text-align: center;width:100%;}
  #timer {margin-top:50px;zoom:0.35;-moz-transform: scale(0.35);-moz-transform-origin: top center;}
  #txt1{margin-top:100px;}
}


/* nav */
#nav{position:absolute;z-index:99;}

/* preloader */
.preloader{
    width:34px;
    height:34px;
    display:inline-block;
    padding:0px;
    
    border-radius:100%;
    border:2px solid;
    border-top-color:rgba(0,0,0, 0.8);
    border-bottom-color:rgba(0,0,0, 0.2);
    border-left-color:rgba(0,0,0, 0.8);
    border-right-color:rgba(0,0,0, 0.2);
    outline: 1px solid transparent;

    -webkit-animation: preloader 1s linear infinite;
    animation: preloader 1s linear infinite;
}
@keyframes preloader{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

/* PRELOADER */

.containers {
  width: 420px;
  margin: 0 auto;
}

.loader-containers {
  width: 92px;
  height: 38px;
  float: left;
}

.abs-center {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@keyframes "spin" {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes "spin" {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes "spin" {
  from {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes "spin" {
  from {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.olympicloader {
  position: fixed;
  z-index:99999999999;
}

.olympicloader .loader-circle {
  width: 28px;
  height: 28px;
  border: 3px solid #589dec;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: spin 800ms infinite linear;
  -moz-animation: spin 800ms infinite linear;
  -ms-animation: spin 800ms infinite linear;
  -o-animation: spin 800ms infinite linear;
  animation: spin 800ms infinite linear;
  float: left;
}

.olympicloader .loader-circle.first {
  position: absolute;
  top: 0;
  left: 0;
  border-top-color: #fff;
}

.olympicloader .loader-circle.second {
  position: absolute;
  top: 0;
  left: 32px;
  border-right-color: #fff;
}

.olympicloader .loader-circle.third {
  position: absolute;
  top: 0;
  left: 64px;
  border-bottom-color: #fff;
}

.olympicloader .loader-circle.fourth {
  position: absolute;
  top: 10px;
  left: 16px;
  border-left-color: #fff;
}

.olympicloader .loader-circle.fifth {
  position: absolute;
  top: 10px;
  left: 48px;
  border-right-color: #fff;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #0b52a4;
  z-index: 1000;
}

#loader-wrapper .loader-section.section-left {
  width: 100%;
}
    
#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);  /* IE 9 */
  transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
  transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
    
.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);  /* IE 9 */
  transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
  transition: all 0.3s 1s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.sn-olimpic {
  display: flex;
  display: -webkit-flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
  -webkit-flex-flow: row wrap;
  -webkit-justify-content: space-between;
  -webkit-align-content: space-between;

}

.sn-olimpic article {
  position: relative;
  flex: 0 0 33.33333%;
  -webkit-flex: 0 0 33.33333%;
  margin: 0 0 0px;
  overflow: hidden; 
}

.footer{
  display: block;
  padding: 15px 20px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  background-color: #0275d8;
  font-family: 'nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 15px;
  /*border-top: 10px dotted #fff;*/
}

.img-res{width: 300px;}

@media (max-width: 767px) {

.font{font-size: 15px;}
.img-res{width: 100px;}
.mobile{display:none;}
}