/* ================= general ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: 0;
  
  }
  a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  }
  ol, ul {
      list-style: none;
  }
  
  body {	
      background: white;
    }
    
    
  /* ============== typography ============== */
  html {font-size: 1rem;}
  body {line-height: 1.5; font-family: Arial, sans-serif; overflow-wrap: break-word; }
  html:lang(ja-JP) body {font-family: "Meiryo", Arial, sans-serif; }
  .overlay h1{font-size: 1.2rem; text-transform: uppercase; letter-spacing: 10px; font-weight: normal;}
  .overlay h2{font-size: 1rem; font-weight: bold;}
  .teaserHeadline{font-size: 1.2rem; font-weight: bold;}
  .teaserButton{font-weight: bold;}
  .sitemapHeader{font-weight: bold;}
  nav ul li {text-transform: uppercase; font-size: 0.9rem;}
  .ti h3{font-size: 1.4rem; font-weight: bold;}
  
  @media all and (min-width: 600px){
    .overlay h1{font-size: 1.6rem;}
  }
  
  @media all and (min-width: 1200px){
    html {font-size: 1.25rem;}
  }
  /* ============== layout ============== */
  
  body{
    overflow-x: hidden;
  }
  
  .mainGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0.5em, 1fr) minmax(300px, 1640px) minmax(0.5em, 1fr);
    grid-template-columns: minmax(0.5em, 1fr) minmax(300px, 1640px) minmax(0.5em, 1fr);	
  }
  
  .tiWrapper{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0.5em, 1fr) minmax(300px, 1450px) minmax(0.5em, 1fr);
    grid-template-columns: minmax(0.5em, 1fr) minmax(300px, 1450px) minmax(0.5em, 1fr);	
  }
  
  .spacebeforeMedium::before,
  .spaceafterMedium::after{
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / -1;
    content: '';
    display: block;
    height: 5em;
  }
  
  .spacebeforeLarge::before,
  .spaceafterLarge::after{
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / -1;
    content: '';
    display: block;
    height: 7em;
  }
  
  /* ============ animations general ====== */
  
  /* ============ animations ============= */
  
  @media (min-width: 300px){	
    .animateIn{
      opacity: 0;	
      transition: opacity 700ms ease-in, transform 350ms ease-in;
      transform: translateY(10%);
    }
  
    .animateIn.appear{
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @media (min-width: 800px){
    .animateIn{		
      transition: opacity 700ms ease-in, transform 350ms ease-in 100ms;
      transform: translateY(25%);
    }
  }
  
  
  
  
  
  /* =============== nav ============== */
  .topMenu {
    position: absolute;
    right: 1em;
    top: .5em;
    color: white;
    display: flex;
  }
  
  .openNav{
    font-size: 2rem;
    cursor: pointer;
  }
  
  .openNav::before{
    content: "\2630";
  }
  
  .closeNav{
    position: absolute;
    right: 0.25em;
    top: 0;
    font-size: 2.5rem;
    cursor: pointer;
  }
  .closeNav::before{
    content: "\d7";
  }
  
  .pageContent,
  .navWrapper{
    transition: transform .75s;
  }
  
  .pageContent.navClosed{
    transform: translateX(0);
  }
  .pageContent.navOpen{
    transform: translateX(-250px);
  }
  
  .navWrapper{
    position: fixed;
    top: 0;
    left: 100%;
    width: 250px;
    height: 100%;
    background: #111;
    color: white;
    display: flex;
    z-index: 1001;
  }
  
  .navWrapper.isClosed{
    transform: translateX(0);
  }
  
  .navWrapper.isOpen{
    transform: translateX(-250px);
  }
  
  nav{
    width: 100%;  
    position: relative;
  }
  
  nav ul{
    display: flex;
    flex-direction: column;
  }
  
  nav li{
    border-top: 1px solid #CCC;
    padding: 1em;
    text-align: center;
    width: 75%;  
    margin: 0 auto;
  }
  
  nav li:first-child{
    border-top: none;
  }
  
  .navLogo img{
    margin-top: 0.5em;
    max-width: 50px;
  }
  
  .mobileNav{
    background: black;  
    position: fixed;
    display: none;
    top: 0;
    width: 100%;
    z-index: 1000;  
    translate:unset;
  }
  .mobileNav.scrolled{
    display: flex;
  }
  .mobileNav img{
    max-width: 50px;
    margin: 0 auto;
    padding: 0.25em;
    align-self: flex-start;  /*safari bugfix */
  }
  .mobileNav .topMenu{
    top: -0.25em;
  }
  
  /* ============ hero ================= */
  
  .hero{
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / -1;
    position: relative;  
    height: 600px;
  }
  .heroImage{
    width: 100%;
    height: 600px;
    object-fit: none;
    object-position: 32% 0;
  }
  .overlay{position: absolute; left: 5%; top: 20%; color: white; }
  .company{display: flex;}
  .company img { align-self: flex-start; } /*safari bugfix */
  .services{margin: 5em 0 0 5.3em;}
  .services ul,
  .services li{margin: .5em 0 0 0;}
  .services li:first-child{margin: 1em 0 0 0;}
  .companyLogo{max-width: 64px; height: auto; }
  .overlay h1{margin-left: 1em;}
  
  
  .heroV2Overlay{
    position: absolute;
    top: 0;
    left: 5%;
    width: 80%;
    max-width: 800px;
    height: 0%;
    background: rgba(00,206,209,.45);
    background: rgba(00,156,159,.85);
  }
  
  .heroCoding .heroV2Overlay{
    background: rgba(00,156,159,.85);  
  }
  
  .heroContact .heroV2Overlay{
    background: rgba(00,156,159,.85);
  }
  
  .heroV2Textbox{
    color: white;
    padding: 2em;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
  }
  
  .heroV2Textbox p{
    margin-top: 1em;
  }
  
  
  
  @media all and (min-width: 600px){    
    .heroImage{    
      object-position: 25% 0;
    }
    .companyLogo{max-width: 100px;}
    .overlay h1{ margin-left: 2em;}  
    .services{margin: 5em 0 0 9.3em;}
    .heroV2Overlay{    
      left: 7%;
      width: 60%;    
    }
  }
  
  @media all and (min-width: 1000px){
    .hero {
      height: auto;
    }
    .heroImage{
      height: 100%;
      object-position: 25% 0;
    }
    .heroV2Overlay{    
      left: 140px;
      width: 700px;    
    }
  }
  
  @media all and (min-width: 1920px){
    .heroImage{    
      object-fit: cover;
    }
  }
  
  
  /* ============ hero animations ================ */
  .companyLogo,
  .overlay h1, .overlay h2,
  .overlay li{opacity: 0;}
  
  @keyframes herofade{ 
    100% {opacity: 1;}
  }
  
  .companyLogo,
  .overlay h1, .overlay h2,
  .overlay li{
    animation: herofade .75s forwards;  
  }
  .companyLogo, .overlay h1{
    animation-delay: .5s;
  }
  .overlay h2{
    animation-delay: 1s;
  }
  .overlay li{
    animation-duration: 2s;
  }
  .overlay li:nth-child(1){
    animation-delay: 2s;
  }
  .overlay li:nth-child(2){
    animation-delay: 3s;
  }
  .overlay li:nth-child(3){
    animation-delay: 4s;
  }
  
  /* ============ heroV2 animations ================ */
  
  
  @keyframes herov2rollin{ 
    100% {height: 100%;}
  }
  
  .heroV2Overlay{
    animation: herov2rollin 1.5s forwards; 
    animation-delay: .25s; 
  }
  
  .heroV2Textbox h2, .heroV2Textbox p{
    opacity: 0;
    animation: herofade .75s forwards;  
  }
  
  .heroV2Textbox h2{
    animation-delay: 1.5s;
  }
  
  .heroV2Textbox p{
    animation-delay: 1.5s;
  }
  
  /* =========== bodytext =========== */
  
  p.bodytext{
    -ms-grid-column: 2;
    grid-column: 2;  
    max-width: 570px;
    margin: 1em auto;
  }
  
  
  .certificationLogos{
    -ms-grid-column: 2;
    grid-column: 2;  
    max-width: 570px;
    margin: 1em auto;
    display: flex;
    justify-content: space-between;
  }
  
  .certificationLogos img{
    width: 30%;
    max-width: 160px;
  }
  
  
  /* =========== text & image ========= */
  
  .ti{
    -ms-grid-column: 2;
    grid-column: 2;  
    justify-content: center;
    display: flex;
    flex-direction: column;  
  }
  
  .ti .images,
  .ti .texts{
    align-self: center;
    max-width: 750px;
  }
  
  .ti img{
    width: 100%;  
  }	
  
  .ti h3{
    margin-top: 1em;
  }
  
  .ti .text p{
    margin-top: 1em;
  }
  
  
  @media (min-width: 1200px){	
      
    .ti .text{		
      max-width: 570px;
    }
  
    .ti.left .texts{
      padding: 0 0 0 3em;
    }
  
    .ti.right .texts{    
      padding: 0 3em 0 0;
    }
  
    .ti .images{
      margin-top: 0.5em;
    }
  
  
    .ti h3{
      margin-top: 0;
    }
      
    .ti.left	{
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: minmax(350px, 700px) minmax(350px, 750px);
      grid-template-columns: minmax(350px, 700px) minmax(350px, 750px);
    }
    
    .ti.right	{
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: minmax(350px, 650px) minmax(350px, 700px);
      grid-template-columns: minmax(350px, 650px) minmax(350px, 700px);
      justify-content: left;
    }
    
    .ti .texts,
    .ti .images{
      align-self: auto;
      -ms-grid-row: 1;
      grid-row: 1;
    }
  
    .ti.left .texts{
      -ms-grid-column: 2; 
      grid-column: 2;	
    }
    
    .ti.left .images{
      -ms-grid-column: 1; 
      grid-column: 1;	
    }
    
    .ti.right .texts{
      -ms-grid-column: 1; 
      grid-column: 1;	
    }
    
    .ti.right .images{
      -ms-grid-column: 2; 
      grid-column: 2;	
    }
  
      
  }
  
  
  /* =========== teasers =========== */
  
  .teasers{
    -ms-grid-column: 2;
    grid-column: 2;  
    margin: 0 auto;    
  }
  
  .teaser{
    margin: 3em 0 0 0;
    padding: 2em 0;  
  }
  
  .teaserHeadlineWrapper{
    text-align: center;
    margin-bottom: 1.5em;
  }
  
  .teaserHeadline{ 
    margin: 0 auto;
    border-bottom: 3px solid #00ced1;
    padding: 0 .5em .5em .5em;  
  }
  
  .teaserText{
    max-width: 500px;
  }
  
  .teaserButtonWrapper{
    margin: 3em 0 0 0;
    text-align: center;
  }
  
  .teaserButton{  
    margin: 0 auto;
    background: #00ced1;
    color: white;
    padding: 1em 2em 1em 2em;
    border-radius: 1em;
    transition: .5s;
  }
  
  .teaserButton:hover{
    background: white;
    border: 1px solid #00ced1;
    color: #00ced1;  
  }
  
  @media all and (min-width: 1200px){
    .teasers{    
      margin-top: 2em;
      display: flex;      
      justify-content: space-between;
    }

    .teasersHome{
      max-width: 1200px;
      flex-wrap: wrap;
    }
  
    .teaser{
      display: -ms-grid;
      display: grid;
      -ms-grid-rows: 60px auto 90px;
      grid-template-rows: 60px auto 90px;    
      margin: 3em 0 0 0;
      padding: 2em;  
      
    }
  }
  
  /* ============ contact form ====== */
  
  .contactForm{
    -ms-grid-column: 2;
    grid-column: 2; 
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 800px;
    margin: 3em auto;
  }
  
  .contactForm input, .contactForm textarea{
    border: 1px solid #777;
    min-height: 40px;  
  }
  
  .contactForm textarea{
    height: 200px;
  }
  
  .contactForm label, .contactForm .button{
    margin-top: 1em;
  }
  
  .contactForm .button{  
    margin: 2em auto;
    background: #00ced1;
    border: 1px solid #00ced1;
    color: white;
    padding: 1em 2em 1em 2em;
    border-radius: 1em;
    transition: .5s;
  }
  
  .contactForm .required::after{
    content: "*";
    color: pink;
    font-weight: bold;;
  }
  
  
  /* ========== footer ============= */
  
  footer{
    background: darkslategray;
    color: white;
    padding: 3em 0 .5em 0;
    text-align: center;
  }
  
  .footerInner{
    -ms-grid-column: 2;
    grid-column: 2;  
  }
  
  .sitemap{
    max-width: 750px;
    display: flex;
    margin: 0 auto;
    justify-content: space-around;
  }
  
  footer ul li{
    margin-top: 1em;
  }
  
  .copyright{
    padding: 3em 0 .5em 0;
    display: block;
    text-align: center;
  }