/* 
    Created on : 26/04/2018, 17:59:16
    Author     : renato
*/
/*============= * ==============*/
/*============ BOOT ============*/
/*============= * =============*/
*,
*:before,
*:after{margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: 'Montserrat', sans-serif;}
body{background-color: #fff; overflow-x: hidden;}

p, address, span{color: #333; font-size: 1em; line-height: 1.2; margin-bottom: 15px; letter-spacing: 0; font-weight: normal; font-style: normal;}
p:last-of-type{margin-bottom: 0;}
small{font-size: 0.875em; padding: 0 5px;}
mark{font-size: 1em; padding: 5px; background-color: #f6f6f6; font-weight: bold; margin: 3px 0; display: inline-block;}
b, strong{font-weight: 900;}

h1{margin-bottom: 25px; line-height: 1.1; font-size: 2.5em; font-weight: 300; font-family: 'Lato', sans-serif;}
h2{margin-bottom: 15px; line-height: 1.1; font-size: 2em; font-weight: 500; font-family: 'Lato', sans-serif;}
h3{margin-bottom: 15px; line-height: 1.1; font-size: 1.5em; font-weight: 700; font-family: 'Lato', sans-serif;}

/*Tamanho da font*/
.fontzero{font-size: 0em; position: absolute;}
.font-small{font-size: 0.875em;}
.font-medium{font-size: 1em;}
.font-large{font-size: 1.5em;}
.font-plus{font-size: 2em;}

/*Alinhamento do texto*/
.txt-left{text-align: left;}
.txt-right{text-align: left;}
.txt-justify{text-align: left;}
.txt-center{text-align: center;}

.ratio{position: relative; padding-bottom: 56.25%;}
.ratio_el{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

a{text-decoration: none;}
a:hover{color: #00a7b0;}
a img{text-decoration: none; border: 0;}

img{max-width: 100%;}

ul{list-style: none; padding: 0;}

/*display*/
.ds-block{display: block;}
.ds-inline{display: inline;}
.ds-iblock{display: inline-block;}
.ds-none{display: none;}

/*containers*/
.container{width: 1170px; max-width: 100%; margin: 0 auto; position: relative; padding: 0 15px;}
.container-fluid{max-width: 100%; margin: 0 auto; position: relative; padding: 0 15px;}
.content{display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start}

.headline{margin-bottom: 25px; text-align: center;}
.headline h1{font-weight: 500; flex-basis: 100%;}
.headline .tagline{flex-basis: 100%;}

/*separator*/
.pdd_separator{padding-top: 60px; padding-bottom: 60px;}

/*BOOT fields*/
input,
textarea{padding: 15px; border: 0; margin-bottom: 15px; width: 100%; font-size: 1.1em;}
button{font-size: 1em}

/*BOOT button*/
.btn{border: 0; width: auto; line-height: 1.2; padding: 7px 25px; margin: 0 auto; display: inline-block; cursor: pointer; border-bottom:  5px solid transparent;}
.btn:focus, input:focus, select:focus, textarea:focus, button:focus{outline: thin dotted; outline: 0px auto -webkit-focus-ring-color; outline-offset: 0px;}
.btn-small{padding: 5px 15px; font-size: 0.875em;}
.btn-medium{padding: 10px 25px; width: auto;}
.btn-large{padding: 10px 25px; width: auto;}
.btn-plus{padding: 15px 25px; width: 100%;}

.btn-success{background-color: #3BCC60; color: #FFF; border-color: #2C9948;}
.btn-success:hover{background-color: #2C9948; color: #FFF; border-color: #1d6630;}

.btn-infor{background-color: #06A1D9; color: #FFF; border-color: #0585B2;}
.btn-infor:hover{background-color: #0585B2; color: #FFF; border-color: #045f80;}

.btn-alert{background-color: #FFBA1C; color: #FFF; border-color: #E5A719;}
.btn-alert:hover{background-color: #E5A719; color: #FFF; border-color: #b38213;}

.btn-error{background-color: #DF1631; color: #FFF; border-color: #D5152F;}
.btn-error:hover{background-color: #D5152F; color: #FFF; border-color: #a31024;}

.btn-color{background-color: #00a7b0; color: #fff !important; font-size: 1.2em; font-weight: 900; text-align: center; margin: 0 auto; display: block; max-width: 350px;}
.btn-up{position: fixed; bottom: 30px; right: 15px; background: rgba(0,0,0,0.5); padding: 10px; width: 50px; height: 50px; display: none;}
.btn-mobile{border: 0; width: 60px; height: 60px; padding: 10px; background: rgba(0,0,0,.5); display: none; cursor: pointer; right: 8px; top: 8px;}
.btn-mobile:hover, .btn-mobile.open_{background-color: #fff;}

.btn-mobile span{display: block; margin-bottom: 5px; background-color: #fff; height: 3px; width: 100%;}
.btn-mobile span:last-of-type{margin-bottom: 0;}
.btn-mobile:hover span, .btn-mobile.open_ span{background-color: #00a7b0;}

/*BOOT popup*/
.popup{display: none; overflow-y: scroll; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; padding: 25px 0; background: url(img/bg-transparent.png) center no-repeat; background-size: cover;}
.popup::-webkit-scrollbar {width: 0px;}
.popup::-moz-scrollbar {width: 0px;}
.popup .btn-close{text-transform: uppercase; position: absolute; right: 5px; top: 5px; z-index: 99;}
.popup_content .headline{flex-basis: 100%;}
.popup_content{top: -999%;}
.popup_content h3{text-transform: uppercase; color: #fff; margin-bottom: 5px;}
.popup_content p{color: #fff;}
.popup_content p:after{content: ""; display: block; width:75px; height: 2px; background-color: #fff; margin: 15px auto;}

/*CARREGAMENTO DO FORM*/
.form_load{display: none; vertical-align: middle; margin-left: 15px; margin-top: -2px; float: right;}
.j_progress{display: block; background-color: transparent; color: #fff; position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; padding: 2px 5px;}
.j_progress .bar{display: block; padding: 1px; background-color: rgba(0,0,0,0.3); text-align: center; width: 0%; max-width: 100%;}

/*BOOT EFEITOS*/
.transition{transition-duration: 0.3s; -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s;}
.radius{border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.radius-2x{border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.radius-3x{border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;}
.radius-4x{border-radius: 32px; -moz-border-radius: 32px; -webkit-border-radius: 32px;}
.rounded{border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;}
.hover-zoom:hover{transform: scale(1.1); -moz-transform: scale(1.05); -webkit-transform: scale(1.05);}
.hover-zoom:hover img{box-shadow: 2px 2px 3px #ccc; -moz-box-shadow: 2px 2px 3px #ccc; -webkit-box-shadow: 2px 2px 3px #ccc;}

/* BOOT TRIGGERS */
.trigger_box{position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
.trigger_popup{top: -150px; min-height: 100px; align-items: center; display: flex; flex-wrap: wrap; max-width: 350px; width: 100%; justify-content: center;}
.trigger{padding: 15px; font-size: 0.875em; text-transform: uppercase; text-align: center; border: 1px solid #f6f6f6; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: 'Calibri', sans-serif; font-weight: 500; margin: 15px auto !important; position: relative;}
.trigger.success{background-color: #3BCC60; color: #FFF; border-color: #2C9948;}
.trigger.infor{background-color: #06A1D9; color: #FFF; border-color: #0585B2;}
.trigger.alert{background-color: #FFBA1C; color: #FFF; border-color: #E5A719;}
.trigger.error{background-color: #DF1631; color: #FFF; border-color: #D5152F;}

/*BACKGROUNDS*/
.bg-white{background-color: #FFFFFF; color: #333333}
.bg-grey{background-color: #f7f7f7; color: #333333}
.bg-blue{background-color: #247094; color: #ffffff; background: url(img/bg-colour.png) no-repeat center; background-size: cover;}
.bg-greystronger{background-color: #35393c; color: #ffffff;}

/*icones*/
.ico{display: inline-block;margin-right: 3px; width: 24px; height: 24px; background-size: 100%; background: no-repeat center; padding: 5px; position: relative; top: 5px;}
.ico.whatsapp{background-image: url(img/ico-whatsapp.png);}
.ico.email{background-image: url(img/ico-email.png);}

/*HEADER*/
.main_header{background: url(img/banner-home.png) no-repeat center;background-color: #FFF; background-size: cover; padding: 15px 0 0px; position: relative;}
.main_header .fixed_.on{position: fixed;  width: 100%; top: 0; left: 0; background-color: #00a7b0; z-index: 99; padding: 10px 0;}
.main_header .logo{flex-basis: 25%;}
.main_header .logo h1{font-size: 0; background: url(img/logo.png) no-repeat center; height: 60px; max-width: 265px; width: 100%; display: block; margin: 0 auto; background-size: 100%;}
.main_header .nav_menu{flex-basis: 75%; display: block;}
.nav_menu .nav_menu_ul{text-align: right;}
.nav_menu_ul li{display: inline-block; margin-right: 5px}
.nav_menu_ul li:last-of-type{margin-right: 0}
.nav_menu_ul a{padding: 10px 10px 5px; color: #fff; font-size: 0.8em; font-weight: 500; display: inline-block; border-bottom: 1px solid transparent; font-family: 'Montserrat', sans-serif; text-transform: uppercase}
.nav_menu_ul a:hover{border-bottom: 1px solid #fff;}

.main_header_title{padding: 160px 15px 250px;}
.main_header_title h2{color: #fff; flex-basis: 60%; font-size: 3em; margin-bottom: 50px; padding-right: 10%; min-height: 220px;}
.main_header_title .button-footer{flex-basis: 100%;}
.button-footer .btn-white{background-color: #fff; display: block; margin: 0 0 7px 0; font-size: 1.5em; color: #00a7b0; font-weight: 900;text-align: center; max-width: 350px;}
.button-footer span{display: block; color: #fff; font-weight: 500; font-family: 'Montserrat', sans-serif; padding-left: 5px;}

.first_sec .headline{margin-bottom: 60px;}
.first_sec h1{margin-bottom: 5px; line-height: 1}
.first_sec .tagline{font-weight: 800; color: #00a7b0; font-size: 2.2em; text-align: center;}
.first_sec .btn{font-family: 'Montserrat', sans-serif;}

.main_cont, .main_footer{position: relative;}

/*about*/
.about {background: url(img/bg-quem-somos.png) no-repeat; background-size: cover; background-position: -130px 0;}
.about .about_content{justify-content: flex-end}
.about_content header, p{flex-basis: 55%; text-align: left}
.about_content h1{font-size: 1.2em; font-weight: 600; text-transform: uppercase;}
.about_content h2{color: #00a7b0; font-size: 2.3em;}
.about_content p{font-weight: 400; line-height: 1.4; font-size: 1.1em; color: #555;}

/*solutions*/
.solutions .solutions_content{flex-basis: 40%; margin-bottom: 15px;}
.solutions .box_img{flex-basis: 60%;}
.solutions_content .headline{text-align: left; color: #00a7b0;}
.solutions_content .headline h1{font-family: 'Montserrat', sans-serif; font-weight: 900}
.solutions_content .solutions_ul{list-style: disc; padding-left: 25px; margin-bottom: 40px;}
.solutions_ul li{margin-bottom: 15px; font-size: 1.2em; font-weight: 500; color:#00a7b0}
.solutions_content .btn-color{margin: 0;}
.solutions .box_img{padding: 15px;}

/*cases*/
.cases_content .headline{text-align: center; flex-basis: 100%;}
.cases_content .headline h1{font-family: 'Montserrat', sans-serif; font-weight: 900}
.cases_content .box_img{flex-basis: 100%; margin-bottom: 50px;}
.cases_content .box_img img{display: block; margin: 0 auto;}
.box_article{flex-basis: calc(50% - 30px); margin: 15px; background-color: #fff; padding: 15px; min-height: 140px;}
.box_article .box_img{flex-basis: 25%; margin-bottom: 0;}
.box_article .box_img img{display: block; margin: 0 auto;}
.box_article .desc p{flex-basis: 75%; color: #555;line-height: 1.4;}

/*contact*/
.contact_content{justify-content: center;}
.contact_content .headline{color: #00a7b0; flex-basis: 100%; margin-bottom: 50px;}
.contact_content .headline h1{font-family: 'Montserrat', sans-serif; font-weight: 900; margin-bottom: 15px;}
.contact_content .headline .tagline{text-align: center;}
.contact_content .form_contact{flex-basis: 60%;}
.form_contact input, .form_contact textarea{border: 1px solid #ddd; box-shadow: 1px 2px 1px #ccc;}

/*OBRIGADO / 404*/
.half-block{flex-basis: calc(50% - 30px); margin: 15px;}
#obrigado_404 .headline{padding-bottom: 50px; margin-bottom: 25px;}
#obrigado_404 img{display: inline-block; margin-right: 5px; top: 6px; position: relative;}
#obrigado_404 span {color: #fff; display: inline-block; margin-bottom: 5px;}

/*footer*/
.main_footer{padding: 25px 0 10px;}
.main_footer .main_footer_content{justify-content: space-between; align-items: flex-start}
.main_footer_content address, .main_footer_content p{color: #fff;}
.list_contato a{color: #fff;}
.list_contato a:hover{text-decoration: underline;}
.main_footer_content img{display: block; margin: 0 auto;}
.icon{padding:5px; background: no-repeat content-box center; background-size: 60%; width: 50px; height: 50px; border: 2px solid #fff; font-size: 0; display: block; margin: 0 auto;}
.icon-likedin{background-image: url(img/icon-likedin.png);}


/*MEDIA QUERIES*/
@media(max-width: 62em){
    .box_article{flex-basis: calc(100% - 30px); margin: 15px;}
    /*.contact_content .form_contact{flex-basis: 80%;}*/
}
@media(max-width: 48em){
    .main_header .logo{flex-basis: 100%; margin: 0 auto;}
    .main_header .logo h1{margin:0; max-width: 210px;}
    .main_header .nav_menu{display: block; position: fixed; top: 0; left: -100%; height: 100%; z-index: 99;}
    .btn-mobile{display: block; position: fixed;}
    .nav_menu .nav_menu_ul{text-align: left; padding: 15px 0; background-color: #333; max-width: 260px; width: 100%; position: fixed; height: 100%;}
    .nav_menu_ul li{display: block; margin-right: 0;}
    .nav_menu_ul a{font-size: 1.2em; display: block; background-color: rgba(0,0,0,.2); width: 100%; margin-bottom: 1px; padding: 15px; }
    .nav_menu_ul a:hover{background-color: rgba(0,0,0,.5);}

    /*header title*/
    .main_header_title h2{flex-basis: 100%; text-align: center; padding-right: 0;}

    /*button*/
    .button-footer .btn-white{margin: 0 auto 7px; display: block;}
    .button-footer span{text-align: center; padding-left: 0;}

    /*about*/
    .about .about_content{justify-content: flex-start}
    .about_content header, p{flex-basis: 100%; text-align: center;}

    /*solutions*/
    .solutions .solutions_content,
    .solutions .box_img{flex-basis: 100%;}
    .solutions_content .btn-color{margin: 0 auto;}

    /*cases*/
    .box_article,
    .box_article .box_img,
    .box_article .desc p{flex-basis: 100%; margin: 0 0 15px;}
    .contact_content .form_contact{flex-basis: 100%;}

    /*footer*/
    .main_footer_content div{flex-basis: 50%; margin-bottom: 15px;}
}

@media (max-width: 30em){
    /*header*/
    .main_header_title{padding: 100px 15px 150px;}
    .main_header_title h2{font-size: 2.5em;}
    .button-footer .btn-white{font-size: 1.2em;}

    /*obrigado / 404*/ 
    .half-block{flex-basis: calc(100%); margin:0 0 15px;}

    .main_footer_content address, .main_footer_content p{text-align: center;}
    .main_footer_content div{flex-basis: 100%; margin-bottom: 25px}

}