/* Global style settings */

* {
  font-family: Tahoma;
  box-sizing: border-box;
}

*:before,
*:after {
 box-sizing: border-box;
}

/* Whole container (minus header) */

div.page-container {
  min-height: 100vh;
  position: relative;
}

div.content-wrap { 
  padding-bottom: 40vh; /* Footer height */
  } 

/* HEADER */

/* Create 3 columns in header */

.header_wrapper {
    width:100%;
    height:25vh;
    display:table;
    background-color:#284B63;
    float: none;
}

.central {
    width:50%;
    margin: auto;
    display: table-cell;
}
.left {
    width:25%;
     margin: auto;
    display: table-cell;
}
.right {
    width:25%;
     margin: auto;
    display: table-cell;
}

/* logo */
header div.left span.logo img {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  top: 4.7vh;
  float: center;
}

/* slogan */
header div.central a {
  position: relative;
  top:25px;
  float: center;
  height: 125px;
  color: white;
  font-size: 18px;
  text-decoration: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* nav bar */
header nav.right div.part1 a {
  position: relative;
  color: white;
  font-size: 20px; 
  text-decoration: none; 
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7em;
  padding-left: 2.9em; 
  
}

header nav.right div.part2 a {
  position: relative;
  color: white;
  font-size: 20px; 
  text-decoration: none; 
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7em;
  padding-left: 2.9em;
}

header nav.right div.part3 a {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px; 
  text-decoration: none; 
  text-align: left;
  line-height: 1.7em;
  padding-left: 2.9em;
}


/* Header text hyperlinks change color with hover */

header nav.right div.part1 a:hover {
  color: yellow;
  text-decoration: none;
}
header nav.right div.part2 a:hover {
  color: yellow;
  text-decoration: none;
}
header nav.right div.part3 a:hover {
  color: yellow;
  text-decoration: none;
}

header div.central a:hover {
  color: #f2f2f2;
}


/* HOME PAGE */

body img.hero {
  display: block;
  max-width:100%;
  max-height:auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* First band, first row (full screen width) */

div.row1 div.wrapper1 {
  height: 215px;
  width: 100%;
  background-color: #f9f9f9;
  text-align: center;
  font-size: 20px;
  padding-top: 20px
  }

/* First band, second row (3 columns) */

div.row2 div.wrapper2 {
  height: 235px;
  width: 100%;
  display: table;
  background-color: #f9f9f9;
  }

div.row2 div.left2 {
  width: 33%;
  display: table-cell;
}

div.row2 div.central2 {
  width: 33%;
  display: table-cell;
}

div.row2 div.right2 {
  width: 33%;
  display: table-cell;
}

div.row2 img {
  top: 100px;
  height: 100px;
  width: 100px;
  display: block;
  margin: auto;
}

div.row2 h4 {
  text-align: center;
  font-size: 20px;
}

/* DELIVERY FORM */

div.wrapperdeliveryform {
  width: 100%;
  background-color: #f3f3f3;
  padding: 50px 50px 100px 50px;
}

div.wrapperdeliveryform div.deliveryform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 66%;
  text-align: left;
  background-color: #f3f3f3;
  padding: 20px 40px 50px 40px;
  border-style: solid;
  border-width: 1px;
}

div.wrapperdeliveryform div.deliveryform h1 {
  text-align: center;
  color: #284B63;
}

div.deliveryform h3 {
  text-align: left;
  color: #284B63;
  }

div.deliveryform input.input_long {
  border-radius: 5px;
  text-align: left;
  font-color:#333333;
  font-size:16px;
  margin-bottom:7px;
  padding: 10px;
  width: 630px;
}

div.deliveryform input.input_short {
  border-radius: 5px;
  text-align: left;
  font-color:#333333;
  font-size:16px;
  margin-bottom:7px;
  padding: 10px;
  width:280px;
}

/* Buttons */

button.button1 {
border-style: solid;
border-color: #284B63;
border-width: 3px;
padding: 8px 15px 8px 15px;
width: 210px;
font-size: 20px;
background: #284B63;
border-radius: 5px;
cursor: pointer;
color: white;
}

button.button2 {
border-style: solid;
border-color: #284B63;
border-width: 3px;
padding: 8px 15px 8px 15px;
width: 210px;
font-size: 18px;
background: #284B63;
border-radius: 5px;
cursor: pointer;
color: white;
}

/* Box around price */

div.pricecontainer {
  background-color:white;
  border-style: solid;
  width:210px;
  font-size: 20px;
  border-width: 2px;
  border-radius: 5px;
  color:#284B63;
  border-color: white;
  padding: 8px 15px 8px 15px;
}


/* CONTACT US PAGE */

div.wrappercontactpage {
  padding:30px;
}

div.contactform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}


