theme.css

/*
 * Theme Name:		GWT-Wordpress 26.0.0 - Latest
 * Theme URI:		https://i.gov.ph
 * 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.
 *                  Updated by NGP and GOSD-GWHS
 * Version:			26.0.0
 * Author:			iGovPhil
 * Author URI:		https://i.gov.ph
 * License:			MIT License
 * License URI:		https://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
 */

/**
 * 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
 */

.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
 */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
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;
  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;
}

/* To be remove */
/* .fa-universal-access {
  color: #000;
} */
/* End to be remove */

.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) {
}