.w3-theme-l5 {color:#000 !important; background-color:#f0f0f0 !important}
.w3-theme-l4 {color:#000 !important; background-color:#cccccc !important}
.w3-theme-l3 {color:#fff !important; background-color:#999999 !important}
.w3-theme-l2 {color:#fff !important; background-color:#353535 !important}
.w3-theme-l1 {color:#fff !important; background-color:#333333 !important}
.w3-theme-desktopmenu {color:#fff !important; background-color:#484848 !important}
.w3-theme-d1 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d2 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d22 {color:#000 !important; background-color:#ffffff !important}
.w3-theme-d3 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d4 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d5 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d6 {color:#fff !important; background-color:#484848 !important}
.w3-theme-d7 {color:#fff !important; background-color:#00b9c2 !important}

.w3-theme-light {color:#000 !important; background-color:#f0f0f0 !important}
.w3-theme-dark {color:#fff !important; background-color:#000000 !important}
.w3-theme-action {color:#fff !important; background-color:#000000 !important}

.w3-theme {color:#fff !important; background-color:#000000 !important}
.w3-text-theme {color:#000000 !important}
.w3-border-theme {border-color:#000000 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#000000 !important}
.w3-hover-text-theme:hover {color:#000000 !important}
.w3-hover-border-theme:hover {border-color:#000000 !important}


/* Home Page Text on top of picture Container */
/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 0px;
    left: 16px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.col-text {
  height:20em;
}


/* Image and Text 2 grid layout */
.grid-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  flex-direction: row; 
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: space-around;
}
.col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.col-left {
  -webkit-box-ordinal-group:-1;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}
.col-text{
  display: flex;
  align-items: left;
  justify-content: left;
	padding: 20px
}
.Aligner-item {
  width: 100%;
}
.col-image {
  background-size: cover;
  background-position:center center;
}

@media (max-width: 993px) {
  .grid-flex {
    height: 40em;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    flex-direction: column; 
   }
  .col {
    order:vertical;
  }
  .col-left {
    -webkit-box-ordinal-group:0;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .col-text div p {
    padding: 1em;
  }
  .Aligner-item {
    width: 90%;
  }
}

/* Iframe ENQUIRY FORM */
.iframe-container {
  overflow: hidden;
  padding-top: 125%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
/* fade image on hover over */
.containerfade {
  position: relative;

}

.imagefade {
  opacity: 1;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}


.containerfade:hover .imagefade {
  opacity: 0.6;
}

/* Mega Menu */

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar-mega {
  overflow: hidden;
  background-color: #ffffff;
  font-family: Ubuntu, sans-serif;
}

.navbar-mega a {
  float: left;
  font-size: 16px;
  color: #149ed9;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown-mega {
  float: left;
  overflow: hidden;
}

.dropdown-mega .dropbtn-mega {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: #149ed9;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar-mega a:hover, .dropdown-mega:hover .dropbtn-mega, .dropbtn-mega:focus {
  background-color: #484848;
	color: #ffffff;
}

.dropdown-content-mega {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content-mega a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content-mega a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 16.66%;
  padding: 10px;
  background-color: #ffffff;
  height: 100%;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #484848;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 993px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>