/*
Theme Name: Bridge Child
Theme URI: http://bridgelanding.qodeinteractive.com/
Description: Bridge Child Theme for C3H
Tags: 
Author: Lukas Tribelhorn
Author URI: https://ltribe.ch
Template: bridge
Version: 1.0.0
License: GNU General Public License
License URI: licence/GPL.txt
Text Domain: bridge
*/


/* Silbentrennung*/
h3, h4, h6, p, ul, li {
  -webkit-hyphens: auto;
  /*-webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;*/
  -ms-hyphens: auto;
  /*-ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;*/
  hyphens: auto;
}


/*Languageswitcher in Navi*/
.drop_down .narrow .second .inner ul li {
	width: 100% !important
}
.drop_down .narrow .second .inner ul li:hover {
	background-color: #57a6b5 !important
}
.drop_down .narrow .second .inner ul li:hover a {
	color: #fff !important
}

.pll-parent-menu-item > a:before {
	white-space: nowrap;
	content:"";
	background-image: url('https://staging.c3h.ch/wp-content/uploads/2021/02/globe.svg');
  background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	margin-left: 0.1em;
	padding-right: 1em;
	margin-right: 0.2em;
	hyphens: none;
	display: inline;
}


/*Add Icon before external links*/
p a:not([href*='c3h.']):not([href^='#']):not([href^='/']):not([class='orcid']):not([class='license']):not([class='no_ic']):before {
	white-space: nowrap;
	content:"";
	background-image: 			url("https://staging.c3h.ch/wp-content/uploads/2023/01/external-link.svg");
  background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	margin-left: 0.2em;
	padding-right: 1em;
	margin-right: 0.1em;
	hyphens: none;
	display: inline;
	color: currentcolor;
	fill: currentcolor;
}

/*Add Icon before ORCID links*/
div p a.orcid:after {
	white-space: nowrap;
	content:"";
	background-image: 			url("https://staging.c3h.ch/wp-content/uploads/2023/01/ORCIDiD_iconvector.svg");
  background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
	margin-right: 0.2em;
	padding-left: 1em;
	margin-left: 0.1em;
	hyphens: none;
	display: inline;
}

/*H6 Padding*/
h6 {
	padding-bottom: 10px;
	text-align: center;
}



/*Runde Icons*/
.fa-stack {
	width: 2em;
}

/*Listen*/
ol {
	padding-left: 40px;
	list-style-position: outside;
}

ul {
	padding-left: 40px !important;
	list-style-position: outside !important;
	list-style-type: '— ';
}

li {
	padding-bottom: 10px !important;
	padding-left: 10px !important;
}

/*Visme Iframes*/
iframe.visme {
	scrolling: no;
	overflow: hidden;
}

/*Slider Link*/
#board_slider .owl-item .sa_hover_container .sa_hover_buttons {
	top:0px !important;
	left:0px !important;
	width:100% !important;
	height:100% !important;
	margin:0px !important;
}

#board_slider .owl-item .sa_hover_container .sa_hover_buttons a,
#board_slider .owl-item .sa_hover_container .sa_hover_buttons div {
	width:100% !important;
	height:100% !important;
	background-image:none !important;
	background-color:transparent !important;
}

/*Slider Hover (Option 1, opacity)*/
div.owl-item.active {
	opacity: 1;
}

div.owl-item.active:hover {
	opacity: 0.9;
}

/*Slider Hover (Option 2, not functional)
#board_slider .owl-item #board_slider_slide01.sa_hover_buttons a:hover,
#board_slider .owl-item #board_slider_slide01 .sa_hover_buttons div:hover {
	background-color:#667bcd !important;*/

/*Slider Hover (Option 3, float)*/
.owl-stage {
	margin-top: 17px;
}

div.owl-item.active {
	-webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

div.owl-item.active:hover {
	-webkit-transform: 					translateY(-15px);
  transform: translateY(-15px);
}

/*Slider Hover (Option 4, grow)
div.owl-item.active {
	transition: transform .2s;
}

div.owl-item.active:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05.);*/
}

/*Slider Padding*/
#board_slider .owl-item .sa_hover_container {
	padding-bottom: 5% !important;
}

.board-slider {
	height: 575px;
}

/*CF7 - Quiz*/
input.wpcf7-form-control.wpcf7-quiz {
  margin-left: 0px;
  width: 100%;
}

div.wpcf7-response-output {
  text-align: left;
  color: #000;
}

/*Blog: Spacing*/
.pub-meta {
	margin-top: 10px;
	margin-bottom: 50px !important;
}

/*Blog: Horizontal Ruler*/
.blog-hr {
	position: static !important;
}

/*Footer Height*/
div.footer_bottom {
	padding-top: 25px !important;
	padding-bottom: 25px !important;
}

/*Footer Menu*/
#menu-footer_bottom_it {
	text-align: left;
	padding-left: 0px;
}

#menu-item {
	padding-left: 0px;
		margin-right: 13px;
}

#menu-footer_bottom_it a {
	text-transform: none;
	font-size: 15px;
	font-weight: 400;
}

/*Position BacktoTop*/
a#back_to_top.on {
	bottom: 25px !important;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* Styling for the post list */
.lpost-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* center the lpost-box elements */
    margin: 0 auto; /* add auto margin to horizontally center the elements */
    max-width: 960px; /* add max-width to limit the width of the container */
}

.lpost-box {
    width: calc(33.33% - 50px);
    margin: 25px;
    max-width: 300px; /* add max-width to limit the width of lpost-box */
    max-height: 300px; /* add max-height to limit the height of lpost-box */
    position: relative;
    overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.lpost-box-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
	background-color: rgba(255, 255, 255, 0);
	transition: background-color 0.3s linear;
	-webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
}

.lpost-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}


.lpost-item-inner {
  height: 100%;
  justify-content: center;
  display: flex;
  flex-direction: column;
}


.lpost-box:nth-child(4n-3) {
    background-color: #2744A0;
	/*background-color: #667BCD;*/
	/*background-color: #8b99bb;*/
}

.lpost-box:nth-child(4n-2) {
    background-color: #187E92;
	/*background-color: #57A6B5;*/
	/*background-color: #5fc5d0;*/
}

.lpost-box:nth-child(4n-1) {
    background-color: #7A5586;
	/*background-color: #AA90B4;*/
	/*background-color: #a081b8;*/
}

.lpost-box:nth-child(4n) {
    background-color: #A7937C;
	/*background-color: #C2BBA7;*/
	/*background-color: #c4b8a4;*/
}

@media screen and (max-width: 1024px) {
    .lpost-box {
        width: calc(50% - 50px);
    }
}

@media screen and (max-width: 767px) {
    .lpost-box {
        width: calc(100% - 50px);
    }
}

/* New CSS for square lpost-box */
.lpost-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.lpost-box-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*Hover effect*/
.lpost-box-inner:hover {  
	background-color: rgba(255, 255, 255, 0.15);
}

/*Text styling*/
.lpost-cat {
	color: #fff;
	font-size: 15px;
	line-height: 20px;
	text-align: center;
	hyphens: none;
}

.lpost-title {
	color: #fff;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0em;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	hyphens: none;
	padding-bottom: 10px;
}

.lpost-journal {
	color: #ccc;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 20px;
	font-weight: 300;
	text-align: center;
	hyphens: none;
	font-style: italic;
	padding-top: 10px;
	padding-bottom: 20px;
}
