#hero .text-wrapper h1 {
    font-size: clamp(2rem,2rem + 3vw,4.5rem);
    margin-bottom:0;
}

.button {min-width: 18em;}

.arrowButton .arrow::before {
    left: calc(50% - 6px);}

.arrowButton .arrow::after {
  left: -4px;}

#intro img {
    width:100%;
    min-width: 20em;
}
#intro .container {
    justify-content: space-around;
    flex-direction: row;
    padding-bottom: 0;
}
#intro .text-wrapper {
    max-width: 35em;
}
#intro .text-wrapper h1 {
    font-size: clamp(1.85em, 1rem + 2vw, 2.5rem);
    margin-bottom:.75em
}
#intro .text-wrapper p {margin-bottom: 0;}

.breadcrumbs {
    position: absolute;
    top:2.5em; left:2em;
    color:var(--brown-color);
}
.breadcrumbs a {
    color:var(--brown-color);
    transition: color .35s cubic-bezier(0,0,0.3,1);
}
.breadcrumbs a:last-child {
    font-weight: 500;
    pointer-events: none;
}
.breadcrumbs a:hover {
    color: var(--gold-color)
}

#list_of_countries .container {
    flex-direction: column;
    max-width: 83em;
}
#list_of_countries .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width:100%
}
#list_of_countries .wrapper h1 {margin-bottom: 0;}

#list_of_countries input {display: none;}
#list_of_countries label {
    display: inline-block;
    line-height: 0;
    padding: .825em;
    background-color: var(--onyx-color);
    color: white;
    margin-left: .5em;
    cursor: pointer;
}
#list_of_countries .icons {
    min-width: 6.45em;
    margin-left: 1.25em;
}

/* TAB LIST & GRID */
#list:checked ~ .wrapper .icons label:first-child, #grid:checked ~ .wrapper .icons label:last-child  {
    background-color: var(--gold-color);
}

.panel-wrapper {
    position: relative;
    width:100%
}

.panel-wrapper .panel {
    position: absolute;
    left:0; right:0;
    opacity: 0;
    visibility: hidden;
    transform:translate3d(0,2em,0);
    display: flex;
    flex-wrap: wrap;
    transition: opacity .35s cubic-bezier(0,0,0.3,1), visibility .35s cubic-bezier(0,0,0.3,1), transform .5s ease;
}

#list:checked ~ .panel-wrapper .panel_list, #grid:checked ~ .panel-wrapper .panel_grid  {
    opacity: 1;
    visibility: visible;
    position: relative;
    width:100%;
    height:100%;
    transform:none;
}

.panel {
    display: flex;
    margin-top: 2em;
}
.panel_list a {
    padding: 1.25em;
    background-color: var(--powder-color);
    flex-basis: calc(33.333333% - .25em);
    margin: .125em;
    text-align: center;
    text-transform: uppercase;
    color: #6d6d6d;
    font-size: .925rem;
    font-weight: 800;
    letter-spacing: .05em;
    transition: color .35s cubic-bezier(0,0,0.3,1), background-color .35s cubic-bezier(0,0,0.3,1);
}
.panel_list a:hover {
    color:white;
    background-color: var(--gold-color);
}
.panel_grid {margin-top: 1em}
.panel_grid a {
    flex-basis: calc(33.33333% - .72em);
    margin-right: 1em;
    margin-top:1em
}
.panel_grid a:nth-child(3n) {
    margin-right: 0;
}

.panel_grid figure {
  position: relative;
  text-align: center;
  overflow: hidden;
}   
.panel_grid img {
  object-fit: cover;
  width: 100%;
  min-height: 18em;
  transition: transform .35s cubic-bezier(0,0,0.3,1);
}

.panel_grid figcaption {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.175em;
  font-weight: 800;
  color: white;
  transform: translate3d(0,-50%,0);
}

/* SLIDESHOW */
#slideshow {
    background-color: var(--onyx-color);
}
#slideshow .text-wrapper {max-width: none;}
#slideshow .container {padding:0;}
#slideshow h1, #slideshow p {
    color:rgb(233, 233, 233);
    font-weight: 300;
}

