.ja-masonry-wrap {
    margin-left: -20px;
    margin-right: -20px
}

.ja-masonry-wrap .page-header {
    padding-left: 20px;
    padding-right: 20px
}

.ja-masonry-wrap .item {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    float: left
}

.ja-masonry-wrap .grid-xs-1 .item {
    width: 100%
}

.ja-masonry-wrap .grid-xs-2 .item {
    width: 50%
}

.ja-masonry-wrap .grid-xs-3 .item {
    width: 33.3%
}

.ja-masonry-wrap .grid-xs-4 .item {
    width: 25%
}

.ja-masonry-wrap .grid-xs-5 .item {
    width: 20%
}

.ja-masonry-wrap .grid-xs-6 .item {
    width: 16.6%
}

.ja-masonry-wrap .grid-xs-7 .item {
    width: 14.28%
}

.ja-masonry-wrap .grid-xs-8 .item {
    width: 12.5%
}

.ja-masonry-wrap .grid-xs-9 .item {
    width: 11.1%
}

.ja-masonry-wrap .grid-xs-10 .item {
    width: 10%
}

@media (min-width:600px) {
    .ja-masonry-wrap .grid-smx-1 .item {
        width: 100%
    }

    .ja-masonry-wrap .grid-smx-2 .item {
        width: 50%
    }

    .ja-masonry-wrap .grid-smx-3 .item {
        width: 33.3%
    }

    .ja-masonry-wrap .grid-smx-4 .item {
        width: 25%
    }

    .ja-masonry-wrap .grid-smx-5 .item {
        width: 20%
    }

    .ja-masonry-wrap .grid-smx-6 .item {
        width: 16.6%
    }

    .ja-masonry-wrap .grid-smx-7 .item {
        width: 14.28%
    }

    .ja-masonry-wrap .grid-smx-8 .item {
        width: 12.5%
    }

    .ja-masonry-wrap .grid-smx-9 .item {
        width: 11.1%
    }

    .ja-masonry-wrap .grid-smx-10 .item {
        width: 10%
    }
}

@media (min-width:768px) {
    .ja-masonry-wrap .grid-sm-1 .item {
        width: 100%
    }

    .ja-masonry-wrap .grid-sm-2 .item {
        width: 50%
    }

    .ja-masonry-wrap .grid-sm-3 .item {
        width: 33.3%
    }

    .ja-masonry-wrap .grid-sm-4 .item {
        width: 25%
    }

    .ja-masonry-wrap .grid-sm-5 .item {
        width: 20%
    }

    .ja-masonry-wrap .grid-sm-6 .item {
        width: 16.6%
    }

    .ja-masonry-wrap .grid-sm-7 .item {
        width: 14.28%
    }

    .ja-masonry-wrap .grid-sm-8 .item {
        width: 12.5%
    }

    .ja-masonry-wrap .grid-sm-9 .item {
        width: 11.1%
    }

    .ja-masonry-wrap .grid-sm-10 .item {
        width: 10%
    }
}

@media (min-width:992px) {
    .ja-masonry-wrap .grid-md-1 .item {
        width: 100%
    }

    .ja-masonry-wrap .grid-md-2 .item {
        width: 50%
    }

    .ja-masonry-wrap .grid-md-3 .item {
        width: 33.3%
    }

    .ja-masonry-wrap .grid-md-4 .item {
        width: 25%
    }

    .ja-masonry-wrap .grid-md-5 .item {
        width: 20%
    }

    .ja-masonry-wrap .grid-md-6 .item {
        width: 16.6%
    }

    .ja-masonry-wrap .grid-md-7 .item {
        width: 14.28%
    }

    .ja-masonry-wrap .grid-md-8 .item {
        width: 12.5%
    }

    .ja-masonry-wrap .grid-md-9 .item {
        width: 11.1%
    }

    .ja-masonry-wrap .grid-md-10 .item {
        width: 10%
    }
}

