@media only screen and (max-width: 1199px) {

}
@media only screen and (max-width: 992px) {
    /* max-width = 1024 */
    .separatorNone{
        z-index: 5;
    }
	#commentsText{
		width: 80%;
	}
    #centerArea{        
        width: 30%;
        display: block;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #statsButton{
        bottom: 16px;
    }
    #comments{
        opacity: 1;
        background-color: #000000;
    }
    #menu{
        position: fixed;
        background-color: #000;
        opacity: .9;
        top: 112px;
        overflow: scroll;
        height: 100%;
        z-index: 10;
        opacity: 1;
    }
    #sectionRight{
        top: 112px;
    }
    #sectionLeft{
        width: 100%;
    }
    #sectionMiddle{
        top: 112px;
    }
    #cookies{
        position: relative;
    }
    /* end max-width = 1024 */
    #centerArea{
        top: unset;
        width: 68%;
        height: 30%;
        border-top: 2px solid #000;
    }
    #sectionMiddle {
        left: 0;
        width: 65%;
        bottom: 30%;
        padding: 0;
    }
    .separatorLeft{
        left: -2px;
    }
    .extraButtons #buildingsMaster {
        display: none;
    }
    .separatorNone{
        z-index: 8;   
    }
    #storeTitle{
        position: fixed;
        top: 112px;
        width: 32%;
        background: url(img/horizontalBar.png?v=2) bottom repeat-x;
        padding-bottom: 15px;
        background-color: #000;
        z-index: 11;
    }
    #techUpgrades{
        background: none;
    }
    .separatorRight {
        right: 32%;
    }
    #sectionRight{
        top: 147px;
        width: 32%;
    }
    #sectionMiddle.index0, #sectionRight.index0{
        z-index: 0!important;
    }
    #sectionMiddle{
        margin-right: 0;
    }
    canvas{
        width: 100%;
    }
}
@media only screen and (max-width: 768px) {
    .separatorRight {
        right: 35%;
    }
    #sectionRight{
        top: 147px;
        width: 35%;
    }
    #centerArea{
        width: 65%;
    }
    #upgrades{
        width: 100%;
    }
    .product{
        width: 80%;   
    }
}
@media only screen and (max-width: 650px) {
    #centerArea{
        width:100%;
        bottom: 25px;
    }
    #sectionLeft{
        bottom: 30%;
    }
    #sectionRight{
        top: unset;
        width: 100%;
        bottom: 0;
        right: 0;
        height: 28%;
        z-index: 10;
    }
    #sectionMiddle{
        width: 100%;
        bottom: 51%;
    }
    .separatorRight {
        right: -2px;
    }
    #storeTitle{
        top: 66.5%;
        width: 100%;
        padding-top: 7px;
        border-top: 1px solid #ccc;
    }
    #products{
        width: 100%;
        display: block;
        overflow: hidden;
    }
    #upgrades{
        width: 100%;
    }
    .product{
        width: 96%;
    }
    #commentsText{
        width: 70%;
    }
}
@media only screen and (max-width: 414px) {
    
}