/* Add here all your CSS customizations */
/*Estilos para Cosmedyca*/

/*******************************************************************************************************/
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
                               /* C S S    B Y    A G R A  :P */
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
/********************************************************************************************************/

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
	/*Colores Medisuply*/
:root{
    --azul: #8aa9d3;
	--negro: #000;
	--blanco: #fff;
	--azul-footer: #14a4e2;
	--gris: #4d4d4d;
	--gris-fondo: #d0dded;
	    

	--azul-seccion-servicios: #8db6e0;
	--verde: #00a99d;
	--azul-servicios-2: #29abe2;
	--durazno: #dd8f81;
	--naranja: #fbb03b;
	--rojo: #af150e;   
}
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/

.l-blanca{color: #fff;}
.l-blanca-force{color: #fff!important;}
.l-negra-force{color: #000!important;}
.l-negra{color: #000;}
.l-azul-c{color: #8aa9d3;}
.l-azul-m{color: #14a4e2;}
.l-gris{color: #4d4d4d;}
.l-gris-force{color: #4d4d4d !important;}
.l-azul-servicios{color: #8db6e0;}
.l-verde{color: #00a99d;}
.l-azul-servicios-2{color: #29abe2;}
.l-durazno{color: #dd8f81;}
.l-naranja{color: #fbb03b;}
.l-roja{color: #af150e;}
.l-rosa{color: #da9a91;}



body{font-size: 16px;}
body, h1, h2, h3, h4, h5, h6, p, span{font-family: 'Raleway', sans-serif !important; text-transform: none; letter-spacing: 0!important;}
a:hover{text-decoration: none;}
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
	/*Fuente, pesos fuente, tamaño*/
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
.rale{font-family: 'Raleway', sans-serif !important;}
.upper{text-transform: uppercase !important;}
.w-300{font-weight: 300 !important;}
.w-400{font-weight: 400 !important;}
.w-500{font-weight: 500 !important;}
.w-600{font-weight: 600 !important;}
.w-700{font-weight: 700 !important;}
.fs-12{font-size: 12px;}
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-16{font-size: 16px;}
.fs-17{font-size: 17px;}
.fs-18{font-size: 18px;}
.fs-19{font-size: 19px;}
.fs-20{font-size: 20px;}
.fs-21{font-size: 21px;}
.fs-22{font-size: 22px;}
.fs-23{font-size: 23px;}
.fs-24{font-size: 24px;}
.fs-25{font-size: 25px;}
.fs-26{font-size: 26px;}
.fs-27{font-size: 27px;}
.fs-28{font-size: 28px;}
.fs-29{font-size: 29px;}
.fs-30{font-size: 30px;}
.fs-31{font-size: 31px;}
.fs-32{font-size: 32px;}
.fs-33{font-size: 33px;}
.fs-34{font-size: 34px;}
.fs-35{font-size: 35px;}
.fs-36{font-size: 36px;}
.fs-37{font-size: 37px;}
.fs-38{font-size: 38px;}
.fs-39{font-size: 39px;}
.fs-40{font-size: 40px;}
.fs-41{font-size: 41px;}
.fs-42{font-size: 42px;}
.fs-43{font-size: 43px;}
.fs-44{font-size: 44px;}
.fs-45{font-size: 45px;}
.fs-46{font-size: 46px;}
.fs-47{font-size: 47px;}
.fs-48{font-size: 48px;}
.fs-49{font-size: 49px;}
.fs-50{font-size: 50px;}
.fs-51{font-size: 51px;}
.fs-52{font-size: 52px;}
.lh-normal{line-height: normal;}

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
	/*Margin, padding*/
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
.p-no-margin{margin: 0 !important;}
.justi-p{text-align: justify;}

.p-tb40{padding: 40px 0;}
.p-tb50{padding: 50px 0;}
.p-tb60{padding: 60px 0;}
.p-tb70{padding: 70px 0;}
.p-tb80{padding: 80px 0;}
.p-tb90{padding: 90px 0;}
.p-tb100{padding: 100px 0;}
.p-tb110{padding: 110px 0;}
.p-tb120{padding: 120px 0;}

.p-lr0{padding-left: 0; padding-right: 0;}

.p-l20{padding-left: 20px;}
.p-l30{padding-left: 30px;}

.p-r30{padding-right: 30px;}

.p-t20{padding-top: 20px;}
.p-t30{padding-top: 30px;}
.p-t40{padding-top: 40px;}
.p-t50{padding-top: 50px;}
.p-t60{padding-top: 60px;}
.p-t70{padding-top: 70px;}
.p-t80{padding-top: 80px;}
.p-t90{padding-top: 90px;}
.p-t100{padding-top: 100px;}
.p-t190{padding-top: 190px;}


.p-b20{padding-bottom: 20px;}
.p-b30{padding-bottom: 30px;}
.p-b40{padding-bottom: 40px;}
.p-b50{padding-bottom: 50px;}
.p-b60{padding-bottom: 60px;}
.p-b70{padding-bottom: 70px;}
.p-b80{padding-bottom: 80px;}
.p-b90{padding-bottom: 90px;}
.p-b100{padding-bottom: 100px;}
.p-b110{padding-bottom: 110px;}
.p-b120{padding-bottom: 120px;}

.m-a20{margin: 20px;}

.m-tb50{margin: 50px 0;}
.m-tb60{margin: 60px 0;}
.m-tb70{margin: 70px 0;}
.m-tb80{margin: 80px 0;}
.m-tb90{margin: 90px 0;}
.m-tb100{margin: 100px 0;}
.m-tb110{margin: 110px 0;}

.m-t10{margin-top: 10px;}
.m-t20{margin-top: 20px;}
.m-t30{margin-top: 30px;}
.m-t40{margin-top: 40px;}
.m-t45{margin-top: 45px;}
.m-t50{margin-top: 50px;}
.m-t60{margin-top: 60px;}
.m-t70{margin-top: 70px;}
.m-t80{margin-top: 80px;}
.m-t90{margin-top: 90px;}
.m-t100{margin-top: 100px;}

.m-b10{margin-bottom: 10px;}
.m-b20{margin-bottom: 20px;}
.m-b25{margin-bottom: 25px;}
.m-b30{margin-bottom: 30px;}
.m-b40{margin-bottom: 40px;}
.m-b50{margin-bottom: 50px;}
.m-b60{margin-bottom: 60px;}
.m-b70{margin-bottom: 70px;}
.m-b80{margin-bottom: 80px;}
.m-b90{margin-bottom: 90px;}
.m-b100{margin-bottom: 100px;}

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
	/*Buttons*/
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
.btn-slide{background-color: #14a4e2; border: 1px solid #14a4e2; color: #fff;}
.btn-slide:hover{background-color: transparent; border: 1px solid #14a4e2; color: #fff; transition: all .5s ease-in-out;}
.btn-azul{background-color: #14a4e2; border: 1px solid #14a4e2; color: #fff;}
.btn-azul:hover{background-color: transparent; border: 1px solid #14a4e2; color: #fff; transition: all .5s ease-in-out;}
.btn-azul-2{background-color: #14a4e2; border: 1px solid #14a4e2; color: #fff;}
.btn-azul-2:hover{background-color: transparent; border: 1px solid #14a4e2; color: #14a4e2; transition: all .5s ease-in-out;}
.btn-transparent{background-color: transparent; border: 1px solid #14a4e2; color: #fff;}
.btn-transparent:hover{background-color: #14a4e2; border: 1px solid #14a4e2; color: #fff; transition: all .5s ease-in-out;}
.btn-azul-servicio-1{background-color: #8db6e0; border: 1px solid #8db6e0; color: #fff;}
.btn-azul-servicio-1:hover{background-color: transparent; border: 1px solid #8db6e0; color: #8db6e0; transition: all .5s ease-in-out;}
.btn-verde{background-color: #00a99d; border: 1px solid #00a99d; color: #fff;}
.btn-verde:hover{background-color: transparent; border: 1px solid #00a99d; color: #00a99d; transition: all .5s ease-in-out;}
.btn-azul-servicio-2{background-color: #29abe2; border: 1px solid #29abe2; color: #fff;}
.btn-azul-servicio-2:hover{background-color: transparent; border: 1px solid #29abe2; color: #29abe2; transition: all .5s ease-in-out;}
.btn-durazno{background-color: #dd8f81; border: 1px solid #dd8f81; color: #fff;}
.btn-durazno:hover{background-color: transparent; border: 1px solid #dd8f81; color: #dd8f81; transition: all .5s ease-in-out;}
.btn-naranja{background-color: #fbb03b; border: 1px solid #fbb03b; color: #fff;}
.btn-naranja:hover{background-color: transparent; border: 1px solid #fbb03b; color: #fbb03b; transition: all .5s ease-in-out;}
.btn-rojo{background-color: #af150e; border: 1px solid #af150e; color: #fff;}
.btn-rojo:hover{background-color: transparent; border: 1px solid #af150e; color: #af150e; transition: all .5s ease-in-out;}
.btn-rosa{background-color: #da9a91; border: 1px solid #da9a91; color: #fff;}
.btn-rosa:hover{background-color: transparent; border: 1px solid #da9a91; color: #da9a91; transition: all .5s ease-in-out;}
.btn-form{padding: 10px 35px;}

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
	/*Background*/
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
.bckgd-gris{background: #f5f5f5;}
.bckgd-contacto{background: url('../archivos/home/contacto.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.bckgd-distribuidores{position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%;}
.bckgd-azul-claro{background: #8aa9d3;}
.bckgd-azul-medio{background: #14a4e2;}
.bckgd-cosmedica{background: url('../archivos/cosmedica/cosmedica-empowerful-beauty.png'); background-position: center; background-repeat: no-repeat; background-size: cover; background-position-y: 0px; margin-top: -120px; position: relative;}
.bckgd-piel-normal{background: url('../archivos/cosmedica/productos-para-piel-normal.png'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top:0; right: 0;}
.bckgd-piel-mixta{background: url('../archivos/cosmedica/productos-para-piel-mixta.png'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top:0; left: 0;}
.bckgd-piel-grasa{background: url('../archivos/cosmedica/piel-grasa-change.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top:0; right: 0;}
.bckgd-piel-seca{background: url('../archivos/cosmedica/piel-seca-change.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top:0; left: 0;}
.bckgd-piel-sensible{background: url('../archivos/cosmedica/productos-para-piel-sensible.png'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top:0; right: 0;}
.bckgd-anti-edad{background: url('../archivos/cosmedica/antiedad-change.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top:0; left: 0;}
.bckgd-blog{background: url('../archivos/blog/medisupply-blog.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 65vh; display: flex; align-items: center;}
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
	/*Who We Are*/
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
/*
* Custom Animations
*/
@-webkit-keyframes dash {
  from {stroke-dasharray: 1000;}
  to {stroke-dasharray: 2000;}
}
@keyframes dash {
  from {stroke-dasharray: 1000;}
  to {stroke-dasharray: 2000;}
}
@-webkit-keyframes dash_2 {
  from {stroke-dashoffset: 1700;}
  to {stroke-dashoffset: 2000;}
}
@keyframes dash_2 {
  from {stroke-dashoffset: 1700;}
  to {stroke-dashoffset: 2000;}
}
.line-anim {-webkit-animation: dash 4500ms linear forwards; animation: dash 4500ms linear forwards;}
.line-anim-2 {-webkit-animation: dash_2 1500ms linear forwards; animation: dash_2 1500ms linear forwards;}
.circle-anim { -webkit-animation: dash 15s linear forwards; animation: dash 15s linear forwards;}
.custom-image-style-1{ position: relative; border-radius: 100%; border: 7px solid #FFF; -webkit-box-shadow: 0px 7px 60px -15px rgba(0, 0, 0, 0.5); box-shadow: 0px 7px 60px -15px rgba(0, 0, 0, 0.5); z-index: 2;}

@media (min-width: 767px) {
  .custom-image-style-1:not(._middle) {position: absolute; top: 30%; z-index: 1;}
  .custom-image-style-1._left {left: 6%;}
}
@media (min-width: 767px) and (min-width: 992px) and (max-width: 1199px) {
  .custom-image-style-1._left {left: 0%;}
}
@media (min-width: 767px) and (max-width: 991px) {
  .custom-image-style-1._left {left: 11.2%;}
}
@media (min-width: 767px) {
  .custom-image-style-1._middle {top: 23%;}
  .custom-image-style-1._right {left: 65%;}
}

svg#curved-line-1 { position: absolute; top: -10px; left: 10px; width: 100%; height: 180%;}
svg#curved-line-1 .path, svg#curved-line-1 .circle { stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0.3;}

@media (min-width: 992px) and (max-width: 1199px) {
  svg#curved-line-1 {width: 107.4%; -webkit-transform: scale(1.13); transform: scale(1.13);}
}

/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/

#header .container{padding: 0 100px;}
.bckgd-blanco{background-color: #fff!important;}
.bckgd-header-azul{background-color: #14a4e2!important;}
.box-content-padding{padding: 50px 20px !important;}
.featured-boxes-2{border: 10px solid #14a4e2; background: transparent;}
.white-space-pre{white-space: pre-line;}
.container-fluid.xl{padding: 0;}
.featured-box{min-height: 395px;}
.lh-35{line-height: 35px;}
#header .header-nav.header-nav-links nav > ul li:hover > a{color: #000;}
.l-gris-menu{color: #4d4d4d !important;}
.l-gris-menu:hover{color: #8aa9d3 !important;}
.border-blue-img{border: 1px solid #14a4e2;}
.big-logo-slide{width: 500px!important; height: 100%!important;}
.logo-header-white{width: 170px;}
.logo-header-blue{width: 170px;}
.triangulo{top: 75%; position: absolute; right: 35%; width: 250px; height: 100%;}
.overlay:hover:before, .overlay.overlay-show:before, .overlay.show:before{opacity: 0.2;}
    



/*Sección Cosmedica*/
.dis-flex-cosmedica{display: flex; align-items: center; position: relative;}
.dis-flex-cofepris{display: flex; align-items: center; padding: 0 180px;}
.col-md-50{width: 50%; height: 100%; padding: 40px 60px;}
.col-md-50.cont-right{margin-left: 50%;}
.list-circle-right{display: flex; align-items: center; justify-content: flex-end;}
.list-circle-left{display: flex; align-items: center; justify-content: flex-start;}
.circle-bullets{width: 5px; height: 5px; background: #8aa9d3; border-radius: 50%; margin-right: 10px;}
.circle-bullets-verde{width: 5px; height: 5px; background: #00a99d; border-radius: 50%; margin-right: 10px;}
.circle-bullets-azul2{width: 5px; height: 5px; background: #29abe2; border-radius: 50%; margin-right: 10px;}
.circle-bullets-durazno{width: 5px; height: 5px; background: #dd8f81; border-radius: 50%; margin-right: 10px;}
.circle-bullets-naranja{width: 5px; height: 5px; background: #fbb03b; border-radius: 50%; margin-right: 10px;}
.circle-bullets-rojo{width: 5px; height: 5px; background: #af150e; border-radius: 50%; margin-right: 10px;}
.circle-bullets-rosa{width: 5px; height: 5px; background: #da9a91; border-radius: 50%; margin-right: 10px;}

/*End*/

/*Seccion md needle pen*/
.word-rotator-words[class*="bckgd-azul-claro"] b{color: #fff; padding: 10px 10px;}
.word-rotator{display: flex; align-items: center;}
.word-rotator span:first-child{margin-right: 15px;}
.img-que-se-consigue{position: absolute; top: 0; right: 15%; height: 100%; padding: 20px 0;}
.dis-flex-video{display: flex; align-items: center;}
.click-video{width: 100%; height: 100%; cursor: pointer;}
.play-video{font-size: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #8aa9d3; border-radius: 50%; z-index: 99;}
.dis-flex-agujas{display: flex; align-items: center;}
.title-related-blog{min-height: 95px; margin: 0; text-align: justify;}
.description-related-blog{min-height: 160px; margin: 0;}
.icons-needle-pen{width: 80px;}
/*End*/

/*Blog*/
.cont-blog .col-md-4{margin-bottom: 50px;}

.flex-info-footer{display: flex; align-items: baseline;}
.flex-info-footer i{margin-right: 15px;}




/*Footer bottom*/
.copyright-footer{padding: 30px 0; background: #14a4e2;}
.flex-footer{display: flex; align-items: center;}
.footer-left{text-align: left;}
.footer-center{text-align: center;}
.footer-right{text-align: right;}
.logo-leadme{width: 175px;}

/*Form*/


/*placehold*/
::placeholder {color: #777777!important; opacity: 1;}
:-ms-input-placeholder {color: #777777!important;}

/*Scrollbar*/
::-webkit-scrollbar{width: 12px;}
::-webkit-scrollbar-track {border-radius: 0px; background: #4d4d4d;}
::-webkit-scrollbar-thumb {border-radius: 0px; -webkit-box-shadow: inset 10px 10px 50px #fff; border-radius-top: 10px; border-radius-bottom: 10px;}


/*@media (min-width: 992px){
#header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-links nav > ul > li:hover > a, #header .header-nav.header-nav-line nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li:hover > a {
font-size: 15px;}*/


/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
	/*Responsive*/
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->*/
@media screen and (min-width: 1700px){

}

@media screen and (max-width: 1400px){

}

@media screen and (max-width: 800px){
	#header .container{padding: 0 15px;}
	#header .header-btn-collapse-nav{background: #14a4e2;}
	.col-md-50{width: 100%; padding: 40px 30px;}
	.col-md-50.cont-right{margin-left: 0;}
	.bckgd-piel-normal{position: relative; height: 300px!important;}
	.bckgd-piel-mixta{position: relative; height: 300px!important;}
	.bckgd-piel-grasa{position: relative; height: 300px!important;}
	.bckgd-piel-seca{position: relative; height: 300px!important;}
	.bckgd-piel-sensible{position: relative; height: 300px!important;}
	.bckgd-anti-edad{position: relative; height: 300px!important;}
	.list-circle-right{justify-content: flex-start;}
	.lh-normal-small{line-height: normal;}
	.dis-flex-cofepris{display: block; padding: 0 15px;}
	.white-space-normal{white-space: normal;}
	.dis-flex-video, .dis-flex-agujas{display: block;}
	.word-rotator{display: block;}
	.word-rotator span:first-child{margin-right: 0;}
	.word-rotator-words{padding: 5px 0;}
	.word-rotator.slide span{padding: 0.5em 0;}
	.double-img-slide img{display: block; margin: 0 auto;}
	.double-img-slide img:first-child{margin-bottom: 5px;}
	.logos-center-slide{margin: 0 auto;}
	.big-logo-slide{width: 300px!important;}
	.btn-slide{left: 55%;}
	.featured-box {min-height: auto;}
	#header .header-nav-main.header-nav-main-mobile-dark:before{background-color: #4d4d4d;}
	#header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:hover, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:focus, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:active{background-color: transparent;}
	#header .header-nav.header-nav-links nav > ul li:hover > a{color: #fff;}
	.word-rotator-words[class*="bckgd-azul-claro"] b{padding: 0 5px;}
	.img-que-se-consigue{opacity: 0.5; right: 0%;}
	.title-related-blog{margin-bottom: 15px; min-height: auto;}
	.description-related-blog{margin-bottom: 15px; min-height: auto;}
	.cont-blog .col-md-4:last-child{margin-bottom: 20px;}
	.p-t190{padding-top: 120px;}
	.col-md-50{padding: 40px 30px 50px;}
	.l-gris-menu{color: #fff!important;}
	.triangulo{right: 10%; top: 50%;}
	


	.fs-25-small{font-size: 25px;}
	.fs-24-small{font-size: 24px;}
	.m-t10-small{margin-top: 10px;}
	.m-t25-small{margin-top: 25px;}
	.m-b0-small{margin-bottom: 0px!important;}
	.m-b15-small{margin-bottom: 15px!important;}
	.m-b20-small{margin-bottom: 20px!important;}
	.m-b25-small{margin-bottom: 25px!important;}
	.text-center-small{text-align: center;}
	.text-justify-small{text-align: justify!important;}
	.p-t50-small{padding-top: 50px;}
	.p-b0-small{padding-bottom: 0;}
	.p-b50-small{padding-bottom: 50px;}
	.p-tb80{padding: 50px 0;}
	.p-lr15-small{padding-left: 15px; padding-right: 15px;}


	.flex-footer{display: block;}
	.footer-left{text-align: center;}
	.footer-center{margin: 15px 0 20px;}
	.footer-right{text-align: center;}
}

@media screen and (max-width: 640px){

}
/*<-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><-><->