@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&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%; min-height: 100%; }
body { background: #f3f3f3 url(../images/bckgrnd_light.svg) top center repeat; color: #333; font: 400 1em/1 'Noto Sans', Tahoma, Geneva, sans-serif; }
a { color: #99cf16; text-decoration: underline; outline: none; }
a:hover { text-decoration: none; }
input:focus { outline: none; }
input::-webkit-input-placeholder { color: #333; }
input::-moz-placeholder { color: #333; }
input::-ms-placeholder { color: #333; }
.nojs { background: #e94f3d; color: #fff; display: block; padding: 1em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; margin: 0 auto; }
.red { color: #dd2211; }

/* common */

header, header a, .tags, footer { color: #fff; }

.wrapper, header .inner, footer .inner, aside, .container, .content, .product, .product dl, input, textarea, fieldset, .triple_box .contacts
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

b { font-weight: 700; }

/* layout */

.wrapper {
    height: auto;    
    min-height: 100%;
    overflow: hidden;
}

.container { position: relative; }

header .inner, .container, footer[role=contentinfo] .inner {
    max-width: 85.375rem;
    padding: 0 5%;
    margin: 0 auto;
}

.container, footer[role=contentinfo] .inner { overflow: hidden; }

header[role=banner], footer[role=contentinfo] { background: #000 url(../images/bckgrnd_dark.svg) top center repeat; }


/* controls */

input[type=text], input[type=search], input[type=email], textarea {
    background: #e6e6e6;
    border-radius: 0.25rem;
    width: 100%;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s linear;
}

input[type=text], input[type=search], input[type=email] {
    height: 2.5rem;
    padding: 0 0.5rem;
}

textarea {
    min-height: 6rem;
    padding: 0.5rem;
    resize: vertical;
}

input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, textarea:focus {
    background: #fff;
    box-shadow: 0 0 0 0.125rem #99cf16;
}

input[type=submit], input[type=button], button, .button {
    background: #99cf16;
    border-radius: 0.25rem;
    color: #fff;
    font-weight: 700;
    line-height: 2.5;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    height: 2.5rem;
    padding: 0 1rem;
    cursor: pointer;
    transition: transform 0.2s linear, background 0.2s linear;
}

input[type=submit]:hover, input[type=button]:hover, button:hover, .button:hover {
    background: #a6dd24;
    transform: scale(1.1);
}

/* header */

header[role=banner] {
    border-bottom: 0.5rem solid #e2007f;
    overflow: hidden;
}

header .inner { margin: 2.5rem auto; }

header .wrap { position: relative; }

.logo {
    text-align: center;
    position: relative;
    z-index: 1;
    width: 23.375rem;
    margin: 0 auto;
}

    .logo img {
        display: block;
        height: 7.5rem;
        width: 23.375rem;
    }

header a { text-decoration: none; }

header .contacts {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 2.625rem;
}

header .contacts li, .language li {
    font-size: 1.375rem;
    white-space: nowrap;
}

header .contacts span, header .contacts li:before {
    display: inline-block;
    vertical-align: middle;
}

header .contacts .phone {
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

header .contacts:before {
    content: '';
    background: url(../images/sprite.svg#phone) left center no-repeat;
    width: 2.125rem;
    height: 2.75rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.language {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 2.75rem;
    margin: auto;
}

.language ul {
    border-radius: 0.25rem;
    position: absolute;
    right: 0;
    top: 0;
}

.language ul:before {
    content: '';
    background: url(../images/sprite.svg#location) left center no-repeat;
    width: 1.5625rem;
    height: 2.75rem;
    position: absolute;
    right: 100%;
    margin-right: 0.5rem;
}

.language li {
    line-height: 2.75rem;
    visibility: hidden;
}

.language li:not(.current) {
    line-height: 2rem;
    margin-bottom: 0.25rem;
}

.language li.current, .language .active li { visibility: visible; }
.language li.current a { padding-right: 1.5rem; }

.language li.current a:after {
    content: '';
    background: url(../images/sprite.svg#arrow_down) left center no-repeat;
    width: 0.75rem;
    height: 0.5rem;
    position: absolute;
    right: 0;
    top: 1.25rem;
}

.language .active {
    background: #fff;
    border-right: 0.25rem;
    box-shadow: -3rem 0.5rem 0 #fff, 1rem 0.5rem 0 #fff, -3rem -0.5rem 0 #fff, 1rem -0.5rem 0 #fff;
    margin-top: -1rem;
}

.language .active a { color: #333; }

.language .active:before {
    background: #333;
    -webkit-mask: url(../images/sprite.svg#location) left center no-repeat;
    mask: url(../images/sprite.svg#location) left center no-repeat;
}

.language .active li.current a:after {
    background: #333;
    -webkit-mask: url(../images/sprite.svg#arrow_down) left center no-repeat;
    mask: url(../images/sprite.svg#arrow_down) left center no-repeat;
}

.contacts .phone a, .contacts .phone span { white-space: nowrap; }
.no-touch .contacts .phone a, .touch .contacts .phone span, .switch { display: none; }
.touch .contacts .phone a { display: block; }

/* menu */

.tags {
    float: left;
    width: 100%;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.tags li {    
    display: block;
    margin: 0 0.5rem 0.5rem;
}

.tags a {
    background: #e2007f;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 1.125rem;
    text-decoration: none;
    line-height: 1.25;
    display: block;
    padding: 0.625rem 2rem;
    cursor: pointer;
    transition: transform 0.1s linear, background 0.1s linear;
}

.no-touch .tags a:hover {
    background: #fb229c;
    transform: scale(1.1);
}

.tags .current a { background: #99cf16; }
.no-touch .tags .current a:hover { background: #a6dd24; }

/* debug only */

#tags_list {
    text-align: center;
    color: #fff;
    position: fixed;
    top: 0;
    padding: 2rem;
    background: #000;
    left: 0;
    right: 0;
    display: none;
}

#tags_list span {
    margin: 0 2rem;
}

/* content */

.content {
    clear: both;
    overflow: hidden;
    padding: 0.75rem 0.25rem 3rem 0;
}

.article_wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.article_wrap:first-of-type {
    margin-top: -18.25rem;
    padding-top: 18.25rem;
}

.article_wrap:last-of-type { min-height: inherit; }

article {
    background: #fff;
    border: 0.0125rem solid #c2c2c2;
    border-radius: 0.25rem;
    box-shadow: 0.25rem 0.25rem rgba(0,0,0,0.1);
    overflow: hidden;
    padding: 2rem;
    position: relative;
    margin-bottom: 2.5rem;
    flex: 1;
}

article h2 {
    color: #333;
    font-size: 3rem;
    line-height: 1.125;
    text-align: center;
    margin: 0 0 1.5rem 0;
}

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

article p { margin-bottom: 2.5rem; }
article ul, article ol { margin: 0 0 2.5rem 2rem; }
article ul { list-style: disc; }
article ol { list-style: decimal; }
article li { margin-bottom: 1rem; }

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

.video_wrap {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    position: relative;
}

.video_wrap iframe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* gallery */

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

.gallery_item {
    position: relative;
    cursor: pointer;
}

.gallery_item img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    -moz-transition: -moz-filter 0.2s linear;
    -webkit-transition: -webkit-filter 0.2s linear;
    transition: filter 0.2s linear;
}

.no-touch .gallery_item:hover img {
    
    -moz-filter: grayscale(1);
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/* RoyalSlider 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;
}


/* footer */

footer[role=contentinfo] .inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

h2 {
    font-size: 2rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

footer .descr {
    line-height: 1.4;
    text-align: justify;
    margin-bottom: 1.5rem;
}

footer .phone:before { content: 'Звоните: '; }
footer .phone:nth-child(2):before { visibility: hidden; }
footer .email:before { content: 'Пишите: '; }

.triple_box {
    float: left;
    width: 100%;
    padding: 2rem 0 3rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.triple_box .contacts, .triple_box fieldset {
    float: left;
    width: 33.333%;
}

.triple_box .contacts { padding-right: 1rem;}
.triple_box fieldset:nth-child(1) { padding: 0 0.5rem; }
.triple_box fieldset:nth-child(2) { padding-left: 1rem; }

.triple_box .contacts li {
    font-size: 1.375rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}

.triple_box input[type=submit] {
    float: right;
    transform-origin: right;
}

.copyrights {
    line-height: 2rem;
    float: left;
    clear: both;
}

.fogma {
    background:url(../images/sprite.svg#fogma) left center no-repeat;
    background-size: 2rem 2rem;
    border-radius: 50%;
    text-indent: -9999em;
    display: block;
    float: right;
    width: 2rem;
    height: 2rem;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.2s linear;
}

.fogma:hover { opacity: 1; }

/* form */

.formNoError { display: none; }

.formError {
    color: #dd2211;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

input.rsform-error, textarea.rsform-error { box-shadow: 0 0 0 0.125rem #dd2211; }

p.thankyou {
    background: #99cf16;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    float: right;
    width: 66.666%;
    padding: 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* media queries, yeah! */

@media screen and (max-width: 74rem) { /* two column layout */
    
    header .inner { margin: 1rem auto; }
    header[role=banner] .contacts { display: none; }
    
    header[role=banner] .contacts {
        position: absolute;
        z-index: 2;
        left: 5%;
        top: 0.75rem;
    }
    
    .language { width: 2rem; }    
    .language ul:not(.active) li { display: none; }
    .language .active { margin-top: -1.125rem; }
    
    .switch {
        font-size: 50%;
		display: block;
		position: absolute;
        top: 0;
        bottom: 0;
        left: -0.625rem;
        height: 3.75em;
		padding: 0.625em;
		margin: auto auto;
        cursor: pointer;
	}
    
    .tags {
        background: #000 url(../images/bckgrnd_dark.svg) center -102px repeat;
        box-shadow: 0 0 0.5rem 0.25rem rgba(0,0,0,0.5);
        display: none;
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        width: auto;
        padding: 1rem 5%;
        margin: auto;
    }
    
    .tags.active { display: block; }
	
	.no-touch .switch:hover, .touch .switch:active { background: rgba(0,0,0,0.1); }
	
		.switch li {
			background: #FFF;
			display: block;
			width: 2.5em;
			height: 0.5em;
			margin: 0.5em 0.5em 0 0.5em;
		}
		
		.switch li:last-child { margin: 0.5em; }
    
    .content { padding-top: 2rem; }    
    .logo { width: 13.25rem; }
    
    .logo img {
        height: 4.25rem;
        width: 13.25rem;
    }    
    
    article h2 { font-size: 2rem; }
    
    .triple_box .contacts {
        overflow: hidden;
        float: none;
        width: auto;
        padding-right: 0;
    }
    
    .triple_box .contacts li {
        text-align: center;
        float: left;
        width: 50%;
        margin-bottom: 4rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .triple_box fieldset { width: 50%; }
    .triple_box fieldset:nth-child(1), .triple_box .contacts li:nth-child(1) { padding: 0 0.75rem 0 0; }
    .triple_box fieldset:nth-child(2), .triple_box .contacts li:nth-child(2) { padding: 0 0 0 0.75rem; }
    
}

@media screen and (max-width: 47.5rem ) { /* one column layout */
    
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    article p, article li { text-align: left; }

    .content {
        -moz-transform: none;
        -webkit-transform: none;
        transform:  none;
    }
    
    .product {
        float: none;
        width: auto;
        max-width: 24.75rem;
        padding: 0;
        margin: 0 auto 1.5rem auto;
    }
    
    .triple_box .contacts li {
        text-align: left;
        float: none;
        width: auto;
    }
    
    .triple_box .contacts li:first-of-type { margin-bottom: 1rem; }
    
    .triple_box fieldset {
        float: none;
        width: auto;
    }
    
    .triple_box fieldset:nth-child(1), .triple_box .contacts li:nth-child(1),
    .triple_box fieldset:nth-child(2), .triple_box .contacts li:nth-child(2) { padding: 0; }
    
}

@media screen and (max-width: 28.5rem ) {
    
    footer .descr { text-align: left; }
    
    .copyrights, .fogma {
        float: none;
        clear: both;
    }
    
    .fogma {
        border-radius: 0;
        color: #fff;
        text-decoration: none;
        text-indent: inherit;
        line-height: 2rem;        
        padding-left: 2.5rem;
        width: auto;
        margin-top: 2rem;
    }
    
}