@import url('https://fonts.googleapis.com/css?family=Cinzel|Hind+Madurai|Shadows+Into+Light');

* {padding:0;margin:0;}
body {overflow-x:hidden;}
header{grid-column:span 3;text-align:center;}
nav {background-color:none;padding:5px;}
main {flex:1;padding:2%;}
aside {padding:5%;}
footer {grid-column: span 3;padding: 1%; background-color:#1a1a1a; color:grey;min-height:10vh;display: -webkit-box;display: -ms-flexbox;display:flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-family:'Cinzel',serif;}
footer a{color:grey; font-family: 'Cinzel', serif;}
footer a:hover {color:lightgrey; text-decoration: none;}

.bodycontainer {display: flex; flex-direction: column; min-height: 100vh;}
@media (min-width: 1000px) {.bodycontainer {display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto;}}

.introduction {max-width:100%;font-family:'Hind Madurai',sans-serif;min-height:100vh;background-image:url("./../dest/img/coverdjfitschi.png"),linear-gradient(#1a1a1a,rgb(0,0,0));background-repeat:no-repeat;background-size:cover;background-blend-mode:screen;}
.introduction .nav-animation {background-color:#1a1a1a;border:none;position:fixed;width:100%;min-height:5vh;}
.introduction nav {width:100%;z-index:10;-webkit-transition: all 0.5s;transition: all 0.5s;display: -webkit-box;display: -ms-flexbox;display: flex;min-height: 8vh;border-bottom: 1px solid #1a1a1a;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color:#1a1a1a;}
.introduction nav #logo {padding: 0px 20px;-ms-flex-preferred-size: 50%;flex-basis: 50%;font-family: 'Cinzel', serif;display: -webkit-box;display: -ms-flexbox;display: flex;}
.introduction nav #logo .swirlPath {stroke: white;stroke-width: 1;stroke-miterlimit:10;fill: white;}
.introduction nav .nav-links {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-pack: distribute;justify-content: space-around;-ms-flex-preferred-size: 50%;flex-basis: 50%;}
.introduction nav .nav-links a {color: white;text-decoration: none;}
.introduction nav .nav-links :hover {opacity:0.6;}
.introduction .headline {color: white;min-height:80vh;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.introduction .headline h2 {margin: 20px 0px;font-weight: 100;font-size:20px;}
.introduction .headline p {font-size: 16px;margin: 20px 0px;}
.introduction .headline button {font-family:'Cinzel',serif;margin: 20px 0px;background: #1a1a1a;border:2px solid #1a1a1a;padding: 10px 35px;font-weight: bold;color: white;cursor: pointer;}

.production .production-intro {font-family: 'Cinzel', serif;min-height: 30vh;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.production .production-intro h2 {font-size: 20px;padding: 20px 0px;}
.production .production-gallery {font-family: 'Cinzel', serif;margin: 3em;display: grid;grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));grid-gap: 2em;}
.production .production-gallery div {-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.production .production-gallery div p {opacity: 0;color: white;position: absolute;top: 80%;right: 50%;-webkit-transform: translate(50%, -80%);transform: translate(50%, -80%);-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.production .production-gallery div:hover {-webkit-transform: translateY(-5px);transform: translateY(-5px);}
.production .production-gallery div:hover p {display: block;opacity: 1;}
.production .production-gallery .reveal-img {opacity: 1;-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
.production .production-gallery img {position: relative;z-index: -1;display: block;-webkit-transform: translate(0px, 100px);transform: translate(0px, 100px);-webkit-transition: all 1s;transition: all 1s;opacity: 0;width: 100%;height: 400px;-o-object-fit: cover;object-fit: cover;}

.membership {min-height: 30vh;}
.membership .member-title {font-family: 'Cinzel', serif;min-height: 30vh;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.membership .member-title h2 {font-size: 20px;margin: 20px 0px;}
.membership form {min-height: 30vh;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-pack: distribute;justify-content: space-around;}
.membership form input {min-width: 20%;min-height: 4vh;}
.membership form button {font-family: 'Cinzel', serif;margin: 20px 0px;background: #1a1a1a;border: 2px solid #1a1a1a;padding: 10px 35px;font-weight: bold;color: white;cursor: pointer;}
.membership .gallery {font-family: 'Cinzel', serif;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 2%; border: 1px solid #ccc;float: left;width: 20%;}
.membership .gallery:hover {border: 1px solid #777;}
.membership .gallery img {width: 100%;height: auto;}

@media screen and (max-width: 1000px) {
  .introduction nav {height: 70px;-ms-flex-wrap: wrap;flex-wrap: wrap;}
  .introduction nav .nav-animation {background-color: #1a1a1a;border: none;position: fixed;width: 100%;}
  .introduction nav #logo {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: inherit;-ms-flex-preferred-size: 100%;flex-basis: 100%;position: relative; }
  .introduction nav #logo .burger {z-index: 100;padding: 50px;position: absolute;right: 0px;cursor: pointer;}
  .introduction nav #logo .burger .line1,
  .introduction nav #logo .burger .line2,
  .introduction nav #logo .burger .line3 {width: 20px;height: 3px;background-color: white;margin: 4px 0px;}
  .introduction nav #logo .burger .line1 {-webkit-transition: all 0.5s;transition: all 0.5s;}
  .introduction nav #logo .burger .line1-animate {-webkit-transform: rotateZ(45deg) translate(40%, 50%);transform: rotateZ(45deg) translate(40%, 50%);}
  .introduction nav #logo .burger .line2 {-webkit-transition: all 0.5s;transition: all 0.5s;}
  .introduction nav #logo .burger .line2-animate {width: 0%;}
  .introduction nav #logo .burger .line3 {-webkit-transition: all 0.5s;transition: all 0.5s;}
  .introduction nav #logo .burger .line3-animate {-webkit-transform: rotateZ(-45deg) translate(45%, -50%);transform: rotateZ(-45deg) translate(45%, -50%);}
  .introduction nav .nav-links {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: absolute;right: 0;top: 0;background-color: #1a1a1a;min-height: 30vh;width: 100%;text-align: center;opacity: 0;-webkit-transition: all 0.5s;transition: all 0.5s;}
  .introduction nav .burger-animation {opacity: 1;width: 100%;}
  .introduction .headline h1 {font-size: 20px;}
  .introduction .headline p {padding: 0px 10px;text-align:center;line-height:1.6em;}
  
  .production .production-intro {min-height: 40vh;}
  .production .production-intro h1 {font-size: 20px;}
  .production .production-intro p {padding: 10px 10px;text-align: center;}
  .production .production-gallery {margin: 0;display: block;}
  .production .production-gallery div:hover {-webkit-transform: translateY(0px);transform: translateY(0px);}
  .production .production-gallery div:hover p {text-align: center;line-height: 1.5em;}
  .production .production-gallery img {border-bottom: 2px solid black; }

  .membership .member-title {min-height: 50vh;font-family: 'Cinzel', serif;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
  .membership .member-title h1 {font-size: 20px;padding: 20px 0px;}
  .membership .member-title p {text-align: center;}
  .membership form input {width: 80%;} 
  }

.social {font-size: 0;text-align: center;}
.social li {display: inline-block;padding-top: 30px;padding-bottom: 30px;padding-left: 0px;padding-right: 15px;}
.social li:first-child {padding-left: 0 !important; }
.social li:last-child {padding-right: 0 !important; }
.social li svg {vertical-align: middle;fill: #a9a9a9;height: 25px;opacity: 1;width:25px;}
.social a {display: block;text-align: center;background: rgba(255, 255, 255, 0.1);height: 30px;line-height: 30px;text-align: center;width: 30px;border-radius: 4px;}
.social a:hover {background: rgba(255, 255, 255, 0.15); }
.social a:hover svg {fill: #eee;opacity: 1;}
@media (max-width: 768px) {.social li {padding-top: 24px;padding-bottom: 24px;padding-left: 0px;padding-right: 12px;}}
@media (max-width: 540px) {.social li {padding-top:20px;padding-bottom:20px;padding-left:0px;padding-right:10px;}}

.container {font-size:1.5em; color:#ffffff;padding:2%;text-align:center; background-color:#1a1a1a;}
.container a {color: rgba(255, 255, 255, 0.15);text-decoration: none;}
.container a:hover {color:#ffffff;text-decoration: none;}
.blackfilter{-webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);} 
.responsivetile {max-width:100%; height:100%;}
.grid{width: 100%; height: 50vmax; margin-left: auto; margin-right: auto; padding: auto; position: relative;  background-color: #3a3a3a;}
.tile {background-color: transparent; position:absolute;width:10%;height:10%;}
#tile1{top: 0%;left: 2%;width: 47%;height: 80%;}
#tile2{top: 2%;left: 10%;width: 80%;height: 80%;}
#tile3{bottom:2%;right:2%;width: 10%;height: 10%;}
#tile4{bottom:2%;left:2%;width: 22%;height: 15%;}
#tile5{top: 3%;left: 5%;width: 66%;text-align:center;}
#running{max-width:100%;max-height:100%;background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(38, 35, 3, 0.2)), url("./../dest/img/running-medallien.png");background-size:100% 100%; background-position:center center;background-repeat:no-repeat;}
#tile6{top: 15%;left:15%;width: 50%;height: 40%;}
#tile7{bottom:10%;right: 10%;width: 35%;height: 35%;}
#tile12{top:20%;right:5%;width:25%; height:25%;}
#resume{max-width:100%;max-height:100%;background-image: url("./../dest/img/resume-christian.jpg");background-size:25%; background-position:top right;background-repeat:no-repeat;}
#tile8{top: 2%;left: 10%;width: 80%;text-align:center;}
#tile9{top: 25%;left: 3%;width: 70%;height: 72%;overflow: scroll;}
#tile10{top:5%;left:5%;width:100%;}
#tile11{top:5%;right:2%;width:25%;height:25%}
#tile13{top:30%;right:10%;width:80%;height:35%}
#tile19{bottom:5%;right:2%;width:20%;height:20%}