ethics-canvas/canvas/css/canvas.css

* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html, body {
    height: 100%;
}
p {
    font-size: 0.95em;
}
pre {
    border: none;
    background-color: #eceff1;
    visibility: hidden;
}

/* ----------------------------------------------
    Logo
----------------------------------------------- */

a.logo {
    display: block;
}
a.logo img {
    display: block;
    width: 60%;
    margin: auto;
}

/* ----------------------------------------------
    Form header
----------------------------------------------- */

.form-header {
    width: 100%;
    margin: 0 auto 2.14em auto;
    /* background-color:#546e7a; */
    background-color: #eceff1;
    border-radius: 0 0 5px 5px;
    min-height: 6em;
}
.form-header h1 {
    color: #444;
    font-size: 1.9em;
    text-align: left;
}
.form-header h2 {
    font-size: 1.4em;
    color: #444;
}
.form-header p {
    font-size: 0.9em;
    margin-top: 1em;
    color: #444;
}
.form-header label {
    font-size: 1.1em;
    margin-top: 1.8em;
    margin-right: 0.3em;
    color: #444;
}
.form-header input {
    width: 62%;
    outline: none;
    border: 1px solid #eceff1;
    border-radius: 4px;
    padding: 0.45em;
}

/* ----------------------------------------------
    Jump to
----------------------------------------------- */

.jump-to {
    width: 100%;
    margin: -1.14em auto 2.14em auto;
    background-color: #eceff1;
    border-radius: 5px;
    min-height: 6em;
    padding: 1em 1em 0.3em 1em;
    display: none;
}
.jump-to label {
    font-size: 1.1em;
    margin-right: 0.3em;
    color: #444;
}
.jump-to ul {
    list-style-type: none;
    padding-left: 0;
}

/* ----------------------------------------------
    Saved tags
----------------------------------------------- */

.saved-tags {
    width: 100%;
    margin: -1.14em auto 1.14em auto;
    background-color: #eceff1;
    border-radius: 5px;
    padding: 1em 1em 1em 1em;
}
.saved-tags label {
    font-size: 1.1em;
    margin-right: 1.8em;
    color: #444;
}
.saved-tags p {
    display: inline;
    line-height: 2.25em;
}

/* ----------------------------------------------
    DROPDOWN MENU (User DASHBOARD menu)
----------------------------------------------- */

/* User area button and dropdown menu in the header: only shown when logged in */

.form-header .user-profile {
    font-size: 1em;
    margin-top: 1.8em;
    margin-right: 0.3em;
    color: #444;
    min-width: 80%;
    margin-left: 3.5em;
}
.form-header .user-profile img {
    width: 2.6em;
    margin-right: 0.5em;
}
.form-header .user-profile button {
    padding: 0.2em 1em;
    width: 90%;
    border: none;
    border-radius: 2px;
    outline: 0;
    background-color: transparent;
    transition: all 0.5s;
}
.form-header .user-profile button:hover {
    padding: 0.2em;
    background-color: #ffffff;
}

/* Bootstrap dropdown classes */

ul.dropdown-menu {
    border: none;
    border-radius: 2px;
    width: 90%;
    margin: 0 5%;
    box-shadow: none;
    background-color: #48585f;
}
ul.dropdown-menu a {
    color: #ffffff;
}

/* The button When the drop down menu is open */

.dropdown.open button#dropdownMenu1 {
    background-color: #ffffff;
}

/* ----------------------------------------------
    Masonry Blocks
----------------------------------------------- */

.masonry-layout7-5 {
    -webkit-column-count: 5;
    /* Chrome, Safari, Opera */
    -moz-column-count: 5;
    /* Firefox */
    column-count: 5;
    -webkit-column-gap: 0;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 0;
    /* Firefox */
    column-gap: 0;
}
.masonry-layout4 {
    -webkit-column-count: 4;
    /* Chrome, Safari, Opera */
    -moz-column-count: 4;
    /* Firefox */
    column-count: 4;
    -webkit-column-gap: 0;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 0;
    /* Firefox */
    column-gap: 0;
}
.masonry-layout2 {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
    -webkit-column-gap: 0;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 0;
    /* Firefox */
    column-gap: 0;
}
.masonry-layout__panel {
    break-inside: avoid;
    padding: 0.36em;
}
.masonry-layout__panel-content {
    padding: 5px 4px;
    border-radius: 10px;
}

