@charset "utf-8";
/*-----------  MOBILE/ALL  -----------*/

/*
Ensure that a vertical scroll bar is always displayed in the
browser. Because the proportions of the website are all relative, the sudden appearance of a scroll bar (which could be triggered by an interactive component on your website) will cause your site to jump. In CSS, we can use this simple trick to ensure that the bar is always there, thus preventing jumping.
*/
html {overflow-y: scroll;}

/* 
In order for images to fit within any screen, they need to be scaled. There
are several ways to do this (aside from using ImgSizer.js) but a good
starting point is to make all images have a width of 100%.
*/
img {
max-width: 100%;
border-style: none;
}

/* 
Unfortunately, max-width is not supported in older versions of Internet
Explorer, so a conditional comment is also included, denoted with an
asterisk.
*/
*img {
width: 100%;
border-style: none;
}


@font-face {
	font-family:'GeosansLight';
	src: url(../font/GeosansLight.ttf);
}

@font-face {
	font-family:'CenturyGothic';
	src: url(../font/GOTHIC.ttf);
}

@font-face {
	font-family:'Bebas';
	src: url(../font/BebasNeue.otf);
}

body {
	font-family: 'CenturyGothic';
	padding:0;
	margin:0;
}

h1 {
	font-family:'Bebas';
	font-size:30px;
	color:#fff;
	font-weight:normal;
	line-height:40px;
}

h2 {
	font-family:'Bebas';
	font-size:30px;
	color:#999;
	letter-spacing:1px;
	font-weight:normal;
	padding:0;
	margin:0;

}

h3 {
	font-family:'Bebas';
	font-size:38px;
	color:#999;
	letter-spacing:1px;
	font-weight:normal;
	padding:0;
	margin:0;

}

h4 {
	font-family:'GeosansLight';
	font-size:40px;
	color:#38ba88;
	font-weight:normal;
	text-align:center;
}

#h1-wrapper {
	margin:0 0 0 0;
}


#nav-wrapper {
	width:100%;
	max-width:1080px;
	height:auto;
	margin:0 auto;
}

#logo {
	width:90%;
	max-width:300px;
	margin:20px auto 0 auto;
}

#logo-mobile {
	display:block;
}

#logo-wide {
	display:none;
}

#top-nav {
	display:none;
}

#m_nav_button {
	text-align:center;
	display:block;
	width:50px;
	font-family:'CenturyGothic';
	font-size:17px;
	color:#666;
	height:auto;
	margin:-10px auto 0 auto;
	cursor:pointer;
}

#m_nav_button:hover {
	
}

#mobile-nav {
	text-align:center;
	display:none;
	width:100%;
	font-family:'CenturyGothic';
	font-size:15px;
	padding:20px 0 15px 0;
	background-color: #b6b6b6;
}

#mobile-nav ul li{
	padding:10px 0;
	list-style:none;
}

#mobile-nav ul li a{
	color:#fff;
	letter-spacing:1px;
}

#hero-wrapper {
	height: 280px;
	background-image:url(../img/hero.jpg);
	background-repeat: no-repeat;
	background-position:center;
	background-size:cover;
	text-align: center;
	margin:0 0 0 0;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	transition:0.5s;
}

#hero-text {
	padding:40px 0 0 0;
	width:100%;
	max-width:1080px;
	margin: 0 auto;
}

#hero-text ul {
	margin:23px 0 0 0;
	list-style-type: none;
}

#hero-text ul li {
	margin: 20px 0 0 0;
	
}


#hero-text ul li a{
	font-family:'CenturyGothic';
	font-size:11px;
	border:solid 1px #fff;
	padding:5px 9px;
	color:#fff;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	transition:0.5s;
}

#hero-sub-head {
	font-family:'Bebas';
	font-size:20px;
	color:#fff;
	margin: 5px auto 0 auto;
	padding:10px 0 0 0;
	border-top: solid 2px #fff;
	width:190px;
}

