/*
Advertisement CSS
Shared CSS for use across all advertisements
*/

html {
	/* 16px base font size */
	font: 400 11px/1 "Sweetwater Condensed", "Arial Narrow", sans-serif;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html *, html *:before, html *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
html, body {
	margin: 0;
	overflow: hidden;
	padding: 0;
}
body {
	background: no-repeat center center / cover;
}
html, body, .candy {
	display: block;
	height: 100%;
	width: 100%;
}

/* Link */
a {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}
.candy a:not(.btn),
.link {
	border-bottom: 1px solid;
	color: inherit;
	cursor: pointer;
	display: inline-block;
}

/* candy wrapper */
.candy {
	-ms-flex-align: center;
	-webkit-align-content: center;
	align-content: center;
	background: no-repeat center center / cover #efefef;
	color: #262626;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 1.25rem;
	text-align: inherit;
	text-decoration: none;
}
.candy > section:first-child > :first-child {
	margin-top: 0;
}
.candy > section {
	width: 100%;
}

/* Typography */
small {
	font-size: 0.8em;
}
h1, h2, h3, h4, h5, h6 {
	font: inherit;
	margin: 0.7rem 0;
	padding: 0;
}
h1 {
	font-size: 2.25rem;
	font-weight: 600;
}
h1 small {
	display: block;
	font-size: 0.8em;
}
h2 {
	font-size: 1.25rem;
}
h2 small {
	font-size: 0.8em;
}
p {
	font-size: 1rem;
	line-height: 1.2;
	margin: 0.7rem 0;
}
strong {
	font-weight: 600;
}
.text--loud {
	text-transform: uppercase;
}
.text--normal {
	text-transform: none;
}
.color--blue {
	color: #036384;
}
.color--brown {
	color: #3f301f;
}
.color--dark {
	color: #262626;
}
.color--light {
	color: #fff;
}
.color--orange {
	color: #fe9102;
}
.color--red {
	color: #E13233;
}
.color--yellow {
	color: #FFCF00;
}
.color--inherit {
	color: inherit;
}
svg.color--inherit {
	fill: currentColor;
}

/* Images */
img,
svg {
	display: block;
	height: auto;
	margin: 0.7rem auto;
	max-width: 100%;
	width: auto;
}

img {
	border: 0;
}

svg {
	height: 40px\0;
	height: 40px\9;
}

@supports (-ms-ime-align:auto) {
	svg { height: 50px; }
}

/* Color themes */
.candy--blue,
.candy--dark,
.candy--red {
	color: #fff;
}
.candy--blue button,
.candy--blue .btn,
.candy--blue button:hover,
.candy--blue .btn:hover,
.candy--blue button:active,
.candy--blue .btn:active,
.candy--dark button,
.candy--dark .btn,
.candy--dark button:hover,
.candy--dark .btn:hover,
.candy--dark button:active,
.candy--dark .btn:active,
.candy--red button,
.candy--red .btn,
.candy--red button:hover,
.candy--red .btn:hover,
.candy--red button:active,
.candy--red .btn:active {
	background: #fff;
}
.candy--blue {
	background-color: #036384;
}
.candy--blue button,
.candy--blue .btn {
	color: #036384;
}
.candy--dark {
	background-color: #424242;
}
.candy--dark button,
.candy--dark .btn {
	color: #424242;
}
.candy--light {
	background-color: #efefef;
}
.candy--light button,
.candy--light .btn {
	background: #424242;
	color: #fff;
}
.candy--light-blue {
	background-color: #e7eff5;
	color: #036384;
}
.candy--light-blue button,
.candy--light-blue .btn {
	background: #036384;
	color: #fff;
}
.candy--light-blue button:hover,
.candy--light-blue .btn:hover {
	background: #035773;
	color: #fff;
}
.candy--light-blue button:active,
.candy--light-blue .btn:active {
	background: #034d66;
	color: #fff;
}
.candy--red {
	background-color: #E13233;
	color: #fff;
}
.candy--red button,
.candy--red .btn {
	color: #E13233;
}
.candy--red .color--yellow {
	color: #fbef74;
}

/* X-axis alignment */
.candy,
.align--center {
	-ms-flex-align: center;
	-webkit-align-content: center;
	align-content: center;
	text-align: center;
}
.align--center img,
img.align--center {
	margin-left: auto;
	margin-right: auto;
}
.align--left {
	-ms-flex-align: start;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	text-align: left;
}
.align--left img,
img.align--left {
	margin-left: 0;
	margin-right: auto;
}
.align--right {
	-ms-flex-align: end;
	-webkit-align-content: flex-end;
	align-content: flex-end;
	text-align: right;
}
.align--right img,
img.align--right {
	margin-left: auto;
	margin-right: 0;
}

/* Y-axis alignment */
.candy,
.valign--middle {
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.valign--bottom {
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.valign--top {
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.valign--justify {
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

/* buttons */
button::-moz-focus-inner {
	padding: 0;
	border: 0
}
button,
.btn {
	border: none;
	border-radius: 0.2055em;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: 0.9125rem;
	margin: auto;
	padding: 0.8219em 1.781em 0.548em;
	text-align: center;
	text-transform: uppercase;
}
button:hover,
.btn:hover {
	transform: scale(1.05);
}
button:active,
.btn:active {
	transform: scale(1);
}
button,
.btn,
.candy .btn--dark {
	background: #424242;
	color: #fff;
}
button:hover,
.btn:hover,
.candy .btn--dark:hover {
	background: #222;
}
button:active,
.btn:active,
.candy .btn--dark:active {
	background: #111;
}
.candy .btn--blue {
	background: #036384;
	color: #fff;
}
.candy .btn--blue:hover {
	background: #035773;
	color: #fff;
}
.candy .btn--blue:active {
	background: #034d66;
	color: #fff;
}
.candy .btn--brown {
	background: #402e1f;
}
.candy .btn--brown:hover {
	background: #342619;
}
.candy .btn--brown:active {
	background: #261c13;
}
.candy .btn--light,
.candy .btn--light:hover,
.candy .btn--light:active {
	background: #fff;
	color: #424242;
}
.candy .btn--orange {
	background: #fe9102;
	color: #fff;
}
.candy .btn--orange:hover {
	background: #f58402;
	color: #fff;
}
.candy .btn--orange:active {
	background: #eb7a02;
	color: #fff;
}
.candy .btn--red {
	background: #E13233;
	color: #fff;
}
.candy .btn--red:hover {
	background: #d43338;
	color: #fff;
}
.candy .btn--red:active {
	background: #c73237;
	color: #fff;
}

@media screen and (min-width: 180px) {
	html {
		font-size: 6.1539vw;
	}
}
@media screen and (min-width: 293px) {
	button,
	.btn {
		font-size: 16.45px;
	}
}
@media screen and (min-width: 376px) {
	html {
		font-size: 23px;
	}
}

@media screen and (max-width: 500px) {
	svg {
		height: 40px;
	}
}

@media screen and (orientation: landscape) {
	html {
		font-size: 4.5vw;
	}
	h1, h2, h3, h4, h5, h6, p, img, svg {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
	h1 {
		font-size: 1.9rem;
	}
	h1.mobile-single-line small {
		display: inline;
		font-size: inherit;
	}
	button,
	.btn {
		font-size: 0.9rem;
	}
}