/*=========== RESET ==========*/
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box;
font-family: 'Patua One', cursive;}
body {background-color:white;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}


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

#topo{float: right;}

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

/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#ce2e3c,#da6709);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}

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


/* MENU */
.menu {
	display:block;
	flex-direction:column;
	width: 100%;
	height:auto;
	margin-left:-100%; 
	margin-top: 140px;
	position:absolute;
	background-color: rgb(12, 125, 35, 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: 1.2%;}
.menu li a {font-size: 1.3em; color: #fff; padding: 1.5% 12%;}
.menu li a:hover {width: 100%; border:1px solid #da6709; color: #0c7d23; background-color: #ff7200;}

}


/* SERVIÇOS */

.servico {width: 100%;  text-align: left;  margin-bottom: 5%;}
.servico img {border-radius: 7px;}
.inner {padding: 4%;}
.inner a {font-size: 1.3em; color:  #ee7723; font-weight: 300;}
.inner h2 {color: red; margin-bottom: 8px;} 
.inner h3{font-size: 1em; color: #7d3e00; font-weight: 300; margin: 0;}
.inner h4 {font-size: 1.1em; color: #0c7d23; margin-top: 0.5%; font-weight: 300; }
.inner p {margin-top: 1.2%; margin-bottom: 15px; color: #130400; line-height: 1.2em;}


.titulo {font-size: 1.2em; color:  #red; font-weight: 300;}
.tx-descr{font-size: 0.8em; color: black; font-weight: 300; margin: 0;}





/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
.logo {width: 214px; background: url(../img/logo.png) center center/214px no-repeat;}
.btn {font-size: 2em;}
}



/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {
.servico {width: 49%; float: left; margin-right: 1.5%;}
}



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

label{display: none;}
#logo{float: left; margin-top: 10px; margin-left: 80px;}

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

.menu {float: right; width: 100%; height: auto; line-height: 56px; float: right; background-color: #0c7d23; 
display: block !important; position: static; margin-top: 40px; 	margin-left:0; margin-right: 20px; }

.menu li {padding: 0; float: left;}
.menu li a {color:white; font-size: 1em; padding: 15px; font-weight: 300;margin-left: 10px; }
.menu li a:hover {border: none; color:#ee7723; }

.servico {width: 31%; margin-right: 1.5%; margin-bottom: 2%;} 
}


/* LARGE DEVICES - WIDE SCREENS*/
@media screen and (min-width: 1280px) {
.btn-menu {display: none;}
.btn-close {display: none;}
.menu {width: auto; height: 56px; line-height: 56px; float: right; background-color: #0c7d23; 
display: block !important; position: static; margin-right: 50px;}
.menu li {padding: 0; float: left;}
.menu li a {color:white; font-size: 1em; padding: 15px; font-weight: 300 }
.menu li a:hover {border: none; color:#0c7d23; background-color: #ff7200; }

.servico {margin-bottom: 3%;} 
}