/*GLOBAL STYLES*/
body {
    margin:0px;
    padding:0px;
    font-family: 'Oswald', sans-serif;
    background-color:#fefefe;
  }
  button {
      cursor:pointer;
  }
  #applyButton {
      cursor:pointer;
  }
  #submit {
      cursor:pointer;
  }
  #container {
    margin-top:4rem;
    background-size: cover;
  }
  #footer {
  width: 100%;
  height: 275px;
  bottom: 0px;
  background-color: #880f0a;
  padding-bottom: 1rem;
  padding-top: 1rem;
}
#footer div {
  display: inline-block;
  color: white;
  margin: 0rem;
}
#footerText div {
  margin: 0.3rem;
}
#footer i {
  color: white;
  font-size: 2rem;
  margin: 0.3rem;
}
#footer #icons {
  display: block;
  margin-left: 0rem;
  text-align: center;
}
#footerText {
  margin: auto;
  width: 100%;
  text-align: center;
}
#footer img {
  display: block;
  margin: auto;
}
  #pageContent {
    padding:1rem;
    max-width: 800px;
    margin: auto;
    font-size: 1.3rem;
  }
  #headerPic img {
  height: 50rem;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

#overlay {
  position: absolute;
  left: 0;
  top: 5rem;
  width: 100%;
  height: 50rem;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
}
#overlay p {
  color: white;
  font-size: 5rem;
  padding: 23rem;
  margin: 0rem;
  line-height: 5rem;
}

