/*
	Stylesheet for Big Blue Keys Adventures Website
*/

/* Settings */

* {
	margin: 0;
	padding: 0;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	overflow-y: scroll;
	font-size: 16px;
}

img { max-width: 100%; }

figcaption {
	text-align: center;
	font-weight: 700;
	font-size: 12px;
	color: #243E2C;
	padding-top: 0.25rem;
	line-height: 1.1;
	color: var(--h2-color);
}

a {
	color: var(--link-color);
	text-decoration: none;
	outline: none;
	cursor: pointer !important;
}

a:hover { text-decoration: underline; }

hr {
	border: 0;
	margin: -0.5rem 0 2rem !important;
	height: 2px;
  background-image: linear-gradient(to right, rgba(0, 106, 167, 0), rgba(25, 25, 112, 0.75), rgba(157, 231, 241, 0));
}

.break, .calbreak, .sfbreak, .noline { display: block; }
.linebr { display: contents; }
.oneline, .panels { display: none; }

.slant {
	margin-top: 0.5rem;
	text-align: center;
	font-style: italic;
	font-size: 9pt;	
	color: var(--font-color);
}

i { font-size: smaller; }

.cntr { text-align: center !important; }

.lhght1 { 
	font-family: "RobotoLight" !important;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1 !important;;
	color: var(--font-color);
}

.note {
	margin-top: 1rem;
	text-align: center;
	font-size: 9pt !important;
	font-style: italic;
	line-height: 1.2;
	color: var(--topnav-color);
}

.note a {
	font-size: 9pt !important;
	color: var(--topnav-color) !important;
}

.opts {
	margin: 0.5rem 0 0.25rem 1rem;
}

.opts span {
	font-variant: small-caps;
}

.opts span span {
	font-size: small;
}

.opacity100 {
	opacity: 1;
}

.opacity033 {
	opacity: .33;
}

.svgmedallion {
	height: 256px;
	border: 4px solid var(--h2-color);
	border-radius: 50%;
}

.svgicon {
	display: inline-block;
	margin-bottom: -1px;
	height: 13px;
}

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* DIRECTIONAL ARROWS */

.da-arrow1, .da-arrow2, .da-arrow3 {
	font-family: helvetica, sans-serif;
	font-size: 1rem;
}

.da-arrow1:after, .da-arrow2:after, .da-arrow3:after {
	content: "\0020 \25BC";
	color: #003F87; 
}

.da-arrow1.CC:after, .da-arrow2.CC:after, .da-arrow3.CC:after {
	content: "\0020 \25B2";
	color: #CE1126;
}

.rb-arrow:before {
    font-family: helvetica, sans-serif;
    margin-left: 0.3em;
    content: "\272A \0020";
    font-size: 13px;
    color: #CE1126;
}

.ra-arrow:after {
    font-family: helvetica, sans-serif;
    content: "\0020 \25BA";
    color: #B3A687;
}

.lb-arrow:before {
    font-family: helvetica, sans-serif;
    content: "\25C0 \0020";
    color: #B3A687;
}

.arrows {
	text-align: center;
	margin-top: 1em;
}

.bullet1 {
	height: 12px;
}

/* Font faces */
/* --------------------------------------------------------- */

@font-face {
	font-family: "RobotoSlab";
	src: url("../fonts/RobotoSlab-Bold.ttf");
}

@font-face {
	font-family: "RobotoLight";
	src: url("../fonts/Roboto-Light.ttf");
}

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

@font-face {
	font-family: "RobotoCondensedRegular";
	src: url("../fonts/RobotoCondensed-Regular.ttf");
}

@font-face {
	font-family: "RobotoCondensedBold";
	src: url("../fonts/RobotoCondensed-Bold.ttf");
}

@font-face {
	font-family: "Spinnaker";
	src: url("../fonts/spinnaker.regular.ttf");
}

@font-face {
	font-family: "BrushScriptStd";
	src: url("../fonts/BrushScriptStd.otf");
}

/* Theme styles -- https://www.color-name.com/ */
/* --------------------------------------------------------- */