/* DRIVER PAGE */

div.driverpage {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 100%;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
}

/* First band, first row (full screen width) */

div.wrapperdriverpage div.row1 div.wrapper1 {
  padding-top: -50px;
  top: 0px;
  height: 180px;
  width: 100%;
  background-color: #f9f9f9;
  text-align: center;
  font-size: 20;
  }

/* First band, second row (3 columns) */

div.wrapperdriverpage div.row2 div.wrapper2 {
  height: 180px;
  width: 100%;
  display: table;
  background-color: #f9f9f9;
  }

div.wrapperdriverpage div.row2 div.left2 {
  width: 33%;
  display: table-cell;
}

div.wrapperdriverpage div.row2 div.central2 {
  width: 33%;
  display: table-cell;
}

div.wrapperdriverpage div.row2 div.right2 {
  width: 33%;
  display: table-cell;
}

div.wrapperdriverpage div.row2 img {
  top: 100px;
  height: 100px;
  width: 100px;
  display: block;
  margin: auto;
}

div.wrapperdriverpage div.row2 h4 {
  text-align: center;
}

div.driversignup {
  height: 300px;
  width: 50%;
  display: block;
  margin: auto;
  text-align: center;
  padding: 30px 30px 60px 30px;
}

/* FAQs Page */

div.wrapperFAQs {
  padding:30px;
  background-color: #f9f9f9;
  width: 100%;
}

div.paneFAQs {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 80%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px
}

/* DRIVER ENQUIRY FORM PAGE */

div.wrapperdriverenquirypage {
  padding:30px;
}

div.enquiryform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}

/* DRIVER REGISTRATION FORM PAGE */

div.wrapperdriverregistrationpage {
  padding:30px;
}

div.registrationform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}

/* FEEDBACK PAGE */

div.wrapperfeedback {
  padding:30px;
}

div.feedback {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}

/* FEEDBACK LANDING PAGE */

div.wrapperfeedback_landing {
  padding:30px;
}

div.feedback_landing {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}

button.button3 {
border-style: solid;
border-color: #284B63;
border-width: 2px;
padding: 8px 15px 8px 15px;
width: 210px;
font-size: 20px;
background: white;
border-radius: 5px;
cursor: pointer;
color: #284B63;
margin-left: auto;
margin-right: auto;
display: block;
}

/* PRIVACY POLICY PAGE */

div.wrapperprivacy {
  padding:30px;
  width: 100%;
  background-color: #f9f9f9
}

div.privacy {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
  overflow-wrap: break-word;
}

/* TERMS OF SERVICE PAGE */

div.wrapperterms {
  padding:30px;
  width: 100%;
  background-color: #f9f9f9
}

div.terms {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
  overflow-wrap: break-word;
}

/* SUCCESS PAGE */

div.wrappersuccess {
  padding:30px;
  width: 100%;
  background-color: #f9f9f9
}

div.success h2 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: green;
  background-color: #f9f9f9;
}

div.success h3 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
}

/* FAILURE PAGE */


div.wrapperfailure {
  padding:30px;
  width: 100%;
  background-color: #f9f9f9
}

div.failure h2 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: green;
  background-color: #f9f9f9;
}

div.failure h3 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
}

/* POP UP FOR PAYMENT BUTTON */

  /* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* FOOTER */

footer {
  position: absolute;
  bottom: 0;
  background-color: #153243;
  text-align: center;
  padding: 10px; 
  width: 100%;
  color:white;
  height: 40vh;
  bottom: 0px;
}

/* Create four columns in footer navbar */

.footernav_wrapper {
    width:100%;
    height:5vh;
    display:table;
    background-color:#153243;
    float: none;
    padding: 3vh;
}

.cell1 {
    width:25%;
    margin: auto;
    display: table-cell;
}

.cell2 {
    width:25%;
     margin: auto;
    display: table-cell;
}

.cell3 {
    width:25%;
     margin: auto;
    display: table-cell;
}

.cell4 {
    width:25%;
     margin: auto;
    display: table-cell;
}

/* Cell 1 */
.footernav_wrapper div.cell1 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}

/* Cell 2 */
.footernav_wrapper div.cell2 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}

