/*
   Theme Name: iBeautyPhi
   Author: Telaio Networks
   Author URI: https://telaio.com.mx/
   Version: 1
*/

/*------Generales------*/

* {
   margin: 0;
   padding: 0;
   font-family: 'Lato', sans-serif;
   font-weight: 100;
   color: #636363;
}
body {
   overflow-x: hidden;
}
body.on-over {
   overflow: hidden;
}
h1 {
   color: #7789b9;
   font-family: 'Raleway', sans-serif;
   font-weight: 600;
   margin-bottom: 25px;
   font-size: 30px;
}
h1::after, h2::after{
   content: '';
   width: 95px;
   border-bottom: 2px solid;
   display: block;
   padding-top: 8px;
}
.color-blue {
   color: #7789b9;
}
.color-ligth-blue {
   color: #2098ad;
}
h2, .color-gray {
   color: #636363;
}
h3, h3 span, h4 {
   font-family: 'Raleway', sans-serif;
   font-weight: 600;
   margin-bottom: 15px;
}
a {
   text-decoration: none;
   color: inherit;
}
a:hover {
   text-decoration: none;
   color: #2098ad;
}
p strong, strong span{
   font-weight: 600;
}

.btn-principal{
   padding: 5px 23px;
   transition: all .2s ease;
   -webkit-transition: all .2s ease;
   -ms-transition: all .2s ease;
   background: white;
   border: 1px solid #7789b9;
   border-radius: 9px;
   margin: 0;
   text-transform: uppercase;
   color: #7789b9;
   font-weight: 400;
}
.btn-principal:hover{
   background: #7789b9;
   color: #FFF;
   text-decoration: none;
}
.color-light-gray {
   color: #ebedec;
}
.color-white, .color-white p, .color-white strong {
   color: #FFF;
}
.bg-blue {
   background-color: #7789b9;
}
.bg-ligth-blue {
   background-color: #2098ad;
}
.bg-gray{
   background-color: #ebedec;
}
.bg-white{
   background-color: #FFF;
}
.underline-color::after{
   content: '';
   width: 60px;
   border-bottom: 2px solid;
   display: block;
   padding-top: 8px;
}
.underline::after{
   content: '';
   width: 11%;
   /*width: 37px;*/
   border-bottom: 2px solid;
   display: block;
   padding-top: 4px;
}
.banner{
   height: 324px;
   background-size: cover;
   margin-top: 113px;
}
.banner h1{
   padding: 120px 0 0 150px;
   font-size: 40px;
}
/*Mensaje error de formularios*/
.help-block{
   color: red;
   font-size: 11px;
   font-weight: 600;
}
.help-block::before{
   content: '\f00d';
   color: red;
   font-size: 11px;
   font-weight: 600;
   font-family: FontAwesome;
   padding-right: 5px;
}
/*Top boton*/
#btn-top {
   display: none;
   position: fixed;
   bottom: 40px;
   right: 30px;
   z-index: 9999 !important;
   border: none;
   outline: none;
   background-color: #2098ad;
   color: white;
   cursor: pointer;
   padding: 11px;
   border-radius: 4px;
   opacity: 0.7;
   -webkit-box-shadow: -3px 6px 7px 0px rgba(61,61,61,.4);
   -moz-box-shadow: -3px 6px 7px 0px rgba(61,61,61,.4);
   box-shadow: -3px 6px 7px 0px rgba(61,61,61,.4);
}
#btn-top:hover {
   opacity: 1;
}
.enviado_msg{
   text-align: center;
}
.enviado_msg p{
   color: green;
   font-weight: 600;
   margin-top: 8px;
}
.error_msg{
   color: red;
   font-weight: 600;
   margin-top: 8px;
   margin-bottom: 0;
}
/*---------Menu---------*/
.margin-top-menu {
   margin-top: 109px;
}
div.header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 999;
}
.menu {
   background-color: #FFF;
   box-shadow: 0 4px 10px rgba(76, 76, 76, .05);
}
.redes i{
	font-size: 24px;
	margin: 0 10px;
}
.pr-6{
	padding-right: 4.5rem;
}
#menu-main-menu {
   padding: 0;
   margin: 0;
}
.content-logo img {
   transition: all .5s ease;
   -webkit-transition: all .5s ease;
   -ms-transition: all .5s ease;
   height: auto;
   padding: 10px 0;
}

