/*
Theme Name: West Child
Theme URI: http://athemes.com/theme/west
Author: aThemes
Author URI: http://athemes.com
Description: West is a responsive business theme that aims to provide everything you need in order to help you create an awesome website for your company. Some of the features you will find in West are: Live Composer integration, fonts and colors controls, blog options, custom header option and much more.
Template: west 
Version: 1.11
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: west-child
Tags: light, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-colors, custom-background, custom-header, custom-menu, featured-images, sticky-post, theme-options, 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 with others.

West is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* -------------------------------------------------------
Wordpress voreinstellungen ausblenden/überschreiben
------------------------------------------------------- */
.wp-block-image {
	margin-bottom: 0;
}
/* Cookies */
.cn-button.wp-default {
	background: transparent;
}
.cn-button:hover {
	box-shadow: none;
}
#cookie-notice, .cn-button {
	font-family: 'Lora', serif;
	color: white !important;
}
/* -------------------------------------------------------
Fonts
------------------------------------------------------- */
/*a:hover, a:active, a:focus {
	cursor: url('https://sil-punct.ch/neu/wp-content/uploads/2020/11/sil-punct_kreis_gruen_cursor.png'), auto;
}*/
.menu-item a {
	font-family: 'Lora', serif;
	font-weight: normal;
	font-size: 17px;
	text-transform: none;
}
#main a {
	color: black !important;
}
/* Link Profilseite */
.page-id-121 #main a {
	color: white !important;
}
.page-id-121 #main a:hover {
	color: #64693F !important;
	transition: all 0.15s linear;
}
p a {
	/* Increase this as per requirement */ 
	padding-bottom: 1.5px; 
	border-bottom-style: solid; 
	border-bottom-width: 2px; 
	width: fit-content; 
}
a:hover {
	text-decoration: none;
	border-bottom: none;
	/*transition: all 0.1s linear;*/
}
p, a, h1 {
	font-size: 17px;
	line-height: 1.5em;
	letter-spacing: 0.1rem;
}
p, a {
	font-weight: normal;
	/*hyphens: auto;*/
}
.page-id-121 p,
.page-id-121 h1 {
	color: white;
}
h1 {
	font-weight: bold;
	font-size: 18px !important;
}
h2 {
	margin-top: 0;
}
.hauptunterstuetzer li {
	color: white;
}
/* Projekt Hover Alinieren & Abstand */
.eihe-box .eihe-caption {
	align-items: flex-start;
	padding: 20px !important;
	hyphens: auto !important;
}
/* Projekt Hover Titel */
.eihe-box .eihe-caption .eihe-title-cover .eihe-title {
	font-family: 'Lora', serif;
	font-weight: 700;
	font-size: 18px !important;
}
/* Projekt Hover Description */
.eihe-box .eihe-caption p {
	font-family: 'Lora', serif;
	font-weight: 300;
	font-size: 18px !important;	
	line-height: 1.3;
}
/* -------------------------------------------------------
Abstände
------------------------------------------------------- */
#content {
	padding: 60px;
}
.grids-s-w_i>div {
	padding: 20px 0 !important;
}
.grids-s-w_i figure {
	margin-bottom: 0;
}
/* -------------------------------------------------------
Header
------------------------------------------------------- */
#masthead {
	background-color: transparent;
	padding: 50px 0 0 0;
}
#masthead .container {
	align-items: flex-start;
}
.site-title, .site-description {
	display: none;
}
.site-header {
	position: relative !important;
}
.site-header .container {
	width: 100%;
	padding: 0 30px;
	display: flex;
}
.site-branding {
	/*width: 100vw !important;*/
	width: 0;
	position: absolute;
	left: 50%;
	display: flex;
	justify-content: center;
	padding: 30px 0 0 0;
	z-index: 1000;
}
.site-logo {
	max-height: 120px;
	height: auto;
}
.page-id-26 #silPunctLogo path,
.page-id-65 #silPunctLogo path,
.page-id-121 #silPunctLogo path {
	fill: white;
}
/* Logo */
#silPunctLogo {
	width: 85px;
	height: auto;
}
/* -------------------------------------------------------
Navigation
------------------------------------------------------- */
#primary-menu {
	display: flex;
	flex-direction: column;
}
.main-navigation li {
	padding: 0 0 0 50px
}
.main-navigation a {
	color: black;
}
/* Landingpage, Projekteseite, About */
.page-id-26 .main-navigation a,
.page-id-65 .main-navigation a,
.page-id-121 .main-navigation a {
	color: white;
}
.page-id-26 .header-scrolled a, .page-id-26 .header-scrolled .site-title a,
.page-id-65 .header-scrolled a, .page-id-65 .header-scrolled .site-title a,
.page-id-121 .header-scrolled a, .page-id-65 .header-scrolled .site-title a {
	color: white;
}
.page-id-26 .menu-item a:hover, .page-id-26 .header-scrolled .menu-item a:hover,
.page-id-65 .menu-item .header-scrolled a:hover, .page-id-65 .header-scrolled .menu-item a:hover {
	color: #64693F !important; /* dunkelgrün */
}
.entry-title a:hover, a:hover, .main-navigation a:hover, .main-navigation ul ul a:hover {
	color: #64693F !important; /* dunkelgrün */	
}
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a {
	border: none;
}
/* Mobile ausblenden */
.mobile-nav, .small-header {
	display: none;
}
/* Desktop einblenden */
.main-navigation {
	display: block;
	width: 100%;
}
/* -------------------------------------------------------
Footer
------------------------------------------------------- */
#colophon {
	display: none;
}
#sidebar-footer {
	font-family: 'Lora', serif;
	font-weight: normal;
	font-size: 21px;
	background-color: transparent;
	padding: 0;
}
#sidebar-footer .container {
	width: 100%;
	padding: 30px;
}
#sidebar-footer .container .sidebar-column {
	padding: 0;
}
.page-id-26 #sidebar-footer a,
.page-id-26 #sidebar-footer p,
.page-id-65 #sidebar-footer a,
.page-id-65 #sidebar-footer p,
.page-id-121 #sidebar-footer a,
.page-id-121 #sidebar-footer p {
	color: white !important;
}
#sidebar-footer a,
#sidebar-footer p {
	line-height: 1.5;
	font-weight: normal;
	color: black;
}
.page-id-26 #sidebar-footer a:hover,
.page-id-65 #sidebar-footer a:hover,
.page-id-121 #sidebar-footer a:hover {
	transition: all 0.15s linear;
	color: #64693F !important; /* dunkelgrün */
}
#sidebar-footer .col-md-4 {
	width: auto;
}
#sidebar-footer .col-md-4:first-child {
	margin: 0 60px 0 0;
}
/* Linkedin */
.linkedInLink {
	border-bottom: none;
}
.linkedInLink:hover path {
	fill: #64693F;
	transition: all 0.15s linear;
}
.page-id-26 #linkedIn path,
.page-id-121 #linkedIn path {
	fill: white;
}
.page-id-26 .linkedInLink:hover #linkedIn path,
.page-id-121 .linkedInLink:hover #linkedIn path {
	fill: #64693F; /* dunkelgrün */
}
/* Go Top */
.go-top {
	background-color: transparent !important;
}
.fa.fa-angle-up {
	color: black;
}
.go-top:hover .fa.fa-angle-up {
	color: #64693F; /* dunkelgrün */
}
.page-id-26  .fa.fa-angle-up,
.page-id-121 .fa.fa-angle-up {
	color: white;
}
.page-id-26 .go-top :hover .fa.fa-angle-up,
.page-id-121 .go-top :hover .fa.fa-angle-up {
	color: #64693F; /* dunkelgrün */
}
/* -------------------------------------------------------
Bilder
------------------------------------------------------- */
.projektBereich, .inhaltsBereich {
	margin: 0 -30px !important;
}
.grids-s-w_i img {
	width: 100%;
}
/* -------------------------------------------------------
Landing Page
------------------------------------------------------- */
.page-id-65 #page {
	height: 100vh;
}
/* Kreise Wrapper */
.kreisWrapper .grids-area {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.kreis {
	width: 40%;
}
.page-id-65 #sidebar-footer{
	display: none;
}
/* Kreise */
.crossfade > figure {
	animation: imageAnimation 20s linear infinite 0s;
	backface-visibility: hidden;
	background-size: cover;
	background-position: center center;
	color: transparent;
	height: 100%;
	left: calc(50% - 25vw);
	opacity: 0;
	position: fixed;
	top: calc(50% - 25vw);
	width: 100%;
	z-index: -1;
	margin-left: 0px;
	width: 50vw;
	height: 50vw;
	border-radius: 50%;
	/*filter: hue-rotate(180deg) saturate(100%);*/
}
.crossfade > figure:nth-child(1) { 
	background-image: url('https://sil-punct.ch/wp-content/uploads/2020/11/sil-punct_kreis_rot.png'); 
}
.crossfade > figure:nth-child(2) {
  animation-delay: 10s;
  background-image: url('https://sil-punct.ch/wp-content/uploads/2020/11/sil-punct_kreis_hellgruen.png');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 20s;
  background-image: url('https://sil-punct.ch/wp-content/uploads/2020/11/sil-punct_kreis_violett.png');
}
.crossfade > figure:nth-child(4) {
  animation-delay: 30s;
  background-image: url('https://sil-punct.ch/wp-content/uploads/2020/11/sil-punct_kreis.png');
}
.crossfade > figure:nth-child(5) {
  animation-delay: 40s;
  background-image: url('https://sil-punct.ch/wp-content/uploads/2020/11/sil-punct_kreis_tuerkis.png');
}

