/*-----------------------------
			LAYOUT
-----------------------------*/

a { cursor: pointer; }

header, section {
z-index:2;
position:absolute;
overflow:hidden;
}

header {
top:0;
left:0;
width:42%;
height: 100%;
}
.box-1 {
top:40%;
left:0;
width:42%;
height:60%;
}
.box-2 {
top:0;
left:42%;
width:27%;
height:57%;
}
.box-3 {
top:0;
left:69%;
width:31%;
height:57%;
}
.box-4 {
top:57%;
left:42%;
width:58%;
height:43%;
}

@media screen and (max-width:900px) {
	.box-1, .box-2, .box-3, .box-4 {
	position:relative;
	top:auto;
	left:auto;
	height:100%;
	width:100%;
	padding:1em;
	}
	header {
	position:relative;
	top:auto;
	left:auto;
	height:auto;
	min-height: 100%;
	width:100%;
	padding: 6em 1em 1em 1em;
	}
}


/*-----------------------------
			HEADER
-----------------------------*/

@media screen and (max-height:660px) and (min-width:900px) {
	header { font-size:0.9em; }
}
@media screen and (max-height:550px) and (min-width:900px) {
	header { font-size:0.8em; }
	header .winfield img { height:65px; }
	header .language img { height:16px; }
}
header .winfield {
position:absolute;
top:50%;
left:0;
width:100%;
margin-top:-3em;
font-size:2em;
letter-spacing:2px;
}
header .winfield img {
padding-bottom:0.8em;
}
header .baseline {
font-size:1.3em;
position:absolute;
left:0;
bottom:1em;
width:100%;
letter-spacing:3px;
}
header .socials {
font-size:1.45em;
position:absolute;
top:1em;
left:1em;
}
header .socials a {
color:#3d3c3e;
}
header .socials a:hover {
color:#ec2028;
transition:0.3s;
-webkit-transition:0.3s;
}
header .language {
font-size:1.45em;
position:absolute;
top:1.3em;
right:1em;
}
header .language a {
	color: currentColor;
}
header .language a:hover {
	color: #ec2028;
}
header .intro {
	position: absolute;
	top: 50%;
	left: 12%;
	width: 76%;
	transform: translateY(-50%);
	font-size: 0.8em;
	line-height: 1.5em;
	text-align: justify;
	margin-bottom: 4em;
}
header a {
	color: #ee2e24;
	text-decoration: none;
}
header a:hover {
	color: currentColor;
}

@media screen and (max-width:900px) {
	header .intro {
		position: relative;
		top: 0;
		left: 0;
		transform: translateY(0);
		width: 100%;
	}
	header .baseline {
		position: relative;
		bottom: 0;
		margin-top: 2em;
	}
}

.palmares {
	z-index: 999;
	position: fixed;
	top: -105%;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(0,0,0,0.5) url('../img/palmares.jpg') no-repeat center;
	background-size: contain;
	cursor: pointer;
	transition: opacity 1s, top 0s;
}
.palmares.active {
	top: 0;
	opacity: 1;
}

header .baseline > p {
	padding: 1em 0;
	border-top: #ec2028 1px solid;
	border-bottom: #ec2028 1px solid;
}

.mentions {
	font-size: 0.8em;
	line-height: 1.2em;
	padding-top: 2em;
}
.mentions a { color: currentColor; text-decoration: underline; font-weight: bold; }
.mentions a:hover { text-decoration: none; }

/*-----------------------------
			BOXES
-----------------------------*/

	@media screen and (max-width:1200px) {
		.box {
			font-size:0.9em;
		}
	}
	@media screen and (max-width:1100px) {
		.box {
			font-size:0.8em;
		}
	}
	@media screen and (max-width:1000px) {
		.box {
			font-size:0.75em;
		}
		section:hover .box-content h4 {
			font-size:1em;
		}
	}
	@media screen and (max-width:950px) {
		.box {
			font-size:0.7em;
		}
	}
	@media screen and (max-width:900px) {
		.box {
			font-size:1em;
		}
	}
	@media screen and (max-width:600px) {
		.box {
			font-size:0.7em;
		}
	}

.bg-img {
z-index:5;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
transition:0.7s;
-webkit-transition:0.7s;
}
section:hover .bg-img {
top:0;
left:0;
width:110%;
height:110%;
}
.bg-hero {
z-index:6;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(238,49,36,0.46);
opacity:0;
transition:0.5s;
-webkit-transition:0.5s;
}
section:hover .bg-hero {
opacity:1;
}
.box-content-container {
z-index:7;
position:absolute;
border:rgba(255,255,255,0.48) 2px solid;
transition:0.6s ease-out;
-webkit-transition:0.6s ease-out;
}
.box-content {
z-index:8;
position:absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
color:#fff;
padding:1em;
transition:0.6s ease-in;
}
.box-content h3 {
font-size:2em;
letter-spacing:2px;
line-height:1.3em;
}
.box-content h3 span {
font-size:0.9em;
}
.box-content h4, .box-content a {
position:relative;
top:40px;
opacity:0;
font-size:0.85em;
transition:font-size 0.4s, opacity 0.8s 0.2s, top 0.7s;
-webkit-transition:font-size 0.4s, opacity 0.8s 0.2s, top 0.7s;
}
.box-content h4 {
padding:2em 0 4.5em 0;
text-transform:uppercase;
line-height:1.5em;
height:4.5em;
max-height: 1em;
}
	@media screen and (max-height:600px) {
		.box-content h4 {
			padding:1em 0 0.3em 0;
		}
	}
	@media screen and (max-height:500px) and (min-width:900px) {
		.box-content h4 {
		display:none;
		}
	}
