/*!
Theme Name: Pangasinan Database
Theme URI: http://underscores.me/
Author: Metapixel Inc.
Author URI: http://www.metapixel.com.ph
Description: Wordpress theme for Pangasinan Database
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pangasinan-database
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Pangasinan Database is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Khand:wght@400;700&family=Poppins:wght@400;500;700&display=swap');

body,
button,
input,
select,
optgroup,
textarea {
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	color: #666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Khand", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: var(--blue);
	color: #333;
}

.dataTables_wrapper {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

/* Elements
--------------------------------------------- */
:root {
	--red: #d60000;
	--blue: #0038a7;
	--yellow: #ffc80c;
}


body {
	background: #333;
}

img {
	height: auto;
	max-width: 100%;
}


/* Links
--------------------------------------------- */
a {
	color: var(--blue);
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
}

/* Links
--------------------------------------------- */
a {
	color: var(--blue);
}

a:hover,
a:focus,
a:active {
	color: var(--red);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
#masthead {
	flex-basis: 300px;
	min-width: 300px;
	background-color: #333;
	color: #aaa;
}

#masthead a {
	color: #ccc;
}

.flex-layout {
	display: flex;
	background-color: #eee;
	min-height: 100vh;
}

.sticky-container {
	position: sticky;
	top: 0;
	border-radius: 10px;
	padding-top: 30px;
}

.site-branding {
	padding: 0 30px 50px;
}

.custom-logo-link {
	display: block;
}

.site-title {
	margin: 0;
}

#masthead h1.site-title a,
#masthead p.site-title a {
	font-family: "Khand", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2.5rem;
	line-height: 1em;
	color: #fff;
}

.site-description {
	font-size: 20px;
}

#mobile-header {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 80px;
	padding: 20px;
	text-align: center;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 99997;
	transition: all 0.5s ease;
}

.mobile-site-branding {
	display: inline-block;
}

.mobile-site-branding .custom-logo-link {
	display: inline-block;
}

#mobile-header .mobile-site-branding .custom-logo-link img {
	height: 40px;
	width: auto;
	transition: all 0.5s ease;
}

#mobile-header.scrolled {
	height: 60px;
	padding: 15px 20px;
}

#mobile-header.scrolled .mobile-site-branding .custom-logo-link img {
	height: 30px;
}

.mobile-cart-contents {
	float: right;
}

#content-wrapper {
	flex-basis: 100%;
}

#content {
	position: relative;
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	display: inline-flex;
	flex-direction: row;
	min-width: 50%;
}

.site-main {
	padding: 30px;
	min-width: 100px;
	flex-basis: 0px;
	flex-grow: 1;
}

.header-title {
	padding: 0 0 30px 0;
}

.site-title-none {
	font-size: 0;
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
	position: absolute!important;
	border: 0!important;
	padding: 0!important;
	margin: 0!important;
	clip: rect(1px,1px,1px,1px);
}

.social-media-links {
	margin-top: 50px;
}

.social-media-links span {
	display: block;
	color: #333;
}

.social-media-links a {
	display: inline-block;
	margin: 10px 7px 0;

}

.mobile-navigation .social-media-links {
	display: inline-block;
	margin-left: 50px;
	padding: 20px;
	border-radius: 10px;
	background-color: #fff;
	text-align: center;
}

#colophon {
	padding: 30px;
	text-align: center;
}

.footer-logo {
	padding-bottom: 15px;
}

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
	font-weight: 500;
}

.main-navigation ul {
	list-style: none;
	margin: 0 0 30px;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {	
	display: block;
	position: relative;
}

.main-navigation li:nth-child(odd) {
	background-color: #373737;
}

.main-navigation li:nth-child(even) {
	background-color: #3b3b3b;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	padding: 10px 30px;
	color: #ccc;
	transition: all 0.4s ease;
}

#masthead .main-navigation a:hover,
#masthead .main-navigation a:focus {
	background-color: #aaa;
	color: #000;
}

/*--------------------------------------------------------------
## Mobile Menu
--------------------------------------------------------------*/
.mobile-navigation-button {
	display: none;
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	z-index: 99999;
	-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
}

.hamburger {
	display: inline-block;
	position: relative;
	width: 50px;
	height: 50px;
	padding: 0;
	z-index: 99999;
	vertical-align: top;
}

.hamburger:hover {
	opacity: 1;
}