#menu-main-menu>li {
   list-style: none;
   display: inline-block;
    transition: all .5s ease;
   -webkit-transition: all .5s ease;
   -ms-transition: all .5s ease;
    border-bottom: 3px solid transparent;
}
#menu-main-menu>li:hover, .current-menu-item {
   border-bottom: 3px solid  #7789b9 !important;
}
.current-menu-item a {
   color: #7789b9 !important;
}
#menu-main-menu>li>a {
   font-weight: 400;
   text-transform: uppercase;
   color: #000;
   display: table-cell;
   vertical-align: middle;
   padding: 10px 8px;
   height: 69px;
}
#menu-main-menu, .modelo li {
   list-style: none;
   height: 69px;
}
#menu-main-menu>li>a:focus, #menu-main-menu>li>a:hover, footer a:hover {
   text-decoration: none;
}
.menu-item-has-children a{
   pointer-events: none;
   cursor: pointer;
}
.menu-item-has-children a::after {
   content: ' \f078';
   font-family: FontAwesome;
   font-size: 10px;
   position: relative;
   bottom: 3px;
   padding: 5px;
}
.menu-item-has-children .sub-menu a::after {
   content: none;
}
.menu-item-has-children .sub-menu a {
   pointer-events: initial;
   font-size: 14px;
}
.sub-menu {
   display: none;
   background: #FFF;
   border-bottom: 2px solid #7789b9;
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 1px; /* Chrome, Safari, Opera */
    -moz-column-gap: 1px; /* Firefox */
    column-gap: 1px;
    -webkit-column-rule: 1px solid #7789b9; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid #7789b9; /* Firefox */
    column-rule: 1px solid #7789b9;
}
.menu-item-has-children:hover .sub-menu {
   -webkit-transition: all 3s ease;
   -ms-transition: all 3s ease;
   transition: all 3s ease;
   display: table-cell;
   list-style: none;
   position: absolute;
}
.sub-menu li {
   background-color: #FFF;
   padding: 1px 20px;
}
.sub-menu li:hover {
   background-color: #7789b9;
}
.sub-menu li>a {
   text-transform: initial;
}
.sub-menu li:hover>a, .sub-menu .current-menu-item a {
   color:#FFF !important;
}
.sub-menu .current-menu-item{
    background-color: #7789b9 !important;
    border-bottom: none !important;
}
.sub-submenu{
   display: none;
}
.link-submenu:hover .sub-submenu{
   display: block;
   column-count: 2;
   position: absolute;
   list-style: none;
   background: white;
   width: 450px;
   -webkit-column-gap: 1px;
   -moz-column-gap: 1px;
   column-gap: 1px;
   -webkit-column-rule: 1px solid #7789b9;
   -moz-column-rule: 1px solid #7789b9;
   column-rule: 1px solid #7789b9;
   border-bottom: 2px solid #7789b9;
}
#back-arrow{
      display: none;
   }
