@media all and (orientation: landscape) {
    .col-l-3{ width: 25%; }
    .col-l-6{ width: 50%; }

    .portrait{
        display: none;
    }
}

@media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
  .nomobile {display: none;}
}

@media only screen and (max-device-width : 1223px){
    #Basement, #slice1{
        height: 20vh !important;
        min-height: 100px !important;
    }

    h1, .h1 {
        /*2font-size: 120%; 3px;*/
        font-size: 120%;
    }

    h2, .h2{
        /*font-size: 70%;*/
    }
}

@media only screen and (max-device-width : 1223px) and (orientation : portrait){
    .canvas{
        top: 55%;
    }

    .canvas_simple{
        bottom: 20%;
    }

    .main_canvas{
        margin-top: 20%;
    }

    h1, .h1 {
        /*2font-size: 120%; 3px;*/
        font-size: 120%;
    }

    #Basement, #slice1{
        height: 20vh !important;
        min-height: 100px !important;
    }

    #home_top{
        padding-top:0;
    }

    h2, .h2 {
        /*font-size: 70%;*/
    }

    h3, .h3 {
        font-size: 100%;
    }
}

@media screen and (max-width: 1223px){
    .intro{
        font-size: 1.3rem !important;
    }
}

@media screen and (max-width: 576px) {
    .text_arrow{
        height:60px;
        line-height:20px;
    }

    .text_arrow:before{
        border:30px solid transparent;
        border-right: 30px solid steelblue;
    }

    .text_arrow:after{
        border:30px solid transparent;
        border-left: 30px solid steelblue;
    }

    .drawing_r {
        top: -850px;
    }

    .mpadding{
        padding: 20px;
    }

    .padding_mobile{
        padding: 10px;
    }

 /*   .padding_inputs{
        padding-left: 10px;
        padding-right: 10px;
    }*/

    .col-12, .col-8, .col-6, .col-4{
        padding: 0;
    }

    .medium_screen{
        display: none;
    }

    .desktop_buttons{
        display: none;
    }

    .buttons_forms{
        display: flex;
    }

    .mobile_buttons{
        display: block !important;
    }

    #create_add, #create_item, #create_settings{
       /* width: 51%;*/
    }

    .buttons_forms{
        display: none;

    }

    .nopadding_mobile{
        padding: 0px;
    }

    #examples_buttons{
        display: flex;
    }

    #buttons_form{
        margin-top: 40px;
    }

    #buttons_form_mobile{
        margin-top: 40px;
    }

    .buttons{
        display: inline-block;
    }

    #buttons_flex{
        display: inline-block;
    }

    input[name="colorBackgroundButton"], input[name="drawButtonCenter"], input[name="drawButton"],{
        margin-top: 40px;
    }

    input[name="downloadButton"], input[name="downloadPatternButton"], input[name="createPDFButton"]{
        margin-top: 20px;
    }

    #drawButtonItem {
        margin-top: 0px;
    }

    .drawing_r{
        width: 49%;
    }

    .canvas{
        width: 46%;
        top: 25%;
    }

    .intro{
        font-size: 1.3rem !important;
    }

    .intro_create{
        width: 55%;
    }

    .intro h2{
        font-size: 1.3rem;
    }

    .buttons_form .btn{
        font-size: 78%;
    }

    .drawing{
        width:51%;
    }

}

