figure.card h2 , figure.card p  {
    color: white;
}

.news {
    padding-bottom: 2em;
}

#thebody {
    margin: 3rem;
    margin-top: 0;
    margin-bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: auto;
    background-color: #000;
  }
  
  #wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
  }
  
  #carousel {
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  
  #carousel::-webkit-scrollbar {
    height: 0;
  }
  
  #prev,
  #next {
    display: flex;
    justify-content: center;
    align-content: center;
    background: white;
    border: none;
    padding: 8px;
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
    position: absolute;
  }
  
  #prev {
    top: 50%;
    left: 0;
    transform: translate(50%, -50%);
    
  }
  
  #next {
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
  }
  
  #content {
    display: grid;
    grid-gap: 16px;
    grid-auto-flow: column;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    
    box-sizing: border-box;
  }
  
  .item {
    /*width: 360px;
    height: 180px; */
    height: 100%;
    background: green;
  }
  
  /* Second carousel */

  /* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
    overflow: hidden;
    width: 90%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: stretch;
  }
  
  /* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
  .carousel-wrapper * {
    box-sizing: border-box;
    
  }
  
  /* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
  .carousel2 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    
  }

  .incar{
    display: flex;
    flex-direction: column;
  }
  
  /* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
  .carousel__photo {
    
    opacity: 0;
    position: absolute;
    top:0;
    width: 100%;
    margin: auto;
    padding: 1rem 4rem;
    z-index: 100;
    transition: transform .5s, opacity .5s, z-index .5s;
  }
  
  /* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
  .carousel__photo.initial,
  .carousel__photo.active {
    flex: 1;
    max-inline-size: 100%;
    opacity: 1;
    position: relative;
    z-index: 900;
  }
  
  /* Set 'z-index' to sit behind our '.active' item. */
  .carousel__photo.prev,
  .carousel__photo.next {
    z-index: 800;
  }
  
  /* Translate previous item to the left */
  .carousel__photo.prev {
    transform: translateX(-100%);
  }
  
  /* Translate next item to the right */
  .carousel__photo.next {
    transform: translateX(100%);
  }
  
  /* Style navigation buttons to sit in the middle, either side of the carousel. */
  .carousel__button--prev,
  .carousel__button--next {
    position: absolute;
    top:50%;
    width: 3rem;
    height: 3rem;
    background-color: #FFF;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer; 
    z-index: 1001; /* Sit on top of everything */
    border:1px solid black;
  /*  opacity: 0;  Hide buttons until carousel is initialised 
    transition:opacity 1s;*/
  }
  
  .carousel__button--prev {
    left:0;
  }
  
  .carousel__button--next {
    right:0;
  }
  
  /* Use pseudo elements to insert arrows inside of navigation buttons */
  .carousel__button--prev::after,
  .carousel__button--next::after {
    content: " ";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 54%;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: translate(-50%, -50%) rotate(135deg);
  }
  
  .carousel__button--next::after {
    left: 47%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  figure {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  figure img {
    flex: 1;
    object-fit: cover;
    max-inline-size: 100%;
  }

  .innerwrapper {
    width: 95%;
    height: 95%;
    position: relative;
    
    margin: auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .pict{
    display: flex;
    flex-direction: column;
  }

  .thepic {
    flex: 1;
    max-inline-size: 100%;
  }



.second{
    display: none;
}

.third {
    display: none;
}

.innerwrapper2{
    width: 95%;
    height: 70vh;
    margin: auto;
    /*max-height: 75vh; */
    
}

/*.pict2 {
    /*margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center; */
  /*  width: 100%;
    height: 100%;
    
}*/

.thepic3{
    width: 100%;
    max-width: unset;
}

figure.card {
    max-width: unset;
    min-height: unset;
    height: 100%;
    width: 100%;
}

.innerwrapper img{
    /*flex: 1;
    max-inline-size: 100%;
    object-fit: cover;
    width: 100%;*/
    max-inline-size: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*/// Cardstack   ///*/

  .cardstackinner {
    margin: auto;
  }

  .stackcontainer {
    width: 100%;
    /*max-height: 40vh;*/
    position: relative;
    margin-bottom: 6em;
  }

  .stack {
    
    max-width: 43%;
    margin-left: 0;
    height: 400px;
    width: 40vw;
    display: flex;
    overflow: hidden;
  
    
}

.stackleft {
    
    /*max-width: 43%; */
    margin-left: auto;
    height: 300px;
    width: 75vw;
    display: flex;
    overflow: hidden;
    
}

.stackright {
    
    /*max-width: 43%; */
    margin-left: auto;
    height: 450px;
    width: 45vw;
    display: flex;
    overflow: hidden;
    
}

  .stack img , .stackleft img , .stackright img {
    flex: 1;
    max-inline-size: 100%;
    object-fit: cover;
    /*max-width: 100%;
    max-height: 100%; */
    transition: 1.1s;
  }

  .stack:hover img , .stackleft:hover img , .stackright:hover img{
    transition: 0.75s transform;
    /*scale: 1.1; */
    transform: scale(1.25); 
    /*zoom: 1.5; */
    /*z-index: 0; */
  }

  .stacklabel {
    background-color: white;
    width: 60%;
    max-width: 875px;
    height: 80%;
    display: flex;
    flex-direction: column;
    margin-left: 15%;
    overflow: visible;
    border-radius: 3px;
    border: #444 1px solid;

    position: absolute;
    top: 11%;
    left: 22%;
    /*text-align: center; */

    box-shadow: 2px 2px 24px 0px #908989 ;
    z-index: 1;
  }

  .slabelunified ul {
    line-height: 1.25em;
    font-size: 1.25em;
  }

  .stacklabelleft {
    background-color: white;
    width: 45%;
    height: 85%;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    /*margin-left: 15%; */
    overflow: visible;
    border-radius: 3px;
    border: #444 1px solid;

    position: absolute;
    top: 7%;
    /*left: -10%; */
    /*text-align: center; */

    box-shadow: 2px 2px 24px 0px #908989;
    z-index: 1;
  }

  .stacklabelright {
    background-color: white;
    width: 55%;
    height: 75%;
    display: flex;
    flex-direction: column;
    margin-left: 2%; 
    overflow: visible;
    border-radius: 3px;
    border: #444 1px solid;

    position: absolute;
    top: 11%;
    
    /*text-align: center; */

    box-shadow: 2px 2px 24px 0px #908989;
    z-index: 1;
  }

  .stacklabel h2 , .stacklabelright h2 {
    font-weight: 400;
    margin-left: 2em;
    font-size: 1.75em;
  }

  .stacklabel p , .stacklabelright p {
    font-weight: 300;
    margin-left: 3em;
    font-size: 1.15em;
  }

  .stacklabelleft h2 {
    font-weight: 400;
    text-align: center;
    font-size: 1.75em;
  }

  .stacklabelleft p {
    font-weight: 300;
    margin-left: 3em;
    font-size: 1.15em;
    text-align: center;
  }

  .reds{
    color: red;
    font-weight: bold;
    border: solid 2px;
    line-height: 2em;
  }

  .cardbtn {
    margin-inline-start: auto;
    margin-block: auto;
    margin-right: 2em;
    background-color: antiquewhite;
    padding: 2em;
    border-radius: 25%;
    
  }



  .cardbtn2 {
    margin-inline-start: auto;
    margin-block: auto;
    margin-block-end: 5%;
    margin-right: 2em;
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: 10rem;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
  }
  .cardbtn2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0cf;
    border-radius: 10rem;
    z-index: -2;
  }
  .cardbtn2:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #008fb3;
    transition: all 0.3s;
    border-radius: 10rem;
    z-index: -1;
  }
  .cardbtn2:hover {
    color: #fff;
  }
  .cardbtn2:hover:before {
    width: 100%;
  }


  /*/////// News scroller adaptive ///////*/
  .innerscroller{
    width: 100%;
    height: 70vh;
    margin: auto;
    /*max-height: 75vh; */
    
}

/*.pict2 {
    /*margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center; */
  /*  width: 100%;
    height: 100%;
    
}*/

.thepic3{
    width: 100%;
    max-width: unset;
}

.innerwrapper img{
    /*flex: 1;
    max-inline-size: 100%;
    object-fit: cover;
    width: 100%;*/
    max-inline-size: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (min-width: 1001px) {
    .largehidden {
        display: none;
    }

  }


  @media (max-width: 1000px) {

    .stackcontainer {
        margin-bottom: 20em;
    }




    .stackunified {
        
            margin-left: 0;
            height: 50vh;
            width: 100%;
            display: flex;
            max-width: unset;
    }

     .stack , .stackright , .stackleft 
     {
        /*all:unset; */
    } 

    .slabelunified {
        background-color: white;
        width: 75%;
        height: 25%;
        /*/// Awesome centering trick for abs positioned stuff //////*/
        margin: auto;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        /*margin-left: 15%; */
        overflow: visible;
        border-radius: 3px;
        border: #444 1px solid;
    
        position: absolute;
        top: 80%;
        /*left: 22%; */
        text-align: center; 
    
        box-shadow: 2px 2px 24px 0px #908989;
        min-block-size: fit-content;
      }    


      .slabelunified ul {
        line-height: 1.15em;
        font-size: 1.75em;
        text-align: left;
      }

      .cardbtn2 {
        
        padding-bottom: 1.5em; 
        top: -5%;
      }

      .mobilehidden {
        display: none;
      }
  }

/*///// Mobile only Portrait mode ////////////  */
@media screen and (orientation: portrait) and (not (pointer: fine))  {

  .stackcontainer {
    margin-block-end: 9em;
  }


}

/*/// Special select mobile in landscape mode ! /////*/

  @media screen and (orientation: landscape) and (not (pointer: fine))  {
    .slabelunified {
        height: unset;
    }

    /*.cardstackinner:last-child */
    .newsbreak {
        margin-top: 5em;
    }

    .stackcontainer {
        margin-block-end: 16em;
    }
  }