@media (min-width:1200px) {
    .ja-masonry-wrap .grid-lg-1 .item {
        width: 100%
    }

    .ja-masonry-wrap .grid-lg-2 .item {
        width: 50%
    }

    .ja-masonry-wrap .grid-lg-3 .item {
        width: 33.3%
    }

    .ja-masonry-wrap .grid-lg-4 .item {
        width: 25%
    }

    .ja-masonry-wrap .grid-lg-5 .item {
        width: 20%
    }

    .ja-masonry-wrap .grid-lg-6 .item {
        width: 16.6%
    }

    .ja-masonry-wrap .grid-lg-7 .item {
        width: 14.28%
    }

    .ja-masonry-wrap .grid-lg-8 .item {
        width: 12.5%
    }

    .ja-masonry-wrap .grid-lg-9 .item {
        width: 11.1%
    }

    .ja-masonry-wrap .grid-lg-10 .item {
        width: 10%
    }
}

html.ie8 .ja-masonry-wrap .item {
    margin-left: -0.5px
}

html, body {
    min-width: 320px;
}

#blocks td.region {
    font-weight: bold;
}

#blocks tr.region-message {
    font-weight: normal;
    color: #999;
}

#blocks tr.region-populated {
    display: none;
}

div#edit-openid-identifier-wrapper {
    display: block;
}

html.js #user-login-form div.form-item-openid-identifier, html.js #user-login div.form-item-openid-identifier {
    display: none;
}

html.js #user-login-form li.openid-link, html.js #user-login li.openid-link {
    display: block;
}

#user-login-form li.openid-link, #user-login-form li.user-link,
#user-login li.openid-link, #user-login li.user-link {
    display: none;
}

.password-strength {
    width: 200px;
    float: right;
}

.password-strength-title {
    display: inline;
}

.password-strength-text {
    float: right;
    font-weight: bold;
}

.left-img {
    float: left;
    padding: 20px 30px 20px 0px;
}

.right-img {
    float: right;
    padding: 0px;
}

.work-title {
    display: block;
    width: 180px;
    padding: 0px 12px;
    margin: -20px auto 0 auto;
    font-size: 1.4em;
    font-weight: normal;
    font-family: serif, georgia;
    color: #c3c3c3;
    text-align: center;
}

.hidetext1,
.hidetext2,
.hidetext3 {
    display: none;
}

.pages-block {
    width: 300px;
    margin: 20px auto;
    text-align: center;
}

.pages-block a:hover {
    text-decoration: none;
}

.pages {
    background: #c3c3c3;
    padding: 7px 13px 7px 13px;
    margin: 0 2px 0 0;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    position: relative;
    border: none;
}

.select {
    background: #FDC20F;
}

.password-indicator {
    background-color: #ccc;
    height: 5px;
    width: 100%;
}

.password-indicator div {
    height: 100%;
    width: 0%;
    background-color: #4c6;
}

div.password-confirm {
    visibility: hidden;
}

.container-inline div, .container-inline label {
    display: inline;
}

.container-inline .fieldset-wrapper {
    display: block;
}

.nowrap {
    white-space: nowrap;
}

html.js .js-hide {
    display: none;
}

.element-hidden {
    display: none;
}

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

body.drag {
    cursor: move;
}

#page a {
    border-bottom: 1px solid #aaa;
}

#page a:hover {
    color: #ff7518;
}

th.active img {
    display: inline;
}

td.active {
    background-color: #ddd;
}

td.checkbox, th.checkbox {
    text-align: center;
}

thead th {
    text-align: auto;
}

.error {
    color: #e55;
}

.warning {
    color: #e09010;
}

.ok {
    color: #008000;
}

div.error {
    border: 1px solid #d77;
}

div.warning {
    line-height: 1.4em;
}

div.ok {
    border: 1px solid #00aa00;
}

div.error, tr.error {
    background: #fcc;
    color: #200;
}

div.warning, tr.warning {
    color: #e55;
}

div.ok, tr.ok {
    background: #dfd;
    color: #020;
}

.form-item input.error, .form-item textarea.error, .form-item select.error {
    border-style: solid;
    border-color: red;
}

