/*!
 * 1. Common
 * 2. Useful Class
 * 3. Global Setting
 * 4. Header
 * 5. Content
 * 6. Form
 * 7. Footer
 * 8. Media Query
 */



/* 1. Common
==================== */
* {
	margin: 0;
	padding: 0;
}
a {
	-webkit-transition: all 0.2s linear 0s;
	   -moz-transition: all 0.2s linear 0s;
			transition: all 0.2s linear 0s;
}
a:hover,
a:visited,
a:focus,
a:active {
	color: #3b3b3e;
	outline: none !important;
	text-decoration: none;
	cursor: pointer !important;
}
p {
	margin-bottom: 20px;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: #000;
}
h1 {
	font-size: 48px;
	line-height: 60px;
	margin-bottom: 20px;
}
h2 {
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 20px;
}
h3 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 20px;
}
h4 {
	font-size: 16px;
	line-height: 32px;
	margin-bottom: 20px;
}
h5 {
	font-size: 14px;
	line-height:28px;
	margin-bottom: 20px;
	margin-bottom: 20px;
}
h6 {
	font-size: 12px;
	line-height: 22px;
	margin-bottom: 0;
}

.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

@font-face {
	font-family: "RosebaySlabRounded-Regular";
	src: url("../fonts/RosebaySlabRounded-Regular.otf") format("opentype");
}

@font-face {
	font-family: "RosebaySlabRounded-Obilque";
	src: url("../fonts/RosebaySlabRounded-Oblique.otf") format("opentype");
}

@font-face {
	font-family: "South Paris";
	src: url("../fonts/South Paris Demo Version.otf") format("opentype");
}

@font-face {
	font-family: "SS Nickson N.5";
	src: url("../fonts/SS Nickson N.5.ttf") format("truetype");
}

@font-face {
	font-family: "Trebuchet MS";
	src: url("../fonts/trebuc.ttf") format("truetype");
}

@font-face {
	font-family: "trebucbd";
	src: url("../fonts/trebucbd.ttf") format("truetype");
}


