@charset "utf-8";

html, body {
	font-family: "Avenir", Helvetica, Verdana, Arial, sans-serif;
	height: 100%;
	width: 100%;
	max-width: 100%;
	font-size: calc(12px + 0.6vw);
	line-height: 1.1;
	color: #FDFAC2;
	background: #053786;
	text-align: justify;
}
h1 {
	font-size: 2.5em;
	line-height: 1.1;
	color: #FFFF96;
	text-align:	center;
	margin: 2vw auto;
	font-weight: normal;
}
h2 {
	font-size: 2.0rem;
	line-height: 1.1;
	text-align: center;
	font-weight: normal;
	margin: 0.5vw auto;
}
h3 {
	font-size: 2.0rem;
	line-height: 1.1;
	text-align: center;
	font-weight: 500;
}
h4 {
	font-size: 1.6rem;
	line-height: 1.1;
	text-align: center;
	margin: 1vw auto;
	font-weight: 500;
}
p {
	font-size: 1rem;
	line-height: 1.1;
	justify-content: center;
	margin: 0.5vw 3vw;
	font-weight: normal;
}
ul.list {
	list-style-type: disc;
	font-size: 1rem;
	line-height: 1.1;
	margin: 0.5vw 1vw 0.5vw 5vw;
}
li.list-item {
	margin-bottom: 1vw;
}
ol.list {
	font-size: 2.5vmin;
	line-height: 1.1;
	margin: 0.5vw 0.5vw 0.5vw 0.5vw;
}
.scroll-tracker {
	height: 10px;
	position: fixed;
	top: 2px;
	width: 100%;
}
.yellow-container {
	background-color: #FFFF96;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0.5vw 0;
	height: auto;
	color: #053786;
}
.yellow-container.schooner {
	background-image: url('../img/SchoonerSingleMast.png');
}
.yellow-container.container {
	background-image: url('../img/ContainerShip.png');
}
.yellow-container.ketches {
	background-image: url('../img/KetchesTwo.png');
}
.blue-container {
	background-color: #053786;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	padding: 1vw 0;
	height: auto;
	color: #FFFF96;
}
.blue-container.schooner {
	background-image: url('../img/SchoonerMultisail.png');
}
.blue-container.luxury {
	background-image: url('../img/LuxuryYacht.png');
}
.image-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0 1vw;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin: 1vw auto;
	height: auto;
}
.image-container.blue {
	background-color: #053786;
}
.image-container.yellow {
	background-color: #FFFF96;
}
/* Sailors Dream/Nightmare */
.image-pair {
	margin: 1vw auto 1vw;
	width: auto;
	height: calc(180px + 10vw);
	border-radius: 0.5vw;
}
.image-caption {
	display: grid;
	justify-content: center;
	align-items: center;
	margin: 1vw auto;
	width: auto;
	height: auto;
}
.footer-x{
	font-size: 1rem;
	line-height: 1.1;
	color: #999999;
	text-align:	center;
	justify-content: center;
	margin: 0.5vw 3vw;
	font-weight: normal;
}
img.logo{
	display: block;
	justify-content: center;
	align-self: center;
	width: 20%;
	height: auto;
	max-width: 300px;
	margin: 3vw auto;
}
.app-store-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	padding: 0 .2vw;
	margin: 2vw auto;
}
.store-pack {
	display: grid;
	margin: .25vw auto;
	width: auto;
	height: auto;
	justify-content: center;
	align-items: center;
}
.store-badge {
	display: grid;
	align-items: center;
	margin: .5vw auto;
	width: calc(100px + 10vw);
	height: auto;
}
.caption {
	display: grid;
	align-items: center;
	justify-content: center;
	color: #4AC4CB;
	font-size: 1rem;
	margin:.2vw auto;
	line-height: 1.1;
}
.section-container {
	margin: 1vw auto;
	height: auto;
}
/* Carrier In Action */
.video-selector {
	display: flex;
	flex-direction: row;
	width: 30%;
	height: auto;
	margin:  2vw auto;
	justify-content: center;
	align-items: center;
	border-radius: 2.0vw;
	border: 0.6vw solid #053786;
}
.horizontal-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 45%;
	overflow-x: auto;
	margin: 1vw 2vw;
}
.horizontal-scroller.screens {
	grid-auto-columns: 27%;
}
.horizontal-scroller.mixed {
	grid-auto-columns: 50%;
}
.media-element {
	display: grid;
	grid-template-rows: min-content;
	padding: 0px 1vw;
	gap: 2vw;
}
.media-element.mixed {
	gap: 0.5vw;
}
/* How to Videos */
.media-video {
	width: 51%;
	height: auto;
	border-radius: 1.0vw;
	border: 0.2vw solid #053786;
	object-fit: cover;
}
.media-video.mixed {
	width: auto;
	height: 20.0vh;
	border-radius: 10.0px;
	border: 0.2vw solid #FFFF96;
	margin: 0 20vw;
	object-fit: cover;
}
/* Screen Shots */
.media-screen {
	width: 30%;
	height: auto;
	border-radius: 0.5vw;
	border: 0.2vw solid #FFFF96;
	object-fit: cover;
}
.text-link, .text-link:link, .text-link:visited  {
	display: grid;
	color: #00969C;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.1;
	font-weight: 400;
	margin: 1vw auto;
	justify-content: center;
	text-decoration: none;
}
.text-link:hover, .text-link:active {
	text-decoration: underline;
	font-weight: 600;
	color: #0090A7;
}
@supports (animation-timeline: view()) {
	.scroll-tracker {
		z-index: 1000;
		background-color: #00B259;
		animation-name: tracker;
		animation-duration: auto;
		animation-timing-function: linear;
		animation-timeline: scroll(root y);
    }
    @keyframes tracker {
        from { width: 0%; }
        to { width: 100%; }
    }
}