/* =========> GLOBAL VARRIABLES <========= */
:root {
  --black: rgba(26, 26, 26);
  --medBlack: rgba(51, 51, 51);
  --grey: rgba(153, 153, 153);
  --lightGrey: rgb(228, 228, 228);
  --red: rgba(237, 28, 36);
  --white: rgba(242, 242, 242);
}
/* =========> GLOBAL BODY <========= */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden!important;
  min-height: 100vh!important;
  margin: 0!important;
}

.bg-white {
  background-color: var(--white)!important;
}
.bg-lightGrey{
  background-color: var(--lightGrey)!important;
}

.bg-grey{
  background-color: var(--grey)!important;
}
.bg-medBlack{
  background-color: var(--medBlack)!important;
}
.bg-black{
  background-color: var(--black)!important;
}
.bg-red {
  background-color: var(--red)!important;
}
/* =========> TEXT <========= */

.contactFormWrapper, [data-type="control_head"] {
  background-color: red;
  }

iframe {
  color: aqua!important;
}

h1 {
  font-size: 2.5rem!important;
  margin-bottom: 20px !important;
}

h2 {
  font-size: 2rem!important;
}

h3 {
  font-size: 1.5rem!important;
}

h4 {
  font-size: 1.25rem!important;
  font-weight: 400!important;
  letter-spacing: 0.05em!important;
}

h1, h2, h3 {
  font-weight: 400!important;
  text-transform: uppercase!important;
  letter-spacing: 0.05em!important;
}

a {
  cursor: pointer!important;
  font-weight: 500!important;
}

button {
  cursor: pointer!important;
}

.text-white {
  color: var(--white)!important;
}
.text-black {
  color: var(--black)!important;
}
.text-red {
  color: var(--red)!important;
}
/* =========> BUTTONS <========= */
.button-white {
  color: var(--white);
  display: inline-block;
  padding: 5px;
  background: 
    linear-gradient(to right, rgba(242, 242, 242, 1), rgba(242, 242, 242, 1)),
    linear-gradient(to right, rgba(237, 28, 36, 1), rgba(237, 28, 36, 1));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  transition: all .2s ease-in-out;
}

.button-white:hover,
.button-white:focus {
  text-decoration: none;
  color: var(--red);
  background-size: 0 0.1em, 100% 0.1em;
  transform: scale(1.1);
}

.button-red-black {
  color: var(--red);
  display: inline-block;
  padding: 5px;
  background: 
    linear-gradient(to right, rgba(237, 28, 36, 1), rgba(237, 28, 36, 1)),
    linear-gradient(to right, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  transition: all .2s ease-in-out;
}

.button-red-black:hover,
.button-red-black:focus {
  text-decoration: none;
  color: var(--medBlack);
  background-size: 0 0.1em, 100% 0.1em;
  transform: scale(1.1);
}

.button-red-white {
  color: var(--red);
  display: inline-block;
  padding: 5px;
  background: 
    linear-gradient(to right, rgba(237, 28, 36, 1), rgba(237, 28, 36, 1)),
    linear-gradient(to right, rgba(242, 242, 242, 1), rgba(242, 242, 242, 1));
  background-size: 100% 0.1em, 0 0.1em !important;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  transition: all .2s ease-in-out;
}

.button-red-white:hover,
.button-red-white:focus {
  text-decoration: none !important;
  color: var(--white);
  background-size: 0 0.1em, 100% 0.1em !important;
  transform: scale(1.1);
}
/* =========> HEADER <========= */
#header-contact {
  background-color: var(--black)!important;
  transition: all .2s ease-in-out;
}

#header-contact a {
  font-size: 0.8rem;
  color: var(--grey);
  text-transform: uppercase;
  transition: all .2s ease-in-out;
}

#header-contact a:hover {
  color: var(--white);
  text-decoration: underline 1.5px solid var(--white);
}

#header-contact .fa-phone-icons {
  font-size: 1.05rem;
  transition: all .2s ease-in-out;
}

#header-contact .fa-phone-icons:hover {
  transform: scale(1.25);
}

#header-contact .fa-facebook {
  font-size: 1.15rem;
  line-height: 2rem;
  transition: all .2s ease-in-out;
}

#header-contact .fa-facebook:hover {
  transform: scale(1.25);
}

