/* CSS Document */
body{
	font: 15/1.5 Arial, Helvetica, sans-serif;
	padding:0;
	margin:0;
	background-color:#fff !important;
	}
.container{
	width:80%;
	margin:auto;
	overflow:hidden;
	
	}

ul{
	margin:0;
	padding:0;
	}
.button_1{
	height:38px;
	background:#00aff0;
	border:0px;
	padding-left:20px;
	padding-right:20px;
	color:#FFFFFF;
	}

	
.dark{
	
	}
header{
	background-color:#f8f8f8;
	
	color:#000;
	padding-top:30px;
	min-height:170px;
	
	}
header a{
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
	font-size:16px;
	}

header li{
	float:left;
	display:inline;
	padding:0 20px 0 0;	
	}
header #branding{
	float:left;
	padding-left:50px;
	}
header img{
	float:left;
	width:450px;
	
	}
	
	
header h1 {
	margin:20px;
	float:right;
	}
header nav{
	float:right;
	margin-top:10px;
	}	
header a:hover{
	color:#cccccc;
	}
	
	/* show case */
#showcase{
	
	
	text-align:center;
	color:#FFFFFF;
	}
#showcase h1{
	margin-top:100px;
	font-size:55px;
	margin-bottom:10px;
	}
#showcase p{
	font-size:20px;
	}
#newsletter{
	padding:15px;
	color:#000000;
	font-weight:bold;
	background-color:#2b353b;
	}
#newsletter img{
	margin-top:20px;
	float:left;
	color:#FFFFFF;
	}
#newsletter form{
	float:right;
	margin-top:15px;
	}
#newsletter input[type="email"]{
	padding:4px;
	height:38px;
	width:250px;
	}
#boxes h2{
	text-align:center;
	text-transform:uppercase;
	margin-bottom:30px;
	 text-align:center;
font-family: 'Roboto Slab', serif;
	text-align:center;
	color:#000;
	}
#boxes p{
	text-align:center;
	text-transform:uppercase;
	margin-bottom:30px;
	 text-align:center;
font-family: 'Roboto Slab', serif;
	text-align:justify;
	color:#000;
	font-size:18px;
	}
#boxes{
	margin:10px;
	}
#boxes .box{
	float:left;
	text-align:center;
	width:32%;
	padding:5px;
font-family: 'Roboto Slab', serif;
	text-align:center;
	color:#fff;
	}
#boxes .box img{
	width:350px;
	}
	
.catg {
    display: block;
    width: 100%;
    background: #414141;
    padding: 10px;
    color: #fff;
    font-size: 16px;
    border-top: 2px solid #ccc;
}	
	
	/*//////////////////////////////////////Features/////////////////////////////////////*/

#boxess{


 color:#FFFFFF;
 text-align:center;
font-family: 'Roboto Slab', serif;
	text-align:center;
	color:#fff;
	}


#boxess .box{
	float:left;
	text-align:center;
	width:25%;
	padding:5px;
	color:#fff;
	}
#boxess .box img{
	width:250px;
	}
#boxess .box .add img{
	width:150px;
	}

	/*///////////////////////////About////////////////////////*/

#about{
padding-top:30px;
 background-color:#fff;
	font-family: 'Roboto Slab', serif;
	font-size:18px;
	text-align:center;
	color:#000;
	height:300px;
	}

#about .box{
	float:left;
	text-align:center;
	width:100%;
	padding-top:20px;
	font-family: 'Roboto Slab', serif;
	text-align:center;
	color:#000;
	}



	
	/*//////////////////////////////////////Features/////////////////////////////////////*/
aside #sidebar{
	float:right;
	width:37px;
	margin-top:10px;
	background-color:
	}
	
article#main-col{
	float:left;
	width:65%;
	}


	
#maintext {
	
	min-height:300px;
	margin-top:50px;
	text-align:left;
	text-transform:uppercase;
	margin-bottom:30px;
	
font-family: 'Roboto Slab', serif;

	color:#fff;
	
	
	}
#maintext .box{
	float:left;	
	width:70%;
	padding:10px;
	
	}		
	
#maintext .boxx{
	float:left;
	text-align:center;
	width:30%;
	padding:10px;
	background-color:#2b353b;
	margin-top:10px;
	
	}		
	
#maintext h3{
	font-weight:bold;
	color:#fff;
	}
#maintext .boxx input, #maintext .boxx textarea{
	width:90%;
	padding:5px;
	}