:root {
	--font-color: #232528;			/* Dark Gunmetal */
	--link-color: #191970;			/* St. Patrick's Blue */
	--body-color: #FFFAFA;			/* Snow */
	--alt-body-color: #9DE7F1;	/* Non-photo Blue */
	--header-color: #006AA7;		/* Medium Persian Blue */
	--h1-color: #003F87;				/* Midnight Blue */
	--h2-color: #00588d;				/* Medium Electric Blue */
	--h3-color: #006AA7;				/* Medium Persian Blue */
	--menu-color: #FECC02;			/* Philippine Yellow */
	--menu-back: #D6CEBD;				/* Pastel Gray */
	--menu-hover: #D8B72B;			/* Gold (Metallic) */
	--back-color: #003F87;			/* Midnight Blue */
	--topnav-color: #00588d;		/* Medium Electric Blue */
	--caldesc-color: #515354;		/* Davy's Grey */
	--calduty-color: #707373;		/* Nickel */
	--th-color: #E9E9E4;				/* Platinum */
	--patch-color: #ADA082;			/* Grullo */
	--border-color: #05626E;		/* Skobeloff */
	--splash-bgcolor: #E5E5E5; 	/* Platinum */ 
	--nest-bgcolor: transparent; 	/*  */
	--img-logo: url(../images/icons/captaintg.svg) no-repeat;
	--img-prepared: url(../images/icons/prepared-white2.svg) no-repeat;
	--img-topNav: url(../images/icons/top.svg) no-repeat;
	--img-piper: url(../images/icons/pipe2.svg) no-repeat;
	--img-splashmask: url(../images/lightmask.png);
}
/*
.theme-dark {
	--font-color: #FFFAFA;			/* Snow */
	--link-color: #9FA1A1;			/* Quick Silver */
	--body-color: #05626E;			/* Dark Gunmetal*/
	--header-color: #191970;		/* Midnight Blue */
	--h1-color: #FDCE07;				/* Metallic Yellow */
	--h2-color: #00588d;				/* Scouting Tan */
	--h3-color: #00588d;				/* Scouting Tan */
	--menu-color: #AD9D7B;			/* Scouting Dark Tan */
	--menu-back: #003F87;				/* Scouting Blue */
	--menu--hover: #858787;			/* Scouting Light Gray */
	--topnav-color: #FDCE07;		/* Metallic Yellow */
	--caldesc-color: #BBBDBD;		/*  */
	--calduty-color: #9FA1A1;		/*  */
	--badge-color: #D6CEBD;			/* Scouting Tan */
	--patch-color: #AEA07E;			/* Scouting Dark Tan */
	--border-color: #09C3DB;		/* Scouting Yellow */
	--splash-bgcolor: #1a1a1a; 	/* 90% Black */
	--nest-bgcolor: #404040; 	/* 75% Black */
	--img-logo: url(../images/icons/captaintg.svg) no-repeat;
	--img-prepared: url(../images/icons/prepared-white2.svg) no-repeat;
	--img-topNav: url(../images/icons/top.svg) no-repeat;
	--img-piper: url(../images/icons/pipe2.svg) no-repeat;
}
*/
/* --------------------------------------------------------- */
/* Structure */

body {
	font: 1rem RobotoRegular, sans-serif;
	overflow-y: scroll;
}

.prewrap {
	position: relative;
	width: 100%;
	background: var(--body-color, #FFFAFA);
	z-index: 2;
}

h1 {
	font-family: "RobotoSlab";
	font-size: 20px;
	color: var(--h1-color);
}

h2 {
	margin: 1rem auto;
	font-family: "RobotoRegular";
	font-size: 18px;
	color: var(--h2-color);
}

h3 {
	margin: 1rem auto 0.25rem;
	font-family: "RobotoCondensedBold";
	font-size: 14px;
	color: var(--h3-color);
}

h4 {
	margin: 1rem auto 0.25rem;
	font-family: "RobotoRegular";
	font-size: 12px;
	color: var(--h4-color);
}

p {
	font-family: RobotoLight, sans-serif;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--font-color);
}

.star:after {
	content: "\272D";
	color: #CE1126;
	font-size: 20px;
}

.qstar:after {
	content: "\272D";
	color: #CE1126;
	font-size: 16px;
}

