/************** BUTTONS **************/

.btn-wi {
    min-height: 60px;
    min-width: 200px;
    font-size: var(--Font-Size-Text-3);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    text-transform: uppercase;
    transition: all ease 350ms;
    text-align: center;
    line-height: 1.2;
    padding: 0 24px;
    font-family: var(--Font-Title);
    transition: var(--Transition);
}

.btn-round {
    min-height: 4rem;
    min-width: 18rem;
    font-size: var(--Font-Size-Text-3);
    font-weight: bold;
    letter-spacing: 1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    text-transform: uppercase;
    transition: all ease 350ms;
    text-align: center;
    line-height: 1.2;
    padding: 0 5rem;
    font-family: var(--Font-Title) !important;
    transition: var(--Transition);
    border-radius: 5rem;
}

/*PASK*/
.btn-outlined, .btn-outlined.white {
    border: 2px solid var(--Color-White) !important;
    color: var(--Color-White) !important;
    text-decoration: none !important;
}

    .btn-outlined:hover {
        background-color: rgba(0,0,0, .4) !important;
    }

.btn-outlined.black {
    color: var(--Color-Black) !important;
    border-color: var(--Color-Black) !important;
}

.btn-wi.btn-sm {
    min-width: 80px !important;
    width: 80px !important;
}

/*Smart Insurance*/
.btn-primary-filled {
    border: 2px solid var(--Color-Primary-Dark);
    background-color: var(--Color-Primary-Dark);
    color: var(--Color-White);
}

    .btn-primary-filled:hover, .btn-primary-filled:focus {
        border: 2px solid var(--Color-Primary-Dark);
        color: var(--Color-Primary-Dark);
        background-color: var(--Color-White);
    }

.btn-primary-outlined {
    border: 2px solid var(--Color-Primary-Dark);
    color: var(--Color-Primary-Dark);
    background-color: var(--Color-White);
}

    .btn-primary-outlined:hover, .btn-primary-outlined:focus {
        border: 2px solid var(--Color-Primary-Dark);
        background-color: var(--Color-Primary-Dark);
        color: var(--Color-White);
    }

.btn-secondary-filled {
    border: 1px solid var(--Color-Secondary);
    background-color: var(--Color-Secondary);
    color: var(--Color-White);
}

    .btn-secondary-filled:hover, .btn-secondary-filled:focus {
        border: 2px solid var(--Color-Secondary);
        color: var(--Color-Secondary);
        background-color: var(--Color-White);
    }

.btn-secondary-outlined {
    border: 1px solid var(--Color-Secondary);
    color: var(--Color-Secondary);
    background-color: var(--Color-White);
}

    .btn-secondary-outlined:hover, .btn-secondary-outlined:focus {
        border: 2px solid var(--Color-Secondary);
        background-color: var(--Color-Secondary);
        color: var(--Color-White);
    }


/*BBCC Counseling*/
.btn-primary-filled-white-border {
    border: 2px solid var(--Color-Black);
    background-color: #FCCC43;
    color: var(--Color-Black);
}

    .btn-primary-filled-white-border:hover {
        border: 2px solid var(--Color-Black);
        background-color: var(--Color-Primary-Light);
        color: var(--Color-Black);
    }

.btn-secondary-filled-white-border {
    border: 2px solid var(--Color-Black);
    background-color: #FCCC43;
    color: var(--Color-Black);
}

.btn-secondary-filled-white-border:hover {
    border: 2px solid var(--Color-Black);
    background-color: var(--Color-Secondary-Light);
    color: var(--Color-Black);
}

.btn-gray-filled-white-border {
    border: 2px solid var(--Color-Black);
    background-color: var(--Color-Gray);
    color: var(--Color-Black);
}

    .btn-gray-filled-white-border:hover {
        border: 2px solid var(--Color-Black);
        background-color: var(--Color-Gray-Pale);
        color: var(--Color-Black);
    }

