@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700&display=swap&subset=cyrillic');

/* reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address,
img, center, ol, ul, li, dl, dt, dd, form, fieldset, label, legend, input, select, button, textarea, table, tbody, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, section, time, mark, audio, video {
	border: 0; font-size: 100%; font: inherit; vertical-align: baseline; padding: 0; margin: 0; }
header, footer, nav, section, article { display: block; }
ol, ul { list-style: none; }
table { border-spacing: 0; }
input, button { background: none; }
button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner { padding:0; border:0; }

/* basic */

html, body { width: 100%; height: 100%; }
body { background: #fff; color: #737373; font: 400 1em/1 'PT Serif', serif; display: flex; flex-direction: column; min-height: 100vh; }
a { color: #3abac7; text-decoration: underline; outline: none; }
a:hover { color: #2ca5b1; text-decoration: none; }
b { font-size: 700; }
input:focus { outline: none; }
input::-webkit-input-placeholder { color: #777; opacity: 1; }
input::-moz-placeholder { color: #777; opacity: 1; }
input::-ms-placeholder { color: #777; opacity: 1; }
.nojs { background: #e94f3d; color: #fff; display: block; padding: 1em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.red { color: #ca1e5a; }
.svg { display: block; }

/* common */

fieldset {
    display: block;
    overflow: hidden;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

fieldset:not(:last-of-type) { margin-bottom: 1rem; }

input[type=text], input[type=search], textarea {
    background: #fbfbfc;
    border: #cbd0d5 0.0625rem solid;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    text-decoration: none;
    display: block;
    min-width: 10rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text], input[type=search] {
    line-height: 2.625rem;
    height: 2.625rem;
    padding: 0 1rem;
}

textarea {
    min-height: 8.75rem;
    padding: 1rem;
    resize: vertical;
}

input[type=text]:focus, input[type=search]:focus, textarea:focus {
    background: #fff;
    border-color: #999;
}

button, .button, input[type=button], input[type=submit] {
    background: #3abac7;
    border-bottom: #2ca5b1 0.125rem solid;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 2.625rem;
    height: 2.625rem;
    display: block;
    min-width: 10rem;
    padding: 0 2rem;
    cursor: pointer;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transition: background 0.3s linear;
}

button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover {
    background: #2ca5b1;
}

/* layout */

.wrapper {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
}

header[role=banner] {
    background: #fff;
    border-bottom: 0.0625rem solid #e7e7e7;
    order: 1;
    position: relative;
    z-index: 1;
}

footer[role=contentinfo] {
    background: #fff;
    border-top: 0.0625rem solid #e7e7e7;
    order: 3;
}

.container {
    flex: 1;
    order: 2;
}

section, article[role=main], aside[role=complementary] {
    padding: 3rem 5% 5rem;
}

aside[role=complementary] { border-top: 0.0625rem #e9eaeb solid; }

header .inner, footer .inner, aside[role=complementary] .inner, section, .breadcrumbs, article[role=main] {
    max-width: 120rem;
    margin: auto;
}

header .inner, footer .inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
}

header .inner { min-height: 8.75rem; }
footer .inner { min-height: 8.5rem; }

/* header */

.logo {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 1.5rem;
    right: 0;    
    width: 23.125rem;
    margin: auto;
}

.logo .svg {
    width: 23.125rem;
    height: 4.0625rem;
}

header .inner a {
    color: #737373;
    text-decoration: none;
}

/* navigation */

.mobile_header { display: none; }

nav { margin-top: -4rem; }

nav ul, nav li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 4rem;
}

nav li:not(:last-of-type) { margin-right: 1.5rem; }

nav li:not(:last-of-type):after {
    content: '';
    background: url(../images/sprite.svg#heart) center no-repeat;
    width: 0.6875rem;
    height: 0.5625rem;
    display: block;
    margin: 0 0 -0.25rem 1.5rem;
}

nav a {
    color: #737373;
    font-size: 1.25rem;
    text-decoration: none;
    line-height: 2;
    display: block;
    transition: color 0.2s linear;
}

nav a:hover, nav .current a { color: #3abac7; }

/* email & phones */

header .phones, header .email { position: relative; }
header .phones { padding-left: 1.75rem; }
header .email { padding-left: 2rem; }

header .phones:before, header .email:before {
    content: '';
    display: block;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: -0.25rem;
}

header .phones:before {    
    background: url(../images/sprite.svg#phone) center no-repeat;
    width: 1rem;
    height: 1.25rem;  
}

header .email:before {    
    background: url(../images/sprite.svg#email) center no-repeat;
    width: 1.25rem;
    height: 0.875rem; 
}

header .phones span, header .phones a, header .email {
    font-size: 1.25rem;
    line-height: 1.5;
    display: block;
}

header .phones a:hover, header .email:hover { color: #3abac7; }
.no-touchevents .phones a, .touchevents .phones span { display: none; }
header .email:hover:before { background: url(../images/sprite.svg#email_hover) center no-repeat; }


/* content */

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 2.5rem;
}

h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

article header h1 { margin-bottom: 1.5rem; }

article p, article li {
    font-size: 1.125rem;
    line-height: 1.5;
    text-align: justify;
}

article p:not(:last-of-type), article ul:not(:last-of-type), article ol:not(:last-of-type) { margin-bottom: 1.5rem; }
article p + h2, article ul + h2, article ol + h2 { padding-top: 1.5rem; }

article img {
    width: auto;
    height: auto;
    max-width: 100%;
}

article ol, article ul {
    display: block;
    margin: 0 0 1.5rem 2rem;
}

article ol { list-style: decimal; }
article ul { list-style: disc; }
article li:not(:last-child) { margin-bottom: 1.5rem; }

.breadcrumbs {
    font-size: 0.75rem;
    line-height: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 2rem 3rem 0;
}

.breadcrumbs li {
    white-space: nowrap;
    margin-bottom: 0.5rem;
}

.breadcrumbs li:not(:last-of-type) { margin-right: 0.75rem; }

.breadcrumbs, .breadcrumbs a  {
    color: #999;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #666;
    text-decoration: underline;
}

.breadcrumbs span { font-weight: 700; }
.breadcrumbs + section, .breadcrumbs + article { padding-top: 1.5rem; }

.breadcrumbs li:not(:last-of-type):after {
    content: '';
    -webkit-mask: url(../images/sprite.svg#arrow_right) center no-repeat;
    mask: url(../images/sprite.svg#arrow_right) center no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    background: #999;
    display: inline-block;
    vertical-align: middle;
    width: 0.3125rem;
    height: 0.5rem;
    margin-left: 0.75rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 4rem 0;
    grid-column-start: 1;
    grid-column-end: 3;
}

.pagination:last-child { margin-bottom: 0; }

.pagination li {
    font-size: 1.5rem;
    line-height: 1.2;
}

.pagination a, .pagination span {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 0 0.5rem;
}

.pagination a:hover {
    text-decoration: underline;
}

.pagination .current span {
    color: #ca1e5a;
    font-weight: 700;
}

.pagination li:first-child a, .pagination li:last-child a,
.pagination li:first-child span, .pagination li:last-child span {
    background-color: #333;
    -wbkit-mask-size: cover;
    mask-size: cover;
    text-indent: -9999rem;
    width: 1.625rem;
    height: 1rem;
}

.pagination li:first-child a, .pagination li:first-child span {
    -webkit-mask: url(../images/sprite.svg#prev) center no-repeat;
    mask: url(../images/sprite.svg#prev) center no-repeat;
}

.pagination li:last-child a, .pagination li:last-child span {
    -webkit-mask: url(../images/sprite.svg#next) center no-repeat;
    mask: url(../images/sprite.svg#next) center no-repeat;
}

.pagination li:first-child span, .pagination li:last-child span { opacity: 0.5; }

/* home */

.home section[role=main] {
    max-width: inherit;
    padding: 0;
}

.home header, .home footer { border: none; }

.intro {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 8.75rem solid #fff;
    width: 100%;
    height: 100vh;
    margin-top: -8.75rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* portfolio */

.portfolio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 4rem;
}

.portfolio article .descr, .portfolio article .descr a { color: #fff; }

.portfolio article {
    background: #3abac7;
    position: relative;
    padding-top: 50%;
    height: 0;
    max-width: 100%;
    overflow: hidden;
}

.portfolio h2 { margin-bottom: 0.75rem; }
.portfolio h2 a { text-decoration: none; }

.portfolio .img, .portfolio .descr {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

.portfolio .img {
    left: 0;
    z-index: 0;
    -moz-transition: opacity 0.2s linear, filter 0.2s linear;
    -webkit-transition: opacity 0.2s linear, filter 0.2s linear;
    transition: opacity 0.2s linear, filter 0.2s linear;
}

.no-touchevents .portfolio article:hover .img {
    opacity: 0.8;
    -moz-filter: blur(0.125rem);
    -webkit-filter: blur(0.125rem);
    filter: blur(0.125rem);
}

.portfolio .img img {
    display: block;
    min-width: 102%;
    height: auto;
    margin: -1% 0 0 -1%;
}

.portfolio .img.no_photo img {
    width: auto;
    height: 100%;
}

.portfolio .descr {
    background: rgb(58,186,199,0.8);
    left: 50%;
    z-index: 2;
    padding: 5%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.portfolio article ul {
    list-style: none;
    margin: 0;
}

.portfolio article li {
    text-align: left;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.portfolio .album_title {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.portfolio .album_title:before { content: '«'; }
.portfolio .album_title:after { content: '»'; }

.big_a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* gallery */

.album h1 br { display: none; }

.gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    margin: 3rem 0 -2.777% 0;
    list-style: none;
}

.gallery li, article .gallery li:not(:last-child) { margin-bottom: 2.777%; }

.gallery li:nth-child(4n + 1) { width: 33.333%; }
.gallery li:nth-child(4n + 2) { width: 66.666%; }
.gallery li:nth-child(4n + 3) { width: 66.666%; }
.gallery li:nth-child(4n + 4) { width: 33.333%; }

.gallery li:nth-child(4n + 1) span { margin-right: 2.777%; }
.gallery li:nth-child(4n + 2) span { margin-left: 2.777%; }
.gallery li:nth-child(4n + 3) span { margin-right: 2.777%; }
.gallery li:nth-child(4n + 4) span { margin-left: 2.777%; }

.gallery li:nth-child(4n + 1) span, .gallery li:nth-child(4n + 4) span { padding-top: 133.33%; }
.gallery li:nth-child(4n + 2) span, .gallery li:nth-child(4n + 3) span { height: 100%; }

.gallery li span {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    min-height: 1rem;
    overflow: hidden;
    box-shadow: 0 0 0 0.0625rem rgba(58,186,199,0.075);
    cursor: pointer;
}

.gallery li span:after {
    content: '';
    background: #3abac7;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.gallery li span:hover:after {
    opacity: 0.2;
}

.gallery li:last-of-type:nth-child(odd) {
    width: 100%;
}
.gallery li:last-of-type:nth-child(odd) span {
    padding-top: 56.25%;
    margin: 0;
}

/* video */

video {
    width: 100%;
    margin-top: 2.77%;
}

/* services */

article h1 + p { text-align: center; }

.service {
    border-top: 0.0625rem solid #e7e7e7;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    max-width: 81rem;
    padding: 4rem 0;
}

.service:before {
    content: '';
    background: #fff url(../images/sprite.svg#rings) center no-repeat;
    border: 1rem solid #fff;
    display: block;
    width: 1.875rem;
    height: 1.125rem;
    position: absolute;
    top: -1.5625rem;
    left: 0;
    right: 0;
    margin: auto;
}

.service:first-of-type { margin-top: 4rem; }

.service .inner {
    flex: 1;
    padding-right: 2.5rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.service .img {
    border-radius: 50%;
    overflow: hidden;
    width: 25rem;
    order: 1;
}

.service .img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.service:nth-child(odd) .inner {
    padding: 0 0 0 2.5rem;
    order: 2;
}

.service:nth-child(odd) .img { order: 1; }

/* contacts */

.contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3rem;
}

.contacts li {
    font-size: 1.125rem;
    position: relative;
    padding-left: 3rem;
}

@media screen and (min-width: 80rem) {
    .contacts li.address { order: 1; }
    .contacts li.phones { order: 2; }
    .contacts li.mail { order: 3; }
}

.contacts li.phones span, .contacts li { line-height: 1.5rem; }

.contacts .phones i {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
}

.contacts li:before {
    font-size: 0.875rem;
    display: block;
}

.contacts .phones:before { content: 'По всем вопросам звоните'; }
.contacts .address:before { content: 'Мы находимся по адресу'; }
.contacts .mail:before { content: 'Наш почтовый ящик'; }
.contacts .time:before { content: 'Время работы'; }
.contacts .insta:before { content: 'Наш Instagram'; }
.contacts .youtube:before { content: 'Наш канал на Youtube'; }


.contacts li:after {
    content: '';
    background-size: cover;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 3rem;
}

.contacts .phones:after { background: url(../images/sprite.svg#phone2) center no-repeat; }
.contacts .address:after { background: url(../images/sprite.svg#location) center no-repeat; }
.contacts .mail:after { background: url(../images/sprite.svg#email2) center no-repeat; }
.contacts .insta:after { background: url(../images/sprite.svg#insta) center no-repeat; }

.contact_info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: inherit;
    margin-top: 5rem;
}

.contact_info .map {
    position: relative;
    min-height: 25rem;
    padding-right: 3rem;
}

.contact_info .map > * {
    background: #e9eaeb;
    position: absolute;
    left: 0;
    right: 3rem;
    top: 0;
    bottom: 0;
    padding: 0 0 3rem;
}

.contact_info .map iframe {
    width: 100%;
    height: 100%;
    min-height: 25rem;
}

.contact_info .form {
    overflow: hidden;
}

.form fieldset:nth-of-type(1), .form fieldset:nth-of-type(2) {
    float: left;
    width: 50%;
}

.form fieldset:nth-of-type(1) { padding-right: 0.5rem; }
.form fieldset:nth-of-type(2) { padding-left: 0.5rem; }

.form fieldset:last-of-type .captcha, .form fieldset:last-of-type input[type=text] {
    float: left;
    margin-right: 1rem;
}

.form input[type=submit] {
    float: right;
    min-width: 12.5rem;
}

.form fieldset:not(:last-of-type) input[type=text], .form textarea { width: 100%; }

.formError {
    color: #dd2211;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.5;
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

.thankyou {
    background: #f4fbf1 url(../images/sprite.svg#success) 2rem center no-repeat;
    background-size: 3rem;
    border: 0.125rem solid #92d477;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 1.75rem 2rem 1.75rem 7rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.thankyou b {
    font-size: 1rem;
}

/* footer */

footer[role=contentinfo] a {
    color: #737373;
    text-decoration: none;
}

footer .socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.socials li:not(:last-of-type) { margin-right: 4rem; }

.socials a {
    line-height: 1.25;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.socials .insta a:hover, .socials .youtube a:hover { color: #3abac7; }

.socials a:before {
    content: '';
    display: block;
    margin-right: 1rem;
}

.socials .insta a:before {    
    background: url(../images/sprite.svg#insta) center no-repeat;
    width: 2rem;
    height: 2rem;    
}

.socials .youtube a:before {
    background: url(../images/sprite.svg#youtube) center no-repeat;
    width: 2.5rem;
    height: 1.75rem;
}

.socials .insta a:hover:before { background-image: url(../images/sprite.svg#insta_hover); }
.socials .youtube a:hover:before { background-image: url(../images/sprite.svg#youtube_hover); }

.fogma {
    background: url(../images/sprite.svg#fogma) center no-repeat;
    text-indent: -9999rem;
    display: block;
    overflow: hidden;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: 3.5rem;
    opacity: 0.7;
    transition: opacity 0.2s linear;
}

.fogma:hover { opacity: 1; }

/* swiper in pop-up */

.overlay {
    background: rgba(255,255,255,0.8);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 998;
}

.close_bttn {
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: 5rem;
    height: 5rem;
    z-index: 999;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s linear;
}

.close_bttn:before {
    content: '';
    background: #333;
    -webkit-mask: url(../images/sprite.svg#close_bttn) center no-repeat;
    mask: url(../images/sprite.svg#close_bttn) center no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: block;
    width: 2rem;
    height: 2rem;
}

.touchevents .close_bttn { background: rgba(255,255,255,0.5); }
.touchevents .close_bttn, .no-touchevents .close_bttn:hover { opacity: 1; }

.no-touchevents .rsSlide {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 4rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.no-touchevents .rsSlide img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

.rsArrowLeft, .rsArrowRight {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4rem;
    opacity: 0.5;
    transition: opacity 0.2s linear;
}

.no-touchevents .rsArrowLeft:hover, .no-touchevents .rsArrowRight:hover { opacity: 1; }
.touchevents .rsArrowLeft, .touchevents .rsArrowRight { display: none !important; }

.rsArrowLeft .rsArrowIcn, .rsArrowRight .rsArrowIcn {
    background: #333;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 1.8125rem;
    height: 3rem;
}

.rsArrowLeft { left: 0; }
.rsArrowRight { right: 0; }

.rsArrowLeft .rsArrowIcn {
    -webkit-mask: url(../images/sprite.svg#back) center no-repeat;
    mask: url(../images/sprite.svg#back) center no-repeat;
}

.rsArrowRight .rsArrowIcn {
    -webkit-mask: url(../images/sprite.svg#forth) center no-repeat;
    mask: url(../images/sprite.svg#forth) center no-repeat;
}

.rsArrowDisabled, .rsArrowDisabled.rsArrowLeft:hover, .rsArrowDisabled.rsArrowRight:hover {
    opacity: 0.2;
    cursor: default;
}


/* media queries yeah! =) */

@media screen and (max-width: 85.375rem) { /* 1366 */
    
    .portfolio { display: block; }
    .portfolio article:not(:last-of-type) { margin-bottom: 3rem; }
    .portfolio article { padding-top: 40%; }
    .portfolio article .descr { left: 60%; }

}
    
@media screen and (max-width: 80rem) { /* 1200 */
    
    header .inner { min-height: 8.75rem; }
    
    nav li:not(:last-of-type) { margin-right: 1.25rem; }
    nav li:not(:last-of-type):after { margin-left: 1.25rem; }
    header .phones li a { font-size: 1.25rem;}
    
    aside[role=complementary] .inner {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 4rem;
    }

    .form fieldset:nth-of-type(1), .form fieldset:nth-of-type(2) {
        float: none;
        width: inherit;
        padding: 0;
    }

    .form fieldset:last-of-type { padding-left: 9.75rem; }
    
    .form fieldset:last-of-type .captcha {
        position: absolute;
        left: 0;
        top: 0;
    }

    .form fieldset:last-of-type input[type=text] {
        width: 100%;
        margin-bottom: 1rem;
    }

    .form input[type=submit] {
        position: relative;
        float: none;
        clear: both;
        left: -4.875rem;
        margin: 1rem auto 2rem;
    }
    
    .contacts { grid-template-columns: repeat(2, 1fr); }
    .contact_info .map { padding-right: 1.5rem; }
    .contact_info .map > * { right: 1.5rem; }
    .contact_info .form { padding-left: 1.5rem; }
    
}

@media screen and (max-width: 72rem) { /* 1152 */
 
    .logo {
        transform: scale(0.9);
        transform-origin: center;
    }

    nav li:not(:last-of-type) { margin-right: 1rem; }
    nav li:not(:last-of-type):after { margin-left: 1rem; }
    nav a, header .phones span, header .phones a, header .email { font-size: 1.125rem; }
    
}
    
@media screen and (max-width: 64rem) { /* 1024 */
    
    .wrapper { padding-top: 2.5rem; }
    
    .mobile_header {
        background: #fff;
        border-bottom: 0.125rem solid #3abac7;
        display: block;
        position: fixed;
        z-index: 2;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 0;
        height: 3rem;
        padding: 0 5%;
    }
    
    .home .mobile_header { border-bottom: none; }
    
    .mini_logo {
        background: url(../images/sprite.svg#logo) center no-repeat;
        display: block;
        position: absolute;
        left: 0;        
        top: 0;
        bottom: 0;
        right: 0;
        width: 10rem;
        padding-left: 5%;
        margin: auto;
        cursor: pointer;    
    }
    
    .switch {
        position: absolute;
        left: 0;
        margin-top: 0.25rem;
        width: 1.25rem;
        height: 2.5rem;
        padding: 0 5%;
        cursor: pointer;
    }
    
    .switch li {
        background: #3abac7;
        position: absolute;
        width: 1.25rem;
        height: 0.125rem;
        margin: auto;
        transition: transform 0.3s linear, opacity 0.3s linear, top 0.3s linear, bottom 0.3s linear, background 0.3s linear;
        transform-origin: center;
    }
    
    .switch li:nth-child(1) { top: 0.8125rem; }
    .switch li:nth-child(2) { top: 0; bottom: 0; }
    .switch li:nth-child(3) { bottom: 0.8125rem; }
    
    .menu_active .switch li:first-child { transform: rotate(45deg); top: 1.1875rem; }
    .menu_active .switch li:last-child { transform: rotate(-45deg); bottom: 1.1875rem; }
    .menu_active .switch li:nth-child(2) { opacity: 0; }
    
    header[role=banner] {
        background: #3abac7;
        overflow-y: auto;
        position: fixed;
        z-index: 90;
        top: 3rem;
        bottom: 0;
        left: -20rem;
        width: 20rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        transition: left 0.3s ease-out;
    }
    
    .menu_active header[role=banner] { left: 0; }
    
    header[role=banner], header[role=banner] a { color: #fff; }
    .no-touchevents header[role=banner] a:hover { text-decoration: underline; }
    .logo, nav li:not(:last-of-type)::after { display: none; }
    
    header .inner, nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        padding: 3rem;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    header .inner {
        padding-top: 0;
        margin: auto 0 0;
        width: 100%;
        min-height: inherit;
        order: 2;
    }
    
    header .email { margin-bottom: 1rem; }
    header .email:hover, header .phones a:hover { color: #fff; text-decoration: underline; }
    header .email:before, header .email:hover:before { background: url(../images/sprite.svg#email_white) center no-repeat; }
    header .phones:before { background: url(../images/sprite.svg#phone_white) center no-repeat; }
    
    nav {
        margin: 0;
        order: 1;
    }
    
    nav ul, nav li {
        display: block;
        height: auto;
    }
    
    nav ul {
        font-size: 0.875rem;
        flex-direction: column;
    }
    
    nav li:not(:last-of-type) { margin: 0 0 1rem 0; }
    
    nav li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    
    nav li:before {
        content: '';
        background: url(../images/sprite.svg#heart_white) center no-repeat;
        width: 0.6875rem;
        height: 0.5625rem;
        display: block;
        margin: 0 0.75rem 0 -0.25rem;
    }
    
    nav .parent ul {
        background: none;
        list-style: disc inside;
        border: none;
        display: block;
        position: static;
        margin: 0;
    }
    
    nav .parent li { margin: 0; }
    
    nav .parent ul a {
        font-size: 0.875rem;
        display: inline-block;
        width: 100%;
        padding: 0 0 0 1rem;
    }
    
    section[role=main], aside[role=complementary], article[role=main] { padding: 4rem 5%; }
    .breadcrumbs { padding: 2rem 5% 0; }
    .breadcrumbs + section, .breadcrumbs + article { padding-top: 1.5rem; }
    
    .intro {
        background-position: 80% top;
        border-top: none;
        margin-top:0;
    }
    
    .portfolio article { padding-top: 50%; }
    .portfolio article .descr { left: 50%; }
    
    .service .img { width: 50%; }
    
    footer .inner { padding: 3rem 5%; }
    footer .inner > * { width: 100%; }
    footer .socials { order: 1; }
    
    footer .copyrights {
        text-align: center;
        order: 2;
        margin: 3rem 0;
    }
    
    footer .fogma {
        background-size: 2.25rem 2.25rem;
        background-position: left center;
        line-height: 2.25rem;
        text-indent: inherit;
        order: 3;
        padding-left: 3rem;
        width: auto;
        margin: auto;
    }
    
    .touchevents .fogma { opacity: 1; }
    .no-touchevents .fogma:hover { text-decoration: underline; }
    
    .overlay { background: #fff; }
    
    .contact_info { display: block; }
    .contact_info .map { padding: 0; }
    .contact_info .map > * { right: 0; }
    
    .contact_info .form {
        padding: 0;
        margin: 5rem auto 0;
        max-width: 30rem;
    }
    
}

@media screen and (max-width: 55.75rem) { /* 892 */
     
    .services h1 + p br { display: none; }
}

@media screen and (max-width: 50rem) { /* 800 */
    
    .contacts { display: block; }
    .contacts li:not(:last-of-type) { margin-bottom: 3rem; }
    section.contact_info { display: block; }    
    .contact_info .map { padding-right: 0; }
    
    .contact_info .map > * {
        position: static;
        min-height: 25rem;
        padding: 0;
    }
    
    .contact_info .form {
        max-width: inherit;
        padding: 4rem 5%;
        margin: 0;
    }
    
    .form input[type=submit] { margin-bottom: 0; }
    
    .service { flex-direction: column; }
    .service:nth-child(even) .img { order: 1; }
    .service:nth-child(even) .inner { order: 2; }
    .service .inner, .service .inner:nth-child(odd) { padding: 2rem 0 0; }
    .service h2 { text-align: center; }
    
    .portfolio article .descr { left: 40%; padding: 2.25rem; }
     
}

@media screen and (max-width: 40rem) { /* 640 */

    h1 {
        font-size: 2rem;
        margin-bottom: 2.5rem;
    }
    
    article p, article li {
        font-size: 1rem;
        text-align: left;
    }
    
    section[role=main], aside[role=complementary], article[role=main] { padding: 3rem 5%; }
    .breadcrumbs + section, .breadcrumbs + article { padding-top: 1.5rem; }
    aside[role=complementary] .inner, .news { display: block; }      

    
    .portfolio article {
        height: auto;
        padding: 50% 0 0;
    }
    
    .portfolio article .descr { padding: 7%; position: relative; left: auto; }
    .portfolio h2 { line-height: 1; }
    .portfolio .img { bottom: auto; }
    
    
    footer .socials { flex-direction: column; }
    .socials li:not(:last-of-type) { margin: 0 0 2rem 0; }
    footer .copyrights { margin: 2rem 0; }

}

@media screen and (max-width: 30rem) { /* 480 */
    
    .pagination {
        position: relative;
        padding-bottom: 3rem;
    }
    
    .pagination .prev, .pagination .next {
        position: absolute;
        bottom: 0;
    }
    
    .pagination .prev {
        left: 50%;
        margin-left: -3rem;
    }
    
    .pagination .next {
        right: 50%;
        margin-right: -3rem;
    }
    
}

@media screen and (max-width: 25rem) { /* 400 */

    .form fieldset:last-of-type {
        display: flex;
        flex-direction: column;
        align-content: center;
        padding-left: 0;
    }
    
    .form fieldset:last-of-type .captcha {
        width: 8.75rem;
        position: static;
        margin: auto auto 1rem auto;
    }
    
    .form input[type=submit] {
        left: auto;
        margin: auto;
    }

}

@media screen and (max-width: 30rem) { /* 480 */
    
    .thankyou {
        background: #f4fbf1;
        padding: 1.75rem 2rem;
    }
    
}