@font-face {
    font-family: 'D-DIN Condensed Bold';
    src: url('../fonts/D-DINCondensed-Bold.woff2') format('woff2'),
        url('../fonts/D-DINCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Italic';
    src: url('../fonts/D-DIN-Italic.woff2') format('woff2'),
        url('../fonts/D-DIN-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN';
    src: url('../fonts/D-DIN.woff2') format('woff2'),
        url('../fonts/D-DIN.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Bold';
    src: url('../fonts/D-DIN-Bold.woff2') format('woff2'),
        url('../fonts/D-DIN-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Exp Bold';
    src: url('../fonts/D-DINExp-Bold.woff2') format('woff2'),
        url('../fonts/D-DINExp-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Condensed';
    src: url('../fonts/D-DINCondensed.woff2') format('woff2'),
        url('../fonts/D-DINCondensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Exp Italic';
    src: url('../fonts/D-DINExp-Italic.woff2') format('woff2'),
        url('../fonts/D-DINExp-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Exp';
    src: url('../fonts/D-DINExp.woff2') format('woff2'),
        url('../fonts/D-DINExp.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*LOADER*/
.loader{
  width:100%;
  height: 100%;
  top:0;
  left:0;
  background: #FFFFFF url(../images/intro/background.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  position: fixed;
  z-index: 10000000;
  font-family: 'wwfregular';
  text-align: center;
  font-size: 20px;
  overflow: hidden;
  transition: .3s;
}
.load{
  position: absolute;
  left:50vw;
  top:50vh;
  transform: translate(-50%, -50%);
}
.load_logo img{
  width: 150px;
}
.load_text{
  margin-top: 17px;
}
.load_loader img{
  width: 250px;
}
.loader_out{
  height: 0;
}

em{
  font-family: D-DIN Condensed;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.5px;
    font-size: .94em;
}

.silvestre {
  margin-top: -12px;
}

.desktop{
  display: block;
}
.mobile{
  display: none;
}
.the_web{
  /*transition: 1s;*/
}
.ocuto{
  visibility: hidden;
  opacity: 0;
}

/*MENU*/
.menu{
  position: fixed;
  height: 100%;
  top:0;
  right:0;
  z-index: 10000;
}
.menu2{
  position: fixed;
  width:100%;
  height: 100%;
  top:0;
  left:0;
  z-index: 10000;
}
.menu-it{
  position: absolute;
  transform: scale(.6);
  top: 50%;
  left: 50%;
  cursor: pointer;
  transition: .3s;
}
.menu-it:hover{
  transform: scale(.66);
}
.menu-it .text{
  position: absolute;
  font-family: 'humblle';
  font-size: 24px;
  color: #f5ac1f;
  z-index: 1;
  line-height: 22px;
  text-align: right;
}
.scroll{
  position: absolute;
  right: 12px;
  bottom: 50px;
  cursor: pointer;
  transition: .3s;
}
.scroll:hover{
  transform: scale(1.1);
}
.scroll img{
  width: 60px;
}
.scroll .text{
  font-family: 'humblle';
  font-size: 20px;
  color: #555d46;
  width: 120px;
}
.scroll-up{
  position: absolute;
  right: 10px;
  bottom: 170px;
  cursor: pointer;
  transition: .3s;
}
.scroll-up:hover{
  transform: scale(1.1);
}
.scroll-up img{
  width: 60px;
  transform: rotate(180deg);
}
.scroll-up .text{
  font-family: 'humblle';
  font-size: 20px;
  color: #555d46;
  width: 120px;
}
.hamburger{
  position: absolute;
  right: 40px;
  top: 25px;
  cursor: pointer;
  transition: .3s;
}
.hamburger:hover{
  transform: scale(1.1);
}
.hamburger img{
  width: 60px;
}
.hamburger .text{
  font-family: 'humblle';
  font-size: 20px;
  color: #555d46;
  position: absolute;
}
.dona{
  position: absolute;
  right: 40px;
  top: 85px;
  cursor: pointer;
  transition: .3s;
}
.dona:hover{
  transform: scale(1.1);
}
.dona img{
  width: 60px;
}
.dona .text{
  font-family: 'humblle';
  font-size: 20px;
  color: #754825;
  top: 29px;
  left: 10px;
  position: absolute;
}

.lion-en .dona .text{
  font-family: 'humblle';
  font-size: 14px;
  color: #754825;
  top: 36px;
  left: 5px;
  position: absolute;
}

.peticion{
  position: absolute;
  right: 40px;
  top: 175px;
  cursor: pointer;
  transition: .3s;
}
.peticion:hover{
  transform: scale(1.1);
}
.peticion img{
  width: 60px;
}
.peticion .text{
  font-family: 'humblle';
  font-size: 14px;
  color: #754825;
  top: 14px;
  left: 7px;
  position: absolute;
}

.logo-cola{
  position: fixed;
  left: 20px;
  top: 0;
  z-index: 100000;
  height: 170px;
  cursor: pointer;
}
.logo-cola .log{
    position: absolute;
    height: 65px;
    left: 59px;
    top: 32px;
}
.logo-cola img{
  height: 100%;
}

/*MENU2*/
.menu2 .rey {
  margin-top: -376px;
  margin-left: -242px;
}
.menu2 .rey .text {
  width: 100px;
  bottom: 62px;
  left: 16px;
}
.menu2 .habitantes {
  margin-top: -194px;
  margin-left: 59px;
}
.menu2 .habitantes .text {
  width: 120px;
  bottom: 12px;
  right: 33px;
}
.menu2 .dominios {
  margin-top: -228px;
  margin-left: -65px;
}
.menu2 .dominios .text {
  width: 100px;
  bottom: 36px;
  right: 37px;
}
.menu2 .amenazas {
  margin-left: -86px;
  margin-top: -120px;
}
.menu2 .amenazas .text {
  width: 100px;
  bottom: 35px;
  left: 37px;
}
.menu2 .dona2 {
  margin-top: 3px;
  margin-left: 13px;
}
.menu2 .dona2 .text {
  width: 100px;
  top: 52px;
  right: 33px;
}

/*MENU OPEN*/
.menu-opened{
  visibility: visible !important;
  opacity: 1 !important;
}
.menu-open {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background: rgba(0, 0, 0, .5);
    transition: .1s;
}
.menur {
  position: absolute;
  right: 150px;
  width: 200px;
  top: 30px;
}
.menur ul {
  margin:0;
  padding:0;
}
.menur li {
  background: #FFF;
  padding: 10px;
  text-transform: uppercase;
  color: #f9ae1f;
  list-style: none;
  margin: 0;
  display: inline-block;
  width: calc(100% - 20px);
  border: 1px solid #f9ae1f;
  margin-bottom: 6px;
  font-family: 'wwfregular';
  font-size: 24px;
  transition: .3s;
  cursor: pointer;
}

.menur li:hover {
  background: #f9ae1f;
  color: #FFF;
}
.close{
  position: absolute;
  right: 40px;
  top: 25px;
  cursor: pointer;
  transition: .3s;
}
.close:hover{
  transform: scale(1.1);
}
.close img{
  width: 60px;
}
.close .text{
  font-family: 'humblle';
  font-size: 20px;
  color: #555d46;
  position: absolute;
}

.flag{
    position: fixed;
    z-index: 1000;
    bottom: 70px;
    left: 20px;
}

.flag a{
  display: block;
  width: 30px;
  height: 0px;
}

.legals{
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 10000;
}

.legals ul{
  margin: 0;
  padding: 0;
  display: block;
}

.legals li{
  display: inline-block;
  float: left;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid #774826;
}

.legals a{
  color: #774826 !important;
  font-family: 'wwfregular';
  text-decoration: none !important;
  text-transform: uppercase;
  font-size: 12px;
}

.legals a:hover{
  text-decoration: underline !important;
}

.legals .finarl {
    padding-right: 0;
    margin-right: 0;
    border: none;
}

@media (max-width: 770px) {

  .legals li {
    padding-right: 8px;
    margin-right: 8px;
  }
  .legals{
    bottom: 20px;
    left: inherit;
    right: 23px;
  }
  .menur {
    right: 50%;
    margin-right: -100px;
  }
  .dona {
    right: 18px;
    top: 60px;
    transform: scale(0.8);
  }
  .dona:hover {
    transform: scale(0.8);
  }
  .peticion {
    right: 18px;
    top: 130px;
    transform: scale(0.8);
  }
  .peticion:hover {
    transform: scale(0.8);
  }
  .scroll {
    right: -2px;
    bottom: 68px;
    transform: scale(0.8);
  }
  .scroll:hover {
    transform: scale(0.8);
  }
  .scroll .text{
    font-size: 17px;
    width: 100px;
  }

  .scroll-up {
    right: -5px;
    bottom: 148px;
    transform: scale(0.8);
  }
  .scroll-up:hover {
    transform: scale(0.8);
  }
  .scroll-up .text{
    font-size: 17px;
    width: 100px;
  }
  .hamburger {
    right: 18px;
    top: 15px;
    transform: scale(0.8);
  }
  .hamburger:hover {
    transform: scale(0.8);
  }
  .close {
    right: 18px;
    top: 15px;
    transform: scale(0.8);
  }
  .close:hover {
    transform: scale(0.8);
  }
}
@media (max-width: 650px) {
  .desktop{
    display: none;
  }
  .mobile{
    display: block;
  }
  .logo-cola {
    transform: scale(.75);
    left: -36px;
    bottom: -27px;
    top: inherit;
  }
  .silvestre {
    height: 90% !important;
    margin-left: 28px;
    margin-top: -10px;
  }
  .logo-cola .log {
    left: 43px;
    top: 59px;
  }
  .flag {
    left: inherit;
    right: 23px;
  }
  .text-right{
    text-align: left !important;
  }
}