/* Clearfix */
.clearfix:before,.clearfix:after { 
    content: ""; 
    display: table; 
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
.clearfix { 
    zoom: 1.2;    
}

nav { 
    background: #000000; /* Cor de fundo da barra do MENU */
    margin: 0;
    padding: 0;
    height: auto;
	width: 100%;
    font-family:'Century Gothic', 'Calibri',  'Raleway', 'Tahoma', 'Arial', 'Helvetica', 'sans-serif';
	position: relative;
}

nav ul {
	padding: 5px 0px 5px 0px;
	margin: 0 auto;
	width: 790px; /* Tamanho total do  menu*/
	height: auto;
}
nav li { 
    display: inline;    
    float: left;
}
nav a {
	color: #ffffff;
	display: inline-block;
	width: 130px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	font-size: 1.2em;
}

nav li a {
	 box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
nav li:last-child a { border-right: 0; }
/* ---- Cor do fundo do link ---- */
nav a:hover, nav a:active {background-color: #C70039; text-decoration:none; border-radius:11px; -moz-border-radius:11px; -Webkit-border-radius:11px;}
nav a#pull { display: none; }

body {     
    background: #f1f1f1 url(images/fundo-i.png) repeat;
    font-size: 1.0em;
    margin: 0 auto;
    padding: 0px;    
    font-family: 'Century Gothic', 'Calibri',  'Raleway', 'Tahoma', 'Arial', 'Helvetica', 'sans-serif';
}

table, td {font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif'; }
textarea, option, select, input[type="text"] { 
    background-color:#ffffff; 
    margin-top: 5px; 
    font-size: 14pt; 
    color: #003399;  
    padding: 4px; 
    width: 100%;
    font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif';
    border: #c1bfbf solid 1px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -Webkit-border-radius: 5px;
}

html { 
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */    
}
.qdcentro { max-width: 900px; padding: 15px;}
.aredonda { border-radius: 20px; -Webkit-border-radius: 20px; }
.imgTela { max-width: 930px; width: 100%; margin: 0; padding: 0px;
        border:#c1bfbf solid 1px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        box-shadow: 0 2px 16px #ffffff, 0 2px 8px #404040;
}

.id_serv {
  font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif';
  color: #003399;
  text-shadow: 1px 1px 2px black;
  font-size: 1.3em;
}

a:link { color:#ffffff; text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:active { color:#ffffff; }
a:hover { color:#ffffff; text-decoration:none; }

.btWZap { background:#ffffff url('images/icon_whatsapp.png') no-repeat center; }
.btWZap2 { background:#ffffff url('images/icon_whatsapp1.png') no-repeat center; }
.btInstagram { background:#ffffff url('images/icon_instagran.png') no-repeat center; }
.btFacebook { background:#ffffff url('images/icon_facebook.png') no-repeat center; }
.btLinkedIn { background:#ffffff url('images/icon_linkedin.png') no-repeat center; }
.bteMail { background:#ffffff url('images/icon_mail.png') no-repeat center;}
.btMaps { background:#ffffff url('images/icon_google_maps.png') no-repeat center;}


.btc0 { background:#ffffff url('images/icon_casa.png') no-repeat 20px center; }
.btc0:hover {background:#DAF7A6 url('images/icon_casa.png') no-repeat 20px center;}
.btc1 { background:#ffffff url('images/icon_inicio.png') no-repeat 20px center; }
.btc1:hover {background:#DAF7A6 url('images/icon_inicio.png') no-repeat 20px center;}

.btCasa:visited {color:#000000; text-decoration:none;}
.btCasa:active  {color:#000000; text-decoration:none;}
.btCasa:link    {color:#000000; text-decoration:none;}
.btCasa:hover   {color:#000000; }
.btCasa {
   border: 1px solid #c6c6c6;	
   padding: 15px 30px 15px 30px;	
   border-radius: 3px;
   -moz-border-radius: 3px;
   -Webkit-border-radius: 3px;
   vertical-align: initial;
   box-shadow: inset 0 1px 5px #ffffff, 0 2px 16px #cccccc;	
}

.btCasa2:visited {color:#000000; text-decoration:none;}
.btCasa2:active {color:#000000; text-decoration:none;}
.btCasa2:link   {color:#000000; text-decoration:none;}
.btCasa2:hover {color:#000000; }
.btCasa2 {
   border: 1px solid #c6c6c6;	
   padding: 40px 50px 40px 50px;	
   border-radius: 20px;
   -moz-border-radius: 20px;
   -Webkit-border-radius: 20px;
   vertical-align: initial;
   margin-left: 5px;
   box-shadow: inset 0 1px 5px #ffffff, 0 2px 16px #cccccc;	
}


.bot {
    font-family: 'Century Gothic', 'Tahoma', 'Arial', 'Helvetica';
    font-size: 1.1em;
    margin-bottom: 10px;
    padding: 8px 12px;
    height: auto;
    border-radius: 3px;
    vertical-align: middle;

    /* Ícone + cor de fundo sempre presentes */
    background: #C70039;

    /* Cor padrão do texto */
    color: #ffffff;

    /* Borda padrão */
    border: #c6c6c6 solid 1px;

    /* Retira sublinhado */
    text-decoration: none;
}

/* Pseudo-classes com .bot */
.bot:link {
    color: #ffffff;
    text-decoration: none;
}

.bot:visited {
    color: #ffffff;
    text-decoration: none;
}

.bot:active {
    color: #ffffff;
}

/* Hover mantém o fundo e o ícone */
.bot:hover {
    background: #C70039;
    color: #ffffff;
    border: #666666 solid 1px;
    box-shadow: inset 0 1px 5px #ffffff, 0 2px 16px #cccccc;
}




.bt2,.bt2:link,.bt2:visited,.bt2:active {color: #000000; padding: 10px; float: right; border: #666666 solid 1px; background:#ffffff; font-size: 0.8em;}
.bt2:hover {    
     font-weight: normal;
     background: #DAF7A6;
     color: #000000;
     border: #666666 solid 1px;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -Webkit-border-radius: 10px;
     box-shadow:inset 0 4px 8px #ffffff, 0 4px 8px #cccccc;
}
 #linha1 {background-color: #ef3e36; width: 25%; height: 6px; float: left;}
 #linha2 {background-color: #abb92e; width: 25%; height: 6px; float: left;}
 #linha3 {background-color: #f57826; width: 25%; height: 6px; float: left;}
 #linha4 {background-color: #17b4e9; width: 25%; height: 6px; float: left;}
 
.bt3:hover {font-weight: bold; color: #000000;}
.bt3,.bt3:link,.bt3:visited,.bt3:active {color: #000000; height: auto;}
#barra1 {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    float: none;
    margin: 0 auto;
    display: block;
    font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif';
    font-size: 1.1em;    
}
#barra2 {
    background:#ffffff; 
    padding: 15px; 
    width: 400px; 
    height: 330px;
    float: left;
    margin-left: 20px; 
    margin-top: 20px; 
    border-radius: 10px;
    -moz-border-radius: 10px;
    -Webkit-border-radius: 10px;
    box-shadow: 0 2px 16px #ffffff, 0 2px 8px #404040;
}

#barra3 {
    width: 100%; 
    height: auto;
}

#ifotos {
       max-width: 900px;
       width: 95%;
       height: auto;
       margin-top: 10px;
       margin-bottom: 10px;
       padding: 15px;
       float: none;
       border-radius: 8px;
       text-align: left;
       font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif';
       font-size: 1.1em;
}

#Titulo-1 { 
        text-align: left; 
        color: #000000; 
        font-size: 1.2em; 
        font-family: 'Century Gothic', 'Tahoma', 'Arial';
}

#Titulo-2 { 
        text-align: left;
        padding: 5px;
        padding-left: 50px;
        color: #666666;
        font-size: 1.37em;
        font-family: 'Calibri', 'Tahoma','Arial';
        background:#ffffff url('images/image-2.png') no-repeat;
}

#quadro { 
        margin-top: 10px;
        background:#ffffff;
        width: 90%;
        max-width: 900px;
        font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif';
        font-size: 1.1em;
        color: #404040;
        text-align: justify;
        height: auto;
        padding: 15px;
        border: #c1bfbf solid 1px;
        border-radius: 20px;
        -moz-border-radius: 20px;
        -Webkit-border-radius: 20px;
        box-shadow: 0 2px 16px #ffffff, 0 2px 8px #404040;      
}

#qdicon:hover { 
    color: #000000; 
    background: #DAF7A6; 
    border: #c1bfbf solid 1px;
    box-shadow: inset 0 1px 1px #ffffff, 0 1px 1px #ffffff;    
}

#qdicon {
         padding: 6px;
         color: #000000;
         margin: 12px;         
         width: 120px;         
         height: 110px;
         float: left;         
         text-align: center;
         border-radius: 10px;
         -Webkit-border-radius: 10px;         
         border: #c1bfbf solid 1px;
         box-shadow: inset 0 3px 15px #ffffff, 0 12px 16px #cccccc;
}
#qd_servi { height: 230px; width: 100%; float: none; margin: 0 auto; display: block;}

.id_trab {
    height: 300px; 
    width: 100%; 
    background: #000000;
    font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif';
    font-size: 1.3em;
    color: #ffffff;        
    margin: 0 auto;    
    padding: 30px  0px 30px;
}

#rodape { 		
		width: 100%; 
		height: 80px;
		margin: 0 auto;
		margin-top: -400px;
        padding: 0px;
        font-family: 'Century Gothic', 'Tahoma', 'Verdana', 'Helvetica', 'sans-serif';
        font-size: 1.1em;
        color: #000000;        
/*
    background:#96a03d url(rodape.png) no-repeat;
    background-position: 100% 100%;
    background-size: 100% 100%; */
}

.img_rodape { 		
	width: 100%; 
	height: 430px;
	margin: 0 auto;		
	opacity: 0.3;
	padding: 0px;
	background: no-repeat center/100% url('images/img_adm.jpg');
	background-attachment: fixed;		
	background-position: center top;
}

#rodapeCasa {      
    padding: 15px;
    width: 80%;
    max-width: 80%;
    min-width: 80%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.deDrad{
    background: -moz-linear-gradient(360deg,#ffffff,#EEEEEE,#404040,#f1f1f1);
    background: -webkit-linear-gradient(360deg,#ffffff,#EEEEEE,#404040,#f1f1f1);
    background: linear-gradient(360deg,#ffffff,#EEEEEE,#404040,#f1f1f1);
}
/* 
   background: -moz-linear-gradient(360deg,#ffffff,#E0EEEE,#4585f3,#27408B);
   background: -webkit-linear-gradient(360deg,#ffffff,#E0EEEE,#4585f3,#27408B);
   background: linear-gradient(360deg,#ffffff,#E0EEEE,#4585f3,#27408B);
*/

.transbox {
    background-color: #ffffff;
    opacity: 0.6;
    filter: alpha(opacity=60);
    border-radius: 10px;
    -Webkit-border-radius: 10px;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 768px) {
	nav {height: auto; 	}
  	nav ul {width: 100%; display: block; height: auto; }
  	nav li {width: 48%;	float: left; position: relative; }
  	nav li a {font-size: 1.0em;} /* border-bottom: 1px solid #ffffff; border-right:  1px solid #ffffff; */
  	nav a {text-align: left; width: 100%; text-indent: 25px; } 
    .id_serv { font-size: 0.8em; }
    .img_rodape { background-color: #f1f1f1; background: #000000 ;}
    .id_trab { height: 350px; }
    #barra2 { max-width: 100%; width: 100%; margin: 0; padding: 3px;}
    #quadro { width: 95%; padding: 9px;}
    #ifotos { width: 95%; padding: 9px;}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width: 480px) {
	nav { border-bottom: 0;	}
	nav ul { display: none;	height: auto; }
	nav a#pull {
		display: block;
		background-color: #404040; /* Menu fundo barra celular */
		color: #ffffff;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: #404040 url('http://netbertolini.net/images/nav-icon.png') no-repeat;
		color: #ffffff;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;		
    } 
    .id_serv { font-size: 0.8em;}
    .img_rodape { background-color: #f1f1f1; background: #000000;}
    .id_trab {height: 350px;}
    #barra2 {max-width: 100%; width: 100%; height: auto; margin: 0; padding: 3px;}
    #quadro { width: 95%; padding: 9px;}
    #ifotos { width: 95%; padding: 9px;}
}

/*Smartphone*/
@media only screen and (max-width: 320px) {
	nav li { display: block; float: none; width: 100%;}
	nav li a {font-size: 1.1em;} /* border-bottom: 1px solid #ffffff; */ 
    body { background:#ffffff; font-size: 1.1em; margin: 0 auto; font-family:'Century Gothic', 'Calibri',  'Raleway', 'Tahoma', 'Arial', 'Helvetica', 'sans-serif';}
    .id_serv { font-size: 0.8em;}
    .img_rodape { background-color: #f1f1f1; background:#000000 ;}
    #qd_servi { height: 530px; width: 100%; float: none; margin: 0 auto; display: block;}
    .id_trab {height: 400px; }
    #barra2 {max-width: 100%; width: 100%; height: auto; margin: 0; padding: 3px;}
    #quadro { width: 95%; padding: 9px;}
    #ifotos { width: 95%; padding: 9px;}
}