/* Cell 3 */
.footernav_wrapper div.cell3 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}

/* Cell 4 */
.footernav_wrapper div.cell4 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}


/* Hyperlink changes color with hover */
.footernav_wrapper div.cell1 a:hover {
  color: yellow;
  text-decoration: none;
}
.footernav_wrapper div.cell2 a:hover {
  color: yellow;
  text-decoration: none;
}
.footernav_wrapper div.cell3 a:hover {
  color: yellow;
  text-decoration: none;
}
.footernav_wrapper div.cell4 a:hover {
  color: yellow;
  text-decoration: none;
}

footer img {
  padding: 2vh;
  float: center;
  height:5em;
  width:5em;
}


/* --------------- LARGE MOBILE PHONE SCREEN STYLING (400 - 812) ------------------------------------------- */


/* Whole container (minus header) */

@media only screen and (max-device-width: 812px) {
div.page-container {
  min-height: 100vh;
  position: relative;
}}

@media only screen and (max-device-width: 812px) {
div.content-wrap { 
  padding-bottom: 30vh; /* Footer height */
  }}

/* HEADER */

/* Create 3 rows in header */

@media only screen and (max-device-width: 812px) {
.header_wrapper {
    width:100%;
    height:20vh;
    display:table;
    background-color:#284B63;
    float: none;
}}

@media only screen and (max-device-width: 812px) {
.central {
    width:100%;
    display: table-row;
}}
@media only screen and (max-device-width: 812px) {
.left {
    width:100%;
    display: table-row;
}}
@media only screen and (max-device-width: 812px) {
.right {
    width:100%;
    display: table-row;
}}

/* logo */
@media only screen and (max-device-width: 812px) {
header div.left span.logo img {
  position: relative;
  width: 12vh;
  height: auto;
  display: block;
}}

/* slogan */
@media only screen and (max-device-width: 812px) {
header div.central a {
  position: relative;
  color: white;
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  padding: 1vh;
}}

/* nav bar */

/* Create three columns for nav bar */

@media only screen and (max-device-width: 812px) {
nav.right {
    width:100%;
    display:table;
    background-color:#284B63;
    padding: 1em;
}}

@media only screen and (max-device-width: 812px) {
.part1 {
    width:33%;
    display: table-cell;
}}
@media only screen and (max-device-width: 812px) {
.part2 {
    width:33%;
    display: table-cell;
}}
@media only screen and (max-device-width: 812px) {
.part3 {
    width:33%;
    display: table-cell;
}}

/* part1 */
@media only screen and (max-device-width: 812px) {
nav.right div.part1 a {
  position: relative;
  text-align: center;
  font: 12;
  color: white;
  display: block;
  margin: auto;
  width: 50%;
  text-decoration: none;
  left:-7vh;
}}

/* part2 */
@media only screen and (max-device-width: 812px) {
nav.right div.part2 a {
  position: relative;
  text-align: center;
  font: 12;
  color: white;
  display: block;
  margin: auto;
  width: 50%;
  text-decoration: none;
    left:-7vh;
}}

/* part3 */
@media only screen and (max-device-width: 812px) {
nav.right div.part3 a {
  position: relative;
  text-align: center;
  font: 12;
  color: white;
  display: block;
  margin: auto;
  width: 50%;
  text-decoration: none;
    left:-7vh;
}}


/* Header text hyperlinks change color with hover */

@media only screen and (max-device-width: 812px) {
header nav.right a:hover {
  color: #e6e6e6;
  text-decoration: underline;
}}

@media only screen and (max-device-width: 812px) {
header div.central a:hover {
  color: #f2f2f2;
}}


/* HOME PAGE */

@media only screen and (max-device-width: 812px) {
body img.hero {
  display: block;
  max-width:100%;
  max-height:50vh;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}}


/* First band, first row (full screen width) */

@media only screen and (max-device-width: 812px) {
div.row1 div.wrapper1 {
  height: 25vh;
  width: 100%;
  background-color: #f9f9f9;
  text-align: center;
  font-size: 14px;
  padding: 10px
  }}


/* First band, second row (3 'columns') */


@media only screen and (max-device-width: 812px) {
div.row2 div.wrapper2 {
  height: 40vh;
  width: 100%;
  display: table;
  background-color: #f9f9f9;
  }}

@media only screen and (max-device-width: 812px) {
div.row2 div.left2 {
  width: 100%;
  display: table-row;
}}

@media only screen and (max-device-width: 812px) {
div.row2 div.central2 {
  width: 100%;
  display: table-row;
}}

