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

Modules - reusable parts of our design

-------------------------------- */
 .cd-container {
   /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
   width: 100%;
   max-width: 1024px;
   max-height: 700px;
   margin: 0 auto;

 }

 .cd-container:after {
   content: "";
   display: table;
   clear: both;
 }

 .cd-img-replace {
   /* replace text with background images */
   display: inline-block;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
 }

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

Main components 

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


 .cd-product {
   text-align: center;
 }

 .cd-product-wrapper {
   display: inline-block;
   position: relative;
   margin: 0 auto;
   width: 100%;
   max-width: 100%;
   min-height: 667px;
 }

 .cd-product-wrapper>img {
   display: block;
 }

 .cd-single-point {
   position: absolute;
   /* border-radius: 50%; */
   list-style: none;
 }

 .cd-single-point>a {
   position: relative;
   z-index: 2;
   display: block;
   /* width: 80px;
   height: 100px; */
   width: 100%;
   height: 100%;

   /* border-radius: inherit; */
   /* border: 2px solid white; */
   /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s; */
 }

 li.cd-single-point.is-open {
   animation: none;
 }

 .cd-single-point>a:after,
 .cd-single-point>a:before {
   /* rotating plus icon */
   /* content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-color: #fff;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s; */
 }

 .cd-single-point>a:after {
   height: 3px;
   width: 20px;
 }

 .cd-single-point>a:before {
   height: 20px;
   width: 3px;
 }

 .cd-single-point:after {
   /* this is used to create the pulse animation */
   /* content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background-color: transparent;
  -webkit-animation: cd-pulse 2s infinite;
  -moz-animation: cd-pulse 2s infinite;
  animation: cd-pulse 2s infinite; */
 }

 .cd-single-point:nth-of-type(1) {
   background-image: url(../img/btn-1.svg);
   background-size: contain;
   background-repeat: no-repeat;
   top: 57.5%;
   left: 7.9%;
   width: 14.5%;
   height: 6%;
   transition: all .2s;
 }

 /* .cd-single-point:nth-of-type(1):hover {
   background-image: url(../img/btn-1-hover.svg);
 } */

 .cd-single-point:nth-of-type(2) {
   background-image: url(../img/btn-2.svg);
   background-size: contain;
   background-repeat: no-repeat;
   top: 66.4%;
   left: 21.3%;
   width: 13%;
   height: 4%;
   transition: all .2s;
 }

 /* .cd-single-point:nth-of-type(2):hover {
   background-image: url(../img/btn-2-hover.svg);
 } */

 .cd-single-point:nth-of-type(3) {
   background-image: url(../img/btn-3.svg);
   background-size: contain;
   background-repeat: no-repeat;
   top: 71.3%;
    left: 21.5%;
    width: 19.5%;
    height: 5.5%;
   transition: all .2s;
 }

 /* .cd-single-point:nth-of-type(3):hover {
   background-image: url(../img/btn-3-hover.svg);
 } */

 .cd-single-point:nth-of-type(4) {
   background-image: url(../img/btn-4.svg);
   background-size: contain;
   background-repeat: no-repeat;
   top: 68%;
    left: 39.5%;
    width: 17%;
    height: 5.4%;
   transition: all .2s;
 }

 /* .cd-single-point:nth-of-type(4):hover {
   background-image: url(../img/btn-4-hover.svg);
 } */

 .cd-single-point:nth-of-type(5) {
   background-image: url(../img/btn-5.svg);
   background-size: contain;
   background-repeat: no-repeat;
   top: 61.6%;
    left: 22.6%;
    width: 11%;
    height: 3.4%;
   transition: all .2s;
 }

 /* .cd-single-point:nth-of-type(5):hover {
   background-image: url(../img/btn-5-hover.svg);
 } */


 .cd-single-point:nth-of-type(6) {
   background-image: url(../img/btn-6.svg);
   background-size: contain;
   background-repeat: no-repeat;
   top: 56.5%;
    left: 23%;
    width: 21.5%;
    height: 3%;
   transition: all .2s;
 }

 /* .cd-single-point:nth-of-type(6):hover {
   background-image: url(../img/btn-6-hover.svg);
 } */

 .cd-single-point:nth-of-type(7) {
   background-image: url(../img/btn-7.svg);
   background-size: contain;
   background-repeat: no-repeat;
   top: 61%;
    left: 1%;
    width: 19.4%;
    height: 9.7%;
   transition: all .2s;
 }

 /* .cd-single-point:nth-of-type(7):hover {
   background-image: url(../img/btn-7-hover.svg);
 } */

 .cd-single-point:nth-of-type(8) {
  background-image: url(../img/btn-8.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 61.3%;
    left: 35.4%;
    width: 18.2%;
    height: 5%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(9) {
  background-image: url(../img/btn-9.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 33.4%;
    left: 2.9%;
    width: 17.5%;
    height: 7%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(10) {
  background-image: url(../img/btn-10.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 39.4%;
    left: 21.9%;
    width: 14.5%;
    height: 8.5%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(11) {
  background-image: url(../img/btn-11.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 44.4%;
    left: 43.3%;
    width: 20.5%;
    height: 5.5%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(12) {
  background-image: url(../img/btn-12.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 30.4%;
    left: 46.3%;
    width: 18.5%;
    height: 3%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(13) {
  background-image: url(../img/btn-13.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 60.4%;
    left: 60.3%;
    width: 7.5%;
    height: 6%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(14) {
  background-image: url(../img/btn-14.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 56.4%;
    left: 70.1%;
    width: 20.5%;
    height: 6%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(15) {
  background-image: url(../img/btn-15.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 48.4%;
    left: 68%;
    width: 20.5%;
    height: 5%;
  transition: all .2s;
}

.cd-single-point:nth-of-type(16) {
  background-image: url(../img/btn-16.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 24.4%;
  left: 64%;
  width: 12.5%;
  height: 8%;
  transition: all .2s;
}

@media (max-width: 768px) {
  .cd-single-point:nth-of-type(1) {
    background-image: url(../img/btn-1-mobile.svg);
    top: 57%;
        left: 4.6%;
        width: 16.5%;
        height: 8%;
  }

  .cd-single-point:nth-of-type(2) {
    background-image: url(../img/btn-2-mobile.svg);
    top: 66%;
    left: 21%;
    width: 14%;
    height: 5%;
  }

  .cd-single-point:nth-of-type(3) {
    background-image: url(../img/btn-3-mobile.svg);
    top: 71%;
    left: 21.5%;
    width: 20.5%;
    height: 6.5%;
  }

  .cd-single-point:nth-of-type(4) {
    background-image: url(../img/btn-4-mobile.svg);
    top: 68%;
    left: 40%;
    width: 18%;
    height: 6%;
  }
 
  .cd-single-point:nth-of-type(5) {
    background-image: url(../img/btn-5-mobile.svg);
    top: 61.6%;
    left: 22.6%;
    width: 12%;
    height: 3.4%;
  }
 
  .cd-single-point:nth-of-type(6) {
    background-image: url(../img/btn-6-mobile.svg);
    top: 56.5%;
    left: 21%;
    width: 22.5%;
    height: 3%;
  }
 
  .cd-single-point:nth-of-type(7) {
    background-image: url(../img/btn-7-mobile.svg);
    top: 62.5%;
    left: 1%;
    width: 22%;
    height: 10%;
  }
 
  .cd-single-point:nth-of-type(8) {
    background-image: url(../img/btn-8-mobile.svg);
    top: 61.3%;
    left: 35.7%;
    width: 19.2%;
    height: 6%;
 }
 
 .cd-single-point:nth-of-type(9) {
  background-image: url(../img/btn-9-mobile.svg);
  top: 33.7%;
  left: 0.9%;
  width: 19%;
  height: 8%;
 }
 
 .cd-single-point:nth-of-type(10) {
  background-image: url(../img/btn-10-mobile.svg);
  top: 40%;
  left: 22%;
  width: 14.5%;
  height: 9%;
 }
 
 .cd-single-point:nth-of-type(11) {
  background-image: url(../img/btn-11-mobile.svg);
  top: 45%;
  left: 43%;
  width: 21.5%;
  height: 6.5%;
 }
 
 .cd-single-point:nth-of-type(12) {
  background-image: url(../img/btn-12-mobile.svg);
  top: 31.5%;
  left: 46%;
  width: 20%;
  height: 4%;
 }
 
 .cd-single-point:nth-of-type(13) {
  background-image: url(../img/btn-13-mobile.svg);
  top: 60%;
  left: 60%;
  width: 8%;
  height: 7%;
 }
 
 .cd-single-point:nth-of-type(14) {
  background-image: url(../img/btn-14-mobile.svg);
  top: 57%;
  left: 70%;
  width: 22%;
  height: 7%;
 }
 
 .cd-single-point:nth-of-type(15) {
  background-image: url(../img/btn-15-mobile.svg);
  top: 49%;
  left: 68%;
  width: 22%;
  height: 6%;
 }
 
 .cd-single-point:nth-of-type(16) {
  background-image: url(../img/btn-16-mobile.svg);
  top: 25%;
  left: 63%;
  width: 13.5%;
  height: 9%;
 }
}

 /* .cd-single-point.is-open > a {
  background-color:#000;
} */
 .cd-single-point.is-open>a::after,
 .cd-single-point.is-open>a::before {
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
   -moz-transform: translateX(-50%) translateY(-50%) rotate(135deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(135deg);
   -o-transform: translateX(-50%) translateY(-50%) rotate(135deg);
   transform: translateX(-50%) translateY(-50%) rotate(135deg);
 }

 .cd-single-point.is-open::after {
   /* remove pulse effect */
   display: none;
 }

 .cd-single-point.is-open .cd-more-info {
   visibility: visible;
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
   -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
   transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
 }

 /* .cd-single-point.visited > a {
  background-color:#6e6b6b;
} */
 .cd-single-point.visited::after {
   /* pulse effect no more active on visited elements */
   display: none;
 }

 @media only screen and (min-width: 600px) {


   /* .cd-single-point > a {
    width: 40px;
    height: 40px;
  } */




   .cd-single-point.is-open .cd-more-info.cd-left {
     right: 120%;

   }

   .cd-single-point.is-open .cd-more-info.cd-right {
     left: 120%;
   }

   .cd-single-point.is-open .cd-more-info.cd-top {
     bottom: 120%;

   }

   .cd-single-point.is-open .cd-more-info.cd-bottom {
     top: 120%;
   }

   .col-xs-12 {
     width: 50%;
   }

 }





 @media only screen and (max-width: 991px) {
   /* .cd-single-point:nth-of-type(1) {
    top: 35%;
    right: 36%;
    width: 70px;
    height: 93px;
}
.cd-single-point:nth-of-type(2) {
    top: 55%;
    left: 5%;
    width: 82px;
    height: 100px;
}

.cd-single-point:nth-of-type(3) {
  top: 23%;
  left: 5%;
  width: 80px;
  height: 80px;
}
.cd-single-point:nth-of-type(4) {
  top: 23%;
  right: 33%;
  width: 60px;
  height: 80px;
}
.cd-single-point:nth-of-type(5) {
  top: 38.5%;
  left: 6%;
  width: 88px;
  height: 82px;
}

.cd-single-point:nth-of-type(6) {
  bottom: 12.5%;
  left: 3%;
  width: 81px;
  height: 77px;
}

.cd-single-point:nth-of-type(7) {
  top: 3%;
  left: 14%;
  width: 100px;
  height: 64px;
}

.cd-single-point:nth-of-type(8) {
  top: 8.5%;
  right: 0%;
  width: 100px;
  height: 64px;
}

.cd-single-point:nth-of-type(9) {
  top: 24.5%;
  left: 25%;
  width: 91px;
  height: 63px;
}

.cd-single-point:nth-of-type(10) {
  top: 9%;
  left: 28%;
  width: 80px;
  height: 50px;
} */
 }

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

   .cd-container {
     /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
     width: 100%;
     max-height: 550px;
     margin: 0 auto;
   }

   .cd-product-wrapper {

     min-height: 250px;
   }

   /* .cd-single-point:nth-of-type(1) {
  top: 12%;
  left: 44%;
} */
   /* .cd-single-point:nth-of-type(2) {
  top: 21%;
  left: 44%;
} */

   /* .cd-single-point:nth-of-type(3) {
  top: 59%;
  left: 44%;
} */
   /* .cd-single-point:nth-of-type(4) {
  top: 68%;
  left: 44%;
} */
   /* .cd-single-point:nth-of-type(5) {
    top: 80%;
    left: 44%;
} */

   .cd-single-point>a:after {
     height: 2px;
     width: 12px;
   }

   .cd-single-point>a:before {
     height: 12px;
     width: 2px;
   }


 }


 @-webkit-keyframes cd-pulse {
   0% {
     -webkit-transform: scale(1);
     box-shadow: inset 0 0 1px 1px rgb(19, 97, 158);
   }

   50% {
     box-shadow: inset 0 0 1px 1px rgb(19, 97, 158);
   }

   100% {
     -webkit-transform: scale(1.6);
     box-shadow: inset 0 0 1px 1px rgb(19, 97, 158);
   }
 }

 @-moz-keyframes cd-pulse {
   0% {
     -moz-transform: scale(1);
     box-shadow: inset 0 0 1px 1px rgb(19, 97, 158);
   }

   50% {
     box-shadow: inset 0 0 1px 1px rgb(255, 255, 255);
   }

   100% {
     -moz-transform: scale(1.6);
     box-shadow: inset 0 0 1px 1px rgb(255, 255, 255);
   }
 }

 @keyframes cd-pulse {
   0% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
     box-shadow: inset 0 0 1px 1px rgb(255, 255, 255);
   }

   50% {
     box-shadow: inset 0 0 1px 1px rgb(255, 255, 255);
   }

   100% {
     -webkit-transform: scale(1.6);
     -moz-transform: scale(1.6);
     -ms-transform: scale(1.6);
     -o-transform: scale(1.6);
     transform: scale(1.6);
     box-shadow: inset 0 0 1px 1px rgb(255, 255, 255);
   }
 }

 .cd-single-point .cd-more-info {
   position: fixed;
   top: 15%;
   left: 0;
   right: 0;
   z-index: 3;
   /* width: 90%; */
   width: 100%;
   height: auto;
   min-height: auto;
   margin: 0 auto;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   text-align: left;
   line-height: 1.5;
   background-color: #fff;
   /* padding: 2em 1em; */
   visibility: hidden;
   opacity: 0;
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
   -o-transform: scale(0.8);
   transform: scale(0.8);
   -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
   -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
   transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
 }

 .cd-single-point .cd-more-info::before {
   /* triangle next to the interest point description - hidden on mobile */
   content: '';
   position: absolute;
   height: 0;
   width: 0;
   display: none;
   border: 8px solid transparent;
   z-index: 2;
 }

 .cd-single-point .cd-more-info:after {
   content: '';
   position: absolute;
   height: 0;
   width: 0;
   display: none;
   border: 9px solid transparent;
   z-index: 1;
 }

 .cd-single-point .cd-more-info p {
   color: #5e5e5e;
   font-size: 20px;
   margin: 0;
   line-height: 1.4;
 }

 .cd-single-point .cd-more-info p span {
   font-size: 20px;
 }

 /* close the interest point description - only on mobile */
 .cd-close-info {
  position: fixed;
  top: 20px;
  right: 20px;
  height: 44px;
  width: 44px;
  background-image: url(../img/btn_cerrar.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 768px) {
  .cd-close-info {
    top: 10px;
    right: 10px;
    height: 30px;
    width: 30px;
  }
}

 /* .cd-close-info:after,
 .cd-close-info:before {
   content: '';
   position: absolute;
   left: 50%;
   top: 50%;
   bottom: auto;
   right: auto;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
   background-color: #000;
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
   transition-property: transform;
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }

 .cd-close-info::after {
   height: 2px;
   width: 16px;
 }

 .cd-close-info::before {
   height: 16px;
   width: 2px;
 } */


 @media only screen and (min-width: 600px) {
   .cd-single-point .cd-more-info {
     position: absolute;
     width: 100%;
     width: 500px;
     height: auto;
     padding: 0;
     overflow-y: visible;
     line-height: 1.4;
     border-radius: 0;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   }

   .cd-single-point .cd-more-info:after,
   .cd-single-point .cd-more-info::before {
     display: block;
   }

   .cd-single-point .cd-more-info.cd-left,
   .cd-single-point .cd-more-info.cd-right {
     top: 50%;
     bottom: auto;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
   }

   .cd-single-point .cd-more-info.cd-left::before,
   .cd-single-point .cd-more-info.cd-left::after,
   .cd-single-point .cd-more-info.cd-right::before,
   .cd-single-point .cd-more-info.cd-right::after {
     top: 50%;
     bottom: auto;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
   }

   .cd-single-point .cd-more-info.cd-left {
     right: 160%;
     left: auto;
   }

   .cd-single-point .cd-more-info.cd-left::before {
     border-left-color: #cbd6ea;
     left: 100%;
   }

   .cd-single-point .cd-more-info.cd-right {
    border-left-color: #cbd6ea;
     left: 160%;
   }

   .cd-single-point .cd-more-info.cd-top::before {
     border-right-color: #cbd6ea;
     right: 100%;
   }

   .cd-single-point .cd-more-info.cd-bottom::after {
     border-right-color: #cbd6ea;
     right: 100%;
   }

   .cd-single-point .cd-more-info.cd-top,
   .cd-single-point .cd-more-info.cd-bottom {
     left: 50%;
     right: auto;
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     transform: translateX(-50%);
   }

   .cd-single-point .cd-more-info.cd-top::after,
   .cd-single-point .cd-more-info.cd-top::before,
   .cd-single-point .cd-more-info.cd-bottom::after,
   .cd-single-point .cd-more-info.cd-bottom::before {
     left: 50%;
     right: auto;
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     transform: translateX(-50%);
   }

   .cd-single-point .cd-more-info.cd-top {
     bottom: 160%;
     top: auto;
   }

   .cd-single-point .cd-more-info.cd-top::before {
     border-top-color: white;
     top: 100%;
   }

   .cd-single-point .cd-more-info.cd-bottom {
     top: 160%;
   }

   .cd-single-point .cd-more-info.cd-bottom::before {
     border-bottom-color: white;
     bottom: 100%;
   }

   .cd-single-point .cd-more-info.cd-bottom::after {
     border-bottom-color: white;
     bottom: 100%;
   }

   .cd-single-point .cd-more-info h2 {
     font-size: 40px;
     line-height: 1.2;
     margin-bottom: 0;
     margin-top: 5px;
   }

   .cd-single-point .cd-more-info.cd-top:after {
     border-top-color: white;
     top: 100%;
   }


 }