#slideshow .slide {
    display: flex;
    align-items: center;
    width:100%
}
#slideshow .right {
    position: relative;
    width:50%;
    max-width: 40em;
    padding: clamp(3em,3em + 5vw,5em) 7.5%;
    padding-right: 5%;
}
#slideshow .text-wrapper {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    height:0;
    overflow: hidden;
    top:0; left:0;
    margin:0 auto;
    transition: .35s cubic-bezier(0,0,0.3,1);
}
#slideshow .text-wrapper h3,#slideshow .text-wrapper h1, #slideshow .text-wrapper p {
    transform:translate3d(0,10%,0);
    transition: .5s transform cubic-bezier(0,0,0.3,1);
}
#slideshow .text-wrapper h3 { transform:translate3d(0,50%,0);}
#slideshow .text-wrapper h1 {
    transition: .5s .0125s transform cubic-bezier(0,0,0.3,1);
}
#slideshow .text-wrapper p {
    transition: .5s .025s transform cubic-bezier(0,0,0.3,1);
}
#slideshow .text-wrapper.active h3, #slideshow .text-wrapper.active h1, #slideshow .text-wrapper.active p {
    transform:translate3d(0,0,0);
}
#slideshow .text-wrapper.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    height: auto
}
#slideshow .image {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width:50%;
    height:50em;
    background-position: center;
    background-size: cover;
    transition: opacity .5s cubic-bezier(0,0,0.3,1),visibility .5s cubic-bezier(0,0,0.3,1);
}
#slideshow .image.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

#slideshow .arrows {margin-top: 3em;}
#slideshow .arrows button {
    line-height: 0;
    background:transparent;
    border: 2px solid var(--gold-color);
    border-radius: 50%;
    color:white;
    font-size: 1.5rem;
    height:3em;
    width:3em;
    cursor: pointer;
    transition: background-color .35s;
}
#slideshow .arrows button:hover {background-color: var(--gold-color);}

#slideshow .arrows .prev {
    transform:rotate(180deg);
    margin-right: .5em;
}


/* CALL TO ACTION REVERSE POSITION */

#CTA .container {
    flex-direction: row-reverse;
    padding-left: 1.5em !important;
    padding-right: 0;}

#CTA figure.expert::after {
  left: 3.125em !important;
}

#CTA .text-wrapper.left {
  margin-left: 0;
  margin-right: 7.5%;
}
#CTA .buttons-wrapper .button {
    min-width: 0
}


@media only screen and (max-width: 80rem) {
    #CTA figure.expert::after {
      left: 2.5em !important;
    }
}

@media only screen and (max-width: 53.125rem) {

    #slideshow .slide {
        flex-direction: column;
    }
    #slideshow .image {
        height:23em;
        width:100%
    }
    #slideshow .right {
        width:100%;
        padding: clamp(3em,3em + 5vw,10em) 1.5em 
    }
    #slideshow .arrows {display: none;}

    #slideshow .bullets {
        display: flex;
        position: relative;
        bottom: -1em;
        margin-top: 1em;
    }
    #slideshow .bullets span {
        width:6px; height:6px; border-radius: 6px;
        margin: 0 .25em;
        background-color: #D9D9D9;
        cursor: pointer;
        transition: width .35s cubic-bezier(0,0,0.3,1), background-color .35s cubic-bezier(0,0,0.3,1);
    }
    #slideshow .bullets span.active {
        border-radius: 1.25em;
        width: 1.25em;
        background-color: var(--gold-color);
        cursor:default;
    }

}

@media only screen and (max-width: 48rem) {
    .breadcrumbs {display: none;}
    #intro figure {
        display: none;
    }
    #intro .text-wrapper {margin-right: 0;}
    .panel_grid.panel {
        justify-content: space-between;
    }
    .panel_grid a, .panel_grid a:nth-child(2n), .panel_grid a:nth-child(3n) {
        flex-basis: calc(50% - .5em);
        margin-right: 0;
    }

    #CTA .container {
        justify-content: center;
        padding-right: 1.5em;
    }
    #CTA .text-wrapper.left {
        margin:0 auto
      }
}

@media only screen and (max-width: 40rem) {
    .panel_list a {
        flex-basis: calc(50% - .25em);
    }
}

@media only screen and (max-width: 28.75rem) {
    .panel {margin-top: 1.5em;}
    .panel_list a {
        flex-basis: 100%;
        margin: .125em 0;
    }
    .panel_grid img {min-height: 14em;}
    .panel_grid a, .panel_grid a:nth-child(2n),.panel_grid a:nth-child(3n) {
        flex-basis: 100%!important;
        margin-right: 0;
        margin-top: .25em;
    }
    .panel a:first-child {
        margin-top:0
    }
}
