/*Credits

Author: Ben Kunstleben
Website: https://storyfacturing.design
Version: 1.0.4

The Hamburger Menue is restyled by me.
It was originally designed by
Copyright (c) 2021 by Pernika (https://codepen.io/Pernika/pen/owqeqO)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

h3,
h4,
h5,
h6,
p,
a {
  font-size: 2.5rem;
}

h1,
h2,
h3,
h4 {
  font-family: "Impact LT W01 Regular";
}

h2 {
  font-size: 5rem;
}

h3,
h4 {
  font-size: 4rem;
  letter-spacing: 0.4px;
}

img {
  width: 100%;
}

.content a {
  color: #771138;
  text-decoration: underline;
}

.content .outer-menu a {
  color: white;
  text-decoration: none;
  font-size: 5rem;
}

/*settings*/
.impact {
  font-family: "Impact LT W01 Regular";
}

.opacity07 {
  opacity: 0.7;
}

.smaller-p {
  font-size: 1.75rem;
  line-height: 1rem;
}

::selection {
  background: #771138;
  /* WebKit/Blink Browsers */
  padding: 2rem;
}

::-moz-selection {
  background: #771138;
  /* Gecko Browsers */
  color: white;
}

/*paddings&margins*/
.padding1 {
  padding: 1rem;
}

.padding2 {
  padding: 2rem;
}

.padding3 {
  padding: 3rem;
}

.padding3_0 {
  padding: 3rem 0;
}

.padding7 {
  padding: 7rem;
}

.padding7_0 {
  padding: 7rem 0;
}

/*displays*/
.flex {
  display: flex;
}

/*nav not in header*/
.outer-menu .hamburger>div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fefefe;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger>div:before,
.outer-menu .hamburger>div:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.4s ease;
}

.outer-menu .hamburger>div:after {
  top: 10px;
}

.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .menu>div {
  width: 80%;
  height: 100%;
  color: #fefefe;
  transition: all 0.4s ease;
  flex: none;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .menu>div>div {
  text-align: center;
  max-width: 90%;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .menu>div>div>ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}

.outer-menu .menu>div>div>ul>li {
  padding: 0;
  margin: 1em;
  font-size: 5rem;
  display: block;
}

.outer-menu .menu>div>div>ul>li>a {
  display: inline;
  cursor: pointer;
  transition: color 0.4s ease;
  font-family: "Impact LT W01 Regular";
}

.outer-menu .menu>div>div>ul>li>a:hover {
  color: #e5e5e5;
}

.outer-menu .menu>div>div>ul>li>a:hover:after {
  width: 100%;
}

.outer-menu .menu>div>div>ul>li>a:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: #e5e5e5;
  transition: width 0.4s ease;
}

/*---radio-btn*/

/*---END HEADER & NAV ___*/

/*------home-----*/

.home-first-sections {
  grid-area: first-section;
  height: 100vh;
  display: flex;
  align-items: center;
  height: 0vh;
  /*  animation-name: minify;
  animation-duration: 4s;
  animation-iteration-count: 1;
  opacity: 0;*/
}

/*.home-first-sections:target{
  animation-direction: reverse;
  animation-name: minify;
  animation-duration: 3s;
  animation-iteration-count: 1;
  height: 100vh;
  opacity: 1;
}*/

@keyframes minify {
  0% {
    height: 100vh;
    opacity: 1;
  }

  33% {
    height: 100vh;
  }

  70% {
    opacity: 1;
  }

  100% {
    height: 0vh;
    opacity: 0;
  }
}

@keyframes blend-in {
  0% {
    opacity: 0;
  }

  100% {
    height: 0vh;
    opacity: 0;
  }
}

/*-----------main---------------*/

.main-img {
  padding: 0;
  margin: 0;
}

/*captions-home*/
#portfolio {
  margin-bottom: 12rem;
}

#portfolio h2 {
  font-size: 3rem;
  letter-spacing: 0.5px;
}

.img-description {
  font-size: 1rem;
}

