html {
    font-family:Montserrat,sans-serif;
    height:100%;
    width:100%;
}

a {color: #eee; text-decoration: none}
a:hover {color: blue;}

body {
    background-color: white;
    background-image: url('bg.png');
    background-attachment: fixed;
    background-position: center;
    background-size: contain;
    margin: 0px;
    height:100%;
    width:100%;
    overflow:hidden;
}

#container
{
    margin: 0px auto;
    height:100%;
    width:100%;
    text-align:center;
    position:relative;
    overflow:hidden;
}

#jeeFaceFilterCanvas {
    z-index: 10;
    display:inline;
    /*  position: absolute; */
    /*  left: 50%;
      top: 50%;*/
    overflow:hidden;
} 

#threeCanvas{
    z-index: 11;
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    left: 50%;
    top: 50%;
    width: 100vmin;
    transform: translate(-50%, -50%) rotateY(180deg);
}

@media (min-width: 1300px) {
    #container {
        max-height: 100%;
        max-width: 1600px;
    }

    #jeeFaceFilterCanvas {
        height:100%;
        width:100%;
        transform: rotateY(180deg);
        position: absolute;
        right: 0;
        /*top: -350px;*/
    }

    .landingPage
    {
        background-image:url('background_image.jpg');
        background-position:center top;
        background-repeat:no-repeat;
        background-size:750px 1500px;
    }

    #buttonAreaLandingPage
    {
        bottom:75px;
    }
    
    #buttonAreaLiveView
    {
        bottom:225px;
    }

    .cultvisionButton 
    {
        font-size: 18px;
        padding:12px 30px;
        width:200px;
    } 

    .selectionArea {
        height:55%;
    }
    
    #glassesSelection 
    {
        font-size: 16px;
        height:200px;
    }
    
    #glassesSelection .glassesThumbnail 
    {
        cursor:pointer;
        height:50px;
        width:100px;
    }
    
    #glassesSelection .glassesThumbnail img
    {
        height:50px;
        width:100px;
    }
    
    #lenseSelection 
    {
        font-size: 16px;
        height:200px;
    }
    
/*    #lenseSelection .selectionTable td 
    {
        padding: 0 10px;
    }*/
    
    #lenseSelection .selectionTable td button 
    {
        margin: 0 30px;
        padding: 18px;
    }
    
    #lenseSelection .selectionTable td .selected
    {
        border: 2px solid red;      
        padding: 16px;
    }
    
    #downArrow
    {
        height:20px;
        margin:5px;
        width:66px;
    }
}

@media (max-width: 1300px) {
    #jeeFaceFilterCanvas {
        width: 100vw;
        height:100vh;
        transform: rotateY(180deg);
        position: absolute;
        right: 0;
        top: -150px;
    }
}

@media (max-width: 1300px) {
    .landingPage
    {
        background-image:url('background_image.jpg');
        background-position:center top;
        background-repeat:no-repeat;
        background-size:375px 750px;
    }

    #buttonAreaLandingPage
    {
        bottom:75px;
    }
    
    #buttonAreaLiveView
    {
        bottom:175px;
    }
    
    .cultvisionButton 
    {
        font-size: 16px;
        padding:8px 20px;
        width:150px;
    }    
    
    .selectionArea {
        height:50%;
    }
    
    #glassesSelection 
    {
        font-size: 14px;
        height:150px;
    }
    
    #glassesSelection .glassesThumbnail 
    {
        cursor:pointer;
        height:40px;
        width:80px;
    }
    
    #glassesSelection .glassesThumbnail img
    {
        height:40px;
        width:80px;
    }
    
    #lenseSelection 
    {
        font-size: 14px;
        height:150px;
    }

    #lenseSelection .selectionTable td button 
    {
        margin:0 20px;
        padding: 14px;
    }
    
    #lenseSelection .selectionTable td .selected
    {
        border: 1px solid red;
        padding: 14px;
    }
    
    .lenseButtonText, .glassesButtonText
    {
        font-size:12px;
    }
    
    #downArrow
    {
        height:16px;
        margin:5px;
        width:53px;
    }
}

button
{
    font-size: 18px;
    width: 150px;
    z-index: 100;
    position: relative;
}

.cultvisionButton {
    background-color:black;
    border:2px solid white;
    color:white;
    cursor:pointer;
    /*display:block;*/    
    margin:1px auto;
    text-align:center;
}

#buttonAreaLandingPage
{
    margin:0 auto;
    position:absolute;
    right:30%;
    width:40%;
}

#buttonAreaLiveView {
    margin:0 auto;
    position:absolute;
    right:30%;
    width:40%;
}

#lenseSelection {
    background:#FFFFFF;
    bottom:0;
    position:fixed;
    overflow-x:hidden;
    overflow-y:hidden;
    width:inherit;
    max-width:inherit;
    z-index:99;
}

#glassesSelection {
    background:#FFFFFF;
    bottom:0;
    position:fixed;
    /*opacity:0.75;*/
    overflow-x:hidden;
    overflow-y:hidden;
    width:inherit;
    max-width:inherit;
    z-index:98;
}

#glassesSelection .selectionTable
{
    margin-top:0px;
}

.selectionArea {
    overflow-x:scroll;
    overflow-y:hidden;
}

.selectionTable {
    border:none;
    margin:8px 0 12px;
}

.selectionTable tr
{
    border:none; 
}

.selectionTable td
{
    border:none; 
    padding:0 5px;
    vertical-align: baseline;
}

#lenseSelection .selectionTable td button
{
    border: 0px solid black;
    border-radius:50%;
    color: white;
    cursor: pointer;
    width:0;
}

#lenseSelection .selectionTable td .selected
{
    border-radius:50%;
    color: white;
    cursor: pointer;
    width:0;
}