/*
* Yellow - #FFC403
* Blue   - #227ABA
* White  - #FFFAF8
* Black  - #271F14
* Grey   - #333333
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700&family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,600;1,700;1,800;1,900;1,1000&display=swap');
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body {
	color: #271F14;
	font-family: 'Nunito Sans';
	font-weight: 500;
	letter-spacing: 1px;
	background: #FFFAF8;
}
a { text-decoration: none; color: #271F14;
}
a:hover, a.button:hover { color: #FFC403 }

a.button {
    font-family: 'Nunito';
    background: #271F14;
    color: #FFFAF8;
    padding: 8px 12px;
    border-radius: 2px;
}


.inner-wrapper {
    width: 1000px; max-width: 90%;
    margin: 0 auto;
    position: relative;
}
img { max-width: 100%; }
h1, h2, h3, h4, h5 { font-family: 'Nunito'; text-align: center; }
h1 {
    /* display: inline-block; */
    font-size: 2.5em; font-weight: 900;
    margin: 0 0 10px;
    /* text-shadow: 0 1px 5px rgba(0,0,0,0.75); */
    /* background: rgba(39, 31, 20, 0.9); */
    padding: 6px 12px;
    /* border-radius: 2px; */
}
hgroup {
    /* display: inline-block; */
    /* margin: 20px 0 0; */
    text-shadow: 0 1px 10px rgba(0,0,0,1);
    /* background: rgba(39, 31, 20, 0.9); */
    /* border-radius: 2px; */
}
/* hgroup h1 { margin: 0; } */
h2 {
    margin: 30px 0 5px;
    font-size: 1.7em; font-weight: 800;
    text-align: left;
}
h3 {
    display: inline-block;
    font-size: 1.2em; font-weight: 600;
    margin-top: 0;
    /* background: rgba(39, 31, 20, 0.9); */
    padding: 6px 12px;
    /* border-radius: 2px; */
}

.divider {
    width: 60%; height: 2px;
    margin: 60px auto;
    background: #E9E9E9;
}
.padder.small { height: 30px; }
.padder.medium { height: 60px; }
.padder.large { height: 100px; }
.center { text-align: center; }




/* ========= HEADER ========== */

header {
    width: 100%;
    position: fixed; z-index: 100; top: 0;
    padding: 10px 0;
    background: #FFFAF8;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
}
#logo {
    float: left;
}
header nav {
    position: absolute; top: 25px; right: 0;
    height: 100%; line-height: 100%;
    font-family: 'Nunito';
    text-align: center;
}
header nav a {
    margin: 0 2px;
    padding: 8px 12px;
    border-radius: 2px;
}
header nav a.current, header nav a:hover {
    background: #271F14;
    color: #FFFAF8;
}

.header-image {
    width: 100%; height: 400px;
    position: relative; margin-top: 80px;
    background: url('images/homepage-_JB17078.jpg') center center #227ABA;
    background-size: cover;
}
#index .header-image { background-image: url('images/homepage/_JB17078.jpg'); }
/* #marina .header-image { background-image: url('images/bg-PFA7050.jpg'); } */
/* #boatyard .header-image { background-image: url('images/bg-CATM-BoatyardAir-DJI4-1809JMR70070web.jpg'); } */
/* #chandlery .header-image { background-image: url('images/bg-JMR6087.jpg'); } */
#nearby .header-image { background-image: url('images/bg-3.jpg'); }
#contact .header-image { background-image: url('images/bg-8.jpg'); }
.header-image hgroup {
    position: relative; top: 120px;
    color: #FFFAF8;
    text-align: center;
}

/* MOBILE MENU */
#menu-icon {
    position: absolute;
    right: 0;
    top: 15px;
    cursor: pointer;
    display: none;
}
#menu-icon:hover {

}





/* ========== INDEX ========== */

#index, #index h2 { text-align: center; }
.columns {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.columns.three > * {
    width: calc(100% / 3);
}
.columns.four > * {
    width: calc(100% / 4);
}
.columns p { padding: 0 15px 20px 15px }


.slider-wrapper {
    position: absolute;
    width: 100%; height: 100%;
    overflow: hidden;
}
.slides-container {
    height: 100%;
    width: 100%;
    display: flex;
    overflow: scroll;
    scroll-behavior: smooth;
    list-style: none;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.slides-container::-webkit-scrollbar { width: 0; height: 0; }
.slide-arrow {
    display: flex;
    position: absolute; top: 0; bottom: 0;
    margin: auto; padding: 0;
    height: 4rem; width: 2rem;
    border: none;
    background-color: #271F14;
    font-size: 3rem;
    color: #E9E9E9;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 100ms;
}

.slide-arrow:hover, .slide-arrow:focus {
    opacity: 1;
}
.slider-wrapper.first #slide-arrow-prev,
.slider-wrapper.last #slide-arrow-next { display: none; }
#slide-arrow-prev {
    left: 0;
    padding-left: 0.25rem;
    border-radius: 0 2rem 2rem 0;
}
#slide-arrow-next {
    right: 0;
    padding-left: 0.75rem;
    border-radius: 2rem 0 0 2rem;
}
.slide {
    width: 100%;
    height: 100%;
    flex: 1 0 100%;
    width: 100%;
    background: url('images/homepage-_JB17078.jpg') center center #227ABA;
    background-size: cover;
}