.anders-img {
  grid-area: anders-img;
}

.anders-caption {
  min-height: auto;
  grid-area: anders-caption;
}

.teresa-img {
  grid-area: teresa-img;
}

.teresa-caption {
  min-height: auto;
  grid-area: teresa-caption;
}

.hakon-img {
  grid-area: hakon-img;
}

.hakon-caption {
  min-height: auto;
  grid-area: hakon-caption;
}

.jochen-img {
  grid-area: jochen-img;
}

.jochen-caption {
  min-height: auto;
  grid-area: jochen-caption;
}

.vera-img {
  grid-area: vera-img;
}

.murat-img {
  grid-area: murat-img;
}

.murat-caption {
  min-height: auto;
  grid-area: murat-caption;
}

.text-orientation-home-captions {
  display: flex;
  align-items: center;
}

.img-description {
  min-height: auto;
  margin: 3rem 0rem;
}

.img-title h2 {
  font-size: 4rem;
  padding: 0rem 3rem;
}

.hakon-caption.text-orientation-home-captions,
.vera-caption.text-orientation-home-captions,
.teresa-caption.text-orientation-home-captions {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.vera-caption {
  min-height: auto;

  grid-area: vera-caption;
}

/*END captions-home*/
/*page*/
.maingrid.page {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 7% 86% 7%;
  grid-template-areas:
    "header header header"
    "page-first-sections page-first-sections page-first-sections"
    "footer footer footer";
}

/*about*/
.about-section {
  grid-area: about;
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 2rem;
  grid-template-columns: 7.1% 28.66% 28.66% 28.66% 7.1%;
  grid-template-areas:
    "ben-img ben-img ben-img ben-img ben-img"
    ". about-me-text about-me-text about-me-text ."
    ". philospohie philospohie philospohie . ";
}

.ben-img {
  grid-area: ben-img;
}

.ben-caption {
  height: 0;
  visibility: hidden;
}

#about-me-text {
  grid-area: about-me-text;
}

#philosophie {
  grid-area: philospohie;
}

/*-----footer-----*/
footer {
  margin-top: 4rem;
  grid-area: footer;
}

.footer {
  color: rgb(197, 197, 197);
  letter-spacing: 0.12rem;

  height: auto;
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 7.1% 28.66% 28.66% 28.66% 7.1%;
  grid-template-areas:
    ". contact-section contact-section contact-section ."
    ". credits credits credits .";
}

.footer a {
  color: rgb(197, 197, 197);
}

.contact-me {
  font-size: 2.5rem;
}

.footer h2 {
  letter-spacing: 0.2rem;
  font-size: 4rem;
}

.contact-section {
  grid-area: contact-section;
  display: grid;
  grid-template-areas:
    "contact-me contact-me contact-me"
    "information-footer information-footer information-footer"
    "information-footer-right information-footer-right information-footer-right";
}

.credits {
  grid-area: credits;
  font-size: 1.8rem;
}

.contact-me {
  grid-area: contact-me;
}

.information-footer {
  grid-area: information-footer;
}

.information-footer-right {
  grid-area: information-footer-right;
}

.copyrigth-left {
  display: none;
}

/*additional styling settings*/
a.no-underline {
  text-decoration: none;
}

.outer-menu {
  display: inline-block;
}

@media screen and (max-width: 360px) {
  .outer-menu .menu>div>div>ul>li {
    margin: 0.1em;
  }
}

@media screen and (min-width: 760px) {

  /*home*/
  .main {
    grid-row-gap: 7rem;
    grid-template-areas:
      "hakon-img hakon-img hakon-img hakon-img hakon-img"
      ". hakon-caption hakon-caption hakon-caption . "

      "jochen-img jochen-img jochen-img jochen-img jochen-img"
      ". jochen-caption jochen-caption jochen-caption . "
      "vera-img vera-img vera-img vera-img vera-img"
      ". vera-caption vera-caption vera-caption . "


      "anders-img anders-img anders-img anders-img anders-img"
      ". anders-caption anders-caption anders-caption . "

    ;
  }
}

