@charset "utf-8";
/* CSS Document */
@font-face {
	font-family:'Poppins-Regular';
	src:url(../fonts/Poppins-Regular.ttf);
}
@font-face {
	font-family: 'Poppins-Light';
	src:url(../fonts/Poppins-Light.ttf)
}
@font-face {
	font-family: 'Poppins-Medium';
	src:url(../fonts/Poppins-Medium.ttf)
}
@font-face {
	font-family: 'Poppins-MediumItalic';
	src:url(../fonts/Poppins-MediumItalic.ttf)

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

}
@font-face {
	font-family: 'ThrowMyHandsUpintheAir';
	src: url(../fonts/ThrowMyHandsUpintheAir.ttf);
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family: 'ThrowMyHandsUpintheAirBold';
	src: url(../fonts/ThrowMyHandsUpintheAirBold.ttf);
	font-weight:normal;
	font-style:normal;
}
html {
     overflow-y: scroll;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
/*for older browsers*/
/*header, section, footer, aside, nav, main, article, figure {
    display: block; 
}*/
body, h1, h2, h3, h4, p, div, ul, li{
	margin: 0;
	padding:0;
}

/*for bottom of page footer*/
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
/*end of for bottom of page footer*/
a {
	text-decoration:none;
	outline:none;
	color:inherit;
}
.gsc-logo {

	outline: none;
	width:220px;
	border-color:transparent;
	
}
a:visited, a:hover, a:active, a:focus {
	text-decoration:none;
}
button:active {
	outline:none;
}
a:hover {
	color: rgb(0,0,153);
}
.italicmedium {
	
	font-family: 'Poppins-MediumItalic';
}
.italiclight {
	
	font-family: 'Poppins-LightItalic';
}

body {
	 background: rgb(148,184,184); /* For browsers that do not support gradients */
	 background: -webkit-linear-gradient(rgba(148,184,184,1),rgba(148,184,184,0)); /*Safari 5.1-6*/
	 background: -o-linear-gradient(rgba(148,184,184,1),rgba(148,184,184,0)); /*Opera 11.1-12*/
	 background: -moz-linear-gradient(rgba(148,184,184,1),rgba(148,184,184,0)); /*Fx 3.6-15*/
	 background: linear-gradient(rgba(148,184,184,1), rgba(148,184,184,0)); /*Standard*/
	 background-repeat:no-repeat;

	font-family: 'Poppins-Light', Tahoma, sans-serif;
	color:rgb(0,0,0);
	position: relative;/*For bottom of the page footer*/
    margin: 0;
    padding-bottom: 2rem;
    min-height: 100%;/*end of for bottom of page footer*/
}
h1 {
	font-family: 'Oranienbaum', serif;
	font-size:3.4em;
	font-weight:lighter;
	line-height:1em;
	margin-top:10px;
	padding:16px 54px 0px;/*this centres the logo over nav*/
	text-align: center;
}
h2 {
	font-family: 'Oranienbaum', serif;
	font-size:2.4em;
	font-weight:lighter;
	line-height:1.8em;
	letter-spacing: .05em;
	color: rgb(0,0,0);
	text-align: center;
}
h3 {
	font-size: 1.8em;
	line-height:1.2em;
	color: rgb(0,102,102);
	text-align: center;
}
h4 {
	font-size: 1.2em;
	line-height:1.6em;
	font-weight: lighter;
}
img {
	max-width: 100%;
	height:auto;
	border-radius: 8px;
    border: 1px solid black;
}

 header {
	 display: -ms-Flexbox;
	-ms-box-orient: horizontal;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display:flex;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	font-family: 'Poppins-Light', sans-serif;
	font-size:1.1em;
	padding-top:24px;
	padding-left:10px;
	padding-right:10px;
}
header img {
	border:none;
}

.name {
	font-family: 'Poppins-Light',Verdana, sans-serif;
	font-size:.8em;
	color: rgb(0,102,102);
}
#header-info {
	width:330.2px;
	text-align:center;
	font-size:1.5em;
	color: rgb(255,255,255);
	text-shadow:1px 1px 1px  #000000;
	padding-top:6px;
}
#header-info-2 {
	width: 214px;
}
/*-----------this is the right hand column aside*/
.aside-side {
	padding: 0px 24px; /*same as nav*/
	width:200px;
	overflow:hidden;/*to keep in balance as content driven*/
	color: rgb(255,255,255);
	text-shadow:1px 1px 1px  #000000;
}
.aside-side p {
	text-align:center;	
	font-size:1.4em;
}
.aside-side-2 p {
	padding: 0px 24px; /*same as nav*/
	width: 163.2px;/*same as nav*/
	font-family:'ThrowMyHandsUpintheAir', cursive;
	font-size:1.8em;
	text-align: center;
}
/*------this is the main section-------------------------*/
 main {
	padding:10px 0px;
	margin-bottom:46px; 
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	
}
main p {
	font-size:1.2em;
	text-align:left;
	padding:0px 0px 6px;
	max-width:850px;/*!!!!NOTE THIS CONTAINS THE IMAGE IN IE*/
}
section {	
	max-width:850px;
	width: 100%;/*this is to keep the main from expanding out in the IE phone*/
	
}
article {
	padding-bottom:14px;
	padding-top: 18px;
	 background: rgb(194,215,215); /* For browsers that do not support gradients */
	 background: -webkit-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0)); /*Safari 5.1-6*/
	 background: -o-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0)); /*Opera 11.1-12*/
	 background: -moz-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0)); /*Fx 3.6-15*/
	 background: linear-gradient(rgba(194,215,215,1), rgba(194,215,215,0)); /*Standard*/
	 background-repeat:no-repeat;
	 
}
article img {
	width:80%;
	height:80%;
	max-width:600px;
	border-color: rgb(128,179,179);
}
article h3 {
	font-weight:lighter;
	text-shadow: 1px 2px 1px rgb(255,255,255);
	padding-bottom:4px;
}
.article-h3-large {
	font-weight:bold;
	text-shadow:none;
	padding-bottom:4px;
	color: #C00;
	color: #F06;
	text-shadow: 1px 2px 1px rgb(255,255,255);
}
article p {
	padding:0px 20px 10px;
}
.article-center {
	text-align:center;
}
article a {
	font-weight: 600;
}
article ul{
	list-style-type: disc;
	padding:0px 20px 0px;
	margin-left:30px;
}
article ul li {
	font-size:1.2em;
	line-height:1.8em;
}
article h4 {
	text-align:center;
}
.green {
	color: rgb(0,102,102);
}

