body {
  margin-top:  115px;
}
:root {
  --dark-dark: #292e33;
}

.bg-white {
  background-color:  white;
}

.bg-dark-dark {
  background-color:  var(--dark-dark);
}

.social a {
  color:  var(--dark);
  font-size:  18px;
}
  .social a:hover {
    color:  var(--gray);
  }

.navbar-expand-md .navbar-collapse {
  justify-content: center;
}

.ml-auto {
  margin-left: 0 !important;
}

/*-----------------
--Carousel
-------------------*/
.carousel {
  height: 400px;
  overflow: hidden;
}
.carousel-inner .img-fluid {
  max-width: initial;
}
  .swiper-img img {
    width:  100% !important;
    height:  auto !important;
  }
.carousel-caption {
  bottom: auto;
  top: 45%;
  position: absolute;
  background: rgba(0,0,0,0.3);
  padding: 20px;
  border-radius: 50px;
}
.carousel h3 {
  font-size: 2rem;
  text-shadow: 0px 0px 6px black;
}

.car-overlay {
  position: absolute;
  top: 145px;
  bottom: 300px;
  left: 78px;
  transform: translateX(0);
  width:30%;
  z-index: 10;
}
  .car-overlay img {
    width:250px;
  }
@media only screen and (max-width: 768px) {
  .car-overlay {
    top: 250px;
    left: 50%;
    right: 0;
    width:40%;
    transform: translateX(-50%);
  }
  .car-overlay img {
    width:250px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .swiper-img img {
    width:  auto !important;
    height: 500px !important;
    position:  relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 350px) {
  /*.car-overlay {
    top: 250px;
    left: 0;
    right: 0;
    width:100%;
  }*/
  .car-overlay img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
/*------------------
--Jumbotron
-------------------*/
.jumbotron {
  background-image: url('/site/bg_header.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0px;
  padding: 3rem 2rem;
}
  .jumbotron h3 {
    color: var(--light);
  }

  .jumbotron img {
    width:350px;
  }

@media only screen and (max-width: 768px) {
  .jumbotron img {
    margin-top:40px;
    width:250px;
  }
}
/*------------------
--Polygon Sections
--------------------*/

.poly-1 {
  position: absolute;
  background-color: #bd0c2f; 
  height: 27rem;
  width: 100%;
  -webkit-clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 90%);
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 90%);
        overflow: hidden;
}

.poly-2 {
  position: relative;
  background-color: var(--dark); 
  width: 100%;
  height: 25rem;
  -webkit-clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
        overflow: hidden;
}

.poly-3 {
  position: absolute;
  background-color: #bd0c2f; 
  height: 28rem;
  width: 100%;
  -webkit-clip-path: polygon(0 30%, 100% 0, 100% 90%, 0 100%);
  clip-path: polygon(0 30%, 100% 0, 100% 90%, 0 100%);
        overflow: hidden;
}

.poly-4 {
  position: relative;
  background-color: var(--dark); 
  width: 100%;
  height: 30rem;
  -webkit-clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
        overflow: hidden;
}
.poly-text {
  margin-top: 150px;
}

.poly-text-2 {
  margin-top: 150px;
}

.poly-img {

}
@media only screen and (max-width: 855px) {
  .poly-2 {
    height: auto;
  }
  .poly-4 {
    height: auto;
  }
}
@media only screen and (max-width: 768px) {
  .poly-1 {
    -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
  }
  .poly-2 {
    height: auto;
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }
  .poly-3 {
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  }
  .poly-4 {
    height: auto;
    -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  }
  .poly-text {
    margin-top: 150px;
  }
  .poly-text-2 {
    margin-top: 150px;
  }
  .poly-img {
    margin-top: 50px;
  }

  
}

/*---------------------
--footer
----------------------*/
.list-group a {
  color:  var(--light);
}
  .list-group a:hover {
    color:  var(--gray);
  }