/*==========================================================================
	RESET
========================================================================== */
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

html { color: #222; font-size: 1em; line-height: 1.4; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video {vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }

:root {
	--red:#ed1c24;
	--green:#4ba600;
	--yellow:#fff159;
	--blue:#6ec1e4;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
}

/*==========================================================================
	HEADER
========================================================================== */
header[role="banner"] { 
	text-align: center; 
	background: #FFF; 
	border-top: 10px solid var(--red); 
	padding: 30px 0; 
}

.branding {
	width:250px;
	height:auto;
	background:#FFF;
	box-shadow:0 0 40px #333;
	padding:20px;
	margin: -10px auto;
}
.branding img { width:100%; height: auto; }


#k-slider {
	position: relative;
	width: 100%;
	height:500px;
}

/*==========================================================================
	HERO
========================================================================== */
.hero { 
	text-align: center;
	border-top:10px solid var(--red);
	padding:0 0 75px 0;
	z-index:10;
	position: relative;
}

.box-gray {
	color:#FFF;
	background:#111;
	padding:20px;
	margin:40px 0;
}

.box-gray h1 {font-size:55px;}
.box-gray p {font-size:16px;}

.btn-outline { font-size:13px; color:#FFF; border:2px solid var(--red); padding:10px 40px;}
.btn-outline:hover { color:#FFF; background:var(--red); }

.btn-main { font-size:13px; background:#111; color:#FFF; border:1px solid #666; padding:10px 40px; display: inline-block; margin:5px 0}
.btn-main:hover { color:#FFF; background:#000;}

/*==========================================================================
	SERVIÇOS
========================================================================== */
.servicos {
	color:#FFF;
	background:#eee;
	padding:60px 0;
}

.servicos h3 {font-size:30px; font-weight: bold}

.boxes { 
	font-weight: bold; 
	padding:40px 20px; 
	background-size: cover;
}

.boxes a.btn-outline {margin-top:15px; display:inline-block; }

.boxes p {font-size:16px; padding:0 30px}

.boxes-1 { background:#111 url(../img/box-01.png) no-repeat center top; }
.boxes-2 { background:#111 url(../img/box-02.png) no-repeat center top; }
.boxes-3 { background:#111 url(../img/box-03.png) no-repeat center top; }


.zoom-container {
	width: 300px;
	height: 200px;
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease;
}

.zoom-container:hover {
	transform: scale(1.1);
}


.bg-about {
	background:url(../img/bg-about.png) no-repeat center top;
}

.text-about p {
	color:#111;
	font-size:16px;
	margin:20px 0;
	text-align: justify;
}


.instagram {
	color:#FFF;
	background:#222;
}


/*==========================================================================
	COMPRE-JA
========================================================================== */
.fale-conosco { background:url(../img/bg-02.png) no-repeat center center; padding:50px 0; }

.fale-conosco img { box-shadow:0 0 10px #888 }
.fale-conosco img:hover { box-shadow:0 0 15px #666 }


/*==========================================================================
	Helpers
========================================================================== */
.bg-hero { background:url(../img/hero.png) repeat-x center top; }
.bg-gray { background:url(../img/bg-gray.png) repeat-x center top; }
.bg-green { background:url(../img/bg-green.png) repeat center top; }
.bg-yellow { background:url(../img/bg-yellow.png) repeat center top; }

.color-white { color:#FFF !important; }
.color-green { color:var(--red) !important; }
.color-black { color:#111 !important; }

.red-line {
	border-bottom:6px solid var(--red);
	height:2px;
	display: block;
	width:25%;
}

.p-30 { padding: 30px 0; }
.p-60 { padding: 60px 0; }

.debug{ outline: 2px solid red; }



/*==========================================================================
	FOOTER
========================================================================== */
.footer {
	padding: 3rem 1.5rem;
}

footer { 
	text-align: center;
	background:url(../img/bg-03.png) no-repeat center top;
	font-size: 14px;
	color: #FFF; 
}

footer h4 {font-size:20px; color:#FFF}
footer ul li {margin:10px 0}
footer ul li a {font-size:14px; color:#FFF;}
footer ul li a:hover {color:var(--red); text-decoration: underline;}


.footer-columns {
	display: flex;
	justify-content: space-between;
}

.copy {
	color:#222;
	font-size: 12px;
	padding:30px 0;
}

.footer-column {
	flex: 1;
	margin-right: 20px;
}

@media screen and (max-width: 768px) {
	.footer-columns {
		flex-direction: column;
	}

	.footer-column {
		margin-right: 0;
		margin-bottom: 20px;
	}
}


/*==========================================================================
	TYPOGRAPHY
========================================================================== */
h1 { font-size: 2.2rem; font-weight:bold}
h2 { font-size: 2.6rem; font-weight:bold}
h3 { font-size: 1.3rem; font-weight:bold}
h4 { font-size: 0.5rem; font-weight:bold}
h5 { font-size: 0.25rem; font-weight:bold}
h6 { font-size: 1rem; }


/*==========================================================================
	MISSELANIUM
========================================================================== */

.bg-yellow dt {color:green; font-weight: bold; }
.bg-yellow dd {font-size:16px }
.bg-yellow .card {margin:20px 0; padding: 20px}

.card { background:#eee; padding:20px; margin:30px 0; }

.card:hover {color:#FFF; background:var(--red); }

.card:hover > dt {color:#FFF}

.card dt { 
	font-size: 20px;
	font-weight: bold;
	color:var(--red);
}

.card dd {font-size: 15px}

.whats {
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:30px;
	z-index:100;
}

/*==========================================================================
	MOBILE
========================================================================== */
@media (max-width: 500px) {
	body {font-size: 1rem;}
	h1 { font-size: 2.0rem; font-weight:bold}
	h2 { font-size: 2rem; font-weight:bold}	

	.bg-green .is-3, .bg-yellow .card {margin-left:20px; margin-right:20px;}

	footer {padding:20px}
}