/*
 * Theme Name:		GWT-Wordpress 27.0.0
 * Theme URI:		https://github.com/GOSD-DICT/gwt-wordpress/releases/tag/27.0.0
 * Description:		Custom WordPress theme based on the draft Unified Web Content Policy 
 *					prepared by the PCDSPO, DOST-ASTI, and DOST-ICTO. Theme is built on 
 *					HTML5 responsive WordPress framework based on ZURB's Foundation.
 * Version:			27.0.0
 * Author:			J.K. | R.N. | GWHS Team
 * Author URI:		https://github.com/GOSD-DICT
 * License:			MIT License
 * License URI:		http://www.opensource.org/licenses/mit-license.php
 * Tags: 			theme-options, rtl-language-support, featured-images, editor-style, custom-menu, 
 *					responsive-layout, right-sidebar, left-sidebar, one-column, two-columns, three-columns
 */

/**
 * eol-887
 * Table of Contents
 *
 * 1.0 - Normalize
 * 2.0 - Genericons
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Widgets
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Posts and pages
 *    11.3 - Post Formats
 *    11.4 - Comments
 *    11.5 - Sidebar
 *    11.6 - Footer
 * 12.0 - Media
 *    12.1 - Captions
 *    12.2 - Galleries
 * 13.0 - Multisite
 * 14.0 - Media Queries
 *    14.1 - >= 640px
 *    14.2 - >= 641px
 *    14.3 - >= 641 x 1024px
 *    14.4 - >= 1025px
 *    14.5 - >= 1025 x 1440px
 *    14.5 - >= 1441px
 *    14.5 - >= 1441 x 1920px
 *    14.5 - >= 1921px
 * 15.0 - Print
 */

/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

