/*============================*/
/* General
/*============================*/
html, body {
    background: #fff;
    font: 100% helvetica, arial, sans-serif;
    margin: 0;
    padding: 0;
}

#container {
margin: 2 px auto;
    width: 80%;           
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

a {
    color: #111;
    font-weight: bold;
    text-decoration: none;
    -moz-transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;
}

a:hover {
    color: #555;    
}

/*============================*/
/* Main Navigation
/*============================*/
#nav {            
    height: 50px;
    line-height: 50px;            
    width: 100%;
}

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {    
    background: #333;
    background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
    background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
    background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
    background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);    
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));    
    background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
    float: left;
    position: relative;
    min-width:15%;
}

#nav li:first-child, #nav li:first-child a { 
    -webkit-border-radius: 3px 0 0 3px; 
    -moz-border-radius: 3px 0 0 3px; 
    border-radius: 3px 0 0 3px; 
}
#nav li:last-child, #nav li:last-child a { 
    -webkit-border-radius: 0 3px 3px 0; 
    -moz-border-radius: 0 3px 3px 0; 
    border-radius: 0 3px 3px 0; 
}

#nav a {                
    border-right: 1px solid #222;
    border-left: 1px solid #555;
    color: #ccc;
    display: block;
    font-size: 14px;
    height: 50px;
    overflow: hidden;
    text-align: center;
    text-shadow: 0 -1px 0 #000;    
    -webkit-box-shadow: inset 0 0 10px transparent;
    -moz-box-shadow: inset 0 0 10px transparent;
}

#nav a:after {
    background: rgba(255,255,255,.07);
    content: "";
    height: 25px;
    left: 0;
    position: absolute;
    width: 100%;
}

#nav li:hover > a {
    background: #333;
    border-left-color: #222;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    -webkit-box-shadow: inset 0 0 10px #111;
    -moz-box-shadow: inset 0 0 10px #111;
    box-shadow: inset 0 0 10px #111;
}
#nav span {
    position: relative;    
}

#nav a:active span {
    color: #ffd;
    position: relative;
    top: 1px;
}

#nav li:first-child a {
    border-left: none;    
}

#nav li:last-child a {
    border-right: none;    
}

.dropdown > a span:after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #ccc;
    content: "";
    right: -13px;
    position: absolute;
    top: 3px;
}

.dropdown:hover > a span:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content: "";
    right: -15px;
    position: absolute;
    top: 6px;
}

/*============================*/
/* Sub Navigation
/*============================*/
#nav ul ul {
    opacity: 0;
    position: absolute;
    top: 50px;
    visibility: hidden;
    width: 0;
    -moz-transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;
}

#nav ul li:hover ul {
    opacity: 1;
    visibility: visible;
    width: 100%;
}

#nav ul ul li {
    background: #f3f3f3;
    float: none;    
    line-height: 0;
    width: 100%;            
}

#nav ul ul li:nth-child(odd) {
    background: #eee;    
}

#nav ul ul li:first-child, #nav ul ul li:first-child a { 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
}
#nav ul ul li:last-child, #nav ul ul li:last-child a { 
    -webkit-border-radius: 0 0 3px 3px; 
    -moz-border-radius: 0 0 3px 3px; 
    border-radius: 0 0 3px 3px; 
}

#nav ul ul li a {
    border-right: none;
    border-left: none;
    border-top: 1px solid #fff;
    color: #555;
    font-size: 12px;
    height: 36px;
    line-height: 36px;
    padding: 0 0 0 15px;
    text-align: left;
    text-shadow: 0 -1px 0 #eee;
}

#nav ul li ul li a:after {
    background: rgba(0,0,0,.02);
    content: "";
    height: 18px;
    left: 0;
    position: absolute;
    top: 19px;
    width: 100%;
}

#nav ul ul li a:hover {
    background: #ffd;
    color: #111;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#nav ul ul a:active span {
    color: #111;
    position: relative;
    top: 1px;
}



