@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,800');

#ContentTable,#MainTable{margin:0;padding:0;width:100%}

* {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
			
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	section * { 
		font-family: 'Montserrat', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		}
	
	.clear { clear: both }
	
	.container-xx {
		width: 100%;
		max-width: 1000px;
		padding: 0 20px;
		margin: 0 auto;
		position: relative;
		
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}



section { padding: 150px 0; }

h1,h2,h3 { line-height: 1.1; font-family: 'Montserrat', Helvetica, Arial, sans-serif;}

#Hero {
	background-color: #eee;
	text-align: center;
	background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/hero-bg.jpg");
	
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;

	background-size: cover;
	}

#Hero h1 {
	font-size: 55px;
	margin-bottom: 12px;
	color: #143663;
	font-weight: 800;
	text-shadow: 0px 5px 15px rgba(250,250,250,0.5);	
	}

#Hero p {
	font-size: 22px;
	max-width: 55%;
	margin: 0 auto;
	margin-bottom: 40px;
	color: #132438;
	font-weight: 700;
	
	text-shadow: 0px 5px 15px rgba(255,255,255, 0.5);
	}

#Hero a:link,
#Hero a:visited {
	display: inline-block;
	text-decoration: none;
	padding: 18px 55px;

	color: #fff;
	background-color: #ff7500;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	}


#Hero a:hover { background-color: #ff8400; }




/**************/


#Boxes-3 {
	background-color: #f7f9fa;
	position: relative;
	
	}

#Boxes-3 h2 { 
	text-align: center;
	margin-bottom: 70px;
	position: relative;
	z-index: 1;
	}


#Boxes-3 h2:after {
	display: block;
	content: 'FEATURES';
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-weight: 800;
	
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 150px;
	color: #edf2f5;
	z-index: -1;
	line-height: 1;
	overflow: hidden;
	} 


body h2 {
	font-size: 45px;
	font-weight: 700;
	margin-bottom: 15px;
	color: #142539;
	}

.col-3 {
	width: 33.33333%;
	float: left;
	padding: 0 7px;
	}

#Boxes-3 .col-3 div {
	border: 1px solid #e3eaf0;
	padding: 35px 25px;
	text-align: center;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	}
	

#Boxes-3 .col-3 div:hover {
	background-color: #fff;
	
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	
	-webkit-box-shadow: 0px 8px 50px rgba(12,40,80,0.05);
	-moz-box-shadow: 0px 8px 50px rgba(12,40,80,0.05);
	box-shadow: 0px 8px 50px rgba(12,40,80,0.05);

	}	
	
	
	
#Boxes-3 .col-3 figure {
	width: 90px;
	height: 90px;
	margin: 0 auto;
	margin-bottom: 20px;
	
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;
	background-size: contain;
	}



#Boxes-3 #b1 figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/b1.png"); }
#Boxes-3 #b2 figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/b2.png"); }
#Boxes-3 #b3 figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/b3.png"); }

	
#Boxes-3 .col-3 p {
	font-size: 16px;
	color: #67798d;
	}


#Boxes-3 .col-3 h3 {
	color: #1b406d;
	margin-bottom: 8px;
	}



#Boxes-3:after {
	display: block;
	content: '';
	height: 100px;
	background-color: #f7f9fa;

	position: absolute;
	left: 0;
	bottom: 0px;
	z-index: -1;
	width: 100%;
	
	transform-origin: top right;
    -webkit-transform: skew(0, -3deg);
    -moz-transform: skew(0, -3deg);
    -ms-transform: skew(0, -3deg);
    -o-transform: skew(0, -3deg);
    transform: skew(0, -3deg);
	}


/*************/


#Features {}

#Features h2 {
	max-width: 85%;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 55px;
	
	}



#Features .features {
	width: 50%;
	float: left;
	padding-left: 110px;
	position: relative;
	margin-bottom: 55px;
	padding-right: 5%;
	min-height: 155px;
	}


#Features .features figure {
	display: block;
	width: 90px;
	height: 90px;
	position: absolute;
	top: 0;
	left: 0;
	
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;
	background-size: contain;
	}
	

#Features #f1.features figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/f1.png"); }
#Features #f2.features figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/f2.png"); }
#Features #f3.features figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/f3.png"); }

#Features #f4.features figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/f4.png"); }
#Features #f5.features figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/f5.png"); }
#Features #f6.features figure { background-image: url("//cdn.hotelplanner.com/Common/Images/Advertise/f6.png"); }






#Features .features b {
	display: block;
	font-weight: 700;
	color: #142338;
	}
	
	
#Features .features p { color: #66798a }





/***************/


#CAT {
	background-color: #ff7500;
	text-align: center;
	color: #fff;
	padding: 70px 0;
	}


#CAT h2 {
	color: #fff;
	}
	
	
#CAT p { margin-bottom: 20px;}	



#CAT a:link,
#CAT a:visited {
	display: inline-block;
	text-decoration: none;
	padding: 18px 55px;

	color: #13233c;
	background-color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	}



@media (max-width: 767px) {
	
	
	
	#Hero { padding: 65px 0; }
	#Hero h1 { font-size: 45px; }
	#Hero p { max-width: 100%; margin-bottom: 20px; }
	
	#Boxes-3 h2,
	#Features h2 {
		font-size: 35px;
		margin-bottom: 45px;
		max-width: 100%;
		}
	
	#Features h2 { margin-bottom: 100px; }
	
	/***************/
	
	#Boxes-3,
	#Features { padding: 100px 0; }
	
	#Boxes-3 h2:after { display: none }
	
	#Boxes-3 .col-3 {
		width: 100%;
		float: none;
		margin-bottom: 12px;
		
		} 
	
	
	/***************/
	
	
	#Features .features {
		width: 100%;
		float: none;
		margin-bottom: 32px;
		}
	
	
	#Features .features {
		min-height: 0;
		padding-left: 95px;
		}
	
	
	#Features .features figure {
		height: 70px;
		width: 70px;		
		}
	

}