/* ------------------------------------------------------------------------------------------------------------------ */
/* fontes */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600,700,800');

h1, h2, h3, h4, h5, h6, p, a, input, label, textarea, span, select, table, tr, th, td { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #3b2314; padding: 0; margin: 0; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* principal e animacoes de defeito */

html, body { position: relative; margin: 0; padding: 0; width: 100%; height: 100%; background-color: #ffffff; }
* { box-sizing: border-box; }
*,
[data-no-animation="false"]
{
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;

	transition-duration: 400ms;
	-webkit-transition-duration: 400ms;
	-moz-transition-duration: 400ms;
}
.long_animation
{
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;

	transition-duration: 3000ms;
	-webkit-transition-duration: 3000ms;
	-moz-transition-duration: 3000ms;
}

.no-animation,
[data-no-animation="true"]
{
	transition-property: none;
	-webkit-transition-property: none;
	-moz-transition-property: none;

	transition-duration: 0ms;
	-webkit-transition-duration: 0ms;
	-moz-transition-duration: 0ms;
}


@keyframes from-top { 0% { top: -100% } 100% { top: 0; } }
@keyframes from-bottom { 0% { top: 100% } 100% { top: 0; } }
@keyframes from-left { 0% { left: -100% } 100% { left: 0; } }
@keyframes from-right { 0% { left: 100% } 100% { left: 0; } }
@keyframes pinch { 0% { left: 50%; top: 50%; width: 0; height: 0; } 100% { left: 0; top: 0; width: 100%; height: 100%; } }

.from-top { animation: from-top 1500ms; }
.from-bottom { animation: from-bottom 1500ms; }
.from-left { animation: from-left 1500ms; }
.from-right { animation: from-right 1500ms; }
.pinch { animation: pinch 1500ms; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* limpador e truque para inline-block alinhamento */

.trick-align-top { display: inline-block; position: relative; width: 0; height: 100%; vertical-align: top; }
.trick-align-middle { display: inline-block; position: relative; width: 0; height: 100%; vertical-align: middle; }
.trick-align-bottom { display: inline-block; position: relative; width: 0; height: 100%; vertical-align: bottom; }
div.clear { clear: both; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* quadrados */

div.square { display: inline-block; position: relative; height: 25%; background-color: #f4f5f6; vertical-align: top; overflow: hidden; font-size: 0; }
div.square:nth-child(2n) { background-color: #e4e4e6; }
div.square
{
	width: 14.28%;
	width: -webkit-calc(100% / 7);
	width:    -moz-calc(100% / 7);
	width:         calc(100% / 7);
}
div.square.fill2
{
	width: 28.57%;
	width: -webkit-calc(100% / 7 * 2);
	width:    -moz-calc(100% / 7 * 2);
	width:         calc(100% / 7 * 2);
}
div.square.fill3
{
	width: 42.84%;
	width: -webkit-calc(100% / 7 * 3);
	width:    -moz-calc(100% / 7 * 3);
	width:         calc(100% / 7 * 3);
}
div.square.fill4
{
	width: 57.12%;
	width: -webkit-calc(100% / 7 * 4);
	width:    -moz-calc(100% / 7 * 4);
	width:         calc(100% / 7 * 4);
}
div.square[data-status="false"] { display: none; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* introducao */

div.intro { display: block; position: absolute; width: 100%; height: 100%; font-size: 0; background-color: #ffffff; overflow: hidden; }
div.intro[data-status="false"] { opacity: 0; z-index: 1; }
div.intro[data-status="true"] { opacity: 1; z-index: 2; }
	div.intro div.square { top: 0; background: transparent url(./../images/company.jpg) no-repeat fixed center center; background-size: cover; border: 0px solid #000000; box-sizing: border-box; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* corpo */

div.grid { display: block; position: absolute; width: 100%; height: 100%; font-size: 0; opacity: 0; background-color: #ffffff; }
div.grid[data-status="false"] { opacity: 0; z-index: 1; overflow: hidden; }
div.grid[data-status="true"] { opacity: 1; z-index: 2; overflow: auto; }
	div.grid div.square.white { background-color: #ffffff; }
	div.grid div.square.text { z-index: 3; padding: 20px; vertical-align: middle; }
	div.grid div.square.more { z-index: 3; padding: 20px 0; vertical-align: middle; }
		div.grid div.square.text div.text { display: inline-block; position: relative; vertical-align: middle; }
		div.grid div.square div.shadow { display: block; position: absolute; top: -50%; right: -50%; width: 50%; height: 50%; box-shadow: -50px 50px 150px #515252; background-color: blue; z-index: 2; }
		div.grid div.square:nth-child(2n) div.shadow { right: auto; left: -50%; box-shadow: 50px 50px 150px #515252; }

		div.grid div.square h1 { display: block; position: relative; width: 345px; background-color: #ee0209; border: 2px solid #ee0209; margin: 0 0 0 25px; font-weight: 700; font-size: 17px; color: #ffffff; line-height: 25px; text-align: center; }
		div.grid div.square a.location { display: block; position: relative; width: 345px; border: 2px solid #231f20; font-weight: 700; font-size: 17px; color: #231f20; line-height: 25px; margin: 35px 0 0 25px; text-align: center; text-decoration: none; background-color: transparent; }
		div.grid div.square a.location:hover { background-color: #ee0209; border: 2px solid #ee0209; color: #ffffff; }

		div.grid div.square div.slide { display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
			div.grid div.square div.slide div.banner { display: block; position: absolute; width: 100%; height: 100%; }
		div.grid div.square img { display: inline-block; position: relative; margin: 0 0 0 25px; vertical-align: middle; max-height: 90%; }
		div.grid div.square p.address { margin: 10px 0 0 0; font-weight: 700; }
		div.grid div.square p.legend { display: inline-block; position: relative; text-decoration: none; font-size: 20px; line-height: 30px; font-weight: 700; color: #ee0209; vertical-align: bottom; margin: 20px; text-transform: uppercase; }
		div.grid div.square p,
		div.grid div.square p a { display: block; position: relative; text-decoration: none; font-size: 12px; line-height: 23px; color: #231f20; }
		div.grid div.square p a { display: inline-block; text-decoration: none; }
		div.grid div.square p a:hover { color: #ee0209; }

@media all and ( max-width: 1199px ) {
	div.grid div.square.text { padding: 7px; }
	div.grid div.square h1 { width: auto; margin: 0 10px; }
	div.grid div.square a.location { width: auto; margin: 20px 10px 0 10px; }
	div.grid div.square p,
	div.grid div.square p a { font-size: 10px; line-height: 15px; }
	div.grid div.square p.address { margin: 0; }
}

@media all and ( max-width: 900px ) {
	div.grid div.square { height: 30%; }

	div.grid div.square {
		width: 25%;
		width: -webkit-calc(100% / 3);
		width:    -moz-calc(100% / 3);
		width:         calc(100% / 3);
	}
	div.grid div.square.fill2,
	div.grid div.square.fill3 {
		text-align: center;

		width: 100%;
		width: -webkit-calc(100% / 1);
		width:    -moz-calc(100% / 1);
		width:         calc(100% / 1);
	}

	div.grid div.square.text div.text { display: block; text-align: center; vertical-align: top; height: auto; }
	div.grid div.square.text {
		height: auto;
		width: 100%;
		width: -webkit-calc(100% / 1);
		width:    -moz-calc(100% / 1);
		width:         calc(100% / 1);
	}

	.trick-align-middle { display: none; }
}

@media all and ( max-width: 500px ) {
	div.grid div.square { display: none; }
	div.grid div.square[data-number] { display: inline-block; }
	div.grid div.square { height: 30%; }

	div.grid div.square {
		width: 25%;
		width: -webkit-calc(100% / 2);
		width:    -moz-calc(100% / 2);
		width:         calc(100% / 2);
	}
	div.grid div.square.fill2,
	div.grid div.square.fill3 {
		text-align: center;

		width: 100%;
		width: -webkit-calc(100% / 1);
		width:    -moz-calc(100% / 1);
		width:         calc(100% / 1);
	}

	div.grid div.square.text div.text { display: block; text-align: center; vertical-align: top; height: auto; }
	div.grid div.square.text {
		height: auto;
		width: 100%;
		width: -webkit-calc(100% / 1);
		width:    -moz-calc(100% / 1);
		width:         calc(100% / 1);
	}

	.trick-align-middle { display: none; }
}

@media all and ( max-width: 400px ) {
	div.grid div.square { display: none; }
	div.grid div.square[data-number] { display: block; }
	div.grid div.square { height: 30%; }

	div.grid div.square {
		width: 25%;
		width: -webkit-calc(100% / 1);
		width:    -moz-calc(100% / 1);
		width:         calc(100% / 1);
	}
	div.grid div.square.fill2,
	div.grid div.square.fill3 {
		text-align: center;

		width: 100%;
		width: -webkit-calc(100% / 1);
		width:    -moz-calc(100% / 1);
		width:         calc(100% / 1);
	}

	div.grid div.square.text div.text { display: block; text-align: center; vertical-align: top; height: auto; }
	div.grid div.square.text {
		height: auto;
		width: 100%;
		width: -webkit-calc(100% / 1);
		width:    -moz-calc(100% / 1);
		width:         calc(100% / 1);
	}

	.trick-align-middle { display: none; }
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* slide */

div#slide { display: none; }