#hero-text ul li a:hover {
	padding:4px 15px;
	background:rgba(255,255,255,0.1);
}

#wrapper {
	width:98%;
	max-width:1080px;
	margin:50px auto 40px auto;
	padding:0 1%;
}

#intro-wrapper {
	width:100%;
	height:auto;
	padding:30px 0 10px 0;
	background-color:#b6b6b6;
}

#intro-wrapper figure {
	width:90%;
	max-width:480px;
	margin:0 auto;
}

#intro-text {
	width:100%;
	max-width:1080px;
	margin:30px auto;
}

#intro-text-wrapper {
	margin:0 15px;
}

#intro-text p {
	color:#fff;
	font-size:18px;
	line-height:22px;
}

#products-intro {
	text-align:center;
	font-family:'CenturyGothic';
	font-size:15px;
	color:#666;
	margin:40px 0 0 0;
}

#call-to-actions {
	width:70%;
	max-width:1060px;
	height:auto;
	margin:-20px 15% 0 15%;
}

.three-links {
	float:left;
	width:96%;
	height:auto;
	padding: 30px 2%;
	margin:0;
	text-align:center;
}

.three-links figcaption {
	padding:10px 0 0 0;
	font-size:18px;
}

.three-links a {
	color:#666;
}

.three-links a div{
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
}

.three-links a div:hover{
	opacity:0.5;
}

#product-border-mobile {
	border-top:solid 2px #eee;
	border-bottom:solid 2px #eee;
}




#contact-info {
	float:left;
	width:95%;
	height:auto;
	padding:10px 2.5% 0 2.5%;
	text-align:center;
}

#google-map {
	float:left;
	width:95%;
	height:auto;
	padding:10px 2.5% 0 2.5%;
	text-align:center;
}

.contact-font-head {
	margin:10px 0;
	color:#7A5F92;
	font-size:18px;
	text-transform:uppercase;
}

.contact-font {
	color:#999;
	font-size:17px;
	padding: 2px 0;
	line-height:22px;
}

.contact-font a{
	color:#999;
}

#footer-wrapper {
	width:100%;
	height:200px;
	background-color:#bdbdbd;
	color:#fff;
	padding:30px 0 0 0;
	margin:10px 0 0 0;
}

#footer-wrapper p {
	color:#fff;
	font-size:12px;
	text-align:center;
	line-height:19px;
}

#footer-wrapper p a{
	color:#fff;
	text-decoration:underline;
}

#contact-img {
	width:50%;
	max-width:40px;
	margin:0 auto 6px auto;
}

#contact-head {
	text-align:center;
	margin:0 0 30px 0;
}

#product-head {
	text-align:center;
	margin:0 0 0 0;
}




.section-and-pic {
	width:96%;
	max-width: 960px;
	margin:0 auto;
	padding: 10px 2%;
}

.para-pic {
	width:94%;
	float:none;
	padding:5px 3% 25px 3%;
}

.para-pic1 {
	display:none;
	width:94%;
	float:none;
	padding:5px 3% 25px 3%;
}

.para-pic2 {
	display:block;
	width:94%;
	float:none;
	padding:5px 3% 0 3%;
}

.para-figcaption {
	font-family:Arial, Helvetica, sans-serif;
	color:#aaa;
	font-size:10px;
	text-align:center;
	padding:8px 0 0 0;
}


.section-and-pic p {
	font-family:'GeosansLight';
	font-size:14px;
	color:#888;
	line-height:19px;
}

.product-p {
	font-family:'GeosansLight';
	font-size:14px;
	color:#888;
	line-height:19px;
	padding:10px 0 40px 0;
	letter-spacing:1px;
}

.product-p a{
	text-decoration:none;
	color:#888;
}

#product-wrapper {
	text-align:center;
	width:100%;
	padding:20px 0 0 0;
}

#squid-wrapper {
	text-align:center;
	width:100%;
	padding:20px 0 0 0;
}
	


#location-hero {
	width:100%;
	padding:0 0 0px 0;
	max-width:960px;
	margin:0 auto;
}