#header-contact .btn {
  color: var(--white);
  border: 2px solid #dc3545;
}
/* =========> NAVIGATION <========= */
.navbar {
  background-color: var(--medBlack)!important;
  text-align:center!important;
}

.navbar ul {
  cursor: pointer;
  text-align: center;
}

.navbar li {
  cursor: pointer;
}

.navbar .collapse a {
  letter-spacing: 0.1em;
  display: inline-block;
  position: relative;
  transition: all .2s ease-in-out;
}

.navbar .collapse ul a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  background: var(--white);
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.navbar .collapse ul a:hover {
  color: var(--white);
  transform: scale(1.05);
}

.navbar .collapse ul a:hover:after { 
  width: 75%; 
}

.navbar .collapse .nav-link {
  font-size: 0.88rem;
  text-transform: uppercase;
  padding-left: 0.95rem !important;
  padding-right: 0.95rem !important;
}

.navactive {
  border-left: var(--red) 3px solid;
  color: var(--white)!important;
}

.navbar .navbar-brand img {
  cursor: pointer;
  height: 60px;
  width: auto;
  transition: all .2s ease-in-out;
}

.navbar .collapse img {
  filter: invert(85%) sepia(8%) saturate(14%) hue-rotate(322deg) brightness(81%) contrast(98%);
}

.navbar .collapse img:hover {
  filter: invert(100%) sepia(88%) saturate(141%) hue-rotate(201deg) brightness(114%) contrast(90%);
}
 
.navbar img:hover {
  transform: scale(1.1);
}

.navItemLeft {
  display:inline;
  padding-right: 5px;
}
.navItemRight {
  display:inline;
}

.dropdown-menu {
  width: auto;
  right: 50%;
  left: 50%;
  -webkit-transform: translate(0%, 0);
  -o-transform: translate(0%, 0);
  transform: translate(0%, 0);
  margin-top: 0;
  background-color: var(--black)!important;
  color: var(--grey) !important;
  text-decoration: none !important;
  text-align:center!important;
}

.dropdown-toggle::after {
  transition: transform 0.15s linear; 
}

.show.dropdown .dropdown-toggle::after {
 transform: translateY(3px);
 width: 50%;
}

.nav-icon {
  display: block;
margin: 0, auto !important;
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .dropdown-menu {
    right: auto;
    left: 25%;
    -webkit-transform: translate(-25%, 0);
    -o-transform: translate(-25%, 0);
    transform: translate(-25%, 0);
    margin-top: 0;
  background-color: var(--black)!important;
  color: var(--grey) !important;
  text-decoration: none !important;
  text-align:center!important;
  }
}

.dropdown-menu a {
  color: var(--grey) !important;
  font-size: 0.88rem;
  text-decoration: none !important;
  margin-bottom: 8px;
}

.dropdown-menu a:hover {
  background: none;
  color: var(--white) !important;
  transform: scale(1.1) !important;
  text-decoration: none !important;
}

/* =========> HERO IMAGE SLIDER <========= */
.carousel-item {
  height: 300px;
}

 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
  .carousel-item {
    height: 350px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .carousel-item {
    height: 400px;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .carousel-item {
    height: 550px;
  }
}

.carousel-indicators li {
  width: 35px!important;
  height: 4px!important;
}

.carousel-indicators .active {
  background-color: var(--red)!important;
}

.carousel-caption {
  left: 0%!important;
  right: 0%!important;
  background-color: rgba(26, 26, 26, 0.8);
  width: 90%;
  margin-bottom: 35px;
}

 /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  .carousel-caption {
    left: 15%!important;
    right: 15%!important;
    width: 500px;
    margin-bottom: 50px;
  }
 }

.carousel-caption-inner {
  border-left: var(--red) solid 3px!important;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  height: 25px!important;
  width: 25px!important;
}

.carousel-image-1 {
  background: url('../img/images/hero-images/Dark features kitchen img 1.jpg');
  background-size: cover;
  background-position: center;
}
.carousel-image-2 {
  background: url('../img/images/hero-images/Interior renovation 3.jpg');
  background-size: cover;
  background-position: center;
}
.carousel-image-3 {
  background: url('../img/images/hero-images/White bathroom with black features img 3.jpg');
  background-size: cover;
  background-position: center;
}
.carousel-image-4 {
  background: url('../img/images/hero-images/White kitchen img 3.jpg');
  background-size: cover;
  background-position: center;
}
.carousel-image-5 {
  background: url('../img/images/hero-images/Woodgrain laundry.jpg');
  background-size: cover;
  background-position: center;
}
.carousel-image-6 {
  background: url('../img/images/hero-images/Interior renovation 2.jpg');
  background-size: cover;
  background-position: center;
}
.carousel-image-7 {
  background: url('../img/images/hero-images/Country house with deck.jpg');
  background-size: cover;
  background-position: center center;
}