#nav-icon {
   width: 40px;
   height: 40px;
   position: relative;
   margin: 15px 0 0;
   -webkit-transform: rotate(0);
   -moz-transform: rotate(0);
   -o-transform: rotate(0);
   transform: rotate(0);
   -webkit-transition: .4s ease-in-out;
   -moz-transition: .4s ease-in-out;
   -o-transition: .4s ease-in-out;
   transition: .4s ease-in-out;
   cursor: pointer;
   z-index: 2;
}
#nav-icon span {
   display: block;
   position: absolute;
   height: 4px;
   width: 100%;
   background: #000;
   border-radius: 9px;
   opacity: 1;
   left: 0;
   -webkit-transform: rotate(0);
   -moz-transform: rotate(0);
   -o-transform: rotate(0);
   transform: rotate(0);
   -webkit-transition: .4s ease-in-out;
   -moz-transition: .4s ease-in-out;
   -o-transition: .4s ease-in-out;
   transition: .4s ease-in-out
}
#nav-icon span:nth-child(1) {
   top: 0
}
#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
   top: 14px
}
#nav-icon span:nth-child(4) {
   top: 28px
}
#nav-icon.open span:nth-child(1), #nav-icon.open span:nth-child(4) {
   top: 18px;
   width: 0;
   left: 50%
}
#nav-icon.open span:nth-child(2) {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg)
}
#nav-icon.open span:nth-child(3) {
   -webkit-transform: rotate(315deg);
   -moz-transform: rotate(315deg);
   -o-transform: rotate(315deg);
   transform: rotate(315deg)
}
/*----------Home--------*/
/*Slider*/
.carousel-indicators li{
   width: 10px;
   max-width: 10px !important;
   height: 10px;
   border-radius: 50%;
   background-color: rgba(255,255,255,0.9) !important;
}
.carousel-indicators .active{
   background-color: #2098ad !important;
}
.carousel-item img {
   width: 100%;
   height: 100%;
   -webkit-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.formulario-home{
   position: absolute;
   z-index: 2;
   width: 320px;
   background: #FFF;
   padding: 28px 15px;
   right: 10%;
   top: 125px;
 }
 .form-control{
   border: 1px solid #7789b9;
   border-radius: 9px;
   color: #7789b9;
 }
 /*Casos*/
 .carousel-control-prev-icon{
   background-image: url(https://www.ibeautyphi.com/wp-content/themes/ibeautyphi/includes/img/continuar.png) !important;
   width: 30px;
   height: 30px;
 }
 .carousel-control-next-icon{
   background-image: url(https://www.ibeautyphi.com/wp-content/themes/ibeautyphi/includes/img/continuar.png) !important;
   width: 30px;
   height: 30px;
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 #grid-casos{
   max-width: 280px;
 }
 #img-home{
   border: 15px solid white;
 }
 /*----Nosotros-----*/
 .st-equipo{
   padding:75px 0;
 }
 /*-----Tratamientos----*/
 .banner-tratamiento{
   height: 324px;
   background-size: cover;
}
.banner-tratamiento h1{
   padding: 120px 0 0 8px;
   font-size: 40px;
}
 .tratamiento p a{
   padding: 8px 23px;
   transition: all .2s ease;
   -webkit-transition: all .2s ease;
   -ms-transition: all .2s ease;
   background: #7789b9;
   color: #FFF;
   border-radius: 9px;
   margin: 0;
   text-transform: uppercase;
   font-weight: 400;
   display: table-cell;
   text-align: center;
}
.tratamiento p a:hover{
   color: #7789b9;
   background: white;
   border: 1px solid #7789b9;
   text-decoration: none;
}
.tratamiento p img{
   width: 100%;
   height: auto;
}
.tratamiento blockquote{
   background: #2098ad;
   padding: 10px 30px;
   text-align: center;
}
.tratamiento blockquote p{
   color: #FFF !important;
   margin-bottom: 0 !important;
}
.tratamiento ul{
   padding-left: 18px;
}
#tratamiento  .form-control{
   height: 33px;
 }
#scroll-form{
   max-width: 285px;
   background: #FFF;
   padding: 10px 15px;
   z-index: 2;
}
#scroll-form p{
   line-height: 18px;
   margin: 0 0 8px 0;;
}
.formulario-fixed{
   position: fixed;
   max-width: 285px;
   z-index: 2;
}
#scroll-form #captcha-contacto{
   transform:scale(0.8);
}
/*-------Casos------*/
.banner-casos{
   height: 323px;
   background-size: cover;
}
.banner-casos h1{
   padding: 120px 0 0 125px;
   font-size: 40px;
}
h4.underline-caso::after{
   content: '';
   width: 40px;
   border-bottom: 2px solid;
   display: block;
   padding-top: 4px;
}
.grid figure {
   position: relative;
   float: left;
   overflow: hidden;
   background: #2098ad;
   text-align: center;
   cursor: pointer;
}