.vessel-section {
	width:96%;
	max-width: 960px;
	margin:0 auto;
	padding: 10px 2%;
	text-align:center;
}

#vessels-docked {
	width:100%;
	padding:0 0 10px 0;
}

#vessels-docked img{
	width:100%;
}

.vessel-list {
	font-family:'GeosansLight';
	font-size:17px;
	color:#888;
	line-height:23px;
	padding: 10px 0 20px 0;
}

.vessel-pic {
	width:98%;
	padding:0 1% 25px 1%;
	float:none;
}

.vessel-pic img{
	width:100%;
}

.vessel-pic figcaption{
	text-align:center;
	color:#aaa;
	font-size:12px;
	padding:10px 0 0 0;
}




.design-line {
	height:2px;
	width:70%;
	background-color:#eee;
	margin:35px auto 25px auto;
}


#break-hide {
	display:none;
}


.line {
	width:20px;
	height:auto;
	margin: 0 auto;	
}

.line img{
	width:100%;	
}

.clear-float {
	clear:both;
}


/*-----------  TABLET  -----------*/
@media only screen and (min-width: 481px) {
	
h1 {
	font-family:'Bebas';
	font-size:48px;
	font-weight:normal;
	line-height:40px;
}


h2 {
	font-size:45px;
}


h4 {
	font-family:'GeosansLight';
	font-size:30px;
	color:#38ba88;
	font-weight:normal;
	text-align:left;
}

#h1-wrapper {
	margin:0 0 0 0;
}

#logo {
	width:400px;
	margin:20px auto 0 auto;
}

#mobile-nav {
	display:none;
}

#top-nav {
	font-family:'CenturyGothic';
	width:447px;
	margin:0px auto 0 auto;
	display:block;
}

#top-nav ul {
}

#top-nav ul li {
	font-family:'CenturyGothic';
	display:inline-block;
	font-size:12px;
	color:#7e7e7e;
	letter-spacing:normal;
	padding:0px 10px;
}


#top-nav ul li a{
	font-family:'CenturyGothic';
	color:#7e7e7e;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;	
}

#top-nav ul li a:hover{
	color:#aaa;
}

#m_nav_button {
	display:none;
	width:34px;
	height:auto;
	margin:0 auto;
}


#hero-wrapper {
	height: 380px;
	background-position:center;
	margin:10px 0 0 0;
}

#hero-text {
	padding:65px 0 0 0;
}

#hero-text ul {
	margin:0 0 0 0;
}

#hero-text ul li {
	margin: 25px 0 0 0;
	
}

#hero-text ul li a{
	font-size:14px;
	padding:5px 15px;
	color:#fff;
}

#hero-text ul li a:hover {
	padding:7px 20px;
	background:rgba(255,255,255,0.1);
}

#hero-sub-head {
	font-size:30px;
	margin: 15px auto 0 auto;
	padding:15px 0 0 0;
	border-top: solid 2px #fff;
	width:280px;
}


#wrapper {
	width:96%;
	max-width:1080px;
	margin:30px auto 50px auto;
	padding:0 2%;
}


.section-and-pic p {
	font-family:'GeosansLight';
	font-size:17px;
	color:#888;
	line-height:23px;
}


.product-p {
	font-family:'GeosansLight';
	font-size:17px;
	color:#888;
	line-height:23px;
}

#intro-text-wrapper {
	margin:0 40px;
}

#intro-text p {
	color:#fff;
	font-size:20px;
	line-height:25px
}

#products-intro {
	font-size:18px;
}

#call-to-actions {
	width:96%;
	max-width:850px;
	height:auto;
	margin:0 auto;
}

.three-links {
	float:left;
	width:30%;
	height:auto;
	padding: 15px 0;
	margin:20px 1.666%;
}

.three-links figure img{
	width:100%;
	max-width:270px;
	text-align:center;
}

.three-links figcaption {
	font-size:20px;
}

