@charset "UTF-8";

/*Reset Css*/
#container {
    margin: 0;
    padding: 0;
    border: none;
    -webkit-font-smoothing: antialiased;
    background-repeat: no-repeat;
    list-style: none;
    font-family: 'Open Sans', sans-serif;
    line-height: 1em;
}
#container {
    width: 100%;
    min-height: 100%;
}
#container img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}
#container a{
    display: block;
    text-decoration: none;
}
#container a:hover{
    text-decoration: underline;
}
.link-padding{
    position: relative;
    overflow: hidden;
    height: 0;
    display: block;
}
.clear{
    clear: both;
}
.content-center{
    width: 780px;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
}
.absolute{
    position: absolute;
    left: 50%;
}
.hotspots li{
    z-index: 10;
}
.hotspots-content img{
    z-index: 9;
    display: none;
}
/*End of Reset Css*/

/*Header*/
#header{
    background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/bg-header.jpg) no-repeat center;
    height: 393px;
    position: relative;
}
#header #logo{
  margin-left: -360px;
  top: 35px;
} 
#header .main-txt{
  margin-left: -360px;
  top: 89px;
}
#header .main-txt h1{
  color: #333;
  font: normal 15px Arial, sans-serif;
  margin-bottom: 55px;
}
#header .main-txt img.nome-produto{
  margin-bottom: 67px;
}
#header .main-txt h2{
  margin-bottom: 52px;
  color: white;
  font: bold 25px Arial, sans-serif;
}
#header .main-txt h3{
  margin-bottom: 10px;
  color: #b80a7d;
  font: normal 24px Arial, sans-serif;
}
#header .main-txt p{
  color: #333;
  font: normal 15px Arial, sans-serif;
}
#header .hotspots .item1{
  top: 366px;
  margin-left: -10px;
}
#header .hotspots-content .item1{
  top: 340px;
}

/*Features*/
#features{
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/bg-features.jpg) no-repeat center;
  height: 747px;
}

#container h3{
  color: #b80a7d;
  font: normal 24px/1em Arial, sans-serif;
  margin-bottom: 10px;
}
#container p{
  color: #333;
  font: normal 15px Arial, sans-serif;
}
#features .excelente-desempenho{
  top: 140px;
  margin-left: -370px;
  padding-left: 130px;
  width: 48%;
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/1200w.png) no-repeat;
  min-height: 117px;
}
#features .nova-versao-mais-leve{
  top: 335px;
  margin-left: -325px;
  text-align: center;
}
#features .nova-versao-mais-leve *{
  color: white;
}
#features .animate{
  top: 248px;
  margin-left: -138px;
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/agua.jpg);
  width: 290px;
  height: 290px;
  border-radius: 100%;
  border: solid 8px #b80a7d;
  overflow: hidden;
}
#features .animate img{
  position: absolute;
  left: -60px;
  top: -90px;
  -webkit-transition: all 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
   -moz-transition: all 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
     -o-transition: all 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
        transition: all 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
#features .animate img.active{
  left: -30px;
  top: -70px;
}
#features .eficiencia{
  top: 320px;
  margin-left: 180px;
  width: 200px;
}
#features .praticidade{
  top: 550px;
  margin-left: 40px;
  padding-left: 125px;
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/praticidade.png) no-repeat;
  min-height: 117px;
}
#features .praticidade strong{
  display: block;
  font-size: 20px;
  line-height: 1.4em;
}

/*Sopro Sucção*/
#sopro-succao{
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/bg-sopro-succao.jpg) no-repeat center;
  height: 624px;
}
#sopro-succao h3{
  color: #b80a7d;
}
#sopro-succao p{
  color: black;
}
#sopro-succao .sopro-txt{
  margin-left: 15px;
  width: 50%;
  padding-left: 130px;
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/sopro-ar.png) no-repeat;
  min-height: 117px;
}
#sopro-succao .controle-succao{
  top: 170px;
  margin-left: -28px;
  width: 50%;
  padding-left: 176px;
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/controle-manual-succao.png) no-repeat;
  min-height: 160px;
}
#sopro-succao .bypass{
  top: 438px;
  margin-left: -390px;
}
#sopro-succao .hotspots .item1{
  top: 10px;
  margin-left: -112px;
}
#sopro-succao .hotspots-content .item1{
  top: 32px;
  margin-left: -240px;
}
#sopro-succao .hotspots .item2{
  top: 375px;
  margin-left: -112px;
}
#sopro-succao .hotspots-content .item2{
  top: 394px;
  margin-left: -134px;
}