.carousel-content-holder {
  content: "";
}

/* =========> ABOUT SECTION <========= */
.about .img-container {
  height: 300px;
  width: 100%;
  overflow: hidden;
}
.about-us .img-container {
  height: 350px;
  width: 100%;
  overflow: hidden;
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .about .img-container {
    height: 475px;
    width: 100%;
    overflow: hidden;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .about-us .img-container {
    height: 800px;
    width: 100%;
    overflow: hidden;
  }
}

.about img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.about-us img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.specialise img {
 width: 50px;
}

/* =========> SERVICES SECTION <========= */
.services .container {
  border-top: 1.5px solid var(--grey);
}

.services h1 {
  margin-top: 40px;
}

.services img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.services .img-container {
  height: 300px;
  width: 100%;
  overflow: hidden;
  margin: 40px 0 40px 0;
  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .services .img-container {
    height: 600px;
    width: 100%;
    overflow: hidden;
    }

    .services h1 {
      margin-top: 0px;
    }
}

.services ul{
  font-weight: 500;
}

.services ul span {
  font-weight: 600;
  color: var(--red);
  margin-right: 10px;
}

/* =========> ICON SECTION <========= */
#services-icons {
  transition: all .2s ease-in-out; 
}

#services-icons img {
  width: 90%;
}

#services-icons button {
  position: relative;
  width: 40px;
  height: 40px;
  border: 3px solid var(--red);
  color: var(--red);
  background-color: transparent !important;
  border-radius: 100%;
}

#services-icons button:hover {
  border: 3px solid var(--white);
  color: var(--white);
  transform: scale(1.15);
}

#services-icons i {
  position: absolute;
  font-size: 1.65rem;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#services-icons h4 {
  font-size: 1.15rem!important;
}

/* =========> CONTACT CALLOUT SECTION <========= */
.hidden {
  display: none;
  visibility: hidden;
}

#contact-callout {
  position: relative;
  height: 235px;
  background-image: url('../img/images/hero-images/Building plans.jpg');
  background-attachment:scroll;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact-callout img {
  width: 100%!important;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #contact-callout {
    height: 275px;
    background-size: cover;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  #contact-callout {
    height: 225px;
  } 
}

#contact-callout .btn {
  border: 2px solid;
  border-color: var(--red);
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
/* =========> OUR PHILOSOPHY SECTION <========= */
#philosophy .img-container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #philosophy .img-container {
    height: 390px;
    width: 100%;
    overflow: hidden;
  }
}

#philosophy img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}
/* =========> GALLERY SECTION <========= */
#gallery .col-md-4 {
  height: 350px;
  overflow: hidden;
  position: relative;
  border: 8px solid var(--white);
  transition: all .3s ease-in-out; 
}

#gallery img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#gallery .col-md-4:hover {
  transform: scale(1.03);
}

#gallery .col-md-4:hover:before  {
  content: "";
  opacity: 1;
  display: flex;
  position: absolute;
  z-index: 3;
  left: 0;
  height: 200%;
  width: 12px;
  background-color: var(--red);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
#gallery .lightbox-img {
  width: 100%;
}

/* =========> GALLERY PAGE <========= */
#gallery h2{
  line-height: 2.1rem;
}

#gallery .gallery_square{
  position:relative;
  overflow:hidden;
  padding-bottom:100%;
}

#gallery .gallery_square img{
  position:absolute;
  z-index: 2;
}

#gallery .img-bounding {
  overflow: hidden;
  position: relative;
  border: 6px solid var(--lightGrey);
  transition: all .3s ease-in-out; 
}

#gallery .blank-bounding {
  overflow: hidden;
  position: relative;
  border: 6px solid var(--lightGrey);
  transition: all .3s ease-in-out; 
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #gallery .img-bounding {
    border: 8px solid var(--lightGrey);
  }

  #gallery .blank-bounding {
    border: 8px solid var(--lightGrey);
  }
}

