/* Eric Meyer's Reset Reloaded *//* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

body{
text-align: center;
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:"wdth" 100;
  box-sizing: border-box;
}
#navbar{
background-color: #004D6B;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 1em;
}
@media only screen and (max-width: 890px) {

    #navbar nav {
        display: none;
        grid-column: span 2;
        background-color: #004d6a;
    }

    #navbar nav.block {
        display: block;
    }

    #navbar nav a {
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 12px 0;
        border-top: 1px solid #2e6579;
        background-color: #0c5773;
    }

    #navbar nav > ul > li > a {
        padding-top: 16px;
        background-color: #004d6a;
        border-top: 3px solid #2e6579;
        font-weight: 800;
    }

    #navbar a#logo {
        overflow: hidden;
        justify-self: start;
    }
}
#logo img{
	width: 3em;
	border: 1px solid #478;
	border-radius: 8px;

}

/* Mobile menu */
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  justify-self: end;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #abc4ce;
  stroke-width:5.5;
  stroke-linecap:round;
}

.ham8 .top {
  stroke-dasharray: 40 160;
}
.ham8 .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 400ms;
}
.ham8 .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 400ms, stroke-dashoffset 400ms;
}
.ham8.active .top {
  stroke-dashoffset: -64px;
}
.ham8.active .middle {
  transform: rotate(90deg);
}
.ham8.active .bottom {
  stroke-dashoffset: -64px;
}

/* ----------------------------- */
/* Typography ------------------ */
/* ----------------------------- */

h1, h2, h3 {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin: 1.5em 0 1em;
  display: block;
    color: #1A404E;
    text-transform: uppercase;
}
h1{ font-size: 2.8em; }
h2{ font-size: 2.4em; }
h3{ font-size: 2em; }
h4{ font-size: 1.6em; }
h5{ font-size: 1em; }
p{
	font-size: 1em;
	line-height: 1.5;
	/*max-width: 65ch;*/
	display: block;
	margin-bottom: 1.4em;
}
.main ul{
text-align: left;
    list-style: disc;
    margin: 1em 1em 1em 3em ;
    line-height: 1.5;
}
li{
/*display: inline-block;*/
    padding-bottom: .7em;
}
/* ----------------------------- */
/* Layout items -----------------*/
/* ----------------------------- */

