html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {margin: 0; padding: 0; border: 0px none;}

html, body {
  /* you need to set this to assign to the main element a min height of 100% */
  height: 100%;
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	text-decoration: none;
}

body {
	text-align: center;
	margin: 0 auto;
	background-color: #FFF;
}

img {display: block;}

	.wrap {
		position: relative;
		margin: 0 auto;
		width: 1200px;
	}

	.wrapper {float: left;}



/********** HEADER **********/
#header {
	float: left;
	min-width: 96%;
	padding: 0.5% 2%;
	background-color: #FFF;
	position: fixed;
	top: 0px;
	z-index: 100;
}

	#logo {float: left;}
  .header-irp-logo {float:left;height: 65px;margin: 15px 0px 0 30px;opacity: 0.85;}
/********** HEADER **********/



/********** MAIN IMAGE **********/
.mainimage {
	float: left;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
    background-position: center center;
	text-align: center;
	display: table;
}
.mainimage_home {
	float: left;
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.0) 60%), url('../images/main-image-home.jpg');
	background: -webkit-gradient(linear, bottom, top, color-stop(0%,rgba(0,0,0,0.9)), color-stop(60%,rgba(0,0,0,0.0))), url('../images/main-image-home.jpg');
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-home.jpg');
	background: -o-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('.../images/main-image-home.jpg');
	background: -ms-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-home.jpg');
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-home.jpg');
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
    background-position: center center;
	text-align: center;
	display: table;
}
.mainimage_services {
	float: left;
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.0) 60%), url('../images/main-image-services.jpg');
	background: -webkit-gradient(linear, bottom, top, color-stop(0%,rgba(0,0,0,0.9)), color-stop(60%,rgba(0,0,0,0.0))), url('../images/main-image-services.jpg');
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-services.jpg');
	background: -o-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('.../images/main-image-services.jpg');
	background: -ms-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-services.jpg');
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-services.jpg');
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
    background-position: center center;
	text-align: center;
	display: table;
}
.mainimage_about {
	float: left;
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.0) 60%), url('../images/main-image-about.jpg');
	background: -webkit-gradient(linear, bottom, top, color-stop(0%,rgba(0,0,0,0.9)), color-stop(60%,rgba(0,0,0,0.0))), url('../images/main-image-about.jpg');
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-about.jpg');
	background: -o-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('.../images/main-image-about.jpg');
	background: -ms-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-about.jpg');
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 60%), url('../images/main-image-about.jpg');
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
    background-position: center center;
	text-align: center;
	display: table;
}
	.vertical-wrapper {display: table-cell; vertical-align: middle; max-height: 100vh; height: 100vh;}
	.vertical-wrapper-fixed {display: table-cell; vertical-align: middle; height: 500px;}
		.container {
			max-width: 84%;
    		padding-left: 8$;
    		padding-right: 8%;
    		margin-left: auto;
    		margin-right: auto;
		}

		#arrow_wrapper {position: absolute; bottom: 0px; width: 100%; padding: 0; margin: 0;}
			#arrow_wrapper img {float: left; margin-left: 4%; margin-bottom: 2%;}
/********** MAIN IMAGE **********/



/********** CONTENT **********/

	/***** HOME *****/
	#featured {
		float: left;
		min-width: 100%;
	}
		.home {float: left; width: 50%; padding: 4%; /*min-height: 160px;*/ height: 280px; margin: 0;}

		.home_left {
			background: linear-gradient(rgba(235,173,68,0.8), rgba(235,173,68,0.8)), url('../images/image-home-store.jpg');
			position: relative;
			background-size: cover;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-position: center center;
		}
		.home_right {
			background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), url('../images/image-home-services.jpg');
			position: relative;
			background-size: cover;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-position: center center;
		}
	/***** HOME *****/

	/***** SERVICES *****/
	#services_intro {
		float: left;
		background: -moz-linear-gradient(right, rgba(13,13,13,0.95) 60%, rgba(13,13,13,0.65) 100%), url('../images/intro-image-services.jpg');
		background: -webkit-gradient(linear, right, top, color-stop(60%,rgba(13,13,13,0.95)), color-stop(100%,rgba(13,13,13,0.65))), url('../images/intro-image-services.jpg');
		background: -webkit-linear-gradient(right, rgba(13,13,13,0.95) 60%,rgba(13,13,13,0.65) 100%), url('../images/intro-image-services.jpg');
		background: -o-linear-gradient(right, rgba(13,13,13,0.95) 60%,rgba(13,13,13,0.65) 100%), url('.../images/intro-image-services.jpg');
		background: -ms-linear-gradient(right, rgba(13,13,13,0.95) 60%,rgba(13,13,13,0.65) 100%), url('../images/intro-image-services.jpg');
		background: linear-gradient(to left, rgba(13,13,13,0.95) 60%,rgba(13,13,13,0.65) 100%), url('../images/intro-image-services.jpg');
    	width: 100%;
	    height: 100%;
		padding: 5% 5% 5% 55%;
    	position: relative;
	    background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
    	background-position: center center;
		text-align: center;
		display: table;
	}

	#services {
		float: left;
		min-width: 100%;
		background-color: #FFF;
		padding: 10% 0%;
	}

	.services_image {float: left; width: 50%;}
		.services_image img {display: block; width: 100%;}
	.services_text {float: left; width: 50%; padding: 5% 5% 0% 5%;}

		.border_top {border-top: 1px solid #e6e6e6;}
		.border_bottom {border-bottom: 1px solid #e6e6e6;}

	.services_bottom_left {
		float: left;
		background: linear-gradient(rgba(26,26,26,0.85), rgba(26,26,26,0.85)), url('../images/image-home-services.jpg');
    	width: 50%;
    	height: 100%;
    	position: relative;
    	background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
    	background-position: center center;
		text-align: center;
		display: table;
	}
	.services_bottom_right {
		float: left;
		background: linear-gradient(rgba(48,28,5,0.85), rgba(48,28,5,0.85)), url('../images/main-image-services.jpg');
    	width: 50%;
    	height: 100%;
    	position: relative;
    	background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
    	background-position: center center;
		text-align: center;
		display: table;
	}
		.vertical-wrapper-bottom {display: table-cell; vertical-align: middle; height: 310px;}
	/***** SERVICES *****/

	/***** ABOUT *****/
	#about_intro {
		float: left;
		width: 100%;
		padding: 5% 0%;
		background-color: #1a0d00;
	}

	#about_panels {
		float: left;
		width: 100%;
		background-color: #FFF;
	}
		.width_quarter {float: left; width: 25%;}
		.width_threequarter {float: left; width: 75%;}
			.width_quarter img, .width_threequarter img {display: block; width: 100%;}
		.width_text {float: left; width: 75%; min-height: 300px; padding: 70px 5% 0px 5%; background-color: #000;}

	#about_slider {
		float: left;
		width: 100%;
		padding: 5% 0%;
		background-color: #FFF;
	}
		#slider {float: left; width: 100%; margin-bottom: 2.5%;}
			#slider img {display: block; width: 100%;}

	#about_brands {
		float: left;
		width: 100%;
		padding: 5% 0% 3.5%;
		background-color: #f5f5f5;
	}
		.brands {float: left; width: 100%; margin-bottom: 2.5%;}
			.brands_quarter {float: left; width: 25%;}
				.brands_quarter img {display: block; width: 100%;}
	/***** ABOUT *****/

