/* Spring Sale */
:root
{
	--aug-sale-light-blue: #59A6EE;
	--aug-sale-dark-blue: #0D294E;
	--aug-sale-yellow: #FFFF3F;
	--aug-sale-white: #FFF;
}

.aug_ad01 {
	max-width: 100%;
	background: var(--aug-sale-light-blue);
	user-select: none;
}

#l-banner .aug_ad01 {
	padding: 1rem;
}

#l-banner .aug_ad01 > .aug_ad01_background {
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	user-select: none;
	pointer-events: none;
	z-index: 1;
}

.aug_ad01_content {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 3.4rem 1fr;
	z-index: 2;
	color: var(--aug-sale-dark-blue);
	height: 100%;
	gap: 1rem;
	font-family: Outfit, 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
}

.aug_ad01_title {
	font-family: Solway, 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
	text-transform: uppercase;
	align-content: center;
	display: grid;
	grid-template-areas: "one three" "two three";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(2, max-content);
	gap: 0 0.5rem;
	align-items: start;
	justify-items: center;
	color: var(--aug-sale-white);
	width: min-content;
	justify-self: center;
	margin-top: 1rem;
}

.aug_ad01_title > .one {
	grid-area: one;
	font-size: 3rem;
	line-height: 3rem;
}

.aug_ad01_title > .two {
	grid-area: two;
	font-size: 1.8rem;
	line-height: 1.8rem;
}

.aug_ad01_title > .three {
	grid-area: three;
	font-size: 5rem;
	line-height: 4.8rem;
	color: var(--aug-sale-yellow);
}

.aug_ad01_text {
	display: grid;
	grid-template-rows: 1.4fr 1fr max-content;
	grid-template-columns: 1fr;
	gap: 0.5rem 0;
	align-items: center;
	font-size: 1.7rem;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	line-height: 2.2rem;
	letter-spacing: 2px;
	width: min-content;
	justify-self: center;
}

.aug_ad01_tagline strong {
	display: block;
}

.aug_ad01_code {
	font-size: 1.5rem;
	white-space: nowrap;
}

.aug_ad01_codebox {
	background: var(--aug-sale-yellow);
	color: var(--aug-sale-dark-blue);
	display: inline-block;
	user-select: all;
	font-weight: 700;
	line-height: 2.5rem;
	padding: 0 12px;
	font-size: 1.5rem;
}

.aug_ad01_ends {
	font-size: 1rem;
}

@media (min-width: 600px)
{
	.aug_ad01_content {
		grid-template-rows: 5rem 1fr;
	}

	.aug_ad01_title {
		margin-top: 2rem;
	}

	.aug_ad01_text {
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		margin-top: 1rem;
		gap: 0 1rem;
	}

	.aug_ad01_tagline {
		justify-self: end;
	}

	.aug_ad01_tagline strong {
		display: inline;
	}

	.aug_ad01_code {
		justify-self: start;
	}

	.aug_ad01_ends {
		grid-column: 1 / -1;
	}

}

@media (min-width: 768px)
{
	.aug_ad01_content {
		grid-template-rows: 11rem 5rem;
	}

	.aug_ad01_title > .one {
		font-size: 7rem;
		line-height: 7rem;
	}

	.aug_ad01_title > .two {
		font-size: 4.2rem;
		line-height: 2rem;
	}

	.aug_ad01_title > .three {
		font-size: 13rem;
		line-height: 11rem;
	}

	.aug_ad01_text {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 1fr;
		gap: 0 2rem;
		margin: 0 auto;
		margin-top: 1rem;
		white-space: nowrap;
	}

	.aug_ad01_text:has(.aug_ad01_ends) {
		grid-template-columns: 1fr max-content 1fr;
	}

	.aug_ad01_ends {
		grid-column: unset;
		justify-self: start;
	}
}

/* AD02 Banner */
.aug_ad02 {
	font-family: 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
	text-transform: uppercase;
	text-align: center;
	user-select: none;
	font-size: 1.2rem;
	line-height: 1.4rem;
	background: var(--aug-sale-light-blue);
	color: var(--aug-sale-dark-blue);
}

