/*===========================================
Homepage
===========================================*/
#menuContainer{
    height:110px;
}
    #menuContainer::before{
        opacity:.4;
    }

/*-------------------------------------------
Header
-------------------------------------------*/
#headerContainer{
    display:flex;
    height:640px;
    padding-top:100px; padding-bottom:100px;
}
#headerContainer.active{
    background-image:url(../images/home_header_pic_2_active.jpg?v=20220606);
}
    #headerContainer .headerWrapper{
        padding:0 20px;
        text-align:left;
    }
            #headerContainer .heading .meetintTitle{
                margin:0 0 15px;
                font-size:2.5rem;
                line-height:1.2;
            }
            #headerContainer .heading .meetingTopic{
                margin:25px 0 25px;
                font-size:4rem;
            }
                #headerContainer .heading .meetintTitle br:first-of-type{
                    display:inline;
                }
            #headerContainer .heading .meetingDate,
            #headerContainer .heading .meetingVenue{
                font-size:1.875rem;
                padding-bottom:10px;
            }
                #headerContainer .heading .meetingVenue .btn{
                    display:inline-block;
                    background-color:rgba(255,255,255,.7);
                    background-repeat:no-repeat;
                    background-position:50% 50%;
                    background-size:auto 24px;
                    border-radius:50%;
                    width:32px;
                    height:32px;
                    min-height:auto;
                    text-indent:-99999em;
                    overflow:hidden;
                }
                #headerContainer .heading .meetingVenue .btn:hover{
                    background-color:rgba(255,255,255,1);
                    box-shadow:none;
                }
                #headerContainer .heading .meetingVenue .btnWeb{
                    background-image:url(../images/icon-web.svg);
                }
                #headerContainer .heading .meetingVenue .btnGmap{
                    background-image:url(../images/icon-google_map.svg);
                }
    #countdown{
        color:#fff;
        margin-top:30px;
    }
        #countdown .thanks{
            font-size:1.5rem;
            line-height:1;
        }
        #countdown span{
            display:inline-block;
            border:1px solid rgba(255,255,255,.3);
            margin-right:20px;
            padding:5px;
            text-transform:Uppercase;
        }
            #countdown strong{
                font-size:2.5rem; font-weight:400;
                line-height:1;
            }
            #countdown em{
                font-size:.875rem; font-style:normal;
                margin-left:5px;
            }
    .PhotoBy{
        color:#fff;
        opacity:.4;
        position:absolute; left:10px; bottom:10px;
        transition:.2s;
    }
    .PhotoBy:hover{
        opacity:.7;
    }
        .PhotoBy a{
            color:#fff;
            text-decoration:underline;
        }
    .scrollToMain{
        color:#fff;
        text-align:center;
        width:50px;
        position:absolute; left:50%; bottom:30px;
        margin-left:-25px;
        animation-duration:1.5s;
        animation-fill-mode:both;
        animation-iteration-count:infinite;
        animation-timing-function:ease;
        animation-name:scrollFloat;
    }
    @-webkit-keyframes scrollFloat{
        0%,100%{margin-bottom:10px;}
        50%{margin-bottom:0px;}
    }
    @keyframes scrollFloat{
        0%,100%{margin-bottom:10px;}
        50%{margin-bottom:0px;}
    }
@media screen and (min-height:628px) and (orientation:landscape){
    #headerContainer{
        height:100vh;
    }
}

/*-------------------------------------------
Container
-------------------------------------------*/
#homepageContainer{
    background-color:#fff;
    font-size:1.125rem;
    padding:70px 0 90px;
}

/*-------------------------------------------
Common
-------------------------------------------*/
.homeTitle{
    margin:0 0 30px;
    color:#000;
    font-size:2.5rem;
    line-height:1;
}

