#constructor * {
    transition: none;
}
#constructor input[type="number"], 
#constructor input[type="text"], 
#constructor input[type="email"], 
#constructor input[type="tel"], 
#constructor textarea {
    margin-bottom: 5px;
}
#constructor {
    background-size: 1920px auto;
    position: relative;
    margin-bottom: -1px;
    padding-bottom: 100px;
    background: #000000;
    overflow: hidden;
    width: 100%;
    min-height: 400px;
}
/* ВЫШЕ ЭТОЙ СТРОКИ CSS ЕСЛИ МЕНЯЕМ, ТО НАДО ОБНОВИТЬ СПИСОК ИСКЛЮЧЕНИЙ В JCH OPTIMIZE */
#constructor::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -150px;
    left: 0;
    width: 100%;
    height: 600px;
    background: url(../img/mg/smoke-dark.png) no-repeat center bottom;
    background-size: 1920px auto;
    z-index: 5;
}
@media screen and (min-width: 1920px) {
    #constructor:before {
        background-size: 100% 600px;
    }
}
#constructor-body {
    color: #fff;
    margin-right: 15px;
    padding-top: 35px;
    padding-bottom: 40px;
    margin-left: 75px;
    height: 680px;
}

.generator-preview {
    width: 60%;
    float: left;
}
.assets-loading #constructor-canvas {
    opacity: 0;
}
#constructor-canvas {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    box-shadow: 0 25px 25px -25px #000;
    backface-visibility: hidden;
    width: 600px; 
    height: 400px;
    text-align: center;
    font-size: 1px;
    background: #000000 url(../img/mg/m-1.jpg) no-repeat center center;
    background-size: 100% 100%;
    color: #000;
    transform: rotateY(10deg);
    outline: 1px solid transparent;
    -webkit-box-reflect: below 1px -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, transparent 30%, transparent 100%);
}
.calculating #constructor-canvas-wrap {
    -webkit-perspective: 0;
    perspective: 0;
}
.calculating #constructor-canvas {
    transform: none;
}
#constructor-canvas.material-n2 {
    background-image: url(../img/mg/m-2.jpg);
}

#frames-canvas {
    position: absolute;
    left: 19px;
    top: 19px;
    right: 19px;
    bottom: 19px;
    width: auto;
    height: auto;
}
#constructor-canvas:before {
    content: '';
    display: block;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}
#constructor-canvas-inside {
    position: absolute;
    height: 100%;
    box-sizing: border-box;
}
#corner-top-left {
    position: absolute;
    left: 0;
    top: 0;
}
#corner-top-left img {
    position: absolute;
    left: 0;
    top: 0;
}
#corner-top-right {
    position: absolute;
    right: 0;
    top: 0;
}
#corner-top-right img {
    position: absolute;
    right: 0;
    top: 0;
}
#corner-bottom-left {
    position: absolute;
    left: 0;
    bottom: 0;
}
#corner-bottom-left img {
    position: absolute;
    left: 0;
    bottom: 0;
}
#corner-bottom-right {
    position: absolute;
    right: 0;
    bottom: 0;
}
#corner-bottom-right img {
    position: absolute;
    right: 0;
    bottom: 0;
}
#center-top {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    text-align: center;
}
#center-top img {
    position: absolute;
    left: 0;
    top: 0;
}
#center-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
#center-bottom img {
    position: absolute;
    left: 0;
    bottom: 0;
}
#center-left {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
}
#center-left img {
    position: absolute;
    left: 0;
    top: 0;
}
#center-right {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
}
#center-right img {
    position: absolute;
    right: 0;
    top: 0;
}

/* Позиции для разных элементов на табличке */
.cross {
    position: absolute;
    left: 10px;
    right: 10px;
    top: -1%;
    height: 15%;
    text-align: center;
}
.name {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 14%;
    bottom: 29%;
    height: auto;
    width: auto;
    display: none;
}
.years {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 72%;
    bottom: 17%;
    width: auto;
    height: auto;
}
.epitaph {
    position: absolute;
    left: 15%;
    right: 15%;
    width: auto;
    top: 84%;
    bottom: -2%;
    height: auto;
}
.photo {
    display: none;
    position: absolute;
    top: 14%;
    bottom: 20%;
    height: auto;
    border-radius: 50% 50%;
    background: #f3f3f3 url(../img/mg/placeholder.png) no-repeat center bottom;
    background-size: 100% auto;
}
.has-photo-on-left .photo {
    left: 17%;
}
.has-photo-on-right .photo {
    left: 83%;
}
#photo-canvas {
    position: absolute;
    left: 3%;
    width: 94%;
    top: 6%;
    height: 88%;
}

