* {padding:0px; margin:0px; outline:none;}
html, body {-webkit-text-size-adjust:none; width:100%; height:100%;}
body {background:#ffffff; font-family: 'Roboto', sans-serif; font-size:14px; color:#444444;}
body.main {background-position:50% 700px;}
img {border:0px; vertical-align:top;}
table {border:0px; border-collapse:collapse;}
input, textarea, select {font-family: 'Roboto', sans-serif; font-size:12px; color:#444444;}
input[type=submit], input[type=button] {cursor:pointer;}

.clear {margin:0px !important; padding:0px !important; float:none !important; clear:both; height:0px; overflow:hidden;}
.clear-r {clear:right;}

.mceContentBody {background:#ffffff; font-size:14px; color:#000;}
.mceContentBody h1, .mceContentBody h2 {padding:0 0 15px 0;}
.mceContentBody p {padding:0 0 20px 0;}
.mceContentBody ul {margin:0 0 20px 18px;}
.mceContentBody ol {margin:0 0 20px 18px;}


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

.wrapper {position:relative; margin:0 auto; height:auto; min-height:100%; overflow:hidden; min-width:1000px;}
.wrap {position:relative; margin:0 auto; max-width:960px;}
.wrap:after {content: ''; display: block; clear: both;}
.wrap * {transition:all 0.10s ease-out 0s;}


/* Header */

header {position: relative; z-index: 3; height: 100px; background: #55565a;}
header .logo {float: left; width:25%; margin: 26px 0 0 0;}
header .logo > span {display: block; margin: -10px 0 0; font-size: 11px; color: #fff; text-align: center;}
header .search {position: relative; float: left; margin: 30px 0 0 0; width:37%;}
header .search input[type=text] {width: 100%; height: 42px; background: #fff; border: 1px solid #f1f1f1; box-shadow: 0 1px 3px #ccc; border-radius: 3px; padding: 0 55px 0 15px; box-sizing: border-box;}
header .search input[type=submit] {position: absolute; top: 0; right: 0; width: 40px; height: 43px; background: #a4a4a4 url(/foppastyle/img/i-search.png) center no-repeat; border: none; border-radius: 0 3px 3px 0;}
header .search input[type=submit]:hover {background-color: #999;}
header .search:after {content:''; position: absolute; top: 0; right: 0; width: 40px; height: 43px; background: #a4a4a4 url(/foppastyle/img/i-search.png) center no-repeat; border: none; border-radius: 0 3px 3px 0;}
header .phone {float: right; margin: 11px 0 0 0; font-size: 24px; font-weight: 500; color: #fff; text-align:center;}
header .phone .btn-call {display: block; margin: 10px 0 0 0; padding: 5px 0 5px; font-size: 12px; color: #fff; background: #aaaaaa; text-decoration: none; text-align: center; border-radius: 2px;}
header .phone .btn-call:hover {background: #999;}
header .phone .time {display:block; margin:-3px 0 0 0; font-size:13px; font-weight:400; text-align:center;}

.nav-main {background: #131416; transition: none;}
.nav-main * {transition: none;}
.nav-main ul {list-style: none; padding: 14px 0; text-align: center;}
.nav-main ul li {display: inline-block; margin: 4px 12px; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}
.nav-main ul li a {color: #a1a2a7; text-decoration: none;}
.nav-main ul li a:hover, .nav-main ul li a.active {color: #fff;}

.fixed .nav-main {position: fixed; z-index: 50; top: 0; left: 0; width: 100%; box-shadow: 0 0 12px #888; transition: none;}


/* Page */

.page {margin: 70px 0 0;}

.banner-main {position: relative;margin: 0 0 60px; height:340px; overflow: hidden; transition: none;}
.banner-main img {width:100%;}
.banner-main * {transition: none;}
.banner-main .item {position:relative; height:340px; }
.banner-main .item .name {position:absolute; bottom:0; left:0; width:100%; padding:25px 0; font-size:22px; color:#fff; text-align:center; background:rgba(0, 0, 0, 0.5);}
.banner-main .item .link {position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
.banner-main .slick-arrow {position: absolute; z-index: 5; top: 50%; margin-top: -20px; width: 30px; height: 40px; background:rgba(0, 0, 0, 0.2) url(/foppastyle/img/slider-arrows.png) no-repeat; border: none; text-indent: -9999px; overflow: hidden; cursor: pointer; transition:all 0.10s ease-out 0s;}
.banner-main .slick-arrow:hover {background-color: rgba(0, 0, 0, 0.4);}
.banner-main .slick-prev {left: 0; background-position: 7px 50%;}
.banner-main .slick-next {right: 0; background-position: -78px 50%;}

.about-box {margin: 0 0 90px;}
.about-box .pic {float: left; margin: 8px 0 0 0; width: 255px;}
.about-box .pic img {max-width: 100%; box-shadow: 0 20px 40px -20px #999;}
.about-box .info {margin: 0px 0 0 310px;}

.content {font-size: 15px; color: #444444;}
.content h1, .content .h1 {margin: 0 0 7px; font-size: 30px; font-weight: normal;}
.content h2, .content .h2 {margin: 25px 0 7px; font-size: 24px; font-weight: normal;}
.content h2:first-child, .content .h2:first-child {margin-top: 0;}
.content h3, .content .h3 {margin: 25px 0 15px; font-size: 18px; font-weight: normal;}
.content h3:first-child, .content .h3:first-child {margin-top: 0 !important;}
.content p {margin: 0 0 13px; line-height: 1.5;}
.content ul {margin: 0 0 13px 18px;}
.content ul li {margin: 0 0 5px 0;}
.content dl {margin: 0 0 13px;}
.content *:last-child {margin-bottom: 0;}
.content .hide {display: none; transition: none; margin-bottom: 15px;}
.content .btn-gray {margin-top: 5px; }
.content table {width:100% !important;}
.content table td {padding:8px 15px 8px 0; border-bottom:1px solid #ccc;}
.content table td hr {display:none;}
.content table td p {margin:0;}

.btn-gray {display: inline-block; padding: 8px 13px; color:#fff; background:#aaaaaa; text-decoration: none; border-radius: 3px;}
.btn-gray:hover {background: #999;}
.btn-gray .off {display:none;}
.btn-gray.active span {display:none;}
.btn-gray.active .off {display:inline;}

.why-we {margin: 60px 0 0 0; padding: 50px 0 0 0; background: #f6f6f6;}
.why-we .h2 {margin: 0 0 50px; font-size: 34px; font-weight: normal; color: #626262; text-align: center; text-transform: uppercase;}
.why-we .h2 > span {display: inline-block; padding: 0 5px 10px; border-bottom: 5px solid #aaaaaa;}
.why-we .item {float: left; margin: 0 0 60px; width: 50%; font-size: 14px; color: #636363;}
.why-we .item:nth-child(2n) {clear: both;}
.why-we .item .ico {float: left; width: 115px; height: 70px; line-height: 70px; text-align: center;}
.why-we .item .ico img {display: inline; vertical-align: middle;}
.why-we .item .info {margin: 0 0 0 115px;}
.why-we .item .name {margin: -5px 0 10px; font-size: 30px; color: #aaaaaa;}
.why-we .item p {margin: 0 100px 0 0;}


/* Footer */

footer {}
footer .l {float:left;}
footer .r {float:right;}
footer .copy {padding: 17px 0 15px; background: #55565a; font-size: 14px; color: #fff;}
footer .copy a {color: #fff;}
footer span {color:#a1a2a7;}
.to-top {position: absolute; top: -46px; left: 0; padding: 6px 20px; font-size: 14px; color: #fff; text-decoration: none; background: #131416; border-radius: 2px 2px 0 0;}
.to-top:hover {background: #333;}
.to-top:after {content:''; display: inline-block; margin: 0 0 0 10px; width: 13px; height: 7px; background: url(/foppastyle/img/arrow-top.png) no-repeat;}

.contacts-footer {padding: 85px 0 110px 0;}
.contacts-footer .h2 {margin: 0 0 60px; font-size: 34px; font-weight: normal; color: #626262; text-transform: uppercase; letter-spacing: 3px; text-align: center;}
.contacts-footer .box {float: left; margin: 0 30px 0 0; padding: 30px 25px 0 25px; width: 300px; min-height: 285px; color: #fff; background: #aaaaaa; box-sizing: border-box;}
.contacts-footer .box:nth-child(3n) {margin-right: 0;}
.contacts-footer .name {margin: 0 0 15px; padding: 5px 10px 0 45px; font-size: 22px;}
.contacts-footer .name.phone1 {background: url(/foppastyle/img/i-phone1.png) 0 0 no-repeat;}
.contacts-footer .name.phone2 {background: url(/foppastyle/img/i-phone2.png) 0 0 no-repeat;}
.contacts-footer .name.email {background: url(/foppastyle/img/i-mail.png) 0 7px no-repeat;}
.contacts-footer p {margin: 0 0 0 45px; font-size: 14px;}
.contacts-footer .btn-white {display: block; margin: 50px auto 20px auto; padding: 18px 0 17px; width: 225px; font-size: 14px; font-weight: bold; color: #626262; background: #fff; border-radius: 3px; text-decoration: none; text-align: center; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 2px 15px -5px #555;}
.contacts-footer .btn-white:hover {background: #f1f1f1;}
.contacts-footer .phones {margin: 40px 0 0px 0; font-size: 26px; font-weight: bold; line-height: 40px; text-align: center;}
.contacts-footer .small {text-align:center;}
.contacts-footer .big {font-size:18px; margin-top:18px; height:31px;}
.contacts-footer .big a {color:#fff; text-decoration:none; border-bottom:1px dashed #fff;}
.contacts-footer .big a:hover {border-bottom:none;}


/* Catalog */

.catalog .shop-items {}
.catalog .shop-items:after {content: ''; display: block; clear: both;}
.catalog .col-items {float:left; margin: 0 30px 30px 0; width: 300px; height: 460px; overflow: hidden;}
.catalog .col-items.auto {height: auto;}
.catalog .col-items:nth-child(3n) {margin-right: 0;}
.catalog .group-title {margin: 0 0 30px; height: 130px; font-size: 26px; color:#fff; background:#aaaaaa;}
.catalog .group-title > span {display: block; padding: 22px 25px 0 25px;}
.catalog .shop-item {position:relative; margin: 0 0 30px; height: 460px; overflow: hidden; box-sizing:border-box; border:1px solid #aaa;}
.catalog .shop-item > a {position:absolute; top:0; left:0; width:100%; height:100%;}
.catalog .shop-item .pic {position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}
.catalog .shop-item:hover .pic {transform: scale(1.1, 1.1);}
.catalog .shop-item .name {position:absolute; z-index:2; bottom:0; left:0; width:100%; box-sizing:border-box; padding:18px 20px; font-size:18px; color:#fff; background:rgba(0, 0, 0, 0.5);}
.catalog .shop-item .price {position:absolute; z-index:2; top:-39px; right:0; box-sizing:border-box; padding:10px 12px; font-size:16px; color:#444; background:rgba(255, 255, 255, 0.5);}
.catalog .shop-item .price .old {display:block; margin:0 14px -2px 0; font-size:0.9em; color:#444444; text-align:right; text-decoration:line-through;}
.catalog .shop-item .price.discount {top:-55px; color:#e60101;}
.catalog .shop-item img {display:block; margin: 0 auto; height:100%;}
.catalog .shop-item:hover img {transform: scale(1.1, 1.1);}
.catalog .shop-item .labels {position:absolute; z-index:10; top:20px; left:-1px;}
.catalog .shop-item .labels > span {display:block; float:left; clear:both; margin:0 0 3px; padding:6px 8px 5px; font-size:13px; font-weight:500; color:#fff; text-transform:uppercase;}
.catalog .shop-item .labels .sale {background:#e46b6b;}
.catalog .shop-item .labels .action {background:#f2b62a;}
.catalog .shop-item .labels .hit {background:#3f7bdf;}
.catalog .group-title+.shop-item {height: 300px;}
.catalog .shop-item2 {height: 300px;}
.catalog-group {margin: 0 0 20px;}


/* Popup */

#overlay {position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transition: none !important;}
#popup {position: absolute; z-index: 95; top: 200px; left: 200px; transition: none !important;}
#popup > div {position: relative; background: #fff; border-radius: 5px;}
#popup .close {position: absolute; z-index:10; top: -35px; right: -40px; width: 35px; height: 35px; background: url(/foppastyle/img/close.png) top no-repeat; opacity: 1; transition: none;}

.shop-item-popup {position:relative; width: 940px;}
.shop-item-popup form.blocked:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
.shop-item-popup * {transition:all 0.10s ease-out 0s;}
.shop-item-popup h1 {padding: 32px 50px; font-size: 36px; font-weight: bold; border-bottom: 2px solid #f2f2f2; letter-spacing: 1px;}
.shop-item-popup .cont {padding: 40px 15px 30px 50px;}
.shop-item-popup .col-l {float: left; width: 200px;}
.shop-item-popup .col-r {margin: 0 0 0 260px;}
.shop-item-popup .control-box {padding: 40px 50px; border-top: 2px solid #f2f2f2;}

.shop-item-popup .pics-cont {min-height:200px;}
.shop-item-popup .pics {display:none; position: relative; margin: 3px 0 50px; height: 200px; border: 2px solid #e3e3e3; box-sizing: border-box;}
.shop-item-popup .pics * {transition: none;}
.shop-item-popup .pics .pic-item {position: relative; display: block; height: 196px; line-height: 196px; text-align: center; overflow: hidden;}
.shop-item-popup .pics .pic-item img {display: inline; max-width: 100%; vertical-align: middle;}
/*.shop-item-popup .pics .pic-item:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/foppastyle/img/plus.png) center no-repeat; opacity: 0; transition:all 0.10s ease-out 0s;}
.shop-item-popup .pics .pic-item:hover:after {opacity: 1;}*/
.shop-item-popup .pics .slick-arrow {position: absolute; top: 50%; margin-top: -7px; width: 8px; height: 14px; overflow: hidden; text-indent: -9999px; background: url(/foppastyle/img/slider-arrows2.png) no-repeat; border: none; cursor: pointer;}
.shop-item-popup .pics .slick-prev {background-position: left; left: -18px;}
.shop-item-popup .pics .slick-next {background-position: right; right: -18px;}

.shop-item-popup .colors {}
.shop-item-popup .colors .name-box {margin: 0 0 8px; font-size: 16px; font-weight: bold; text-transform: uppercase;}
.shop-item-popup .colors .list {}
.shop-item-popup .colors .list input[type=radio] {display: none;}
.shop-item-popup .colors .list .color-item {position: relative; display: inline-block; margin: 0 2px 0 0; width: 18px; height: 18px; border: 1px solid #ffffff; cursor: pointer;}
.shop-item-popup .colors .list .color-item:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #ffffff; box-sizing: border-box;}
.shop-item-popup .colors .list input[type=radio]:checked+.color-item {border-color: #c8c8c8; background-size:cover; background-repeat:no-repeat; background-position:center;}
.shop-item-popup .colors .info {margin: 8px 0 0 0; padding: 2px 0 2px 27px; font-size: 12px; background: url(/foppastyle/img/i-info.png) left no-repeat;}


.shop-item-popup .tabs {margin: 0 0 30px; font-size: 16px; font-weight: bold; text-transform: uppercase;}
.shop-item-popup .tabs a {display:inline-block; margin: 0 20px 0 0; padding: 0 0 2px; color:#959595; text-decoration: none; border-bottom: 3px solid #fff;}
.shop-item-popup .tabs a:hover {color:#494949;}
.shop-item-popup .tabs a.active {color:#494949; border-bottom: 3px solid #d6d6d6;}
.shop-item-popup .tabs-cont {min-height:280px;}
.shop-item-popup .tabs-cont > div {display: none;}
.shop-item-popup .scroll {height: 280px; overflow: hidden; transition: none !important;}
.shop-item-popup .scroll * {transition: none !important;}
.shop-item-popup .content {font-size: 14px; padding-right: 35px;}
.shop-item-popup .content h3 {margin-top: 25px; font-weight: bold;}
.shop-item-popup dl:after {content: ''; display: block; clear: both;}
.shop-item-popup dl dt {float: left; clear: both; margin: 0 0 5px; width: 220px;}
.shop-item-popup dl dd {margin: 0 0 5px 220px;}

.doc-item {padding:15px 0 15px 0; border-bottom:1px dotted #ccc;} 
.doc-item:first-child {border-top:1px dotted #ccc;}
.doc-item img {margin:0 5px -2px 0;}

.options-item {display:block; padding:15px 0 15px 0; border-bottom:1px dotted #ccc; cursor:pointer;} 
.options-item:first-child {border-top:1px dotted #ccc;}
.options-item.active {background:#eee;}
.options-item > div {display:table; width:100%;}
.options-item > div > div {display:table-cell; vertical-align:middle;}
.options-item .pic {padding-left:10px; width:40px; text-align:center;}
.options-item .pic img {max-height:40px; max-width:100%; border: 2px solid #e3e3e3;}
.options-item .name {padding:0 20px;}
.options-item .input {width:40px; text-align:center;}
.options-item .input input {position:relative; top:2px;}
.options-item .price {width:80px; font-size:16px; font-weight:bold; text-align:left;}
.options-item .price > span {display:inline-block; position:relative;}
.options-item .price .price-total {display:none; position:absolute; top:25px; left:50%; margin-left:-60px; width:120px; padding:5px 0; background:#131416; border-radius:3px; font-weight:normal; font-size:13px; color:#fff; text-align:center;}
.options-item .price .price-total:before {content:''; position:absolute; top:-4px; left:50%; margin:0 0 0 -5px; width: 0; height: 0; border-style: solid; border-width: 0 4px 4px 4px; border-color: transparent transparent #131416 transparent;}
.options-item:hover {background:#fafafa;}
.options-item:hover .price .price-total {display:block;}

.shop-item-popup .jspVerticalBar {width: 4px; background: none;}
.shop-item-popup .jspTrack {background: none;}
.shop-item-popup .jspDrag {background: #d6d6d6; border-radius: 3px;}
.shop-item-popup .jspDrag:hover {background: #ccc;}

.checkout-box {display:none; padding:40px 50px; width:auto !important; border-top: 2px solid #f2f2f2; transition: none;}
.checkout-box h2 {margin: -8px 0 25px 0; font-weight: 500; font-size: 24px;}
.checkout-box .col {float:left; width:47.5%;}
.checkout-box .col.r {float:right;}
.checkout-box textarea {height:81px !important;}
.checkout-box .submit {margin:0 0 0 0; padding:0 !important; border:none !important; text-align:left !important;}
.checkout-box .success {margin:43px 0 0 0 !important;}
.checkout-box .privacy {margin:0 0 20px;}

.shop-item-popup .control-box .price {float: left; margin: 0 30px 0 0; padding: 15px 0; width: 240px; font-size: 30px; font-weight: 500; background: #f0f0f0; border-radius: 3px; text-align: center;}
.shop-item-popup .control-box .price .old {display:inline-block; margin:0 10px 0 0; font-size:0.65em; color:#444444; text-align:right; text-decoration:line-through;}
.shop-item-popup .control-box .price.discount {color:#e60101;}
.shop-item-popup .control-box .submit {float: left;}
.shop-item-popup .control-box .phones {float: right; margin: 7px 0 0 0; font-size: 18px; text-align: center;}
.shop-item-popup .control-box .phones > span {display: block; margin: 3px 0 0 0; font-size: 24px; font-weight: bold;}


.btn-buy-big {display: block; padding: 15px 0; width: 330px; font-size: 30px; font-weight: 500; color: #fff; text-decoration: none; background: #777; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: 1px; border: none; cursor: pointer;}
.btn-buy-big:hover {background: #888;}

.btn-gray2 {display: inline-block; padding: 15px 30px 13px; font-size: 22px; color: #fff; text-decoration: none; background: #aaaaaa; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: 1px; border: none; cursor: pointer;}
.btn-gray2:hover {background: #999;}

.btn-gray3 {display: block; padding: 15px 0 13px; width:100%; font-size: 26px; color: #fff; text-decoration: none; background: #777; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: 1px; border: none; cursor: pointer;}
.btn-gray3:hover {background: #888;}


.form-popup {position:relative; width: 500px;}
.form-popup form.blocked:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
.form-popup * {transition:all 0.10s ease-out 0s;}
.form-popup .title-popup {padding: 35px 50px; font-size: 28px; border-bottom: 2px solid #f2f2f2; text-align: center;}
.form-popup .cont {padding: 40px 50px;}
.form-popup .field {margin: 0 0 20px;}
.form-popup .field:last-child {margin-bottom: 0;}
.form-popup input[type=text] {box-sizing: border-box; width: 100%; height: 45px; padding: 0 10px; font-size: 15px; color: #222; border:1px solid #aaaaaa;}
.form-popup textarea {box-sizing: border-box; width: 100%; height: 120px; padding: 10px 10px; font-size: 15px; color: #222; border:1px solid #aaaaaa; resize: none; vertical-align:top;}
.form-popup .submit {padding: 40px 50px; border-top: 2px solid #f2f2f2; text-align: center;}
.form-popup input.input-error, .form-popup textarea.input-error {border-color: #ff0000 !important;}
.form-popup .error {display: none; margin: 20px 0 0 0; font-size: 14px; color: #ff0000; text-align: center;}
.form-popup .success {display: none; font-size: 22px; text-align: center;}

.form-popup.feedback .title-popup:before {content: ''; display: inline-block; margin: 0 15px -2px 0; width: 34px; height: 22px; background: url(/foppastyle/img/i-mail2.png) no-repeat;}
.form-popup.callback .title-popup:before {content: ''; display: inline-block; margin: 0 15px -7px 0; width: 34px; height: 36px; background: url(/foppastyle/img/i-phone12.png) no-repeat;}


/* Plugins */

.zoomContainer {z-index:200;}
.zoomWindowContainer > div {border:2px solid #e3e3e3 !important; margin:-2px 0 0 60px !important;}

.autocomplete-suggestions { margin:-1px 0 0 0; width:280px !important; border: 1px solid #f1f1f1; background: #FFF; overflow: auto; box-sizing:border-box;}
.autocomplete-suggestion { padding: 10px 15px 10px 10px; font-size:13px; white-space: nowrap; overflow: hidden; cursor:pointer;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; }


/* Privacy */
.privacy {display:block; margin:0 0 0; padding:13px 15px 15px; font-size:11px; color:#555; text-align:left; border:1px dashed #555; border-radius:5px;}
.privacy input {position:relative; top:2px; margin:0 3px 0 0;}
.privacy.privacy-error {background-color:#ffebeb !important;}