/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.macro_icon-card {
    background: rgba(var(--bs-primary-rgb));
    border-radius: 1.5rem;
}

.bg-primary .macro_icon-card {
    background: rgba(var(--bs-secondary-rgb));
}

.ar_unset .grid-image {
    aspect-ratio: unset;
}

.hero-banner--ppd {
    background-color: var(--bs-primary);
}

@media (min-width: 1200px) {
    .hero-banner--ppd {
        background-color: transparent;
    }
}

@media (min-width: 1200px) {
    .hero-banner--ppd {
        aspect-ratio: 16 / 10;
    }
}

.hero-banner_img-overlay--ppd {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .hero-banner_overlay--ppd h1, .hero-banner_overlay--ppd h2 {
        padding-left: 5rem;
    }
}

.block-scrolling-deck .deck-arrows button {
    border-radius: 25px;
    border: 2px solid #fff;
    width: 40px;
    height: 40px;
    color: #fff;
    text-align: center;
    background-color: #fff0;
    position: relative;
}

.block-scrolling-deck .deck-arrows button svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.block-scrolling-deck .deck-arrows button:hover,.block-scrolling-deck .deck-arrows button:focus {
    background-color: rgb(255 255 255 / .1);
    border-color: var(--bs-secondary);
}

.block-scrolling-deck.bg-secondary .deck-arrows button {
    border-radius: 25px;
    border: 2px solid rgb(255 255 255 / .35);
    width: 40px;
    height: 40px;
    color: var(--bs-secondary);
    text-align: center;
    background-color: #fff0
}

.block-scrolling-deck.bg-secondary .deck-arrows button:hover,.block-scrolling-deck.bg-secondary .deck-arrows button:focus {
    background-color: rgb(255 255 255 / .1);
    border-color: #fff
}

/*.block-scrolling-deck .horizontal-deck {
    -webkit-mask: linear-gradient(90deg,transparent,white 20%,white 80%,transparent);
    mask: linear-gradient(90deg,transparent,white 20%,white 80%,transparent)
}*/

.block-scrolling-deck .horizontal-deck {
    -webkit-mask: -webkit-gradient(linear,left top, right top,from(transparent),color-stop(20%, white),color-stop(97%, white),to(transparent));
    -webkit-mask: linear-gradient(90deg,transparent,white 20%,white 97%,transparent);
    mask: -webkit-gradient(linear,left top, right top,from(transparent),color-stop(20%, white),color-stop(97%, white),to(transparent));
    mask: linear-gradient(90deg,transparent,white 20%,white 97%,transparent)
}

.block-scrolling-deck .horizontal-deck div a {
    margin-left: 1.25rem;
    /*border-radius: .5rem;*/
    overflow: hidden;
    height: 100%;
    display: inline-block;
    position: relative;
    z-index: 2;
    height: 100%;
    color: #fff
}

.block-scrolling-deck .horizontal-deck div a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 0.3s cubic-bezier(.75,0,.5,1);
    -o-transition: opacity 0.3s cubic-bezier(.75,0,.5,1);
    transition: opacity 0.3s cubic-bezier(.75,0,.5,1)
}

.block-scrolling-deck .horizontal-deck div a:hover,.block-scrolling-deck .horizontal-deck div a:focus {
    -webkit-transition-delay: 0.03s,0s,0s,0s;
         -o-transition-delay: 0.03s,0s,0s,0s;
            transition-delay: 0.03s,0s,0s,0s;
    cursor: pointer
}

/*.block-scrolling-deck .horizontal-deck div a:hover .deck__inner p,.block-scrolling-deck .horizontal-deck div a:focus .deck__inner p {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s,opacity 0.2s cubic-bezier(.365,.005,.355,1)
}*/

@media (hover: hover) {
    /*.block-scrolling-deck .horizontal-deck div a:hover .deck__inner,.block-scrolling-deck .horizontal-deck div a:focus .deck__inner {
        transform:translateY(-2.75rem)
    }*/

    .block-scrolling-deck .horizontal-deck div a:hover img,.block-scrolling-deck .horizontal-deck div a:focus img {
        -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
                transform: scale(1.1)
    }
}

