.logoBig div{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}


.logoBig{
  width: 10vw;
  max-width: 150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(3);
  transition-duration: 0.4s;
}

.logoBig img{
    max-width: 100%;
}


*{
font-family: 'Source Sans Pro', sans-serif;
}

body{
  background-color: #222;
}


a{
  text-decoration: none;
  color: #ccc;
}

.about a{
  color: #666;
  text-decoration: underline;
  transition-duration: 0.3s;
}

.about .submenuContent a{
  color: #eee;
  text-decoration: none;
}


.about a:hover{
  font-weight: bold;
}

.about b a:hover{
  font-weight:bolder;
}

.about .submenu{
  margin-top: 3em;
  font-weight: bold;
  font-size: 1.1em;
}

.about .submenu #projectManagementLi p{
  color:#CC8250
}

.about .submenu #systemDevelopmentLi p{
  color:#9E6CE5
}

.about .submenu #graphicsLi p{
  color:#47B568
}

.about .submenu #knowledgeLi p{
  color:#5094D8
}

.about .submenu #projectManagementLi.selected p,
.about .submenu #systemDevelopmentLi.selected p,
.about .submenu #graphicsLi.selected p,
.about .submenu #knowledgeLi.selected p
{
  color: #eee;
}

#headerMenu{
  top:0;
  position: sticky;
  z-index: 3;
}

header{
  display: flex;
  justify-content:space-between;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
  background: #222;
  top:0;
  left: 0;
  right: 0;
  transition-duration: 0.2s;
  background-color: #222;
}

header.largeScreen{
  display: flex;
}

header.mobile{
  display: none;
}

header.mobile .logoBig{
  width: 75vw;
  max-width: 400px;
  transform: scale(1);
  margin-bottom: 10px;
}

.NotAtTop header.mobile .logoBig {
  transform: scale(1);
  max-width: 100px;
  margin-bottom: 2px;
}

header.mobile .mobileNav{
  display: flex;
}

.spacer{
  height: 20px;
  width: 100%;
  transition-duration: 0.2s;
  background-color: #222;
}

  .NotAtTop header .logoBig {
    transform: scale(2);
  }

  .NotAtTop .spacer{
    height: 0;
  }

.headerLinkSmall{
  display: none;
}

.headerLinkBig{
  display: block;
}

header p{
  margin: 0 20px;
  font-size: 1.1em;
  align-self: flex-end;
}


header p:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
  transition-timing-function:ease-out;
}

header p:hover a{
  text-decoration: underline;
}

header div{
  align-self: flex-end;
}

.maskotBig{
  width: 160px;
  margin: -35px auto -70px;
  display: block;
  position: relative;
  z-index: 2;
  transition: 0.2s;
}

  .maskotBig:hover{
    transform: scale(1.15);
    cursor:pointer;
  }


.gameDevelopmentSection .MiOLogo{
  width: 80vw;
  max-width: 600px;
  margin-top: 4em;
  margin-bottom: 2em;
}

.gameDevelopmentSection{
  position: relative;
  z-index: 1;
  padding: 0 3em;
}

  .gameDevelopmentSection .gameDevelopmentIntro{
    text-align: center;
    background-position: center;
    display: block;
  }

  .gameDevelopmentSection img.poster{
    max-width: none;
    width: 100%;
  }


