/*
Theme Name: SPL by MWD – Theme
Author: Christoph Ehlers
Description: Ein einfaches responsives WordPress-Theme für das iwb Smart Poduction Lab der TUM.
Version: 1.1
*/

@font-face {
  font-family: 'Satoshi-Regular';
  src: url('fonts/Satoshi-Regular.woff2') format('woff2'),
       url('fonts/Satoshi-Regular.woff') format('woff'),
       url('fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Italic';
  src: url('fonts/Satoshi-Italic.woff2') format('woff2'),
       url('fonts/Satoshi-Italic.woff') format('woff'),
       url('fonts/Satoshi-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Medium';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2'),
       url('fonts/Satoshi-Medium.woff') format('woff'),
       url('fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('fonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('fonts/Satoshi-MediumItalic.woff') format('woff'),
       url('fonts/Satoshi-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Bold';
  src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
       url('fonts/Satoshi-Bold.woff') format('woff'),
       url('fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('fonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('fonts/Satoshi-BoldItalic.woff') format('woff'),
       url('fonts/Satoshi-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Black';
  src: url('fonts/Satoshi-Black.woff2') format('woff2'),
       url('fonts/Satoshi-Black.woff') format('woff'),
       url('fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
font-family: 'Satoshi-BlackItalic';
src: url('fonts/Satoshi-BlackItalic.woff2') format('woff2'),
url('fonts/Satoshi-BlackItalic.woff') format('woff'),
url('fonts/Satoshi-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-display: swap;
font-style: italic;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
hyphens: auto;
}
body {
margin: 0;
font-family: 'Satoshi-Regular', sans-serif;
font-size: 20px;
line-height: 30px;
background-color: #fff;
color: #000;
font-weight: 400;
}
header{
padding: 1em 2em;
max-width: 1680px;
margin: 0 auto;
}
.header-container{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.site-logo{
flex-basis: 40%;
}
.site-logo a, 
.site-logo a:hover, 
.site-logo a:focus, 
.site-logo a:active, 
.site-logo a:visited{
background-color: transparent;
border: none;
text-decoration: none;
}
.site-logo img {
max-height: 100px;
width: auto;
transition: all ease .6s;
}
.site-logo:hover img{
filter: grayscale(100%);
filter: brightness(0%);	
}
.site-logo:focus img{
filter: grayscale(100%);
filter: brightness(0%);	
}
.site-logo:active img{
filter: grayscale(100%);
filter: brightness(0%);	
}
nav{
flex-basis: 60%;
align-self: flex-end;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}

nav ul li {
margin-left: 1em;
}

nav ul li a, nav ul li a:visited {
color: #004077;
text-decoration: none;
}
.header-container nav ul li:last-of-type a{
background-image: url('images/icon-booking-small.svg');
background-position: center left;
background-repeat: no-repeat;
background-size: 1.4em;
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;	
padding-left: 1.8em;
}
nav ul li a:hover, nav ul li a:focus, nav ul li a:active{
color: #000;
text-decoration: underline;
background-color: transparent;
}
.current_page_item{
font-family: 'Satoshi-Bold';
font-weight:700;
font-style: normal;
}
.burger {
display: none;
flex-direction: column;
cursor: pointer;
float: right;
}
.burger div {
width: 36px;
height: 3px;
background-color: #004077;
margin: 4px 0;
}
.primary-menu {
display: flex;
justify-content: flex-end;
}
.footer-menu {
display: flex;
justify-content: flex-end;
}
/* Typografie */
h1{
font-family: 'Satoshi-Black';
font-weight: 900;
font-style: normal;
font-size: 3.2em;
line-height: .88em;
margin: 2em auto 1em auto;
max-width: 1680px;
padding: 0 28% 0 .66em;
}
h2{
font-family: 'Satoshi-Regular';
font-weight: 400;
font-style: normal;
font-size: 2.2em;
line-height: 1.2em;
margin: 1.8em 0 1.4em 0;
}
h3{
font-family: 'Satoshi-Bold';
font-weight: 900;
font-style: normal;
font-size: 1.4em;
line-height: 1.2em;
margin: 2em 0 .6em 0;
}
h4{
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;
font-size: 1.2em;
line-height: 1.2em;
margin: 1em 0 .6em 0;
}
p{
margin: 1em 0 .6em 0;	
}
main a:hover, main a:focus, main a:active{
color: #000;
}
.small-p{
font-size: .8em;
}
a.img-link, 
a.img-link:hover, 
a.img-link:focus, 
a.img-link:active, 
a.img-link:visited{
text-decoration:none;
background-color: #fff!important;
background-image:none;
}
.wp-block-image img{
width: 100%;
}
.is-style-p-medium{
font-size: 1.2em;
line-height: 1.4em;
}
.is-style-p-large{
font-size: 1.6em;
line-height: 1.4em;	
}
b, strong{
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;
}
i, em{
font-family: 'Satoshi-Italic';
font-weight:400;
font-style: italic;	
}
blockquote p{
font-family: 'Satoshi-BlackItalic';
font-weight: 900;
font-style: italic;
font-size: 2.8em;
line-height: 1em;
margin: 1em 0 .4em 0;
color: #3070b3;
}
blockquote p::before{
content: "„";
}
blockquote p::after{
content: "“";
}
cite{
font-family: 'Satoshi-Regular';
font-weight: 400;
font-style: normal;
}
cite::before{
content: "\2192";
margin-right: .4em;
}
figcaption{
margin: 1em 0;
font-size: .88em;
line-height: 1.2em;
}
figcaption::before{
content:"\2191";
margin-right:.4em;
color: #3070b3;
}
ul{
margin: 1em 0 1em 1.2em;
list-style-type: "\2192\00a0";
}
ul li{
margin:0 0 .4em 0;
}
hr.wp-block-separator{
border-left: none;
border-right: none;
border-top: dotted 2px #3070b3;	
display: block;
height: 2px;
margin: 1.4em 0;
}
/* Images */
img{
width: 100%;
height: auto;
margin: 1em 0;
}
/* Footer */
#scrollToTop {
position: fixed;
bottom: 1em;
right: 1em;
background-color: #000;
color: #fff;
border: none;
padding:.2em;
font-size: 1.6em;
width:2em;
height: 2em;
border-radius: 100%;
cursor: pointer;
z-index: 1000;
transition: opacity ease 1s;
}
#scrollToTop:hover {
background-color: #ececec;
color: #000;
}

footer{
margin: 6em 0 0 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-image: url('images/footer-pattern.svg');
background-position: bottom left;
background-repeat: no-repeat;
background-size: 10vw;
min-height: 20em;
}
.footer-container{
padding: 0 2em;
max-width: 1680px;
margin: 0 auto;
width: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;	
}
footer nav{
flex-basis: 60%;
}
footer div{
flex-basis: 32%;
}
footer div:last-of-type{
flex-basis: 100%;
}

/* Custom Styles & Blocks */
.is-style-indent{
padding: 2em;
max-width: 1680px;
margin: 0 auto;	
}
.is-style-indent-blue{
padding: 4em 2em;
margin: 8em 0;	
background-color: #004077;
color: #fff!important;
}
.is-style-indent-blue .wp-block-group__inner-container{
padding: 0 2em;
max-width: 1680px;
margin: 0 auto;
}
.is-style-logo-box{
padding: 2em 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.is-style-logo-box figure{
display: block;
float: left;
margin: .6em;
width: 10em;
}
.is-style-btn-white a, .is-style-btn-white a:visited {
text-decoration: none;
color: #004077;
text-align: center;
display: block;
background-color: #fff;
padding: .4em;
border-radius: 10em;
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;	
font-size: 1.2em;
margin: 2em 0;
cursor: pointer;
transition: all ease .6s;
}
.is-style-btn-white a:hover, .is-style-btn-white a:focus, .is-style-btn-white a:active{
border-radius: 0;
color: #004077;
background-color: #fff;	
}
.is-style-btn-blue a, .is-style-btn-blue a:visited {
text-decoration: none;
color: #fff;
text-align: center;
display: block;
background-color: #3070b3;
padding: .4em;
border-radius: 10em;
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;	
font-size: 1.2em;
margin: 2em 0;
cursor: pointer;
transition: all ease .6s;
}
.is-style-btn-blue a:hover, .is-style-btn-blue a:focus, .is-style-btn-blue a:active{
border-radius: 0;
color: #fff;
background-color: #000;
}
.is-style-btn-dark-blue a, .is-style-btn-dark-blue a:visited {
text-decoration: none;
color: #fff;
text-align: center;
display: block;
background-color: #004077;
padding: .4em;
border-radius: 10em;
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;	
font-size: 1.2em;
margin: 2em 0;
cursor: pointer;
transition: all ease .6s;
}
.is-style-btn-dark-blue a:hover, .is-style-btn-dark-blue a:focus, .is-style-btn-dark-blue a:active{
border-radius: 0;
color: #fff;
background-color: #000;
}
.is-style-btn-light-blue a, .is-style-btn-light-blue a:visited {
text-decoration: none;
color: #000;
text-align: center;
display: block;
background-color: #5bc5f2;
padding: .4em;
border-radius: 10em;
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;	
font-size: 1.2em;
margin: 2em 0;
cursor: pointer;
transition: all ease .6s;
}
.is-style-btn-light-blue a:hover, .is-style-btn-light-blue a:focus, .is-style-btn-light-blue a:active{
border-radius: 0;
color: #fff;
background-color: #000;
}
.is-style-btn-yellow a, .is-style-btn-yellow a:visited {
text-decoration: none;
color: #000;
text-align: center;
display: block;
background-color: #fdc100;
padding: .4em;
border-radius: 10em;
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;	
font-size: 1.2em;
margin: 2em 0;
cursor: pointer;
transition: all ease .6s;
}
.is-style-btn-yellow a:hover, .is-style-btn-yellow a:focus, .is-style-btn-yellow a:active{
border-radius: 0;
color: #fff;
background-color: #000;
}
.is-style-btn-green a, .is-style-btn-green a:visited {
text-decoration: none;
color: #000;
text-align: center;
display: block;
background-color: #95c11f;
padding: .4em;
border-radius: 10em;
font-family: 'Satoshi-Bold';
font-weight: 700;
font-style: normal;	
font-size: 1.2em;
margin: 2em 0;
cursor: pointer;
transition: all ease .6s;
}
.is-style-btn-green a:hover, .is-style-btn-green a:focus, .is-style-btn-green a:active{
border-radius: 0;
color: #fff;
background-color: #000;
}
.is-style-icon{
max-width: 10em;
height: auto;
margin: 0;
padding: 0;
}
.is-style-icon img{
margin: 0;	
padding: 0;
}
.is-style-icon-medium{
max-width: 20em;
height: auto;
margin: 0 auto;
padding: 0;
}
.is-style-icon-medium img{
margin: 0;	
padding: 0;
}
.is-style-icon-small{
width: 6em;
display: inline-block;
margin: 2em;
}
.is-style-no-margin{
margin: 0;	
padding: 0;
}
/* Video-Box */
.video-box-xl{
width: 100%;
height: 66vh;
overflow: hidden;
margin: 4em 0;
}
.video-box-xl video{
width: 100%;
position: relative; 
top: 50%; 
transform: translateY(-50%); 	
}
/* Teaser */
.teaser-bg{
padding: .6em;
background-color: #fff;
box-shadow: 4px 4px 6px #ccc;	
}
.teaser-bg img{
display: block;	
margin: 0 auto;
max-width: 10em;
}
.teaser-bg h3, 
.teaser-bg p{
text-align: center;
}


/* Responsivnes */
@media (max-width: 768px) {
body{
font-size: 16px;
line-height: 22px;
}
.header-container{
width: 100%;
display: flex;
flex-direction: column;	
justify-content: space-between;
flex-wrap: wrap;
}	
.site-logo{
flex-basis: 100%;
float: left;
}
.primary-menu {
display: none;
flex-direction: column;	
flex-basis: 100%;	
}
.burger {
display: flex;
}
.primary-menu.open {
display: flex;
max-width: 82vw;
}
nav{
flex-basis: 100%!important;
align-self: flex-end;
margin-top: 6em;
}
nav ul{
margin-top: 2em;
width: 100%;
display: block;
}
nav ul li {
width: calc(100vw - 4em);
margin: .8em 0;
font-size: 1.2em;
}
footer{
margin: 6em 0 0 0;
padding: 2em 0 10em 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-image: url('images/footer-pattern.svg');
background-position: bottom left;
background-repeat: no-repeat;
background-size: 8em;
}
footer nav{
margin-top: 0px;
}
.video-box-xl{
width: 100%;
height: auto;
overflow: visible;
margin: 1em 0;
}
.video-box-xl video{
height: auto;
width: 100%;	
top: 5%; 
transform: translateY(-15%); 
}	
h1{
padding: 0 .66em;
} 
}

/* Custom Colors */
.has-blue-color {
    color: #3070b3 !important;
}

.has-yellow-color {
    color: #fdc100 !important;
}

.has-green-color {
    color: #95c11f !important;
}

.has-light-blue-color {
    color: #5bc5f2 !important;
}

.has-dark-blue-color {
    color: #004077 !important;
}

.has-black-color {
    color: #000000 !important;
}

.has-white-color {
    color: #ffffff !important;
}

/* Column Gap Fix */
.wp-block-columns{
gap: 1.4em;
}

/* Events Calendar Overwrite */
.tribe-events-widget-events-list h2 {
font-family: 'Satoshi-Regular' !important;
font-weight: 400!important;
font-style: normal!important;
font-size: 2.2em!important;
line-height: 1.2em!important;
margin: 1em 0!important;	
}