#gallery .img-bounding:hover:before  {
  content: "";
  display: flex;
  transform: scale(1);
  position: absolute;
  z-index: 3;
  left: 0;
  height: 200%;
  width: 10px;
  background-color: var(--red);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

#gallery .img-bounding:hover {
  transform: scale(1.03);
}

#gallery hr {
  border-top: 2px solid var(--grey);
}

/* =========> TESTIMONIALS SECTION <========= */
#testimonials .fas{
  color: var(--red);
  font-size: 1.5rem!important;
}

.blockquote {
  font-size: 1rem!important;
}

.blockquote-footer {
  color: var(--grey) !important;
}

button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
}
.prev-arrow{
  display: block;
  width: 17px;
  height: 17px;
  left: -40px;
  border: solid rgba(255,255,255,.4);
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.prev-arrow:hover {
  display: block;
  width: 17px;
  height: 17px;
  left: -40px;
  border: solid rgba(255,255,255,.8);
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.prev-arrow, .next-arrow:focus {
  outline: none;
}

.next-arrow{
  display: block;
  width: 17px;
  height: 17px;
  right: -40px;
  border: solid rgba(255,255,255,.4);
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.next-arrow:hover {
  display: block;
  width: 17px;
  height: 17px;
  right: -40px;
  border: solid rgba(255,255,255,.8);
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/* =========> NEWS PAGE <========= */
#blog .img-container {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#blog .img-container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

#blog .newest .img-container {
  height: 250px;
}

#blog .older .img-container {
  height: 175px;
}

#blog i{
  font-size: 1.75rem; 
}

#blog .fa-instagram{
  color: var(--red); 
}

#blog .fa-instagram:hover{
  color: rgb(172, 0, 0); 
}

#blog .btn {
  border-radius: 0px !important;
}

#blog .btn-outline-danger {
  margin-left: 1.25rem;
  color: var(--red);
  border: 1.5px solid var(--red);
}

#blog .btn-outline-danger:hover {
  color: white;
}

#blog .btn-secondary {
  background-color: rgba(199, 199, 199, 1)!important;
  border: none!important;
}

#blog .btn-secondary:hover {
  background-color: var(--grey)!important;
  border: none!important;
}

#blog ul {
  position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: .75rem;
  line-height: 1.25rem;
  transition: all .5s;
}

#blog ul a {
  text-decoration: none;
}

#blog li:hover {
  color: var(--red)!important;
  font-size: 1.1rem;
}

#blog li {
  margin-bottom: 12px;
  color: var(--black);
  cursor: pointer;
}

#blog li:before {
	content: "";
	position: absolute;
	left: 0;
  width: 2px;
  height: 20px;
  background: var(--red);
}

#blog li:hover:before {
  width: 3px;
}

.header-builds, .header-extensions, .header-renovations, .header-bathrooms, .header-kitchens, .header-laundries, .header-living-areas, .header-decks, .header-pergolas {
  display: none;
}

/* =========> FOOTER SECTION <========= */
.main-footer{
  transition: all .2s ease-in-out; 
}

.footer-logos a:hover{
  text-decoration: none!important;
  border-bottom: none;
}

.footer-logos img {
  cursor: pointer;
}

.footer-logos img:hover {
  transform: scale(1.1)!important;
}

.main-footer h4 {
  font-size: 1.25rem!important;
}

.main-footer .list-unstyled span {
  color: var(--grey);
  font-style: italic;
}

.main-footer-links ul{
  font-size: .8rem;
  list-style: none;
  text-decoration: none!important;
  line-height: 1.75rem;
}

.main-footer-links a{
  cursor: pointer;
  list-style: none!important;
  text-decoration: none!important;
  color: var(--grey);
  transition: all .2s ease-in-out; 
}

.footer-nav-active{
  color: var(--white)!important;
}

.main-footer-links a:hover{
  color: var(--white) !important;
  font-size: .825rem;
  border-bottom: 1.5px solid var(--white);
}

.main-footer .list-unstyled img {
  /*=========> Use this website to get the filter https://codepen.io/sosuke/pen/Pjoqqp <=========*/
  filter: invert(100%) sepia(88%) saturate(141%) hue-rotate(201deg) brightness(114%) contrast(90%); 
} 

.copyright {
  font-size: .75rem;
  border-top: var(--grey) solid 1px;
}

