@charset "UTF-8";

@import url('keyframes.css');

*, :focus, *:before, *:after, *:link, *:visited, *:active {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	outline:none;
	text-decoration:none;
	list-style:none;
	cursor:inherit;
	color:inherit;
	margin:0;
	padding:0;
	border:0;
}

html, body {
	width:100%;
	height:100%;
	min-width:auto;
	min-width:auto;
	min-height:100%;
	margin:0px;
	font-family:'Sinkin-Sans';
	font-size:62.5%;
	cursor:default;
	overflow:auto;
}

b {
	font-family:'Sinkin-Sans-Bold';
	white-space:nowrap;
}

[itemprop="navigation"] {
	position:absolute;
	top:0px;
	left:0px;
	width:0px;
	height:0px;
	opacity:0;
	display:none;
}

[data-background] {
	display:block;
	position:fixed;
	width:inherit;
	height:inherit;
	min-width:inherit;
	min-height:inherit;
	top:0;
	left:0;
	z-index:-1;
	overflow:hidden;
}

[data-background]:before {
	content:'';
	display:block;
	position:absolute;
	width:inherit;
	height:inherit;
	min-width:inherit;
	min-height:inherit;
	z-index:1;
	background-position:center center;
	background-repeat:repeat;
}

[data-background][itemprop="layer-pixel"]:before {background-image:url(../img/background-pixel.png);}

[data-background] > li {
	position:absolute;
	display:block;
	width:inherit;
	height:inherit;
	min-width:inherit;
	min-height:inherit;
}

[data-background] > li > video {
	display:block;
	position:relative;
	width:inherit;
	min-width:inherit; 
	height:auto;
}

#master {
	display:table;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	position:relative;
	width:inherit;
	height:auto;
	min-width:inherit;
	min-height:inherit;
	animation:1s ease fadeIn;
	z-index:0;
}

#master > header {
	display:table-cell;
	position:relative;
	width:inherit;
	height:60px;
	min-width:inherit;
	line-height:60px;
}

#master > header > nav {
	display:flex;
	flex-flow:nowrap;
	vertical-align:middle;
	text-align:center;
	position:relative;
	top:0;
	width:inherit;
	min-width:min-content;
	height:inherit;
	padding:0 60px;
	background-color:inherit;
	z-index:1;
}

#master > header.fixed > nav {position:fixed;}

#master > header > nav > #menu {
	flex:1;
	display:flex;
	justify-content:flex-end;
	width:inherit;
	height:inherit;
	font-size:0;
	white-space:nowrap;
}

#master > header > nav > #menu > li {
	position:relative;
	width:auto;
	height:inherit;
	margin:0 20px;
	display:inline-block;
	vertical-align:middle;
	text-align:center;
}

#master > header > nav > #menu > li[itemprop="logo"] {flex:1; margin-right:60px;}

#master > header > nav > #menu > li:only-child {margin:0;}
#master > header > nav > #menu > li[itemprop="logo"] + li {margin-left:0;}
#master > header > nav > #menu > li:first-child {margin-left:0;}
#master > header > nav > #menu > li:last-child {margin-right:0;}

#master > header > nav > #menu > li > a,
#master > header > nav > #menu > li > label {
	display:block;
	width:auto;
	height:inherit;
	padding:0;
	cursor:pointer;
	font-size:10px;
	text-transform:uppercase;
	transition:color 0.5s;
	-webkit-transition:color 0.5s;
}

#master > header > nav > #menu > li[itemprop="logo"] > a {
	display:block;
	position:relative;
	width:200px;
	background-image:url(../img/logo.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	z-index:1;
}

#master > main,
#master > section {
	flex:1;
	position:relative;
	display:table-row;
	display:flex;
	width:inherit;
	height:inherit;
	min-width:inherit;
	min-height:inherit;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}


#master > section[itemprop="pop-up"] {
	visibility:hidden;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	min-width:100%;
	min-height:min-content;
	overflow:auto;
	z-index:1;
	opacity:0;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}

