:root {
	--number-of-side-scoll-containers: 7;

	--page-padding: calc(var(--layout-width) * .2);
	--page-content-width: calc(var(--layout-width) - (var(--page-padding) * 2));

	--flex-max-third: calc(var(--page-content-width) / 3);

	--default-font-size: 20px;

	--accent-color: #012943; /* dark navy*/
	--accent-color-varient: #0685D9; /* royal blue*/

	--light-font: #d5d5d5;
	--dark-font: #222222;
}

@font-face {
	font-family: "Kelly Slab";
	src: url("/fonts/KellySlab-Regular.ttf");
}

@font-face {
	font-family: "Roboto Flex";
	src: url("/fonts/RobotoFlex-Regular.ttf");
}

html {
	font-family: "Roboto Flex", "Helvetica", "sans-serif";
}

body,
html {
	margin: 0;
	padding: 0;
}

main {
	font-size: var(--default-font-size);
	color: var(--dark-font);
}

h1 {
	font-size: 72rem;
	margin:10rem 0 20rem;
}

h3 {
	font-size: 28rem;
}

h1,
h3 {
	color: var(--accent-color);
	font-family: "Kelly Slab", "Ariel", "serif";
	font-weight: lighter;
}

.flex {
	align-items: center;
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
}

.flex.flexAlignTop {
	align-items: flex-start;
}

.flex.flexStretch {
	align-items: stretch;
}

.flex.nowrap {
	align-items: stretch;	
	flex-wrap: nowrap;
}

.flexHalf,
.flexOneThird,
.flexTwoThirds {
	box-sizing: border-box;
}

.flexHalf:first-child,
.flexOneThird:first-child,
.flexTwoThirds:first-child {
	padding-right: 40rem;
}

.flexHalf {
	flex: 0 1 50%;
}

.flexOneThird {
	flex: 1 0 33%;
	max-width: var(--flex-max-third);
}

.flexTwoThirds {
	flex: 0 1 66%;
}

.flex.flexTwoThirds {
	display: flex;
	flex-grow: 1;
}

.pagePadding {
	padding-left: var(--page-padding);
	padding-right: var(--page-padding);
	box-sizing: border-box;
}

.pagePadding.noWrapRight {
	padding-right: 0;	
}

.pagePadding.noWrapLeft {
	padding-left: 0;	
}