/* ----------------------------------------------
    Field content and items
----------------------------------------------- */

/* Tooltip */
.tooltip-inner {
    padding: 7px 10px 7px 10px;
    text-align: left;
}

/* The field introduction text */

/*
.intro {
    padding: 1em 1.3em 0 1.3em;
    color: rgba(0, 0, 0, 0.6);
    font-style: italic;
}
 */

/* The description text toggler btn */

/*
.intro-toggle {
    padding: 0.25em 1.2em;
    border: none;
    outline: none;
    background-color: transparent;
}
 */

/* The show/hide text Bootstrap Glyphicon icon */

/*
.intro-toggle-icon {
    padding: 0.4em;
    font-size: 1em;
}
 */
.field-title {
    font-size: 1.4em;
    margin-left: 0.8em;
    line-height: 1.5;
}
.field-title a {
    float: right;
    color: rgb(51, 51, 51);
}
.field-title .glyphicon-question-sign {
    margin: 0.225em 0.5em 0 0;
}
.field-title .glyphicon-question-sign:hover {
    color: #ffffff !important;
}

/* Item list in the field */

ul.item_list {
    list-style-type: none;
    padding-left: 0;
    width: 100%;
    /* To make a place holder for empty lists. Being able to drop cards in empty fields */
    min-height: 0.5em;
}
li.added_item {
    width: 100%;
    margin: 0.5em auto;
    height: auto;
    overflow: scroll;
    /* cursor: move; */
    cursor: text;
}
ul.item_list .expandable {
    font-size: 0.95em;
    margin-left: 14px;
    margin-bottom: 5px;
    padding: 0.5em 0.5em 0.5em 1em;
    border-radius: 0.35em;;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 85% !important;
    outline: none;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.6);
    /* For auto expansion jQuery code */
    box-sizing: padding-box;
    overflow: hidden;
}

/* ----------------------------------------------
Zoom animation
----------------------------------------------- */

.zoom-in {
    -webkit-animation-name: zoom-in;    /* Safari 4.0-8.0 */
    -webkit-animation-duration: 0.25s;  /* Safari 4.0-8.0 */
    animation-name: zoom-in;
    animation-duration: 0.25s;
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 1);
}

/* Safari 4.0-8.0 */
@-webkit-keyframes zoom-in {
    from {
        -ms-transform: scale(1);        /* IE 9 */
        -webkit-transform: scale(1);    /* Safari */
        transform: scale(1);
        background-color: rgba(255, 255, 255, 0.6);
    }
    to {
        -ms-transform: scale(1.05);      /* IE 9 */
        -webkit-transform: scale(1.05);  /* Safari */
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 1);
    }
}

/* Standard */
@keyframes zoom-in {
    from {
        -ms-transform: scale(1);        /* IE 9 */
        -webkit-transform: scale(1);    /* Safari */
        transform: scale(1);                    
        background-color: rgba(255, 255, 255, 0.6);
    }
    to {
        -ms-transform: scale(1.05);      /* IE 9 */
        -webkit-transform: scale(1.05);  /* Safari */
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 1);
    }
}

.zoom-out {
    -webkit-animation-name: zoom-out;   /* Safari 4.0-8.0 */
    -webkit-animation-duration: 0.25s;  /* Safari 4.0-8.0 */
    animation-name: zoom-out;
    animation-duration: 0.25s;
    transform: scale(1);
    background-color: rgba(255, 255, 255, 0.6);
}

/* Safari 4.0-8.0 */
@-webkit-keyframes zoom-out {
    from {
        -ms-transform: scale(1);        /* IE 9 */
        -webkit-transform: scale(1);    /* Safari */
        transform: scale(1);
        background-color: rgba(255, 255, 255, 0.6);
    }
    to {
        -ms-transform: scale(1.05);      /* IE 9 */
        -webkit-transform: scale(1.05);  /* Safari */
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 1);
    }
}

/* Standard */
@keyframes zoom-out {
    from {
        -ms-transform: scale(1);        /* IE 9 */
        -webkit-transform: scale(1);    /* Safari */
        transform: scale(1);
        background-color: rgba(255, 255, 255, 0.6);
    }
    to {
        -ms-transform: scale(1.05);      /* IE 9 */
        -webkit-transform: scale(1.05);  /* Safari */
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 1);
    }
}