#section-pix:checked ~ #master > section[itemprop="pop-up"]#pix {visibility:visible; opacity:1;}
#section-contact:checked ~ #master > section[itemprop="pop-up"]#contact {visibility:visible; opacity:1;}

#master > section[itemprop="pop-up"] > label {
	display:block;
	position:absolute;
	top:inherit;
	left:inherit;
	width:inherit;
	height:inherit;
	z-index:0;
}

#master > main > .content,
#master > section > .content {
	display:table-cell;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:inherit;
	height:inherit;
	min-width:inherit;
	min-height:inherit;
	vertical-align:middle;
	text-align:center;
	padding:50px;
}

#master > section[itemprop="pop-up"] > .content {
	align-items:stretch;
	min-height:min-content;
	transform:scale(0.5);
	transition:transform 0.5s;
	-webkit-transition:transform 0.5s;
	overflow:auto;
}

#section-pix:checked ~ #master > section#pix > .content {transform:scale(1);}
#section-contact:checked ~ #master > section#contact > .content {transform:scale(1);}

#master > section[itemprop="pop-up"] > .content > label {
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:20px;
	height:20px;
	line-height:20px;
	font-size:40px;
	margin:20px;
	text-align:center;
	cursor:pointer;
	transition:color 0.5s;
	background-image:url(../img/close-555.svg);
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-transition:background-image 0.5s;
	z-index:1;
}

#master > section[itemprop="pop-up"] > .content > label:hover {background-image:url(../img/close-FFF.svg);}

#master > section#pix > .content > [itemprop="pix-code"] {
	width:300px;
	cursor:pointer;
}

#master > section#contact > .content > form {
	flex-grow:1;
	display:flex;
	align-items:stretch;
	align-content:stretch;
	min-height:min-content;
	min-height:340px;
	position:relative;
	margin:0 auto;
	text-align:center;
}

#master > section#contact > .content > form:before {
	content:'';
	display:flex;
	align-content:center;
	align-items:center;
	justify-content:center;
	position:absolute;
	width:100%;
	height:100%;
	z-index:99;
	text-align:center;
	font-size:10px;
	text-transform:uppercase;
	visibility:hidden;
	opacity:0;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}

#master > section#contact > .content > form[class^="state"]:before {visibility:visible; opacity:1;}

#master > section#contact > .content > form.state-sending:before {content:'Your message is being sent';}
#master > section#contact > .content > form.state-error:before {content:'An error occurred. Please try again';}
#master > section#contact > .content > form.state-success:before {content:'Your message was sent successfully';}

#master > section#contact > .content > form > [role="flex"] {
	flex-grow:1;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	width:100%;
	height:100%;
	min-height:inherit;
	margin:0 auto;
	text-align:center;
}

#master > section#contact > .content > form > [role="flex"] > legend,
#master > section#contact > .content > form > [role="flex"] > label {
	display:flex;
	height:40px;
	min-height:min-content;
	line-height:20px;
	margin:10px;
	text-transform:uppercase;
	font-family:'Sinkin-Sans-Light';
	font-size:20px;
}

#master > section#contact > .content > form > [role="flex"] > label[for="message"] {flex-grow:1;}

#master > section#contact > .content > form > [role="flex"] > label > input,
#master > section#contact > .content > form > [role="flex"] > label > textarea,
#master > section#contact > .content > form > [role="flex"] > label:after {
	display:block;
	width:100%;
	height:100%;
	padding:10px;
	line-height:inherit;
	background-color:transparent;
	border:0;
	cursor:text;
	resize:none;
	font-size:15px;
	font-family:'Sinkin-Sans-Light';
}

#master > section#contact > .content > form > [role="flex"] > label:after {
	content:'';
	width:auto;
	white-space:nowrap;
	font-size:10px;
	visibility:hidden;
	opacity:0;
	transform:translate(20px,0);
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}

#master > section#contact > .content > form > [role="flex"] > label[class^="validation"]:after{visibility:visible; opacity:1; transform:translate(0,0);}

