@font-face {
    font-family: Bariol;
    src: url('../fonts/BARIOL-BOLD.OTF');
}
@font-face {
    font-family: Vag-Black;
    src: url('../fonts/VAGRoundedStd-Black.otf');
}
@font-face {
    font-family: Vag-Light;
    src: url('../fonts/VAGRoundedStd-Light.otf');
}

@font-face {
    font-family: Kidos;
    src: url('../fonts/Letters.ttf');
}

:root {
    --clr-primary--white: #fff;

    --clr-primary--blue: #003d7c;
    --clr-primary--blue50: #6193C6;
    --clr-primary--bluelight: #5bc5f2;

    --clr-primary--orange: #ef7d00;
    --clr-primary--orange50: #FFD977;

    --clr-primary--red: #e30613;

    --clr-primary--green: #005f27;
    --clr-primary--green50: #53AD78;
    --clr-primary--greenlight: #afca0b;

    --clr-primary--purple: #702283;
    --clr-primary--purplelight: #b1a9d4;

    --clr-primary--teal: #009A93;
    --clr-primary--yellow: #FFCC00;

    font-size: 13px;

    --fs-300: 1rem;
    --fs-400: 1.225rem;
    --fs-500: 1.3rem;
    --fs-600: 1.75rem;
    --fs-700: 2.25rem;
    --fs-900: 3.25rem;
    --fs-xl: 5rem;
}


/* @media only screen and (min-width: 1640px) {
    :root {
      --fs-500: 2.325rem;
      --fs-xl: 15rem;
    }
} */


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

body,
h1, 
h2,
h3,
p,
blockquote,
img,
figure {
    margin: 0;
    padding: 0;
}

body{
    background-color: #004f9f;
    background-image: url(../img/background.png);
    background-repeat: repeat;
    background-size: 18%;
    color: #000;
}

main{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

header{
    background-color: var(--clr-primary--white);
    display: flex;
    justify-content:space-between;
    align-items: center;
    font-size: var(--fs-600);
    padding: .5em 1.3em;
    height: fit-content;
}

.richmondLogo{
    max-width: 150px;
    display: none;
    position: absolute;
    bottom: 30px;
    left: 2.8em;
}

.clilLogo{
  width: 100%;
  max-width: 170px;
}

.buscador--home {
    display: flex;
    align-items: center;
}
.legales{
  margin-right: 40px;
  color: #000;
}

.buscador{
  background-color: #fff;
  color: #000;
  font-family: Vag-Light;
  border: 3px solid var(--clr-primary--orange);
  padding: .3em;
  font-size: var(--fs-300);
}
.buscador:focus{
    outline:none;
}
.buscador::-webkit-input-placeholder {
    font-size:var(--fs-400);
}

#busqueda {
  display: none;
}

.item__buscado{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: var(--fs-400);
  font-family: Vag-Light;
  margin: 5px 5px 10px 20px;
  cursor: pointer;
  width: fit-content;
}

#search__result{
  display: flex;
  align-items: center;
  margin: 10px 0px;
  font-size: var(--fs-400);
  font-family: Vag-Light;
}

.results__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#search__result p {
  margin-left: 5px;
}

.navegacion{
    font-size: var(--fs-400);
    padding: 0 1em;
    background-color: #d4ecfc;
    border-top: 8px solid var(--clr-primary--orange);
    border-bottom: 8px solid var(--clr-primary--orange);
    display: grid;
    /* gap: .5em; */
    grid-template-columns: 1fr 1fr;
    height: fit-content;
    justify-items: initial;
    align-items: center;
}

.navegacion--item{
  position: relative;
}
.taskOne, .taskTwo, .taskThree, .taskFour{
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
}
.navegacion--item--img{
    display: flex;
    justify-content: center;
    align-items: center;
}
.navegacion--item--text{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: .5em 0;
    font-size: var(--fs-500);
    font-family: Vag-Light;
}

.navegacion--item--text span {
  font-family: Vag-Black;
  margin-right: 5px;
}

.nav-img{
  cursor: pointer;
  width: 100%;
  max-width: 110px;
  height: auto;
  max-height: 105px;
}

.main-section{
  position: relative;
  display: grid;
  grid-template-rows: auto;
  background-color: #00ACE9;
  height: fit-content;
  /* z-index: -2; */
}


.main-section--content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2em 0 0 0;
  margin: 0 auto;
}

.clil-logo{
    width: 100%;
    max-width: 300px;
}

.text {
  font-size: var(--fs-xl);
  font-family: Bariol;
  width: fit-content;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}

.t1 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  animation: type 2s steps(20, end), curser1 0.8s 3;
  border-right: 18px solid transparent;
  animation-fill-mode: both;
  animation-delay: 1s;
  transition: 0.2s;
}

.t2 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  animation: type 2s steps(19, end), curser 0.8s 2;
  border-right: 18px solid transparent;
  animation-fill-mode: both;
  animation-delay: 3s;
}

.t1:active {
  border-right: 8px solid transparent;
}

