/** MOBILE FIRST **/

/* Extra small devices (portrait phones, less than 576px)
   No media query for `xs` since this is the default in Bootstrap
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container-fluid {
        padding-right: var(--bs-gutter-x, 0.75rem);
        padding-left: var(--bs-gutter-x, 0.75rem);
    }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .wide {
        display: block !important;
    }

    .narrow {
        display: none !important;
    }
    .main-header.wide .container.top-container {
        margin: 1.3125rem auto 1.25rem auto;
    }

    .content-default-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .csc-header h3 {
        margin-bottom:2rem;
    }

    hr.hr-dashed-strong {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    ul.pagination {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .carousel-wrapper {
        width: 35.625rem;
    }

    /**     Area Social : Begin **/
    .main-header .left-header {
        margin-left: 0.625rem;
    }
    .main-header .area-social {
        margin: 0.5rem auto;
        gap: 0.25rem;
    }
    /**     Area Social : End **/

    /**     Main Logo : Begin **/
    .main-header .main-logo {
        justify-content: center;
    }
    .main-header .main-logo .header-logo {
        max-width: 5.3125rem;
    }

    .main-header .main-logo .header-logo p {
        line-height: 1;
    }

    /**     Main Logo : End **/

    /**     Header Searchbox : Begin **/

    .main-header .right-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 1.6875rem -0.9375rem auto auto;
    }

    /**     Header Searchbox : End **/

    /**     Main Navigation : Begin **/

    .container.navbar-container {
        margin: 0 auto 1.5rem auto;
    }

    .main-nav .container {
        border: var(--usb-nav-border);
        border-left: none;
        border-right: none;
    }

    .main-nav.navbar {
        padding: 0;
    }