.grid figure img {
   position: relative;
   display: block;
   opacity: 1;
}

.grid figure figcaption {
   padding: 2em;
   color: #fff;
   text-transform: uppercase;
   font-size: 1.25em;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
}
figure.effect img {
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;
   -webkit-transform: scale(1.12);
   transform: scale(1.12);
}
figure.effect:hover img {
   opacity: 0.5;
   -webkit-transform: scale(1);
   transform: scale(1);
}
figure.effect i {
   opacity: 0;
   font-size: 45px;
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;
}
figure.effect i {
   margin: auto;
   -webkit-transform: scale(1.5);
   transform: scale(1.5);
}
figure.effect:hover i {
   opacity: .7;
   -webkit-transform: scale(1);
   transform: scale(1);
}
/*---------Footer-----------*/
footer{
   padding: 30px 0 0 0;
}
footer a:hover, footer a:hover i{
   color: #636363;
}
#pieTelaio::before {
   background: url(https://www.ibeautyphi.com/wp-content/themes/ibeautyphi/includes/img/icon-telaio.png);
   width: 15px;
   height: 14px;
   display: inline-block;
   content: '';
   margin-right: 5px;
   margin-bottom: -2px
}
@media (max-width: 1165px){
   #menu-main-menu>li>a {
   padding: 10px 2px;

   }
}
@media (max-width:992px) {
   .menu .row {
      height: 69px;
   }
   .pr-6{
	padding-right: 0;
	}
   #menu-box {
      position: relative;
      padding-top: 60px;
      text-align: center;
      -webkit-transition: all .8s linear;
      transition: all .8s linear;
      -webkit-transform: all translateX(1200px);
      transform: all translateX(1200px);
      opacity: 0;
      background-color: #FFF;
      display: none;
   }
   .content-logo img {
      width: auto !important;
   }
   .background-black #menu-box {
      background-color: #000;
   }
   .show {
      -webkit-transform: translateX(0) !important;
      transform: translate(0) !important;
      opacity: 1 !important;
      display: block !important;
   }
   #menu-main-menu>li {
      display: list-item;
      margin: 0 18%;
   }
   #menu-main-menu {
      margin-top: 10px;
      height: 40px;
   }
   #menu-main-menu>li>a {
      display: block;
      height: 40px;
   }
   .menu-item-has-children:hover .sub-menu {
      display: none;
   }
   #menu-main-menu>li:hover {
      border-bottom: 3px solid transparent !important;
   }
   .sub-menu{
      -webkit-column-count: 1 !important; /* Chrome, Safari, Opera */
      -moz-column-count: initial !important; /* Firefox */
      column-count: unset !important;
   }
   .link-submenu:hover .sub-submenu{
      column-count: 1 !important;;
      width: 100%;
      left: 0;
   }
   #menu-item-112 .opensubmenu {
      display: block;
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
      border-bottom: none;
      z-index: 9;
      overflow-y: scroll;
   }
   #menu-item-111 .opensubmenu2 {
      display: block;
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
      border-bottom: none;
      z-index: 9;
      
      overflow-y: scroll;
   }
   .sub-menu li {
      padding: 4px 30px !important;
      list-style: none;
   }
   #back-arrow{
      display: initial !important;
      color: black;
      position: absolute;
      font-size: 25px;
      top: 0;
      left: 22px;
   }
   .scroll-down .content-logo img {
      height: 55px;
   }
   .scroll-down .row {
      height: 92px !important;
   }
   .scroll-down #nav-icon {
      margin: 7px 0 0 !important;
   }
   .scroll-down #menu-box {
      top: -46px;
   }
   .underline::after{
      width: 100%;
   }
   .formulario-home{
      position: static !important;
      width: 100% !important;
   }
   #scroll-form{
      position: initial;
      max-width: 100%;
   }
   #scroll-form #captcha-contacto{
      transform:scale(1);
   }
   .banner{
      height: 160px !important;
   }
   .banner h1{
      padding: 45px 0 0 40px !important;
      font-size: 40px;
   }
   #grid-casos{
      max-width: 100% !important;
   }
}