body {
  padding: 0px;
  margin: 0px;
  font-family: verdana;
  color: #404040;
  overflow-x: hidden;
  background-color: whitesmoke;
}

body h1, h2, h3, h4 {
  font-family: sans-serif;
  margin: 0px;
}

h1, h2, h3, h4 {
  font-family: 'Roboto Slab', tahoma;
}


p {
  font-size: 13px;
  margin:0px;
}

button {
  background-color: darkorange;
  color: white;
  padding:8px;
  border: 0px;
}

button:hover {
  background-color: #505050;
  color: darkorange;
  cursor: pointer;
}

.caption {
  font-size: 12px;
}

ul {
  padding-inline-start: 0px;
  margin-block-start: 0px;
  margin-block-end: 0px;
  height: 100%;
}

li a {
  text-decoration: none;
  color: inherit;
  height: 100%;
}

a:visited {
  color: inherit;
}

h1 {
  margin: 0px;
}

.primary-colour-background {
  background-color: #505050;
}

.secondary-colour-background {
  background-color: darkorange;
}

.tertiary-colour-background {
  background-color: silver;
}

.pale-grey-colour-background {
  background-color: #E0E0E0;
}

.pale-orange-colour-background {
  background-color: #FFB74D;
}

.primary-colour-text {
  color: #505050;
}

.secondary-colour-text {
  color: darkorange;
}

.tertiary-colour-text {
  color: silver;
}

.white-colour-text {
  color: white;
}

.black-colour-text {
  color: black;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row>.small-item:not(:last-child) {
  display: block;
  margin-right: 4px;
}

.flex-row>.medium-item:not(:last-child) {
  display: block;
  margin-right: 14px;
}

.flex-row>.large-item:not(:last-child) {
  display: block;
  margin-right: 34px;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column>.small-item:not(:last-child) {
  display: block;
  margin-bottom: 4px;
}

.flex-column>.medium-item:not(:last-child) {
  display: block;
  margin-bottom: 14px;
}

.flex-column>.large-item:not(:last-child) {
  display: block;
  margin-bottom: 34px;
}


.flex-column-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}

.flex-row-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.flex-center {
  justify-content: center;
  display: flex;
  align-items: center;
}

.flex-center-horizontally{
  display: flex;
  align-items: center;
}

.flex-item {
  flex: 1 1 0px;
}

.flex-25-percent {
  width: 25%;
}

.flex-50-percent {
  width: 50%;
}

.flex-30-percent {
  width: 30%;
}

.flex-60-percent {
  width: 60%;
}

.center {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.center-text {
  text-align: center;
}

.right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.left {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.medium-padding-row {
  padding-left: 13px;
  padding-right: 13px;
}

.medium-padding-column {
  padding-top: 13px;
  padding-bottom: 13px;
}

.center-horizontal-margin {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.even-distribution {
  display: flex;
  justify-content: space-between;
}

.icon-flipped {
  transform: rotateZ(180deg);
}

.icon-tilt-45 {
  transform: rotateZ(-45deg);
}

.list-decoration-none li {
  list-style-type: none;
}

.flex-row li {
  text-align: center;
}

.logo {
  font-family: 'Roboto Slab', tahoma;
}

.slogan {
  text-align: center;
  font-family: 'Caveat', verdana;
  font-size: 1.6em;
}

.page-description-header {
  padding-right: 20%;
  padding-left: 20%;
}

.page-description-info {
  padding-right: 20%;
  padding-left: 20%;
  padding-bottom: 15px;
}

.page-container {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.web-container {
  padding-left: 10px;
  padding-right: 10px;
}

/* .card-container {
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: 8%;
  margin-right: 8%;
} */

.card a {
  text-decoration: none;
  color: inherit;
}

.card {
  box-shadow: 0 3px 10px #505050;
  /* max-width: calc(33.333% - 10px); */
  flex-basis: calc(33.333333% - 10px);
  min-width: 300px;
}

.card-header .flex-column {
  padding: 8px;
}

.card-header p {
  margin: 0px;
}

.card-header {
  /* background-color: white; */
}

.card-header-bar {
  width: 4px;
  height: 58px;
  background-color: darkorange;
  margin-right: 8px;
}

.card:hover {
  background-color: #505050;
  color: white;
  cursor: pointer;
}

.card:hover h3 {
  color: darkorange;
}

.card:hover #amtico-card {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/cards/amtico-banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#amtico-card {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/cards/amtico-banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#karndean-card {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/cards/karndean-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.card:hover #karndean-card {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/cards/karndean-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#lvt-card {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/cards/lvt-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.card:hover #lvt-card {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/cards/lvt-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#wood-and-laminate-card {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/cards/wood-and-laminate-banner.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.card:hover #wood-and-laminate-card {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/cards/wood-and-laminate-banner.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#carpet-card {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/cards/carpet-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.card:hover #carpet-card {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/cards/carpet-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#commercial-card {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/cards/commercial-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.card:hover #commercial-card {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/cards/commercial-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  min-height: 20em;
}


/* Stamps */

.stamp .material-icons {
  font-size: 48px;
  color: darkorange;
  max-height:50px;
}

.stamp {
  white-space: nowrap;
  background-color: #E0E0E0;
  flex-basis: calc(33.333333% - 10px);
  min-width: 200px;
  min-height: 164px; /*height of largest box - adress + some padding for stamp-header-bar*/
}

.stamp-header-bar {
  width: 100%;
  height: 4px;
  background-color: darkorange;
  margin-bottom:10px;
}

.contact-container {
  padding: 14px;
}

.contact-container .address p {
  margin-top: 5px;
}

.contact-container h2 {
  margin-bottom: 14px;
}

.contact-container .visit-our-showroom {
  margin-bottom: 10px;
}

.phone-number {
  text-decoration: none;
}

a[href^="tel"]{
  color:inherit;
  text-decoration:none;
}

#showroom {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/showroom-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.hidden {
  display: none;
}

.full-width {
  width: 100%;
}

.small-text {
  font-size: 12px;
}

.fixed {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
}

#top-nav-bar {
  min-height: 34px;
  font-size: 12px;
}

#title-bar {
  padding-top: 8px;
  padding-bottom: 8px;
}

footer {
  padding-top: 8px;
  padding-bottom: 4px;
}

.title-bar-small-contact-info {
  display: none;
  font-size: 12px;
  background-color: #505050;
  color: white;
}

nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
  min-height: 34px;
}

