/* Move down content because we have a fixed navbar that is 50px tall */
/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 280px;
}*/

/* Responsive: Portrait tablets and up */
/*@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}*/

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Brandon Grotesque Headline';
    src: url('fonts/brandon-grotesque-black-58a8a3e824392.otf');
}

@font-face {
    font-family: 'Brandon Grotesque Subtitle';
    src: url('fonts/brandon-grotesque-light-58a8a4b38001d.otf');
}

@font-face {
    font-family: 'Brandon Grotesque Paragraph';
    src: url('fonts/brandon-grotesque-regular-italic-58a8a456c4724.otf');
}

@keyframes pop {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, 2px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes darken {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

@keyframes imagePop {
    0% {
        transform: translate(1000px, 0px) skew(35deg, 0deg);
        filter: blur(20px);
    }

    50% {
        transform: translate(250px, 0px) skew(-50deg, 0deg);
    }

    100% {
        transform: translate(0px, 0px) skew(0deg, 0deg);
        filter: blur(0px);
    }
}

@keyframes imageHide {
    0% {
        transform: translate(0px, 0px) skew(0deg, 0deg);
        filter: blur(0px);
    }

    50% {
        transform: translate(250px, 0px) skew(-25deg, 0deg);
    }

    100% {
        transform: translate(1000px, 0px) skew(35deg, 0deg);
        filter: blur(20px);
    }
}

body, body h2, h3, h5, h6 {
    font-family: 'Montserrat' !important;
}

html, body {
    /*width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;*/
    /*overflow-x: hidden;*/
}

.flex-wrapper {
    display: flex;
    /*min-height: 100vh;*/
    flex-direction: column;
    justify-content: space-between;
}


.body-background {
    background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url('images/talk2us-stock7.jpg');
    /* Set a specific height */
    min-height: 700px;
    /*height: 100%;*/
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: right;
    background-repeat: repeat;
    background-size: cover;
}

.body-backgroundnew {
    background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) ), url('images/talk2us-stock7.jpg');
    /* Set a specific height */
    min-height: 700px;
    /*height: 100%;*/
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: right;
    background-repeat: repeat;
    background-size: cover;
}

.body-backgroundnew2024 {
    background: linear-gradient( rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) ), url('images/talk2us-Gasul-BG1.jpg');
    /* Set a specific height */
    min-height: 700px;
    /*height: 100%;*/
    /* Create the parallax scrolling effect */
    background-repeat: repeat;
    background-attachment: fixed;
    /*background-position: right;*/
    background-size: cover;
}
.site-footer-bg {
    /*background: url('images/Blue.jpg');*/
    position: relative;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
    margin-top: -1rem;
}
.site-footer {
    background: linear-gradient( rgba(315deg, #ffffff 0%, #5899e2 74%), rgba(315deg, #ffffff 0%, #5899e2 74%));
    min-height: 100px;
} 

.socmed-icons {
    width: 25px;
    height: 25px;
    margin: 0px 8px 0px 8px;
}

.socmed-icons:hover {
    animation: pop 0.5s;
}

.socmed-icons:active {
    animation: darken 0.5s;
}
.socmed-icons2024 {
    width: 40px;
    height: 40px;
    margin: 0px 8px 0px 8px;
}

.socmed-icons2024:hover {
    animation: pop 0.5s;
}

.socmed-icons2024:active {
    animation: darken 0.5s;
}

.scrollbar-primary::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 12px;
}

.scrollbar-primary::-webkit-scrollbar {
    width: 9px;
    background-color: #f3f8fe;
    transition-duration: 0.25s;
    border-radius: 12px;
}

    .scrollbar-primary::-webkit-scrollbar:hover {
        width: 9px;
        background-color: #f3f8fe;
        transition-duration: 0.25s;
    }

.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #f3f8fe;
}

.scrollbar-danger::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #241E6C;
    border-radius: 12px;
}

