@font-face {font-family: 'di'; font-weight: normal; font-weight:normal; src: url('font/DiGrotesk-Bold.woff') format('woff');}

* {
	box-sizing: border-box; 
}

html {

	height: 100%;
	font-size: 24px;
}

body {
	margin: 0;
	color: #0C1F2C;
	background: #ffd018; 
	background: #3774ff; 
	font-family: di, sans-serif; text-transform: uppercase;
	font-size: 1rem;
	overflow-y: scroll; 
	background: 
	height: 100%; 
}

body.stage1 {
	color: #0C1F2C;
	background: #FFCB00;
	height: 100%;
	display: flex; justify-content: space-between; flex-direction: column;  align-items: stretch; 
}

a {
	color: inherit;
	text-decoration: none; 
}

.grid {
	display: flex; flex-wrap: wrap; 
	margin: 0 -1rem; 
}
.grid .item {
	width: 33.333%;
	padding: 1rem;
	position: 	relative; 
}

.grid .item.itemsmall {
	width: 25%;
}

.grid .item > a {
	display: block; 
	transition: all 0.3s;
	transform: perspective(1000px); 
	
}
.grid .item > a .label {
}
.grid .itemsmall > a:hover {
	transform: perspective(1000px) rotateX(10deg); 

}

.grid .itembig >a {
	transition: all 0.3s;
	transform: perspective(1000px); 
	transform-origin: 50% 100%; 

}

.grid .itembig:hover > a {
	transform: perspective(1000px) rotateX(-5deg); 

}


.share {
	line-height: 1; 
	font-size: 	0; 
}
.share >a {
	display: 	inline-block; 
	vertical-align: top;

}
.share >a:hover {
	background: #0f0;
	color: white; 
}
img {
	max-width: 100%;
	vertical-align: 	top; 
}

.label {
	color: black;
	background: white; 
	font-size: 16px;
	font-size: 18px;
	padding: 2px 10px 0;
	display: 	inline-block; 
	vertical-align: top; 
}

@media (max-width: @resp-lg) {
	.label {
		font-size: 16px; 
	}
}

.share a:hover .label {
	background: black;
	color: white; 
}

.label.label2 {
	background: white;
	color: #FF9CFF; 
}
.label.label1 {
	background: #FDFF60;
	color: #FF3900; 
}
.label.label3 {
	background: #FFCB00;
	color: #FF3EFF; 
}


.outwrap {
	padding-left: 2rem; 
	padding-right: 2rem; 
	max-width: 1240px; margin: 0 auto; 
	width: 	100%; 
}
iframe {
	display: 	block; 
	border: none; 
	height: 50vh; 
	margin: 1rem 0; 

}

form {
	font-size: 60px; 
	width: 100%; 
	padding-bottom: 2em; 
}
@media (max-width: 1024px) {
	form {
		font-size: 18px; 
		margin-left: -0.5rem;
		margin-right: -0.5rem;
		padding-bottom: 0;   
	}
}
@media (max-width: 640px) {
	form {
		font-size: 16px; 
	}
}

form .row {
	display: flex; 
	margin-bottom: 10px; 
}
input {
	width: 100%;
	flex-shrink: 2; 
	background: transparent;
	font: inherit;
	border: none; 
	border-bottom: #FDFF60 solid 5px;
	padding: 0.5rem;
	display: 	inline-block; 
	color: white;
	text-transform: uppercase; 
	color: inherit; 
}


* {
	outline: none !important;
}

button {
	white-space: nowrap; 
	background: #FDFF60;
	font: inherit;
	padding: 0.5rem;
	border: none; 
	cursor: pointer; 
	color: inherit; 
	border-bottom: #FDFF60 solid 5px;
}

button.upload {
	width: 100%; 
	background: #ff3900;
	color: #fdff60;
	display: flex; justify-content: space-between; 

}
button.upload i {
	color: white;
}
button.upload:hover {
	background: black; 
}

button i {
	color: magenta;
}
button:hover {
	background: white; 
}

input:hover, input:active {
	outline: none !important;
	background: rgba(255,255,255,0.2);
}

