/*=========== RESET ==========*/
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}


/*=========== FONTES SLM ==========*/
@font-face{font-family:Miriam; src:url("../fonts/MiriamLibre-Regular.ttf");}
@font-face{font-family:Miriams; src:url("../fonts/MiriamLibre-Bold.ttf");}
@font-face {font-family:Galada; src:url("../fonts/Galada-Regular.ttf");}
@font-face {font-family:Bree; src:url("../fonts/BreeSerif-Regular.ttf");}
@font-face {font-family:Paprika; src:url("../fonts/Paprika-Regular.ttf");}
@font-face {font-family:Roboto; src:url("../fonts/Roboto-Regular.ttf");}


/*=========== TOPO SLM ==========*/
#topo{float: right;}
#logo{float: left; margin-top: 10px; margin-left: 5px !important;}
#logo img {max-width: 70%;}

/*=========== BANNER SLM ==========*/
.back {background-size: 100% !important;} 
.back{height:630px; width: 100%; margin-bottom: 1%; background: url(../img/tabua-gd.jpg) no-repeat fixed ;	
  background-position:center;}

 .title h5 {padding: 5px; color: black; font-size: 0.9em; font-weight: 300; font-family:Bree; text-align: justify;}
.artigo {width: 98%; text-align: center; margin-bottom: 3px; font-family: Miriams;}