.topnav {
	display: block;
	margin: 3rem auto 0;
	width: 77px;
	height: 31px;
  background-image: url('../images/icons/topflags.svg');
}

.topnav:hover {
  background-image: url('../images/icons/topflags2.svg');
}

.topgold { fill: transparent; }
.topgold:hover { fill: var(--topnav-color); }

.st0 { fill: var(--header-color); }
.st0:hover { fill: var(--link-color); }

.feedback {
	margin: 0.5rem auto;
	z-index: 3;
	text-align: center;
	font-family: "RobotoRegular";
	font-size: 0.9rem;
	color: #B30000;
	opacity: 0;
	animation: fade 7s linear;
}

@keyframes fade {
	0%,100% { opacity: 0 }
	5%,85% { opacity: 1 }
}

/* --------------------------------------------------------- */
/*	Primary header */

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 10px;
	z-index: 4;
	background-color: var(--header-color);
	box-shadow: 0px 3px 3px  var(--header-color);
}

.topheader {
	position: relative;
	max-width: 960px;
	margin: 1rem auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	height: 32px;
}

.captaint {
	width: 116px;
	height: 32px;
	background: var(--img-logo);
}

.socialmedia {
	text-align: right;
}

.socialmedia img {
	height: 32px;
}

.socialmedia img:hover {
	filter: grayscale(100%);
}

.pipe {
	display: inline-block;
	width: 9px;
	height: 32px;
	background: var(--img-piper);
}

/* --------------------------------------------------------- */
/*	Secondary header */

.baseheader {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
}

.baseheader .logo {
	display: inline-block;
	width: 275px;
}

.baseheader ul {
  list-style: none;
  overflow: hidden;
}

.baseheader li a {
  display: inline-block;
  padding: 16px 10px 5px;
  font-family: RobotoCondensedRegular;
  color: var(--menu-color);
}

.baseheader li a:hover {
  color: var(--menu--hover);
  text-decoration: none;
}

/* menu */

.baseheader .menu {
  clear: both;
  padding-top: 7px;
  max-height: 0;
  transition: all .3s ease-out;
}

/* menu icon */

.baseheader .menu-icon {
  position: relative;
  display: inline-block;
  float: right;
  top: 8px;
  right: 3px;
  padding-top: 9px;
  cursor: pointer;
  user-select: none;
}

.baseheader .menu-icon .navicon {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: #FFFAFA;
  transition: all .3s ease-out;
}

.baseheader .menu-icon .navicon:before,
.baseheader .menu-icon .navicon:after {
  background: #FFFAFA;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .3s ease-out;
  width: 100%;
}

.baseheader .menu-icon .navicon:before {
  top: -12px;
}

.baseheader .menu-icon .navicon:after {
  top: -6px;
}

/* menu btn */

.baseheader .menu-btn {
  display: none;
}

.baseheader .menu-btn:checked ~ .menu {
	max-height: 240px;
	padding-bottom: 0.5rem;
}

.baseheader .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.baseheader .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.baseheader .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.baseheader .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.baseheader .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* --------------------------------------------------------- */

.wrapper {
	margin-bottom: 0;
	background-color: var(--body-color), #FFFAFA;
}

.splash {
	display: block;
	margin: 0 auto;
}

.section {
	width: 100%;
	padding: 1rem 10px;
}

.section h1, .section1 h1,
.section h3, .section1 h3 {
	text-align: center;
}

.section h2, .section1 h2 {
	font-family: RobotoCondensedRegular, sans-serif;
	text-align: center;
	font-size: 1.25rem;
}

.span_h { display: inline-block; } 

.flip_h { transform: scale(-1, 1); }

.columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 4px;
	background-color: var(--badge-color);
	padding: 0.5rem 0.5rem 1rem;
}

.section-grid {
	max-width: 960px;
	margin: 1rem auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.section-info {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.section-text {
	font-family: RobotoLight;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--font-color);
}

.section-text p {
	margin-bottom: 0.5rem;
}

.attribute {
	text-align: center;
	font-size: 9pt;
	font-style: italic;
}

.section-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.booknow {
	margin: 2rem auto;
	width: 161px;
}

#background:hover {
  animation-name: col;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 150px 35px;
}