/* ----------------------------------------------
   List item handles: Bootstrap Glyphicon
----------------------------------------------- */

ul.item_list span.glyphicon {
    border-radius: 100%;
    margin-right: 10px;
    color: #ffffff;
    font-size: 1.2em;
    cursor: pointer;
}
span.glyphicon:hover {
    color: rgba(0, 0, 0, 0.5);
}

/* The handle icon for each item */

span.handle {
    margin-left: 14px;
    /* cursor: move; */
}

/* Placeholder for sorting items */

.sort-placeholder {
    border-radius: 0.35em;
    background-color: rgba(40, 40, 40, 0.35);
    width: 85%;
    height: 2.5em;
    padding: 0.5em 0.5em;
    margin-left: 1em;
}

/* ----------------------------------------------
    Tag selected term link
----------------------------------------------- */

p.tag-selected-term {
    margin-top: 20px;
    display: none;
}
p.tag-selected-term a {
    color: #ffffff;
    font-size: 1.05em;
    margin-left: 1em;
    margin-top: 2em;
    padding: 1em 1em 1em 2em;
    background-image: url('../icons/tag.svg');
    background-size: 2.2em;
    background-position: left;
    background-repeat: no-repeat;
}

/* ----------------------------------------------
    USER INPUT:
    Add new items in each field
----------------------------------------------- */

.user-input {
    width: 100%;
    margin-left: 1em;
    margin-top: 2em;
    padding-bottom: 1.5em;
    display: none;
    /* Shown (slide up and down) by jQuery when adding ideas */
}

/* The div containing all the user input things */

.add_box {
    /* Make room for the absolutely positioned div at the buttom each card always keeping a distance from the buttom of the card (as high as the height of the absolutely positined icon div + some distance) */
    padding-bottom: 5.3em;
}

/* Add an idea link */

a.add-idea {
    color: #ffffff;
    font-size: 1.05em;
    margin-left: 1em;
    margin-top: 2em;
    padding: 1em 1em 1em 2em;
    background-image: url('../icons/lightbulb.svg');
    background-size: 1.4em;
    background-position: left;
    background-repeat: no-repeat;
}

/* Textarea of a new item input */

.new_item {
    width: 90%;
    border: 1px solid #ffffff;
    border-radius: 0.35em;
    outline: none;
    padding-left: 0.5em;
    /* for auto expantion jQuery code */
    box-sizing: border-box;
    overflow: hidden;
}

/* The add button */

.add_btn {
    background-color: transparent;
    color: #ffffff;
    padding: 0.25em 1.2em;
    border: 0.12em solid #ffffff;
    border-radius: 0.5em;
}
.add_btn:hover {
    color: #37474f;
    border-color: #37474f;
}
li.added_item span {
    display: inline;
    margin-top: 5em;
}
.expandable {
    box-sizing: border-box;
    /* remove the user resizing for the text fields */
    resize: none;
    /* display: inline-block; */
    width: 75% !important;
}
.user-input span.chars {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.7);
}

/* Tag */
a.tag {
    background-color: rgba(55, 71, 79, 0.5);
    color: #ffffff;
    padding: 1px 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-decoration: none;
    white-space: nowrap;
}
a.tag:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(55, 71, 79, 0.5);
    padding: 1px 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-decoration: none;
    cursor: pointer;
}

/* Background shadow on all types of popups */
div#shadow {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------
    Move window and tag windows
----------------------------------------------- */

div.window {
    position: fixed;
    z-index: 3;
    top: 20%;
    border-radius: 10px;
    padding: 1em 1.5em 1em 1em;
    background-color: rgba(236, 239, 241, 0.95);
    display: none;
}
div.window button.close {
    outline: 0;
    position: relative;
    top: -8px;
    font-size: 2.5em;
}
div.window h2 {
    margin: 0 0 0.4em 0;
    font-size: 1.4em;
    line-height: 1.5;
}
div.window p {
    font-size: 0.95em;
}

/* ----------------------------------------------
    Move window
----------------------------------------------- */

div#move-window {
    left: 35%;
    width: 30%;
}
div#move-window .move-window-button {
    background-color: transparent;
    color: rgb(51, 51, 51);
    padding: 0.25em 1.2em;
    border: 0.12em solid rgb(51, 51, 51);
    border-radius: 0.5em;
}
div#move-window .move-window-button:hover {
    color: #ffffff;
    border-color: #ffffff;
}
div#move-window h2 {

}
div#move-window ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

