@media (max-width: 1200px){
    #nav-options-collapse{
        display: inline-block;
    }

    .buttons{
        display: none;
    }

    .object-menu-container{
        min-width: 25%;
    }

    .resp-options{
        display: inline-block;
    }

}

/*demos-flex*/

@media (max-width: 1000px){
    #demos-flex{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
    }
    .demos-container{
        height: auto;
    }
    .demo-cell{
        min-width: 35%;
    }

    .canvas-div{
        overflow: auto;
    }

    .helptip{
        font-size: small;
        width: 5em;
    }
}

@media (max-width: 850px){
    #demos-flex{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .nav-options{
        display: none;
    }

    .demo-cell{
        min-width: 200px;
    }

    #templates-flex {
        flex-wrap: wrap;
    }

    .object-menu-container{
        width: 35%;
    }

    .grid-feture-slider{
        grid-template-columns: 3fr 2fr;
    }

    .grid-feture-slider .slider{
        width: 55px;
    }

    .grid-feture-slider input[type=number] {
        width: 20px !important;
    }

    #obj-arrangement{
        padding-left: 0;
        padding-right: 2px;
    }
    .template-cell{
        overflow: hidden;
    }
    .template-cell figcaption{
        font-size: 10px;
    }
}

@media (max-width: 710px){
    .helptip{
        left:20%;
    }
}

@media (max-width: 650px){

    #templates-flex {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .template-cell{
        margin-bottom:15px;
        min-width: 150px;
    }
}

@media (max-width: 600px){
    #object-menu{
        display: none !important;
    }

    #menu-toggle{
        display: none;
    }

    .side-canvas{
        width: 100%;
    }

    .dropdown-content{
        min-width: inherit;
        width: auto !important;
    }

    .side-list{
        min-width: inherit;
        width: auto !important;
    }
    
    .dropdown-content li{
       font-size: 12px;
    }
    
}


  @media (max-width: 1024px){
    .object-menu-container, .object-item-name{
        font-size: 1vw !important;
    }
    .object-menu-container .material-icons:not([class='material-icons icon']){
        font-size: 2vw !important;
    }

    .edit-name-span{
        height: 100%;
    }

    .edit-name-input{
        height: 100%;
    }
}

@media (min-width: 1400px){
    header{
        width: 100% !important;
    }

    main{
        width: 100% !important;
    }

    .side-canvas{
        width: 75% !important;
    }

    #object-menu{
        min-width: 20% !important;
    }

}