@media only screen and (max-device-width: 812px) {
div.row2 div.right2 {
  width: 100%;
  display: table-row;
}}

@media only screen and (max-device-width: 812px) {
div.row2 img {
  top: 100px;
  height: 100px;
  width: 100px;
  display: block;
  margin: auto;
}}

@media only screen and (max-device-width: 812px) {
div.row2 h4 {
  text-align: center;
  font-size: 14px;
}}

/* DELIVERY FORM */

@media only screen and (max-device-width: 812px) {
div.wrapperdeliveryform {
  width: 100%;
  background-color: #f3f3f3;
  padding: 4vh 3vw 4vh 3vw;
}}

@media only screen and (max-device-width: 812px) {
div.wrapperdeliveryform div.deliveryform {
  position: relative;
  display: block;
  margin: auto;
  width: 100%;
  text-align: left;
  background-color: #f3f3f3;
  padding: 4vh 3vw 4vh 3vw;
}}

@media only screen and (max-device-width: 812px) {
div.wrapperdeliveryform div.deliveryform h1 {
  text-align: center;
  color: #284B63;
}}

@media only screen and (max-device-width: 812px) {
div.deliveryform h3 {
  text-align: left;
  color: #284B63;
  }}

@media only screen and (max-device-width: 812px) {
div.deliveryform input.input_long {
  border-radius: 5px;
  text-align: left;
  font-color:#333333;
  font-size:16px;
  margin-bottom:3vh;
  padding: 2vh;
  width: 85%;
}}

@media only screen and (max-device-width: 812px) {
div.deliveryform input.input_short {
  border-radius: 5px;
  text-align: left;
  font-color:#333333;
  font-size:16px;
  margin-bottom:3vh;
  padding: 2vh;
  width:85%;
}}

/* Buttons */

@media only screen and (max-device-width: 812px) {
button.button1 {
border-style: solid;
border-color: #284B63;
border-width: 3px;
padding: 8px 15px 8px 15px;
width: 85%;
font-size: 20px;
background: #284B63;
border-radius: 5px;
cursor: pointer;
color: white;
}}

@media only screen and (max-device-width: 812px) {
button.button2 {
border-style: solid;
border-color: #284B63;
border-width: 3px;
padding: 8px 15px 8px 15px;
width: 85%;
font-size: 20px;
background: white;
border-radius: 5px;
cursor: pointer;
color: #284B63;
}}

/* Box around price */

@media only screen and (max-device-width: 812px) {
div.pricecontainer {
  background-color:white;
  border-style: solid;
  font-size: 20px;
  border-width: 2px;
  border-radius: 5px;
  color:#284B63;
  border-color: white;
  padding: 8px 15px 8px 15px;
  width: 85%;
}}


/* CONTACT US PAGE */
@media only screen and (max-device-width: 812px) {
div.wrappercontactpage {
  padding:30px;
}}

