@font-face {
    font-family: 'akzidenz-grotesk_bqbold';
    src: url('../fonts/akzidenzgrotesk-bold-webfont.woff2') format('woff2'),
         url('../fonts/akzidenzgrotesk-bold-webfont.woff') format('woff'),
         url('../fonts/akzidenzgrotesk-bold-webfont.ttf') format('truetype'),
         url('../fonts/akzidenzgrotesk-bold-webfont.svg#akzidenz-grotesk_bqbold') format('svg');
    font-weight:normal; font-style:normal;
}
@font-face {
    font-family: 'akzidenz-grotesk_bqmedium';
    src: url('../fonts/akzidenzgrotesk-medium-webfont.woff2') format('woff2'),
         url('../fonts/akzidenzgrotesk-medium-webfont.woff') format('woff'),
         url('../fonts/akzidenzgrotesk-medium-webfont.ttf') format('truetype'),
         url('../fonts/akzidenzgrotesk-medium-webfont.svg#akzidenz-grotesk_bqmedium') format('svg');
    font-weight:normal; font-style:normal;
}

.contenedor_seccion.pronunciacion * {box-sizing: border-box;}

   .wrapper2 {padding:0 10%;}
   .wrapper2.home {padding:0 5%;}
   .clear {clear:both;}
   .hidden {display:none!important;}
   .linea {clear:both; display: block; margin:45px auto; width:50%; height: 3px; background:#2BB2FF; }

/*HOME*/
   .header {background:url('../img/header.jpg') #d7ecf1 no-repeat; width: 100%; height: 230px; padding: 20px 0 0 9%; margin: 0 0 30px 0; background-position: right; background-size: auto 100%;}
   .header p {font-size:53px; color:#2BB2FF; line-height: 1.1; font-family: 'akzidenz-grotesk_bqmedium', 'Trebuchet MS', sans-serif; padding: 0;}
   .header p strong {font-family: 'akzidenz-grotesk_bqbold', 'Trebuchet MS', sans-serif; font-size:55px;}
   .header p a {color:inherit; text-decoration: none;}

   .intro {font-style: italic; font-size: 18px; color:#484848; margin:0 0 30px 0; line-height: 1.3; padding: 0 5%;}
   .intro a {color:#484848;}

   .course_type {font-size:21px; font-family:'akzidenz-grotesk_bqbold', 'Trebuchet MS', sans-serif; color: #2BB2FF; padding-bottom: 30px; line-height: 1.1; padding-left: 5%;}

   .units {padding:0; margin:0; list-style: none; display: flex; flex-wrap: wrap;}
   .units li {list-style: none; text-align: center; display:block; float: left; width:16.6666%; margin:0 0 30px 0; padding: 0;}
   .units li a {text-decoration: none; text-align: center; width: 100%;}
   .units li a:hover .number {color:#888888}
   .units li .number {color:#E4EAF6; background: #2BB2FF; border-radius: 20%; height: 120px; width: 120px; line-height: 120px; font-size: 80px; font-family: 'akzidenz-grotesk_bqbold', 'Trebuchet MS', sans-serif; margin:0 auto 10px auto;}
   .units li .title {font-size:16px; color:#484848; line-height: 1.1; margin-bottom: 5px; font-weight: bold;}
   .units li .amount {font-size:15px; color:#888888; line-height: 1.1; font-style: italic;}
   .units li .name {font-size:16px; color:#484848; line-height:1.1; margin-bottom:5px; font-weight:bold; height:48px; display: table-cell; vertical-align: middle; padding: 0 5px;}
   #units_named li .number {margin-bottom:2px;}


   .mictest {padding:0 5%;}
   .mictest p.tit {font-size:24px; font-family:'akzidenz-grotesk_bqbold', 'Trebuchet MS', sans-serif; color: #2BB2FF; text-transform: uppercase; line-height: 1.1;}
   .mictest p {font-size:18px; color:#999999;}
   #analyser {width:100%; height:200px; display:block; margin:0 0 15px 0; border:#2BB2FF 4px solid;   }


/*UNIT PAGE*/
   .unidad {color:#E4EAF6; background: #2BB2FF; border-radius: 50%; height: 50px; width: 50px; line-height: 50px; font-size:34px; font-family: 'akzidenz-grotesk_bqbold', 'Trebuchet MS', sans-serif; margin:0; float: left; text-align: center;}
   .cantidad {float:left; line-height: 50px; font-size: 16px; color:#484848; font-style: italic; margin:0 0 0 15px;}
   .volver.ontop {line-height: 50px;}

   .lessons {list-style: none; padding:0; margin:0;}
   .lessons li {list-style: none; float:left; background: #D3EDF4; border-radius: 25px; text-align: center; padding:20px 5px; width: 21.25%; margin: 0 5% 30px 0; min-height: 160px; position: relative;}
   .lessons li:nth-child(4n) {margin-right:0;}
   .lessons li .lesson_numb {font-weight: bold; font-size: 16px; color:#484848; margin-bottom:20px;}
   .lessons li .lesson_name {font-style:italic; font-size: 14px; color:#484848; margin-bottom:5px; line-height: 1.1;}
   .lessons li .cant_audios {font-style:italic; font-size: 14px; color:#888888;}
   .lessons li .empezar {position:absolute; bottom:20px; left:0; width:100%; }
   .lessons li .empezar a {font-weight: bold; font-size: 14px; color:#2BB2FF; text-decoration: none;  text-align: center;}
   .lessons li .empezar a:hover {color:#848484;}
   .lessons li .empezar a:visited {color:#7EB530;}

   .volver {margin:0 0 30px 0; color:#484848; font-size:16px; text-decoration:none; float:right; font-weight:bold;}
   .volver:hover {text-decoration: underline;}


/*LESSON PAGE*/
   .frame-audio {width:100%; border:0; margin: 0 0 30px 0; height: 680px;}

/*AUDIO PAGE (FRAMED)*/
   .contenedor_ppal_audio * { box-sizing: border-box;}

   .audio-anterior, .audio-siguiente {padding:3px 10px 5px 10px; color:#2BB2FF; background:#D3EDF4; border-radius:6px; font-weight:bold; text-decoration:none; font-size: 16px;}
   .audio-anterior {float:left;}
   .audio-siguiente {float:right;}
   .audio-anterior:hover, .audio-siguiente:hover {background:#2BB2FF; color:white;}

   .audio {color:#E4EAF6; background: #2BB2FF; border-radius:15px; height: 180px;}
      .lesson-box {float:left; background: #D3EDF4; border-radius:14px; text-align: center; padding:65px 10px 0 10px; width:23%; margin:0; height:100%; position: relative;}
      .lesson-box .lesson_numb {font-weight: bold; font-size: 16px; color:#484848; margin-bottom:20px;}
      .lesson-box .lesson_name {font-style:italic; font-size: 14px; color:#484848; margin-bottom:5px; line-height: 1.1;}

      .text-box {float:left; height: 100%; padding:0 0 0 3%; position:relative; width:57%; display: table;}
         .play-container {text-align:center; width: 45px; padding: 0 15px 0 0; position: relative;  display:table-cell; height:100%; vertical-align:middle;}
            #play-audio {background: url(../img/play_gris.png) no-repeat center center; height:45px; width:45px; border:none; margin:0; padding: 0; cursor:pointer; background-size:100% 100%;}
            #play-audio.playing {background: url(../img/stop_gris.png) no-repeat center center; height:45px; width:45px; border:none; margin:0; padding: 0; cursor:pointer; background-size:100% 100%;}
            #play-audio:hover {filter:brightness(1.2); -webkit-filter:brightness(1.2);}
            #info {cursor:pointer;}
            #info:hover {filter:brightness(0.5); -webkit-filter:brightness(0.5);}
         .text-es {background:#E4E4E4; color:#848484; font-size:15px; line-height:1.1; display:block; position:absolute; padding:5px 10px; max-width:100%; text-align:left; top:118px; left:5%; box-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
         .text-en {color:#fff; font-size: 19px; line-height: 1.1; padding:0 0 0 0; display:table-cell; height: 100%; vertical-align: middle; }
         .text-en:hover {cursor: help; text-decoration: underline;}

      .record-box {float:right; height:100%; padding:45px 0 0 0; width: 20%; text-align: center;}

      #controls {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-around;
         height: 20%;
         width: 100%;
      }
      #record { height:84px; width:84px; box-shadow:2px 2px 4px rgba(0,0,0,0.4); cursor:pointer; background: url(../img/record.png) no-repeat center center #ffffff; border:none; border-radius:100%; background-size:100%;}
      #record.recording {background: url(../img/stop.png) no-repeat center center; background-size:100%;}
      #record:active {box-shadow:none;}
      #record:hover {filter:brightness(0.9); -webkit-filter:brightness(0.9);}

   .explicacion {color:#2BB2FF; font-size:13px; text-align:right; font-weight: bold; font-style: italic; padding: 2px 25px 0 0;}


/*TRYS*/
#tries_container {border:none; width: 100%; margin-top:20px; position:relative;}

   #loading {text-align:center; font-weight:bold; position: absolute; top:50px; left:50%; z-index: 99;}
   #loading img { height:50px;}

   .try {display:block; width:100%; position:relative; clear:both; }
      .try_number {width:30%; float:left; line-height:27px; font-size:16px; font-family:'Trebuchet MS', sans-serif; color:#484848;}
      .try_error {width:70%; float:left; line-height:1; font-size:14px; font-family:'Trebuchet MS', sans-serif; color:#ED1C24;}
      .try_bar {width:65%; float: left; height: 27px; border-radius: 10px; overflow: hidden; background:#D3EDF4; margin-bottom:21px;}
      .try_bar .fill {background:#2BB2FF; height:100%; width:0%; transition:0.5s width linear;}
      .try_play {width:5%; float:left; height: 27px;}
      .try_play:hover {filter:brightness(0.9); -webkit-filter:brightness(0.9);}
         #save {display:none;}
         #save[download] {display:none;}

         #play_recorded {cursor:pointer; color:white; font-weight:bold; text-align:right; margin:0 auto;}

   .words_result {position:absolute; left:0; top: 28px; font-size:13px; line-height:13px; font-weight:bold;}
   .word_success {color:#7EB530; }
   .word_fail {color:#ED1C24; }


   .result  {width:100%; border-radius:30px; clear:both; height:85px; position:relative; margin-bottom:15px; display:table;}

   .result.successful {background:#DEF0A5; background-image:url('../img/ok.png'); background-repeat:no-repeat; background-size:40px; background-position:14px center; color:#7EB530;}
   .result.decent {background:#FFCC5C; background-image:url('../img/almost_ok.png'); background-repeat:no-repeat; background-size:40px; background-position:14px center; color:#C08B16}
   .result.failure {background:#FFC7DE; background-image:url('../img/not_ok.png'); background-repeat:no-repeat; background-size:40px; background-position:14px center; color:#AF315F;}

      .result .result_text {font-size:18px; max-width:66%; color:inherit; display:table-cell; vertical-align: middle; padding:0 10px 0 68px;}
      .result .boton_result {border-radius:6px; font-weight:bold; text-decoration:none; font-size:16px; float:right; margin:30px 14px 0 0; padding:3px 10px 5px 10px; color:#fff; width:147px;}

      .result.successful .boton_result {background:#7EB530;}
      .result.decent .boton_result {background:#C08B16;}
      .result.failure .boton_result {background:#AF315F;}






@media (max-width:1280px) {

   .units li {width:20%;}

}




@media (max-width:1023px) {
   .wrapper2 {padding:0 5%;}
   .header_units {padding-left:5%; }
   
   .units li {width:25%;}

}



@media (max-width:815px) {
   .wrapper2 {padding:0 3%;}
   /*HOME*/
   .header {height:190px;}
   .header p {font-size: 42px;}
   .header p strong {font-size: 48px;}
   .units li {width:33.333%;}
   #units_named li {width:50%;}
   /*LESSONS*/
   .header_units {padding-left:5%; padding-right: 3%;}
   .header_units p {font-size: 28px;}
   .lessons li {width:31%; margin: 0 3.5% 30px 0; min-height: 168px;}
   .lessons li:nth-child(4n) {margin-right:3.5%;}
   .lessons li:nth-child(3n) {margin-right:0;}

   .frame-audio {height:760px;}


}



@media (max-width:525px) {

   /*HOME-UNITS*/
   .header {height:135px; background-size:auto 100%; background-position: right;}
   .header p {font-size:30px;}
   .header p strong {font-size:32px;}
   .units li {width:50%;}
   #units_named li {width:100%;}
   .units li .name {font-size:15px;}
   .units li .title {font-size:15px;}
   .units li .amount {font-size:14px;}
   .mictest p.tit {font-size:20px;}

   /*LESSONS*/
   .header_units {padding-left:3%; padding-right: 5%; }
   .header_units p {font-size: 20px;}
   .lessons li {width:100%; margin: 0 0 15px 0; min-height: 150px;}


}

@media (max-width:355px) {



}






/*WIDTH DEL IFRAME AUDIO*/
@media (max-width:695px) {
   .result .ok {width:55px; margin:22px 0 0 14px;}
}

@media (max-width:554px) {

   .audio {border-radius: 15px; height: 245px;}
      .lesson-box {float:none; border-radius:15px 15px 0 0;  padding:10px 0 0 0; width:100%; margin:0; height:57px;}
      .lesson-box .lesson_numb {margin-bottom:5px;}

      .text-box {float:none; height: auto; width: 100%; padding: 15px 15px 15px 3%;}

      .record-box {float:none; width: 100%; clear:both; height:auto; padding:0;}

      .text-es {top:64px; left:13%;}

   .explicacion {padding:2px 15px 0 0;}

   .try_number {width:30%; font-size:14px;}
   .try_bar {width:63%;}
   .try_play {width:7%;}

	.result  {border-radius:15px;}
   .result .result_text {font-size:16px;}
}

@media (max-width:320px) {
	
	.cantidad {margin:0 0 0 5px;}

   .result .result_text {font-size:16px;}
   .result .boton_result {width:90px; text-align:center; margin:24px 14px 0 5px;}

   .try_number {width:35%;}
   .try_bar {width:55%;}
   .try_play {width:9%;}

   .text-en {font-size:18px;}


}