/* ----------------------------------------------
    Tag window
----------------------------------------------- */

div#tag-window {
    width: 75%;
    max-height: 80%;
    overflow: scroll;
    /* Center window horizontally and vertically */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
}
/*
div#tag-window h2#tag-description { 
}
 */
div#tag-window textarea#tag-description {
    font-size: 0.95em;
    outline: none;
    width: 100%;
    border: 1px solid #ffffff;
    border-radius: 0.35em;
    margin: 0 0 0.75em 0;
    padding-left: 0.5em;
    resize: none;
    color: rgb(117, 117, 117);
}
div#tag-window span.chars {
    font-size: 1.1em;
    color: rgb(117, 117, 117);
}
div#tag-window .tag-window-button {
    background-color: transparent;
    color: rgb(51, 51, 51);
    padding: 0.25em 1.2em;
    border: 0.12em solid rgb(51, 51, 51);
    border-radius: 0.5em;
}
div#tag-window .tag-window-button:hover {
    color: #ffffff;
    border-color: #ffffff;
}
div#tag-window #delete-tag {
    display: none;
}
div#tag-window h2.similar-tags {
    margin: 0.95em 0 -0.2em 0;
}
div#tag-window p.similar-tags-tag {
    margin: 0.95em 0 0.4em 0;
}
div#tag-window p.similar-tags-description {
    margin: 0;
}
div#tag-window p.similar-tags-description-none {
    margin: 0.25em 0 0 0;
    display: none;
}
div#tag-window p.similar-tags-username {
    margin: 0;
    font-size: 0.75em;
}

/* ----------------------------------------------
    Field bottom area
----------------------------------------------- */

div.card {
    position: relative;
}
.field-bottom {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0 0 10px 10px;
    height: 40px;
    bottom: 0;
    position: absolute;
    left: 0;
    width: 100%;
}
.field-bottom > img[src*=field] {
    width: 25px;
    height: 25px;
    margin-top: 7px;
    margin-left: 10px;
}
.field-bottom > img[src*=number] {
    float: right;
    width: 25px;
    height: 18px;
    margin-top: 11px;
    margin-right: 10px;
}

/* ----------------------------------------------
    FORM Import & Export buttons
----------------------------------------------- */

.imp-exp-btn {
    margin-top: 2.5em;
    padding-left: 5px;
    padding-right: 5px;
}
button.json_exp, button.share_canvas, .pdf_exp {
    border: none;
    border-radius: 0.5em;
    padding: 1em 0;
    width: 60%;
    outline: none;
}
button.json_exp:hover, button.share_canvas:hover {
    opacity: 0.6;
}
.pdf_exp:hover {
    text-decoration: underline;
}
button.json_exp {
    background-color: #aed581;
    margin: 1em auto 0 auto;
}
button.share_canvas {
    background-color: #a67de0;
    margin: 0.5em auto 0.4em auto;
}
.pdf_exp {
    background-color: #85ade5;
    margin: 0.5em auto 0.4em auto;
}

/* The sign up or login to save link for unregistered users */

a.login-to-save {
    display: block;
    padding: 1em;
    color: #444;
    border: none;
    border-radius: 0.5em;
    padding: 1em 0;
    width: 60%;
    outline: none;
    margin: 1em auto 0 auto;
    background-color: #aed581;
}

/* The save canvas PHP under the save/export buttons */

.save-canvas-feedback p {
    text-align: center;
    color: #15af97;
}
.save-canvas-feedback span {
    color: #15af97;
    margin-right: 0.4em;
}
.save-canvas-feedback-fail p {
    text-align: center;
    color: #37474f;
}
.save-canvas-feedback-fail span {
    color: #37474f;
    margin-right: 0.4em;
}

/* Sharing the canvas */
/* The share canvas button */
.share_canvas{
}
.share_canvas_email{
    display: none;
}
.share_canvas_email input{
    width: 80%;
    padding: 1em;
    border-radius: 5px;
    border: 1px solid #444;
}
.share_canvas_email input:focus{
    outline: none;
}

/* The send btn */
.share_canvas_send{
    border: none;
    border-radius: 0.5em;
    padding: 1em 0;
    width: 25%;
    outline: none;
    background-color: #546e7a;
    color: #ffffff;
}

