html, body{ margin: 0; padding: 0; height:100%; } body{ font-family: 'Oswald', sans-serif, verdana, helvetica, arial; } input::-ms-clear{ display: none; } /*img{ width: 100%; vertical-align: middle; border: 0; }*/ @font-face{ font-family: 'Neo Sans Std Medium TR'; font-style: normal; font-weight: normal; src: local('Neo Sans Std Medium TR'), url('//www.histeccomercial.com.br/fonts/NeoSans/Neo-Sans-Std-Medium-TR.woff') format('woff'); } .block-align-center{ display: -webkit-flex; display: -moz-flex; display: -o-flex; display: -ms-flex; display: flex; align-items: center; -webkit-align-items: center; -moz-align-items: center; -o-align-items: center; -ms-align-items: center; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -o-justify-content: center; -ms-justify-content: center; } .message p{ font-family:'Lato', sans-serif, Helvetica, Arial; color:#000; font-size: 18px; font-weight: 400; line-height: 25px; text-align: center; margin: 20px; } .errorform h2{ font-family:'Lato', sans-serif, Helvetica, Arial; font-size: 30px; color:#FF0606; margin: 20px; text-align: center; } .successform h2{ font-family:'Lato', sans-serif, Helvetica, Arial; font-size: 30px; color:#00B200; margin: 20px; text-align: center; } .successform a.btn{ font-size: 17.67px; padding: 6px 18px; margin: 0 20px 0 0; float: left; } .successform p#redir span{ color:red; font-weight: bold; } .hidden{ display: none } .hidden-phone{ display: block; } .show-phone{ display: none; } .hidden-tablet{ display: block; } .show-tablet{ display: none; } h1.page-header, h2.page-header, h3.page-header, h4.page-header, h5.page-header, span.page-header{ font-size: 41.41px; font-family: 'Oswald', sans-serif, verdana, helvetica, arial; font-weight: 400; color: #0C0C0C; text-transform: uppercase; padding: 60px 40px 50px; margin: 0 0 28px; border: 0; } h1.page-header span, h2.page-header span, h3.page-header span, h4.page-header span, h5.page-header span, span.page-header span{ font-size: 22.67px; font-weight: 300; color:#7B7B7B; display: block; } h1.page-header::before, h2.page-header::before, h3.page-header::before, h4.page-header::before, h5.page-header::before, span.page-header::before{ content: ''; width: 7px; height: 87px; background: #00B3CB; display: inline-block; position: absolute; left: 15px; margin-top: -14px; } .grey{ background:#F3F3F3; } .text-size-14{ font-size: 14px !important; } .text-size-16{ font-size: 16px !important; } .text-size-18{ font-size: 18px !important; } .text-size-24{ font-size: 24px !important; } .text-bold{ font-weight: 700 !important; } .text-lighter{ font-weight: 300 !important; } .text-black{ color: #000 !important; } .text-write{ color: #fff !important; } .text-red{ color: #ff0000 !important; } .text-green{ color: #008000 !important; } .display-block{ display: block; } .box-shadow{ box-shadow: -2px -2px 8px 0px rgba(0,0,0,0.58); -webkit-box-shadow: -2px -2px 8px 0px rgba(0,0,0,0.58); -moz-box-shadow: -2px -2px 8px 0px rgba(0,0,0,0.58); -o-box-shadow: -2px -2px 8px 0px rgba(0,0,0,0.58); -ms-box-shadow: -2px -2px 8px 0px rgba(0,0,0,0.58); } .img-page{ padding-right: 0px; padding-left: 0px; } a.btn{ background: #64B100; font-family: 'Neo Sans Std Medium TR'; font-size: 21.67px; color:#fff; padding: 15px 50px; border: 2px solid #64B100; } a.btn:hover{ background: transparent; color:#688F16; text-decoration: none; border: 2px solid #688F16; } a.btn.btn-danger{ color: #fff; background-color: #c9302c; border: 2px solid #c9302c; } a.btn.btn-danger:hover{ background-color: transparent; color: #ac2925; border-color: #ac2925; } a.btn.btn-danger:focus, a.btn.btn-danger.focus{ color: #fff; background-color: #d9534f; border-color: #ac2925; } /* Effects Fréxi Macromédia haha */ .animated{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } } .fadeIn{ -webkit-animation-name: fadeIn; animation-name: fadeIn; } @keyframes fadeInUp{ from{ opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to{ opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown{ from{ opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to{ opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown{ from{ opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to{ opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown{ -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @keyframes fadeInRight{ from{ opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to{ opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight{ -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @keyframes fadeInLeft{ from{ opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to{ opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes slideInDown{ from{ -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown{ from{ -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown{ -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft{ from{ -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft{ from{ -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft{ -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight{ from{ -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight{ from{ -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight{ -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp{ from{ -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp{ from{ -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp{ -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes zoomIn{ from{ opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50%{ opacity: 1; } } @keyframes zoomIn{ from{ opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50%{ opacity: 1; } } .zoomIn{ -webkit-animation-name: zoomIn; animation-name: zoomIn; } /* Effects hover */ .transition{ transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } .bounce-to-right{ display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .bounce-to-right:before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #64B100; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .bounce-to-right:hover, .bounce-to-right:focus, .bounce-to-right:active{ color: white; } .bounce-to-right:hover:before, .bounce-to-right:focus:before, .bounce-to-right:active:before{ -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .bounce-to-left{ display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .bounce-to-left:before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ac2925; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .bounce-to-left:hover, .bounce-to-left:focus, .bounce-to-left:active{ color: white; } .bounce-to-left:hover:before, .bounce-to-left:focus:before, .bounce-to-left:active:before{ -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .rectangle-out{ display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .rectangle-out:before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active{ color: white; } .rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before{ -webkit-transform: scale(1); transform: scale(1); } .opacity figure img{ opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .opacity figure:hover img{ opacity: .5; } .sepia figure img{ -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .sepia figure:hover img{ -webkit-filter: sepia(0); filter: sepia(0); } .gray-scale figure img{ -webkit-filter: grayscale(0); filter: grayscale(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gray-scale figure:hover img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } .gray-scale-invert figure img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gray-scale-invert figure:hover img{ -webkit-filter: grayscale(0); filter: grayscale(0); } .blur-gray-scale figure img{ -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .blur-gray-scale figure:hover img{ -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); cursor: pointer; } .rotate figure img{ -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .rotate figure:hover img{ -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } .zoom-out figure img{ -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .zoom-out figure:hover img{ -webkit-transform: scale(1); transform: scale(1); } .zoom-out-2 figure img{ width: 400px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .zoom-out-2 figure:hover img{ width: 300px; } .circle-hover figure{ position: relative; } .circle-hover figure::before{ position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255,255,255,.2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .circle-hover figure:hover::before{ -webkit-animation: circle .75s; animation: circle .75s; cursor: pointer; } @-webkit-keyframes circle{ 0%{ opacity: 1; } 40%{ opacity: 1; } 100%{ width: 200%; height: 200%; opacity: 0; } } @keyframes circle{ 0%{ opacity: 1; } 40%{ opacity: 1; } 100%{ width: 200%; height: 200%; opacity: 0; } } .shine figure{ position: relative; overflow: hidden; } .shine figure::before{ position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); cursor: pointer; } .shine figure:hover::before{ -webkit-animation: shine .95s; animation: shine .95s; cursor: pointer; } @-webkit-keyframes shine{ 100%{ left: 125%; } } @keyframes shine{ 100%{ left: 125%; } } .flash figure:hover img{ opacity: 1; -webkit-animation: flash 2.8s; animation: flash 2.8s; cursor: pointer; overflow: hidden; } @-webkit-keyframes flash{ 0%{ opacity: .3; } 100%{ opacity: 1; } } @keyframes flash{ 0%{ opacity: .3; } 100%{ opacity: 1; } } body .pre-header{ margin-bottom: 0; border: 0; background: #F3F3F3; padding: 0 0 9px; } body .pre-header-div{ float: left; width: 100%; } body .pre-header .pre-header-div .pre-header-brand .address{ width: 48%; float: left; } body .pre-header .pre-header-div .pre-header-brand .time{ width: 52%; float: left; } body .pre-header .pre-header-div .pre-header-brand .address span, body .pre-header .pre-header-div .pre-header-brand .time span{ width:auto; margin: 22px 0 0; display: block; font-family: 'Open Sans'; font-size: 15px; font-weight: bold; text-align: left; color:#191919; } body .pre-header .pre-header-div .pre-header-brand .address span{ padding-left: 57px; } body .pre-header .pre-header-div .pre-header-brand .time span{ padding: 0 0 0 80px; margin: 12px 0 0; } body .pre-header .pre-header-div .pre-header-brand .address span::before{ content: ''; background: url("//www.histeccomercial.com.br/images/icons/map.png"); display: inline-block; width: 30px; height: 40px; position: absolute; top: 13px; left: 15px; } body .pre-header .pre-header-div .pre-header-brand .time span::before{ content: ''; background: url("//www.histeccomercial.com.br/images/icons/clock.png"); display: inline-block; width: 42px; height: 42px; position: absolute; top: 13px; margin-left: -59px; } body .pre-header .pre-header-div .pre-header-brand span.time span{ font-family: 'Open Sans'; font-weight: 300; display: inline-block; position: relative; right: 0; top: -1px; left: 35%; margin-left: -180px; } body .pre-header .pre-header-div .pre-header-brand span.time span::before{ display: none; } body .navbar-right{ margin-right: 0; } body .navbar-social-media ul{ padding: 8px 0 0; } body .navbar-social-media ul li{ background: #00B4CB; width: 49px; height: 49px; margin-right: 10px; } body .navbar-social-media ul li:hover{ background:#0092A6; } body .navbar-social-media ul li:last-of-type{ margin-right: 0; } body .navbar-social-media ul li > a{ color:#fff; } body .navbar-social-media ul li > a:hover{ background:transparent; } body .navbar-social-media ul li > a.facebook{ font-size: 26px; position: relative; top: -2px; left: 2px; } body .navbar-social-media ul li > a.twitter{ font-size: 25px; position: relative; top: -1px; left: -1px; } body .navbar-social-media ul li > a.linkedin{ font-size: 25px; position: relative; top: -3px; left: 0px; } body .navbar-social-media ul li > a.google-plus{ font-size: 24px; position: relative; left: -3px; top: -1px; } body .nav > li > a:hover, .nav > li > a:focus{ background-color: transparent; } header{ background: #fff; padding: 38px 0 37px; } header .logo{ padding: 0; } header .logo h1{ width: 319px; height: 88px; margin: 0; background: url("//www.histeccomercial.com.br/images/logo.png"); text-indent: -9999px; } header .mobile-logo{ display: none; } header .contact-header{ padding:13px 0 0; } header .contact-header:nth-child(odd)::before{ content: ''; width: 1px; height: 60px; margin: 0; position: absolute; display: inline-block; background: #0090A3; } header .contact-header:nth-child(even)::before{ display: none; } header .contact-header .contact-info .icon-email{ width: 63px; height: 45px; background: url("//www.histeccomercial.com.br/images/icons/email.png"); float: left; margin-right: 20px; margin-top: 6px; margin-left: 49px; } header .contact-header .contact-info h2{ font-family: 'Open Sans'; font-size: 23.98px; font-weight: 300; color: #191919; text-transform: uppercase; margin: -2px 0 0; float: left; } header .contact-header .contact-info h3{ float: left; display: inline-flex; margin: 0; } header .contact-header .contact-info h3 a{ font-family: 'Open Sans'; color: #191919; } header .contact-header .contact-info .email h3 a{ font-size: 14.67px; } header .contact-header .contact-info .phone{ margin-top: -5px; } header .contact-header .contact-info .phone h2, header .contact-header .contact-info .phone h3{ margin-left: 14px; } header .contact-header .contact-info .phone h3{ margin-top: -5px; margin-bottom: 0; } header .contact-header .contact-info .phone h3 a{ font-size: 24.35px; } header .contact-header .contact-info .phone .icon-phone{ width: 40px; height: 44px; background: url("//www.histeccomercial.com.br/images/icons/phone.png"); float: left; margin: 10px 16px 0 34px; } nav.navbar{ font-size: 16px; margin-bottom: 0; } nav.navbar-inverse{ min-height: 61px; background-color: #00B3CB; border: 0; } nav.navbar-inverse .navbar-collapse, nav.navbar-inverse .navbar-form{ padding: 0; } nav .navbar-inverse .navbar-toggle{ border-color: #235fb0; } nav.navbar-inverse ul li{ padding: 5px 17.7px; border-right: 1px solid #0BA1B4; } nav.navbar-inverse ul li:hover{ background:#0092A6; } nav.navbar-inverse ul li a{ font-weight: 300; color:#fff; text-transform: uppercase; } nav.navbar-inverse ul li.active, nav.navbar-inverse ul li.active > a:hover{ background-color: #0092A6; } nav.navbar-inverse .navbar-nav > .active > a:hover{ background-color:transparent; } nav.navbar-inverse ul li.blue{ background-color: #27418F; } nav.navbar-inverse .navbar-nav > .active > a, nav.navbar-inverse .navbar-nav > .active > a:focus{ background-color: #0092A6; } body section.customers{ padding: 0 0 31px; } body section.customers h5.page-header span{ font-size: 22.67px; font-weight: 300; color: #7B7B7B; display: block; } body section.customers .panel-body{ text-align: center; } body section.customers .panel-body a.btn{ margin: 30px 0 0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; } body section.customers .panel-body a.btn:hover{ background: transparent; color:#688F16; text-decoration: none; border: 2px solid #688F16; } body section.customers .logo-group{ overflow: hidden; padding: 0; border: 2px solid #ddd; border-right: none; border-bottom: none; position: relative; } body section.customers .logo-group li{ width: 20%; float: left; height: 125px; list-style: none; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; padding: 5px 0px; } body section.customers .logo-group, body section.customers .logo-group li{ border-color:#757575; } body section.customers .logo-group li img{ max-width: 226px; max-height: 112px; display: block; margin: 0 auto; } footer{ font-family: 'Neo Sans Std Medium TR'; } footer .footer-informations{ padding: 52px 0 54px; background: #333739; } footer .footer-informations .logo{ margin: 0 0 160px } footer .footer-informations .logo img{ width: 100%; max-width: 100%; } footer .footer-informations .navbar-collapse.collapse{ float: left; } footer .navbar-social-media ul li{ margin-right: 18px; } footer .footer-informations h6{ font-family: 'Oswald', sans-serif, verdana, helvetica, arial; font-size: 23.38px; text-transform: uppercase; margin: 0 0 51px; color:#fff; } footer .footer-informations .contact ul{ padding: 0; } footer .footer-informations .contact ul li{ font-size: 14.67px; color:#fff; list-style: none; margin: 0 0 23px; text-transform: uppercase; } footer .footer-informations .contact ul li a{ text-decoration: none; color:#eee; } footer .footer-informations .contact ul li a:hover{ text-decoration: none; color:#00B3CB; } footer .footer-informations .contact ul li > i{ margin: 0 15px 0 0; } footer .footer-informations .contact ul li > i.icon-map{ width: 22px; height: 25px; display: inline-block; float: left; background: url("//www.histeccomercial.com.br/images/icons/map-footer.png"); } footer .footer-informations .contact ul li > i.icon-mail{ width: 24px; height: 18px; display: inline-block; float: left; background: url("//www.histeccomercial.com.br/images/icons/email-footer.png"); } footer .footer-informations .contact ul li > i.icon-phone{ width: 24px; height: 26px; display: inline-block; float: left; background: url("//www.histeccomercial.com.br/images/icons/phone-footer.png"); } footer .footer-informations .contact ul li > i.icon-clock{ width: 28px; height: 28px; display: inline-block; float: left; margin-top: 17px; background: url("//www.histeccomercial.com.br/images/icons/clock-footer.png"); } footer .footer-informations .contact ul li span{ display: block; float: none; font-size: 12px; padding: 0 31px; } footer .footer-informations .links ul{ padding: 0; list-style: none; } footer .footer-informations .links ul li{} footer .footer-informations .links ul li a{ font-size: 17.33px; color:#fff; } footer .footer-informations .links ul li a:hover, footer .footer-informations .links ul li.active a{ color:#00B3CB; text-decoration: none; } footer .footer-informations .newsletter p{ font-family: 'Oswald', sans-serif, verdana, helvetica, arial; font-size: 15px; font-weight: 300; color: #fff; margin-bottom: 25px; } footer .newsletter input[type="text"]{ width: 100%; height: 44px; border: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; float: left; padding-left: 15px; background: transparent; border: 1px solid #fff; } footer .newsletter a{ width: 42px; height: 38px; background: #00B3CB; float: left; position: absolute; margin-left: -45px; margin-top: 3px; border:0; color:#fff; text-align: center; } footer .newsletter a > i.icon-submit-newsletter{ width: 13px; height: 26px; display: inline-block; position: relative; top: 7px; left: 2px; background: url("//www.histeccomercial.com.br/images/icons/submit-newsletter.png"); } footer .footer-copyright{ padding: 19px 0px; background: #00B3CB; } footer .footer-copyright p{ font-size: 16px; color: #fff; margin: 3px 0; } footer .footer-copyright img{ width: 118px; height: auto; } /* ========== RESPONSIVE DESIGN ======== */ @media only screen and (max-width:1199px){ body .pre-header .pre-header-div .pre-header-brand .address span{ padding-left: 25px; } body .pre-header .pre-header-div .pre-header-brand .time{ padding: 0 0 0 47px; } body .pre-header .pre-header-div .pre-header-brand .time span{ padding: 0; } body .pre-header .pre-header-div .pre-header-brand .address span::before{ width: 20px; height: 27px; top: 14px; left: 15px; background-size: 100%; } body .pre-header .pre-header-div .pre-header-brand .time span::before{ width: 28px; height: 28px; top: 13px; margin-left: -35px; background-size: 100%; } body .pre-header .pre-header-div .pre-header-brand .address span, body .pre-header .pre-header-div .pre-header-brand .time span{ font-size: 12px; margin: 19px 0 0; } body .pre-header .pre-header-div .pre-header-brand span.time span{ position: inherit; width: auto; float: right; margin: 0 15px 0 0; } body .navbar-social-media ul li{ width: 35px; height: 35px; margin-right: 4px; } body .navbar-social-media .navbar-nav > li > a{ padding: 8px 9px; } body .navbar-social-media ul li > a.facebook{ font-size: 23px; top: -1px; left: 2px; } body .navbar-social-media ul li > a.twitter{ font-size: 23px; } body .navbar-social-media ul li > a.linkedin{ font-size: 23px; top: -2px; left: -1px; } body .navbar-social-media ul li > a.google-plus{ font-size: 20px; left: -3px; top: -2px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){ footer .footer-informations .contact ul li.mail a{ font-size: 14px; } } @media only screen and (min-width: 992px) and (max-width:1199px){ body .pre-header .pre-header-div .pre-header-brand .address{ width: 45%; } body .pre-header .pre-header-div .pre-header-brand .address span{ padding-left: 25px; } body .pre-header .pre-header-div .pre-header-brand .time{ width: 55%; padding: 0 0 0 47px; } body .pre-header .pre-header-div .pre-header-brand .time span{ width: 100%; padding: 0; } header .logo h1{ width: 100%; height: 81px; margin: 0; padding: 0; background-size: 100% 100%; } header .col-lg-1, header .col-md-1{ display: none !important; } header .contact-header:nth-child(odd)::before{ margin: 0 0 0 -12px; } header .contact-header .contact-info .email{ padding: 0; } header .contact-header .contact-info .email .icon-email{ margin: 4px 5px; margin-top: 4px; } header .contact-header .contact-info .phone h2, header .contact-header .contact-info .phone h3{ margin-left: 9px; } header .contact-header .contact-info h2{ font-size: 22.98px; } header .contact-header .contact-info h3 a{ font-size: 23.35px; } header .contact-header .contact-info .phone .icon-phone{ margin: 10px 0px 0 10px; } nav.navbar-inverse ul li{ padding:5px 16.5px; } body section.customers .logo-group li figure{ padding: 10px 0; } footer .footer-informations .logo{ margin: 0 0 187px; text-align: center; } footer .navbar-social-media ul li{ margin-right: 17px; } footer .footer-informations .logo img{ width: 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px){ body .pre-header .pre-header-div .pre-header-brand .address{ width: 58.5%; } body .pre-header .pre-header-div .pre-header-brand .time{ width: 41%; padding: 0 0 0 40px; } body .pre-header .pre-header-div .pre-header-brand .address span::before{ width: 20px; height: 27px; top: 14px; left: 15px; background-size: 100% auto; } nav.navbar-inverse{ min-height: auto; } nav.navbar-inverse ul li{ padding: 0; } header img, footer img{ width: 100%; max-width: 100%; } header .logo h1{ width: 100%; height: 65px; background-size: 100%; background-repeat: no-repeat; } header .col-xs-offset-1{ margin-left: 6.33333333%; } header .contact-header:nth-child(2n+1)::before{ height: 42px; left: -5px; } header .contact-header .contact-info .icon-email{ width: 43px; height: 35px; background-size: 100%; background-repeat: no-repeat; margin: 5px 10px; } header .contact-header .contact-info h2{ font-family: 'Open Sans'; font-size: 18px; } header .contact-header .contact-info .email{ display: inline-block; padding: 0 17px 0 0; } header .contact-header .contact-info .email h3 a{ font-size: 12.67px; text-align: center; } header .contact-header .contact-info .phone{ margin-top: -5px; float: right; width: auto; display: inline-block; } header .contact-header .contact-info .phone .icon-phone{ width: 34px; height: 38px; background-size: 100%; background-repeat: no-repeat; margin: 7px 10px 0 10px; } header .contact-header .contact-info .phone h2, header .contact-header .contact-info .phone h3{ margin: 0; } header .contact-header .contact-info .phone h3 a{ font-size: 18.50px; } nav.navbar-inverse ul li{ padding: 0 1px; } body section.customers .logo-group li figure{ padding: 24px 0; } footer .footer-informations .logo{ margin: 0 0 165px; text-align: center; } footer .footer-informations .logo img{ width: 100%; max-width: 100%; } footer .footer-informations .contact ul li{ font-size: 9.67px; } footer .navbar-social-media ul li{ margin-right: 2px; } footer .footer-informations .links ul li a{ font-size: 15.33px; } } @media only screen and (min-width: 768px){ .navbar-right{ margin-right: 0; } .navbar-collapse.collapse{ padding: 0; } nav.navbar-inverse{ border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } body section.customers .logo-group li img{ width: 100%; max-width: 100%; } } @media only screen and (max-width: 767px){ .block-align-center-tablet{ display: -webkit-flex; display: -moz-flex; display: -o-flex; display: -ms-flex; display: flex; align-items: center; -webkit-align-items: center; -moz-align-items: center; -o-align-items: center; -ms-align-items: center; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -o-justify-content: center; -ms-justify-content: center; } body .pre-header .pre-header-div .pre-header-brand{ width: 100%; text-align: center; } body .pre-header .pre-header-div .pre-header-brand .address, body .pre-header .pre-header-div .pre-header-brand .time{ width: auto; float: none; display: inline-block; } body .pre-header .pre-header-div .pre-header-brand .address span{ padding: 0; } body .pre-header .pre-header-div .pre-header-brand .address span::before{ position: inherit; top: inherit; left: inherit; float: left; margin: -7px 7px 0 0; } .hidden-tablet{ display: none !important; } .show-tablet{ display: block !important; } header{ padding: 5% 0; } header .logo h1{ width: 319px; height: 88px; margin-top: 3px; text-indent: -9999px; } .nav-mobile .col-lg-12, .nav-mobile .col-md-12, .nav-mobile .col-sm-12{ padding: 0; } nav nav::before{ display: none; } nav.navbar-inverse{ min-height: 50px; } nav.navbar-inverse .navbar-collapse, nav.navbar-inverse .navbar-form{ border:0; padding: 0; } nav.navbar-inverse .navbar-toggle{ background: #27418F; border-color: #27418F; } nav.navbar-inverse .navbar-toggle:hover, nav.navbar-inverse .navbar-toggle:focus{ background-color: #0092A6; border-color: #0092A6; } nav .string-menu-phone{ font-family: 'Open Sans'; font-size: 20px; font-weight: 300; color:#fff; float: left; padding: 10px 0 0; } nav .navbar-toggle{ margin-right: 0; } nav .navbar-nav{ margin: 0; background-color: #235fb0; } nav.navbar-inverse ul li{ padding: 0; } nav.navbar-inverse ul li a{ padding: 10px 15px; } nav.navbar-inverse ul li{ border-right: 0; } header .contact-header .contact-info a{ color: #191919; text-decoration: none } body section.customers .logo-group li{ width: 50%; } footer .footer-informations .logo{ text-align: center; margin: 0 0 40px; } footer .footer-informations .logo img{ width: auto; } footer .footer-informations h6{ font-family: 'Oswald', sans-serif, verdana, helvetica, arial; font-size: 23.38px; text-transform: uppercase; margin: 0 0 10px; } footer .footer-copyright p{ text-align: center; } footer .footer-copyright .gerencie-link{ margin: 20px 0 0; text-align: center; } } @media only screen and (max-width: 563px){ body .pre-header .pre-header-div .pre-header-brand .time span::before{ top: inherit; margin: -5px 0 0 -35px; } body .pre-header .pre-header-div .pre-header-brand .address span, body .pre-header .pre-header-div .pre-header-brand .time span{ margin: 12px 0 4px; } } @media only screen and (max-width: 500px){ body section.customers .logo-group li{ width: 100%; } } @media only screen and (min-width: 446px) and (max-width: 991px){ body .pre-header .pre-header-div .pre-header-brand span.time span{ display: none; } } @media only screen and (min-width: 446px) and (max-width: 767px){ header .logo{ text-align: center; } header.mobile-contacts{ padding: 15px 0; } header .contact-header:nth-child(2n+1)::before{ display: none } header .contact-header{ padding: 12px 0; } header .contact-header .contact-info{ width: 50%; display: inline-block; padding: 0; text-align: center; } header .contact-header .contact-info h3{ float: left; display: inline-block; margin: 0; font-size:inherit; } header .contact-header .contact-info h2{ font-size: 24px; } header .contact-header .contact-info .icon-email{ width: 63px; height: 45px; float: left; margin-right: 20px; margin-top: 6px; margin-left:0; } header .contact-header .contact-info .email{ display: inline-block; padding: 0; } header .contact-header .contact-info .email h3 a{ font-size: 14.3px; text-align: center; } header .contact-header .contact-info .phone h2, header .contact-header .contact-info .phone h3{ margin: 0; } header .contact-header .contact-info .phone h3 a{ font-size: 20.5px; } header .contact-header .contact-info .phone{ float: none; width: auto; margin:0; display: inline-block; } header .contact-header .contact-info .phone .icon-phone{ width: 40px; height: 44px; float: left; margin: 10px 25px 0 15px; } header .contact-header .contact-info .phone h3{ width: 215px; text-align: center; } } @media only screen and (max-width: 616px){ header .contact-header{ padding: 13px 0; } header.mobile-contacts{ padding: 3px 0; } header .contact-header .contact-info .icon-email{ width: 48px; height: 34px; float: left; margin-right: 10px; margin-top: 6px; margin-left: 0; background-size: 100%; } header .contact-header .contact-info .phone .icon-phone{ width: 35px; height: 39px; float: left; margin: 0px 15px 0 10px; background-size: 100%; } header .contact-header .contact-info h3{ display: none; } header .contact-header .contact-info h2{ font-size: 18px; margin: 6px 0 0; } } @media only screen and (max-width: 512px){ header.mobile-contacts{ display:none !important; } } @media only screen and (max-width: 467px){ body .hidden-phone{ display: none !important; } body .show-phone{ display: block !important; } body .text-size-24{ font-size: 17.7px !important; } body .pre-header .pre-header-div .pre-header-brand{ padding: 15px 0 0 0px; } body .pre-header .pre-header-div .pre-header-brand .time{ width: 100%; float: none; padding: 0; } body .pre-header .pre-header-div .pre-header-brand .time span{ text-align: center; padding-left: 0; margin: 0; top: 0; } body .pre-header .pre-header-div .pre-header-brand .time span::before{ display: none; } body .pre-header .pre-header-div .pre-header-brand span.time span{ position: inherit; display: block; left: 0; margin-left: 0; float: none; } header img, footer img{ width: auto; max-width: 100%; } header .contact-header:nth-child(2n+1)::before{ display: none } h1.page-header, h2.page-header, h3.page-header, h4.page-header, h5.page-header, span.page-header{ padding: 30px 40px 14px; } h1.page-header::before, h2.page-header::before, h3.page-header::before, h4.page-header::before, h5.page-header::before{ margin-top: 15px; } span.page-header::before{ margin-top: 9px; } body .panel-body{ padding: 0 15px 15px; } body section.customers .panel-body a.btn{ background: #7FAF1B; font-size: 21.67px; padding: 10px; } body section.customers h5.page-header, body section.customers span.page-header{ padding: 30px 155px 14px 40px; } body section.customers h5.page-header::before{ margin-top: 7px; } header .contact-header .contact-info .phone h2, header .contact-header .contact-info .phone h3{ margin-left: 0; } footer .footer-informations h1{ margin: 25px 0 20px; } footer .footer-informations .contact ul li > i{ margin: 0 5px 0 0; } footer .footer-informations .newsletter p{ font-size: 17px; } footer .footer-copyright p{ text-align: center; } footer .footer-copyright .gerencie-link{ margin-top: 20px; text-align: center; } } @media only screen and (min-width: 360px){ header .logo{ text-align: center; } } @media only screen and (max-width: 329px){ footer .footer-informations .contact ul li > i.icon-mail{ display: none; } } /* ========== BROWSERS ======== */ /* Chrome and Safari */ @media screen and (-webkit-min-device-pixel-ratio:0){ footer .newsletter a{ right: 6%; } body.providers section.providers .filter-button{ margin: 0 0 30px 8.1px; } header .contact-header .contact-info h2{ font-style: normal; } } @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 767px){ header .logo h1{ width: 319px; height: 88px; margin-top: 3px; background: url("//www.histeccomercial.com.br/images/logo.png"); } } @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 323px) and (max-width: 767px){ footer .newsletter a{ margin-left: -108px; } } /* ========== GENERAL INTERNAL PAGES ======== */ body.page section.page-img{ width: 100%; } body.page section.page-img img{ max-width: 100%; } body.page .bg-blue{ background: #00B5CB; } body.page .bg-lighter-blue{ background: #00B5CB; } body.page .bg-lighter-blue:hover, body.page main section.occupation-area .container .row:hover .bg-lighter-blue{ background: #0092A6; cursor: pointer;; } body.page main p{ font-family: 'Lato', sans-serif, Helvetica, Arial; font-size: 18.67px; color: #fff; } body.page main p.description{ line-height: 35px; } body.page main section.occupation-area{ padding: 0 0 46px; } body.page main section.occupation-area img{ height: auto; } body.page main section.occupation-area h4.page-header::before{ margin: 6px 0 0; } body.page main section.occupation-area .bg-lighter-blue{ min-height: 295px; padding: 0 45px; } body.page main section.occupation-area .bg-lighter-blue h1, body.page main section.occupation-area .bg-lighter-blue h2{ color: #fff; margin: 70px 0 27px; } /* ========== RESPONSIVE DESIGN GENERAL INTERNAL PAGES ======== */ @media only screen and (min-width:1200px){ body.page main section.occupation-area img{ width: 293px; height: 295px; } } @media only screen and (min-width: 992px) and (max-width: 1199px){ a.btn{ font-size: 19.67px; } body.page main section.occupation-area .bg-lighter-blue{ min-height: 250px; } body.page main section.occupation-area .bg-lighter-blue h1, body.page main section.occupation-area .bg-lighter-blue h2{ margin: 40px 0 5px; } } @media only screen and (max-width: 991px){ h1.page-header, h2.page-header, h3.page-header, h4.page-header, h5.page-header, span.page-header{ font-size: 34.41px; } } @media only screen and (min-width: 768px) and (max-width: 991px){ body.page main section.occupation-area img{ width: 100%; } body.page main section.occupation-area .bg-lighter-blue{ height: 386px; padding: 45px; margin-bottom: 20px; } body.page .margin-bottom-tablet{margin-bottom: 20px;} body.page main section.occupation-area .bg-lighter-blue h1, body.page main section.occupation-area .bg-lighter-blue h2{ color: #fff; margin: 0 0 27px; } section.customers .logo-group li img{ max-width: 100%; max-height: auto; } } @media only screen and (max-width: 767px){ body.page .margin-bottom-tablet{ margin-bottom: 20px; } body.page main section.occupation-area{ padding: 0; } } @media only screen and (min-width: 468px) and (max-width: 769px){ body.page section.page-img{ display:none; } body.page .bg-lighter-blue:hover, body.page main section.occupation-area .container .row:hover .bg-lighter-blue{ background: #00B5CB; cursor: pointer; } body.page main section.occupation-area .bg-lighter-blue{ min-height: auto; } body.page main section.occupation-area img{ width: 100%; } section.customers .logo-group li img{ max-width: 100%; max-height: auto; } } @media only screen and (max-width: 467px){ body.page section.page-img{ display: none; } body.page main p.description{ line-height: 28px; margin-bottom: 25px; } body.page main section.occupation-area .bg-lighter-blue{ min-height: auto; padding: 0 25px; } body.page .bg-lighter-blue:hover, body.page main section.occupation-area .container .row:hover .bg-lighter-blue{ background: #00B5CB; cursor: pointer; } body.page main section.occupation-area .bg-lighter-blue h1, body.page main section.occupation-area .bg-lighter-blue h2{ color: #fff; margin: 14px 0 8px; } body.page main section.occupation-area .bg-lighter-blue p{ margin: 0; font-size:14px; } } @media only screen and (max-width: 339px){ a.btn{ font-size: 16.67px; padding: 15px 0; } } /* Page Our Store */ body.our-store section.our-store{ font-size: 24px; } body.our-store section.our-store section.go-visit{ font-family: 'Lato', sans-serif, Helvetica, Arial; font-weight: 300; } body.our-store section.our-store section.go-visit span{ display: block; } body.our-store section.our-store address{ padding: 0 0 50px; } body.our-store section.our-store address h1{ font-size: 24px; display: inline-block; margin: 0; } body.our-store section.our-store address i.icon-store{ width: 83px; height: 83px; display: inline-block; background: url("//www.histeccomercial.com.br/images/icons/map-icon.png"); position: relative; top: 32px; right: 20px; } body.our-store section.our-store section.map-frame{ padding: 35px 0; } body.our-store section.our-store section.map-frame iframe{ width: 100%; max-width: 100%; } /* ========== RESPONSIVE OUR STORES ======== */ @media only screen and (min-width: 768px) and (max-width: 1199px){ body.our-store section.our-store address{ padding: 0 0 55px; } } @media only screen and (max-width: 767px){ body.our-store section.our-store address i.icon-store{ display: block; position: relative; top: inherit; right: inherit; margin: 20px auto; } body.our-store section.our-store address h1{ margin:0; } } @media only screen and (max-width: 679px){ body.our-store main section.our-store span.page-header{ font-size: 40.41px; padding: 45px 40px 14px; margin: 0 0 38px; } body.our-store main section.our-store span.page-header::before{ margin-top: -14px; } } @media only screen and (min-width: 468px) and (max-width: 991px){ body.our-store section.our-store .img-responsive{ margin: 20px auto; } } @media only screen and (max-width: 467px){ body.our-store section.our-store .img-responsive{ margin: 20px auto; } }