/* diseño,montaje html y front-end UX/UI por Rafael Olea contacto@rafelolea.cl www.rafaelolea.cl */
@import url("font-awesome/css/font-awesome.min.css"); /* icons FontAwesome 4 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
body {color: #000000; font-family: 'Poppins', sans-serif;}
h1 {font-size: 2.3em; color: #D31D20; font-weight: 500;}
h2 {font-size: 2.3em; font-weight: 300; color: #D31D20;}
h3 {font-weight: 500; color: #000000; }
h4 {font-size: 2.3em; font-weight: 300; color: #fff;}
a {color: #D31D20;}
a:hover {text-decoration: none; color: #000000; }
p {font-size: 1.2em; font-weight:300; color: #000000;}
p strong {color:#D31D20;}
ul {font-size: 1.1em; font-weight: 300;}
ul li strong {color:#D31D20; font-weight: 400;}
.breadcrumb {margin: 2em 0; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #f9f9f9; font-size: 13px;}
.breadcrumb a {color:#D31D20;}

.h-fondo {background:url(../images/fondo-cabecera.jpg) center top no-repeat; }
.btn {padding: 0.375rem 1.2rem; font-weight: 200; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
.btn-outline-danger {background-color: #ffffff; border:2px solid #D31D20; font-weight: 500; }
.logotipo {text-align: center;}
.logotipo img {width: 250px; height: auto;}
.fondo-servicios {background: url(../images/fondo-servicios.jpg) bottom right no-repeat; padding: 3em 0 6em 0; margin: 5em 0;}
.fondo-servicios h3 {color:#fff; font-size: 1.2em; font-weight:600; text-transform: uppercase; max-width: 90%; margin:10px auto; display:block;}
.portada-servicios {text-align:center;}
.fondo-contactame {background: url(../images/fondo-contacto.jpg) bottom right no-repeat; padding:4em 0 10em 0; }
.fondo-contactame p {max-width: 70%; margin: 1em auto; display:block;}
.soy-coach {margin-top:1em;}
.portada-testimonio-contenedor {margin:0 auto; }
.portada-testimonios {-webkit-box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.20); -moz-box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.20); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 1em; margin: 1.5em 3em; overflow:auto; }
.portada-testimonios img {float:left; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin-right: 20px;}
.portada-testimonio-contenedor h2 {font-size:1.2em; font-weight:500; margin:0;}
.portada-testimonio-contenedor h3 {font-size:1em; margin:0}
.portada-testimonios p {color:#868688; font-size: .9em; margin-top: 1em; line-height:24px;}
.top-sitio {margin-top: 40em;}
.servicios-coach img {-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
.mis-certificaciones {display: flex; justify-content: space-between; border: 1px solid #ddd; margin:1em; padding: 1em; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
.mis-certificaciones img {max-width: 140px;}
.imagen-contorno img {-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;}
.testimonio img {float: left; margin:0 20px 20px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.testimonio h3 {font-size: 22px; color:#D31D20; margin-bottom: 20px; height: 80px;}
.testimonio p {font-size: 14px;}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #D31D20;
  border-top-color: #f9d1d1;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  padding: 0; display: block; 
}
#header.header-scrolled {
  top: 0;
}

@media (max-width: 992px) {
  #header {
    top: 0;
  }
}

/* >> HEADER << */
.presentacion {margin-top: 200px; margin-bottom: 350px;}
.presentacion h1 {font-size: 3em; }
.presentacion h2 {font-size: 2.8em; font-weight: 200; color: #83888e;}
.img-coach {margin-left: 4em;}
.modal {z-index: 9999;}
.modal-body p {font-size: 1em; font-weight: 300;}
.modal-body h2 {font-size: 1.3em; font-weight: 300;}
.modal-perfil {text-align: right; float: right; margin: 10px;}
.mensaje-central {max-width: 80%; margin: 3em auto;}
.mensaje-central2 {max-width: 80%; margin: 0 auto 1em auto;}
.titulo {text-align: center; margin: 2em 0;}
.titulo h4 {color: #fff;}
.f-fondo {background: url(../images/fondo-bottom.png) center bottom no-repeat;}
.logo-contacto img {width: 200px; height: auto;}
.logo-contacto a {font-size: .8em; color: #ffffff;}
.logo-contacto a:hover { text-decoration: none; color: #3574bb;}
.logo-contacto a img {width:20px; height: 20px;}
.titulo-servicios {display: block; width: 100%;}

.contacto-formulario {margin: 0 auto 3em auto; padding: 30px 45px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #fff;}
.contacto-formulario label {color: #3574bb;}
.form-control {height: 50px;}
.rafael {text-align: right; font-size: 10px; padding: 10px; }
.rafael a {color: #5a5a5b;}
.rafael a:hover {text-decoration: none; color: #fff;}

.logo-confirma img {width: 300px; text-align: center; display: block; margin: 2em auto;}
.mensaje-correo {max-width: 50%; margin: 0 auto; background: #EEEFE9; padding: 7em 5em; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}

footer {background: #282828;}
footer a {color:#5a5a5b;}
footer a:hover {color: #fff;}

/*cambio menu navx */
    .navigation-item:not(.navigation-brand-text):hover .navigation-link,
    .navigation-item:not(.navigation-brand-text):focus .navigation-link,
    .navigation-item:not(.navigation-brand-text).is-active .navigation-link { color: #1552A3;}
    .navigation-avatar-item .navigation-link img {border: solid 2px #1552A3;}
    .navigation-item:hover > .navigation-link > .submenu-indicator:after,
    .navigation-item:focus > .navigation-link > .submenu-indicator:after,
    .navigation-item.is-active > .navigation-link > .submenu-indicator:after { border-color: transparent #1552A3 #1552A3 transparent;}
    .navigation-btn { border-color: #1552A3; background-color: #1552A3;}
    .navigation-btn:hover,
    .navigation-btn:focus {background-color: #1552A3;}
    .navigation-badge {background-color: #1552A3}
    .navigation-input:hover,
    .navigation-input:focus {border-color: #1552A3;}
    .navigation-btn:hover .navigation-search-icon {color: #1552A3;}
    .navigation-dropdown-item:hover > .navigation-dropdown-link,
    .navigation-dropdown-item:focus > .navigation-dropdown-link,
    .navigation-dropdown-item.is-active > .navigation-dropdown-link { color: #1552A3;}
    .navigation-dropdown-item:hover > .navigation-dropdown-link > .submenu-indicator:after,
    .navigation-dropdown-item:focus > .navigation-dropdown-link > .submenu-indicator:after,
    .navigation-dropdown-item.is-active > .navigation-dropdown-link > .submenu-indicator:after {border-color: transparent #1552A3 #1552A3 transparent;}
    .navigation-list > li > a:hover {color: #1552A3;}
    @media (min-width: 992px) {
    .navigation-item:not(.navigation-brand-text):hover .navigation-link,
    .navigation-item:not(.navigation-brand-text):focus .navigation-link,
    .navigation-item:not(.navigation-brand-text).is-active .navigation-link {border-bottom-color: #1552A3 !important; }
    }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu {margin:20px auto; max-width: 650px; background: #D31D20; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}

.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu > ul {
  display: flex;
    justify-content: center;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  padding: 8px 10px;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #fff;
  transition: 0.3s;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  padding: 5px 2px;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #000;
  border-color: #000;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 20px;
  top: calc(100% + 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #082744;
  border: none;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #D31D20;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}


/* Mobile Navigation */
.mobile-nav-toggle {
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
}

.mobile-nav-toggle i {
  color: #D31D20;
}

.mobile-nav {
  position: fixed;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  z-index: 9999;
  overflow-y: auto;
  background: #fff;
  transition: ease-in-out 0.2s;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
  padding: 10px 0;
}

.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav a {
  display: block;
  position: relative;
  color: #D31D20;
  padding: 10px 20px;
  font-weight: 500;
  outline: none;
}

.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
  color: #D31D20;
  text-decoration: none;
}

.mobile-nav .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 10px;
  position: absolute;
  right: 15px;
}

.mobile-nav .active.drop-down > a:after {
  content: "\eaa1";
}

.mobile-nav .drop-down > a {
  padding-right: 35px;
}

.mobile-nav .drop-down ul {
  display: none;
  overflow: hidden;
}

.mobile-nav .drop-down li {
  padding-left: 20px;
}

.mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(235, 22, 22, 0.6);
  overflow: hidden;
  display: none;
  transition: ease-in-out 0.2s;
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active .mobile-nav {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-active .mobile-nav-toggle i {
  color: #fff;
}

/* >>> >>> MEDIA QUERIES <<< <<< */

@media (max-width: 1200px) {
.presentacion {margin-bottom: 100px;}
.servicio1, .servicio2, .servicio3 {padding: 10px;}
.servicio1 h2, .servicio2 h2, .servicio3 h2 {height: 50px;}
.h-redes {margin-top: 40px}
.testimonio h3 {font-size: 18px; color:#D31D20; margin-bottom: 20px; height: 80px;}
.testimonio img {float: none;}
}

@media (max-width: 992px) {
    p {font-weight: 400;}
    .h-redes {float: none; justify-content: flex-end; margin: 13px 30px 0 0;}
    .h-redes a {margin: 0 5px;}
    .presentacion {margin: 3em 0; text-align: center;}
    .presentacion {margin-bottom: 50px;}
    .presentacion h1 {font-size: 2.4em;}
    .presentacion h2 {font-size: 2em;}
    .bienvenido {margin-bottom: 50px; text-align: center;}
    .servicio3 {margin: 0 10px;}
    .f-fondo {padding-top: 40px;}
    .contacto-formulario {width: 90%;}
    .contacto h2 {text-align: center;}
    .mensaje-correo {max-width: 100%; margin: 0 auto;}
    .mensaje-central {max-width: 100%;}
    .servicio1, .servicio2, .servicio3 {min-height:auto; margin: 2em 10px 0 10px; text-align: center;}
    .servicio1 h2, .servicio2 h2, .servicio3 h2 {height: auto;}
    .servicio1 p, .servicio2 p, .servicio3 p {height: auto;}
    .blog h2 {font-size: 1.2em;}
    .img-comenzar {text-align: center;}
    .modal-perfil img {width: 200px;}
    .img-comenzar img {margin-bottom: 40px !important;}
    .h-fondo {margin-top: 60px}
    .testimonio img {float: left;}
    .testimonio h3 {height: auto;}
    .titulo h4 {color: #D31D20;}
}

@media (max-width: 768px) {
    .logotipo {max-width: 200px; min-width: 120px; height: auto; margin: 0 auto;}
    .mensaje-correo {max-width: 90%; margin: 0 auto;}
    .mensaje-correo h2 {font-size: 25px;}
    .contacto-formulario {width: 100%; padding: 10px 20px;}
    h2 {font-size: 1.8em;}
    .titulo h2 {font-size: 1.8em;}
    .modal-perfil img {width: 100%;}
    .cont-footer {flex-direction: column; text-align: center;}
    .redes-sociales, .redes-sociales h2, .rafael {text-align: center;}
    .logo-contacto {margin-bottom: 20px;}
    .h-redes {float: none; justify-content: flex-end; margin: 3px 30px 0 0;}
    .h-redes a {display: inline-block; margin: 10px 5px; padding: 0;}
    .h-redes .facebook-link {padding-top: 0; display: flex; }
    .img-coach {margin:0 2em;}
    .fondo-servicios {padding: 1em 0;}
    footer {padding-top: 1em;}
    .h-fondo {background:url(../images/banner-768.jpg) center top no-repeat; }
}

@media (max-width: 576px) {
.h-fondo {background:url(../images/banner-576.jpg) center top no-repeat; }
.fondo-servicios {background: url(../images/fondo-servicios.jpg) bottom left no-repeat; padding: 3em 0 6em 0; margin: 5em 0;}

    .h-redes {float: none; justify-content: center; border-top: 1px solid #ddd; margin:0 10px;}
    .portada-testimonios img {display:block; margin:0 auto 20px auto; float:none;}
}

/* Efectos animación imágenes Hover */
/* Grow */
.hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.04); transform: scale(1.04); }
/* Shrink */
.hvr-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { -webkit-transform: scale(0.92); transform: scale(0.92); }