*{margin:0; padding:0; border:0; text-decoration:none;}

input[type='submit'], input[type='reset'], button[type='submit'], button[type='reset'], [onClick], li{cursor:pointer; outline:none;}

header, nav, section, article, footer, aside{ display:block; position:relative; }

/* h1, h2, h3, h4, h5, h6, h7, p, span{ cursor:default; } */

::-webkit-scrollbar {background:white; width:0.9rem; border-radius:0.5rem; z-index:50; position:relative;}
::-moz-scrollbar {background:white; width:0.9rem; border-radius:0.5rem; z-index:50; position:relative;}
::-webkit-scrollbar-thumb {background:black;} 
::-moz-scrollbar-thumb {background:black;} 
::-webkit-scrollbar-track {background:rgba(0,0,0,0.3);} 
::-moz-scrollbar-track {background:rgba(0,0,0,0.3);} 

.up{ cursor:pointer; position:fixed; bottom:0.5rem; right:1.5rem; z-index:9999; width:6rem; height:6rem; text-align:center; border-radius:50% 50% 0; background:black; display:none;}
.up:before{ font:lighter 2.5rem/6rem 'FontAwesome'; text-align:center; content:'\f102'; color:white; }
.up:hover:before{ color:grey; }

html{ font-size: 62.5% !important; } 
body{ background:black; }
header{ background:floralWhite; padding-bottom:2%; }
section{ width:95%; border-radius:1rem 1rem 0.5rem 0.5rem; margin:0 auto; background:white; }
footer{ background:white; }

#dots{ position:absolute; z-index:900; width:100%; height:100%; opacity:1; top:0; overflow:hidden; background:url(../banner/dots4.png); } 
#dots2{ position:absolute; z-index:900; width:100%; height:100%; opacity:1; top:0; overflow:hidden; background:url(../banner/dots7.png); } 
#banner{ position:fixed; z-index:-10; right:0; top:0; overflow:hidden; }

#layout{ width:80%; margin:0 auto; overflow:hidden; }

#layout  img{ margin:0 auto; display:block; padding:3% 0 1% 0; max-width:400px; }

#layout .logo{ padding:3% 0 1% 0; margin:0 auto; }
#layout .logo h2{ font:300 5rem 'Oswald', sans-serif; text-align:center; top:-4rem; position:relative; }
#layout .logo h2:before{ content:url(../imagem/logo.png); top:4rem; position:relative;  } 
#layout h1{ font:300 5rem 'Oswald', sans-serif; color:#333333; text-align:center; text-transform:uppercase; letter-spacing:-0.1rem; }
#layout p{ font:400 1.5em 'Archivo Narrow', sans-serif; color:grey; text-transform:uppercase; text-align:center; }

#slogan { position:relative; width:80%; margin:9% auto; text-align:center; color:floralWhite; text-transform:uppercase; letter-spacing:-0.1rem; }
#sloganH h1{ width:100%; font:300 5rem/5rem 'Poiret One', cursive; padding:0 3rem; }
#sloganH h1 p{ font:300 3rem 'Dosis', sans-serif; }

#layout2{ width:95%; margin:0 auto; overflow:hidden; }
#layout2 .l2{ width:calc(100% / 3 - 2%); margin:3% 1% 0; float:left; position:relative; text-align:center; }
#layout2 .l2 img{ position:absolute; width:100%; height:auto; left:0; }

#layout2 .l2 .l2a{ position:relative; width:13rem; height:13rem; border-radius:50%; background:#e8a921; color:floralWhite; text-align:center; margin:6rem auto 2rem; }
#layout2 .l2:nth-child(1) .l2a:before{ content:'\f133'; font:normal 7rem/13rem 'FontAwesome'; position:relative; }
#layout2 .l2:nth-child(2) .l2a:before{ content:'\f07c'; font:normal 7rem/13rem 'FontAwesome'; position:relative; }
#layout2 .l2:nth-child(3) .l2a:before{ content:'\f0f6'; font:normal 7rem/13rem 'FontAwesome'; position:relative; }

