*{ margin: 0; padding: 0; box-sizing: border-box;}

body {

    background-color: black;

    font-family: 'Lato', sans-serif;

}

#container {

    max-width: 1200px;

    margin: auto;

    background-color: white;

}



/* NavBar----------------------------------------- */



#nav-container {

   

    padding:  0 20px ;

    display: flex;

    justify-content: space-between;

    background-color: #840A06;

    

}

#nav-contact {

    color: white;

    padding: 15px 10px;

}

#nav-contact a {

    color: white;

} 



nav {

    

    padding: 2px 0px;

}

nav .nav-div {

    padding: 2px;

    display: flex; 

    justify-content: center;

    align-items: center; 

    list-style-type: none;

    margin-block-start: 0px;

    margin-block-end: 0px;

    margin-inline-start: 0px;

    margin-inline-end: 0px;

    padding-inline-start: 0px;

}

nav .nav-div a {

    color: white;

    padding: 15px 10px;

    font-weight: 400;

    letter-spacing: 0px;

    border-left: 2px white solid;  

}



.nav-div a {

    text-decoration: none;

}

.nav-div a:link {

    color: white;

}



.nav-div a:hover {

    color: gray;

    

}



/* Header-------------------- */



#header-div {

    background-color: white;

    display: flex;

    justify-content: space-between;

    padding: 40px 30px;

}

/* Main menu_________________________ */

img {
	width: 100%;
}

.main-nav {

    background-color: white;

    border-top: 1px black dotted;

    border-bottom: 1px black dotted;

}

/* Repsonsive menu_________________ */



.menu {

    display: flex;

    justify-content: space-around;



}

.menu a {

    

    font: 16px lato bold;

}

.menu a {

    text-decoration: none;

    padding: 0px 0;

    

}



.menu a:hover {

    color: #840A06;

    border-top: 2px #840A06 solid;

    

}

.nav {

    border-bottom: 1px solid #EAEAEB;

    text-align: center;

    height: 70px;

    line-height: 70px;

}

.menu {

    margin: 0 30px 0 0;

}

.menu a {

    clear: right;

    text-decoration: none;

    color: gray;

    margin: 0 10px;

    line-height: 70px;

}

span {

    font-weight: bolder;

}



.label-nav{

    margin: 0 40px 00;

    font-size: 26px;

    line-height: 70px;

    display: none;

    width: 26px;

    float: right;

}

#toggle {

    display: none;

}

   

/* Main Banner CSS _______________ */

#main-banner {

    width: 100%;

    border-top: 2px #840A06 solid;

    clear: both;

}

#main-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/*BODY OF WEBSITE */

.main-content {

  display: flex;

  margin: auto;

  padding: 1.5rem;

   

}

main {

    

    width: 65%;

    padding: 0 20px;

}

video {
    width: 100%;
}

section {

    padding: 0.5em 0;

}

h1 {

    text-align: center;

    color: #333;

    font-family: Lato;

    font-size: 2em;

    padding: 0.5em 0;

}

h2 {

    text-align: center;

    padding: 0.5em 0;

}

p {

    font-family: Lato;

    font-weight: 700;

    font-size: 1em;

    padding: .5em;

}

blockquote {

    padding: 1em;

    font-style: italic;

}

section {

    border-bottom: 2px #840A06 solid;

    padding: 1em 0;

}

figure {

    padding: 1em;

}

figcaption {

    text-align: center;

    font-weight: bold;

    padding-top: .5em;

}

.testimonial-figure {

    border: 2px solid black;

}

.testimonial-section {

    border: 2px solid black;

    margin: 2rem;

}

.img-logo {

    float: right;

    width: 50px;

   

    

}

.iframe-container {

    position: relative;

  overflow: hidden;

  width: 100%;

  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}



.responsive-iframe {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    border: none;

  }















.call-action {

    background-color: #f2efef;

    border-top: 4px solid #840A06;

    padding: 2rem;

}

.home-page-button {

    float: right;

    padding: 1rem;

    background-color: #6e981f;

    font-weight: bold;

}









.images {

    width: 100%;

}

.unordered-list-div {

    padding: 0 20px;

}

li {

    font-family: Lato;

    font-weight: 700;

    font-size: 1rem;

}

.latest-news-div {

    display: flex;

    justify-content: space-between;

}

.latest-news-image-container {

    padding: 5px;

} 



.latest-news-image {

    width: 100%;

}

.latest-news-container-h3 {

    color: #840A06;

    font-size: 1rem;

}

.accepting-bookings-div {

    text-align: center;

    border: 1px dotted black;

    margin: 0 3rem;

}

/* Aside __________________________________________ */

