@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; } .link-padding { position: relative; overflow: hidden; height: 0; display: block; } .clearfix{ clear: both; } .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: 582px; } header *{ color: #FFF; } header figure#logo{ top: 21px; margin-left: -380px; } header hgroup{ top: 124px; margin-left: -380px; max-width: 370px; } header hgroup h1{ font: 700 31px 'ElectroluxSans', sans-serif; } header hgroup h1 img{padding:10px 0;} header hgroup h1 span{ font: lighter 18px 'ElectroluxSans', sans-serif; display: block; } header hgroup h1 strong{ font: 700 18px 'ElectroluxSans', sans-serif; color: #777d90; text-align: right; display: block; margin-top: 5px; margin-right: 10px; width: 308px; } header hgroup h2{ font: 700 36px 'ElectroluxSans', sans-serif; color: #2acbd3; line-height: 36px; margin: 85px 0; } header article{ width: 340px; top: 448px; margin-left: -380px; } header article p{font-size:18px;} /*Features*/ section#features1{ background: #fff url(../images/bg-features01.jpg) no-repeat center;height: 536px; } section#features1 .topico1{top:94px;} section#features1 .topico2{top: 310px;} /*section#features1 .topico3{top: 504px;}*/ section#features1 .topico1,section#features1 .topico2,section#features1 .topico3{ margin-left: 120px; padding-left: 0; } section#features1 .topico1 h3,section#features1 .topico2 h3,section#features1 .topico3 h3{ color: #051e4c; font-size: 28px; line-height: 24px; } section#features1 .topico1 p,section#features1 .topico2 p,section#features1 .topico3 p{ color: #666; font-size: 16px; } section#features1 .hotspots .item1{ margin-left: -272px; top: 409px; } section#features1 .hotspots-content .item1{ margin-left: -287px; top: 280px; } /*Features 2*/ section#features2{ background: #fff url(../images/bg-features02.jpg) no-repeat center;height: 581px; } section#features2 .topico1{top:144px;} section#features2 .topico2{top:308px;} section#features2 .topico3{top:457px;} section#features2 .topico1, section#features2 .topico2, section#features2 .topico3 { margin-left: -234px; padding-left: 0; } section#features2 .topico1 h3, section#features2 .topico2 h3, section#features2 .topico3 h3{ color: #051e4c; font-size: 28px; line-height: 30px; } section#features2 .topico1 p, section#features2 .topico2 p, section#features2 .topico3 p{ color: #666; font-size: 16px; } section#features2 .hotspots .item1{ margin-left: 94px; top: 150px; } section#features2 .hotspots-content .item1{ margin-left: 91px; top: 140px; } /*Features 3*/ section#features3{ background: #fff url(../images/bg-features03.jpg) no-repeat center;height: 544px; } section#features3 .topico1{top:233px;} section#features3 .topico1, section#features3 .topico2, section#features3 .topico3 { margin-left: -284px; padding-left: 0; text-align: center; } section#features3 .topico1 h3, section#features3 .topico2 h3, section#features3 .topico3 h3{ color: #2acbd3; font-size: 28px; line-height: 30px; } section#features3 .topico1 p, section#features3 .topico2 p, section#features3 .topico3 p{ color: #fff; font-size: 16px; } section#features3 figure.splash{ color: #666; font-size: 16px; margin-left: -62px; top: 122px; z-index: 2; } section#features3 figure.splash div{ position: relative; } section#features3 figure.splash div figcaption{ position: absolute; text-align: center; top: -56px; left: 143px; font: 700 28px 'ElectroluxSans', sans-serif; color: #051e4c; width: 279px; line-height: 24px; } section#features3 figure.splash div figcaption span{ display: block; margin-top: 20px; color: #051e4c; font-size: 14px; line-height: 1.2em; } /*Features 4*/ section#features4{ background: #fff url(../images/bg-features04.jpg) no-repeat center;height: 843px; } section#features4 h2.title1{ color: #2acbd3; font-size: 36px; font-weight: bold; margin-left: -364px; top: 360px; } section#features4 .topico1{top:482px;} section#features4 .topico2{top:654px;} section#features4 .topico3{top:102px;} section#features4 .topico4{top:656px;} section#features4 .topico1,section#features4 .topico2, section#features4 .topico3{ margin-left: -242px; padding-left: 0px; } section#features4 .topico4{ margin-left: 125px; padding-left: 0px; } section#features4 .topico1 h3, section#features4 .topico2 h3, section#features4 .topico3 h3, section#features4 .topico4 h3{ color: #051e4c; font-size: 28px; line-height: 25px; margin-bottom: 15px; } section#features4 .topico1 p, section#features4 .topico2 p, section#features4 .topico3 p, section#features4 .topico4 p{ color: #666; font-size: 16px; } section#features4 .hotspots .item1{ margin-left: -40px; top: 356px; } section#features4 .hotspots-content .item1{ margin-left: -56px; top: 342px; } /*Features 5*/ section#features5{ background: #fff url(../images/bg-features05.jpg) no-repeat center;height: 523px; } /*Features 7*/ section#video{ background: #fff url(../images/bg-video.jpg) no-repeat top center;;height: 469px; } section#video h3{ text-align: center; font-size: 12px; text-transform: uppercase; color: #666; margin-top: -15px; } section#video .player { display: table; width: 640px; margin: 0 auto } section#video .player .breve{ background: url(../images/breve.png) no-repeat center top; width:640px; height:360px; float: left; } /*Embalagem | especificações*/ section#especificacoes{ background: url(../images/bg-especificacoes.jpg) center; height: 498px; } section#especificacoes *{ color: white; } section#especificacoes .txt{ top: 56px; margin-left: 75px; width: 305px; } section#especificacoes h3{ font-size: 26px; margin-bottom: 12px; } section#especificacoes ul:first-of-type{ margin-bottom: 92px; } section#especificacoes li{ font-size: 15px; line-height: 1.4em; list-style-type: disc; list-style-position: inside; } footer{ background: url(../images/bg-linha.jpg) center; height: 454px; } footer h3{ font-size:36px; text-align: center; padding-top:50px; } /*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.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.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; } .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(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); } } .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; }