/**handles:responsive**/
/*-----------------------------------------------------------------------------------*/
/*	1. Responsive Grid 
/*-----------------------------------------------------------------------------------*/

.container { 
	margin: 0 auto; 
	max-width: 960px;
	padding: 0 10px;
	position: relative;
}

.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

.row { padding-bottom: 0em; }	
.col { 
	display: block;
	float: left;
	min-height: 1px;
	width: 100%;
}

/*-----------------------------------------------------------------------------------*/
/*	2. Responsive Grid For Mobile
/*-----------------------------------------------------------------------------------*/

@media ( min-width : 768px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .col { margin-left: 2%; }
	.gutters .col:first-child { margin-left: 0; }	
	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }

}
/*-----------------------------------------------------------------------------------*/
/*	3. Responsive Menu for mobile
/*-----------------------------------------------------------------------------------*/
@font-face {
  font-family: "responsivenav";
  src:url("https://rlpelectric.com.au/wp-content/themes/rlpelectric/css/icons/responsivenav.eot");
  src:url("https://rlpelectric.com.au/wp-content/themes/rlpelectric/css/icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("https://rlpelectric.com.au/wp-content/themes/rlpelectric/css/icons/responsivenav.ttf") format("truetype"),
    url("https://rlpelectric.com.au/wp-content/themes/rlpelectric/css/icons/responsivenav.woff") format("woff"),
    url("https://rlpelectric.com.au/wp-content/themes/rlpelectric/css/icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}
	.nav-collapse ul {
		margin: 0;
		padding: 0;
		width: 100%;
		display: block;
		list-style: none;
	}

	.nav-collapse li {
		width: 100%;
		display: block;
	}

	.js .nav-collapse {
		clip: rect(0 0 0 0);
		max-height: 0;
		position: absolute;
		display: block;
		overflow: hidden;
		width: 100%;
		zoom: 1;
	}

	.nav-collapse.opened {
		max-height: 9999px;
	}

	.disable-pointer-events {
		pointer-events: none !important;
	}
	.nav-collapse ul ul a {
		padding-left: 1em !important;	
	}
	.nav-collapse a {
		border-bottom: 1px solid #3d4140;
		color: #fff;
		display: block;
		font-size: 14px;
		font-weight: bold;	
		padding: .75em 10px!important;
		text-align: left!important;
		text-transform: uppercase;
		width: 100%;
	}
	.nav-collapse a:hover { 
		border-bottom: 1px solid #309acc;	
		color: #309acc;		
		text-decoration: none; 
	}

.nav-toggle {
	border: 1px solid #3d4140;
	float: right; 
	height: 55px;
	overflow: hidden;
	position: fixed;
	position: relative;
	text-decoration: none;
	text-indent: -999px;
	width: 55px;
	z-index: 99999;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.nav-toggle:before { 
  color: #309acc; 
  font-family: "responsivenav", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 28px;
  text-transform: none;
  position: absolute;
  content: "=";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0; }

.nav-toggle.active::before {
  font-size: 24px;
  content:"x"; }
	
@media screen and (min-width: 40em) {
	.js .nav-collapse {
		position: relative;
	}
	.js .nav-collapse.closed {
		max-height: none;
	}
	.nav-toggle {
		display: none;
	}
}

@media ( min-width : 768px ) {
	.nav-collapse { display: none!important; }
}

/*-----------------------------------------------------------------------------------*/
/*	4. Media Queries
/*-----------------------------------------------------------------------------------*/

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

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

}
@media screen and (max-width: 736px) {
	.main-menu { display: none; }
	.wp-caption, .wp-caption img { width: auto!important; }
	.wp-caption.alignright, .wp-caption.alignleft { margin: 0 0 20px!important; }
	.alignright, .alignleft { float: none!important; }
	img.alignleft { display: block!important; float: none!important; margin-right: 0!important; }
	img.alignright { display: block!important; float: none!important; margin-left: 0!important; }	
	
	.text-center, .text-left, .text-right  { text-align: left; }
	
	#header .primary-area { padding: 10px!important; }
	#header .primary-area .col.span_3 { float: left; line-height: 55px!important; width: 70%;  }
	#header .primary-area .col.span_9 { display: none; }
	
	#content-area { margin-bottom: 20px; }
	#footer .primary-area { height: auto!important; }
	#footer .secondary-area, #footer .secondary-area .text-right { text-align: center!important; }
	
	.home #main { background-size: cover!important; }
	.home #main, .home #main article { min-height: 0!important; }
		
	.product-gallery { 
		padding: 30px 0 0!important;
		position: relative;
	}
	.product-gallery li {
		margin-bottom: 2%;
		margin-left: 0!important;
		width: 100%!important;
	}
}

@media screen and (min-width: 768px) and (max-width: 959px)  {
	.home #main { background-size: cover!important; }
	.home #main, .home #main article { min-height: 0!important; }
	.product-gallery { 
		margin-top: 500px!important;
		padding: 30px 0 0!important;
		position: relative;
	}
	.product-gallery li {
		margin-left: 2%!important;
		width: 18.4%!important;
	}
}