/* 2. Useful Class
==================== */
.hh-textcenter {
	text-align: center;
}
.hh-textleft {
	text-align: left;
}
.hh-textright {
	text-align: right;
}
.hh-text10 {
	font-size: 10px !important;
	line-height: 14px !important;
}
.hh-text11 {
	font-size: 11px !important;
	line-height: 16px !important;
}
.hh-text12 {
	font-size: 12px !important;
	line-height: 20px !important;
}
.hh-text14 {
	font-size: 14px !important;
}
.hh-text16 {
	font-size: 16px !important;
}
.hh-text18 {
	font-size: 18px !important;
}
.hh-text20 {
	font-size: 20px !important;
}
.hh-text24 {
	font-size: 24px !important;
}
.hh-text36 {
	font-size: 36px !important;
	line-height: 32px;
}
.hh-text44 {
	font-size: 44px !important;
	line-height: 40px;
}
.hh-textitalic {
	font-style: italic;
}
.hh-textunderline {
	text-decoration: underline;
}
.hh-inlinecontainer {
	font-size: 0;
}
.hh-inlinecontainer.top > .hh-inlineblock {
	vertical-align: top;
}
.hh-inlinecontainer.middle > .hh-inlineblock {
	vertical-align: middle;
}
.hh-inlinecontainer.bottom > .hh-inlineblock {
	vertical-align: bottom;
}
.hh-inlinecontainer > .hh-inlineblock {
	vertical-align: middle;
	margin-right: 20px;
	font-size: 14px;
}
.hh-inlinecontainer.top > .hh-inlineblock {
	vertical-align: top;
}
.hh-inlinecontainer > .hh-inlineblock:last-child {
	margin-right: 0;
}
.hh-inlinecontainer.twocolumn > .hh-inlineblock {
	margin: 0;
	width: 50%;
}
.hh-inlineblock {
	display: inline-block;
}
.hh-block {
	display: block;
}
.hh-nomargin {
	margin: 0 !important;
}
.hh-childnomargin * {
	margin: 0 !important;
}
.hh-centermargin {
	margin: 0 auto;
}
.hh-margin5 {
	margin-bottom: 5px !important;
}
.hh-margin10 {
	margin-bottom: 10px !important;
}
.hh-margin20 {
	margin-bottom: 20px !important;
}
.hh-margin30 {
	margin-bottom: 30px !important;
}
.hh-margin40 {
	margin-bottom: 40px !important;
}
.hh-margin60 {
	margin-bottom: 60px !important;
}
.hh-margin80 {
	margin-bottom: 80px !important;
}
.hh-margin100 {
	margin-bottom: 100px !important;
}
.hh-inlineblock.hh-margin5,
.hh-inlineblock.hh-margin10,
.hh-inlineblock.hh-margin20,
.hh-inlineblock.hh-margin30,
.hh-inlineblock.hh-margin40 {
	margin: 0 !important;
}
.hh-inlineblock.hh-margin5 {
	margin-right: 5px !important;
}
.hh-inlineblock.hh-margin10 {
	margin-right: 10px !important;
}
.hh-inlineblock.hh-margin20 {
	margin-right: 20px !important;
}
.hh-inlineblock.hh-margin30 {
	margin-right: 30px !important;
}
.hh-inlineblock.hh-margin40 {
	margin-right: 40px !important;
}
.hh-padding {
	padding: 20px;
}
.hh-paddingtop {
	padding-top: 40px;
}
.hh-paddingbottom {
	padding-bottom: 40px;
}
.hh-paddingleft {
	padding-left: 20px;
}
.hh-paddingright {
	padding-right: 20px;
}
.hh-nopadding {
	padding: 0 !important;
}
.hh-nopaddingtop {
	padding-top: 0 !important;
}
.hh-margincenter,
.hh-margincenter * {
	margin-left: auto;
	margin-right: auto;
}
.hh-responsiveimage {
	max-width: 100%;
	height: auto;
	display: block;
}
.hh-fullresponsiveimage {
	width: 100%;
	height: auto;
	display: block;
}
.hh-relativecenter {
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}
.hh-absolutecenter {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}
.hh-relative {
	position: relative;
}
.hh-overflowhide {
	overflow: hidden;
}
.hh-fullpage {
	height: 100%;
}
.hh-table {
	display: table;
	width: 100%;
	height: 100%;
}
.hh-tablecell {
	display: table-cell;
	height: 100%;
}
.hh-tablecell.middle {
	vertical-align: middle;
}
.hh-tablecell.bottom {
	vertical-align: bottom;
}



