body {color: #333;}

.img-magnifier-container {
  position: relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.container {}
header {font-family: 'Titillium Web', sans-serif; background: #fff;}
.topbar-container {background: #0E3386; }
.topbar {max-width: 960px; margin: 0 auto; text-align: center; color: #fff; padding: 5px 0; }
.topbar-search {text-align: right}
.topbar-nav {line-height: 1.8em; color: #fff;}



.logo-container{max-width: 960px; margin: 0 auto; padding: 0; background: #fff; }
.deped-imus-logo-mobile {text-align: center; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-top: 4px; }
.deped-imus-logo-mobile img {width:200px;}
.deped-logo {text-align: center; 
	-webkit-transform: scale(.8);
	-ms-transform: scale(.8);
	-moz-transform: scale(.8);
	-o-transform: scale(.8);
	transform: scale(.8);

	-webkit-transition: all .1s;
	-moz-transition: all .1s;
	-o-transition: all .1s;
	-ms-transition: all .1s;
	transition: all .1s ease;
	}

	.deped-logo:hover {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}

.nav-container {max-width: 960px; margin: 0 auto; border-radius: 3px 3px 0 0;}
			#nav {background: #0E3386; border-radius: 3px 3px 0 0;}
			nav>ul.main-menu { text-transform: uppercase; font-family: 'Titillium Web', sans-serif;}
			nav>ul.main-menu li a {color:#fff;
				-webkit-transition: all .5s;
				-moz-transition: all .3s;
				-o-transition: all .3s;
				-ms-transition: all .3s;
				transition: all .3s ease;
				}
			
			
			
			
			.down-arrow-link:after {
			content: "\25BC";
			font-size: 80%;
			display: inline-block;
			padding-left: 6px;
			pointer-events: none;
			}
			
			.down-arrow-link:hover {color:#ccc;}	
			
			#nav ul li > div {
				position: absolute;
				display: block;
				opacity: 0;
				visibility: hidden;
				overflow: hidden;
				background: #fafafa;
				box-shadow: 0 2px 1px #ccc;
				z-index: 1;
				-webkit-transition: all .1s;
				-moz-transition: all .1s;
				-o-transition: all .1s;
				-ms-transition: all .1s;
				transition: all .1s ease;
			}
			
			
			#nav .nav-column {
			padding: .2em 2.5em .5em 1.9em;
			display: block;
			}
					
			#nav ul li:hover > div {
			opacity: 1;
			visibility: visible;
			overflow: visible;
			}
			
			
			
			#nav ul li:hover ul {
			display: block;
			visibility:visible;
			position: static;
			}
			
			#nav ul li:hover li {
			
			}
			
			#nav ul li:hover li a {
			color: #333;
			padding: .4em 0;
			}
			
			#nav .nav-column ul li {
			display: block;
			position: relative;
			font-size: .9em;
			}
			
			#nav .nav-column ul ul {
			transition: all .3s;
			opacity: 1;
			position: absolute;
			visibility:visible;
			left: 100%;
			top: -2%;
			}
			#nav .nav-column ul li {
			opacity: 1;
			visibility:visible;
			}
			#nav h3 { font-weight:600; font-size: 1em; padding:0; margin-bottom: .2em;
			border-bottom: 1px dotted #cecece;}
			
			

.nav-toggle {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	width: 52px;
	height: 64px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	background: #4FC4EC url("../images/hamburger.gif") no-repeat 50% 48%;
	border: 0;
}

#nav ul li:hover li a:hover {background: #b8d0f7; display: block;}

#st-trigger-effects { position: absolute;}
	
.main-banner-container { padding-bottom:0}
.main-banner {max-width: 960px; margin: 0 auto;}
.top-right-banner {box-shadow: 0 1px 4px rgba(0,1,0,.1); padding: 0 20px 5px; -moz-box-sizing: border-box; box-sizing: border-box; height: auto;}

.banner-caption {
	position:absolute;
	bottom:0;
	background: rgba(0,0,0,.75);
	width: 10%;
	font-size:1.5em;
}

