@charset "UTF-8";

/* -------------------------------------------------
	Agência Funerária Matias & Ferreira
	CSS by Paulo Gomes
	www.paulogomes.org
------------------------------------------------- */

html, body {padding: 0; margin: 0; font-family: 'Lato', sans-serif !important; background: #f5f5f5; overflow-x: hidden;}
hr {clear: both; border: none; background: none; margin: 0; padding: 0;}
h1, h2, h3, h4, p {font-family: 'Lato', sans-serif; font-weight: 300;}
h1 {padding: 10px 0; margin: 0; font-size: 265% !important; font-weight: 300 !important; text-transform: uppercase; text-shadow: 1px 1px 1px #CCC; color: #005C1C !important;}
h2 {padding: 0 0 10px 0; margin: 0; font-size: 205% !important; font-weight: 300 !important; color: #005C1C !important;}
	h2.title {text-align: center; text-transform: uppercase; font-weight: 300; color: #00911D; margin-bottom: 40px;}
h3 {padding: 0 0 10px 0; margin: 0 0 10px 0; font-size: 125% !important; color: #005C1C;}
h4 {padding: 10px 0; border-bottom: 1px solid #ccc; color: #999 !important;}
p {font-size: 105%; line-height: 170%; text-align: justify; color: #3c3c3c;}
	p.intro {text-align: center; width: 60%; margin: 0 auto 20px auto; font-size: 120%;}
ul {font-size: 115%; line-height: 155%;}
strong {color: #888 !important;}
a {text-decoration: none; color: inherit !important;}
img {max-width: 100%; margin: 5px 0;}
hr {padding: 40px 0; background: url(gfx/hrShadow.jpg) no-repeat center bottom; border: 0 !important;}
hr.clean {padding: 40px 0; background: none; border: 0 !important;}
.pop h3 {margin: 0 0 40px 0; padding: 0;}
.web {display: block;}
.mobile {display: none;}

#container .fa {margin: 0 5px; color: #b8c4c8;}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background-color: rgba(255,255,255,0);}
::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.6);}
::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 1);}

button:focus {outline:0;}

#preloader {
	position: fixed; top: 0; left: 0; display: block; z-index: 999;
    width: 100%; height: 100%;
	background: #cadcdc;
	}
	#preloader img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 300px;}

.fullScreen {
	position: relative; top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	overflow: hidden;
}

.centerMe {position: relative; width: 90%; width: calc(90% - 40px); max-width: 1200px; margin: auto;}
.hideMe {display: none;}

.logo {width: 165px; height: 50px; float: left; margin: 5px 0;}
	.logo img {width: auto; height: 100%;}

/* MENU */
#menu {
	position: fixed; top: 0px; z-index: 500;
	width: 100%; height: 70px;	
	opacity: 1;
	background: rgba(255,255,255,0.8);
}
	#menu ul {
		float: right;
		height: 80px; margin: 0;
		text-align: right;	list-style: none;
	}
	#menu li {
		float: left;	
		 margin: 0; padding: 0;
		display: inline;
	}
	#menu button {
		display: block;	height: 70px;
		font-size: 115%; font-weight: 300; color: #326974; font-family: 'Lato', sans-serif;
		padding: 15px; margin: 0 !important; background: none; border: none;
		-webkit-transition: all 500ms ease-in-out;
		-moz-transition: all 500ms ease-in-out;
		-ms-transition: all 500ms ease-in-out;
		-o-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
		}
		#menu button:hover {padding: 25px 15px 15px 15px; border-bottom: 1px solid #326974;  background: rgba(255,255,255,0.9);  }
		#menu button.active {padding: 25px 20px 15px 20px; border-bottom: 1px solid #326974; background: rgba(255,255,255,0.9); color: #889dae; border: none; }
/* MENU END */

