html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100vh;
  margin:0;
  padding:0;
}
body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  min-height: 100vh;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: 'Roboto Slab', serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color:#fdfdfd;
}
* {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  font-family: inherit;
  -ms-touch-action: inherit;
  touch-action: inherit;
  cursor: inherit;
}
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4 {
  margin:.75em 0;
  font-family: 'Montserrat', sans-serif;
}
main,
li {
  display: block;
}
strong {
  font-weight: bold;
}
a,
button {
  color: inherit;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
a {
  text-decoration: none;
}
button {
  overflow: visible;
  border: 0;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
}
fieldset {
  border: none;
}
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:focus {
  outline: 0;
}
img {
  display: block;
  width:auto;
  max-width: 100%;
  height: auto;
  border: 0;
}
/*************************site**************************************/
#body, main {
  flex-grow:1;
  display:flex;
  justify-content:center;
  text-align:center;
  flex-direction: column;
  align-items:center;
  position:relative;
  width:100%;
}

h1{
  font-size:3em;
}
h2 {
  display:inline-block;
  position:relative;

}
h2:after {
  content : "";
  position: absolute;
  left    : 50%;
  bottom  : -.5rem;
  height  : 0;
  width: 65%;
  transform:translateX(-50%);
  border-bottom:.15rem solid #26b2d0;
}
span.blue {
  color:#26b2d0;
}
.contact {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
  background: #26b2d0;
  position: absolute;
  clip-path: circle(0 at 100% 0);
  transition: clip-path 650ms cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity:0;
}
#body.open div.contact {
  background-color:#26b2d0;
  clip-path: circle(500% at 100% 0);
  pointer-events: initial;
  opacity: 1;
}
#body.open div.contact .blue {
  color:black;
}
div.contact a.close{
  position:absolute;
  top:1em;
  right:1em;
  font-size:3em;
}
p.web-job{
  display:inline-block;
}
p.web span {
  font-family: 'Roboto Mono', monospace;
}
p.web span.title {
  display:inline-block;
  border-right: .1em solid transparent;
  width:calc(4ch + .11em);
  transition: width 0.5s steps(9, end) .25s;
  overflow: hidden;
  height: 1.1em;
  word-break: break-all;
}
p.web:hover span.title {
  border-right: .1em solid orange;
  width:calc(13ch + .11em);
  animation: 
    text-edit .75s step-end infinite;
}
p.web span.title::before {
  content: '<';
}

p.web span.title::after {
  content: '-utviklar';
}
p.web::after {
  content: '>';
  font-family: 'Roboto Mono', monospace;
}
p.web {
  padding-right:  0;
  transition: padding-right 0.5s steps(9, end) .25s;
}
p.web:hover {
  padding-right: 9ch;
}
p.gfx span.title {
  position:relative;
}
@keyframes text-edit {
  from, to { border-color: orange; }
  50% { border-color: transparent }
}

input, textarea {
  width: 100%;
  padding: .5em;
  margin: .5em 0;
}

label {
  text-align: left;
  width: 100%;
  display: inline-block;
}

h1 a {
  cursor: pointer;
}
h1 a span.blue {
  animation-name: wiggle;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 50% 67.5%;
  display:inline-block;

}

@keyframes wiggle {
  0% {transform: rotate(0deg) scale(1);}
  38.5% {transform: rotate(0deg) scale(1);}
  40% {transform: rotate(0deg) scale(1.5);}
  41% {transform: rotate(7.5deg) scale(1.5);}
  45% {transform: rotate(-7.5deg) scale(1.5);}
  49% {transform: rotate(0deg) scale(1.5);}
  50.5% {transform: rotate(0deg) scale(1);}
  100% {transform: rotate(0deg) scale(1);}
}

p.gfx:hover span.title:after {
  content: '';
  display: inline-block;
  position: absolute;
  right: -5.5em;
  bottom: -.5em;
  background-image: url(../images/designar-sprite2.png);
  background-repeat: no-repeat;
  background-position: 0 -2378px;
  width: 123px;
  height: 41px;
  animation: designar 1s steps(58) 1;
  animation-fill-mode:both;
  transform: scale(.6);

}

@keyframes designar {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2378px;
  }
}


section#customers {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2em;
  width: 100vw;
  max-width: 40em;
  padding: 1em;
}
section#customers div {
    display:none;
  }
@media only screen and (min-width: 40em) {
  section#customers {
    grid-template-columns: repeat(4, 1fr);
  }
  section#customers div {
    display:block;
  }
}
section#customers img {
  object-fit: contain;
  object-position: 50%;
  width: 100%;
  height: 2.5em;
  filter: grayscale(1);
  opacity:.75;
}
section#customers img:hover {
  filter: grayscale(0);
  opacity:1;
  transition: all .25s ease-in-out;
}