.box-content a {
margin-top:0.5em;
display:inline-block;
padding:12px 8px;
background:#ec2028;
border-radius:50%;
color:#fff;
box-shadow:0 0 10px 3px rgba(0,0,0,0.15);
text-decoration:none;
vertical-align:middle;
}
.box-content a:hover {
background:#fff;
color:#ec2028;
transition:0.3s;
-webkit-transition:0.3s;
}
.box-content a.website {
padding:5px 8px;
border-radius:2px;
text-transform:uppercase;
font-size:1.35em;
margin-bottom: 0.55em;
}
section:hover .box-content h4, section:hover .box-content a {
top:0;
opacity:1;
max-height: 100em;
}

/*-----------------------------
			BOX 2
-----------------------------*/
.box-2 .bg-img {
background-image:url('../img/winfield-racing-school.jpg');
}
	@media screen and (max-width:900px) {
		.box-2 .bg-img {
		background-image:url('../img/winfield-racing-school.jpg');
		}
	}
	@media screen and (max-width:430px) {
		.box-2 .bg-img {
		background-image:url('../img/winfield-racing-school.jpg');
		}
	}
.box-2 .box-content {
top: auto;
bottom:-8.75em;
margin-top:0;
transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
}
.box-2 .box-content-container {
top: auto;
bottom:3em;
left:calc(50% - 11em);
width:22em;
height:8em;
}
	@media screen and (max-width:1250px) {
		.box-2 .box-content-container {
			left:calc(50% - 10.5em);
			width:21em;
		}
	}
	@media screen and (max-width:900px) {
		.box-2 .box-content {
			bottom: -8.5em;
		}
		.box-2 .box-content-container {
		}
	}
	@media screen and (max-width:600px) {
		.box-2 .box-content {
			bottom: -5em;
		}
		.box-2 .box-content-container {
		}
	}
.box-2:hover .box-content {
bottom:3em;
}
.box-2:hover .box-content-container {
bottom:1em;
left:1em;
width:calc(100% - 2em);
height:calc(100% - 2em);
}

/*-----------------------------
			BOX 3
-----------------------------*/
.box-3 .bg-img {
background-image:url('../img/winfield-talents.jpg');
background-position:center top;
}
	@media screen and (max-width:900px) {
		.box-3 .bg-img {
		background-image:url('../img/winfield-talents-2.jpg');
		}
	}
	@media screen and (max-width:500px) {
		.box-3 .bg-img {
		background-image:url('../img/winfield-talents.jpg');
		}
	}
.box-3 .box-content {
top:auto;
margin-top:0;
left:auto;
right:2em;
bottom:-5.5em;
transform:translate(0,0);
-webkit-transform:translate(0,0);
width:12em;
transition:0.6s;
-webkit-transition:0.6s;
}
	@media screen and (max-height:600px) {
		.box-3 .box-content {
			bottom:-3.35em;
		}
	}
	@media screen and (max-height:500px) {
		.box-3 .box-content {
			bottom:0.5em;
		}
	}
	@media screen and (max-width:900px) {
		.box-3 .box-content {
			bottom:-5em;
		}
	}
	@media screen and (max-width:600px) {
		.box-3 .box-content {
			bottom:-1.2em;
		}
	}
.box-3:hover .box-content {
width:calc(100% - 4em);
bottom:2em;
}
.box-3 .box-content-container {
bottom:3em;
right:1em;
width:14em;
height:8em;
}
.box-3:hover .box-content-container {
bottom:1em;
right:1em;
width:calc(100% - 2em);
height:calc(100% - 2em);
}
	@media screen and (max-width: 1100px) {
		.box-3 .box-content { width: 14em; }
		.box-3 .box-content-container { width: 16em; }
	}


/*-----------------------------
			BOX 4
-----------------------------*/
.box-4 .bg-img {
background-image:url('../img/winfield-heritage.jpg');
background-position:center top;
}
.box-4:hover .bg-img {
top:-5%;
left:-5%;
}
.box-4 .box-content {
top:auto;
margin-top:0;
left:3em;
bottom:-10.9em;
transform:translate(0,0);
-webkit-transform:translate(0,0);
width:12em;
transition:0.6s;
-webkit-transition:0.6s;
}
.box-4:hover .box-content {
width:calc(100% - 6em);
bottom:1em;
}
.box-4 .box-content-container {
bottom:2.3em;
left:2em;
width:14em;
height:8em;
}
.box-4:hover .box-content-container {
bottom:1em;
left:1em;
width:calc(100% - 2em);
height:calc(100% - 2em);
}

.box-4 .box-content h4 {
padding:1em 0 2.5em 0;
text-transform:uppercase;
line-height:1.5em;
}
	@media screen and (max-width:900px) {
		.box-4 .box-content {
			bottom:-9.6em;
		}
	}
	@media screen and (max-width:600px) {
		.box-4 .box-content {
			bottom:-11em;
		}
	}
	@media screen and (max-width: 1100px) {
		.box-4 .box-content { width: 14em; }
		.box-4 .box-content-container { width: 16em; }
	}