/*!
Theme Name: Purzelbaum by th media
Theme URI: http://underscores.me/
Author: Tobias Horstmann
Author URI: https://tobias-horstmann.de
Description: A responsive theme based on underscores.
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: th_theme
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.

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


@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/ubuntu_300.woff2) format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ubuntu_500.woff2) format('woff2');
}


/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}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:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*,::before,::after{box-sizing:inherit}html{box-sizing:border-box}
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
html{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: 16px;scroll-behavior: smooth;}
body,button,input,select,optgroup,textarea {
	color: #404040;
	font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.4;
    font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
	clear: both;
    font-weight: 500;
}
p {
	margin: 0 0 1.3em;
}


/* Variables
--------------------------------------------- */
:root{
	--themeColor: #f47e00;
	--navColor: #fff;
	--navBG: #f47e00;
    --unit:30px;
    --contentWidth:61.8vw;
    --contentPadding:calc((100vw - var(--contentWidth)) / 2);
    --imgWidth:calc(var(--contentWidth) / 2);
    --textWidth:var(--imgWidth);
    --transition: 500ms cubic-bezier(0.83, 0, 0.17, 1);
}


/* Elements
--------------------------------------------- */
body {
	background-color: var(--themeColor);
}
body.contentInView {
    --navColor:#404040;
}
img {
    max-width: 100%;
    height: auto;
}

img.lazyload {
	opacity: 0;
	transform: scale(0.8);
	border-radius:5px;
}

img.lazyloaded {
	opacity: 1;
	transform: scale(1);
	transition: var(--transition);
	border-radius:5px;
}

.admin {
	position:fixed;
	left:0;
	top:0;
	z-index:900;
	line-height:1em;
}
.admin a {
	display:inline-block;
	padding:0.2em;
	font-size:1.5em;
	line-height:1em;
	text-decoration:none;
	color:#fff;
	background-color:var(--themeColor);
}
.admin a:hover {
	background-color:#fff;
	color:var(--themeColor);
}
.admin a svg {
	height: 1em;
	width: auto;
}
.admin a svg path {
	fill:currentColor;
}
header {
    position: fixed;
    top:0;
    left:0;
    z-index: 5;
    height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    transition: var(--transition);
}
.textwrap a {
	color:var(--themeColor)
}

.navtoggle {
    display: none;
}
#start object {
    width: var(--contentWidth);
    margin: 1em auto 1em;
}
header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
header nav ul li {
    margin: 0;
    padding: 0;    
}
header nav ul li a {
    display: block;
    padding: var(--unit);
    text-decoration: none;
    color: var(--navColor);
}
header nav ul li a svg {
	fill:currentColor;
	height:1em;
	width:auto;
	display:inline-block;
}
header nav ul li a.active {
    text-decoration: underline;
    color: var(--themeColor);
}
main {
    position: relative;
    margin: 1em auto 0;
    z-index: 1;
}
main article {
    display: flex;
    flex-flow: row wrap;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: #fff;
    margin: 0 auto;
    padding: var(--unit) 0;
}
main article#start {
    background-color: transparent;
    color:#fff;
    min-height: calc(100vh - 1em);
}
main article .subpage {
    display: flex;
    flex-flow: row wrap;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: #fff;
    margin: 0 auto;
}
main article:nth-child(even),
main article .subpage:nth-child(even) {
    flex-flow: row-reverse wrap;
}
main article:nth-child(even) > .imgwrap,
main article .subpage:nth-child(even) .imgwrap {
    margin-left: var(--unit);
    margin-right: var(--contentPadding);
}
main article:nth-child(odd) > .imgwrap,
main article .subpage:nth-child(odd) .imgwrap {
    margin-right: var(--unit);
    margin-left: var(--contentPadding);
}
main article:nth-child(even) > .textwrap,
main article .subpage:nth-child(even) .textwrap {
    margin-left: var(--contentPadding);
}
main article:nth-child(odd) > .textwrap,
main article .subpage:nth-child(odd) .textwrap {
    margin-right: var(--contentPadding);
}
main article .imgwrap {
    display: block;
    width: calc(var(--imgWidth) - var(--unit));
}
main article .textwrap {
    display: block;
    width: calc(var(--textWidth) - var(--unit));
}
main article .imgwrap img{
    display: block;
    width: 100%;
	border-radius:5px;
}
main article .imgwrap .gallery {
    --galCols: 4;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
}
main article .imgwrap .gallery a{
    display: block;
    width: calc((100% - var(--unit)) / var(--galCols));
    margin-bottom: calc(var(--unit) / var(--galCols));
}
main article .imgwrap .gallery a img{
    display: block;
    width: 100%;
    height: auto;
	border-radius:5px;
}