aside {

    

    width:35%;

   border-left: 1px black solid;

   padding: 1rem;

}

article {

    border: 1px black solid;

    margin: 1em 0;

    padding: 1em;

}

article h3 {

    color: black;

    text-align: center;

    font-weight: bold;

}

article p {

    text-align: center;

    line-height: 1.5em;

}

.quote {

    text-align: left;

    font-style: italic;

}

.quote-person {

    font-weight: bold;

    text-align: left;

    margin-top: .5em;

   

}

/*Quick Form styling--------------------*/

.quick-form-section {

    height: auto;

    width: 100%;

    background-color: lightgray;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding-top: 10px;

}

.quick-form-container{

    width: 90%;

    max-width: 500px;

    margin: 0 auto;

    background-color: gray;

    padding: 10px;

    box-shadow: 0px 0px 20px #00000010;

    border-radius: 8px;

    margin-bottom: 10px;

}

.quick-form-group {

   width: 100%;

   margin-top: 10px; 

   font-size: 14px;

}

.quick-form-group input,

.quick-form-textarea {

    width: 100%;

    padding: 5px;

    font-size: 14px;

    border: 1px solid rgb(128, 128,128, 0.199);

    margin-top: 5px;

}

.quick-form-textarea {

    resize: vertical;

}

.quick-form-button[type="submit"] {

    width: 100%;

    border: none;

    outline: none;

    padding: 20px;

    font-size: 24px;

    border-radius: 8px;

    background-color: #6e981f;

    text-align: center;

    cursor: pointer;

    margin-top: 10px;

    transition: .3s ease background-color;

}

.quick-form-button[type="submit"]:hover {

    background-color: #840A06;

}

#status {

    width: 90%;

    max-width: 500px;

    text-align: center;

    padding: 10px;

    margin: 0 auto;

    border-radius: 8px;

}

#status.success {

    background-color: blue;

    animation: status 4s ease forwards;

}

#status.error {

    background-color: red;

    color: white;

    animation: status 4s ease forwards;

}

@keyframes status {

    0% {

        opacity: 1;

        pointer-events: all;

    }

    90% {

        opacity: 1;

        pointer-events: all;

    }

    100% {

        opacity: 0;

        pointer-events: none;

    }

}



/*About page specific styling*/

.about-photo {

    float: left; 

    max-width: 200px; 

    padding: 1em;

}

/*video page specific styling*/

.video-page-h2 {

    padding: 1em;

    font-size: 1.5em;

}

/*Uk page specific styling*/

.areas-covered p {

    line-height: .5;

}

/*Area pages*/

.blog-title {

    color: #840A06;

}

/*County pages____________________*/

.area-blog {
	padding-bottom: 1em;
}
.area-left-span {
	float: left;
}
.area-right-span {
	float: right;
}
/* Footer ------------------------------------------- */



footer {

    border-top: 1rem solid  lightgray;

    padding: 2rem;

    background-color: #002A4E;

    display: flex;

    justify-content: space-between;

}

.footer-div {

    flex-basis: 0;

    flex: 1 1 0px;

    padding: 1rem;

   

}

h3 {

    font-family: 'Lato';

    font-size: 13px;

    font-weight: 400;

    line-height: 1.5;

    letter-spacing: 0px;

    color: #ddd;

}

.footer-p {

    color:#8c8989;

    font-family: 'Lato';

    font-weight: 400;

    letter-spacing: 0px;

}



.footer-div a {
	color: #8c8989;
	font-weight: bold;
}











/* media queries --------------------- */





@media only screen and (max-width: 970px) and (min-width: 730px) {

   

   





    /* responsive menu */



    .label-nav {

        display: block;

        cursor: pointer;

    }

    .menu {

        text-align: center;

        width: 100%;

        display: none;

    }

    .menu a {

        display: block;

        border-bottom: 1px  solid #EAEAEB;

        margin: 0;

    }

    #toggle:checked + .menu {

        display: block;

    }

    

}

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

   

   

   .banner-picture {

        display: none;

    }

   

    nav {

        display: none;

    }

    #main-logo {

        width: 60%;

        margin: auto;

        display: block;

    } 



 /* responsive menu */



 .label-nav {

    display: block;

    cursor: pointer;

}

.menu {

    text-align: center;

    width: 100%;

    display: none;

}

.menu a {

    display: block;

    border-bottom: 1px  solid #EAEAEB;

    margin: 0;

}

#toggle:checked + .menu {

    display: block;

}

.main-content {

    display: block;

}

main {

    width: 100%;

    padding: 0px;

}

.latest-news-div {

    display: block;

}

aside {

    width: 100%;

    border-left: 0px white solid;

}

footer {

    display: block;

}

}