/*-----------------------------------------------------------------------------------*/

/* Cómo funciona una piscina */

/*-----------------------------------------------------------------------------------*/

.page-template-template-como-funciona-php .main-como {

  display: block;

  /*background-color: #efefef;*/

  width: 100%;

  padding-top: 25px;

}

.page-template-template-como-funciona-php .main-como a {

  font-weight: normal !important;

}

.page-template-template-como-funciona-php .main-como a:hover {

  color: #ff8000;

}

.page-template-template-como-funciona-php .main-como .sect-como {

  width: 100%;

  max-width: 1225px;

  /*min-width:767px;*/

  margin: 0 auto;

  padding: 24px 0;

  overflow: hidden;

  background-color: #ffffff;

  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);

}

.page-template-template-como-funciona-php .main-como .sect-como .page-title {

  width: 92%;

  padding: 10px 4%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg {

  background: url('images/piscina1.jpg') center center no-repeat;

  background-size: 100% 100%;

  position: relative;

  width: 100%;

  height: 0;

  padding-bottom: 80.48975%;

  z-index: 9;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap {

  position: absolute;

  z-index: 999;

  height: auto;

  width: 40%;

  opacity: 0.8;

  left: 30%;

  top: 15%;

  background-color: white;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text {

  display: none;

  width: 82%;

  padding-left: 13%;

  transition: all 2s linear;

  -moz-transition: all 2s linear;

  -webkit-transition: all 2s linear;

  -ms-transition: all 2s linear;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .fa-times-circle {

  display: block;

  width: 100%;

  overflow: hidden;

  cursor: pointer;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .fa-times-circle:before {

  content: "\f057";

  font-size: 24px;

  color: gray;

  margin-top: 6px;

  margin-right: 7px;

  float: right;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .fa-info {

  display: inline-block;

  width: 30px;

  background-color: #009ede;

  height: 24px;

  border-radius: 50%;

  text-align: center;

  padding-top: 6px;

  color: white;

  margin-left: -40px;

  margin-right: 10px;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .sname {

  display: inline-block;

  width: 100%;

  color: #009ede;

  font-size: 22px;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info {

  position: relative;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-bot {

  position: relative;

  z-index: 99;

  top: 0;

  left: 0;

  width: 13%;

  margin-top: 15px;

  margin-left: -13%;

  display: inline-block;

  height: auto;

  border-radius: 0;

  text-align: center;

  font-size: 26px;

  border: none;

  opacity: 1 !important;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b1 {

  color: #A7BC44;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b2 {

  color: #A7BC44;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b3 {

  color: #A7BC44;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b4 {

  color: #A7BC44;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b5 {

  color: #F87D74;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b6 {

  color: #F87D74;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b7 {

  color: #F87D74;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b8 {

  color: #F87D74;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b9 {

  color: #FECA2A;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b10 {

  color: #73B5CB;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b11 {

  color: #73B5CB;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b12 {

  color: #9680C9;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b13 {

  color: #9680C9;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b14 {

  color: #DA90BC;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b15 {

  color: #BFA68A;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-b16 {

  color: #BFA68A;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .infor-wrap .group-infor .inf-text .num-info .num-t {

  margin-left: -1%;

  font-size: 18px;

  opacity: 1 !important;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot {

  position: absolute;

  z-index: 99;

  display: inline-block;

  height: 24px;

  width: 24px;

  border-radius: 50%;

  text-align: center;

  color: white;

  border: 1px solid white;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot1 {

  background-color: #A7BC44;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot2 {

  background-color: #F87D74;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot3 {

  background-color: #FECA2A;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot4 {

  background-color: #73B5CB;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot5 {

  background-color: #9680C9;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot6 {

  background-color: #DA90BC;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-bot7 {

  background-color: #BFA68A;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b1 {

  top: 63%;

  left: 72.5%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b2 {

  top: 79%;

  left: 65.5%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b3 {

  top: 69%;

  left: 77%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b4 {

  top: 71%;

  left: 63.5%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b5 {

  top: 78.5%;

  left: 12.5%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b6 {

  top: 89%;

  left: 10%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b7 {

  top: 27%;

  left: 58%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b8 {

  top: 36%;

  left: 44%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b9 {

  top: 44.5%;

  left: 43.5%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b10 {

  top: 19%;

  left: 55.5%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b11 {

  top: 9%;

  left: 64%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b12 {

  top: 68%;

  left: 56%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b13 {

  top: 75%;

  left: 92%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b14 {

  top: 76.5%;

  left: 82%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b15 {

  top: 54%;

  left: 24%;

}

.page-template-template-como-funciona-php .main-como .sect-como .wrap-imgbg .num-b16 {

  top: 16.5%;

  left: 26%;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo {

  width: 92%;

  padding: 10px 4%;

  margin-top: 50px;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one {

  display: inline-block;

  width: 33%;

  float: left;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .column-subt {

  display: block;

  width: 88%;

  padding-left: 2%;

  margin-bottom: 15px;

  color: #009ede;

  font-size: 22px;
  
  border-bottom: 1px solid #ccc;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .column-subt .sub-name {

  margin-right: 20px;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .column-subt .fa-info {

  height: 24px;

  width: 26px;

  padding-top: 2px;

  background-color: #009ede;

  border-radius: 50%;

  text-align: center;

  color: #FFF;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list {

  display: block;

  width: 95%;

  margin-right: 5%;

  padding-bottom: 15px;

  margin-bottom: 15px;

  /*border-bottom: 2px solid #efefef;*/

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list .item-wr {

  display: block;

  padding: 5px 0;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list .item-wr .num-bot {

  display: inline-block;

  width: 24px;

  height: 24px;

  background-color: blue;

  color: white;

  border-radius: 50%;

  text-align: center;

  margin-right: 10px;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list .item-wr .num-info {

  transition: all 2s linear;

  -moz-transition: all 2s linear;

  -webkit-transition: all 2s linear;

  -ms-transition: all 2s linear;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list1 .item-wr .num-bot {

  background-color: #A7BC44;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list2 .item-wr .num-bot {

  background-color: #F87D74;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list3 .item-wr .num-bot {

  background-color: #FECA2A;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list4 .item-wr .num-bot {

  background-color: #73B5CB;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list5 .item-wr .num-bot {

  background-color: #9680C9;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list6 .item-wr .num-bot {

  background-color: #DA90BC;

}

.page-template-template-como-funciona-php .main-como .sect-como .botinfo .colum-one .p-list7 .item-wr .num-bot {

  background-color: #BFA68A;

}

.wrap-imgbg {

  /*

  .cubierta-w{

    position: absolute;

    top: 0%;

    left: 0%;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: url('images/cub2.png') no-repeat;

    border: 1px solid red;

  }

  .cubierta-2{

      position: absolute;

      top: 13.3%;

      left: 2.5%;

      width: 77%;

      height: 67%;

  }

  */

}

.wrap-imgbg .green-arrows {

  position: absolute;

  top: 80%;

  left: 49%;

  width: 3%;

  height: 17%;

  overflow: hidden;

  -webkit-transform: rotate3d(1, 0, 0, 28deg) rotate3d(0, 1, 0, -2deg) rotate3d(0, 0, 1, -41deg);

  transform: rotate3d(1, 0, 0, 28deg) rotate3d(0, 1, 0, -2deg) rotate3d(0, 0, 1, -41deg);

  /* flechas verdes */

}

.wrap-imgbg .green-arrows .g-arrows {

  background: url('images/fv3.png') no-repeat;

  background-size: cover;

  position: absolute;

  width: 100%;

  height: 56%;

  -webkit-animation: averde 5s linear infinite;

  animation: averde 5s linear infinite;

}

@keyframes averde {

  from {

    top: -56%;

  }

  to {

    top: 110%;

  }

}

@-webkit-keyframes averde {

  from {

    top: -56%;

  }

  to {

    top: 110%;

  }

}

.wrap-imgbg .blue-arrows {

  position: absolute;

  top: 55%;

  left: 90%;

  width: 3%;

  height: 17%;

  overflow: hidden;

  -webkit-transform: rotate3d(1, 0, 0, -47deg) rotate3d(0, 1, 0, -6deg) rotate3d(0, 0, 1, -48deg);

  transform: rotate3d(1, 0, 0, -47deg) rotate3d(0, 1, 0, -6deg) rotate3d(0, 0, 1, -48deg);

  /* flechas verdes */

}

.wrap-imgbg .blue-arrows .b-arrows {

  background: url('images/fa3.png') no-repeat;

  background-size: cover;

  position: absolute;

  width: 100%;

  height: 56%;

  -webkit-animation: aazul 5s linear infinite;

  animation: aazul 5s linear infinite;

}

@keyframes aazul {

  from {

    top: 110%;

  }

  to {

    top: -56%;

  }

}

@-webkit-keyframes aazul {

  from {

    top: 110%;

  }

  to {

    top: -56%;

  }

}

.wrap-imgbg .limpia {

  /*

    position: absolute;

    top: 37%;

    left: 39%;

    width: 16%;

    height: 24%;

    overflow: hidden;

    z-index:9;



    -webkit-transform: rotate3d(1, 0, 0, -42deg) rotate3d(0, 1, 0, -6deg) rotate3d(0, 0, 1, -46deg);

    transform: rotate3d(1, 0, 0, -42deg) rotate3d(0, 1, 0, -6deg) rotate3d(0, 0, 1, -46deg);

  

    */

  position: absolute;

  top: 39%;

  left: 39%;

  width: 16%;

  height: 16%;

  overflow: visible;

  z-index: 9;

  /* Limpiafondos */

}

.wrap-imgbg .limpia .limp-aparato {

  /*

      background:url('images/limpiador.png') no-repeat;

      background-size:contain;

      position:absolute;

      width: 100%;

      height: 56%;

      right: 14%;

          bottom: 45%;

       

      -webkit-transform: rotate3d(1, 0, 0, 11deg) rotate3d(0, 1, 0, -2deg) rotate3d(0, 0, 1, -1deg);

              transform: rotate3d(1, 0, 0, 11deg) rotate3d(0, 1, 0, -2deg) rotate3d(0, 0, 1, -1deg);

      */

  background: url('images/limpiador.png') no-repeat;

  background-size: contain;

  position: absolute;

  width: 100%;

  height: 63%;

  right: 14%;

  bottom: 49%;

  -webkit-animation: aaparato 25s linear infinite;

  animation: aaparato 25s linear infinite;

}

@keyframes aaparato {

  0% {

    right: 14%;

    bottom: -31%;

  }

  25% {

    right: 14%;

    bottom: 45%;

  }

  50% {

    right: -36%;

    bottom: 45%;

  }

  75% {

    right: -36%;

    bottom: -31%;

  }

  100% {

    right: 14%;

    bottom: -31%;

  }

}

@-webkit-keyframes aaparato {

  0% {

    right: 14%;

    bottom: -31%;

  }

  25% {

    right: 14%;

    bottom: 45%;

  }

  50% {

    right: -36%;

    bottom: 45%;

  }

  75% {

    right: -36%;

    bottom: -31%;

  }

  100% {

    right: 14%;

    bottom: -31%;

  }

}

.wrap-imgbg .cubierta-w {

  z-index: 99;

  position: absolute;

}

.wrap-imgbg .cubierta-w img {

  display: none;

  -webkit-transition: all 1.25s ease;

  -moz-transition: all 1.25s ease;

  -ms-transition: all 1.25s ease;

  -o-transition: all 1.25s ease;

  transition: all 1.25s ease;

}

.wrap-imgbg .cubierta-w img:first-child {

  display: block;

}

.wrap-imgbg .luces {

  position: absolute;

  top: 24.5%;

  left: 39%;

  display: block;

  width: 11%;

  border-radius: 63%;

  height: 17%;

  overflow: hidden;

  -webkit-transform: rotate3d(1, 0, 0, 11deg) rotate3d(0, 1, 0, -2deg) rotate3d(0, 0, 1, -1deg);

  transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -27deg);

  background: url('images/luces2.png') center center no-repeat;

  background-size: contain;

}

.wrap-imgbg .luces1 {

  position: absolute;

  top: 37.6%;

  left: 13.7%;

  display: block;

  width: 11%;

  border-radius: 63%;

  height: 17%;

  overflow: hidden;

  -webkit-transform: rotate3d(1, 0, 0, 11deg) rotate3d(0, 1, 0, -2deg) rotate3d(0, 0, 1, -1deg);

  transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -27deg);

  background: url('images/luces2.png') center center no-repeat;

  background-size: contain;

}

.botonopac {

  opacity: 0.3 !important;

}