@font-face {
    font-family: Monument;
    src: url(MonumentExtended-Regular.woff);
}

@font-face {
    font-family: Monument-Bold;
    src: url(MonumentExtended-Ultrabold.otf);
}


html, body {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    height: 100vh;
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

.appleBtn {
    width: 170px;
}

.androidBtn {
    width: 170px;
}

.carousel__track {
    display: none!important;
}

@-webkit-keyframes breath {
    0%   {  background-size: 110% auto; }
    50%  {  background-size: 140% auto; }
    100% {  background-size: 110% auto; }      
}

.body-Bg {
    background: url('truck_leftBtm.png'); background-size: 650px; background-position: left bottom; background-repeat: no-repeat;
}


h1 {
    font-family: Monument-Bold;
    font-size: 33pt;
}

.btn {
    font-size: 13px;
    font-family: Monument;
}

#svgContainer svg {
    margin-left: 8.5rem;
    width: 30%!important;
}

h3 {
    font-family: Monument-Bold;
    font-size: 20pt;
}

.main {
    padding-top: 3rem;
    margin-left: 10rem;
}

.logo { 
    margin-top: 3rem;
    padding-bottom: 4rem;
    margin-left: 1rem;
}

.content {
    margin-top: 1.65rem;
}

.text-tielbeke {
    color: #231f20!important;
}

.mobileLocation {
    position: relative;
    margin: 0;
    width: 55%;
    text-align: center;
    margin-left: auto;
    margin-top: -26vh;
    height: 40vh;
}


.truckImg {
    /* position: relative; */
    float: right;
    margin-top: 18vh;
    margin-right: 4rem;
    z-index: -1; box-shadow: 20px 20px 0px red;
}


.downloadContent {
    margin-top: 4rem; 
    margin-bottom: 2rem;
}

.downloadBtns {
    margin-top: 2rem;
}

.mockupImg {
    margin-left: -15rem;
    width: 380px;
    margin-top: 5rem;
}


.but {
    width:125px;
    height:20px;
    margin-left:auto;
    margin-right:auto;
    color: white;
    outline: none;
    border: none;
    cursor: pointer;
  }
  #svgContainer {
    height: 100vh;
    margin-top: 0px;
    max-width: 400px;
    margin:auto;
   
  }
  
  #div_but {
    position: relative;
    top: -50px;
    
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    
    text-align:center;
    
  }
  
  .active, .but:hover {
    
    background-color: #555;
    color: white;
    
  }

  .hidden {
      display: none;
  }
  
  


@media only screen and (max-width: 1400px) {
    h1 {
        font-size: 38px!important;
    }

    .downloadContent {
        margin-top: 4rem; 
    }

    .mockupImg {
        width: 250px;
    }   

    .mobileLocation {
        position: relative;
        margin: 0;
        width: 65%!important;
        text-align: center;
        margin-left: auto;
        margin-top: -18vh;
        height: 20vh;
    }

    .content {
        margin-top: 5rem;
        margin-left: 0rem;
    }

    .downloadContent p {
        font-size: 15px;
    }
    
    .logo { 
        margin-top: 4rem!important;
        margin-bottom: 0!important;
        margin-left: 0rem;
    }

    
    .main {
        margin-left: 0!important;
    }

  }

  @media only screen and (max-width: 800px) {
    h1 {
        font-size: 38px!important;
    }

    .downloadContent {
        margin-top: 4rem; 
    }

    .mockupImg {
        width: 250px;
    }   

    .mobileLocation {
        position: relative;
        margin: 0;
        width: 65%!important;
        text-align: center;
        border-radius: 20px;
        margin-left: auto;
        margin-top: 5vh;
        height: 20vh;
    }

  }

@media only screen and (max-width: 600px)
and (max-device-width: 485px) {

    .main {
        margin-left: auto;
        margin-right: auto;
        padding-top: 0rem;
    }

    body {
        background: #fafafa!important;
    }
    
    .mobileLocation {
        text-align: center;
        position: relative;
        border-radius: 20px;
        margin-right: auto!important;
        margin-top: 2vh;
        height: 0vh!important;
    }

    .mockupImg {
        width: 220px;
        margin-top: 0rem!important;
        margin-left: 0!important;
    }

    .content {
        margin-top: 3vh;
        margin-bottom: 1.5rem;
        margin-left: 0rem!important;
    }
    .content h1 {
        font-size: 20px!important;
    }

    .content h3 {
        font-size: 15px!important;
    }

    .downloadContent {
        margin-top: 2rem!important;
        max-width: 100%!important;
    }
    .truckImg {
        position: relative!important;
        margin-top: 2rem!important;
        float: left!important;
        z-index: -1; box-shadow: 15px 15px 0px red!important;
        margin-bottom: 3rem!important;
    }
    .truckImg img {
        margin-left: 1rem!important;
        width: 300px!important;
    }

    .logo {
        margin-top: 1.5rem!important;
        margin-left: 1rem!important;
        margin-bottom: -2rem!important;
    }

    .appleBtn {
        width: 140px!important;
    }
    
    .androidBtn {
        float: right;
        width: 140px!important;
    }    
  }


  /* Portrait and Landscape */
@media only screen 
and (max-device-width: 320px) 
and (-webkit-min-device-pixel-ratio: 2) {

    html, body {
        height: 115vh;
    }

    .truckImg img {
        width: 200px!important;
    }
    .truckImg {
        margin-top: 0;
        bottom: 3rem!important;
    }
    .logo { 
        margin-top: 1rem;
        margin-left: auto!important;
        margin-right: auto!important;
    }

    .appleBtn {
        width: 120px!important;
    }
    
    .androidBtn {
        float: right;
        width: 120px!important;
    }  
    

}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

    body {
        background: none!important;
    }
    
    .mobileLocation {
        position: relative;
        margin: 0;
        width: 30%!important;
        border-radius: 0px!important;
        text-align: center;
        margin-left: auto;
        height: 20vh;
    }
    .content {
        margin-top: 3vh; 
        margin-left: 0rem!important;
    }
     h1 {
        font-size: 28px!important;
    }

    .downloadContent {
        max-width: 90%;
    }
    .truckImg {
        position: relative;
        margin-top: 0rem;
        float: left;
        margin-left: 1rem;
        bottom: 1.5rem;
        z-index: -1; box-shadow: 20px 20px 0px red;
    }
    .truckImg img {
        width: 580px;
    }

    .appleBtn {
        width: 120px!important;
    }
    
    .androidBtn {
        float: right;
        width: 120px!important;
    }  

    .main {
        padding-top: 0!important;
        margin-left: 2rem;
    }

}