main {
	padding-bottom: 0rem;
	padding-top: 0rem;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

a,
button {
	cursor: pointer;
}

a {
	color: var(--accent-color-varient);
	text-decoration: none;
}

.flexOneThird.container {
	align-items: center;
    background: none;
    border: 4rem solid var(--dark-font);
    border-radius: 30rem;
    color: var(--dark-font);
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    font-size: 18rem;
    justify-content: space-between;
    margin-right: 40rem;
    opacity: .2;
    padding: 20rem 40rem;
    text-align: center;
    transition: .3s ease opacity;
}

.mainInterior .flexOneThird.container,
.container.highlight {
	border: 4rem solid var(--accent-color-varient);
	opacity: 1;
}

.mainInterior .flexOneThird.container {
	flex: 0 0 33%;
	margin: 0 0 20rem 0;
}

.container button {
	background: transparent;
	border: transparent;
}

.container .aStyle1 {
	color: var(--accent-color-varient);
	border: 2rem solid var(--accent-color-varient);
	border-radius: 30rem;
	padding: 4rem 20rem;
    text-decoration: none;
    transition: .3s ease all;
    width: 100%;
}

.container .aStyle1:hover {
	box-shadow: inset 350rem 0 0 0 var(--accent-color-varient);
	border-color: var(--accent-color-varient);
    color: var(--light-font);	
}

.container p {
	font-size: 16rem;
	text-align: left;
}

.container li {
	font-family: "Roboto Flex", "Helvetica", "sans-serif";
	font-size: 16rem;
	line-height: 32rem;
	margin-left: 20rem;
	text-align: left;
}

.bttnList {	
	background: none;
	border: none;
	font-family: "Kelly Slab", "Times New Roman", "serif";
	font-size: 24rem;
	line-height: 50rem;
}

.highlight {
	color: var(--accent-color-varient);
}

.divInputContainer {
	text-align: left;
	margin-right: 20rem;
	width: 100%;
}

.divInputContainer:last-child {
	margin-right: 0;
}

.divInputLabel {
	font-size: 18rem;
	margin-bottom: 10rem;
	text-align: left;
}

input,
textarea {
	background: transparent;
	border: 2rem solid var(--accent-color-varient);	
	border-radius: 30rem;
    box-sizing: border-box;
    font-size: 18rem;
    padding: 8rem 20rem;
    width: 100%;
}

.divMessageContainer {
	margin-top: 20rem;
}

textarea {
    height: 150rem;
    max-height: 300rem;
    resize: none;
}

.required {
	color: var(--accent-color-varient);
}

p {
	line-height: 36rem;
	margin: 0 0 20rem 0;
}

.textRight {
	text-align: right;
}

.aStyle1 {
	background: transparent;
	border: 2rem solid var(--light-font);
	border-radius: 30rem;
	font-size: 16rem;
	color: var(--light-font);
	padding: 6rem 20rem;
	text-decoration: none;
	transition: .3s ease all;
}

.aStyle1 + .aStyle1 {
	margin-left: 20rem;
}

.aStyle1:hover {
	box-shadow: inset 250rem 0 0 0 var(--light-font);
	border-color: var(--light-font);
    color: var(--accent-color-varient);	
}

.aStyle1.active {
	background: var(--light-font);
	border-color: var(--light-font);
    color: var(--accent-color-varient);	
}

.aStyle1.active:hover {
	box-shadow: inset 250rem 0 0 0 var(--accent-color-varient);
	border-color: var(--accent-color-varient);
    color: var(--light-font);	
}

.bttnStyle2 {
	background: var(--accent-color-varient);
	border-color: transparent;
	border-radius: 30rem;
	font-size: 16rem;
	color: var(--light-font);
	margin-top: 20rem;
	padding: 6rem 20rem;
	transition: .3s ease all;
}

.bttnStyle2:hover {
	box-shadow: inset 200rem 0 0 0 var(--light-font);
    color: var(--accent-color-varient);	
}

.accentBackground {
	background-color: var(--accent-color-varient);
	color: var(--light-font);
}

.darkBackground {
	background-color: var(--accent-color);
	color: var(--light-font);
}

.darkBackground.flex {
	padding-bottom: 20rem;
	padding-top: 20rem;
}

/* Desktop portrait layout. */
@media (min-width: 742px) and (max-width: 1330px) {
	:root {
		--page-padding: calc(var(--layout-width) * .1);
	}

	main {
		padding-bottom: 40rem;
		padding-top: 40rem;
	}

	.pagePadding.noWrapRight {
		padding-right: var(--page-padding);
	}

	.flex.nowrap {
		flex-wrap: wrap;
	}

	.flexOneThird {
		max-width: 100%;
	}

	.flexTwoThirds {
		flex: 0 0 100%;
	}

	.flexOneThird.container {
		border-color: var(--accent-color-varient);
	    flex: 1 0 25%;
	    margin: 20rem;
		opacity: 1;
		pointer-events: none;
	}

	.container li,
	.container p {
		font-size: 24rem;
		line-height: 44rem;
	}	

	.bttnList {
		display: none;
	}	
}

/* Mobile portrait layout. We do not implement a mobile landscape layout because we do not see value in it. */
@media (max-width: 742px) {
	:root {
		--page-padding: calc(var(--layout-width) * .05);
	}

	h1 {
		font-size: 32rem;
	}

	main {
		font-size: 18rem;
	}

	.flex {
		flex-direction: column;
		width: 100%;
	}

	.flexOneThird,
	.flexTwoThirds {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.flexOneThird.container {
		border-color: var(--accent-color-varient);
		flex: 0 0 33%;
		margin: 0 0 20rem 0;
		opacity: 1;
		pointer-events: none;
	}
	
	.pagePadding.noWrapRight {
		padding-right: var(--page-padding);
	}

	main {
		padding-bottom: 20rem;
		padding-top: 20rem;
	}

	.textRight {
		text-align: left;
	}

	.aStyle1 {
		margin: 0 0 20rem;
		width: 90%;
	}

	.aStyle1 + .aStyle1 {
		margin: 0 0 20rem;
	}

	.aStyle1.active,
	.aStyle1:hover {
		box-shadow: inset 600rem 0 0 0 var(--light-font);
		border-color: var(--light-font);
	    color: var(--accent-color-varient);	
	}

	.bttnStyle2 {
		width: 100%;
	}

	.bttnList {
		display: none;
	}	

	.divInputContainer {
		margin: 0 0 20rem;
	}
}