﻿@font-face { font-family: 'oswaldregular'; src: url('/fonts/oswald-regular-webfont.eot'); src: url('/fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/oswald-regular-webfont.woff') format('woff'), url('/fonts/oswald-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#horizontalTab1 p { margin: 0px; padding: 0 }
#horizontalTab1 ul.resp-tabs-list{background:url(/userfiles/images/graphics/bg_title_b.png) repeat-x left 4px; height:40px; padding:0; margin:25px 0 10px 0; background-position: 200px right top}
/* #horizontalTab1 ul.resp-tabs-list{ background-image:none} */

#horizontalTab1 .resp-tabs-list li { display: inline-block; padding: 7px 14px 7px 25px ; margin: 0; list-style: none; cursor: pointer;float: left; color: #606060; line-height: 20px; display:inline-block; font-family: oswaldregular; font-size: 17px; text-transform: uppercase; font-weight: normal;text-align: center; background: url(/userfiles/images/graphics/line_tab_li.png) no-repeat left 9px}
#horizontalTab1 .resp-tabs-list li:first-child{ padding-left:0; background-image:none;}
#horizontalTab1 .resp-tabs-list li:hover { color:#000 }
#horizontalTab1 .resp-tabs-container {float:left; width:101%; padding:0 0 0 0; margin:0 -10px}
#horizontalTab1 h3.resp-accordion { cursor: pointer; padding: 5px; display: none; margin-bottom: 0 !important;font-family: oswaldregular; font-size: 16px; text-transform: uppercase; font-weight: normal; color:#fff; background:#606060 }
#horizontalTab1 .resp-tab-content { display: none}
#horizontalTab1 .resp-tab-active { color: #000!important; border: none;  margin: 5px 0; }
#horizontalTab1 .resp-content-active,#horizontalTab1 .resp-accordion-active { display: block; }
#horizontalTab1 h3.resp-accordion { font-size: 14px }
#horizontalTab1 h3.resp-tab-active { }
#horizontalTab1 h3.resp-tab-title:last-child { border-bottom: 12px solid #DDD !important; background: blue; }
/*-----------Vertical tabs-----------*/
#horizontalTab1 .resp-vtabs ul.resp-tabs-list { float: left; width: 30%; }
#horizontalTab1 .resp-vtabs .resp-tabs-list li { display: block; padding: 15px 15px !important; margin: 0; cursor: pointer; float: none; }
#horizontalTab1 .resp-vtabs .resp-tabs-container { padding: 0px; background-color: #fff; border: 1px solid #DDD; float: left; width: 68%; min-height: 250px; border-radius: 4px; clear: none; }
#horizontalTab1 .resp-vtabs .resp-tab-content { border: none; }
#horizontalTab1 .resp-vtabs li.resp-tab-active { border: 1px solid #DDD; border-right: none; background-color: #fff; position: relative; z-index: 1; margin-right: -1px !important; padding: 14px 15px 15px 14px !important; }
#horizontalTab1 .resp-arrow { width: 0; height: 0; float: right; margin-top: 5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #DDD; }
#horizontalTab1 h3.resp-tab-active span.resp-arrow { border: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #fff; }
/*-----------Accordion styles-----------*/
#horizontalTab1 h3.resp-tab-active {  width: 96%; padding: 0 2%; margin: 0; color:#fff !important; background:#000 !important }
#horizontalTab1 .resp-easy-accordion h3.resp-accordion { display: block; }
#horizontalTab1 .resp-easy-accordion .resp-tab-content { border: 1px solid #DDD; }
#horizontalTab1 .resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #DDD !important; }
#horizontalTab1 .resp-jfit { width: 100%; margin: 0px; }
#horizontalTab1 .resp-tab-content-active { display: block; }
#horizontalTab1 h3.resp-accordion:first-child { border-top: 1px solid #DDD !important; margin-bottom: 0 }
#horizontalTab1 .contenttab ul{ list-style:none; padding:0; margin:0}
#horizontalTab1 .contenttab li{ width:280px; margin:10px 10px; float:left}
#horizontalTab1 .contenttab li:nth-child(4n){ margin-right:0}
/*  css product sale */
#horizontalTab1 .contentSale { float: left; width: 100% }
#horizontalTab1 .imgSale{ float: left; width:35%; text-align: center }
#horizontalTab1 .imgSale img { opacity: 1; width: 100%;}
#horizontalTab1 .imgSale img:hover { opacity: 0.7 }
#horizontalTab1 .priceSale { line-height: 22px; font-size: 18px; color:#000; font-weight:bold;font-family:Georgia, serif; float:left }
#horizontalTab1 .textSale { margin: 0; position: relative; width: 60%; float:right }
#horizontalTab1 .textSale h4 { font-size: 13px; color: #221208; font-weight: normal; text-transform: uppercase; margin-bottom: 5px }
#horizontalTab1 .textSale h4  a{color:#000;}
#horizontalTab1 .textSale h4  a:hover{color:#ff6161}
#horizontalTab1.textSale p { padding-bottom:10px; color:#3a3a3a }
#horizontalTab1 .innerTab1{ padding:0 1%}

@media only screen and (max-width: 1240px) {

#horizontalTab1 .resp-tabs-container{width:102%}
#horizontalTab1 .contenttab li{ width:265px}

}
@media only screen and (max-width: 1180px) {
#horizontalTab1 .resp-tabs-container{ margin:0 0%;padding:0; width:100%; margin-bottom:15px}
#horizontalTab1 .contenttab li{ width:25%; margin:0 0%}
}

@media only screen and (max-width: 1080px) {
#horizontalTab1 .resp-tabs-container{ margin:0 0%;padding:0; width:101%}

#horizontalTab1 .contentSale{ width:98%}
}

@media only screen and (max-width: 980px) {
#horizontalTab1 .innerTab{ width:96%}
#horizontalTab1 .innerTab1{ width:96%}
}
@media only screen and (max-width: 880px) {

#horizontalTab1 .contenttab li{ width:50%; margin:7px 0 }
}
/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
#horizontalTab1 ul.resp-tabs-list { display: block; }
#horizontalTab1 .resp-tab-content { background:#BECFD7 }
#horizontalTab1 .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none; }
#horizontalTab1 .resp-accordion-closed { display: none !important; }
#horizontalTab1 .resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #DDD !important; }
#horizontalTab1 .innerTab{ width:100%}

}

@media only screen and (max-width: 560px) {
#horizontalTab1{margin:15px 0 !important}
#horizontalTab1 ul.resp-tabs-list { display: none; }
#horizontalTab1 h3.resp-accordion { display:block;  padding: 7px 3%; width: 94% ; border-bottom: 1px solid #898787 }
#horizontalTab1 .resp-tab-content { background:#f4ede6}
#horizontalTab1 .contenttab li{ float:left; width:50%; padding:0px 0%}
#horizontalTab1 .innerTab{overflow:hidden; background:#e7e7e7; padding:15px 3%; width:94%}
#horizontalTab1 .innerTab1{overflow:hidden; background:#e7e7e7; padding:15px 3%; width:94%}
}

@media only screen and (max-width: 400px) {

#horizontalTab1 .contenttab li{ float:left; width:96%; padding:0px 2%}

}