.no-cross .name-1 {
    top: 10%;
}
.names-lines-1 .years,
.names-lines-2 .years {
    margin-top: -3%;
    margin-bottom: 3%;
}
.epitaph-lines-1 .epitaph {
    margin-top: 3%;
    margin-bottom: 2%;
}
.epitaph-lines-0 .years,
.epitaph-lines-1 .years {
    margin-top: 2%;
    margin-bottom: -2%;
}
.names-lines-1.epitaph-lines-0 .years,
.names-lines-2.epitaph-lines-0 .years,
.names-lines-1.epitaph-lines-1 .years,
.names-lines-2.epitaph-lines-1 .years {
    margin-top: -1%;
    margin-bottom: 1%;
}
.no-center-top.has-frame .cross {
    margin-top: -3%;
    height: 17%;
}

.no-cross.epitaph-lines-3 .name,
.no-cross.epitaph-lines-4 .name {
    margin-top: -5%;
    margin-bottom: 5%;
}
.no-cross.epitaph-lines-3 .years,
.no-cross.epitaph-lines-4 .years {
    margin-top: -5%;
    margin-bottom: 5%;
}
.no-cross.epitaph-lines-3 .photo,
.no-cross.epitaph-lines-4 .photo {
    margin-top: -5%;
    margin-bottom: 5%;
}
.no-cross.epitaph-lines-3 .epitaph,
.no-cross.epitaph-lines-4 .epitaph {
    margin-top: -5%;
}

.has-photo .photo-on-canvas {
    display: block;
}
.has-photo .years {
    top: 68%;
    bottom: 20%;
}

.cross img {
    width: auto;
    height: 100%;
}

.name-canvas {
    display: none;
}

/*  ORIENTATION HORIZONTAL */
.has-holes-holes-center-4 .orientation-horizontal.has-cross .cross,
.has-holes-holes-vertical-center .orientation-horizontal.has-cross .cross {
    top: 3%;
    height: 14%;
}
.has-holes-holes-center-4 .orientation-horizontal.has-cross .name,
.has-holes-holes-vertical-center .orientation-horizontal.has-cross .name {
    top: 15%;
}
/*  ENF ORIENTATION HORIZONTAL */

/* MODE 1 ORIENTATION HORIZONTAL */
.constructor-mode-1 .orientation-horizontal .name-1 {
    display: block;
}
.constructor-mode-1 .orientation-horizontal .single-name-canvas {
    display: block;
}

/* MODE 2 ORIENTATION HORIZONTAL */
.constructor-mode-2 .orientation-horizontal .name-1,
.constructor-mode-2 .orientation-horizontal .name-2 {
    display: block;
}
.constructor-mode-2 .orientation-horizontal .name-1 {
    bottom: 60%;
}
.constructor-mode-2 .has-holes-holes-vertical-center .orientation-horizontal.has-cross .name-2,
.constructor-mode-2 .has-holes-holes-center-4 .orientation-horizontal.has-cross .name-2,
.constructor-mode-2 .orientation-horizontal .name-2 {
    top: 40%;
}
.constructor-mode-2 .orientation-horizontal .last-name-canvas,
.constructor-mode-2 .orientation-horizontal .first-name-canvas-1,
.constructor-mode-2 .orientation-horizontal .first-name-canvas-2 {
    display: block;
}

/* MODE 3 ORIENTATION HORIZONTAL */
.constructor-mode-3 .orientation-horizontal .name-2 {
    display: block;
}
.constructor-mode-3 .orientation-horizontal .first-name-canvas-1,
.constructor-mode-3 .orientation-horizontal .first-name-canvas-2  {
    display: block;
}


/* MODE 1 ORIENTATION HORIZONTAL */
.constructor-mode-1 .orientation-vertical .name-1 {
    display: block;
    top: 18%;
    bottom: 33%;
}
.constructor-mode-1 .orientation-vertical .years {
    top: 70%;
    bottom: 20%;
}
.constructor-mode-1 .orientation-vertical.no-cross.no-photo .name-1 {
    top: 12%;
    bottom: 39%;
}
.constructor-mode-1 .orientation-vertical.no-cross.no-photo .years {
    top: 66%;
    bottom: 24%;
}
.constructor-mode-1 .orientation-vertical .single-name-canvas {
    display: block;
}

