/*
Theme Name: Media Studies
Author: Kaspar Dornfeld
Description: Customized Design for Department of Media Studies
Version: 1.0
License: All Rights Reserved
Tags: one-cloumn, dark blue, flexible-width
Text Domain: mediastudies
*/


* {
	--theme: #00376c;
	--theme-alt: #004c90;
	--theme-gradient: linear-gradient(90deg, rgb(0,46,84) 0%, rgb(0, 55, 108) 50%, rgb(0, 46, 84) 100%);
	--light: rgba(250,250,245,0.975);
	--dark: #0a0a19;
	--bg: rgb(214,214,213);
	--bg-mini-trans: rgba(243,243,241,0.975);
	--bg-semi-trans: rgba(243,243,241,0.75);
	--bg-trans: rgba(243,243,241,0.5);
	--bg-alt: #f0f0eb;
	--bg-alt2: #e6e6e1;
	--grey-dark: #74747e;
	--grey-light: #cfcfd1;
	--grotesk: 'Space Grotesk';
	--scala: 'scala';
	--roboto: 'Roboto Mono';
	box-sizing: border-box;
    font-smooth: always;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale; 
	transition: all 0.3s ease-in-out;
}

::selection {
	background: var(--theme);
	color: var(--bg);
	mix-blend-mode: difference;
}

html {
	background-color: var(--bg);
	/*padding: env(safe-area-inset); */
}

body {
	background:var(--bg);
	color: var(--theme);
	overflow: scroll;
	font-family: var(--grotesk) !important;
	font-weight:400;
	font-style: normal;
}


h1,h2,h3,h4,h5,h6, .nav-link  {
	color: var(--theme);
	font-style: normal;
}

h2,h3,h4,h5 {
	font-weight:500 !important;
}


h1 {
	font-size: 7vw;
	line-height: 5.55vw;
	font-weight: 700;
	letter-spacing: -5px;
}

h2 {
	font-size: 75px;
	letter-spacing: -3px;
}

h6 {
	color: var(--theme);
	font-size: 2.5em;
	font-weight: 400 !important;
	letter-spacing: -2px;
}

p, a, li {
	color: var(--dark);
	margin: 0;
	line-height: 1.5rem;
	text-align: left;
	font-weight: 400;
}

.bigger {
	font-size: 1.25em;
	line-height: 1.25em;
}

li {font-weight: 400;}

a {
	text-decoration: underline;
	word-break: break-word;
	cursor: pointer !important;
	color: var(--theme);
}

p {margin: 10px 0 !important;}

/*p::first-letter {margin-left: 25px;}

.col p::first-letter {margin-left: 0;}*/

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

p a, li a {text-decoration: underline;}

ul {
	padding-left: 0;
	margin: 1rem auto;
}

.invert {
	background: var(--theme-gradient);
	color: var(--bg) !important;
}

.invert p, .invert a, .invert h2 {color: var(--bg) !important;}

.border-mewi {
	border: 2px solid var(--theme);
}

.border-bottom-theme {
	border-bottom: 2px solid var(--theme);
}

.button-mewi {
	border: 2px solid var(--bg);
	padding: 20px;
	color: var(--bg);
	background: var(--theme);
	text-decoration: none;
	font-weight: 500;
}

.button-mewi:hover, .button-mewi:active {
	padding-left: 30px;
  	padding-right: 10px;
}

.button-contain {
	display: block;
	width: 210px;
}

li {
	list-style-type: circle;
	margin-bottom:0.8em;
}

img {
	width:100%;
	height: auto;
}

.img-small {
	width: 25%;
	height: auto;
	float: left;
}

.middle-size {
	font-size: 5vw;
	line-height: 4vw;
}

.caption {
	font-style: italic;
	font-size: 0.8rem;
}

/* UTILS */

.citavipicker {width:20px !important;}

.invisible {visibility:hidden;}
.undisplay {display: none;}

.position-class {position:relative;}

.no-underline {
	text-decoration: none !important;
	color: var(--theme) !important;
}

.aktiv {border-bottom: 1px solid var(--theme);}

.fit-cover {
	object-fit:cover;
}

.fit-cover-height {height: 300px;}

.inner-borders {
	padding: 0 10%;
}

.inner-smaller {
	padding: 0 3%;
}

