@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap');
*											{box-sizing:content-box;}
body 										{margin:0px; padding:0px;}
h1											{font-weight:normal;}
h2											{font-weight:bold; font-size:2.5em; margin-bottom:2em;}
h3, p										{margin:0px;}
iframe										{border:0px; width:100%; height:calc( (50vw - 4em) * 0.5625); box-shadow:0px 0px 100px rgba(0,0,0,0.25);}

.two-columns								{display:flex; width:100%; align-content:center; align-items:center; font-family:Montserrat; color:#FFF; font-size:1.5em; margin-bottom:2em;}
.two-columns-stretch						{width:75%; margin:0px auto;}
.two-columns-equal > div					{width:50%;}
.two-columns-picture						{background-color:#333; background:linear-gradient(180deg, #444 0%, #000 100%); min-height:75vh;}
.two-columns-picture div:nth-child(1)		{width:30%;}
.two-columns-picture div:nth-child(2)		{width:70%; padding:0!important; background:center center no-repeat; background-size:cover; align-self:stretch;}
.two-columns-spaced > div					{padding:2em;}
.two-columns span							{border:0px; padding:0px; white-space:nowrap;}
.feature-list								{display:block; font-family:Montserrat; color:#000; font-size:0.75em; margin-bottom:5em;}
.feature-list table							{margin:0px auto; width:90%;}
.feature-list table tr td:nth-child(1) 		{width:6em;}
.feature-list img							{height:4em; padding:1em; border-radius:50%;}

.single-picture								{display:block; margin:2.5em 0px; text-align:center;}
.single-picture img							{width:75%;}

.button										{display:inline-block; width:90%; border-radius:5px; padding:1em 0px; text-align:center; color:inherit; text-decoration:none; font-weight:bold; margin:2em 0px; font-size:1.5rem;}
.button-white								{border:1px solid #FFF; background-color:rgba(255,255,255,0.25);}
.button-green								{background-color:#39c24c;}

.header										{background-color:#F00; height:15vh; border-top:1em solid #3481d8; font-size:1.5em; margin-bottom:0px;}
.header div									{background-repeat:no-repeat; background-size:auto 80%; background-position:center center; height:100%;}
.header div:nth-child(2)					{background-size:auto 70%;}
.blue										{background:#3481d8; background:linear-gradient(180deg, #3481d8 0%, #000099 100%); min-height:calc(100vh - 10vh - 1em);}

#CCM_popup *								{box-sizing:border-box!important;}
#CCM_popup label 							{display:inline-block; max-width:100%; margin-bottom:5px;}

@media only screen and (hover: none) and (pointer: coarse) and (max-width: 1024px)
{
	/* Tablets */	
	html									{font-size:200%;}
}

@media only screen and (hover: none) and (pointer: coarse) and (orientation:portrait), (max-width: 1024px)
{
	/* Vertical tablets and mobile */
	*										{box-sizing:border-box;}
	html									{font-size:200%;}
	h2										{font-size:2em; margin:0.5em; text-align:center;}
	iframe									{border:0px; width:100%; height:calc( (100vw - 2em) * 0.5625); box-shadow:0px 0px 100px rgba(0,0,0,0.25);}
	
	
	.two-columns							{flex-direction:column; margin-bottom:0;}
	.two-columns-stretch					{width:100%; margin:0px auto;}
	.two-columns-stretch div:nth-child(2)	{margin-bottom:1em;}
	.two-columns-equal > div				{width:100%;}
	.two-columns-spaced > div				{padding:1em;}
	.two-columns-picture					{height:inherit;}
	.two-columns-picture div				{width:100%!important;}
	.two-columns-picture div:nth-child(2)	{height:50vh!important;}
	.feature-list							{margin-bottom:0px;}
	.feature-list img						{height:5em; padding:0.5em;}
	.single-picture img						{width:90%;}


	.button									{margin:1em 1em 0.5em;}

	
	.header									{height:30vh; flex-direction:column-reverse;}
	.header div:nth-child(2)				{background-size:70% auto;}
	.blue									{height:inherit;}


}

@media only screen and (max-width: 1024px)
{
	html					{font-size:150%;}
}