.btn-square-round {
    min-height: 5rem;
    min-width: 18rem;
    font-size: var(--Font-Size-Text-2);
    font-weight: 500;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    text-transform: uppercase;
    transition: all ease 350ms;
    text-align: center;
    line-height: 1.2;
    padding: 0 3rem;
    font-family: var(--Font-Title) !important;
    transition: var(--Transition);
    border-radius: 5px;
}

/*DREAM EXTERIOR BUTTONS*/

.btn-de {
    padding: 1rem;
    font-weight: 700;
    font-size: var(--Font-Size-Text-1);
    font-family: var(--Font-Title);
    transition: var(--Transition);
    min-height: 7rem;
    padding: 1rem 2rem;
    text-transform: none !important;
}

.btn-de.border-color-black {
    border: 1px solid var(--Color-Black);
}

.btn-de > img {
    transition: var(--Transition);
}

.btn-icon-appear {
/*    padding: 1rem;*/
    font-weight: 500;
    font-size: var(--Font-Size-Text-2);
    transition: var(--Transition);
    display: flex;
    align-items: center;
    justify-content:center;
}

.btn-icon-appear > img {
    display: none;
    transition: var(--Transition);
}

    .btn-icon-appear:hover img {
        display: block;
        margin-left: 10px;
    }

.btn-icon-change-to-arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--Color-Primary);
/*     background-color: var(--Color-Primary);*/
     color: var(--Color-Black);
}

.btn-icon-change-to-arrow > .arrow {
    display: none;
}

.btn-icon-change-to-arrow:hover {
    border: 2px solid var(--Color-Black);
/*    background-color: var(--Color-White);*/
}

.btn-icon-change-to-arrow:hover > .arrow {
    display: flex;
}

.btn-icon-change-to-arrow:hover > .main {
    display: none;
}

.btn-stretch-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.btn-stretch-arrow > img {
    transition: all ease 400ms;
    margin-left: 1rem;

}

.btn-stretch-arrow:hover > img {
    margin-left: 3rem;
}

.btn-big {
    width: 35rem;
    height: 14rem;
}

@media (max-width: 1023px) {
    .btn-big {
        width: 30rem;
        height: 12rem;
    }
}

@media (max-width: 991px) {
    .btn-big {
        width: 23rem;
        height: 8rem;
        font-size: 15px !important;
    }
}

.btn-brochure {
    min-width: 265px !important;
}
/*BUTTON ADMIN*/
.btn-admin.color-white a,
.btn-xsmall.color-white a {
    color: var(--Color-White) !important;
}

.btn-admin {
/*    min-width:15rem;
    max-width: 25rem;*/
    font-family: var(--Font-Title) !important;
    min-height: 4.5rem !important;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    text-transform: uppercase;
    box-shadow: 0 .4rem .4rem rgba(0,0,0,.3);
    transition: all ease 350ms;
    text-align: center;
    line-height: 1.2;
    border: none;
    outline: none;
    padding: 1rem 1.5rem !important;
}

    .btn-admin:hover, .btn-admin:focus, .btn-admin:active {
        box-shadow: 0 .1rem .3rem rgba(0,0,0,.7);
        background-color: var(--Color-Gray);
    }

@media (max-width: 991px) {
    .btn-admin {
        max-width: 60vw;
    }
}

.btn-back {
    background-color: var(--Color-Gray-Pale) !important;
    cursor: pointer;
    transition: var(--Transition);
    color: var(--Color-Gray) !important;
    font-family: var(--Font-Title);
    border: 1px solid rgba(0,0,0,.2);
    box-shadow: none !important;
/*    width: 23rem !important;*/
/*    max-width: 27rem !important;*/
}

    .btn-back:hover,
    .btn-back:focus,
    .btn-back:active {
        background-color: var(--Color-Gray) !important;
        color: var(--Color-White) !important;
        box-shadow: none !important;
    }