.main-carousel{
	background-color: #ccc;
	display: flex;
	flex-flow: column;
	margin: 0 0 4em;
}
.carousel-cell, .banner-cell{
  /* width: 100%; */
  max-width: 100%;
	text-align: center;
	min-height: 400px;
	position: relative;
	display: flex;
	flex-flow: column;
    padding: 1em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.carousel-cell .logo{
    width: 10%;
    margin: 3em auto;
}
.banner-cell .logo{
	width: 40%;
	margin: 3em auto;
}
.main-carousel .logo{
    width: 10%;
    margin: 3em auto;
}
.logo img{
width:100%;
}
.carousel-cell .header-panel, .banner-cell .header-panel{
	background-color: #00000025;
	max-width:60%;
	margin: 0 auto 2em;
	padding: 1em;
}
.carousel-cell h1, .banner-cell h1{
	font-size: 2.5em;
	color: #fff;
	text-shadow: 0 0 5px #00000020;
}
.carousel-cell p, .banner-cell p{
    color: #fff;
    text-shadow: 0 0 5px #00000020;
}


.button{
background-color: #FF6300;
border-radius: 4px;
border: 1px solid #AF4400;
padding: 8px 18px;
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 1px 2px #520;
  display: inline-block;
}

.main {
    max-width: 600px;
    margin: 0 auto;
    width: auto;
    padding: 0 1em;
}

.news-alerts{
    background-color: #bbe4f4;
    padding: 1em;
    margin: 0 1em 3em;
    border-radius: 1em;
}
.news-alert h1{
    font-size: 1.2em;
    color: #1A404E;
}
.news-alert p{
    font-size: 1em;
}
.button-gallery{
	display: grid;
	grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin: 1em;
}
.button-gallery a.pic-button{
	display: flex;
	flex-flow: column;
    align-items: center;
    width: 100%;
    align-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    height:0;
    padding: 50% 1em;
    position: relative;
    border-radius: 1em;
    background-color: #1A404E;
    border: 1px solid #0c5773;
    box-sizing: border-box;
    font-family: "Bitter", serif;
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    color: white;
}
.button-gallery a.pic-button.hire{
    background-image: url("../graphics/homepage-buttons/boat-hire.jpg");
}
.button-gallery a.pic-button.trips{
    background-image: url("../graphics/homepage-buttons/boat-trips.jpg");
}
.button-gallery a.pic-button.food{
    background-image: url("../graphics/homepage-buttons/food.jpg");
}
.button-gallery a.pic-button.lessons{
    background-image: url("../graphics/homepage-buttons/lessons.jpg");
}
.button-gallery a.pic-button.vouchers{
    background-image: url("../graphics/homepage-buttons/gift-vouchers.jpg");
}
.button-gallery a.pic-button.loyalty{
    background-image: url("../graphics/homepage-buttons/loyalty-scheme.jpg");
}
.button-gallery a.pic-button.rya{
    background-image: url("../graphics/homepage-buttons/RYA-first-aid-training.jpg");
}
.button-gallery a.pic-button.moorings{
    background-image: url("../graphics/homepage-buttons/moorings-brokerage.jpg");
}
.button-gallery a.pic-button.accomodation{
    background-image: url("../graphics/homepage-buttons/accomodation.jpg");
}
.button-gallery a.pic-button.venue-hire{
    background-image: url("../graphics/homepage-buttons/venue-hire.jpg");
}
.button-gallery a.pic-button.dylan{
    background-image: url("../graphics/homepage-buttons/dylan.jpg");
}

.contact-block{
    padding: 1em;
    background: #C6EFFD;
    margin: 4em 1em 1em 1em;
    border-radius: 1em;
    display: flex;
    flex-flow: column;
}
.contact-block .map{
    margin-bottom: 1em;
}
.contact-block .map img{
width: 100%;
}
.contact-block .details{
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.footer{
    margin-top: 3em;
    padding: 1em !important;
    display: flex;
    flex-flow: column;
    background-image: url("../graphics/slice6.svg");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: center;
}
.linked-logos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    margin: 3em 1em;
}
.linked-logos img{
    width: 90%;
    height: auto;
    display: block;
    max-width: 6em;
    margin: auto;
}
.footer .logo{
    width: 40%;
    margin: 4em auto 2em;
}
.footer nav{
    margin: 2em auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1em;
}
.footer nav a{
    color: white;
    font-size: 0.7em;
    text-decoration: none;
    padding: .5em;
}
.copyright{
    text-align: center;
    font-size: .6em;
    margin-bottom: 2em;
}
section h1{
    font-size: 2em;
}
.craft-list {
    text-align: center;
}
.craft-list section{
    padding: 2em 0;
    border-bottom: 2px solid #E6E6E6;
}
.craft-list section:last-child {
    border-bottom: none;
}
.craft-list img
{
    display: block;
    width: 60%;
    margin: 0 auto;
}

.gallery{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    row-gap: 1em;
    margin: 4em auto;
    max-width: calc(100% - 2em);
    }
.gallery a{
        max-width: calc(50% - 1em);
    border-radius: 15px;
    overflow: hidden;
}
.gallery a img{
    width: 100%;
}

.highlight-panel{
    width: 60%;
    margin: 2em auto 4em auto;
    background: #bbe4f4;
    border-radius: 1em;
    padding: 1em 1em 3em;
}
.highlight-panel h2{
    font-size: 1.8em;
}
.highlight-panel h4{
    padding: 0 0 1em 0;
}
.highlight-panel .button{
    margin-bottom: 1.5em;
}
.lowlight-panel{
    background-color: #95AFB9;
    padding: 1em;
    color: white;
    margin: 1.5em 0;
}
.lowlight-panel h1, .lowlight-panel h2, .lowlight-panel h3, .lowlight-panel h4, .lowlight-panel h5, .lowlight-panel h6{
    color: white;
    margin-top: 1em;
}
.table{
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: 1fr, 1fr;
    color: #1A404E;
    font-size: .7em;
}
.table .row{
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #1A404E;
}
.table .row div{
    padding: .5em 0 ;
}
.table .row .th{
    font-weight: bold;
}

.table .row:last-child{
    border-bottom: 0 none;
}
dl{
    line-height: 1.5em;
}
dt{
    font-weight: bold;
}
dd{
    margin-bottom: 1em;
    border-bottom: 1px solid #1A404E;
    padding: .5em 0 1.5em;
}
dd:last-child{
    margin-bottom: 5em;
    border-bottom: 0 none;
    padding: .5em 0 1.5em;
}


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

	#navbar{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items:center;
        padding:30px 60px;
	}
	#navbar a#logo{
		/* border: 1px solid #004D6B;
		border-radius: 15px;
		overflow: hidden; */
	}
	#navbar a#logo:hover{
		border-color: #1C627D;
		box-shadow: 0 0 8px #ffffff42;
	}
	#navbar a#logo img{
		max-width: 100%;
	}