nav #menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
  min-height: 34px;
}

nav #menu-button:hover {
  cursor: pointer;
}

#top-nav-bar li:hover {
  color: darkorange;
  background-color: #505050;
}

#top-nav-bar li {
  transition: all 0.5s ease;
}

.active-nav-button {
  color: darkorange;
  background-color: #505050;
}

#tablet-menu li:hover {
  color: darkorange;
}

#tablet-menu li {
  transition: all 0.5s ease;
  color: white;
}

/* Image Banners */
#home-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/home-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#amtico-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/amtico-banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#karndean-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/karndean-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 90%;
  min-height: 20em;
}

#lvt-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/lvt-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#carpet-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/carpet-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#wood-and-laminate-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/wood-and-laminate-banner.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#commercial-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/commercial-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#reviews-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/home-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#latest-news-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/home-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#work-for-us-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/home-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#contact-us-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/home-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

#gallery-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/banners/home-banner.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.banner-title {
  padding: 15px;
  background-color: rgba(0,0,0,0.6);
}

#tablet-menu {
  position: absolute;
  width: 100%;
  font-size: 12px;
}

#table-menu li {
  visibility: inherit;
}

.show-on-mobile {
  display: none;
}

.title-bar-large-contact-info {
  display: block;
}

#title-menu-button-icon:hover {
  color: darkorange;
  cursor: pointer;
}

.footer-medium-screen {
  display: none;
}

.opening-hours {
  min-width: 250px;
  max-width: 300px;
}

.map {
  min-width: 250px;
}

.opening-hours li{
  list-style-type: none;
  text-align: left;
  font-size: 13px;
}

.opening-hours li:not(:last-child) {
  margin-bottom: 8px;
}

.opening-hours .flex-row-wrap {
  gap:0px;
  width: 100%
}

.opening-hours .day {
  margin-right: 15px;
}

.contact-info p {
  margin: 1px 0px;
}

.contact-container .flex-row-wrap {
  gap: 15px
}

.vertical-contact-container-divider-bar {
  width: 2px;
  background-color: #505050;
  margin: 0px 4px;
}

.horizontal-contact-container-divider-bar {
  height: 2px;
  width:100%;
  background-color: #505050;
  margin: 4px 0px;
  display: none;
}

.social-media-icon:hover {
  cursor: pointer;
}

.social-media-icon-container {
  padding-bottom: 10px;
}