.form-item label {
    display: block;
    font-weight: 400;
    font-size: 0.85em;
}

.form-item label.option {
    display: inline;
    font-weight: normal;
}

.marker, .form-required {
    color: #f00;
}

.more-link, .more-help-link {
    text-align: right;
}

.nowrap {
    white-space: nowrap;
}

.item-list .pager {
    clear: both;
    text-align: center;
}

.item-list .pager li {
    display: inline;
}

.pager-current {
    font-weight: bold;
}

dl.multiselect dt, dl.multiselect dd {
    float: left;
}

dl.multiselect dd.b, dl.multiselect dd.b .form-item, dl.multiselect dd.b select {
    width: 14em;
}

dl.multiselect dd.a, dl.multiselect dd.a .form-item {
    width: 8em;
}

.container-inline div, .container-inline label {
    display: inline;
}

#autocomplete {
    position: absolute;
    border: 1px solid;
    overflow: hidden;
    z-index: 100;
}

#autocomplete li {
    background: #fff;
    color: #000;
    white-space: pre;
    cursor: default;
}

#autocomplete li.selected {
    background: #0072b9;
    color: #fff;
}

.draggable a.tabledrag-handle {
    cursor: move;
    float: left;
    margin-right: 10px;
    text-decoration: none;
}

a.tabledrag-handle:hover {
    text-decoration: none;
}

a.tabledrag-handle .handle {
    height: 20px;
    width: 20px;
}

a.tabledrag-handle-hover .handle {
    background-position: 0px -20px;
}

div.indentation {
    width: 20px;
    height: 20px;
    float: left;
}

.joined + .grippie {
    height: 5px;
    margin-bottom: -2px;
}

.teaser-checkbox {
    padding-top: 1px;
}

div.teaser-button-wrapper {
    float: right;
    padding-right: 5px;
}

.teaser-checkbox div.form-item {
    float: right;
    margin-right: 5px;
}

textarea.teaser {
    display: none;
}

html.js .no-js {
    display: none;
}

.progress {
    font-weight: bold;
}

.progress .bar {
    border: 1px solid #035;
    height: 18px;
}

.progress .filled {
    background: #07b;
    height: 18px;
    width: 0%;
}

.progress .percentage {
    float: right;
}

.progress-disabled {
    float: left;
}

.ahah-progress {
    float: left;
}

.ahah-progress .throbber {
    width: 20px;
    height: 20px;
    float: left;
}

.ahah-progress-bar {
    width: 16em;
}

#first-time strong {
    display: block;
}

tr.selected td {
    background: #ffc;
}

table.sticky-header {
    margin-top: 0px;
    background: #fff;
}

#clean-url.install {
    display: none;
}

html.js .js-hide {
    display: none;
}

#system-modules div.incompatible, #system-themes-form div.incompatible {
    font-weight: bold;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html .clearfix {
    height: 1%;
}

*:first-child + html .clearfix {
    min-height: 1%;
}

.update .project, .update table.version-recommended-strong .version-title {
    font-weight: bold;
}

.update .version-status {
    float: right;
}

.update .version-status .icon {
    padding-left: 10px;
}

.update .version-date {
    white-space: nowrap;
}

.update tr.error .version-recommended {
    background: #fdd;
}

.update tr.warning .version-recommended {
    background: #ffe;
}

.current-version, .new-version {
    direction: ltr;
}

.update tr.unknown {
    background: #ddd;
}

.update table.version-security .version-title {
    color: #910;
}

.update .security-error {
    font-weight: bold;
    color: #910;
}

#permissions td.module {
    font-weight: bold;
}

#permissions td.permission {
    padding-left: 20px;
}

.vertical-tabs {
    padding-left: 200px;
}

.vertical-tabs .vertical-tabs-list {
    float: left;
    width: 200px;
    margin-left: -200px;
}

