/*=========== RESET ===========*/
*{marging:0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; font-family: 'Montserrat', sans-serif;}
body {background-color: #000;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
hr {align: left; height:2px; width: 100%; border:none; color:#fff; background-color:#fff; margin-top: 0px; margin-bottom: 10px;}

/*>> Top Video <<*/
.youtube {width: 100%; height: 0; padding-bottom: 50%; margin-left: -50%; position: relative;}
.youtube iframe {position: absolute; width: 100%; height: 100%;}

.container {width: 100%; float: left; padding: 3% 3% ; text-align: center;}

/*>> Cabeçalho <<*/
.logo {width: 250px; height: 56px; float: left; background: url(../img/logo.png) center center/250px no-repeat; font-size: 0;}
.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #fff; border-radius: 56px; cursor: pointer; background-color: #3E3E3E;}

/*>> MENU <<*/
.menu {display: none; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.85);top: 0; left: 0}
.menu ul{width: 100%; float: left; text-align: center;}
.menu li{padding: 1%;}
.menu li a{font-size: 1.5em; color: #fff; padding: 2% 2%}
.menu li a:hover {border: 1px solid #fff;}
.btn-close {font-size: 1.5em; color: #fff; float: right; cursor: pointer; margin:8% 5% 0 0;}
	
/*>> BANNER <<*/
.banner{height: 300px; background-position: center; background: url(../img/bg-mob.png) no-repeat center center fixed;}
.title {width: 80%}
.title li {font-size: 60%; text-align: left; margin-top: 0px;}
.title a {font-size: 1.2em; padding-right: 1em; line-height: 3em; text-shadow: 5px 5px 10px #000;color: #fff;}
.title a:hover {color: #B7B7B7}
.banner h2 {font-size: 2.8em; color: #252525; font-weight: 700}
.banner h3 {font-size: 1.5em; color: #252525;}

/*>> SOBRE <<*/
.cont-1 {width: 100%; height: 100%; background-color: #252525; text-align: center;border-radius: 7px; margin-bottom: 1%;}
.cont-1 img {border-radius: 7px 7px 0 0;}

/*>> SERVIÇOS <<*/
.servico {width: 100%; height: 100%; background-color: #252525; text-align: center;border-radius: 7px; margin-bottom: 3%;}
.servico img {border-radius: 7px 7px 0 0;}
.inner {padding: 5% 5%}
.inner a {font-size: 1.5em; color: #F1F1F1; margin-top: 1%;}
.inner h4 {font-size: 1.3em; color: #F1F1F1; margin-top: 1%; text-align: left;}
.inner h3 {font-size: 2.1em; color: #F1F1F1; margin-top: 1%; text-align: left;}
.inner p {font-size: 1.2em; margin-top: 1%; text-align: justify; color: #F1F1F1; line-height: 1.5em;}

/*>> FORMULÁRIO <<*/
.inner form {font-size: 1.2em; padding: 1%; text-align: justify; color: #F1F1F1; line-height: 1.5em;}
.inner form input{min-width: 80%; padding: 3px; border-radius: 3px; margin-top: 5px;}
.inner form textarea{min-width: 80%; padding: 4%}
.inner form .btn {background-color: #ACACAC; color: #000;min-width: 40%; cursor: pointer;}
.inner form .btn:hover {background-color: #E0E0E0;}

/*>> fotos <<*/
.foto1 img {width: 100%; padding:1% ;border-radius: 5% ;}
.foto2 img {width: 100%; padding:1% ;border-radius: 5% ;display: none;}

/*>> agenda <<*/
.agenda {text-align: left; font-size: 1.5em; color: #F1F1F1; margin-top: 1%;}
.agenda {padding: 5% 5%}
.agenda a {font-size: 1.3em; color: #F1F1F1; margin-top: 1%;}
.agenda p {font-size: 0.7em; text-align: left; color: #F1F1F1;margin-top: 0px}
.agenda h3 {font-size: 1.3em; color: #F1F1F1; margin-top: 1%; text-align: left;}
.cinza  {color:#5B5B5B}
.cinza p {color:#5B5B5B}

/*>> RODAPÉ <<*/
.social-icons {padding: 2%;}
.social-icons a {font-size: 3em; color: rgba(255,255,255,0.5); margin-right: 3%;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgb(255,255,255);}
.copyright {margin-top: 2%; color: #fff;}

/*>> Página Álbum <<*/

.album {width: 100%;height: auto;float: left; padding: 3% 3% ; text-align: center;}

/*>> MOBILE FIRST <<*/

/*>> Small <<*/
@media screen and (min-width: 440px) {
	.logo {width: 290px; background: url(../img/logo.png) center center/290px no-repeat;}
	.banner{background-position: center; background: url(../img/bg-440.png) no-repeat center center fixed;}

}
/*>> Medium <<*/
@media screen and (min-width: 600px) {
	.logo {width: 400px; background: url(../img/logo.png) center center/400px no-repeat;}
	.banner{background-position: center; background: url(../img/bg-440.png) no-repeat center center fixed;}
	.foto1{display: none}
	.foto2 img {width: 40%; display: inline}

}

/*>> Large <<*/
@media screen and (min-width: 1080px) {
	.banner{background-position: center; background: url(../img/bg2.jpg) no-repeat center center fixed;}
	.servico {width: 48%;  float:left; margin-right: 2%;}
	.servico:nth-child(2){margin-right: 0;}
	.btn-menu {display: none;}
	.btn-close {display: none;}
	.menu {width: auto; height: 56px; line-height: 56px; float: right; background-color: #000; display: block !important; position: static}
	.menu li {padding: 0; float: left;}
	.menu li a {color: #fff; font-size: 1.5em; padding: 17px;}
	.menu li a:hover {border: 1px solid #fff;}
	.foto1 {display: none}
	.foto2 img {width: 49%; display: inline;}
	.title li {font-size: 75%;}
	.banner {height: 400px;}
	

}