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

    ul.lessons_table{
        padding-inline-start: 20px;
        margin-inline-start: 1em !important;
    }
    .home_title{
        font-size: 1.75rem;

    }
    .home_subintro{
        font-size: 1.25rem;
        margin-left: 5px;
        margin-right: 5px;
    }
}

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

    .portrait{
        display: none;
    }

    .lessons_content{
        margin: 5px !important;
    }
}

@media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){

    .nomobile {
        display: none;
    }
}

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

    .canvas_simple{
        bottom: 20%;
    }

    .main_canvas{
        margin-top: 20%;
    }

/*    h1, .h1 {
        font-size: 23px;
    }

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

    .theory_title{
        font-size: 1.5rem;
    }

    .theory_subtitle{
      font-size: 1rem;
    }

    .button_practice{
        width: 90%;
    }

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

    .paragraph{
        padding: 5px !important;
    }

    title_paragraph{
        padding: 0px !important;
    }
}

@media screen and (max-width: 576px) {
    /* general */
    .grid_form_intro{
        font-size: 1.5rem;
        padding: 7px !important;
    }
    /* home */
    .home_title{
        font-size: 1.75rem;
    }

    .home_subintro{
        font-size: 1.2rem;
    }

    .intro_lessons, .intro_theory, .intro_practice{
        padding: 7px !important;
    }

    .lessons_table{
         margin: 0 1vw;

    }

    .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;
    }

    .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: .3rem !important;
    }

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

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

    .drawing{
        width:51%;
    }

    /*info*/
    .paragraph{
        font-size: 1rem;
    }
    .paragraph_title{
        font-size: 1.5rem;
    }

    .paragraph_subtitle{
        font-size: 1.25rem;
    }

}

@media screen and (max-width: 768px) {
    .title_theory, title_blog{
        font-size: 5vw;
    }

    .title_theory > div, .title_blog > div{
        height: 15vw;
    }

    .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 */
    .grid_site{
        margin-top: 0rem !important;
    }
    .navbar-toggle {
        display: inline-block;
        position: relative;
        top: 10px;
        left: 20px;
        cursor: pointer;
        color: rgba(255,255,255,0.8);
        font-size: 30px;
    }

    .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;
    }

    /*.navbar li ul li{
        margin: 10px;
    }

    .navbar-nav > li > a:hover {
      border-top: 10px solid #F68220;
    }*/


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

    .achtergrond {
        top: 0px;
    }

    #content{
        /*padding-left: 3px;*/
        /*padding: 0px;*/
        margin: 0px;
    }

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

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

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


    .fieldset_gallery, .fieldset_tips{
        padding: 0;
    }

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

    /* home */
    #home_left, #home_right {
        width: 100%;
        background-size: 100%;
    }

    /*.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;
    }*/

    .welcome h3{
        font-size: 1.1em;
    }

    .welcome h4{
        font-size: 1em;
    }

    .welcome h5{
        font-size: 1em;
    }

    /* create */
    .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;
    }


    /*#buttons_forms{
        display: flex;
    }*/


    .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;
        /*background-color: pink;*/
    }

    #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%;
        /*flex-direction: row;
        float: left;
        padding: 0px;*/
    }

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

    #labelSize, #labelColor{
        display: none;
    }

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

    #background_size{
        width: 100%;
    }

    #background_color{
        width: 100%;
    }
}