/*-------------------------------------------
Quick Buttons
-------------------------------------------*/
#quickButtons{
    overflow:hidden;
}
    .quickButtonsList{
        list-style:none;
        margin:0 -15px;
        padding:0;
        display:flex;
        flex-wrap:wrap;
    }
        .quickButtonsItem{
            width:33.33333%;
            padding:0 15px;
            margin:15px 0;
            text-align:center;
            position:relative;
        }
        .quickButtonsItem:nth-child(1),
        .quickButtonsItem:nth-child(2){
            width:50%;
        }
            .quickButtonsItem a{
                display:block;
                position:relative;
                color:#fff;
                background-color:var(--primary-color);
                background-position:50% 50%;
                background-repeat:no-repeat;
                border-radius:5px;
                height:230px;
                overflow:hidden;
                padding-top:64px;
                transition:.5s;
            }
            .quickButtonsItem:nth-child(-n+2) a{
                background-size:100% auto;
                padding-right:50%;
            }
            .quickButtonsItem:nth-child(n+3) a{
                background-size:auto 100%;
            }
            .quickButtonsItem:nth-child(-n+2) a:hover{
                background-size:110% auto;
            }
            .quickButtonsItem:nth-child(n+3) a:hover{
                background-size:auto 110%;
            }
                .quickButtonsItem a::before{
                    display:block;
                    content:"";
                    width:100%; height:100%;
                    position:absolute; top:0; left:0; z-index:0;
                    transition:.3s;
                    opacity:.8;
                }
                .quickButtonsItem:nth-child(1) a::before{background-color:#c03232;}
                .quickButtonsItem:nth-child(2) a::before{background-color:#ef8d24;}
                .quickButtonsItem:nth-child(3) a::before{background-color:#49d785;}
                .quickButtonsItem:nth-child(4) a::before{background-color:#31c3e7;}
                .quickButtonsItem:nth-child(5) a::before{background-color:#8a4fda;}
                
                .quickButtonsItem .material-icons-round{
                    display:block;
                    position:relative; z-index:1;
                    font-size:70px;
                    transition:.3s;
                }
                .quickButtonsItem h4{
                    margin:0;
                    font-size:1.75rem; font-weight:700;
                    position:relative; z-index:1;
                    transition:.3s;
                }
                .quickButtonsItem .dueDate{
                    font-size:1.5rem; font-weight:400;
                    position:absolute; top:0; right:0;
                    width:100%;
                    height:100%;
                    background:url(../images/home_due_date_bg.png?v=20180529) no-repeat 100% 50%;
                    padding-left:50%;
                    padding-top:105px;
                }
                .quickButtonsItem a:hover .material-icons-round,
                .quickButtonsItem a:hover h4{
                    transform:scale(1.1);
                }

/*-------------------------------------------
Venue
-------------------------------------------*/
#venue{
    margin-top:70px;
    text-align:center;
}
    #venue p{
        line-height:1.3;
        margin:.5em 0;
    }
        #venue p strong{
            font-size:1.5rem;
        }
        .venueWebside{
            display:inline-block;
            background:url(../images/icon_open_new_blue.svg) 0 3px no-repeat;
            background-size:24px auto;
            color:#666;
            padding-left:30px;
        }
        .veneuGmap{
            display:inline-block;
            background:url(../images/icon-google_map.svg) 0 0 no-repeat;
            background-size:auto 24px;
            color:#666;
            padding-left:25px;
        }
    .photoAndMap{
        margin-top:40px;
        height:300px;
        position:relative;
        border-radius:5px;
        overflow:hidden;
        display:flex;
    }
        .venuePhoto{
            width:50%;
            height:100%;
            background:url(../images/home_venue_photo.jpg) no-repeat 50% 50%;
            background-size:cover;
            position:relative;
        }
            .venuePhoto a{
                position:absolute; left:50%; bottom:15px; z-index:3;
                transform:translateX(-50%);
            }
        .gMap{
            width:50%;
            height:100%;
            position:relative;
            overflow:hidden;
        }
            .gMap iframe{
                position:absolute; top:0; left:-330px; z-index:1;
                width:calc(100% + 660px);
                height:100%;
            }
            .gMap .btn{
                position:absolute; left:50%; bottom:15px; z-index:3;
                transform:translateX(-50%);
            }