

body{
  font-family: 'Raleway';
}

body p{
  color: gray;
}
body h2{
  color: gray;
}
@font-face {
	font-family: 'icomoon';
	src:url('../iconos/fonts/icomoon.eot?tlsj78');
	src:url('../iconos/fonts/icomoon.eot?#iefixtlsj78') format('embedded-opentype'),
		url('../iconos/fonts/icomoon.ttf?tlsj78') format('truetype'),
		url('../iconos/fonts/icomoon.woff?tlsj78') format('woff'),
		url('../iconos/fonts/icomoon.svg?tlsj78#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-down:after {
	content: "\e100";
}


#myVideo {
    /*position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    right: 0;*/
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: black;
    /*mix-blend-mode: color-dodge;*/
    mix-blend-mode: overlay;
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: 0;
}

.video{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  overflow: hidden;
}

.principal{
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  z-index: 9999;
}
.principal h2{
   text-align: center;
  color: white;
  font-weight: 700;
  font-size: 80px;
  margin-bottom: 24px;
  z-index: 9999;
}
.principal a{
  color: white;
  border:1px solid white;
  padding: 1em;
  border-radius: 4px;
}
.principal a:hover{
  background: #0f65a0;
  transition: .5s;
}
.principal img{
    margin-top: 5em;
}
.redes-head {
  position: fixed;
  right: 7px;
  top: 20%;
  z-index: 999999;
  width: auto;
}
.redes-head * {
  -webkit-transition: all ease .1s;
  -moz-transition: all ease .1s;
  -ms-transition: all ease .1s;
  -o-transition: all ease .1s;
  transition: all ease .1s;
}
.redes-head ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.redes-head ul li {
  display: block;
  margin: 5px 0 0 0;
}
.redes-head ul li a {
  display: block;
  text-decoration: none;
  padding: 11px;
  font-size: 20px;
  text-align: center;
  border-radius: 60px;
  color: #FFF;
}