/* SLIDE BACKGROUNDS */
#marina .slide:nth-child(1) { background-image: url('images/marina/01-IMG_0104.jpg'); }
#marina .slide:nth-child(2) { background-image: url('images/marina/02-PFA7050.jpg'); }
#marina .slide:nth-child(3) { background-image: url('images/marina/03-JB17078.jpg'); }
#marina .slide:nth-child(4) { background-image: url('images/marina/04-1_1.jpg'); }
#marina .slide:nth-child(5) { background-image: url('images/marina/05-JB17083.jpg'); }
#marina .slide:nth-child(6) { background-image: url('images/marina/06-JB17079.jpg'); }
#marina .slide:nth-child(7) { background-image: url('images/marina/07-8.jpg'); }

#boatyard .slide:nth-child(1) { background-image: url('images/boatyard/01-CATM-BoatyardAir-DJI4-1809JMR70070web.jpg'); }
#boatyard .slide:nth-child(2) { background-image: url('images/boatyard/02-CATM-BoatyardTravelLift-AirDJI4-1809JMR0449web.jpg'); }
#boatyard .slide:nth-child(3) { background-image: url('images/boatyard/03-CATM-BoatyardAir-DJI4-1809JMR70098web.jpg'); }
#boatyard .slide:nth-child(4) { background-image: url('images/boatyard/04-CATM-Boatyard-1411JMR3277.jpg'); }
#boatyard .slide:nth-child(5) { background-image: url('images/boatyard/05-CATM-Boatyard-1809JMR0520web.jpg'); }
#boatyard .slide:nth-child(6) { background-image: url('images/boatyard/06-CATM-BaileysBoatyard-JMR14075488.jpg'); }
#boatyard .slide:nth-child(7) { background-image: url('images/boatyard/07-CATM-Boatyard-1809JMR0456-Panoweb.jpg'); }
#boatyard .slide:nth-child(8) { background-image: url('images/boatyard/08-CATM-Boatyard-iP8P-1809JMR0013web.jpg'); }
#boatyard .slide:nth-child(9) { background-image: url('images/boatyard/09-CATM-BoatyardTravelLift-1809JMR0485web.jpg'); }
#boatyard .slide:nth-child(10) { background-image: url('images/boatyard/10-CATM-BaileysBoatyard-JMR140763351.jpg'); }

#chandlery .slide:nth-child(1) { background-image: url('images/chandlery/01-JMR6087.jpg'); }
#chandlery .slide:nth-child(2) { background-image: url('images/chandlery/02-JMR6091.jpg'); }
#chandlery .slide:nth-child(3) { background-image: url('images/chandlery/03-JMR6096.jpg'); }
#chandlery .slide:nth-child(4) { background-image: url('images/chandlery/04-JMR6097.jpg'); }
#chandlery .slide:nth-child(5) { background-image: url('images/chandlery/05-JMR6102.jpg'); }
#chandlery .slide:nth-child(6) { background-image: url('images/chandlery/06-JMR6105.jpg'); }





/* ========== CONTENT ========== */

table { border-collapse: collapse; }
table td {
    border: 1px solid #E9E9E9;
    padding: 10px 20px 10px 10px;
}


/* #nearby h2 { padding-bottom: 40px;   } */
/* .nearby-business-columns { pad } */
.nearby-business-image {
    border: #E9E9E9 solid 5px;
    border-radius: 50%;
}
.nearby-business h4 { margin: 20px 0 0 0; }
.nearby-business h5 { margin: 5px 0 20px 0; font-weight: 400; }
.nearby-business p:not(.tel) { font-size: 0.8em; }
p.tel { padding-bottom: 5px; }





/* ========== FOOTER ========== */
footer {
    background: #271F14;
    color: #FFC403;
    padding: 40px 0;
    text-align: center;
}
footer small {
    font-size: 0.7em;
}
footer a { color: #FFC403; }
footer a:hover { color: #FFFAF8; }

/* LIMIT OF INNER WIDTH */
@media only screen and (max-width:1110px) {



}

@media only screen and (max-width:1000px) {

.columns.four>* {
        width: 50%;
        margin-bottom: 40px;
    }
    .header-image { height: 320px; }
}

@media (max-width:860px) {
    
header.menu-showing {
    height: 380px;
}

header nav {
    display: none;
    top: 100px; left: 0;
    float: none;
    background: #FFFAF8;
}
header.menu-showing nav { display: block; }
header nav a {
    display: block;
    width: 100%;
    padding: 15px 0;
}
#menu-icon {
    display: inline-block;
}
hgroup h1 { font-size: 2em; }
hgroup h3 { font-size: 1em; }
}


@media (max-width:662px) {
.header-image { height: 280px; }
.header-image hgroup { top: 100px; }
.columns.three>*, .columns.four>* {
    width: 100%;
    margin-bottom: 40px;
}
hgroup h1 { font-size: 1.5em; margin-top: 0; }
hgroup h3 { font-size: 0.8em; }

}