@charset "utf-8";
/* CSS Document */
@font-face {
font-family:"brush-script-std";
src:url("https://use.typekit.net/af/2ab51c/0000000000000000000131c0/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/2ab51c/0000000000000000000131c0/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/2ab51c/0000000000000000000131c0/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
 * {
  box-sizing: border-box;
}
body {
	margin: auto;
	width: 100%;
	height: auto;
	background-image: url(IMG/background/BkgrndCOMMnew3.png);
	background-repeat: no-repeat;
	background-position: center 166px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: "Fira Sans", "Fira Sans Book", "Fira Sans Medium", Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
}

#header {
	height: 169px;
	padding: 0px;
	margin: auto;
	background-image: url(IMG/background/Clouds.png);
	background-repeat: no-repeat;
	top: 0px;
	z-index: 3;
	position: fixed;
	width: 100%;
}
#HeadContainer {
	vertical-align: top;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	height: 169px;
	max-width: 1080px;
	z-index: 3;
	padding: 0px;
}
#LogoType {
	color: #FFF;
	max-width: 75%;
	z-index: 999;
	margin-top: 70px;
	font-family: "brush-script-std", sans-serif;
	font-size: 84px;
	text-indent: 30px;
}

.SeaViewDrop {
	text-shadow: 3px 3px 3px #000;
	z-index: 5;
}
/* On screens that are 800px or less, set the typesize smaller */
@media screen and (max-width: 800px) {
  #LogoType {
	color: #FFF;
	max-width: auto;
	z-index: 999;
	display: inline-block;
	text-align: left;
	margin-top: 70px;
	margin-left: 20px;
	font-family: "brush-script-std", sans-serif;
	font-size: 70px;
	line-height: 68px;
	position: inherit;
	text-indent: 30px;
  }
}

/* On screens that are 400px or less, set the typesize smaller */
@media screen and (max-width:400px) {
  #LogoType {
	color: #FFF;
	max-width: 50%;
	z-index: 999;
	display: inline-block;
	text-align: left;
	margin-top: 35px;
	margin-left: 20px;
	font-family: "brush-script-std", sans-serif;
	font-size: 50px;
	position: inherit;
	line-height: 50px;
	text-indent: 30px;
  }
}

#header img {
	vertical-align: top;
	z-index: 11;
	top: -2px;
	right: 10px;
	margin: 0px;
	position: absolute;
	width: 217;
	height: 224;
}

#headerImg {
	vertical-align: top;
	z-index: 12;
	top: 190px;
	right: 15px;
	margin: 0px;
	position: absolute;
}


 #header p img {
	margin-left: 5px;
	position: relative;
	height: 28px;
	width: 28px;
	float: right;
	display: inline-block;
}

/* On screens that are 400px or less, make logo smaller */
@media screen and (max-width: 400px) {
	
#header img {
	vertical-align: top;
	z-index: 11;
	top: -2px;
	right: 10px;
	margin: 0px;
	position: absolute;
	height: auto;
	width: 38%;
}

#headerImg  {
	vertical-align: top;
	top: 170px;
	width: 35%;
}
 #header p img {
	margin-left: 2px;
	position: relative;
	height: 22px;
	width: 22px;
	float: right;
}
}


#navlinks{
	display: block;
	font-size: 14px;
	font-weight: normal;
	color: #FFF;
	height: 32px;
	top: 169px;
	z-index: 0;
	background-color: #333;
	max-height: 32px;
	min-height: 32px;
	width: 1080px;
	text-indent: 20px;
}
.topnav{
	display: block;
	line-height: 32px;
	height: auto;
	z-index: -1;
	position: fixed;
}
.topnav a {
	font-family: "Fira Sans", "Fira Sans Book", "Fira Sans Medium", Arial, sans-serif;
	color: #FFF;
	font-weight: inherit;
	padding-right: 20px;
	background-color: #333;
}
.topnav a:hover {
	font-family: "Fira Sans", "Fira Sans Book", "Fira Sans Medium", Arial, sans-serif;
	color: #0083DB;
	font-weight: inherit;
	background-color: #333;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
	font-size: 24px;
	color: #FFF;
	padding-right: 0px;
	margin-right: 20px
	height: 50px;
	line-height: 22px;
	padding-top: 5px;
}
  .topnav a.icon {
	display: none;
  }
 /* When the screen is less than 1067 pixels wide, hide all links, except for the first one ("Download SeaView"). Show the link that contains bars should open and close the topnav (.icon) */
@media screen and (max-width: 1067px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
	display: inline-block;
	margin-right:auto;
	clear: none;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1067px) {
  .topnav.responsive {
	position: fixed;
	background-color: #333;
	height: auto;
	width: 100%;
  }
  .topnav.responsive .icon {
	position: absolute;
	left: 175px;
	top:0;
	display: block;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
a {
	text-decoration: none;
	color: #0083DB;
	font-weight: inherit;
}	

p a {
	color: #0083DB;
	text-decoration: underline;
	font-weight: bolder;
}


#LogoType a {
	color: #fff;
}
#container {
	width: 1080px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: auto;
	clear: left;
	background-color: #EFEFEF;
}
/* #content {
	background-color: #FFF;
	width: 1080px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	top: 199 px;
	left: auto;
	right: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	display: block;
}*/
.leftpanel  {
	width: 25%;
	left: 0px;
	display: block;
	padding: 10px;
	background-image: url(IMG/background/TunaSidePanel2.gif);
	background-repeat: no-repeat;
	height: 100%;
	float: left;
	margin: 0px;
	background-color: #EFEFEF;
}
.leftpanel img {
	display: block;
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
}
/*
.leftpanel img:hover {
	transform: scale(1.1);
	
}*/

