@charset "UTF-8"; /*Reset Css*/ * { margin: 0; padding: 0; border: none; background-repeat: no-repeat; list-style: none; font-family: 'ElectroluxSans', Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1em; text-rendering: optimizeLegibility !important; /*-webkit-font-smoothing: antialiased !important;*/ } body, html { width: 100%; min-height: 100%; min-width: 800px; } img { display: block; width: auto; height: auto; max-width: 100%; } a { display: block; text-decoration: none; } a:hover { text-decoration: underline; } .container { 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; } p { font: 400 16px/1.4em 'ElectroluxSans', Arial, sans-serif; margin-bottom: 30px; } h3 { font: 700 28px 'ElectroluxSans', Arial, sans-serif; margin-bottom: 18px; } /*End of Reset Css*/ /*@font-face*/ @font-face { font-family: 'ElectroluxSans'; src: url('../fonts/ElectroluxSans-Regular.eot'); src: url('../fonts/ElectroluxSans-Regular?#iefix') format('embedded-opentype'), url('../fonts/ElectroluxSans-Regular.ttf') format('truetype'), url('../fonts/ElectroluxSans-Regular.svg#ElectroluxSans') format('svg'), url('../fonts/ElectroluxSans-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ElectroluxSans'; src: url('../fonts/ElectroluxSans-SemiBold.eot'); src: url('../fonts/ElectroluxSans-SemiBold?#iefix') format('embedded-opentype'), url('../fonts/ElectroluxSans-SemiBold.ttf') format('truetype'), url('../fonts/ElectroluxSans-SemiBold.svg#ElectroluxSans') format('svg'), url('../fonts/ElectroluxSans-SemiBold.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'ElectroluxSans'; src: url('../fonts/ElectroluxSans-Bold.eot'); src: url('../fonts/ElectroluxSans-Bold?#iefix') format('embedded-opentype'), url('../fonts/ElectroluxSans-Bold.ttf') format('truetype'), url('../fonts/ElectroluxSans-Bold.svg#ElectroluxSans') format('svg'), url('../fonts/ElectroluxSans-Bold.woff') format('woff'); font-weight: 900; font-style: normal; } @font-face { font-family: 'ElectroluxSans'; src: url('../fonts/ElectroluxSans-Light.eot'); src: url('../fonts/ElectroluxSans-Light?#iefix') format('embedded-opentype'), url('../fonts/ElectroluxSans-Light.ttf') format('truetype'), url('../fonts/ElectroluxSans-Light.svg#ElectroluxSans') format('svg'), url('../fonts/ElectroluxSans-Light.woff') format('woff'); font-weight: lighter; font-style: normal; } /*Header*/ header{ background: url(../images/bg-header.jpg) no-repeat center; height: 663px; } header *{ color: #FFF; } header figure#logo{ top: 23px; margin-left: -377px; } header hgroup{ top: 112px; margin-left: -377px; max-width: 370px; } header hgroup h1{ font: 700 32px 'ElectroluxSans', sans-serif; color:#051e4c; font-weight: 300; } header hgroup h1 img{ padding:10px 0; } header hgroup h1 strong{ font: 700 72px/1em 'ElectroluxSans', sans-serif; color: #051e4c; display: block; position: relative; } header hgroup h1 strong sup{ font: 700 18px 'ElectroluxSans', sans-serif; color: #009fbf; position: absolute; left: 116px; top: 4px; } header hgroup h2{ font: 700 36px 'ElectroluxSans', sans-serif; color: #051e4c; line-height: 36px; margin: 43px 0 0; } header p{ font: normal 19px 'ElectroluxSans', sans-serif; color: #666; top: 418px; margin-left: -377px; } /*Features*/ section#features1{ background: #fff url(../images/bg-features01.jpg) no-repeat center; height: 457px; } section#features1 .topico1{ top: 16px; } section#features1 .topico2{ top: 222px; } section#features1 .topico1, section#features1 .topico2{ margin-left: 95px; padding-left: 0; } section#features1 .topico1 h3, section#features1 .topico2 h3{ color: #051e4c; line-height: 24px; } section#features1 .topico1 p, section#features1 .topico2 p{ color: #666; font-size: 16px; } section#features1 .hotspots .item1{ margin-left: -233px; top: 139px; } section#features1 .hotspots-content .item1{ margin-left: -264px; top:140px; } section#features2{ background: #e3e3e3 url(../images/bg-features02.jpg) no-repeat center; height: 577px; } section#features2 .topico1{top: 106px;} section#features2 .topico2{top: 321px;} section#features2 .topico1, section#features2 .topico2{ margin-left: -276px; } section#features2 .topico1 h3, section#features2 .topico2 h3{ color: #051e4c; font: 700 28px/1.1em 'ElectroluxSans', sans-serif; } section#features2 .topico1 p, section#features2 .topico2 p{ color: #666; font-size: 16px; } section#features2 .hotspots .item1{ margin-left: 215px; top: 408px; } section#features2 .hotspots-content .item1{ margin-left: 50px; top: 251px; } /*Features 3*/ section#features3{ background: #051e4c url(../images/bg-features03.jpg) no-repeat center;height: 544px; } section#features3 .topico1{top: 72px;} section#features3 .topico2{top: 327px;} section#features3 .topico1, section#features3 .topico2{ margin-left: 140px; } section#features3 .topico1 h3, section#features3 .topico2 h3{ color: #009fbf; font-size: 28px; line-height: 1em; } section#features3 .topico1 p, section#features3 .topico2 p, section#features3 .topico3 p{ color: #fff; font-size: 16px; line-height: 20px; } section#features3 .hotspots .item1{ margin-left: -192px; top: 441px; } section#features3 .hotspots-content .item1{ margin-left: -350px; top: 317px; } /*Features 4*/ section#features4{ background: #abaaaf url(../images/bg-features04.jpg) no-repeat center; height: 623px; } section#features4 .topico1{ top: 331px; text-align: center; margin-left: 70px; } section#features4 .topico1 h3{ color: #009fbf; font-size: 26px; line-height: 20px; } section#features4 .topico1 p{ font: 400 15px 'ElectroluxSans', Arial, sans-serif; color: #fff; } section#features4 .hotspots .item1{ margin-left: -138px; top: 346px; } section#features4 .hotspots-content .item1{ margin-left: -274px; top: 168px; } /*Features 6*/ section#features6{ background: #FFF url(../images/bg-features06.jpg) no-repeat center top; height: 551px; } section#features6 h2{ color: #fff; font-size: 25px; text-align: center; padding: 50px 0 0; } #slider ul{ text-align: center; margin-top: 14px; position: absolute; width: 100%; z-index: 10; } #slider li{ color: #009fbf; font-weight: 600; display: inline-block; margin: 20px 5px 0; cursor: pointer; padding-bottom: 48px; } #slider li span{ border: 1px solid #009fbf; border-radius: 15px; padding: 10px; font-weight: 600; } #slider li.selected{ background: url('../images/arrow-down.png') no-repeat center bottom; } #slider li.selected span, #slider li:hover span{ background: #009fbf; color:#051e4c; transition:300ms; } #slides{ position: absolute; margin-top: -22px; width: 800px; height: 365px; overflow: hidden; top: 173px; } #slides>div{ width: 100%; height: 400px; display: none; } #slides>div.visible{ display: table; } #slides>div>div{ display: table-cell; vertical-align: middle; padding-left: 368px; } #slides>div>div h3{ font-size: 32px; color: #051e4c; } #slides>div>div p{ font-size: 18px; color: #666; } #slides #slide1{ background:url('../images/slide01.jpg') no-repeat center; } #slides #slide2{ background:url('../images/slide03.jpg') no-repeat center; } #slides #slide3{ background:url('../images/slide02.jpg') no-repeat center; } /*Superfícies*/ section#superficies{ background: #f2f2f2; } /*Vídeo*/ section#video{ text-align: center; padding: 50px 0; } section#video .container{ text-align: center; } section#video .container h3{ font-size: 12px; text-transform: uppercase; color: #999; font-weight: normal; } /*Embalagem | especificações*/ section#especificacoes{ background: url(../images/bg-especificacoes.jpg) center; height: 498px; } section#especificacoes *{ color: white; } section#especificacoes .txt{ top: 62px; margin-left: 78px; } section#especificacoes h3{ font-size: 26px; margin-bottom: 12px; } section#especificacoes ul.first{ margin-bottom: 89px; } section#especificacoes li{ font-size: 15px; line-height: 1.3em; list-style-type: disc; list-style-position: inside; } section#especificacoes ul.second li{ line-height: 1.6em; } /*CD*/ .cd-img-replace { display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; } .cd-single-point { position: absolute; border-radius: 50%; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transition: all .300s; -webkit-transition: all .300s; -ms-transition: all .300s; -moz-transition: all .300s; -o-transition: all .300s; } .cd-single-point > a { position: relative; z-index: 99; display: block; width: 30px; height: 30px; border-radius: 0; background: url("../images/hotspot.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:hover { opacity: 0.8; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .cd-single-point::after { content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; border-radius: 5px; background-color: transparent; -webkit-animation: cd-pulse 2s infinite; -moz-animation: cd-pulse 2s infinite; animation: cd-pulse 2s infinite; } .cd-single-point.azul > a{ background: url("../images/hotspot-2.png") 0 0 no-repeat; } .cd-single-point.azul::after { content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; border-radius: 5px; background-color: transparent; -webkit-animation: cd-pulseazul 2s infinite; -moz-animation: cd-pulseazul 2s infinite; animation: cd-pulseazul 2s infinite; } @-webkit-keyframes cd-pulse { 0% { -webkit-transform: scale(0.6); box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0.98); } 50% { box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0.98); } 100% { -webkit-transform: scale(1.6); box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0); } } @-moz-keyframes cd-pulse { 0% { -moz-transform: scale(0.6); box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0.98); } 50% { box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0.98); } 100% { -moz-transform: scale(1.6); box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0); } } @keyframes cd-pulse { 0% { -webkit-transform: scale(0.6) rotate(540deg); -moz-transform: scale(0.6) rotate(540deg); -ms-transform: scale(0.6) rotate(540deg); -o-transform: scale(0.6) rotate(540deg); transform: scale(0.6) rotate(540deg); box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0.98); } 50% { box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0.98); } 100% { -webkit-transform: scale(1.6) rotate(540deg); -moz-transform: scale(1.6) rotate(540deg); -ms-transform: scale(1.6) rotate(540deg); -o-transform: scale(1.6) rotate(540deg); transform: scale(1.6) rotate(540deg); box-shadow: inset 0 0 1px 1px rgba(5, 30, 76, 0); } } /* Spot azul */ @-webkit-keyframes cd-pulseazul { 0% { -webkit-transform: scale(0.6); box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0.98); } 50% { box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0.98); } 100% { -webkit-transform: scale(1.6); box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0); } } @-moz-keyframes cd-pulseazul { 0% { -moz-transform: scale(0.6); box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0.98); } 50% { box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0.98); } 100% { -moz-transform: scale(1.6); box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0); } } @keyframes cd-pulseazul { 0% { -webkit-transform: scale(0.6) rotate(540deg); -moz-transform: scale(0.6) rotate(540deg); -ms-transform: scale(0.6) rotate(540deg); -o-transform: scale(0.6) rotate(540deg); transform: scale(0.6) rotate(540deg); box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0.98); } 50% { box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0.98); } 100% { -webkit-transform: scale(1.6) rotate(540deg); -moz-transform: scale(1.6) rotate(540deg); -ms-transform: scale(1.6) rotate(540deg); -o-transform: scale(1.6) rotate(540deg); transform: scale(1.6) rotate(540deg); box-shadow: inset 0 0 1px 1px rgba(42, 203, 211, 0); } }