/*-----------------read more ------------------------*/
.read-more-state {
	display:none;
}
.read-more-target {
	opacity:0;
	max-height:0;
	font-size:0;
	transition:.25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
	opacity:1;
	font-size:inherit;
	max-height:999em;
}
.read-more-state ~ .read-more-trigger:before {
	content:'show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
	content:'show less';
}
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  margin-left:20px;
  background-color:rgb(128,179,179);
  font-size: 1em;
  line-height: 2;
  color: rgb(255,255,255);
  border-color: rgb(128,179,179);
  border-radius: .25em;
 
}
.refresh {
  cursor: pointer;
  display: inline-block;
  margin-left:20px;
  margin-bottom: 8px;
  font-size: 2.6em;
  line-height: 1em;
  color:rgb(128,179,179);
  -ms-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
.refresh:hover {
	-ms-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -webkit-transform: rotate(240deg);
    -o-transform: rotate(240deg);
}

/*-------------------------end read more--------------------*/
/*------------these are the news posts---------------*/
/*#post-1 {
}
*//*#post-2 {
}*/
/*-----------------------this is the header slider----------------------------*/
/*--------------this is to pause-----------*/
#slider {
}
.slider-button {
  float:right;
  margin-top:5px;
  padding: 4px;
  font-family:'Poppins-Medium', Tahoma, sans-serif;
  color: rgb(51,51,51);
  font-size: 1em;
  line-height: 1;
  background-color: rgba(128,179,179,0.5);
  border-radius:.25em;
}

