@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-topo.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-bottom: 37px; } header hgroup h2{ font: 700 36px 'ElectroluxSans', sans-serif; color: #2acbd3; line-height: 35px; margin: 50px 0; } header article{ width: 320px; top: 415px; margin-left: -380px; } header article p{font-size:18px;} /*Features*/ section#features1{ background: #fff url(../images/bg-features1.jpg) no-repeat center;height: 699px; } section#features1 .topico1{top:103px;} section#features1 .topico2{top: 300px;} section#features1 .topico3{top: 504px;} section#features1 .topico1,section#features1 .topico2,section#features1 .topico3{ margin-left: 40px; padding-left: 0; } section#features1 .topico1 h3,section#features1 .topico2 h3,section#features1 .topico3 h3{ color: #051e4c; font-size: 26px; 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: -246px; top: 462px; } section#features1 .hotspots-content .item1{ margin-left: -264px; top: 170px; } /*Features 2*/ section#features2{ background: #fff url(../images/bg-features2.jpg) no-repeat center;height: 581px; } section#features2 figure.splash{ color: #666; font-size: 16px; margin-left: -62px; top: 122px; z-index: 2; } section#features2 figure.splash div{ position: relative; } section#features2 figure.splash div figcaption{ position: absolute; text-align: center; top: 15px; left: 127px; font: 700 26px 'ElectroluxSans', sans-serif; color: #2acbd3; width: 279px; line-height: 24px; } section#features2 figure.splash div figcaption span{ display: block; margin-top: 20px; color: #FFF; font-size: 16px; line-height: 1.2em; } section#features2 .hotspots .item1{ margin-left: -8px; top: 356px; } section#features2 .hotspots-content .item1{ margin-left: -304px; top: 178px; } /*Features 3*/ section#features3{ background: #fff url(../images/bg-features3.jpg) no-repeat center;height: 546px; } section#features3 .topico1{top:57px;} section#features3 .topico2{top:216px;} section#features3 .topico3{top:350px;} section#features3 .topico1, section#features3 .topico2, section#features3 .topico3 { margin-left: -282px; padding-left: 0; } section#features3 .topico1 h3, section#features3 .topico2 h3, section#features3 .topico3 h3{ color: #051e4c; font-size: 28px; line-height: 30px; } section#features3 .topico1 p, section#features3 .topico2 p, section#features3 .topico3 p{ color: #666; 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-features4.jpg) no-repeat center;height: 444px; } section#features4 .topico1{top:70px;} section#features4 .topico2{top: 172px;} section#features4 .topico3{top:304px;} section#features4 .topico1,section#features4 .topico2, section#features4 .topico3{ margin-left: 122px; padding-left: 0px; } section#features4 .topico1{margin-left: 28px; padding-left: 0px; width: 350px;} section#features4 .topico1 h3{color: #2acbd3;font-size: 26px;line-height: 24px;} section#features4 .topico2 h3, section#features4 .topico3 h3{ color: #2acbd3; font-size: 20px; line-height: 0; } section#features4 .topico1 p{color: #fff; font-size: 16px;} section#features4 .topico2 p, section#features4 .topico3 p{ color: #fff; font-size: 14px; } section#features4 .hotspots .item1{ margin-left: -180px; top: 220px; } section#features4 .hotspots-content .item1{ margin-left: -330px; top: 44px; } /*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{ margin-bottom: 50px; } 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; }