#layout2 .l2 h2{ font:400 3rem 'Fjalla One', sans-serif; color:#333333; padding-bottom:1rem; border-bottom:lightGrey dotted 0.1rem; text-transform:uppercase; }
#layout2 .l2 h2 span{ font:300 2rem 'Oswald', sans-serif; display:block; }
#layout2 .l2 p{ font:400 1.5em 'Archivo Narrow', sans-serif; color:#333333; text-transform:uppercase; padding:1rem; }

#layout2 a{ font:400 1.5em/3rem 'Archivo Narrow', sans-serif; text-transform:uppercase; color:#333333; padding:0.3rem 0; border-bottom:dotted lightGrey 0.1rem; }
#layout2 a:hover{ color:#CC0000; }

button[name='bl2']{ -webkit-transition:all ease-out 250ms; -moz-transition:all ease-out 250ms; -ms-transition:all ease-out 250ms; -o-transition:all ease-out 250ms; }
button[name='bl2']{ cursor:pointer; padding:1.5rem 3em; margin:3rem auto; border-radius:0.3rem; background:#CC0000; color:white; font:300 1.4rem 'Oswald', sans-serif; text-align:center; text-transform:uppercase; outline:none; display:block; }
button[name='bl2']:hover{ background:#333333; }

#layout2 .caixa{ width:15%; padding:1rem 0; margin-right:1rem; font:300 5rem 'Oswald', sans-serif; text-align:center; color:white; background:dimGray; float:left; position:relative;  }
#layout2 .caixa:before{ content:'\f0da'; font:normal 4.5rem 'FontAwesome'; top:0.5rem; right:-1.2rem; color:dimGray; position:absolute; } 
#layout2 .l2 h6{ font:400 3rem 'Fjalla One', sans-serif; color:#333333; text-transform:uppercase; text-align:left; }
#layout2 .l2 h6 span{ font:300 2rem 'Oswald', sans-serif; display:block; } 

/* #layout2x{ width:95%; margin:0 auto; overflow:hidden; }
#layout2x .l2x{ width:calc(100% / 3 - 2%); margin:0 1%; float:left; position:relative }

#layout2x .caixa{ width:15%; padding:1rem 0; margin-right:1rem; font:300 5rem 'Oswald', sans-serif; text-align:center; color:white; background:dimGray; float:left; position:relative;  }
#layout2x .caixa:before{ content:'\f0da'; font:normal 4.5rem 'FontAwesome'; top:0.5rem; right:-1.2rem; color:dimGray; position:absolute; } 
#layout2x .l2x h6{ font:400 3rem 'Fjalla One', sans-serif; color:#333333; text-transform:uppercase; text-align:left; }
#layout2x .l2x h6 span{ font:300 2rem 'Oswald', sans-serif; display:block; } */

#layout3{ width:95%; margin:0 auto; overflow:hidden; }
#layout3 h3{ font:400 3rem 'Fjalla One', sans-serif; color:#333333; padding-bottom:1rem; border-bottom:lightGrey dotted 0.1rem; text-transform:uppercase; }
#layout3 h3 span{ font:300 2rem 'Oswald', sans-serif; display:block; }

#layout3 .l3{ width:calc(100% / 4); margin:2% 0 4%; float:left; position:relative; }

button[name='bl3']{ -webkit-transition:all ease-out 250ms; -moz-transition:all ease-out 250ms; -ms-transition:all ease-out 250ms; -o-transition:all ease-out 250ms; }
button[name='bl3']{ cursor:pointer; padding:0.7em; margin:0.3rem 0; border-radius:0.3rem; background:transparent; color:#333333; font:400 1.5em 'Archivo Narrow', sans-serif; color:#333333; text-transform:uppercase; outline:none; display:block; }
button[name='bl3']:hover{ background:#e8a921; color:white; }
button[name='bl3']:before{ font:lighter 1.5rem 'FontAwesome'; padding:0 0.5rem; text-align:center; content:'\f105'; color:#333333; }
button[name='bl3']:hover:before{ color:white; }

#layout4{ -webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms; }
#layout4{ cursor:pointer; width:100%; padding:3rem 0; margin:2rem 0; background:#333333; }
#layout4:hover{ background:#e8a921; }
#layout4 h1{ font:300 5rem/5rem 'Poiret One', cursive; color:white; letter-spacing:-0.1rem; }
#layout4 h1 span{ font:400 1.5rem 'Archivo Narrow', sans-serif; text-transform:uppercase; letter-spacing:0rem; display:block; }
#layout4 h1:before{ content:'\f09e'; font:normal 5rem 'FontAwesome'; }
#layout4 .l4{ width:80%; margin:0 auto; }

#layout5{ width:100%; padding:3rem 0; background:black; }
#layout5 h1{ font:400 1.5rem 'Archivo Narrow', sans-serif; text-transform:uppercase; text-align:center; color:white; }
#layout5 h1:before{ content:'\f1f9'; font:normal 1.6rem 'FontAwesome'; }
#layout5 a{ color:lightGrey; }
#layout5 a:hover{ color:#e8a921; }

#layout6{ width:95%; margin:2% auto 0; overflow:hidden; }
#layout6 h3{ font:400 3rem 'Fjalla One', sans-serif; color:#333333; padding-bottom:1rem; border-bottom:lightGrey dotted 0.1rem; text-transform:uppercase; }
#layout6 h3 span{ font:300 2rem 'Oswald', sans-serif; display:block; }

#layout6 .l6{ width:calc(100% / 2 - 2%); margin:2% 1%; float:left; position:relative; }

#layout6 .l6 .caixa{  border-radius:0.4rem; padding:0.3rem 5%; margin-right:1.5rem; font:400 6rem 'Wire One', sans-serif; text-align:center; color:white; background:dimGray; float:left; position:relative;  }
#layout6 .l6 .caixa:before{ content:'\f0da'; font:normal 4.5rem 'FontAwesome'; top:0.5rem; right:-1.2rem; color:dimGray; position:absolute; } 
#layout6 .l6 h6{ font:400 3rem 'Fjalla One', sans-serif; color:#333333; text-transform:uppercase; float:left; }
#layout6 .l6 h6 span{ font:300 2rem/2rem 'Oswald', sans-serif; display:block; } 

#layout6 .l6 .l6a{ /*display:inline-block; */ cursor:pointer; }
#layout6 .l6 .caixa{-webkit-transition:all ease-out 250ms; -moz-transition:all ease-out 250ms; -ms-transition:all ease-out 250ms; -o-transition:all ease-out 250ms; }
#layout6 .l6 .l6a:hover .caixa{ padding:0.3rem 15%; background:darkSalmon; float:left; }
#layout6 .l6 .l6a:hover .caixa:before{ color:darkSalmon; }

form[name='online']{ width:100%; }
form[name='online'] input{ font:400 1.5rem/7rem 'Archivo Narrow', sans-serif; text-transform:uppercase; color:grey; background:transparent; text-indent:1rem; border-left:solid 0.4rem lightGrey; border-bottom:solid 0.1rem lightGrey; margin-bottom:1.5rem; outline:none; }
form[name='online'] input:focus{ border-left:solid 1.5rem lightGrey; background:white; }

form[name='online'] input:nth-child(1){ width:95%; }
form[name='online'] input:nth-child(2){ width:46%; margin-right:2%; }
form[name='online'] input:nth-child(3){ width:45%; }
form[name='online'] input, button[name='send'], button[name='reset'], button[name='admin'], button[name='bl3']{ -webkit-transition:all ease-out 200ms; -moz-transition:all ease-out 200ms; -ms-transition:all ease-out 200ms; -o-transition:all ease-out 200ms; }

button[name='send']{ cursor:pointer; padding:3% 10%; border-radius:0.3rem; background:dimGray; color:white; font:400 1.7rem 'Fjalla One', sans-serif; text-transform:uppercase; outline:none; }
button[name='reset']{ cursor:pointer; padding:3%; margin-left:0.5%; border-radius:0.3rem; background:darkGrey; color:white; font:400 1.7rem 'Fjalla One', sans-serif; text-transform:uppercase; outline:none; }
button[name='reset']:before{ content:'\f00d'; font:normal 1.9rem 'FontAwesome'; color:white; }

button[name='admin']{ cursor:pointer; padding:3%; margin-left:0.5%; border-radius:0.3rem; background:darkSalmon; color:white; font:400 1.7rem 'Fjalla One', sans-serif; text-transform:uppercase; outline:none; }
button[name='admin']:before{ content:'\f234'; font:normal 1.9rem 'FontAwesome'; color:white; }

button[name='send']:hover, button[name='reset']:hover, button[name='admin']:hover{ background:black; }

#conteudo{ width:95%; margin:0 auto; z-index:-1; overflow:hidden; }
#conteudo h1{ font:400 3rem 'Fjalla One', sans-serif; color:#333333; padding-bottom:1rem; margin:3% 0; border-bottom:lightGrey dotted 0.1rem; text-transform:uppercase; }
#conteudo h1 span{ font:300 2rem 'Oswald', sans-serif; display:block; }
#conteudo p{ font:400 1.6rem 'Archivo Narrow', sans-serif; padding-bottom:5rem;text-align:justify; }
#conteudo .pree{ margin-left:1rem; }
#conteudo .pree span{ font:400 1.6rem 'Archivo Narrow', sans-serif; color:white; background:#333333; padding:2rem; }

form[name='contato']{ position:relative; margin:4rem 1rem; }

form[name='contato'] input{ font:400 1.6rem 'Archivo Narrow', sans-serif; color:#333333; width:98%; height:8rem; background:white; text-indent:1rem; border-left:solid 0.4rem lightGrey; border-bottom:solid 0.1rem lightGrey; margin-bottom:1rem; outline:none; }
form[name='contato'] input:focus{ border-left:solid 1.5rem lightGrey; background:#f4f4f4; }

form[name='contato'] textarea{ font:400 1.6rem 'Archivo Narrow', sans-serif; color:#333333; width:98%; height:26rem; background:white; text-indent:1rem; border-left:solid 0.4rem lightGrey; border-bottom:solid 0.1rem lightGrey; margin-bottom:1rem; outline:none; }
form[name='contato'] textarea:focus{ border-left:solid 1.5rem lightGrey; background:f4f4f4; }

button[name='cont']{ width:100%; height:5rem; background:url(../imagem/c3b.png) center no-repeat #333333; border-radius:0.2rem; margin-top:1rem;  }
button[name='cont']:hover{ background:url(../imagem/c3c.png) center no-repeat #e8a921; }

form[name='contato'] input, form[name='contato'] input:focus, form[name='contato'] textarea, form[name='contato'] textarea:focus, button[name='cont'], button[name='cont']:hover{ -webkit-transition:all ease-out 250ms; -moz-transition:all ease-out 250ms; -ms-transition:all ease-out 250ms; -o-transition:all ease-out 250ms; }

@media screen and (max-width:1366px) { 
	#layout, #slogan{ width:90%; }
}

@media screen and (max-width:1280px) {

}

@media screen and (max-width:1024px) {
	#layout, #slogan{ width:100%; }
	#layout h1{ font-size:4.3rem; }
	
	#sloganH h1{ font-size:4.3rem; } 
	
	#layout2 .l2 h2{ font-size:2.8rem; }

}

@media screen and (max-width:768px) {
		#layout h1{ font-size:3.3rem; }
		#layout p{ font-size:1.4rem }
		#layout .logo{ padding:5% 0 1%; }
		
		#sloganH h1{ display:none !important; }
		
		#layout2 .l2{ width:100%;  }
		
		#layout3 .l3{ width:calc(100% / 2); } 
		
		#layout6 .l6{ width:100%; padding-bottom:2%;  }
		
		.fcon{ display:block; width:100% !important; }
}

@media screen and (max-width:640px) { 

}

@media screen and (max-width:480px) {	
	#layout3 .l3{ width:100%; } 
	
	#layout4 h1{ font-size:4rem; } 
	#layout4 h1:before{ font-size:4rem; }
}

@media screen and (max-width:320px) {
	#layout .logo h2:before{ display:block; padding:10% 0; }

}