/*============================*/
/* footer
/*============================*/
/* Main Footer */
footer .main-footer{ padding: 20px 0; background: #252525;}
footer ul{ padding-left: 0; list-style: none;}

/* Copy Right Footer */
.footer-copyright { background: #222; padding: 5px 0;}
.footer-copyright .logo { display: inherit;}
.footer-copyright nav { float: right; margin-top: 5px;}
.footer-copyright nav ul { list-style: none; margin: 0; padding: 0;}
.footer-copyright nav ul li { border-left: 1px solid #505050; display: inline-block; line-height: 12px; margin: 0; padding: 0 8px;}
.footer-copyright nav ul li a{ color: #969696;}
.footer-copyright nav ul li:first-child { border: medium none; padding-left: 0;}
.footer-copyright p { color: #969696; margin: 2px 0 0;}

/* Footer Top */
.footer-top{ background: #252525; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 3px solid #222;}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{ background: transparent;}
footer.transparent .footer-copyright{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}

/* Footer light */
footer.light .footer-top{ background: #f9f9f9;}
footer.light .main-footer{ background: #f9f9f9;}
footer.light .footer-copyright{ background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}

/* Footer 4 */
.footer- .logo { display: inline-block;}

/*====================  
  Widgets  
====================== */
.widget{ padding: 20px; margin-bottom: 40px;}
.widget.widget-last{ margin-bottom: 0px;}
.widget.no-box{ padding: 0; background-color: transparent; margin-bottom: 40px;
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{ margin-bottom: 18px;}
.widget li a{ color: #ff8d1e;}
.widget li a:hover{ color: #4b92dc;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit; position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{ float: right; background: #7f7f7f;}

.typo-light h1,  
.typo-light h2,  
.typo-light h3,  
.typo-light h4,  
.typo-light h5,  
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{ color: #fff;}

ul.social-footer2 { margin: 0;padding: 0; width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a:hover {background-color:#ff8d1e;}
ul.social-footer2 li a {display: block; height:30px;width: 30px;text-align: center;}
.btn{background-color: #ff8d1e; color:#fff;}
.btn:hover, .btn:focus, .btn.active {background: #4b92dc;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;

}







/*============================*/
/* Стилизация карточки товара
/*============================*/

.card {
  width: 347px;
  min-height: 330px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;  /* Размещаем элементы в колонку */
  border-radius: 4px;
  transition: 0.2s;
  position: relative;
  background: #ededed;
}

/* При наведении на карточку - меняем цвет тени */
.card:hover {
  box-shadow: 4px 8px 16px rgba(255, 102, 51, 0.2);
}

.card__top {
  flex: 0 0 200px; /* Задаем высоту 220px, запрещаем расширение и сужение по высоте */
  position: relative;
  overflow: hidden; /* Скрываем, что выходит за пределы */
}

/* Контейнер для картинки */
.card__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__image > img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Встраиваем картинку в контейнер card__image */
  transition: 0.2s;
}


.card__bottom {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.card__prices {
  display: flex;
  margin-bottom: 10px;
  flex: -1 0 30%; /* Размещаем цену */
}


.card__price--common {
  font-weight: 400;
  font-size: 20px;
  color: #606060;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
}


.card__title {
  display: block;
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 17px;
  line-height: 150%;
  color: #414141;
}

.card__title:hover {
  color: #ff6633;
}





/*============================*/
/* Стили сетки товаров
/*============================*/

.cards {
  display: grid;
  /* Автоматически заполняем на всю ширину grid-контейнера */
  grid-template-columns: repeat(auto-fill, 347px);
  width: 100%;
  max-width: 1150px; /* Ширина grid-контейнера */
  justify-content: center;
  justify-items: center; /* Размещаем карточку по центру */
  column-gap: 30px; /* Отступ между колонками */
  row-gap: 40px; /* Отступ между рядами */
  margin: 0 auto;
}




/*============================*/
/* Рамки для содержимого страницы
/*============================*/


.granica1{
        padding: 10px;
        border-radius: 10px;
        background-color: white;
        margin-left:10%;
        margin-right:10%;
}



/*====================
  Авторизация
====================== */

/*Modal*/
.close {
  color: #fff;
  transform: scale(1.2)
}
.modal-content {
  font-weight: bold;
  background: linear-gradient(to bottom right,#F87E7B,#B05574);
}
.form-control {
  margin: 1em 0;
}
.form-control:hover, .form-control:focus {
  box-shadow: none;  
  border-color: #fff;
}
.form-control::-webkit-input-placeholder {
  color: #eee;  
}
.form-control:focus::-webkit-input-placeholder {
  font-weight: bold;
  color: #fff;
}



/*============================*/
/* Slider image 1
/*============================*/
article{display:block}
#slider{text-align:center}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.catch{display:block;height:0;overflow:hidden}
#slider{margin:0 auto}
#slide1:checked ~ #slides .inner{margin-left:0}
#slide2:checked ~ #slides .inner{margin-left:-100%}
#slide3:checked ~ #slides .inner{margin-left:-200%}
#slide4:checked ~ #slides .inner{margin-left:-300%}
#slide5:checked ~ #slides .inner{margin-left:-400%}
#slide6:checked ~ #slides .inner{margin-left:-400%}
#slide7:checked ~ #slides .inner{margin-left:-400%}
#container_slider{width:100%;overflow:hidden}
#slides .inner{width:500%;line-height:0}
#slides article{width:20%;float:left}
#commands label{display:none;width:80px;height:80px;opacity:0.5}
#commands label:hover{opacity:0.8}
#slide1:checked ~ #commands label:nth-child(2),#slide2:checked ~ #commands label:nth-child(3),#slide3:checked ~ #commands label:nth-child(4),#slide4:checked ~ #commands label:nth-child(5),#slide5:checked ~ #commands label:nth-child(1){background:url('https://0.s3.envato.com/files/84450220/img/next.png') no-repeat;float:right;margin:0 12px 0 0;display:block}
#slide1:checked ~ #commands label:nth-child(5),#slide2:checked ~ #commands label:nth-child(1),#slide3:checked ~ #commands label:nth-child(2),#slide4:checked ~ #commands label:nth-child(3),#slide5:checked ~ #commands label:nth-child(4){background:url('https://0.s3.envato.com/files/84450220/img/previous.png') no-repeat;float:left;margin:0 0 0 -6px;display:block}
#slide1:checked ~ #active label:nth-child(1),#slide2:checked ~ #active label:nth-child(2),#slide3:checked ~ #active label:nth-child(3),#slide4:checked ~ #active label:nth-child(4),#slide5:checked ~ #active label:nth-child(5){background:#000;opacity:0.6;border-color:#fff!important;border:2px solid #fff}
#slides{position:relative;padding:2px;border:1px solid #ddd;margin:45px 0 0;background:#FFF;background:-webkit-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-moz-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-ms-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-o-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);-webkit-border-radius:2px 2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;border-radius:2px 2px 2px 2px;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);box-shadow:0 0 3px rgba(0,0,0,0.2)}
#slides .inner{-webkit-transform:translateZ(0);-webkit-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-moz-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-ms-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-o-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-webkit-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-moz-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-ms-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-o-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000)}
#slider{-webkit-transform:translateZ(0);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
#commands{-webkit-transform:translateZ(0);-webkit-transition:opacity 0.2s ease-out;-moz-transition:opacity 0.2s ease-out;-o-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}
#slide1:checked ~ #slides article:nth-child(1) .caption,#slide2:checked ~ #slides article:nth-child(2) .caption,#slide3:checked ~ #slides article:nth-child(3) .caption,#slide4:checked ~ #slides article:nth-child(4) .caption,#slide5:checked ~ #slides article:nth-child(5) .caption{opacity:1;-webkit-transition:all 1s ease-out 0.6s;-moz-transition:all 1s ease-out 0.6s;-o-transition:all 1s ease-out 0.6s;transition:all 1s ease-out 0.6s}
#commands,#commands label, #slides,{-webkit-transform:translateZ(0);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
#slider{max-width:960px}
@media only screen and (max-width:850px) and (min-width:450px){
  #slider #commands{margin:-25% 0 0 5%;width:90%;height:50px}
  #slider #commands label{-moz-transform:scale(0.9);-webkit-transform:scale(0.9);-o-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
  #slider #slides .caption{padding:280px 12px}
  #slider #slides{padding:2px 0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
}
@media only screen and (max-width:450px){
  #slider #commands{margin:-28% 0 0 1%;width:100%;height:70px}
  #slider #slides{padding:2px 0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
  #slider #slides .caption{opacity:0!important}
  #slider #commands label{-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}
}