/*
Author: Peppi
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 ...
*/

html{
	scroll-behavior: smooth;
}
.franzoesisch, .deutsch, .englisch{
	display: none;
}

html[lang="fr-FR"] .franzoesisch{
	display: initial;
}

html[lang="de-CH"] .deutsch{
	display: initial;
}

html[lang="en-US"] .englisch{
	display: initial
}


.site .dashicons-before::before{
	font-size: 1.4em;
}

body.page:not(.twentyseventeen-front-page) .entry-header h1.entry-title{
	font-size: 1.4em;
}

article .article-information{
	margin-bottom: 1.5em;
}

article .article-information > div{
	margin-bottom: 0.5em;
}

.editor-post-featured-image .components-responsive-wrapper span:first-child{
	display: none;
}

.editor-post-featured-image .components-responsive-wrapper img{
	position: relative;
}


.editor-post-featured-image .components-responsive-wrapper, 
.wp-core-ui .attachment-preview .thumbnail,
.attachment-info .thumbnail-image{
	background-image: repeating-radial-gradient(rgb(200,200,200), lightgrey 5%);
}

@keyframes indicate {   
	from {transform: translatey(-0.1em);
     } 
  
		60% { transform:  translatey(-0.1em);
  } 
	85% { 
    transform: translatey(0.4em);
	
}
	95% { 
    transform: translatey(0.4em);
	
}
	
	to { transform: translatey(-0.1em);
  } 
  
}

@media screen and (min-width: 48em) {
	#panel1 .panel-content .wrap{
		max-width: 1000px;
	}
}

@media screen and (min-width: 30em){
	.postbox-simple{grid-template-columns: 100%;}
	#panel1 .postbox-simple{grid-template-columns: 50% 50%;}
}

@media screen and (min-width: 48em){
	.postbox-simple{grid-template-columns: 50% 50%;}
	.has-sidebar .postbox-simple{grid-template-columns: 100%;}
	#panel1 .postbox-simple{grid-template-columns: 33% 33% 33%;}
}

@media screen and (min-width: 67em){
	.postbox-simple{grid-template-columns: 33% 33% 33%;}
	.has-sidebar .postbox-simple{grid-template-columns: 50% 50%;}
	#panel1 .postbox-simple{grid-template-columns: 25% 25% 25% 25%;}
}


.site-content #panel1 .entry-header .entry-title{
	font-size: 1.625em;
	color: #666;
	clear: both;
	line-height: 1.4;
}

@media screen and (max-width: 30em){
	.site-content .wrap{
		text-align: center;
	}
}


.site-header .menu-scroll-down .icon {
	transform:rotate(90deg) scale(1.5);
	color: white;
	
}

.site-header .menu-scroll-down{
	animation: indicate 4s;
	animation-iteration-count: infinite;
	background: rgba(00,152,212, 0.85);
	border-radius: 5px;
}

.site-branding-text .site-title, .single-featured-image-header img{
	display: none;
}


body:not(.title-tagline-hidden) .site-branding-text{
	margin-top:1.8em;
}

.site-branding-text a, .custom-logo-link img{ 
	background:rgba(00,152,212, 0.85);
	padding: 0.5em;
	border-radius: 0.2em;
	letter-spacing:0.1em;
	box-shadow:  
		4px 6px 7px rgba(130,133,104,0.9);
	display:inline-block
}

.site-branding .wrap{
	text-align:center;
	margin-bottom:3rem;
}

.site-branding-text{
	text-align:left;
}

.site-branding-text a{
	margin-left: 1em;
	padding-left:2em;
	padding-right:2em;
}

@media screen and (min-width: 30em){
	.site-branding-text a{
		margin-left: 39%;
	}

}

html[lang="fr-FR"] .site-branding-text a{
	min-width: 17em;
}

.home .site-content .entry-title{
	margin-top: 1.3em;
}


body:not(.single) #secondary #text-7{
	display: none;
}


.site-info{
	width: 100% !important;
	text-align: center;
}


.thumbnail-image-box{
	background-color: rgb(0,76,106);
	border-top: solid 0.875em rgb(0,76,106);
	border-bottom: solid 0.875em rgb(0,76,106);
	background-color: rgba(245,245,245,0.9);
	box-shadow: 4px 6px 7px rgba(130,133,104,0.9);
	padding: 0.875em;
	transition-duration: 0.65s;
	text-align: center;
}

.thumbnail-image-box:hover{
	transform: scale(1.05);
	border-radius: 0.875em;
	border-color: #0098d4
}

.thumbnail-image-box img{
	border-radius: 3px;
}


.thumbnail-image-box div{
	color: #767676;
	font-size: 0.6em;
}

.thumbnail-image-box img[src$=".svg"]{
	border-radius: 3px;
	background-color: #0098d4;
	padding: 0.875em;
	border: solid thin rgb(0,76,106);
	width: 61.8%;
	height: auto%;
}

.thumbnail-image-box:hover img[src$=".svg"]{
	border-color: #0098d4;
}

.mitarbeiter-panel{
  	justify-content: space-between;
  	display: grid;
	grid-template-columns: 100%;
	margin: -1.4em;
}


