:root{
    --sbngBlue: #0096C8;
    --sbngYellow: #c8d700;
    --newsHeight: 350px;
}

/* Code to change page width START */
.container_12 {
    width: 1200px;
    max-width: 100vw;
    overflow-x:hidden;
}
.s1_grid_12{
    width: auto;
}
@media only screen and (max-width: 1199px) and (min-width: 616px){
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1200px;
    min-width: 600px;
}}
@media only screen and (max-width: 616px){
    .container_12 {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 100vw;
        min-width: 320px;
        display: block;
    }
    .firstLevel{
        position: static !important;
    }
}
/* Code to change page width END */ 




/************************/
/******* TWS Code *******/
/************************/
/* Header */
#idHeaderContentHolder{
    padding:0 10%;
}
#idHeaderContentHolder .WaLayoutTable{
    max-width: 1200px;
    margin: auto;
}
/* Menu */
.tws_headerMenu div.menuInner ul.firstLevel{
    margin:auto;
}
.tws_headerMenu div.menuInner ul.firstLevel>li{
    padding:0 15px;
}
/* What makes SBNG Different blurb */
.zoneHeader3{
    background: var(--sbngYellow);
}
.tws_whatMakes_blurb{
    width: 80%;
    margin:auto;
    border-radius: 20px;
    padding: 10px 30px;
    max-width: 650px;
}
.tws_whatMakes_blurb h2{
    text-align: center;
}
.tws_whatMakes_blurb ul{
    margin:0 10%;
    color:var(--sbngYellow);
}
.tws_whatMakes_blurb ul li{
    margin-bottom: 10px;
}
/* News blocks */
.tws_recentNews.gadgetStyle002,
.tws_upcomingEvents.gadgetStyle001{
    border-color: var(--sbngYellow);
    border-radius:20px;
    height:var(--newsHeight);
    justify-self: right;
    max-width: 550px;
    width:90%;
    margin: auto;
}
.tws_upcomingEvents.gadgetStyle001{
    justify-self: left;
}
.tws_recentNews.gadgetStyle002 .gadgetStyleTitle,
.tws_upcomingEvents.gadgetStyle001 .gadgetStyleTitle{
    background:var(--sbngBlue);
    border-radius: 15px 15px 0 0; 
    padding:20px;
}
.tws_recentNews.gadgetStyle002 .gadgetStyleBody,
.tws_upcomingEvents.gadgetStyle001 .gadgetStyleBody{
    padding: 30px 20px 20px 20px;
}
.tws_recentNews.gadgetStyle002 .gadgetStyleTitle h4,
.tws_upcomingEvents.gadgetStyle001 .gadgetStyleTitle h4{
    color: white;
    text-align: center;
}

.tws_homePage_news .WaLayoutTable{
    width:80%;
    margin:auto;
    max-width: 1200px;
}
.tws_homePage_news td{
    height:var(--newsHeight);
}

/*** Become Member blurb ***/
.tws_becomeMember_blurb{
    width:100%;
    margin: auto;
    background:var(--sbngBlue);
    padding:50px 0;
}

.tws_becomeMember_blurb .gadgetStyleBody{
    width:80%;
    margin: auto;
    max-width: 1000px;
    text-align: center;
}
.tws_becomeMember_blurb .gadgetStyleBody h2{
    color:white;
    text-align:center;
}
.tws_becomeMember_blurb .gadgetStyleBody p{
    color:white;
}
.tws_becomeMember_blurb .gadgetStyleBody p a{
    color:var(--sbngYellow);
    font-weight:bold;
}

/**** Buttons ****/
.tws_button{
    width:200px;
    margin:auto;
    padding:5px 15px;
    border-radius:20px;
    background: var(--sbngYellow);
    display: flex;
    justify-content: center;
    align-items:center;
    transition-duration: 0.4s;
}
.tws_button a{
    height:100%;
    width:100%;
    text-align:center;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
    transition-duration: 0.4s;
    color: var(--sbngBlue);
}
.tws_button:hover{
    background: white;
}
.tws_button:hover a{
    color:var(--sbngBlue);
}

/**** Sign Up Form ****/
.WaGadgetSubscriptionForm {
    max-width: 500px;
}
.tws_subForm{
    width: 60%;
    margin:auto;
    border:5px solid var(--sbngYellow);
    padding:20px 40px;
    border-radius:20px;
}
/*************/

/*** Scroller ***/
.tws_scroller {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: white;
}

.tws_scroller-track {
    display: flex;
    width: max-content;
    animation: tws_scroll-left 60s linear infinite;
    align-items: center;
    margin:5px auto;
    
}
.tws_scroller-track a img{
    height: auto;
    width: 200px;
    max-height: 150px;
    margin-right: 70px; 
    object-fit: contain;
}


@keyframes tws_scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/**** Body Width ****/
.container_12{
    width:100%;
}
.container_12 > div{
    width:100%;
    margin-left:0;
    margin-right:0;
}




@media only screen and (max-width: 616px){
    .tws_whatMakes_blurb{
        width:80%;
        margin-bottom:20px;
    }
    .tws_whatMakes_blurb ul{
        margin:0;
    }
    .tws_recentNews.gadgetStyle002,
    .tws_upcomingEvents.gadgetStyle001{
        justify-self: center;
    }

    .WaLayoutContainerFirst:has(.tws_whatMakes_blurb){
        width:80%;
        margin:auto;
    }

}

/************************/

/** About Us **/
#PAGEID_18045 .container_12 #id_Header3 table{
    max-width: 1200px;
    margin: auto;
}
.tws_aboutUs_title{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:20%;
}
#id_FZKnKDq{
    margin-bottom: 0;
}
.tws_aboutUs_welcome_blurb{
    background:var(--sbngBlue);
    padding:20px 10%;
}
.tws_aboutUs_welcome_blurb h3{
    color:white;
}
.tws_videoPlayer{
    width: 100%;
    height:350px;
}


/**** Upcoming Events ****/

.tws_upcomingEvents_banner{
    width:80%;
    margin:auto;
    border-color: var(--sbngBlue);
    border-radius: 20px;
    max-width: 1200px;
    
}
.tws_upcomingEvents{
    width:80%;
    margin:auto;
    max-width: 1200px;
    
}
.tws_upcomingEvents img{
    display:none;
}

.tws_upcomingEvents #idUpcomingEventsContainer li.boxesListItem{
    border-bottom: 5px solid var(--sbngYellow);
    padding-bottom:10px;
}

/**** Join us ****/
.WaGadgetMembershipApplication{
    max-width: 1200px;
    margin:auto;
}

/**** Directory ****/
.tws_directory{
    width:80%;
    margin: auto;
    max-width: 1200px;
}
.tws_directory  #idMemberDirectoryContainer tr:nth-child(even){
    background: #fdffe0;
}
.tws_directory  #idMemberDirectoryContainer thead tr:first-child{
    background: var(--sbngBlue);
}
.tws_directory  #idMemberDirectoryContainer thead tr:first-child th{
    color:white;
}

/**** News ****/
.tws_newsBlock{
    width:80%;
    margin: auto;
    max-width: 1200px;
}

.tws_newsBlock #idBlogPostListContainer .boxesListItem{
    border-bottom: 5px solid var(--sbngYellow);
    padding-bottom:10px;
}

.tws_newsBlock #idBlogPostListContainer .boxesListItem img{
    display:none;
}

.tws_interested_blurb{
    width:80%;
    margin: auto;
    max-width: 1200px;
}