@charset "utf-8";
/* CSS Document */

body {
    background-color: #e7edf3;
    color: #73808d;
    line-height: 18px;
    text-decoration: none;
}
a {
    text-decoration: none;
    color: #2b76c2;
}

a:visited {
    text-decoration: none;
}
a:hover {
    color: #5d98d5;
}
h1 {
    font-size: 34px;
    padding-top: 5px;
    font-weight: normal;
}
h2 {
    font-size: 24px;
    font-weight: normal;
    color: #2b76c2;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

.bullets {
    font-size: 14px;
    line-height: 18px;
}

.question {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

ul {
    list-style: none;
}
li {
    list-style: none;
}

.headertext {
    font-size: 2em;
}

#container {
    background-color: #fff;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
#header {
    background-color: #fff;
    width: 940px;
    padding: 10px;
    height: 130px;
}
#footer {
    height: 402px;
    width: 940px;
    padding-top: 50px;
    clear: both;
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 3px;
}

#banner {
    width: 943px;
    height: 299px;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 10px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    clear: both;
}
#container #banner img {
    padding-right: 8px;
    padding-left: 9px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#contenthome {
    width: 940px;
    background-color: #fff;
    text-align: center;
}
#content {
    position: relative;
    width: 910px;
    background-color: #fff;
    text-align: left;
    margin-left: 20px;
    clear: both;
}

#homecontentright {
    clear: none;
    width: 256px;
    margin-right: 28px;
    margin-left: 28px;
    float: right;
    text-align: center;
    background-color: #fff;
}
#homecontentleft {
    clear: none;
    width: 256px;
    margin-right: 28px;
    margin-left: 28px;
    float: left;
    text-align: center;
    background-color: #fff;
}
#homecontentcentre {
    clear: none;
    width: 256px;
    margin-right: 28px;
    margin-left: 28px;
    float: right;
    text-align: center;
    background-color: #fff;
}
#contactbox {
    text-align: right;
    position: relative;
    right: 5px;
    top: -60px;
}

#scrollcontact {
    position: relative;
    left: 100px;
    top: 30px;
    width: 200px;
    clear: none;
}

#sidecontactform {
    clear: none;
    position: relative;
    left: 80px;
    top: 100px;
    width: 450px;
}

#holidayhome {
    clear: both;
    width: 900px;
    margin-top: 0px;
    margin-bottom: 20px;
}
#cottageside {
    float: right;
    width: 263px;
    margin-left: 30px;
}
#cottagebox {
    clear: both;
    width: 910px;
    height: 412px;
}
#cottageboxtext {
    float: right;
    width: 440px;
    background-color: #73808d;
    padding-left: 15px;
    height: 412px;
}

#map_canvas {
    padding-inline: 0;
    height: 464px;
}

.tel {
    font-size: 24px;
    line-height: 28px;
}

.navlink {
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    color: #73808d;
}
a.navlink:hover {
    color: #2b76c2;
    background-color: #b9bfc6;
}
a.navlink:active {
    color: #2b76c2;
    background-color: #b9bfc6;
}

.socialicons {
    padding-right: 2px;
    padding-left: 2px;
}
.footlink {
    color: #73808d;
    text-decoration: none;
    font-size: 1em;
}
a.footlink:hover {
    color: #2b76c2;
}
a.footlink:active {
    color: #2b76c2;
}

.logo {
    margin-right: 340px;
    margin-left: 340px;
}
.button {
    font-size: 20px;
    background-color: #2b76c2;
    color: #fff;
    padding: 12px;
    background-repeat: no-repeat;
    width: 243px;
}

.button:focus {
    color: #fff;
}

.button:hover {
    width: 243px;
    background-color: #7aa0c6;
    color: #fff;
}

.button:active {
    background-color: #215c97;
}

.readbutton {
    font-size: 18px;
    background-color: #2b76c2;
    color: #fff;
    padding: 5px;
}
a.readbutton:hover {
    background-color: #7aa0c6;
    color: #fff;
}
a.readbutton:visited {
    background-color: #2b76c2;
    color: #fff;
    padding: 5px;
}

