﻿/*Coded by: Renan Guillermo of 2Soph Creative Solution (www.2soph.com)*/

/* RESET
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.clear { clear:both; }
.clear0 { clear:both; height:4px; }
.clear1 { clear:both; height:10px; }
.clear2 { clear:both; height:20px; }
.clear3 { clear:both; height:30px; }
.clear4 { clear:both; height:40px; }
.clear5 { clear:both; height:50px; }
.clear6 { clear:both; height:60px; }
.clear7 { clear:both; height:18px; }


/*enable this code to view div border */
.jabee { border:1px #FF0000 solid; }

 

/*MAIN
--------------------------------------------------------------*/
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; }
.wrapper { display:block; margin:0 auto; width:960px; }

/*TOP
--------------------------------------------------------------*/
#top-hldr { min-height:195px; background:url(/images/img1.png) center bottom repeat-x; }
#top-hldr .logo { display:block; width:238px; height:95px; margin:20px 0 0 14px; float:left; }



/*MENU*/
#menu-hldr { width:500px; height:40px; background:url(/images/img2.png) repeat-x; border-bottom:1px solid #bfced7; border-left:1px solid #bfced7; border-right:1px solid #bfced7; float:right; margin:0 0 0 0; }
#jabeemenubar {  }
#jabeemenubar, #jabeemenubar ul { padding: 0; margin: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; }
#jabeemenubar a { display: block; font-size:14px; color:#003e5a; text-decoration:none; text-align:center; line-height:40px; min-width:88px; padding-left:12px; padding-right:12px; text-transform:uppercase; font-weight:bold; }
#jabeemenubar a:hover { color:#fea100; }
#jabeemenubar li { float: left; background:url(/images/img3.png) top left repeat-y; }
#jabeemenubar li:first-child { background:none; }
#jabeemenubar li {position: relative;}

/* hide from IE mac \*/
#jabeemenubar li { position: static; }
/* end hiding from IE5 mac */

#jabeemenubar li ul  { display:block; width:150px; list-style:none; text-align:left; position: absolute; display: none; background:none; }
#jabeemenubar li ul li { display:block; width:142px; background:none; border-bottom:1px solid #bfced7; padding-left:8px; }
#jabeemenubar ul li a  { color: #fff; border-right: 0; background:none; }
#jabeemenubar li:hover ul { display: block; background:#ecf8ff; border-left:1px solid #bfced7; border-right:1px solid #bfced7; }
#jabeemenubar li:hover ul a { color: #003e5a; font-size:12px; text-align:left; padding:0; margin:0; text-transform:none; }
#jabeemenubar ul a:hover { color:#fea100 !important; }



/*MAIN CONTENT
--------------------------------------------------------------*/
#mid-hldr { background-color:#006a9a; min-height:747px; }
#mid-hldr .left-cntnt { background-color:#FFF; border:1px solid #0a719f; width:544px; min-height:313px; float:left; margin:0 0 0 0; padding:40px; color:#003e5a; line-height:16px; } 
#mid-hldr .left-cntnt h1 { color:#003e5a; font-weight:bold; font-size:16px; }

#mid-hldr .left-cntnt2 { background-color:#003e5a; border:1px solid #0a719f; width:576px; min-height:313px; float:left; margin:0 0 0 0; padding:24px;  color:#003e5a; line-height:16px; color:#FFF; } 

#mid-hldr .right-cntnt { width:285px; float:right; margin:0 20px 0 0; line-height:16px; font-size:13px; color:#FFF; }
#mid-hldr .right-cntnt h3 { font-size:16px; color:#FFF; font-weight:bold; }

/*FOOTER
--------------------------------------------------------------*/
#ftr-hldr { min-height:137px; background:url(/images/img16.png) center top repeat-x; }
#ftr-hldr ul { list-style:none; margin:0; padding:0; }
#ftr-hldr li { display:block; min-width:50px; float:left; font-size:11px; color:#003e5a; border-left:1px solid #b4b4b4; text-align:center; }
#ftr-hldr li a { text-decoration:none; color:#003e5a; text-align:center; padding:0 10px 0 10px; line-height:10px; text-transform:uppercase; font-weight:bold; }
#ftr-hldr li a:hover { text-decoration:underline; }
#ftr-hldr .copy { display:block; width:371px; margin:0 auto; color:#999999; text-align:center; font-weight:bold; }
#ftr-hldr .copy a { text-decoration:none; color:#999999; }
#ftr-hldr .copy a:hover { text-decoration:underline; }