.block-scrolling-deck .horizontal-deck div a:hover::before,.block-scrolling-deck .horizontal-deck div a:focus::before {
    -webkit-transition-timing-function: cubic-bezier(.25,0,.125,1);
         -o-transition-timing-function: cubic-bezier(.25,0,.125,1);
            transition-timing-function: cubic-bezier(.25,0,.125,1);
    opacity: 1
}

.block-scrolling-deck .horizontal-deck div a .deck__inner {
    padding: 1rem;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(.86,0,.07,1), .5s background-color ease-in-out;
    transition: -webkit-transform 0.5s cubic-bezier(.86,0,.07,1), .5s background-color ease-in-out;
    -o-transition: transform 0.5s cubic-bezier(.86,0,.07,1), .5s background-color ease-in-out;
    -webkit-transition: .5s background-color ease-in-out, -webkit-transform 0.5s cubic-bezier(.86,0,.07,1);
    transition: .5s background-color ease-in-out, -webkit-transform 0.5s cubic-bezier(.86,0,.07,1);
    transition: transform 0.5s cubic-bezier(.86,0,.07,1), .5s background-color ease-in-out;
    transition: transform 0.5s cubic-bezier(.86,0,.07,1), .5s background-color ease-in-out, -webkit-transform 0.5s cubic-bezier(.86,0,.07,1);
    transition: transform 0.5s cubic-bezier(.86,0,.07,1), -webkit-transform 0.5s cubic-bezier(.86,0,.07,1), .5s background-color ease-in-out;
    z-index: 2
}

@media (min-width: 992px) {
    .block-scrolling-deck .horizontal-deck div a .deck__inner {
        padding:1.875rem
    }
}

.block-scrolling-deck .horizontal-deck div a .deck__inner .h5 {
    font-size: 1.05rem
}

@media (min-width: 768px) {
    .block-scrolling-deck .horizontal-deck div a .deck__inner .h5 {
        font-size:1.15rem
    }
}

@media (min-width: 992px) {
    .block-scrolling-deck .horizontal-deck div a .deck__inner .h5 {
        font-size:1.25rem
    }
}

.block-scrolling-deck .horizontal-deck div a .deck__inner h3,.block-scrolling-deck .horizontal-deck div a .deck__inner .h3 {
    font-size: 1.15rem;
    margin-bottom: 0
}

@media (min-width: 768px) {
    .block-scrolling-deck .horizontal-deck div a .deck__inner h3,.block-scrolling-deck .horizontal-deck div a .deck__inner .h3 {
        font-size:1.45rem
    }
}

@media (min-width: 992px) {
    .block-scrolling-deck .horizontal-deck div a .deck__inner h3,.block-scrolling-deck .horizontal-deck div a .deck__inner .h3 {
        font-size:1.85rem
    }
}

.block-scrolling-deck .horizontal-deck div a .deck__inner h3 span,.block-scrolling-deck .horizontal-deck div a .deck__inner .h3 span {
    display: block;
    text-transform: uppercase;
    margin-top: 0;
    font-size: 1rem;
    letter-spacing: .15em;
    font-weight: 500;
    margin-bottom: 5px
}

/*@media (hover: hover) {
    .block-scrolling-deck .horizontal-deck div a .deck__inner p {
        position:absolute;
        visibility: hidden;
        opacity: 0
    }
}*/

/*.block-scrolling-deck .horizontal-deck div a .deck__inner p {
    font-size: 1.125rem;
    transition: visibility 0s linear 0.2s,opacity 0.2s cubic-bezier(.365,.005,.355,1);
    will-change: opacity;
    margin-top: 15px
}*/

.block-scrolling-deck .horizontal-deck div a .tw h{
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    border-radius: 8px
}