@media screen and (min-width: 1024px) {
  .main {
    grid-row-gap: 14rem;
    grid-template-areas:
      "hakon-img hakon-img hakon-img hakon-img hakon-img"
      ". hakon-caption hakon-caption hakon-caption . "
      "jochen-img jochen-img jochen-img jochen-img jochen-img"
      ". jochen-caption jochen-caption jochen-caption . "
      ". vera-caption . vera-img vera-img"



      "anders-img anders-img anders-img anders-img anders-img"
      ". anders-caption anders-caption anders-caption . "
    ;
  }

  .about-section {
    grid-area: about;
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 2rem;
    grid-template-columns: 7.1% 26.66% 6% 26.66% 26.66% 7.1%;
    grid-template-areas:
      ". ben-caption . ben-img ben-img ben-img"
      ". about-me-text . ben-img ben-img ben-img"
      ". philospohie philospohie philospohie . . ";
    margin-bottom: 14rem;
  }

  .contact-section {
    grid-area: contact-section;
    display: grid;
    grid-template-columns: 30% 5% 30% 5% 30%;
    grid-template-areas: "contact-me . information-footer . information-footer-right .";
  }
}

@media screen and (min-width: 1025px) {
  .content {
    min-width: 760px;
  }

  #home-first-sections {
    min-width: 760px;
    min-height: 100vh;
  }

  .content.maingrid.page {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 28% 44% 28%;
    grid-template-areas:
      "header header header"
      ". page-first-sections ."
      "footer footer footer";
  }

  h2 {
    font-size: 7rem;
    letter-spacing: 0.4px;
  }

  h3 {
    font-size: 8rem;
    letter-spacing: 0.4px;
  }
}

@media screen and (min-width: 1300px) {

  /*home*/
  .content p,
  .content a,
  .content li {
    font-size: 3rem;
  }

  h2 {
    font-size: 8rem;
  }

  h1 {
    letter-spacing: 0;
    font-size: 7rem;
  }

  .main {
    grid-area: main;
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 14rem;
    grid-template-columns: 15% 20% 20% 20% 25%;
    grid-template-areas:
      "hakon-img hakon-img hakon-img hakon-img hakon-img"
      ". . . hakon-caption hakon-caption "
      "jochen-img jochen-img jochen-img jochen-img jochen-img"
      ". . . jochen-caption jochen-caption "
      ". vera-caption . vera-img vera-img"


      "anders-img anders-img anders-img anders-img anders-img"
      ". . . anders-caption anders-caption "
    ;
  }

  .vera-caption.text-orientation-home-captions,
  .teresa-caption.text-orientation-home-captions {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  #portfolio {
    margin-bottom: 28rem;
  }

  #portfolio h2 {
    font-size: 8rem;
    letter-spacing: 0.5px;
  }

  .ben-caption {
    height: auto;
    visibility: visible;
    grid-area: ben-caption;
  }

  .about-section {
    grid-area: about;
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 2rem;
    grid-template-columns: 7.1% 28.66% 28.66% 28.66% 7.1%;
    grid-template-areas:
      ". ben-caption ben-img ben-img ben-img"
      ". . about-me-text . ."
      ". . philospohie . . ";
    margin-bottom: 14rem;
  }

  #about-me-text>h2 {
    text-align: left;
  }

  .footer {
    grid-template-columns: 7.1% 28.66% 28.66% 28.66% 7.1%;
    grid-template-areas:
      ". contact-section contact-section contact-section ."
      ". credits credits credits .";
  }

  .line-break {
    display: none;
  }

  .copyrigth-left {
    display: inline-block;
  }
}

@media screen and (min-width: 1800px) {
  .main {
    grid-row-gap: 42rem;
  }

  #portfolio h2 {
    font-size: 9rem;
  }

  .ben-caption.main-color.flex-center h2 {
    font-size: 7rem;
  }

  .footer h2 {
    font-size: 6rem;
  }



  .content p,
  .content a {
    font-size: 4rem;
  }
}