@keyframes col {
0%,49% {fill:none}
50% {fill:black}
51%,100% {fill:none}
}

/* ------------------------------------------------------------------------------------ */
/* ==== SECTION 0 : BIG BLUE ==== */

.section0 {
	background-color: var(--body-color);
}

.explore {
	max-width: 560px;
	margin: 2rem auto 0;
	text-align: center;
}

.explore p {
	margin-top: 0.5rem;
	padding: 0 1rem;
	font-family: "RobotoCondensedRegular";
	font-size: 1.1rem;
	text-align: center;
	text-justify: inter-character;
	hyphens: none;
	color: var(--h3-color);
}


/* ------------------------------------------------------------------------------------ */
/* ==== SECTION 1 : ADVENTURES ==== */

.section1 {
	margin-top: 2rem;
	padding: 2rem 0;
	xbackground-color: var(--header-color);
}

.section1 h1 {
	color: var(--menu-color);
}




/* ------------------------------------------------------------------------------------ */
/* ==== SECTION 2: SNORKELING ==== */

.section2 {
	background-color: var(--alt-body-color);
}


/* ------------------------------------------------------------------------------------ */
/* ==== SECTION 3: FISHING ==== */

.section3 {
	background-color: var(--body-color);
}

/* Fishing Table */

.plus:before {
	font-size: 1.2rem;
	content: "\002B \0020";
}

.minus:before {
	font-size: 1.2rem;
	content: "\2212 \0020";
}

table {
	max-width: 900px !important;
	border-collapse: collapse;
	margin: 0 auto 0.25rem !important;
}

tr:nth-child(odd) {
	background-color: #84E1ED;
}

td, th {
	padding: 6px;
	font-size: 11px;
	text-align: center;
	font-family: "RobotoCondensedRegular";
	color: var(--border-color);
	border: 1px solid var(--border-color);
}

th {
	font-size: 10px !important;
	background-color: var(--th-color);
}

caption {
	width: 100%;
	max-width: auto;
	font-family: "RobotoCondensedRegular";
	padding-bottom: 5px;
	font-size: 9px;
	font-weight: bold;
	text-align: center;
	color: var(--border-color);
}

.space {
	padding-right: 3rem;
}

@media only screen and (max-width: 520px) {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
		margin: 0 0 1rem 0;
		border-top: 1px solid var(--border-color);
		border-left: 1px solid var(--border-color);
		border-right: 1px solid var(--border-color);
	}
	
	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid var(--border-color);
		position: relative;
		padding-left: 50%;
	}

	td:first-child {
		font-weight: bold;
		background-color: var(--th-color);
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		font-weight: bold;
	}
	
	/*
	Label the data
	You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
	*/
	td:nth-of-type(1):before { content: "SPECIES"; }
	td:nth-of-type(2):before { content: "JAN"; }
	td:nth-of-type(3):before { content: "FEB"; }
	td:nth-of-type(4):before { content: "MAR"; }
	td:nth-of-type(5):before { content: "APR"; }
	td:nth-of-type(6):before { content: "MAY"; }
	td:nth-of-type(7):before { content: "JUN"; }
	td:nth-of-type(8):before { content: "JUL"; }
	td:nth-of-type(9):before { content: "AUG"; }
	td:nth-of-type(10):before { content: "SEP"; }
	td:nth-of-type(11):before { content: "OCT"; }
	td:nth-of-type(12):before { content: "NOV"; }
	td:nth-of-type(13):before { content: "DEC"; }
}

/* End Fishing Table */


/* ------------------------------------------------------------------------------------ */
/* ==== SECTION 4: BRUNCHING ==== */

.section4 {
	background-color: var(--alt-body-color);
}

/* ------------------------------------------------------------------------------------ */
/* ==== SECTION 5: SUNSETTING ==== */

.section5 {
	background-color: var(--body-color);
}

/* ------------------------------------------------------------------------------------ */
/* ==== SECTION 6: CHARTER ==== */

.section6 {
	margin-top: 1rem;
	padding-top: 2rem !important;
	background-color: var(--alt-body-color);
}

