/*
 *
 */

html { background-color: white;  /*letter-spacing: 0.12em;*/ height:100%; width:100%; }
body { text-align: center; min-height:100%; min-width:100%; overflow-y: auto; color:black; font-weight: 400; }

body, h1, h2, h3, h4, h5 { font-family: 'Quattrocento Sans', sans-serif; }
strong, b, [bold], h1, h2, h3, h4, h5{font-weight: 700;}
div, span, ul, li, a, canvas, figure { cursor: default; position:relative; display:inline-block; }
p{ letter-spacing: 0em; }
header, footer { position:relative; display:block; }
a { cursor: pointer; color: black; text-decoration:underline; }

label { padding: 5px 0 2px 0;}
input{height: 25px; font-size: 1em;  padding-top: 0; padding-bottom: 0; }
input, textarea, select{color:black; border: solid 1px black; padding-left: 1em; font-family: 'Quattrocento Sans', sans-serif; letter-spacing: 0.12em; font-weight: 400; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
input[type="file"]{ padding-left:0; }
input:focus,
textarea:focus { outline: none; }

/*
 * ScrollBar
 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.1); border-left: solid black 0px; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border: solid black 0px; width: 60%; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.4); }


/*
 * Placeholder
 */
::-webkit-input-placeholder { color: black; }
:-moz-placeholder { color: black; }
::-moz-placeholder { color: black; }
:-ms-input-placeholder { color: black; }

/*
 * jQueryUI
 */
.ui-widget{ font-family: 'Quattrocento Sans', sans-serif; font-size: 1em; }


/*
 * Página
 */
body { /*background-image: url('../img/bg.jpg');*/ background-repeat: repeat; font: 13px/1.4em 'Droid Sans', sans-serif; }
[largura] { width: 95%; max-width: 940px; margin-left: auto; margin-right: auto; }

/*
 * Cabeçalho
 */
body > header { text-align: left; display: flex; justify-content: space-between; margin: 2em auto 3em auto;}
body > header > img { width: 80px; height: 80px; }
body > header > nav { display: flex; align-self: flex-end;}
body > header > nav > a { margin: 0 0; text-decoration:none; }
body > header > nav > a:hover{ /*background-color: #1335A0;*/ color:#1335A0; }
body > header > nav > a.selecionado { text-decoration:underline; }

@media only screen and (min-width :  700px) {
	body > header > nav > span{ display: inline-block; margin: 0 1em; }
	body > header > nav > a:not(:first-of-type):hover:before{ color: black; }
}
@media only screen and (max-width :  700px) {
	body > header > nav > span { display: none; }
	body > header > nav { flex-direction: column; text-align:right; align-self: flex-start; }
	body > header > img { width: 8em; height: 8em; }
}

/*
 * Secao principal
 */
section { text-align: left; background-color: #F1F4F5; min-height: 60em; padding-bottom: 1em;}
section > figure{ margin: 0; line-height: 1em; }
section > figure img{ width: 100%; margin: 0;}
section > figure figcaption{ position: absolute; bottom:1.5em; left: 1.5em; color: white; font-size: 3em; font-weight: bold; text-shadow: 0 0 5px #000; }
section > div { margin: 2em; display: block; }
section p { line-height: 1.6em; margin: 1em 0; }
section ul { line-height: 1.6em; margin: 1em 0; }
section ul[numerada] {  }
section ul li { display: list-item; margin-left: 2em;}
section h1 { font: 26px/100% 'Abel', sans-serif; color: #004079; margin: 0em 0 0.5em 0; }
section h2 { font-size: 1.1em;  }

section nav { display: flex; justify-content: space-between; margin: 2em; padding: 0 2em; background-color: white; border: solid black; border-width: 0em 0; }
section nav > a { margin: 0 auto; padding: 0.5em 0; text-decoration:none; text-align:center; }
section nav > a:hover{ color:#1335A0; }

[colunas] { display: flex; justify-content: space-between;}
[colunas] > * { text-align: justify; margin: 0 1em;}
[colunas] > *:first-of-type{ margin-left: 0;}
[colunas] > *:last-of-type{ margin-right: 0;}

.tel-email { max-width: 500px; margin: 0 auto 2em 0; display: flex; }
.tel-email > div { padding: 0 2em 2em 1.3em;  }
.tel-email ul { font-size: 1.2em; }
.tel-email li { margin: 1em 0; }
    

.formulario{ display: block; text-align: center; margin: 0 0 2em 1em; width: 100%; background-color: white; padding: 2em; }
.formulario > * { display: block; text-align:left; width: 100%; margin: auto;}
.formulario > div { display: block; text-align:left;  }
.formulario label { line-height: 2em; font-size: 1.1em; }
.formulario input,
.formulario textarea{ font-size: 1.2em; height: 1.7em; line-height: 1.6em; background-color: #F1F4F5; border-color: #D5D5D5; margin-bottom: 1em;}
.formulario textarea{ height: 5em; }
div[send-button-wrapper]{ text-align:right; }
.formulario div.botao{ background-color: #0B5782; border: 3px solid #0B5782;  cursor: pointer; color: white; display: inline-block; padding: 0.8em 2em; width: initial; font-weight: bold; margin-top: 1em; text-align:center;}
.formulario div.botao p { text-align:center; display: inline-block; margin: 0 0.5em;}
.formulario .botao[status="enviando"]{ background-color: transparent; color: #0B5782; }
.formulario .botao[status="erro"]{ background-color: #C12121; border-color: #C12121; color: white; }
.formulario .botao[status="sucesso"]{ background-color: transparent; color: #0B5782; }

@media only screen and (max-width :  700px) {
 #contato [colunas] { display: block; }
 .tel-email { display: block; width: auto; padding: 0; margin: 0; }
 .tel-email > div{ padding: 0; margin: 0; }
 .formulario { display: block; width: auto; margin: 0; }
}


#trabalhos nav { display: inline-block; max-width: 20%; margin: auto 0 auto 0; padding: 2em 1em;}
#trabalhos nav a{ display: block; }
#trabalhos nav a.selecionado { text-decoration: underline; }

mapa { width: 100%; max-width:600px; margin: 0 auto auto auto !important; text-align:center; position: relative; display: block; }
mapa img{ width: 100%; }
mapa marcacao{ position: absolute; background-color: white; border: solid black 2px; padding: 1em 1.5em; z-index: 20;}
mapa marcacao h1{ font-size: 1.3em; }
mapa [pin]{ cursor: pointer; position: absolute; margin-left: -0.25em; font-size:1.6em; z-index: 10;}



body > footer { color: #777; display: flex; justify-content: space-between; margin-top: 0.4em; padding: 0 0 3em 0;}
body > footer a { color: #777; }

imgdoc{ font-weight: bold; text-decoration: underline; }