.redes-head ul:hover li {
  opacity: .8;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  -ms-transform: scale(.8);
  -o-transform: scale(.8);
  transform: scale(.8);
}
.redes-head ul li:hover {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.redes-head ul li .icon-facebook    { background: #3a599a; }
.redes-head ul li .icon-instagram   { box-shadow: 5px 6px 15px 1px #3f67c9 inset, -12px 8px 9px 1px #c737aa inset, -4px -5px 12px 1px #db4184 inset, 20px -12px 16px 1px #fec04f inset;}
.redes-head ul li .icon-google-plus { background: #dd4c39; }
.redes-head ul li .icon-whatsapp    { background: #53cc60; }
.redes-head .payu-head{
  height: 50px;
  background: #479951;
}
.margin-top{
  margin: 2em;
}
.bg-lineas{
  background-image: url('../iconos/lineas.png');
  background-size: 55%;
  background-position: 75%;
  background-repeat: no-repeat;
}

.title{
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 19px;
}

.title2 {
  font-weight: 700;
  margin-top: 0px;
  margin-bottom: 19px;
  color: #3f9381;
  font-size: 25px;
  font-family: "Open Sans", Sans-serif;
  font-weight: bold;
  width: 90%;
}
.title2 u {
  display: block;
  text-decoration: none;
  border-bottom: 1px dashed gray;
  padding: 0 0 12px 0;
}

u {
  text-decoration: none;
  border-bottom: 1px solid gray;
}
.margin_p {
  display: block;
  padding: 30px 0 0 0;
  font-size: 16px;
  width: 100%;
  margin: 0;
}
.subtitle2 {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #449cd1;
  font-weight: bold;
}

#sub2 {
  padding: 0 0 0 55px;
  box-sizing: border-box;
}
.x{

}

.presentacion {
  border: 1px solid gray;
  padding: 10px;
  margin-top: 2em;
  color: gray;
  font-weight: 600;
}



.presentacion2 {
  display: block;
  width: 250px;
  text-align: center;
  border-radius: 5px;
  padding: 15px 10px;
  margin: 5px auto;
  color: gray;
  font-weight: 300;
  background: #00A99D;
  font-size: 18px;
  color: #FFF;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.presentacion2:hover {
  background: #FFF;
  color: #00A99D;
}

.text-center2 {
  display: block;
  text-align: center;
  padding: 1rem 0 2em;
}

.google{
  margin-top: 2em;
}

.iconos-serv{
  display: flex;
  display: -webkit-flex;
  width: 100%;
  overflow: hidden;
}
.iconos-serv img{
  width: 100%;
}
.iconos-serv .icon{
  width: 100%;
  position: relative;
  cursor: pointer;
}
.iconos-serv .icon a{
  color: white;
}
.texto-icon{
  text-align: center;
  position: absolute;
  top: 0;
  background: rgba(0,0,0,.7);
  width: 100%;
  height: 100%;
  color: white;
  opacity: 0;
  transition: 0.5s;
}
.texto-icon:hover{
  opacity: 1;
  transition: 0.5s;
}
.texto-icon h1{
    margin-top: 30%;
}
.texto-icon a{
   padding: 7px;
}
.iconos-serv  img:hover .text-icon{
  visibility: visible !important;
  opacity: 1 !important;
}

.bg-anuncio{
    padding: 1em;
    color: white;
}
.bg-anuncio h2{
    font-size: 40px;
}

#anuncio{
    background-image: url(../iconos/fondo-anuncios.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    position: relative;
    text-align: center;
    padding-bottom: 7em;
    padding-top: 4em;
    position: relative;
}
#anuncio p {
  color: white;
}
.portafolio{
  display: flex;
  justify-content: center;
}



.formulario_reserva {
  display: block;
  padding: 25px 0 10px 0;
  background: #44a9e5;
}
.formulario_reserva form {
  display: block;
  min-width: 300px;
  width: 100%;
  max-width: 850px;
  margin: 0px auto;
  background: #FFF;
  padding: 5px 15px;
  box-sizing: border-box;
  border-radius: 10px;
}
.formulario_reserva form * {
  display: block;
  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  -o-transition: all ease .3s;
  transition: all ease .3s;
}
.formulario_reserva form b {
  text-align: center;
  color: #44a9e5;
  font-weight: 600;
  margin: 10px 0 5px;
}
.formulario_reserva form h3 {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #597a96;
  margin: 0;
  padding: 0;
}
.formulario_reserva form u {
  display: block;
  width: 80%;
  margin: 20px auto;
  border: 0;
  border-bottom: 1px dashed #7a7a7a;
}
.formulario_reserva form i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: #597a96;
  text-align: center;
  margin: 20px 0;
}
.formulario_reserva form div {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 15px auto;
}
.formulario_reserva form div input {
  display: block;
  width: 47%;
  margin: 5px 7px;
  background: #eef2f4;
  border-radius: 5px;
  padding: 10px;
  font-size: 15px;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.formulario_reserva form div input:focus {
  padding: 10px 0 10px 20px;
}
.formulario_reserva form div select {
  display: block;
  width: 47%;
  outline: none;
  font-size: 15px;
  border-radius: 5px;
  padding: 10px;
  border: 0;
}
.formulario_reserva form textarea {
  display: block;
  max-width: 76%;
  min-width: 76%;
  max-height: 290px;
  min-height: 290px;
  margin: 5px auto;
  background: #eef2f4;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border-radius: 10px;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.formulario_reserva form textarea:focus {
  padding: 10px 0 10px 20px;
}
.formulario_reserva form nav {
  display: block;
  text-align: center;
  margin: 15px 0;
}
.formulario_reserva form nav input {
  display: inline-block;
}
.formulario_reserva form nav span {
  display: inline-block;
  padding: 0 0 0 7px;
  color: #219dd0;
  font-size: 14px;
  font-weight: 400;
}
.formulario_reserva form div button {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #FFF;
  text-align: center;
  padding: 15px;
  background: #219dd0;
  width: 49%;
  border-radius: 3px;
  outline: none;
  border: 0;
}

#content_box {
  display: block;
  position: relative;
  width: 100%;
}
#content_box * {
  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  -o-transition: all ease .3s;
  transition: all ease .3s;
}
#content_box nav {
  position: relative;
  display: flex;
  justify-content: center;
}
#content_box nav > div {
  position: relative;
  display: block;
  height: 290px;
  background: #FFF;
  cursor: default;
  overflow: hidden;
}
#content_box nav .box-33 { width: 33.3%; }
#content_box nav .box-66 { width: 66.6%; }
#content_box nav > div > img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
  background-size: contain;
  object-fit: cover;
}
#content_box nav > div:hover > img {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}
#content_box nav > div span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(0,0,0,.7);
  top: 0;
  left: 0;
  opacity: 0;
}
#content_box nav div:hover span {
  opacity: 1;
}
#content_box nav > div span img {
  display: block;
  margin: 0 0 0 -150%;
  -webkit-transition: all ease .3s .2s;
  -moz-transition: all ease .3s .2s;
  -ms-transition: all ease .3s .2s;
  -o-transition: all ease .3s .2s;
  transition: all ease .3s .2s;
}
#content_box nav > div span a {
  display: block;
  padding: 8px 10px;
  color: #FFF;
  width: 120px;
  border-radius: 14px;
  border: 1px solid #FFF;
  text-align: center;
  text-decoration: none;
  margin: 8px -100% 0;
  cursor: pointer;
}
#content_box nav > div span a:hover {
  background: #FFF;
  color: #333;
}
#content_box nav > div:hover span a {
  margin: 8px 17% 0;
}
#content_box nav > div:hover span img {
  margin: 0 0 0 0;
}