.vertical-tabs .vertical-tabs-panes .vertical-tabs-pane {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.vertical-tabs .vertical-tabs-panes .vertical-tabs-pane legend {
    display: none;
}

.vertical-tabs .vertical-tabs-list .summary {
    display: block;
}

body {
    background: url(../img/fabric_of_squares_gray.png);
    font: 400 100%/1.5em ff-dagny-web-pro, sans-serif;
}

h1, h2, h3 {
    font-weight: 300;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
    line-height: 1em;
    margin-bottom: 24px;
}

h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1em;
    font-weight: 700;
}

.node h1, .node p {
    margin-bottom: 24px;
}

#who .title,
#text .title {
    margin: 0 1% 1em 0px;
    line-height: 1.2em;
    clear: both;
}

a {
    color: #000;
    text-decoration: none;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

strong {
    font-weight: 700;
}

img {
    display: block;
    height: auto;
}

.limiter {
    position: relative;
    max-width: 1020px;
    width: 96%;
    margin: 0 auto;
}

.limiter a:hover {
    text-decoration: none;
}

header {
    min-height: 120px;
    background: #fdc20f;
    /* Firefox */
    -moz-box-shadow: 2px 2px 2px #bdbdbd;
    /* Chrome и Safari */
    -webkit-box-shadow: 2px 2px 2px #bdbdbd;
    /* Код CSS тени блока для абсолютно всех браузеров новых версий */
    box-shadow: 2px 2px 2px #bdbdbd;
    position: relative;
}

#page {
    padding: 48px 0;
    background: #fff;
}

.front #page {
    padding: 48px 0 28px;
}

.node-type-project #page {
    padding: 36px 0 48px;
}

#who {
    padding: 48px 0 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#text {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 48px 0 28px;
}

.left {
    float: left;
    height: 25px;
    line-height: 1.3em;
}

.right-block-footer {
    float: right;
    line-height: 1.5em;
    text-align: right;
    color: #717171;
}

#logo {
    display: block;
    float: left;
    min-height: 60px;
    margin-left: 1%;
    margin-top: 15px;
    padding-left: 25px;
    background: url(../img/logo.png) no-repeat;
    text-decoration: none;
    background-size: 180px;
}

#logo h1 {
    padding-top: 0.6em;
    line-height: 1.33em;
    -moz-transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
}

#logo h1 span {
    display: block;
    padding-left: 0px;
    font-family: chaparral-pro, serif;
    font-size: 0.5em;
    font-style: italic;
    font-weight: 400;
    line-height: 0.5em;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