/* ----------------------------- */
/* Desktop nav ----------------- */
/* ----------------------------- */
.ham{
    display: none;
}
    #navbar nav {
        display: grid;
    }
    #navbar nav a {
      text-decoration: none;
    }

    #navbar nav {
        text-align:left;
    }

    #navbar nav ul {
      background: #004D6B;
      list-style: none;
      margin: 0;
      padding-left: 0;
    }

    #navbar nav li {
      color: #fff;
      background: #D9E5EA;
      display: block;
      float: left;
padding-bottom: 0;
      position: relative;
      text-decoration: none;
      transition-duration: 0.5s;
        z-index: 1;
    }
    #navbar nav>ul>li{
    margin-left: 1rem;
    border-radius: 5px;
    background: none;
    }
    #navbar nav li a {
      color: #fff;
      padding: 1rem;
      display: block;
    }
    #navbar nav ul li ul li a{
        color: #1A404E;

    }
    #navbar nav li:hover> a {
    color: #FF9B10;
    }
    #navbar nav li:hover,
    #navbar nav li:focus-within {
      background: #1C627D;
      cursor: pointer;
    }

    #navbar nav li:focus-within a {
      outline: none;

    }

    #navbar nav ul li ul {

      visibility: hidden;
      opacity: 0;
      min-width: 12rem;
      position: absolute;
      transition: all 0.5s ease;
      margin-top: 0;
      left: 0;
      display: none;
    }

    #navbar nav ul li:hover > ul,
    #navbar nav ul li:focus-within > ul,
    #navbar nav ul li ul:hover,
    #navbar nav ul li ul:focus {
      visibility: visible;
      opacity: 1;
      display: block
    }

    #navbar nav ul li ul li {
      clear: both;
      width: 100%;
    }
/* ----------------------------- */
/* END Desktop nav ------------- */
/* ----------------------------- */
    .carousel-cell .header-panel{
        width: 30%;
    }
    .carousel-cell, .banner-cell {
        min-height: 500px;

    }
    .main {
        max-width: 980px;
        margin: 0 auto;
        width: auto;
    }

    .button-gallery{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2em;
    }
    /*.button-gallery .pic-button:first-child {*/
    /*    grid-column: 1/4;*/
    /*    max-height: 200px;*/
    /*    padding: 12% 1em;*/
    /*}*/

    .gallery{
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        gap: 1em;
        margin: 4em auto;
        max-width: 980px;
        }
    .gallery a{
            max-width: 30%;
    }
    .gallery a img{
        width: 100%;
    }
    .contact-block{
        padding: 1em;
        background: #C6EFFD;
        margin: 4em 1em 1em 1em;
        border-radius: 1em;
        display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    }
    .contact-block .details{
        grid-column: 2/4;
    }
    .footer .logo img {
        width: 10%;
        margin: 8em auto 2em;
    }
    .craft-list section{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
        text-align: left;
    }
    .craft-list section h1 {
        margin-top: 0;
    }
    .table{
        font-size: 1em;
    }
    .banner-cell .logo{
        width: 40%;
        max-width: 12em;
        margin: 3em auto;
    }
    .footer .logo{
        width: 100%;
        margin: 4em auto 2em;
    }
}