.carousel-fade .carousel-inner .item {
    transition-property: opacity;
  }
  .carousel-fade .carousel-inner .item,
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
    opacity: 0;
  }
  .carousel-fade .carousel-inner .active,
  .carousel-fade .carousel-inner .next.left,
  .carousel-fade .carousel-inner .prev.right {
    opacity: 1;
  }
  .carousel-fade .carousel-inner .next,
  .carousel-fade .carousel-inner .prev,
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-control {
    z-index: 2;
}
 

.btn2 {
    display: inline-block;
    position: relative;
    padding: 0 60px;
    line-height: 46px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid seagreen;
    text-transform: uppercase;
    font-weight: 500;
    color: #fc0808; 
    cursor: pointer;
    text-transform: capitalize;
    -webkit-clip-path: polygon(15% 0%, 100% 0, 85% 100%, 0% 100%);
    clip-path: polygon(15% 0%, 100% 0, 85% 100%, 0% 100%);
    margin-left: -27px;
}
.carousel-caption {
   color:rgb(12, 26, 150);


}

.btn2:hover{
    background: rgb(46, 139, 87,0.4);
    color: #FFFFFF;
    text-decoration: none;
}
.btn2:before {
    content: '';
    position: absolute;
    left: 11px;
    top: -5px;
    bottom: -5px;
    width: 2px;
    transform: rotate(27.8deg);
    background: seagreen;
}
.btn2:after {
    content: '';
    position: absolute;
    right: 11px;
    top: -5px;
    bottom: -5px;
    width: 2px;
    transform: rotate(27deg);
    background: seagreen;
}

.green-border{
  border: solid 2px seagreen;
}

@media only screen and (min-width:768px){

    .banner-principal .carousel-inner .item{
      background-color: black;
      min-height: 560px;
      background-size: cover !important;
    
     
    }
    .banner-principal  .carousel-inner2 .item2{
      background-color: black;
      min-height: 470px;
      background-size: cover !important;
    
     
    }
    
}

@media only screen and (max-width: 767px){

    .banner-principal .carousel-inner .item{
      background-color: black;
      min-height: 400px;
      background-size: cover !important;
    }

    .banner-principal .carousel-inner2 .item2{
      background-color: black;
      min-height: 370px;
      background-size: cover !important;
    
     
    }



}

@media only screen and (min-width:1280px){
  .banner-principal .carousel-inner .item {
    background-color: black;
    min-height: 550px;
 
    background-size: cover !important;
   margin-left: 5px;
   color:darkblue;
  }

  .banner-principal .carousel-inner2 .item2{
    background-color: black;
    min-height: 600px;
    background-size: cover !important;
  
   
  }
}

@media only screen and (min-width:1500px){
    .banner-principal .carousel-inner .item {
      background-color: black;
      min-height: 700px;
      background-size: cover !important;
      /* height: 100vh; */
    }

    .banner-principal .carousel-inner2 .item2{
      background-color: black;
      min-height: 600px;
      background-size: cover !important;
    
     
    }
}