html
{
    max-width: 100%;
}

header {
    /* Sets the width of the container to 100% of screen width. */
    width: 100%;
    /* Sets the background colour of the header to black. */
    /* Sets the position of the element. */
    position: relative;
    /* Ensures there is no margin at the top of the page. */
    margin-top: 0;
    /* Aligns the content to the centre of the container. */
    text-align: center;
    background: white;
}

nav{
    width: 100%;
    font-family: Tahoma,sans-serif;
    text-align: center;

}
body{
    margin: 0;
    background-color: white;
    text-align: center;
    color: dimgrey;
    font-family: Tahoma,sans-serif;
    width: 100%;
    height: auto;
}

main{
    margin: 0;
    background-color: white;
    text-align: center;
    color: dimgrey;
    width: 100%;
    font-family: Tahoma,sans-serif;
}

.mySlides {
    display: none;
}

/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    vertical-align: middle;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.container{
    overflow: hidden;
}

.wrapper{
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
.ratio{
    position:relative;
    height:0;
    padding-bottom:75%; /*height ÷ width = aspect ratio*/
    overflow:hidden;
}

.ratio iframe{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
}
.iframecolumn{
    width:50%
}


.column1{
    padding: 1% 3%;
    margin: 0;
    float: left;
    background-color: white;
    text-align: center;
    color: grey;
    width: 44%;
    font-family: Tahoma,sans-serif;
}
.column2{
    padding: 1% 3%;
    margin: 0;
    float: left;
    background-color: white;
    text-align: center;
    color: grey;
    width: 44%;
    font-family: Tahoma,sans-serif;
}

.emailForm{
    display: inline-block;
    margin: 2%;
    width: 80%;
}

footer{
    padding: 2% 0 2% 0;
    text-align: left;
    width: 100%;
    background-color: #333;
    color: #f2f2f2;
    height: 20%;
    position: static;
}
.titlelogo
{
    width: 20%;
    height: auto;
    padding: 1% 0% 1% 0%;

}

.mainimage
{
    width: 40%;
    height: auto;
    padding: 5%;
}

.welcomedriver{
    width: 60%;
    border-radius: 3%;
}

.footertext{
    padding: 1% 3%;
    margin: 0;
    float: left;
    background-color: #333333;
    text-align: left;
    color: white;
    width: 44%;
    font-family: Tahoma,sans-serif;
    font-size: 1.2em;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 2%;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;

}

table{
    width: 60%;
    text-align: center;
    margin: 0 auto;

}

li {
    list-style: none;
}

ul {
    display: inline-block;
    text-align:left;
}

section {
    padding: 1% 3%;
}

button{
    padding: 2%;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 25%;
    font-size: medium;
}

.newtodriving{
    padding: 1% 3%;
    margin: 0;
    float: left;
    background-color: white;
    text-align: center;
    color: grey;
    width: 44%;
    font-family: Tahoma,sans-serif;
}

.homeimages{
    padding: 1% 3%;
    margin: 0;
    float: left;
    background-color: white;
    text-align: center;
    color: grey;
    width: 44%;
    font-family: Tahoma,sans-serif;
}

.imagecontainer {
    padding: 1% 3%;
    position: relative;
    font-family: Arial;
    width: 44%;
    margin: 0;
    display: inline-block;

}

.bodycontent{
    padding: 1% 7%;
    width: 86%;
}

/* When the screen is less than 840 pixels wide, hide all links.
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 840px) {
    .topnav a:not(:active) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
        width: 15%;
    }



    .titlelogo
    {
        width: 60%;
        height: auto;
        padding: 2% 0% 2% 0%;

    }

    .mainimage
    {
        width: 60%;
        height: auto;
        padding: 5%;
    }

    .welcomedriver{
        width: 94%;
        text-align: center;
    }

    .column1{
        width: 94%;
        color: whitesmoke;
        background-color: #333333;
    }
    .column2{
        width: 94%;
    }
    .wrapper{
        flex-direction: column;
    }
    .iframecolumn{
        width: 100%;
    }

    table{
        width: 90%;
    }

    table, th, td{
        border: 1px solid white;
    }


    section{
        background-color: #333333;
        color: whitesmoke;
        text-align: left;
    }

    button{
        padding: 3%;
        width: 40%;
    }

    .newtodriving{
        width: 94%;
        color: whitesmoke;
        background-color: #333333;

    }

    .homeimages{
        width: 94%;
        padding: 1% 3%;
    }

    .footertext{
        width: 94%;
        font-size: 0.9em;
    }

    /* Change colour of phone number text to make it more readable when it is active (Mobile only) */
    a[href^="tel:"] {
        color: whitesmoke;
    }

    .imagecontainer {
        padding: 1% 3%;
        position: relative;
        font-family: Arial;
        width: 94%;
        margin: 0;
    }

    .bodycontent{
        padding: 1% 3%;
        width: 94%;
    }

}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 840px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        display: inline-block;
        right: 0;
        top: 0;
        text-align: center;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

input[type=text], select {
    width: 98%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=email], select {
    width: 98%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea, select {
    width: 98%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: none;
}

input[type=submit] {
    width: 98%;
    background-color: dimgrey;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.makeawishlist{
    list-style: circle;
    background-color: white;
    color: grey;
    text-align: left;
    padding: 1% 3%;
}

table#openhourstable, table#openhourstable td{
    border: none !important;
}

a[href]{
    color: white;
}

/* Change colour of phone number text to make it more readable when it is active (Mobile only) */
a[href^="tel:"] {
color: grey;
}


.agreementtext
{
    font-size: 0.75em;
}

h1, h2{
    text-align: center;
    font-size: 1.5em;
}

/*Content exclusively sized for desktop screens */
@media screen and (min-width: 841px) {
    .contactbutton {
        width: 12.5%;
        padding: 1%;
    }
}

.imagetext-block {
    position: absolute;
    bottom: 10%;
    right: 10%;
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding-left: 10%;
    padding-right: 10%;
    font-family: Futura;
    font-size: 1.3em;

}

/* Alert for any temporary attention banners */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}