/*
Theme Name: Artly
Theme URI: https://wordpress.com/theme/artly
Author: Automattic
Author URI: https://automattic.com/
Description: Artly is a WordPress theme designed for blogs and magazines. Its modern, offset layout for posts and pages comes in three style variations, allowing you to showcase your content in a visually stunning and functional way. With Artly, you can display your content beautifully and efficiently, all in a package that is easy to use and customize.
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 5.7
Version: 1.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: artly
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}
a:focus {
    outline: 1px solid;
}
.site-header {
    position: relative;
}
.padding {
	padding: 70px 0;
}
@media (max-width: 767px) {
    .site-header {
        padding-bottom: 1.5rem;
        padding-top: 1.5rem;
    }
}
.header-branding-area {
    padding-bottom: var(--wpi--verticle-spacing-medium);
    padding-top: var(--wpi--verticle-spacing-medium);
}

:where(.site-header-1, .site-header-2, .site-header-3).header-navigation-area {
    border-top: 3px solid var(--wpi--primary-bg-color);
    position: relative;
}

@media (min-width: 992px) {
    .site-header .sticky-header-active {
        background: var(--wpi--base-bg-color);
        border-bottom: 0.1rem solid var(--wpi--base-border-color);
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 999;
        width: 100%;
        -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, .08);
        box-shadow: 0 3px 16px rgba(0, 0, 0, .08);
        transition: padding 150ms linear;
    }

    .site-header .sticky-header-active,
    .site-header .sticky-header-active a:not(:hover, :focus) {
        color: var(--wpi--base-text-color);
    }

    .admin-bar .site-header .sticky-header-active {
        top: 3.2rem;
    }
}

.site-header .header-wrapper {
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wpi-gutter);
}

.header-components.header-components-left,
.header-components.header-components-right {
    align-items: center;
    flex: 0 0 auto;
    width: auto;
}

.site-header-1 .header-components.header-components-left {
    display: flex;
    gap: var(--wpi-gutter);
}

@media (min-width: 1025px) {
    .site-header-1 .site-header-desktop .header-components.header-components-left {
        flex: 1;
    }
}

.site-header-4 .header-branding-area .header-components-left,
.site-header-4 .header-branding-area .header-components-right {
    flex: 1;
}

.site-header-4 .header-branding-area .header-components-center {
    flex: 0 1 auto;
}

.site-header-4 .header-branding-area .header-components-right {
    text-align: right;
}

.header-components.header-components-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-components.header-components-center .site-branding {
    text-align: center;
}
.primary-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media (min-width: 1025px) {
    .primary-menu > li > a {
        display: flex;
        font-size: 1.8rem;
        font-weight: 700;
        gap: 0.5rem;
        padding: 3rem 1rem;
        position: relative;
    }

    .primary-menu > li.menu-item-has-children > a {
        padding-right: 1rem;
    }

    .primary-menu > li:hover > a,
    .primary-menu > li:focus > a,
    .primary-menu > li:focus-visible > a {
        color: var(--wpi--primary-bg-color);
    }

    .primary-menu > li.current-menu-item > a {
        color: var(--wpi--primary-bg-color);
    }
}
blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
    border: none;
    font-size: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
}
pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 1em;
    line-height: 1;
    margin-bottom: 1em;
    max-width: 100%;
    overflow: auto;
    padding: 1em;
}
{
  box-shadow: 0 2px 7px -4px rgba(0, 0, 0, .16);
    -moz-box-shadow: 0 2px 7px -4px rgba(0, 0, 0, .16);
    -webkit-box-shadow: 0 2px 7px -4px rgba(0, 0, 0, .16);
}
.entry-title a {
    background: -webkit-gradient(linear, left top, right top, from(currentColor), to(currentColor));
    background: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-size: 0 6%;
    background-repeat: no-repeat;
    background-position: left 100%;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
a:hover,
a:focus,
a:active {
    outline: 0;
}
a {
    text-decoration-style: underline;
}
a.comment-reply-link {
  border: 1px solid;
  padding: 5px 13px;
  border-radius: 40px;
  font-size: 13px;
  opacity: 0.6;
}
b,
strong {
	font-weight: bolder;
}
.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;
    position: absolute;
}
.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;
}
scroll-to-top {
	position: fixed;
	bottom: 53px;
	right: 30px;
	height: 45px;
	width: 45px;
	opacity: 0;
	visibility: hidden;
	z-index: 17;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--color-text);
	background-color: var(--body-bg);
	border: var(--retro-border);
	transition: var(--transition);
	font-size: var(--font-size-sm);
}
scroll-to-top:hover,
scroll-to-top:focus {
	color: #fff;
	background-color: var(--primary-color);
	box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.15);
	transform: translateY(-10px);
}
scroll-to-top.show {
	opacity: 1;
	visibility: visible;
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	opacity: 0.8;
}
button:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible,
.wp-block-search__button:focus-visible {
    outline: 0.1rem solid;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	opacity: 0.8;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	opacity: 0.8;
}
input, textarea {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
    .wp-block-post-comments textarea,
	line-height: var(--wp--custom--line-height--body);
	box-sizing: border-box;
	background-color: var(--wp--preset--color--surface-input);
	color: var(--wp--preset--color--text-secondary);
	border: 1px solid var(--wp--preset--color--border-input) !important;
	font-size: var(--wp--preset--font-size--text-xs) !important;
	line-height: var(--global--line-height-reset);
	padding: 0 calc(1.25rem - 2px);
	@include focus-visible;
	&::placeholder {
		color: var(--wp--preset--color--text-tertiary);
	}
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    background: none;
    border: 0.1rem solid var(--united-border-color);
    border-radius: 0;
    padding: 1.5rem 3rem;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="range"]:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="week"]:focus-visible,
input[type="time"]:focus-visible,
input[type="datetime"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="color"]:focus-visible,
textarea:focus-visible {
    border-color: var(--united-secondary-background);
    outline: none;
}
textarea {
    width: 100%;
  }
@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}
@media only screen and (max-width: 479px) {
	.site-title { font-size: 30px; }
	#footer { padding-left: 20px; padding-right: 20px; }
	
	.entry-header,
	.entry-content,
	.entry-footer { padding-right: 20px; padding-left: 20px; }
	
	.comments-nav .next,
	.comments-nav .prev { width: 100%; }
	
	.related-title { font-size: 14px; }
	
}
@media screen and (min-width: 600px) {
    body {
        --wp--preset--font-size--small: 16px;
        --wp--preset--font-size--midsmall: 18px;
        --wp--preset--font-size--medium: 20px;
        --wp--preset--font-size--moderate: 22px;
        --wp--preset--font-size--big: 35px;
        --wp--preset--font-size--bigger: 40px;
        --wp--preset--font-size--large: 45px;
        --wp--preset--font-size--x-large: 60px;
        --wp--preset--font-size--enormous: 70px;
        --wp--preset--font-size--bigbuttons: 70px;
    }
    .wp-block-buttons.is-content-justification-right.wwwows-wwwowsraltrue {
        align-items: flex-start;
}
@media only screen and (max-width: 767px) {
    .site-main .comment-navigation,
    .site-main .posts-navigation,
    .site-main .post-navigation {
        border: 0;
    }
}
@media (max-width: 782px) {
.search-modal-inner {
    background: var(--united-background-color);
    transform: translateY(-100%);
    transition: transform 0.15s linear, box-shadow 0.15s linear;
}
   }
@media screen and (max-width: 1024px) {
	#page-wrap { 
		width: 90%;
	}
	.post {
  }
@media screen and (min-width: 1024px){
	#page-wrap { 
		width: 900px;
		overflow: hidden;
	}
  }
.entry-content a:not(.button, .text-decoration-reset),
.entry-summary a:not(.button, .text-decoration-reset),
.entry-excerpt a:not(.button, .text-decoration-reset) {
    text-decoration: underline;
}
.search-modal {
    background: rgba(0, 0, 0, 0.2);
    display: none;
    opacity: 0;
    position: fixed;
    bottom: 0;
    right: -9999rem;
    top: 0;
    transition: opacity 0.2s linear, right 0s 0.2s linear;
    width: 100%;
    z-index: 999;
}

.admin-bar .search-modal.active {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .search-modal.active {
        top: 46px;
    }
}
.search-modal-inner {
    background: var(--wpi--base-bg-color);
    transform: translateY(-100%);
    transition: transform 0.15s linear, box-shadow 0.15s linear;
}
.search-modal-inner .search-modal-panel {
    padding-bottom: var(--wpi--verticle-spacing-large);
    padding-top: var(--wpi--verticle-spacing-large);
    position: relative;
}
.search-modal-inner .search-modal-form {
    display: flex;
    justify-content: space-between;
}
.search-modal.active {
    right: 0;
    opacity: 1;
    transition: opacity 0.2s linear;
}
.search-modal.active .search-modal-inner {
    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: transform 0.25s ease-in-out, box-shadow 0.1s 0.25s linear;
}
button.search-untoggle {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 0 2.5rem;
}
.search-modal button.search-untoggle {
    color: inherit;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
}
.search-modal.active .search-untoggle {
    animation: popIn both 0.3s 0.2s;
}
.search-modal form {
    margin: 0;
    position: relative;
    width: 100%;
}
.search-modal .search-field {
    font-size: 2rem;
    height: 8.4rem;
    width: 100%;
}
.search-modal .search-field::-webkit-input-placeholder {
    color: inherit;
}
.search-modal .search-field:-ms-input-placeholder {
    color: inherit;
}
.search-modal .search-field::-moz-placeholder {
    color: inherit;
    line-height: 4;
}
.search-modal .search-submit {
    position: absolute;
    right: -9999rem;
    top: 50%;
    transform: translateY(-50%);
}
.search-modal .search-submit:focus {
    right: 0;
}
.menu-modal {
    opacity: 1;
    justify-content: flex-end;
    padding: 0;
    transition: background-color 0.3s ease-in, left 0s 0.3s, right 0s 0.3s;
}
.menu-modal.active {
    background: rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-out;
}
.menu-wrapper {
    flex-grow: 1;
}
.menu-modal-inner {
    max-width: 64rem;
    opacity: 0;
    transform: translateX(50rem);
    transition: transform .2s ease-in, opacity .2s ease-in;
}
.menu-modal.active .menu-modal-inner {
    opacity: 1;
    transform: translateX(0);
    transition-timing-function: ease-out;
}
.categories-section-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    justify-content: center;
    overflow: hidden;
}
.categories-section-content,
.categories-section-content a:not(:hover, :focus) {
    color: #fff;
}
.categories-section-content .wpi-category-panel {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    overflow: hidden;
    position: relative;
}
.categories-section-content .wpi-category-panel:before {
    content: '';
    display: block;
    padding-bottom: 42rem;
}
.entry-category-image .post-thumbnail:before {
    content: '';
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(to top, #1a1919e3, transparent);
    width: 100%;
    height: 100%;
    z-index: 1;
}
.entry-category-image a {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #e7e7e7e7;
    overflow: hidden;
}
.entry-category-image a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.entry-category-details {
    position: absolute;
}
.category-details-vertical {
    bottom: var(--wpi-gutter);
    right: 0;
    writing-mode: vertical-lr;
    text-align: right;
    transform: translate(0, 0);
    z-index: 1;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}
.category-details-vertical .entry-category-title {
    margin: 0;
}