/* ************ perfiles 2024 ************** */
@font-face {
  font-family: 'Druk Text Web Bold';
  src: url('../druk/DrukText-Bold-Web.eot');
  src: url('../druk/DrukText-Bold-Web.eot?#iefix') format('embedded-opentype'),
  url('../druk/DrukText-Bold-Web.woff2') format('woff2'),
  url('../druk/DrukText-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
  
@font-face {
  font-family: 'Druk Text Web Medium';
  src: url('../druk/DrukText-Medium-Web.eot');
  src: url('../druk/DrukText-Medium-Web.eot?#iefix') format('embedded-opentype'),
  url('../druk/DrukText-Medium-Web.woff2') format('woff2'),
  url('../druk/DrukText-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
    font-family: 'TheSansC4s';
    src: url('../thesans/TheSans-3_Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'TheSansC4s';
    src: url('../thesans/TheSans-5_Plain.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'TheSansC4s';
    src: url('../thesans/TheSans-7_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'TheSansC4s';
    src: url('../thesans/TheSans-9_Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'TheSansCdC4s';
    src: url('../thesans/TheSansCd-3_Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'TheSansCdC4s';
    src: url('../thesans/TheSansCd-5_Plain.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'TheSansCdC4s';
    src: url('../thesans/TheSansCd-7_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}


body {
  font-size: 1rem;
  color: #000000;
  background-color: #F8FAFB !important;
}

.redes{
    opacity: 1;
    max-width: 33px !important;
    margin: 0px 1px;
    transition: transform .3s; /* Animation */
}
.redes:hover{
    opacity: 0.8;
    transform: scale(1.2);
}
.head_exp{
    top:0px;
    background-color: #ed1c24;
    padding: 0.7em;
    left: 0px;
    position: fixed;
    display: block;
    width: 100%;
    border-bottom-color: #000;
    border-right-width: 2px;border-bottom-style:solid;
    z-index: 99; -webkit-transition: background-color 0.6s ease-out; -moz-transition:
        background-color 0.6s ease-out; -o-transition: background-color 0.6s ease-out;
    transition: background-color 0.6s ease-out;
}
.head_exp:hover{
    background-color: #000;
}

a {
  color: #007BC3 !important;
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Druk Text Web Medium', sans-serif !important;
	font-weight: 500;
	text-transform: uppercase;
    line-height: 1em;
}

p{
  font-family: 'Georgia' !important;
  line-height: 1.5;
  font-size: 20px;
  color: #000000;
}

.s-1{
  padding-top: 7em;
  padding-bottom: 2em;
}

.s-2{
  padding-top: 2em;
  padding-bottom: 2em;
}

.logo-perfil{
    position: fixed;
    top: 40px;
    right: 5px;
    z-index: 999;
    max-width: 170px;
}
.recuadro{
    background-color: #C9E9EA;
    position: absolute;
    width: 13%;
    height: 900px;
    right: 0;
    z-index: -1;
}
.recuadro-2{
    background-color: #FE6225;
    position: absolute;
    width: 5%;
    top: 450px;
    height: 600px;
    left: 0;
    z-index: -4;
}

.dataBase{
  margin-left: 15px;
}
.nombre h1 {
  text-transform: uppercase;
  line-height: 1em;
  font-size: 4.7em;
  color: #000000;
  font-family: 'Druk Text Web Medium', sans-serif !important;
  font-weight: 500;
  text-align: left;
}

.nombrepeque h1 {
  text-transform: uppercase;
  line-height: 1em;
  font-size: 3.4em;
  color: #000000;
  font-family: 'Druk Text Web Medium', sans-serif !important;
  font-weight: 500;
  text-align: left;
}

.nombre h2{
  font-family: "TheSansCdC4s", Verdana, sans-serif !important;
  font-weight: 300;
  color: #000000;
  padding: 4% 0;
  margin-bottom: 0;
  font-size: 1.4em;
}

.nombrepeque h2{
  font-family: "TheSansCdC4s", Verdana, sans-serif !important;
  font-weight: 300;
  color: #000000;
  padding: 4% 0;
  margin-bottom: 0;
  font-size: 1.4em;
}

.pie-foto h6{
    font-family: "TheSansC4s", Verdana, sans-serif !important;
    padding: 5px;
    font-weight: 700;
    font-size: 13px;
}

.credit-text{
  font-size:15px;
}

.edad{
  background-color: #FE6225;
  inline-size: fit-content;
  padding: 15px 0;
  background-clip:content-box;
}
.edad h3 {
  text-transform: uppercase;
  line-height: 1em;
  font-size: 4em;
  color: #ffffff;
  margin: 30px 30px 0 30px;
}
.edad h4 {
  line-height: 1em;
  font-size: 2em;
  color: #ffffff;
  margin: 0 30px 30px 30px;
}

.edadpeque{
  background-color: #FE6225;
  inline-size: fit-content;
  padding: 15px 0;
  background-clip:content-box;
}
.edadpeque h3 {
  text-transform: uppercase;
  line-height: 1em;
  font-size: 4em;
  color: #ffffff;
  margin: 30px 30px 0 30px;
}
.edadpeque h4 {
  line-height: 1em;
  font-size: 2em;
  color: #ffffff;
  margin: 0 30px 30px 30px;
}

.capitular h2{
    font-size: 18em;
    line-height: 1;
    color: #000000;
    font-family: 'Druk Text Web Medium', sans-serif !important;
    font-weight: 500;
    text-align: center;
}

.quote-big-comillas h2{
    font-family: 'Druk Text Web Medium', sans-serif !important;
    font-weight: 500;
    font-size: 150px;
    color: #007BC3;
    margin-bottom: -60px !important;
}
.quote-big-comillas h3{
    font-family: 'Druk Text Web Medium', sans-serif !important;
    font-weight: 500;
    font-size: 45px;
    color: #000000;
    line-height: 1.2;
}


.botX_2{
	position: fixed;
	top: 60px;
	left: 3px;
  width: 55px;
  z-index: 999;
  max-width:100px;margin: 10px;
   -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.botX_2:hover{
  -webkit-transform: rotate(90deg);
  transform: rotate(-90deg);
}

.mobile {
  display: none;
}
.desk {
  display: block;
}


/*------------------------------------------------------
MediaQuerys
-------------------------------------------------------*/
@media (min-width: 576px) and (max-width: 1024px) {
    .edad h3{
        font-size: 1.3em;
    }
    .edad h2 {
        font-size: 1.5em;
    }

    .li.complete .status:before {
        left: 45%;
        top: -30%;
        transition: all 200ms ease-in;
    }
}

@media (min-width: 200px) and (max-width: 575px) {
    p{
        padding-right: 15px;
        padding-left: 15px;
        line-height: 1.5;
        font-size: 1.2em;
    }
    .s-1 {
        padding-top: 6.5em;
        padding-bottom: 20;
    }
    .recuadro {
        position: absolute;
        width: 100%;
        height: 250px;
    }
    .recuadro-2 {
        position: absolute;
        width: 2%;
        top: 450px;
        height: 500px;
    }
    .nombre{
        text-align: center !important;
    }
    .dataBase {
        margin-left: 15px;
        margin-right: 15px;
        text-align: center !important;
    }
    .edad{
        text-align: center !important;
        padding: 10px 90px;
        inline-size: auto;
    }
    .edad h3 {
        line-height: 1em;
        font-size: 2.5em;
        text-align: center;
    }
    .edad h4 {
        text-align: center;
    }

    .edadpeque{
        text-align: center !important;
        inline-size: fit-content;
        padding: 4px;
        inline-size: auto;
    }
    .edadpeque h3 {
        line-height: 1em;
        font-size: 2.3em;
        text-align: center;
        margin: 10px;
    }
    .edadpeque h4 {
        text-align: center;
        color: #ffffff;
        font-size: 1.6em;
        margin: 10px;
    }

    .nombre h1{
        padding-top: 8%;
        font-size: 3.8em;
        text-align: center !important;
    }

    .nombrepeque h1 {
      font-size: 2.7em;
      text-align: center;
    }

    .quote-big-comillas{
        padding-right: 15px;
        padding-left: 15px;
    }
    .logo-vertical img{
        width: 90%;
        text-align: center;
        padding: 40px 0;
    }

  .file_name {
    text-align: center;
  }
  .file_name h1 {
    font-size: 35px;
  }
  .nota img {
    margin-top: 30px;
    width: 100%;
  }
  .photo_principal img{
    width: 100%;
  }
  .posicion p {
    line-height: 1em;
    font-size: 1.5em;
    font-weight: 300;
    text-align: center;
  }

  .botX_2 {
    position: fixed;
    top: 53px;
    left: 2px ;
    width: 35px;
    z-index: 999;
    max-width: 100px;
    margin: 10px;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
  }

  .credito p {
    padding: 30px 0 10px 0;
    font-size: 0.8em;
  }

  .frase h2 {
    line-height: 1.2;
    font-size: 32px;
    text-align: center;
  }
  .frase span {
    line-height: 1.4;
    padding: 0 10px;
    font-size: 80px;
  }

  .f-larga h2{
    font-size: 32px !important;
  }

  .destacado h2 {
    font-size: 30px;
  }

  .content h2 {
    text-align: left !important;
    }

  .content img{
      width: 80%;}

  .texto h3 {
    text-transform: uppercase;
    line-height: 1.2em;
    font-size: 1.5em;
    text-align: left;
  }

  .mobile {
    display: block;
  }

  .desk {
    display: none;
  }

  .img_principal {
    width: 100%;
    margin: auto;
  }

  .quote-numero h3 {
    font-size: 90px;
    line-height: 1.1;
  }



}