/*=========== RESET ==========

a {text-decoration: none;}*/
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box;
font-family: 'Lato', sans-serif;}

body {background-color: #f5f5f5;}
ul {list-style: none;}
img {max-width: 100%;} 
html, body{margin: 0;padding: 0;height: 100%;text-align: center;}
section{min-height: 100%;}
a{text-decoration: none;}
li{list-style-type: none;}
h1, h2, h3, a{font-family: 'Lato', sans-serif;font-weight: 500;color:#494949;text-transform: uppercase;}
h2{color:#5d7177;}
h3{font-size:40px;padding-top: 8%; margin-bottom: 5px;}
h4, p{font-family: 'Lato', serif;color:#494949;font-weight: bold;}
hr{width: 30px;height: 3px;background:#494949;border: 0;margin: 0 auto 40px auto;}
#logo, li, img .button{transition: all 300ms; -webkit-transition: all 300ms;-moz-transition: all 300ms;-o-transition: all 300ms;}

/*=========== CONTAINER ==========*/
.container {width: 100%; float: left; padding: 3% 4%; text-align: center;}
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#a0a9ae,#243b64);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
/*=========== HELPERS ==========*/
.radius {border-radius: 7px;}
/* CABEÇALHO */
.logo {width: 56px; height: 56px; float: left; background: url(../img/logo-mobile.png) center center/56px no-repeat;
font-size: 0;}
.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #000; border-radius:56px; cursor: pointer;}
/* MENU */
.menu {display:none; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.9); top: 0; left: 0;}
.btn-close {font-size: 1.5em; color: #fff; float: right; cursor: pointer; margin: 2% 3% 0 0;}
.menu ul {width: 100%; float: right; text-align: center;}
.menu li {padding: 1.5%;}
.menu li a {font-size: 2em; color: #fff; padding: 1.5% 3%;}
.menu li a:hover {border:1px solid #da6709;}
/* HOME */
#home {background-image: url(../img/landing.png);background-position:center center;background-size:cover;background-attachment:fixed;}
#home h1{margin: 240px auto 0 auto;font-size:25px;}
#home h2{margin:0 auto 0 auto;font-size:25px;}
#home img{width: 32px;margin-top:150px;opacity: 0.7;}
#home img:hover {opacity:1;}
/* SOBRE */
#about img{width:240px;}
#about img:hover {transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);}
#about h4 {font-size: 25px;}
#about p{width:700px;margin: 0 auto 0 auto;}
/* SERVIÇOS */
#projects{width:1200px;margin: 0 auto 0 auto;}
#projects ul{padding:0;}
#projects ul li{width:33.3%; float:left;margin-bottom:15px;}
#projects iframe{width:280px;height:170px;border-radius:5px;}
#projects iframe:hover{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0 5px 5px rgba(0, 0, 0, 0.3);}
/* CONTATO */
form input, textarea{font-family: 'Lato', serif;font-size: 15px;margin-bottom:10px; border-radius:2px; border: 2px solid; border-color: #494949;outline: none;}
form input:first-child{margin-top: 10px;}
form input{width: 552px;height:30px; }
form textarea{width:550px;height:200px; resize:none;}
.input_text{color:#494949;padding-left:10px}
::-webkit-input-placeholder {color:#999999;}
::-moz-placeholder {color:#999999;}
:-ms-input-placeholder{color:#999999;}
:-moz-placeholder{color:#999999;}
.button{background-color:#f0f0f0;color:#494949;width: 566px;height: 50px;}
.button:hover{background-color:#494949;color:#f0f0f0;}
/* NEWSLETTER */
.newsletter h2 {font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h3 {color: #fff;}
.newsletter form {margin-top: 2%;}
.newsletter input {width: 100%;  color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 5%; }
.newsletter button {width: 100%;  color:#130400; padding: 5%; cursor: pointer; margin-top: 2%; }
/* RODAPÉ */
.social-icons a {font-size: 1.5em; color: rgba(255,255,255,0.7); margin-right: 3%;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgb(255,255,255);}
.copyright {color: rgba(255, 255, 255, 0.7); margin-top:2%;}
/* ========== MOBILE FIRST ==========*/
/* 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;}
#home h1{font-size: 60px; margin-top: 200px;}
#home h2{width: 70%; height:auto;}
#projects img{width:70%;}
form input, form textarea{width:70%;}
.button{width: 72%;}

}
/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {
.servico {width: 49%; float: left; margin-right: 2%;}
.servico:nth-child(2){margin-right: 0;}
.newsletter h2 {font-size: 2em;}
.newsletter h3 {font-size: 1.5em;}
.newsletter input {width: 70%; padding: 2%; float: left; margin-right: 1%;}
.newsletter button {width: 29%; padding: 2%; float: right; margin-top: 0;}
}
/* MEDIUM DEVICES - TABLETS & DESKTOPS*/
@media screen and (min-width: 960px) {
.title {width: 70%; float: left; text-align: left;}
.title h2 {font-size: 3em;}
.title h3 {font-size: 2em;}
.buttons {width: 30%; float: right; margin-top: 0;}
.servico {width: 32%;}
.servico:nth-child(2){margin-right: 2%;}
.servico:nth-child(3){margin-right: 0;}
.newsletter input {width: 60%; float: none;}
.newsletter button {width: 20%; float: none;}
}
/* 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: #f5f5f5; 
display: block !important; position: static;}
.menu li {padding: 0; float: left;}
.menu li a {color:#130400; font-size: 1em; padding: 15px;}
.menu li a:hover {border: none; color:#da6709; }
}
/* 1024 */
@media screen and (max-width:1024px){
	header{height: auto;}
	#logo{width: 100px;margin-top: 5px;}
	header nav{margin-top: 0;}
	header nav ul li{font-size: 12px;}
	#home h1{font-size: 90px; margin-top:200px; }
	#home h2{font-size: 22px;}
	h3{padding-top: 12%;}
	#about p {width: 80%;margin: 0 auto 0 auto;}
	#projects{width: auto;}
	#projects ul li{width: 100%; float: none;}
	#projects ul li:last-child{padding-bottom: 20%}
	#projects img{width: 55%;height:auto;}
	form input, form textarea{width:60%;}
	.button{width:62%;}
}
.faleconosco p {
	color:white;
	text-align: right;
	margin-left:2%;
	font-family: 'Lato', sans-serif;
}
.faleconosco2 p {
	color:white;
text-align: right;
	margin-left:2%;	
	font-family: 'Lato', sans-serif;
}