/*-----------end to pause---------*/
.slider {
	overflow:hidden;
    border:1px solid rgb(0,0,0);
	border-radius:8px;
	background-color:rgb(153,153,153);
}
.slider figure div{
	width: 16.66666666%;
	float:left;
}
.slider figure img {
	width:100%;
	float:left;
	border:none;
}
.slider figure {
	position:relative;
	width:600%; /* because 20% x 5 slides = 100%*/
	margin:0;
	left:0;
	animation:60s slidy infinite;
	animation-timing-function:ease-in-out;
}

.slide {
	width:100%;
	height:100%;
}
@keyframes slidy {
	0% {
		left:0%;
	}
	8% {
		left:0%;
	}
	10% {
		left:-100%; 
	}
	18% {
		left:-100%;
	}
	20% {
		left:-200%;
	}
	28% {
		left:-200%;
	}
	30% {
		left:-300%;
	}
	38% {
		left:-300%;
	}
	40% {
		left:-400%;
	}
	48% {
		left:-400%;
	}
	50%  {
		left:-500%;
	}
	58% {
		left:-500%;
	}
	60% {
		left:-400%;
	}
	68% {
		left:-400%;
	}
	70% {
		left: -300%;
	}
	78% {
		left:-300%;
	}
	80% {
		left:-200%;
	}
	88% {
		left:-200%;
	}
	90% {
		left:-100%;
	}
	98% {
		left:-100%;
	}
	100% {
		left:0%
	}
	
}
/*-----------------------this is the end of header slider----------------------------*/
/*------------------------this is the main navigation--------------------------------*/
nav {
	padding:0px 24px;
}
nav ul {
	list-style-type:none;
}
ul a:visited {
	color:rgb(0,0,0);
}
ul a.current  {
	color:rgb(255,255,255);
}
.circle-base {
    border-radius: 50%;
	width: 6.2em;
    height:6.2em;
	margin:.5em;
	padding-top:2.5em;
	-webkit-box-shadow: 0px  2px 4px #000000; 
    -moz-box-shadow: 0px  2px 4px #000000;
    box-shadow: 0px  2px 4px #000000; 
	font-family:'Poppins-Medium';
	text-align:center;/*I need this*/
}
.circle-base-current {
    border-radius: 50%;
	width: 6.2em;
    height:6.2em;
	margin:.5em;
	padding-top:2.5em;
	-webkit-box-shadow: 0px  2px 4px #000000;
    -moz-box-shadow: 0px  2px 4px #000000;
    box-shadow: 0px  2px 4px #000000; 
	font-family:'Poppins-Medium';
	text-align:center;/*I need this*/
	background-color:rgb(128,179,179);
}
.circle-base a {
	text-align:center;
	font-size:1em;
	color:rgb(0,0,0);
}
.circle-base:hover{
	background-color:rgb(128,179,179);
	-ms-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
}
.circle-base-current {
	color:rgb(255,255,255);
	background-color:rgb(128,179,179);
	text-shadow:1px 1px 1px  #000000;
}
.circle-base-current a{
	color:rgb(255,255,255);
}
/*------------------------this is the END main navigation--------------------------------*/
/*------------------------back to button-----------------------------------------------------*/
.back-to {
	background-color:rgb(128,179,179);
	border-radius:8px;
	-webkit-box-shadow: 0px 2px 4px #000000;
    -moz-box-shadow: 0px 2px 4px #000000;
    box-shadow: 0px 2px 4px #000000;
}
.back-to h3 {
	color:rgb(255,255,255);
	font-weight:lighter;
	line-height:2em;
}




/*----------------------------end back to button*/

/*------------this is the about page---------------*/