#container {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;}
.content {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; 
	width: 90%; width: calc(90% - 40px); height: auto; max-width: 1200px;
	margin: auto; padding: 20px;
	background: rgba(255,255,255,0.7);
}
footer {position: relative; background: #cadcdc; padding: 20px; margin: 40px 0 0 0;}
	footer .fa {font-size: 150%; color: #000 !important;}

/* PAGES */
#homepage, #about, #servicos, #frota, #contatos, #parceiros {
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;	
	}
	#homepage, #about:after, #servicos:after, #frota:after, #contatos:after, #parceiros:after {content:" "; clear: both;}

#homepage .slide {
	position: relative; width: 100%; height: auto;	z-index: 10;
	}
	#homepage .slide img {width: 100%; height: auto; margin: 0;}
#homepage .heading {
	position: relative; width: 100%; height: auto;
	margin: auto; padding: 80px 20px 40px 20px; background: url(gfx/chapabus_logo.svg) no-repeat center top 20px rgba(255,255,255,0.35); background-size: auto 50px;
	text-align: center;
	}

ul.rotas li {list-style-image: url(gfx/ico_doc.svg);}
.contactForm {}
input, textarea, button {padding: 5px; width: 100%;}
button {margin: 20px 0 0 0 !important; background:#DDD; color: #fff; border: 0; }

.partner {height: 200px; vertical-align: middle;}
	.partner img {position: absolute; top: 0; bottom: 0; width: 80%; margin: auto;}

.PG {position: absolute; right: 10px; bottom: 10px; width: auto; height: 30px; background: url(gfx/PG.svg) no-repeat right center; background-size: 20px auto; overflow: hidden; display: block;}
.PG span {color: #AAA;
    margin: 3px 25px 0 0;
    font-size: 10px;
    text-align: right;
    line-height: 13px;
    display: block;}

/* mobile phone */
@media all and (max-width: 768px) {
	
	html, body {font-size: 90%;}
	
	.web {display: none;}	
	.mobile {display: block;}
	
	p {font-size: 90%;}
	p.intro {width: 100%;}
	#topBar {
		position: fixed; top: 0; left: 0; right: 0; z-index: 999;
		width: 100%; height: 60px; 
		background: #FFF; 
		opacity: 0;
		}
		#topBar h1 {color: #bd7070; font-size: 150%; font-weight: 300; margin: 5px 0 0 70px;}
		#topBar h2 {color: #b8c4c8; font-size: 100%; font-weight: 300; margin: -5px 0 0 70px;}
	#openMenu {
		position: absolute; top: 0; left: 0;
		width: 50px; height: 50px;
		padding: 10px 0 0 10px;
		font-size: 250%; 
	}
	#closeMenu {
		position: absolute; top: 0; right: 0;
		width: 50px; height: 50px;
		padding: 10px 10px 0 0;
		font-size: 250%;
	}
	
	.centerMe {width: 100%;}
	.slides {margin: 10% auto 0 auto;}
	.content {
		top: 60px;
		width: 100%; height: calc(100% - 60px);
		padding: 2%;
		overflow: scroll;
   		-webkit-overflow-scrolling: touch;
	}
	
	#menu {width: 100%; height: 100%; left: -100%; z-index: 999; background: #FFF;}
	#menu ul {margin: 80px 0 0 0; padding: 0; float: left;}
	#menu li,
	#menu button {width: 100%; text-align: left;}
	#menu button.active {padding: 20px 0 20px 50px; background: rgba(184,196,200,0.1);}
	
	#servicos .colFourth,
	#servicos .colFourth_last {width: 48%; height: 45%; margin: 0 0 20px 0;}
	#servicos .servico img {width: auto; height: 100%; margin: 0 auto;}
	#servicos .label {margin:0;}	
	#servicos .pop .servico img {width: auto; height: 100%;}
	.pop {position: fixed; z-index: 999;}
	
	#links img {bottom: 45px; width: 80%;}
	#links .label {font-size: 90%;}
	
	#contatos .colHalf, 
	#contatos .colHalf_last {width: 100%;}
}