/*
Theme Name: cizzy
Theme URI: https://btsa.de/wp_themes/cizzy
Author: BTSA
Author URI: http://btsa.de/
Description: cizzy theme
Version: 1.0.4
Tags: translation-ready
Text Domain: cizzy
*/


@import url('_res/fonts/Montserrat/stylesheet.css');

* { box-sizing: border-box; }

html {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

body
{
    background-color: #ff00ff;
    color: #00F;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.2em;
}
h2 {
    font-size: 1.8em;
}
h3 {
    font-size: 1.5em;
}

.container {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.align-items-center {
	align-items: center !important;
}

p:empty { 
    margin-bottom: 0;
}

.bg-1
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('_res/cizzy-noise-l-all-s.png');
    background-size: auto 900px;
    z-index: -1000;
    overflow: hidden;
    cursor: none;
}

.blink {
    display: block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('_res/blink-2.png');
    background-size: cover;
    position: absolute;
    cursor: none;
}

.page-main {
    position: relative;
    padding-top: 1em;
}

.logo {
    width: 360px;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 1em auto 1em 0;
    position: absolute;
    top: 0;
    left: 0;
}
.logo-k {
    width: 137px;
    height: auto;
    display: block;
    margin: 42px auto 1em 40px;
}

#headerNavbar
{
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background-color: #ff00ff;
    text-align: center;
    overflow-y: scroll;
}
.show-navbar #headerNavbar
{
    display: block;
    background-image: url('_res/c.svg');
    background-repeat: no-repeat;
    background-position: 1em 1em;
    background-size: 3em;
}
.btn-menu
{
    display: block;
    font-size: 1em;
    line-height: 1;
    padding: 2em 2em;
    color: #fe0000;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1001;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='%23ff00ff' stroke-linecap='square' stroke-miterlimit='10' stroke-width='3' d='M4 5h22M4 15h22M4 25h22'/%3E%3C/svg%3E");
    height: 3em;
    background-repeat: no-repeat;
    background-position: center center;
}
.show-navbar .btn-menu {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='%23ff00ff' stroke-linecap='square' stroke-miterlimit='10' stroke-width='3' d='M4 4l22 22M26 4l-22 22'/%3E%3C/svg%3E");
}
.admin-bar  .btn-menu {margin-top: 32px;}

ul.main-menu  {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    padding: 5em 0;
}

.main-menu a {
    display: block;
    font-size: 2em;
    line-height: 1;
    padding: .5em 1em;
    color: #fe0000;
    text-decoration: none;
    background-color: #ff00ff;
    transition: all 0.8s;
}
.btn-menu,
.show-navbar.single-cizzy_work .main-menu .menu-item-type-post_type_archive.menu-item-object-cizzy_work a,
.show-navbar .main-menu .current-menu-item a,
.show-navbar .main-menu .current_page_item a
{
    background-color: #fe0000;
    color: #ff00ff;
}
.main-menu a:hover
{
    background-color: #00F;
    color: #ff00ff;
}

.works-index {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1600px;
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 1px;
}
.home .works-index { padding-top: 250px; } 
.works-index > *:not(".fixed") {
    padding: 0;
    background-color: #fff; 
    color: #000;
    transition: .1s transform ease;
}
.works-index img {
    width: 100%;
    height: auto;
    max-width: 300px;
    max-height: 300px;
    display: block;
}
.logo-spacer {
    width: 300px;
    max-width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}     
.logo-spacer:before {
    content: '';
    padding-bottom: 100%;
    display: block;
}

.page-main.logo-large .container:first-of-type:before {
    content: '';
    height: 490px;
    display: block;
    width: 400px;
    max-width: 100%;
    float: left;
}

.page-main.logo-small {
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
} 
.admin-bar .page-main.logo-small {
	min-height: calc(100vh - 32px);
}

.page-main.logo-small > .main-cont {
    flex-grow: 100;
}
.page-main.logo-small > .container,
.page-main.logo-small > .main-cont > .container {
    width: 740px;
    max-width: 100%;
    margin: 0 auto;
	z-index: 50;
  	position: relative;
}
.main-cont .children.works-index {
    margin-top: 4em;
}

.page-main.logo-small h1.entry-title {
	margin-top: 0;
}

.entry-title a,
.parent-title a
{
    text-decoration: none;
    color: inherit;
}
.entry-content  > :not(:empty):not(figure):not(iframe):not(.wp-block-columns) {
    background-color: #ff00ff;
    padding: .5em 1em;
}
.entry-content  > figure
{
    border: 1em solid #ff00ff;
	background-color: #ff00ff;
}

.entry-content ul, .entry-content ol
{
	padding-left: 2em !important;
}

.entry-content >:first-child { margin-top: 0; }
.entry-content >:last-child { margin-bottom: 0; }


embed, iframe, object {
    max-width: 100%;
    width: 100%;
    display: block;
}

.wp-block-embed.wp-has-aspect-ratio iframe,
.wp-block-embed.is-type-video iframe 
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper,
.wp-block-embed.is-type-video .wp-block-embed__wrapper 
{
      position: relative;
      display: block;
      width: 100%;
      padding: 75% 0 0 0;
      overflow: hidden;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
    padding-top: 56.25%;
}

/*
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
      display: block;
      content: "";
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
    padding-top: 56.25%;
}
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
    padding-top: 75%;
}
*/
    
.post-navigation .nav-links {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.post-navigation .nav-links a {
    display: block;
    font-size: 1.7em;
    line-height: 1;
    padding: .5em 1em;
    color: inherit;
    text-decoration: none;
}
.post-navigation .nav-links .entry-title {
    display: none;
}

@media only screen and (min-width: 500px) {
    ul.main-menu  {
        align-items: stretch;
    }
}
@media only screen and (min-width: 900px) {
    .home .works-index {
        padding-top: 200px;
    }       
    .works-index img {
        max-width: 440px;
        max-height: 440px;
    }
    .logo-spacer +* img {
        max-width: 550px;
    }    
}
@media only screen and (min-width: 1300px) {
    .home .works-index {
        padding-top: 250px;
    }       
    .home .works-index img {
        max-width: 550px;
        max-height: 450px;
    }
    .home .works-index img[data-oversize="1"] {
        max-width: 650px;
        max-height: 550px;
    }
    .home .works-index img[data-oversize="2"] {
        max-width: 750px;
        max-height: 650px;
    }
    .home .logo-spacer +* img {
        max-width: 750px;
    }
    .logo-k {
        position: fixed;
        top: 1em;
        left: 0;
    }
    .page-main.logo-small {
        padding-top: 185px;
    }
    .post-navigation {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}

@media only screen and ((min-height: 900px) or (min-width: 1599px)) {
    .bg-1 {
        background-size: cover;
    }
}

@media only screen and ((min-width: 3198px) or  (min-width: 1600px)) {
    .bg-1 {
        background-image: url('_res/cizzy-noise-l-all-big.png');
    }
}