footer {
	display: flex; 
	flex-wrap: wrap; align-items: center; justify-content: space-between; 
	margin:  0 -0.5rem; 
	padding: 2rem 0;
	font-size: 14px;
	text-transform: none; 
	line-height: 1; 
}

footer .item {
	padding: 5px;
}
@media (max-width: 1024px) {
	footer {
		/*display: block; */
		padding-bottom: 0.3rem; 

	}
	footer .item {
		padding: 5px 3px;
	}
	.mobile-show {
		width: 100%; 
	}
}


footer .item  a.l{
	border-bottom: rgba(0,0,0,0.4) solid 1px; 
}

footer .item  a.s:hover {
	color: magenta;
}


@media (max-width: 1024px) {
	footer img {
		height: 30px !important;
		margin-bottom: 10px; 
	}
}

footer .item  a.l:hover {
	border-color: magenta;
}

header {
	padding: 2rem 0;
	display: flex; 
}

header .col1 {
	flex-grow: 2; 
}
header .col2 {
	max-width: 480px;
	padding-left: 40px; 
	font-size: 18px; color: magenta; 
	line-height: 1; 
	color: white; 
}

.stage1 header .col2, .stage2 header .social {
	color: white !important; 
}



header h1 {
	display: none; 
}

header img {
	width: 100%; 
}
header .social {
	color: magenta; 
	/*text-align: 	center; */
}
header .social .item {
	display: inline-block;
	font-size: 40px; 
	margin-top: 0.5rem; 
}

@media (max-width: 1024px) {
	header {
		display: block; 
	}
	header .col2 {
		max-width: 100%; 
		padding-left: 0; 
		padding-top: 1rem; 
		font-size: 16px; 
	}
	header .social {
		text-align: center;
	}

	header .social .item {
		font-size: 20px; 
	}	
}

header .social .item a:hover {
	color: white;
}


@media (max-width: 1024px) {
	header {
		padding: 1rem 0; 
	}
	header .txt {
		font-size: 18px;
	}
}

header .txt {
	text-align: justify; 
	margin: 1rem 0; 
	font-size: 22px;
	letter-spacing: 0.004em; 
	text-transform: none 	
}





input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: inherit;

}
input::-moz-placeholder { /* Firefox 19+ */
	color: inherit;

}
input:-ms-input-placeholder { /* IE 10+ */
	color: inherit;

}
input:-moz-placeholder { /* Firefox 18- */
	color: inherit;

}       

@media (max-width: 1024px) {
	.grid .item {
		width: 100% !important;
	}
	.outwrap {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}




@media (min-width: 1024px) {
	.mobile-show {
		display: none !important;
	}
}

@media (max-width: 1023px) {
	.mobile-hide {
		display: none !important;
	}
}


.cookies {
	position: 	fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 1rem; 
	font-size: 12px; line-height: 	1;
}

@media (max-width: 1024px) {
	.cookies {
		padding: 0 0.5rem; 
	}

}
.cookies .in {
	display: flex; justify-content: space-between; align-items: center; 
	background: white; 
	color: magenta;
	text-transform: none;
	border-radius: 5px;
	padding: 10px; 
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.cookies button {
	margin-left: 0.5rem; 
	line-height: 	1;
	font: inherit; 
	border: magenta solid 1px;
	background: magenta;
	color: white;
	padding: 12px 10px 10px;
	border-radius: 5px;
}


.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
	font: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	display: block;
	display: flex; justify-content: space-between;
	overflow: hidden;
	padding: 0.625rem 1.25rem;
	/* 10px 20px */
}

.inputfile:focus + label,
.inputfile.has-focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
	/* pointer-events: none; */
	/* in case of FastClick lib use */
}

.inputfile + label svg {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	fill: currentColor;
	margin-top: -0.25em;
	/* 4px */
	margin-right: 0.25em;
	/* 4px */
}


/* style 1 */

.inputfile-1 + label {
	color: #fff;
	background-color: magenta; 
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
	background-color: #722040;
}

.imginfo {

	text-align: center;
	margin: 2rem 0; 
}

.pixbox {
	display: inline-block;
	img {
		width: 50vw;
		height: 50vh;
		display: 	block; 
	}
}