.describe {
  font-size: 2rem;
  padding: 0rem;
}

  #drivers {
    width:100%;
    margin-bottom:1rem;
    cursor: pointer;
  }
  #drivers h3 {
    background-color: #880f0a;
    color:white;
    text-align: center;
    margin:0px;
    padding:0px;
    padding-bottom:1rem;
    font-size:1.3rem;
  }
  #drivers #imgJobs {
    width:100%;
    box-sizing:border-box;
    border: 2px solid #880f0a;
  }
  #drivers h3 span {
    font-size: 2rem;
  }
  #bannerHome {
    text-align: center;
    background-color: #880f0a;
    padding:1rem;
  }
  #bannerHome #iconText {
    display:inline-block;
    text-align: center;
  }
  #bannerHome #iconText p {
    color:white;
    font-size: 1.3rem;
  }
  #bannerHome #iconText i {
    color:#880f0a;
    background-color: white;
    font-size: 4rem;
    width:120px;
    height:120px;
    border-radius:120px;
    line-height: 120px;
    margin-right:4rem;
    margin-left:4rem;
  }
 #bannerP {
    display:inline-block;
    max-width:400px;
    transform: translateY(-11px);
  }
  #bannerBBB {
    width:250px;
    padding:1rem;
    display:inline-block;
  }
  #bannerBBB img {
    width:100%;
  }
  #jraylMap {
    max-width:800px;
    min-width:250px;
    width:100%;
  }
  #applyButton {
    background-color:#880f0a;
    border:none;
    padding:1rem;
    width:100%;
    color:White;
    font-size:1.2rem;
    font-family: 'Oswald', sans-serif;
  }
    #jrayl2290 {
      max-width:600px;
      display:block;
      margin-left:auto;
      margin-right:auto;
  }
  
    @media only screen and (max-width: 717px) {
    #bannerP {
      transform: translateY(0px);
    }
  }

  /*MOBILE STYLES*/
  @media only screen and (max-width: 1279px) {
    #overlay {
      top:4rem;
    }
    #navbar {
        width:100%;
        position:fixed;
        height:4rem;
        background-color:#111111;
        top:0px;
        z-index: 99;
      }
      #menuIcon {
        float:right;
        padding:.5rem;
        z-index: 99;
        position:fixed;
        top:.5rem;
        right:.5rem;
      }
      #bar1, #bar2, #bar3 {
        background-color: white;
        width:2rem;
        height:.3rem;
        margin:.3rem;
        transition: .2s;
      }
      #navbarDesktop {
        display:none;
      }
      #logoMobile {
        text-align:center;
        padding:.25rem;
        margin:0px;
      }
      #logo {
        height:3.5rem;
      }
      #menu {
        width:100%;
        height:0vh;
        background-color:#111111;
        right:0px;
        position:fixed;
        top:4rem;
        overflow:hidden;
        transition:.2s;
        z-index: 99;
      }
      #menu ul {
        padding:0px;
        margin:0px;
        width:100%;
        text-align:center;
      }
      #menu #menu-buttons {
        background-color:#880f0a;
        color:white;
        box-sizing: border-box;
        padding:.5rem;
        margin-top:.5rem;
      }
      #menu #menu-buttons a:active {
        background-color:darkgoldenrod;
      }
      #menu li {
        font-size: 1.5rem;
        width:80%;
        list-style: none;
        text-align:center;
        margin:auto;
        border-radius:8px;
      }
      #menu ul li a {
        display:block;
        color:white;
        text-decoration: none;
        width:100%;
        padding-bottom:.1rem;
        padding-top:.1rem;
      }
      #menu ul li a:active {
        background-color:#212121;
      }
  #quickLinksDrivers {
    display:block;
    background-color:#880f0a;
    width:100%;
    color:white;
    text-align: center;
    padding-bottom:1rem;
  }
  #quickLinksDrivers a {
    color:white;
    display: block;
  }
  #quickLinksDrivers h4 {
    padding:1rem;
    margin:0px;
  }
  #headerVid {
      display:none;
  }
  #headerPicHome video {
    height:15rem;
    object-fit: cover;
    object-position: center;
    width:100%;
  }
  #overlay p {
    font-size:3rem;
  }
  #mobile-referral-png {
      display:block;
  }
  #desktop-referral-png {
      display:none;
  }
  }

  /*EXTEND MENU SIZE AT BIGGER RESOLUTION*/
  @media only screen and (min-height: 680px) {
    #menu ul li a {
      padding-top:.5rem;
      padding-bottom:.5rem;
    }
  }

  /*RESPONSIVE OVERLAY TEXT*/
  @media only screen and (max-width:650px) {
    #overlay p {
      font-size: 1.7rem;
      line-height:15rem;
      margin:0px;
      padding:0px;
    }
  }
  /*DESKTOP STYLES*/
  @media only screen and (min-width: 1280px) {

    #menuDesktop ul {
        position:absolute;
        margin:0px;
        padding-left:9rem;
      }
    #menu {
        display:none;
    }
    #navbar {
        display:none;
    }
    #navbarDesktop {
        display:block;
        width:100%;
        height:5rem;
        background-color:whitesmoke;
        position:fixed;
        top:0px;
        z-index: 99;
        font-size: 1rem;
    }
    #navbarDesktop li {
        font-size: 1rem;
        text-transform: uppercase;
        display:inline-block;
        line-height:5rem;
    }
    #menuDesktop ul li #applyNow:hover, #menuDesktop ul li #callNow:hover, #popupApplyNonDrivers:hover, #popupApplyDrivers:hover {
        background-color:black;
    }
    #navbarDesktop li a:hover {
        background-color:rgb(230, 230, 230);
        border-bottom:#880f0a solid 4px;
    }
    #menuDesktop li img {
      height:3rem;
    }
    #desktopLogo {
      position:absolute;
      cursor: pointer;
      z-index:100;
      left:0px;
      padding-right:1rem;
      height:80px;
    }
 
    #desktopLogo a img {
      height:50px;
      padding-top:15px;

    }
    #menuDesktop a {
        color:black;
        text-decoration: none;
    }
    #callNow, #applyNow {
        background-color:#880f0a;
        color:white;
        text-decoration: none;
        padding-bottom:.4rem;
        padding-top:.2rem;
        margin-right:1rem;
    }
    
  #headerVid video {
      width:100%;
      object-fit:cover;
      object-position:contain;
  }
  #headerVid {
      position:relative;
  }
  #headerPicHome {
      display:none;
  }
  #quickLinksDrivers {
    display:none;
  }
  #container {
    margin-top:5rem;
  }
  #overlay {
    text-align: center;
  }

  #driverDrop:hover > #dropDown {
    display:block;
  }
  #dropDown li a {
    margin:0px;
    padding:0px;
    padding-left:1rem;
    padding-top:1rem;
    padding-bottom:1rem;
    display:block;
    width:100%;
  }
  #dropDown li {
    width:100%;
    padding:0px;
    margin:0px;
    line-height:1rem;
  }
  #navbar {
    display:none;
  }
  #menu {
    display:none;
  }
  #headerVid #headerVidText {
      position:absolute;
      top:0rem; right:0; left:0; bottom:.3rem;
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      font-size:3rem;
      text-shadow:2px 2px 12px black;
      background-color: rgba(0,0,0,.6);
  }
    #iconsNav {
    width:auto;
    float:right;
    line-height:5rem;
  }
  #iconsNav i {
    box-sizing:border-box;
    width:16%;
    font-size:1.4rem;
    padding:.1rem;
    color:#880f0a;

  }
  #iconsNav a {
      padding:2px;
  }
  #iconsNav a:nth-child(6) {
      display:none;
  }
  #iconsNav i:hover {
    color:black;
  }
  #menuDesktop {
    text-align: center;
    display:inline-block;
    position: relative;
    width: 1280px;
    left:50%;
    transform: translateX(-50%);
  }
  #navbarDesktop li a {
    padding:.6rem;
}
#dropDown {
  display:none;
  position:absolute;
  background-color:whitesmoke;
  text-align: left;
  left:16rem;
  top:5rem;
  padding:0px;
  width:240px;
  line-height:1rem;
  padding-right:1rem;
  margin-left:0px;
  padding-left:0px;
}
#navbarDesktop #menuDesktop ul #driverDrop ul li a {
  padding-left:1rem;
  padding-top:1rem;
  padding-bottom:1rem;
  padding-right:0px;
}
#navbarDesktop #menuDesktop ul #driverDrop ul li a:hover {
  border-left: solid 4px #880f0a;
  border-bottom:none;
}
  #mobile-referral-png {
      display:none;
  }
  #desktop-referral-png {
      display:block;
  }
  #containerVidHome {
      padding-top:1rem;
  }

  }
  
  /* Styles for popup */

.popup-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 500;
}

.popup-content {
  width: 500px;
  height: 300px;
  background-color: white;
  border-radius: 6px;
  border-color: black;
  position: relative;
}

#popupApplyNonDrivers {
  background-color:#880f0a;
  text-decoration: none;
  font-size: 20px;
  width: 60%;
  top: 74%; 
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 15px 8px;
  border-radius: 8px;
  text-align: center;
  position: absolute;
}

#popupApplyDrivers {
  background-color:#880f0a;
  text-decoration: none;
  font-size: 20px;
  width: 60%;
  top: 45%; 
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 15px 8px;
  border-radius: 8px;
  text-align: center;
  position: absolute;
}

.close-popup {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 68px;
  float: right;
  cursor: pointer;
  transform: rotate(45deg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#applyNowText{
  padding-top: 20px;
  font-size: 35px;
  width: 50%;
  margin: auto;
  text-align: center;
}
.btn {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: bold;
  background: #880f0a;
  width: 160px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.btn:hover,
.btn:focus,
.btn:active {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.copy {
  text-align: center;
  color: #fff;
}