.leftpanel a img:hover {
	transform: scale(1.1);
	text-align: left;
	cursor: pointer;
}

@media screen and (max-width:400px) {
	.leftpanel  {
	width: 30%;
	padding: 10px;
	background-color: #EFEFEF;
	}
	.leftpanel h1 {
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px 2px #000;
	line-height: 16px;
	font-size: 14px;
}
}
.leftpanel h1 {
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px 2px #000;
	line-height: 24px;
	font-size: 24px;
}
.leftpanel h1 a {
	color: #FFF;
}
.leftpanel h1 a:hover {
	color: #FFE700;
}
.leftpanel h3 {
	color: #FFF;
	text-shadow: 2px 2px 2px #000;
	text-align: center;
	line-height: normal;
}
.leftpanel h3 a {
	color: #FFF;
	text-align: center;
}
.leftpanel h3 a:hover {
	color: #FFE700;
	text-align: center;
}


.maincontent  {
	background-color: #EFEFEF;
	width: 75%;
	display: block;
	height: auto;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	float: left;
}

@media screen and (max-width:400px) {
	.maincontent  {
	width: 70%;
	background-color: #EFEFEF;
	}
}

.maincontent p img {
	float: left;
	max-width: 100%;
	display: block;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 0px;
	margin-left: 0px;
	top: 0px;
}
.maincontent ul li {
	list-style-type: disc;
	list-style-position: inside;
}

.BlackTextLink {
	color: #000;
	float: none;
	font-weight: bold;
}
.PartnerH4A {
	font-style: normal;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	text-align: left;
	clear: left;
}
.PartnerH4A:hover {
	font-style: normal;
	font-weight: bold;
	color: #0083DB;
	text-decoration: none;
	text-align: left;
	clear: left;
}

.BlackTextLink:hover {
	color: #0083DB;
}


.Testimonials {
	font-style: italic;
	line-height: normal;
	font-weight: 500;
	color: #FFF;
	text-align: left;
	display: block;
	text-shadow: 1px 1px 2px #000;
	font-size: 14px;
}
h1 {
	color: #0083DB;
	line-height: normal;
	font-size: 20px;
}

.maincontent h2 {
	font-size: 16px;
	line-height: normal;
	font-weight: bold;
	color: #000;
}

h3 {
	font-size: 16px;
	font-weight: 600;
	color: #0083DB;
	text-align: left;
	word-wrap: break-word;
	line-height: inherit;
}
@media screen and (max-width:800px) {
	h3  {
	font-size: 16px;
	}
}
@media screen and (max-width:400px) {
	h3  {
	font-size: 14px;
	}
}
h4 {
	font-size: 14px;
	font-weight: bold;
}
h4  a {
	font-style: italic;
	font-weight: bold;
	color: #0083DB;
	text-decoration: underline;
	text-align: right;
	clear: left;
}

#Vids img:hover {
	transform: scale(1.1);
	cursor: pointer;
}

#footer {
	font-family: "Fira Sans", "Fira Sans Book", "Fira Sans Medium", Arial, sans-serif;
	font-size: 13px;
	color: #FFF;
	background-color: #333;
	position: static;
	font-weight: 300;
	bottom: 0px;
	text-align: center;
	left: auto;
	right: auto;
	line-height: 24px;
	width: 1080px;
	display: block;
	top: auto;
	clear: both;
	z-index: 11;
	margin: 0px;
	padding-top: 0.1px;
	padding-right: 0px;
	padding-left: 0px;
}

.responsive {
	max-width: 100%;
	height: auto;
}

.mySlides {display: none;}
img {
	vertical-align: middle;
	text-align: center;
}
#downloadButtons {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
}
@media screen and (max-width:400px) {
	#downloadButtons .responsive img  {
	width: 50%;
	}
}


/* Slideshow container */
.slideshow-container {
	max-width: 100%;
	margin-top: 200px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
table {
	border-spacing: 5px;
	background-color: #EFEFEF;
}
.imagetableHeaders {
	font-size: 14px;
	color: #FFF;
	vertical-align: middle;
	font-weight: bold;
	padding-left: 5px;
}

ul.thumbsample {
	float: none;
	list-style: none;
	margin: 0;
	padding: 0px;
	width: 120px;
	height: 86px;
	text-align: left;
	vertical-align: top;
}
ul.thumbsample  {
	margin: 0;
	padding: 0px;
	float: left;
	position: relative;
	width: 120px;
	height: 86px;
	top: 0;
	list-style-type: none;
}
ul.thumbsample img  {
	width: 500px;
	height: 502px;
	border: 1px solid #36F;
	padding: 0px;
	position: absolute;
	left: 0;
	top: 0px;
	-ms-interpolation-mode: bicubic;
	list-style-type: none;
}
ul.thumbsample li img.hover {
	border: 1px none #0CF;
	top: 5px;
	background-repeat: no-repeat;
	background-position: center center;
}

.gallery img {
	width: 100%;
	height: auto;
	border: thin outset #CCC;
}
.gallery {
	padding: 3px;
	float: left;
	width: 50%;
}

@media only screen and (max-width: 700px) {
  .gallery {
    width: 100%;
    margin: 6px 0;
  }
}
.GalleryStories {
	text-align: left;
	clear: left;
	max-width: 100%;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}
#espanol {
	color: #FFF;
	background-color: #0083DB;
	text-align: center;
	padding: 5px;
	height: auto;
	width: 100%;
}
.TabText {
	text-align: left;
	display: block;
	float: left;
	height: auto;
	max-width: 300px;
	margin-left: 40px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
}
@media screen and (max-width:400px) {
	.TabText {
		max-width: 70%;

p.TabText img {
	float: left;
}