#main-footer .copyright a{
  font-size: .8rem;
  color: var(--red)!important;
}

.main-footer .copyright a:hover{
  color: var(--red)!important;
  border-bottom: 1.5px solid var(--red);
  font-size: .8rem;
}

.main-footer-nav ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

/* =========> PROCESS PAGE <========= */
.aboutProcess .img-container {
  height: 475px;
  width: 100%;
}

.aboutProcess .img-container img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

#process .card-header {
  background-color: var(--black)!important;
  padding: 10px !important;
}

#process .card {
  border: solid 2px var(--red)!important;
}

#process i {
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--red);
}

#process a {
  color: var(--white)!important;
}

#process img {
  margin-right: 10px;
  width: 45px;
}

#process .process-img {
  height: 200px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#process .process-img img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

#process ol {
  display: block;
  counter-reset: numList;
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
  column-gap: 0px;
  list-style-position: inside;
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 1200px) {
  #process ol {
    display: block;
    counter-reset: numList;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    column-gap: 40px;
    list-style-position: inside;
  }
}

#process ol li {
  margin-bottom: 8px;
  text-indent: -2em;
  margin-left: 35px;
}

#process ol li:before {
  counter-increment: numList;
  content: counter(numList);
  text-indent: 0px;
  margin-right: 10px;
  width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:var(--black);
  border-radius:50%;
  color:var(--white);
}

/* =========> REVIEW PAGE <========= */
#reviews .fa-quote-left {
  font-size: 2rem;
}

#reviews .fa-star {
  font-size: 1.75rem;
}

#reviews .fa-star-half {
  font-size: 1.75rem;
}

#reviews blockquote {
  font-size: 1.4rem!important;
}

#reviews .card {
  margin: 13px 0 13px 0!important;
}

#reviews .card:hover {
  transform: scale(1.025);
  transition: all .5s ease-in-out;  
}

#reviews .card-columns {
  column-count: 1;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  #reviews .card-columns {
    column-count: 2;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  #reviews .card-columns {
    column-count: 3;
  }
}
/* =========> CONTACT PAGE <========= */
#contact img {
  /*=========> Use this website to get the filter https://codepen.io/sosuke/pen/Pjoqqp <=========*/
  filter: invert(100%) sepia(88%) saturate(141%) hue-rotate(201deg) brightness(114%) contrast(90%); 
} 

#contact a {
  font-size: 1rem;
} 

#contact .btn {
  border: solid var(--red) 2px!important;
  font-weight: 500!important;
  font-size: 1.1rem
} 

#contact span {
  font-style: italic;
  color: var(--grey);
  font-size: .9rem;
}

#message-sent p {
  text-align: center;
}

#message-sent h1 {
  font-size: 2rem;
  font-weight: bold!important;
}

#message-sent p {
  font-size: 1.2rem;
  font-weight: 500;
}

#message-sent img {
  width: 150px;
}

.field-label {
    color:  #fff!important;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  #message-sent img {
    width: 250px;
  }
}

.form-control:focus {
  border-color: solid var(--red) 4px!important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 10px rgba(237, 28, 36, 1)!important;
}

/* =========> LOGIN PAGE <========= */
#login .login-info {
  border-left: none;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  #login .login-info {
    border-left: solid var(--red) 3px;
  }
}

#login .formInputLine #ctl00_ctl00_ctl00_MasterMain_MasterMain_MasterMain_btnLogin {
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: transparent;
  border: 2px solid;
  border-color: var(--red);
  color: #fff;
  padding: 0.375rem 0.75rem;
  margin-top: 15px;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#login .formInputLine #ctl00_ctl00_ctl00_MasterMain_MasterMain_MasterMain_btnLogin:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

#login .forgotPasswordSection a {
  margin-top: 20px;
  text-decoration: none;
  color: var(--white);
  display: inline-block;
  padding: 5px;
  background: linear-gradient(to right, rgba(242, 242, 242, 1), rgba(242, 242, 242, 1)), linear-gradient(to right, rgba(237, 28, 36, 1), rgba(237, 28, 36, 1));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  transition: all .2s ease-in-out;
}

#login .forgotPasswordSection a:hover {
  text-decoration: none;
  color: var(--red);
  background-size: 0 0.1em, 100% 0.1em;
  transform: scale(1.1);
}