@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);

body, html {height:100%;}
body.movable {position:relative;}
body {font:normal 13px Arial, Helvetica, sans-serif;line-height:20px;background:#f49814;}
img {max-width:100%;height:auto;}
a {text-decoration:none;outline:none !important;-webkit-transition: all 500ms ease-in-out;-moz-transition: all 500ms ease-in-out;-ms-transition: all 500ms ease-in-out;-o-transition: all 500ms ease-in-out;transition: all 500ms ease-in-out;}

#top {padding:5px 3px;position:fixed;bottom:10px;right:10px;display:none;cursor:pointer;z-index:10;}
#top img {height:50px;width:50px;}

#main {border-top:solid 8px #f49814;border-bottom:solid 1px #999;background:#fff;-webkit-box-shadow: 3px 3px 9px 0px rgba(50, 50, 50, 0.25);-moz-box-shadow:3px 3px 9px 0px rgba(50, 50, 50, 0.25);box-shadow:3px 3px 9px 0px rgba(50, 50, 50, 0.25);}
	#main img {padding:10px 0px;width:300px;}

	.sub-banner {background:#fff;}
	.sub-banner img {width:100%;}

#navigation-wrapper {width: 100%;}
	#navigation-wrapper > ul {margin:0;padding:0;}
	#navigation-wrapper > ul > li {list-style:none;text-align:center;display: table-cell;vertical-align:middle; position:relative;}
	#navigation-wrapper > ul > li:first-child {border-left: none;} 
	#navigation-wrapper > ul > li > a {display:block;text-decoration:none;text-transform:capitalize;color:#111;padding:37px 12px;font:500 18px 'Roboto';}
	#navigation-wrapper > ul > li:hover > a, #navigation-wrapper > ul > li > a.active {background:#f49814;}
	
	#navigation-wrapper ul ul {display:none;padding:0;position:absolute;background:#f49814;z-index:9;}
	#navigation-wrapper ul ul li {list-style:none;text-align:left;float:left;position:relative;border:0;width:15em;}
	#navigation-wrapper ul ul li a {text-decoration:none;color:#000;display:block;padding:10px 10px;font:400 15px 'Roboto';}
	#navigation-wrapper ul ul li a:hover {color:#fff;background:#111;}
	
	#navigation-wrapper ul ul ul {position:absolute;left:15em;top:0;}
	
/*dear programmer pakicopya nalang itong side navigation sa library.css*/
#sideNavigation {-webkit-box-shadow:3px 0 10px 0 rgba(0,0,0,.3);box-shadow: 3px 0 10px 0 rgba(0,0,0,.3);position:fixed; left:-220px; z-index:100; background:#E1E2E4; height:100%; width:220px; overflow:auto;}
	#sideNavigation.right {left:auto; right:-220px;}
	#sideNavigation ul {margin:0; padding:0; background:#E1E2E4;}
	#sideNavigation li {list-style:none; position:relative;}
	#sideNavigation a {text-transform:capitalize;display:block; color:#111; border-bottom:1px solid #AEB0B3; border-top:1px solid #fff; padding:1em 2em 1em 1em; font-size:15px;}
	#sideNavigation li:first-child a {border-top:0;}
	#sideNavigation li:last-child a {border-bottom:0;}
	#sideNavigation a:hover, #sideNavigation a.active {color:#001367; text-decoration:none;}
	#sideNavigation ul ul {display:none;}
	#sideNavigation li span {position:absolute; right:.5em; top:1.3em;width: 30px;}
	.sideNavTrigger {color:#000;display:none;width:30px;padding-top:15px;margin-right:15px;}
	.sideNavTrigger:hover, .sideNavTrigger:focus {color:#001367;}
	.sideNavTrigger span {border:1px solid #ddd; padding:.2em .3em; -webkit-border-radius:3px; border-radius:3px;}
	body.movable {position:relative;}
	body.moved {left:220px;}
	body.moved.right {left:auto; right:220px;}
	#sideNavigation.right.moved {left:auto; right:0;top:0;}
	#sideNavigation.moved {left:0;}
	#sideNavigation .logo a {padding:.5em; border:none;}

#banner-wrapper {background:#fff;padding:2em 0;}

#welcome-wrapper {padding:50px 0px;background:#fff;}
.welcome-content h1 {font:700 40px 'Roboto';color:#f49814;margin:0;padding:0;}
.welcome-content p {font:300 15px 'Roboto';color:#222;}
	.welc-btn {margin:30px 0px;text-align:center;}
	.welc-btn a {font:500 25px 'Roboto';background:#e24811;padding:10px 15px;text-decoration:none;color:#fff;border:solid 2px #e24811;}
	.welc-btn a:hover {color:#e24811;background:none;}

#service-wrapper {background:#f7f7f7;padding:35px 0px;}
#service-wrapper h1 {font:700 40px 'Roboto';color:#f49814;margin:0;padding:0;text-align:center;}
	.service-content {margin:25px 0px;text-align:center;}
	.service-content img {margin-bottom:15px;}
	.service-content p.serv-caption {font:500 17px 'Roboto';color:#e24811;padding:0;margin:0;text-transform:uppercase;}
	.service-content p.serv-desc {font:300 12px 'Roboto';color:#666;padding:0;margin-top:10px;}

.subpage-wrap {background:#fff;padding:0 0 50px 0;}

#news-wrapper {padding:35px 0 40px 0;background:#fff;}
	#news-wrapper p.wrapper-title {font:700 40px 'Roboto';color:#f49814;margin:0;padding:0;text-align:center;}
		.news-content {margin-top:25px;}
		.date span.day {font:400 25px 'Roboto';padding:10px;background:#f49814;color:#fff;float:left;margin:0 10px 0 0;border-radius:30px;}
		.date span.month {font:400 18px 'Roboto';display:block;text-transform:uppercase;padding-top:5px;}
		.date span.year {font:400 14px 'Roboto';display:block;}
		p.news-title {display:block;font:400 18px 'Roboto';text-transform:uppercase;color:#e24811;margin-top:15px;}
		p.news-text {font:400 13px 'Roboto';color:#777;padding:0;margin:0;text-align:justify;}
		.news-content a {font:400 13px 'Roboto';color:#e24811;}

#footer-wrapper {background:#f49814;color:#fff;padding:35px 0px;}
	#footer-wrapper h1 {font:700 25px 'Roboto';color:#111;padding:0;margin-bottom:25px;text-transform:capitalize;}
	.footer-sitemap ul {margin:0;padding:0;}
	.footer-sitemap li {list-style:none;}
	.footer-sitemap a {text-decoration:none;font:400 15px 'Roboto';color:#111;}
	.footer-sitemap a:hover {padding-left:8px;color:#555;}

	.footer-contact p,.footer-copyright p {font:400 15px 'Roboto';color:#111;margin:0;padding:0;}

	#col-left h2, #col-right h2 {font:700 40px 'Roboto';color:#f49814;padding:0;margin-bottom:25px;text-transform:capitalize;}
	#col-right p {font:400 15px 'Open Sans';color:#555;padding:0;margin-bottom:10px;}
	#col-right ul {margin:30px 0px;}
	#col-right li {font:400 15px 'Open Sans';color:#555;padding:0;margin:0;text-align:justify;}
	
.sidenav {padding-bottom:10px;}
	.sidenav ul {list-style:none;padding:0;text-transform:capitalize;margin:0;}
	.sidenav ul li {padding:2px 0;border-bottom:1px dotted rgba(0,0,0,.3);}
	.sidenav ul li:last-child{border-bottom:0;}
	.sidenav ul li a {text-transform:capitalize;display:block; color:#111;padding:1em 2em 1em 1em;font:400 15px 'Roboto';}
	.sidenav ul li a:hover, .sidenav ul li a.active {background:#e24811;color:#fff;text-decoration:none;}

#cert-wrapper {background:#f7f7f7;padding:35px 0px;}
#cert-wrapper h1 {font:700 40px 'Roboto';color:#f49814;margin-bottom:25px;margin-top:0;padding:0;text-align:center;}
	.sampleThumbs {text-align:center;}

.owl-wrapper-2 {margin-bottom:20px;}
.opollo .content {padding-top: 25px;text-align: left;}
.opollo .readMore {padding: 10px 0 30px;}

.captcha #cryptogram {background: #fff;}
.opollo > li > .title {font-size:20px;}

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

@media only screen and (max-width:1366px) {
	
}

@media only screen and (max-width:1280px) {
	
}

@media only screen and (max-width:1200px) {
	.opollo > li > .title {font-size:24px;width:80%;line-height: 20px;padding-top:12px;}
}

@media only screen and (max-width:980px) {
	#navigation-wrapper {display:none;}
	.sideNavTrigger {display:block;}
	.popover {display:none !important;}
	.welc-btn a {font:500 17px 'Roboto';}
	.welcome-content {text-align:center;}
	.sideNavTrigger {padding-top:30px;}

	#camera_wrap_1 img{margin: 0 !important}
	#camera_wrap_1 {height:25vh !important;}
	#camera_wrap_1 img{height:25vh !important;}
	#camera_wrap_1 img{width:100vw !important;}

	#camera_wrap_2 img{margin: 0 !important}
	#camera_wrap_2 {height:25vh !important;}
	#camera_wrap_2 img{height:25vh !important;}
	#camera_wrap_2 img{width:90vw !important;}
}

@media only screen and (max-width:768px) {



	/*.opollo .title {font-size: 100% !important;}*/
	.opollo .content {padding-top: 10px;}
	.opollo .readMore {padding: 10px 0;}
	.camera_caption > div {top: 25%;font-size: 16px;}
	.opollo > li > .content > .datestamped {border-top: 1px solid #c5c5c5;}
	.opollo > li > .title {font-size: 100%;margin-bottom: 1.5em;width: 90%;padding: 0 6em 0 .5em;height: 90px;}
}

@media only screen and (max-width:720px) {
}

@media only screen and (max-width:640px) {
}

@media only screen and (max-width:540px) {
	
}

@media only screen and (max-width:480px) {
	.sideNavTrigger {padding-top:20px;}
	#footer-wrapper {text-align:center;}
}

@media only screen and (max-width:400px) {
}

@media only screen and (max-width:360px) {
	
}

@media only screen and (max-width:320px) {
	
}

@media only screen and (max-width:240px) {
	
}