@import url("https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

@font-face {
  font-family: "CharllyFontDuo";
  src: url("fonts/Charlly_Font_Duo/CharllySans.eot");
  src: url("fonts/Charlly_Font_Duo/CharllySans.woff") format("woff"),
  url("fonts/Charlly_Font_Duo/CharllySans.otf") format("opentype"),
  url("fonts/Charlly_Font_Duo/CharllySans.svg") format("svg");
}

.texto-prueba {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.title-service{
  font-family: "CharllyFontDuo";
  color: #fff;
  font-size: 50px;
  line-height: 45px;
  font-weight: 500;
  margin-bottom: 10px;
}

.text-service{
  font-family: "Poppins", sans-serif;
  color: #fff;
  font-size: 17px;
  line-height: 22px;
  margin-bottom: 0px;
  text-align: center;
}

.contenedor{
  position: relative;
  left: 0%;
  top: 0%;
  height: 350px;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 0px;
}

.contenido{
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  text-align: justify;
  color: black;
  padding: 40px;
  font-family: 'Merriweather', serif;
}

.flap {
  width: 100%;
  height: 100%;
}

.bg-rinoplastia{
  background: url("../img/servicios/cirugia/Cirugia-Rinoplastia-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.rinoplastia::before{
  background: url("../img/servicios/cirugia/CirugiaAzul-Rinoplastia.png");
}

.bg-bichectomia{
  background: url("../img/servicios/cirugia/Cirugia-Bichectomia-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.bichectomia::before{
  background: url("../img/servicios/cirugia/CirugiaAzul-Bichectomia.png");
}

.bg-blefaroplastia{
  background: url("../img/servicios/cirugia/Cirugia-Blefaroplastia-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.blefaroplastia::before{
  background: url("../img/servicios/cirugia/CirugiaAzul-Blefaroplastia.png");
}

.bg-otoplastia{
  background: url("../img/servicios/cirugia/Cirugia-Otoplastia-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.otoplastia::before{
  background: url("../img/servicios/cirugia/CirugiaAzul-Otoplastia.png");
}

.bg-liposuccion{
  background: url("../img/servicios/cirugia/Cirugia-Liposuccion-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.liposuccion::before{
  background: url("../img/servicios/cirugia/CirugiaAzul-Liposuccion.png");
}

.bg-mentoplastia{
  background: url("../img/servicios/cirugia/Cirugia-Mentoplastia-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.mentoplastia::before{
  background: url("../img/servicios/cirugia/CirugiaAzul-Mentoplastia.png");
}

.bg-hydrafacial{
  background: url("../img/servicios/aparatologia/Aparatologia-Hydrafacial-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.hydrafacial::before{
  background: url("../img/servicios/aparatologia/AparatologiaAzul-Hydrafacial.png");
}

.bg-viora{
  background: url("../img/servicios/aparatologia/Aparatologia-Viora-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.viora::before{
  background: url("../img/servicios/aparatologia/AparatologiaAzul-Viora.png");
}

.bg-fillers{
  background: url("../img/servicios/fillers/Fillers-Fillers-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.fillers::before{
  background: url("../img/servicios/fillers/FillersAzul-Fillers.png");
}

.bg-botox{
  background: url("../img/servicios/fillers/Fillers-Botox-Gris.png") #c2c2c2;
  background-position: 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.botox::before{
  background: url("../img/servicios/fillers/FillersAzul-Botox.png");
}

.flap::before {
  position: absolute;
  top: 0%;
  left: 0%;
  content: "";
  height: 100%;
  width: 100%;
  background-size: 100% auto;
  background-position: 0px;
  background-repeat: no-repeat;
  transition: 1s;
}

.contenedor:hover .flap::before{
  transform: translatey(-400px);
}