.about {
	
}
.about a {
	font-weight:600;
}
.content-flex .about{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction:column;
    -ms-flex-direction: column;
    flex-direction: column;
	-webkit-flex-wrap: nowrap;
    -ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
}

.about  p{
	padding:0px 20px 0px;
	margin-left:30px;
}
.about  ul{
	list-style-type: none;
	padding:0px 20px 0px;
	margin-left:30px;
}
.about ul li {
	font-size:1.2em;
	line-height:1.8em;
}
.about ul a:hover {
	color: rgb(0,0,153);
}
.about h4 {
	padding:0px 20px 0px;
	margin-left:30px;
}
.about img {
	max-width:280px;
	height:auto;
	margin:10px;
}
/*----------------this is the boats page-----------------------*/
#boats {
	display: -webkit-box; 
	display: -ms-flexbox;
	display: -webkit-flex; 
	display: flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	padding:0px 10px 10px;
}
.type {
	border-radius: 8px;
	background-color:rgb(255,255,255);
	padding:20px 10px 10px;
	margin:8px;
	width: 220px;
   -webkit-box-shadow: 0px  2px 4px #000000; 
   -moz-box-shadow: 0px  2px 4px #000000;
	box-shadow: 0px  2px 4px #000000; 
}
.type:hover {
	background-color:rgb(128,179,179);
}
.type p {
	line-height:2em;
	font-size:1.4em;
	font-family:'Poppins-Medium', Tahoma, sans-serif;
}
.type p a:hover {
	color:rgb(255,255,255);
	text-shadow:1px 1px 1px  #000000;
}
.type h3 {

}
.boats h2 {
	line-height:2.4em;/*to correct to sit at same height as others because of slide show*/
	margin-left: 90px;/*to allow for slider pause buttons*/
}
/*-----------Here is the accordion--------------------*/
.accordion-container{
	max-width:850px;
}
.accordion-container h3 {
	color:rgb(0,0,0);
	text-align:left;
}
button.accordion{
	width:100%;
	cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
	font-size: 1.4em;
	line-height:1.2em;
	color: rgb(0,0,0);
    transition: 0.4s;
	background: rgb(194,215,215); 
   background: -webkit-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0));
   background: -o-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0)); 
   background: -moz-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0));
   background: linear-gradient(rgba(194,215,215,1), rgba(194,215,215,0)); 
   background-repeat:no-repeat;
  
}
button::-moz-focus-inner {
  border: 0;
}
button.accordion.active, button.accordion:hover {
	background-color:rgb(255,255,255);
	outline: none;
}
button.accordion:after {
    content: '\02795';
    font-size: 18px;
   color:rgb(0,0,0);
    float: right;
    margin-left: 5px;
}
button.accordion.active:after {
    content: "\2796";
	color:rgb(0,0,0);
}
div.content{
	padding-top:5px;
	padding-bottom:5px;
    background-color:rgb(255,255,255);
	max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
}
div.content.show{
	opacity: 1;
    max-height: 2000px;  /*need to check this height if content changed*/
}
	
/*------------------------this is the END accordion--------------------------------*/
/*-------------------Boats EACH---------------------------------------*/

.boat {
	/*max-width:850px;*/
	/*overflow-y: scroll;*//*---added 25/8/17-----*/	

}
.heading{
    padding: 18px;
    width: 100%;
	font-size: 1.2em;
	line-height:1.2em;
	color: rgb(0,0,0);
    transition: 0.4s;
	background: rgb(194,215,215); 
   background: -webkit-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0));
   background: -o-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0)); 
   background: -moz-linear-gradient(rgba(194,215,215,1),rgba(194,215,215,0));
   background: linear-gradient(rgba(194,215,215,1), rgba(194,215,215,0)); 
   background-repeat:no-repeat;
}
.features {
	padding:10px;
	width:100%;/*---added 25/8/17-----*/	
}
ul.features {
	list-style-type: none;
	margin-left: 32px;
	padding:0px 16px 0px;
	font-size:1.2em;
/*	min-width:340px;
	max-width:500px;*/
	min-width:300px;/*---changed 25/8/17-----*/
	max-width:400px;
}
ul.features li {
	border-bottom: 1px solid rgb(128,179,179);
}
ul.features li a{
	font-weight:bold;
}

