html {
    background-color: black;
}

body {
    background-color: black;
    width: 800px;
    margin-left: -400px;
}

#indicator-dot {
    background-color: #555;
}

#navBand {
    background-color: black;
}

li-nav > a {
    color: white;
}


header {
    left: 50%;
    margin-left: -350px;
}

img ~ img {
    margin-top: 0px;
    /*overrule structure.css*/
}



footer {
    margin-top: 80px;
}

/*----------------Product----------------*/

#product-panel {
    position: relative;
    width: 1200px;
    left: 50%;
    margin-left: -600px;
    margin-top: 80px;
    min-height: 800px;
    height: auto;
    //background-color: gray;
    overflow: hidden;
}

/*-- case 1 --*/
#product-panel a:link,
#product-panel a:visited {
    color: #333;
    text-decoration: none;
}

#response {
    position: relative;
    width: 1200px;
    height: 48px;
    left: 50%;
    text-align: center;
    font-size: 48px;
    margin: 160px 0 40px -600px;
    font-family: circularAir-bold, dinPro-bold, avenir, sans-serif;
    //font-family: dinPro-bold;
    color: #fbfbfb;
}

.projectContainer {
    float: left;
    margin-left: 20px;
    margin-bottom: 80px;
    width: 590px;
    //background-color: dimgray;
    overflow: hidden;

}

.projectContainer:nth-child(odd) {
    margin-left: 0;
}



.projectContainer a {
    -webkit-transition: color .8s;
    /* For Safari 3.1 to 6.0 */
    transition: color .8s;
}



#temporary-videos iframe {
    height: 200px;
    background-color: #fafafa;
    /* not sure if it's this color*/
}

/*  temporary special case ends */



.thumbnailContainer {
    width: 100%;
    height: calc(590px / (16/9));
    overflow: hidden;
    //background-color: #FBFBFB;
}

.projectImage {
    position: relative;
    overflow: hidden;
    transform: scale(1.01);
    transition: .2s;
}

.projectImage:hover {
    transform: scale(1);
}

.thumbnailContainer > video {
    position: relative;
    margin: 0;
    padding: 0;
    top: calc(-590px / (16/9));
    transform: scale(1.01);
    transition: .2s;
}

.thumbnailContainer > video:hover {
    transform: scale(1);
}



.caption {
    width: 100%;
    height: 60px;
    text-align: left;
    margin-top: 10px;
    text-align: center;
    z-index: 10;
}

.caption,
.caption > h2,
.caption > h3 {
    width: 100%;
    color: #fbfbfb;
}

.caption > h2 {
    font-size: 24px;
    font-family: DINPro-Medium, sans-serif;
}

.caption > h3 {
    font-size: 16px;
    font-family: DINPro-Regular, sans-serif;
    opacity: 0.5;
    margin-top: 5px;
}



#hidden-button:hover {
    cursor: pointer;
    opacity: 1;
}

#hidden-button:active {}

#hidden-list {
    margin-top: 10px;
    transition: .2s;
    opacity: 0;
}

#hidden-list a {
    text-decoration: none;
    color: #555;
    font-size: 18px;
    font-family: DINPRO-Regular, sans-serif;
    display: block;
}

#hidden-list a:hover {
    color: rgb(245, 20, 136);
}

/*--------------------------
--------Media Query---------
----------------------------*/

/* structure has a 680 css so use this to override it = hack */
@media screen and (max-width: 680px) {

    body {
        left: 0;
        margin-left: 0;
        width: 100%;
    }

    #header {
        //background-color: yellow;
        width: 100%;
        max-width: 600px;

    }


    #product-panel {
        position: relative;
        width: 100%;
        left: 0;
        margin: 0;
        min-height: 800px;
        height: auto;
        margin-top: 80px;
        //background-color: yellow;
        padding: 0 10px;
    }

    #response {
        position: relative;
        width: 100%;
        height: 48px;
        left: 0;
        margin: 160px 0 100px 0;
    }


    .projectContainer {
        /* all are projectContainers on 171007*/
        margin: 0;
        width: 100%;
        //height: auto;
        max-height: 600px;
        overflow: hidden;
        /*mobile only*/
        margin-bottom: 20px;
    }


    .thumbnailContainer {
        width: calc(100% - 20px);
        max-height: 600px;
    }

    .caption {
        margin-bottom: 0px;
        width: 100%;
    }

    #hidden-product-panel {
        position: relative;
        left: 0;
        margin-left: 0;
        width: 100%;
    }


    #hidden-list {
        width: calc(100% - 20px);
        padding: 0 10px;
    }




    #product-panel projectImage #tv-bg {
        //background-color: beige;
        width: 100%;
        height: 300px;
    }


    /* mobile version */
    [href="../tv/tv.html"] > .projectImage {
        width: 100%;
        left: 0;
        margin-left: 0;
        background-size: 100% auto;

    }

    .projectContainer a > h2,
    .wide a > h2,
    .tall a > h2 {
        position: absolute;
        margin-top: -32px;
        margin-left: 16px;
        font-size: 14pt;
        font-weight: 100;
    }

    .projectContainer,
    .wide,
    .tall {
        float: none;
        width: 100%;
    }


    #product-panel > .projectContainer,
    #product-panel > .wide,
    #product-panel > .tall {
        width: 100%;
        left: 0;
        margin-left: 0;
    }


    /*not a good practice, jsut for temporary visualization*/
    #product-panel > .tall + .three + .projectContainer + .projectContainer + .three,
    #product-panel > .tall + .three + .projectContainer + .projectContainer + .three + .one + .two,
    #product-panel > .tall + .three + .projectContainer + .projectContainer + .three + .one + .two + .three + .one,
    #product-panel > .tall + .three + .projectContainer + .projectContainer + .three + .one + .two + .three + .one + .two + .three {
        margin-left: 0px;
    }

    #product-panel > .projectContainer ~ .projectContainer ~ .projectContainer {
        margin-left: 0px;
    }

    #product-panel > .projectContainer {
        margin-left: 0px;
    }

}

/* for 460px or less media query ends */