/***************************************************************************************/
/* Fonts */
/***************************************************************************************/

/* With help of https://google-webfonts-helper.herokuapp.com */

/* titillium-web-italic - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/titillium-web-v9-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/titillium-web-v9-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* titillium-web-regular - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/titillium-web-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/titillium-web-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/titillium-web-v9-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/titillium-web-v9-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

* {
  
  font-family: Titillium Web, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;

}

b, strong {
  
  font-weight: 600;    
  
}

@supports not (-webkit-touch-callout: none) {

  * {
      font-weight: 400;
  }
      
  b, strong {
      font-weight: 600;
  }    
  
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/***************************************************************************************/
/* General */
/***************************************************************************************/

html, body {
    
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;    
}

body {
    
    display: flex;
    flex-direction: column;
}
 
div.page {
    
    flex: 1 0 auto;
    width: 100vw;
    max-width: 40em;
    text-align: left;
    line-height: 2em;
    margin: 0 auto;
     
}

div.page main {
    
    padding: 1em 1em 3em 1em;
    
}

h1 {
    line-height: 1.1em;    
}

h2 + p {
    margin-top: -1em;
}

h3 + p {
    margin-top: -1em;
}

a {
    transition: color 0.3s ease, background-color 0.1s ease;
}

a.button {
    padding: .2em 2em;
    border-radius: 1em;
}

header {
    
    position: sticky;
    top: 0;
    z-index: 1;
    
}

footer {
    
    width: 100%;
    text-align: center;
    padding: 1em 0;
    font-size: 0.7em;
    flex-shrink: 0;
    
}

img.logo {
    -webkit-user-select: none;
    user-select: none;
}

ul.welcome-language-list {
    padding: 0;
    list-style-type: none;
    margin: 6em auto 0 auto;
    text-align: center;
}

ul.welcome-language-list li {
    margin-bottom: 2em;
}

/***************************************************************************************/
/* Responsive Elements */
/***************************************************************************************/

/*** MOBILE ***/

div.responsive-dot-delimiter {
    height: 1em;
}

div.mobile-only {
    display: block;
}

div.desktop-only {
    display: none;
}

span.desktop-only {
    display: none;
}

div.desktop-line-break {
    display: none;
}

ul.horizontal-button-group {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
}

ul.horizontal-button-group li {
    margin-top: 2em;
}

ul.horizontal-button-group li:first-child { 
    margin-top: 0;   
}

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

    /*** DESKTOP ***/
    
    div.responsive-dot-delimiter {
        display: inline-block;   
    }
    
    div.responsive-dot-delimiter:after {
        content: ' · ';
    }
    
    div.mobile-only {
        display: none;
    }
    
    div.desktop-only {
        display: block;
    }
    
    span.desktop-only {
        display: inline;
    }
    
    div.desktop-line-break {
        display: inline;
    }
    
    div.desktop-line-break::after{
        display: inline;
        content: "\a";
        white-space: pre;
    }
    
    ul.horizontal-button-group li {
        display: inline-block;
        margin-left: 1.1em;
    }
    
    ul.../zontal-button-group li:first-child { 
        margin-left: 0;   
    }

}

/***************************************************************************************/
/* Light Mode (default) */
/***************************************************************************************/

.dark-mode {
    display: none;
}

* {
    color: #333;
}

body {
    background: #fff;
}

a,
a:visited {
    color: #0080a4;
    text-decoration: none;
}

a:hover {
    color: #00c7ff;
    text-decoration: none;
}

a.button,
a.button:visited {
    background-color: #44a6c1;
    color: #fff;    
}

a.button:hover {
    color: #fff;
    background-color: #5AB5CE;
}