@keyframes 
imageAnimation { 	
	0% {
		animation-timing-function: linear;
		opacity: 0;
		/*transform: rotate(45deg);*/
	}
	25% {
	 animation-timing-function: ease-out;
	 opacity: 1;
	}
	50% {
	 opacity: 1;
	}
	75% {
	 opacity: 0;
	}
	 100% {
	 opacity: 0;
	}
}

/* Hintergrundfarbe */
.page-id-65 {
  -webkit-animation: bgcolorchange 20s infinite; /* Chrome, Safari, Opera */ 
  animation: 20s infinite bgcolorchange;
}
@keyframes bgcolorchange {
  0% {
    background-color: #789897;
  }
  25% {
    background-color: #6C5584;
  }
  50% {
    background-color: #817A20;
  }
  75% {
    background-color: #B69AB4;
  }
  100% {
    background-color: #95524E;
  }
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes bgcolorchange {
   0%   {background: #789897;}
   25%  {background: #6C5584;}
	 50%  {background: #817A20;}
   75%  {background: #B69AB4;}
   100% {background: #95524E;}
 }
/* -------------------------------------------------------
Projekte
------------------------------------------------------- */
.page-id-26 {
	background-color: #BB9EBB !important; /* violett */
}
.page-id-26 #sidebar-footer a:hover {
	color: #64693F !important; /* dunkelgrün */
}
.page-id-26 .eihe-box:hover {
	cursor: url('https://sil-punct.ch/wp-content/uploads/2020/11/sil-punct_kreis_gruen_cursor.png'), auto;
}
/* -------------------------------------------------------
About
------------------------------------------------------- */
.page-id-121 {
	background-color: #719490 !important; /* türkis */
}
/* -------------------------------------------------------
Casa Sil Punct
------------------------------------------------------- */
.zitatContainer, .titelContainer, .hauptunterstuetzer {
	flex-grow: 1;
	margin-bottom: 0;
	align-items: center;
	min-height: 222px;
}
.zitatContainer, .hauptunterstuetzer {
	padding: 1.25em 1.5em;
}
.videoCrowdfunding {
	margin-bottom: 0;
}
.projektbeschrieb .wp-block-columns {
	margin-bottom: 0;
}
.titelGross {
	margin-top: 0;
	line-height: 1.3;	
}
.hauptunterstuetzer ul {
	padding-left: 1em;
	font-size: 17px;
	list-style-type: disc;
}
#main .hauptunterstuetzer a {
	color: white !important;
	padding-bottom: 1.5px;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

/*********************************************************
AB TABLET HOCH
*********************************************************/
@media only screen and (min-width: 768px) {	
	/* -------------------------------------------------------
	Fonts
	------------------------------------------------------- */
	p, a, h1, .hauptunterstuetzer li, .hauptunterstuetzer li a {
		font-size: 18px;
	}
	#main .hauptunterstuetzer a:hover, #main .hauptunterstuetzer a:active, #main .hauptunterstuetzer a:focus {
		color: #64693F !important;
		transition: all .2s linear;
	}
	/* Projekt Hover Alinieren & Abstand */
	.eihe-box .eihe-caption {
		padding: 40px !important;
	}
	/* Projekt Hover Titel */
	.eihe-box .eihe-caption .eihe-title-cover .eihe-title {
		font-size: 18px !important;
	}
	/* Projekt Hover Description */
	.eihe-box .eihe-caption p {
		font-size: 18px !important;
	}
	.menu-item a {
		font-size: 18px;
	}
	/* -------------------------------------------------------
	Abstände
	------------------------------------------------------- */
	#content {
		padding: 60px;
	}
	.grids-s-w_i>div {
		padding: 30px !important;
	}
	/* -------------------------------------------------------
	Header
	------------------------------------------------------- */
	#masthead {
		padding: 60px 0 0 0;
	}
	.site-header .container {
		width: 100%;
		padding: 0 60px;
	}
	/* -------------------------------------------------------
	Navigation
	------------------------------------------------------- */
	#primary-menu {
		flex-direction: row;
	}
	/* -------------------------------------------------------
	Footer
	------------------------------------------------------- */
	#sidebar-footer .container {
		width: 100%;
		padding: 60px;
	}
	/* -------------------------------------------------------
	Casa Sil Punct
	------------------------------------------------------- */	
	.titelContainer {
		min-height: 200px
	}
	.zitatContainer, .titelContainer, .hauptunterstuetzer {
		min-height: 458px;
	}
}

