/* Common styles */
* {   box-sizing: border-box; }       

html {  font-family:  'Open Sans', sans-serif; }
body {  background-color: #fff; margin: 0px; color: #585858;     font-size: 13px; }
h1, h2, h3 {  margin-top: 0; }
header h1 {  margin: 0; }
a  {  color: #840101; text-decoration: none;   }
a:hover  {  color: #cc3300; text-decoration: underline;   }
/*-----------------------------------------------------------------------------------------------*/

	    

.clearfix::after {  content: "";  display: table;  clear: both; }
.container {  margin: 0px; position: relative; min-height: 100vh; overflow: hidden; }
.content-area {  width: 100%;  }

.sidebar {  width: 33.3%;  float: right;  padding: 1rem; }

.main-header {  /* background-color: #bfbfbf; */ width: 100%; }

.main-header_cont {  height: 30px; padding: 6px 0px 10px 0px; width: 100%; margin: 0px auto;   background-color: #3a3a3a; color: #fff;  }
.main-header_cont_in {      width: 92vw; margin: 0px auto;   }
.main-header_bot {  height: 30px; padding: 0px 0px 5px 0px; width: 100%; margin: 0px auto;
/*
background: -moz-linear-gradient(top,  rgba(135,135,135,0.65) 0%, rgba(0,0,0,0) 20%); / * FF3.6-15 * /
/*background: -webkit-linear-gradient(top,  rgba(135,135,135,0.65) 0%,rgba(0,0,0,0) 100%); / * Chrome10-25,Safari5.1-6 * /
background: linear-gradient(to bottom,  rgba(135,135,135,0.65) 0%,rgba(0,0,0,0) 100%); / * W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ * /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6878787', endColorstr='#00000000',GradientType=0 ); / * IE6-9 * /
*/
 }

.main-header_bot_in {     width: 92vw; margin: 0px auto; border-bottom: 0px #666 solid;   }

.main-header_bot h1 {  width: 70%;  float: left;  height: 100%; margin: 10px 0px 15px 0px;  }
.main-header_bot h1 a {  text-decoration: none; color: #585858; font-size: 1.5em; font-weight: 400; }


#left_widget {    float: left; color: #fff; }

#top_widget { width: 70%; float: right; text-align: right; }
#top_widget a { float: right; margin-left: 5px; }
#top_widget span { font-size: 13px; clear: both; display: block; }

#top_menu  { float: right; margin-right: 50px;  }
#top_menu a {  color: #aaa; }
#top_menu  i { float: right; margin-right: 5px; margin-left: 10px; margin-top: 2px; font-size: 16px; }

.content-area-wrapper   {   width: 92vw; margin: 0px auto;     }

#top_menu .far  {  color: #aaa; }

#content { padding-bottom: 160px;   }


.soc_icons  i {        font-size: 18px; margin-top: 5px; color: #585858; }

.main-menu {  width: auto;  float: right; margin-top: 30px; }
.main-menu ul {  margin: 0px 0px 20px 0px;  padding: 0; }
.main-menu__item {  list-style-type: none; padding: 0;  display: inline-block;  font-size: 13px;  margin: 0px 4px; }
/*.main-menu .main-menu__item:last-of-type {  margin-right: 0;}  */
.main-menu__item a { font-weight: normal; text-decoration: none; color: #585858; font-weight: 700;}
.main-menu__item a:hover { font-weight: normal; text-decoration: underline; color: #cc3300; font-weight: 700;}
.second-menu ul {  margin: 0px 0px 20px 0px;  padding: 0; }
.second-menu {  width: 30%;  float: right; margin-right: 0px;  }
.second-menu ul li { float: right; margin-right: 0px; margin-left: 1.3rem; }


ul.zapati-menu  { margin-top: 0px; }
ul.zapati-menu li {  list-style-type: none; padding: 0;  display: inline-block;  font-size: 13px;  font-weight: 400; margin: 0px 4px; }
ul.zapati-menu li  a { font-weight: normal; text-decoration: none; color: #888; font-weight: 400;}

/*-----------------------------------------------------------------------------------------------*/

.filter_wrap { width: 100%; height: 34px; background-color: #ebebeb; margin: 2px auto 54px auto; padding: 0px 0px;}
  .filter_wrap form > div { float: left; margin-top: 8px; }
  .f_druh { margin-left: 60px; }
  .f_cut { margin-left: 60px; }
  .f_order { margin-left: 100px; }
  .only_avail  { margin-left: 60px; }
  .filter_wrap select { width: auto; min-width:200px; background-color: #efefef; color: #585858; margin-left: 10px; }
  .f_order select { min-width:150px; }
  
  .filter_back {  
    background-color: #efefef;
    display: block;    height: 34px;
    margin-left: -1000px;    padding-left: 1000px;
    margin-right: -1000px;    padding-right: 1000px;
}
  
  
/*-----------------------------------------------------------------------------------------------*/  


main.content-area { margin-top: 20px;  }

footer.footer {   position: absolute;  bottom: 0; background-color: #bfbfbf; width: 100%; height: 65px; font-size: 13px; padding-top: 15px; }

footer.footer a { font-weight: normal !important; }

.f-left { width: 30%; float: left; text-align: left; }
.f-center { width: 30%; float: left;  text-align: center; }
.f-right { width: 30%; float: right;   text-align: right; }

/*-----------------------------------------------------------------------------------------------*/

.grid-container {  display: grid;  grid-column-gap: 10px; grid-row-gap: 10px;   grid-template-columns: 2fr 2fr 2fr 2fr;  /* border: 1px blue solid; */ }

/*----------- shop list ------------------------*/

.shop_list_item { padding: 0px;  height: auto; background-color: #e7e7e7; border-radius: 0.3em;}
.shp_text {margin: 5px 7px 5px 5px;}
.item_thmb_wrap {   width: 100%; overflow: hidden; min-height: 150px; border-radius: 0.3em;}
.item_thmb {   display: block;  width: 100%;  padding-bottom: 65%;   background-size: cover;  }

.shop_list_item:hover .shp_h2 a { color: #cc3300; } 

.video_thm {   background-color: #fff;   min-height: 100px;  position: relative; cursor: pointer;  }
.video_thm .vidiko {
    width: 100%;    height: 80%;    position: absolute;
    top: 1.2vw;    left: 0px;     background-image: url("/templates/foundation/img/video-5-icon-wh.png");
    background-position: center center;    background-repeat: no-repeat;
}


.s_skladem { color: #488b00; font-weight: 400; }
.s_rezervovano { color: #585858; font-weight: 400; }
.s_neprodejne { color: #585858; font-weight: 400; }
.s_prodano { color: #585858; font-weight: 400; }

/* detail zbozi */
.skladem .s_skladem { color: green; font-weight: 700; }
.skladem .s_rezervovano { color: #840101; font-weight: 700;  }
.skladem .s_neprodejne { color: #585858; font-weight: 700; }
.skladem .s_prodano { color: #840101; font-weight: 700; }

.bn_koupit { padding: 5px 35px;  background: #ddd; border: 1px #840101 solid; text-decoration: none; font-weight: 600; color: #840101; border-radius: 0.3em; }


.video {     width: 100%; float: left; margin-bottom: 5px; }

.shp_h2 { }
.shp_h2 a {    text-decoration: none; font-weight: 600; color: #585858;  }
.shp_h2 a:hover {    text-decoration: none; font-weight: 600; color: #cc3300;  }

.shp_bot {margin-top: 5px;}

.shp_bot_left {     width: 70%; float: left; }
.shp_bot_right {     width: 30%; float: right; text-align: right; }
.shp_bot_left_sp {     width: 55%; float: left; }
.shp_bot_right_sp {     width: 45%; float: right; text-align: right; }


.shp_popisek  {     width: 100%; float: left; margin: 3px 0px 3px 0px; }
.shp_sklad {  }
.shp_price {  }

.shp_d_info {   color: #999; font-size: 90%; }

/*----------- shop item ------------------------*/

.item_cena { font-size: 16px; color: #585858; font-weight: 700; margin-bottom: 10px; }
.item_vrch {margin: 0px 0px 30px 0px;}
.item_spodek_l { float: left;}
.item_spodek_r { width: 45%; float: right; margin-top: 10px}

.item_l {     float: left; width: 65%;  }
.item_r {     float: right; width:  31%;  }

.item_r h1 {     font-size: 1.7em; }

.item_thmbs   {     float: left; width: 100%;   display: grid;  grid-column-gap: 4px; grid-row-gap: 4px;   grid-template-columns: 2fr 2fr 2fr 2fr;   }
.item_thm_im {  width: 100%; cursor: pointer; border: 1px  #e0e0e0 solid ; border-radius: 0.3em;}

#main_tm {    width: 100%;  border-radius: 0.3em; }


.order_form input {  width: 200px; }
.order_form textarea {  width: 200px; height: 100px; }
.order_form td {  vertical-align: top;  }
.order_form #submit {  width: 100px; } 

/*-------------------------------------------------------------------------------------------------*/
@media all and (max-width: 1600px) {
    .content-area-wrapper   {   width: 92vw;   }
    .main-header_bot_in {     width: 92vw;  }
    .main-header_cont_in {      width: 92vw;   }   
}                                                   
														 
@media all and (max-width: 1450px) {
    .content-area-wrapper   {   width: 92vw;   }
    .main-header_bot_in {     width: 92vw;  }
    .main-header_cont_in {      width: 92vw;   }   
    .grid-container {               grid-template-columns: 2fr 2fr 2fr;   }
}    
                                          
@media all and (max-width: 1080px) {
    .content-area-wrapper   {   width: 92vw;   }
    .main-header_bot_in {     width: 90vw;  }
    .main-header_cont_in {      width: 90vw;   }   
    .grid-container {               grid-template-columns: 2fr 2fr 2fr;   }

    .main-header_bot h1 a {  font-size: 1.4em; }

    .video_thm .vidiko {    top: 1.5vw;     }

    .item_l {    width:  59%; }
    .item_r {    width:  39%; }
    .item_r h1 {     font-size: 1.5em; }
    .item_thmbs   {     grid-template-columns: 2fr 2fr 2fr;   }
}                                      

@media all and (max-width: 768px) {
    
	.main-header_cont {     height: 60px;    padding: 6px 0px 10px 0px;     }
	
	.filter_back {    height: 60px; }	
	
	#top_widget { float: none; width: 100%; } 
	#top_menu  { margin: 6px 0px 0px 0px; }
	
	.grid-container {               grid-template-columns: 2fr 2fr;   }

    .main-header_bot h1 a {  font-size: 1.2em; }
    .video_thm .vidiko {    top: 4vw;     }

    .item_l {     float: none; width: 100%;  }
    .item_r {     float: none; width: 100%;  }
    .item_thmbs   {   float: none; width: 100%; }
    .item_thmbs   {     grid-template-columns: 2fr 2fr;   }

}

@media all and (max-width: 576px) {

	.filter_back {    height: auto; padding-top: 8px; padding-bottom: 8px;  }
	.filter_wrap {    height: auto;  margin: 2px auto 8px auto; }
	
  .f_druh { margin-left: auto; margin-right: auto; float: none !important; }
  .f_cut { margin-left: auto; margin-right: auto;  float: none !important;  }
  .f_order { margin-left: auto; margin-right: auto;  float: none !important;  }
  .only_avail  { margin-left: auto; margin-right: auto;  float: none !important;  }	
	
    .grid-container {               grid-template-columns: 2fr;   }
}