header nav {
    float: right;
    padding: 60px 1% 0;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

header nav li {
    float: left;
    font-size: 0.5em;
}

header nav a {
    display: block;
    width: 130px;
    padding: 10px 0;
    background: #000 no-repeat 50px -108px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    -moz-transition: none;
    -webkit-transition: none;
    float: left;
    margin-right: 10px;
}

header nav a:hover {
    background: #fff;
    color: #000;
    text-indent: 0;
    text-decoration: none;
}

.thumbs ul {
    list-style: none;
}

.thumbs li {
    float: left;
    width: 31.25%;
    margin: 0 10px 20px;
}

.ready li {
    -moz-transition: opacity 0.6s ease-out 0s;
    -webkit-transition: opacity 0.6s ease-out 0s;
    opacity: 1;
}

.ready li {
    -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
}

.thumbs a img {
    opacity: 1;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    border: 0px;
    border-radius: 6px;
}

.thumbs a img:hover {
    opacity: 0.8;
    border: 0px;
    border-radius: 6px;
}

.proj {
    overflow: hidden;
    float: right;
    width: 98%;
    padding: 0 1%;
}

.proj ul {
    float: right;
}

.proj li {
    float: left;
    margin-left: 12px;
}

.proj a {
    display: block;
}

.prev a, .next a {
    padding: 4px 5px 5px;
    background: #727272;
    border-radius: 12px;
    color: #fff;
    font-family: Arial;
    font-size: 0.75em;
    line-height: 1.2em;
    font-weight: normal;
}

.prev a:hover, .next a:hover {
    background: #000;
}

.grid a {
    margin-top: 4px;
    width: 23px;
    height: 15px;
    background: url(../img/bg_grid.png) no-repeat;
    text-indent: -9999em;
    opacity: 0.58;
}

.grid a:hover {
    opacity: 1;
}

.project .left {
    width: 29.125%;
    margin: 0 1%;
}

.project .right {
    width: 60.07843%;
    margin: 0 1%;
    padding-top: 24px;
}

.project h2 {
    margin: 24px 0;
}

.project h3 {
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.25em;
    font-weight: 700;
}

.project .left ul {
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.project li {
    list-style: none;
    font-size: 0.75em;
    text-transform: uppercase;
}

.project p {
    margin-bottom: 1em;
    font-size: 0.875em;
    line-height: 1.5em;
}

.project .left a {
    border-bottom: 1px solid #fdc20f;
}

.project .left a:hover {
    background: #fdc20f;
}

.project .visit {
    font-family: chaparral-pro, georgia, serif;
    font-style: italic;
}

.project .right img {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.article-title a {
    vertical-align: top;
}

#who p,
#text p {
    margin: 0 0 1em;
    padding: 0 1%;
    width: 66.666666%;
}

#who p span,
#text p span {
    font-style: italic;
}

.vito {
    float: right;
    width: 31.25%;
    margin: -2em 1% 2% 2%;
}

.developments {
    float: left;
    width: 28%;
    margin: 2% 2% 30px 1%;
}

.grey {
    color: #717171;
}

.price,
.price a {
    line-height: 1.8em;
    min-height: 270px;
}

.no-list-style {
    list-style: none;
}

#who a, footer .left a,
#text a, footer .left a {
    border-bottom: 1px solid #aaa;
}

#who a:hover, footer .left a:hover,
#text a:hover, footer .left a:hover {
    color: #ff7518;
}

footer {
    color: #717171;
}

footer .limiter {
    max-width: 1020px;
    padding: 23px 1% 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

footer .left {
    padding-left: 0px;
    font-size: 0.8em;
}

footer .left span {
    position: absolute;
    top: 14px;
    left: 1.4%;
    display: block;
    width: 40px;
    height: 40px;
    background: url(../img/sprite.png) no-repeat 0 0;
}

footer .right ul {
    list-style: none;
}

footer .right li {
    float: left;
    padding-left: 10px;
}

footer .right a {
    display: block;
    width: 20px;
    height: 20px;
    background: url(../img/sprite.png) no-repeat 0 -40px;
    text-indent: -9999em;
    opacity: 1;
}

footer .right a:hover {
    opacity: 0.8;
}

footer .right .dribbble {
    background-position: -40px -40px;
}

footer .right .github {
    width: 40px;
    height: 18px;
    background-position: 0 -60px;
}

#node-2 {
    padding: 0 1%;
}

form, #node-2 p {
    max-width: 640px;
}

.form-item {
    margin-bottom: 24px;
}

.form-text, textarea {
    padding: 10px;
    max-width: 278px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    -moz-transition: all 0.2s ease-in-out;
}

textarea {
    width: 618px;
    max-width: 618px;
}

.form-text:focus, textarea:focus {
    border: 1px solid #000;
}

button, input[type="submit"] {
    height: 40px;
    padding: 0 20px;
    background: #000;
    border: none;
    border-radius: 5px;
    color: #fff;
    line-height: 40px;
    font-weight: normal;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

input[type="submit"]:hover {
    background: #474747;
}

.webform-component-textfield {
    width: 300px;
}

#webform-component-name, #webform-component-email, #webform-component-message,
#edit-actions {
    float: left;
    clear: left;
}

#webform-component-phone, #webform-component-favorite-band {
    float: right;
}

lable.error {
    font-size: 12px;
}

.webform-confirmation h2, .webform-confirmation p {
    margin: 24px 0;
}

.page-node-2 #page .links a {
    padding: 5px 10px;
    background: #000;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
}

.page-node-2 #page .links a:hover {
    background: #fdc20f;
}

.webform-confirmation p a {
    background: #fff;
    border-bottom: 1px solid #fdc20f;
}