#master > section#contact > .content > form > [role="flex"] > label.validation-empty:after {content:'Required field';}
#master > section#contact > .content > form > [role="flex"] > label.validation-invalid:after {content:'Insert a valid e-mail';}

#master > section#contact > .content > form > [role="flex"] > label > textarea {min-height:200px}

#master > section#contact > .content > form > [role="flex"] > label > input:-webkit-autofill,
#master > section#contact > .content > form > [role="flex"] > label > input:-webkit-autofill:hover, 
#master > section#contact > .content > form > [role="flex"] > label > input:-webkit-autofill:focus, 
#master > section#contact > .content > form > [role="flex"] > label > input:-webkit-autofill:active,
#master > section#contact > .content > form > [role="flex"] > label > input:-webkit-autofill::first-line {
	font-family:'Sinkin-Sans-Light' !important;
	font-size:15px !important;
}

#master > section#contact > .content > form > [role="flex"] > label > input::placeholder,
#master > section#contact > .content > form > [role="flex"] > label > input::-webkit-input-placeholder,
#master > section#contact > .content > form > [role="flex"] > label > textarea::placeholder,
#master > section#contact > .content > form > [role="flex"] > label > textarea::-webkit-input-placeholder {
	line-height:inherit;
	text-transform:uppercase;
	font-size:10px;
}

#master > section#contact > .content > form > [role="flex"] > label > input:-ms-input-placeholder,
#master > section#contact > .content > form > [role="flex"] > label > textarea:-ms-input-placeholder {
	text-transform:uppercase;
	font-size:10px;
}

#master > section#contact > .content > form > [role="flex"] > button {
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	height:20px;
	line-height:20px;
	margin:10px;
	font-size:20px;
	text-align:right;
	background-color:transparent;
	cursor:pointer;
	font-family:'Sinkin-Sans-Bold';
	text-transform:uppercase;
	transition:color 0.5s;
	-webkit-transition:color 0.5s;
}

#master > main [itemprop="logo"],
#master > main [itemprop="links"] {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
	align-content:stretch;
	position:relative;
	width:auto;
	max-width:860px;
	height:auto;
	margin:0 auto;
	text-align:center;
}

#master > main [itemprop="logo"] > li{
	flex-grow:1;
	display:block;
	width:auto;
	height:auto;
	padding:20px;
	margin:10px;
}

#master > main [itemprop="logo"] > li > a{
	display:block;
	width:300px;
	height:50px;
	padding:20px;
	cursor:pointer;
	background-image:url(../img/logo.svg);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	transition:background 0.5s;
	-webkit-transition:background 0.5s;
}

#master > main [itemprop="links"] > div {
	flex-grow:1;
	display:block;
	width:auto;
	height:auto;
	padding:20px;
	margin:10px;
}

#master > main [itemprop="links"] > div > h1 {
	display:block;
	width:inherit;
	height:20px;
	line-height:20px;
	margin-bottom:10px;
	font-family:'Sinkin-Sans-Light';
	font-size:10px;
	text-transform:uppercase;
	text-align:left;
}

#master > main [itemprop="links"] > div > ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:stretch;
	align-content:stretch;
	width:auto;
	height:auto;
	white-space:normal;
	text-align:center;
	font-size:0;
}

#master > main [itemprop="links"] > div > ul > li {
	display:inline-block;
	vertical-align:middle;
	width:auto;
	height:auto;
	margin:10px;
}

#master > main [itemprop="links"] > div > ul > li > a {
	display:block;
	width:100px;
	height:100px;
	padding:20px;
	cursor:pointer;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	transition:background 0.5s;
	-webkit-transition:background 0.5s;
}

#master > footer {
	display:table-cell;
	width:inherit;
	height:60px;
	max-height:60px;
	line-height:60px;
}

#master > footer > small {
	display:block;
	width:inherit;
	height:inherit;
	font-size:8px;
	text-align:center;
}