/*	Author: Sascha Milivojevic (info@hey-sascha.de):
   
		------------------------------------------------------
   
		EVA KRUSCHE v1 stylesheet
  
		----------------------------------------------------*/
		
/*	CSS Imports
  
		----------------------------------------------------
        

@import url('fonts/fonts.css');
*/

/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #415270;
    color: #FFF;
    text-shadow: none;
}

::selection {
    color: #FFF;
    background: #415270;
    text-shadow: none;
}



/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
  width: 100%;
  margin: 0;}
  
@media screen and (max-width: 780px) {

}

@supports (-webkit-overflow-scrolling: touch) {
html, body {
  position: relative;
  overflow-x:hidden;} 
}
  
div img, figure img, a img {
  max-width: 100%;
  width: auto\9; /* ie8 */} 
  
body {
    overflow-x: hidden; 
    font-family: Jost, Arial, Helvetica, sans-serif;
    background-color: #FFF;} 

.page { padding: 0; width: 100%; max-width: 2680px; margin: 0 auto;}
header, main { width: 100%; }
header { padding: 24px 2vw 24px 2vw; 
    position: sticky; 
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky; 
    top: 0; z-index: 99;}
main { padding: 0; width: 100%;}
.grid { width: 100%; } 
.grid-item, .grid-sizer {width: 33.333%; display: block; }
@media screen and (max-width: 850px) {
.grid-item, .grid-sizer {width: 100%; }
}
.grid-item, .grid-item img {
-webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;}
    
.wortmarke, .about { font-size: 38px; line-height: 1em; padding: 0; font-weight: 700; }
.wortmarke a, .about a { color: #000; display: block; text-decoration: none;  position: relative;}
.wortmarke a:hover, .about a:hover { 
    filter: blur(0px);
    -webkit-filter: blur(0px);}
.wortmarke a::after, .about a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .07em;
  height: 0;
  width: 100%;
  background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
  z-index: -1;
  transition: height .25s cubic-bezier(.6,0,.4,1);}

.wortmarke a:hover::after, .about a:hover::after {
  height: .2em;
}
.pswp__bg { background: #FFF;}
.pswp__icn { color: #FFF; fill: #000}
.pswp__counter { color: #000;}
.pswp__dynamic-caption--below {
  max-width: 900px;
  padding: 15px 0 0;
  background-color: #FFF;
  color: #000;
  padding: 0 10px 10px 15px;
  font-size: 18px; 
  line-height: 22px;
  font-weight:500;}
.pswp__img { background-color: #FFF;}

.w33 { width: 33.33%; padding: 0 2vw;}
.w66 { width: 66.67%; padding: 0 2vw;}
@media screen and (max-width: 1023px) {
.w33, .w66 {width: 100%; padding: 0 10px;}
header { padding: 24px 10px;  }
.wortmarke, .about { font-size: 28px; }
}

h1, h2, h3, h4, h5, h6, p, ul li { font-size: 18px; line-height: 25px; font-weight: 500; }
h1, h2, p, ul { margin: 0 0 25px 0; padding: 0; }
h3, h4, h5, h6, li { padding: 0;  margin: 0;}
.w33 p a, .w33 div a, .w66 p a, .w66 div a { color: #000; text-decoration: underline;}
.w33 p a:hover, .w33 div a:hover, .w66 p a:hover, .w66 div a:hover { color: #000; text-decoration: none;}
/* ==========================================================================
   Flex Layout
   ========================================================================== */
.flex-row, .flex-column, .flex-row-reverse, .flex-column-reverse { display: flex; flex-wrap: wrap;}   
.flex-row { flex-direction: row; }
.flex-row-reverse  { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* 
 justify-content
 This defines the alignment along the main axis. -> horizontal zueinander
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
*/
.j-center { justify-content: center; }
.j-start { justify-content: flex-start; }
.j-end { justify-content: flex-end; }
.j-between { justify-content: space-between; }
.j-evenly { justify-content: space-evenly; }
.j-around { justify-content: space-around; }
@media screen and (max-width: 850px) { 

}

/* 
 align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line. -> zueinander in der gleichen Zeile/Spalte bei unterschiedlicher Containerhöhe
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline 
*/
.ai-stretch { align-items: stretch; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-baseline { align-items: baseline; }
@media screen and (max-width: 850px) { 

}

/* 
 align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline 
*/
.ac-stretch { align-content: stretch; }
.ac-center { align-content: center; }
.ac-start { align-content: flex-start; }
.ac-end { align-content: flex-end; }
.ac-baseline { align-content: baseline; }
.ac-between { align-content: space-between; }
.ac-evenly { align-content: space-evenly; }
.ac-around { align-content: space-around; }