h2,h3 {font-family: 'Noto Sans', sans-serif; color: #1e8dd5;}

.top-right-banner h3:first-child {margin: .5em 0 0}
.top-right-banner h4 {margin: 0 0 .5em 0; line-height: 1.2em;}
.top-right-banner a {text-decoration: none; color: #07588c}

	.top-right-banner ul li:hover, .top-right-banner li:hover a {background: #dde9ed; margin: 0 -20px 0 -20px ; padding: 0 20px 5px; color: #666}

.top-right-banner ul {list-style: none outside none; margin: 0; padding: 0}
 .top-right-banner ul li {border-top: 1px dotted #aaa; font-family: 'Titillium Web', sans-serif; padding: 0 0 5px;
 	-webkit-transition: all .1s;
	-moz-transition: all .1s;
	-o-transition: all .1s;
	-ms-transition: all .1s;
	transition: all .1s ease;
 	}

.content-container {background:url('../images/noise_lines.png') repeat #eaedf2; border-top: 1px solid #eee; margin-top: 0; border-bottom: 1px solid #ccc; box-shadow: 0 -1px 0px #fff;}
.featured-container {margin: 20px auto}
.featured-container h2 { font-size: 1em}
	.featured-container a {text-decoration: none;}
	.featured-container h3:first-child {margin: .5em 0}
.featured-content {padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 2px}

.feat-article {background: #fff; border-radius: 3px; margin: 0 .5em .5em; padding: 0 0 .5em; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e0e0e0; position: relative;}
	.feat-article:hover {box-shadow: 0 0 5px #ccc}


.feat-article p {font-size: .9em; color: #333;}
.feat-article h2, .feat-article p {margin: .5em 1em;}
.feat-article img {border-radius: 3px 3px 0 0; border-bottom:  2px solid #fbd13f;}
.feat-title {background: rgba(91,201,238,1); padding: 12px 10px 12px 10px; color: #fff; font-weight: normal; display: inline; position: absolute; margin: 0; text-align: center; min-width: 45%; box-shadow: 1px 1px 0px #99e7ff; text-shadow: 0 1px 1px #4d6299; top: 5px; left: -5px; white-space:nowrap;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s ease;
	}



		.feat-article:hover .feat-title {background: rgba(0,166,243,.7); width: 93.3%; text-align: center; display: inline; position: absolute; box-shadow: none;} 
		.feat-article:hover .feat-title:after {border-top: 0px solid transparent;
			border-left: 0px solid rgba(0,166,243,.7);
			border-bottom: 0px solid transparent;} 
		.feat-article h2:hover {color: #666;}

.feat-title:after {
	/* content: " ";
	height: 0;
	width: 0;
	border-top: 25px solid transparent;
	border-left: 15px solid rgba(91,201,238,1);
	border-bottom: 24px solid transparent;
	position: absolute;
	top: -1px;
	left: 150px;

	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s ease; */
	}

.feat-title:first-child:after {
	/*left: 149px; */
	}

.link {font-size: .8em; text-align: right;}
.link:before {content:"→"}
.link a {color: #1e8dd5;}

.link-back {font-size: .8em; text-align: right;}
.link a {color: #1e8dd5;}

.login {margin-top:5px;}
.login a {color: #fff; text-decoration: none; font-size: 12px;}

.issuance-list iframe{ border: 0;}

date {font-style: italic; font-size: .9em}

.main-content-container {background: #fafafa; border-bottom: 1px solid #eaedf2;}
.main-content-container-inside { border-bottom: 1px solid #eaedf2; background: url('../images/main-banner-bg.png') #fafafa center -120px no-repeat;}
.main-content-block {max-width: 960px; margin: 0 auto;}
.main-content-home {border: 1px solid #eaedf2; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; background: #fff; width: 100%;}
.main-content {border:1px solid #eaedf2; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; background: #fff; width: 100%}
.sidebar {border-left: 0px solid #eee; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-bottom: 2em; }
.sidebar .school-search h4 {color: #666;margin: .5em 0;}
.school-search {background: #e2ebef; padding: 5px 20px 20px; border-radius: 0 0 3px 0; margin: 0; -moz-box-sizing: border-box; box-sizing; border-box; border-bottom: 1px solid #fff;}
.feat-picture-wide { background: #ececec; }
.feat-picture-wide img { float:left;}
.feat-picture-centered {text-align:center;}
.feat-picture-centered img {float:none;}
figcaption { padding: 20px; width: 100%; font-size:.8em; color:#555; box-sizing: border-box;}
.sidebar h4 {margin: .5em 20px; }
.downloads ul {list-style: none outside none; font-size: .8em; margin: 0; padding: 0 20px; box-sizing:border-box;}

/* ORGANIZATION CHART MODIFICATION */
.feat-img img {float:none; width: 15%; }
.feat-img figcaption {padding: 20px; width: 100%; font-size:.8em; color:#555; box-sizing: border-box;}

/* ENDS HERE */


.article-list article { -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; border-bottom: 2px solid #eee;}
article h1 {margin-bottom: 1em; font-weight: normal; color: #526b7b; line-height: 1em; border-bottom: 1px solid #4FC4EC; padding-bottom: .3em;}
article h2 {margin: 1.2em 0 0 0; font-weight: normal;}
article h3 {margin: 1.2em 0 0 0; font-weight: normal; font-size: 1.2em; color: #526b7b;}
article h5 {margin: 1.2em 0 0 0; font-size: 40px; font-size: 1.2em; color: #526b7b;}
article a:link, article a:visited {color: #1e8dd5; text-decoration: none;}
article p, ul li, ol li {font-size: .9em}

.home-sidebar {padding: 0 0 20px 20px; box-sizing: border-box;}
.video-container iframe {width: 100%; height: 205px;}

.school-list ul li { border: 1px solid #ececec; list-style: none inside; padding: 0 20px; margin-bottom: 10px;}
.school-list.pure-u-1-2 p{margin-left: 140px;}

.school-list h2 { margin-top:0px;}

.school-logo {float: left; width: 120px; height: 120px; margin-right: 10px; margin-left: 10px;}

.main-content-inside small {}


.ads-leaderboard-size {text-align: center;}

.footer-banners-container {}
.footer-banners {max-width: 960px; margin: 0 auto;}
.pagination { text-align:center;}
.pagination a { display: inline-block; padding:3px 10px; margin:3px; border:1px solid #e0e0e0; text-decoration:none; font-weight:bold; background:#efefef;  color: #1E8DD5; font-size:1em}
.pagination a:before {content:" "}
.pagination a:hover { background: #fff;}
.pagination .selected { color: #999; background: none; border: none; }

.footer-container {background: #145C0B; border-top: 5px solid #0B6131; }
footer {max-width: 960px; margin: 0 auto; color: #fff; font-size: .8em}
footer h4 {font-size: 1.1em; margin: 1em 0 1em 0 ; border-bottom: 1px solid #df3c3d; padding-bottom: 5px;}
footer ul {margin: 0; list-style: none outside none; padding: 0px 20px 1em;}

footer ul li {border-bottom: 1px solid #f75455; white-space:nowrap;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	transition: all .2s ease;
	}

	footer ul li:hover {border-bottom: 1px solid #ff9191; width: 100%; padding-left: 5px;}

footer ul li span { visibility: hidden; margin-left: -3px;}

footer ul li:hover span { visibility: visible; color: #df3c3d; }

.footer-bottom {border-top: 1px solid #145C0B;}
.footer-info {background: url('../images/deped-imus-logo-small.png') 20px center no-repeat; min-height: 80px; box-sizing:border-box; padding: 20px 20px 20px 85px;  }
.dev-link {background: #df3c3d; text-align: center; padding: 0px 0 4px; border-radius: 0 0 3px 3px;}

footer a {color: #fff; text-decoration: none;}

.seals {text-align:center;}

.hidden {visibility: hidden;;}

.pure-button-xsmall {
            font-size: 70%;
        }

.pure-button-small {
            font-size: 85%;
        }

.pure-button-large {
            font-size: 110%;
        }

.pure-button-xlarge {
            font-size: 125%;
        }

.pure-button-success,
        .pure-button-error,
        .pure-button-warning,
        .pure-button-secondary,
        .pure-button-search {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .pure-button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .pure-button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .pure-button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .pure-button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

        .pure-button-search {
            background: rgb(248, 163, 47); /* this is a yellow */
        }
        .serve {
        	color:#448dbb;
        	font-size:18px;
        	font-weight: 300;        	
        }
        .serve-01{
        	font-weight: 900;	
        	}
        .BacktoList{
        	text-align: right;
    		font-family: 'Noto Sans', sans-serif;
        	font-weight: bold;
        	font-size:12px;
        	color:#448dbb;
        }
        .content-00{
        	font-family: 'Noto Sans', sans-serif;
        	font-weight: bold;
        	font-size:15px;
        	color:#333;
        }
        .content-01 {
        	font-family: 'Noto Sans', sans-serif;
        	font-size:13px;
        	color:#333;
        }
        .tbl-01 ,.td-01,.th-01{
        	border: 1px solid black;
        	
        }
        .th-01{
        	padding: 5px;
    		text-align: center;
    		color:#333;
    		font-family: 'Noto Sans', sans-serif;
        	font-weight: bold;
        	font-size:13px;
        }
        .td-01{
        	padding: 5px;
    		text-align: center;
    		color:#333;
    		font-family: 'Noto Sans', sans-serif;
        	font-size:12px;
        }
        .td-02{
        	padding: 5px;
    		text-align: center;
    		color:#333;
    		font-weight: bold;
    		font-family: 'Noto Sans', sans-serif;
        	font-size:13px;
        }
        .tbl-02{

		width:100%;
        }
        
        .tbl-02,.td-03,.th-02{
			border:hidden;
			
        	height:50%;
        }
        
        .th-02{
        	width:50%;
        	border:hidden;
        	padding: 5px;
    		text-align: center;
    		color:#333;
    		font-family: 'Noto Sans', sans-serif;
        	font-weight: bold;
        	font-size:16px;
        }
        .td-03{

        	border:hidden;
        	padding: 5px;
    		text-align: center;
    		color:#333;
    		font-family: 'Noto Sans', sans-serif;
        	font-size:15px;
        }

        .hov-00:hover{
        	font-weight: bold;
        	color:#1341d7;
        }
        .hov-01:hover{
        	background-color: #f3f3f3;
        	box-shadow:8px 8px 4px #cdcdcd;
        }
        

/*Feedback Form*/

#feedback{
	background-color:#9db09f;
	width:400px;
	position:fixed;
	bottom:350px;
	right:-0;
	margin-right:-330px;
	bottom: 10%;
	z-index:10000;
	overflow: hidden;

}

#feedback .section{
	background:url('../images/bg.png') #9db09f repeat-x top left;
	border:1px solid #808f81;
	padding:10px 10px 25px;
	height: 200px;
}

#feedback .color{
	float:left;
	height:4px;
	width:20%;
	overflow:hidden;
}

#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}

#feedback h6{
	background:url("../images/feedback.png") no-repeat 0 50px;
	height:200px;
	margin:5px 0 12px;
	text-indent:-99999px;
	cursor:pointer;
}

#feedback textarea{
	background-color:#fff;
	border:none;
	color:#666666;
	font:13px 'Lucida Sans',Arial,sans-serif;
	height:100px;
	padding:10px;
	width:236px;
	resize:none;
	outline:none;
	overflow:auto;
	
	-moz-box-shadow:4px 4px 0 #8a9b8c;
	-webkit-box-shadow:4px 4px 0 #8a9b8c;
	box-shadow:4px 4px 0 #8a9b8c;
}

#feedback a.submit{
	background:url("../images/submit.png") no-repeat;
	border:none;
	display:block;
	height:34px;
	margin:20px 75px 0;
	text-decoration:none;
	text-indent:-99999px;
	width:91px;
	outline: none;
}

#feedback a.submit:hover{
	background-position:left bottom;
}

#feedback a.submit.working{
	background-position:top right !important;
	cursor:default;
}

#feedback .message{
	font-family:Corbel,Arial,sans-serif;
	color:#5a665b;
	text-shadow:1px 1px 0 #b3c2b5;
	margin-bottom:20px;
}

#feedback .arrow{
	background:url('../images/arrows.png') no-repeat;
	float:left;
	width:23px;
	height:18px;
	position:relative;
	top:25px;
	left:8px;
}

#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}

.feedback-field span{
	font-size:21px;
	margin-top:70px;
	text-align:center;
	text-shadow:2px 2px 0 #889889;
	color:#FCFCFC;
	display:block;
}

.polaroid {
  width: 80%;
  background-color: black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.right-arrow-link::after {
    padding-left: .5em;
    content: "\25B8";
    font-size: small;
}