@keyframes type {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes curser {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
  100% {
    border-color: transparent;
  }
}

@keyframes curser1 {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
  100% {
    border-color: transparent;
  }
}

.main-section--img{
    position:relative;
    margin: 0 auto;
}
.personaje{
  margin-top: 121px;
    width: 95%;
    margin-bottom: -4px;
}

.menuOneList, .menuTwoList, .menuThreeList, .menuFourList {
  background-color: rgba(255, 255, 255, .9);
  font-family: Vag-Light;
  width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition: all .3s linear;
  position: absolute;
  z-index: 100;
  }
  
  .menuOneList a, .menuTwoList a, .menuThreeList a, .menuFourList a {
    font-size:var(--fs-400);
    text-decoration: none;
    color: black;
    display: block;
  }

  .menuOneList div, .menuTwoList div, .menuThreeList div, .menuFourList div{
    display: flex;
    align-items: center;
}

.menuOneList {
  top: 0;
  left: 0px;
}
.menuTwoList {
  top: 0;
  left: 0px;
}

.menuThreeList {
  top: 0;
  left: 0px;
}

.menuFourList {
  top: 0;
  left: 0px;
}
.menuOneList--item, 
.menuTwoList--item, 
.menuThreeList--item, 
.menuFourList--item, 
.menuOneList--vocabOne,
.menuThreeList--vocabThree,
.menuFourList--vocabFour
{
    padding: .7em 1.5em;
    cursor: pointer;
}
.menuOneList--item:hover, .menuOneList--vocabOne:hover{
    background-color: var(--clr-primary--orange50);
}
.menuTwoList--item:hover{
    background-color: var(--clr-primary--greenlight);
}
.menuThreeList--item:hover, .menuThreeList--vocabThree:hover{
    background-color: var(--clr-primary--bluelight);
}
.menuFourList--item:hover, .menuFourList--vocabFour:hover{
    background-color: var(--clr-primary--purplelight);
}


  .show {
    opacity: 1;
    visibility: visible;
    top: 105px;
  }

  .menuListIcon{
    /* width: 100%; */
    max-width: 35px;
    margin-right: .8em;
}


/* .link {
  cursor: pointer;
} */



  #interna {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .modal--container {
    /* position: relative; */
    /* border: 1px solid transparent; */
    width: 100%;
    height: 100%;
  }


  
   .fechar {
    color: #000;
    /* position: absolute; */
    /* top: 15px;
    right: 25px; */
    font-size:var(--fs-00);
    /* background-color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* transition: 0.6s ease; */
    font-weight: bold;
    /* border-radius: 10px; */
    cursor: pointer;
    font-family: Vag-Light;
    margin-right: 30px;
  }

  #interna .fechar:hover,
  #interna .fechar:focus {
    text-decoration: none;
    cursor: pointer;
    background-color: #ddd;
  }
  
  #interna .lesNum {
    position: absolute;
    top: 18px;
    right: 85px;
    height: 38px;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    padding: 0px 15px;
    display: flex;
    align-items: center;
  }
  
  #interna .lesNum span {
    font-weight: bold;
    font-size: 17px;
    display: inline-block;
    vertical-align: middle;
    font-family: "Proxima Nova Sb", sans-serif;
  }
  
  #interna .lesNum span.numero {
    font-size: 32px;
    font-weight: bold;
    margin-left: 3px;
  }
  
  #interna .actNum {
    position: absolute;
    top: 27px;
    width: 130px;
    right: 85px;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    font-family: "Proxima Nova Sb", sans-serif;
    display: none;
  }
  
  .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    position: relative;
    z-index: 1;
    pointer-events: none;
    display: none;
  }
  
  #interna .boxAct {
    position: absolute;
    width: 100%;
    /* max-width: 1024px; */
    height: 100%;
    left: 0;
    right: 0;
    top: 0px;
    margin: 0 auto;
    background-color: #00ACE9;
    /* border-radius: 15px; */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
    overflow: hidden;
  }
  
  #interna .boxAct .activity {
    /* position: absolute; */
    display: flex !important;
    margin: 0 auto;
    width: 90%;
    height: 100%;
    /* left: 5%; */
    overflow: hidden;
    /* border-radius: 15px; */
    /* border: 2px solid var(--clr-primary--orange); */
  }
  
  #interna .boxAct .activity.fullheight {
    height: 636px;
  }
  
  #interna .seta {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 370px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:var(--fs-500);
    margin: 0em 2em;
  }

  
  #interna .seta.disabled {
    opacity: .6;
    pointer-events: none;
  }
  
  #interna .seta:hover {
    background-position: right;
  }
  
  #interna .seta.esq {
    display: none;
    left: 5px;
  }
  
  #interna .seta.dir {
    display: none;
    right: 5px;
  } 

  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
   .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  .btCredito {
    background-color: #6dcff6;
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-weight: bold;
    font-size: 10px;
    color: #fff;
    text-decoration: none;
    border: 2px solid #00b3e7;
    border-radius: 15px;
    padding: 2px 10px;
    z-index: 100;
  }
  
  .btCredito:hover {
    background-color: #fff;
    color: #36b9e9;
    border-color: #00b3e7;
  }
  
  .btCredito:active {
    background-color: #36b9e9;
    color: #fff;
    border-color: #00b3e7;
  }


