/*CSS*/
@font-face{
	font-family: century_gothic;
	src: url('custom_fonts/GOTHIC.TTF'),url('custom_fonts/GOTHICB.TTF'),url('custom_fonts/GOTHICBI.TTF'),url('custom_fonts/GOTHICI.TTF');
}
@font-face{
	font-family: luna_bar;
	src: url('custom_fonts/LUNABAR.TTF');
}

html{
	font-family: arial, tahoma;
	font-size: 14px;
}
body{padding: 0px; margin: 0px;}
h1, h2, h3, h4{font-family: tahoma; text-align:center; color:#333333;}
p{
	/*color: #979797;*/
	font-size: 18px;
	font-family: century_gothic;
	text-align: center;
	letter-spacing: 1px;
	line-height: 21px;
}

/*================ IDS ================*/
#main-banner{
	background-image:url('../images/banner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#mainbanner-text{font-size:62px; color:#fff; font-weight:bold; text-shadow:1px 1px 2px #000; width:85%; text-align:center; margin-top:260px; margin-left:auto; margin-right:auto;}
/*#header{height:600px;}
#parx{position: fixed; z-index:-1; bottom:0px;}*/

#nv-contact{}
#mobilemenu{text-decoration:none; font-size:21px; color:#333333; font-size:bold;}

#navpanel{
	padding:12px 0px;
	background: #fff;
	width: 100%;
	position: fixed;
	z-index: 1000;
	top: 0px;
}
#nav{padding:0px 12px;}

#nav ul{
	list-style:none;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
#nav li{display: inline-block; padding:14px 0px;}
#nav li a{
	text-decoration: none;
	color: #106785;
	font-size: 14px;
	font-weight: bold;
	font-family: arial;
	padding:12px 24px;
}
#nav li a:hover{color:#FFB017; border-bottom:7px solid #FFB017;}

#menudrop{
	background: #fff;
	padding: 7px 0px;
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 4000;
	display: none;
}
#menudrop ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
}
#menudrop ul li{
	display: block;
	padding: 12px 32px;
	text-align: center;
	border-bottom: 1px solid #eee;
}
#menudrop ul li a{
	color: #282828;
	text-decoration: none;
	padding: 0px 12px;
	font-family: century_gothic, arial;
}

#social img{height:30px; background:#069DE2; padding:4px;}

#footer{
	background: #101010;
	padding: 72px 0px;
	color: #fff;
	text-align: center;
	font-size: 21px;
	letter-spacing: 4px;
	text-transform: uppercase;
}

/*============= MATERIAL LISTING =============*/
#matlisting{padding: 0px;}
#matlisting ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
}
#matlisting li{
	display: inline-block;
	width: 320px;
	height: 450px;
	padding: 24px;
}
#matlisting li div{
	width: 320px;
	height: 450px;
	border: solid 1px #ddd;
	overflow: hidden;
}
#matlisting li div p{padding:4px 7px; font-size:12px; text-align:justify; line-height:12px; letter-spacing:0px; }
#matlisting img{
	width: 320px;
	height: 200px;
}