/* ----------------------------------------------
    Footer
----------------------------------------------- */

footer {
    font-size: 1em;
    margin-top: 2em;
    padding: 1.5em;
    background-color: #37474f;
    color: #ffffff;
}
footer .license a {
    color: #759BCF;
}
footer .license {
    margin: 0.5em auto 1.8em auto;
}
footer .contact p {
    color: #18AE90;
}
footer .contact h2 {
    color: #6bb5b4;
}
footer p.ethics-copy.terms, footer p.ethics-copy.privacy {
    text-decoration: none;
    padding: 0 0.5em;
    display: inline-block;
}
footer p.cc {
    margin-top: 2.8em;
}
footer p.terms, footer p.privacy {
    margin: 1.9em auto;
}
footer .privacy a {
    color: #a67de0;
}
footer .terms a {
    color: #aed581;
}

/* Footer license icons */

footer .license-icons ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}
footer .license-icons li {
    display: inline-block;
    margin: 1.2em 0.2em;
}
footer .license-icons ul img {
    width: 3.5em;
}

/* ----------------------------------------------
    Dialog windows
----------------------------------------------- */

div.dialog {
    display: none;
    width: 26%;
    position: fixed;
    top: 37%;
    left: 37%;
    font-family: 'Open Sans', sans-serif;
    z-index: 2;
    background-color: rgba(236, 239, 241, 0.95);
    border-radius: 5px;
    min-height: 150px;
}
div.dialog h2 {
    font-size: 1.4em;
    margin: 0;
    color: #444;
}
div.dialog p {
    font-size: 0.95em;
    color: rgb(51, 51, 51);
}
div.dialog button {
    position: relative;
    top: -8px;
    font-size: 2.5em;
    outline: 0;
    color: #444;
    float: right;
}
div.dialog-header {
    background-color: rgb(200, 200, 200);
    padding: 0.65em 0.75em 0.65em 0.75em;
    border-radius: 5px 5px 0 0;
    width: 100%;
}
div.dialog-content {
    padding: 0.75em 1.5em 0.75em 0.75em;
}

/* ----------------------------------------------
    Masonry Colors (ADAPT)
----------------------------------------------- */

.bg--blue {
    background-color: #85ade5;
}
.bg--darkblue {
    background-color: #8b99e0;
}
.bg--green {
    background-color: #aed581;
}
.bg--seagreen {
    background-color: #6bb5b4;
}
.bg--purple {
    background-color: #a281d1;
}
.bg--green1 {
    background-color: #29bca4;
}
.bg--x {
    background-color: #ce93d8;
}
.bg--mineral {
    background-color: #607d8b;
}

/* ================================================
    MEDIA QUERIES
================================================= */

/* ----------------- 1 COL ----------------- */