/* MODE 2 ORIENTATION VERTICAL */
.constructor-mode-2 .orientation-vertical .cross {
    height: 12%;
    top: -2%;
}
.constructor-mode-2 .orientation-vertical .name-1,
.constructor-mode-2 .orientation-vertical .name-2,
.constructor-mode-2 .orientation-vertical .name-3 {
    display: block;
}
.constructor-mode-2 .orientation-vertical .name-1 .last-name-canvas,
.constructor-mode-2 .orientation-vertical .name-2 .first-name-canvas-1,
.constructor-mode-2 .orientation-vertical .name-3 .first-name-canvas-2 {
    display: block;
}
.constructor-mode-2 .orientation-vertical .years-2 {
    display: block;
}
.constructor-mode-2 .orientation-vertical .years-1 .years-canvas-2 {
    display: none;
}
.constructor-mode-2 .orientation-vertical .years-2 .years-canvas-2 {
    display: block;
}
.constructor-mode-2 .orientation-vertical .name-1 {
    top: 10%;
    bottom: 70%;
}
.constructor-mode-2 .orientation-vertical .name-2 {
    top: 30%;
    bottom: 50%;
}
.constructor-mode-2 .orientation-vertical .years-1 {
    top: 50%;
    bottom: 42%;
}
.constructor-mode-2 .orientation-vertical .name-3 {
    top: 60%;
    bottom: 20%;
}
.constructor-mode-2 .orientation-vertical .name-3 .first-name-canvas-2 {
    top: 0;
}
.constructor-mode-2 .orientation-vertical .years-2 {
    top: 80%;
    bottom: 10%;
}
.constructor-mode-2 .orientation-vertical .years-canvas {
    width: 100%;
}
.constructor-mode-2 .orientation-vertical .names-sep {
    display: none;
}
.constructor-mode-2 .orientation-vertical .epitaph {
    top: 90%;
    margin-bottom: -2%;
}

/* MODE 3 ORIENTATION VERTICAL */
.constructor-mode-3 .orientation-vertical .cross {
    height: 12%;
    top: -1%;
}
.constructor-mode-3 .orientation-vertical .name-2,
.constructor-mode-3 .orientation-vertical .name-3 {
    display: block;
}
.constructor-mode-3 .orientation-vertical .name-2 .first-name-canvas-1,
.constructor-mode-3 .orientation-vertical .name-3 .first-name-canvas-2 {
    display: block;
}
.constructor-mode-3 .orientation-vertical .years-2 {
    display: block;
}
.constructor-mode-3 .orientation-vertical .years-1 .years-canvas-2 {
    display: none;
}
.constructor-mode-3 .orientation-vertical .years-2 .years-canvas-2 {
    display: block;
}
.constructor-mode-3 .orientation-vertical .name-2 {
    top: 10%;
    bottom: 60%;
}
.constructor-mode-3 .orientation-vertical .years-1 {
    top: 40%;
    bottom: 52%;
}
.constructor-mode-3 .orientation-vertical .name-3 {
    top: 50%;
    bottom: 20%;
}
.constructor-mode-3 .orientation-vertical .name-3 .first-name-canvas-2 {
    top: 0;
}
.constructor-mode-3 .orientation-vertical .years-2 {
    top: 80%;
    bottom: 10%;
}
.constructor-mode-3 .orientation-vertical .years-canvas {
    width: 100%;
}
.constructor-mode-3 .orientation-vertical .names-sep {
    display: none;
}
.constructor-mode-3 .orientation-vertical .epitaph {
    top: 90%;
    margin-bottom: -1%;
}
.constructor-mode-3 .orientation-vertical.no-cross .name-2 {
    top: 5%;
    bottom: 65%;
}
.constructor-mode-3 .orientation-vertical.no-cross .years-1 {
    top: 35%;
    bottom: 57%;
}

/* ВЕРТИКАЛЬНАЯ ТАБЛИЧКА */
.orientation-vertical .epitaph {
    margin-left: -7%;
    margin-right: -7%;
}

