@font-face {
    font-family: 'BebasNeueRegular';
    src: url('/fonts/BebasNeueRegular.otf') format('opentype');
}

@font-face {
    font-family: 'Traditionell Sans';
    src: url('/fonts/TraditionellSansNormal.ttf') format('truetype');
}

body { font-family: 'Traditionell Sans'; font-size: 16px }

titulo { font-family: "BebasNeueRegular"; font-size: 50px; }
sub_titulo  { font-family: "BebasNeueRegular"; font-size: 35px; }
titulo:after, sub_titulo:after { content: " "; clear: right; display: block }

input { color: #000 }
input .placeholder { color: gray }
input[type=text], input[type=password], input[MultiLine] { width: 100%; }
input[type="checkbox"] { width: 18px; height: 18px; margin-top: 10px; margin-right: 10px }
input[type="radio"] { width: 18px; height: 18px; margin-top: 10px; margin-right: 10px; margin-left: 10px }

.asterisco:before { color: red; content: "*" }

#header { min-height: 40px; line-height: 2em; width: 100%; padding: 0 10px 0 10px; background-color: #000; color: #fff; font-size: 20px }
#corpo { width: 100%; max-width: 1152px; display: table; margin: 0 auto; margin-top: 90px }
#rodape { background-color: #000000 !important; color: #ffffff; width: 100%; height: auto; display: table; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 12px }
#rodape a, #rodape a:link, #rodape a:visited, #rodape a:active, #rodape a:hover { color: #fff; text-decoration: none }
#rodape .container { margin: 0 auto; padding: 0 }


#Button1, #Button_Ok, #Login1_LoginButton , #button_sair, #button_submit, #button_memorias { display: inline-block; background-color: #2c5f94; color: #fff; padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1.4285; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px }
#button_sair { background-color: silver; color: black }
#button_memorias { background-color: #31aa5b; color: #fff }
.botao_numero { width: 40px; margin-right: 5px; margin-bottom: 5px }

#formulario { background-color: #3e2f84; color: #fff; padding: 10px }

.container { width: 100%; max-width: 1152px; margin: 0 auto }

.categorias { background-color: #e0e0e0; margin: 0 }
.categorias ul { list-style: none outside none }
.categorias ul li a, .categorias ul li a:visited, .categorias ul li a:link, .categorias ul li a:active, .categorias ul li a:hover { text-decoration: none; color: #000; width: 100%; height: 40px }

.banda_azul { border-left: 10px solid #0884ce }
.banda_vermelha { border-left: 10px solid #d63135 }
.banda_verde { border-left: 10px solid #31aa5b; padding-bottom: 20px; margin-bottom: 20px }

.centrar { margin: 0 auto; width: 640px; }

.portfolio-item { margin-bottom: 25px }

.t_nome { font-size: 12px }

.navbar { border: none; border-radius:0; margin-bottom: 0 }


.navbar-default { background-color: #ffffff }
.navbar-default .navbar-brand, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover { color: #000 }
.title { height: 100px; color: #000 }
.title img { margin-top: 10px; margin-right: 20px; max-height: 80px }
.title a { margin-top: 25px; font-size: 36px; color: inherit; text-decoration: none }
.title_scroll { height: 50px }
.title_scroll  img { margin-top: 10px; margin-right: 10px; height: 35px }
.title_scroll a, .title_scroll a:link, .title_scroll a:visited, .title_scroll a:active, .title_scroll a:hover { margin-top: 0px; font-size: 18px; margin-left: 0px }
.intro-header { padding-top: 90px; }
.navbar-right { margin-right: inherit }

.botao_social { padding: 6px 4px 4px 6px; width: 25px; height: 25px; border-radius: 4px }
.botao_fb { background-color: #3b5998; color: #ffffff }
.botao_google { background-color: #dd4b39; color: #ffffff }

#lista { margin-bottom: 50px }
#lista img {object-fit: cover;}

#fundo { padding-top: 90px }

.fb { border:none; overflow:hidden; background: white; float:left; width: 100% !important; }

#counter { top: 250px; color: #fff; font-size: 48px; margin: 0 auto; position: absolute; z-index: 1000 }
#counter div { width: 150px; height: 100px; margin: 5px; background-color: #333333; opacity: 0.75; display: inline-block; text-align: center; vertical-align: middle-div }
#counter div em { font-size: 12px; display: block; }

div.outer-div { width: 300px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0 auto }
div.middle-div {  }

@media (max-width: 1152px) { .container {width: 100%}  }

@media (max-width: 767px) {
	.container {width: 100%}
	.navbar-default .navbar-brand, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover { font-size: 14px }
	.title { height: 50px }
	.title img { margin-right: 0px; height: 50px }
	.title a { margin-top: 0px; margin-left: 0px }
	.intro-header { padding-top: 50px; }
	.navbar-right { margin-right: 0; margin-bottom: 5px; }
	.portfolio-item { height: 200px }
	.portfolio-item h4 { font-size: 10px }
}

@media (max-width: 640px) {
	.title img { max-height: 30px }
	.title_scroll img { margin-top: 10px; margin-right: 0; max-height: 30px }
	.title_scroll a, .title_scroll a:link, .title_scroll a:visited, .title_scroll a:active, .title_scroll a:hover { font-size: inherit }
}

@media (max-width: 639px) {
	#counter { top: 100px; color: #fff; font-size: 24px; margin: 0 auto; position: absolute; z-index: 1000 }
	#counter div { width: 70px; height: 55px; margin: 5px; background-color: #333333; opacity: 0.7; display: inline-block; text-align: center; vertical-align: middle-div }
	#counter div em { font-size: 12px; display: block; }
	.centrar { width: 320px }
}

/* 360x640 */
@media (max-width: 360px) and (orientation: portrait) {
	.portfolio-item { height: 150px }
	.portfolio-item h4 { font-size: 12px }
}

@media (max-width: 640px) and (orientation: landscape) {
	.portfolio-item { height: 220px }
	.portfolio-item h4 { font-size: 12px }
}

/* 320x480 */
@media (max-width: 320px) and (orientation: portrait) {
	.navbar-default .navbar-brand, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover { font-size: 12px }
	.portfolio-item { height: 135px }
	.portfolio-item h4 { font-size: 12px }
}

@media (max-width: 480px) and (orientation: landscape) {
	.portfolio-item { height: 175px }
	.portfolio-item h4 { font-size: 12px }
}