@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.png) 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 .contacts .email:before, header .contacts .phone:before, .fogma {
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
}

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;
    overflow: hidden;
    padding: 0 5%;
    margin: 0 auto;
}

header[role=banner], footer[role=contentinfo] { background: #000 url(../images/bckgrnd_dark.png) 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: 3rem auto; }

        header .wrap { position: relative; }

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

                .logo img {
                    display: block;
                    max-width: 100%;
                    height: auto;
                }
            
            header a { text-decoration: none; }
            
            header .contacts {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 1rem;
            }

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

                    header .contacts li:before {
                        content: '';
                        margin-right: 0.5rem;
                    }

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

                header .contacts .email { float: left; }

                    header .contacts .email:before {
                        background-position: 0 0;
                        width: 2.625rem;
                        height: 1.625rem; 
                    }

                header .contacts .phone { float: right; }

                    header .contacts .phone:before {
                        background-position: 0 -26px;
                        width: 2.125rem;
                        height: 2.75rem; 
                    }
                
                .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;
}

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

.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 li:first-of-type a {
    font-weight: 700;
    text-transform: uppercase;
}

.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;
    margin-right: -1.5rem;
}

.product {
    float: left;
    width: 33.3333%;
    margin-bottom: 1.5rem;
    padding:  0 1.5rem 0 0;
}

.product.hide { display: none; }

/*.product:nth-child(3n+1) { padding: 0 1rem 0 0; }
.product:nth-child(3n+2) { padding: 0 0.5rem; }
.product:nth-child(3n+3) { padding: 0 0 0 1rem; }*/

.product dl {
    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;
    height: 29.5rem;
    padding: 66% 1.25rem 1.25rem;
    position: relative;
}

.product dt {
    font-size: 1.625rem;
    line-height: 1.125;
    margin: 2rem 0 0.5rem;
}

.product .photo, .product .gallery ul {
    background-color: #efefef;
    background-size: cover;
    overflow: hidden;
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    padding-top: 66%;
}

.product .photo img {
    display: block;
    position: absolute;
    top: 0;
}

.product .gallery li, .product .gallery li a {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}

.product .gallery ul {
    -moz-transition: background 0.2s linear;    
    -webkit-transition: background 0.2s linear;    
    transition: background 0.2s linear;    
}

/*.product .gallery:hover ul { background: #000; }*/

.product .gallery img {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transition: transform 0.2s linear, opacity 0.2s linear;
}

.product .gallery .sig img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 0;
    padding-top: 74%;
}

.no-touch .product .gallery:hover img {
    transform: scale(1.1);
    /opacity: 0.7;
}

.product .descr, .product .full_text {
    font-size: 0.9375rem;
    line-height: 1.25;
}

.product .order {
    content: '';
    text-align: right;
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 35%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 35%);
    background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 35%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 35%);
    background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 35%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 3rem 1.25rem 1.25rem;
}

.product .full_text {
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 4rem;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 1.25rem;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s linear, transform 0.3s ease-out;
}

.product .hover .full_text {
    transform: translateY(0);
    opacity: 1;
}

.product .tags { display: none; }

.product .counter {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 1;
}

.product .counter li {
    background: #99cf16;
    box-shadow: 0 0 0 0.125rem #fff;
    border-radius: 50%;
    text-indent: -9999rem;
    position: static;
    float: left;
    width: 0.75rem;
    height: 0.75rem;
}

.product .counter {
    background: rgba(255,255,255,0.85);
    border-radius: 0.125rem;
    font-size: 0.8125rem;
    line-height: 2rem;
    padding: 0 0.5rem;
}

.product .counter:after { content: ' фото'; }

.product .counter li:not(:last-of-type) { margin-right: 0.5rem; }

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

.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.png) 0 -70px no-repeat;
    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; }
    
    .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.png) 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 {
        max-width: 48.75rem;
        padding-top: 2rem;
        margin: 0 auto;
        -moz-transform: translateX(1.5rem);
        -webkit-transform: translateX(1.5rem);
        transform: translateX(1.5rem);
    }
    
    .logo { width: 13.25rem; }    
    .product { width: 50%; }
    
    .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 */
    
    .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: 3rem;
        width: auto;
        margin-top: 2rem;
    }
    
}