@media screen and (max-width: 768px) {
    .blog_left, .blog_right{
        padding-left: 0px;
        padding-right: 0px;
    }

    .container{
        margin-left: 0px;
    }

    #easy{
        border-right: 0px;
        border-left: 0px;
        border-top: 3px;
        border-bottom: 3px;
    }

    #easy_title{
        background-color: rgba(55, 55, 55, 0.7);
        color: rgb(239, 252, 231);
    }

    #easy_text{
        background-color: darkslategrey;
        color: rgb(239, 252, 231);
    }

    #easy_choices{
        background-color: rgb(239, 252, 231);
    }

    .mobile{
        display: inline-block;
    }

    .big_screen{
        display: none;
    }

    .footer, #footer {
        padding-right: 3px;
        padding-left: 3px;
        font-size: 0.8rem;
    }

    .footer_text{
        padding-right: 3px;
        padding-left: 3px;
    }

    /* navbar */
    .navbar-toggle {
        display: inline-block;
        position: absolute;
        top: 10px;
        left: 20px;
        cursor: pointer;
        color: rgba(239,252,231,1);
        font-size: 24px;
    }

    .main-nav {
    list-style-type: none;
    display: none;
    }

    .active {
      display: block;
    }

    .main-nav li {
        text-align: left;
        /*margin: 15px auto;*/
    }
    .navbar_login {
        display: inline-block;
        font-size: 22px;
        margin-top: 10px;
        margin-right: 20px;
    }

    /* common */
    .title{
        top:0;
        margin-top:0;
    }

    .background {
        top: 0px;
    }

    #content{
        margin: 0px;
    }

    #page_div{
        padding-left: 20px;
        padding-right: 20px;
    }

    .titlebar_div{
        padding-left: 0px;
        padding-right: 0px;
    }

    .link_name{
        padding-bottom: 10px;
        padding-top: 10px;
    }


    #drawin, #gallery{
        padding: 0px;
        margin: 0px;
    }

    .fieldset_gallery, .fieldset_tips{
        padding: 0;
    }

    .fieldset_pattern, .fieldset_fractal, .fieldset_spiral, .column_form{
        display: inline;
        flex-direction: row;
        /*padding: 0px;*/
        width: 100%;
    }

    /* design */
    .choose_left, .choose_right{
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        float: initial;
    }

    #color_form, #shape_form{
        margin-top: 20px;
    }

    .choose_right{
        margin-bottom: 20px;
    }

    .scroll {
        overflow-y: auto;
        max-height: 400px;
    }

    .nopadding {
       padding: 0 !important;
       margin: 0 !important;
    }

    upl{
        padding: 3px;
        margin: 3px;
    }

    .nopadding_n {
       padding: 0;
       margin: 0 !important;
    }

    .upload_image{
        padding-top: 10px !important;
    }

    .canvas {
        /*width: 40%;*/
        float: right;
        position: fixed;
        top: 25%;
        right: 3%
    }

    @media only screen and (orientation: landscape) {
        .canvas {
            width: 40%;
            float: right;
            position: fixed;
            top: 15%;
            right: 3%;
        }

        .savebutton, .undobutton{
            top: 10%;
        }
    }

    /* examples */
    #div_example_item{
        margin-left: 0%;
        margin-top: 0%;
    }

    #add_example{
        margin-left: 0%;
        width: 100%;
    }

    #add_example .column_form{
        width: 100%;
        display: inline;
        flex-direction: row;
        padding: 0;
    }

    .example_text_smallscreen{
        display: inline-block;
    }

    .example_text_bigscreen{
        display: none;
    }

    /* forms */
    #shape_form, #color_form, #add_form{
        width: 100%;
    }

    #add_form, #pattern_form{
        display: block;
        width: 100%;
    }

    #item_form {
        padding-top: 10px;
    }

    #add_form, example_form, #add_example, #add_buttons{
        width: 100%;
    }

    #button_set_background, #colorBackgroundButton{
        padding-right:0;
        padding-left:0;
    }

    #button_set_background{
        padding-top:20px;
        padding-right:0;
        padding-left:0;

    }
    /* input fields */
    /* only show arrows of input field at hover %TODO test other browsers*/
    /* for chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

    input[type=number]:hover::-webkit-inner-spin-button,
    input[type=number]:hover::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
    }

    /* for mozilla */
    input[type="number"] {
        -moz-appearance: textfield;
    }
    input[type="number"]:hover,
    input[type="number"]:focus {
        -moz-appearance: textfield;
    }

    input[type='checkbox'] {
        min-width: 20px;
        float: right;
    }

    .div_checkbox{
        width: 100%;
        float: left;
        vertical-align: center;
        padding-right: 0;
        margin-bottom: 5%;
    }

    .group_checkbox{
        display: flex;
        vertical-align: center;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    .label_checkbox{
        display: flex;
        margin-top: 7%;
    }

    .input_checkbox{
        float: right;
        display: flex;
        flex-direction: row;
        padding: 0px;
        margin-top: 8%;
    }

    #background_size{
        width: 100%;
    }

    #background_color{
        width: 100%;
    }

    /* gallery */
    .text-example{
        text-align: center;
    }

    .div_gallery{
        padding-bottom: 5%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/*@media screen and (max-width: 576px) {
    #labelSize, #labelColor{
        display: none;
    }

    #labelSizeResponsive, #labelColorResponsive{
        display: inline-block;
        margin-bottom: 5%;
    }
}*/

@media only screen and (max-device-width : 1223px) and (orientation : landscape){
    .div_gallery{
        padding-bottom: 5%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .savebutton, .undobutton{
        top: 0%;
    }
}