.responsive {
    width: 100%;
    height: auto; }

/*//////////////////////////////////////Product page area/////////////////////////////////////*/

#proarea{
	
	min-height:300px;
	margin-top:20px;
	
	
	}
#proarea .box{
	float:left;	
	width:70%;
	padding:10px;
	
	}		
	
#proarea .boxx{
	float:left;
	text-align:center;
	width:30%;
	padding:10px;
	
	
	color:#FFFFFF;
	
	
	}		
	
#proarea h3{
	font-weight:bold;
	color:#CC9900;
	}
	

/*//////////////////////////////////////Product page area/////////////////////////////////////*/

	/*Full top strip */
	
#fulltop{
	
	background-color:#36A8EB;
	height:35px;
	}


	
#fulltop .box{
margin-top:5px;
	float:left;
	text-align:left;
	width:30%;
	
	color:#fff;
	}
	
#fulltop .boxx{
	float:left;
	text-align:left;
	width:30%;
	
	margin:10px;
	color:#fff;
	
	}	
	

	
	
	
	/*footer Area */
	
#clints{
	font-family: 'Roboto Slab', serif;
	padding-top:50px;
	background-image:url(imgs/gb4.jpg);
	 min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	background-position:center;
	background-repeat:no-repeat;
	
	
	}
#clints h2{
font-family: 'Roboto Slab', serif;
	text-align:center;
	color:#fff;
	}
	

#clints img{
	
	width:115px;
	margin-bottom:20px;
	margin-right:20px;
	}
	
#clints .box{
	font-family: 'Roboto Slab', serif;
	text-align:center;
	width:100%;
	padding:10px;
	color:#fff;
	font-size:18px;
	}
	
	
	
#clints .box img{
	width:150px;
	}
	
#clints input[type="email"]{
	padding:4px;
	height:38px;
	width:250px;
	background-color:#252525;
	}	
	
#top input[type="email"]{
	padding:4px;
	height:38px;
	width:250px;
	color:#666666;
	background-color:#ececec;
	border:#0000FF;
	
	}		
	
	
#last{
	background-color:#0E0E0E;
	font-family: 'Kosugi Maru', sans-serif;
	min-height:250px;
		
	}
#last .box{
	float:left;
	text-align:left;
	width:24%;
	padding:10px;
	font-family: 'Kosugi Maru', sans-serif;
	color:#F7F7F7;
	}		
#last h3{
	font-weight:bold;
	font-family: 'Kosugi Maru', sans-serif;
	color:#F7F7F7;
	}
	
	
#logos{
	background-color:#000;
	padding-top:10px;
	padding-bottom:10px;
	font-family: 'Kosugi Maru', sans-serif;
	min-height:100px;
		
	}
#logos .box{
	float:left;
	text-align:left;
	width:24%;
	padding:10px;
	font-family: 'Kosugi Maru', sans-serif;
	color:#F7F7F7;
	}			
	
	
	
	
footer{
	padding:15px;
	font-family: 'Kosugi Maru', sans-serif;
	color:#fff;
	background-color:#000;
	text-align:center;
	}
section a{
font-family: 'Roboto Slab', serif;
	color:#000F;
	text-decoration:none;
	text-transform:uppercase;
	font-size:14px;
	
	}

section li{
	
	display:list-item;
	padding:0 20px 0 0;
	text-align:left;	
	}
	
section a:hover{
	color:red !important;
	text-decoration:none;
	}


footer a{
	color:#00aff0;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:bold;
	font-size:16px;
	font-family: 'Kosugi Maru', sans-serif;
	}
footer a:hover{
	color:#fff;
	}

 /*footer Area end */


	
@media(max-width:768px ){
 header #branding,
 header nav,
 header nav li,
 #boxes .box,
 #boxess .box,
 #last .box,
 #clints .box,
 #maintext .box,
 #maintext .boxx,
 #proarea .box,
 #proarea .boxx,
 #fulltop .box,
 section li,
 #newsletter h1{
 	float:none;
	text-align:center;
	width:100%;
	} 
header li{
	
	display:list-item;
	width:100%;
	padding-bottom:10px;
	font-weight:bold;
		}
header a:hover{
	color:#FFA61A !important;
		
	}
header img{
	float:none;
	width:100%;
	}
#fulltop{height:65px;}
	
	
header{ padding-bottom:20px;} 
#showcase h1{
 	padding-top:20px;
  }
 #newsletter button,  #maintext button{
 	display:block;
	width:100%;
	}