/* 
Theme Name: IID Custom Theme
Author: Clemens Fetissow
Author URI: https://glow-berlin.de
Description: Innocence in Danger Custom Theme
Version: 1.0

*/

/*Materialien Page*/
.video-groups .video-groups_frames{
	display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

/*UNDDU Page*/

/*MOBILE screen*/

.page-template-page-aktion .page-aktion, .postid-45 .single-projekte{
	overflow-x: hidden;
}
.aktion-list{
	transform: translateY(6rem);
}
@media only screen and (min-width: 600px) {
  .aktion-list{
	transform: translateY(4rem);
  }
}

.page-id-610 section#hero-section .hero-content h1, .postid-45 section#hero-section .hero-content h1{
	width: 100%;
}

.page-id-610 section#hero-section .hero-content .unddu, .postid-45 section#hero-section .hero-content .unddu{
	position: relative;
	transition: all 250ms;
}

@media only screen and (max-width: 650px) {
	.page-id-610 section#hero-section .hero-content .unddu, .postid-45 section#hero-section .hero-content .unddu {
		font-size: 4rem;
  }
}

.page-id-610 section#hero-section .hero-content .unddu::before, .postid-45 section#hero-section .hero-content .unddu::before{
	bottom: -10px;
	width: 90%;
}

/*#UNDDU Projekte Seite*/
.postid-45 section#hero-section .h1-hero{
	transform: translateY(-40%);
}
.postid-45 section#hero-section .hero-content p{
	transform: translateY(40%);
}
@media (max-width: 650px){
	.postid-45 section#hero-section .hero-content .unddu::before{
		height: 50px;
	}
}

/*Front Page - Knowledge Tile Grid*/
@media only screen and (min-width: 600px) {
 .page-template-front-page section#knowledge-section .knowledge-tile-grid .knowledge-tile{
	width: 48%;
 }
}

@media only screen and (min-width: 900px) {
 .page-template-front-page section#knowledge-section .knowledge-tile-grid .knowledge-tile{
	width: 28%;
 }
}

.page-template-front-page section#knowledge-section h2{
	white-space: nowrap;
}


@media only screen and (min-width: 900px) and (max-width: 1440px) {
 .page-template-front-page section#about-section img{
	object-position: 100% 0;
 }
}
.page-template-front-page section#about-section .about-content{
	right: 3%;
}

/*Slider Button Arrow*/

.page-template-front-page .swiper-number-button-next{
	left: 4rem;
}

/*MENU MOBILE ADDITIONALS*/
#menu-additional_menu li, #menu-header-menu-2 li, #menu-header-menu-2-right-1 li {
	/*background-color: #ea0026;*/
	/*padding: 0 10px;*/
	width: 50%;
}
@media only screen and (max-width: 599px){
	#menu-additional_menu li, #menu-header-menu-2 li, #menu-header-menu-2-right-1 li {
	width: 80%;
}
}

#menu-additional_menu .current-menu-item, #menu-header-menu-2 .current-menu-item, #menu-header-menu-2-right-1 .current-menu-item {
	background-color: red; /*white*/
	padding: 0 10px;
}

#menu-additional_menu li a{
	color: red; /*white*/
}

#menu-additional_menu .current-menu-item a, #menu-header-menu-2 .current-menu-item a, #menu-header-menu-2-right-1 .current-menu-item a {
	color: white; /*red*/
}

/*New July 2022*/
@media only screen and (max-width:767px){
    html, body {
       overflow-x: hidden;
       scroll-behavior: smooth;
    }
}

/*Angebote Page*/
@media only screen and (max-width: 1024px){ 
	.page-template-page-angebote article .card-text-content{
		overflow-y: scroll;
		overflow-x: hidden;
		padding: 0.8em !important;
	}
}

/*Anchors FAQ*/
.anchor{
  display: block;
  position: relative;
  top: -350px;
  visibility: hidden;
}
@media only screen and (max-width: 599px){ 
	.anchor{
  	top: -500px;
	}
}

/*Pages Header Positions*/
@media only screen and (min-width: 768px) { 
	.page #header-section .grid-width-wide{
		position: absolute;
		top: 32%;
		left: 0;
		right: 0;
	}
}

/*Header Mobile*/
@media only screen and (max-width:599px) {
	h1.h1-header{
		font-size: 2rem !important;
		margin-bottom: 30px !important;
	}
}

/*Über uns*/
.about-video{
	margin-top: 25px;
}


/*NEW - Landscape Mobile*/
@media only screen and (min-width: 480px) 
and (max-width: 940px) and (orientation: landscape) {
	  html, body {
       overflow-x: visible;
    }
	header.site-header{
		top: 0;
		height: 120px !important;
	}
	header.site-header.scrolled{
		height: 80px !important;
	}
	section#header-section{
		height: 100vh !important;
	}
	.page section#header-section > .grid-width-wide, section#hero-section > .grid-width-wide{
		margin-top: 16%;
	}
	.single section#header-section > .grid-width-wide .header-content{
		margin-top: 16%;
	}
	h1.h1-header, h1.h1-hero{
		margin-bottom: 30px !important;
		font-size: 2rem !important;
	}
	.feature-post{
		margin-top: -20px !important;
	}
	.nav-mobile-content{
		max-height: 300px;
    	overflow: scroll;
	}
	.postid-45 .h1-hero{
		transform: scale(0.5) translate(-50%, -60%) !important;
	}
	.page-id-610 .h1-hero{
		transform: scale(0.5) translate(-50%, -20%) !important;
	}
	.postid-45 section#hero-section .hero-content p {
		transform: translateY(-80%);
	}
	.page-id-610 section#hero-section .hero-content .aktion-list{
		transform: translate(-10%, -40%) scale(0.8);
	}
	.page-id-610 section#hero-section .hero-content .aktion-list ul{
		line-height: 1.1;
	}
	.about-video{
		margin-top: 50px !important;
	}
	
	/*FAQ Page*/
	.faq-content{
		flex-flow: row wrap !important;
	}
	.faq-content .button-container{
		width: 100% !important;
		justify-content: center !important;
		flex-direction: row !important;
		gap: 10px;
	}
	.faq-content .button-container button{
		width: 45% !important;
	}
	/*Angebote Page*/
	.page-template-page-angebote article .card-text-content{
		overflow-y: scroll;
		overflow-x: hidden;
		hyphens: auto;
		padding: 1.2em !important;
	}
	/*Blog Page*/
	.page-template-page-blog .feature-post-content{
		margin-top: 5%;
	}
}