/* Clearfix */

.clearfix:before,

.clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

.clearfix {

    *zoom: 1;

}



/* Basic Styles */



#nav {

	height: 50px;

	width: 100%;

	background:url(../images/navback.jpg) no-repeat 0 0;

	width:100%;

	max-width:100%;

	-moz-background-size: cover;

	-webkit-background-size: cover;

	background-size: cover;

	background-position: top center !important;

	background-repeat: no-repeat !important;	

	font-size: 11pt;

	font-family: 'PT Sans', Arial, sans-serif;

	font-weight:bold;

	position: relative;

	border-bottom: 2px solid #283744;

	border-top: 2px solid #283744;

	

}

#nav ul {

	padding: 0;

	margin: 0 auto;

	width: 1200px;

	height: 40px;

}

#nav li {

	display: inline;

	float: left;

}

#nav a {

	color: #fff;

	display: inline-block;

	width:120px;

	text-align: center;

	text-decoration: none;

	line-height: 48px;

	text-shadow: 1px 1px 0px #283744;

}

#nav li a {

	border-right: 1px solid #000;

	box-sizing:border-box;

	-moz-box-sizing:border-box;

	-webkit-box-sizing:border-box;

}

#nav li:last-child a {

	border-right: 0;

}

#nav a:hover, nav a:active {

	background-color: #8c99a4;

}

#nav a#pull {

	display: none;

}



/*Styles for screen 600px and lower*/

@media screen and (max-width: 1200px) {

	#nav { 

  		height: auto;

  	}

  	#nav ul {

  		width: 100%;

  		display: block;

  		height: auto;

  	}

  	#nav li {

  		width: 50%;

  		float: left;

  		position: relative;

  	}

  	#nav li a {

		border-bottom: 1px solid #576979;

		border-right: 1px solid #576979;

	}

  	#nav a {

	  	text-align: left;

	  	width: 100%;

	  	text-indent: 25px;

  	}

}



/*Styles for screen 515px and lower*/

@media only screen and (max-width : 480px) {

	#nav {

		border-bottom: 0;

	}

	#nav ul {

		display: none;

		height: auto;

	}

	#nav a#pull {

		display: block;

		background-color: #283744;

		width: 100%;

		position: relative;

	}

	#nav a#pull:after {

		content:"";

		background:url(../images/nav-icon.png) no-repeat;

		width: 30px;

		height: 30px;

		display: inline-block;

		position: absolute;

		right: 15px;

		top: 10px;

	}

}



/*Smartphone*/

@media only screen and (max-width : 320px) {

	#nav li {

		display: block;

		float: none;

		width: 100%;

	}

	#nav li a {

		border-bottom: 1px solid #576979;

	}

}



/*----------------------------------------------------------Side Steps Panel Starts-----------------------------------------*/
.alphaslidestepspanel h3{
	font-size:25px;
	color:#000;
	font-weight:bold;	
	margin-bottom:10px;
	}
	
.alphaslidestepspanelinnertext p{
	font-size:16px;
	line-height:19px;
	color:#000;
	margin-top:10px;
	text-align:justify;
	padding:20px 0;
	}			
.alphaslidestepspanelinner{
	height:auto;
	overflow:hidden;
	}
.alphaslidestepspanelinner ul li{
	float:left;
	list-style-type:none;	
	
	border:4px solid #000;
	margin-right:20px;
	}	
.standardsidetepspanelinner{
	height:auto;
	overflow:hidden;
	}	
.standardsidetepspanelinnerblock{
	width:300px;
	height:410px;
	float:left;
	border:4px solid #003;
	margin-right:80px;
	
	}	
.standardsidetepspanelinnerblock h3{
	text-align:center;
	font-size:25px;
	color:#000;
	font-weight:bold;	
	margin-bottom:10px;
	margin-top:10px;
	}		
.standardsidetepspanelinnerblock h4{
	text-align:center;
	margin-top:20px;
	}	
.standardsidetepspanelinnerblock h4 img{
	border:2px solid #003;
	border-radius:4px;
	}
.standardsidetepspanelinnerblocktext{
	padding:20px;
	}
.standardsidetepspanelinnerblocktext p{
	font-size:16px;
	color:#000;	
	font-weight:bold;
	text-align:justify;
	}			
/*----------------------------------------------------------Side Steps Panel Starts-----------------------------------------*/
/*-----------------------------------------------------------Media Quary------------------------------------------------------*/
@media(max-width:850px){
	.slidesteppanel{
		
		}
	.alphaslidestepspanelinner{
		padding:10px;
		}	
	.alphaslidestepspanelinner ul li{
		float:none;
		max-width:100%;
		margin-bottom:20px;
		
		}	
	.alphaslidestepspanelblock img{
		width:100%;
		max-width:100%;
		height:auto;
		}
	.standardsidetepspanelinner{
		width:100%;
		max-width:100%;
		
		}		
	.standardsidetepspanelinnerblock{
		float:none;
		max-width:100%;
		height:420px;
		margin-bottom:20px;
		
		}	
	.standardsidetepspanelinnerblock h4 img{
		
		max-width:100%;
		}	
	.alphaslidestepspanelinnertext {
		
		max-width:100%;
		padding:10px;
		}	
	.alphaslidestepspanelinnertext{
	padding:10px;
	}	
	}

