@charset "utf-8";
/* CSS Document */
html { background-color: #1e1d1d; }
body { background-color: #fff; }
.clear { display: block; clear: both; height: 0; }
.left { float: left; }
.right { float: right; }
.hidden { display: none; }
.inner { width: 100%; min-width: 320px;  max-width: 1170px; margin: 0 auto; }

#container {
    width: 100%;
    margin: 0 auto;
    font: 16px 'Open Sans', sans-serif;
    font-weight: 400;
    color: #23475f;
}
#container a { cursor:pointer; }
#container img { vertical-align:bottom; }

#header .top { background-color: #17a8f2; }
#header .top .inner { padding: 5px 0; text-align: center; }
#header .top .phone { padding-left: 22px; background: url(../img/ico-phone-header.png) left center no-repeat; color: #f6f6f6; }
#header .middle .inner { padding: 20px 0; }
#header .middle .lSide { position: relative; z-index: 1; float: left; width: 270px; box-sizing: border-box; }
#header .middle .rSide { float: left; width: 270px; }
#header .middle .cSide { float: left; width: 100%; margin: 0 -270px; padding-top: 10px; }
#header .middle a.logo { display: inline-block; padding: 0 0 4px 50px; background: url(../img/logo-header.png) left center no-repeat; font-size: 33px; line-height: .8em; text-decoration: none; text-align: left; color: #0098e7; }
#header .middle .search { margin: 0 270px; }
#header .middle .search form { padding: 0 8px 0 16px; border: 1px solid #e0e0e0; border-radius: 3px; }
#header .middle .search form .lft { float: left; width: 100%; }
#header .middle .search form .cnt { margin-right: 32px; }
#header .middle .search form .rht { float: left; width: 32px; margin-left: -32px; }
#header .middle .search input { width: 100%; height: 32px; padding: 0; border: none; background-color: #fff; font: 15px 'Open Sans', sans-serif; font-weight: 400; }
#header .middle .search button { width: 32px; height: 32px; border: none; background: url(../img/bt-search.png) center center no-repeat; cursor: pointer; }
#header .middle .alphabet { padding: 4px 0 0 16px; font-size: 12px; font-weight: 300; color: #929292; }
#header .middle .alphabet li { display: inline-block; vertical-align: top; }
#header .middle .alphabet li a { margin-left: 1px; font-weight: 400; text-decoration: none; color: #146eb4; }
#header .middle .cart { text-align: center; }
#header .middle .cart a { font-size: 20px; text-decoration: none; color: #0098e7; }
#header .middle .cart a.btn { display: block; max-width: 106px; margin: 6px auto 0; padding: 5px 0; box-sizing: border-box; border-radius: 3px; background-color: #ff5300; font-size: 17px; color: #fff; }
#header .bottom { background-color: #0098e7; }
#header .bottom .inner { padding: 9px 0; text-align: center; }
#header .bottom .menu a.trigger { width: 32px; height: 32px; margin: 0 auto; background: url(../img/bt-header-trigger.png) center no-repeat; }
#header .bottom .menu li { display: inline-block; vertical-align: top; padding: 0 20px; }
#header .bottom .menu li a { text-decoration: none; color: #fff; }

#banner { height: 230px; background: url(../img/bg-banner.jpg) center no-repeat; background-size: cover; color: #fff; }
#banner .inner { padding-top: 63px; }
#banner h1 { font-size: 60px; font-weight: 400; line-height: 1.1em; }
#banner p { padding-left: 4px; font-size: 24px; }

#wrapper { padding: 50px 0; }

#lSide { position: relative; z-index: 1; float: left; width: 192px; box-sizing: border-box; }
#lSide .caption { /*text-align: center;*/ }
#lSide .caption span { /*padding-left: 10px;*/ font-weight: 700; }
#lSide .menu { padding-bottom: 18px; }
#lSide .menu a.trigger { width: 32px; height: 32px; margin: 0 auto; background: url(../img/bt-lSide-trigger.png) center no-repeat; }
#lSide .menu li { padding-bottom: 2px; }
#lSide .menu li a { display: block; padding: 5px 14px; background-color: #0098e7; font-size: 14px; text-transform: uppercase; text-decoration: none; color: #fff; }
#lSide a.banner { display: block; margin-bottom: 20px; padding-top: 16px; border: 1px solid #e3e3e3; border-radius: 3px; background-color: #fcfcfc; background-position: center bottom; background-repeat: no-repeat; text-align: center; text-decoration: none; }
#lSide a.banner img{max-width:100%;}
#lSide a.banner p { font-weight: 700; text-transform: uppercase; }
#lSide a.banner p b { font-size: 36px; }
#lSide a.banner p span { font-weight: 400; }
#lSide a.banner-01 { padding-bottom: 120px; background-image: url(../img/banner-01.jpg); color: #0098e7; }
#lSide a.banner-02 { padding-bottom: 140px; background-image: url(../img/banner-02.png); background-position: center bottom 20px; font-size: 15px; color: #ff6b19; }
#lSide a.banner-02 p b { font-size: 24px; }

#rSide { float: left; width: 100%; margin-left: -192px; }
#content { margin-left: 212px; }
#content h2 { padding-bottom: 12px; font-size: 20px; font-weight: 400; color: #23475f; }
#content h3 { padding-bottom: 12px; font-size: 18px; font-weight: 700; color: #23475f; }
#content p { padding-bottom: 12px; }
#content p b { font-weight: 700; }
#content p a { text-decoration: none; color: #0098e7; }
#content p.text-right { text-align: right; }
#content p.text-center { text-align: center; }
#content ul { padding-bottom: 12px; margin-left: 20px; list-style-type: disc; }
#content ul li ul { list-style-type: none; }
#content table { width: 100%; margin-bottom: 24px; }
#content table th { padding: 10px 12px; border: 1px #d0d0d0; border-style: none solid; background-color: #3b3939; font-size: 18px; font-weight: 700; color: #fff; }
#content table th:first-child { border-left: none; border-top-left-radius: 3px; }
#content table th:last-child { border-right: none; border-top-right-radius: 3px; }
#content table td { padding: 6px 12px; border: 1px solid #d0d0d0; background-color: #fff; }
#content table tr:nth-of-type(even) td { background-color: #ebebeb; }

#content .caption { margin-top: 12px; }
#content .caption:first-child { margin-top: 0; }

#content .table-wrapper { margin-bottom: 24px; padding: 0 12px; border: 1px solid #e9e9e9; border-radius: 3px 3px 0 0; }
#content .table-wrapper .caption { margin: 0 -12px; padding: 10px 12px; border-radius: 3px 3px 0 0; background-color: #3b3939; background-image: none; font-size: 18px; font-weight: 700; color: #fff; }
#content .table-wrapper table { margin-bottom: 0; text-align: left; }
#content .table-wrapper table th { border-style: none; background: none; color: #23475f; }
#content .table-wrapper table td { border-style: solid none none; }
#content .table-wrapper table td .qty { position: relative; width: 88px; /*margin: 0 auto;*/ }
#content .table-wrapper table td .qty input { width: 86px; padding: 0; border: 1px solid #d2d2d2; border-radius: 12px; font: 16px 'Open Sans', sans-serif; font-weight: 400; text-align: center; color: #23475f; }
#content .table-wrapper table td .qty a { display: block; position: absolute; top: 1px; width: 22px; height: 22px; border-radius: 100%; text-decoration: none; text-align: center; color: #fff; }
#content .table-wrapper table td .qty a.dec { left: 0; background-color: #d4d4d4; }
#content .table-wrapper table td .qty a.inc { right: 0; background-color: #0098e7; }
#content .table-wrapper table td a.btn { display: block; padding: 3px 0; box-sizing: border-box; border-radius: 3px; background-color: #0098e7; font-size: 14px; text-transform: uppercase; text-decoration: none; text-align: center; color: #fff; }
#content .table-wrapper table td a.remove { display: block; width: 20px; height: 20px; /*margin: 0 auto;*/ background: url(../img/bt-remove.png) center top no-repeat; }
#content .table-wrapper table tr:nth-of-type(even) td { background-color: #fff; }

#bSide { padding-top: 20px; }
#bSide .brands { text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; }
#bSide .brands img { display: inline-block; vertical-align: top; height:48px; }
#bSide .brands:after { content: ''; display: inline-block; width: 100%; font-size: 0; line-height: 0; }

.caption { margin-bottom: 12px; background: url(../img/bg-caption.png) center repeat-x; font-size: 24px; color: #0098e7; }
.caption span { position: relative; top: -2px; padding-right: 10px; background-color: #fff; }

.showcase { /*text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; */}
.showcase:after { content: ''; display: inline-block; width: 100%; font-size: 0; line-height: 0; }
.showcase .element {position:relative; display: inline-block; vertical-align: top; width: 32%; margin-bottom: 20px; padding: 20px; box-sizing: border-box; border: 1px solid #e3e3e3; border-radius: 3px; text-align: center; }
.showcase .element a.title { display: block; font-size: 20px; word-wrap: break-word; text-decoration: none; color: #0077b7;  margin-top: 20px; margin-bottom: 14px;}
.showcase .element a.img_holder{height:120px; display: table-cell; vertical-align: middle; overflow:hidden;}
.showcase .element a.img_holder img{vertical-align:middle!important; margin:0; max-width:100%;}
.showcase .element .h{display: inline-block; height: 130px;}
.showcase .element img { margin: 16px 0; }
.showcase .element p { font-size: 14px; line-height: 1.6em; color: #787878; }
.showcase .element .descr{min-height:100px;}

.showcase .element .prod_ai{height: 110px;}
.showcase .element span.price { display: block; padding-bottom: 6px; font-size: 16px; color: #31332c; /*min-height: 70px;*/}
.showcase .element span.price b { font-size: 30px; font-weight: 400; }
.showcase .element span.price b span{display: none;}
.showcase .element a.btn { display: block; max-width: 124px; margin: 6px auto 0; padding: 5px 0; box-sizing: border-box; border-radius: 3px; background-color: #ff5300; font-size: 17px; text-decoration: none; color: #fff; }

.showcase .element .ai{ font-size: 14px;
    display: block;
    color: #0077bd;}
.showcase .element .ai b{font-weight:400;color:#ababab; }

.showcase .element .rat{font-size: 14px;
    vertical-align: bottom;
    color: #ababab;}


.showcase .element .brand{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	background-color:#9c69ad;
	color:#fff;
	font-size:16px;
	font-weight:700;
	height:34px;
	line-height:34px;
	text-align:center;
	background-image: url(images/brand.png);
	background-position:top right;
	background-repeat:no-repeat;
	text-transform:uppercase;
}

.product { margin-bottom: 24px; padding: 40px 0 20px 0; border: 1px solid #e0e3e4; border-radius: 3px; position:relative; }
.product .picture { display: table-cell; vertical-align: middle; width: 240px; text-align: center; }
.product .picture img { max-width: 90%; }
.product .description { display: table-cell; vertical-align: middle; padding-right: 20px; }
.product .title { font-size: 30px; font-weight: 700; color: #404140; }
.product .title span { font-size: 16px; font-weight: 400; }
.product ul { list-style-type: none !important; margin-left: 0 !important; }
.product ul li { display: inline-block; font-size: 15px; font-weight: 700; }
.product ul li a { font-weight: 400; text-decoration: none; color: #23475f; }


.product .brand{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	background-color:#9c69ad;
	color:#fff;
	font-size:16px;
	font-weight:700;
	height:34px;
	line-height:34px;
	text-align:left;
	background-image: url(images/brand.png);
	background-position:top right;
	background-repeat:no-repeat;
	text-transform:uppercase;
	box-sizing:border-box;
	padding-left:10px;
}



.shipping { max-width: 95%; margin: 0 auto; padding-bottom: 12px; font-size: 18px; color: #525252;
	padding-left:35px;
	background-image: url(../img/uc.png);
	background-position:top left;
	background-repeat:no-repeat;
	box-sizing:border-box;
}
.shipping .element { margin-bottom: 12px;   background: url(../img/bg-shipping.png) center bottom 6px repeat-x;
}
.shipping .element span { padding: 0 20px; background-color: #fff; }
.shipping .element span:last-child { float: right; font-weight: 600; }

.controls { padding-bottom: 24px; }
.controls a.btn { display: inline-block; margin-top: 32px; padding: 5px 30px; border: 1px solid #0098e7; border-radius: 3px; background-color: #fff; font-size: 17px; text-decoration: none; color: #0098e7; }
.controls a.btn span { padding-left: 22px; background: url(../img/ico-arrow.png) left center no-repeat; }
.controls .total { float: right; text-align: center; }
.controls .total span { font-size: 19px; font-weight: 700; text-transform: uppercase; color: #0078d5; }
.controls .total .btn { display: block; max-width: 124px; margin: 6px auto 0; padding: 5px 0; border-color: #ff5300; background-color: #ff5300; color: #fff; }
.controls .total input.btn{
	border: 1px solid #ff5300;
	border-radius: 3px;
	font-size: 17px;
	text-decoration: none;
	cursor:pointer;
	padding: 5px 10px;
}


.contact { padding: 20px; border-radius: 8px; background-color: #ececec; text-align: center; }
.contact p { font-size: 20px; font-weight: 300; }
.contact p span { font-size: 30px; font-weight: 400; }
.contact form { max-width: 580px; margin: 0 auto; padding-top: 12px; }
.contact form .left { width: 48%; }
.contact form .right { width: 48%; }
.contact input { display: block; width: 100%; margin-bottom: 20px; padding: 12px 16px 12px 42px; box-sizing: border-box; border: none; border-radius: 6px; background-color: #fff; font: 16px 'Open Sans', sans-serif; font-weight: 400; }
.contact input.name { background: #fff url(../img/ico-name.png) 16px center no-repeat; }
.contact input.mail { background: #fff url(../img/ico-mail.png) 14px center no-repeat; }
.contact textarea { display: block; width: 100%; margin-bottom: 20px; padding: 12px 16px 12px 42px; box-sizing: border-box; border: none; border-radius: 6px; font: 16px 'Open Sans', sans-serif; font-weight: 400; resize: none; }
.contact textarea.message { background: #fff url(../img/ico-message.png) 16px 16px no-repeat; }
.contact button { display: block; width: 100%; margin-bottom: 20px; padding: 8px 0; box-sizing: border-box; border: none; border-radius: 6px; background-color: #0098e7; font: 20px 'Open Sans', sans-serif; font-weight: 400; color: #fff; cursor: pointer; }
.contact button span { padding-right: 32px; background: url(../img/ico-send.png) right center no-repeat; }
.contact form label.error { display: block; position: relative; top: -18px; padding-left: 6px; font-size: 12px; text-align: left; color: #f00; }

#footer { background-color: #2a2a2a; }
#footer .top .inner { padding: 20px 0; }
#footer .top .lSide { position: relative; z-index: 1; float: left; width: 340px; padding-top: 10px; box-sizing: border-box; }
#footer .top .rSide { float: left; width: 340px; box-sizing: border-box; }
#footer .top .cSide { float: left; width: 100%; margin: 0 -340px; }
#footer .top .menu { margin: 0 340px; }
#footer .top .menu li { padding-bottom: 4px; }
#footer .top .menu li a { text-decoration: none; color: #fff; }
#footer .top a.logo { display: inline-block; padding: 0 0 4px 50px; background: url(../img/logo-footer.png) left center no-repeat; font-size: 33px; line-height: .8em; text-decoration: none; color: #fff; }
#footer .top .phone { padding-left: 22px; background: url(../img/ico-phone-footer.png) left center no-repeat; color: #0098e7; }
#footer .top .pay { padding-top: 20px; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; }
#footer .top .pay img { display: inline-block; vertical-align: top; }
#footer .top .pay:after { content: ''; display: inline-block; width: 100%; font-size: 0; line-height: 0; }
#footer .bottom { background-color: #1e1d1d; font-size: 12px; text-align: center; color: #fff; }
#footer .bottom .inner { padding: 5px 0; }


.shipping{cursor:pointer;}
.shipping:hover{font-weight:700;}
.shipping input[type=radio]{display:none;}
.shipping.checked{font-weight:700; background-image: url(../img/c.png);}

#table-product a{color:#3b3939}
#table-product a:hover{text-decoration:none;}


.clcbl:hover{cursor:pointer;}

/* ----- Hover effects are enabled only for Desktop version ----- */


#bans{display: block;}
#bans .elem{display: block;float:left;box-sizing: border-box;width: 25%!important;}
@media screen and (max-width: 1060px) {#bans{display: none}}

@media screen and (min-width: 1024px) {

    #header .middle .alphabet li a:hover { text-decoration: underline; }
    #header .middle .cart a:hover { text-decoration: underline; }
    #header .middle .cart a.btn:hover { background-color: #ffa800; text-decoration: none; }
    #header .bottom .menu li a:hover { text-decoration: underline; }

    #lSide .menu li a:hover { background-color: #ffa800; }
    #lSide a.banner:hover { border-color: #0098e7; }

    #content p a:hover { text-decoration: underline; }
    #content .table-wrapper table td a.btn:hover { background-color: #ffa800; }
    #content .table-wrapper table td a.remove:hover { background-position: center bottom; }
    #content .table-wrapper table td .qty a.dec:hover { background-color: #3b3939; }
    #content .table-wrapper table td .qty a.inc:hover { background-color: #ffa800; }

    .showcase .element:hover { border-color: #0098e7; }
    .showcase .element a.title:hover { text-decoration: underline; }
    .showcase .element a.btn:hover { background-color: #ffa800; text-decoration: none; }

    .product ul li a:hover { color: #0098e7; }

    .controls a.btn:hover { text-decoration: underline; }
    .controls .total .btn:hover { background-color: #ffa800; text-decoration: none; }

    .contact button:hover { background-color: #ffa800; }

    #footer .top .menu li a:hover { text-decoration: underline; }
}

@media screen and (max-width: 1024px) {
#bans{display: none}
    #header .middle .lSide { padding-left: 20px; }
    #header .middle .alphabet { padding-left: 0; text-align: center; }

    #banner h1 { padding-left: 20px; }
    #banner p { padding-left: 24px; }

    #lSide { padding-left: 20px; }
    #content { margin-right: 20px; }

    #bSide .caption { margin: 0 20px; }
    #bSide .brands { padding: 0 20px; text-align: center; }
    #bSide .brands img { padding: 10px 0; }

    #footer .top .lSide { padding-left: 20px; }
    #footer .top .rSide { padding-right: 20px; }
}

@media screen and (max-width: 924px) {
	#lSide a.banner{display:none;}

    .showcase .element { width: 49%; }

    .product .picture { width: 200px; }

    #footer .top .lSide { width: 300px; }
    #footer .top .menu { margin-left: 300px; }
}

@media screen and (max-width: 824px) {
    #content table { font-size: 14px; }
    #content table th { font-size: 14px; }

    .product .picture { width: 160px; }

    #footer .top .lSide { float: none; width: auto; padding: 0 0 20px; text-align: center; }
    #footer .top .cSide { float: none; width: auto; margin: 0; padding: 0 20px 20px; }
    #footer .top .rSide { float: none; width: auto; padding: 0; text-align: center; }
    #footer .top .menu { margin: 0; text-align: center; }
    #footer .top .pay { text-align: center; }
}

@media screen and (max-width: 724px) {
    #header .middle .lSide { float: none; width: auto; padding: 0 0 20px; text-align: center; }
    #header .middle .cSide { float: none; width: auto; margin: 0; padding: 0 20px 20px; }
    #header .middle .rSide { float: none; width: auto; padding: 0; }
    #header .middle .search { max-width: 500px; margin: 0 auto; }
    #header .bottom .menu li { padding: 0 10px; }

    #banner .inner { text-shadow: 1px 1px 2px #23475f; }

    #content table,
    #content table thead,
    #content table tbody,
    #content table th,
    #content table td,
    #content table tr { display: block; }
    #content table thead tr { position: absolute; top: -9999px; left: -9999px; }
    #content table tr { border-bottom: 12px solid transparent; }
    #content table tr td { position: relative; padding-left: 35% !important; text-align: left; }
    #content table tr td:before { position: absolute; top: 0; left: 0; width: 33%; height: 100%; padding: 6px 0 0 12px; box-sizing: border-box; background-color: #3b3a3a; font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-align: left; color: #fff; }

    #content .table-wrapper table { margin-top: 12px; }
    #content .table-wrapper table td .qty { margin: 0; }

    table#table-articles td:nth-of-type(1):before { content: 'Lorem ipsum'; }
    table#table-articles td:nth-of-type(2):before { content: 'Lorem ipsum'; }
    table#table-articles td:nth-of-type(3):before { content: 'Lorem ipsum'; }

    table#table-product td:nth-of-type(1):before { content: 'Package'; }
    table#table-product td:nth-of-type(2):before { content: 'Price'; }
    table#table-product td:nth-of-type(3):before { content: 'Per Pill'; }
    table#table-product td:nth-of-type(4):before { content: 'Quantity'; }
    table#table-product td:nth-of-type(5):before { content: 'Order'; }

    .showcase .element { width: 100%; }

    .product { padding-bottom: 8px; }
    .product .picture { display: block; width: auto; }
    .product .description { display: block; padding: 20px 20px 0; }

    .controls { text-align: center; }
    .controls .total { float: none; }

}

@media screen and (max-width: 524px) {
    #header .bottom .menu a.trigger { display: block; }
    #header .bottom .menu ul { display: none; padding: 12px 0 4px; }
    #header .bottom .menu li { display: block; padding: 6px 0; }

    #banner { height: auto; }
    #banner .inner { padding: 20px 0; text-align: center; }
    #banner h1 { padding: 0; font-size: 36px; }
    #banner p { padding: 0; }

    #wrapper { padding: 20px 0; }

    #lSide { float: none; width: auto; padding-right: 20px; }
    #lSide .menu a.trigger { display: block; }
    #lSide .menu ul { display: none; padding-top: 20px; }

    #rSide { float: none; width: auto; margin: 0; }
    #content { margin: 0 20px; }

    .contact form .left { float: none; width: 100%; }
    .contact form .right { float: none; width: 100%; }
}