body { background: #F4F4F4; }

#googleMap { padding: 0; }

#top-box { background-color: #F5F5F5; overflow: hidden; }
    #top-box .img-box { height: 300px; }

#virtualImg { background: url(/res/img/VirtualEvent_Map.jpg) center/cover; }
#top-box > .btns { display: flex; height: 80px; }
    #top-box > .btns > .btn { flex: 1; display: flex; color: white; text-decoration: none; font-size: 20px; font-weight: bold; justify-content: center; align-items: center; padding: 0 20px; text-align: center; }
        #top-box > .btns > .btn:hover { opacity: .8; }
#info-w { margin-bottom: 50px; padding: 0 38px 0 45px; }
    #info-w > h2 { font-size: 32px; text-transform: uppercase; margin: 42px 0 28px; }
    #info-w > .date-share { display: flex; }
        #info-w > .date-share > .date-loc { display: flex; }
            #info-w > .date-share > .date-loc > .date { width: 82px; flex: none; margin-right: 28px; text-align: center; }
                #info-w > .date-share > .date-loc > .date > .day { display: flex; justify-content: center; align-items: center; background: #00BBDC; color: white; font-size: 33px; font-weight: 600; padding: 10px 0; }
                #info-w > .date-share > .date-loc > .date > .month { background: #14353B; color: #AAAAAA; text-transform: uppercase; padding: 10px 0; font-size: 15px; }
            #info-w > .date-share > .date-loc > .loc { font-size: 24px; font-weight: 600; }
                #info-w > .date-share > .date-loc > .loc > .hosted { color: #FF4E00; font-weight: bold; font-style: italic; }
        #info-w > .date-share > .share-w { margin-left: auto; display: flex; align-items: flex-end; }
#main-c { max-width: 1024px; margin: 0 auto; background: white; }
    #main-c > .img-w > img { width: 100%; display: block; }
    #main-c > .time { font-size: 28px; font-weight: bold; text-align: center; margin-top: 58px; }
        #main-c > .time > .loc { margin-top: 1em; }
            #main-c > .time > .loc > .h { font-weight: normal; }
        #main-c > .time > .time { margin-top: 1em; }
    #main-c > .desc { padding: 60px 80px; font-size: 18px; }
    #main-c > .drive-desc { background: #00BBDC; color: white; padding: 30px 0; }
        #main-c > .drive-desc > .c { max-width: 75%; margin: 0 auto; }

#shutoff-msg { margin: 20px auto; text-align: center; max-width: 70%; }

@media(max-width:1023px) {
    #top-box .img-box { height: 228px; }
    #top-box > .btns { height: 60px; }
        #top-box > .btns > .btn { font-size: 15px; }

    #info-w { margin-bottom: 38px; padding: 0 34px; }
        #info-w > h2 { font-size: 24px; margin: 26px 0; }
        #info-w > .date-share > .date-loc > .date { width: 62px; margin-right: 21px; }
            #info-w > .date-share > .date-loc > .date > .day { font-size: 25px; padding: 8px 0; }
            #info-w > .date-share > .date-loc > .date > .month { font-size: 11px; }
        #info-w > .date-share > .date-loc > .loc { font-size: 18px; }

    #main-c > .time { font-size: 24px; }
}

@media(max-width:767px) {
    #mobGoogleMap { height: 250px; margin-top: 20px; }
    #virtualImg { background-image: url(/res/img/VirtualEvent_small.jpg); }
    #top-box .img-box { height: 154px; }
    #top-box > .btns { flex-wrap: wrap; height: auto; }
        #top-box > .btns > .btn { min-width: 160px; height: 60px; box-sizing: border-box; }

    #info-w { padding: 0; margin: 0; }
        #info-w > h2 { text-align: center; font-size: 20px; margin: 25px 40px 30px; }
        #info-w > h3 { margin-left: 20px; margin-right: 20px; text-align: center; }
        #info-w > .date-share { display: block; }
            #info-w > .date-share > .date-loc { padding: 0 20px 45px; }
            #info-w > .date-share > .share-w { background: #F4F4F4; text-align: center; justify-content: center; align-items: center; height: 90px; }

    #main-c > .time { font-size: 18px; margin-top: 42px; }
    #main-c > .desc { padding: 20px; }
}