a i{
    border: 1px solid rgb(71, 33, 1);
    border-radius: 6px;
}
.bi-caret-down-fill{
    border: none !important;
}



/* @media (min-width: 768px){
    h4{
        font-size: 30px;
    }
    .team-section img{
        padding-left: 30px;
        padding-right: 30px;
    }
} */



/* */


@media screen and (min-width: 951px) {
    ul#navigation li {
        z-index: 6;
    }
}

.caption {
    font-size: 2.8rem;
    font-weight: 200;
    color: #000;
    margin: 0;
    display: inline-block !important;
    box-sizing: border-box;
}

.print-icon {
    position: absolute;
    top: 0px;
    right: 20px;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #472101;
    color: #472101;
    box-sizing: border-box;
}

.linked-link {
    padding: 5px;
    color: #472101;
    box-sizing: border-box;
}

.linkedin-icon {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #472101;
    box-sizing: border-box;
}
.name h2{
    font-size: 1.4em;
}
@media screen {
    #print {
        display: none;
        box-sizing: border-box;
    }
    .member {
        padding-top: 80px;
        position: relative;
        box-sizing: border-box;
    }
    .image {
        width: 100%;
        height: calc(100vh - 160px);
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }
    .image img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        box-sizing: border-box;
    }
    .name {
        position: absolute;
        top: 0;
        left: 0;
        height: calc(100vh - 80px);
        width: 955px !important;
        text-align: center;
        z-index: 5;
        box-sizing: border-box;
    }
    .name h2 {
        padding: 20px;
        position: absolute;
        width: 100%;
        top: 0;
        text-align: center;
        color: #472101;
        box-sizing: border-box;
        left: 50%;
        transform: translateX(-51%);
        /*width: fit-content; removed for now to see if it works, before name and title went into image when on mobile*/
    }

    .description {
        margin-top: 80px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    .description p{
        margin-bottom: 0;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 480px) {
    .description {
        margin-top: 96px;
        box-sizing: border-box;
    }
    .caption {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .print-icon {
        top: 0;
        box-sizing: border-box;
    }
}
@media print {
    #screen {
        display: none;
        box-sizing: border-box;
    }
    .member {
        padding-top: 20px;
        position: relative;
        box-sizing: border-box;
    }
    .image {
        width: 100%;
        height: auto;
        display: grid;
        overflow: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
        page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
        page-break-inside: avoid; /* or 'auto' */
        box-sizing: border-box;
    }
    .image img {
        width: 100%;
        box-sizing: border-box;
    }
    .name {
        max-width: 960px;
        box-sizing: border-box;
        width: 100%;
        padding: 20px;
        color: #472101;
        font-weight: 700;
    }
    .name h2 {
        margin: 0;
        text-align: center;
        color: white;
        box-sizing: border-box;
    }

    .description {
        margin-top: 20px;
        margin-bottom: 40px;
        box-sizing: border-box;
    }

    .description p{
        font-size: 22px;
        font-family: Roboto, sans-serif;
        box-sizing: border-box;
    }
}


.grey-section .bg-move{
    position: absolute;
    left: 35%;
    top: 50%;
    transform: translate(-50% , -50%);
    z-index: -1;
}


.moveRight{
    animation-name: moveORight;
    animation-duration: 5s;
    animation-fill-mode: forwards;
  
  }


  
  
  @keyframes moveORight {
    0%{
      left: 35%;
    }

    50%{
        left: 60%;
    }
  
    100%{
      left: 48%;
    }
    
  }


  @media screen and (max-width: 1200px){
    .name{
        width: 791px !important;
    }

}

  @media screen and (max-width: 990px){
    .name{
        width: 625px !important;
    }
  }

  @media screen and (max-width: 768px){
    .name{
        width: 440px !important;
    }

    h2{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
  }

  @media screen and (max-width: 480px){
    .name{
        width: 360px !important;
    }
  }


  
  @media screen and (max-width: 430px){
    .name{
        width: 295px !important;
    }
  }


  @media screen and (max-width: 340px){
    .name{
        width: 220px !important;
    }
  }


  #member-1 > div:nth-child(2){
    width: 100% !important;
  }