@charset "utf-8";
/* CSS Document */

body, p, div, ul, li, span, header, section, aside, article{ margin:0; padding:0;}
body{ font-size:13px; color:#41454d; float:left; width:100%; font-family: 'Open Sans', sans-serif; line-height: 22px;}

/*---heading----*/

h1{ color: #fff; font-size: 28px; font-weight: normal; line-height: 40px;}
h2{ color: #3e4095; font-size: 20px; font-weight: bold; line-height: 22px; position:relative;  margin-bottom: 27px;}

h2:before {background: none repeat scroll 0 0 #66b0cf; bottom: -16px; content: ""; height: 5px; position: absolute; width: 18%; z-index: 1;}
h2:after { background: none repeat scroll 0 0 #ffd821; bottom: -16px;  content: ""; height: 5px; left: 0; position: absolute; width: 40%;}



h3{ color:#fff; font-size:20px; font-weight: normal; line-height: 22px; text-transform:uppercase;}
h4{ color:#1a1d24; font-size:17px; font-weight: normal; line-height: 22px;}

.head h5 { border-bottom: 1px solid #fff; border-top: 1px solid #fff; font-size: 18px; font-weight: normal;  margin: 2px auto; padding: 5px 0;   width: 53%;}

/*---container----*/
.container{ width:100%; max-width:1205px; margin:0 auto;}

.row{ float:left; width:100%;}
.col-1{ float:left; width:10%;}
.col-2{ float:left; width:20%;}
.col-3{ float:left; width:30%;}
.col-4{ float:left; width:40%;}
.col-5{ float:left; width:50%;}
.col-6{ float:left; width:60%;}
.col-7{ float:left; width:70%;}
.col-8{ float:left; width:80%;}
.col-9{ float:left; width:90%;}






/*
Theme Name: Twenty Thirteen
Description: Used to style the TinyMCE editor.
*/


/**
 * Table of Contents:
 *
 * 1.0 - Body
 * 2.0 - Headings
 * 3.0 - Text Elements
 * 4.0 - Links
 * 5.0 - Alignment
 * 6.0 - Tables
 * 7.0 - Images
 * 8.0 - Galleries
 * 9.0 - Audio/Video
 * 10.0 - Post Formats
 * 11.0 - RTL
 * ----------------------------------------------------------------------------
 */


/**
 * 1.0 Body
 * ----------------------------------------------------------------------------
 */

/*---small class----*/
.f-left{ float:left;}
.f-right{ float: right;}

.talign-l{ text-align:left;}
.talign-r{ text-align: right;}
.talign-c{ text-align: center;}
.talign-j{ text-align:justify;}

ul{ list-style:none;}
.border-bottom{ border-bottom:1px solid #f4e3b5;}

.border-perple{ border:1px solid #9195d1;}
a{ text-decoration:none;}

/*---margin----*/
.m-center{ margin:0 auto}
.heading-margin{ margin:0 5%;}

.l-margin{ margin-left:15px;}

/*---padding----*/

.c-padding1{ padding:40px 0;}
.c-padding2{ padding:0 0 20px 0;}
.c-padding{ padding:8px 0;}
.c-padding2{ padding:12px 0;}

.padding-b{ padding-bottom:10px;}


.p-padding{ padding:10px;}


/*---section----*/


header.header { border-top: 10px solid #ffcc33;}

.f-product{background:#ededed;}
footer.grey{ background:#2d2d2d;}
footer.black{background:#121212;}

.c-heading {background:  #71b6d2;}
.c-heading:before { background: #f5ce4c; content: ""; float: left;  height: 87px;  width: 29px;}
nav li {display: inline; padding: 0 10px;}
.form{ background:#ffcc33;}
.product{ background:#7abad4;  margin-top: 6px;}
.product-bg{ background:url(../images/product-bg.png) no-repeat; height:265px; width:100%;}
.img-container{ height: 229px; margin: 4.2%; width: 93%; position:relative;  -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; overflow:hidden;}
.img-container img{ width:100%; height:100%;}

.border-perple li:hover .overlay { bottom: 0; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}

.overlay{ background:rgba(0,0,0,.7);  position:absolute; bottom: -239px; right:0; padding:10%;  color: #fff; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}

.overlay img{ width:auto; height:auto;}

.overlay a{ color:#fff;}
.overlay a:hover{ color:#f5ce4c;}

.trade-mark ul {margin: 10px auto 15px; width: 1142px;}
.trade-mark li {float: left; padding: 0 9px;}



.border-perple li {float: left; padding-right: 1%; width: 32%;}


.y-color{color:#ffcc33; line-height: 23px;}
.copyright{ color:#fff;}


.top-footer li {float: left; color:#fff;}

.top-footer {padding: 20px 0;}


.top-footer ul {float: left; margin-left: 1%; width: 99%;}
li.footer-about { width: 32%; color:#94948f;}
li.footer-contact { width: 24%;}
li.footer-categories {width: 20%;}
li.footer-fb { width: 22%; }
.footer-about a { color: #dadada;float: left; text-align: right; width: 90%;}
.footer-about a:hover { color: #fff;}
.footer-contact li {float: left;  width: 100%;  padding: 5px 0;  position: relative;}
.footer-contact a{ color:#94948f;  padding-left: 5px;}
.footer-contact a:hover{ color:#fff;}

.footer-categories li {float: left;  width: 100%;  padding: 5px 0; position:relative;}

.footer-categories li a:before { color: #d9d9d9; content: ""; background:url(../images/footer-arrow.png) no-repeat; background-position:left center; left: -18px;  position: absolute; height:8px; width:6px;  top:11px;}

.footer-categories a{ color:#94948f;  padding-left: 5px;}
.footer-categories a:hover{ color:#fff;}

.footer-contact span {
    left: -19px;
    position: absolute;
    top: 9px;
}


.banner img {
    width: 100%;
}

form {
    margin-left: 10%;
    text-align: left;
    width: 80%;
}


label{   float: left; margin-bottom: 10px; width: 100%;}
input {
    height: 26px;
    width: 100%; border:1px solid #9195d1;
}

textarea { height: 100px; width: 100%; border:1px solid #9195d1;}
nav a {color: #41454d;}
nav a:hover {color: #ffcc33;}
.social-icon li { float: left; padding: 0 2px;}
em { float: left;}
.phone { color: #ffcc33; float: right; font-size: 21px; font-weight: bold;  line-height: 27px;}
.social-icon {padding: 12px 8px 12px 0;}
.logo { padding: 12px 0;}
.choose{ padding-top:5px;}


.top-sIcon {float: left; text-align: right; width: 60%;}

.top-sIcon > ul { float: right;}


#nav-wrap {
    margin-top: 0px;
}
/* menu icon */
#menu-icon {
    display: none; /* hide menu icon initially */
}

#nav-wrap {
    margin-top: 0px;
}
/* menu icon */
#menu-icon {
    display: none; /* hide menu icon initially */
}
.menu_bar_wrap{ width:100%;  position:relative; z-index:5;}

/*Media Query*/
@media screen and (min-width: 200px) and (max-width: 600px)
{
	.container{ max-width:87%; width:90%;}
	.logo > img {height: auto; width: auto;}
	
.logo {padding: 25px 0 12px; text-align: center;}
	
	.col-1{ width:100%;} .col-2{ width:100%;} .col-3{ width:100%;} .col-4{ width:100%;} .col-5{ width:100%;} .col-6{ width:100%;} .col-7{ width:100%;} .col-8{ width:100%;} .col-9{ width:100%;}
	.border-perple li{ padding-right: 0; width: 92%;}
	
.trade-mark ul { float: none; margin: 0 auto; text-align: center;  width: 100%;}
	.trade-mark li { padding: 0; text-align: center;  width: 100%;}
.form .col-9 { width: 90%;}

.c-heading:before { height: 110px; width: 10px;}

.home-content img {width: 100%;}


li.footer-about {  width: 100%;}
li.footer-contact {  width: 100%;}
li.footer-categories {  width: 100%;}
li.footer-fb {  width: 100%;}

.phone {color: #ffcc33; float: none; font-size: 30px; margin: 0 auto; text-align: center;  width: 223px; }



.nevigation { margin-bottom: 15px; text-align: left;}
#nav-wrap {position: relative;}

.menu_bar_wrap{ background:#484848;}
#menu-icon { color: #fff;  height: 37px; background: url(../images/menu-icon.png) no-repeat 10px center #71b6d2; margin: 2% 0 0; width:100%;
 text-indent: 40px; padding-top:5px;  cursor: pointer;  display: block; /* show menu icon */ font-weight: bold;  border-bottom: 1px solid #878787;  line-height: 29px;}
nav ul li{width:100%; margin-top:0; border-bottom: 1px solid #c4c493; float: left;}
nav_bar ul li:hover{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}
nav ul li a { color: #41454d;  float: left;  font-size: 14px; padding: 11px 0px; text-decoration: none; text-transform: uppercase; width:100%;
	text-indent:10px;}
nav ul li a:hover{width:100%; color:#d4a108;}


nav{display:none;width:100%; background:#ffffce; float:left; overflow: hidden;}

.nevigation { text-align: left;}

.overlay{ padding: 12% 10%;   bottom: -266px;}

.top-sIcon {text-align: center; width: 100%;   margin: 7px 0 14px;}

.top-sIcon > ul {float: none; margin: 0 auto; width: 162px;}
h1{ line-height:32px;}
.l-margin {margin-left: 0;}
.footer-contact ul { margin-left: 14px;}

.footer-categories ul {margin-left: 18px;}
}

@media screen and (min-width: 601px) and (max-width: 767px)
{
	
	.container{ max-width:87%; width:90%;}
	.logo > img {height: auto; width: auto;}
	
.logo {padding: 25px 0 12px; text-align: center;}
	
	.col-1{ width:100%;} .col-2{ width:100%;} .col-3{ width:100%;} .col-4{ width:100%;} .col-5{ width:100%;} .col-6{ width:100%;} .col-7{ width:100%;} .col-8{ width:100%;} .col-9{ width:100%;}
	



li.footer-about {  width: 50%;}
li.footer-contact {  width: 37%;}
li.footer-categories {  width:50%;}
li.footer-fb {  width: 49%;}

.phone {color: #ffcc33; float: none; font-size: 30px; margin: 0 auto; text-align: center;  width: 223px; }



.nevigation { margin-bottom: 15px; text-align: left;}
#nav-wrap {position: relative;}

.menu_bar_wrap{ background:#484848;}
#menu-icon { color: #fff;  height: 37px; background: url(../images/menu-icon.png) no-repeat 10px center #71b6d2; margin: 2% 0 0; width:100%;
 text-indent: 40px; padding-top:5px;  cursor: pointer;  display: block; /* show menu icon */ font-weight: bold;  border-bottom: 1px solid #878787;  line-height: 29px;}
nav ul li{width:100%; margin-top:0; border-bottom: 1px solid #c4c493; float: left;}
nav_bar ul li:hover{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}
nav ul li a { color: #41454d;  float: left;  font-size: 14px; padding: 11px 0px; text-decoration: none; text-transform: uppercase; width:100%;
	text-indent:10px;}
nav ul li a:hover{width:100%; color:#d4a108;}


nav{display:none;width:100%; background:#ffffce; float:left; overflow: hidden;}

.nevigation { text-align: left;}

.overlay{ padding: 12% 10%;   bottom: -266px;}

.top-sIcon {text-align: center; width: 100%;   margin: 7px 0 14px;}

.top-sIcon > ul {float: none; margin: 0 auto; width: 162px;}
h1{ line-height:32px;}
.l-margin {margin-left: 0;}
.footer-contact ul { margin-left: 14px;}

.footer-categories ul {margin-left: 18px;}
	
	
.trade-mark ul { margin: 10px auto 15px; width: 100%;}
	
	
.footer-about .col-8 {
    width: 87%;
}
	
	
	
	
	
	
	
	.border-perple li{ padding-right: 0;  width: 48%;}
	.trade-mark li {  height: 138px; padding: 0; text-align: center; width: 50%;}
.form .col-9 { width: 90%;}

.c-heading:before { height: 110px; width: 10px;}

.home-content .col-2 {width: 39%;} .home-content .col-6{ width:60%;}
.home-content .col-2 img{ width:100%;}




}