/*********************************************************
MAX 781px
*********************************************************/
@media only screen and (max-width: 781px) {
	.wp-block-columns.is-layout-flex {
		gap: 1em !important;
	}
}

/*********************************************************
AB TABLET QUER
*********************************************************/
@media only screen and (min-width: 1024px) {
	/* -------------------------------------------------------
	Fonts
	------------------------------------------------------- */
	/* Projekt Hover Alinieren & Abstand */
	.eihe-box .eihe-caption {
		padding: 20px !important;
	}
	/* Projekt Hover Titel */
	.eihe-box .eihe-caption .eihe-title-cover .eihe-title {
		font-size: 18px !important;
	}
	/* Projekt Hover Description */
	.eihe-box .eihe-caption p {
		font-size: 18px !important;
	}
	/* -------------------------------------------------------
	Header
	------------------------------------------------------- */
	#masthead {
		padding: 55px 0 0 0;
	}
	/* -------------------------------------------------------
	Footer
	------------------------------------------------------- */
	#sidebar-footer .col-md-4:nth-child(3) {
		position: absolute;
		right: 60px;
	}
	/* -------------------------------------------------------
	Landing Page
	------------------------------------------------------- */
	/* Kreise */
	.crossfade > figure {
		left: calc(50% - 15vw);
		top: calc(50% - 15vw);
		width: 30vw;
		height: 30vw;
	}
	/* -------------------------------------------------------
	Casa Sil Punct
	------------------------------------------------------- */	
	.titelGross {
		font-size: 24px;
	}	
}

