/*
Theme Name: BRITech
Theme URI: https://wordpress.org/themes/britech/
Author: Vitor Zanirato
Author URI: http://www.vzanirato.com;
Description: Tema desenhado para o desenvolvimento da versão 2018 do website BRITech.
Version: 1.0
License: Copyright
Text Domain: britech
Tags: responsivo, business, moderno, leve.
*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 01 FONTES E UPLOADS */

@import url('https://fonts.googleapis.com/css?family=Lora:400,400i|Work+Sans:400,500,700');

/*---------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 02 ESTILOS GERAIS */

::selection {background-color: #3DC5E7; color:#002B3E;}
body {background-color: #fff; margin: 0; padding: 0; color: #6D6E71; letter-spacing: -0.3px; line-height: 1.5; text-decoration:none; margin:0; padding:0; font-size: 16px; font-weight: 400;}
strong {font-weight: 700;}
ul, li, figure {list-style:none; margin: 0; padding: 0; -webkit-margin-before: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0px;}
h1 , h2 , h3 , h4 , h5 , h6 {margin:0; padding:0; font-weight: 400; font-family: 'Work Sans', sans-serif; letter-spacing: -0.7px;}
a , a > img {transition: ease 0.7s all; -webkit-transition: ease 0.7s all; cursor:pointer !important;}
p , li , article {line-height: 1.5; font-family: 'Lora', Georgia, serif;}
a {font-family: 'Work Sans', sans-serif; text-decoration: none; margin: 0; padding: 0;}

.goldenrule {padding:0 40px; max-width: 1360px; margin: 0 auto;}
.silverrule {margin:0 40px; max-width: 1360px; margin: 0 auto;}
.icon {font-family: si !important; text-transform: none !important;}
.frst {margin-left:0 !important;}
.lst {margin-right:0 !important;}
.floatl {float: left !important;}
.floatr {float: right !important;}
.txtc {text-align: center !important;}
.txtr {text-align: right !important;}
.disp-tb {display: table; width: 100%;}
.bordertop {border-top: solid 1px rgba(255,255,255,0.8);}
.borderbot {border-bottom: solid 1px rgba(255,255,255,0.8);}
.notnow {display: none;}

.mgtop40 {margin-top: 40px !important;}
.mgbot40 {margin-bottom: 40px !important;}
.padtop40 {padding-top: 40px !important;}
.padbot40 {padding-bottom: 40px !important;}
.mgtop70 {margin-top: 70px !important;}
.mgbot70 {margin-bottom: 70px !important;}
.padtop70 {padding-top: 70px !important;}
.padbot70 {padding-bottom: 70px !important;}
.mgtop100 {margin-top: 100px !important;}
.mgbot100 {margin-bottom: 100px !important;}
.padtop100 {padding-top: 100px !important;}
.padbot100 {padding-bottom: 100px !important;}

#bars-title-a {margin: 0 auto; display: table;}
#bars-title-a > div , #bars-title-a > h4 {float: left;}
#bars-title-a > h4 {padding: 0 20px 0 20px; font-size: 26px; color: #002B3E}
#bars-title-a > div {height: 40px; width: 10px; background-color:#3dc5e7;}

#bars-title-b {margin: 0 auto; display: table;}
#bars-title-b > div , #bars-title-b > h4 {float: left;}
#bars-title-b > h4 {padding: 0 20px 0 20px; font-size: 26px; color: #002B3E}
#bars-title-b > div {height: 40px; width: 10px; background-color:#fff;}

#bars-title-c {margin: 0 auto; display: table;}
#bars-title-c > div , #bars-title-c > h4 {float: left;}
#bars-title-c > h4 {padding: 0 20px 0 20px; font-size: 26px; color: #fff}
#bars-title-c > div {height: 40px; width: 10px; background-color:#3dc5e7;}

#bars-title-d {margin: 0 auto; display: table;}
#bars-title-d > div , #bars-title-d > h4 {float: left;}
#bars-title-d > h4 {padding: 0 20px 0 20px; font-size: 26px; color: #002B3E}
#bars-title-d > div {height: 40px; width: 10px; background-color:#833293;}

#bars-title-e {display: table; position: relative;}
#bars-title-e > h4 {float: left;}
#bars-title-e > h4 {padding: 0 0 0 20px; font-size: 18px; color: #fff; font-weight: 500; margin-top: -2px;}
#bars-title-e > div {height: 24px; width: 10px; background-color:#3dc5e7; position: absolute; top: 0; left: 0;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 02 HEADER */

header {position: fixed; width: 100%; top: 0; z-index: 4; background-color: #fff; box-shadow: 0 4px 6px 0 rgba(0,0,0,0.1); max-height: 80px;}

header > div > div > a > img {padding: 15px 0; transition: 0.7s all ease;}
header > div > div > a > img:hover {opacity: 0.7;}

nav {float: right; display: table;}
#menu-dsk {float: right; display: table;}
#menu-dsk > li {float: left; padding: 28px 0; margin-left: 30px;}
#menu-dsk > li > a {text-transform: uppercase; font-size: 14px; color: #454545; font-weight: 500;} 
#menu-dsk > li > a:hover {color: #3DC5E7;}
#menu-dsk > li.nav-cta > a {color: #fff; background-image: linear-gradient(to right top, #3dc5e7, #2fc9e6, #20cee5, #10d2e2, #03d6df); padding: 10px 12px; line-height: 0;}
#menu-dsk > li.nav-cta > a:hover {color: #002B3E; transition: 1s all ease;}

#menu-dsk > li:hover .sub-menu {left:0; top:80px;} 
.sub-menu {transition: 0.7s all ease; z-index: 1; margin:0px auto; float:left; position:absolute; width: calc(100% - 80px); left:-1000em; top: 80px; text-align:left; background: rgba(0,43,63,0.85); color: #fff; border-top:none; padding: 20px 40px;}
.sub-menu > ul {display: table; float: right;}
.sub-menu > ul > li {float: left; margin: 0 20px;}
.sub-menu > ul > li > img {float: left; padding-right: 10px; opacity: 0.8; width: 34px;}
.sub-menu > ul > li > a {color: #fff; line-height: 2.2;}
.sub-menu > ul > li > a:hover {color: #3DC5E7;}

#lang-flags {padding: 27px 0 !important;}
li#lang-flags > a > img {height: 22px;}
li#lang-flags > a > img:hover {opacity: 0.7; transition: 0.7s all ease;}
.lang-en {margin-left: 10px !important;}

#responsive-header {height: 80px; background-color: #fff; position: fixed; margin-top: -80px; width: 100%; box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2); z-index: 99;}
#responsive-header > div > a > img {padding: 20px 0; height: 40px;}

#itens-menu-responsive > ul {display: table;}
#itens-menu-responsive > ul > li {float: left; margin-right: 10px;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 03 CONTENT */

#vitrines {height: 100vh; background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover;}
#vitrines > div {height: 100vh;}
#vitrines > div > div {max-width: 660px; padding: 60px; position: relative; margin: 0; top: 50%; transform: translateY(-45%);}
#vitrines > div > div > h4 {padding: 2px 10px; color: #3DC5E7; border: solid 1px #3DC5E7; text-transform: uppercase; font-size: 14px; display: table; margin-bottom: 10px;}
#vitrines > div > div > h1 {font-size: 30px;}
#vitrines a {margin-top: 30px;}
#vitrines h2 {font-size: 26px; color: #fff; font-weight: 700;}

#vitrines > div > div.homealone {max-width: 600px; }
#vitrines > div > div.homealone > h1 {font-size: 34px;}
#vitrines > div > div.homealone > p {font-size: 18px;}

#vitrines-cases {margin-top: 80px; height: 640px; background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: center center !important;}
#vitrines-cases > div > div {max-width: 620px; margin: 0 auto; padding: 130px 0 80px;}
#vitrines-cases > div > div > div > span {font-family: 'Work Sans', sans-serif; color: #fff;}
#vitrines-cases > div > div > div#bars-title-c {padding: 14px 0 20px;}
#vitrines-cases > div > div > div#bars-title-c > h4 {font-size: 32px;}
#vitrines-cases > div > div > p > em {font-size: 24px; font-family: 'Lora', serif;}
#vitrines-cases > div > div > p {font-family: 'Work Sans', sans-serif; color: #fff; font-size: 18px; padding-bottom: 12px;}

section#vitrines > div > div > h1 {color: #fff;}
section#vitrines > div > div > p {color: rgba(255,255,255,0.8);}

section#vitrines.v-sol-5 {background-image: url(images/bg-sol-5.jpg);}

section#fol-a {height: 360px; width: 100%; display: table;}
section#fol-a div {padding: 40px; box-sizing: border-box;}
section#fol-a p {color: rgba(255,255,255,0.8);}
section#fol-a h1 {font-weight: 700; font-size: 36px;}
section#fol-a .fol-left {background-color: #002B3E; width: 50%; height: 100%; float: left;}
section#fol-a .fol-left h1 {color: #3DC5E7;}
section#fol-a .fol-left > div {max-width: 640px; float: right; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
section#fol-a .fol-right {background-color: #3DC5E7; width: 50%; height: 100%; float: left;}
section#fol-a .fol-right h1 {color: #002B3E;}
section#fol-a .fol-right > div {max-width: 640px; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}

::-webkit-full-page-media, _:future, :root .safari_only {
    
}

@media not all and (min-resolution:.001dpcm) { 
    @media {
        section#fol-a {height: 600px;}
        article#fol-b {padding-top: 0px !important;}

        @media only screen and (max-width: 767px) {
        	article#fol-b {padding-top: 60px !important;}
        }


    }
}


article#fol-b p {font-size: 24px; max-width: 620px; margin: 0 auto;}

article#fol-c {background-image: linear-gradient(to right top, #002B3E, #00355C, #1B3C78, #4F3C8C, #833293); background-attachment: fixed;}
article#fol-c h4 {font-weight: 500; font-size: 28px; color: #fff;}
article#fol-c h3 {font-weight: 700; font-size: 42px; text-transform: uppercase; color: #fff;}
article#fol-c > div > p {font-family: 'Work Sans', sans-serif; font-size: 20px;}
article#fol-c p {color: rgba(255,255,255,0.8);}
article#fol-c ul {width: 100%; max-width: 1080px; display: table; box-sizing: border-box; padding-top: 40px; margin: 0 auto;}
article#fol-c li {width: 30%; margin: 0 5% 7.5% 0; float: left; break-inside: avoid-column !important; display: inline-block;}
article#fol-c li:nth-child(3n) {margin-right: 0;}
article#fol-c h2 {font-size: 18px; color: #fff; font-weight: 500; padding-top: 8px;}

section#fol-d h3 {font-size: 36px; font-weight: 700; color: #002B3E;}
section#fol-d p {max-width: 620px; margin: 0 auto; padding: 10px 0 30px;}
section#fol-d a {margin: 0 auto;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 05 FOOTER */

footer {background-color: #002B3E; position: relative; z-index: 2; padding: 20px 0;}
footer > div > div {display: table; width: 100%;}
footer img {float: left; padding-top: 4px;}
footer p {float: right; color: #fff; font-size: 12px;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------*/

/* 06 BUTTONS */

#btn-a {line-height: 2; color: #333333; text-transform: uppercase; font-weight: 500; padding: 8px 16px; display: table; border: 3px solid #3DC5E7;}
#btn-a:hover {background-color: #3DC5E7; color: #fff;}

#btn-b {line-height: 2; color: #fff; text-transform: uppercase; font-weight: 500; padding: 8px 16px; display: table; border: 3px solid #fff;}
#btn-b:hover {background-color: #fff; color: #002B3E;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 08 RESPONSIVE */

@media only screen and (min-width: 1441px) {
#vitrines , #inter-cases {background-size: cover !important;}
} 

@media only screen and (max-width: 1179px) {
/* GERAL */
.goldenrule {padding: 0 20px;}
.silverrule {margin: 0 20px;}
#vitrines-cases > div > div {padding: 110px 0 60px;}
section#vitrines.v-prod > div > div {padding: 100px 60px;}
}

@media only screen and (max-width: 1029px) {
header > div > div > a > img {padding: 20px 0; width: 170px;}
#menu-dsk > li {margin-left: 25px;}
} 

@media only screen and (min-width: 980px) {
/* GERAL */
.none980 {display: none !important;}
}

@media only screen and (max-width: 979px) {

.none979 {display: none !important;}
.frst {margin-top: 0;}
.lst {margin-bottom: 0;}
.home-segmentos > ul > li {width: 92%; padding: 0 4%; margin:0 0 120px 0;}
#vitrines {margin-top: 80px; height: calc(100vh - 80px);}
#vitrines > div {height: calc(100vh - 80px);}
#vitrines > div > div {padding: 0; top: 45%; transform: translateY(-45%);}
#vitrines-cases > div > div {padding: 80px 0 60px;}
article#home-a > ul > li {margin: 5% !important; width: 40%;}
article#home-a > ul.padtop70 {padding-top: 40px !important;}
article#home-a.tri-column li {width: 100%; margin: 0 0 40px!important;}
article#home-a.tri-column li:last-child {margin-bottom: 0;}
article#home-a.tri-column-bs ul {padding: 0;}
article#home-a.tri-column-bs li {width: 30%; margin: 0 5% 0 0!important;}
article#home-a.tri-column-bs li:last-child {margin-right: 0!important;}
section#home-b > div > div > div.floatl {padding: 0; width: 60%;}
section#home-b > div > div > div.floatr {padding: 0; width: 40%;}
section#prod-b > div > div > div > img {display: none;}
section#prod-b > div > div > div > div {padding-left: 0;}
section#vitrines.v-prod > div > div {padding: 60px;}
section#serv-b > div > div > div.floatr , section#serv-b > div > div > div.floatl {width: 100%;}
div.cases-hover {display: none;}
section#cases-a > div > ul > li > div.cases-desc > p , section#cases-a > div > ul > li > div.cases-desc > a {font-size: 14px;}
section#cases-a > div > ul {padding-bottom: 40px;}
section#cases-a > div > ul > li > a > div.cases-img {height: 180px;}
article#blog-posts > a > h1 {font-size: 28px;}
article#blog-posts > p {font-size: 16px !important;}
#blog-archive > main {width: 100%; float: none;}
#blog-archive > aside {width: calc(100% - 40px); float: none; margin: 40px 0 0;}
#blog-archive > main > ul > li > div.post-excerpt > a > h2 {font-size: 24px;}

article#fol-c li {height: 166px;}

section#fol-a h1 {font-size: 32px;}

.mgtop100 {margin-top: 60px !important;}
.mgbot100 {margin-bottom: 60px !important;}
.padtop100 {padding-top: 60px !important;}
.padbot100 {padding-bottom: 60px !important;}
.mgtop70 {margin-top: 40px !important;}
.mgbot70 {margin-bottom: 40px !important;}
.padtop70 {padding-top: 40px !important;}
.padbot70 {padding-bottom: 40px !important;}


button#responsive-menu-button {background-image: linear-gradient(to right top, #3dc5e7, #2fc9e6, #20cee5, #10d2e2, #03d6df) !important; margin: 20px !important;}

} 


@media only screen and (min-width: 768px) {
/* GERAL */
.none768 {display: none !important;}
}

@media only screen and (max-width: 767px) {
.none767 {display: none !important;}
#bars-title-a > h4 , #bars-title-b > h4 , #bars-title-c > h4 , #bars-title-d > h4  {font-size: 22px;}
#bars-title-a > div , #bars-title-b > div , #bars-title-c > div , #bars-title-d > div {height: 30px; display: none;}
header > div {z-index: 9999;}
#vitrines {background-position: left;}
section#vitrines > div > div > h1 {font-size: 24px !important; margin-top: 10px;}
#vitrines > div > div.homealone > p {font-size: 16px;}
#vitrines-cases > div > div > div#bars-title-c > h4 {font-size: 24px;}

footer > div > ul > li {width: 100%; margin: 25px 0 !important;}
#foot-2 > div > ul, #foot-2 > div > h5 , #foot-2 > div > a {margin-left:0 !important; } 
#foot-3 {text-align: left !important;}
#foot-3 > a > img {display: none;}


section#vitrines.v-prod > div > div {padding: 9px 0 100px 0 !important;}

section#fol-a {height: auto; display: block;}
section#fol-a .fol-left {width: 100%; float: none;}
section#fol-a .fol-left > div {float: none; top: inherit; transform: none;}
section#fol-a .fol-right {width: 100%; float: none;}
section#fol-a .fol-right > div {position: relative; top: inherit; transform: none;}

article#fol-b p {font-size: 18px;}

article#fol-c li {width: 100%; margin-right: 0; margin-bottom: 50px; float: none; height: auto;}
article#fol-c li:last-child {margin-bottom: 0;}

section#fol-d h3 {font-size: 32px;}

}

@media only screen and (min-width: 480px) {
.none-480 {display: none;}
}

@media only screen and (max-width: 479px) {
.none-479 {display: none;}
header > div > div > a > img {width: auto;}
body {font-size: 14px;}
#vitrines > div > div.homealone > p {font-size: 14px;}

#cprght {font-size: 11px; padding-top: 30px;}
section#fol-a h1 {font-size: 26px;}
section#fol-a div {padding: 20px;}

footer > div > div {text-align: center;}
footer img {float: none;}
footer p {float: none; padding-top: 20px;}


}