/*
	COLORS
*/

/*
	FONTS
*/
@font-face {
	font-family: Avenir;
	src: url("../fonts/Avenir-Light.ttf");
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: Avenir;
	src: url("../fonts/Avenir-Roman.ttf");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: Avenir;
	src: url("../fonts/Avenir-Medium.ttf");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: Avenir;
	src: url("../fonts/Avenir-Black.ttf");
	font-weight: 900;
	font-style: normal;
}

/*
	RESET
*/
*, *:before, *:after {
	box-sizing: inherit;
	animation-fill-mode: both !important;
}
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

sup {
	font-size: .75em;
	position: relative;
	top: -.5em;
}

sub {
	font-size: .75em;
	position: relative;
	top: .25em;
}

svg {
	overflow: visible;
}

.template_result {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #041E42;
	color: #fff;
	font-family: Avenir;
	font-weight: 100;
	line-height: 1;
}
body {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
/*	background: linear-gradient(to right, rgba(0,94,102,.4), rgba(0,94,102,.28));*/
}
h1 {
	position: relative;
	padding-top: .357142em;
	font-size: 4.375vw;
	line-height: 5.3125vw;
	font-weight: 500;
}
	h1:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 6.5vw;
		height: .82vw;
		background: #fff;
	}

.group:after {
  content: "";
  display: table;
  clear: both;
}
.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 0;
	max-width: 1280px;
	padding-top: 62.5%;
	overflow: hidden;
	z-index: 1;
}
.wrapper .container {
	position: absolute;
	top: 0;
	right: 0;
	width: 75%;
	height: 100%;
	padding: 4.5% 3.75%;
}
.flex {
	display: flex;
}


/*
	STYLES
	FOR 16/9 OR MORE VERTICAL SCREENS
	USE VW AS OFTEN AS POSSIBLE
*/
.stripe {
	position: absolute;
	width: 25vw;
	height: 100%;
	background: #0033A0;
}
	.stripe-front {
		left: 0;
		z-index: 999;
	}
	.stripe-back {
		left: 97vw;
		z-index: -1;
		opacity: 0;
	}
	.stripe-mask {
		z-index: 99999;
		background: #041E42;
	}
.template--msg .stripe {
	display: none;
}

/* MSG INFORMATIVO */

.msg_content {
	position: relative;
	padding: 5.625vw;
	margin-top: 4vw;
	font-size: 3.4375vw;
	line-height: 1.5;
}
	.msg_content:before {
		content:'';
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		height: 100%;
		border: 3px solid #F65275;
		transform: translate3d(-50%, -50%, 0);
	}
	.msg_subject {
		position: relative;
		padding-bottom: 2.75vw;
		margin-bottom: 1.5vw;
		font-size: 4.21875vw;
		line-height: 1;
		font-weight: 100;
	}
		.msg_subject:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			display: block;
			width: 6.5vw;
			height: .82vw;
			background: #fff;
		}
	.msg_hours {
		font-weight: 900;
	}


/* RECOGIDA BASURA */
.icon {
	width: 2.578125vw;
}
	.icon--garbage {
		justify-content: space-evenly;
	}

.legend {
	margin-top: 7.65625vw;
	justify-content: space-between;
}
	.legend__type {
		align-items: center;
	}
	.legend__icon {
		margin-right: 1.1vw;
		float: left;
	}
	.legend__desc {
		display: inline-block;
		font-size: 3.28125vw;
	}

.template_result #GARBAGE {
	position: relative;
	padding-top: 3vw;
	padding-bottom: 1.875vw;
	margin-top: 8.90625vw;
	text-align: center;
}
	.template_result #GARBAGE:before {
		content:'';
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		height: 100%;
		border: 3px solid #fff;
		transform: translate3d(-50%, -50%, 0);
	}

.garbage--cell {
	position: relative;
	flex-grow: 1;
	font-size: 2.96875vw;
}
	.garbage--cell + .garbage--cell:before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 5%;
		height: 90%;
		width: 3px;
		background: #fff;
		border-radius: 2px;
	}
	.garbage--day {
		padding-top: .625vw;
		padding-bottom: .3125vw;
		margin-bottom: 1vw;
		text-transform: uppercase;
		font-weight: 100;
	}
	.garbage--icons {
		margin-top: 2.34375vw;
		justify-content: space-evenly;
	}

/*
	ANIMATIONS
*/

	/* INTRO */


.template_result .stripe-front {
	animation:	gotoRight 13s ease-in-out;
}
.template_result .stripe-back {
	animation:	gotoPos 13s ease-in-out;
}


.template_result #DESC,
.template_result .template--msg h1 {
	clip-path: inset(0 100% 0 0);
	animation: revealWindowFromLeft 13s ease-in-out;
}
.template_result #GARBAGE,
.template_result .msg_content {
	clip-path: inset(50% 50% 50% 50%);
	animation: revealWindowFromCenter 13s ease-in-out;
}
.template_result #GARBAGE:before,
.template_result .msg_content:before {
	width: 0;
	height: 0;
	animation: openWindow 13s ease-in-out;
}





@keyframes revealWindowFromLeft {
	3% {
		clip-path: inset(0 100% 0 0);
	}
	13% {
		clip-path: inset(0 0 0 0);
	}
	87% {
		clip-path: inset(0 0 0 0);
	}
	97% {
		clip-path: inset(0 100% 0 0);
	}
}
@keyframes revealWindowFromCenter {
	8% {
		clip-path: inset(50% 50% 50% 50%);
	}
	15% {
		clip-path: inset(0 0 0 0);
	}
	85% {
		clip-path: inset(0 0 0 0);
	}
	92% {
		clip-path: inset(50% 50% 50% 50%);
	}
}
@keyframes openWindow {
	8% {
		width: 0;
		height: 0;
	}
	15% {
		width: 100%;
		height: 100%;
	}
	85% {
		width: 100%;
		height: 100%;
	}
	92% {
		width: 0;
		height: 0;
	}

}
@keyframes gotoRight {
	15.38% {
		transform: translate3d(97vw, 0, 0);
		opacity: 1;
	}
	15.39% {
		opacity: 0;
	}
	84.61% {
		opacity: 0;
	}
	84.62% {
		transform: translate3d(97vw, 0, 0);
		opacity: 1;
	}
}
@keyframes gotoPos {
	15.38% {
		opacity: 0;
	}
	15.39% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	26.92% {
		transform: translate3d(-112%, 0, 0);
	}
	73.08% {
		transform: translate3d(-112%, 0, 0);
	}
	84.61% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	84.62% {
		opacity: 0;
	}
}





/*
	FORMULARIO
*/

.form .wrapper {
	position: relative;
	top: 0;
	left: 0;
	transform: none;
	background: #041E42;
	color: #fff;
	font-family: Avenir;
	font-weight: 100;
	line-height: 1;
}
#MSG input {
	position: relative;
	width: 100%;
	padding: 5px;
	background: transparent;
	color: #fff;
	border-width: 1px;
	border-style: solid;
}

.form .wrapper h1 {
	font-size: 48px;
	line-height: 58px;
}
.form .wrapper .msg_content {
	padding: 60px;
	font-size: 40px;
	line-height: 60px;
}
.form .wrapper .msg_subject {
	font-size: 48px;
}