@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/****************************  Main Elements ***************************/
html					{box-sizing:border-box; font-size:62.5%; line-height:62.5%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; scroll-behavior:smooth;}
*, *:before, *:after	{box-sizing:inherit;}
*:focus					{outline: none;}
body					{overflow-y:scroll; background-color:#fff; color:#222; height:100%; font-size:1.6rem; line-height:145%; direction:ltr; text-align:left; font-family: "Montserrat", arial, helvetica, sans-serif; margin:0; padding:0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth;}
@media screen and (max-width: 767px) {
	body	{font-size:3.7vw; line-height:145%;}
}

h1, h2, h3	{padding:0; margin-top:0; display:block; color:#000;}
h1			{font-size:300%; line-height:115%; font-weight:500; margin-bottom:0.9em;}
h2			{font-size:200%; line-height:120%; font-weight:900; margin-bottom:0.6em;}
h3			{font-size:150%; line-height:120%; font-weight:700; margin-bottom:0.5em;}

@media screen and (max-width: 1024px) {
	h1			{font-size:270%; line-height:115%; font-weight:500; margin-bottom:0.9em;}
	h2			{font-size:160%; line-height:120%; font-weight:900; margin-bottom:0.6em;}
	h3			{font-size:120%; line-height:120%; font-weight:700; margin-bottom:0.5em;}
}

@media screen and (max-width: 767px) {
	h1	{font-size:2.6rem; margin-bottom:5vw;}
	h2	{font-size:3.0rem; margin-bottom:3vw;}
	h3	{font-size:4.6vw; margin-bottom:2vw;}
}

p				{padding:0; margin-top:0; font-size:inherit;}

@media screen and (max-width: 767px) {
	p			{font-size:1.4rem;}
}

img						{display:block; max-width:100%; height:auto; border:0; padding:0; margin:0; -ms-interpolation-mode:bicubic;}
b, strong				{font-weight:bolder;}
strong					{color:#FF3250;}

a						{color:#222; text-decoration:underline; background-color:transparent; -webkit-tap-highlight-color:rgba(103,199,245,0.4);}
a:hover					{text-decoration:none; color:#000;}
a:active, a:focus		{text-decoration:none; color:#000; outline:none;}

/************************************ Layouts ***************************************/

.site-container		{position:relative;}
.full-size-row		{max-width:1920px; margin:0 auto;}
.area-wrapper		{max-width:1320px; width:95%; margin:0 auto;}
.content-section	{margin-bottom:70px;}
.content			{margin-top:50px;}

@media screen and (max-width: 1024px) {
	.content-section	{margin-bottom:30px;}
	.content			{margin-top:20px;}
}

@media screen and (max-width: 767px) {
	.area-wrapper		{width:92%;}
	.content-section	{margin-bottom:7vw;}
	.content			{margin-top:5vw;}
}

/************************************ col-2 ***************************************/

.col-2 {
	display: flex;
	flex-wrap: nowrap;
	gap: 50px;
}

.col-2 > div {
	flex: 1 1 50%;
	min-width: 0;
}

.col-2 img {
	width: 100%;
}

.col-2 p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
	.col-2 {
		gap: 30px;
	}
}

@media screen and (max-width: 767px) {
	.col-2 {
		flex-direction: column;
		gap: 0;
	}

	.col-2 > div {
		flex-basis: auto;
		width: 100%;
	}

	/* flatten text column so h2 can sit above the image */
	.col-2 > div:last-child {
		display: contents;
	}

	/* full-bleed image: break out of .area-wrapper side padding */
	.col-2 > div:first-child {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-bottom: 5vw;
	}

	.col-2 h2 {
		order: -1;
	}
}

/************************************ banner ***************************************/

.banner {
	position: relative;
}

.banner-legal {
	position: absolute;
    bottom: 0;
    width: stretch;
    background-color: rgba(0, 0, 0, .7);
    padding: 12px;
    font-size: 1.1rem;
    line-height: normal;
	color: #FFF;
}

.banner-legal a	{
	color: inherit;
}

@media screen and (max-width:767px) {
	.banner-legal	{position:initial; padding:3vw 3vw;}
}


/************************************** Content *************************************/
.content-section h1 {
	font-weight: 900;
}

.content-section h1,
.content-section h2 {
	color: #00072D;
}

.content-section h1 span {
	color: #FF3250;
}

/************************************ Utilities ***************************************/

.center {
	text-align:center;
}

.blue,
.content-section .blue {
	color: #01B3BB;
}

/************************************ adact game ***************************************/

.game-section {
	scroll-margin-top: 20px;
}

.game-section iframe {
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
}

/* Adact content is taller than 900px on narrow screens; match it so the iframe has no inner scrollbar */
/* tablet: game sits in the half-width col-2 column */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.game-section iframe	{height:1000px;}
}

@media screen and (min-width: 768px) and (max-width: 900px) {
	.game-section iframe	{height:1100px;}
}

@media screen and (max-width: 767px) {
	.game-section iframe	{height:1000px;}
}

@media screen and (max-width: 413px) {
	.game-section iframe	{height:1070px;}
}

@media screen and (max-width: 359px) {
	.game-section iframe	{height:1160px;}
}
