/* --- Covid Page Styling --- */
/* -------------------------- */

.covid-intro {
	width: 100%;
	height: auto;
	padding: 100px 20px 50px 20px;
}

.covid-intro p {
	width: 100%;
}

.outline-arrow {
	width: 122px;
	height: 170px;
	background-image: url('/img/company/outline_arrow.svg');
	background-size: contain;
	display: none;
	background-repeat: no-repeat;
	position: absolute;
	left: 75%;
	animation: arrow 2s ease-in-out forwards;
}

@keyframes arrow {
	from {
		opacity: 0;
		top: 25%;
	}
	to {
		opacity: 1;
		top: 30%;
	}
}

.latest-update {
	height: auto;
	width: 100%;
	background-color: #E42127;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 200px auto;
}

.latest-update-text {
	width: 100%;
	height: 100%;
	display: block;
	padding: 30px 20px;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.latest-update-text h3 {
	color: #FFFFFF;
}

.latest-update-text p {
	color: #FFFFFF;
}

.latest-update-text a {
	color: #FFFFFF;
	text-decoration: underline;
}

a.covid-btn {
	text-decoration: none;
}

.covid-btn {
	font-family: 'Brown';
	font-size: 1em;
	color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0);
	border: 1px solid #FFFFFF;
	padding: 10px 15px;
	text-decoration: none;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.covid-btn:hover {
	background-color: rgba(255, 255, 255, 0.2);
	text-decoration: none;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.latest-update-image {
	width: 100%;
	height: 100%;
	background-image: url('/img/company/covid_update.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	
}

.webinar-section {
	width: 100%;
	height: auto;
	padding: 30px 20px;
	margin: 0px;
	position: relative;
}

.webinar-section h2 {
	text-align: center;
	padding-bottom: 60px;
}

.webinar-section h2:after {
	display: none;
}

.webinar-grid {
	width: 100%;
	height: auto;
	max-height: none;
	display: grid;
	grid-template-columns: 65px auto 100px;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
	overflow-x: scroll;
}

.outline-arrow-2 {
	width: 100px;
	height: 140px;
	background-image: url('/img/company/outline_arrow.svg');
	background-size: contain;
	display: none;
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -60px;
	top: 40px;
	display: block;
}

.webinar-grid p {
	margin: 0px;
	font-size: 0.80em;
}

a.upcoming-webinar,
a.video-button {
	width: 45px;
	height: 45px;
	grid-column: 1 / 2;
}

a.upcoming-webinar {
	background-color: #E42127;
	font-family: 'Brown';
	font-size: 0.5em;
	color: #FFFFFF;
	text-align: center;
	padding: 10px;
	margin: 10px;
	text-decoration: none;
}

span.big-num {
	font-size: 2.25em;
}

a.video-button {
	width: 65px;
	height: 65px;
	background-image: url('/img/company/covid_video.svg');
	background-size: 45px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	padding: 10px 10px 10px 0px;
}

.webinar-text-1,
.webinar-text-2,
.webinar-text-3,
.webinar-text-4,
.webinar-text-5,
.webinar-text-6,
.webinar-text-7,
.webinar-text-8,
.webinar-text-9,
.webinar-text-10,
.webinar-text-11,
.webinar-text-12,
.webinar-text-13,
.webinar-text-14,
.webinar-text-15 {
	grid-column: 2 / 3;
	padding: 20px 10px;
}

.webinar-slides-1,
.webinar-slides-2,
.webinar-slides-3,
.webinar-slides-4,
.webinar-slides-5,
.webinar-slides-6,
.webinar-slides-7,
.webinar-slides-8,
.webinar-slides-9,
.webinar-slides-10,
.webinar-slides-11,
.webinar-slides-12,
.webinar-slides-13,
.webinar-slides-14,
.webinar-slides-15 {
	grid-column: 3 / 4;
	padding: 20px 10px;
}

.webinar-text-1,
.webinar-slides-1 {
	height: 65px;
	grid-row: 1 / 2;
	border-top: 1px solid #E4E4E4;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-2,
.webinar-slides-2 {
	height: 65px;
	grid-row: 2 / 3;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-3,
.webinar-slides-3 {
	height: 65px;
	grid-row: 3 / 4;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-4,
.webinar-slides-4 {
	height: 65px;
	grid-row: 4 / 5;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-5,
.webinar-slides-5 {
	height: 65px;
	grid-row: 5 / 6;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-6,
.webinar-slides-6 {
	height: 65px;
	grid-row: 6 / 7;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-7,
.webinar-slides-7 {
	height: 65px;
	grid-row: 7 / 8;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-8,
.webinar-slides-8 {
	height: 65px;
	grid-row: 8 / 9;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-9,
.webinar-slides-9 {
	height: 65px;
	grid-row: 9 / 10;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-10,
.webinar-slides-10 {
	height: 65px;
	grid-row: 10 / 11;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-11,
.webinar-slides-11 {
	height: 65px;
	grid-row: 11 / 12;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-12,
.webinar-slides-12 {
	height: 65px;
	grid-row: 12 / 13;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-13,
.webinar-slides-13 {
	height: 65px;
	grid-row: 13 / 14;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-14,
.webinar-slides-14 {
	height: 65px;
	grid-row: 14 / 15;
	border-bottom: 1px solid #E4E4E4;
}

.webinar-text-15,
.webinar-slides-15 {
	height: 65px;
	grid-row: 15 / 16;
	border-bottom: 1px solid #E4E4E4;
}

.sub-link {
	font-family: 'Brown';
	font-style: italic;
	font-size: 0.75em;
	color: #000000;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
}

.link-arrow {
	height: 12px;
	width: 17px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	display: inline-block;
	margin: 0px 0px 0px 5px;
	background-image: url('/img/company/covid_link_arrow.svg');
}

.update-buckets {
	width: 100%;
	height: auto;
	padding: 0px;
}

.update-bucket-grid {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.update-bucket {
	width: 100%;
	height: auto;
	padding: 20px;
	text-align: center;
	margin: 30px auto;
}

.update-bucket h3,
.update-bucket p {
	max-width: 440px;
}

.update-bucket-1 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	border-right: 0px;
}

.update-bucket-2 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	border-right: 0px;
}

.update-bucket-3 {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
}

.update-bucket-4 {
	grid-column: 1 / 2;
	grid-row: 4 / 5;
	border-right: 0px;
}

.update-bucket-5 {
	grid-column: 1 / 2;
	grid-row: 5 / 6;
	border-right: 0px;
}

.update-bucket-6 {
	grid-column: 1 / 2;
	grid-row: 6 / 7;
}

.update-bucket-7 {
	grid-column: 1 / 2;
	grid-row: 7 / 8;
	border-right: 0px;
}

.update-bucket-8 {
	grid-column: 1 / 2;
	grid-row: 8 / 9;
	border-right: 0px;
}

.update-bucket-9 {
	grid-column: 1 / 2;
	grid-row: 9 / 10;
}

.update-bucket-10 {
	grid-column: 1 / 2;
	grid-row: 10 / 11;
	border-right: 0px;
}

.update-bucket-11 {
	grid-column: 1 / 2;
	grid-row: 11 / 12;
	border-right: 0px;
}

.update-bucket-12 {
	grid-column: 1 / 2;
	grid-row: 12 / 13;
}

.update-bucket-13 {
	grid-column: 1 / 2;
	grid-row: 13 / 14;
}

.update-bucket-14 {
	grid-column: 1 / 2;
	grid-row: 14 / 15;
}

.update-bucket-15 {
	grid-column: 1 / 2;
	grid-row: 15 / 16;
}

.update-bucket-16 {
	grid-column: 1 / 2;
	grid-row: 16 / 17;
}

.update-bucket-17 {
	grid-column: 1 / 2;
	grid-row: 17 / 18;
}

.update-bucket-18 {
	grid-column: 1 / 2;
	grid-row: 18 / 19;
}

.update-bucket-19 {
	grid-column: 1 / 2;
	grid-row: 19 / 20;
}

.update-bucket-20 {
	grid-column: 1 / 2;
	grid-row: 20 / 21;
}

.update-bucket-21 {
	grid-column: 1 / 2;
	grid-row: 21 / 22;
}

.update-bucket-22 {
	grid-column: 1 / 2;
	grid-row: 22 / 23;
}

.update-bucket-23 {
	grid-column: 1 / 2;
	grid-row: 23 / 24;
}

.update-bucket-24 {
	grid-column: 1 / 2;
	grid-row: 24 / 25;
}

.update-bucket-25 {
	grid-column: 1 / 2;
	grid-row: 25 / 26;
}

.update-bucket-26 {
	grid-column: 1 / 2;
	grid-row: 26 / 27;
}

.update-bucket-27 {
	grid-column: 1 / 2;
	grid-row: 27 / 28;
}

.general-statement {
	width: 100%;
	height: auto;
	background-color: #1A1A1A;
	padding: 30px 20px;
}

.general-statement p {
	color: #FFFFFF;
}

@media screen and (min-width: 48em) {
	.covid-intro {
		width: 100%;
		height: auto;
		padding: 200px 100px 100px 100px;
	}
	
	.covid-intro p {
		width: 50%;
	}
	
	.outline-arrow {
		display: block;
	}
	
	.latest-update {
		height: auto;
		grid-template-columns: 40% 60%;
		grid-template-rows: auto;
	}
	
	.latest-update-text {
		padding: 50px 100px;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	
	.latest-update-text h3 {
		color: #FFFFFF;
	}
	
	.latest-update-text p {
		color: #FFFFFF;
	}
	
	.latest-update-image {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	
	.webinar-section {
		width: 70%;
		padding: 100px 100px 20px 100px;
		margin: 0px 15%;
	}
	
	.webinar-grid {
		max-height: 365px;
	}
	
	.webinar-grid p {
		margin: 0px;
		font-size: 1em;
	}
	
	.webinar-text-1,
	.webinar-text-2 {
		padding: 18px 10px;
	}
	
	.update-buckets {
		padding: 100px;
	}
	
	.update-bucket-grid {
		grid-template-columns: 33% 34% 33%;
		grid-template-rows: auto auto auto auto auto auto auto auto auto;
	}
	
	.update-bucket {
		width: 100%;
		height: auto;
		padding: 20px 40px;
		text-align: center;
		margin: 50px auto;
	}
	
	.update-bucket-1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-2 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-3 {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
	}
	
	.update-bucket-4 {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-5 {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-6 {
		grid-column: 3 / 4;
		grid-row: 2 / 3;
	}
	
	.update-bucket-7 {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-8 {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-9 {
		grid-column: 3 / 4;
		grid-row: 3 / 4;
	}
	
	.update-bucket-10 {
		grid-column: 1 / 2;
		grid-row: 4 / 5;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-11 {
		grid-column: 2 / 3;
		grid-row: 4 / 5;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-12 {
		grid-column: 3 / 4;
		grid-row: 4 / 5;
	}
	
	.update-bucket-13 {
		grid-column: 1 / 2;
		grid-row: 5 / 6;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-14 {
		grid-column: 2 / 3;
		grid-row: 5 / 6;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-15 {
		grid-column: 3 / 4;
		grid-row: 5 / 6;
	}
	
	.update-bucket-16 {
		grid-column: 1 / 2;
		grid-row: 6 / 7;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-17 {
		grid-column: 2 / 3;
		grid-row: 6 / 7;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-18 {
		grid-column: 3 / 4;
		grid-row: 6 / 7;
	}
	
	.update-bucket-19 {
		grid-column: 1 / 2;
		grid-row: 7 / 8;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-20 {
		grid-column: 2 / 3;
		grid-row: 7 / 8;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-21 {
		grid-column: 3 / 4;
		grid-row: 7 / 8;
	}
	
	.update-bucket-22 {
		grid-column: 1 / 2;
		grid-row: 8 / 9;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-23 {
		grid-column: 2 / 3;
		grid-row: 8 / 9;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-24 {
		grid-column: 3 / 4;
		grid-row: 8 / 9;
	}
	
	.update-bucket-25 {
		grid-column: 1 / 2;
		grid-row: 9 / 10;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-26 {
		grid-column: 2 / 3;
		grid-row: 9 / 10;
		border-right: 1px solid #E4E4E4;
	}
	
	.update-bucket-27 {
		grid-column: 3 / 4;
		grid-row: 9 / 10;
	}
	
	.general-statement {
		padding: 100px 25%;
	}
	
	::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 3px;
	}
	::-webkit-scrollbar-button {
		
	}
	::-webkit-scrollbar-track {
		border-radius: 0px;
		background-color: #DDD;
	}
	::-webkit-scrollbar-track:horizontal {
		border-radius: 0px;
		background-color: #EFEFEE;
	}
	::-webkit-scrollbar-track-piece {
		
	}
	::-webkit-scrollbar-thumb {
		border-radius: 0px;
		background-color: #E42127;
	}
	::-webkit-scrollbar-corner {
		
	}
	::-webkit-resizer {
		
	}
}

@media screen and (min-width: 120em) {
	.update-bucket-1,
	.update-bucket-2,
	.update-bucket-4,
	.update-bucket-5,
	.update-bucket-7,
	.update-bucket-8,
	.update-bucket-10,
	.update-bucket-11,
	.update-bucket-13,
	.update-bucket-14,
	.update-bucket-16,
	.update-bucket-17,
	.update-bucket-19,
	.update-bucket-20,
	.update-bucket-22,
	.update-bucket-23,
	.update-bucket-25,
	.update-bucket-26 {
		border-right: none;
	}
}

/* --- SQL Page Styling --- */
/* ------------------------ */

.sql-intro {
	margin-top: 0px;
}

.sql-intro .page-halves:nth-of-type(1) {
	width: 100%;
}

.sql-intro .page-halves:nth-of-type(2) {
	display: none;
}

.sql-arrow {
	width: 25%;
	margin: 175px 15% auto 60%;
	transform: rotate(90deg);
	animation-name: arrow-move;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

.sql-overview {
	
}

.sql-overview h2:after {
	border-bottom: none;
}

.sql-icon {
	width: 80%;
	margin: 5%;
}

@keyframes arrow-move {
	from {
		margin: 175px 15% auto 60%;
	}
	to {
		margin: 175px 35% auto 40%
	}
}

@media screen and (min-width: 48em) {
	.sql-intro {
		margin-top: 100px;
	}
	
	.sql-intro .page-halves:nth-of-type(1) {
		width: 70%;
	}
	
	.sql-intro .page-halves:nth-of-type(2) {
		width: 30%;
		display: block;
	}
	
	.sql-icon {
		width: 70%;
		margin: 100px 30% auto 0px;
	}
}

/* --- Self Guided Tour Page Styling --- */
/* ------------------------------------- */

#selftour-land {
	background-image: none;
}

#selftour-graph {
	
}

#selftour-graph h2 {
	text-align: center;
}

#selftour-graph .page-halves {
	padding: 10px 50px;	
}

#selftour-graph .page-halves:nth-of-type(1) {
	border-right: 1px solid #CCCCCC;
}

#selftour-graph .page-halves h2 {
	display: none;
	height: 0px;
}

#selftour-graph .page-halves p {
	width: 100%;
	padding: 20px 10px;	
	margin: 0px;
	text-align: center;
}

#selftour-graph .page-halves img {
	width: 150px;
	position: relative;
}

#selftour-graph .page-halves:nth-of-type(1) img {
	right: 50%;
	margin-right: -75px;
}

#selftour-graph .page-halves:nth-of-type(2) img {
	left: 50%;
	margin-left: -75px;
}

#selftour-video {
	background-image: url('/img/new/selftour_full_video.jpg');
	background-size: cover;
	min-height: 380px;
}

#selftour-video .text {
	font-size: 2em;
}

#selftour-feature {
	background-image: none;
}

@media screen and (min-width: 48em) {
	#selftour-land {
		background-image: url('/img/new/selftour_land.jpg');
	}
	
	#selftour-video .text {
		font-size: 3em;
	}
	
	#selftour-feature {
		background-image: url('/img/new/selftour_feature.jpg');
	}
}