/*
Theme Name: ralfzumstein 2021
Theme URI: none
Author: Rolf Fleischmann
Author URI: http://vol-2.com
Description: Built from blankslate
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
*/



html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

.hidden {
	display:none;
}

.relative {
	position: relative;
}

:root {
  --spot-color: #3D84AA;
	--black: #222222;
	--grey: #888888;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

@font-face {
	font-family: 'CG-Web';
	src: url('CG.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'CG-Web';
	src: url('CGBold.woff') format('woff');
	font-weight: bold;
	font-display: swap;
}


html {
	overflow-y: scroll;
	
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

html, body {
	font-family: 'CG-Web', sans-serif;
	font-size: 12px;
	line-height: 1.9;
}

body {
	letter-spacing: 2px;
	color: var(--black);
	padding: 40px 28px 20px 28px;
	-webkit-font-variant-ligatures: no-common-ligatures;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

a {
	color: var(--grey);
	text-decoration:none;
}

a:hover {
	color: var(--spot-color);
}

b,strong {
	font-weight: bold;
}

p {
	margin: 1.2em 0;
}


p:first-child {
	margin-top: 0;
}

h2 {
	text-transform: uppercase;
	color: var(--black);
	font-weight: bold;
}

.cat-nav li {
	font-size: 14px;
	line-height: 1.6;
	text-transform: uppercase;
}

p+h2 {
	margin-top: 3em;
}

.siteTitles,
.contentBody,
.cat-nav {
	display:block;
	max-width: 726px;
	margin: 0 auto;
}

.main-nav,
.footer-column {
	font-size: 10px;
}

.contentBody {
	position: relative;
}

/* site header */

.siteTitles {
	height: 7em;
}

.siteTitles h1 {
	text-transform: uppercase;
	text-align: right;
}

.siteTitles a {
	-webkit-tap-highlight-color: transparent;
}

.siteTitles .name {
	margin-right: -0.1em;
	font-size: 10px;
}

.siteTitles .name span {
	display:block;
	color: var(--grey);
	font-weight: bold;
	letter-spacing: 0.13em;
}

.home .siteTitles .name span {
	color: var(--spot-color);
}

.siteTitles .name .firstLine {
	font-size: 2em;
	line-height: 1.1;
	margin-right: -0.1em;
}

.safari .siteTitles .name .firstLine {
	letter-spacing: 0.15em;
}

.siteTitles .name .secondLine {
	font-size: 1.45em;
}

.siteTitles .header-icon {
	position: absolute;
	width: 70px;
	margin-left: -12px;
	margin-top: -13px;
}

.siteTitles .header-icon svg {
	fill: var(--grey);
}

.home .siteTitles .header-icon svg {
	fill: var(--spot-color);
}

.columns {
	margin-top: 1em;
}

.home .columns {
	display:flex;
	flex-direction: column;
}

.home .columns article {
	flex-grow:1;
}

.entryTitle,
.page .entry-title {
	display:none;
}

.entryContainer {
	position: relative;
	width: 100%;
}

.page .attachImages img,
.entry img,
.fullImages img {
	width: auto;
	height: auto;
	max-width: 100%;
	display:block;
}

.page .attachImages img {
	margin-bottom: 10px;
	margin-right: 10px;
	width: auto;
}

.page .attachImages img.landscape {
	width: 100%;
}

.slidesBlock.single {
	pointer-events:none;
}


.imageContainer img {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	width: 100%;
}

.imageContainer img.portrait {
	width: auto;
}


.imageContainer figcaption {
	margin-top: 16px;
}


.home .fullImages {
	cursor:pointer;
}

.page .page-text-entry .imageContainer:first-of-type {
	margin-top: 30px;
}

.single-projekte .fullImages img {
	margin-bottom: 16px;
}

.single .fullImages {
	cursor:default;
}

.thumbImages {
	display:none;
}

.imageCaption {
	margin-bottom: 30px;
}

.page.mobile .imageCaption,
.single.mobile .imageCaption {
	margin-top: 6px;
}

.slideButton {
	display:none;
}


.fullImages.single {
	cursor:default;
}

/* footer nav */


.footer-column {
	color: var(--grey);
	text-align: right;
}

.footer-column .footer-nav {
	text-transform: uppercase;
	margin-bottom: 1.2em;
}


/* nav */

.main-nav {
	display:block;
	margin: 0 auto;
	max-width: 726px;
	height: 40px;
}

.main-nav ul li {
	text-transform: uppercase;
	position: relative;
	float:left;
	margin-right: 40px;
}

.main-nav ul li:nth-child(3) {
	float:right;
	margin-right: 0;
}

.main-nav ul li:nth-child(2) {
	margin-right: 0;
}


/* next previous nav */

.pagesNav {
	position: absolute;
	top: 205px;
	right: 0;
	top: -104px;
}


.pageNavLabel {
	position:relative;
	display:block;
	font-size: 14px;
	margin: 11px 0 0 1px;
	width: 57px;
	white-space: nowrap;
	overflow: visible;
	text-align: center;
}

.pageNavItem,
.pageNavLabel {
	display:block;
	float:left;
}


.pageNavItem a {
	display:block;
	position: relative;
	width: 20px;
	height: 40px;
}

.pageNavItem svg {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -5px 0 0 -8px;
}

.pageNavitem svg,
.pageNavItem polygon {
	fill: var(--grey) !important;
}

.pageNavItem a:hover svg,
.pageNavItem a:hover polygon {
	fill: var(--spot-color) !important;
}


body.single-projekte .pageNavItem svg,
body.single-projekte .pageNavItem polygon {
	fill: #222222 !important;
}



.cat-nav {
	margin-bottom: 25px;
}

nav li.active a {
	color: var(--spot-color);
	font-weight:bold;
}



/*   tabets and higher   */
@media (min-width: 800px) {
	
	
	body {
		padding-top: 45px;
	}
	
	.siteTitles {
		height: 9rem;
	}
	
	.siteTitles .header-icon {
		position: absolute;
		top: 40px;
		width: 88px;
		margin-left: -16px;
		margin-top: 0;
	}
	
	.siteTitles .name {
		font-size: 1.1rem;
		margin-top: 11px;
	}
	
	.macintosh.safari .siteTitles .name .firstLine {
		letter-spacing: 0.14em;
	}
	
	.main-nav,
	.footer-column {
		font-size: 10px;
	}
	
	.columns,
	.home .columns {
		display:flex;
		flex-direction: row;
	}

	.slidesBlock {
		margin-bottom: 1.7rem;
	}

	.main-nav ul li:nth-child(2) {
		margin-right: 40px;
	}
	
	.main-nav ul li:nth-child(3) {
		float: left;
	}
	
	.page-template-projekte .fullImages {
		display:none !important;
	}
	
	.page .fullImages {
		margin-bottom: 20px;
	}
	
	.page .narrow-slides .fullImages img.portrait {
		max-height: 360px;
	}

	.imageContainer {
		visibility:hidden;
	}

	.imageContainer.slick-slide {
		visibility:visible;
	}
	
	.narrow-slides {
		max-width: 540px;
	}
	
	body.single .slick-slide img {
		opacity: 0;
		transition: opacity 0.5s ease;
		width: auto;
	}
	
	body.single .slick-active img {
		opacity: 1;
	}
	
	.entry img,
	.fullImages img {
		max-height: 484px;
	}
	
	.page .attachImages img.landscape {
		height: auto;
		max-width: 390px;
	}

	.page .attachImages img.portrait {
		max-height: 260px;
		width: auto;
	}	
	
	.home .contentBody article,
	.single .contentBody article,
	.page .contentBody article,
	.emptyArticle {
		width: 75%;
	}
	
	.footer-column {
		width: 25%;
	}
	
	.page-id-10 .footer-column,
	.page-id-12 .footer-column,
	.page-id-211 .footer-column	{
		margin-top: 126px;
	}
	
	.page-id-3944 .footer-column {
		margin-top: 506px;
	}
	
	.captions {
		position: relative;
		width: 40%;
	}
	
	.captions .imageCaption,
	.captions article {
		position: absolute;
		display:none;
		width: 100%;
	}
	
	.captions .imageCaption {
		margin-top: -4px;
	}
	
	.thumbImages {
		position: relative;
		margin: 0;
		display:block;
		width: 60%;
		float:right;
		line-height: 0;
		text-align:right;
		font-size: 0;
	}
	
	.thumbImages .thumbContainer {
		position: relative;
		max-width: 90px;
		max-height: 60px;
		margin: 0 0 16px 16px;
		display:inline-block;
		cursor:pointer;
		text-align:center;
	}
	
	.thumbImages .floatLeftThumbContainer {
		position: absolute;
		left: 10px;
	}
	
	.thumbImages img {
		width: auto;
		max-height: 60px;
	}
	
	.thumbUnderline {
		margin-top: 7px;
		height: 2px;
		width: 100%;
		background-color: var(--spot-color);
	}
	
	.pageFooter {
		min-height: 80px;
	}
	
	.slideButton {
		display:block;
		position: absolute;
		top: 0;
		height: 100%;
		width: calc(50% + 30px);
		cursor:pointer;
		z-index: 3;
	}
	
	.page .slideButton {
		max-height: 260px;
	}
	
	.slideButton.hidden {
		display:none;
	}
	
	.slideButton.previous {
		left: -30px;
	}
	
	.slideButton.next {
		right: -30px;
	}
	
	.slideButton svg {
		position: absolute;
		top: 50%;
		margin-top: -5px;
	}
	
	.slideButton.next svg {
		right: 0;
	}
	
	.slideButton:hover svg polygon {
		fill: var(--spot-color);
	}
	
	/* fake-hide nav on impressum page
	.page-id-3944 .main-nav,
	.page-id-3944 .cat-nav {
		opacity: 0;
		pointer-events: none;
	}
 */

}


/*   desktops   */
@media (min-width: 1023px) {
	
	body {
		padding: 45px 45px 20px 45px;
	}
	
	.siteTitles h1 {
		position: absolute;
		width: 100%;
		left: 0;
	}
	
	.siteTitles .name {
		margin-right: 73px;
	}
	
	.siteTitles .header-icon {
		position: absolute;
		left: calc(50% - 45px);
		top: -4px;
		margin-left: 0;
	}
	
	
	.main-nav ul li:first-child {
		position: absolute;
		left: 73px;
	}
	
	.main-nav ul li:nth-child(2) {
		margin-right: 135px;
	}
	
	.page-id-10 .footer-column,
	.page-id-12 .footer-column,
	.page-id-211 .footer-column	{
		margin-top: 124px;
	}
	
	.page-id-3944 .footer-column {
		margin-top: 504px;
	}


}