/* LOUKIA RICHARDS - HOMEPAGE 
Author Christoph Ziegler
Copyright Christoph Ziegler 2020 */

html {scroll-behavior: smooth }

body {text-align: left; background: #FFF; width: 100%; max-width: 2000px; height: 100%; padding: 0; margin: 0 auto 0 auto; }

.container {z-index: 10; width: 98%; min-width: 300px; margin: 20px 0 40px 2%; padding-left: 10px; background: #FFF; }

div {border: 0 none;}
img {border: 0 none; }
p {width: 100%; }


/* Flex-Height - Container */
.row.is-flex { display: flex; flex-wrap: wrap; }
.row.is-flex > [class*='col-'] { display: flex; flex-direction: column; }
.row.is-flex { display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] { display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Preloader */
.preloader {position: absolute; z-index: 300; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../pix/preload.gif'); background-repeat: no-repeat; 
background-position: center;  				
background-color: #FFF;
}
 
/* Padding Rules */
.top-150 {padding-top: 150px; }
.top-120 {padding-top: 120px; }
.top-100 {padding-top: 100px; }
.top-70 {padding-top: 70px; }
.top-50 {padding-top: 50px; }
.top-40 {padding-top: 40px; }
.top-30 {padding-top: 30px; }
.top-20 {padding-top: 20px; }

.bottom-150 {padding-bottom: 150px; }
.bottom-120 {padding-bottom: 120px; }
.bottom-100 {padding-bottom: 100px; }
.bottom-70 {padding-bottom: 70px; }
.bottom-50 {padding-bottom: 50px; }
.bottom-40 {padding-bottom: 40px; }
.bottom-30 {padding-bottom: 30px; }
.bottom-20 {padding-bottom: 20px; }


/* TEXT STYLES    -----------------------------------------------------------------*/
 
a {border: 0; outline: 0; text-decoration: none; color: #4F4F58; }
a:visited {text-decoration: none; color: #4F4F58; outline: 0; border: 0;}
a:hover, a:active, a:focus {color: #df0404; font-weight: 400; border: 0; } 

a:hover, a:active {text-decoration: none; outline: none;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;}

p > a {color: #c10128; }
p > a:visited {color: #c10128; }
p > a:hover, p > a:active, p > a:focus {color: orange;} 

h1, h2, h3, h4, h5 {font-family: 'Oswald', sans-serif; color: #747474; text-transform: uppercase; text-align: left;  }

h1 {line-height: 20px; font-size: 16px; letter-spacing: 0.5px; font-weight: 300;}
h2 {line-height: 30px; font-size: 22px; letter-spacing: 1px; font-weight: 300; }
h3 {line-height: 32px; font-size: 25px; }
h4 {line-height: 40px; font-size: 40px; letter-spacing: 3px; font-weight: 900; padding-bottom: 30px; }
h5 {line-height: 65px; font-size: 55px; letter-spacing: 4px; font-weight: 900; }


.logo-text, .text1, .text2, .text3 {font-family: 'Raleway', sans-serif; }
.logo-text {color: #000; font-size: 14px; font-weight: 400;} /* Logo & Social Icons */
.text1 {font-size: 16px; line-height: 22px; font-weight: 400; color: #787676; } 
.text2 {font-size: 20px; line-height: 26px; font-weight: 300; color: #656464; } /* Home */
.text3 {font-size: 22px; line-height: 28px; letter-spacing: 0.5px; font-weight: 300; color: #656464; } /* Home */


.center {text-align: center;}
.center-block {display: block; margin-left: auto; margin-right: auto; }
.red {color: #e81b59 }

.hyphens { hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-o-hyphens: auto; 
}
.justify {text-align: justify; }

/* BUTTON Style */
.btn-primary { border: none; outline:none; background: #333; padding: 0 32px 0 32px; margin: 25px auto 20px auto; border-radius: 18px; }
.btn-primary h3 {color: #FFF; font-size: 23px; padding-bottom: 10px; letter-spacing: 1px; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: red; outline:none;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
} 
.btn-primary:visited { background: #000; outline: none }


/* ALLOVER STUFF   ---------------------------------------------------------------------*/

/* Social Icons */
#social-row {width: 100%; }
#social-icons {display: inline-block; position: absolute; z-index: 999; top: 60px; left: 85%; width: 160px; height: 32px;}
#social-icons img {position:relative; z-index: 98; float: left; left: 10px; width: 28px; height: 28px; margin-right: 18px; }


/* Logo */
#logo-box {z-index: 99; width: 80%; max-width: 300px; height: auto; margin: 30px 0 0 0; }
#logo-box img {width: 100%; }
#logo-subtext {position: relative; margin-top: 10px; opacity: 0.8 }


/* M e n u */
#menu-column {z-index: 998; left: 25px; padding: 0 0 10px 2%;}

#menu {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 27px; font-weight: 400; line-height: 40px;
list-style-type: none;
width: 100%;
min-width: 270px;   
padding: 50px 0 50px 0; 
margin: 0; 
}
#menu a {color: #4f4f4f; }	
#menu a:hover {color: red; text-decoration: none; }
#menu a.highlight {color: #df002d; letter-spacing: 3px;}
#menu h2 {display: inline; color: #df002d; font-size: 23px; letter-spacing: 0.5px;}



/* C o l u m n  R e c h t s */
#column-rechts {position: relative; margin: 200px 0 0 10px; height: auto; width: 100%; }
#column-rechts h2 {margin-top: 20px; text-align: left}

#column-rechts a:hover, #column-works a:hover, #column-cv a:hover {color: red; font-weight: 300; }

/* P r i v a c y  */
.privacy {z-index: 999; margin: -40px 0 0 25px; padding: 0 60px 60px 0; width: 95%; text-align: right; }
.privacy a {padding: 4px 20px 5px 20px; background: #FFF; color: #C8C8C8; border: 2px solid #C8C8C8; border-radius: 5px; }
.privacy a:hover {color: #838383; text-decoration: none; border: 2px solid #838383; }





/* C O N T E N T  S T U F F   --------------------------------------------------------------------*/


/* CONTENT-BOX  A L L */
.content {width: 95%; max-width: 700px; margin: 2% auto 100px auto; }
.content h5 {margin: 80px 0 80px; text-align: center; font-size: 2.7em; font-weight:400; letter-spacing: 0; color: #cacaca }
.content p {padding-top: 5px; width: 100%; height: auto; margin-bottom: 20px;}
.content span {width: 100%; height: auto; }
.content img {display: block; width: 100%; height: auto; }



/* H O M E */
.knowyourself {margin-top: 70px; text-align: center; font-size: 23px; line-height: 30px; font-weight: 300; }

#whatsnext {position: relative; width: 80%; max-width: 700px; margin: 250px auto 70px auto }
#whatsnext h4 {letter-spacing: 1px; text-align: center; margin: 0 0 50px; }
#whatsnext h3 {text-align: center; margin: 0 0 50px; }
#whatsnext h3>span {display: block; margin-bottom: -15px; font-weight: bold; }



/* A B O U T */
#about {width: 84%; margin: 80px 0 70px 8% }
#about h3 {margin: 60px 0 35px; text-align: center }


/* CV */
#cv {width: 90%; margin: 100px auto 100px auto }
#cv h3 {margin-top: 50px; font-size: 22px; color: #333; }
#cv ul {list-style: none; margin-top: 30px; padding: 0; }
#cv ul>li {margin-top: 7px; font-size: 0.95em; line-height: 1.35em; }
#cv ul>li b {font-weight: 700; color: #333; padding-right: 5px }
/* Download PDF */
#cv a h3 {color: grey; }
#cv a:hover h3 {text-decoration: none; color: red; 
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
   }

/* C o l u m n  R e c h t s  CV */
#column-cv {position: fixed; margin: 200px 0 0 10px; height: auto; width: 100%; }
#column-cv h2 {margin-top: 0; text-align: left; font-size: 1.2em; line-height: 1.2em; }




/* W O R K S */
#works {width: 96%; margin: 10px auto 0 auto; }
#works h5 {margin: 50px 0 100px 0; text-align: center; }
#works p {padding: 65px 5% 10px 0; }

.works-panels {position: relative; text-align:center;  
width: 90%; 
max-width: 400px;
height: auto; 
min-height: 200px; 
margin: 10px auto 50px auto; 
padding: 0;
}
.works-panels h3 {text-align: center; letter-spacing: 3px; font-size: 1.3em; font-weight: 400; line-height: 30px; margin: 0 0 30px; color: grey}
.works-panels a {text-decoration: none; } 
.works-panels a:hover > h3 {color: #000; } 
.works-panels a:hover > img {  zoom: 1; filter: alpha(opacity=50); opacity: 0.5;
   -webkit-transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -ms-transition: opacity .2s ease-in-out;
   -o-transition: opacity .2s ease-in-out;
   transition: opacity .2s ease-in-out;
   }



/* C o l u m n  R e c h t s */
#column-works {position: relative; margin: 200px 0 0 10px; height: auto; width: 100%; }
#column-works h2 {margin-top: 10px; text-align: left; font-size: 1.4em}


/* Curating Container mit Tooltip */
.tooltip-container { position: relative; display: inline-block; padding: 0 }
.tooltip-text { position: absolute; z-index: -1; width: auto; max-width: 80%; left: 50%; bottom: 40%; padding: 20px 10px;
  font-size: 0.9em;
  line-height: 1.2em;
  text-align: center;
  color: #000;
  background-color: #FFF;
  border-radius: 8px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  opacity: 0;
  pointer-events: none; /* verhindert Interaktion beim Ausblenden */
  transition: opacity 0.6s ease;
  -webkit-transition: opacity 0.6s ease;
  -moz-transition: opacity 0.6s ease;
  -o-transition: opacity 0.6s ease;
}

/* Tooltip anzeigen */
.tooltip-container:hover .tooltip-text,
.tooltip-container:focus-within .tooltip-text,
.tooltip-container:active .tooltip-text { z-index: 999; opacity: 0.9; pointer-events: auto; }

.tooltip-container p {text-align: center; color: grey; height: 30px; margin-top: -30px; }




/* W O R K S  - S E C T I O N S */
.small-height {margin-top: 140px }

#back-to-works {margin: 200px 0 100px 0; width: 100%; }
#back-to-works h3 {text-align: center; font-size: 28px; padding: 30px 45px 0 0 }
#back-to-works h3 > a {color: grey; }
#back-to-works h3 > a:hover {text-decoration: none; color: red; }


/* W O R K S H O P S */
#workshops {width: 95%; max-width: 700px; margin: 5px auto 100px auto; }
#workshops h5 {margin: 90px 0 -60px 0}

#workshop-content {width: 80%; max-width: 700px; margin: 130px auto 100px auto; }
#workshop-content p {margin-top: 30px; text-align: justify; }
#workshop-content img {width: 100%; margin: 40px auto 70px auto}


/* C O N T A C T */
#contact {width: 70%; margin: 90px 0 30px 15%; min-width: 300px; padding: 0; border: 0; text-align: center; }
#contact h5, #contact h3 {width: 100%; text-align:center}
#contact p {width: 100%; line-height: 24px; }

#email-panel {width: 70%; min-width: 250px; padding: 14px 40px 14px 40px; color: #000; border: 2px solid grey; border-radius: 10px}
#email-panel:hover {color: #ec0047; border: 2px solid red; text-decoration: none; }

/* P R E S S  &  L I N K S */
#links {width: 80%; margin: 80px auto 70px auto; padding: 0; border: 0; }
#links h3, #links h5 {text-align: center; margin: 50px 0 25px; }

#links a {display: block; width: 100%; margin-bottom: -12px; text-align: center; color: grey}
#links a:hover, #links a:active {text-decoration: none; color: red; 
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
   }
#links a:visited {border:none;outline:none}    



/* M E D I A   Q U E R I E S ------------------------------------------------------------------------------------ */


/* LG */
@media (min-width: 992px) and (max-width: 1199px) { 
#privacy {margin: 0 0 40px 70%; }
#whatsnext {width: 90%; }
.small-height {margin-top: 150px }
.tooltip-container p {margin-top: -25px; }
#workshops h5, #workshops h1, #workshop-intro {padding: 5px 2% 0 14% }
#workshops h5 {margin: 100px 0 -80px 0}
#workshop-content {width: 90%; }
}

/* MD */
@media (min-width: 768px) and (max-width: 991px) {
#social-icons {left: 75%; }
.privacy {margin-top: 200px; width: 100%; text-align: center; }
#column-rechts, #column-works, #column-cv {margin-top: 80px }
#column-rechts h2, #column-works h2, #column-cv h2 {text-align: center}
.preloader { z-index: 300; left: 5%; width: 90%; height: 90%; }
.knowyourself {margin: 100px 0 30px; font-size: 19px; line-height: 27px; }
#whatsnext {width: 95%; }
#cv {width: 95%; margin-left: 5% }
#column-cv {position: relative; } /* remove fixed*/
#about {width: 97%; margin: 100px 0 70px 5% }
#works {width: 100%; margin: 100px 0 0 5%; }
.works-panels {margin: 10px auto 50px auto; }
.small-height {margin-top: 140px }
#workshops h5, #workshops h1, #workshop-intro {padding: 5px 5% 0 15% }
#workshop-content {width: 60%; }
#contact {margin: 120px 0 30px 15%;}
#links {width: 70%; }
}

/* SM */
@media (min-width: 569px) and (max-width: 767px) { 
#logo-box {margin: 50px 0 0 0; }
#social-icons {top: 25px; left: 65%; }
.privacy {margin-top: 170px; width: 100%; text-align: center; }
#column-rechts, #column-works, #column-cv {margin-top: 80px; }
#column-rechts h2, #column-works h2, #column-cv h2 {text-align: center}
.knowyourself {margin: 40px 0 30px; font-size: 20px; line-height: 28px; }
#whatsnext {width: 80%; }
#whatsnext h4, #whatsnext h3 {font-size: 1.3em; letter-spacing: 0; line-height: 1.35em;}
#cv {width: 85%; }
#column-cv {position: relative; } /* remove fixed*/
#about {width: 90%; margin: 30px 0 70px 5% }
#works {width: 80%; margin-top: 60px; }
.works-panels {margin: 30px auto 50px auto; }
.small-height {margin-top: 80px }
#workshops h5, #workshops h1, #workshop-intro {padding: 5px 7% 0 9% }
#workshops h5 {margin: 30px 0 40px 0}
#workshop-content {width: 70%; }
#contact {margin: 60px 0 30px 15%;}
#links {width: 80%; }
}

/* XS*/
@media (max-width: 568px) { 
.container {width: 98%; margin: 20px 0 40px 0; padding-left: 10px; background: #FFF; }
#logo-box {margin: 40px 0 0 0; }
#social-icons {top: 25px; left: 65%; }
#social-icons img {width: 25px; height: 25px; margin-right: 15px; }
.privacy {margin-top: 150px; width: 100%; text-align: center; }
#menu-column {left: 10px; padding: 40px 0 30px 3%;}
#column-rechts, #column-works, #column-cv { margin: 80px 0 0 0;}
#column-rechts h2, #column-works h2, #column-cv h2 {text-align: center}
h5 {letter-spacing: 2px; }
.knowyourself {margin: 0; font-size: 20px; line-height: 28px; }
#whatsnext {width: 95%; }
#whatsnext h4, #whatsnext h3 {font-size: 1.3em; letter-spacing: 0; line-height: 1.35em;}
#cv {width: 90%; }
#column-cv {position: relative; } /* remove fixed*/
#about {width: 94%; margin: 30px 0 70px 0 }
#works {width: 94%; margin-top: 30px;  }
.works-panels {margin: 10px 0 0 10%; }
#works p {padding: 55px 2% 35px 0; }
.small-height {margin-top: 50px }
#workshops h5, #workshops h1, #workshop-intro {padding: 5px 2% 0 9% }
#workshops h5 {margin: 50px 0 40px 0}
#workshop-content {width: 80%; }
#contact {width: 90%; margin: 10px 0 30px 0; min-width: 270px; padding: 0;}
#links {width: 95%; }
}

/*Extra */
@media (max-width: 480px) { 
#social-icons {top: 25px; left: 55%; }
.knowyourself {font-size: 16px; line-height: 22px; }
#whatsnext {width: 95%; }
#cv {width: 103%; padding-left: 3%}
.rslides_container {margin-bottom: 20px; }
#workshops h5 {font-size: 50px; letter-spacing: 0; margin: 20px 0 10px 0 }
#workshop-content {width: 90%; }
}




/* ANIMATIONS   -------------------------------------------------------------------------------------------------------------*/

/* Fade-In 1 --------------*/
.fadein1 { opacity: 0; 
 animation-iteration-count: 1;
 animation: slfade 1.8s 0.8s forwards;
-moz-animation: slfade 1.8s 0.8s forwards; 
-webkit-animation: slfade 1.8s 0.8s forwards; 
-o-animation: slfade 1.8s 0.8s forwards;
}
@-moz-keyframes slfade { from{ opacity:0;} to {opacity:1;} }
@-webkit-keyframes slfade { from{ opacity:0;} to {opacity:1;} }
@-o-keyframes slfade { from{ opacity:0;} to {opacity:1;} }
@keyframes slfade { from{ opacity:0;} to {opacity:1;} }


/* GROW-Dot */
.grow-dot {display: block; border: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.grow-dot:hover, .grow-dot:focus, .grow-dot:active { animation: grow-dot 0.35s ease-in-out 2 alternate; }
@-webkit-keyframes grow-dot {to {transform: scale(1.08); } }
@-moz-keyframes grow-dot {to {transform: scale(1.08); } }
@-o-keyframes grow-dot {to {transform: scale(1.08); } }
@keyframes grow-dot {to {transform: scale(1.08); } }


/* Icon-Pop */
.icon-pop {display: block; border: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.icon-pop:hover, .icon-pop:focus, .icon-pop:active { animation: i-pop 0.2s ease-in-out 2 alternate; }
@-webkit-keyframes i-pop {to {transform: scale(1.25); } }
@-moz-keyframes i-pop {to {transform: scale(1.25); } }
@-o-keyframes i-pop {to {transform: scale(1.25); } }
@keyframes i-pop {to {transform: scale(1.25); } }


/* Background Color Change */
.color-change { animation: color-ch 4s infinite;
-webkit-animation: color-ch 4s infinite;
-moz-animation: color-ch 4s infinite;
-o-animation: color-ch 4s infinite;
}
@-webkit-keyframes color-ch { 0%{background: #333} 50%{background: #e2002f} 100%{background: #333} }
@-moz-keyframes color-ch { 0%{background: #333} 50%{background: #e2002f} 100%{background: #333} }
@-o-keyframes color-ch { 0%{background: #333} 50%{background: #e2002f} 100%{background: #333} }
@keyframes color-ch { 0%{background: #333} 50%{background: #e2002f} 100%{background: #333} }

/* Text Color Change */
.textcolor-change { animation: text-ch 4s infinite;
-webkit-animation: text-ch 4s infinite;
-moz-animation: text-ch 4s infinite;
-o-animation: text-ch 4s infinite;
}
@-webkit-keyframes text-ch { 0%{color: #333} 50%{color: #e2002f} 100%{color: #333} }
@-moz-keyframes text-ch { 0%{color: #333} 50%{color: #e2002f} 100%{color: #333} }
@-o-keyframes text-ch { 0%{color: #333} 50%{color: #e2002f} 100%{color: #333} }
@keyframes text-ch { 0%{color: #333} 50%{color: #e2002f} 100%{color: #333} }