/* ВЕРТИКАЛЬНАЯ ТАБЛИЧКА С ФОТО === ТОЛЬКО ДЛЯ ОДИНОЧНОЙ - MODE=1 */
.has-photo.orientation-vertical #photo-canvas {
    margin-top: 2%;
}
.has-photo.orientation-vertical.no-frame #photo-canvas {
    margin-top: -3%;
}
.has-photo.orientation-vertical .photo-on-canvas {
    display: block;
}
.has-photo.orientation-vertical .photo {
    left: 50%;
    top: 0;
    height: auto;
    bottom: 50%;
}
.has-cross.has-photo.orientation-vertical .cross {
    height: 15%;
    margin-top: 12%;
    margin-left: 1%;
    text-align: left;
}
.has-photo.orientation-vertical .name {
    margin-right: 0;
    margin-top: 47%;
    margin-bottom: -25%;
}
.has-photo.orientation-vertical .years {
    margin-right: 0;
    margin-top: 22%;
    margin-bottom: -16%;
}
.dates-lines-2 .years,
.dates-lines-3 .years,
.dates-lines-4 .years {
    margin-bottom: -7%!important;
}
.has-photo.orientation-vertical.dates-lines-2 .years,
.has-photo.orientation-vertical.dates-lines-3 .years,
.has-photo.orientation-vertical.dates-lines-4 .years {
    margin-bottom: -23%;
}
.dates-lines-2 .epitaph,
.dates-lines-3 .epitaph,
.dates-lines-4 .epitaph {
    margin-top: 7%;
}
.has-photo.orientation-vertical .epitaph {
    margin-top: 12%;
    margin-bottom: -6%;
}


.constructor-mode-3 .no-photo.orientation-vertical.dates-lines-0.epitaph-lines-0 .name {
    margin-top: 9%;
    margin-bottom: -9%;
}

/* Конец - Позиции для разных элементов на табличке */


/* ФИКСЫ ПО РАМКЕ */
.has-frame-id-13 #constructor-canvas-inside {
    margin-top: -4%;
}
.has-frame-id-1.has-photo.orientation-vertical #photo-canvas,
.has-frame-id-2.has-photo.orientation-vertical #photo-canvas,
.has-frame-id-3.has-photo.orientation-vertical #photo-canvas,
.has-frame-id-14.has-photo.orientation-vertical #photo-canvas {
    margin-top: -1%;
}
.has-frame-id-14.has-photo.orientation-vertical .cross {
    margin-left: 0;
    margin-top: 18%;
}
.has-frame-id-1 .epitaph,
.has-frame-id-2 .epitaph,
.has-frame-id-3 .epitaph {
    margin-bottom: -1%;
}
.has-frame-id-4 .epitaph,
.has-frame-id-12 .epitaph,
.has-frame-id-14 .epitaph {
    margin-bottom: -2%;
}



.last-name-canvas {
    position: absolute;
    left: 5%; 
    top: 0;
    width: 90%;
    height: 45%;
}
.first-name-canvas-1,
.first-name-canvas-2 {
    position: absolute;
    top: 0;
    height: 100%;
}
.first-name-canvas-1 {
    left: 0;
}
.first-name-canvas-2 {
    right: 0;
}

.names-sep {
    width: 2px;
    left: 50%;
    margin-left: -1px;
    position: absolute;
    height: 0;
    background: #000000;
    display: none;
}
.constructor-mode-3 .names-sep,
.constructor-mode-2 .names-sep {
    display: block;
}
.constructor-style-outline .names-sep {
    border: 1px solid #000000;
    background: #fff8f1;
    margin-left: -2px;
    width: 4px;
}  


.years-canvas {
    position: absolute;
    top: 0;
    width: 48%;
    height: 100%;
}
.constructor-mode-1 .years-canvas {
    left: 2%;
    width: 96%;
}
.constructor-mode-3 .years-canvas,
.constructor-mode-2 .years-canvas {
    width: 48%;
}
.constructor-mode-3 .years-canvas-1,
.constructor-mode-2 .years-canvas-1 {
    left: 0;
}
.years-canvas-2 {
    display: none;
}
.constructor-mode-3 .years-canvas-2,
.constructor-mode-2 .years-canvas-2  {
    right: 0;
    display: block;
}
.mode-flexible-field {
    display: none;
}
.constructor-mode-1 .mode-flexible-field.display-for-mode-1 {
    display: block;
}
.constructor-mode-2 .mode-flexible-field.display-for-mode-2 {
    display: block;
} 
.constructor-mode-3 .mode-flexible-field.display-for-mode-3 {
    display: block;
}