/********** CONTENT **********/

/********** FOOTER **********/
#footer {
	float: left;
	min-width: 100%;
	padding: 5% 0%;
	background-color: #e6e6e6;
}

	.footer_text {float: left; width: 40%; margin-right: 10%;}
	.footer_menu {float: left; width: 25%;}
	.footer_social {float: left; width: 25%;}
/********** FOOTER **********/





/******************** TABLET LANDSCAPE ********************/
@media only screen and (max-width: 1220px) {
	.wrap {
		width: 90%;
		padding: 0% 5%;
	}

/********** HEADER **********/
#header {
	min-width: 94%;
	padding: 1% 3%;
}
/********** HEADER **********/

	/***** SERVICES *****/
	.services_text img {display: none;}
	/***** SERVICES *****/
}

/******************** TABLET PORTRAIT ********************/
@media only screen and (max-width: 872px) {
/********** CONTENT **********/
	/***** HOME *****/
		.home {width: 100%; padding: 10%; height: auto;}
	/***** HOME *****/

	/***** SERVICES *****/
	#services_intro {
		background: -moz-linear-gradient(bottom, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.75) 60%), url('../images/intro-image-services.jpg');
		background: -webkit-gradient(linear, bottom, top, color-stop(0%,rgba(13,13,13,0.95)), color-stop(60%,rgba(13,13,13,0.75))), url('../images/intro-image-services.jpg');
		background: -webkit-linear-gradient(bottom, rgba(13,13,13,0.95) 0%,rgba(13,13,13,0.75) 60%), url('../images/intro-image-services.jpg');
		background: -o-linear-gradient(bottom, rgba(13,13,13,0.95) 0%,rgba(13,13,13,0.75) 60%), url('.../images/intro-image-services.jpg');
		background: -ms-linear-gradient(bottom, rgba(13,13,13,0.95) 0%,rgba(13,13,13,0.75) 60%), url('../images/intro-image-services.jpg');
		background: linear-gradient(to top, rgba(13,13,13,0.95) 0%,rgba(13,13,13,0.75) 60%), url('../images/intro-image-services.jpg');
    	width: 100%;
		height: 100%;
		padding: 30% 5% 5% 5%;
    	position: relative;
	    background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
    	background-position: center center;
		text-align: center;
		display: table;
	}

	.services_image {width: 100%;}
	.services_text {width: 100%; padding: 5%; border-top: 1px solid #e6e6e6;}

	.services_bottom_left {
    	width: 100%;
	}
	.services_bottom_right {
    	width: 100%;
	}
		.vertical-wrapper-bottom {height: 220px;}
	/***** SERVICES *****/

/********** CONTENT **********/

/********** FOOTER **********/
	.footer_text {width: 100%; margin-right: 0%; margin-bottom: 5%;}
	.footer_menu {width: 50%;}
	.footer_social {width: 50%;}
/********** FOOTER **********/
}

/******************** MOBILE ********************/
@media only screen and (max-width: 767px) {
.mobile_off {display: none;}

/********** HEADER **********/
	#logo img {width: 80%;}
  .header-irp-logo {float:left;height: 38px;margin: 13px 0 0 -58px; opacity: 0.85;}
/********** HEADER **********/

/********** MAIN IMAGE **********/
		.container {
			max-width: 90%;
    		padding-left: 5$;
    		padding-right: 5%;
		}
/********** MAIN IMAGE **********/

	/***** ABOUT *****/
		.width_quarter {width: 100%;}
		.width_threequarter {width: 100%;}
		.width_text {width: 100%; height: auto; padding: 10%;}

		.brands {margin-bottom: 0%;}
			.brands_quarter {width: 50%; margin-bottom: 2.5%;}
	/***** ABOUT *****/
}