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

h1, h2, h3, h4, h5, h6, p, a, input, label, textarea, span { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #212e36; font-weight: 400; }
input, textarea { color: #212e36; }

.bold { font-weight: 600; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* fundo */

* { box-sizing: border-box; font-size: 0; }
html, body { position: relative; margin: 0; padding: 0; width: 100%; height: 100%; background: #ffffff url(./src/bg.jpg) no-repeat center center; background-size: cover; overflow: hidden; }
*		{ transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 600ms; -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; }


/* ---------------------------------------------------------------------------------------------- */
/* texto */

div.text { display: block; position: absolute; top: 25%; left: 50%; width: 300px; height: auto; margin: 0 0 0 -150px; z-index: 10; padding: 0; }
	div.text img { display: block; position: relative; width: 100%; }
	div.text a { display: block; position: relative; font-size: 18px; line-height: 25px; color: #231f20; text-align: center; text-decoration: none; }
	div.text a:hover { color: #00009a; }
	div.text p { display: block; position: relative; font-size: 16px; line-height: 22px; color: #231f20; text-align: center; text-decoration: none; margin: 15px 0 0 0; }

@media all and ( max-width: 1200px )
{
	div.text { background: transparent url(./src/bg_text.png) repeat; padding: 10px; }
}

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

div#slide { transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 10000ms; -webkit-transition-duration: 10000ms; -moz-transition-duration: 10000ms; z-index: 5; }
div#slide { display: block; position: relative; width: 100%; height: 100%; }
div#slide[data-status="left"] { transform: rotate(-5deg); }
div#slide[data-status="right"] { transform: rotate(5deg); }
	div#slide div.banner { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; }
	div#slide div.banner[data-status="actual"] { opacity: 1; }
	div#slide div.banner[data-status="none"] { opacity: 0; }
	div#slide div.banner div.col { display: inline-block; position: relative; top: 0; left: 0; width: 20%; height: 33%; padding: 5px; }
	div#slide div.banner div.col[data-status="false"] { top: 100vh; left: 100vw; }
	div#slide div.banner div.col[data-status="true"] { top: 0; left: 0; }
		div#slide div.banner div.col span { display: block; position: relative; width: 100%; height: 100%; }
	div#slide div.banner div.empty { display: inline-block; position: relative; width: 20%; height: 33%; background-color: transparent; }
	div#slide div.banner p.title { display: inline-block; position: absolute; transform: rotate(9deg); top: 35%; left: 15%; width: auto; height: auto; padding: 35px; background-color: #ffffff; color: #ff8000; z-index: 15; text-align: center; }

@media all and ( max-width: 1200px )
{
	div#slide[data-status="left"] { transform: rotate(0deg); }
	div#slide[data-status="right"] { transform: rotate(0deg); }
		div#slide div.banner div.col { display: inline-block; position: relative; width: 200px; height: 33vh; padding: 0; }
		div#slide div.banner div.empty { display: none; }

		div#slide div.banner p.title { transform: rotate(0deg); top: 0; left: 0; width: 100%; padding: 10px; }
}
@media all and ( max-width: 600px )
{
	div#slide div.banner div.col { width: 50vw; height: 50vw; }
}