.greybutton {
    font-size: 18px;
    background-color: #73808d;
    color: #fff;
    padding-top: 15px;
    padding-right: 18px;
    padding-bottom: 15px;
    padding-left: 17px;
    background-repeat: no-repeat;
    width: 243px;
    text-transform: none;
}
a.greybutton:hover {
    background-color: #8e9dab;
    color: #fff;
    text-transform: none;
}
.sleeps {
    font-size: 90%;
    margin: 0px;
    padding: 0px;
}
.nopad {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
ul {
    line-height: 22px;
    margin-left: 0px;
    padding-left: 20px;
}

.imgpad {
    padding-bottom: 15px;
    padding-left: 15px;
}

/* *** GALLERY-CONTENT *** */

.primary-content .glist,
.sidebar .glist,
.glist {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* for containers, act as a clearing device */
.cont {
    overflow: auto;
}

.allalbums > li {
    clear: left;
}

.imagelisting li {
    float: left;
    width: 200px;
    margin: 0 10px 10px 0;
}

.albumdisplay li {
    float: left;
    width: 210px;
    margin: 0 20px 20px 0;
}

.albumdisplay li img:hover {
    border: 2px solid #000;
}

.albumdisplay li img {
    display: block;
    border: 2px solid #ccc;
}

.pager {
    margin: 1.5em 0;
    overflow: hidden;
    padding-top: 0.8em;
}

.pager li {
    float: left;
    width: 10em;
}

.pager li.paging-label {
    float: none;
    width: 100%;
    padding: 0 0 1em 0;
}

.pager a.paging-next {
    text-align: right;
}

form {
    padding: 20px;
}
.formbutton {
    font-size: 20px;
    background-color: #2b76c2;
    color: #fff;
    background-repeat: no-repeat;
    width: 150px;
    height: 40px;
}
a.formbutton:hover {
    font-size: 20px;
    background-color: #2b7777;
    color: #fff;
    background-repeat: no-repeat;
    width: 150px;
    height: 40px;
}
#formwrap {
    width: 100%;
    max-width: 350px;
}

.available {
    color: #fff;
    background-color: #6c6;
    padding-bottom: 5px;
    padding-top: 5px;
}

.booked {
    color: #fd424a;
    background-color: #fd424a;
    padding-bottom: 5px;
    padding-top: 5px;
}

.testimonial {
    font-size: 30px;
    font-weight: normal;
    color: #2b76c2;
    line-height: 28px;
}

.bullet-list {
    list-style: disc;
    list-style-position: outside;
    padding-inline-start: 1.3em !important;
    line-height: 1.4;
    text-align: start;

    &.sparse {
        > li {
            margin-block-start: 0.75rem;
        }
    }

    > li {
        list-style: inherit;
    }
}

.guestname {
    font-size: 16px;
}

.display-flow-root {
    display: flow-root;
}

.display-block {
    display: block;
}

.w-full {
    width: 100%;
}

.font-fancy {
    font-family: 'caflisch-script-pro', sans-serif;
}

.font-base {
    font-family: 'futura-pt', 'Open sans', sans-serif;
}

.color-inherit {
    color: inherit;
}

.color-white {
    color: #fff;
}

.bg-grey {
    background-color: #73808d;
}

.fs-small {
    font-size: 0.875rem;
}

.fs-base {
    font-size: 1rem;
}

.fs-large {
    font-size: 1.5rem;
}

.fs-xl {
    font-size: 2rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mx-auto {
    margin-inline: auto;
}

.mb-4 {
    margin-bottom: 1rem;
}

.max-w-full {
    max-width: 100%;
}

.max-w-content {
    max-width: 40rem;
}

.h-auto {
    height: auto;
}

.\@container {
    container-type: inline-size;
}

.tracking-sm {
    letter-spacing: 0.125em;
}

.leading-base {
    line-height: 1.15;
}

.framed-image {
    border: min(1.125vw, 10px) solid white;
    border: min(2.25cqw, 10px) solid white;
    aspect-ratio: 943/440;
    outline: 1px solid #e3e3e3;
    outline-offset: -1px;
    height: auto;
    width: calc(100% - 0.6vw);
    width: calc(100% - 0.8cqw);
    margin-bottom: 0.3vw;
    margin-bottom: 0.4cqw;
    margin-inline: 0.3vw;
    margin-inline: 0.4cqw;
    box-shadow: 0.2vw 0.2vw 0.3vw rgba(0, 0, 0, 0.175);
    box-shadow: 0.25cqw 0.25cqw 0.3cqw rgba(0, 0, 0, 0.175);
    object-fit: cover;

    .featured-thumbnail {
        @supports not (container-type: inline-size) {
            border-width: 4px;
            width: calc(100% - 8px);
            margin-bottom: 4px;
            margin-inline: 4px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.175);
        }
    }
}

.featured-thumbnail {
    aspect-ratio: 1.45;
}

.w-thumb {
    width: 146px !important;
}