/*Acessórios*/
#acessorios{
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/bg-acessorios.jpg) no-repeat center;
  height: 448px;
}
#acessorios h3 span{
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-top: 5px;
}
#acessorios td{
  border: solid 1px #b61780;
  padding: 3px;
  max-width: 335px;
  background: #FFF;
}
#acessorios td.img{
  text-align: center;
}
#acessorios td.img img{
  display: inline;
}
#acessorios td h4{
  color: #333;
  font-size: 15px;
  font-weight: bold;
}
#acessorios td p{
  color: #333;
  font-size: 14px;
}
#acessorios .filtro-txt{
  width: 234px;
  top: 46px;
  margin-left: 124px;
}
#acessorios .hotspots .item1{
  top: 239px;
  margin-left: 123px;
}
#acessorios .hotspots-content .item1{
  top: 264px;
  margin-left: 40px;
}

/*Saco coletor*/
#saco-coletor{
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/bg-saco-coletor.jpg) no-repeat center;
  height: 272px;
}
#saco-coletor .txt{
  margin-left: -386px;
  padding-left: 180px;
  background: url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/saco-coletor-descartavel.png) no-repeat;
  min-height: 172px;
  width: 59%;
}
#saco-coletor .txt *{
  color: white;
}
#saco-coletor .txt li{
  list-style-type: disc;
  font: normal 15px/1.4em Arial, sans-serif;
}
#saco-coletor .txt ul{
  margin-left: 20px;
}


/*Video*/
#video{
  background: #757575 url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/bg-video.jpg) no-repeat center top;
  height: 471px;
}
#video h3{
    font: bold 18px Arial, sans-serif;
    color: white;
    padding: 35px 0 15px;
}

/*Embalagem | Especificações*/
#embalagem-especificacoes{
  background: #757575 url(https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/bg-embalagem-especificacoes.jpg) no-repeat center top;
  height: 537px;
}
#embalagem-especificacoes .txt{
  margin-left: 83px;
  top: 96px;
  width: 320px;
}
#embalagem-especificacoes .txt h3{
  margin-bottom: 15px; 
  font: normal 26px Arial, sans-serif;
  color: white;
}
#embalagem-especificacoes .txt ul{
  margin-bottom: 38px;
}
#embalagem-especificacoes .txt li{
  color: white;
  opacity: 0.5;
  font: normal 15px/1.6em Arial, sans-serif;
  list-style-type: disc; 
  list-style-position: inside;
}


/*CD*/
.cd-img-replace{display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap;}
.cd-single-point{position: absolute; border-radius: 50%;}
.cd-single-point > a{position: relative; z-index: 99; display: block; width: 28px;  height: 28px; border-radius: inherit; background:url("https://images.colombo.com.br/hotsite/aspiradorelectroluxaqp20/images/botao-spot.png") 0 0 no-repeat; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s;  transition: background-color 0.2s; transition: all .300s; -webkit-transition: all .300s; -ms-transition: all .300s; -moz-transition: all .300s; -o-transition: all .300s;}
.cd-single-point > a:hover{background-position:0 -30px;}
.cd-single-point > a:hover a::after, .cd-single-point > a:before{color:#000;}
.cd-single-point > a::after, .cd-single-point > a:before{ 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: white; -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: 2px; width: 12px; }
.cd-single-point > a::before{height: 12px;  width: 2px;}
.cd-single-point::after{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.spot-aberto > a::after, .cd-single-point.spot-aberto > a::before{-webkit-transform: translateX(-50%) translateY(-50%) rotate(540deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(540deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(135deg); -o-transform: translateX(-50%) translateY(-50%) rotate(540deg); transform: translateX(-50%) translateY(-50%) rotate(540deg);}
.cd-single-point.spot-aberto::after{display: none;}
.cd-single-point.aberto::after{display: none;}
.spot-aberto .cd-single-point::after{display:none;}


.spot{position: absolute; width:100%; height:100%; z-index:999999; -webkit-overflow-scrolling: touch; ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 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;}
.spot-aberto{ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=.1)"; 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;}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(125, 11, 108, 0.98);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(125, 11, 108, 0.98);
  }

  100% {
    -webkit-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(125, 11, 108, 0.98);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(125, 11, 108, 0.98);
  }

  100% {
    -moz-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
@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 rgba(125, 11, 108, 0.98);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(125, 11, 108, 0.98);
  }

  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 rgba(217, 83, 83, 0);
  }
}

.cd-single-point .cd-more-info{position: fixed; z-index: 3; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; 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{position: absolute; width: 220px;height: 240px; overflow-y: visible;}
.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-right::before{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-close-info{display:none;}