#product-border-wide{
	border-left:solid 2px #ddd;
	border-right:solid 2px #ddd;
}

.product-border {
	
}

#product-border-mobile {
	border-top:none;
	border-bottom:none;
}

#contact-info {
	float:left;
	width:46%;
	height:auto;
	padding:10px 2% 0 2%;
	text-align:left;
}

.contact-font {
	font-size:15px;
	padding: 2px 0;
}

#google-map {
	float:left;
	width:48%;
	height:auto;
	padding:10px 1% 0 1%;
}


.para-pic {
	width:50%;
	float:left;
	padding:5px 4% 5px 0;
}

.para-pic1 {
	display:block;
	width:50%;
	float:left;
	padding:5px 4% 5px 0;
}

.para-pic2 {
	display:none;
}

.vessel-pic {
	width:48%;
	padding:0 1% 15px 1%;
	float:left;
}


#footer-wrapper p {
	color:#fff;
	font-size:14px;
	text-align:center;
	line-height:19px;
}

#break-hide {
	display:block;
}



}


/*-----------  WIDESCREEN  -----------*/
@media only screen and (min-width: 801px) {
	
h1 {
	font-size:50px;
}

h4 {
	font-family:'GeosansLight';
	font-size:40px;
	color:#38ba88;
	font-weight:normal;
}
	
#break-hide {
	display:none;
}

#nav-wrapper {
	width:100%;
	max-width:1080px;
	height:auto;
	margin:-20px auto 0 auto;
}

#logo {
	width:230px;
	height:auto;
	float:left;
	margin:30px 0 0 30px;
}

#logo-mobile {
	display:none;
}

#logo-wide {
	display:block;
}

#mobile-nav {
	display:none;
}

#top-nav {
	width:507px;
	font-family:'CenturyGothic';
	float:right;
	margin:0 0 0 0;
	display:block;
}

#top-nav ul {
	text-align:center;
}

#top-nav ul li {
	font-family:'CenturyGothic';
	display:inline-block;
	font-size:12px;
	color:#7e7e7e;
	letter-spacing:normal;
	padding: 70px 10px 10px 10px;
}

#top-nav ul li a{
	font-family:'CenturyGothic';
	color:#7e7e7e;
}

#top-nav ul li a:hover{
	color:#ddd;
	transition:0.5s;	
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
}

.nav-active-a {
	color:#fff !important;
}

.nav-active-a:hover {
	color:#ddd !important;
	transition:0.5s;	
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
}

.nav-active-li {
	background-color:#C6C6C6 !important;
}

#m_nav_button {
	display:none;
}


#hero-wrapper {
	height: 400px;
	background-position:center;
	margin:10px 0 0 0;
}

#hero-sub-head {
	font-size:35px;
	margin: 20px auto 0 auto;
	padding:20px 0 0 0;
	border-top: solid 2px #fff;
	width:330px;
}

#hero-text {
	padding:65px 0 0 0;
}

#hero-text ul {
	margin:-5px 0 0 0;
}

#hero-text ul li {
	margin: 30px 0 0 0;
	
}

#hero-text ul li a{
	font-size:16px;
	padding:5px 15px;
}

#wrapper {
	width:98%;
	max-width:1080px;
	margin:40px auto 60px auto;
	padding: 0 1%;
}

.three-links figcaption {
	font-size:22px;
}

.para-pic {
	width:39%;
	float:left;
	padding:5px 4% 5px 0;
}

.para-pic1 {
	display:block;
	width:40%;
	float:left;
	padding:5px 4% 5px 0;
}

#contact-info {
	float:left;
	width:31%;
	height:auto;
	padding:10px 3% 0 3%;
	text-align:left;
}

.contact-font {
	font-size:17px;
	padding: 2px 0;
}

#google-map {
	float:left;
	width:59%;
	height:auto;
	padding:10px 2% 0 2%;
}


.vessel-pic {
	width:42%;
	padding:15px 4% 15px 4%;
	float:left;
}





}