.aug_ad02_background {
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.aug_ad02_content {
	font-family: Outfit, 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
	position: relative;
	z-index: 2;
}

.aug_ad02_title {
	font-family: Solway, 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
	padding: 1rem 0;
}

/* Hide the second title */
.aug_ad02_title ~ .aug_ad02_title {
	display: none;
}

.aug_ad02_title > .one {
	display: block;
	color: var(--aug-sale-white);
	font-size: 3rem;
	line-height: 3rem;
}

.aug_ad02_title > .two {
	display: block;
	color: var(--aug-sale-white);
	font-size: 1.8rem;
	line-height: 1.8rem;
}

.aug_ad02_title > .three {
	display: block;
	color: var(--aug-sale-yellow);
	font-size: 3rem;
	line-height: 3rem;
}

.aug_ad02_content .portrait img {
	max-height: 10rem;
}

.aug_ad02_discount {
	font-weight: 500;
	margin-bottom: 1rem;
	font-size: 1.4rem;
	letter-spacing: 2px;
}

.aug_ad02_discount > .line2 > strong {
	font-weight: 800;
}

.aug_ad02_code {
	margin-bottom: 1rem;
}

.aug_ad02_code > .line3 {
	font-size: 1.4rem;
	line-height: 3rem;
	font-weight: 500;
}

.aug_ad02_code > .line4 {
	user-select: all;
	display: inline-block;
	padding: 0 1rem;
	font-size: 1.4rem;
	line-height: 3rem;
	font-weight: 700;
	background: var(--aug-sale-yellow);
	color: var(--aug-sale-dark-blue);
}

/* AD02 Portrait Layout */

.aug_ad02.portrait .aug_ad02_content {
	display: grid;
	grid-auto-rows: 1fr;
	grid-template-columns: 1fr;
	align-items: center;
	height: 100%;
	font-size: 1.8rem;
	line-height: 2.2rem;
}

.aug_ad02.portrait .aug_ad02_title {
	font-size: 4rem;
	line-height: 4.2rem;
	padding: 0;
}

.aug_ad02.portrait .aug_ad02_title ~ .aug_ad02_title {
	display: block;
}

.aug_ad02.portrait .aug_ad02_title > .one {
	display: block;
	font-size: 4.5rem;
	line-height: 4.5rem;
}

.aug_ad02.portrait .aug_ad02_title > .two {
	display: block;
	font-size: 2.8rem;
	line-height: 2.8rem;
}

.aug_ad02.portrait .aug_ad02_title > .three {
	display: block;
	font-size: 4.8rem;
	line-height: 4.8rem;
}

.aug_ad02.portrait .aug_ad02_discount {
	font-size: 2.2rem;
	line-height: 2.5rem;
}

.aug_ad02.portrait .aug_ad02_code {
	align-self: start;
}

.aug_ad02.portrait .aug_ad02_code > .line3 {
	font-size: 2.4rem;
	line-height: 2.4rem;
	font-weight: 500;
	margin-bottom: 1rem;
}

.aug_ad02.portrait .aug_ad02_code > .line4 {
	font-size: 2rem;
	line-height: 2.6rem;
	font-weight: 800;
	letter-spacing: 4px;
	padding: 1rem 1.5rem;
}

/* AD02 Landscape Layout */
.aug_ad02.landscape {
	letter-spacing: 2px;
	font-size: 1.8rem;
}

.aug_ad02.landscape .aug_ad02_title {
	display: grid;
	grid-template-areas: "one three" "two three";
	grid-template-columns: repeat(2, min-content);
	grid-template-rows: repeat(2, min-content);
	align-items: start;
	justify-items: center;
	gap: 0 0.5rem;
	width: fit-content;
	justify-self: center;
}

.aug_ad02.landscape .aug_ad02_title ~ .aug_ad02_title {
	display: none;
}

.aug_ad02.landscape .aug_ad02_title > .one {
	grid-area: one;
	font-size: 3rem;
	line-height: 3rem;
}

.aug_ad02.landscape .aug_ad02_title > .two {
	grid-area: two;
	font-size: 1.8rem;
	line-height: 1rem;
}

.aug_ad02.landscape .aug_ad02_title > .three {
	grid-area: three;
	font-size: 5rem;
	line-height: 4rem;
}

.aug_ad02.landscape .aug_ad02_discount > div,
.aug_ad02.landscape .aug_ad02_code > div,
.aug_ad02.landscape .aug_ad02_ends > div {
	display: inline-block;
}

.aug_ad02.landscape .aug_ad02_discount {
	margin-top: 1rem;
}

.aug_ad02.landscape .aug_ad02_code {
	font-size: 1.4rem;
	font-weight: 400;
}

.aug_ad02.landscape .aug_ad02_code > .line4 {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 2.4rem;
}

.aug_ad02.landscape .aug_ad02_ends {
	font-size: 1rem;
}

/* AD03 - Mini Banner */

.aug_ad03 {
	background: var(--aug-sale-light-blue);
	color: var(--aug-sale-dark-blue);
	font-family: 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
	width: 100%;
	max-width: 100%;
	height: 3rem;
	max-height: 3rem;
	overflow: hidden;
}

.aug_ad03_background {
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 1;
	width: inherit;
	max-width: inherit;
	height: inherit;
	object-fit: cover;
	object-position: center;
}

.aug_ad03_content {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: max-content max-content;
	gap: 0 2rem;
	width: max-content;
	font-size: 1.3rem;
	text-transform: uppercase;
	align-items: center;
	user-select: none;
	letter-spacing: 1px;
	height: inherit;
	font-family: Outfit, 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
}

.aug_ad03_content > div {
	padding: 0.2rem 0;
}

.aug_ad03_title {
	display: none;
	font-family: Solway, 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
	color: var(--aug-sale-white);
}

.aug_ad03_title > .one {
	grid-area: one;
	font-size: 1.5rem;
	line-height: 1.4rem;
}

.aug_ad03_title > .two {
	grid-area: two;
	font-size: .9rem;
	line-height: .8rem;
}

.aug_ad03_title > .three {
	grid-area: three;
	font-size: 2.5rem;
	line-height: 2.2rem;
	color: var(--aug-sale-yellow);
}

.aug_ad03_tagline > strong {
	display: none;
}

.aug_ad03_code {
	font-size: 1.3rem;
}

.aug_ad03_codebox {
	user-select: all;
	font-weight: 700;
	background: var(--aug-sale-yellow);
	color: var(--aug-sale-dark-blue);
	font-weight: 700;
	font-size: 1.2rem;
	padding: 0.3rem 0.7rem;
	display: inline-block;
	line-height: 1.7rem;
}

.aug_ad03_ends {
	display: none;
	font-size: 1.3rem;
}

@media (min-width: 400px)
{
	.aug_ad03_tagline > strong {
		display: inline;
	}
}

@media (min-width: 900px)
{
	.aug_ad03_content {
		grid-template-columns: max-content max-content max-content max-content;
		gap: 0 2rem;
	}

	.aug_ad03_title {
		display: grid;
		grid-template-areas: "one three" "two three";
		grid-template-columns: repeat(2, min-content);
		grid-template-rows: repeat(2, min-content);
		align-items: start;
		justify-items: center;
		gap: 0 0.5rem;
	}

	.aug_ad03_ends {
		display: block;
		font-size: 1rem;
	}

	.aug_ad03_code {
		font-size: 1.2rem;
	}
}

@media (min-width: 1024px)
{
	.aug_ad03_content {
		gap: 4rem;
	}
}

/* AD11 */
.aug_ad11 {
	display: none;
}

@media(min-width: 768px)
{
	.aug_ad11 {
		position: relative;
		overflow: hidden;
		background: var(--aug-sale-light-blue);
		color: var(--aug-sale-dark-blue);
		text-align: center;
		display: block;
		text-transform: uppercase;
		font-family: Outfit, 'Open Sans', Arial, Helvetica, 'DejaVu Sans', sans-serif;
		font-size: 1.3rem;
		user-select: none;
	}

	.aug_ad11_background {
		display: block;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		z-index: 1;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.aug_ad11_content {
		position: relative;
		z-index: 2;
		display: grid;
		grid-auto-rows: max-content;
		gap: .5rem;
		padding: .6rem .5rem 1rem .5rem;
		letter-spacing: 1px;
	}
	
	.aug_ad11_tagline {
		font-size: 1.6rem;
		line-height: 2rem;
		
	}

	.aug_ad11_codebox {
		font-weight: 800;
		user-select: all;
		background: var(--aug-sale-yellow);
		color: var(--aug-sale-dark-blue);
		font-size: 1.1rem;
		padding: 0.6rem 1rem;
		line-height: 1.1rem;
	
	}
}