@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

/*-- Prevent Horizontal Scrolling & Font Style --*/
html, body {
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    color: rgb(255, 255, 255);
}

/*-- Remove Blue Browser Outline Around Buttons in Chrome --*/
a:focus,
button:focus {
  outline: 0 !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}

/*===== Background Colors =====*/
.white-background {
  background-color: rgb(255, 255, 255);
}

.red-background {
    background-color: rgb(194, 18, 31);
}

.gray-background {
  background-color: rgb(195, 195, 195);
}

.black-background {
    background-color: rgb(45, 45, 45);
}

/*===== Home =====*/
.home-wrapper {
  background: url('../img/home-bg.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  min-height: 100vh;
}

.home {
  background: rgba(45, 45, 45, 0.45);
}

/*===== Brands =====*/
.brand-wrapper {
    min-height: 70vh;
}

.brand {
    height: 40vh;
    min-height: 200px;
}

.tagline-wrapper {
    min-height: 30vh;
}

.brand-small-wrapper {
    min-height: 30vh;
}

.brand-small {
    height: 20vh;
    min-height: 100px;
}

.brand-xsmall {
    height: 60px;
}

/*-- Bouncing Down Arrow --*/
.bouncing-down-arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
}
#bouncing-down-arrow {
  opacity: 0.6;
}
#bouncing-down-arrow:hover {
  opacity: 1.0;
}

/*===== Contact =====*/
.contact-wrapper {
  background: url('../img/contact-bg.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  min-height: 100vh;
}

.contact {
  background: rgba(45, 45, 45, 0.45);
  min-height: 100vh;
}

.contact-row-1 {
  min-height: 95vh;
}

.contact-row-2 {
  min-height: 5vh;
}

/*-- Contact Form --*/
.form-control {
  background-color: rgba(45, 45, 45, 0.55);
  border: .10rem solid rgb(255, 255, 255);
  color: rgb(255, 255, 255)!important;
  font-size: 1.1rem;
}

.form-control:focus {
  background: rgba(45, 45, 45, 0.85);
  border: .10rem solid rgb(195, 195, 195);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgb(255, 255, 255)!important;
}

input.btn {
  cursor: pointer;
}

.controls input:focus,
.controls textarea:focus { /*-- Remove Element Outlines in Contact Form --*/
  outline: 0 !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}