@media screen and (max-width: 1265px){
     .espacio-right3{
      margin-right: 2em;
    }
}

@media screen and (max-width: 1230px){
  .principal img{
    margin-top: 1em;
  }
}
@media screen and (max-width: 1120px){
   .principal h2{
      font-size: 60px;
   }
}
@media screen and (max-width: 1185px){
     .texto-icon h1{
      font-size: 30px;
    }
}
@media screen and (max-width: 1080px){
  .principal {
    top: 30%; 
  }
  .principal img{
    margin-top: 4em;
  }
}
@media screen and (max-width: 1023px){
	.popScroll3{
		display: none;
	}
}
@media screen and (max-width: 993px){

     .texto-icon h1{
      font-size: 25px;
    }
    .principal{
      top: 25%;
      width: 90%;
      left:0;
      right: 0;
      margin-right: auto;
      margin-left: auto;
      
    }
    .principal h2{
      font-size: 45px;
   }

    .redes-head{
      top: 25%;
    }
    .redes-head ul li img{
      width: 40px;
    }

    #content_box nav {
      display: block;
    }
    #content_box nav .box-33,
    #content_box nav .box-66 {
      width: 100%;
    }

    #content_box nav div span {
      opacity: 1;
      background: rgba(0,0,0,.6)
    }

    #content_box nav div span img {
      margin: 0 0 0 0;
    }
    #sub2 {
      padding: 0;
    }
}
@media screen and (max-width: 860px){
    .texto-icon{
      opacity: 1;
      visibility: visible;
    }
    .principal {
      top: 20%; 
    }
    .redes-head{
      top: 20%;
    }
}
@media screen and (max-width: 769px){
   .iconos-serv{
      margin-top: 2em;
      flex-direction: row;
      width: 100%;
      display: block;
   }
   .texto-icon h1{
      font-size: 40px;    }
}
@media screen and (max-width: 690px){
  .principal{
    top: 20%;
  }
  .principal h2{
    font-size: 30px;
  }
  .principal img{
    display: none;
  }
  .redes-head{
      display: none;
  }
   
}
 @media screen and (max-width: 569px){
        .logapoyo img{
            width: 40%;
        }
        .logapoyo .min{
            width: 60%;
        }
        .principal{
            top: 20%;
          }
    }
@media screen and (max-width: 435px){
    .principal{
            top: 14%;
      }
      .principal h2{
        font-size: 26px;
      }
}

@media screen and (max-width: 440px){
  #anuncio{
     height: 406px;
  }
  .nosotros, .servicios{
    display: none;
  }
  .ubicacion, .pagos-enlinea, .siguenos{
    width: 100%;
    text-align: center;
  }
  .pagos-enlinea img{
    margin: auto !important;
    text-align: center;
  }
}
@media screen and (max-width: 321px){
      .principal{
            top: 12%;
      }
      .principal h2{
        font-size: 16px;
      }
}