@media (max-width: 499px) {
    .masonry-layout7-5 {
        column-count: 1;
        column-gap: 0;
    }
    .masonry-layout4 {
        column-count: 1;
        column-gap: 0;
    }
    .masonry-layout2 {
        column-count: 1;
        column-gap: 0;
    }
    /* Adjust the height of culumns to maintain the layout */
    .field_01, .field_04, .field_09, .field_06 {
        min-height: 250px;
    }
    .field_03, .field_05, .field_02 {
        min-height: 250px;
    }
    .field_07, .field_08 {
        min-height: 250px;
    }
    /* Adjusting textarea heights */
    .added_item .expandable {
        height: 8em;
    }
    /* Dialog */
    div.dialog {
        width: 60%;
        left: 20%;
    }
    /* Form Header */
    .form-header {
        width: 100%;
        padding-bottom: 2em;
    }
    .form-header h1 {
        margin-bottom: 1em;
    }
    .form-header label {
        margin-top: 0.6em;
        display: block;
        text-align: left;
    }
    .form-header input {
        width: 95%;
        display: block;
    }
    .form-header p {
        margin-top: 1.85em;
    }
    /* Jump to */
    .jump-to-click-area {
        position: fixed;
        top: 0;
        margin-left: -15px;
        height: 48px;
        width: 100%;
        z-index: 2;
        cursor: pointer;
        display: none;
    }
    .jump-to-click-area-toggle {
        display: block;
    }
    .jump-to {
        width: 100%;
        overflow: hidden;
        min-height: 64px;
        border-radius: 5px;
        display: block;
    }
    .jump-to-toggle {
        /* display: none; */
        position: fixed;
        top: 0;
        z-index: 1;
        margin-left: -15px;
        border-radius: 0;
        padding-top: 2em;
    }
    /*
    .jump-to-list {
    }
     */
    .jump-to-list-toggle {
        display: none;
    }
    .jump-to hr {
        color: rgb(222, 222, 222);
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        margin-left: auto;
        margin-right: auto;
        border-style: solid;
        border-width: 1px;
    }
    .jump-to ul {
        margin-top: 5px;
        width: 110%;
        margin-left: -15px;
        margin-bottom: -5px;
        padding-top: 5px;
        padding-left: 15px;
        padding-bottom: 10px;
    }
    .jump-to-img {
        margin-right: 5px;
        height: 18px;
        width: 18px;
        display: none;
    }
    .jump-to-img-toggle {
        display: inline;
    }
    /*
    .jump-to .jump-to-arrow {
        display: inline-block;
    }
     */
    /*
    .jump-to label {
        cursor: pointer;
    }
     */
    .jump-to-arrow-90 {
        transform: rotate(90deg);
        transition: .3s;
    }
    .jump-to-arrow-0 {
        transform: rotate(0deg);
        transition: .3s;
    }
    /* Saved tags */
    .saved-tags {
        padding: 1em 1em 0.3em 1em;
    }
    .saved-tags label {
        margin-right: 0.3em;
    }
    .saved-tags p {
        display: block;
    }
    /* Move window */
    div#move-window {
        left: 15%;
        width: 70%;
    }
    /* Tag window */
    div#tag-window textarea#tag-description {
        width: 100%;
    }
    /* User area button and dropdown menu in the header: only shown when logged in */
    .form-header .user-profile {
        margin-left: 0;
        width: 95%;
    }
    /* The button When the drop down menu is open */
    .dropdown button#dropdownMenu1 {
        width: 100%;
        margin: auto;
    }
    /* Bootstrap dropdown classes */
    ul.dropdown-menu {
        margin-left: 0;
        width: 100%;
        margin: auto;
    }
}

/* ----------------- 2 COL ----------------- */

@media (min-width: 500px) and (max-width: 934px) {
    .masonry-layout7-5 {
        column-count: 2;
        column-gap: 0;
    }
    .masonry-layout4 {
        column-count: 2;
        column-gap: 0;
    }
    /* Adjust the height of culumns to maintain the layout */
    .field_01, .field_04, .field_09, .field_06 {
        min-height: 460px;
    }
    .field_02 {
        min-height: 930px;
    }
    .field_03, .field_05 {
        min-height: 460px;
    }
    .field_07, .field_08 {
        min-height: 460px;
    }
    /* Adjusting textarea heights */
    .added_item .expandable {
        height: 8em;
    }
    /* Dialog */
    div.dialog {
        width: 46%;
        left: 27%;
    }
    /* Form Header */
    .form-header {
        width: 100%;
    }
    .form-header h1 {
        text-align: center;
    }
    .form-header label {
        margin-top: 1.8em;
        display: block;
        text-align: center;
    }
    .form-header input {
        width: 50%;
        display: block;
        margin: auto;
    }
    .form-header p {
        margin-top: 1.85em;
    }
    a.logo img {
        display: block;
        width: 40%;
        margin: auto;
    }
    /* Saved tags */
    .saved-tags {
        padding: 1em 1em 0.3em 1em;
    }
    .saved-tags label {
        margin-right: 0.3em;
    }
    .saved-tags p {
        display: block;
    }
    /* Move window */
    div#move-window {
        left: 25%;
        width: 50%;
    }
    /* Tag window */
    div#tag-window textarea#tag-description {
        width: 100%;
    }
    /* User area button and dropdown menu in the header: only shown when logged in */
    .form-header .user-profile {
        margin-left: 0;
        width: 50%;
        margin: 2em auto;
    }
    /* The button When the drop down menu is open */
    .dropdown button#dropdownMenu1 {
        width: 60%;
        margin: 0 20%;
    }
    /* Bootstrap dropdown classes */
    ul.dropdown-menu {
        margin-left: 0;
        width: 60%;
        margin: 0 20%;
    }
}

/* ----------------- 4 COL Smaller ----------------- */