.screenshotSection{
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.gameDevelopmentSection .screenshotSection h1:first-child{
  position: relative;
  width: 100%;
  text-shadow: -2px -2px 0  #5B1314, 2px -2px 0 #5B1314, -2px 2px 0 #5B1314, 2px 2px 0 #5B1314;
  z-index: 2;
  color: #982223;
  font-size: 4em;
  margin: 0;
}

.gameDevelopmentSection .screenshotSection img{
    width: 49%;
    min-width: 380px;
    max-width: none;
    margin: 10px 0;
    box-sizing: border-box;
    transform: scale(1);
    transition-duration: 0.2s;

  }

  .gameDevelopmentSection .screenshotSection section img{
      width: 32%;
      min-width: 190px;
      max-width: none;
      margin: 10px 0;
      box-sizing: border-box;
      transform: scale(1);
      transition-duration: 0.2s;

    }

  .gameDevelopmentSection .screenshotSection img:hover{
      transform: scale(1.1);
    }

.gameDevelopmentSection h1:first-child{
  margin-top: 50px;
}

  .gameDevelopmentSection .gameDevelopmentIntro section{
    background: rgba(0,0,0, 0.2);
    display: block;
    top: 50vw;
    left: 0;
    right: 0;
    position: absolute;
    max-width: 600px;
    padding: 20px;
    box-sizing: border-box;
  }
    .gameDevelopmentSection .gameDevelopmentIntro section h3{
      font-weight: bold;
      font-size: 1.6em;
      color: #bbb;
      text-align: center;
      margin: 0 auto;
    }

    .gameDevelopmentSection .gameDevelopmentIntro section h4{
      font-weight: bold;
      font-size: 1.3em;
      color: #bbb;
      text-align: center;
      margin: 0.5em auto 0;
    }

  .gameDevelopmentSection div{
    background-color: #B2A197;
    width: 600px;
    padding: 20px;
    margin: 0 auto;
    max-width: 80vw;
  }

  .gameDevelopmentSection a{
    color:#000;
    text-decoration: underline;
    width: 100%;
  }

  .gameDevelopmentSection a.showcaseLink{
    color: #bbb;
  }

  .gameDevelopmentSection a.showcaseLink:hover{
    transform: scale(1.2);
    transition-duration: 0.3s;
    transition-timing-function:ease-out;
  }

  .gameDevelopmentSection p{
    text-align: center;
  }

  .gameDevelopmentSection p.link:hover{
    transform: scale(1.2);
    transition-duration: 0.3s;
    transition-timing-function:ease-out;
  }

  .gameDevelopmentSection img{
    max-width: 500px;
    margin: 0 auto -60px;
    display: block;
    width: 70vw;
  }

  .gameDevelopmentSection .textHeavy{
    width: 900px;
    max-width: 80vw;
    box-sizing: border-box;

  }

  .gameDevelopmentSection div.marginTop{
      padding-top: 40px;
  }

  .gameDevelopmentSection .textHeavy p{
    text-align: left;
  }

  .gameDevelopmentSection .newsBox{
    width: 200px;
    margin: 40px;
    color: #ccc;
    max-width: 100%;
    background-color: rgba(20, 20, 20, 0.7);
    display: inline-block;
  }

    .gameDevelopmentSection .newsBox img{
      display: block;
      margin: 0 auto;
      max-width: 100%;
    }

    .gameDevelopmentSection div .newsBox p{
      text-align: center;
    }

 .gameDevelopmentSection .developers{
    text-align: center;
    color:#ccc;
    display: block;
  }

.developers img{
  margin: 0 auto;
  max-width: none;
}

 .developers h1:first-child{
    margin-top: 0;
  }

  .gameDevelopmentSection section{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .gameDevelopmentSection div:last-child {
    text-align: center;
    margin-bottom: 80px;
  }

  .gameDevelopmentSection div:last-child.textHeavy p{
    text-align: center;
  }

  .gameDevelopmentSection div:last-child.textHeavy h2{
    text-align: center;
    font-size: 1.1em;
  }

  .gameDevelopmentSection div:last-child.textHeavy h3{
    text-align: center;
    font-size: 2em;
    margin: 0 auto;
  }

  .gameDevelopmentSection div.gameIntro{
      color: #aaa;
      position: relative;
      margin-top: 20px;
      width: 900px;
      box-sizing: border-box;
      background-color:#201514;
      padding: 20px;
  }

   .gameDevelopmentSection .gameIntroLink{
      margin: 2em auto 0;
      height: 40px;
      transform: scale(1);
      transition: 0.2s;
      cursor: pointer;
  }

  .gameDevelopmentSection .gameTrailerLink{
     margin: 0.5em auto 0;
     height: 40px;
     transform: scale(1);
     transition: 0.2s;
     cursor: pointer;
 }

 .gameTrailerLink:hover{
     transform: scale(1.1);
 }

  .gameIntroLink:hover{
      transform: scale(1.1);
  }



  .gameDevelopmentSection .aliceSection{
    background-image: url(AlderinCountryside.svg);
    background-size: cover;
    text-align: center;
    background-position: center;
    display: block;
  }

  .gameDevelopmentSection .aliceSection img{
    margin: 0 auto 1em;
  }

  .gameDevelopmentSection .aliceSection img.groupImage{
    width: 100%;
    max-width: none;
    margin: -2em auto 0;
 }

 .gameDevelopmentSection .aliceSection h3{
   margin: 0 auto -2em;
   color: #ccc;
   font-size: 1.8em;
   text-align: center;
   position: relative;
   z-index: 2;
   padding: 0.25em 0;
   text-shadow: -2px -2px 0  #666, 2px -2px 0 #666, -2px 2px 0 #666, 2px 2px 0 #666;
/*   background: rgba(0, 0, 0, 0.5); */
 }


    .gameDevelopmentSection .aliceSection section{
      max-width: 610px;
      background: rgba(0,0,0, 0.4);
      padding: 1em;
      margin-bottom: 4em;
      box-sizing: border-box;
    }


    .gameDevelopmentSection .aliceSection p{
      color: #ccc;
      text-align: left;
      font-size: 1.2em;
      margin: 0 auto;
    }

    .gameDevelopmentSection .development {
      display: block;
      background-image: url(draw.jpg);
      background-size: cover;
      padding: 1em;
      background-position: center;
    }

    .gameDevelopmentSection .development h1{
      position: relative;
      width: 100%;
      text-shadow: -2px -2px 0  #5B1314, 2px -2px 0 #5B1314, -2px 2px 0 #5B1314, 2px 2px 0 #5B1314;
      z-index: 2;
      color: #982223;
      font-size: 4em;
      margin-top: 0;
    }

    .gameDevelopmentSection .development img{
      width: 100%;
      margin-top: 0;
      max-width: none;
    }

    .development section{
      max-width: 610px;
      background: rgba(0,0,0, 0.85);
      padding: 1em;
      box-sizing: border-box;
      color: #bbb;
    }

    .development section p{
      text-align: left;
    }

  section{
    text-align: center;
    margin: 0 auto 40px;
  }

  h3{
    text-align: left;
  }

  section ul{
    list-style: none;
    margin: 0 auto 40px;
    text-align: center;
    padding: 0;
  }

  section li{
    display: inline;
    margin: 10px;
  }



.blogSection{
    max-width: 900px;
    background: #aaa;
    width: 100vw;
    text-align: left;
    padding: 15px;
}


.aboutBody section{
    color: #666;
    background-color: #ccc;
    margin-bottom: 0;
}

.about img{
    width: 300px;
    max-width: 90vw;
    border-radius: 100%;
}

.aboutHeader .headerTextParent{
    position: relative;
}

.about h1{
    font-size: 3em;
    padding-top: 0.5em;
    margin: 0.2em auto;
}

.aboutHeader h4{
    position: absolute;
    left: 50%;
    font-size: 2em;
    transform: translate(-50%, 0);
    bottom: 0;
    color:#333;
    background: linear-gradient(90deg, rgba(204,130,80,1) 0%, rgba(158,108,229,1) 33%, rgba(71,181,104,1) 66%, rgba(80,148,216,1) 100%);
    padding: 0 5px;
}

.about ul{
  margin: 20px auto 0;
  align-items: stretch;
}

.about ul li{
  cursor: pointer;
  transition-duration: 0.3s;
  transform: scale(1);
  display: inline-block;
  padding: 5px 5px 20px;
  text-align: left;
  margin-bottom: 0;
}

.about .submenuContent ul{
  max-width: 800px;
  width: 80vw;
  margin: 0 auto;
  text-align: left;
}

.about .submenuContent ul li
{
  cursor: auto;
  display: list-item;
  list-style: circle;
  padding: 0;
  margin: 0 auto;
  max-width: 90%;
}

.about .submenuContent ul li:hover
{
  transform: scale(1);
  text-decoration:none;
}

.about ul li:hover{
  transform: scale(1.2);
  transition-timing-function:ease-out;
  text-decoration: underline;
}

.about ul li p{
  max-width: inherit;
  width: auto;
  margin: inherit;
  color:#444;
  text-align: inherit;
}

  .about ul li.selected p{
    color:#eee;
  }

.about p{
  max-width: 800px;
  width: 80vw;
  margin: 0 auto;
  text-align: left;
}

.about .hide{
  display: none;
}

.about .selected{
  color: #eee;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: scale(1.2);
}

    .about ul li.selected:hover{
      color: #eee;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      transform: scale(1.3);
    }

.about hr{
  margin: 20px auto 30px;
  border: 1px solid #bbb;
  max-width: 450px;
}

.aboutBody .submenuContent{
  background-color: #666;
  color: #eee;
  padding-top: 15px;
  padding-bottom: 30px;
  margin-top: -1px;
}

.quote::before{
  content: "\201C";
  font-size: 5em;
  font-weight: bold;
  line-height: 0.2;
  vertical-align: bottom;
}

.about .quote{
  font-size: 1.3em;
  margin-top: 1em;
}

.quote span{
  font-style: italic;
  font-size: 0.7em;
  display: block;
  text-align: right;
}

.quote span span{
  font-size: 1.2em;
  font-style: normal;
  display: inline;
}


@media only screen and (max-width: 1000px) {

  .gameDevelopmentSection{
  }

  .spacer{
    height: 15px;
    width: 100%;
    transition-duration: 0.2s;
    background-color: #222;
  }

  header {
    padding: 5px;
  }

  .NotAtTop header .logoBig {
    transform: scale(2.5);
  }

  .gameDevelopmentSection .gameDevelopmentIntro section h3{
    font-size: 1.4em;
  }

  .gameDevelopmentSection .gameDevelopmentIntro section h4{
    font-size: 1em;
  }

  .gameDevelopmentSection .screenshotSection img:hover{
      transform: scale(1);
    }

  .gameDevelopmentSection .gameDevelopmentIntro section{
    background: rgba(0,0,0, 0.4);
    top: 47vw;

  }



  .gameDevelopmentSection .screenshotSection img{
      width: 100%;
      min-width: 380px;
      max-width: none;
      margin: 10px 0;
      box-sizing: border-box;
    }

  .gameDevelopmentSection .aliceSection img.groupImage{
    margin: 0 auto;
  }

   .gameDevelopmentSection .aliceSection h3{
     margin: 0 auto;
   }

  .gameDevelopmentSection .development h1{
    font-size: 2em;
  }

  .gameDevelopmentSection .screenshotSection h1:first-child{
    font-size: 2em;
  }

  .maskotBig{
    width: 160px;
    margin: -15px auto -70px;
    display: block;
    position: relative;
    z-index: 2;
  }


  section li{
    display: block;
  }

  header{
  }
/*
  .headerLinkSmall{
    display: block;
  }
*/
  header p{
    margin: 20px auto 0;
  }

  header div{
    margin: 0 auto;
  }
    header div p{
      margin-top: 0;
    }
/*
  .headerLinkBig{
    display: none;
  }
*/
  .about ul{
    margin: 20px 0;
    display: flex;
    flex-direction: column;
  }

  .about .submenu{
    display: flex;
    justify-content: center;
  }

  .submenu div{
  }

  .about ul li{
    text-align: left;
    max-width: 300px;
    margin: 0.2em auto 0 0;
    padding-bottom: 5px;
  }

  .about ul li.selected{
    border-top-left-radius: initial;
    border-top-right-radius: initial;
    transform: scale(1);
  }

  .about ul li.selected:hover{
    border-top-left-radius: initial;
    border-top-right-radius: initial;
    transform: scale(1.2);
  }

}

@media only screen and (max-width: 850px) {

  body{
    margin: 0;
  }

  .about p{
  }

  .gameDevelopmentSection .screenshotSection section img{
    width: 100vw;
  }

  .gameDevelopmentSection .screenshotSection img {
    margin: 10px 0;
    min-width: auto;
  }

  .gameDevelopmentSection img {
    margin: 0 auto;
}

  .developers img{
    width: 100vw;
  }

  .gameDevelopmentSection .gameDevelopmentIntro section {
    position: static;
    background-color: #272828;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .gameDevelopmentSection .gameDevelopmentIntro section h3{
    font-size: 1.2em;
  }

  section{
    margin: 0 auto 20px;
  }

  .gameDevelopmentSection .aliceSection h3 {
    font-size: 1.2em;
  }

  .gameDevelopmentSection{
    padding: 0;
  }

  .gameDevelopmentSection .gameDevelopmentIntro{
    padding: 0;
  }

  header.largeScreen{
    display: none;
  }

  header.mobile{
    display: block;
  }

  .spacer{
    height: 10px;
  }

}