/*OTHERS
----------------------------------------------------------------*/
.ln1 { width:659px; min-height:139px; float:right; }
.ln1-2 { display:block; color:#006896; font-size:16px; margin:20px 0 0 20px; }
.ln1-2 h1 { color:#003e5a; font-weight:bold; font-size:24px; padding-bottom:5px; } 
.ln1-3 { width:940px; margin:0 auto; }
.ln1-3 ul { display:block; list-style:none; }
.ln1-3 li { display:block; min-width:231px; float:left; font-size:18px; font-weight:bold; color:#ffffff; padding-left:15px; }
.ln1-4 { display:block; width:21px; height:21px; background:url(/images/img5.png) bottom center no-repeat; float:left; }
.ln1-5 { display:block; float:left; min-width:207px; margin:3px 0 0 5px; }
.ln1-6 { display:block; width:21px; height:21px; background:url(/images/img6.png) bottom center no-repeat; float:left; }
.ln1-7 { display:block; width:21px; height:21px; background:url(/images/img7.png) bottom center no-repeat; float:left; }

.ln2 { width:910px; height:134px; margin:0 auto; padding-top:20px; background:url(/images/img8.png) no-repeat 0 20px; font-size:50px; color:#FFF; text-shadow:1px 1px #590303; }
.ln2-1 { display:block; width:215px; float:left; margin:40px 0 0 39px; }
.ln2-2 { display:block; width:61px; height:63px; background:url(/images/img9.png) no-repeat; float:left; margin:30px 0 0 0;  }
.ln2-3 { 
display: block;
float: left;
margin: 40px 0 0 75px;
font-weight: bold;  }
.ln2-4 { display:block; width:939px; height:93px; background:url(/images/img10.png) no-repeat; margin:0 auto; position:relative; }
.ln2-5 { display:block; float:left; min-width:185px; font-size:18px; font-weight:bold; color:#ffffff; margin:31px 0 0 82px; }
.ln2-6 { display:block; float:left; min-width:185px; font-size:18px; font-weight:bold; color:#ffffff; margin:31px 0 0 90px; }
.ln2-7 { display:block; float:left; min-width:185px; font-size:18px; font-weight:bold; color:#ffffff; margin:31px 0 0 110px; }
.ln2-8 { display:block; width:175px; height:173px; background:url(/images/img11.png) no-repeat; position:absolute; right:-30px; top:0; }

#mid-hldr .topleft 
{
	width:544px; 
	float:left; 
	margin:0 0 0 0;
}

.ln3 { display:block; float:left; width:260px; }
.ln3-2 { display:block; float:left; width:260px; margin:0 0 0 20px; }
.ln3-3 { display:block; width:276px; height:183px; border:4px solid #FFF; margin:60px 0 0 0; }
.ln3-4 { 
display: block;
width: 284px;
min-height: 198px;
border: 1px solid #2C9ED1;
background-color: #1288BD;
color: white;
text-align: center;
font-size: 14px;
font-weight: bold; }
.ln3-4 ul { display:block; list-style:none; }
.ln3-4 li { 
display: block;
width: 210px;
min-height: 100px;
float: left;
margin: 37px 15px 0 37px;}
.ln3-4 li img { 
display: block;
width: 202px;
height: 138px;
margin: 0 auto;
border: 4px solid white;
margin-bottom: 10px;}

.ln4 { display:block; width:525px; margin:0 auto; font-size:16px; color:#FFF; font-weight:bold; text-align:center; padding-left:20px; position:relative; }
.ln4-1 { font-size:21px; padding:2px 0 0 0;  line-height:44px; }
.ln4-2 { display:block; width:60px; height:48px; background:url(/images/img17.png) no-repeat; position:absolute; top:-6px; left:0; }

.ln5 { display:block; min-height:166px; }
.ln5 a { text-decoration:none; color:#0099cc; }
.ln5 a:hover { text-decoration:underline; }

.ln6-2 { display:block; width:188px; float:left; text-align:center; color:#FFF; font-weight:bold; font-size:14px; }
.ln6-2 img { border:4px solid #FFF; margin-bottom:5px; }
.ln6-3 { display:block; width:360px; min-height:130px; float:left; margin:0 0 0 15px; }
.ln6-3 h1 { font-size:18px; font-weight:bold; }

#nav-icon { display:none; }
/*Media Query for Tablet portrait (768x1024)*/
@media (min-width: 768px) and (max-width: 979px) {
	.wrapper { width:720px; }
	.ln1 { width:56%; }
	#menu-hldr { width:100%;}
	#jabeemenubar a { padding-left:4px; padding-right:4px;}
	.ln1-2 { margin-top:10px; margin-left:10px;}
	.ln1-3 { width:100%; }
	.ln1-5 { min-width:0; font-size:13px;}
	.ln2 { width:100%; background-size:contain; font-size:46px; }
	.ln2-3 { margin: 32px 0 0 25px;}
	#mid-hldr .left-cntnt { width:65%; box-sizing:border-box; }
	#mid-hldr .right-cntnt { width:30%; box-sizing:border-box; }
	.ln3-4 { width:100%;}
	.ln3-4 li { width:100%; box-sizing:border-box;  margin: 37px 15px 0 0; }
	.ln3-4 li img { width:81%; }
	.ln2-4 { width:100%;}
	.ln2-8 { width:175px; right:4px;}
	.ln2-5 { margin: 18px 0 0 10px;}
	.ln2-6 { margin: 18px 0 0 10px;}
	.ln2-7 { margin: 18px 0 0 10px;}
}
/* FOR MENU */ /*Media Query for Small tablet portrait (600x800)*/
@media (max-width:767px) {
	#menu-hldr {position:relative; float:none;} #nav-icon { float:right; margin-left:10px; color:#DB3333; width:100%; height:24px; background: url(../images/nav_icon.png) no-repeat 10px 50%; padding:6px 10px 7px 35px; cursor: pointer; display: block; text-transform:uppercase; font-weight:bold; font-size:15px; line-height:13px; font-family: Arial, Helvetica, sans-serif; text-align:right; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-top:6px;} #nav-icon:hover, #nav-icon:active, #nav-icon.show {background:url(../images/nav_icon_act.png) no-repeat 10px 50%; color:#003e5a;} #nav-icon.show {color:#003e5a;}
	
	#menu-hldr ul.menu {clear:both; position:absolute; top:34px; z-index:99999;padding:5px 3%; border:1px solid #dadada; background:#f7f7f7; display:none; left:10px; right:10px;}
	#menu-hldr ul.menu li {float:left; margin:0; width:100%; background:none; border-bottom:1px solid #dadada; text-align:left;}
	#menu-hldr ul.menu li:last-child, #menu-hldr ul.menu li.last {border-bottom:0 none;}
	#menu-hldr ul.menu li a {display:block; background:none; padding:7px 10px 8px 8px; line-height:16px; font-size:13px; color:#515151 !important; transition:all linear .3s; border: none;} 
	#menu-hldr ul.menu li a:hover, #menu-hldr ul.menu li ul a:hover, #menu-hldr ul.menu li a:active, #menu-hldr ul.menu li ul a:active { color:#DB3333 !important; background:none !important; text-indent:6px;}
	#menu-hldr ul.menu ul {width:100%; position:static; display: block !important; opacity:1 !important; background:inherit;border:0 none;margin:0; padding:0;}
	#menu-hldr ul.menu ul li {border-top:1px solid #dadada; border-bottom:0 none;}
	#menu-hldr ul.menu ul li a {padding:6px 10px 8px 20px; font-size:11px;} #menu-hldr ul.menu ul li ul li a {padding:6px 10px 8px 32px;}
	#menu-hldr ul li.sfHover ul, #menu-hldr ul li:hover ul, #menu-hldr ul li.sfHover li.sfHover ul {top:inherit; left:inherit; margin-top:auto;}
	#jabeemenubar a { text-align:left;}
	.wrapper { width:100%; }
	.ln1 { width:50%;}
	.ln2 { width:100%; background-size:contain; font-size:38px;}
	.ln2-3 { margin: 27px 0 0 16px;}
	.ln2-4 { width:100%; }
	.ln2-6 { margin: 18px 0 0 41px; }
	.ln2-7 { margin: 18px 0 0 12px; }
	.ln2-8 { display:none;}
	#mid-hldr .left-cntnt { padding:20px; width:100%; box-sizing:border-box; float:none; margin-bottom:20px;}
	#mid-hldr .right-cntnt { float:none; margin:0 auto; }
	.ln1-3 { width:100%; padding-bottom:4px;}
	.ln1-3 li { font-size:15px; }
	#menu-hldr { width:100%; box-sizing:border-box; }
	.ln1-2 h1 { font-size:20px;}
	#top-hldr .logo { width:46%;}
	.clear6 {height:10px;}
	.ln1-3 {background-color:#003e5a; padding:5px 0 6px;}
	.ln1-3 li {padding-bottom:5px;}
	
}
@media (min-width: 768px) {
	#nav > ul.menu {display: block !important;}
}

/*Media Query for Mobile landscape (480x320)*/
@media (max-width:600px) {
	#top-hldr .logo { width:50%;}
	.ln1 { width:47%; }
	#menu-hldr { width:100%; }
	.ln2 {font-size:29px; height:90px;}
	.ln2-3 { margin: 22px 0 0 20px;}
	.ln2-5 { float:none;}
	.ln2-6 { float:none; margin: 18px 0 0 12px;}
	.ln4 { box-sizing: border-box; width: 100%; padding-left: 53px; font-size:14px; }
	.ln4-1 { font-size:18px; }
	.ln1-2 { font-size:14px;}
	.ln1-2 h1 { font-size:17px;}
  .googleMap{ display:none}
}

/*Media Query for Mobile portrait (320x480)*/
@media (max-width:479px) {
	#top-hldr .logo { width:90%; height:auto;}
	.ln1 { width:100%; }
	#ftr-hldr .copy { width:100%; }
	.ln4 { padding-top:5px;}
	.ln4-1 { line-height:18px;}
	.ln2-4 { padding-top:2px;}
	.ln2 { font-size:18px; height:60px;}
	.ln2-3 { margin: 14px 0 0 20px;}
	.googleMap{ display:none}
}