.mode-flexible-field.half-col-field {
    width: 49%;
    float: left;
    clear: left;
}
.mode-flexible-field.half-col-field.half-right-part {
    float: right;
    clear: none;
}

.editor-orientation-horizontal .option-photo-on-top {
    display: none!important;
}
.constructor-mode-1.editor-orientation-vertical .option-photo-on-top {
    display: block;
}
.editor-orientation-vertical .option-photo-on-left,
.editor-orientation-vertical .option-photo-on-right {
    display: none!important;
}

.constructor-mode-1 .last-name-half-col-field-1,
.constructor-mode-1 .first-name-half-col-field-1,
.constructor-mode-2 .last-name-half-col-field-1 {
    width: 100%;
    float: none;
}

.hole {
    width: 1.5%;
    height: 1.5%;
    display: block;
    border: 1px solid #000;
    border-radius: 100%;
    position: absolute;
    background: #000000;
    box-shadow: inset -1px -1px 1px #333, inset 1px 1px 1px #333;
}
.hole::after,
.hole::before {
    content: '';
    display: none;
    position: absolute;
}
.hole::after {
    left: 50%;
    top: 0;
    height: 100%;
    border-left: 1em solid #000;
    margin-left: -.5em;
}
.hole::before {
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1em solid #000;
    margin-top: -.5em;
}
.hole-top-left {
    left: 1.5%;
    top: 1.5%;
}
.hole-top-right {
    right: 1.5%;
    top: 1.5%;
}
.hole-bottom-left {
    left: 1.5%;
    bottom: 1.5%;
}
.hole-bottom-right {
    right: 1.5%;
    bottom: 1.5%;
}
.hole-center-left {
    top: 50%;
    margin-top: -0.75%;
    left: 1.5%;
}
.hole-center-right {
    top: 50%;
    margin-top: -0.75%;
    right: 1.5%;
}
.hole-top-center {
    left: 50%;
    margin-left: -0.75%;
    top: 1.5%;
}
.hole-bottom-center {
    left: 50%;
    margin-left: -0.75%;
    bottom: 1.5%;
}
.holes-set {
    display: none;
}

#constructor-canvas-wrap {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    clear: both;
    margin-top: 85px;
}
#constructor-canvas > * {
    opacity: .8;
}
#constructor-canvas > .holes-set {
    opacity: 1;
}
#constructor-form.calculating #constructor-canvas-wrap {
    perspective: 0;
}
#constructor-form.calculating #constructor-canvas {
    transform: none;
}

.constructor-mode-2 .life-dates,
.constructor-mode-3 .life-dates {
    display: flex;
    justify-content: space-between;
}
.constructor-mode-2 .life-dates-1,
.constructor-mode-2 .life-dates-2,
.constructor-mode-3 .life-dates-1,
.constructor-mode-3 .life-dates-2 {
    flex: 0 0 49%;
}
.constructor-mode-2 .life-dates-1 .field-control.date-input,
.constructor-mode-2 .life-dates-2 .field-control.date-input,
.constructor-mode-3 .life-dates-1 .field-control.date-input,
.constructor-mode-3 .life-dates-2 .field-control.date-input {
    width: 100%;
    float: none;
}


#constructor img {
    max-width: none;
}
#constructor .container {
    width: auto!important;
    max-width: 1440px;
}


@media screen and (max-width: 1370px) {
    #constructor-body {
        margin-left: 50px;
    }
}
@media screen and (max-width: 1300px) {
    #constructor-body {
        margin-left: 20px;
    }
}
@media screen and (max-width: 1200px) {
    #constructor #constructor-body {
        height: 600px;
    }
}

@media screen and (max-width: 999px) {
    .generator-preview {
        float: none;
        width: auto;
        margin-top: -50px;
    }
    #constructor .container {
        margin: 0;
    }
    #constructor-canvas {
        margin-top: 0!important;
        margin-bottom: 60px;
    }
    #constructor-body {
        margin-left: 10px;
        margin-right: 0;
    }
    #constructor #constructor-body {
        height: auto;
    }
    #constructor::before {
        background: url(../img/mg/smoke-dark-s.png) no-repeat right bottom;
        background-size: 1000px auto;
        height: 440px;
        bottom: -41px;
    }
    #constructor-canvas-wrap {
        margin-top: 0;
    }
    #constructor-body {
        margin-left: 6%;
    }
}

@media screen and (max-width: 600px) {
    #constructor-body {
        padding-left: 0;
        margin-left: 3%;
    }
}