﻿@media all {
    /* ebss_intro */
    #ebss_intro .container_row_content { padding-top:var(--spacing-1L); padding-bottom:var(--spacing-3L); }

    /* left side */
    #ebss_intro .circle_pink_10 { position:absolute; height:var(--spacing-0); top:var(--spacing-5L); left:-5%; }
    #ebss_intro .ring_blue_20 { position:absolute; height:var(--spacing-4L); top:calc(var(--spacing-5L) * 2); left:-10%; }
    #ebss_intro .zigzag_yellow_30 { position:absolute; height:var(--spacing-5L); bottom:calc(var(--spacing-5L) * 1.2); left:-12%; }

    /* ight side */
    #ebss_intro .circle_pink_100 { position:absolute; height:var(--spacing-0); top:var(--spacing-2L); right:5%; }
    #ebss_intro .circle_blue_101 { position:absolute; height:var(--spacing-1S); top:calc(var(--spacing-5L) * 1.2); right:-4%; }
    #ebss_intro .circle_green_102 { position:absolute; height:var(--spacing-0); bottom:var(--spacing-3L); right:-2%; }

    #ebss_intro .loops_pink_110 { position:absolute; height:var(--spacing-5L); top:var(--spacing-2L); right:-3%; }

    #ebss_intro .squiggle_yellow_120 { position:absolute; height:var(--spacing-5L); bottom:var(--spacing-5L); right:-6%; }

    /* ebss_how */
    #ebss_how { background-color:var(--color-yellow); }
    #ebss_how .container_row_content { text-align:center; } 

    #ebss_how h2 { margin-bottom:var(--spacing-3L); font-size:var(--font-size-4L); }

    #ebss_how ul.how_list { margin-bottom:var(--spacing-3L); grid-template-columns:repeat(3, 1fr); gap:var(--spacing-2L); }
        
    #ebss_how ul.how_list li .icon { display:inline-block; position:relative; padding-top:var(--spacing-1L); }
    #ebss_how ul.how_list li .icon:before { content:''; display:block; position:absolute; top:0px; left:calc(var(--spacing-1L) * -1); width:calc(var(--spacing-5L) * 1.3); height:calc(var(--spacing-5L) * 1.3); background-color:var(--color-white); border-radius:50%; z-index:1; }
    #ebss_how ul.how_list li .icon img { position:relative; display:inline-block; margin-bottom:var(--spacing-2L); width:calc(var(--spacing-5L) * 1.4); height:calc(var(--spacing-5L) * 1.4); object-fit:contain; z-index:2; }

    #ebss_how ul.how_list li p.step { margin:0px auto var(--spacing-1S) auto; font-size:var(--font-size-0); font-weight:var(--font-weight-bold); line-height:1; text-transform:uppercase; } 
    #ebss_how ul.how_list li h3 { margin-top:0px; margin-bottom:var(--spacing-3L); font-size:var(--font-size-2L); } 

    #ebss_how .note { font-weight:var(--font-weight-bold); }

    /* ebss_other */
    #ebss_other .container_row_content { text-align:center; } 

    #ebss_other ul { margin-top:var(--spacing-4L); margin-bottom:var(--spacing-3L); display:grid; grid-template-columns:1fr 1fr;  column-gap:var(--spacing-2L); row-gap:var(--spacing-0); text-align:left; }
    #ebss_other .note { font-size:var(--font-size-1L); font-weight:var(--font-weight-bold); }

    /* faqs */
    #ebss_faq h2 { margin-bottom:var(--spacing-3L); text-align:center; }

    #ebss_faq ul.faq_list li { position:relative; margin-bottom:var(--spacing-0); padding-bottom:var(--spacing-0); border-bottom:1px var(--color-dark-gray) solid; }
    #ebss_faq ul.faq_list li a.expand_icon { position:absolute; display: block; top:0px; right:0px; font-size:var(--font-size-2L); font-weight: var(--font-weight-bold); color:var(--color-blue); border-radius: 50%; z-index:1; }
    #ebss_faq ul.faq_list li a:hover,
    #ebss_faq ul.faq_list li a:focus { text-decoration: none !important; padding:0px !important}

    #ebss_faq ul.faq_list li dt { width:90%; font-weight:var(--font-weight-bold); font-size:var(--font-size-1L); }
    #ebss_faq ul.faq_list li dd { display:none; margin: var(--spacing-2S) 0px; }

    /* ebss_directors */
    #ebss_directors h2 { margin-bottom:var(--spacing-2L); text-align:center; }

    #ebss_directors ul.directors_list { grid-template-columns:repeat(4, 1fr); gap:var(--spacing-1L); text-align:center; }

    /* ebss_contact_us */
    #ebss_contact_us { overflow-x:initial; }
    #ebss_contact_us .brand_info_circle { width:calc(var(--font-size-5L) * 3.5); height:calc(var(--font-size-5L) * 3.5); }
    #ebss_contact_us .brand_info_circle p { width:70%; }
    #ebss_contact_us .brand_info_circle a { color:var(--color-white); font-size:var(--font-size-1S); }

    /* ebss_locations */
    #ebss_locations h2 { margin-bottom:var(--spacing-1L); font-size:var(--font-size-2L); text-align:center; }
    #ebss_locations ul.location_list { grid-template-columns:repeat(4, 1fr); gap:var(--spacing-2L); }
}

@media (max-width:1400px) {
    #ebss_contact_us .brand_info_circle { width:calc(var(--font-size-5L) * 4); height:calc(var(--font-size-5L) * 4); }
}

@media (max-width:1200px) {
    #ebss_contact_us .brand_info_circle { display:none; }
}

@media (max-width:1000px) {
    .brand_split_group { grid-template-columns:4fr 6fr; }

    #ebss_how ul.how_list { grid-template-columns:1fr 1fr; }
    #ebss_how ul.how_list > li:nth-child(3) { grid-column:1 / -1}
}

@media (max-width:800px) {
    .brand_split_group { grid-template-columns:3fr 7fr; align-items:start; gap:var(--spacing-2L); }
    .brand_split_group > div:nth-child(1) img { object-fit:contain; }
    .brand_split_group > div:nth-child(2) .body { padding-top:0px; padding-left:0px; }

    #ebss_directors ul.directors_list { grid-template-columns:1fr 1fr; }
}

@media (max-width:600px) { 
    #ebss_other ul { grid-template-columns:1fr; }
}

@media (max-width:500px) {
    .brand_split_group { grid-template-columns:1fr;}
    .brand_split_group > div:nth-child(1) { order:2; }
    .brand_split_group > div:nth-child(1) img { width:100%; object-fit:cover; }

    .brand_split_group > div:nth-child(2) { order:1; }
}