@media screen and (min-width: 48em){
	.mitarbeiter-panel{grid-template-columns: 50% 50%;}
}

.mitarbeiter-kasten-wrapper {
	margin: 1.4em;
	transition-duration: 0.65s;
	background: rgb(0,76,106);
	box-shadow: 4px 6px 7px rgba(130,133,104,0.9);
	padding: 2em 0 2em 0;
}


.mitarbeiter-kasten-wrapper .mitarbeiter-kasten{
	text-align: center;
	padding: 1em 0.5em 1em 0.5em;
	background-color: white;
	height: 100%;
}

@media screen and (min-width: 48em){
	.mitarbeiter-kasten-wrapper:hover{
		background-color: #0098d4;
		transform: scale(1.05) translateY(-2%);
		border-radius: 2em;
	}

	.mitarbeiter-kasten-wrapper .mitarbeiter-kasten{
		background-color: rgba(245,245,245,0.9);
		transition-duration: 0.65s;
	}

	.mitarbeiter-kasten-wrapper:hover .mitarbeiter-kasten{
		background-color: white;
	}
}
.mitarbeiter-kasten img{
	border-radius: 3px;
	filter: grayscale(100%);
	transition-duration: 0.65s;
	width: auto;
	max-height: 8em;
}

.mitarbeiter-kasten-inhalt:hover img{
	filter: grayscale(0%);
}

.mitarbeiter-kasten h2{
	color: #0098d4;
}

.mitarbeiter-kasten .beschreibung{
	color: #333;
	font-size: 0.875em;
	margin-bottom: 0.5em;
}

 .mitarbeiter-kasten .telefon{
 	font-size: 0.83em;
 	color: #0098d4;
 	margin-bottom: 0.5em;
 }	

 .mitarbeiter-kasten .email{
 	font-size: 0.9em
}

.mitarbeiter_bild img{
	max-height: 15em;
	width: auto;
}


@media screen and (min-width: 48em){
	#top-menu li:last-child{
		float: right;
	} 

	.home #top-menu li:last-child{
		margin-right: 4em;
	} 

	.main-navigation ul .lang-item a{
		width: auto;
	}
}

.referenz-panel{
	position: relative;
  	justify-content: space-between;
  	display: grid;
	grid-template-columns: 100%;
	margin: -1em;
}

@media screen and (min-width: 20em){
	.referenz-panel{grid-template-columns: 50% 50%;}
}


@media screen and (min-width: 48em){
	.referenz-panel{grid-template-columns: 20% 20% 20% 20% 20%;}
}

.referenz-kasten {
	margin: 1em;
	transition-duration: 0.65s;
	background: rgb(0,76,106);
	box-shadow: 4px 6px 7px rgba(130,133,104,0.9);
}

.referenz-kasten a {
	display: table;
	height: 100%;
	padding: 0 1em;
	width: 100%;
}



.referenz-kasten .referenz-content{
	
	display: table-cell;
    vertical-align: middle;
    text-align: center;
	padding: 0.5em 0.2em 0.5em 0.2em;
	height: 100%;
	background-color: white;
}

@media screen and (min-width: 48em){
	.referenz-kasten:hover{
		background-color: #0098d4;
		transform: scale(1.05) translateY(-2%);
		border-radius: 1em;
	}

	.referenz-kasten .referenz-content{
		background-color: rgba(245,245,245,0.9);
		transition-duration: 0.65s;
	}

	.referenz-kasten:hover .referenz-content{
		background-color: white;
	}
}
.referenz-kasten img{
	border-radius: 3px;
	transition-duration: 0.65s;
	width: auto;
	max-height: 6em;
}


.referenz-kasten h2{
	padding: 0;
	margin: 0;
	color: #0098d4;
	font-size: 0.875em;
}

.headertext tr td:first-child{
	white-space: nowrap;
}

.archive-post-wrapper,
.archive-project-wrapper,
.achive-publikation-wrapper
{
	background-color: rgb(0,76,106);
	padding-top: 0.375em;
	padding-bottom: 0.375em;
	box-shadow: 4px 6px 7px rgba(130,133,104,0.9);
}


.archive-post,
.archive-project,
.archive-publikation{
	background-color: rgba(245,245,245,0.9);
}

.archive-post .post-header,
.archive-project .project-header,
.archive-publikation .publikation-header
{
	border-bottom: dotted 0.05em rgb(0,76,106);
	padding: 0.875em;
}

.archive-post .excerpt,
.archive-project .excerpt,
.archive-publikation .excerpt{
	padding: 0.875em;
}

.archive-post .subheader-container,
.archive-project .subheader-container, 
.archive-publikation .subheader-container
{
	display: flex;
}

.archive-post .image-container,
.archive-project .image-container , 
.archive-publikation .image-container
{
	text-align: right;	
	margin-left: 0.5em;
}

.archive-project .image-container{
	flex: 1;
} 

.archive-post .image-container,
.archive-publikation .image-container{
	flex: 0.5;
}

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

	.archive-post .image-container img:hover,
	.archive-project .image-container img:hover, 
	.archive-publikation .image-container img:hover
	{
		transform: scale(2);
	}
	
}

