body { width: 100%; *zoom: 1; } body:before, body:after { content: ""; display: table; } body:after { clear: both; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { max-width: 1100px; color: #6c6c6c; margin: 0 auto; background-color: #CCC; overflow-x: hidden; background-color: #F2F2F2 ; background-size: auto; background: url(../img/bg_main_subtle.jpg) repeat; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 100%; text-align: center; } body a:link, body a:visited { color: #333333; } body div#stripe { position: absolute; left: 0; background-color: #ef3713; background-image: url(../img/bg_stripe.png); height: 10px; width: 100%; } @media only screen and (max-device-width: 480px) { body div#stripe { height: 5px; } } body .row { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; } body img#logo { height: 80px; width: 65px; margin: 40px auto 20px auto; /* ===== == = === 30em (480px) === = == ===== */ } @media only screen and (min-width: 30em) { body img#logo { height: 100px; width: 82px; } } body h2 { margin-bottom: 30px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.8em; font-weight: 300; line-height: 1.1em; /* Smartphones (portrait and landscape) ----------- */ /* iPads (portrait and landscape) ----------- */ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { body h2 { font-size: 1.2em; font-weight: 400; line-height: 1.4em; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body h2 { font-weight: 400; } } body div#container-video { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; min-width: 300px; margin-bottom: 40px; text-align: center; -webkit-box-shadow: 0 4px 10px; box-shadow: 0 4px 10px; } @media only screen and (max-device-width: 480px) { body div#container-video { box-shadow: 0 2px 2px; margin-bottom: 20px; } } body div#container-video iframe { border-bottom: 2px solid #ff6600; } body div#descricao { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; margin-bottom: 40px; font-size: 1.3em; text-align: left; line-height: 1.3em; } @media only screen and (max-device-width: 480px) { body div#descricao { margin-bottom: 20px; font-size: 1.1em; line-height: 1.3em; } } body div#servicos { margin: 20px 0; } body div#servicos div#panoramas.servico span.icon { background-image: url(../img/icon_panoramas.png); } body div#servicos div#ibooks.servico span.icon { background-image: url(../img/icon_ibooks.png); } body div#servicos div#video.servico span.icon { background-image: url(../img/icon_video.png); } body div#servicos div#apps.servico span.icon { background-image: url(../img/icon_mobile.png); } body div#servicos div.servico { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; color: #666; background-color: rgba(0, 0, 0, 0.1); border-bottom: 2px solid #ff6600; border-radius: 5px; min-height: 200px; padding: 10px 8px; margin-bottom: 20px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); font-size: 1em; font-weight: 400; text-align: left; font-family: 'Petrona', "Georgia", serif; line-height: 1.4em; /* ===== == = === 56.25em (900px) === = == ===== */ /* ===== == = === 68.75em (1100px) === = == ===== */ /* iPads (portrait and landscape) ----------- */ /* iPads (portrait) ----------- */ } @media only screen and (min-width: 56.25em) { body div#servicos div.servico { display: inline; float: left; width: 22.916666666666664%; margin: 0 1.0416666666666665%; min-height: 390px; } } @media only screen and (min-width: 68.75em) { body div#servicos div.servico { min-height: 330px; } } @media only screen and (max-device-width: 480px) { body div#servicos div.servico { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; min-height: 100%; font-size: 1em; line-height: 1.4em; margin-bottom: 20px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body div#servicos div.servico { min-height: 350px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { body div#servicos div.servico { display: inline; float: left; width: 47.91666666666667%; margin: 0 1.0416666666666665%; margin-bottom: 20px; min-height: 260px; } } body div#servicos div.servico p { margin-bottom: 0.4em; } body div#servicos div.servico h3 { color: #666; margin-bottom: 10px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.1em; font-weight: 700; text-align: center; text-shadow: 1px 1px 1px #fff; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { body div#servicos div.servico h3 { font-size: 1.2em; } } body div#servicos div.servico span.icon { display: block; height: 40px; width: 100%; background-size: 41px; background-repeat: no-repeat; background-position: 50% 0px; text-align: center; } @media only screen and (max-device-width: 480px) { } div#bottom { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2))); } footer { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; color: #333333; padding: 10px; margin-top: 30px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15))); background-color: rgba(0, 0, 0, 0.1); background-position: 1.5em bottom; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; font-weight: 700; /* ===== == = === 30em (480px) === = == ===== */ } @media only screen and (min-width: 30em) { } footer div#contacts { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; /* ===== == = === 30em (480px) === = == ===== */ } @media only screen and (min-width: 30em) { footer div#contacts { display: inline; float: left; width: 47.91666666666667%; margin: 0 1.0416666666666665%; } } footer div#contacts ul { text-align: center; list-style-type: none; text-transform: normal; } footer div#contacts ul li { height: 30px; line-height: 30px; /* ===== == = === 30em (480px) === = == ===== */ } @media only screen and (min-width: 30em) { footer div#contacts ul li { text-align: left; } } footer div#contacts ul li a { /* ===== == = === 30em (480px) === = == ===== */ } @media only screen and (min-width: 30em) { footer div#contacts ul li a { text-decoration: none; } } footer div#contacts ul li a:hover { text-decoration: underline; } footer div#contacts ul li img { height: 22px; margin-right: 0.3em; vertical-align: -0.4em; } @media only screen and (min-width: 30em) { footer div#contacts ul { margin-top: 1.5em; } } footer div#media { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; margin-top: 0.5em; /* ===== == = === 30em (480px) === = == ===== */ } @media only screen and (min-width: 30em) { footer div#media { display: inline; float: left; width: 47.91666666666667%; margin: 0 1.0416666666666665%; margin-top: 1.5em; } } footer div#media ul { margin: 10px auto; } footer div#media ul li { display: inline-block; margin-left: 10px; background-size: 40px; background-repeat: no-repeat; list-style-type: none; /* ===== == = === 30em (480px) === = == ===== */ } @media only screen and (min-width: 30em) { footer div#media ul li { float: right; } } footer div#media ul li a { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; transition: all 0.3s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } footer div#media ul li a img { height: 40px; width: 40px; } footer div#media ul li a:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; } footer div#media li:first-child { margin-right: 0; } footer div#copyright { display: inline; float: left; width: 97.91666666666666%; margin: 0 1.0416666666666665%; } footer div#copyright small { font-size: 0.7em; }