.fancybox-slide--complete .fancybox-content .fancybox-image {
	border-radius:5px;
}

main article h1,
main article h2 {
    width: 100%;
    text-align: center;
    font-size: 3rem;
    margin: 0 0 0.5em;
	flex-shrink:0;
	flex-grow:0;
}
main article#start h1 {
    width: 100%;
    text-align: left;
    font-size: 1.5rem;
}

.team {
    display: flex;
    width: calc(100% - (var(--contentPadding)*2));
	flex-flow:row wrap;
	justify-content:space-between
}
.team .person {
    display: block;
    width: calc(100% / 3 - ((var(--unit) * 2) / 3));
}
.team .person .inner {
	padding:0 0 var(--unit);
}
.team .person .inner h3 {
	padding:0;
	margin:0;
}

footer {
	padding:var(--unit);
	position:relative;
	z-index:9999;
}

footer nav ul {
	margin:0;
	padding:0;
	list-style:none;
}

footer nav ul li {
	margin:0;
	padding:0;
	display:inline-block;
}

footer nav ul li a {
	display:block;
	padding:0.5em;
	text-decoration:none;
	color:#fff;
}

.littlebird {
    position: fixed;
    right: 0;
    top:65vh;
    text-decoration: none;
    z-index: 50;
}
.littlebird .svg {
    height: 2em;
    width: auto;
    display: block;
    will-change: transform;
}
.littlebird .svg svg {
    height: 2em;
    width: auto;
    display: block;
    will-change: transform;
}
.littlebird:hover .svg svg {
    animation: bounce 0.5s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: infinite;
}
          
@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -5px, 0);
    }
}
.littlebird svg path {
    fill: var(--navColor);
}
.littlebird > span:last-child {
    display: block;
    color: var(--themeColor);
    background-color: var(--navColor);
    padding: 0.5em;
    border-radius: 5px 0 0 5px;
    font-size: 0.8em;
}

@media screen and (max-height:800px){
	body, button, input, select, optgroup, textarea {
		line-height: 1.3;
	}
	#start object {
		width: calc(var(--contentWidth) * 0.6);
		margin: 1em calc(var(--contentWidth) * 0.4) 1em 0;
	}
}

@media screen and (max-width:1400px){
    :root{
        --contentWidth:75vw;
        --imgWidth:calc((var(--contentWidth) / 7) * 3);
        --textWidth:calc((var(--contentWidth) / 7) * 4);
    }
}
@media screen and (max-width:1024px){
    :root{
        --contentWidth:90vw;
        --imgWidth:calc((var(--contentWidth) / 7) * 3);
        --textWidth:calc((var(--contentWidth) / 7) * 4);
    }
    
    header {
        transform: translateX(-120%);
        will-change: transform;
        background-color: var(--themeColor);
        color:#fff;
    }
    header.open {
        transform: translateX(0);
    }
    .navtoggle {
        display: block;
        position: fixed;
        top:0;
        left:0;
        padding: var(--unit);
        color:var(--navColor);
        z-index: 51;
    }
    
    .littlebird {
        top:var(--unit);
    }
    .littlebird > span span {
        display: none;
    }
    .littlebird .svg {
        height: 2em;
        width: 2em;
        display: block;
        will-change: transform;
        transform: rotate(-90deg);
        position: absolute;
        left: 0;
        margin-left: -2em;
    }
}
@media screen and (max-width:800px){
    :root{
        --contentWidth:90vw;
        --imgWidth:100%;
        --textWidth:100%;
    }
    main article {
        flex-flow: column wrap;
    }
    
    main article .imgwrap {
        width: calc(var(--imgWidth) - var(--unit)*2);
        margin: 0 auto!important;
    }
    main article .textwrap {
        width: calc(var(--textWidth) - var(--unit)*2);
        margin: 0 auto!important;
    }
}