html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }


@font-face {
  font-family: 'idolwild';
  src: url("../fonts/idolwild-webfont.woff");
  src: url("../fonts/idolwild-webfont.ttf");
}
@font-face {
  font-family: 'andadabold';
  src: url("../fonts/andada-bold-webfont.woff2") format("woff2"), url("../fonts/andada-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'andadaitalic';
  src: url("../fonts/andada-italic-webfont.woff2") format("woff2"), url("../fonts/andada-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'andadaregular';
  src: url("../fonts/andada-regular-webfont.woff2") format("woff2"), url("../fonts/andada-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'montserratmedium';
  src: url("../fonts/montserrat-medium-webfont.woff2") format("woff2"), url("../fonts/montserrat-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'andadaregular', 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.5;
  color: #111;
}
@media screen and (min-width: 520px) {

  body {
    font-size: 21px;
  }
}

a {
  color: #84986f;
  text-decoration: underline;
}

a.noline {
  text-decoration: none;
} 

h1 {
  padding-bottom: 0;
  margin-bottom: 0;
  text-align: center;
  color: #84986f;
}


h2 {
    color: #444;
    font-size: 21px;
    font-family: 'montserratmedium', sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

h3 {
  color: #34481f;
  font-family: 'montserratmedium';
  font-weight: normal;
}


ul {
  padding-left: 0;
}
.nolist {
  list-style: none
}

.link {
  text-decoration: none;
  color: #222;
}




.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  /*min-height: 100vh;*/
}

@media (min-width: 750px) {
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  header, nav {
    width: 90%;
    margin: 0 auto;
  }


  /** grid **/

  .container{
    display: grid;
    width: 90%;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1rem;
  }

  .heading, .back {
    grid-column: span 5;
  }

  .intro1, .skills1, .contact {
    grid-column: span 3;
  }

  .intro2, .skills2, .elsewhere {
    grid-column: span 2;
  }

  .projects, .organising {
    grid-column: span 5;
  }

  .item.projects.introtext {
    padding-right: 10%;
    padding-left: 10%;
  }


  footer {
    grid-column: span 5;
    padding: 20px 0 50px 0;
  }
}

.wrap-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 30px 0;
  text-transform: center;
}

.item {
  /*border: 1px #dedede dashed;
  padding: 13px;*/
  min-height: 150px;
}

.flex-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


nav {
  padding: 20px 0;
}

.nav li {
  width: 45%;
}

.nav li a {
  display: block;
  padding: 3px 8px;
  text-align: left;
  color: #444;
  font-family: 'montserratmedium', sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.nav li a:hover {
  color: #999;
}

@media (min-width: 500px) {
  .nav li {
    width: auto;
    min-width: 220px;
  }
}

@media (min-width: 700px) {
    .nav li {
      min-width: 150px;
    }
  }

  .flex-block-item {
    display: flex;
    align-items: center
  }

  .skills2 {
    padding: 15px;
    position: relative;
  }

  .flex-skills ul {
  list-style: none;
  margin-left: 0;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  }


  .item-skills {
    line-height: 100%;
    background: #444;
    color: #fff;
    padding: 8px 21px;
    border-radius: 21px;
    margin: 0 13px 21px 0;
  }

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

  img.pad {
    padding-right: 8px;
    padding-left: 8px;
  }

  .img-wrapper-logo {
    margin-top: 15px;
    text-align:center;
  }

  .flex-org {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 600px){
  .flex-org {
    flex-direction: row-reverse;
  }


  .item-org.image {
    flex: 2;
    align-self: flex-start;
    padding-top: 25px;
  }

  .item-org.text {
    flex: 3;
    padding-left: 30px;
  }

}


.flex-projects {
  display: flex;
  flex-direction: column;
}


@media (min-width: 1100px){
  .flex-projects {
    flex-direction: row;
    justify-content: space-between;
  }
  .item-projects {
    flex: 1 auto 33%;
    width: 33%;
  }

  .item-projects.freelance {
    padding-right: 20px;
  }
  .item-projects.agency {
    padding-left: 10px;
    padding-right: 10px;
  }
  .item-projects.own {
    padding-left: 20px;
  }
}

.item-projects ul {
  margin-left: 21px;
}

 /* blue
 #121828 #19223b #222e50 #4a546f

  violet
  #190718 #3e103c   #663c63 #aa92a8

  #green
  545915 #73773f

  #cerulean
  #2e646f #73979f
*/
.html {background: #190718;}
.responsive {background: #3e103c;}
.js {background:  #663c63;}
.react {background:/* #61dafb;*/#aa92a8; }
.php {background: #19223b}
.sql {background: #73773f;}
.python {background: #73979f; }
.django {background: #2e646f}
.git {background: #545915;}

.wordp {background: #222e50}
.silverst {background:#4a546f;}
.conc5 {background: #121828}
.unix {}
.puppet {background: #999}
.vagrant {background: #441141;}
.ansible {}

.flex-back {
  display: flex;
  margin-bottom: 21px;
}

.flex-back img {
  margin-right: 8px;
  margin-bottom: -3px;
  width: 24px;
  height: 24px;
}

.flex-icon {
  display: flex;
}

.icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-right: 5px;
}

.icon.github {
  background: url(../img/socialicons.png) no-repeat -18px -152px;
}
.icon.twitter {
  background: url(../img/socialicons.png) no-repeat -81px -25px;
}
.icon.linkedin {
  background: url(../img/socialicons.png) no-repeat -400px -23px;
}