.main-nav .navbar-nav {
        flex: 1 0 auto;
        justify-content: center;
        font-size: 1.1875rem;
        gap: 0.5rem;

        padding-left: 1.3rem;
        padding-right: 1.3rem;
    }

    .main-nav .navbar-nav .nav-link:link,
    .main-nav .navbar-nav .nav-link:active {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .main-nav .navbar-nav .nav-link:focus,
    .main-nav .navbar-nav .nav-link:hover,
    .main-nav .navbar-nav .nav-link:active,
    .main-nav .navbar-nav .nav-link.active {
        color: #ffffff !important;
        background-color: var(--usb-highlight-color);
        text-decoration: none;
    }

    .main-nav .navbar-nav .dropdown-menu a,
    .main-nav .navbar-nav .dropdown-menu a:link,
    .main-nav .navbar-nav .dropdown-menu a:visited {
        color: var(--usb-default-color) !important;
        font-weight: var(--usb-font-light) !important;
        font-size: 1.1875rem;
    }

    .main-header .main-nav .dropdown-menu.show a,
    .main-header .main-nav .dropdown-menu.show a:link,
    .main-header .main-nav .dropdown-menu.show a:visited {
        font-weight: var(--usb-font-light);
        /* font-size: 1.125rem; */
    }


    .dropdown-toggle::after {
        margin-left: 1rem;
    }

    .dropdown-submenu {
        transform: translateX(-50%);
    }
    /**     Main Navigation : End **/

    .col-md-border-right {
        border-right: var(--usb-divider-border);
    }

    /**     Carousel Default : Begin **/

    .carousel-control-next,
    .carousel-control-prev {
        display: flex;
        opacity: 1;
        transition: none;
    }
    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        background-color: #fa2301 !important;
        border-radius: 5px !important;
        transform: scale(1.25, 1.25);
        background-size: 50%;
        font-weight: bold;
    }
    /**     Carousel Default : End **/

    hr.hr-dashed {
        margin-top: 1.3125rem;
    }

    /**         Banner Default : Begin **/

    .banner-regular {
        margin-top: 0;
        margin-bottom: 2rem;
        min-height:195px;
    }

    .ce-poster {
        margin-bottom:2rem;
    }
    /**         Banner Default : End **/

    /**         Main Section Header : Begin         **/
    .main-section-header h2 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;

        margin-top: 1.125rem;
        margin-bottom: 1.125rem;
        font-size: 1.5rem;
    }
    /**         Main Section Header : End         **/

    /**         Campaign Big Carousel : Begin **/

    .campaign-side-carousel {
        margin: 3rem -2.75rem;
    }

    #campaign-big-carousel {
        padding: 2.5rem 0 4rem 0;
    }

    #campaign-big-carousel .carousel-item-content {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
    #campaign-big-carousel .carousel-item-content, 
    #campaign-big-carousel .carousel-item-content-video {
    	min-height: 27.25rem;
}

    #campaign-big-carousel h3 {
        font-size: 1.5rem;
    }

    #campaign-big-carousel h4 {
        font-size: 1.75rem;
    }

    #campaign-big-carousel p.abstract {
        font-size: 1.25rem;
    }

    #campaign-big-carousel figure {
        width: 17.75rem;
    }

    #campaign-big-carousel .caption {
        margin-top: 0;
        width: 17.75rem;
        height: auto;
    }

    #campaign-big-carousel .carousel-indicators {
        bottom: 0;
    }
    #campaign-big-carousel .carousel-control-prev {
        left: -5.5rem;
    }
    #campaign-big-carousel .carousel-control-next {
        right: -5.5rem;
    }

    /**         Campaign Big Carousel : End **/

    /**         Main Tools : Begin **/
    .main-tools {
        flex-flow: row;
        gap: 0.625rem;
        justify-content: center;
        margin: 0;
        margin-bottom: 2rem;
    }

    .main-tool-item {
        border-bottom: none;
        border-right: var(--usb-nav-border);
        flex-flow: column;
        padding: 0;
        gap: 0.75rem;
    }

    .main-tool-item:nth-child(1) {
        width: 14rem;
    }

    .main-tool-item:nth-child(2) {
        width: 14rem;
    }
    .main-tool-item:last-child {
        border-right: none;
        width: auto;
        padding-left: 1rem;
    }

    .main-tool-item p {
        text-align: center;
    }
    /**         Main Tools : End **/

    /**         Share Big Carousel : Begin **/

    h2.share-big-carousel {
        font-size: 1.875rem;
        padding-top: 2.125rem;
        padding-bottom: 2.125rem;
    }

    #share-big-carousel {
        padding: 0 0 2rem 0;
    }

    #share-big-carousel .carousel-item {
        width: 36.875rem;
    }

    #share-big-carousel .caption {
        padding: 1rem 0;
        font-size: 1.375rem;
        height: 7rem;
    }

    #share-big-carousel .carousel-control-prev {
        left: -5.5rem;
    }
    #share-big-carousel .carousel-control-next {
        right: -5.5rem;
    }

    /**         Share Big Carousel : End **/

    /**         Main Footer : Begin **/
    footer.main-footer .footer-left {
        padding: 2rem 0.325rem 0.75rem 0;
    }

    footer.main-footer .footer-left address {
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    footer.main-footer .footer-center {
        margin: 0 auto;
        margin-right: -1.75rem;
        padding-top: 2rem;
    }

    footer.main-footer .footer-right .area-social {
        border-bottom: none;
    }

    .footer-nav {
        border-top: var(--usb-divider-border);
        padding: 2.25rem 2rem;
    }
    .footer-nav nav {
        font-size: 1.125rem;
        justify-content: space-evenly;
    }

    /**         Main Footer : End **/

    .video-embed-item {
        margin-bottom: 2rem;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .standard-form-default {
        margin-right:1rem;
    }

    .standard-form-default-content {
        flex-direction: row;
        column-gap: 5%;
    }
    .standard-form-default-content .form-group {

        flex:45%;
    }
    .standard-form-default .actions {
        margin: 2rem 0;
    }

    .main-header .area-social {
        gap:0.75rem;
    }
    .col-12.col-md-12.col-lg-3.d-none.d-sm-block.right-side-col {
        border-left: 2px dashed #eae;
    }
    h4 {
        gap: 0.3125rem;
        font-size: 1rem;
    }
    .standard-text {
        margin-right: 4rem;
        margin-bottom: 4rem;
    }
    h4.card-title {
        margin-top: 0;
    }

    hr.hr-dashed-strong {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .card-body {
        padding: 0 var(--bs-card-spacer-x);
    }

    ul.pagination {
        margin-top: 3rem;
    }

    .container-fluid.container-carousel {
        margin-top: 2rem;
    }

    #campaign-big-carousel .carousel-item-content,
    #campaign-big-carousel .carousel-item-content-video {
        min-height: 25.325rem;
    }

    .campaign-side-carousel {
        margin: 1.5rem auto;
    }

    .campaign-side-carousel #campaign-big-carousel {
        padding: 1.25rem 0.75rem;
    }

    .campaign-side-carousel #campaign-big-carousel figure {
        max-width: 100%;
        width: auto;
    }

    .campaign-side-carousel #campaign-big-carousel .caption {
        width: auto;
        height: 16rem;
    }

    .campaign-side-carousel #campaign-big-carousel h3 {
        font-size: 1rem;
    }

    .campaign-side-carousel #campaign-big-carousel h4 {
        font-size: 1.25rem;
    }

    .campaign-side-carousel #campaign-big-carousel p.abstract {
        font-size: 1rem;
    }

    .campaign-side-carousel .carousel-control-next,
    .campaign-side-carousel .carousel-control-prev {
        display: none;
    }
    .campaign-side-carousel #campaign-big-carousel .carousel-item-content {
        flex-flow: column;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .campaign-side-carousel .carousel-wrapper {
        width: 100%;
    }
    .campaign-side-carousel .carousel-inner {
	    min-height: 34.75rem;
    }
    .main-header .area-social {
        justify-content: flex-start;
    }

    /**         Right header : Begin **/
    .main-header .right-header {
        margin: 1.75rem auto auto auto;
    }

    .main-nav .navbar-nav {
        justify-content: center;
    }

    /**     Main Navbar : Begin **/
    .main-nav .container {
        border: none;
    }

    .main-nav .collapse.navbar-collapse {
        border: var(--usb-nav-border);
        border-left: none;
        border-right: none;
    }

    .dropdown-menu li{
        position: relative;
    }
    /*
        .nav-item .submenu {
            display: none;
            position: absolute;
            left:100%; top:-7px;
        }
        .nav-item .submenu-left{
            right:100%; left:auto;
        }

        .dropdown-menu > li:hover{
            background-color: #f1f1f1
        }
        .dropdown-menu > li:hover > .submenu {
            display: block;
        }
    */
    .content-default-container {
        margin-left: auto;
        margin-right: auto;
    }

    .col-lg-border-right {
        border-right: var(--usb-divider-border);
    }

    footer.main-footer .footer-center {
        justify-content: space-around;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .standard-form-default {
        font-size: 1.25rem;
    }
    .standard-form-default-content {
        row-gap: 2rem;
        column-gap: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }
    h4 {
        font-size: 1.125rem;
        gap: 0.5rem;
    }

    h4.card-title {
        margin-top: 0.375rem;
    }

    .card-body {
        padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    }

    .carousel-wrapper {
        width: 44.125rem;
    }

    .carousel-wrapper.share-big-carousel {
        width: 47.5rem;
    }

    /**     Main Header : Begin **/

    .main-header.wide .container.top-container {
        margin: 1.3125rem auto 1rem auto;
    }

    /**         Left header : Begin **/
    .main-header .left-header {
        margin-left: 1.625rem;
    }
    /**         Left header : End **/

    /**         Area Social : Begin **/
    .main-header .area-social {
        gap: 1.2rem;
        margin: 2.5rem auto 0 auto;
    }
    /**         Area Social : End **/

    /**         Main Logo: Begin **/
    .main-header .main-logo {
        gap: 1.25rem;
    }

    .main-header .main-logo .header-logo {
        max-width: 8rem;
    }

    .main-header .main-logo .header-claim {
        font-size: 1.375rem;
    }

    /**         Main Logo: End **/

    /**         Right header : Begin **/
    .main-header .right-header {
        margin: 3.5rem auto auto auto;
        display: block;
        width: 90%;
        float: right;
    }

    .main-header .right-header input {
        font-size: 1.1rem;
    }
    /**         Right header : End **/

    /**     Main Header : End **/

    .main-nav .navbar-nav {
        gap: 1.75rem;
    }

    .main-nav .navbar-nav a,
    .main-nav .navbar-nav a:link,
    .main-nav .navbar-nav a:visited {
        font-size: 1.25rem;
    }
    /**     Main Navbar : End **/

    /**     Default Components : Begin **/

    .main-section-header h2 {
        margin: 1.5rem auto;
    }

    .banner-regular {
        margin: 2rem auto 2.75rem 0;
        min-height: 195px;
    }

    /**     Default Components : End **/

    .campaign-side-carousel #campaign-big-carousel h3 {
        font-size: 1.25rem;
    }

    .campaign-side-carousel #campaign-big-carousel h4 {
        font-size: 1.375rem;
    }

    .campaign-side-carousel #campaign-big-carousel p.abstract {
        font-size: 1.25rem;
    }
    .campaign-side-carousel .carousel-inner {
        min-height: 42.75rem;
    }


    #campaign-big-carousel .carousel-item-content,
    #campaign-big-carousel .carousel-item-content-video {
        min-height: 31.25rem;
    }

    #campaign-big-carousel figure {
        width: 20.875rem;
    }

    #campaign-big-carousel .caption {
        width: 20.875rem;
    }

    #campaign-big-carousel .carousel-control-prev {
        left: -9.5rem;
    }
    #campaign-big-carousel .carousel-control-next {
        right: -9.5rem;
    }

    /**         Main Tools : Begin **/
    .main-tools {
        gap: 4rem;
        margin: 0;
    }

    .main-tool-item {
        flex-flow: row;
        gap: 1.125rem;
        font-size: 1.1rem;
        border-right: var(--usb-nav-border);
        padding: 0 2rem;
    }

    .main-tool-item:nth-child(1) {
        width: auto;
    }

    .main-tool-item:nth-child(2) {
        width: auto;
    }
    .main-tool-item:last-child {
        width: auto;
    }

    .main-tool-item p {
        text-align: left;
    }
    /**         Main Tools : End **/

    #share-big-carousel {
        padding: 1.625rem 0 2rem 0;
    }

    #share-big-carousel .carousel-item {
        width: 47.5rem;
    }

    #share-big-carousel .carousel-indicators {
        bottom: 1rem;
    }

    #share-big-carousel .carousel-control-prev {
        left: -9.5rem;
    }
    #share-big-carousel .carousel-control-next {
        right: -9.5rem;
    }

    footer.main-footer .footer-left {
        padding: 2.25rem 0 2.25rem 2rem;
    }

    footer.main-footer .footer-right {
        padding: 2.25rem 0.75rem 2.25rem 0;
    }

    footer.main-footer .footer-center {
        padding: 2.25rem 0 2.25rem 0;
        margin: 0;
        gap: 2rem;
        justify-content: flex-end;
    }

    footer.main-footer .footer-right .area-social {
        padding: 0;
        border-top: none;
        justify-content: flex-end;
        gap: 1rem;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .main-header .right-header {
        width: 80%;
    }

    .main-section-header h2 {
        margin: 1.5rem auto;
    }

    footer.main-footer .footer-left {
        align-items: center;
    }

    footer.main-footer .footer-center {
        justify-content: space-around;
    }
}

/** OTHER DIRECTION **/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* Extra large devices (large desktops) */
@media (max-width: 1399.98px) {
}

/** SINGLE BREAKPOINT **/

/* Small */
@media (min-width: 576px) and (max-width: 767.98px) {
}

/* Medium */
@media (min-width: 768px) and (max-width: 991.98px) {
}

/* Large */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* X-Large */
@media (min-width: 1200px) and (max-width: 1399.98px) {
}

/* No media query since the extra-large breakpoint has no upper bound on its width */