/*================ CLASSES ================*/
.banner-large{
	background-repeat: no-repeat;
	background-size: cover; /*100% 400px*/
	width: 100%;
	height: 400px;
	overflow: hidden;
	margin-top: 24px;
}
.banner-large div{text-align: right; color: #FFB017; font-size:74px; font-weight:bold; margin-top:172px; margin-right:5%;}

.content{
	width:75%;
	margin-right: auto;
	margin-left: auto;
	padding: 72px 0px;
	
}
.contentfull{
	padding: 72px 0px;
	text-align: center;
}

.head1{font-weight:bold; letter-spacing:4px !important; color:#069DE2; font-size:18px !important;}
.para{height:120px;}
.parabtn{padding-top:14px; text-align:center; border:none !important;}

.hline{
	margin-left: auto;
	margin-right: auto;
	width: 180px;
	padding: 7px 0px;
}

.hline2{
	padding:2px 0px; 
	background:#333333; 
	width:250px; 
	margin-right:auto; 
	margin-left:auto;
}

.desktop{}
.mobile{display:none;}

.nv-left{float:left; width:40%; text-align:center;}
.nv-right{float:right; width:60%; text-align:right;}
.logo{height:62px; border:none;}
.padding12{padding:0px 34px 4px 0px; font-weight:bold; font-size:14px; letter-spacing:2px; text-transform:uppercase;}
.services{width:30%; display:inline-block;}
.services img{height:124px; border:2px solid #fff; border-radius:172px; padding:42px 24px;}
.services h2{letter-spacing:2px;}
.services p{font-size:16px; letter-spacing:2px;}

.contentPadding{padding:24px;}
.contact-pg{padding:24px; height:500px;}
.contact-form{float:left; width:40%;}
.contact-form div{padding: 7px 24px;}
.contact-form input{height:42px; width:400px; border-radius:4px; border:1px solid #ddd; padding:0px 4px;}
.contact-form textarea{height:100px; width:400px; border-radius:4px; border:1px solid #ddd; padding:0px 4px;}

.contact-info{float:right; width:40%; border-left:1px solid #ddd;}
.contact-info div{text-align:center; padding:12px 0px; font-size:20px; color:#333333;}

.serv{padding:12px 0px;}
.serv img{float:left; padding-right:24px; height:200px; width:200px;}
.serv p{padding:12px; text-align:left;}
.serv b{color:#106785; font-weight:bold;}

.btn1{
	border:2px solid #fff; 
	color: #fff;
	padding: 18px 24px;
	font-size: 18px;
	text-decoration: none;
	text-shadow: none;
}
.btn1:hover{background:#fff; color:#e8a156;}

.btn2{
	text-decoration: none;
	border: 2px solid #333333;
	padding: 21px 42px;
	color: #333333;

}
.btn3{
	text-decoration: none;
	border: 2px solid #106785;
	padding: 7px 14px;
	background: #106785;
	color: #fff;
}

.hm-logo-panel{width:100%; background-image:url('../images/logo.png'); background-repeat:no-repeat; background-position:center left; background-size:500px 300px; height:300px;}
.hm-logo-panel div{width:50%; position:absolute; right:7%;}

.hm-btn{
	display: inline-block;
	width: 280px;
	height: 240px;
	background:#069DE2; 
	text-align: center;
	color: #fff;
	font-size: 18px;
	/*letter-spacing: 2px;*/
	cursor: pointer;
	overflow: hidden;
	border-radius: 24px;
}
.hm-btn-text{
	z-index:100;
	position: absolute;
	margin-left:-242px;
	margin-top: 20px;
	width: 200px;
	background: #FFB017;
	color: #fff;
	padding: 82px 0px;
	opacity: .9;
	border-radius: 124px;
	font-weight: bold;
}
.hm-btn img{
	width: 280px;
	height: 240px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.hm-profile{background-image:url('../images/hm-house-banner.jpg'); background-size:100% 500px; text-align:right; height:500px; overflow:hidden;}
.hm-name{color:#fff; font-family:luna_bar; font-size:72px; float:left; padding-left:90px;}
.hm-title{font-family:century_gothic; font-size:24px; font-weight:bold; letter-spacing:18px;}
.hm-profile-img{height:500px; float:right;}
 
.transition {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}


@media only screen and (max-width: 800px){
	#mainbanner-text{font-size:32px;}
	#nv-contact{padding:12px 0px; font-size:16px; font-weight:bold;}
	#matlisting li{padding:24px 0px;}
	#footer{letter-spacing:1px; font-size:16px; line-height:24px;}
	#footer span{float:none !important; display:block !important; width:100% !important; text-align:center !important; padding:12px 0px;}
	
	.hm-logo-panel{background-image:none;}
	.hm-logo-panel div{width:100% !important; right:0px !important; position:relative !important; text-align:center !important;}
	
	.desktop{display:none;}
	.mobile{display:block;}
	.nv-left{float:none; width:100%; text-align:center;}
	.nv-right{float:none; width:100%; text-align:center;}
	
	.banner-large div{text-align:center; font-size:42px; margin-top:250px;}
	
	.padding12{letter-spacing:0px;}
	.contentPadding{padding:24px 0px;}
	.content{width:95%; padding:24px 0px; text-align:center;}
	.contentfull div{width:100% !important; text-align:center !important; display:block !important;}
	.hm-profile{text-align:center;}
	.hm-name{font-size:42px; float:none; padding:0px;}
	.hm-title{font-size:12px; letter-spacing:14px;}
	.hm-profile-img{height:400px; float:none;}
	.contact-pg{padding: 12px 0px; height:auto;}
	.contact-form{float:none; text-align:center; width:100%;}
	.contact-form div{padding: 7px 0px;}
	.contact-form input, .contact-form  textarea{width:95%;}
	.contact-info{float:none; text-align:center; width:100%; border:none;}
	
	.serv p{border-bottom:none; padding:2px 0px; height:auto; text-align:center;}
	.serv img{float:none; padding:0px; height:250px; width:100%; display:block;}
}