/* CSS Document by Palakshi Dam -Krishna Tech */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic,700,700italic);
@import url('https://fonts.googleapis.com/css?family=Lobster');

body{font-family: 'Roboto Condensed', sans-serif; margin:0; background:url('images/bg.jpg'); background-size: 100% auto;}
#main{width:100%; height:auto; float:left}
#main-inner{width:80%; height:auto; margin:0 auto; overflow:auto}
#main-inner1{width:80%; height:auto; margin:0 auto;}
#main-inner2{width:90%; height:auto; margin:0 auto; overflow:auto}
#main-inner3{width:80%; height:auto; margin:0 auto; overflow:hidden}

a{text-decoration:none}

#uper_header{width:100%; height:auto; float:left;}
#uper_header a{float:right; width:1.3%; height:auto; margin:0.3%; padding:0.3%; border-radius:50%; background:white}
#uper_header a img{width:100%; height:auto; float:left}
#uper_header a:hover{background:#EAE9E9}

.menu-bac{background:#1468C2}
#header{width:100%; height:auto; float:left}
#header .logo{width:20%; height:auto; float:left; margin:0}
#header .logo img{width:100%; height:auto; float:left}
#header p{float:right; padding:15px 15px 15px 15px; font-size:x-large}
#header p strong{color:#F0623A}

#_desktop_cart {
    background: #f1c40f;
    float: right;
    margin:-10px 15px -10px 0;
    padding: 3px 13px;
    position: relative;
    z-index: 99;
}

#_desktop_cart:before {
  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #caa40d;
    border-style: solid;
    border-width: 0 0 10px 15px;
    content: "";
    display: block;
    position: absolute;
    right: -15px;
	bottom:0;
}