@media (min-width: 935px) and (max-width: 991px) {
    .masonry-layout7-5 {
        column-count: 4;
        column-gap: 0;
    }
    .masonry-layout4 {
        column-count: 4;
        column-gap: 0;
    }
    /* Adjust the height of culumns to maintain the layout */
    .field_01, .field_04, .field_09, .field_06 {
        min-height: 500px;
    }
    .field_02 {
        min-height: 1010px;
    }
    .field_03, .field_05 {
        min-height: 500px;
    }
    .field_07, .field_08 {
        min-height: 500px;
    }
    /* Dialog */
    div.dialog {
        width: 30%;
        left: 37%;
    }
    /* Form Header */
    .form-header {
        width: 100%;
    }
    .form-header h1 {
        text-align: center;
    }
    .form-header label {
        margin-top: 1.8em;
        display: block;
        text-align: center;
    }
    .form-header input {
        width: 50%;
        display: block;
        margin: auto;
    }
    .form-header p {
        margin-top: 1.85em;
    }
    /* User area button and dropdown menu in the header: only shown when logged in */
    .form-header .user-profile {
        margin-left: 0;
        width: 60%;
        margin: 2em auto;
        transition: all 0.4s;
    }
    /* The button When the drop down menu is open */
    .dropdown button#dropdownMenu1 {
        width: 62%;
        margin: 0 18%;
    }
    /* Bootstrap dropdown classes */
    ul.dropdown-menu {
        margin-left: 0;
        width: 62%;
        margin: 0 18%;
    }
}
@media (min-width: 935px) and (max-width: 1153px) {
    /* Adjusting textarea heights */
    .added_item .expandable {
        height: 8em;
    }
}

/* ---------------- 4 COL Large ---------------- */

@media (min-width: 992px) and (max-width: 1153px) {
    .masonry-layout7-5 {
        column-count: 4;
        column-gap: 0;
    }
    .masonry-layout4 {
        column-count: 4;
        column-gap: 0;
    }
    /* DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM */
    /* Adjust the height of culumns to maintain the layout */
    .field_01, .field_04, .field_09, .field_06 {
        min-height: 480px;
    }
    
    .field_02 {
        min-height: 970px;
    }
    
    .field_03, .field_05 {
        min-height: 480px;
    }
    .field_07, .field_08 {
        min-height: 480px;
    }
    /* Dialog */
    div.dialog {
        width: 30%;
        left: 37%;
    }
    /* Form Header */
    .form-header {
        width: 100%;
        min-height: 8em;
    }
    .form-header h1 {
        font-size: 1.7em;
    }
    .form-header label {
        margin-top: 1.8em;
        display: block;
        text-align: left;
    }
    .form-header input {
        width: 100%;
        display: block;
    }
    .form-header p {
        margin-top: 2em;
    }
}
@media (min-width: 1052px) and (max-width: 1153px) {
    /* Adjusting textarea heights */
    .added_item .expandable {
        height: 8em;
    }
    .new_item {}
}

/* ---------------- 5 COL ---------------- */

@media (min-width: 1154px) and (max-width: 1650px) {
    /* DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM */
    /* Adjust the height of culumns to maintain the layout */
    .field_01, .field_02, .field_09 {
        min-height: 917px;
    }
    .field_03, .field_05 {
        min-height: 428px;
    }
    .field_04, .field_06 {
        min-height: 478px;
    }
    .field_07, .field_08 {
        min-height: 390px;
    }
}
@media (min-width: 1154px) and (max-width: 1702px) {
    /* Adjusting textarea heights */
    .added_item .expandable {
        height: 8.5em;
    }
    .new_item {}
}

/* ---------------------------------------------- */

@media (min-width: 1651px) {
    /* DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM */
    /* Adjust the height of culumns to maintain the layout */
    .field_01, .field_02, .field_09 {
        min-height: 775px;
    }
    .field_03, .field_05 {
        min-height: 375px;
    }
    .field_04, .field_06 {
        min-height: 390px;
    }
    .field_07, .field_08 {
        min-height: 340px;
    }
}

/* ---------------- Header space bug fix ---------------- */

@media (min-width: 500px) and (max-width: 991px) {
    .form-header {
        padding-bottom: 30px;
    }
}
@media (min-width: 1154px) and (max-width: 1240px) {
    input.proj_title {
        margin-right: -9px;
    }
}