div.menu-bar {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

div.menu-bar a,
div.menu-bar a:visited,
div.menu-bar a:hover {
    color: #000;
}

textarea,
input[type=email] {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #000;     
}

input[type=submit] {
    color: #000; 
    background-color:#efefef;  
    border:1px solid #ddd;
}

input[type=submit]:active {
    background-color:#f6f6f6;
}

footer {
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}

ul.hideable-menu {
     background: rgba(255, 255, 255, 0.95);
}

.menu-button div.slice {
    background: #000;
}

.menu-button input.burger:checked ~ div.slice {
    background: #000;
}

div.help-item-wrap {

    border-bottom: 1px solid #ddd;
    
}

div.notice {
  
  margin: 0 auto;
  text-align: center;
  border-radius: .3em;
  background-image: linear-gradient(180deg, #00B73F, #00BC41);
  color: white;
  padding: 1em;
  font-size: 1.3em;
  margin-bottom: 3em;
  
}

/***************************************************************************************/
/* Dark Mode */
/***************************************************************************************/

@media (prefers-color-scheme: dark) {

    .light-mode {
        display: none;
    }
    
    .dark-mode {
        display: unset;
    }
        
    * {
        color: #fff;
    }
    
    body {
        background: #202020;
    }
    
    a,
    a:visited {
        color: #5AB5CF;
        text-decoration: none;
    }
    
    a:hover {
        color: #00c7ff;
        text-decoration: none;
    }
    
    a.button,
    a.button:visited {
        background-color: #085164;
        color: #fff;    
    }
    
    a.button:hover {
        color: #fff;
        background-color: #095f76;
    }
    div.menu-bar {
        background-color: #252525;
        border-bottom: 1px solid #555;
    }
    
    div.menu-bar a,
    div.menu-bar a:visited,
    div.menu-bar a:hover {
        color: #fff;
    }
    
    textarea,
    input[type=email] {
        background-color: #333;
        border: 1px solid #555;
        color: #fff;     
    }

    input[type=submit] {
        color: #fff; 
        background-color:#626262;   
        border:1px solid #282828;
    }
    
    input[type=submit]:active {
        background-color:#f6f6f6;
    }
    
    footer {
        border-top: 1px solid #555;
        background-color: #232323;
    }
    
    ul.hideable-menu {
        background: rgba(0, 0, 0, 0.89);
    }
    
    .menu-button div.slice {
        background: #eee;
    }
    
    .menu-button input.burger:checked ~ div.slice {
        background: #eee;
    }
    
    div.help-item-wrap {
    
        border-bottom: 1px solid #555;
        
    }
}

/***************************************************************************************/
/* Menu Bar */
/***************************************************************************************/

div.menu-bar ul.hideable-menu li.narrow {
    display: block;
}

div.menu-bar ul.wide-menu {
    display: none;
}

div.menu-bar {
    text-align: center;    
}

div.menu-bar img.logo {
    margin-left: 0;    
}
 
@media screen and (min-width: 600px) {

    div.menu-bar ul.hideable-menu li.narrow {
        display: none;
    }
    
    div.menu-bar ul.wide-menu {
        display: inline-block;
    }
    
    div.menu-bar {
        text-align: left;    
    }
    
    div.menu-bar img.logo {
        margin-left: 3.5em;
    }
     
}

div.menu-bar ul.wide-menu {
    
    position: absolute;
    left: 7em;
    top: .5em;
    margin: 0;
    padding: 0;
    list-style-type: none;

}

div.menu-bar ul.wide-menu li {
    
    display: inline-block;
    font-size: 1.1em;
    
}

div.menu-bar ul.wide-menu li:first-child {
    margin-left: -.5em;
}

div.menu-bar ul.wide-menu li a {
    
    padding: .2em 1em;
}

div.menu-bar {
    
    display: block;
    padding: .3em 0 .1em 0;
    -webkit-user-select: none;
    user-select: none; 
}

div.menu-bar * {
    user-select: none;
}

div.menu-bar img.logo {
    
    width: 2em;
    height: 2em;
}

div.menu-bar .menu-button {              position: absolute; left:  .7em; top:  1em; }
div.menu-bar ul.hideable-menu {          position: absolute; left: -.7em; top: -1em; }
div.menu-bar .menu-button input.burger { position: absolute; left: -.5em; top: -1em; }
div.menu-bar div.page-overlay {          position: fixed;    left: 0;     top: 0;}

div.menu-bar .menu-button {    
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

/* Transparent checkbox used as a stateful button; placed over hamburger */
div.menu-bar .menu-button input.burger {
    
    display: block;
    width: 3.5em;
    height: 2.8em;
    
    cursor: pointer;
    
    opacity: 0;
    z-index: 2;
    
    -webkit-touch-callout: none;
  
}

/* Hamburger slice */
div.menu-bar .menu-button div.slice {

    position: relative;
    
    width: 1.2em;
    height: 2px;
    margin-bottom: 3px;
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 3px 0px;
    
    transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.3s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.2s ease;

}

/* Hamburger top slice */
div.menu-bar .menu-button div.slice:first-child {
    transform-origin: 0% 0%;
}
/* Hamburger bottom slice */
div.menu-bar .menu-button div.slice:nth-last-child(2) {
    transform-origin: 0% 100%;
}

/* General slice transformation */
div.menu-bar .menu-button input.burger:checked ~ div.slice {
    
    opacity: 1;
    transform: rotate(45deg) translate(2px, 0px);
    
}

/* Hide middle slice */
div.menu-bar .menu-button input.burger:checked ~ div.slice:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

/* Turn last slice in the other direction */
div.menu-bar .menu-button input.burger:checked ~ div.slice:nth-last-child(2) {
    transform: rotate(-45deg) translate(0px, 3px);
}

/* Position menu outside */
div.menu-bar ul.hideable-menu {
    
    width: 100vw;
    
    margin: 0;
    padding: 2em 0;

    text-align: center;
        
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    
    transform-origin: 0% 0%;
    transform: translate(0, -120%);
    
    transition: transform .3s cubic-bezier(0.77,0.2,0.05,1.0);
    
    -webkit-box-shadow: -2px -27px 66px 35px rgba(0,0,0,0.51);
    -moz-box-shadow: -2px -27px 66px 35px rgba(0,0,0,0.51);
    box-shadow: -2px -27px 66px 35px rgba(0,0,0,0.51);

}

div.menu-bar div.page-overlay {
    
    width: 100vw;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity .3s ease;
    
}

/* Cancel transformation when checkbox is on */
div.menu-bar .menu-button input.burger:checked ~ ul.hideable-menu {
    transform: none;
}

/* Show page overlay */
div.menu-bar .menu-button input.burger:checked ~ div.page-overlay {
    opacity: 1;
}

div.menu-bar ul.hideable-menu li {
   
    padding: 0;
    font-size: 1.1em;  
}

div.menu-bar ul.hideable-menu li a {
    display: inline-block;
    padding: 1em 2em;
}

div.menu-bar ul.hideable-menu li.parent a {
    font-weight: 600;    
    letter-spacing: .05em;
}

div.menu-bar ul.hideable-menu li.label {
    font-weight: 600;
    color: #999;
    padding: 1em 2em;
}

div.menu-bar ul.hideable-menu li.child a,
div.menu-bar ul.hideable-menu li.language a {
    padding: .4em 2em;
}

div.menu-bar ul.hideable-menu li.parent + li.child,
div.menu-bar ul.hideable-menu li.label + li {
    margin-top: -.4em;
}

div.menu-bar ul.hideable-menu li.current {
    margin-left: -1em;
}

div.menu-bar ul.hideable-menu li.current a:before {
    content: '→ ';
}

/***************************************************************************************/
/* Help */
/***************************************************************************************/

div.help-item-wrap {
    
    padding-bottom: 2em
    ;
    margin-bottom: 3em;

}

div.help-item {
    
    padding: 0 .5em;
        
}

/***************************************************************************************/
/* Contact Form */
/***************************************************************************************/

form.contact {
    
    margin: 0;
    padding: 0;
    width: 100%;

}

form.contact * {
    
    margin: 0;
    padding: 0;
    
}

form.contact textarea {
    
    height: 15em;   
    
}

form.contact textarea,
form.contact input[type=email] {

    -webkit-appearance: none;
    box-sizing: border-box; 
    width: 100%;
    display: block;
    font-size: 1em;
    padding: .8em;
    margin-top: 1em;
    border-radius: .3em;
    
}



form.contact input[type=submit] {
    
    -webkit-appearance: none;
    float: right;
    margin-top: 1em;
	border-radius: .3em;
	display: inline-block;
	cursor: pointer;
	font-size: 1em;
	font-weight: 300;
	padding: .5em 1.6em;
    display: none;

}

form.contact input[type=submit].onetwo {
    
    display: inline;
    
}

form.contact div.attachments {
    
    margin-top: 1em;
    
}

form.contact div.clear {
    
    clear: both;
    
}

form.contact h2 {
  
  margin-top: 2em;
  margin-bottom: 1em;
  
}

form.contact p.introduction {
  
  
  
}

/***************************************************************************************/
/* Client Feedback */
/***************************************************************************************/

div.client-feedback, div.client-feedback * {
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

div.client-feedback div.feedback h3,
div.client-feedback div.feedback p {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text;
}

div.client-feedback div.feedback {
  
  margin-top: 2em;
  
}

div.client-feedback div.feedback h2 {
  
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  
}
div.client-feedback div.feedback h3 {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;
}

div.client-feedback div.feedback p {
  display: inline-block;
  background-image: linear-gradient(180deg, #319FF9, #1485F7);
  color: white;
  border-radius: 1.3em;
  padding: .7em 1em;
  line-height: 1.5em;
  margin-top: .5em;
  max-width: 80%;
  text-align: left;
}
div.client-feedback div.feedback img {
  border-radius: .3em;  
}


div.client-feedback div.feedback:nth-child(even) {
  text-align: right;
}
div.client-feedback div.feedback:nth-child(odd) {
  text-align: left;
}

div.client-feedback div.feedback:nth-child(even) h2,
div.client-feedback div.feedback:nth-child(even) h3 {
  margin-right: 3%;
}

div.client-feedback div.feedback:nth-child(odd) h2,
div.client-feedback div.feedback:nth-child(odd) h3 {
  margin-left: 3%;
}

/*** Dark Mode ***/
@media (prefers-color-scheme: dark) {
  div.client-feedback div.feedback p {
    background-image: linear-gradient(180deg, #319EF9, #1685F7);
  }
}

/*** Desktop ***/
@media screen and (min-width: 600px) {
  

  div.client-feedback div.feedback p {
    max-width: 70%;
    padding: 1em 1.3em;
  }
  
  div.client-feedback div.feedback h2 {
    font-size: 1.5em;
  }
  div.client-feedback div.feedback h2 {
    font-size: 1.3em;
  }
}