@media only screen and (max-device-width: 812px) {
div.contactform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

@media only screen and (max-device-width: 812px) {
div.wrappercontactpage {
  padding: 20px 10px 20px 10px;
}}

@media only screen and (max-device-width: 812px) {
div.contactform {
  position: relative;
  display: block;
  margin: auto;
  width: 100%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 10px 15px 10px 15px;
  color: #284B63;
}}

@media only screen and (max-device-width: 812px) {
div.contactform h3 {
  text-align: center;
}}


/* DRIVER PAGE */
@media only screen and (max-device-width: 812px) {
div.driverpage {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 100%;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
}}

/* First band, first row (full screen width) */
@media only screen and (max-device-width: 812px) {
div.wrapperdriverpage div.row1 div.wrapper1 {
  padding-top: -50px;
  top: 0px;
  height: 180px;
  width: 100%;
  background-color: #f9f9f9;
  text-align: center;
  font-size: 20;
  }}

/* First band, second row (3 columns) */
@media only screen and (max-device-width: 812px) {
div.wrapperdriverpage div.row2 div.wrapper2 {
  height: 180px;
  width: 100%;
  display: table;
  background-color: #f9f9f9;
  }}

@media only screen and (max-device-width: 812px) {
div.wrapperdriverpage div.row2 div.left2 {
  width: 33%;
  display: table-cell;
}}

@media only screen and (max-device-width: 812px) {
div.wrapperdriverpage div.row2 div.central2 {
  width: 33%;
  display: table-cell;
}}

@media only screen and (max-device-width: 812px) {
div.wrapperdriverpage div.row2 div.right2 {
  width: 33%;
  display: table-cell;
}}

@media only screen and (max-device-width: 812px) {
div.wrapperdriverpage div.row2 img {
  top: 100px;
  height: 100px;
  width: 100px;
  display: block;
  margin: auto;
}}

@media only screen and (max-device-width: 812px) {
div.wrapperdriverpage div.row2 h4 {
  text-align: center;
}}

@media only screen and (max-device-width: 812px) {
div.driversignup {
  height: 300px;
  width: 50%;
  display: block;
  margin: auto;
  text-align: center;
  padding: 30px 30px 60px 30px;
}}

/* FAQs Page */
@media only screen and (max-device-width: 812px) {
div.wrapperFAQs {
  padding:30px;
  background-color: #f9f9f9;
  width: 100%;
}}

@media only screen and (max-device-width: 812px) {
div.paneFAQs {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 80%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px
}}

/* DRIVER ENQUIRY FORM PAGE */
@media only screen and (max-device-width: 812px) {
div.wrapperdriverenquirypage {
  padding:5px;
}}

@media only screen and (max-device-width: 812px) {
div.enquiryform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 95%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

/* DRIVER REGISTRATION FORM PAGE */
@media only screen and (max-device-width: 812px) {
div.wrapperdriverregistrationpage {
  padding:5px;
}}

@media only screen and (max-device-width: 812px) {
div.registrationform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 95%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

/* FEEDBACK PAGE */
@media only screen and (max-device-width: 812px) {
div.wrapperfeedback {
  padding:5px;
}}

@media only screen and (max-device-width: 812px) {
div.feedback {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 95%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

/* FEEDBACK LANDING PAGE */

@media only screen and (max-device-width: 812px) {
div.wrapperfeedback_landing {
  padding:30px;
}}

@media only screen and (max-device-width: 812px) {
div.feedback_landing {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

@media only screen and (max-device-width: 812px) {
button.button3 {
border-style: solid;
border-color: #284B63;
border-width: 2px;
padding: 8px 15px 8px 15px;
width: 210px;
font-size: 20px;
background: white;
border-radius: 5px;
cursor: pointer;
color: #284B63;
margin-left: auto;
margin-right: auto;
display: block;
}}

/* PRIVACY POLICY PAGE */
@media only screen and (max-device-width: 812px) {
div.wrapperprivacy {
  padding:5px;
  width: 100%;
  background-color: #f9f9f9
}}

@media only screen and (max-device-width: 812px) {
div.privacy {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
  overflow-wrap: break-word;
}}

/* TERMS OF SERVICE PAGE */
@media only screen and (max-device-width: 812px) {
div.wrapperterms {
  padding:5px;
  width: 100%;
  background-color: #f9f9f9
}}

@media only screen and (max-device-width: 812px) {
div.terms {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
  overflow-wrap: break-word;
}}

/* SUCCESS PAGE */
@media only screen and (max-device-width: 812px) {
div.wrappersuccess {
  padding:5px;
  width: 100%;
  background-color: #f9f9f9
}}

@media only screen and (max-device-width: 812px) {
div.success h2 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: green;
  background-color: #f9f9f9;
}}

@media only screen and (max-device-width: 812px) {
div.success h3 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
}}

/* FAILURE PAGE */

@media only screen and (max-device-width: 812px) {
div.wrapperfailure {
  padding:5px;
  width: 100%;
  background-color: #f9f9f9
}}

@media only screen and (max-device-width: 812px) {
div.failure h2 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: green;
  background-color: #f9f9f9;
}}

@media only screen and (max-device-width: 812px) {
div.failure h3 {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
}}

/* FOOTER */
@media only screen and (max-device-width: 812px) {
footer {
  position: absolute;
  bottom: 0;
  background-color: #153243;
  text-align: center;
  padding: 3vh; 
  width: 100%;
  color:white;
  height: 30vh;
  bottom: 0px;
}}

/* Footer nav bar 4 columns */

@media only screen and (max-device-width: 812px) {
footer div.footernav_wrapper {
  height: 2vh;
  width: 100%;
  display: table;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell1 {
  width: 25%;
  display: table-cell;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell2 {
  width: 25%;
  display: table-cell;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell3 {
  width: 25%;
  display: table-cell;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell4 {
  width: 25%;
  display: table-cell;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell1 a {
  text-align: center;
  font-size: 11;
  text-decoration: none;
  color: white;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell2 a {
  text-align: center;
  font-size: 11;
  text-decoration: none;
  color: white;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell3 a {
  text-align: center;
  font-size: 11;
  text-decoration: none;
  color: white;
}}

@media only screen and (max-device-width: 812px) {
footer span.footernav_wrapper div.cell4 a {
  text-align: center;
  font-size: 11;
  text-decoration: none;
  color: white;
}}


@media only screen and (max-device-width: 812px) {
footer img {
position: relative;
width: 3.5em;
height: 3.5em;
}}

/* Hyperlink changes color with hover */
@media only screen and (max-device-width: 812px) {
footer a:hover {
  color: #d9d9d9;
  text-decoration: underline;
}}


/* ---------------MOBILE PHONE SCREEN STYLING (<400) ------------------------------------------- */


/* Whole container (minus header) */

@media only screen and (max-device-width: 400px) {
div.page-container {
  min-height: 100vh;
  position: relative;
}}

@media only screen and (max-device-width: 400px) {
div.content-wrap { 
  padding-bottom: 50vh; /* Footer height */
  }}

/* HEADER */

/* Create 3 rows in header (kind of)*/

@media only screen and (max-device-width: 400px) {
.header_wrapper {
    width:100%;
    height:25vh;
    display:block;
    background-color:#284B63;
}}

/* logo */
@media only screen and (max-device-width: 400px) {
header div.left span.logo img {
  position: relative;
  margin: auto;
  width: 12vh;
  left: 7vh;
  height: auto;
  display: block;
}}

/* slogan */
@media only screen and (max-device-width: 400px) {
header div.central a {
  position: relative;
  color: white;
  font-size: 10px;
  left: 7vh;
  text-decoration: none;
  text-align: center;
  padding: 1vh;
  height: 10vh;
}}

/* nav bar */

/* Create three columns for nav bar */

@media only screen and (max-device-width: 400px) {
header div.header_wrapper nav.right {
    width:100%;
    display:block;
    background-color:#284B63;
    padding: 1vh;
    display:table;
    padding: 2vh;
}}

@media only screen and (max-device-width: 400px) {
.part1 {
  width: 33%;
  display: table-cell;
  }}

  @media only screen and (max-device-width: 400px) {
.part2 {
  width: 33%;
  display: table-cell;
  }}

  @media only screen and (max-device-width: 400px) {
.part3 {
  width: 33%;
  display: table-cell;
  }}

@media only screen and (max-device-width: 400px) {
nav.right div.part1 span {
  font-size: 11px;
  position: relative;
  color: white;
  text-align: center;
  float: left;
  text-decoration: none;
  display: block;
  margin: auto;
  line-height: 2vh;
  padding-top: 3vh;
  }}

@media only screen and (max-device-width: 400px) {
nav.right div.part2 span {
  font-size: 11px;
  position: relative;
  color: white;
  text-align: center;
  float: left;
  text-decoration: none;
  display: block;
  margin: auto;
  line-height: 2vh;
  top: -1.5vh;
  display: block;
    padding-top: 3vh;
  }}

@media only screen and (max-device-width: 400px) {
nav.right div.part3 span {
font-size: 11px;
  position: relative;
  color: white;
  text-align: center;
  float: right;
  text-decoration: none;
  display: block;
  margin: auto;
  line-height: 2vh;
  padding-top: 3vh;
  }}


/* Header text hyperlinks change color with hover */

@media only screen and (max-device-width: 400px) {
header nav.right a:hover {
  color: #e6e6e6;
  text-decoration: underline;
}}

@media only screen and (max-device-width: 400px) {
header div.central a:hover {
  color: #f2f2f2;
}}


/* Band right after hero image - First band, first row (full screen width) */

@media only screen and (max-device-width: 400px) {
div.row1 div.wrapper1 {
  height: 35vh;
  width: 100%;
  background-color: #f9f9f9;
  text-align: center;
  font-size: 14px;
  padding: 10px
  }}

 

/* FAQs Page */

@media only screen and (max-device-width: 400px) {
div.wrapperFAQs {
  padding:3px;
  background-color: #f9f9f9;
  width: 100%;
}}

@media only screen and (max-device-width: 400px) {
div.paneFAQs {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 100%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px
}}

@media only screen and (max-device-width: 400px) {
div.paneFAQs h1 {
  font-size: 18px;
  }}


/* PRIVACY POLICY PAGE */
@media only screen and (max-device-width: 400px) {
div.wrapperprivacy {
  padding:3px;
  width: 100%;
  background-color: #f9f9f9
}}

@media only screen and (max-device-width: 400px) {
div.privacy {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  color: black;
  background-color: #f9f9f9;
  overflow-wrap: break-word;
}}

@media only screen and (max-device-width: 400px) {
div.privacy h1 {
font-size: 18px;
  }}


/* TERMS OF SERVICE PAGE */
@media only screen and (max-device-width: 400px) {
div.wrapperterms {
  padding:3px;
  width: 100%;
  background-color: #f9f9f9
}}

@media only screen and (max-device-width: 400px) {
div.terms {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 5px 30px 5px;
  color: black;
  background-color: #f9f9f9;
  overflow-wrap: break-word;
}}

@media only screen and (max-device-width: 400px) {
div.wrapperterms h1 {
  font-size:18px;
  }}

/* ABOUT US */

@media only screen and (max-device-width: 400px) {
div.about h1 {
  font-size: 22px;
}}

@media only screen and (max-device-width: 400px) {
div.about img {
  width: 75%;
  height: auto;
}}

/* DRIVERs PAGE */
@media only screen and (max-device-width: 400px) {
div.driversignup {
  padding:5px;
}}



/* DRIVER REGISTRATION FORM PAGE */
@media only screen and (max-device-width: 400px) {
div.wrapperdriverregistrationpage {
  padding:5px;
  width: 95%;
}}

/* DRIVER ENQUIRY FORM PAGE */
@media only screen and (max-device-width: 400px) {
div.wrapperdriverenquirypage {
  padding:5px;
}}

@media only screen and (max-device-width: 400px) {
div.enquiryform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 95%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

/* DRIVER REGISTRATION FORM PAGE */
@media only screen and (max-device-width: 400px) {
div.wrapperdriverregistrationpage {
  padding:5px;
}}

@media only screen and (max-device-width: 400px) {
div.registrationform {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 95%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

/* FEEDBACK PAGE */
@media only screen and (max-device-width: 400px) {
div.wrapperfeedback {
  padding:5px;
}}

@media only screen and (max-device-width: 400px) {
div.feedback {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 95%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

/* FEEDBACK LANDING PAGE */

@media only screen and (max-device-width: 400px){
div.wrapperfeedback_landing {
  padding:30px;
}}

@media only screen and (max-device-width: 400px) {
div.feedback_landing {
  position: relative;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 50%;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px 40px 50px 40px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  color: #284B63;
}}

@media only screen and (max-device-width: 400px) {
button.button3 {
border-style: solid;
border-color: #284B63;
border-width: 2px;
padding: 8px 15px 8px 15px;
width: 210px;
font-size: 20px;
background: white;
border-radius: 5px;
cursor: pointer;
color: #284B63;
margin-left: auto;
margin-right: auto;
display: block;
}}


/* FOOTER */

@media only screen and (max-device-width: 400px) {
footer {
  position: absolute;
  bottom: 0;
  background-color: #153243;
  text-align: center;
  padding: 10px; 
  width: 100%;
  color:white;
  height: 40vh;
  bottom: 0px;
}}

/* Create four columns in footer navbar */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper {
    width:100%;
    height:5vh;
    display:table;
    background-color:#153243;
    float: none;
    padding: 3vh;
}}

@media only screen and (max-device-width: 400px) {
.cell1 {
    width:25%;
    margin: auto;
    display: table-cell;
}}

@media only screen and (max-device-width: 400px) {
.cell2 {
    width:25%;
     margin: auto;
    display: table-cell;
}}

@media only screen and (max-device-width: 400px) {
.cell3 {
    width:25%;
     margin: auto;
    display: table-cell;
}}

@media only screen and (max-device-width: 400px) {
.cell4 {
    width:25%;
     margin: auto;
    display: table-cell;
}}

/* Cell 1 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell1 span {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 14px;
  text-decoration: none;
  float: center;  
}}

/* Cell 2 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell2 span {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 14px;
  text-decoration: none;
  float: center;  
}}

/* Cell 3 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell3 span {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 14px;
  text-decoration: none;
  float: center;  
}}

/* Cell 4 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell4 span {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 14px;
  text-decoration: none;
  float: center;  
}}

/* Cell 1 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell1 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: center;  
}}

/* Cell 2 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell2 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: center;  
}}

/* Cell 3 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell3 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: center;  
}}

/* Cell 4 */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell4 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: center;  
}}


/* Hyperlink changes color with hover */
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell1 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell2 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell3 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (max-device-width: 400px) {
.footernav_wrapper div.cell4 a:hover {
  color: yellow;
  text-decoration: none;
}}


@media only screen and (max-device-width: 400px) {
footer img {
  padding: 2vh;
  float: center;
  height:4em;
  width:4em;
}}


/* ------------------------ STYLING FOR DESKTOPS -------------------------------------- */

/* Whole container (minus header) */

@media only screen and (min-device-width: 1440px) {
div.page-container {
  min-height: 100vh;
  position: relative;
}}

@media only screen and (min-device-width: 1440px) {
div.content-wrap { 
  padding-bottom: 220px; /* Footer height */
  }}

/* HEADER */

/* Create 3 columns in header */

@media only screen and (min-device-width: 1440px) {
.header_wrapper {
    width:100%;
    height:20vh;
    display:table;
    background-color:#284B63;
    float: none;
}}

@media only screen and (min-device-width: 1440px) {
.central {
    width:50%;
    margin: auto;
    display: table-cell;
}}
@media only screen and (min-device-width: 1440px) {
.left {
    width:25%;
     margin: auto;
    display: table-cell;
}}
@media only screen and (min-device-width: 1440px) {
.right {
    width:25%;
     margin: auto;
    display: table-cell;
}}

/* logo */
@media only screen and (min-device-width: 1440px) {
header div.left span.logo img {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  top: 4.7vh;
  float: center;
}}

/* slogan */
@media only screen and (min-device-width: 1440px) {
header div.central a {
  position: relative;
  top:25px;
  float: center;
  height: 125px;
  color: white;
  font-size: 22px;
  text-decoration: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}}

/* nav bar */
@media only screen and (min-device-width: 1440px) {
header nav.right div.part1 a {
  position: relative;
  color: white;
  font-size: 22px; 
  text-decoration: none; 
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8em;
  padding-left: 2.9em; 
}}

@media only screen and (min-device-width: 1440px) {
header nav.right div.part2 a {
  position: relative;
  color: white;
  font-size: 22px; 
  text-decoration: none; 
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8em;
  padding-left: 2.9em;
}}

@media only screen and (min-device-width: 1440px) {
header nav.right div.part3 a {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 22px; 
  text-decoration: none; 
  text-align: left;
  line-height: 1.8em;
  padding-left: 2.9em;
}}


/* Header text hyperlinks change color with hover */
@media only screen and (min-device-width: 1440px) {
header nav.right div.part1 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (min-device-width: 1440px) {
header nav.right div.part2 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (min-device-width: 1440px) {
header nav.right div.part3 a:hover {
  color: yellow;
  text-decoration: none;
}}

@media only screen and (min-device-width: 1440px) {
header div.central a:hover {
  color: #f2f2f2;
}}


/* FOOTER */

@media only screen and (min-device-width: 1440px) {
footer {
  position: absolute;
  bottom: 0;
  background-color: #153243;
  text-align: center;
  padding: 10px; 
  width: 100%;
  color:white;
  height: 220px;
  bottom: 0px;
}}

/* Create four columns in footer navbar */
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper {
    width:100%;
    height:5vh;
    display:table;
    background-color:#153243;
    float: none;
    padding: 3vh;
}}

@media only screen and (min-device-width: 1440px) {
.cell1 {
    width:25%;
    margin: auto;
    display: table-cell;
}}

@media only screen and (min-device-width: 1440px) {
.cell2 {
    width:25%;
     margin: auto;
    display: table-cell;
}}

@media only screen and (min-device-width: 1440px) {
.cell3 {
    width:25%;
     margin: auto;
    display: table-cell;
}}

@media only screen and (min-device-width: 1440px) {
.cell4 {
    width:25%;
     margin: auto;
    display: table-cell;
}}

/* Cell 1 */
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell1 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}}

/* Cell 2 */
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell2 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}}

/* Cell 3 */
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell3 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}}

/* Cell 4 */
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell4 a {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  text-decoration: none;
  float: center;  
}}


/* Hyperlink changes color with hover */
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell1 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell2 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell3 a:hover {
  color: yellow;
  text-decoration: none;
}}
@media only screen and (min-device-width: 1440px) {
.footernav_wrapper div.cell4 a:hover {
  color: yellow;
  text-decoration: none;
}}

@media only screen and (min-device-width: 1440px) {
footer img {
  padding: 2vh;
  float: center;
  height:7em;
  width:7em;
}}