html {
    font-family: sans-serif;
}

html, body {
    font-size: 100%;
}

body {
    margin: 0;
    padding: 0;

    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    position: relative;
    background-color: #636363;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.redhair {
    background: 
        url("../images/redhair_bg.jpg") right 0 no-repeat;
    background-size: auto 76%;
    /*background-color: #636363;*/
    background-color: #000;

}
.contacts-bg-body {
    background: 
        /*url("../images/bg.jpg") right -750px no-repeat;*/
        url("../images/contacts-bg.png") right 0 no-repeat;
    /*url("../images/bg.jpg") right -150px no-repeat;*/
    background-size: 50% auto;
    background-color: #636363;

}
.hand-draw-bg-body {
    background: 
        url("../images/dress-bg.png") right 0em no-repeat;
    background-size: 30% auto;
    background-color: #636363;
}
.gallery-bg-body {
    background: 
        url("../images/gallery-bg.jpg") right 0 no-repeat;
    background-size: 40% auto;
    background-color: #797979;
}
.clearfix:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}		
.clear-both {
    clear: both;
}

.page-content {
    margin: 0 auto;
    /*max-width: 62.5em;*/
    width: 100%;
}

.page-content::before, .page-content::after {
    content: " ";
    display: table;
}

.page-content::after {
    clear: both;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.f-l { float: left; }
.f-r { float: right; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-50 { width: 50%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.ta-c { text-align: center; }
.ta-l { text-align: left; }
.ta-r { text-align: right; }
.m-0 { margin: 0; }
.m-0-a { margin: 0 auto; }
.plr-05 { padding: 0 0.5em; }
.pr-1em { padding-right: 1em; }
.pt-1em { padding-top: 1em; }
.pt-2em { padding-top: 2em; }
.pt-3em { padding-top: 3em; }
.pt-10em { padding-top: 10em; }
.pt-15em { padding-top: 15em; }
.pt-20em { padding-top: 20em; }
.pb-1em { padding-bottom: 1em; }
.pb-2em { padding-bottom: 2em; }
.pb-3em { padding-bottom: 3em; }
.pb-4em { padding-bottom: 4em; }
.pb-5em { padding-bottom: 5em; }
.bgc-00 { background-color: #000000; }
.bgc-ff { background-color: #ffffff; }
.bgc-15 { background-color: #151515; }
.bgc-3a { background-color: #3a3a3a; }
.bgc-63 { background-color: #636363; }
.bgc-79 { background-color: #797979; }
.bgc-t { background-color: transparent; }
.c-orange { color: #b74732; }
.c-3a { color: #3a3a3a; }
.bg-n { background: none; }
.bg-tr { background: url("../images/bg-tr.png"); }
.p-a { position: absolute; }
.p-r { position: relative; }
.zi-200 { z-index: 200; }
.ff-1 {
    font-family: 'Questrial', sans-serif;
}

.art-classes,
.art-therapy {
    z-index: 200;
    /*position: absolute;*/
    padding: 5em;
    color: #c4c4c4;
    font-family: 'Questrial', sans-serif;
}

.art-classes ul,
.art-therapy ul {
    list-style-type: circle;
}

.art-classes .title,
.art-therapy .title {
    font-family: 'Kaushan Script', cursive;
    font-size: 2em;
    padding-bottom: 1em;
}

.page-header {
    width: 100%;
    position: relative;
    font-family: 'Questrial', sans-serif;
    background-color: #000000;
    /*background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=") left no-repeat;*/
    background-size: 51%, auto;
}
.page-header .show-menu {
    display: none;
    padding: 0.8em;
    float: right;
    font-size: 6vw;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}
.page-header .menu-selected {
    color: #b74732;
    font-size: 6vw;
    padding: 0.8em;
    display: none;
    font-weight: normal;
}
.bold {
    font-weight: bold;
}
.text {
    width: 50%;
    padding-left: 7em;
    position: relative;
    font-family: 'Questrial', sans-serif;
    font-size: 1em;
    z-index: 150;
    color: #000000;
    /*font-weight: bold;*/
}
.about-me h3 {
    margin-bottom: 0;
}
.about-me ul {
    list-style-type: circle;
    padding-left: 2em;
}
.about-me li {
    padding-top: 0.5em;
}
.menu {
    float: right;
    width: 50%;
}
.menu li {
    display: inline;
}
.menu a {
    /*font-size: 1.3em;*/
    font-size: 1.2vw;
    text-decoration: none;
    padding: 0.8em 0.5em;
    color: #747a72;
    display: inline-block;
}
.menu a.selected {
    color: #b74732;
}
.menu a:hover {
    background-color: #b74732;
    color: #000000;
}
.spot {
    z-index: 100;
    background: url("../images/spot.png");
    position: absolute;
    display: block;
    height: 453px;
    width: 345px;
}
.contacts-info {
    width: 100%;
    background-color: #151515;
    padding: 1em 0 1em 7em;
    font-family: 'Questrial', sans-serif;
    font-size: 1em;
    color: #747474;
    background-image: linear-gradient(to right, #151515 30%, #636363);
}
.contacts-info p {
    padding: 0;
    margin: 0.4em;
}
.the-author {
    text-align: center;
    padding: 0.438em 0 0 0;
    width: 100%;
    font-size: 3em;
    font-weight: bold;
    color: #2d3f6b;
    /*font-family: 'Oswald', sans-serif;*/
    font-family: 'Open Sans Condensed', sans-serif;
    /*font-family: 'BenchNine', sans-serif;*/
}

.all-about {
    z-index: 1000;
    position: relative;
    text-align: center;
    padding: 0.5em 0 0.5em 0;
    margin-top: 0.5em;
    /*width: 50%;*/
    font-size: 3em;
    color: #8b8888;
    font-family: 'Cabin Sketch', cursive;
}
.be-unique-content {
    padding-top: 20em;
}
.be-unique {
    z-index: 1000;
    position: relative;
    text-align: center;
    padding: 0em 0 0.5em 0;
    /*width: 50%;*/
    font-size: 2em;
    color: #8b8888;
    font-family: 'Cabin Sketch', cursive;
}
.be-unique p {
    padding: 0;
    margin: 0.5em;
}
.jass-en-logo {
    background: url("../images/jass-logo-en.svg") center center no-repeat;
    background-size: 50%;
    display: inline-block;
    height: 30em;
    width: 100%;
}
.contacts-bg {
    background: url("../images/contacts-bg.png") center center no-repeat;
    /*background-size: 100%;*/
    display: inline-block;
    height: 30em;
    width: 100%;
}
.jass-art-label {
    z-index: 1000;
    position: relative;
    text-align: left;
    padding: 1em 0 1em 2em;
    font-size: 4em;
    color: #000000;
    font-family: 'Kaushan Script', cursive;
}
.jass-art-label-home {
    width: 100%;
    background-color: #636363;
}
.gallery-left-col {
    width: 50%;
    background-color: #3a3a3a;
    padding-bottom: 5em;
}
.rotated {
    padding-top: 1.2em;
    margin-bottom: 2em;
    width: 70%;
    color: #b74732;
    text-shadow: 2px 2px 6px #000000;
    transform: rotate(30deg);
    /* Safari */
    -webkit-transform: rotate(-30deg);

    /* Firefox */
    -moz-transform: rotate(-30deg);

    /* IE */
    -ms-transform: rotate(-30deg);

    /* Opera */
    -o-transform: rotate(-30deg);
}
.rotated-15cc {
    transform: rotate(15deg);
    /* Safari */
    -webkit-transform: rotate(-15deg);

    /* Firefox */
    -moz-transform: rotate(-15deg);

    /* IE */
    -ms-transform: rotate(-15deg);

    /* Opera */
    -o-transform: rotate(-15deg);
}
.rotated-15c {
    transform: rotate(-15deg);
    /* Safari */
    -webkit-transform: rotate(15deg);

    /* Firefox */
    -moz-transform: rotate(15deg);

    /* IE */
    -ms-transform: rotate(15deg);

    /* Opera */
    -o-transform: rotate(15deg);
}
.gallery-art-not {
    font-size: 4em;
    font-family: 'Amatic SC', cursive;
    color: #000000;
    padding-top: 1.5em;
    padding-bottom: 0.2em;
}
.gallery-color {
    display: inline-block;
    font-size: 3em;
    font-family: 'Sacramento', cursive;
    color: #03b8c9;
    padding-right: 0.8em;
}
.gallery-canvas {
    display: inline-block;
    font-size: 3em;
    font-family: 'Gloria Hallelujah', cursive;
    color: #c4c4c4;
}
.gallery-art-is {
    display: block;
    font-size: 4em;
    font-family: 'Amatic SC', cursive;
    color: #c4c4c4;
    padding-top: 0.8em;
    padding-right: 5em;
}
.gallery-smile {
    /*display: inline-block;*/
    font-size: 3em;
    font-family: 'Cabin Sketch', cursive;
    color: #ee5502;
    padding-right: 2em;
    margin-top: -2em;
    margin-bottom: 2em;
}
.gallery-emotion {
    /*display: inline-block;*/
    font-size: 3em;
    font-family: 'Gloria Hallelujah', cursive;
    color: #edea00;
    padding-right: 8em;
}
.gallery-soul {
    /*display: inline-block;*/
    font-size: 4em;
    font-family: 'Sacramento', cursive;
    color: #07bb9b;
    padding-right: 4em;
}
.gallery-hearth {
    /*display: inline-block;*/
    font-size: 3em;
    font-family: 'Gloria Hallelujah', cursive;
    color: #c12035;
    padding-right: 0.5em;
}
.art-classes-left {
    width: 50%;
    position: relative;
}
.art-classes-left-content {
    position: absolute;
    z-index: 200;
}
.hand-draw-left {
    width: 50%;
    background-color: #3a3a3a;
}
.art-classes-right {
    width: 50%;
    float: right;
}
.logo-orange-line {
    background-color: #b74732;
    color: #b74732;
    text-shadow: 1px 1px 2px #000000;
    text-align: center;
}
.hand-draw-orange-line {
    background-color: #b74732;
    color: #b74732;
    text-shadow: 1px 1px 2px #000000;
    text-align: center;
    font-family: 'Questrial', sans-serif;
}
.logo-orange-line li,
.hand-draw-orange-line li {
    display: inline-block;
    padding: 0.5em 0;
    width: 15%;
    color: #fc8919;
    /*font-weight: bold;*/
}
.hand-draw-orange-line li {
    width: 24%;
    font-size: 1.2em;
    padding: 0.1em 0 0.3em 0;
}
.logo-left {
    width: 50%;
    position: relative;
}
.logo-right {
    width: 50%;
}
.gallery-box {
    padding: 1em 0;
    text-align: center;
}
.author-name {
    z-index: 1000;
    position: relative;
    text-align: center;
    padding: 1em 0 0.5em 0;
    width: 50%;
    font-size: 3em;
    color: #ada9a9;
    font-family: 'Kaushan Script', cursive;
}
.lang {
    display: inline-block;
    color: #73281a;
    width: 50%;
    font-size: 1.0vw;
    text-align: right;
    /*font-weight: bold;*/
}
.lang span {
    display: inline-block;
    padding: 1.0em 0.5em;
}
.lang span a {
    color: #444444;
    text-decoration: none;
}
.lang span a.selected {
    color: #73281a;
}
.lang span a:hover {
    color: #fff;
}


@media only screen and (max-width: 980px) {
    .spot {
        background: url("../images/spot.png") left 0 no-repeat;
        background-size: auto 100%;
        height: 151px;
        width: 115px;
    }
    .redhair {
        background: 
            url("../images/redhair.jpg") center 3em no-repeat;
        background-color: #000;
        background-size: 100%;
    }
    .page-header {
        height: auto;
    }
    .menu {
        display: none;
        float: none;
        width: 100%;
        padding-right: 3em;
        text-align: right;
    }
    .menu li {
        display: inline;
    }
    .menu a {
        font-size: 6vw;
        display: block;
    }
    .page-header .menu-selected {
        display: block;
        text-align: right;
        padding-right: 0.4em;
        float: right;
    }
    .page-header .show-menu {
        display: block;
    }
    .author-name {
        width: 100%;
        font-size: 1.8em;
        padding-top: 0.5em;
    }
    .text {
        width: 100%;
        padding: 1em 2em;
        margin-top: 17em;
        position: relative;
        font-family: 'Questrial', sans-serif;
        font-size: 1em;
        font-weight: normal;
        background-color: #797979;
        line-height: 1.5;
    }
    .contacts-info {
        width: 100%;
        padding: 2em;
        font-size: 1em;
        background-image: none;
    }
    .contacts-info p {
        margin-left: 0;
    }
    .jass-art-label {
        font-size: 2.5em;
    }
    .jass-art-label-home .jass-art-label {
        color: #797979;
    }
    .jass-art-label-home {
        width: 100%;
    }
    .gallery-left-col {
        width: 100%;
        background-color: transparent;
        padding-bottom: 0em;
    }
    .rotated {
        padding-top: 0.5em;
        margin-bottom: 0;
        width: 100%;
        transform: rotate(10deg);
        /* Safari */
        -webkit-transform: rotate(-10deg);

        /* Firefox */
        -moz-transform: rotate(-10deg);

        /* IE */
        -ms-transform: rotate(-10deg);

        /* Opera */
        -o-transform: rotate(-10deg);
    }
    .gallery-bg-body {
        background-size: 120%;
        background-color: #000;
        background-position-y: 3em;
    }
    .gallery-art-not {
        text-shadow: 2px 2px 6px #000000;
        font-size: 3.5em;
        text-align: left;
        padding-left: 0.3em;
    }
    .gallery-color {
        text-shadow: 2px 2px 6px #000000;
    }
    .gallery-canvas {
        text-shadow: 2px 2px 6px #000000;
    }
    .gallery-art-is {
        text-shadow: 2px 2px 6px #000000;
        padding-right: 0;
        padding-top: 0.5em;
        font-size: 3.5em;
        text-align: left;
        padding-left: 0.3em;
    }
    .gallery-smile {
        text-shadow: 2px 2px 6px #000000;
        font-size: 2.5em;
        margin-bottom: 0em;
        margin-top: -1em;
        padding-right: 1em;
    }
    .gallery-emotion {
        text-shadow: 2px 2px 6px #000000;
        font-size: 2em;
    }
    .gallery-soul {
        text-shadow: 2px 2px 6px #000000;
        font-size: 4em;
        padding-right: 2em;
    }
    .gallery-hearth {
        text-shadow: 2px 2px 6px #000000;
        font-size: 2em;
        padding-bottom: 1em;
    }
    .art-classes-left {
        width: 100%;
        line-height: normal;
    }
    .art-classes-left-content {
        position: relative;
        z-index: auto;
    }
    .art-classes-right {
        width: 100%;
        float: none;
        padding-bottom: 4em;
        line-height: normal;
    }
    .art-classes,
    .art-therapy {
        z-index: auto;
        padding: 5em 3em 3em 3em;
    }
    .hand-draw-left {
        width: 100%;
        background-color: transparent;
    }
    .hand-draw-bg-body {
        background-size: 130% auto;
    }
    .be-unique-content {
        padding-top: 20em;
    }
    .be-unique {
        text-align: center;
        padding: 0em 0 0.5em 0;
        font-size: 2em;
        color: #ee5502;
        text-shadow: 1px 1px 2px #000000;
    }
    .be-unique p {
        padding: 0;
        margin: 0.2em;
    }
    .hand-draw-orange-line li {
        width: 100%;
    }
    .logo-orange-line li {
        width: 45%;
    }
    .all-about {
        background-color: #3a3a3a;
        font-size: 3em;
    }
    .logo-left {
        width: 100%;
        position: absolute;
    }
    .logo-right {
        width: 100%;
    }
    .jass-en-logo {
        height: 25em;
        margin-bottom: 5em;
        background-size: 65%;
    }
}