/*  2020 Virtual Tour CSS 
    ------------------------------------------------------ */
    
/*  CSS Overrides
    ------------------------------------------------------ */
    #header {
        height: 50px; 
    }

    
    #content {
        background-color: #000; 
        padding-bottom: 0px; 
    }
    #vghs-wrapper * {
        box-sizing: border-box; 
    } 
    #vghs-wrapper {
        white-space: 0; 
        vertical-align: top; 
        font-size: 0; 
        /*
        min-height: calc(100vh - 400px); 
        */
        height: 600px; 
        position: relative; 
        z-index: 10; 
    }
        #vghs-wrapper::after {
            display: block; width: 100%; height: 100%; 
            content: ""; 
            position: absolute; 
            z-index: -1; 
            background-image: url('../images/static/vghs-background-5.jpg'); 
            background-size: cover; 
            background-position: center center; 
            background-repeat: no-repeat;
            opacity: 0.75;  
            top: 0px; left: 0px;  
        }
    
    #vghs-cats,
    #vghs-player-container, 
    #vghs-playlist {
        height: 100%;
        box-sizing: border-box;  
    }

    #vghs-playlist {
        padding-top: 50px; 
    }


/*  Helpers
    ------------------------------------------------------ */  

/*  Local Styling
    ------------------------------------------------------ */
    #vghs-wrapper .col {
        display: inline-block; 
        font-size: 1rem; 
        vertical-align: top; 
        color: #fff; 
        text-align: left; 

    }
    #vghs-wrapper .col a {
        color: #fff; 
    }

    /*  LEFT - Video Categories
        -------------------------------------------------------- */ 

    #vghs-cats {
        width: 250px; 
        position: relative; 
        z-index: 10; 
        height: 100%; 
    }
        #vghs-cats::after {
            display: block; width: 100%; 
            height: 100%; 
            content: ""; 
            background-color: #000; 
            opacity: 0.5; 
            position: absolute; 
            top: 0px; left: 0px;
            z-index: -1; 
        }   
        #vghs-cats ul {
            display: block; width: 100%; 
            clear: both; 
            margin: 0px; padding: 0px; 
            font-size: 1.8rem; 
            list-style-type: none; 
        }
        #vghs-cats ul li {
            display: block; width: 100%; 
            clear: both; 
            line-height: 120%; 
            padding: 10px 15px; 
        }
        #vghs-cats ul li a {
            display: block; width: 100%; height: 100%; 
        }
        #vghs-cats ul li:hover,
        #vghs-cats ul li.active {
			background: rgb(194,63,71); /* Old browsers */
			background: -moz-linear-gradient(top, rgba(194,63,71,1) 1%, rgba(155,46,52,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, rgba(194,63,71,1) 1%,rgba(155,46,52,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, rgba(194,63,71,1) 1%,rgba(155,46,52,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c23f47', endColorstr='#9b2e34',GradientType=0 ); /* IE6-9 */
        }
            span.vghs-cat-filter {
                display: none; clear: both; width: 100%; 
                text-align: right; 
                font-weight: bolder; 
                font-size: 0.90rem;
                padding: 10px 15px;
            }
            i.icon.filter {
                width: 20px; height: 20px; 
                margin-left: 10px; 
            }
            #vghs-cats ul li ins {
                display: block; width: 100%; clear: both; 
                text-decoration: none; 
                font-family: "ProximaNova-Regular", Helvetica,Arial,Verdana,sans-serif; 
                font-size: 0.85rem; 
                line-height: 110%; 
                margin: 5px 0px;
            }

    /*  MIDDLE - Video Player
        -------------------------------------------------------- */ 
    #vghs-player-container {
        width: calc(100% - 550px); /* 250px cats + 300px playlist */  
        position: relative; 
        z-index: 10; 
        line-height: 100%; 
        font-size: 0; 
    }
        #vghs-player-container::after {
            display: block; width: 100%; 
            height: 100%; 
            content: ""; 
            background-color: #000; 
            opacity: 0.5; 
            position: absolute; 
            top: 0px; left: 0px;
            z-index: -1; 
        }       
        .vghs-player {
            width: 100%; height: 100%; 
        }
        iframe.yt-video-player {
            width: 100%; 
            height: 100%; 
        }


    /*  RIGHT - Video Playlist
        -------------------------------------------------------- */ 
    #vghs-playlist {
        width: 300px; 
        position: relative; 
        z-index: 10; 
    }
    #vghs-playlist::after {
        display: block; width: 100%; 
        height: 100%; 
        content: ""; 
        background-color: #000; 
        opacity: 0.5; 
        position: absolute; 
        top: 0px; left: 0px;
        z-index: -1; 
    }       

        #vghs-playlist ul {
            display: block; width: 100%; 
            clear: both; height: 100%; max-height: 550px;  
            overflow: auto; 
            margin: 0px; padding: 0px; 
            list-style-type: none; 
        }    

        #vghs-playlist ul li {
            display: block; width: 100%; 
            clear: both; 
            line-height: 120%; 
            padding: 15px;
        }

        #vghs-playlist ul li.location {

        }

        #vghs-playlist ul li.location a {
            text-decoration: normal; 
        }
        #vghs-playlist ul li.location a:hover {
            text-decoration: underline; 
        }

        #vghs-playlist ul li:hover,
        #vghs-playlist ul li.active {
			background: rgb(194,63,71); /* Old browsers */
			background: -moz-linear-gradient(top, rgba(194,63,71,1) 1%, rgba(155,46,52,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, rgba(194,63,71,1) 1%,rgba(155,46,52,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, rgba(194,63,71,1) 1%,rgba(155,46,52,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c23f47', endColorstr='#9b2e34',GradientType=0 ); /* IE6-9 */
        }

        #vghs-playlist ul li i.icon {
            width: 20px; height: 20px; 
            vertical-align: middle; 
            margin-right: 10px; 
        }        


        #vghs-playlist ul li span {
            display: block; width: 100%; clear: both; 
            line-height: 110%; 
            margin-top: 8px; 
        }
            #vghs-playlist ul li span:first-child {
                margin-top: 0px; 
            }

            #vghs-playlist li span.location-name {
                font-weight: bolder; 
            }
            #vghs-playlist li span.location-website {
                margin: 10px 0px; 
            }  

            #vghs-playlist li span.location-website a {
                text-decoration: underline; 
            }
            /*          
            #vghs-playlist li span.location-description {
                margin: 10px 0px; 
            }
            */
            #vghs-playlist li span.location-videos {
                display: block; width: 100%; 
                margin-top: 20px; 
            }
                #vghs-playlist li span.location-videos .location-video {
                    display: inline-block !important; margin: 0px; margin-left: 10px; 
                    width: initial !important; clear: none !important; 
                }
                #vghs-playlist li span.location-videos .location-video a {
                    -webkit-border-radius: 5px; 
                    border-radius: 5px; 
                    border: 2px solid #fff;
                    padding: 8px 10px;                  
                    line-height: 100%;     
                    vertical-align: middle; 
                    text-decoration: none; 
                }
                #vghs-playlist li span.location-videos .location-video a:hover {
                    background-color: #5ea690; 
                    border: 2px solid #5ea690;
                }
                #vghs-playlist li span.location-videos .location-video:first-child {
                    margin-left: 0px; 
                }

            #vghs-playlist li span.location-location {
                
            }