.btn-xsmall {
    min-width: 5rem !important;
    max-width: 10rem;
    font-size: 1.3rem !important;
    padding: .5rem 1rem !important;
    font-family: var(--Font-Title);
    height: 35px !important;
    font-weight: 500;
    border-radius: 0;
    text-transform: uppercase;
    box-shadow: 0 .3rem .4rem rgba(0,0,0,.3);
    transition: all ease 350ms;
    text-align: center;
    line-height: 1.2;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

    .btn-xsmall:hover {
        background-color: var(--Color-Gray);
        box-shadow: 0 1px 1px rgba(0,0,0,.6);
        background-color: var(--Color-Gray);
    }

    .btn-xsmall.btn-small {
        max-width: 20rem;
    }


.btn-square {
    width: 9rem;
    height: 9rem;
    font-family: var(--Font-Title) !important;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    text-transform: uppercase;
    box-shadow: 0 .8rem 1rem rgba(0,0,0,.2);
    text-align: center;
    line-height: 1.2;
    border: none;
    outline: none;
    padding: 1rem 1.5rem !important;
    border-radius: 1.5rem;
    color: var(--Color-White);
    transition: var(--Transition);
    background-size: 200% auto;
}

    .btn-square.pink {
        background-image: linear-gradient(to right bottom, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    }

    .btn-square.blue {
        background-image: linear-gradient(to right bottom, #209cff 0%, #68e0cf 100%);
    }

    .btn-square.green {
        background-image: linear-gradient(to right bottom, #9be15d 0%, #00e3ae 100%);
    }

    .btn-square:hover, .btn-square:focus, .btn-square:active {
        box-shadow: 0 .3rem .5rem rgba(0,0,0,.5);
        background-position: right top !important;
        color: var(--Color-White) !important;
    }


.btn-black {
    background-color: var(--Color-Black);
    color: var(--Color-White) !important;
}

    .btn-black:hover {
        background-color: var(--Color-Primary);
    }

.btn-primary {
    background-color: var(--Color-Primary) !important;
    color: var(--Color-White);
}

    .btn-primary:hover {
        background-color: var(--Color-Black) !important;
    }


.btn-wide {
    min-width: 25rem;
    max-width: 300px;
    min-height: 6.3rem;
    font-size: 2.1rem;
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    text-transform: uppercase;
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.4);
    transition: all ease 350ms;
    text-align: center;
    line-height: 1.2;
    padding: 0 2.5rem;
    font-family: var(--Font-Title) !important;
    border: none !important;
}

    .btn-wide:hover, .btn-wide:focus, .btn-wide:active {
        box-shadow: 0 .1rem .3rem rgba(0,0,0,.7);
    }

@media (max-width: 991px) {
    .btn-wide {
        min-width: 15rem;
        max-width: 50vw;
        font-size: 1.8rem;
    }
}




.btn-members {
    width: 30rem;
    max-width: 35rem;
}

.btn-black {
    background-color: var(--Color-Black);
    color: var(--Color-White) !important;
}

    .btn-black:hover {
        background-color: var(--Color-Primary);
    }

.btn-border {
    font-size: 16px;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    padding: 0 2.5rem;
    font-family: var(--Font-Title) !important;
    background-color: var(--Color-White) !important;
    border: 2px solid var(--Color-Black) !important;
    color: var(--Color-Black) !important;
    transition: var(--Transition);
    box-shadow: none;
    width: 100%;
    min-width: 30rem;
    min-height: 6rem;
    text-decoration: none !important;
}

    .btn-border:hover {
        background-color: var(--Color-Primary) !important;
        color: var(--Color-White) !important;
        box-shadow: none;
    }

.btn-primary {
    background-color: var(--Color-Primary-Dark) !important;
    color: var(--Color-White);
}

.btn-secondary {
    background-color: var(--Color-Secondary) !important;
    color: var(--Color-Black);
}

    .btn-primary:hover,
    .btn-secondary:hover {
        background-color: var(--Color-Black) !important;
        color: var(--Color-White) !important;
    }


/*EAMF BUTTONS*/

.btn-eamf {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 12px;
    transition: var(--Transition);
    font-family: var(--Font-Title);
    font-weight: 500;
    font-size: 14px;
}

    .btn-eamf.btn-gradient {
        background-color: var(--Color-Primary);
        border: 1px solid #009ED6;
        background: var(--Color-Gradient);
        color: var(--Color-Black);
    }

        .btn-eamf.btn-gradient:hover {
            background-color: var(--Color-White);
            background-image: none;
            border: 1px solid var(--Color-Primary-Dark);
            color: var(--Color-Primary-Dark);
        }

        .btn-eamf.btn-bordered-white {
            background-color: transparent;
            border: 1px solid white;
            justify-content: space-between;
            color: white;
        }

        .btn-eamf.btn-bordered-white:hover {
            background-color: white;
            color: var(--Color-Black) !important;
        }

@media (max-width: 767px) {
    .btn-eamf {
        min-height: 40px;
        font-size: 12px;
    }
}
/************* CONTENT SHARE BUTTONS ***********/
/*LHIC Programs*/
.content-share {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 3rem auto;
}

.content-share__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .content-share__icon,
    .content-share__icon * {
        transition: var(--Transition);
    }

        .content-share__icon i {
            color: var(--Color-White);
            font-size: var(--Font-Size-Text-Big) !important;
        }

        .content-share__icon:not(:last-child) {
            margin-right: 1rem;
        }

        .content-share__icon:hover {
            background-color: black;
        }

        .content-share__icon.facebook {
            background-color: var(--Color-Facebook);
        }

        .content-share__icon.twitter {
            background-color: var(--Color-Twitter);
        }

        .content-share__icon.pinterest {
            background-color: var(--Color-Pinterest);
        }

        .content-share__icon.email {
            background-color: var(--Color-Gray);
        }

        .content-share__icon.linkedin {
            background-color: var(--Color-Linkedin);
        }

        .content-share__icon.instagram {
            background-image: var(--Color-Instagram);
        }





/********* HEADER TOGGLE BAR *****************/
/*Smart Insurance 3 Lines*/
#toggle-btn {
/*    position: absolute;
    right: 3rem;
    width: 5rem;
    height: 5rem;*/
width: 32px;
height: 32px;
    background-color: transparent !important;
    position: relative;
    cursor: pointer;
}

.toggle-bar {
    background-color: var(--Color-Black) !important;
    height: 1px;
    width: 32px;
    position: absolute;
    top: 50%;
    right: 0;
}

    .toggle-bar:first-child {
        transform: translateY(-4px);
    }

    .toggle-bar:last-child {
        transform: translateY(4px);
    }


#toggle-btn.clicked > .toggle-bar:first-child {
    transform: translateY(0) rotate(45deg);
}

/*#toggle-btn.clicked > .toggle-bar:nth-child(2) {
    display: none;
}
*/
#toggle-btn.clicked > .toggle-bar:last-child {
    transform: translateY(0) rotate(-45deg);
}