.webform-confirmation p a:hover {
    background: #fdc20f;
}

.title-work {
    text-align: center;
    max-width: 320px;
    font-size: 0.71em;
    padding-top: 7px;
    color: #ff7518;
    line-height: 1.4em;
}

.title-work a {
    color: #008ACE;
    text-decoration: underline;
}

.title-work a:hover {
    color: #000;
    text-decoration: none;
}

.smalltext {
    font-size: 11px;
    color: #717171;
}

.smalltext-two {
    font-size: 14px;
    color: #717171;
}

.bigtext {
    font-size: 1.5em;
    color: #FF7518;
    line-height: 2em;
}

.mail-link {
    margin-left: 30%;
    float: left;
}

/*.field-content:hover {
    -moz-box-shadow:0 0 14px #555;
    -webkit-box-shadow:0 0 14px #555;
    box-shadow:0 0 14px #555;
}*/

.coordinates {
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.3em;
}

.services {
    width: 100%;
    margin-left: 4px;
}

.spec {
    padding-top: 12px;
}

.services li {
    width: auto;
    font-size: 1.em;
    float: none;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 2.0em;
}

.infoblock {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
    color: #fff;
    z-index: 1;
    display: none;
}

.white-background {
    background: #fff;
}

h3.htitle {
    font-size: 1.3em;
    clear: both;
    background: url(../img/downarrow_orange.png) top left no-repeat;
    padding: 0px 0 2px 38px;
    color: #FF7518;
    transition: all 0.4s ease-in-out 0s;
}

h3.spechtitle {
    font-size: 1.1em;
    clear: both;
    cursor: pointer;
    background: url(../img/downarrow_orange.png) center left no-repeat;
    transition: all 0.4s ease-in-out 0s;
    padding: 0px 0 2px 38px;
    margin: 3px 0;
}

h3.spechtitle:hover {
    color: #FF7518;
    transition: all 0.4s ease-in-out 0s;
}

.hovertitle {
    color: #FF7518;
    background: url(../img/uparrow_orange.png) center left no-repeat !important;
    transition: all 0.4s ease-in-out 0s;
}

#up {
    width: 60px;
    height: 60px;
    margin: 0 auto 30px auto;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    text-align: center;
    background: url(../img/uppage.png) center center no-repeat;
    border: 1px solid #959595;
}

#up span {
    display: block;
    position: relative;
    margin-top: 60px;
    color: #959595;
}

.order-block {
    width: 30%;
}

.butonlink {
    width: 140px;
    display: block;
    margin: 0 auto;
}

.butonlink:hover {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}

.butonlink:active {
    background: #fff;
    color: #000;
    border: 1px solid #FDC20F;
    padding-top: 1px;
    padding-left: 21px;
}

.contactbut {
    width: 216px;
}

#who p,
#text p {
    margin: 0;
    padding: 0;
}

.warning {
    float: left;
    padding: 5px;
    width: 98%;
    font-size: 1.1em;
    margin-bottom: 35px;
}

.warning img {
    float: left;
    padding-right: 15px;
}

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

    .thumbs li {
        margin: 0 1% 1em;
    }

    .services li {
        line-height: 1.5em;
    }
}

