/*!
Theme Name: kiba_itb_v2
Theme URI: https://www.linkedin.com/in/denyramandaa/
Author: Deny Ramanda
Author URI: https://www.linkedin.com/in/denyramandaa/
Description: Description
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: kiba_itb
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.

kiba_itb 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

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

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


/* Elements
--------------------------------------------- */


/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

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

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# 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;
}



/* reset */
#wpadminbar {
	display: none !important;
}
body {
	margin: 0 !important;
}
body, html, p {
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #333333;
}
div {
    box-sizing: border-box;
}
hr {
    border-top: 1px solid #ccc;
}
img {
    display: block;
    width: 100%;
}
a {
    text-decoration: underline;
}

.font-heading {
    font-family: 'Rubik', sans-serif;
}

.font-text {
    font-family: 'Lato', sans-serif;
}

footer {
    box-shadow: 0px -3px 4px rgb(0 0 0 / 15%);
}
.header {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}
.header--logo img{
    height: 90px;
}
.header__menu--list {
    margin-right: 40px;
}
.header__menu--list a {
    text-decoration: none;
}
.header__menu--list:last-child {
    margin-right: 0;
}
.header__search--input {
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    padding: 2px 12px;
}
.header__search--icon {
    width: 14px;
    height: 14px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.header__side {
    top: 0;
    right: 0;
    transition: transform .4s cubic-bezier(.46,.54,.17,1),-webkit-transform .4s cubic-bezier(.46,.54,.17,1);
    transform: translateX(100%);
}
.header__side.show {
    transform: translateX(0%);
}
.header__side--overlay {
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
}
.header__side--overlay.show {
    opacity: 1;
    visibility: visible;
    transition: all .4s linear;
    transition-delay: .3s;
}
.navigation--post .nav-links{
	display: flex;
}

.navigation--post .nav-links a, .navigation--post .nav-links span{
	margin: 0 4px;
	padding: 8px 16px;
	background-color: rgba(229,231,235,1);
	text-decoration: none;
}
.navigation--post .nav-links span{
	font-weight: bold;
}
.searchbox input{
    border: 1px solid #9f9f9f;
    border-radius: 4px;
    padding: 6px 10px;
    width: 200px;
}
.labelPostType {
	width: max-content;
    padding: 6px 8px;
    background: #dbdbdb;
    line-height: 1;
    display: block;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 14px;
	text-transform: capitalize;
}
.no-results.not-found {
	margin-top: 150px;
	margin-bottom: 150px;
    text-align: center;
}
/* mobile */
@media screen and (max-width: 768px) {
	.searchbox input {
		width: 150px;
		margin-right: 16px;
		padding: 4px 10px;
	}
    .header--logo img{
        height: 50px;
    }
    .header__menu--list li {
        margin-right: 0px;
        margin-bottom: 15px;
        padding-bottom: 10px;
		position: relative;
		width: 100%;
    }
    .header__menu--list li::before {
        content: '';
        position: absolute;
        width: 30%;
        height: 2px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        background-color: #bbbbbb;
    }
}

/* Masonry */
.masonry {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
    grid-auto-rows: 0;
}
.masonry-item {
    background-color: #eee;
    overflow: hidden;
}
.masonry-item a {
    display: block;
}

.masonry-item,
.masonry-item img {
    position: relative;
}

/* Swiper */
.swiper-button-prev, .swiper-button-next {
    background-size: cover;
    background-position: center;
}
.swiper-button-prev {
    background-image: url('assets/images/arr-left.png');
}
.swiper-button-next {
    background-image: url('assets/images/arr-right.png');
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: '';
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 0px;
    left: auto;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 0px;
    right: auto;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #6d6d6d;
}
.horizontal-ratio {
    /* padding-bottom: 56.25%; */
    padding-bottom: 60%;
}
.vertical-ratio {
    padding-bottom: 70%;
}
.box-ratio {
    padding-bottom: 100%;
}
.listing:last-child {
    margin: 0;
}
.listing-card-box-shadow {
    box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);
}
.partnership-img {
    width: auto;
    height: 85px;
}
.footer--image {
    height: 74px;
    width: auto;
}
.hide {
    padding: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* content start here */
.content p, .content h2, .content h3, .content h4 {
    margin-bottom: 32px;
}
.content p, .content div {
    font-size: 18px;
    line-height: 28px;
	margin-bottom: 30px;
}
.content img, .content figure {
    width: 100%;
    margin-bottom: 32px;
}
.content iframe {
    margin: 0;
    width: 100%;
}
.alpha::before {
	content: '';
	position: absolute;
	right: 10px;
    width: 10px;
    height: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url('assets/images/select-arrow.png');
	background-size: cover;
}
.modal-alpha {
	width: 200%;
	max-width: 180px;
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translate(-50%, 100%);
	z-index: 3;
	background: #fff;
	box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);
}
.alpha-array.active {
	background: #000;
    border-radius: 100%;
    color: #fff;
}
.masonry-desc {
	position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 20px 10px;
    display: flex !important;
	text-decoration: none;
    align-items: flex-end;
    height: 80%;
    background-image: linear-gradient(rgb(255 255 255 / 0%), #404040);
    color: #fff;
    font-size: 18px;
    text-shadow: 3px 2px 12px rgb(0 0 0 / 92%);
	opacity: 1;
	transition: all .25s linear;
}
.masonry-item:hover .masonry-desc{
	opacity: 1;
}
.arr-bottom {
    background-image: url(https://kibaitb.org/wp-content/uploads/2021/10/arr-bottom.png);
    width: 8px;
    height: 7px;
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-left: 4px;
}
.sub-menu {
    position: absolute;
    background: #ffff;
    box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 15%);
    width: 190px;
    padding: 10px 20px;
    top: 38px;
    left: 0;
}
/* desktop */
@media screen and (min-width: 768px) {
    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: -15px;
    }
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: -15px;
    }
    .partnership-img {
        height: 100px;
    }
	.masonry-desc {
		opacity: 0;
	}
}