/*=========== RODAPÉ SLM ==========*/
.baixocinza{background-color: rgb(0,0,0, 0.6); text-shadow: #000 2px 2px 3px;}
footer {
	font-family: Miriam;
	align-items: center;
	bottom: 3px;
	color:white;
	display: flex;
	font-size: 0.8em;
	text-align: center;
	height: 50px;
	justify-content: center;
	position: fixed;
	width: 100%;
	z-index: 1;
}

/*=========== FONTES SLM ==========*/
.tx-vermelho {font-family:Miriams; color: white; background-color:#c80000; padding: 5px 3px 3px 10px; font-size: 1.3em; font-weight: 700;}
.tx-marron {color: #765600; font-size: 1em; font-weight: 700}
.tx-preto-menor{color: black; font-size: 0.9em; font-weight: 500;}
.tx-red {color: red; font-size: 1em; font-weight: 700; font-family:Miriams;} 
.tx-preto {color: black; font-size: 0.9em; font-weight: 300; font-family:Bree; text-align: justify; }
.tx-titulo{font-size: 1.2em; color:#e37000; font-weight: 700; font-family:Bree; text-align: center;}
.tx-laranja{font-size: 1.2em; color:#e37000; font-weight: 700; font-family:Bree; text-align: center;}

/*=========== CONTAINER ==========*/
.container {width: 100%; float: left; padding: 1.5% 2%; text-align: center;}

.img-margintop {margin-top: 2px;}

/*=========== HELPERS ==========*/
.radius {border-radius: 7px;}

/* MENU SLM*/
.menu {
	display:block;
	flex-direction:column;
	width: 100%;
	height:auto;
	padding: 2%;
	margin-left:-100%; 
	margin-top: 100px;
	position:absolute;
	background-color:white;
	transition: all 0.8s;
	align-items: center;
}


label {float: right; cursor: pointer;}
label img {margin-top: 3px; margin-right:5px;}

#bt-menu{display: none; background-color: white;}
#bt-menu:checked ~ .menu{margin-left: 0;}

/* MENU */


.menu ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 2%;}
.menu li a {font-family: Paprika; font-size: 1.1em; color:gray; padding: 1.3% 5%; font-weight: bolder;}
.menu li a:hover {width: 100%; border:1px solid #000000; color: #3e4095; background-color:#ffffff;}



/* BANNER */

.title {width: 100%; float: left;}
.title h1 {font-size: 1.3em; font-family: Paprika; color: #ffff00;}
.title h2 {font-size: 1.8em; font-family: Galada; color: #ffff00; text-shadow: #000 1px 2px 2px;}	
.title h3 {margin-left:1.5%; font-size: 1.1em;  color: #0005c9; font-family: Paprika; text-shadow: #000 1px 1px 1px;}
.title h4 {margin-bottom: 1.5%; padding: 1.5%;  font-size: 1em; color: white; font-family: Miriam; background-color: rgba(0, 5, 200, 0.4);}
.title h5 {padding: 5px; color: black; font-size: 0.9em; font-weight: 300; font-family:Bree; text-align: justify;}


/* SERVIÇOS */
.servicos {width: 100%;  text-align: left;  margin-bottom: 3%;}
.servico img {border-radius: 7px 7px 0 0;}
.inner {padding: 1%; margin-bottom: 10px; border-radius: 0 0 7px 7px; }
.inner a {font-family:Roboto; font-size: 1.3em; color: gray; font-weight: 500; }
.inner h4 {font-size: 1.2em; color: #130400; margin-top: 2%; font-family: Miriams; color: red; }
.inner p {margin-top: 6%; color: #130400; line-height: 1.5em;}


/* ========== MOBILE FIRST ==========*/

/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {
#logo img {max-width: 60% !important;}	
.servico {width: 49%; float: left; margin-bottom: 20px;}

.servico:nth-child(2){margin-right: 7px;}
.servico:nth-child(3){margin-right: 0;}

.servico:nth-child(4){margin-right: 7px;}
.servico:nth-child(5){margin-right: 0;}

.servico:nth-child(6){float: left; clear: both; margin-right:7px;}
.servico:nth-child(7){margin-right: 0;}




/* MEDIUM DEVICES - TABLETS & DESKTOPS*/
@media screen and (min-width: 960px) {


.servico:nth-child(1){margin-right: 1%;}
.servico:nth-child(2){margin-right: 1%;}
.servico:nth-child(3){margin-right: 1%;}
.servico:nth-child(4){margin-right:0;}

.servico:nth-child(5){margin-right: 1%;}
.servico:nth-child(6){margin-right: 1%; clear: none !important;}
.servico:nth-child(7){margin-right:0;}




#logo img {max-width: 70% !important; margin-left: 20px;}

/* MENU SLM*/
.btn-menu {display: none;}
.btn-close {display: none;}	
label{display: none;}

.menu {width:auto !important; height: auto !important; line-height: auto !important; float: right !important; background-color: white ; 
display: block !important; position: static; margin-right: 15px; border-radius: 8px; margin-top: 5px !important; padding:10px 30px 10px 30px;}

.menu li {padding: 3px; float: left;}
.menu li a {color: gray; font-size: 0.8em; padding: 10px; font-weight: 500;}
.menu li a:hover {border: none; text-decoration: underline;}

/* FIM MENU SLM*/


.title {width: 100%; float: left; text-align: left;}
.title h2 {font-size: 2.3em;}	
.title h3 {margin-left:1.5%; font-size: 1.2em;}
.title h4 {margin-bottom: 1.5%; padding: 1.5%;  font-size: 1.2em;}

.servico {width: 32%; }



}

footer {
	font-size: 1em;
}


/* LARGE DEVICES - WIDE SCREENS*/
@media screen and (min-width: 1280px) {

#logo img {max-width: 259px!important; margin-left: 40px;}

/* MENU SLM*/
.btn-menu {display: none;}
.btn-close {display: none;}	
label{display: none;}

.menu li {padding: 0; float: left;}
.menu {margin-right: 100px;}
.menu li a {font-size: 1em;}

/* FIM MENU SLM*/

.artigo h1{font-size:1.6em; color: red; font-weight: 700;}

.img-margintop {margin-top: 7px;}

}





/*=========== SLM ==========*/
#logo{margin-top: 20px; margin-left: 40px;}
#logo img {width: 100% !important;}

/*=========== RODAPÉ SLM ==========*/

footer {
	font-size: 1.2em;
}
.baixocinza{background-color: rgb(0,0,0, 0.6); text-shadow: #000 2px 2px 3px;}


}



}