.us {
	max-width: 960px;
	margin: 1rem auto 0;
	display: grid;
	grid-template-areas:	"lifeperserver"
												"captain";	
	grid-template-columns: 1fr;
	gap: 1rem;
	text-align: center;
}

.charterform {
	max-width: 100%;
	margin: 1rem auto 2rem;
	text-align: center;
}

.lifeperserver {
	padding-top: 0.3rem;
}

.lifeperserver img {
	width:265px;
}

.aboutus p {
	padding: 0 1rem;
	xfont-family: "RobotoCondensedRegular";
	text-align: justify;
	text-justify: inter-character;
	hyphens: auto;
}

/* forms ============================ */

fieldset {
	position: relative;
	width: 90%;
	margin: 1rem auto;
	padding: 1.4rem;
	xbackground: var(--th-color);
	xborder: 1px solid var(--font-color);
	border-radius: 9px;
}

label {
	display: block;
	margin-top: 0.5rem;
	font-family: Montserrat, sans-serif;
	font-size: 0.75rem;
	font-variant: small-caps;
	font-weight: 300;
	color: var(--header-color);
}

.label {
	display: block;
	margin-left: 3px;
	font-family: Montserrat, sans-serif;
	font-size: 0.75rem !important;
	font-variant: small-caps;
	font-weight: 300;
	color: var(--header-color);
}

input[type=button], input[type=submit], input[type=file], input[type=tel], input[type=text], input[type=date],
input[type=checkbox], input[type=number], input[type=email], input.inputbox, select {
	cursor: pointer;
}

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], textarea, select {
	margin: 5px 0 1rem;
	padding: 0.3rem 0 0.2rem 0.3rem;
	font-family: "RobotoRegular";
	font-size: .9rem;
	color: #666;
}

input[type=file], input[type=text], input[type=email], input[type=number], input[type=tel], input[type=date],
input[type=password], textarea, select, input[type=text]:focus, input[type=checkbox],
input[type=password]:focus, input.text:focus, textarea:focus, select:focus {
	background-clip: padding-box;
	border: 1px solid #ccc;
	border-radius: 5px
}

select {
	margin: 3px 3px 3px 0;
	padding: 0.12rem 0.25rem;
	height: 29px;
	background-color: #fff;
}

textarea {
	height: 130px;
	padding: 5px;
	font-family: "RobotoRegular";
	font-size: .9rem;
	color: #666;
	overflow: auto;
}

/* Easiest Autogrowing Textarea */
/* https://codepen.io/chriscoyier/pen/XWKEVLy */
.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
  margin-top: 5px !important;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid #ccc;
  padding: 0.5rem;
  xfont: inherit;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}
/* end CodePen */

input[type=radio] {
	vertical-align: text-bottom
}

input[type=number] {
	width: 61px;
}

.cbox {
	padding: 0 5px;
	font-family: "RobotoRegular" !important;
	font-variant: normal !important;
	font-weight: normal !important;
	font-size: .9rem !important;
	color: #666 !important;
}

.cdate {
	margin-top: 1.5rem !important;
}