ul.features li a:hover {
	color:rgb(0,0,153);
}
.heading h3 {
		text-shadow: 1px 2px 1px rgb(255,255,255);
		font-weight:lighter;
}
.comment p{
	font-family: 'ThrowMyHandsUpintheAir' , cursive;
	color:rgb(0,0,0);
	text-shadow:none;
	font-size:1.8em;
	padding:20px 20px;/*---changed 25/8/17-----*/
    max-width:500px;
}
.comment p {
	text-align:left;	
}

.content-flex {
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
/*-------------------end Boats accordion content---------------------------------------*/
/*-----------------------this is the mySlides slide show----------------------------*/
.slideshow {
	width:100%;/*--for IE10-----*/
	overflow:hidden;/*----26/8/17----need this for smaller devices*/
}
.slideshow figure {
	max-width:100%;/*----26/8/17*/
	position:relative;
}
.mySlides{
	width:100%;
	text-align:center;
}
.mySlides-btn-left{
	position:absolute;
	top:45%;
	left:-26px;
	font-size:2em;
	color:rgb(0,102,102);
	cursor: pointer;
	padding:2em;
	margin:-2em;
	z-index: 1;
}
.mySlides-btn-right{
	position:absolute;
	top:45%;
	right:-26px;
	font-size:2em;
	color:rgb(0,102,102);
	cursor: pointer;
	padding:2em;
	margin:-2em;
	z-index: 1;
}
/*----------this is the video do not adjust-------------*/
.video-wrap {
	/*for video 640 x 360*/
	margin-left:130px;
	max-width: 800px;
}
.video-container {
	/*for video 640 x 360*/
	width:80%;
	max-width:640px;
	position:relative;
	padding-bottom:56.25%;
	padding-top: 22px;/*this works better than 30px for me*/
	height:0;
	overflow:hidden;
}
.video-container iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#player {

}
/*-----------------------this is the end of the mySlides slide show----------------------------*/
/*----------------------here is the contact page----------------------*/
.contact {
}
.contact-flex {
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.contact p{
	padding:10px 10px 0px;
}
.contact ul {
	list-style-type: none;
	padding:0px 20px 20px;
	margin-left:40px;
}

.contact ul li {
	font-size:1.2em;
	line-height:1.8em;
	min-width:250px;
}
.contact a {
	text-decoration:none;
	outline:none;
	color:inherit;
	font-weight:bold;
}
.contact-flex a:hover{
	color:rgb(0,0,255);
}
.contact-map {
	margin-left:30px;
}
.contact iframe {
	width:400px;
	height:400px;
	border:1px solid black;
}
.contact aside p{
	width:auto;
	font-family:'ThrowMyHandsUpintheAirBold';
	font-size:1.8em;
	line-height:1.6em;
	text-align:center;
}
/*----------site map--------------*/

#map {
	padding:20px 0px;;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;	
}
#map ul li {
	margin-left:30px;
	list-style-type:none;
}
#map a {
	color:inherit;
}
#map a:hover {
	color: rgb(0,0,255);
}
.map-ul-2{
	margin-left:30px;
	list-style-type:none;
	
}
.map-bold {
	font-weight:600;
}
/*-----------here is the footer*/
footer {
	padding:10px 0px 10px;
	cursor:default;
	color:#000000;
	font-size: .8em;
	font-weight:400;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	position: absolute;/*for bottom of the page footer*/
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;/*end for bottom of the page footer*/
}
#footer-1 {
	border-right:rgb(0,102,102)1px solid;
	padding:0px 10px;
}
#footer-2 {
	padding:0px 10px;
}
#footer-3 {
	padding:3px 10px 0px 0px;
}
#footer-4 {
	padding:0px 10px;
	border-left:rgb(0,102,102)1px solid;
}
.footer-pipe {
	color:rgb(0,102,102);
	font-weight:500;
}
footer img {
	border: none;
}
footer a:hover {
	color: rgb(0,0,255);
}
/*------------------------------------------------------------------*/
@media screen and (min-width: 1300px) {
	nav {
		-webkit-box-shadow:-46px 41px 46px -30px rgba(0,0,0,0.15);
		-moz-box-shadow: -46px 41px 46px -30px rgba(0,0,0,0.15);
		box-shadow: -46px 41px 46px -30px rgba(0,0,0,0.15);
		border-bottom-left-radius: 10px;
		border-bottom:1px solid  #CCCCCC;
		
	}
	.aside-side {
	    border-right:1px solid  #CCCCCC;
	    border-bottom:1px solid  #CCCCCC;
		border-bottom-right-radius: 10px;
	}
}
@media screen and (max-width: 1200px) {
body {
	font-size:90%;
}
header h1  {
	padding:0px 12px 0px;
	margin-top:20px;
}
#header-info {
	display:none;
}
#header-info-2 {
	display:none;
}
nav ul {
	list-style-type:none;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex; 
	display: flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.aside-side {
	display:none;
}
nav {
	padding:0px 4px 20px;/*----24/8/17*/
}
footer  {
	font-size: .6em;
}
main{
	padding:10px;
}
ul.features {
	margin-left: 10px;
}
}

