/* Document : estilos.css Created on : 16/12/2014 */ /* resets */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figure, figcaption, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight:normal; vertical-align:baseline; outline:none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @font-face { font-family: 'Conv_advent-Re'; src: url('../fonts/advent-Re.eot'); src: local('☺'), url('../fonts/advent-Re.woff') format('woff'), url('../fonts/advent-Re.ttf') format('truetype'), url('../fonts/advent-Re.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Conv_advent-Bd2'; src: url('../fonts/advent-Bd2.eot'); src: local('☺'), url('../fonts/advent-Bd2.woff') format('woff'), url('../fonts/advent-Bd2.ttf') format('truetype'), url('../fonts/advent-Bd2.svg') format('svg'); font-weight: normal; font-style: normal; } /* -- */ *, *:after, *:before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border:0; } img { border:none; overflow: hidden; display: inline-block; vertical-align: top; zoom: 1; *display: inline; } fieldset { border:none; } html,body { height: 100%; } body { font:13px Trebuchet MS, Tahoma; color:#333; background: #F3F7FC; } ul li { list-style:none; } /* resources */ .none { display:none; } .clear { clear:both; } a { text-decoration:none; overflow: hidden; outline: none; color: #333; } a:hover { text-decoration:underline; } p strong { font-weight:bold; } .center { max-width:960px; margin: 0 auto; } .openMenu { width: 40px; height: 40px; background: url(../images/btn-menu.png); display: none; position: fixed; top: 0; z-index: 999; text-indent: -9999px; } .openMenu:hover { opacity:0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; -webkit-transition:all .3s ease; } .redesSideMenu { font-size: 12px; margin-top: 60px !important; border: none !important; text-align: center; } .redesSideMenu li { float: left; border: none !important; display:inline-block !important; zoom:1; *display:inline !important; } .sidr ul li.ativo { background:#0093B4; } .sidr ul li.ativo a { color: #fff } /*header*/ .container_header { background: url(../images/background-header.png) top center repeat-x; position: fixed; top: 0; width: 100%; height:150px; z-index: 99; } .container_header header { overflow: hidden; } .logo { background: url(../images/logo-header.png) top center no-repeat; width: 203px; height: 68px; display: block; float: left; margin-top: 45px; text-indent: -9999px; transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; -webkit-transition:all .3s ease; } .logo:hover { opacity:0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; -webkit-transition:all .3s ease; } .logoSideMenu { float: none; margin: 30px 0; } .container_header header nav ul { background: url(../images/background-menu.png) top center no-repeat; width: 446px; height: 71px; overflow: hidden; float: left; margin: 15px 0 0 140px; } .container_header header nav ul li { font-family: 'Conv_advent-Re'; font-size: 18px; float: left; width: 88px; height: 50px; padding-left: 8px; line-height: 50px; text-align: center; margin-top: 10px; margin-left: -5px; } .container_header header nav ul li:first-child { margin-left: 15px; } .container_header header nav ul li:hover, .container_header header nav ul li.ativo { background: url(../images/hover-menu.png) top center no-repeat; } .container_header header nav ul li a { color: #fff; } .container_header header nav ul li a:hover { text-decoration: none; } .container_header header .redes { overflow: hidden; float: right; margin-top: 80px; } .container_header header .redes li { float: left; } .container_header header .redes li a { background: url(../images/redes-socias.png); height: 42px; display: block; text-indent: -9999px; } .container_header header .redes li a.icon_f { background-position: top left; width: 35px; } .container_header header .redes li a.icon_t { background-position: top center; width: 40px; } .container_header header .redes li a.icon_y { background-position: top right; width: 35px; } /*seções*/ .content { position: relative; width: 100%; min-height:1000px; padding: 130px 0 0 0; } /*conteudos*/ #home { background: url(../images/background-home.jpg) top center no-repeat; background-size: cover; } #home .img_home { background: url(../images/ideias-home.png) top center no-repeat; width: 100%; height: 332px; overflow: hidden; } #home .itens_home { margin-top: 40px; } #home .itens_home li { margin-bottom: 20px; overflow: hidden; max-width:660px; font-size: 16px; } #home .itens_home li strong { font-family: 'Conv_advent-Bd2'; } #home .itens_home li span { background:url(../images/icones-inicial.png); width: 61px; height: 56px;margin-bottom: 10px; display: block; float: left; margin:5px 20px 10px 0; } #home .itens_home li .ico_monitor { background-position: top left; } #home .itens_home li .ico_teclado { background-position: 0 -56px; } #home .itens_home li .ico_cpu { background-position: 0 -112px; } #home .itens_home li .ico_config { background-position: bottom left; } #servicos { background: url(../images/background-servicos.jpg) top center no-repeat; background-size: cover; } #servicos .itens_servicos { overflow: hidden; margin:30px 0 0 -10px; } #servicos .itens_servicos li { background: rgba(255,255,255,0.8); border: 1px solid #efefef; box-shadow: 1px 1px 1px rgba(0,0,0,0.4); border-radius: 20px; width: 475px; height: 150px; padding: 10px; overflow: hidden; float: left; margin: 0 0 10px 10px; } #servicos .itens_servicos li span { background: url(../images/ico-servicos.png); width: 75px; height: 75px; display: block; float: left; margin:25px 10px 25px 0; } #servicos .itens_servicos li .ico_auditoria { background-position: top center; } #servicos .itens_servicos li .ico_infra { background-position: 0 -75px; } #servicos .itens_servicos li .ico_out { background-position: 0 -150px; } #servicos .itens_servicos li .ico_monitoramento { background-position: 0 -225px; } #servicos .itens_servicos li .ico_config { background-position: 0 -300px; } #servicos .itens_servicos li .ico_manutencao { background-position: 0 -375px; } #servicos .itens_servicos li .ico_adm { background-position: bottom center; } #servicos .itens_servicos li h2 { font-family: 'Conv_advent-Bd2'; font-size: 16px; text-transform: uppercase; font-weight: bold; } #servicos .itens_servicos li p { font-size: 12px; } #clientes { background: url(../images/background-clientes.jpg) top center no-repeat; background-size: cover; } #clientes .itens_clientes { overflow: hidden; width: 450px; float: right; margin:100px 100px 0 0; } #clientes .itens_clientes li { background: #fff; border: 1px solid #efefef; box-shadow: 2px 2px 2px rgba(0,0,0,0.4); display: table; border-radius: 20px; width: 180px; height: 150px; overflow: hidden; float: left; margin: 20px; } #clientes .itens_clientes li a { display: table-cell; vertical-align: middle; text-align: center; } #contato { background: url(../images/background-contato.jpg) top center no-repeat; min-height:1000px; background-size: cover; } #contato .img_contato { width:579px; height:auto; margin: 200px auto 50px auto; } #contato .img_contato img { width: 100%; } #contato .btn_ligue { background: url(../images/ligue-pra-nos.png); width: 261px; height: 46px; display: block; text-indent: -9999px; margin: 0 auto; transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; -webkit-transition:all .3s ease; } #contato .btn_ligue:hover { opacity:0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; -webkit-transition:all .3s ease; } /*RESPONSIVO*/ @media (max-width:1024px){ .center { max-width:890px; } .container_header header nav ul { margin-left:100px; } #servicos .itens_servicos li { width: 440px; height: 195px; padding: 10px; } #servicos .itens_servicos li span { margin:50px 10px 50px 0; } } @media (max-width:920px){ .center { max-width:700px; } .container_header header nav ul { margin-left:50px; } .container_header header .redes { margin-top: 0; } #servicos .itens_servicos { margin-left: 0; } #servicos .itens_servicos li { width: 100%; height: auto; padding: 20px; margin: 0 0 20px 0; } #servicos .itens_servicos li span { margin:15px 10px 15px 0; } #clientes .itens_clientes { width: 450px; float: none; margin:100px auto 0 auto; } } @media (max-width:768px){ .center { max-width:630px; } .openMenu { display: block; } .container_header { top: -60px; } .logo { background: url(../images/logo-header-menor.png) top center no-repeat; width: 153px; height: 52px; margin-top: 70px; } .container_header header nav ul { display: none; } .container_header header .redes { display: none; } .content { position: relative; width: 100%; padding: 80px 0 30px 0; } #contato .img_contato { width:100%; margin-top: 150px; } } @media (max-width:690px){ .center { max-width:560px; } } @media (max-width:595px){ .center { max-width:420px; } #clientes .itens_clientes { width: 100%; } #clientes .itens_clientes li { float: none; margin: 20px auto; } } @media (max-width:480px){ .center { max-width:300px; } #home .img_home { display: none; } } @media (max-width:300px){ }