/*
	VARIABLES
*/
:root {
	--c-white: 		#fff;
	--c-light:		#f1f2f2;
	--c-green:		#80bc00;
	--c-blue:		#243746;
	--c-dark:		#131e29;
}

@font-face {
	font-family: 'Roboto Condensed';
	font-weight: normal;
	src: url('../fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf');
}
@font-face {
	font-family: 'Roboto Condensed';
	font-weight: bold;
	src: url('../fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf');
}

/*
	RESET
*/
*, *:before, *:after {
	box-sizing: inherit;
	animation-fill-mode: both !important;
}
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section,
main {
	display: block;
}
body {
	line-height: 1.2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	color: var(--c-light);
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 0;
	max-width: 1920px;
	padding-top: 56.25%;
	overflow: hidden;
	background-size: cover;
	z-index: 1;
	outline: 1px solid #000;
}
	.wrapper.preview {
		transform: translate(-50%, -50%) scale(.6);
	}

#BUTTONS {
	top: 50%;
	height: auto;
	padding-top: 0;
	margin-top: 28.125%;
	transform: translate(-50%, -100%);
	z-index: 1000;
	text-align: center;
}
	#BUTTONS .btns {
		width: 100%;
		padding: 1em 0;
		background: rgba(255, 255, 255, 0.75);
	}

.contenedor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}
.logo-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
}
.logo, .title {
	display: none;
}
.img-container {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.img {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.img-bg {
	display: none;
}
.info,
.price {
	position: absolute;
}
.cents {
	font-size: .666em;
}
#DESCRIPCION {
	width: 100%;
	font-size: 4.6785vw;
}
	#DESCRIPCION.big {
		font-size: 6.25vw;
	}
#SUBDESCRIPCION {
	width: 100%;
	font-size: 2.1875vw;
	font-weight: normal;
}
#DETAILS {
	position: absolute;
	text-align: right;
}

/*
	Oferta 1
*/
.offer_1 {
	text-align: right;
}
.offer_1 .contenedor,
.offer_3 .contenedor {
	background: url(../img/bg-rayos.png) no-repeat center center;
	background-size: cover;
}
.offer_1 .logo-bg {
	position: absolute;
	top: -1px;
	left: 0;
	z-index: -1;
	width: 53.125vw;
	height: 13.75vw;
	background: var(--c-green);
	clip-path: polygon(0 0, 0 100%, 100% 0);
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
}
.offer_1 .logo_1 {
	display: block;
	position: absolute;
	left: 3.25vw;
	top: 2.4vw;
	width: 14.43vw;
}
.offer_1 .img-container {
	left: 29.1667vw;
	top: 29.1667vw;
	width: 48.55vw;
	height: 48.55vw;
}
.offer_1 .img-bg-rotator {
	position: absolute;
	width: 51vw;
	height: 150%;
	top: 50%;
	left: 29.12vw;
	transform: translate(-50%, -50%) rotate(23.3deg);
}
	.offer_1 .img-bg {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #fff;
	}

.offer_1 #DETAILS {
	display: none;
}
.offer_1 .info {
	width: 28.65vw;
	top: 6.875vw;
	right: 5vw;
}
.offer_1 #DESCRIPCION {
	margin-bottom: 1.75vw;
}
.offer_1 .price {
	z-index: 10;
	top: 32.5vw;
	right: 5vw;
}
.offer_1 #PRICE {
	font-size: 17.1875vw; /* ANTES 15.625vw */
	line-height: 1;
	transform-origin: 100% 100%;
}
.offer_1 #SUBPRICE {
	font-size: 4.6785vw;
	line-height: 1;
	color: var(--c-blue);
}
.offer_1 .bg-price {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30vw;
	clip-path: polygon(0 42.7%, 100% 0, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(0 42.7%, 100% 0, 100% 100%, 0% 100%);
}
	.offer_1 .bg-price-color {
		width: 100%;
		height: 100%;
		background: var(--c-green);
	}


/* 
	Oferta 2
*/
.offer_2 .logo-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 16.458vw;
	height: 38vw;
	background: var(--c-blue);
	clip-path: polygon(0 0, 0 100%, 100% 0);
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
}
.offer_2 .logo_2 {
	display: block;
	position: absolute;
	left: 2.916vw;
	top: 2.4vw;
	width: 5.89vw;
}
.offer_2 .img-container {
	width: 53.125vw;
	height: 39vw;
	left: 39.5vw;
	top: 22.885vw;
}
	.offer_2 .img-container.img_big {
		height: 42vw;
		top: 23.385vw;
	}
	.offer_2 .img-container.img_bigger {
		top: 28.125vw;
		height: 48vw;
	}