/*  Modals
    ------------------------------------------------------ */ 
    #vghs-location-meta {
        width: 100%; 
        max-width: 550px; 
        height: initial; 
        max-height: 80vh;  
        top: 100px; 
        -webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
    }
    #vghs-location-meta .modal-content {
        width: 100%; height: 100%; 
        max-width: initial; 
        max-height: calc(100vh - 275px); 
        overflow: auto; 
        padding: 0px;
        box-sizing: border-box;  
        
    }

    #vghs-location-meta .modal-content * {
        box-sizing: border-box;  
    }

    #vghs-location-meta .modal-content a {
        color: #c13e46;
        font-weight: bolder; 
    }
    #vghs-location-meta .modal-content a:hover {
        color: #c13e46;
        text-decoration: underline; 
    }    

    .modal-content h2.meta-title {
        font-size: 1.8rem; line-height: 120%; 
        background-color: #c13e46; color: #fff; 
        padding: 10px 15px;
    }
    .modal-content .meta-map {
        width: 100%;
        height: 250px; 
        margin: 0px auto; 
        margin-bottom: 20px; 
        border: 2px solid #c13e46;
    }

    .meta-address, .meta-phone, .meta-website, .meta-hours, .meta-holiday-specials {
        padding: 0px 25px; 
    }

    .modal-content .meta-hours {}

    .modal-content .meta-hours ul {
        display: inline-block; 
        text-align: center; 
        width: 100%; max-width: 250px; margin: 0px auto; 
        padding: 40px 0px; margin: 0px; 
        list-style-type: none; 
    }
    .modal-content .meta-hours li {
        display: block; width: 100%; clear: both; 
    }

    .modal-content .meta-holiday-specials {
        display: block; width: 100%; clear: both; 
        text-align: left; 
        padding-bottom: 40px; 
    }

    .modal-content .border-bottom {
        border-bottom: 10px solid #c13e46; 
        height: 10px; width: 100%; display: block; clear: both; 
    }




/*  Media Queries
    ------------------------------------------------------ */  
    @media all and (max-width: 1200px){	
        iframe.yt-video-player {
            height: 450px; 
        }
    }
    @media all and (max-width: 980px){	

        #header {
            height: 70px; 
        }

        #content {
            margin-top: 70px; 
        }

        #vghs-wrapper {
            height: initial; 
        }

        #vghs-cats,
        #vghs-player-container,
        #vghs-playlist {
            display: block; width: 100%; clear: both; 
            height: initial; 
        }

        #vghs-playlist {
            padding-top: 0px; 
        }

        #vghs-cats ul {
            max-height: 0; 
            overflow: auto; 
            -webkit-transition: all 500ms ease-in-out;
            transition: all 500ms ease-in-out;	            
        }   
        #vghs-cats ul.active {
            max-height: 500px; 
        }

            span.vghs-cat-filter {
                display: block; 
            }

        #vghs-playlist::after {
            opacity: 0.75; 
        }

        #vghs-player-container {
            border-top: 2px solid #c23f47; 
            border-bottom: 2px solid #c23f47; 
        }

    }    
    @media all and (max-width: 550px){	
        iframe.yt-video-player {
            height: 350px; 
        }
    }
    @media all and (max-width: 480px){
        #vghs-location-meta {
            width: 100vw; 
            height: 100vh; 
            max-width: 100vw; 
            max-height: 100vh;  
            top: 0px;
            left: 0px;  
            -webkit-transform: none; 
            transform: none; 
        } 
        #vghs-location-meta .modal-close {
            position: absolute; top: 5px; right: 5px; 
        }  
        
        #vghs-location-meta .modal-content {
            padding-top: 40px; 
            max-height: 100% !important; 
        }

        #vghs-location-meta .border-bottom {
            display: none; 
        }

        #vghs-location-meta .modal-content {
            border-bottom: 10px solid #c13e46; 
        }

    }