﻿.section1
{
	background-color: #F0F4F8;
	padding: 50px;
	border: solid 1px #C5D1DE;
}

.section1-header
{
	font-size: 12px;
	font-weight: bold;
	color: #213D66;
}

.section1-title
{
	font-size: 56px;
	font-family: "Interstate-compressed", sans-serif;
	font-weight:700;
	color: #101923;
}

.section1-text
{
	font-size: 16px;
	color: #595959;
}

.tabs
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
	gap: 20px;
	align-items: end;
	margin-top: 20px;
}

.tabs-item
{
	text-align: center;
	border: solid 1px #C5D1DE;
	padding: 15px;
	height: 100px;
	color: #444444;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}

.tabs-item:hover
{
	border: solid 1px #213D66;
}

.tabs-item-title
{
	margin-top: 10px;
}

.tabs-item.selected
{
	background-color: #213D66;
	border: solid 1px #213D66;
	color: white;
	height: 120px;
}

.section2
{
	padding: 50px 50px;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {




	/* Mobile */

	@media (max-width: 900px) {

		.section1 {
			background-color: #F0F4F8;
			padding: 25px;
			border: solid 1px #C5D1DE;
		}

		.section2 {
			padding: 25px 25px;
		}

		.tabs {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(50px, 120px));
			gap: 10px;
			align-items: end;
			margin-top: 20px;
			justify-content:center;
		}

		.tabs-item {
			font-size: 12px;
		}

		.tabs-item img {
			height: 21px;
			width: 21px;
		}
		
	}
}

