/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    background: #232323;
    color: #979797;
    font-size: 13px;
    line-height: 1.4;
    font-family: 'Open Sans Sv', sans-serif;
}

p {
    margin: 15px 0;
}
 
*, *:before, *:after {
  box-sizing: border-box;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
.img-responsive {
    max-width: 100%;
    height: auto;
    display: inline-block;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}
 

h1, .h1, 
h2, .h2, 
h3, .h3, 
h4, .h4, 
h5, .h5, 
h6, .h6 {
    font-family: 'GothamPro', sans-serif;
    font-weight: 300;
    color: #fff;
    margin: .8em 0 1.3em 0;
}

h1, .h1 {
    font-size: 28px;
}

h2, .h2 {
    font-size: 24px; 
}

h3, .h3 {
    font-size: 20px; 
}

h4, .h4 {
    font-size: 18px; 
}

h5, .h5 {
    font-size: 16px; 
}

h6, .h6 {
    font-size: 14px; 
}

.l-container {
    margin: 0 auto;
    width: 1220px;
    min-height: 1px;
    padding: 0 10px;
    clear: borh;
}

.l-header {
    width: 100%;
}

.l-main {
  padding: 0 0 100px 0;
}

.section {
    padding: 36px 0 0 0;
}

.section a {
    color: #fff;
}

.section__title {
    margin-top: 0;
}

.l-footer {
    background: #1b1b1b;
    color: #979797;
    padding: 80px 0;
    font-size: 13px;
    min-width: 100%;
    float: left;
}

.social {
    margin: 8px 0 32px 0;
    padding: 0;
    display: block;
    float: left;
    width: 100%:
}

.social li {
    list-style: none;
    float: none;
    display: inline-block;
    float: left;
    margin-right: 15px;
}

.social li:nth-last-child(1) {
    margin-right: 0
}

.l-footer .large {
    font-size: 17px;
}

.l-footer__col {
    float: left;
}

.l-footer__col:nth-child(1) {
    width: 375px;
}

.l-footer__col:nth-child(2) {
    width: 220px;
}

.l-footer__col:nth-child(3) {
    width: 150px;
}

.l-footer__col:nth-child(4) {
    width: 150px;
}

.l-footer__col:nth-child(5) {
    width: 165px;
    float: right;
}

.l-footer a {
    color: #fff;
    text-decoration: none;
}

.l-footer nav li {
    margin-bottom: 17px;
}

.l-footer nav a {
    color: #979797;    
}

.l-footer nav a:hover,
.l-footer nav a:active {
    color: #fff;
}

.l-footer__title {
    font-family: 'GothamPro', sans-serif;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
}

/* 'GothamPro' нормально не работает в IE */
@supports (-ms-accelerator:true) {
   .l-footer__title {  font-family: 'Open Sans Sv', sans-serif; } 
}

@media all and (-ms-high-contrast:none) {
   .l-footer__title {  font-family: 'Open Sans Sv', sans-serif; } 
}

.header__top {
    min-width: 100%;
    float: left;
}

.header__bot {
    min-width: 100%;
    float: left;
    background: #0b0b0b;
}

.search__inp {
    border: 0 none;
    background: none;
    width: 50px;
    padding: 5px;
    margin: 10px 0;
    color: #fff;
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;    
}

.search__inp.active {
    width: 200px;
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
    background: #1b1b1b;
}

.search__inp::-webkit-input-placeholder {color:#8d8d8d;opacity: 1;}
.search__inp::-moz-placeholder          {color:#8d8d8d;opacity: 1;}/* Firefox 19+ */
.search__inp:-moz-placeholder           {color:#8d8d8d;opacity: 1;}/* Firefox 18- */
.search__inp:-ms-input-placeholder      {color:#8d8d8d;opacity: 1;}

.search__btn {
    float: left;
    margin: 16px 8px;
}

.logo {
    display: inline-block;
    height: 90px;
    padding: 20px 0;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav li {
    list-style: none;
}

.navbar {
    margin: 0;
    padding: 0;
}

.navbar li {
    list-style: none;
    display: inline-block
}

.navbar .dots {
    position: relative;
}

.navbar .dots:after {
    content: '';
    width: 1px;
    height: 12px;
    position: absolute;
    right: 0;
    top: 20px;
    background: url(../img/dot.png) repeat-y;
}

.navbar .dots:before {
    content: '';
    top: 20px;
    width: 1px;
    height: 12px;
    background: url(../img/dot.png) repeat-y;
    position: absolute;
}

.navbar a {
    padding: 15px;
    color: #fff;
    text-decoration: none;
    display: block;
}

.navbar--user {
    float: right;
}

.navbar--user a {
    color: #8d8d8d;
}

.navbar--top {
    float: right;
    min-height: 80px;
}

.navbar--top .navbar__ul {
    display: block;
}

.navbar--top li {
    padding: 34px 32px;
}

.navbar--top a {
    font-family: 'GothamPro', sans-serif;
    font-size: 15px;
    padding: 0;
    display: block;
    text-transform: uppercase;
    position: relative;
} 

/* 'GothamPro' нормально не работает в IE */
@supports (-ms-accelerator:true) {
  .navbar--top a {  font-family: 'Open Sans Sv', sans-serif; } 
}

@media all and (-ms-high-contrast:none) {
    .navbar--top a {  font-family: 'Open Sans Sv', sans-serif; } 
}

.navbar--top a:after {
    content: '';
    height: 1px;
    width: 0;
    display: block;
    position: absolute;
    background: #e31563;
    bottom: -2px;
    left: 1px;
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
}

.navbar--top a:hover:after {
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
    width: 100%;
}

.navbar--top .active a:after {
    width: 100%;
}

.dd {
    position: relative;
}

.dd:after {
    content: ' ';
    position: absolute;
    top: 23px;
    right: 2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4.5px 0 4.5px;
    border-color: #8d8d8d transparent transparent transparent;
}

.dd.active:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4.5px 4px 4.5px;
    border-color: transparent transparent #8d8d8d transparent;
} 

.dd__list {
    display: none;
}

.dd__list.active {
    display: block;
    position: absolute;
    background-color: #1b1b1b;
    z-index: 999;
}

.dd__list a {
    padding: 6px 15px;
    color: #fff;
}

.dd__list a:hover,
.dd__list a:active {
    color: #e31563;
}

.tabs {
    float: left;
    width: 100%;
}

.tabs__caption {
    width: 240px;
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
.modal .tabs__caption {
    width: 100%;
}

.modal .tabs__caption li {
    float: left;
    width: 50%;
    font-size: 18px;
}

.modal .tabs__content {
    width: 100%;
    min-height: auto;
}

.tabs__caption li {
    min-height: 60px;
    display: block;
    padding: 19px 20px;
    cursor: pointer;
}

.tabs__caption .tabs__img {
    padding: 0;
}

.tabs__caption li.active {
    background: #1b1b1b;
}

.tabs__content {
  width: 960px;
  min-height: 480px;
  padding: 45px;
  float: left;
  background-color: #1b1b1b;
  background-position: top right;
  background-repeat: no-repeat;
  display: none; /* по умолчанию прячем все блоки */
}

.tabs__content--individ {
    background-image: url('../img/tabs/individ_bg.jpg');
}

.tabs__content__txt {
/*    padding-right: 390px*/
}
.tabs__content__txt table {
    width: 100%!important;
}
.tabs__content h2 {
    margin-top: 0;

}
.tabs__content.active {
  display: block; /* по умолчанию показываем нужный блок */
}

.table-wrap {
    display: none;
}
.table-wrap.active {
    display: block;
}
.table {
    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
}

.table thead tr {
  display: block;
/*  position: relative;*/
}

.table thead td:nth-child(1) {
    width: 260px;
}

.table thead td  {
    width: 115px;
}
.table tbody {
  display: block;
  overflow: auto;
  width: 100%;
}

.table td {
    border: 1px solid #464646;
    padding: 7px;
}

.table--price tbody td:nth-child(1) {
    width: 260px
}
.table--price.table--clothes thead td:nth-child(1),
.table--price.table--clothes tbody td:nth-child(1) {
    width: 115px;
}
.table.table--wallets thead td:nth-child(1),
.table--price.table--wallets tbody td:nth-child(1) {
    width: 120px;
}
.table.table--wallets td {
    width: 120px;
}

.table--price .price-old,
.table--price .price {
    display: block;
    margin: 5px 0;
    color: #fff;
    font-size: 16px;
    text-align: center;
}
.table--price .price-old {
	color: #636363;
	text-decoration: line-through;
}
.js-product-quantity-wrp {
    text-align: center;
    display: block;
}
.table--price .js-product-quantity {
    width: 45px;
    height: 24px;
    display: block;
    border: 0 none;
    padding: 0 4px;
    text-align: center;
    float: left;
}

.table--price tbody td {
    width: 115px;
}

.table--price thead tr td {
    background: #171717;
    text-align: center;
    color: #fff;
} 


.table--price thead tr:nth-child(2) td {
    background: #1b1b1b;
}

.table--price tbody tr:hover  td {
    background: #171717;
}

.table--price .itm {
    padding: 5px 25px;
    color: #fff;
    vertical-align: middle;
}

.table--price .itm img {
    padding: 5px 25px;
    max-width: 150px;
}

.aval {
    display: block;
    text-align: center; 
    margin-bottom: 10px;
}

.aval span {
    color: #7aff70;
}

.notaval {
    display: block;
    text-align: center;
    color: #a35757;
}

.notaval span {
    display: block;
    clear: both;
}

.quantity-select {
    width: 80px;
    text-align: center;
    color: #000;
    margin: 10px 0;
}

a.toggle_col.toggle_col--show {
    text-decoration: none;
    color: #7aff70;
}
a.toggle_col {
    text-decoration: none;
    color: #e31563;
    font-weight: bold;
    position: relative;
}
a.toggle_col:before {
    content: "[-]";
}

a.toggle_col.toggle_col--show:before {
    content: "[+]";
}

.icon {
    background-image: url(../img/icons/spritesheet.png);
    background-repeat: no-repeat;
    background-color: transparent;
    display: block;
    border: 0 none;
    float: left;
}

.icon--cart {
    width: 30px;
    height: 27px;
    background-position: -5px -5px;
    margin-right: 14px;
    position: relative;
    bottom: -3px;
}

.icon--char {
    margin-right: 14px;
    width: 32px;
    height: 32px;
    background-position: -5px -42px;
}

.icon--fb {
    width: 36px;
    height: 35px;
    background-position: -5px -84px;
}

.icon--search {
    width: 16px;
    height: 16px;
    background-position: -5px -129px;
}

.icon--user {
    width: 12px;
    height: 17px;
    margin-right: 10px;
    background-position: -5px -155px;
}

.icon--vk {
    width: 36px;
    height: 35px;
    background-position: -5px -182px;
}

.icon--yt {
    width: 36px;
    height: 35px;
    background-position: -5px -227px;
}


.dd--lang {
    text-transform: uppercase;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


/* Default class for an overlay */
.ow-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #424242;
  opacity: 0.8;
}

/* Default class for both hidden overlay and modal window */
.ow-closed {
  display: none;
}

/* Default class for modal window */
.modal {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50px;
  width: 550px;
  height: auto;
  background-color: #232323;
}

.form__row {
    width: 100%;
    clear: both;
    margin-bottom: 15px;
    position: relative;
}

.form__control {
    display: block;
    width: 100%;
    padding: 8px 5px;
    background: #232323;
    border: 1px solid #979797;
}

.form__label {
    display: block;
    padding: 4px 0;
}

.btn {
    background: #e31563;
    border: 1px solid #e31563;
    color: #fff;
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
}
.cart {
    padding: 20px;
    background: #1b1b1b;
}

.cart .left,
.cart .right {
    float: left;
    width: 330px;
}
.cart .left {
    font-size: 18px;
}

.cart .left  div {
    margin-bottom: 10px;
}

 
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top:-50px;
  margin-left:-50px;
  text-align: center;
  display: none;
}

.wrap {
    position:absolute;
    width:100px;
    height:100px;
    float:left;
    
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    
    -moz-transform:scale(0.3);
    -o-transform:scale(0.3);
}

.wrap div
{
    width:10px;
    height:30px;
    background:#e31563;
    position:absolute;
    top:35px;
    left:45px;
    
    border-radius: 50px;
    -moz-border-radius-bottomleft:50px;
    -moz-border-radius-bottomright:50px;
    -moz-border-radius-topleft:50px;
    -moz-border-radius-topright:50px;   
}

@-webkit-keyframes rotateThis {
    from { -webkit-transform:scale(0.3) rotate(0deg); }
    to   { -webkit-transform:scale(0.3) rotate(360deg); }
}


.bar1 {
    -o-transform:rotate(0deg) translate(0, -40px);opacity:0.1;
    -moz-transform:rotate(0deg) translate(0, -40px);opacity:0.1;
    -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.1;
}
.bar2 {
    -o-transform:rotate(36deg) translate(0, -40px);opacity:0.2;
    -moz-transform:rotate(36deg) translate(0, -40px);opacity:0.2;
    -webkit-transform:rotate(36deg) translate(0, -40px);opacity:0.2;
}
.bar3 {
    -o-transform:rotate(72deg) translate(0, -40px);opacity:0.3;
    -moz-transform:rotate(72deg) translate(0, -40px);opacity:0.3;
    -webkit-transform:rotate(72deg) translate(0, -40px);opacity:0.3;
}
.bar4 {
    -o-transform:rotate(108deg) translate(0, -40px);opacity:0.4;
    -moz-transform:rotate(108deg) translate(0, -40px);opacity:0.4;
    -webkit-transform:rotate(108deg) translate(0, -40px);opacity:0.4;
}
.bar5 {
    -o-transform:rotate(144deg) translate(0, -40px);opacity:0.5;
    -moz-transform:rotate(144deg) translate(0, -40px);opacity:0.5;
    -webkit-transform:rotate(144deg) translate(0, -40px);opacity:0.5;
}
.bar6 {
    -o-transform:rotate(180deg) translate(0, -40px);opacity:0.6;
    -moz-transform:rotate(180deg) translate(0, -40px);opacity:0.6;
    -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.6;
}
.bar7 {
    -o-transform:rotate(216deg) translate(0, -40px);opacity:0.7;
    -moz-transform:rotate(216deg) translate(0, -40px);opacity:0.7;
    -webkit-transform:rotate(216deg) translate(0, -40px);opacity:0.7;
}
.bar8 {
    -o-transform:rotate(252deg) translate(0, -40px);opacity:0.8;
    -moz-transform:rotate(252deg) translate(0, -40px);opacity:0.8;
    -webkit-transform:rotate(252deg) translate(0, -40px);opacity:0.8;
}
.bar9 {
    -o-transform:rotate(288deg) translate(0, -40px);opacity:0.9;
    -moz-transform:rotate(288deg) translate(0, -40px);opacity:0.9;
    -webkit-transform:rotate(288deg) translate(0, -40px);opacity:0.9;
}
.bar10 {
    -o-transform:rotate(324deg) translate(0, -40px);opacity:1;
    -moz-transform:rotate(324deg) translate(0, -40px);opacity:1;
    -webkit-transform:rotate(324deg) translate(0, -40px);opacity:1;
}

label.error {
	color: #e31563;
	display: inline-block;
	padding: 5px 0
}

.js-plus,
.js-minus {
	display: block;
	color: #fff;
	font-weight: bold;
	background: #e31563;
	text-decoration: none;
 	padding: 0;
    line-height: 18px;
	height: 24px;
	width: 24px;
	float: left;
	position: relative;
}

 
.js-minus span,
.js-plus span {
	position: absolute;
	font-weight: bold;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	font-size: 23px;
	line-height: 23px;
}


input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

.modal .msg {
    color: #e31563;
    font-size: 14px;
}

#result {
    padding: 43px;
    font-size: 17px;
}

.tabs__content__txt table {
    border: 1px solid #464646;
}
.tabs__content__txt table td {
    padding: 10px;
    border: 1px solid #464646;
}
 
.header-fixed { 
    position: fixed; 
    top: 0px; 
    display:none;
    background-color:white;
}