.offer_2 .data-ofertas {
	position: relative;
	width: 100%;
	height: 100%;
	clip-path: polygon(68% 0, 100% 0, 100% 100%, 0% 100%, 0 93.15%);
	-webkit-clip-path: polygon(68% 0, 100% 0, 100% 100%, 0% 100%, 0 93.15%);
}
.offer_2 .data-ofertas:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/bg-rayos.png) no-repeat center center;
	background-size: cover;
}
.offer_2 #DETAILS {
	top: 1.875vw;
	right: 5vw;
	font-size: 4.1666vw;
	line-height: 1.075;
	color: var(--c-green);
	transform-origin: 100% 0;
}
.offer_2 .price {
	top: 20.1vw;
	right: 5vw;
}
.offer_2 #PRICE {
	font-size: 14.58333vw; /* ANTES 11.77vw */
	line-height: 1;
	transform-origin: 100% 100%;
}
.offer_2 #SUBPRICE {
	font-size: 3.5416vw;
	line-height: 1;
	color: var(--c-green);
	text-align: right;
}
.offer_2 .info {
	left: 12.9vw;
	bottom: 2.5vw;
}
.offer_2 #DESCRIPCION {
	margin-bottom: 0.15em;
}
	.offer_2 #DESCRIPCION.big {
		margin-bottom: 0;
	}
.offer_2 .rayo-bg {
	top: 0;
	left: -4vw;
	position: absolute;
	width: 68.54vw;
	height: 52.8125vw;
	background: var(--c-green);
	clip-path: polygon(33% 0, 100% 0, 0% 100%);
	-webkit-clip-path: polygon(33% 0, 100% 0, 0% 100%);
}


/* 
	Oferta 3
*/
.offer_3 .img-container {
	width: 34.9vw;
	height: 25.416vw;
	top: 31.5vw;
	left: 30.5vw;
}
.offer_3 .info {
	width: 100%;
	top: 45vw;
	text-align: center;
}
.offer_3 #DESCRIPCION {
	color: var(--c-green);
	font-size: 4.6875vw;
}
.offer_3 #SUBDESCRIPCION {
	font-weight: bold;
}
.offer_3 .price {
	top: 22.5vw;
	left: 55.2vw;
}
.offer_3 #PRICE {
	font-size: 18.75vw; /* ANTES 16.525vw */
}
.offer_3 #SUBPRICE {
	display: none;
}
.offer_3 #DETAILS {
	right: 0;
	top: 0;
	z-index: 10;
	padding-top: 2vw;
	padding-right: 3.4375vw;
	font-size: 4vw;
	line-height: 0.8;
}
	.offer_3 .details-bg {
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		width: 47.9vw;
		height: 14.6875vw;
		background: var(--c-green);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 14.9%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 14.9%);
	}
	.offer_3 #DETAILS p {
		transform-origin: 0 0;
	}
.offer_3 .title {
	display: block;
	position: relative;
	z-index: 100;
	padding-left: 5vw;
	text-transform: uppercase;
	transform: rotate(-7.9deg);
	overflow: hidden;
}
	.offer_3 .title-bg-rotator {
		position: absolute;
		bottom: 55vw;
		left: 50%;
		display: block;
		width: 150%;
		height: 150%;
		transform: rotate(-7.9deg) translateX(-50%);
	}
	.offer_3 .title-bg {
		width: 100%;
		height: 100%;
		background: #fff;
	}

.offer_3 #PRETITLE {
	padding: 0 0.4em 0.05em;
	margin-bottom: 0.8em;
	font-size: 2.5vw;
	background: var(--c-green);
}
.offer_3 #TITLE {
	position: relative;
	top: 1px;
	color: var(--c-blue);
	font-size: 10vw;
	line-height: 0.7;
}
.offer_3 #TITLE.no-pretitle {
	margin-top: .52em;
}




/*
	RESPONSIVE
*/

@media (min-aspect-ratio:16/9) {
	.wrapper {
		width: 0;
		height: 100%;
		max-width: none;
		max-height: 1080px;
		padding-left: 177.777778vh;
		padding-top: 0;
	}
}
@media (min-width: 1920px) and (min-height: 1080px) {
	.wrapper {
		width: 1920px;
		height: 1080px;
		padding: 0;
	}
}