.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;
    /*    box-shadow: 0 .4rem 1rem rgba(0,0,0,.4);*/
    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;
}


/*Example : 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);
    }


/*Example : 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;
}


/*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: 1.5rem !important;
    font-weight: 500;
    letter-spacing: 1px;
    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;
    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-Dark) !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;
    }
}




/*HEADER TOGGLE BAR 1 : 3 lines ex) Smart Insurance*/

#toggle-btn {
    position: absolute;
    right: 3rem;
    width: 5rem;
    height: 5rem;
    background-color: transparent !important;
}

.toggle-bar {
    background-color: var(--Color-Primary-Dark) !important;
    height: 2px;
    width: 37px;
    position: absolute;
    top: 50%;
    left: 0;
}

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

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


#toggle-btn.clicked > .toggle-bar:first-child {
    transform: translateY(0) rotate(45deg);
/*    background-color: var(--Color-White);*/
}

#toggle-btn.clicked > .toggle-bar:nth-child(2) {
    display: none;
}

#toggle-btn.clicked > .toggle-bar:last-child {
    transform: translateY(0) rotate(-45deg);
/*    background-color: var(--Color-White);*/
}


/*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;
}

/*.loader-circle p {
    animation: rotate-reverse 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);
    }
}