/*********************************************************
IPAD PRO/LAPTOP KLEIN
*********************************************************/
@media only screen and (min-width: 1200px) {
	/* -------------------------------------------------------
	Fonts
	------------------------------------------------------- */
	/* Projekt Hover Titel */
	.eihe-box .eihe-caption .eihe-title-cover .eihe-title {
		font-size: 18px !important;
	}
	/* Projekt Hover Description */
	.eihe-box .eihe-caption p {
		font-size: 18px !important;
	}
	/* -------------------------------------------------------
	Header
	------------------------------------------------------- */
	/* Logo */
	#silPunctLogo {
		width: 100px;
	}
	#masthead {
		padding: 70px 0 0 0;
	}
	/* -------------------------------------------------------
	Landing Page
	------------------------------------------------------- */
	/* Kreise */
	.crossfade > figure {
		left: calc(50% - 13vw);
		top: calc(50% - 13vw);
		width: 26vw;
		height: 26vw;
	}
	/* -------------------------------------------------------
	Casa Sil Punct
	------------------------------------------------------- */	
	.titelGross {
		font-size: 24px;
	}		
	.titelContainer {
		min-height: 300px
	}
	.zitatContainer, .titelContainer, .hauptunterstuetzer {
		min-height: 500px;
		padding: 1.25em 4em !important;
	}
}

