ul.resp-tabs-list, p { margin: 0px; padding: 0px; }
.resp-tabs-list li { font-weight: 600; font-size: 13px; display: inline-block; padding: 13px 15px; margin: 0; list-style: none; cursor: pointer; float: left; }
.resp-tabs-container { padding: 0px; clear: left; }
h2.resp-accordion { cursor: pointer; padding: 5px; display: none; }
.resp-tab-content { display: none; padding: 15px; }
.resp-tab-active { border-bottom: none; margin-bottom: -1px !important; padding: 12px 14px 14px 14px !important; }
.resp-vtabs .resp-tabs-container p { color: #767779; padding-bottom: 15px; font-size: 14px; line-height: 24px; }
.resp-vtabs .resp-tabs-container p a { color: #514e4e; }
.resp-vtabs .resp-tabs-container p a:hover { color: #514e4e; text-decoration: underline; }
.resp-content-active, .resp-accordion-active { display: block; }
.resp-tab-content { border: 1px solid #c1c1c1; }
h2.resp-accordion { font-size: 13px; clear: both; border: 1px solid #c1c1c1; border-top: 0px solid #c1c1c1; margin: 0px; padding: 10px 15px; }
h2.resp-tab-active { border-bottom: 0px solid #c1c1c1 !important; margin-bottom: 0px !important; padding: 10px 15px !important; }
h2.resp-tab-title:last-child { border-bottom: 12px solid #c1c1c1 !important; background: blue; }
/*-----------Vertical tabs-----------*/
.resp-vtabs ul.resp-tabs-list { float: left; width: 30%; }
.resp-vtabs .resp-tabs-list li { display: block; line-height: 24px; padding: 15px 15px !important; margin: 0; cursor: pointer; float: none; }
.resp-vtabs .resp-tabs-container { padding: 0px; float: left; width: 68%; min-height: 250px; border-radius: 4px; clear: none; }
.resp-vtabs .resp-tab-content { border: none; }
.resp-arrow { width: 0; height: 0; float: right; margin-top: 3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #c1c1c1; }
h2.resp-tab-active span.resp-arrow { border: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #9B9797; }
/*-----------Accordion styles-----------*/
h2.resp-tab-active { background: #DBDBDB !important; }
.resp-easy-accordion h2.resp-accordion { display: block; }
.resp-easy-accordion .resp-tab-content { border: 1px solid #c1c1c1; }
.resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; }
.resp-jfit { width: 100%; margin: 0px; }
.resp-tab-content-active { display: block; }
h2.resp-accordion:first-child { border-top: 1px solid #c1c1c1 !important; }
.demo { width: 980px; margin: 0px auto; }
.demo h1 { margin: 0px 0 12px; }
.demo h3 { margin: 10px 0; }
pre { background: #fff; }
h2.resp-accordion a { color: rgb(118, 119, 121); }
ul.resp-tabs-list li.tab1 a.icon1 { background: url("../images/icon1.png") no-repeat scroll 0 0 transparent; color: rgb(118, 119, 121); padding-bottom: 15px; height: 34px; padding-left: 53px; padding-top: 13px; width: 259px; }
ul.resp-tabs-list li.tab1 a.icon1:hover { background: url("../images/icon1.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li:hover.tab1 { background: url(../images/icon1-right.png) right no-repeat #0c99a5; }
ul.resp-tabs-list li:hover.tab1 a.icon1 { background: url("../images/icon1.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li.tab2 a.icon2 { background: url("../images/icon2.png") no-repeat scroll 0 0 transparent; color: rgb(118, 119, 121); padding-bottom: 15px; height: 34px; padding-left: 53px; padding-top: 13px; width: 259px; }
ul.resp-tabs-list li.tab2 a.icon2:hover { background: url("../images/icon2.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li:hover.tab2 { background: url(../images/icon2-right.png) right no-repeat #0473c6; }
ul.resp-tabs-list li:hover.tab2 a.icon2 { background: url("../images/icon2.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li.tab3 a.icon3 { background: url("../images/icon3.png") no-repeat scroll 0 0 transparent; color: rgb(118, 119, 121); padding-bottom: 15px; height: 34px; padding-left: 53px; padding-top: 13px; width: 259px; }
ul.resp-tabs-list li.tab3 a.icon3:hover { background: url("../images/icon3.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li:hover.tab3 { background: url(../images/icon3-right.png) right no-repeat #f77322; }
ul.resp-tabs-list li:hover.tab3 a.icon3 { background: url("../images/icon3.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li.tab4 a.icon4 { background: url("../images/icon4.png") no-repeat scroll 0 0 transparent; color: rgb(118, 119, 121); padding-bottom: 15px; height: 34px; padding-left: 53px; padding-top: 13px; width: 259px; }
ul.resp-tabs-list li.tab4 a.icon4:hover { background: url("../images/icon4.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li:hover.tab4 { background: url(../images/icon4-right.png) right no-repeat #4a721c; }
ul.resp-tabs-list li:hover.tab4 a.icon4 { background: url("../images/icon4.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li.tab5 a.icon5 { background: url("../images/icon5.png") no-repeat scroll 0 0 transparent; color: rgb(118, 119, 121); padding-bottom: 15px; height: 34px; padding-left: 53px; padding-top: 13px; width: 259px; }
ul.resp-tabs-list li.tab5 a.icon5:hover { background: url("../images/icon5.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li:hover.tab5 { background: url(../images/icon5-right.png) right no-repeat #eeb93c; }
ul.resp-tabs-list li:hover.tab5 a.icon5 { background: url("../images/icon5.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li.tab6 a.icon6 { background: url("../images/icon6.png") no-repeat scroll 0 0 transparent; color: rgb(118, 119, 121); padding-bottom: 15px; height: 34px; padding-left: 53px; padding-top: 13px; width: 259px; }
ul.resp-tabs-list li.tab6 a.icon6:hover { background: url("../images/icon6.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li:hover.tab6 { background: url(../images/icon6-right.png) right no-repeat #fa5050; }
ul.resp-tabs-list li:hover.tab6 a.icon6 { background: url("../images/icon6.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li.tab7 a.icon7 { background: url("../images/icon7.png") no-repeat scroll 0 0 transparent; color: rgb(118, 119, 121); padding-bottom: 15px; height: 34px; padding-left: 53px; padding-top: 13px; width: 259px; }
ul.resp-tabs-list li.tab7 a.icon7:hover { background: url("../images/icon7.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.resp-tabs-list li:hover.tab7 { background: url(../images/icon7-right.png) right no-repeat #38ad05; }
ul.resp-tabs-list li:hover.tab7 a.icon7 { background: url("../images/icon7.png") no-repeat scroll 0 -41px transparent; color: #fff; }
ul.tabUl { float: left; margin: 15px 12px 0 0; }
ul.tabUl li { list-style: none; background: url(../images/aero.png) left no-repeat; padding-left: 15px; line-height: 30px; font-size: 13px; }
ul.tabUl li a { color: #636363; text-decoration: none; }
ul.tabUl li a:hover { color: #636363; text-decoration: underline; }
ul.blue-tabs { float: left; margin: 25px 0 0 0; }
ul.blue-tabs li { border-radius: 50px 50px 50px 50px; display: inline; float: left; font-size: 13px; height: 33px; margin: 5px; padding-left: 23px; padding-top: 15px; text-align: center; text-shadow: 1px 1px 3px #888784; width: 179px; }
ul.blue-tabs li a, ul.blue-tabs li a:hover { color: white; text-decoration: none; }
ul.blue-tabs li:hover { opacity: 0.86; cursor: pointer; }
ul.blue-tabs li.joomla { background: url(../images/joomla-icon.png) 0 6px no-repeat #2382c9; }
ul.blue-tabs li.drupal { background: url(../images/drupal-icon.png) 0 6px no-repeat #2382c9; }
ul.blue-tabs li.cake { background: url(../images/cake-icon.png) 0 6px no-repeat #2382c9; }
ul.blue-tabs li.ajax { background: url(../images/ajx1.png) 0 6px no-repeat #2382c9; }
ul.blue-tabs li.wp { background: url(../images/wordpress-icon.png) 0 6px no-repeat #2382c9; }
ul.blue-tabs li.ror { background: url(../images/ror-icon.png) 0 6px no-repeat #2382c9; }
ul.blue-tabs li.jv1 { background: url("../images/jv1.png") no-repeat scroll 0 6px #0c99a5; }
ul.blue-tabs li.mob1 { background: url("../images/mob1.png") no-repeat scroll 0 6px #0c99a5; }
ul.blue-tabs li.off1 { background: url("../images/of-icon.png") no-repeat scroll 0 6px #0c99a5; }
ul.blue-tabs li.osc1 { background: url("../images/osc1.png") no-repeat scroll 0 6px #0c99a5; }
ul.blue-tabs li.str1 { background: url("../images/str1.png") no-repeat scroll 0 6px #0c99a5; }
ul.blue-tabs li.int1 { background: url("../images/int1.png") no-repeat scroll 0 6px #0c99a5; }
ul.blue-tabs li.and1 { background: url("../images/and1.png") no-repeat scroll 0 6px #f77322; }
ul.blue-tabs li.dnn { background: url("../images/dnn-icon.png") no-repeat scroll 0 6px #f77322; }
ul.blue-tabs li.php1 { background: url("../images/php1.png") no-repeat scroll 0 6px #f77322; }
ul.blue-tabs li.sd1 { background: url("../images/sd1.png") no-repeat scroll 0 6px #f77322; }
ul.blue-tabs li.cd1 { background: url("../images/cd1.png") no-repeat scroll 0 6px #f77322; }
ul.blue-tabs li.shd1 { background: url("../images/shd1.png") no-repeat scroll 0 6px #f77322; }
ul.blue-tabs li.md1 { background: url("../images/md1.png") no-repeat scroll 0 6px #4a721c; }
ul.blue-tabs li.md2 { background: url("../images/md2.png") no-repeat scroll 0 6px #4a721c; }
ul.blue-tabs li.md3 { background: url("../images/md3.png") no-repeat scroll 0 6px #4a721c; }
ul.blue-tabs li.md4 { background: url("../images/md4.png") no-repeat scroll 0 6px #4a721c; }
ul.blue-tabs li.md5 { background: url("../images/md5.png") no-repeat scroll 0 6px #4a721c; }
ul.blue-tabs li.md6 { background: url("../images/md6.png") no-repeat scroll 0 6px #4a721c; }
ul.blue-tabs li.ds1 { background: url("../images/ds1.png") no-repeat scroll 0 6px #eeb93c; }
ul.blue-tabs li.ds2 { background: url("../images/ds2.png") no-repeat scroll 0 6px #eeb93c; }
ul.blue-tabs li.ds3 { background: url("../images/ds3.png") no-repeat scroll 0 6px #eeb93c; }
ul.blue-tabs li.ds4 { background: url("../images/ds4.png") no-repeat scroll 0 6px #eeb93c; }
ul.blue-tabs li.ds5 { background: url("../images/ds5.png") no-repeat scroll 0 6px #eeb93c; }
ul.blue-tabs li.ds6 { background: url("../images/ds6.png") no-repeat scroll 0 6px #eeb93c; }
ul.blue-tabs li.ed1 { background: url("../images/ed1.png") no-repeat scroll 0 6px #fa5050; }
ul.blue-tabs li.ed2 { background: url("../images/ed2.png") no-repeat scroll 0 6px #fa5050; }
ul.blue-tabs li.ed3 { background: url("../images/ed3.png") no-repeat scroll 0 6px #fa5050; }
ul.blue-tabs li.ed4 { background: url("../images/ed4.png") no-repeat scroll 0 6px #fa5050; }
ul.blue-tabs li.ed5 { background: url("../images/ed5.png") no-repeat scroll 0 6px #fa5050; }
ul.blue-tabs li.ed6 { background: url("../images/ed6.png") no-repeat scroll 0 6px #fa5050; }
ul.blue-tabs li.seo1 { background: url("../images/seo1.png") no-repeat scroll 0 6px #38ad05; }
ul.blue-tabs li.seo2 { background: url("../images/seo2.png") no-repeat scroll 0 6px #38ad05; }
ul.blue-tabs li.seo3 { background: url("../images/seo3.png") no-repeat scroll 0 6px #38ad05; }
ul.blue-tabs li.seo4 { background: url("../images/seo4.png") no-repeat scroll 0 6px #38ad05; }
ul.blue-tabs li.seo5 { background: url("../images/seo5.png") no-repeat scroll 0 6px #38ad05; }
ul.blue-tabs li.seo6 { background: url("../images/seo6.png") no-repeat scroll 0 6px #38ad05; }
/*
------------------------------------joomla tabs---------------------------------------------------------------*/


div.tabBox { width: 99.9%; float: left; overflow: visible; margin: 25px 0 20px 0; }
div.tabBox h3 { padding: 20px 0px; }
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 47px; width: 99.9%; }
ul.tabs li { float: left; height: 47px; line-height: 47px; margin: 0; overflow: hidden; padding: 0; position: relative; }
ul.tabs li a { display: block; padding-left:36px !important; outline: none; background: none; }
.tabContainer { border-top: medium none; clear: both; float: left; margin-bottom: 10px; overflow: hidden; position: relative; top: 0; width: 99%; }
.tabContent { padding: 20px; width: auto; }
.tabContent h3 { padding: 0px; }
/**** TABS STYLES ****/
 
div.tabBox h3 { }
ul.tabs { border-left: 1px solid #ccc; border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; }
ul.tabs li { }
ul.tabs li a { background: #0d6dab; text-decoration: none; font-size: 14px; color: #fff; outline: none; border: 1px solid #ccc; border-left: none; border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; padding: 0 10px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; }

ul.tabs li a.jm-design{ background:url(../images/jm-design.png) 12px no-repeat #0d6dab;}
ul.tabs li a.jm-design:hover{ background:url(../images/jm-design.png) 12px no-repeat #015792;}
ul.tabs li.active a.jm-design, ul.tabs li.active a.jm-design:hover { background:url(../images/jm-designhover.png) 12px no-repeat #fff;}

ul.tabs li a.jm-development{ background:url(../images/jm-development.png) 12px no-repeat #0d6dab;}
ul.tabs li a.jm-development:hover{ background:url(../images/jm-development.png) 12px no-repeat #015792;}
ul.tabs li.active a.jm-development, ul.tabs li.active a.jm-development:hover { background:url(../images/jm-developmenthover.png) 12px no-repeat #fff;}

ul.tabs li a.jm-customization{ background:url(../images/jm-customization.png) 12px no-repeat #0d6dab;}
ul.tabs li a.jm-customization:hover{ background:url(../images/jm-customization.png) 12px no-repeat #015792;}
ul.tabs li.active a.jm-customization, ul.tabs li.active a.jm-customization:hover { background:url(../images/jm-customizationhover.png) 12px no-repeat #fff;}

ul.tabs li a.jm-support{ background:url(../images/jm-support.png) 12px no-repeat #0d6dab;}
ul.tabs li a.jm-support:hover{ background:url(../images/jm-support.png) 12px no-repeat #015792;}
ul.tabs li.active a.jm-support, ul.tabs li.active a.jm-support:hover { background:url(../images/jm-supporthover.png) 12px no-repeat #fff;}

ul.tabs li a:hover{ background: #015792; }
ul.tabs li.active { border-bottom: 1px solid #fff;  }
ul.tabs li.active a, ul.tabs li.active a:hover { background: #fff; color: #015792; }
div.tabContainer { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background: #fff; }
.jd-video { clear: both; margin: 24px 0 32px 37px; width: 224px; }
.div-left img { margin-top: 27px; }
.tabContainer ul li { font-size: 13px; color: #625f5f; line-height: 24px; }
.tabContainer h1 { font-size: 18px; color: #015792; margin: 0 0 15px 0; }
.div-right { float: right; margin: 15px 0 0; width: 50%; }
.div-left { margin: 0; width: 50%; }
.div-bottom { background: none repeat scroll 0 0 rgb(13, 109, 171); border-radius: 50px 50px 50px 50px; clear: both; height: 47px; margin: 0 auto 22px; width: 95%; }
.div-bottom ul li { background: url("../images/seprator.jpg") no-repeat scroll right center transparent; display: inline; float: left; margin-top: 0; padding: 11px 29px; }
.div-bottom ul li.nne { background: none; }
.div-right ul li a { color: #625f5f; }
.div-right ul li a:hover { opacity: 0.74; }
a.vp, .rp, .tlf { padding-left: 24px; color: white; cursor: pointer; font-size: 13px; }
a.vp:hover, .rp:hover, .tlf:hover { opacity: 0.75; color: white; }
a.vp { background: url(../images/vp.png) top left no-repeat; }
a.rp { background: url(../images/rp.png) top left no-repeat; }
a.tlf { background: url(../images/tlf.png) top left no-repeat; }











/*
------------------------------------joomla tabs---------------------------------------------------------------*/



/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
/*
------------------------------------joomla tabs---------------------------------------------------------------*/
a.tlf { background-size: 9%; }
.div-bottom ul li { padding: 10px 7px 10px 5px; }
a.vp, .rp, .tlf { font-size: 11px; padding-left: 18px; }
div.tabBox { background: none repeat scroll 0 0 white; border: 1px solid rgb(204, 204, 204); border-radius: 5px 5px 5px 5px; padding: 0; }
ul.tabs { height: auto; display: block; width: 100%; border-left: 0px; }
ul.tabs li { width: 100%; }
ul.tabs li a { border-top-left-radius: 0px; -moz-border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px; border-top-right-radius: 0px; -moz-border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; border: 0px; }
div.tabContainer { border: 0px; }
/*
------------------------------------joomla tabs---------------------------------------------------------------*/
	
	
.demo { margin: 2%; width: 96%; }
.box-shadow { background-size: 100% 100%; }
.how-use { float: left; width: 300px; display: none; }
ul.resp-tabs-list { display: none; }
h2.resp-accordion { display: block; }
.resp-vtabs .resp-tab-content { border-right: 1px solid #C1C1C1; border-left: 1px solid #C1C1C1; height: auto; overflow: hidden; }
.resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none; }
.resp-accordion-closed { display: none !important; }
.resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; }
}