@media only screen and (max-width:800px) {
    header nav {
        padding: 10px 1% 0;
    }

    header nav a {
        width: 100px;
        padding: 2px 0;
        margin: 0px 10px 8px 0;
        font-size: 0.7em;
        float: none;
    }
}

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

    #logo {
        padding-left: 25px;
    }

    #logo h1 span {
        padding-left: 0;
    }

    #who p,
    #text p {
        width: 100%;
    }

    .services {
        width: 100%;
        margin-left: 8px;
    }
}

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


    .thumbs a img:hover {
        opacity: 1;
    }

    form {
        width: 98%;
    }

    .price,
    .price a {
        font-size: 1.0em;
        line-height: 1.8em;
    }

    .webform-component-textfield, .webform-component-textarea {
        width: 98%;
    }

    .form-text, textarea {
        max-width: 98%;
    }

    #webform-component-name, #webform-component-email, #webform-component-message,
    #edit-actions, #webform-component-phone, #webform-component-favorite-band {
        float: none;
    }

    .autor {
        display: none;
    }

    .services {
        width: 100%;
        margin-left: 10px;
    }
}

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

    .services {
        width: 100%;
        margin-left: 14px;
    }

    .order-block {
        width: 100%;
    }

    #logo h1 {
        padding-top: 1em;
        font-size: 2em;
    }

    header nav {
        padding: 10px 1% 0;
    }

    header nav a {
        width: 100px;
        padding: 2px 0;
        margin: 0px 10px 8px 0;
        font-size: 0.7em;
        float: none;
    }

    header nav a:hover {
        background: #fff;
        color: #000;
        text-indent: 0;
    }

    .proj ul {
        float: none;
    }

    .proj .prev {
        margin-left: 0;
    }

    .project .left, .project .right {
        float: none;
        width: 98%;
    }
}

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

    .work-title {
        padding: 0px;
        margin: 0px auto 0 auto;
    }

    .price,
    .price a {
        font-size: 1em;
        line-height: 2em;
    }

    .warning {
        width: 440px;
        font-size: 0.8em;
        line-height: 1.1em;
        margin-bottom: 35px;
    }

    .order-block {
        width: 100%;
    }

    ul {
        max-width: 320px;
        margin: 0 auto;
    }

    header {
        min-height: 100px;
    }

    .front #page {
        padding: 24px 0;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.25em;
    }

    #logo, nav {
        float: none;
        margin: 0px;
    }

    #logo {
        margin-top: 10px;
        z-index: 1;
        position: absolute;
    }

    #logo h1 {
        padding-top: 0.9em;
        white-space: nowrap;
    }

    header nav {
        position: absolute;
        top: 7px;
        right: 5px;
        padding: 0;
        margin: 0;
        z-index: 1;
    }

    header nav a {
        width: 80px;
        padding: 0;
        font-size: 0.61em;
        margin: 1px 0;
    }

    .infoblock {
        position: absolute;
        top: 0px;
        right: 10px;
        font-size: 11px;
    }

    section h2, section h3 {
        margin-left: 0;
    }

    .thumbs h2 {
        margin: 0;
    }

    .thumbs ul {
        margin-top: 1em;
    }

    .thumbs li {
        float: none;
        width: 100%;
        margin: 0 0 3%;
    }

    #who p,
    #text p {
        width: 98%;
        font-size: 14px;
    }

    .vito {
        float: none;
        width: 98%;
        margin: 0 1% 24px;
    }

    .developments {
        float: none;
        width: 100%;
        margin: 3% 1% 1%;
    }

    footer .left {
        font-size: 0.7em;
    }
}

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

    .warning {
        width: 314px;
        font-size: 0.8em;
        line-height: 1.4em;
        margin-bottom: 35px;
    }

    .services {
        margin-left: 14px;
        font-size: 0.85em;
        margin-top: 8px;
    }

    .services li {
        line-height: 1.5em;
        padding: 0px;
    }

    .price,
    .price a {
        font-size: 1em;
        line-height: 2em;
    }

    ul {
        max-width: 280px;
        margin: 0 auto;
    }

    header nav {
        position: absolute;
        top: 5px;
        right: 3px;
        padding: 0;
        margin: 0;
        z-index: 1;
    }

    header nav a {
        width: 80px;
        padding: 0;
        font-size: 0.75em;
        margin: 0;
        height: 22px;
        border-radius: 0px;
        background: transparent;
        text-align: right;
    }

    header nav a:hover {
        background: none;
    }
}

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

    .warning {
        width: 280px;
        font-size: 0.8em;
        line-height: 1.4em;
        margin-bottom: 35px;
    }

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

    .price,
    .price a {
        font-size: 0.9em;
        line-height: 2em;
    }

    .services li {
        line-height: 1.5em;
        padding: 0px;
    }
}