@media screen and (max-width: 720px) {
.comment p{
	font-size:1.6em;
   /*padding:20px;*//*---changed 24/8/17-----*/
	padding:0px;
}
.about .content-flex  {
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction: column;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.contact-flex {
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.contact aside p{
	margin-left:60px;
}
/*reduce header info on smaller devices*/
header img {
	width:120px;
	height:auto;
}
header h1  {
	padding:18px 10px 0px;
}
.circle-base {
	width: 5.8em;
    height:5.8em;
	margin:.25em;
	padding-top:2.2em;
}
.circle-base-current {
	width: 5.8em;
    height:5.8em;
	margin:.25em;
	padding-top:2.2em;
}

/*----------this is the video do not adjust-------------*/
.video-wrap {
	margin-left:60px;
	max-width: 800px;
}
.features {
	padding:10px;
}
}
@media screen and (max-width: 500px) {

ul.features {/*---important do not add a change to min-width here -------*/
}
.comment {
		display:none;
}
.about .content-flex  {
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction: column;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.slider-button {
	display:none;
}
.boats h2 {
	margin-left: 0px;/*to allow for slider pause buttons*/
}


.contact iframe {
	width:260px;
	height:260px;
	border:1px solid black;
}

.contact aside p{
	margin-left:0px;
}
.contact ul {
	margin-left:20px;
}
.contact ul li {
	min-width: 60px;
}
/*reduce header info on smaller devices*/
header img {
	width:110px;
	height:auto;
}
.name {
	font-size:.9em;
}
header h1 {
	font-size:1.9em;
	line-height: 1.5em;
    margin-top:20px;
    padding: 0px 18px 0px;
}
/*--------this is for video do not adjust*/
video-wrap {
	margin-left:20px;
}
.video-container {
	padding-top:4px;
}

}
@media screen and (max-width: 380px) {
	
ul.features {
	padding:0;
	min-width:200px;/*---important do not change min-width here -------*/
}
.about img {
	max-width:200px;
	height:auto;
	margin:2px;
}
.contact ul {

	margin-left:0px;
}
.contact-map {
	display:none;
}
/*reduce header info on smaller devices*/
header {
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
}

header h1 {
	font-size:1.7em;
	line-height: .4em;
    margin-top:0px; /*this isn't working*/
	padding: 0px 10px 0px;
}
.back-to h3 {
	line-height: 1.4em;
}

}