.instagram {
  background: url("../images/social-media/instagram-orange.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.instagram:hover {
  background: url("../images/social-media/instagram-grey.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.facebook {
  background: url("../images/social-media/facebook-orange.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.facebook:hover {
  background: url("../images/social-media/facebook-grey.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.twitter {
  background: url("../images/social-media/twitter-orange.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.twitter:hover {
  background: url("../images/social-media/twitter-grey.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.linkedin {
  background: url("../images/social-media/linkedin-orange.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.linkedin:hover {
  background: url("../images/social-media/linkedin-grey.png");
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.tile {
  padding-left:20px;
  padding-right:20px;
}

.tile-text {
  flex-basis:40%;
}

.tile-show-on-wrap {
  display:none;
}

.tile-image {
  flex-basis: 55%;
  min-width: 250px;
}

.horizontal-tile-container-divider-bar {
  height: 2px;
  background-color: #505050;
  margin-bottom: 24px;
  margin-top:24px;
}

/****************************** AMTICO - TILES ******************************/

#amtico-spacia-tile {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/amtico/spacia-tile.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#amtico-form-tile {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/amtico/form-tile.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 90%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#amtico-signature-tile {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/amtico/signature-tile.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 80%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#amtico-decor-tile {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/amtico/decor-tile.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

/****************************** KARNDEAN - TILES ******************************/

#karndean-tile-1 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/karndean/tile-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 80%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#karndean-tile-2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/karndean/tile-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#karndean-tile-3 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/karndean/tile-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

/****************************** LVT - TILES ******************************/

#lvt-tile-1 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/lvt/lvt-wood-effect.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 80%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#lvt-tile-2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/lvt/lvt-bathroom.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 80%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#lvt-tile-3 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/lvt/tile-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 80%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#lvt-tile-4 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/lvt/tile-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#lvt-tile-5 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/lvt/tile-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

/****************************** CARPET - TILES ******************************/

#carpet-tile-1 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/carpet/tile-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#carpet-tile-2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/carpet/tile-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#carpet-tile-3 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/carpet/tile-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60% 100%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#carpet-tile-4 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/carpet/tile-4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

/****************************** WOOD & LAMINATE - TILES ******************************/

#wood-and-laminate-tile-1 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/wood-and-laminate/tile-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#wood-and-laminate-tile-2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/wood-and-laminate/tile-2.jfif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

/****************************** COMMERCIAL - TILES ******************************/

#commercial-tile-1 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/commercial/tile-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#commercial-tile-2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/commercial/tile-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  min-height: 20em;
  height: 100%;
  width:100%;
}

#commercial-tile-3 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/pages/commercial/tile-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  min-height: 20em;
  height: 100%;
  width:100%;
}



/* Comments */
.comment {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #616161;
  margin-left:auto;
  margin-right:auto;
  max-width: 45%;
}
.comment-box {
  background: white;
  padding: 5px;
  position: relative;
  filter: drop-shadow(0 1px 3px #505050);
}

.comment-bubble:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid white;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  border-bottom: 10px solid transparent;
  left: 19px;
  bottom: -19px;
}

.comment-quote {
  width:45px;
  height:45px;
  font-size: 45px;
  margin-bottom: auto;
}

.comment-user-icon {
  width:45px;
  height:45px;
  font-size: 45px;
}

.comment-user {
  margin-top: 20px;
}

.comment .social-media-icon {
  margin-left:auto;
}

.comment .social-media-icon:hover {
  cursor: default;
}

.comment-content {
  padding-top: 5px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 10px;
  font-style: italic;
  overflow-wrap: break-word;
}

/* .comment-container {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 10%;
  margin-right: 10%;
} */

.comment .name {
  font-weight: bold;
  font-size: 14px;
}

.comment .flex-row-wrap {
  gap: 0px;
}

/* latest news */
.post-container {
  width:400px;
}

/* .latest-news-container {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 10%;
  margin-right: 10%;
} */

.latest-news-container h2 {
  margin-bottom: 10px;
}

.annoucements-container{
  /*500 for fb-container, 10 for flex gap, 30 for padding*/
    width: calc(100% - 440px);
    min-width: 200px;
    padding-left: 30px;
}

.horizontal-annoucement-container-divider-bar {
  height: 2px;
  background-color: #505050;
  margin-top: 24px;
  margin-bottom: 24px;

}

.annoucement-icon {
  width:45px;
  height:45px;
  font-size: 45px;
}

/* .annoucement-box {
  background: white;
  padding: 5px;
  filter: drop-shadow(0 1px 3px #505050);
} */

/* for speach bubble*/
/* .annoucement-box {
  background: white;
  padding: 5px;
  position: relative;
  filter: drop-shadow(0 1px 3px #505050);
  margin-left: 15px;
} */


/* .annoucement-bubble:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -19px;
  top: 12px;
} */

.annoucement-icon-container {
  margin-top: 10px;
}

.annoucement .name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
}

.fb-page-medium {
  display: none !important;
}

.fb-page-small {
  display: none !important;
}

/* job list / work for us */

.job-list li{
  list-style-type: none;
  font-weight: bold;

}

.job-list li:hover {
  color: #d27300;
}

.job-list li:not(:last-child) {
  margin-bottom: 8px;
}

.current-vaccancies h2 {
  margin-bottom: 8px;
}

 .current-vaccancies{
   margin-left: auto;
   margin-right: auto;
   width: 100%;
}

/* .current-vaccancies-list {
  margin-right: auto;
} */

.current-vaccancies-contact {
  flex-basis: auto;
  width:45%;
}

.current-vaccancies {

}

.job li {
  font-size: 13px;
}

.job ul {
  padding-left: 18px;
}

.job h2 {
  margin-bottom: 5px;
}

.job p:not(:last-child) {
  margin-bottom: 24px;
}

.job ul:not(:last-child) {
  margin-bottom: 24px;
}

/* .gallery .card {
  display:block;
  width:100%;
  height:100%;
  /* width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  max-height: 20em;
  overflow: hidden; 
} */


.gallery-img{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  min-height: 20em;
}

.gallery .card img {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  background-color: rgba(0,0,0,0.6);
  opacity:0;
}

.overlay:hover {
    background-color: rgba(0,0,0,0.6);
    opacity:1;
}

.gallery a {
  text-decoration: none;
  width:100%;
  height:100%;
  position: relative;
}

.gallery .gallery-section:not(:last-child) {
  margin-bottom: 50px;
}

.gallery h2 {
  margin-bottom: 8px;
}

.hidden {
  display: none;
}


@media only screen and (min-width: 900px) {
  .page-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  .web-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}


@media only screen and (max-width: 900px) {
  #top-nav-bar li:nth-child(13) {
    display: none;
  }

  .post-container {
    width: 340px;
  }

  .fb-page-large {
    display: none !important;
  }

  .fb-page-medium {
    display: block !important;
  }

  .annoucements-container {
    width: calc(100% - 380px);
  }
}

@media only screen and (max-width: 850px) {
  #top-nav-bar li:nth-child(12) {
    display: none;
  }
}

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

  .opening-hours {
    max-width: none;
  }
}

@media only screen and (max-width: 780px) {
  #top-nav-bar li:nth-child(11) {
    display: none;
  }
}


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

  .post-container {
    width: 250px;
  }

  .fb-page-medium {
    display:none !important;
  }

  .fb-page-small {
    display: block !important;
  }

  .annoucements-container {
    width: calc(100% - 290px);
  }
}