.block-scrolling-deck .horizontal-deck div a .tw::after {
    content: "";
    background: -o-linear-gradient(#fff0,rgb(11 25 38 / .7));
    background: -webkit-gradient(linear,left top, left bottom,from(#fff0),to(rgb(11 25 38 / .7)));
    background: linear-gradient(#fff0,rgb(11 25 38 / .7));
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.block-scrolling-deck .horizontal-deck div a .tw img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

/*.slick-slide {
   height: 500px !important;
}*/

.slick-slide img {
   height: 100% !important;
    width: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 400px;
}

.deck__inner,
.section_student-led-clubs .prof-dev-anchor .prof-dev-inner {
    min-height: 9rem;
    background-color: rgba(31, 192, 200, .86) !important;
}

.block-scrolling-deck .horizontal-deck a .deck__inner,
.section_student-led-clubs .prof-dev-anchor .prof-dev-inner {
    top: auto;
}

.block-scrolling-deck .horizontal-deck a.selected .deck__inner {
    top: 0;
}

.block-scrolling-deck .horizontal-deck a .deck__inner .overlay,
.section_student-led-clubs .prof-dev-anchor .prof-dev-inner .overlay {
    opacity: 0;
    visibility: hidden;
    display: none;
    -webkit-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    -o-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    transition: all 0.5s cubic-bezier(.86,0,.07,1);
}

.block-scrolling-deck .horizontal-deck a.selected .deck__inner .overlay,
.section_student-led-clubs .prof-dev-anchor.selected .prof-dev-inner .overlay {
    opacity: 1;
    visibility: visible;
    display: initial;
}

.block-scrolling-deck .horizontal-deck a.prof-dev-anchor.selected .deck__inner {
    overflow-y: scroll;
    
}

.block-scrolling-deck .horizontal-deck a.prof-dev-anchor.selected .deck__inner h3 {
    margin-bottom: 1.5rem !important;
}

.block-scrolling-deck .horizontal-deck a.prof-dev-anchor:not(.selected) .deck__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.block-scrolling-deck .horizontal-deck a:hover,
.section_student-led-clubs .prof-dev-anchor:hover,
.section_student-led-clubs .prof-dev-anchor {
    color: #fff !important;
}

.section_student-led-clubs .prof-dev-anchor:hover {
    cursor: pointer;
}

.section_student-led-clubs .prof-dev-anchor .prof-dev-inner {
    min-height: unset;
}

.block-scrolling-deck .horizontal-deck a:hover(not:.selected) .deck-inner h3,
.section_student-led-clubs .prof-dev-anchor:hover(not:.selected) h3 {
    color: var(--bs-primary) !important;
}

.icon-circle {
    position: relative;
    border: 2px solid #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: 6px;
    margin-right: 8px;
    display: inline-block;
}

.section_personal-development .icon-circle {
    border-color: var(--bs-secondary);
    border-width: 3px;
    top: .5rem;
}

.icon-circle > svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.section_student-led-clubs .prof-dev-anchor {
    background: var(--bs-primary);
    /*border-radius: 5px;*/
    min-height: 200px;
}

.section_student-led-clubs .prof-dev-anchor img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    /*border-radius: 5px;*/
}

.section_student-led-clubs .prof-dev-anchor .prof-dev-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 82px;
    -webkit-transition: height .5s ease-in-out;
    -o-transition: height .5s ease-in-out;
    transition: height .5s ease-in-out;
    overflow: hidden;
}

.section_student-led-clubs .prof-dev-anchor.selected .prof-dev-inner {
    height: 100%;
}

/*.personal-dev-item { */
/*    width: 100%;*/
/*}*/

/*@media (min-width: 992px) {*/
/*    .personal-dev-item { */
/*        width: 50%;*/
/*    }*/
/*}*/

/*#accordionFlush--personalDev .accordion-button {*/
/*    background-color: transparent;*/
/*}*/

/*#accordionFlush--personalDev .accordion-button:not(.collapsed) {*/
/*    -webkit-box-shadow: none;*/
/*            box-shadow: none;*/
/*}*/

/*#accordionFlush--personalDev .accordion-body {*/
/*    border-radius: 15px;*/
/*}*/

/*#accordionFlush--personalDev .icon-circle {*/
/*    border-color: var(--bs-secondary);*/
/*    border-width: 3px;*/
/*    color: var(--bs-secondary);*/
/*    top: 0;*/
/*}*/

.shape_prof-dev {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
}

.shape_per-dev-1 {
    position: absolute;
    bottom: -2rem;
    right: -235px;
    height: 830px;
    z-index: -1;
}

.shape_per-dev-2 {
    position: absolute;
    bottom: 20%;
    right: 19px;
    width: 345px;
    z-index: -1;
}

.shape_clubs {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: -1;
    width: 75%;
    max-height: 80%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.shape_trips {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.section_student-led-clubs .prof-dev-inner .icon-circle {
    top: 10px;
}

#accordionFlush--personalDev .accordion-button .icon-circle,
.prof-dev-anchor .prof-dev-inner .icon-circle {
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

#accordionFlush--personalDev .accordion-button:not(.collapsed) .icon-circle {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

.prof-dev-anchor.selected .prof-dev-inner .icon-circle {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

html, body {
    overflow-x: hidden;
}

#ppd-reels {
    aspect-ratio: 9 / 16;
}

#ppd-reels .reel-item,
#ppd-reels .reel-item video {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

#ppd-reels .reel-item:not(.active) {
    display: none;
}

.reels-container {
    width: 100%;
    max-width: 400px;
    cursor: pointer;
}

.shape_enhance-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 137%;
}

.shape_enhance-2 {
    display: none;
}

@media (min-width: 400px) {
    .reels-container {
        width: 55vh;
    }
}

@media (min-width: 768px) {
    .reels-container {
        width: 55vh;
    }
}

@media (min-width: 576px) {
    .shape_enhance-1 {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .shape_enhance-1 {
        width: 74%;
    }
}


@media (min-width: 992px) {
    .shape_enhance-1 {
        width: 58%;
    }
    
    .shape_enhance-2 {
        display: inline-block;
        -webkit-transform: rotate(-1deg);
            -ms-transform: rotate(-1deg);
                transform: rotate(-1deg);
        position: absolute;
        bottom: -37px;
        right: -54px;
        width: 137%;
        z-index: -1;
    }

    /*.reels-container {*/
    /*    position: absolute;*/
    /*    bottom: 32px;*/
    /*    right: 52px;*/
    /*    width: 27%;*/
    /*}*/
}

@media (min-width: 1200px) {
    .shape_per-dev-1 {
        right: -0;
    }
    
    .shape_enhance-2 {
        right: -57px;
    }
}

@media (min-width: 1400px) {
    
    .shape_enhance-2 {
        right: -67px;
        bottom: -46px;
    }
}

@media (min-width: 1500px) {
    .reels-container {
        width: 80%;
        margin: auto !important;
    }
    
    .shape_enhance-1 {
        width: 100%;
    }
    
    .shape_enhance-2 {
        display: none;
    }
}

@media (min-width: 2000px) {
    .reels-container {
        width: 55%;
    }
}

#ppd-reels_info-text {
    position: absolute;
    top: 31%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    text-shadow: 4px 4px 4px black;
    -webkit-transition: .5s opacity ease-in-out;
    -o-transition: .5s opacity ease-in-out;
    transition: .5s opacity ease-in-out;
}

#ppd-reels_mute-btn {
    position: absolute;
    bottom: 0.6rem;
    right: 0.625rem;
}

.profDevModal-container .modal-body i,
.personalDevModal-container .modal-body i {
    min-width: 1.5rem;
    text-align: center;
    color: var(--bs-secondary);
}

.section_professional-development .prof-dev-anchor:hover .deck__inner {
    background-color: var(--bs-dark) !important;
}


.section_professional-development .prof-dev-anchor .deck__inner {
    -webkit-transition: .5s background-color ease-in-out;
    -o-transition: .5s background-color ease-in-out;
    transition: .5s background-color ease-in-out;
}

.personal-dev-anchor,
.personal-dev-anchor .icon-circle,
.personal-dev-anchor .icon-circle svg {
    -webkit-transition: .5s all ease-in-out;
    -o-transition: .5s all ease-in-out;
    transition: .5s all ease-in-out;
}

/*.personal-dev-anchor:hover,*/
/*.personal-dev-anchor:hover .icon-circle svg {*/
/*    color: var(--bs-dark) !important;*/
/*}*/

.personal-dev-anchor:hover .icon-circle {
    border-color: var(--bs-dark) !important;
}

@-webkit-keyframes loadingBg {
    from {
        background-color: var(--bs-dark);
    }
    
    to {
        background-color: var(--bs-gray-700);
    }
}

@keyframes loadingBg {
    from {
        background-color: var(--bs-dark);
    }
    
    to {
        background-color: var(--bs-gray-700);
    }
}

#ppd-reels .reel-item {
    background-color: var(--bs-dark);
    -webkit-animation-name: loadingBg;
            animation-name: loadingBg;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}

.bg-primary .profDevModal-container a {
    color: var(--bs-primary);
}

.section_student-led-clubs .prof-dev-anchor {
    overflow: hidden;
}

.section_student-led-clubs .prof-dev-anchor img,
.section_student-led-clubs .prof-dev-anchor:not(.selected) .prof-dev-inner
{
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.section_student-led-clubs .prof-dev-anchor:not(.selected):hover img {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.section_student-led-clubs .prof-dev-anchor:not(.selected):hover .prof-dev-inner {
    background-color: var(--bs-dark) !important;
}

.personal-dev-item_img-container {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
    border: 5px solid var(--bs-info);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.personal-dev-anchor .personal-dev-item_img {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.personal-dev-anchor:hover .personal-dev-item_img-container {
    border-color: var(--bs-secondary);
}

.personal-dev-anchor:hover .personal-dev-item_img {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.personal-dev-item_img_icon {
    width: 30%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: var(--bs-secondary);
    border-radius: 50%;
    opacity: .85;
}

.personal-dev-categories .nav-pills .nav-link {
    border-radius: 2rem;
    font-size: .75rem;
}

@media (min-width: 768px) {
    .personal-dev-categories .nav-pills .nav-link {
        font-size: .875rem;
    }
    
}

.personal-dev-categories .nav-link {
    background-color: #ff3c86;
    color: #fff;
}

.personal-dev-categories .nav-link:hover {
    background-color: var(--bs-dark);
    color: #fff !important;
}

.personal-dev-categories .nav-pills .nav-link.active, 
.personal-dev-categories .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--bs-primary);
}

.personal-dev-categories_icon {
    height: 2rem;
}

#personal-dev-categories_nav-item--clear {
    /*background-color: transparent !important;*/
    background-color: var(--bs-info) !important;
    /*color: var(--bs-body);*/
    /*border: 2px solid var(--bs-dark);*/
}

#personal-dev-categories_nav-item--clear:hover {
    /*background-color: var(--bs-primary) !important;*/
    background-color: var(--bs-dark) !important;
    /*color: #fff;*/
}
b
/*.personal-dev-categories .nav-item {*/
/*    width: 100%;*/
/*}*/

/*@media (min-width: 768px) {*/
/*    .personal-dev-categories .nav-item {*/
/*        width: auto;*/
/*    }*/
/*}*/

.breadcrumb-item a:hover {
    text-decoration: underline !important;
}

.personal-dev-anchor {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .personal-dev-anchor {
        font-size: 1.2rem;
    }
}

.ppd-reels_indicator-container {
    position: absolute;
    bottom: 1rem;
}

.ppd-reels_indicator-item {
    width: 1rem;
    height: 1rem;
    background: var(--bs-white);
    margin: 0 0.125rem;
    border-radius: 50%;
    opacity: .65;
}

.ppd-reels_indicator-item.active {
    background: var(--bs-secondary);
    opacity: 1;
}