/* CSS Document */

@font-face{
	font-family: "Gothic";
	src: url(../fonts/GOTHIC.TTF);
	
}

.ocultarG{
	display: none;
}


#carru{
	position: absolute;
}

#carru > section{
	position: absolute;
}



.carruDos{
	margin:0 0% 0 0%;
	padding: 0px;
	
}
.itemCarru{
	width: 100%;
	height: 100%;
}
.irPromo
{
	-webkit-border-radius: 18;
  -moz-border-radius: 18;
	border-radius: 18px;
	border: 1px solid #b04098;
  color: #fff;
  display: block;
  padding: 10px;
 background-color: #2a347f;
  position: absolute;
  text-align: center;
  top: 80%;
	left: 45%;

  z-index: 20;
  margin-top: -30px;

    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
         -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.irPromo:hover{
	background-color: #b04098;
}
.animacionTarjeta{
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  		
  overflow: hidden;

  -webkit-transition-property: color, background-color,border-radius;
  transition-property: color, background-color,border-radius;
}
.animacionTarjeta:hover ,.animacionTarjeta:focus, .animacionTarjeta:active {
	  background-color: #2098D1;
  color: white;
	
  border-radius: 1em;
}


.contactoConte{
	margin: 15% auto 5% auto;
}
.textoEnferme
{
	font-size: 1.4em;
	color: #000000;
	text-align: justify;
	line-height: 150%;

	
	
}
.textoPCosmeticos
{
	font-size: 1.2em;
	color: #000000;
	padding: 0 20% 0 20%;
	text-align: center;
	line-height: 150%;
	margin-top: 2%;

}

.tituloEnferme
{
	color: #2a347f;
	text-align: center;
	font-size: 3em;
}
.espacio{
	margin-top: 3%;
}
.textoFarmacia
{
	font-size: 1.2em;
	color: #000000;
	text-align: justify;
	line-height: 150%;
	
}

.equipoMedico{
	font-size: 1.5em;  padding: 1% ;width: 50%;line-height: 1.8em;
}



.tarjetaMedico{
	padding: 2% 5%;
	margin: 4% 2%;
	text-align: center;
	border-style: solid ;
	border-width: 1px;
	border-color: #B0B0B0;

}

.tarjetaMedico > h3{
	font-size: 1.7em;
	font-style: italic;
	color: #000;
	
}
.tarjetaMedico > p{
	font-size: 1.4em;
}


.barraContacto{
	background-color:#2A347F;
	width: 100%;
	height: 30px;
	padding: 2px;
	margin: 0px;
	
	color: #FFFFFF;
	text-align: center;
	
}
.barraContacto > p{
	font-size: 15px;
	padding-top: 3px;
	
}


.btnVmasN{
	width: 65%;
	height:30px;
	background-color: #2A347F;
	color: #ffffff;
	font-size: 1.3em;
	font-weight: 500;
	border: none;
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}



.btnVmasN:hover, .btnVmasN:focus, .btnVmasN:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.btnHome{
	width: 85%;
	height:27px;
	margin-top: 10%;
	background-color: #00B820;
	color: #ffffff;
	font-weight: 400;
	border: none;
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}



.btnHome:hover, .btnHome:focus, .btnHome:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.btnFHome
{
width: 75%;
	height:30px;
	background-color: #2a347f;
	color: #ffffff;
	font-weight: 500;
	border: none;
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;	
}
.btnFHome:hover, .btnFHome:focus, .btnFHome:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.btnCHome
{
width: 74%;
	height:30px;
	background-color: #b04098;
	color: #ffffff;
	font-weight: 500;
	border: none;
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;	
}
.btnCHome:hover, .btnFHome:focus, .btnFHome:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.tarjetas{
	margin-top: 5%;
	padding:8%;
	border-style: solid ;
	border-width: 1px;
	border-color: #B0B0B0;
}

.tarjetasNosotros{
	margin-top: 5%;
	padding:8%;
	border-style: none;

}
.tituServicios
{
	margin-top: -3%;

	text-align: center;
	color: #2a347f;
	
}

.espacioSeccion{
	margin-top: 2%;
	margin-bottom: 0;
	padding-bottom: 1%;
}

.tarjetasInternas{
	padding: 0% 0;
}
.seccionEnfermedad{
	margin: 0;
	padding: 0;
}

.puntos{
	margin: 10% 2% 2% 2%;
	
	text-align: justify;
}
@media only screen and (max-width: 995px) {
	.ocultarG{
		display: block;
	}
	.ocultarP{
		display: none;
	}
}
@media only screen and (max-width: 768px) {
	
}

@media only screen and (max-width: 668px) {
	
}
@media only screen and (max-width: 568px) {
	
	.irPromo
{
	top:80%;
	left: 50%;
	}
	
	.equipoMedico{
	font-size: 1.5em;  padding: 6% ;width: 100%;line-height: 1.5em;
}
	.barraContacto{
	background-color:#2A347F;
	width: 100%;
	height: 20%;
	padding: 1em;

	
	
	
}
.barraContacto > p{
	font-size: 15px;
	padding-top: 3px;
	
}
	.espacioSeccion{
	margin-top: 25%;
}
	.section-title {
  margin: 0 auto 75px;
  width: 300px;
}
	.section-title p {
    line-height: 22px;
    font-weight: 200;
    font-size: 15px;
}
	
}
@media only screen and (max-width: 428px) {
	
	.irPromo
{
	top:85%;
	left: 30%;
	}
}
@media only screen and (max-width: 320px) {}


.wrapk{
  width: 100%;
  margin: 0 auto;
 
}

.colsk{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.colk{
  width: calc(30% - 1rem);
  margin: 1rem;

  cursor: pointer;
}

.container2{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-perspective: 1000px;
            perspective: 1000px;
}
.container3{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-perspective: 1000px;
            perspective: 1000px;
}
.front,
.back{
  background-size: cover;
    background-position: center;
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    text-align: center;
    min-height: 280px;
    height: auto;
    border-radius: 10px;
    color: #fff;
    font-size: 1.5rem;
}

.back{
  /*background: #2a347f;
  background: -webkit-linear-gradient(45deg,  #2a347f 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #2a347f 0%,#596a72 100%);
  background: linear-gradient(45deg,  #2a347f 0%,#596a72 100%);*/
	background-image: url(../img/back.jpg);
}

.front:after{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: 0;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container2:hover .front,
.container2:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
	margin-top: 0px;
	padding-top: 0px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	font-family: 'GOTHIC';
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 57%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}
.back > .inner{
	top: 51.5%;
	font-size: .7em;
}
.container2 .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container2 .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container2:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container2:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 2rem;
	font-family: "Gothic";
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 0px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .colk{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .colk{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .colk{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}
.footer-social {
    margin-bottom: 55px;
}

.footer-social h3 {
    font-size: 20px;
    color: #272727;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.footer-social h3:after {
  border-bottom: 1px solid #272727;
  bottom: 0;
  content: "";
  display: block;
  left: 50%;
  margin-left: -115px;
  position: absolute;
  width: 230px;
}

.footer-social ul li a {
  color: #272727;
  display: block;
	float: left;
	padding-left: 17%;
  margin: 0 8px;
}