/* carousel global styles */

.carrousel__container {
    height: 660px; 
    max-width: 100%;
    
    padding-left: 0px;
    white-space: nowrap;
    background-color: transparent;
    overflow: hidden;
  }
  
  .carrousel__content[aria-hidden=true] {
    display: none;
  }
  
  /* exemple styles */
  .news-carrousel__control__list,
  .images-carrousel__control__list {
    position: absolute;
    list-style-type: none;
    top: 100%;
    right: 0;
    left: 0;
    padding-left: 0;
    text-align: center;
  }
  .news-carrousel__control__list__item,
  .images-carrousel__control__list__item {
    display: inline-block;
    margin: 0 .5em;
  }
  .news-carrousel__control__list__link,
  .images-carrousel__control__list__link {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: #fff;
    border: 1px solid #666;
    border-radius: 1em;
  }
  
  .news-carrousel__button-container,
  .images-carrousel__button-container {
    position: absolute;
  
  }
  .news-carrousel__button__previous,
  .images-carrousel__button__previous {
    top: 50%;
    margin-top: -18px;
    left: 0;
  /*   margin-left: -35px; */
    background-color: transparent;
  }
  .news-carrousel__button__next,
  .images-carrousel__button__next {
    top: 50%;
    margin-top: -18px;
    right: 0;
  /*   margin-right: -35px; */
    background-color: transparent;
  }
  .news-carrousel__button__button,
  .images-carrousel__button__button {
    padding: 0;
    background: transparent;

    background-color: transparent;
  }
  
  
  
  
  
  
  /* transition slide */
  .slide .carrousel__content {
    display: inline-block;
    vertical-align: top;
    visibility: visible;
    height: 540px;
    width: 100%;
    position: relative;
    -webkit-transition: left .5s ease-in;
    -moz-transition: left .5s ease-in;
    -o-transition: left .5s ease-in;
    -ms-transition: left .5s ease-in;
    transition: left .5s ease-in;
  }
  
  .slide .carrousel__content.visibility-off {
    visibility: hidden;
  }
  
  
  .carrouselslide-1-1.slide > div,
.carrouselslide-2-1.slide > div,
.carrouselslide-3-1.slide > div,
.carrouselslide-4-1.slide > div,
.carrouselslide-5-1.slide > div{
  left: 0;
}
.carrouselslide-1-2.slide > div,
.carrouselslide-2-2.slide > div,
.carrouselslide-3-2.slide > div,
.carrouselslide-4-2.slide > div,
.carrouselslide-5-2.slide > div,
.carrouselslide-6-2.slide > div,
.carrouselslide-7-2.slide > div,
.carrouselslide-8-2.slide > div{
  left: -100%;
}
.carrouselslide-1-3.slide > div,
.carrouselslide-2-3.slide > div,
.carrouselslide-3-3.slide > div,
.carrouselslide-4-3.slide > div,
.carrouselslide-5-3.slide > div 
.carrouselslide-6-3.slide > div,
.carrouselslide-7-3.slide > div,
.carrouselslide-8-3.slide > div{
  left: -200%;
}
.carrouselslide-1-4.slide > div,
.carrouselslide-2-4.slide > div,
.carrouselslide-3-4.slide > div,
.carrouselslide-4-4.slide > div,
.carrouselslide-5-4.slide > div,
.carrouselslide-6-4.slide > div,
.carrouselslide-7-4.slide > div,
.carrouselslide-8-4.slide > div{
  left: -300%;
}
.carrouselslide-1-5.slide > div,
.carrouselslide-2-5.slide > div,
.carrouselslide-3-5.slide > div,
.carrouselslide-4-5.slide > div,
.carrouselslide-5-5.slide > div,
.carrouselslide-6-5.slide > div,
.carrouselslide-7-5.slide > div,
.carrouselslide-8-5.slide > div{
  left: -400%;
}

.carrouselslide-1-6.slide > div,
.carrouselslide-2-6.slide > div,
.carrouselslide-3-6.slide > div,
.carrouselslide-4-6.slide > div,
.carrouselslide-5-6.slide > div,
.carrouselslide-6-6.slide > div,
.carrouselslide-7-6.slide > div,
.carrouselslide-8-6.slide > div{
  left: -500%;
}
.carrouselslide-1-7.slide > div,
.carrouselslide-2-7.slide > div,
.carrouselslide-3-7.slide > div,
.carrouselslide-4-7.slide > div,
.carrouselslide-5-7.slide > div,
.carrouselslide-6-7.slide > div,
.carrouselslide-7-7.slide > div,
.carrouselslide-8-7.slide > div{
  left: -600%;
}
.carrouselslide-1-8.slide > div,
.carrouselslide-2-8.slide > div,
.carrouselslide-3-8.slide > div,
.carrouselslide-4-8.slide > div,
.carrouselslide-5-8.slide > div,
.carrouselslide-6-8.slide > div,
.carrouselslide-7-8.slide > div,
.carrouselslide-8-8.slide > div{
  left: -700%;
}
  
  .slide .carrousel__content[aria-hidden=true] {
    display: inline-block;
  }
  
  /* transition fade */
  .fade .carrousel__content {
    -webkit-animation: fadein 1s;
    -moz-animation:    fadein 1s;
    -o-animation:      fadein 1s;
    -ms-animation:     fadein 1s;
    animation:         fadein 1s;
  }
  .fade .carrousel__content[aria-hidden=true] {
    -webkit-animation: fadeout 1s;
    -moz-animation:    fadeout 1s;
    -o-animation:      fadeout 1s;
    -ms-animation:     fadeout 1s;
    animation:         fadeout 1s;
  }
  
  @-webkit-keyframes fadeout {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes fadeout {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-o-keyframes fadeout {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-ms-keyframes fadeout {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fadeout {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }
  
  @-webkit-keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-o-keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-ms-keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  
  
  
  /* carrousel */
  .news-carrousel__control__list__link:focus,
  .news-carrousel__control__list__link:hover,
  .news-carrousel__control__list__link:active,
  .news-carrousel__control__list__link[aria-selected=true],
  .images-carrousel__control__list__link:focus,
  .images-carrousel__control__list__link:hover,
  .images-carrousel__control__list__link:active,
  .images-carrousel__control__list__link[aria-selected=true] {
    background: #666;
  }

.btn-arrow{
  width: 70px;
  height: 70px;
  z-index: 999999999999999999999;
}

/* my customs */
.banner-slide{
  width: 480px; 
  margin: 0px calc( ( 100% - 480px ) / 2 );
}

@media(max-width: 860px){
  .banner-slide{
    width: 360px; 
    margin: 0px calc( ( 100% - 360px ) / 2 );
  }
  .carrousel__container{
    height: 500px;
  }
}