@font-face {
	font-family: logo_font;
	src: url("/wp-content/themes/key-west/fonts/logo_font.woff2");
}

:root {
	--primary: #5F99D3;
	--white: #fff;
	--black: #111;
	--darkSecondary:#1b1725;
	--lightSecondary:#534B62;
	--sand:#FAF4E1;
	/*Button and Highlights colors*/
	--tertiary:#FF6700;
	--darkTertiary: #CC5200;
}

html{font-size: 100%;}

@media screen and (max-width: 22.5rem){
	html{font-size: 90%;}
}

::selection{
	color: var(--white);
	background-color: var(--tertiary);
}

address{
	font-style: normal;
}

.main-navigation {
	display: block;
	line-height: 3rem;
	flex-shrink: 0;
	z-index: 1;
}

.main-navigation ul {
	display: none;
	list-style: none;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: right;
	position: absolute;
	top: 100%;
	right: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	right: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	right: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	right: auto;
}

.main-navigation li {
	position: relative;
	margin-left: 2em;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle{
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	padding: .5em;
}

.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

.menu-toggle > svg{
	height: 2.5em;
}

.menu-toggle > svg > use{
	fill: var(--white);
}


.main-navigation.toggled .menu-menu-1-container{
	background: var(--darkSecondary);
	min-height: 100vh;
	width: 100vw;
}

@media screen and (min-width: 62rem) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}

}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}


/*Added by Me*/
h1 {font-size: 2rem;}

*{ margin: 0 ;padding: 0 ;box-sizing: border-box;}

body {background:  var(--primary);line-height: 1.5;}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

dl{display: flex; width: 100%; flex-wrap: wrap;}
dd, dt{width: 50%}

main ul {padding-left: revert;}
main img,.header--five img {width: 100%;min-height: 100%;}

#masthead {
	position: relative;
	height: 50vh;
}

@media screen and (max-height: 40rem){
	#masthead{height: 60vh;}
}

header a, header p, header h1{
	text-shadow: 0 0 .1em rgba(17,17,17, 0.85), 0 0 .3em rgba(17,17,17, 0.75), 0 0 .5em rgba(17,17,17, 0.65);
	color:  var(--white);
	text-decoration: none;
}

header ul{
	list-style-type: none;
}

.header-section {
	display: flex;
	/*! justify-content: space-between; */
	width: 100%;
	padding: 1em;
}
.header-section.header--five{
	padding: 0;
}

.header--five > figure{
	flex-grow: 1;
}


#masthead .header-top{top: 0; align-items: flex-start;justify-content: space-between;}
header .header-bottom{ align-items: center !important; background:var(--darkSecondary)}

.header-section.header-bottom ul{
	display: flex;
}

#masthead .site-title {font-family: logo_font; font-size: 2rem; font-weight: bold;}

#masthead figure > img{
	position: absolute;
	top: 50%;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	transform: translateY(-50%);
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
#masthead .site-contact--phone{margin-right: 2em;max-width: 13em;}
#masthead .site-contact--email{max-width: 20em;}
.header-section.header-bottom span{color: var(--white);}

.header-section.header-bottom ul li{
	height: 3rem;
	margin-right: 1em;
	margin-top: .5em;
}

.wrapper{
	width: 80%;
	margin: 0 auto;
	padding: 2em;
}

main.wrapper{
	background: var(--sand);
	display: block;
	color: var(--black);

	border: 2em solid;
	border-image: linear-gradient(to right, var(--primary), var(--sand), var(--primary)) 1 50%;
	border-bottom-width: 0;
	border-top-width: 0;
	width: calc(80% + 4em);
}

.section{
	box-shadow: 0 0 .5em rgba(0,0,0,0.5);
	margin-top: 1rem; margin-bottom: 5rem;
}

.section--left, .section--right{width: 50%;}
.section--left{margin-right: 1rem;}
.section--right{margin-left: 1rem;}

.section--text{
	background: var(--white);
	padding: 2rem;
}


.flex-container{display: flex;}

.section-fish_types > ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	padding: 0;
}

.section-fish_types > ul > li{
	width: 15%;
}

@media screen and (max-width: 62rem) {
	.section--left, .section--right{width: 100%;}
	.section--left{margin-right: 0;}
	.section--right{margin-left: 0;}
	.flex-container{flex-wrap: wrap;}
	.wrapper{width: 100%;}
	main.wrapper{width:100%;padding: 0;}
	.section{margin-bottom: 1rem;}
	.section--text{padding: 1rem;}
	.site-description{display: none;}
	.header-bottom{justify-content: center;}
	#masthead .site-title{width: calc(100% - 5rem);}
	.menu-menu-1-container{position: absolute; top: 0; right: 0;padding-right: 1rem;padding-top: 5rem;text-align: right;padding-bottom: 100%;}
	.header-top > div{width: 95%;height: 90%;position: absolute;display: flex;flex-direction: column;justify-content: space-between;}
	.header--five {flex-wrap: wrap;}
	.header--five > figure {width: 50%;}
	.header--five > figure:nth-of-type(3) {width: 100%;}
}

footer, footer a{width: 100%;color: var(--white);}
.site-info{background:  var(--darkSecondary);}

.footer-content{display: flex;}
.footer-content > .footer-content--sponsors{width: 100%;}
.footer-content > .footer-content--contact{width: 30rem;}
.site-creator{background:  var(--lightSecondary); text-align: center;}

.footer-content ul, main .site-contact ul{
	font-size: 3rem;
	list-style-type: none;
	padding-left: 0;
	display:flex;
	flex-wrap: wrap;
}

.footer-content li, main .site-contact li{
	margin-top:.1em;
	margin-bottom:0.1em;
	margin-right:0.5em;
	line-height: 1em;
}

.footer-content svg, main .site-contact svg{
	height: 1em;
	width: unset;
	max-width: 100%;
}

.site-contact--contact{
	font-size: 1rem;
}

.site-contact--contact .button{
	display: flex;
	align-items: center;
	text-decoration: none;
}

.site-contact--contact .button span{
	margin-left: 1em;
	text-shadow: none;
}

.site-contact--contact .button svg{
	height: 1.25em;
}

.site-contact--contact .button svg > use {
	fill: var(--white);
}

/*Captain's Info Page*/
.qualifications {
	list-style-type: none;
	display: flex;
	padding-left: 0;
	justify-content: space-around;
	align-items: center;
	font-size: 1rem;
}
.qualifications li {width: 20%;max-width: 10rem;}
svg {width: auto; height: 100%;}

.button, button {
	background: var(--tertiary);
	text-decoration: none;
	color: var(--white);
	padding: .5em 1em;
	border-radius: .25em;
	box-shadow: 0 0 .1em rgba(17,17,17, 0.35), 0 0 .3em rgba(17,17,17, 0.25), 0 0 .5em rgba(17,17,17, 0.15);
	border: solid 1px var(--darkTertiary);
	cursor: pointer;
	margin-top: .5em;
	margin-bottom: .5em;
}

/*Tabs*/
.tablinks {
	background: var(--lightSecondary);
	padding: 1em;
	text-decoration: none;
}

.tablinks.active {
	background: var(--tertiary);
}

#google-map {
	border: 0;
	width: 100%;
	height: 100%;
}