/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', 'Poppins', sans-serif;
}
img, fieldset {
border: 0;
}
/* set html5 elements to block */
article, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
font-family: 'Barlow Semi Condensed', 'Poppins', sans-serif;
color: #242427;
text-align:justify;
background: #f2f2f4;
margin: 0 auto;
/*background-image: url("../../images/comuns/white-waves.jpg");*/
}
::-webkit-scrollbar-thumb:vertical {background-color: #3373ac; height:10px;}
::-webkit-scrollbar-thumb:horizontal { background-color: #3373ac; height:10px;}
::-webkit-scrollbar { height: 4px; width: 15px; background-color: #eeeeee;}
hr {
width: 90%;
border: 0 none #fff;
border-top: .5px solid rgba(51,115,172,0.6);
border-width: thin;
height: 1px;
margin: 10px auto;
display: block;
clear: both;
}
.borders{
width: 96%;
height: auto;
margin: 25px auto;
padding: 15px 10px;
border: .5px solid rgba(61,61,61,0.2);
border-width: thin;
/* rounded corner */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.onflex-r{
/* flexbox */
display: flex;
flex-wrap: wrap; /*nowrap*/
flex-direction: row;
justify-content: /*flex-start center space-around*/ space-between;
}
.onflex-w{
/* flexbox */
display: flex;
flex-wrap: wrap; /*nowrap*/
flex-direction: row;
justify-content: /*flex-start center space-between space-around*/ center;
}
.roll{
width: 100%;
height: 350px;
overflow: auto;
margin: 0px;
padding: 0px;
}
.half{
max-width: 60%;
margin: 0 auto;
padding: 0;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 100%;
margin: 0 auto;
padding:0;
}
/*************************************************************************************
CONTAINERS
**************************************************************************************/
#col-max{
clear: both;
width: 100%;
margin: 0 auto;
padding: 0;
}
.spitzel{
clear: both;
width: 100%;
max-width: 1280px;
margin: 0 auto 0 auto;
padding: 0 0;
overflow: hidden;
/*BOX-SHADOW*/
box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
/* rounded corner */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px
}
#container{
clear: both;
width: 100%;
height: auto;
margin: 0px auto;
padding: 0 0 40px 0;
overflow: hidden;
background: rgba(255,255,255,1);
}
/*************************************************************************************
HEADER
**************************************************************************************/
#header{
position: relative;
top: 0;
clear:both;
width: 100%;
height: auto;
margin: 0px auto;
padding: 0 0 15px 0;
z-index: 10000;
background: transparent;
/*box-shadow: 0px 0px 5px rgba(147,148,148,0.8);*/
}
#header-container{
width: 1280px;
height: auto;
margin: 0 auto;
padding: 0;
}
.slice-text-header{
width: 70%;
height: auto;
margin: 5% auto 0 auto;
padding: 0px;
}
.slice-text-header h1, h2, h3{
font-family: 'Barlow Semi Condensed', sans-serif;
}
.slice-text-header h1{
color: #3373ac;
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 4em;
font-weight: 500;
text-align: center;
letter-spacing: -1px;
line-height: 1em;
}
.slice-text-header h2{
color: #888;
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 2em;
font-weight: 400;
text-align: center;
letter-spacing: -1px;
line-height: 1em;
}
.slice-text-header h3{
color: #888;
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 2em;
font-weight: 300;
text-align: center;
letter-spacing: -1px;
line-height: 1.3em;
}
/************************************************************************************
MARCA
*************************************************************************************/
.marca{
width: 140px;
height: auto;
margin: 20px 0 0 0;
padding: 0px;
float: left;
position: relative;
}
.marca img{
width:100%;
height:auto;
-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,.2) );
filter: drop-shadow(2px 2px 1px rgba(0,0,0,.2) );
}
/*************************************************************************************
FATIAS
**************************************************************************************/
#slice{
width: 31.2%;
min-height: 10px;
margin: 10px 3px;
padding: 1px 6px;
overflow: hidden;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
}
#slice-1{
width:47.4%;
min-height: 10px;
margin: 10px 3px;
padding: 1px 6px;
overflow: hidden;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
}
#slice-2{
width:23%;
min-height: 10px;
margin: 10px 3px;
padding: 1px 6px;
overflow: hidden;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
}
#slice-3{
width:74%;
min-height: 10px;
margin: 10px 3px;
padding: 1px 6px;
overflow: hidden;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
}
.slice-container{
width: 95%;
min-height: 5px;
margin: 5px auto;
padding: 8px;
overflow: hidden;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
background:rgba(255,255,255,0.9);
/* rounded corner */
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
box-shadow: 0px 0px 5px rgba(147,148,148,0.8);
}
/*******************************************image */
.slice-image {
width: 100%;
height:auto;
margin:0 0 0 0;
padding:0;
float:left;
overflow:hidden;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
}
.slice-image img{
width: 100%;
height:100%;
margin:0;
overflow:hidden;
/* rounded corner */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.slice-image-ico {
width: 120px;
height:auto;
margin: 5px auto;
padding: 5px;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
}
.slice-image-ico img{
width: 100%;
height:100%;
margin:0;
overflow:hidden;
}
/*******************************************slice-text */
.slice-text{
width: 99%;
height: auto;
margin: 0 auto;
padding: 0px;
overflow: hidden;
}
.slice-text h1{
color: #0360A3;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
text-align: left;
letter-spacing: -1px;
line-height: 1em;
}
.slice-text h2{
color: #0360A3;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 2.1em;
font-weight: 600;
text-align: justify;
letter-spacing: -1px;
line-height: 1.1em;
}
.slice-text h3{
color: #555;
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1.6em;
font-weight: 400;
text-align: left;
letter-spacing: -1px;
line-height: 1.1em;
}
.slice-text p{
color: #666;
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 0px;
line-height: 1.3em;
}
.slice-text a {
color: #666;
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 400;
text-decoration: none;
}
.slice-text a:hover {
color: #0360A3;
text-decoration: none;
}
.slice-title{
clear: both;
width: 100%;
height: 110px;
margin: 0 auto;
padding: 10px 0 5px 0;
overflow: hidden;
}
.text-botton{
width: 100%;
height: 110px;
margin: 10px auto 15px auto;
padding: 5px 0;
overflow: hidden;
}
.slice-title-tag{
width: 100%;
height: auto;
margin: 0 auto;
padding: 10px 0 10px 0;
overflow: hidden;
background:#3373ac;
/* rounded corner */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/*************************************************************************************
LINK
**************************************************************************************/
a.link {
clear: both;
cursor: pointer;
color: #FFF;
display: block;
margin: 0px;
padding: 10px 15px 10px 25px;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1em;
text-decoration: none;
text-align: center;
float: right;
/*background*/
background-color: #0360A3;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
/* rounded corner*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: .5px solid #CCC;
border-width: thin;
}
a.link:hover{
/*color*/
color: #FFF;
/*background*/
background: #03548f;
border: .5px solid rgba(255,255,255,0.0);
border-width: thin;
}
/*************************************************************************************
LINK-2
**************************************************************************************/
a.link-2 {
width: 140px;
height: auto;
clear: both;
cursor: pointer;
color: #FFF;
display: block;
margin: 5px auto;
padding: 15px 25px;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1.15em;
text-decoration: none;
text-align: center;
float: none;
/*background*/
background-color: #0360A3;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
/* rounded corner*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: .5px solid #FFF;
border-width: thin;
}
a.link-2:hover{
/*color*/
color: #FFF;
/*background*/
background: #03548f;
border: .5px solid rgba(255,255,255,0.0);
border-width: thin;
}
/*************************************************************************************
BT SMART
**************************************************************************************/
a.smart-bt{
cursor: pointer;
color: #FFF;
display: block;
margin: 5px;
padding: 10px 15px;
font-size: 1.1em;
text-decoration: none;
text-transform: uppercase;
text-align: center;
float: left;
/*background*/
background-color: #14ba67;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
/* rounded corner*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
a.smart-bt:hover{
/*color*/
color: #FFF;
/*background*/
background-color: #119f58;
text-decoration: none;
}
/*************************************************************************************
FOOTER
**************************************************************************************/
#footer{
clear:both;
width: 100%;
height: auto;
padding: 0px ;
margin:0 auto;
/*border-top: .5px solid #101722;
border-width: thin;*/
}
#footer-container{
clear: both;
width: 100%;
max-width:1280px;
height:auto;
padding:20px 0;
margin:0 auto;;
}
#footer-slice{
width:24%;
height:auto;
margin:2px;
padding:0px;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
}
#footer-slice-2{
width:49%;
min-height: 2px;
margin:2px;
padding:0px;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
}
#feet_text{
width:98%;
min-height: 2px;
margin:2px auto;
padding:0px;
/*transition*/
-webkit-transition: width 0.7s;
-moz-transition: width 0.7s;
-ms-transition: width 0.7s;
-o-transition: width 0.7s;
transition: width 0.7s;
}
#feet_text h2{
color: #0360A3;
text-align: left;
margin: 0;
padding: 0px 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1.5em;
font-weight: 500;
line-height: 1em;
letter-spacing:0px;
text-decoration: none;
}
#feet_text p{
color: #999;
text-align: left;
margin:5px 0 0 0;
padding:5px 0 0 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1.2em;
font-weight: 400;
line-height: 1.4em;
letter-spacing:0px;
text-decoration: none;
}
#feet_text ul{
width: 100%;
margin: 5px auto 0 auto;
padding: 0;
text-align: left;
display: block;
/* rounded corner
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
float:none;
/* transition */
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
overflow:hidden;
}
#feet_text li{
text-align: left;
margin: 5px auto;
padding: 0;
display: block;
/* transition */
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
overflow:hidden;
}
#feet_text a{
color: #999;
text-align: left;
margin:5px 0 0 0;
padding:5px 0 0 0;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.4em;
letter-spacing:0px;
text-decoration: none;
}
#feet_text a:hover{
text-decoration:underline;
color: #3D86C6;
}
.feet_image{
width: 140px;
height: auto;
margin: 15px 0 0 15px;
padding: 0px;
float: left;
}
.feet_image img{
position: relative;
width: 100%;
height:100%;
overflow:hidden;
}
/************************************************************************************
EFEITOS
*************************************************************************************/
/*********CINZA*********/
.color_gray{
cursor:pointer;
-webkit-filter:grayscale(100%);
}
.color_gray:hover{
-webkit-filter:grayscale(0%);
transition: .3s;
}
/*********MASCARA*********/
.mascara {
cursor: pointer;
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.7);
/* rounded corner */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.mascara:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 1.3em;
font-weight: 300;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.text a{
font-family: 'Barlow Semi Condensed', sans-serif;
color: white;
text-decoration: none;
}
.bar{
width: 1px;
height: 15%;
margin: 5% 2%;
padding: 0;
text-align: center;
float: center;
/*background-image: url("../../images/comuns/barr.svg");*/
background-color: #3373ac;
}
/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }