/*don't show the edit bg btn in basic mode */
body:not(.advMode) #changeBgInline,
body:not(.advMode) #changeBgFinetune {
    display: none !important;
}

/* styles for date and time */
.fauxbold {
    font-weight: 800;
}

#element-host-name .hosted-by {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px; 
}
#element-host-name .host-name {
    font-size: 1.125em;    
}

#splash-container .event-info-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;align-items: center;}
#splash-container .superhero-rsvp {order: 3;flex-grow: 2;}
#splash-container .mega-date-wrap, #splash-container .mega-location-wrap {flex-grow: 1;}

@media only screen and (max-width: 850px) {
    
    /* event deets */
    #splash-container .mega-location-wrap,
    #splash-container .mega-date-wrap {width: 50% !important;}
    #splash-container .superhero-rsvp {width: 100% !important;}
    #splash-container #element-rsvp {position: relative; left: auto; top: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none;}
    
    /* main content */
    #splash-container .event-info-wrap {display:block;}
    #splash-container .righty-col, #splash-container .righty-col .element-host, #splash-container .lefty-col {width: 100% !important;}
    #splash-container .righty-col .host-center {margin: 0 !important;}
    #splash-container .righty-col #element-host .wrap {overflow:hidden;float:left;position: relative;}
    #splash-container .host-center .wrap #host-img-block-wrap {float: left !important;width: 100px !important;}
    #splash-container .host-center #element-host .w7-8 {width: auto !important;margin: 22px 0;margin-left: 10px;}
    
    /* centering */
    #splash-container .righty-col #element-host .wrap {left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
}

@media only screen and (max-width: 500px) {
    
    /* event deets */
    #splash-container .mega-location-wrap,
    #splash-container .mega-date-wrap {width: 100% !important; padding: 15px !important;}
    #splash-container .mega-date-wrap {padding-bottom: 0 !important;}
    #splash-container .mega-date-wrap > div {padding: 0 !important;}
    
    /* centering */
    #splash-container .mega-date-wrap > div,
    #splash-container .mega-location-wrap > div,
    #splash-container .element-when-time {left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
}