@charset "utf-8";


html {
	margin: 0;
	padding: 0;
	min-width: 1170px;
	background: #FFF;
	color: #363636;
}

body {
	font: 1rem/1.4 Roboto, arial, sans-serif;
	min-height: 100vh;
}


a {
	color: #414042;
	text-decoration:none;
}

a:hover {
	color: #0f99de;
}

:focus {
	outline: none;
}

img {
	border: 0;
}

h1 {font-size: 1.6rem;}
h2 {font-size: 1.4rem;}
h3 {font-size: 1.2rem;}
h4 {font-size: 1.05rem;}

ul {list-style: none;}

.btn {
	display: inline-block;
	padding: 0 2rem;
	background-color: #0f99de;
	color: #FFF;
	text-transform: uppercase;
	text-align: center;
	outline: 0;
	font: 500 1rem/50px Roboto;
}

.btn:hover {
	background-color: #e1e1e1;
	color: #363636;
}


hr {background: linear-gradient(to right, rgba(0,0,0,0) 0%, #0f99de 50%, rgba(0,0,0,0) 100%); border: 0; margin: 1rem 0; height: 1px;}



/********************** $GRID  *****************************/

.grid {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-ms-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;	
}


.grid-wrap {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	-ms-flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-ms-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-ms-align-items: flex-start;
	-webkit-align-items: flex-start;
	align-content: flex-start;
}

/********************** $CONTENT ***************************/

.article p {margin-top: .5rem; font-size: .875rem;}
.article p:first-child {margin-top: 0;}

.article img {max-width: 100%;}

.article ul {list-style-position: inside;}

.article ol {list-style-position: inside;}



table {width: 100%; line-height: 2rem; margin-bottom: 2rem;}

table tr td:first-child {
	font-weight: 600;
}
table tr td:last-child {
	text-align: right;
}

table td {padding: .25rem 1rem;}
table tr:nth-child(odd) {
	background: #f5f5f5;
}

table tr:nth-child(even) {
	background: #ececec;
}


.title {
	position: relative;
	display: block;
	padding-bottom: 1rem;
	margin-bottom: 20px;
	font: 700 1.5rem Roboto; 
	text-align: left; 
	text-transform: uppercase;
	border-bottom: 1px solid #e1e1e1;
}

.title:after {
	content: '';
	position: absolute;
	left: 0;
	top: 44px;
	display: block;
	width: 110px;
	height: 2px;
	background-color: #363636;
}

.s-title {
	font: 700 1.5rem Roboto;
}

.s-title:after {
	content: '';
	display: block;
	margin: 1rem 0 10px;
	width: 110px;
	height: 2px;
	background-color: #0f99de;
}



/********************** HEADER ****************************/
.header {
	position: relative;
	height: 128px;
	padding: 0 calc((100% - 1170px)/2);
	background-color: #FFF;
	color: #535353;
	-ms-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	border-top: 8px solid #0f99de;
	font: 300 1rem Roboto;
	z-index: 1;
}

.h-logo {
	display: inline-block;
	width: 197px;
	height: 34px;
	background: url("../img/logos.png") 0 0 no-repeat;
	text-indent: -9999px;
}

.f-logo {background: url("../img/f-logo.png") 0 0 no-repeat;}

.h-logo:hover {
	opacity: .8;
}

.h-desc {
	display: inline-block;
	width: 215px;
	padding: .5rem 0 .5rem 20px;
	border-left: 2px solid #0f99de;
}

.header a[href^="tel:"] {
	font: 700 2rem Roboto;
}

.header a[href^="tel:"]:before {content: url("../img/phone.png"); padding-right: 1rem;}

.header a[href^="tel:"] > span {font: 100 2rem Roboto;}

.h-adr {
	padding-left: 40px;
	background: url("../img/map.png") 0 50% no-repeat;
}

.h-cart {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url("../img/cart.png") no-repeat;
	color: #FFF;
	z-index: 1;
}

.h-cart .ms2_total_count {
	position: absolute;
	top: 0;
	right: 5px;
	display: inline-block;
	padding: 2px 6px;
	background-color: #0f99de;
	color: #FFF;
	border-radius: 50%;
	text-align: center;
	font-size: .7rem;
}

/************************ NAV ******************************/

.nav {
	height: 50px;
	padding: 0 calc((100% - 1170px)/2);
	background-color: #363636;
}

.nav-menu {	
	text-transform: uppercase;
	white-space: nowrap;	
}

.nav-menu > li > a {
	font: 500 1rem/50px Roboto;
	color: #FFF;
}

.nav-menu a:hover {
	color: #0f99de;
}

.nav-menu > .active > a {
	color: #0f99de;
}

.nav-menu > li {
	position: relative;
	display: inline-block;
}

.nav-menu > li+li {margin-left: 3rem;}

.nav-menu > li:hover > .sub-menu {
	display: block;
}

.nav-menu > .parentClass > a:after {
	content: "\f0d7";
	padding-left: .5rem;
	font: .7rem/50px FontAwesome;
}

.sub-menu {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	border-top: 2px solid #0f99de;
	background-color: #FFF;
	z-index: 2;
}

.sub-menu > li {
	padding: .5rem 1rem;
}


.sub-menu > li > .sub-menu {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	border-top: 2px solid #0f99de;
	background-color: #FFF;
	z-index: 2;
}


.sub-menu > li:hover > .sub-menu {
	display: block;
}
/********************** $SLIDER ***************************/

.fotorama__arr {
	opacity: 0;
}

/*.fotorama__arr--next {
    right: 2rem;
    background: url("../img/next.png") no-repeat;
    transition: all .2s !important;
}

.fotorama__arr--next:hover {
	right: 1.5rem;
    background: url("../img/next-h.png") no-repeat;
}

.fotorama__arr--prev {
    left: 2rem;
    background: url("../img/prev.png") no-repeat;
    transition: all .2s !important;
}

.fotorama__arr--prev:hover {
	left: 1.5rem;
    background: url("../img/prev-h.png") no-repeat;
} */


body > .fotorama .fotorama__nav-wrap {
	position: relative;
    top: -4rem;
 }


.fotorama__nav__frame.fotorama__active .fotorama__dot {
    background: url("../img/pimp-a.png");
}

.fotorama__dot {
    display: block;
    margin: 0 5px;
    width: 25px;
    height: 25px;
    background: url("../img/pimp.png");
}

.fotorama__caption {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	text-transform: uppercase;
}

.fotorama__caption__wrap {
	display: inline-block;
	padding: 2.5rem;
	background-color: rgba(255,255,255,.9);
	border: 1rem solid rgba(255,255,255,.5);
	font: 500 3rem Roboto;
	 -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    white-space: nowrap;

}

.fotorama__caption__wrap > span {
	color: #0f99de;	
}

.fotorama__caption__wrap > p {
	font: 100 3rem Roboto;
}

/********************** $MAIN ***************************/

.main {
	position: relative;
	padding: 2rem calc((100% - 1170px)/2);
	background-color: #FFF;
}

.title + .article {
	width: 100%;
}

.article {
	width: 875px;
	text-align: justify;
}


.sidebar {
	width: 275px;
	border-right: 1px solid #363636;	
}

.inner-menu {
	display: block;
}

.inner-menu > li {
	position: relative;
}


.inner-menu > li > a {
	display: inline-block;
	padding: .25rem 0;
	color: #363636;
	font: 500 1rem Roboto;
}

.inner-menu a:hover, .inner-menu .active a {
	color: #0f99de;
}

/********************** $CATALOG  ***************************/

.catalog {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.c-title {
	display: block;
	text-align: center;
	padding-bottom: 1rem;
	margin-bottom: 20px;
	background: url("../img/div.png") center bottom no-repeat;
	font: 700 1.5rem Roboto;
	text-transform: uppercase;
}


/********************** $ITEM  ***************************/
.item {
	display: block;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	padding: .5rem;
	width: 275px;
	height: 415px;
	border: 1px solid #e1e1e1;
	text-align: center;
}

.item .btn {
	width: 275px;
	margin-left: -.5rem;
}

.item:hover .i-img {
	opacity: .8;
}

.item.category {
	height: 325px;
}



.i-img {
	display: block;
	width: 257px;
	height: 257px;
}

.i-title {
	display: block;
	min-height: 57px;
	padding-top: 1rem;
	font: 300 1rem Roboto;
	color: #363636;
}

.i-price {
	display: block;
	padding: .75rem;
	font: 700 1rem Roboto;
}

.i-price:after {
	content: "\f158";
	font: .9rem FontAwesome;
}


#msProduct .btn {
	margin: 1rem 0;
	width: 100%;
}
 
.p-photo, .p-info {
	padding-right: 1rem;
	width: 40%;
}

.p-info {text-align: left;}
.p-desc {padding-top: 1rem;}

.p-desc, #msProduct .title {width: 100%;}

#msProduct {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.p-price {
	display: block;
	margin-bottom: 1rem;
	font: 700 1.5rem Roboto;
	color: #0f99de;
	text-align: left;
}

input[type=radio] + label {
	display: inline-block;
    background: #ddd;
    color: #FFF;
    padding: 10px 12px;
    font-weight: 600;
}

#msProduct input[type=radio] {opacity: 0; position: absolute;}
input[type=radio]:checked + label {background: #0f99de;}

/********************** $PROMO ***************************/

.promo {
	overflow: hidden;
	padding: 1rem calc((100% - 1170px)/2);
	background-color: #ebebeb;
}

.p-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	font: 600 20px/75px Roboto;
	text-transform: uppercase;
	text-indent: 2rem;
	background-color: #0f99de;
	color: #FFF;
	transition: all .25s;
}

.p-title > span {
	font: 100 20px Roboto;
}

.promo > *:hover .p-title {
	content: 'К разделу';
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: rgba(255,255,255,.5) url("../img/to.png") center center no-repeat;
	color: #363636;
}

.p-1 {
	position: relative;
	float: left;
	width: 377px;
	height: 574px;
	background: url("../img/1.jpg")	no-repeat;
}

.p-2, .p-3 {
	position: relative;
	float: right;
	width: 773px;
	height: 277px;
}

.p-2 {background: url("../img/2.jpg")	no-repeat;}
.p-3 {margin-top: 20px; clear: right; background: url("../img/3.jpg")	no-repeat;}

/********************** $FOOTER  ***************************/

.footer {
	position: relative;
	padding: 2rem calc((100% - 1170px)/2);
	background-color: #363636;
	border-top: 8px solid #0f99de;
}

.footer a {color: #0f99de; font: 300 1rem Roboto;}
.footer a:hover {color: #FFF;}

.footer ul {
    line-height: 2;
}

.tu a {
	text-transform: uppercase;
}

.footer .f_form_form input {
	width: 200px;
	padding: 6px;
	background-color: #5e5e5e;
	color: #FFF;
	border: 1px solid transparent;
}

.footer .f_form_form input:focus {
	border-color: #0f99de;
	background-color: #252525;
}

.footer .f_form_form .btn {
	width: 200px;
	height: 35px;
}

.footer .f_form_form .btn:hover {
	background-color: transparent;
	outline: 2px solid #0f99de;
	color: #FFF;
}

.cont a {
	color: #FFF;
}

.cont a[href^="tel:"] {font-weight: 700;}
.cont a > span {
	font-weight: 300;
}

.cont .fa {
	color: #0f99de;
	min-width: 20px;
	text-align: center;
}


.f-title {
	position: relative;
	display: block;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid rgba(255,255,255,.2);
	color: #FFF;
    font: 500 1rem Roboto;
    text-transform: uppercase;
}

.f-col {
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	padding-left: 2rem;
}

.copyright {
	overflow: hidden;
    padding: 2rem calc((100% - 1170px)/2);
    background-color: #252525;
    color: #5e5e5e;
}

.copyright a {
	color: #FFF;
}

.copyright a:hover {
	opacity: .8;
}

/*******************************************************************/


 .breadcrumb {
 	display: block; 
 	padding: 0 calc((100% - 1170px)/2);
 	background-color: #ebebeb;
 }

 .breadcrumb li {
 	display: inline-block; 
 }

  .breadcrumb li+li:before {
  	content: '/';
  	padding: 0 .5rem;
  	color: #363636;
  }
 
 .breadcrumb a {
 	display: inline-block;
 	font: 300 1rem/50px Roboto;
 	color: #0f99de;
 }
 
 .breadcrumb a:hover {opacity: .8;}



.form-control {
    border: 0;
    text-indent: 1rem;
    line-height: 35px;
    background: transparent;
    border: 1px solid #41b165;
}



/* Корзина */

#msCart table {
  width: 100%;
  background: none;
}
#msCart td {
  padding: 1rem;
  /*border-top: 1px solid #00acfd;
  border-bottom: 1px solid #00acfd;*/
}
#msCart td.image {
  width: 80px;
}
#msCart td.titl {
  font-weight: 600;
}
#msCart td.titl a {

}
#msCart td.title a:hover {
  color: #00acfd;
}