/*-----------------------------------------------------------Media Quary------------------------------------------------------*/
/*----------------------------------------------------------Rhino-Racks CSS Starts------------------------------------------*/
.roofrackspanel h3{
	
	margin-bottom:20px;
	font-size:25px;
	color:#000;
	font-weight:bold;
	}
.roofrackspanel p{
		font-size:16px;
	color:#000;		
	text-align:justify;
	margin-bottom:20px;
		}
.roofrackspanelinner{
	height:auto;
	overflow:hidden;
	}
.roofrackspanelinner ul li{
	float:left;
	list-style-type:none;
	}
.roofrackspanelinnerblock{
	width:220px;
	height:250px;
	border:4px solid #000;
	margin-right:150px;
	padding:10px;
	border-radius:4px;
	margin-bottom:20px;
	}	
.roofrackspanelinnerblock h2{
	text-align:center;
	}		
.roofrackspanelinnerblock h3{
	text-align:center;
	margin-top:20px;
	font-size:20px;
	color:#000;
	font-weight:bold;
	}	
.alphaslidestepspanelinnertext h3{
	font-size:16px;
	line-height:19px;
	color:#000;
	margin-top:10px;
	text-align:justify;
	}	
.roofrackstext h3{
	
	margin-top:20px;
	margin-bottom:20px;
	font-size:25px;
	color:#000;
	font-weight:bold;
	}		
.roofrackstext p{
	font-size:16px;
	color:#000;		
	text-align:justify;
	margin-bottom:20px;
	}		
/*----------------------------------------------------------Rhino-Racks CSS Ends------------------------------------------*/


/*-----------------------------------------------------------Media Quary------------------------------------------------------*/
@media(max-width:850px){.roofrackspanelinner{
	padding:10px;
	}	
.roofrackspanel{
	padding:10px;
	}
.alphaslidestepspanel{
		padding:10px;
		}	
}
/*-----------------------------------------------------------Media Quary------------------------------------------------------*/


/*----------------------------------------------------------Bars Racks Panel Starts-------------------------------------*/
.sportsbarpanel{
	
	}
.sportsbarpanelinner{
	height:auto;
	overflow:hidden;
	border:2px solid #000;
	margin:20px 0;
	}
.sportsbarpanelblock{
	float:left;
	width:550px;
	
	height:250px;
	margin-right:20px;
	
	}
.sportsbarpanelblock h2{
	text-align:center;
	padding-top:20px;
	}
.sportsbarpanelblock p{
	font-size:16px;
	color:#000;		
	text-align:justify;
	padding-top:40px;
	}	
.sportsbarpanelblock h2 img{
	border:4px solid #000;
	}	
.alphaslidestepspanelblock h4{
	font-size:15px;
	font-weight:bold;
	color:#000;
	text-align:center;
	padding:20px 0;
	}
.sportsbarpanel h1{
	font-size:25px;
	color:#000;
	font-weight:bold;
	}	
.japutespanel h3{
	font-size:25px;
	color:#000;
	font-weight:bold;
	margin:20px 0;
	}	
.japutespanel p{
	padding:10px 0;
	}		
.japutespanel h4{
	text-align:center;
	}
.japutespanel h4 img{
	border:4px solid #000;
	border-radius:4px;
	}
.japutepanelblock h3{
	text-align:center;
	margin:20px 0;	
	}
.japutepanelblock h3 img{
	border:4px solid #000;
	border-radius:4px;
	}	
.japutepanelblock h4{
	text-align:center;
	font-size:16px;
	color:#000;		
	text-align:justify;
	}			
/*----------------------------------------------------------Bars Racks Panel Starts-------------------------------------*/

/*-----------------------------------------------------------Media Quary------------------------------------------------------*/
@media(max-width:850px){
.sportsbarpanelblock{
	width:100%;
	max-width:100%;
	
	
	}

.sportsbarpanelblock h2{
	padding:10px;
	margin-top:20px;
	
	}	
.sportsbarpanelblock h2 img{
	max-width:100%;
	}
.sportsbarpanelblock p{
	margin-top:-50px!important;
	padding:10px;
	
	}
.japutepanelblock {
	padding:10px;
	}
}
/*-----------------------------------------------------------Media Quary------------------------------------------------------*/

/*-----------------------------------------------------------Carry Ladeer Panel------------------------------------------*/
.carryladderblock h3{
	text-align:center;
	margin-bottom:20px;
	}
.carryladderblock h3 img{
	border:4px solid #000;
	border-radius:4px;
	}
.carryladderblock2 h3{
	text-align:center;
	margin:10px 0;
	}	
.carryladderblock2 h3 img{		
border:4px solid #000;
	border-radius:4px;
}
.carryladderblock3 h3{
	text-align:center;
	}
.carryladderblock3 h3 img{
	border:4px solid #000;
	border-radius:4px;
	}
.carryladderblock3 p{
	margin:10px 0;
	}
/*-----------------------------------------------------------Carry Ladeer Panel------------------------------------------*/