/* 26/10/2015 Theme Name: Grupo Maria de Lourdes Theme URI: http://www.grupomariadelourdes.com.br Description: Produzido por Filipe Dantas Version: 2015 Author: Produzido por Filipe Dantas Author URI: http://www.filipedantas.com */ .center(@width: 990px, @margin: 0 auto) { width: @width; margin: @margin; } /* default */ *{margin:0; padding:0; outline:none !important;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;} html {font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;} html, button, input, select, textarea { font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; } html, body, #container {height:100%;} #container {height: auto; min-height: 100%; width:100%;} ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } a { color: #000; text-decoration:none } a:hover { color: #000; text-decoration:underline} //////////// // LAYOUT // //////////// @font-face { font-family: 'dk_buttered_toastregular'; src: url('../fonts/dk_buttered_toast-webfont.eot'); src: url('../fonts/dk_buttered_toast-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/dk_buttered_toast-webfont.woff2') format('woff2'), url('../fonts/dk_buttered_toast-webfont.woff') format('woff'), url('../fonts/dk_buttered_toast-webfont.ttf') format('truetype'), url('../fonts/dk_buttered_toast-webfont.svg#dk_buttered_toastregular') format('svg'); font-weight: normal; font-style: normal; } .sprite{background:url(../img/sprite.png) no-repeat} h1, h2, h3, h4, h5, h6 { font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; } /* TITULOS */ h1 {font-size: 22px;} h2 {font-size: 20px;} h3 {font-size: 18px;} h4 {font-size: 16px;} h5 {font-size: 14px;} h6 {font-size: 12px;} .ef_b{ -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -ms-transition: background 0.2s ease; -o-transition: background 0.2s ease; transition: background 0.2s ease; } .ef_c{ -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -ms-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; } .borda20{ -webkit-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px; } .centraliza{ width: 1200px; margin: 0 auto; } #container{ header{ height: 1002px; position: relative; .top_mob{display: none;} &.int{ height: 184px; background: url(../img/bg_int.jpg) no-repeat center top; } nav{ width: 1200px; height: 65px; position: relative; position: absolute; left: 50%; top: 30px; margin-left:-600px; z-index: 9; .bt_trabalhe{ position: absolute; top: -20px; right: 15px; color: #373737; } h1{ width:188px; height: 64px; float: left; text-indent: -9999px; margin: 0; a{ width: 188px; height: 64px; background:url(../img/grupo_maria_de_lourdes.png) no-repeat; display: block; } } ul{ margin: 15px 0 0 0; padding: 0; float: right; li{ float: left; list-style: none; font-size: 14px; margin-left: 10px; position: relative; padding-bottom: 20px; text-transform: uppercase; a{ color: #fff; background: #3d4569; padding: 12px 24px; -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -ms-transition: background 0.2s ease; -o-transition: background 0.2s ease; transition: background 0.2s ease; -webkit-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px; &:hover{ background: #fff; color: #3d4569; text-decoration: none; } } ul{ display: none; } &:hover{ ul{ width: auto; display: block; position: absolute; top: 25px; left: 0; li{ width:100%; display: inline-block; margin:0 0 5px 0; white-space: nowrap; text-align: center; padding-bottom: 0; a{ display: block; } } } } } } }/* /nav */ .g_scroll{ width: 100%; height: 1002px; position: relative; .pager{ width: 11px; height: 100px; position: absolute; top: 50%; right: 40px; margin-top:-50px; z-index: 99; a{ width: 11px; height: 11px; display: block; margin-bottom: 10px; text-indent: -9999px; background:url(../img/sprite.png) no-repeat -73px -144px; &.activeSlide{ background:url(../img/sprite.png) no-repeat -73px -125px; } } } .scroll{ width: 100%; height: 1002px; .slide{ width: 100%; height: 1002px; .centraliza{ height: 1002px; position: relative; .text{ width: 790px; height: 256px; position: absolute; top: 50%; right: 0; margin-top: -128px; float: right; a{ color: #fff; } h1{ font-size: 48px; text-transform: uppercase; text-align: right; a{ &:hover{ color: #3d4569; text-decoration: none; } } } p{ width: 550px; float: right; text-align: right; } small{ a{ width: 210px; text-align: center; padding: 8px 0; font-weight: bold; clear: both; float: right; font-size: 18px; border: 1px solid #fff; &:hover{ background: #3d4569; text-decoration: none; } } } } } } }/* /scroll */ } }/* /header */ .principal{ width: 100%; padding-top: 90px; display: inline-block; position: relative; .areas_de_atuacao{ width: 680px; height: 270px; position: absolute; top: -218px; left: 50%; margin-left: -340px; z-index: 999; background: #00b4ff; h1{ font-size: 25px; color: #fff; text-align: center; margin: 25px 0 50px 0; } aside{ width: 180px; height: 115px; float: left; margin-left: 10px; &.prim{ margin-left: 65px; } .item{ width: 180px; height: 115px; display: block; position: relative; text-align: center; color: #fff; span{ display: block; margin: 0 auto; &.ico_conveniencia{ width: 56px; height: 58px; background-position: 0 0; } &.ico_posto{ width: 41px; height: 48px; background-position: 0 -78px; } &.ico_automomtivo{ width: 73px; height: 50px; background-position: 0 -146px; } } small{ width: 100%; position: absolute; bottom: 0; left: 0; display: block; text-align: center; z-index: 99; } } } }/* /areas_de_atuacao */ .novidades{ width: 100%; display: inline-block; margin-bottom: 70px; .centraliza{ h1{ text-align: center; font-size: 30px; color: #aeadad; margin: 0 0 54px 0; } article{ width: 570px; float: left; margin: 0 12px; figure{ width: 570px; height: 350px; overflow: hidden; margin-bottom: 4px; background:#6e7cab; position: relative; img{ -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1); transform: scale(1); } figcaption::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #6e7cab; content: ''; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } &:hover{ img { opacity: 0.8; -webkit-transform: scale(1.12); transform: scale(1.12); } figcaption::before { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } } small{ width: 98px; height: 100px; padding-top: 20px; background: #6e7cab; float: left; font-weight: bold; text-align: center; font-size: 24px; color: #fff; text-transform: uppercase; margin-right: 12px; } h2{ text-transform: uppercase; font-size: 18px; a{ color: #808080; &:hover{ color: #000; } } } } .bt_mais{ width: 100%; display: inline-block; margin-top: 60px; a{ width: 210px; text-align: center; padding: 8px 0; font-weight: 400; clear: both; margin: 0 auto; display: block; font-size: 18px; border: 1px solid #adadad; color: #adadad; &:hover{ background: #3d4569; color: #fff; text-decoration: none; } } } }/* /centraliza */ }/* /novidades */ .blog{ width: 100%; height: 578px; background:#00b4ff; article{ width: 100%; height: 578px; position: relative; .img_blog{ float: right; } .centraliza{ position: absolute; top: 0; left: 50%; margin-left: -600px; height: 578px; .link_blog{ width: 100%; height: 578px; display: block; } .text{ width: 386px; height: 578px; position: absolute; top: 0; left: 0; z-index: 99; margin: 0; float: left; padding-top: 230px; background:#00b4ff; figure{ width: 386px; height: 253px; position: absolute; left: 0; top: -60px; } h1{ font-size: 41px; color: #fff; font-family: 'dk_buttered_toastregular'; margin: 0 0 20px 0; text-align: center; } .ico_onda{ width: 256px; height: 22px; display: block; margin: 0 auto; background-position: -65px 0; } a{ color: #fff; } h2{ font-weight: normal; text-transform: uppercase; } } } } } }/* /principal */ .internas{ width: 100%; padding: 90px 0 150px 0; display: inline-block; .centraliza{ .post{ img{max-width: 100%; height: auto; } } .brad{ width: 100%; display: inline-block; margin-top: 46px; height: 40px; position: relative; small{ position: absolute; left: 0; top: -17px; background: #dedede; color: #455489; padding: 5px 20px; font-size: 16px; } .linha{ width: 100%; display: block; border-bottom: 1px solid #dedede; } }/* /brad */ p{ font-size: 16px; line-height: 30px; margin-bottom: 20px; } .one-half{ width: 48%; margin: 0 1% 60px 1%; float: left; } .one-third{ width: 30%; margin: 0 1% 60px 1%; float: left; } .one-fourth-first{ width: 18%; margin: 0 1% 60px 1%; float: left; } h1{ font-size: 60px; text-transform: uppercase; color: #455489; margin: 15px 0 60px 0; } .gallery img{ border:none !important; } .gallery-columns-2 { margin:0 0 20px 0; clear:both; .gallery-item { width: 48% !important; height: auto; overflow: hidden; float: left; margin: 0 1% 2% 1%; text-align: center; img { width: 100%; height: auto; border: 0; margin: 0; } } } .galeria{ width: 1167px; height: 777px; display: table; margin: 0 auto; position: relative; a{ width: 63px; height: 54px; position: absolute; top: 50%; margin-top: -27px; z-index: 99; text-indent: -9999px; &.bt_prev{ left: 0; background-position:-94px -142px; } &.bt_next{ right: 0; background-position:-167px -142px; } } .scroll_gal{ width: 100%; height: 777px; float: left; .slide_gal{ width: 100%; height: 777px; float: left; } } }/* /galeria */ }/* /centraliza */ .listagem, .blog{ width: 100%; display: inline-block; margin-bottom: 70px; .centraliza{ h1{ font-size: 60px; text-transform: uppercase; color: #455489; margin: 15px 0 60px 0; } article{ width: 570px; height: 515px; float: left; margin: 0 12px 40px 12px; .img_not{ width: 570px; height: 350px; overflow: hidden; margin-bottom: 4px; background:#6e7cab; position: relative; img{ -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1); transform: scale(1); } figcaption::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #6e7cab; content: ''; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } &:hover{ img { opacity: 0.8; -webkit-transform: scale(1.12); transform: scale(1.12); } figcaption::before { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } } small{ width: 98px; height: 100px; padding-top: 20px; background: #6e7cab; float: left; font-weight: bold; text-align: center; font-size: 24px; color: #fff; text-transform: uppercase; margin-right: 12px; } h2{ text-transform: uppercase; font-size: 18px; a{ color: #808080; &:hover{ color: #000; } } } } .bt_mais{ width: 100%; display: inline-block; margin-top: 60px; a{ width: 210px; text-align: center; padding: 8px 0; font-weight: 400; clear: both; margin: 0 auto; display: block; font-size: 18px; border: 1px solid #adadad; color: #adadad; &:hover{ background: #3d4569; color: #fff; text-decoration: none; } } } }/* /centraliza */ &.blog{ .centraliza{ article{ width: 100%; height: 725px; figure{ width: 100%; height: 580px; overflow: hidden; } } } } }/* /novidades */ .conquistas{ width: 32%; margin: 0 0.5%; height: 350px; float: left; figure{ width: 100%; height: 240px; position: relative; overflow: hidden; img{ max-width: 100%; height: auto; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1); transform: scale(1); } figcaption::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #6e7cab; content: ''; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } &:hover{ img { opacity: 0.8; -webkit-transform: scale(1.12); transform: scale(1.12); } figcaption::before { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } } h2{ font-weight: normal; font-size: 16px; a{ color: #b7b7b7; } } } .wp-pagenavi{ .pages{display: none;} a, span{ width: 50px; height: 50px; padding-top: 14px; display: block; background: #6e7cab; text-align: center; font-size: 16px; color: #fff; float: left; border: none; margin-right: 5px; &:hover{ background: #3b4c83; text-decoration: none; } } } .wpcf7-form{ width:100%; margin: 0 auto; br{display:none;} input, textarea{ width:48%; padding:22px 0 22px 2%; float:left; background:#d4d4d4; font-size: 18px; text-transform: uppercase; margin:0 2% 15px 0; border: none; &.dir{ float: right; margin-right: 2%; } } .Curriculo{ width:48%; float: right; } textarea{ width:98%; height:154px; margin: 0 0 15px 0; } .wpcf7-file{ width: 100%; background: none; } .bt_enviar{ width:40%; padding:22px 0 22px 2%; color:#fff; background:#6e7cab; float:right; margin-right:2%; text-align: left; } .bt_enviar_trabalhe{ float: none; margin: 0 auto; padding: 10px 0; } div.wpcf7-response-output{ clear:both; } }/* /contato desk */ }/* /internas */ }/* /container */ footer { position:relative; background:#d3d3d3 url(../img/bg_footer.gif) no-repeat bottom right; height:615px; padding-top: 115px; clear:both; .centraliza{ .bt_subir{display: none;} nav{ width: 260px; float: left; margin:0 123px 0 72px; ul{ margin: 0; padding:0; &.m_footer{ margin: 0 0 74px 0; li{ text-transform: uppercase; list-style: none; font-size: 18px; padding: 5px 0; border-bottom: 1px solid #b0b0b0; &:last-child{ border:none; } a{ color: #373737; &:hover{ text-decoration: none; color: #fff; } } } } &.redes{ li{ float: left; text-indent: -9999px; list-style: none; margin-right: 10px; a{ display: block; &.bt_facebook{ width: 36px; height: 36px; background-position: -65px -33px; &:hover{ background-position: -65px -79px; } } &.bt_instagram{ width: 36px; height: 36px; background-position: -111px -33px; &:hover{ background-position: -111px -79px; } } &.bt_twitter{ width: 44px; height: 36px; background-position: -157px -33px; &:hover{ background-position: -157px -79px; } } } } } } }/* /nav */ .end{ width: 310px; float: left; address{ font-size: 16px; color: #4a4a4a; border-bottom: 1px solid #b0b0b0; padding-bottom: 16px; &.sem_b{ border: none; } } h3{ font-size: 18px; color: #4a4a4a; span{ font-size: 30px; } } }/* /end */ .parceiros{ width: 310px; float: right; h5{ font-weight: normal; font-size: 18px; border-bottom: 1px solid #b0b0b0; padding-bottom: 15px; margin-bottom: 20px; } img{ padding-bottom: 25px; margin-bottom: 15px; border-bottom: 1px solid #b0b0b0; } }/* /parceiros */ .bt_abmb{ position: absolute; bottom:10px; right: 10px; width: 18px; height: 18px; background: url(../img/abmb.png) no-repeat; text-indent: -9999px; } }/* /centraliza */ }/* /footer */ /* media queries mobile */ @media only screen and (max-width: 767px) { .centraliza{ width:98%; margin: 0 1%; } #container{ header{ height: 485px; .top_mob{ width: 100%; height: 52px; background: #3d4569; position: absolute; top: 0; left: 0; z-index:999; display: block; h1{ width: 159px; height: 52px; text-indent: -9999px; float: left; margin: 0; a{ width: 159px; height: 52px; display: block; background:url(../img/grupo_maria_de_lourdes_mob.jpg) no-repeat; } } .menu_mob{ float:right; position:relative; display:block; h2{ width: 22px; height: 18px; text-indent: -9999px; background:url(../img/ico_m.png) no-repeat; margin:15px 10px 0 0; float:right; cursor:pointer; } .list_mob{ width:330px; position:absolute; top:52px; right:0; z-index: 999; background:#3d4569; padding: 10px 0; display:none; li{ text-transform: uppercase; font-weight: normal; display:block; text-align: right; font-size: 14px; color:#fff; margin-bottom: 15px; a{ color:#fff; padding-right: 20px; } .m_sub{ margin:0; padding:5px 0; li{ a{ padding-right: 40px; } } } } } } } &.int{ height: 52px; background: none; } nav{ display: none; }/* /nav */ .g_scroll{ width: 100%; height: 485px; margin-top: 52px; float: left; .pager{ width: 50px; height: 100px; position: absolute; top:40px; right: 10px; margin-top:0; a{ float: left; margin-right:10px; } } .scroll{ height: 485px; .slide{ height: 485px; .centraliza{ height: 485px; .text{ width: 100%; height: 256px; position: absolute; top: 50%; right: 0; margin-top: -128px; float: right; h1{ font-size: 25px; text-align: center; } p{ width:98%; margin: 0 1% 20px 1%; text-align: center; } small{ a{ width: 150px; padding: 6px 0; display: block; float: none; margin: 0 auto; font-size: 14px; } } } } } }/* /scroll */ } }/* /header */ .principal{ padding-top: 0; .areas_de_atuacao{ width:100%; height: 550px; position: relative; top:0; left:0; margin-left:0; padding-top: 25px; h1{ font-size: 25px; margin: 0 0 50px 0; } aside{ float: none; margin: 0 auto 30px auto; &.prim{ margin: 0 auto 30px auto; } } }/* /areas_de_atuacao */ .novidades{ .centraliza{ height: 400px; overflow: hidden; h1{ display: none; } article{ width: 100%; margin: 0 0 100px 0; figure{ width: 100%; height: 198px; overflow: hidden; img{ width: 100%; height: auto; } } small{ width: 60px; height: 80px; font-size: 14px; } } .bt_mais{ display: none; } }/* /centraliza */ }/* /novidades */ .blog{ height:435px; article{ height: 315px; .img_blog{ background: #000; img{ width:100%; height: auto; } } .centraliza{ width: 100%; position: relative; left: 0; margin:0 0 40px 0; height: 280px; .link_blog{ display: none; } .text{ width: 100%; padding-top: 200px; position: relative; height: 478px; figure{ width: 100%; text-align: center; img{ max-width: 100%; height: auto; } } h1{ font-size: 30px; } h2{ position: absolute; top: 300px; z-index: 99; left: 0; display: block; margin: 0 10px; text-align: center; } p{ position: absolute; bottom:50px; margin: 0 10px; text-align: center; } } } } }/* /blog */ }/* /principal */ .internas{ padding: 60px 0 150px 0; .centraliza{ .brad{ height: 50px; margin: 0 0 10px 0; small{ padding: 5px 10px; font-size: 14px; } }/* /brad */ .one-half, .one-third, .one-fourth-first{ width: 100%; margin: 0 0 60px 0; } img{ max-width: 100%; height: auto; } h1{ font-size: 22px; margin: 15px 5px 30px 5px; } p{ margin: 0 5px 20px 5px; } li{margin-left: 20px;} .galeria{ width: 100%; height: 200px; a{ display: none; } .scroll_gal{ height: 200px; .slide_gal{ height: 200px; img{ max-width: 100%; height: auto; } } } }/* /galeria */ }/* /centraliza */ .listagem{ .centraliza{ h1{ font-size: 22px; margin: 15px 0 30px 0; } article{ width: 100%; margin: 0 0 20px 0; .img_not{ width: 100%; height: 198px; overflow: hidden; img{ max-width: 100%; height: auto; } } p{ margin: 0; } small{ width: 60px; height: 80px; font-size: 14px; } } .bt_mais{ width: 100%; display: inline-block; margin-top: 60px; a{ width: 210px; text-align: center; padding: 8px 0; font-weight: 400; clear: both; margin: 0 auto; display: block; font-size: 18px; border: 1px solid #adadad; color: #adadad; &:hover{ background: #3d4569; color: #fff; text-decoration: none; } } } }/* /centraliza */ }/* /novidades */ .conquistas{ width:100%; margin: 0 0; height: 300px; float: left; figure{ width: 100%; height: 180px; img{ max-width: 100%; height: auto; } } } }/* /internas */ }/* /container */ footer { background:#d3d3d3 url(../img/bg_footer_mob.gif) no-repeat bottom center; height:900px; padding: 52px 0 10px 0; clear:both; .centraliza{ .bt_subir{ width: 56px; height: 56px; display: block; margin: 0 auto 50px auto; background-position: -213px -32px; text-indent: -9999px; } nav{ width: 150px; float: none; display: block; margin:0 auto; ul{ &.m_footer{ display: none; } &.redes{ li{ a{ &.bt_twitter{ margin: 0; } } } } } }/* /nav */ .end{ width: 96%; margin: 50px 2% 0 2%; }/* /end */ .parceiros{ width: 96%; margin:0 2%; h5{ font-size: 16px; } img{ width: 100%; height: auto; } }/* /parceiros */ }/* /centraliza */ }/* /footer */ }/* /fim mobile */ /* All Mobile Sizes (devices and browser) */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .centraliza{ width: 990px; margin: 0 auto; } #container{ header{ .top_mob{display: none;} &.int{ height: 184px; background: url(../img/bg_int.jpg) no-repeat center top; } nav{ width: 100%; left:0; top: 30px; margin-left:0; h1{ margin: 0 0 0 10px; } ul{ margin-right: 10px; li{ margin-left: 5px; a{ padding: 10px 10px; } ul{ display: none; } } } }/* /nav */ .g_scroll{ .pager{ right: none; left: 40px; } }/* /g_scroll */ }/* /header */ .principal{ .novidades{ .centraliza{ article{ width: 470px; figure{ width: 470px; } } }/* /centraliza */ }/* /novidades */ .blog{ article{ .img_blog{ float: right; } .centraliza{ left: 0; margin-left: 0; .text{ height: 578px; background:#00b4ff; h2, p{ margin: 20px 0 20px 20px; } } } } } }/* /principal */ .internas{ width: 100%; padding: 90px 0 150px 0; display: inline-block; .centraliza{ .galeria{ width: 100%; height: 660px; .scroll_gal{ height: 660px; .slide_gal{ height: 660px; img{ max-width: 100%; height: auto; } } } }/* /galeria */ }/* /centraliza */ .listagem{ .centraliza{ article{ width: 470px; figure{ width: 470px; } } }/* /centraliza */ }/* /novidades */ }/* /internas */ }/* /container */ footer { .centraliza{ nav{ margin:0 20px; }/* /nav */ }/* /centraliza */ }/* /footer */ }/* /fim media 1024 */