@media (max-width: 991px) {

    .collapse-nav {
        background-color: var(--Color-White);
/*        border: 1px solid gray;*/
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        transition: var(--Transition);
        padding: 3rem 0;
        border-top: 1px solid var(--Color-Gray-Light);  
    }

    .header-nav-main nav {
        border-bottom: 1px solid var(--Color-Gray-Light);
/*        border-bottom: 1px solid var(--Gray-Light) !important;*/
    }

    .collapse-nav.active {
        display: block;
    }
}


/*LOADING - TEXT SVG EFFECT*/

#loading {
    width: 100%;
    min-height: 50vh;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    display: none;
    margin: 10rem auto;
}

    #loading path {
        fill: transparent;
        stroke: var(--Color-Primary);
        stroke-width: 10;
        stroke-dasharray: 0,0,800;
        animation: stroke 2s ease infinite;
    }

@keyframes stroke {
    0% {
        stroke-dasharray: 0,1000,500;
    }

    50% {
        stroke-dasharray: 0,0,3000;
    }

    100% {
        stroke-dasharray: 0,1000,500;
    }
}

.loader-circle {
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 5px solid rgba(0,0,0,.2);
    border-top-color: var(--Color-Primary) !important;
    animation: rotate linear 1s infinite;
}


#loading > p.loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-reverse {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(-360deg);
    }
}