/**
 * 2.0 - Genericons
 */
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
 
 .menu-item-has-children a:after,
 .social-navigation a:before,
 .dropdown-toggle:after,
 .bypostauthor > article .fn:after,
 .comment-reply-title small a:before,
 .pagination .prev:before,
 .pagination .next:before,
 .pagination .nav-links:before,
 .pagination .nav-links:after,
 .search-submit:before {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
   font-family: "Genericons";
   font-size: 16px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: 1;
   speak: none;
   text-align: center;
   text-decoration: inherit;
   text-transform: none;
   vertical-align: top;
 }
 
 /**
  * 3.0 - Typography
  */
 

 h1, h2, h3, h4, h5, h6 {
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   line-height: 1;
 }
 h1 {font-size: 2.69rem;}
 h2 {font-size: 1.44rem;}
 h3 {font-size: 1.25rem;}
 h4 {font-size: 1.13rem;}
 h5 {font-size: 0.81rem;}
 h6 {font-size: 0.63rem;}
 
 /** default classes **/
 .alignright {
   float: right;
   margin-left: 1rem;
 }
 .alignleft {
   float: left;
   margin-right: 1rem;
 }
 
 /**
  * 4.0 - Elements
  *
 /**
  * 5.0 - Forms
  */
 /**
  * 6.0 - Navigation
  */
 /**
	  * 6.1 - Links
	  */
 /**
	  * 6.2 - Menus
	  */
 
 /*top bar & auxiliary*/
 #main-nav {
   background-color: #f7f7f7;
   position: fixed;
   z-index: 4;
   width: 100%;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
 }
 #main-nav .name a {
   font-size: 1.19rem !important;
   font-family: "Arial", sans-serif !important;
 }
 #auxiliary {
   background-color: #f7f7f7;
   border-bottom: 1px solid #f7f7f7;
 }
 #main-nav li:not(.has-form) a:not(.button),
 #main-nav li.active:not(.has-form) a:not(.button),
 #aux-main li:not(.has-form) a:not(.button),
 #aux-main li.active:not(.has-form) a:not(.button) {
   font-size: 0.85rem;
   color: #000;
   font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
   padding: 0px 15px;
   line-height: 58px;
   white-space: nowrap;
   /* For Approval 
   font-weight: bold; */
 }
 .top-bar-left > ul > li,
 .top-bar-right > ul > li,
 #aux-main > ul > li {
   /* For appoval to remove border right |*/
   border-right: 1px solid #ebebeb;
 }
 #main-nav .has-dropdown > a,
 #aux-main .has-dropdown > a {
   padding-right: 35px !important;
 }
 #main-nav li.current-menu-item:not(.has-form)
 #aux-main li.current-menu-item:not(.has-form) {
   background: #e4e4e4 none repeat scroll 0% 0%;
   line-height: 1;
 }
 #main-nav .has-dropdown > a::after,
 #aux-main .has-dropdown > a::after {
   border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent;
   margin-right: 15px;
   top: 50%;
   right: 0;
 }
 #main-nav ul .name a:hover {
   background: #f7f7f7 !important;
 }
 #main-nav ul li:hover:not(.has-form) > a,
	 #main-nav .dropdown li:not(.has-form) a:not(.button):hover,
	 #main-nav .dropdown li:not(.has-form):hover > a:not(.button),
	 /*#main-nav .vertical li:not(.has-form):hover > a:not(.button),*/
	 #aux-main ul li:hover:not(.has-form) > a,
	 #aux-main .dropdown li:not(.has-form) a:not(.button):hover,
	 #aux-main .dropdown li:not(.has-form):hover > a:not(.button) {
   background: #e4e4e4;
 /* New looks on aux menu*/
   font-size: 0.9rem;
   font-weight: bold;
   -webkit-transition: all 400ms ease;
   -moz-transition: all 400ms ease;
   -ms-transition: all 400ms ease;
   -o-transition: all 400ms ease;
   transition: all 400ms ease;
 }
 #main-nav li.current-menu-item:not(.has-form) a:not(.button),
 #aux-main li.current-menu-item:not(.has-form) a:not(.button),
 #offCanvasRight li.current-menu-item:not(.has-form) > a:not(.button) {
   background-color: #e4e4e4;
   font-size: 0.9rem;
   font-weight: bold;
 }
 #main-nav .vertical li a::after,
 #aux-main .vertical li a::after {
   border-color: transparent transparent transparent rgba(0, 0, 0, 0.4);
 }
 #main-nav .vertical > li > a,
 #aux-main .vertical > li > a {
   line-height: 40px !important;
 }
 #main-nav .vertical > li > .is-dropdown-submenu,
 #aux-main .vertical > li > .is-dropdown-submenu {
   top: 1px;
 }
 
 /*off-canvass*/
 #off-canvas-container {
   z-index: 4;
   box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.2);
 }
 .title-bar {
   background: #f7f7f7;
 }
 
 .title-bar-right .name a,
 .title-bar-left .name a,
 .title-bar-title {
   color: #000;
   font-size: 1rem;
   font-family: "Roboto Condensed", sans-serif;
 }
 .title-bar-right button::after {
   background: #000;
   box-shadow: 0 7px 0 #000, 0 14px 0 #000;
 }
 /*off-canvass right menu*/
 #offCanvasRight {
   background-color: #fefefe;
   font-family: "Roboto Condensed", sans-serif;
   height: 100%;
 }
 #offCanvasRight .is-drilldown {
   max-width: 250px !important;
   height: 95%;
 }
 #offCanvasRight .list-item {
   background-color: #f7f7f7;
   padding: 0.7rem 1rem;
 }
 #offCanvasRight .list-item:first-child {
   /*border-bottom: 1px solid #e9e9e9;*/
 }
 #offCanvasRight .is-submenu-parent-item {
   font-weight: bold;
   border-bottom: 1px solid #ccc;
 }
 #offCanvasRight .vertical li:last-child {
   border-bottom: 1px solid #e9e9e9;
 }
 #offCanvasRight li a {
   background-color: #f7f7f7;
   color: #000;
   font-size: 18px;
   line-height: 1.5;
 }
 #offCanvasRight li .is-drilldown-submenu a {
   font-size: 15px;
   /*font-weight: 600;*/
 }
 /*#offCanvasRight li ul ul a {
		 font-size: 13px;
		 font-weight: 600;
	 }*/
 #offCanvasRight .menu-item-has-children a::after {
   border-color: transparent transparent transparent #898989;
 }
 /*.js-drilldown-back { text-transform: uppercase; }*/
 .js-drilldown-back > a::before {
   /*display: none;*/
   margin-bottom: 0.2rem;
   border-color: transparent #898989 transparent transparent;
 }
 #aux-offmenu {
   border-top: 1px solid #e9e9e9;
   font-weight: 600;
   color: #c7c7c7;
 }
 
 /**
  * 7.0 - Accessibility
  */
 
 #accessibility-shortcuts {
 }
 #accessibility-shortcuts ul {
   margin: 0;
   overflow: hidden;
   height: auto;
   width: auto;
 }
 #accessibility-shortcuts ul li {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 #accessibility-shortcuts ul li a {
   font-size: 0;
   display: block;
   padding: 0 20px;
 }
 #accessibility-shortcuts ul li.access-focus a {
   font-size: inherit;
 }
 #a11y-modal {
   padding-top: 58px;
 }
 #accessibility-button {
   background-color: transparent;
   /* For Approval to remove color | 
   this could be dynamic in custom menu font color3
   in header.php which is subject for approval*/
   color: #000;
 }
 #magnifier-button {
   background-color: transparent;
   /* For Approval to remove color | 
   this could be dynamic in custom menu font color3
   in header.php which is subject for approval*/
   color: #000;
 }
 
 .enlargeText {
   font-size: 1.5em;
   transition: 0.5s;
 }
 
 /**
  * 8.0 - Alignments
  */
 
 /**
  * 9.0 - Clearings
  */
 
 /**
  * 10.0 - Widgets
  */
 
 .textwidget {
   text-align: center;
 }
 .top-bar-right .search {
   padding: 0 20px;
   width: 195px;
 }
 #offCanvasRight input[type="search"],
 .top-bar-right input[type="search"] {
   height: 2.3125rem;
   border-radius: 0;
   font-size: 0.875rem;
   margin-bottom: 0px;
 }
 #pst-container {
   color: #000;
   font-family: "Roboto", sans-serif;
   font-size: 0.8rem;
   line-height: 1.2;
   text-align: right;
 } 

 #back-to-top {
   position: fixed;
   bottom: 2em;
   right: 0px;
   text-decoration: none;
   color: #ffffff;
   background-color: #111111;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   font-size: 0.75rem;
   padding: 1em;
   display: none;
   opacity: 0.6;
   /*transition: opacity .5s ease-in;
	 -moz-transition: opacity .5s ease-in;
	 -webkit-transition: opacity .5s ease-in;
	 -o-transition: opacity .5s ease-in;*/
 }
 #back-to-top:hover {
   opacity: 1;
   transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
   -webkit-transition: opacity 0.5s ease-out;
   -o-transition: opacity 0.5s ease-out;
 }

 
 /**
  * 11.0 - Content
  */
 
 h1.logo img {
   font-size: 1rem;
   height: 130px;
   object-fit: contain;
 }
 #main-content {
   padding: 2rem 0;
 }
 .off-canvas-content {
   box-shadow: none;
   background: #fff;
 }
 
 /*breadcrumbs*/
 .breadcrumbs {
   margin-top: 10px;
   background: #fcfcfc none repeat scroll 0% 0%;
   margin-bottom: 0.7rem;
   padding: 0.5625rem 0.875rem;
   overflow: hidden;
   border: 1px solid #f2f2f2;
   line-height: 0.6875rem;
   border-radius: 3px;
 }
 .breadcrumbs li {
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .breadcrumbs li:not(:last-child)::after {
   content: " ";
   margin: 0;
 }
 .breadcrumbs li:first-child::after {
   margin: 3px;
 }
 .breadcrumbs .separator {
   position: relative;
   top: 1px;
   opacity: 1;
   color: #cacaca;
   margin: 5px;
 }
 
 /*post content*/
 #content .entry-wrapper {
   vertical-align: top;
   display: inline-block;
 }
 #content .wp-post-image {
   margin: 0 15px 15px 0;
 }
 .entry-header {
   padding-bottom: 1.125rem;
   display: inline-block;
   vertical-align: middle;
 }
 .entry-wrapper .entry-content p {
   margin-bottom: 0;
 }
 
 
 /**
  * 11.1 - Header
  */
 
 /*masthead*/
 .container-masthead {
   margin-top: 58px;
   background-position: center;
 }
 .logo,
 .ear-content {
   margin: 20px 0px;
 }
 
 /* Custom mobile menus | Conflict or bug with Foundation6.7
 to prevent bug | need to setup custom menu from css
 this is for mobile menus */
 .sidenav {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: #f7f7f7;
   overflow-x: hidden;
   transition: 0.4s;
   padding-top: 60px;
 }
 
 .sidenav a {
   padding: 4px 4px 4px;
   text-decoration: none;
   font-size: 15px;
   color: rgb(59, 56, 56);
   display: block;
   transition: 0.3s;
 }
 
 .sidenav a:hover {
   color: #000;
 }
 
 .sidenav .closebtn {
   position: absolute;
   top: 0;
   right: 25px;
   font-size: 36px;
   margin-left: 50px;
 }
 #main {
   transition: margin-left 0.5s;
   padding: 16px;
 }
 
 @media screen and (max-height: 450px) {
   .sidenav {
	 padding-top: 15px;
   }
   .sidenav a {
	 font-size: 18px;
   }
 }
 /* End for mobile menus */
 
 /*masthead with text*/
 #textlogo-image {
   display: inline-block;
   width: 100px;
   height: 100px;
   vertical-align: middle;
 }
 #textlogo-image img {
   height: 100px;
   object-fit: contain;
 }
 #textlogo-inner-wrapper {
   display: inline-block;
   /* Change size for Agency name | default is 35-40px to be set to 27px or 18pt*/
   font-size: 27px;
   /* End of Agency name  */
   vertical-align: middle;
 }
 
 #agency-heading {
   display: block;
   position: relative;
   font-size: 1.06rem;
   text-transform: none;
 }
 #agency-name {
   display: block;
   position: relative;
   margin-top: 4px;
   text-transform: none;
   border-top: 2px solid;
   padding-top: 2px;
   line-height: 1;
 }
 #agency-tagline {
   display: block;
   position: relative;
   font-size: 1.06rem;
   margin-top: 5px;
   text-transform: none;
 }
 
 /*banner*/
 .container-banner {
   border-top: 1px solid #f2f2f2;
 }
 .container-banner .entry-title {
   text-transform: none;
   line-height: 1;
 }
 .banner-pads {
   padding: 15px 0 !important;
   margin: 0;
   /* border-bottom: 1px solid #f2f2f2; */
 }
 
 /* Added lines after the slider image as a separator */
 .line {
   display: inline-block;
   width: 100%;
   border-bottom: 1px solid #f2f2f2;
 }
 
 .orbit-container {
   height: auto !important;
 }
 .orbit-slide {
   max-height: 100% !important;
 }
 .orbit-bullets {
   margin: 0;
 }
 .orbit-bullets button {
   width: 1vw;
   height: 1vw;
   vertical-align: middle;
 }
 .orbit-slide-number {
   position: absolute;
   top: 3%;
   left: 1%;
   font-size: 0.75rem;
   color: white;
   background: rgba(0, 0, 0, 0);
   text-shadow: 1px 1px 3px #000;
 }
 .orbit-container .orbit-slide-number span {
   font-weight: 700;
   padding: 0.3125rem;
 }
 .orbit-button-controls {
   position: absolute;
   top: 0f;
   right: 0;
   color: white;
   text-shadow: 1px 1px 3px #000;
   padding: 10px 20px;
   z-index: 3;
   height: auto !important;
 }
 
 /**
  * 11.2 - Posts and pages
  */
 
 .entry-meta {
   font-size: 0.8em;
   color: #666;
 }
 
 /**
  * 11.3 - Post Formats
  */
 
 /**
  * 11.4 - Comments
  */
 
 /**
  * 11.5 - Sidebar
  */
 
 #panel-top .widget,
 #panel-bottom .widget,
 #footer .widget {
   padding: 1rem 0;
 }
 
 /**
  * 11.6 - Footer
  */
 
 /*post navigation*/
 .nav-previous {
   display: inline-block;
   font-size: 1rem;
   float: left;
 }
 .nav-next {
   display: inline-block;
   font-size: 1rem;
   float: right;
 }
 
 #footer {
   background: #e9e9e9;
   border-top: 1px solid #f2f2f2;
 }
 
 .img-responsive {
   max-width: auto;
   max-height: auto;
 }
 
 /**
  * 12.0 - Media
  */
 
 /* Make sure embeds and iframes fit their containers. */
 
 /**
  * 12.1 - Captions
  */
 .orbit-caption:empty {
   display: none;
 }
 
 /**
  * 12.2 - Galleries
  */
 
 /**
  * 13.0 - Multisites
  */
 
 /**
  * 14.0 - Media Queries
  */
 
 /**
  * Does the same thing as <meta name="viewport" content="width=device-width">,
  * but in the future W3C standard way. -ms- prefix is required for IE10+ to
  * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
  * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
  */
 @-ms-viewport {
   width: device-width;
 }
 
 @viewport {
   width: device-width;
 }
 
 /*Small screens*/
 
 /**
  * <= 360px
  */
 @media only screen and (max-width: 20em) {
   #agency-name {
	 font-size: 11.5vw !important;
   }
   .thumbnail {
	 width: 300%;
   }
 }
 
 /**
  * <= 481px
  */
 @media only screen and (max-width: 30.063em) {
   #agency-name {
	 /* Todo for improvement */
	 font-size: 6vw;
	 /* Todo for improvement -- end*/
   }
 }
 
 /**
  * <= 698px
  */
 @media only screen and (max-width: 43.625em) {
   h1.logo img {
	 font-size: 1rem;
	 height: 100px;
	 object-fit: contain;
   }
   #textlogo-image img {
	 height: 100px;
	 object-fit: contain;
   }
   #textlogo-wrapper {
	 text-align: center;
   }
   #textlogo-inner-wrapper {
	 margin-top: 10px;
   }
 }
 
 /*Medium screens*/
 
 /**
  * >= 699px
  */
 @media only screen and (min-width: 43.6875em) {
   #agency-name {
	 font-size: 3vw;
   }
   #textlogo-inner-wrapper {
	 margin-top: 10px;
	 margin: 15px 0 0 5px;
   }
   #textlogo-wrapper {
	 display: flex;
   }
 
   .flex-container {
	 display: flex;
 
   }
   .flex-container .entry-wrapper {
	 padding-left: 15px; 
   }
   .flex-container img{
	 width: 150px;
	 height: 145px;
	 object-fit:cover;   
   }
 }
 
 /**
  * 699px <=> 1024px
  */
 @media only screen and (min-width: 43.6875em) and (max-width: 64em) {
 }
 
 /**
  * <= 1023px
  */
 @media screen and (max-width: 63.9375em) {
   .container-masthead {
	 margin-top: 42px;
	 border-bottom: 1px solid #f2f2f2;
   }
   .banner-content {
	 padding: 1rem 0;
   }
 }
 
 /*Large screens*/
 
 /**
  * >= 1024px
  */
 @media only screen and (min-width: 64em) {
   #main-nav .top-bar-left .dropdown li ul,
   #aux-main .dropdown li ul {
	 -webkit-box-shadow: 6px 10px 10px -6px rgba(0, 0, 0, 0.5);
	 -moz-box-shadow: 6px 10px 10px -6px rgba(0, 0, 0, 0.5);
	 box-shadow: 6px 10px 10px -6px rgba(0, 0, 0, 0.5);
	 border: none;
   }
   #main-nav .top-bar-right .dropdown li ul {
	 -webkit-box-shadow: -6px 6px 10px -6px rgba(0, 0, 0, 0.5);
	 -moz-box-shadow: -6px 6px 10px -6px rgba(0, 0, 0, 0.5);
	 box-shadow: -6px 6px 10px -6px rgba(0, 0, 0, 0.5);
	 border: none;
   }
   .container-banner {
	 padding: 1rem 0;
   }
 }
 
 /**
  * 1025px <=> 1440px
  */
 @media only screen and (min-width: 64.0625em) and (max-width: 90em) {
   #agency-name {
	 font-size: inherit;
   }
 }
 
 /*XLarge screens*/
 
 /**
  * >= 1441px
  */
 @media only screen and (min-width: 90.063em) {
   #agency-name {
	 font-size: inherit;
   }
 }
 
 /**
  * 1441px <=> 1920px
  */
 @media only screen and (min-width: 90.063em) and (max-width: 120em) {
 }
 
 /*XXLarge screens*/
 
 /**
  * >= 1921px
  */
 @media only screen and (min-width: 120.063em) {
 }