/*=========== 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%;}


    @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");}



/*=========== Inicio ==========*/
#logo{float: left; margin-top: 10px; margin-left: 2px;}

#topo{float: right;}

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

/*=========== BG COLORS ==========*/



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


/* MENU */
.menu {
	display:block;
	flex-direction:column;
	width: 100%;
	height:auto;
	padding: 3%;
	margin-left:-100%; 
	margin-top: 70px;
	position:absolute;
	background-color: rgb(81, 81, 81, 0.8);
	transition: all 0.8s;
}

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 ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 2%;}
.menu li a {font-size: 1em; color: #ffcd00; padding: 1.3% 4%; font-family: Miriam ; }
.menu li a:hover {width: 100%; border:1px solid #000000; color: #3e4095; background-color:#ffcd00;}
}


/* BANNER */
.banner {width: 100%; float: left; padding: 1% 1.5%; text-align: center;}

.back{width: 100%; margin-bottom: 1.5%; height:auto;}

.fleft{clear: both; color: black; font-size: 1em; text-align: left; font-weight: 300; font-family:Bree;}

  

.title {width: 100%;}
.title h1 {font-size: 1.3em; font-family: Paprika; color: #ffff00;}
.title h2 {font-size: 1.8em; font-family: Galada; color: #0c7d23;}
.title h2 {margin-left:1.5%;font-family: Galada; font-size: 3em; color: #038300; font-weight: 700;}
.title h3 {margin-left:1.5%; font-size: 1.5em; color: #4a4a4a; font-family: Miriam; text-shadow: #fff 1px 1px 1px;}
.title h4 {margin-bottom: 1.5%; padding: 1.5%;  font-size: 1em; color: black; font-family: Miriam; background-color: rgb(244, 244, 244, 0.6); }

.buttons {width: 100%; margin-top: 2%;}
.buttons i {float: right;}
.btn {width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%; }
.btn-cadastrar { color: #130400;}
.btn-sobre {color:#fff ; margin-top: 2%;}


/* SERVIÇOS */
.servicos {width: 100%;  text-align: left;  margin-bottom: 2%;}
.servico img {border-radius: 7px; max-width: 100%; margin-bottom: 10px;}
.inner {padding: 3%;}
.inner a {font-size: 1.3em; color:#765600; font-weight: 700; font-family:Bree;}
.inner h3{font-size: 1em; font-weight: 300; margin: 0;}
.inner h4 {font-size: 1.2em; margin-top: 0.5%; font-family:Galada; color: black; font-weight: 400; line-height: 1em;}
.inner p {margin-top: 2%; font-family:Miriam; }

.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: 300; font-family:Miriam; } 
.tx-preto {clear: both; color: black; font-size: 0.8em; text-align: left; font-weight: 300; font-family:Bree; }
.tx-titulo {font-size: 1.8em; color:#765600; font-weight: 700; font-family:Bree;}
.descr p {clear: both;}

#linha {width: 100%; border-bottom: 1px dotted black;}

.artigo{width: 100%; text-align: left; margin-bottom: 1.5%; }
.artigo img{border-radius: 7px; max-width: 100%; margin-bottom: 20px;}



.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;
}

/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {

.servico {width: 49%; float: left !important; margin-right: 5px;}
.servico:nth-child(2){margin-right: 0;}
.servico:nth-child(3){clear: both; margin-right: 5px;}

#logo{float: left; margin-top: 5px; margin-left: 10px !important;}
#logo img {max-width: 50%;}
.tx-red {font-size: 1.2em; font-weight: bold;} 

.btn-menu {display: none;}
.btn-close {display: none;}	
label{display: none;}

.back {background-size: 100% !important;} 

.back{height:450px;}

.back{width: 100%; margin-bottom: 10px; background: url(../img/garnie-gd2.jpg) no-repeat fixed ; height: 600px;
  background-position:center; text-shadow: #000 1px 1px 1px;}

.title {float: left !important;}
.title h1 {font-size: 3em; font-family: Paprika; color: #ffff00;}
.title h2 {font-size: 3em; font-family: Galada; color: #0c7d23;}
.title h3 {font-size: 2em; font-weight: 700; }
.title h4 {font-size: 1.8em;}
h5 {clear: both ! important; float: left; color: black; font-size: 0.9em; font-weight: 300; font-family:Bree;}

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

.menu li {padding: 3px; float: left;}
.menu li a {color: #ececec; font-size: 0.7em; padding: 7px; font-weight: 700 }
.menu li a:hover {border: none; color:#ffcc00; background-color:#818181; }

.inner {float: left !important; width: 100%, padding: 1%;}
.inner a {font-size: 1.5em;}

.artigo{float: left; width: 49%; text-align: left; margin-bottom: 1%; margin-left: 20px; margin-right: 10px; }
}

footer{font-size: 1em;}



/* MEDIO DEVICES - WIDE SCREENS*/
@media screen and (min-width: 960px) {
.servico {width: 32%; }
.servico:nth-child(2){margin-right: 2%;}
.servico:nth-child(3){clear: none; margin-right: 0;}
.menu {margin-right: 20px;}	
.menu li a {font-size: 0.9em;}
#logo img{max-width: 80%; margin-left: 3px;}

}	


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

.servico {width: 31%; float:left; margin-left: 15px; margin-right: 15px;}

.menu {width:500px; float: right !important; display: block !important; position: static; margin-right: 80px !important; border-radius: 8px; margin-top: 20px;}
.menu li a {font-size: 1.2em;}


#logo{margin-top: 20px; margin-left: 50px !important;}

#logo img{max-width: 100% !important;}


.topocinza{width: 100%; height: 120px; background-color: rgba(0,0,0, 0.6);}
.baixocinza{background-color: rgb(0,0,0, 0.6); text-shadow: #000 2px 2px 3px;}


}