/*********************************************************
IPAD PRO/LAPTOP
*********************************************************/
@media only screen and (min-width: 1600px) {
	/* -------------------------------------------------------
	Fonts
	------------------------------------------------------- */
	/* Projekt Hover Alinieren & Abstand */
	.eihe-box .eihe-caption {
		padding: 30px !important;
	}
	/* Projekt Hover Titel */
	.eihe-box .eihe-caption .eihe-title-cover .eihe-title {
		font-size: 18px !important;
	}
	/* Projekt Hover Description */
	.eihe-box .eihe-caption p {
		font-size: 18px !important;
	}
	/* -------------------------------------------------------
	Abstände
	------------------------------------------------------- */
	#content {
		padding: 70px 60px 60px 60px;
	}
	/* -------------------------------------------------------
	Header
	------------------------------------------------------- */
	/* Logo */
	#silPunctLogo {
		width: 9vw;
		height: auto;
	}
	/* -------------------------------------------------------
	Landing Page
	------------------------------------------------------- */
	/* Kreise */
	.crossfade > figure {
		left: calc(50% - 12vw);
		top: calc(50% - 12vw);
		width: 24vw;
		height: 24vw;
	}
	/* -------------------------------------------------------
	Casa Sil Punct
	------------------------------------------------------- */
	.zitatContainer, .titelContainer, .hauptunterstuetzer {
		padding: 1.25em 6em !important;
	}		
	.titelGross {
		font-size: 30px;
	}
}

/*********************************************************
DESKTOP GROSS
*********************************************************/
@media only screen and (min-width: 2400px) {
	/* -------------------------------------------------------
	Fonts
	------------------------------------------------------- */
	/* Projekt Hover Alinieren & Abstand */
	.eihe-box .eihe-caption {
		padding: 40px !important;
	}
	/* Projekt Hover Titel */
	.eihe-box .eihe-caption .eihe-title-cover .eihe-title {
		font-size: 18px !important;
	}
	/* Projekt Hover Description */
	.eihe-box .eihe-caption p {
		font-size: 18px !important;
	}
	/* -------------------------------------------------------
	Abstände
	------------------------------------------------------- */
	#content {
		padding: 90px 60px 60px 60px;
	}
	/* -------------------------------------------------------
	Header
	------------------------------------------------------- */
	/* Logo */
	#silPunctLogo {
		width: 6vw;
		height: auto;
	}	
	/* -------------------------------------------------------
	Landing Page
	------------------------------------------------------- */
	/* Kreise */
	.crossfade > figure {
		left: calc(50% - 9vw);
		top: calc(50% - 9vw);
		width: 18vw;
		height: 18vw;
	}
	.kreis {
		width: 35%;
	}	
	/* -------------------------------------------------------
	Casa Sil Punct
	------------------------------------------------------- */
	.zitatContainer, .titelContainer, .hauptunterstuetzer {
		padding: 1.25em 11em !important;
		min-height: 700px;
	}	
	.zitatContainer p, .hauptunterstuetzer li, .hauptunterstuetzer li a {
		font-size: 22px;
	}
	.titelGross {
		font-size: 34px;
	}	
}