.scrollbar-danger::-webkit-scrollbar {
    width: 9px;
    background-color: #ff3547;
    transition-duration: 0.25s;
    border-radius: 12px;
}

    .scrollbar-danger::-webkit-scrollbar:hover {
        width: 9px;
        background-color: #ff3547;
        transition-duration: 0.25s;
    }

.scrollbar-danger::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #ff3547;
}

.scrollbar-warning::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: transparent;
    border-radius: 12px;
}

.scrollbar-warning::-webkit-scrollbar {
    width: 9px;
    background-color: #241E6C;
    transition-duration: 0.25s;
    border-radius: 12px;
}

    .scrollbar-warning::-webkit-scrollbar:hover {
        width: 9px;
        background-color: #241E6C;
        transition-duration: 0.25s;
    }

.scrollbar-warning::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #FF8800;
}

.scrollbar-success::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #241E6C;
    border-radius: 12px;
}

.scrollbar-success::-webkit-scrollbar {
    width: 9px;
    background-color: #241E6C;
    transition-duration: 0.25s;
    border-radius: 12px;
}

    .scrollbar-success::-webkit-scrollbar:hover {
        width: 9px;
        background-color: #241E6C;
        transition-duration: 0.25s;
    }

.scrollbar-success::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #00C851;
}

.scrollbar-info::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #241E6C;
    border-radius: 12px;
}

.scrollbar-info::-webkit-scrollbar {
    width: 9px;
    background-color: #241E6C;
    transition-duration: 0.25s;
    border-radius: 12px;
}

    .scrollbar-info::-webkit-scrollbar:hover {
        width: 9px;
        background-color: #241E6C;
        transition-duration: 0.25s;
    }

.scrollbar-info::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #33b5e5;
}

.scrollbar-default::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #241E6C;
    border-radius: 12px;
}

.scrollbar-default::-webkit-scrollbar {
    width: 9px;
    background-color: #241E6C;
    transition-duration: 0.25s;
    border-radius: 12px;
}

    .scrollbar-default::-webkit-scrollbar:hover {
        width: 9px;
        background-color: #241E6C;
        transition-duration: 0.25s;
    }

.scrollbar-default::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #2BBBAD;
}

.scrollbar-secondary::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #241E6C;
    border-radius: 12px;
}

.scrollbar-secondary::-webkit-scrollbar {
    width: 9px;
    background-color: #241E6C;
    border-radius: 12px;
}

    .scrollbar-secondary::-webkit-scrollbar:hover {
        width: 9px;
        background-color: #241E6C;
        transition-duration: 0.25s;
    }


.scrollbar-secondary::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #aa66cc;
}

.header-panel-primary {
    background-color: #241E6C;
    color: white;
    text-align: center;
}

.header-panel-transparent {
    background-color: transparent;
    color: white;
    text-align: center;
}

#wrapper {
    display: flex;
}

#left {
    flex: 0 0 50%;
    text-align: center;
}

#right {
    flex: 0 0 40%;
    height: 350px;
    overflow-y: auto;
    padding-right: 100px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.stars {
    float: left;
}

    .stars input {
        display: none;
    }

    .stars label {
        font-size: 45px;
        color: lightgrey;
        text-shadow: 1px 1px #bbb;
        float: right;
        padding-right: 13px;
    }

    .stars:not(:checked) > label:before {
        content: '★';
    }

    .stars > input:checked ~ label {
        color: gold;
        text-shadow: 1px 1px darkgoldenrod;
    }

    .stars:not(:checked) > label:hover,
    .stars:not(:checked) > label:hover ~ label {
        color: goldenrod;
    }

    .stars > input:checked + label:hover,
    .stars > input:checked + label:hover ~ label,
    .stars > input:checked ~ label:hover,
    .stars > input:checked ~ label:hover ~ label,
    .stars > label:hover ~ input:checked ~ label {
        color: goldenrod;
        text-shadow: 1px 1px darkgoldenrod;
    }

    .stars .result:before {
        position: absolute;
        content: "";
        width: 100%;
        left: 50%;
        bottom: -30px;
        font-size: 16px;
        font-weight: 500;
        color: gold;
        font-family: 'Poppins', sans-serif;
        display: none;
    }