@media only screen and (max-width: 700px) {
  #top-nav-bar li:nth-child(10) {
    display: none;
  }

  .card {
    max-width: calc(70% - 10px);
  }
}

@media only screen and (max-width: 650px) {
  #top-nav-bar li:nth-child(9) {
    display: none;
  }

  .title-bar-small-contact-info {
    display: flex;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .title-bar-large-contact-info {
    display: none !important;
  }

  .footer-large-screen {
    display: none !important;
  }

  .footer-medium-screen {
    display: flex;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .comment {
    max-width: 100%;
  }

  .post-container {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .fb-page-large {
    display: block !important;
  }

  .fb-page-small {
    display: none !important;
  }

  .annoucements-container {
    width: 400px;
    padding-left: 0px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 600px) {
  #top-nav-bar li:nth-child(8) {
    display: none;
  }
  .tile-image {
    width:100%;
    min-width:100%;
  }
  .tile-text {
    width: 100%;
    min-width: 100%;
  }
  .tile-show-on-wrap {
    display: block;
  }
  .tile-hide-on-wrap {
    display: none;
  }
}

@media only screen and (max-width: 518px) {
  .vertical-contact-container-divider-bar {
    display: none;
  }
  .contact-info {
    margin-right:40px;
  }
  .horizontal-contact-container-divider-bar {
    display: block;
  }
}

/*swap to mobile view at 500px*/
@media only screen and (max-width: 500px) {
  #top-nav-bar ul {
    display: none;
  }

  .title-bar-small-contact-info {
    display: none;
  }

  .show-on-mobile {
    display: block;
  }

  .hide-on-mobile {
    display: none !important;
  }

  .flex-column-on-mobile {
    display: flex;
    flex-direction: column;
  }

  .top-level-container {
    margin-left: 5px;
    margin-right: 5px;
  }

  .card {
    min-width: calc(100% - 10px);
  }

  @media only screen and (max-width: 450px) {
    .post-container {
      width: 340px;
      margin-left: auto;
      margin-right: auto;
    }

    .fb-page-medium {
      display: block !important;
    }

    .fb-page-large {
      display: none !important;
    }

    .annoucements-container {
      width: 340px;
      padding-left: 0px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media only screen and (max-width: 400px) {
    .post-container {
      width: 250px;
      margin-left: auto;
      margin-right: auto;
    }

    .fb-page-small {
      display: block !important;
    }

    .fb-page-medium {
      display: none !important;
    }

    .annoucements-container {
      width: 250px;
      padding-left: 0px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}