/* 3. Global setting
==================== */
html,
body {
	font-size:16px;
	height: 100%;
}
body {
    position: relative;
    color: #e29d25;
  	background: #23504c;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
.hh-textwhite {
	color: #fff !important;
}
.hh-textblack {
	color: #000 !important;
}
.hh-textgrey {
	color: #777777 !important;
}
.hh-textblue {
	color: #2f79d5 !important;
}
.hh-heading0 > * {
	font-size: 60px;
	line-height: 70px;
	margin: 0;
}
.hh-heading1 > * {
	font-size: 48px;
	line-height: 54px;
	margin: 0;
}
.hh-heading2 > * {
	font-size: 30px;
	line-height: 36px;
	margin: 0;
}
.hh-heading3 > * {
	font-size: 24px;
	line-height: 30px;
	margin: 0;
}
.hh-heading4 > * {
	font-size: 20px;
	line-height: 26px;
	margin: 0;
}
.hh-heading5 > * {
	font-size: 16px;
	line-height: 22px;
	margin: 0;
}
.hh-heading6 > * {
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}
.hh-heading7 > * {
	font-size: 12px;
	line-height: 16px;
	margin: 0;
}
.hh-paragraph > * {
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}
.hh-paragraphsmall > * {
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}
.hh-paragraph ul,
.hh-paragraphsmall ul {
	margin-left: 20px;
}
.hh-scale-50{
	height:50%;
	width:50%;
}
.hh-scale-75{
	height:75%;
	width:75%;
}

.kp-bg{
	background: #f6eade url("../images/bg-pattern.png");
}

.kp-certificate{
	height: 100%;
	padding-top: 40px;
	font-family: "Trebuchet MS";
}

.kp-certificate .top,
.kp-certificate .bottom{
	width: 10%;
	height: auto;
	position: fixed;
}

.kp-certificate .top{
    top: 0;
    left: 0;
}

.kp-certificate .bottom{
    bottom: 0;
    right: 0;
}

.kp-certificate .title{
	color: #23504c;
	border-bottom: 1px solid #23504c;
	margin-bottom: 1px;
	display: inline-block;
	font-family: "RosebaySlabRounded-Regular";
	font-weight: normal;
}
.kp-certificate h2.title{
	font-size: 27px;
}

.kp-certificate .desc{
	color: #e29d25;
	font-style: italic;
	margin-top: 0;
	font-weight: normal;
	font-style: italic;
}

.kp-certificate div.title{
	font-family: "Trebuchet MS";
}
.kp-certificate div.desc{
	font-size: 10px;
	margin-top: 3px;
}

.kp-certificate b{
	margin: 15px 0;
	font-size: 14px;
	color: #23504c;
	display: inline-block;
	font-family: "RosebaySlabRounded-Regular";
}

.kp-certificate .date{
	font-family: "Trebuchet MS";
	font-size: 14px;
	font-weight: bold;
	color: #23504c;
	margin-bottom: 25px;
}

.kp-certificate .author{
	padding: 10px 25px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: rgb(226,157,37);
	background: radial-gradient(circle, rgba(226,157,37,1) 0%, rgba(248,162,27,1) 35%, rgba(246,138,31,1) 100%);
	position: relative;
}

.kp-certificate .author img{
    position: absolute;
    width: 40%;
}

.kp-certificate .author .name{
	font-family: "RosebaySlabRounded-Regular";
	color:#f6eade;
	border-bottom: 1px solid #23504c;
	padding: 3px;
	margin-bottom: 5px;
	font-size: 30px;
	font-weight: normal;
}

.kp-certificate .author .outlet{
	color:#23504c;
	font-size: 12px;
	text-align: left;
	padding: 3px 0;
}
.kp-certificate .author .outlet #outletName{
	font-size: 20px;
	font-weight: bold;
}

.kp-certificate .hh-logo{
	text-align: center;
	margin: 30px 0;
}
.hh-logo{
	margin-top:50px;
	display: block;
}

.kp-certificate .hh-logo img{
	width: 30%;
	display: inline-block;
}
.kp-certificate br{
	margin: 10px;
}

/* 6. Form
==================== */

#hh-menu .input-group{	
	margin-top:15px;
}
#hh-menu .input-group .form-control,
#hh-menu .input-group .input-group-addon{
	border-radius:17px;
}
#hh-menu .input-group .form-control{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right:none;
}
#hh-menu .input-group .input-group-addon{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background:#ffffff;
	
}

/* 7. Footer
==================== */

#hh-footer{
	color:#e29d25;
	padding: 15px 0;
	font-size: 14px;
	line-height: 16px;
	 position: absolute;
  	bottom: 0;
  	width: 100%;
    vertical-align: center;

}
#hh-footer .social span{
	display: inline-block;
	margin-right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#hh-footer .social > a{
	color:#f6eade;
	display: inline-block;
	cursor: pointer;
	text-align: center;
}
#hh-footer .social > a > i{
	width: 1.5em;
    height: 1.5em;
    font-size: 2em;
    vertical-align: center;
	border: 7px solid #e29d25;
	border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #e29d25;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#contact{
	padding: 20px 0;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

.kp-certificate .hh-logo img{
	width: 30%;
	display: inline-block;
}
.contact{

}
.contact h2 {
  color: #f6eade !important;
  margin-top: 50px;
  font-size: 30px !important;
  border: 0 !important;
}

.contact h4 {
  	color: #e29d25;
  	font-weight: normal;
}

.contact .logo-bg{
	background: url("../images/logo bg.png") no-repeat  bottom ;
	padding: 50px 0;
}

fieldset {
  border: medium none !important;
  margin: 0px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}
#contact img{
    position: absolute;
    width: 40%;
    right: -30px;
    bottom: -10px;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e29d25;
  background: none;
  padding: 10px;
  text-align: center;
  color: #f6eade;
}