.white{
  color: var(--clr-primary--white) !important;
}
.yellow{
  color: var(--clr-primary--yellow);
}
.orange{
  color: var(--clr-primary--orange);
}
.teal{
  color: var(--clr-primary--teal);
}
.green{
  color: var(--clr-primary--green);
}
.blue{
  color: var(--clr-primary--blue);
}
.purple{
  color: var(--clr-primary--purple);
}

.backTaskOne{
  background-color: var(--clr-primary--yellow);
}
.taskOnespace {
  width: 100%;
  height: 30px;
  background-color: var(--clr-primary--yellow);
}
.backTaskTwo{
  background-color: var(--clr-primary--green);
}
.taskTwospace {
  width: 100%;
  height: 30px;
  background-color: var(--clr-primary--green);
}
.backTaskThree{
  background-color: var(--clr-primary--blue);
}
.taskThreespace {
  width: 100%;
  height: 30px;
  background-color: var(--clr-primary--blue);
}
.backTaskFour{
  background-color: var(--clr-primary--purple);
}
.taskFourspace {
  width: 100%;
  height: 30px;
  background-color: var(--clr-primary--purple);
}

.warning{
  font-family: Vag-Black;
  color: var(--clr-primary--red);
  padding: 10px;
}

.legales {
  font-family: Vag-Light;
  font-size:var(--fs-600);
  }

.main-section__legales {
  background-color: #00ACE9;
  font-family: Vag-light;
}

.legales__content{
  width: 85%;
  margin: 0 auto;
  padding: 50px;
}
  
.bold {
  font-family: Vag-Black;
  /*font-size:var(--fs-400);*/
  }

  /* //////////////////////////// media querys /////////////////////////////////// */

@media only screen and (max-width: 550px) {
  :root {
    --fs-xl: 4rem;
  }
  .navegacion{
    grid-template-columns: 1fr;
  }
  .taskOne, .taskTwo, .taskThree, .taskFour{
    align-items: center;
    justify-items: center;
  }
}

@media only screen and (max-width: 650px) {
  header{
    background-color: var(--clr-primary--white);
    display: flex;
    flex-direction: column;
  }
  .clilLogo{
    margin-bottom: 1em;
  }
  
}

@media only screen and (max-width: 1230px) {
  #interna .seta {
    margin: 0em;
  }
  
}



@media only screen and (min-width: 769px) {
  :root {
    --fs-400: 1.285rem;
    --fs-500: 1.43rem;
    --fs-600: 2rem;
    --fs-700: 2.75rem;
    --fs-900: 4rem;
    --fs-xl: 5rem;
  }
  .results__items {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
}

@media only screen and (min-width: 1021px) {
  /* .nav-img{
      position: absolute;
  } */
  .navegacion{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .main-section{
    grid-template-columns: 1fr 1fr;
  }
  .main-section--content{
    padding: 5em 0 0 5em;
  }
  .richmondLogo{
    display: block;
  }
  .results__items {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media only screen and (min-width: 1259px) {
  :root {
    --fs-xl: 6.4rem;
  }
  main{
    width: 100%;
    max-width: 1440px;
    height: auto;
  }
  .modal--container {
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    height: auto;
  }
}






/* ESTILOS DE VOCAB ANIMALS */

#internaVocab {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #00ACE9;
  padding-bottom: 100px;
}

#contenedor{
  margin: 0 auto;
  width: 100%;
  max-width: 1124px;
  height: fit-content;
  margin-bottom: 50px;
  /* border: 1px solid red; */
}

.title {
  font-size: var(--fs-900);
  font-family: Vag-Light;
  color: var(--clr-primary--white);
  margin-left: 100px;
  margin-top: 40px;
}

.content {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  margin-top: 20px;
}

.content figure {
  position: relative;
  overflow:hidden;
  cursor: pointer;
}

.content figure img {
  width: 90%;
  margin: 10px;
  outline: 4px solid var(--clr-primary--orange);
}

.content figure figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  position:absolute;
  left:10px;
  width: 90%;
  height:60px;
  z-index:1;
  background: rgba(255, 255, 255, .1);
  font-family: Vag-Light;
  font-size: var(--fs-700);
  transition: all .3s linear;
}


.content figure:hover figcaption {
  bottom:13px;
  color: #000;
  background: rgba(255, 255, 255, 1);
  
}


@media only screen and (min-width: 1021px) {
  .content {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
  }
}

@media only screen and (max-width: 550px) {
  .content {
    display: grid;
    grid-template-columns: 100%;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 769px) {
  .content {
    display: grid;
    grid-template-columns: 100%;
  }
}


.btn-position {
  position: fixed;
  bottom: 15px;
  right: 50px;
  z-index: 20;
}

.btn-style {
  background-color: #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

#loader {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0px;
  display: none;
}

#loader > img {
  width: var(--fs-600);
}