@media screen and (max-width: 30em){

	.archive-post .image-container,
	.archive-project .image-container, 
	.archive-publikation .image-container
	{
		display: none;
	}
	
}

.archive-post .image-container img,
.archive-project .image-container img,
.archive-publikation .image-container img
{
	border-radius: 3px;
	width: auto;
	border: solid rgb(0,76,106);
	transition-duration: 0.65s;
	transform-origin: 100% 0;
	max-height: 8em;
}

.archive-post .headertext,
.archive-project .headertext,
.archive-publikation .headertext
{
	flex: 1.5;
}

.archive-project .has-thumbnail,
.archive-publikation .has-thumbnail
{
	flex: 1.5;
	width: auto;
	max-width: 70%;
}


@media screen and (max-width: 30em){

	.archive-project .has-thumbnail,
	.archive-publikation .has-thumbnail
	{
		flex: 1.5;
		width: auto;
		max-width: 100%;
	}	
}

.archive-project .publikationslink,
.archive-publikation .publikationslink{
	display: inline-block;
}

.archive-post .date,
.archive-project .date,
.archive-publikation .date{
	display: inline-block;
	margin-right: 3em;
}

.article-information tr td:first-child{
	width:8em;
}

.startseiteninfo-wrapper{
	display: none;
}

@media screen and (min-height: 30em){

	.home .startseiteninfo-wrapper
	{
		display: block;
		position: absolute; 
		right: calc(0% - 2em );
		top: 6em;
		animation: replaceinfo 2s;
		animation-fill-mode: forwards;
		transform: rotateZ(32deg);
		border-radius: 0.2em;
		height: 7.5em;
		width: 23em;
		transition-duration: 0.65s;
		z-index: 3;	
		perspective: 1000px; /* Remove this if you don’t want the 3D effect */
	}

	

	@keyframes replaceinfo {   
		from {} 
		
		to { 
			top: 2em;
			right: calc( 100% - 22em); 
			transform: rotateZ(-20deg);
		} 
	  
	}

	.startseiteninfo-background{
		height: 100%;
		width: 100%;
		animation: backgroundshow 2s;
		animation-fill-mode: forwards;
		transition-duration: 0.65s;
		box-shadow: 4px 6px 7px rgba(130,133,104,0.9);
		border-radius: 0.4em;
	}

	.startseiteninfo-thumbnail{
		transform-style: preserve-3d;
		left: 0; 
		right: 0;	
		transform-origin: center 0%;
		transform: rotateX(-90deg);
		transition-duration:0.65s;
		position: absolute;
		top: 100%;
		backface-visibility: hidden;
		border: ridge #505050 0.1em;
		border-radius: 0.4em;
	}


	.startseiteninfo{
		padding: 0.2em;
		overflow: hidden;
		transition-duration: 0.65s;
		border-radius: 0.4em;
		height: 100%;
		width:100%;
		border: ridge #505050 0.1em;
		text-align: center;
	}

	
	.startseiteninfo-wrapper:hover .startseiteninfo-background{
		transform: translate(0.1em 0.2em);
	}

	.startseiteninfo-wrapper:hover .startseiteninfo-thumbnail{
		transform: rotateX(0deg);
	}



	.startseiteninfo .blocker-left{
		height: 70%;
		width: 9%;
		shape-outside: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);	
		float: left;
	}

	.startseiteninfo .blocker-right{
		height: 10%;
		width: 20%;
		shape-outside: polygon(0% 0%, 100% 0%, 100% 100%);
		float: right;	
	}


	.startseiteninfo .content{
		height: 100%;
		font-weight: 700;
		line-height: 1.3;
	}


	.startseiteninfo .content mark{
		color: transparent;
		animation: charactershow;
		animation-fill-mode: forwards;
		background-color: transparent;
		font-family: Courier New;
	}

	.startseiteninfo:hover .content mark{
		color: #0098d4;
		text-shadow: 2px 2px #ffffff, 2px -2px #ffffff, -2px 2px #ffffff, -2px -2px #ffffff;
	}

	@keyframes charactershow {   
		from {background: grey; } 
		99% {background: grey; } 
		
		to { color: rgb(0,76,106);
			
			background: transparent;
			} 
	  
	}

	@keyframes backgroundshow {   
		from {} 
		to { opacity: 1;} 
	  
	}

}

.entry-content a.menu-page-item{
	display: block;
	font-size:1.2em;
	margin-bottom: 0.5em;
	border: solid thin #767676;
	padding: 0.5em;
	border-radius: 0.1em;
	box-shadow: 4px 6px 7px rgba(130,133,104,0.9);
}

.entry-content .menu-page-item .dashicons{
	line-height: inherit;
}

.entry-content a.menu-page-item:hover{
	background: #767676;
	color: white;
}

tbody{
	border-top: 1px solid #eee
}


article .wp-block-button .wp-block-button__link{
	font-weight: 500;
	background-color: #0098d4 !important;
	border-radius: : 2px !important;
}