/* Theme Name: Old Tannery Cottage */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');


:root {

    --blue: #121a31;
    --gold: #cca687;

    --gold-alt: #b29077;

    --light: #f2f2f2;
    --light-alt: #e2e2e2;

    --small-spacing: 2rem;
    --large-spacing: 3.5rem;

    --negative-small-spacing: -2rem;
    --negative-large-spacing: -3.5rem;

}

html, body { height: 100%; }


/* Theme */

.bg-blue { background-color: var(--blue); color: #fff; }
.bg-gold { background-color: var(--gold); color: #fff; }
.bg-light { background-color: var(--light); }
.bg-light-alt { background-color: var(--light-alt); }

.bg-pattern-light {
    background-image: url(assets/images/pattern-bg-light.jpg);
    background-size: 300px;
    background-position: center;
    background-repeat: repeat;
}

.bg-pattern-gold {
    color: white;
    background-image: url(assets/images/pattern-bg-gold.jpg);
    background-size: 300px;
    background-position: center;
    background-repeat: repeat;
}

.text-gold { color: var(--gold)!Important; }

.btn-gold { background-color: var(--gold); border-color: var(--gold); color: white; }
.btn-gold:hover { background-color: var(--gold-alt); border-color: var(--gold-alt); color: white; }

.btn-blue { background-color: var(--blue); border-color: var(--blue); color: white; }
.btn-blue:hover { background-color: var(--blue); border-color: var(--blue); color: white; }

.btn-light { background-color: var(--light); border-color: var(--light); }
.btn-light:hover { background-color: var(--light-alt); border-color: var(--light-alt); }

.btn-white { background-color: #fff; border-color: #fff; }
.btn-white:hover { background-color: var(--light); border-color: var(--light); }

.star-rating { color: #f4c70b; }

footer { color: #fff; background: var(--gold); }

footer a:not(.btn) { color: #fff!Important; text-decoration: none; }

/* Structure */

.block {
    width: 100%;
    padding: var(--small-spacing);
}

.block.small-padding { padding: var(--small-spacing); }

@media (min-width: 768px) {
    .block { padding: var(--large-spacing); }
    .block.padding-small { padding: var(--small-spacing); }
    .p-md-block { padding: var(--large-spacing); }
}

@media (min-width: 992px) { .p-lg-block { padding: var(--large-spacing); } }
@media (max-width: 991.98px) { .container { max-width: none; } }

.framed-block {
    padding: var(--small-spacing);
    border: solid 8px var(--blue);
}

@media (min-width: 992px) { .framed-block { padding: var(--large-spacing); } }
@media (min-width: 1500px) { .framed-block { margin: 0 var(--negative-large-spacing); border: none; outline: solid 8px var(--blue); } }

.header {
	
	width: 100%;
	min-height: 100%;
	
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

.header #header-logo {
	
	background-image: url(assets/images/vector-logo.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

}

.arrow {
	
	position: absolute;
    bottom: var(--small-spacing);
	left: 50%;
	
	width: 60px;
	height: 60px;
	margin-left: -30px;
	
	background: var(--blue);
	border-radius: 100px;
	
	/* When using Footer Widget */
	bottom: var(--large-spacing);
	margin-bottom: 20px;
	
}

@media (min-width: 992px) { .arrow { bottom: var(--large-spacing); margin-bottom: 0px; } }

.bounce { animation: bounce 2s infinite; }

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
}

.header.narrow { min-height: unset; min-height: 60% }

.framed-bg-block {

    position: relative;
    color: #fff;
    background: var(--blue);
    padding: var(--small-spacing);

}

.framed-bg-block .cover-image { margin: var(--negative-small-spacing) var(--negative-small-spacing) var(--small-spacing) var(--negative-small-spacing); }

@media (min-width: 768px) {

    .framed-bg-block { padding: var(--large-spacing); }
    .framed-bg-block .cover-image { margin: var(--negative-large-spacing) var(--negative-large-spacing) var(--large-spacing) var(--negative-large-spacing); }

}

@media (min-width: 992px) {

    .framed-bg-block { padding: var(--large-spacing); }

    .framed-bg-block .row { position: relative; z-index: 2; }

    .framed-bg-block .cover-image {

        position: absolute;
        top: 0;
        right: 0;

        width: 75%;
        height: 100%;

        margin: 0;

    }

    .framed-bg-block .cover-image:after {

        content: '';
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        background: linear-gradient(90deg, rgba(18,26,49,1) 0%, rgba(18,26,49,0) 100%);

    }

    .framed-bg-block .cover-image img {

        width: 100%;
        height: 100%;

        object-fit: cover;

    }

}

@media (min-width: 1500px) { .framed-bg-block { margin: 0 var(--negative-large-spacing); } }


/* Typography */

body {
    color: var(--blue);
    font-family: 'Lora', serif;
    font-weight: 400;
    line-height: 190%;
}

.sans { font-family: 'Open Sans', sans-serif; }

.h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    margin-bottom: 0;
}

.h1:not(.fab),
.h2:not(.fab),
.h3:not(.fab),
.h4:not(.fab),
.h5:not(.fab),
.h6:not(.fab),
h1:not(.fab),
h2:not(.fab),
h3:not(.fab),
h4:not(.fab),
h5:not(.fab),
h6:not(.fab),
.display-1:not(.fab),
.display-2:not(.fab),
.display-3:not(.fab),
.display-4:not(.fab),
.display-5:not(.fab),
.display-6:not(.fab) {

    font-weight: 600;
    line-height: 180%;

}

.lh-small { line-height: 150%; }

.nobr { white-space: nowrap; }

p.section-intro {

    position: relative;
    display: inline-flex;

    padding-bottom: 1.5rem;
    margin-bottom: var(--small-spacing);

}

p.section-intro:after {

    content: '';
    position: absolute;
    top: 100%;
    left: 0;

    width: 3rem;
    height: 3px;

    background: var(--blue);

}

.text-white p.section-intro:after { background: #ffff; }

@media (min-width: 768px) { p.section-intro { margin-bottom: var(--large-spacing); } }

.bg-blue p.section-intro:after { background: #fff; }

.drop-cap p:first-of-type:first-letter {

    font-size: 450%;
    padding-top: 1rem;

    margin-right: 6px;

    float: left;

}


/* Features */

.row-cover-image .cover-image { margin: var(--negative-small-spacing) var(--negative-small-spacing) var(--small-spacing) var(--negative-small-spacing); }

@media (min-width: 768px) {

    .row-cover-image .cover-image { margin: var(--negative-large-spacing) var(--negative-large-spacing) var(--large-spacing) var(--negative-large-spacing); }

}

@media (min-width: 992px) {

    .row-cover-image { position: relative; }

    .row-cover-image .cover-image {

        position: absolute;
        top: 0;
        right: 0;

        width: 50%;
        height: 100%;

        margin: 0;

    }

    .row-cover-image .cover-image img {

        width: 100%;
        height: 100%;

        object-fit: cover;

    }

}

.button-line-break a { position: relative; }

.button-line-break a:after { 

    content: '';
    position: absolute;
    top: 50%;
    left: calc( 100% + var(--small-spacing) );

    width: 100vw;
    height: 3px;

    background: var(--blue);

    transform: translateY(-50%);

}

@media (min-width: 768px) { .button-line-break a:after { left: calc( 100% + var(--large-spacing) ); } }

.framed-content {
    padding: var(--small-spacing);
    border: solid 8px var(--blue);
}

@media (min-width: 768px) { .framed-content { padding: var(--large-spacing); } }


@media (max-width: 991.99px) { .match-height { height: auto!Important; } }


#review-row .col-lg-4:first-child,
#review-row .col-lg-4:nth-child(3) { position: relative; }

#review-row .col-lg-4:first-child:before,
#review-row .col-lg-4:nth-child(3):before {

    content: '';
    position: absolute;

    width: 135px;
    height: 135px;

    background-size: contain;
    background-repeat: no-repeat;

    z-index: -1;

}

#review-row .col-lg-4:first-child:before { top: 0; left: 0; background-image: url(assets/images/review-comment-opening.png); transform: translate(-30%, -30%); }
#review-row .col-lg-4:nth-child(3):before { bottom: 0; right: 0; background-image: url(assets/images/review-comment-closing.png); transform: translate(30%, 30%); }

.eq-cells { position: relative; flex-grow: 1; }

.eq-cells:before {

    content: '';
    position: absolute;
    top: 0;
    left: 33.3%;
    bottom: 10%;
    width: 33.3%;
    height: 100%;

    border: solid .1rem #dddddd;
    border-top: none;
    border-bottom: none;

}

.eq-cells .col-4 { flex-grow: 1; }

.image-lightbox-modal-toggle { cursor: pointer; }


/* Booking Widget */

#footer-widget {
	position: fixed;
	bottom: 0;
	right: var(--small-spacing);
	left: var(--small-spacing);
	width: auto;	
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
	overflow: hidden;
	transition: bottom 0.3s ease;
	z-index: 99;
}

@media (min-width: 768px) {
	#footer-widget {
		right: var(--large-spacing);
		left: var(--large-spacing);
	}
}

#footer-widget #widget-header {
	height: var(--large-spacing);
	display: flex;
	align-items: center;
	color: white;
	background: var(--blue);
}

@media (min-width: 992px) {
	#footer-widget {
		left: unset;
		width: 100%;
		max-width: 400px;
	}
}

@media (max-width: 991.99px) { body.scrolling-down #footer-widget { bottom: -200px!Important; } }
body.scrolling-up #footer-widget  {	bottom: 0px; }

/* Plugins */

#gallery-image-main-container { position: relative; }
#gallery-image-main-container #image-caption {
	
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100%;
	height: auto;
	
}

.currently-viewing { position: relative; }

.owl-item.active.center:after,
.currently-viewing:after {
	
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100%;
	height: 5px;
	
	background: var(--blue);
	border-bottom-left-radius: .25rem!important;
	border-bottom-right-radius: .25rem!important;
	
}

.owl-item.active.center img,
.currently-viewing img { opacity: 0.5; }


/* WP Plugins */

.wpcf7 p { margin-bottom: 0px; }
.wpcf7 br { display: none; }

.wpcf7 form .wpcf7-response-output { margin: 0; margin-top: 20px; }

.wpcf7-not-valid-tip {
	margin: 0;
	font-size: 0.875em;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	
	color: white;
	background-color: #ffb900;
	border-radius: 0.25rem;
	
}

.wpcf7 form.sent .wpcf7-response-output {
	
	color: white;
	background-color: #46b450;
    border-color: #46b450;
	border-radius: 0.25rem;
	
}

.wpcf7-spinner {
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);

}


/* Bootstrap */

.btn { _border-radius: 0px; }

@media (max-width: 991.99px) {
    .modal-dialog {
		max-width: 1000px;
        margin-left: var(--large-spacing);
        margin-right: var(--large-spacing);
    }
}

@media (max-width: 767.99px) {
    .modal-dialog {
        margin-left: var(--small-spacing);
        margin-right: var(--small-spacing);
    }
}

.modal-blur-bg {
	
	position: absolute;
	
	top: -10%;
	left: -10%;
	
	width: 120%;
	height: 120%;
	
	filter: blur(25px);
	
	pointer-events: none;
	
}

.modal-blur-bg img { width: 100%; height: 100%; object-fit: cover; }

.form-control, .form-select { min-height: 43px; font-size: 0.85rem; }

.form-select-group { position: relative; }
.form-select-group .form-select { }
.form-select-group:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 43px;
    height: 43px;
    background-color: var(--blue);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    pointer-events: none;
    z-index: 0;
}

.ratio.ratio-4x3 img { width: 100%; height: 100%; object-fit: cover; }