#_desktop_cart:after {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #caa40d;
    border-style: solid;
    border-width: 10px 0 0 15px;
    content: "";
    display: block;
    position: absolute;
    right: -15px;
    top: 0;
}
.material-icons {
    font-size: 60px;
    font-style: normal;
    font-weight: normal;
    float:left; 
    margin:0 8px 0 0;
}
.cart-products-count{
	color:white; font-size: x-large; margin-top:6px; float:right; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

/*		Hero section 		*/

.hero{
	display: block;
	position: relative;
	width: 100%;
	height: 600px;
	background-size: cover;
}

.hero .caption{
	position: absolute;
	width:80%;
	margin:5.5% 10% 0 10%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	-moz-transform:translate(0,-50%);
	-o-transform:translate(0,-50%);
}

.hero .caption img{
	float:left; margin-top:-1%; margin-right:2%; border-radius:50%
}

.hero .caption h1{
	color: #ffffff;
	font-size: xx-large;
	font-weight: normal;
	word-break: break-word;
	font-family: 'Merriweather', serif;
	margin:0;
	width:75%; 
	float:left;
}
.hero .caption h1 img{
	width:10%; height:auto; float:left
}

.hero .caption h1 span{
	float:left;
	font-size:small;
	font-family: 'Source Sans Pro', sans-serif;
	line-height:150%
}


#leftbar{width:66%; height:auto; float:left; margin:20px 0}
#rightbar{width:32%; height:auto; float:left; margin:20px 0; margin-left:2%}
#rightbar img{width:100%; height:auto; float:left}

#about{width:100%; height:auto; float:left; padding-bottom:3%}
#about h1{font-family: 'Lobster', cursive; color:#FB4047; margin-bottom:5px; text-align:center}
#about b{background:#CCCCCC; padding:2px; width:10%; float:left; margin:0 45% 15px 45%;}
#about p{color:#333333; line-height:150%; width:60%; height:auto; text-align:center; margin:auto 20%;}
#about a{width:10%; height:auto; float:left; margin:1% 45%; background:#f1c40f; color:white; text-align:center; padding:1% 0; text-decoration:none; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); transition:0.5s}
#about a:hover{background: #333333}

.product-bac{background:#F3F3F3; padding-bottom:2%}
#product{width:100%; height:auto; float:left}
#product h1{color:#333333; margin-bottom:1%}
#product h2{border-bottom:1px #CCCCCC solid; padding:0; margin:0 0 1% 0; width:100%; height:auto; float:left}
#product b{width:10%; height:auto; float:left; background:#FB4047; padding:3px 0 0 0; margin:0 90% 0 0}
#product .con{width:28%; height:450px; float:left; background:white; padding:1%; margin:1.6%; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.08);}
#product .con img{width:90%; height:auto; float:left; margin:1% 5%}
#product .con h3{color:#1468C2; border-bottom:1px #CCCCCC solid; margin-bottom:1%; font-size:medium}
#product .con h3 span{color:red; float:right; font-weight:normal}
#product .con p{background:#F5F4F4; color:#333333; width:46%; height:auto; float:left; margin:1%; padding:1%; font-size:small}
#product .see{width:10%; height:auto; float:left; padding:0.8% 0; background:#333333; color:white; text-align:center; margin:0 45%; transition:0.5s}
#product .see:hover{background:#1468C2;}

#footer{width:100%; height:auto; float:left}
#footer .middle{width:70%; height:auto; margin:0 auto; font-size:small}
#footer .middle .con{background:url('images/icon.png') left top no-repeat; background-size: 50px 50px; color:white; padding-left:7%; margin:1%; width:24%; height:60px; float:left}
#footer .middle .con1{background:url('images/icon1.png') left top no-repeat; background-size: 50px 50px; color:white; padding-left:7%; margin:1%; width:24%; height:60px; float:left}
#footer .middle .con2{background:url('images/icon2.png') left top no-repeat; background-size: 50px 50px; color:white; padding-left:7%; margin:1%; width:24%; height:60px; float:left}
#footer b{width:100%; height:auto; float:left; border-bottom:1px #666666 solid}
#footer p{color:#FFFFFF; font-size:14px; float:left; margin:0.8% 0}
#footer p a{color:#f1c40f; text-decoration:none; transition:0.5s}
#footer p a:hover{color: #C0C0C0}
#footer .p{ float:right}

#banner{width:100%; height:auto; float:left; margin:2% 0 2% 0}
#banner h2{width:40%; height:auto; float:left; color:white; font-family: 'Yanone Kaffeesatz', sans-serif; margin:0; font-size:xx-large}
#banner .con{width:50%; height:auto; float:right; margin:0.5% 0}
#banner .con a{color: white; padding:0 1%; margin:0; float: right; font-size: medium; text-decoration:none; transition:0.5s}
#banner .con a:hover{color:#CCCCCC}
#banner .con p{margin:0; font-size:medium; color:#7FEAD3; padding:0 1%; margin:0; float:right; text-align:right}

#about_us{width:100%; height:auto; float:left; margin:5% 0}
#about_us p{margin:0.5% 0; color:#333333}

#contact{width:50%; height:auto; float:left; margin:5% 25%; padding:2% 0; background:#ECECEC; text-align:center; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);}
#contact p{margin:0}
#contact h3{margin:0}

#enquire{width:50%; height:auto; float:left; margin:5% 25%; text-align:center; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);}
#enquire .box{width:96%; height:auto; float:left; margin:1.5% 1%; padding:1.5% 1%; border:1px #E5E4E4 solid; border-radius:5px; color:#333333; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05); transition:0.5s}
#enquire .box:hover{border:1px #C9C8C8 solid; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20);}
#enquire .box:focus{border:1px #C9C8C8 solid; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20);}
#enquire .box1{width:96%; height:auto; float:left; margin:1.5% 1%; padding:1.5% 1%; border:1px #E5E4E4 solid; font-family: 'Roboto Condensed', sans-serif; font-size:14px; border-radius:5px; color:#333333; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05); transition:0.5s}
#enquire .box1:hover{border:1px #C9C8C8 solid; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20);}
#enquire .box1:focus{border:1px #C9C8C8 solid; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20);}
#enquire .submit{padding:1.3% 3%; margin:2% 2% 2% 0; font-size: medium; background:#17BED2; color:white; float:right; font-family: 'Roboto Condensed', sans-serif; text-decoration:none; font-weight:bold; border:none; cursor:pointer; border-radius:5px; transition:0.5s}
#enquire .submit:hover{background:#019EB1}


@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

#main-inner{width:100%; height:auto; margin:0 auto; overflow:auto}
#main-inner1{width:100%; height:auto; margin:0 auto;}
#main-inner2{width:100%; height:auto; margin:0 auto; overflow:auto}
#main-inner3{width:100%; height:auto; margin:0 auto; overflow:hidden}

#uper_header{width:50%; height:auto; float:left; margin:1% 25%;}
#uper_header a{float:right; width:15%; height:auto; margin:1.5%; padding:1%; border-radius:50%; background:white}

#header .logo{width:70%; height:auto; float:left; margin:0 15%}

#header p{width:100%; height:auto; float:left; padding:0; margin:0 0 5% 0; font-size:x-large; text-align:center}
}