#msCart td.count {
  width: 143px;
}
#msCart td input[type="number"] {
  width: 60px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
#msCart td button {
  
}
#msCart td button:hover {
}
#msCart td.remove {
  text-align: center;
  width: 100px;
}
#msCart th {
  font-weight: 600;
  padding: 10px 10px;
}
#msCart th.remove {
  text-align: center;
}
#cartDelete {
  padding: 20px 0 40px;
}
#cartDelete button {
  
}
#cartDelete button .icon {
  margin-right: 3px;
}
#cartDelete button:hover {
}
#msOrder {
  padding-bottom: 30px;
}
#msOrder h4 {
  font: 400 16px / 20px 'OpenSans', arial, sans-serif;
  padding-top: 20px;
  padding-bottom: 10px;
  text-transform: uppercase;
}
#msOrder input[type="text"],
#msOrder input[type="email"],
#msOrder textarea {
  margin-bottom: 15px;
}
#msOrder .orderhalf {
  width: 420px;
}
#msOrder .ordersum {
  padding: 1rem 1.5rem;
  font: normal 600 16px / 20px 'OpenSans', arial, sans-serif;
  margin-bottom: 20px;
}
#msOrder .orderbuttons:after {
  content: "";
  display: block;
  clear: both;
}
#msOrder .orderbuttons .left .icon {
  margin-right: 3px;
}
#msOrder .orderbuttons .right {
  
}
#msOrder .orderbuttons .right .icon {
  margin-right: 3px;
}
#msOrder .orderbuttons .right:hover {

}
#address_block {
  display: none;
}
/* Подвал */

.comment_textarea {width: 80%;}
.comment_textarea textarea {width: 100%; height: 50px;}

.comment_data {
    margin-bottom: 1rem;
}


#map {border-color: #cc2e3b;}

.pagination {
	margin-top: 1rem;
	list-style: none;

}

.pagination li {
	display: inline-block;
	margin-left: 5px;
	padding: 8px 14px;
	border: 1px solid #0f99de;
}

.pagination li.active {
	outline: 1px solid #0f99de;
}