#contact input[type="text"]:focus,
#contact input[type="email"]:focus,
#contact input[type="tel"]:focus,
#contact input[type="url"]:focus,
#contact textarea:focus {
  border: 0;
  border-bottom: 1px solid #e29d25;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 0;
  border-bottom: 1px solid #f6eade;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  border: none;
  background: #e29d25;
  color: #23504c;
  padding: 10px 20px;
  margin-top: 20px;
  font-size: 15px;
	border-radius: 5%;
	-webkit-border-radius: 5%;
}

#contact button[type="submit"]:hover {
  background: #f6eade;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

/* 8. Media Query
==================== */
@media (max-width: 1366px) {
}
@media (max-width: 1199px) {
	.hh-banner-wrapper .hh-banner-group{
		right:7%;
		bottom:7%;
	}		
	.hh-brand span{
		font-size:16px;
	}
	#hh-menu{
		background-size:cover;
	}
	#hh-menu .hh-wrapper-search,
	#hh-menu .hh-wrapper-tnc{	
		padding:16px 30px;
	}
	#hh-menu .hh-wrapper-tnc img.img-responsive{
		max-height:61px;		
		margin:0;
	}
}
@media (max-width: 991px) {	
	#hh-about{
		background-image: none;
	}
	#hh-menu .menu-wrapper:last-child{
		margin-top: 0;
	}
	#hh-menu .menu-wrapper h3{
		margin-top: 40px;
	}

	.hh-banner-wrapper .hh-banner-group{
		right:4%;
		bottom:4%;
	}
	.hh-banner-wrapper .hh-banner-group a{
		margin:5px 15px;
	}	
	#hh-home{	
		background-size:200%;
	}
	#hh-home .hh-banner-wrapper .hh-banner-group .h1{
		padding:0;
		margin-top: 40px;
		margin-bottom: 0;
	}
	#hh-home .hh-banner-wrapper .hh-banner-group .h3{
		color:#444444;
	}
	#hh-menu .hh-wrapper-tnc img.img-responsive{
		max-height:80px;	
	}
}
@media (max-width: 767px) {	
	.hh-section{
		padding:20px 0;
	}
	.hh-banner-wrapper .background-media{
		background-attachment:scroll;
	}

	.hh-header .hh-logo {
		display: inline-block;
		line-height: 58px;
	}
	.hh-header .hh-logo img {
		height: 35px;
	}
	.hh-header .scroll-nav__list > li{
		margin-left:20px;
	}
	.hh-header .scroll-nav__list > li > a{ 
		font-size:14px; 
	}
	#hh-home{	
		background-size:250%;
	}
	#hh-menu .menu-wrapper h3{
		margin-top: 20px;
	}
	#hh-findus .google-maps {
	    display: none;	
	}
	#hh-findus .hh-section{
		padding-bottom: 40px;
	}
	.kp-certificate .top,
	.kp-certificate .bottom{
		width: 20%;
	}

	.kp-certificate h2.title {
		font-size: 22px;
	}
	.kp-certificate h3.title {
		font-size: 18px;
	}

	.kp-certificate div.title{
		font-size: 14px;
	}

	.kp-certificate .hh-logo img,
	.contact .hh-logo img{
		width: 50%;
	}
}
@media (max-width: 480px) {
	.hh-header{
    	background: #042f36;
	}
	.hh-banner-wrapper{
		margin-top: 120px;
	    /*min-height: 600px;*/
	}
	.hh-header .scroll-nav__list > li{
		margin-left:5px;
	}
	.hh-header .scroll-nav__list > li > a{ 
		font-size:12px; 
	}
	#hh-home{	
		background-size:300%;
	}

	.kp-certificate h3.title {
		font-size: 14px;
	}
	.kp-certificate h5.desc {
		font-size: 11px;
	}
	.kp-certificate h4.desc {
		font-size: 12px;
	}

	.kp-certificate div.title{
		font-size: 10px;
		font-weight: bold;
	}
	.kp-certificate div.desc{
		font-size: 8px;
	}
}

#modalLunarIpad{
	margin-top: 100px;
}