.hamburger:focus {
	outline: 0;
}

.hamburger-box {
	position: absolute;
	top: 50%; left: 50%;
	margin-top: -12px;
	margin-left: -17px;
	width: 34px;
	z-index: 10;
}

.hamburger .hamburger-inner, 
.hamburger .hamburger-inner::after, 
.hamburger .hamburger-inner::before {
	background: var(--red);
	width: 34px;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}

.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner::after, 
.hamburger.is-active .hamburger-inner::before {
	background: #fff;
	width: 34px;
}

.mobile-navigation {
	display: none;
	position: fixed;
	top: 100%; right: 100%;
	width: 100%;
	height: 100%;
	z-index: 99998;
	padding: 100px 30px 80px 30px;
	text-align: left;
	background: rgb(214,0,0);
	background: linear-gradient(308deg, rgba(214,0,0,0.9) 0%, rgba(0,56,167,0.9) 100%);
	-webkit-transition: right 0.4s ease, opacity 0.4s ease, top 0s ease 0.4s;
			transition: right 0.4s ease, opacity 0.4s ease, top 0s ease 0.4s;
}

.mobile-navigation.open {
	top: 0; right: 0%;
	-webkit-transition: right 0.4s ease, opacity 0.4s ease, top 0s ease 0s;
			transition: right 0.4s ease, opacity 0.4s ease, top 0s ease 0s;
}

.mobile-navigation ul {
	padding: 0;
	margin: 0 0 0 40px;
	list-style: none;
}

.mobile-navigation ul li {
	display: block;
	position: relative;
}

.mobile-navigation ul li a {
	position: relative;
	display: inline-block;
	padding: 5px 10px;
	margin: 0 0 10px;
	color: #fff;
	font-size: 24px;
	line-height: 1em;
	vertical-align: middle;
	text-decoration: none;
	-webkit-transition: all 0.4s ease 0s;
			transition: all 0.4s ease 0s;
}

.mobile-navigation ul li a:hover,
.mobile-navigation ul li a:focus {
	text-decoration: none;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon {
	position: absolute;
	box-sizing: border-box;
	display: block;
	top: 0; left: -40px;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.2);
	color: #fff;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon.open {
	transform: rotate(90deg);
}

.mobile-navigation ul li.focus > a,
.mobile-navigation ul li:hover > a,
.mobile-navigation .cart-contents:hover,
.mobile-navigation ul li.current_page_item.focus > a,
.mobile-navigation ul li.current-menu-item.focus > a,
.mobile-navigation ul li.current_page_ancestor.focus > a,
.mobile-navigation ul li.current-menu-ancestor.focus > a,
.mobile-navigation ul li.current_page_item > a,
.mobile-navigation ul li.current_page_ancestor > a,
.mobile-navigation ul li.current-page-parent > a,
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-ancestor > a,
.mobile-navigation ul li.current-menu-parent > a,
.mobile-navigation ul li.current-post-ancestor > a,
.mobile-navigation ul li.current-post-parent > a {
	color: #fff0bd;
}

/* Posts and pages
--------------------------------------------- */
.child-page a {
	position: relative;
	display: block;
	height: 100%;
	padding: 20px 20px 20px 40px;
	border-radius: 10px;
	box-shadow: 0 0 10px #ddd;
	transition: all 0.2s ease;
	overflow: hidden;
}

.child-page a:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 20px;
	height: 100%;
	background-color: #666;
	z-index: 0;
	transition: all 0.4s ease;
}

.child-page a h3 {
	position: relative;
	margin: 0;
	transition: all 0.4s ease;
	font-weight: 400;
	z-index: 1;
}

.child-page a:hover:before,
.child-page a:active:before,
.child-page a:focus:before {
	width: 100%;
}

.child-page a:hover h3,
.child-page a:active h3,
.child-page a:focus h3 {
	color: #fff;
}

/* Comments
--------------------------------------------- */


/* Widgets
--------------------------------------------- */


/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

#table_1_info {
	font-size: 20px;
	margin: 15px 0;
}

.wpdt-c.wdt-skin-aqua .wpDataTablesWrapper {
	padding: 16px 0 !important;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}



@media screen and (max-width: 1200px) {
	#masthead {
		display: none;
	}
	#mobile-header,
	.mobile-navigation,
	.mobile-navigation-button {
		display: block;
	}
	.flex-layout {
		padding-top: 110px;
	}
}