.cdate input { background-color: #fff; }

.cphone { margin-bottom: 0.5rem !important; }

button, input, textarea {
	margin: 0 3px 3px 0;
}

input[type=button], input[type=submit], input[type=reset], .btn {
	width: auto;
	margin: 0 0.5rem;
	overflow: visible;
	background: transparent;
	vertical-align: middle;
	padding: 3px 12px;
	font-family: "RobotoRegular";
	font-size: .9rem;
	color: #666;
	outline: none;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-shadow: rgba(255,255,255,1) 1px 1px 2px;
	box-shadow: 2px 2px 3px #eee;
}

.btn {
	display: inline-block;
	margin: -3px 6px 0 3px;
	width: 40px;
	text-align: center;
}

.btn:hover, .btn:active,
input[type=button]:hover, input[type=submit]:hover,
input[type=button]:active, input[type=submit]:active {
	background-color: var(--header-color);
	border: 1px solid #bbb;
	color: var(--menu-color) !important;
	cursor: pointer;
	text-shadow: none
}

.buttons {
	margin-top: 1.5rem !important;
	text-align: center;
}

.cntrbutton {
	padding-top: 1rem;
	text-align: center;
}

.userinfo, .userinfo a {
	text-align: center;
	font-size: 0.87rem;
	color: #444;
	line-height: 2;
	font-variant: small-caps;
}

input:placeholder-shown {
	color: #999;
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.subapp {
	margin-bottom: 0.5rem !important;
	height: 1.75rem;
	border: var(--header-color) 1px solid !important;
}



/* ============================ forms */


/* ------------------------------------------------------------------------------------ */
/* === FOOTER ==== */

footer {
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: var(--header-color);
	padding: 1rem;
}

footer li { list-style-type: none; }

.prefooter {
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-areas: 
							"f2"
							"f1"
							"f3";	
	grid-template-columns: 1fr;
	padding: 1rem;
}

.f1 {
  grid-area: f1;
}

.f2 {
  grid-area: f2;
}

.f3 {
  grid-area: f3;
}

.prefooter div {
	text-align: center;
}

.prefooter h1,
.prefooter h2 {
	color: #FDCE07;
	font-size: 0.9rem;
	margin-top: 0.9rem;
}

.prefooter img {
	display: block;
	height: 125px;
	margin: 0.3rem auto;
}

.prefooter a,
.prefooter a:visited {
  font-family: RobotoCondensedRegular;
	font-size: 0.9rem;
	line-height: 1.4;
	color: #B8CAE2;
}

.prefooter a:hover {
	color: #FDCE07;
}

.smallmedia {
	display: inline-block !important;
	margin: 3px 3px 0 !important;
	width: 30px;
	height: 30px !important;
}

.smallmedia a .gold { fill: #B8CAE2; }
.smallmedia a .gold:hover { fill: #FDCE07; }

.subfooter {
	max-width: 960px;
	margin: 0 auto;
	font-family: "Spinnaker";
	font-size: small;
	font-variant: small-caps;
	color: #FDCE07;
	text-align: center;
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* === MEDIA QUERIES ==== */

@media only screen and (min-width: 375px) {

	.captaint {
		background: var(--img-logo);
	}

}


@media only screen and (min-width: 520px) {

	.quick-links {
		width: 100%;
	}
	
	.columns {
		grid-template-columns: 1fr 1fr;
	}

	header, .section {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	caption {
		width: auto;
		max-width: 900px;
	}

	blockquote {
		max-width: 500px;
	}

	.svgmedallion {
		height: 150px;
	}
		
	.sfbreak { display: none; }
	.oneline { display: inline-block; }
  .linebr { display: none; }
}

@media only screen and (min-width: 756px) {

	blockquote {
		max-width: 680px;
	}

	.section-grid {
		grid-template-columns: 1fr 1fr;
	}

	.columns {
		grid-template-columns: 1fr;	
	}

 .prefooter {
		grid-template-areas: "f1 f2 f3";	
		grid-template-columns: 1fr 1fr 1fr;
		text-align: center;
  }

}
	

@media only screen and (min-width: 856px) {

	.section {
		padding-top: 1rem;
	}
	
	h1 {
		font-size: 24px;
	}

	h2 {
		font-size: 20px;
	}

	.star:after {
		font-size: 24px;
	}

	.baseheader .logo {
		width: 320px;
	}

  .baseheader li {
    float: left;
  }

  .baseheader li a {
    padding: 8px 0 10px 20px;
  }

  .baseheader .menu {
    clear: none;
    float: right;
    max-height: none;
  }

  .baseheader .menu-icon {
    display: none;
  }

 	.wrapper {
		margin-bottom: 225px;
		overflow-y: hidden;
	}

	label {
		display: inline-block;
	}

 	.us {
		grid-template-areas: "lifeperserver captain";
		grid-template-columns: 300px 1fr;
	}

	footer {
		position: fixed;
		z-index: 0;
		left: 0;
		bottom: 0;
	}

	.break, .calbreak, .noline { display: none; }

	.xoneline { display: inline; }
	
	.portal { bottom: 0.5em; }

}


@media only screen and (min-width: 1000px) {

	.panels { display: none; }

	.wrapper {
		padding-left: 0;
		padding-right: 0;
	}
	
	.xsection-info {
		grid-template-columns: 1fr 1fr;
	}
	
	.calbreak { display: block; }

}