.mt-10 {margin-top: 10px;}

.theme {color: var(--theme);}

.light {color: var(--light);}

.off {display: off;}
.on-flex {display: flex;}

.table-row {display: table-row !important;}

.menu-prime-container {margin-top: 1rem;}

:not(.btn-check) + .btn:active, .btn:hover, .btn:active, .theme-blue {
	background: var(--bg);
	color: var(--theme);
	border: none;
	text-align: left;
}

#scrollup-master {
	border: 2px solid var(--bg);
}

.centers {
	align-content: center;
	text-align: right;
}

.wp-block-heading {margin-top: 60px;} 

/**********************
 * RECENT POST SLIDER
 * *******************/

.wprpsp-post-slides .wprpsp-post-cats-wrap ul.post-categories li:nth-child(4n+1), .wprpsp-post-slides .wprpsp-post-cats-wrap ul.post-categories li:nth-child(4n+2) {
	background: var(--theme) !important;
	font-weight: 400;
	text-transform: none;
	font-size: 0.8rem;
  	letter-spacing: 0;
	color: var(--bg) !important;
	padding: 5px 10px !important;
	margin-right: 10px !important;
}


.wprpsp-recent-post-slider.wprpsp-design-4 .wprpsp-post-list-cnt .wprpsp-post-title a {
	color: var(--theme) !important;
	font-weight: bold;
	letter-spacing: 0.01em;
}

.wprpsp-post-content {
	color: var(--dark);
}

.wprpsp-read-more-btn {
	color: var(--theme) !important;
	border: 1px solid var(--theme) !important;
}

.wprpsp-read-more-btn:hover {
	background: var(--theme) !important;
	color: var(--bg) !important;
	border: 1px solid var(--theme) !important;
}

.wprpsp-recent-post-slider.wprpsp-design-4 .wprpsp-post-image-wrap {min-height: 350px !important;}

.wprpsp-column, .wprpsp-columns {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wprpsp-column:first-child, .wprpsp-columns:first-child {
	padding-right: 30px !important;
}

.wprpsp-recent-post-slider .wprpsp-post-date::after {
  background: transparent !important;
}

.content {
  margin: 80px auto;
  max-width: 580px;
}

.accordion__item {
  background: var(--bg);
  border-radius: 0;
}

.accordion__item:not(:last-child) {
  margin-bottom: 15px;
}

.accordion__header {
  padding: 20px;
  padding-right: 50px;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--bg);
  position: relative;
  cursor: pointer;
  background-color: var(--theme);
  font-weight: 700;
}

.accordion__header::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url("inc/graphics/arrow.svg") no-repeat center;
  background-size: contain;
  transition: all .4s ease;
}

.accordion__body {
  padding: 0 40px 20px 20px;
  font-weight: 300;
  color: var(--dark);
  line-height: 1.5;
  display: none;
}

.open-accordion .accordion__body {
  display: block;
}

.open-accordion .accordion__header::after {
  transform: rotate(-180deg);
}

.accordion__body ul li {
	list-style-type: circle;
	margin: 1.5em 0;
}

.accordion__body p img {
	max-width: 100px !important;
	margin: 1em;
}

.sort_lession_pointer {
  cursor: n-resize;
}

.bg-tag {
  background-color: var(--bg);
  color: #fff;
}

.shadow {
	box-shadow: none !important;
}

.wp-block-image :where(figcaption) {
	margin-bottom: 3em !important;
  	margin-top: .5em;
  	color: var(--dark);
  	font-size: 0.85em;
}

.kasten, .wpsm_panel, .wprpsp-pro-slider-wrp, .personen, .aktuelles, .accordion__item {
	transition: all 1s ease;
	transform: scale(0.7);
	opacity: 0;
	filter: blur(20px);
}

.aktuelles:nth-child(2) {transition-delay:200ms;}
.aktuelles:nth-child(3) {transition-delay:400ms;}
.aktuelles:nth-child(4) {transition-delay:600ms;}
.aktuelles:nth-child(5) {transition-delay:800ms;}
.aktuelles:nth-child(6) {transition-delay:1000ms;}
.aktuelles:nth-child(7) {transition-delay:1200ms;}
.aktuelles:nth-child(8) {transition-delay:1400ms;}
.aktuelles:nth-child(9) {transition-delay:1600ms;}
.aktuelles:nth-child(10) {transition-delay:1800ms;}
.aktuelles:nth-child(11) {transition-delay:2000ms;}

.wpsm_panel:nth-child(2) {transition-delay:100ms;}
.wpsm_panel:nth-child(3) {transition-delay:200ms;}
.wpsm_panel:nth-child(4) {transition-delay:300ms;}
.wpsm_panel:nth-child(5) {transition-delay:400ms;}
.wpsm_panel:nth-child(6) {transition-delay:500ms;}
.wpsm_panel:nth-child(7) {transition-delay:600ms;}
.wpsm_panel:nth-child(8) {transition-delay:700ms;}
.wpsm_panel:nth-child(9) {transition-delay:800ms;}
.wpsm_panel:nth-child(10) {transition-delay:900ms;}
.wpsm_panel:nth-child(11) {transition-delay:1000ms;}

.personen:nth-child(2n) {transition-delay:200ms;}
.personen:nth-child(3n) {transition-delay:400ms;}

.show {
	transform: scale(1) !important;
	opacity:1 !important;
	filter: blur(0);
}

.fat {font-weight: 500;}

.manual-accordion {
  width: 100%;
}

.manual-accordion-item {
  margin-bottom: 5px;
}

.manual-accordion-header {
  background-color: transparent;
  padding: 10px;
  padding-left: 30px;
  cursor: pointer;
  font-size: 1.2em;
  color: var(--theme);
  position:relative;

}

.manual-accordion-content {
  transition: all 0.6s ease;
  padding: 10px;
  overflow: hidden;
  background-color: transparent;
  color: black;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  max-height: 0;
  display: none;
}

.rotate {transform: rotate(90deg);}

.fa.fa-solid.fa-caret-right {font-size: 1.8em;}

.manual-accordion-content.active {
  display: block;
  max-height: 20000px !important;
}

.barriere {right: 0 !important;}

.onetap-container-toggle .onetap-toggle img.design-size1, .onetap-container-toggle .onetap-toggle img.design-size2, .onetap-container-toggle .onetap-toggle img.design-size3 {
	border: 2px solid var(--bg) !important;
	filter: grayscale(0%) !important;
}

.onetap-active {filter: grayscale(0%) !important;}

.onetap-desc {display: none !important;}

nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessibility-settings header.onetap-header-top .onetap-site-container .onetap-site-info .onetap-information .onetap-hide-toolbar button::before {display:none !important;}

.wp-block-separator.has-alpha-channel-opacity {
	opacity: 1;
	color: var(--theme);
}

@media screen and (min-width: 1500px) {
	h1 {
		font-size: 80px !important;
		line-height: 75px !important;
	}
	
	h4 {font-size: 40px !important;}
}

@media screen and (max-width: 1199px) {
.personen:nth-child(3n) {transition-delay:0;}
	h2 {font-size: 70px !important;}
}


@media screen and (max-width: 999px) {
	
	.wprpsp-medium-6 {
		width: 100% !important;
		margin-bottom: 20px;
	}
	
	.wprpsp-column:first-child, .wprpsp-columns:first-child {
	padding-right: 0 !important;
}
}


@media screen and (max-width: 768px) {
	
	.position-class {position:relative;}
	
	p {text-align: left;}
	
	h1 {
		font-size: 40px;
		line-height: 35px;
		letter-spacing: -3px;
	}
	
	h2 {
		font-size: 50px !important;
		letter-spacing: -3px;
	}
	
	h6 {font-size: 2em;}
	
	.img-small {
		width: 100%;
		height: auto;
		float: none;
	}
	
	.middle-size {
		font-size: 8vw;
		line-height: 6.3vw;
		margin-bottom: 30px;
	}

	.centers {
		text-align: left;
		margin-top: 10px;
	}
	
	.undisplay {display: block;}
	
	.personen:nth-child(2n) {transition-delay:0;}
	.personen:nth-child(3n) {transition-delay:0;}
}


@media screen and (max-width: 640px) {
	.wprpsp-recent-post-slider.wprpsp-design-4 .wprpsp-post-list-cnt .wprpsp-medium-7 {
		margin-top: 20px;
		padding-left: 0 !important;
	}
	
	.minimal-border {padding: 0;} 
	
	
}