@import url('https://fonts.googleapis.com/css?family=Averia+Serif+Libre:400,700');

/* Personal Flavour */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

}

/* Typography */

body {
  font-size: 16px;
  letter-spacing: .05em;
  color: #222222;
  font-family: 'Averia Serif Libre', sans-serif;
}
h1, h3{
  font-family: 'Averia Serif Libre', sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
}
h4 {
  font-size: 22px;
}
h3 {
  font-size: 28px;
}

/* Custom ultilities */
  /* Centered */

  .centered {
    /*position: absolute;*/
    top: 20%;
    /*left: 50%;*/
    /*-webkit-transform: translate(-50%,-50%);*/
    /*-moz-transform: translate(-50%,-50%);*/
    /*-ms-transform: translate(-50%,-50%);*/
    /*-o-transform: translate(-50%,-50%);*/
    /*transform: translate(-50%,-50%);*/
  }
  .vertical-centered {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;

  }

  .intro {
    padding-top: 10px;
    max-width: 67%;
    min-width: 50%;
  }


/* Section general styling */

section {
  text-align: center;
  padding: 80px 0;
}

.section a {
  font-size: 18px;
  letter-spacing: .05em;
  color: #222222;
  font-family: 'Averia Serif Libre', sans-serif;
}





/* Footer */

.footer {
  background-color: #222222;
  color: white;
}



/* Navigation */

.navigation .menu-icon {
  color: #222222;
  font-size: 30px;
  line-height: 1em;

  position: absolute;
  left: 100%;
  padding: 20px;

  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

/*.navigation .menu-icon.active {*/
  /*background-color: rgba(0,0,0, .3);*/
/*}*/
/*.navigation .menu-icon:hover {*/
  /*color: #222;*/
  /*background-color: transparent;*/
/*}*/

.navigation.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100%;
  z-index: 3;
  width: 200px;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);

  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

}

.navigation ul {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background: #222222;
}
.navigation ul li {
  display: block;
  text-align: left;
  margin: 0;
  padding-left: 20px;
}
.navigation ul li a {
  display: block;
  height: 100%;
  padding: 10px 0;

  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-weight: 900;
}

.navigation img {
  padding-top: 10px;
  color: white;
  width: 100px;
}

/* Logo */

.logo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.logo img {
  width: 120px;
  margin: 20px;
}


/* Hero */


.hero {
  padding: 0;
  text-align: left;
  position: relative;
  background-color: #ffffff; /* layer fill content */
  color: #222222;
}
.hero-image {
  background: url("../img/hero-image.png") no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: .8;
  height: 100%;
}
.hero-image:after {
  content: '';
  /*opacity: .87; !* layer alpha *!*/
  /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); !* gradient overlay *!*/
  /*background-image: -moz-linear-gradient(bottom, #ffffff 0%, #000000 100%); !* gradient overlay *!*/
  /*background-image: -o-linear-gradient(bottom, #ffffff 0%, #000000 100%); !* gradient overlay *!*/
  /*background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #000000 100%); !* gradient overlay *!*/
  /*background-image: linear-gradient(bottom, #ffffff 0%, #000000 100%); !* gradient overlay *!*/
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.hero h2 {
  font-size: 24px;
}

.hero p {
  padding: 0 15%;
}
.hero .separator:before {
  background-color: white;
}

/* Work */


/* Work Filters */

.work-filters {
  list-style: none;
}
.work-filters li {
  display: inline-block;
  margin: 0 .5em;
  font-size: 18px;
  text-transform: uppercase;
  font-family: "slim_joeregular";
}
.work-filters li a {
  color: inherit;
  text-decoration: none;
}
.work-filters li.active {
  font-family: "big_johnregular"
}

/* Work items */

.work-items {
  list-style: none;
  width: 100%;
  display: inline-block;
}
.work-items li {
  position: relative;
  overflow: hidden;
  height: 360px;

  /* important because we need to overwrite the default skeleton */
  margin: 0!important;
  width: 33%;
  border: 10px solid white;

  position: relative;
}
.work-items li:nth-child(4n) {
  margin-left: 0;
}
.work-items li img{
  width: auto;
  height: 100%;
  display: block;
}

/* Work detail */

.work-detail {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  opacity: 0;
  background: rgba(0,0,0,.75);
  color: white;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.work-detail h3 {
  font-size: 16px;
  letter-spacing: .05em;
}
.work-detail p {
  font-size: 20px;
  text-transform: capitalize;
  padding-left: 20px;
  padding-right: 20px;
}

.work-items li:hover .work-detail{
  opacity: 1;
  box-shadow: inset 0 0 0 10px #222;
}

/* Post */

.post {
  padding-top: 100px;
}

.post img {
  /*width: 80%;*/
  max-width: 90%;
  /*max-height: 67vh;*/
}

.post h3 {
  /*text-align: left;*/
}

.post p {
  text-align: left;
  min-width: 67%;
  max-width: 400px;
  margin: auto;
  padding-top: 20px;
}

/* About */

.about {
  padding-top: 100px;
}

.about img {
  /*width: 80%;*/
  max-width: 90%;
  /*max-height: 67vh;*/
}

.about h3 {
  /*text-align: left;*/
}

.about p {
  text-align: left;
  min-width: 67%;
  max-width: 400px;
  margin: auto;
  padding-top: 20px;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons secion and style it
there.
*/


/* Larger than mobile */
@media (max-width: 400px) {
  .button.inverted {
    padding: 15px;
  }
}
@media (min-width: 400px)  and (max-width: 750px) {
  .work-items li.isotope-item.columns {
    width: 100%;
  }

}

/* Larger than tablet (also point when grid becomes active) */
@media (min-width: 550px) and (max-width: 750px) {

  .work-items li.isotope-item.columns {
    width: 50%;
  }
  .post img {
    max-width: 80%;
  }
  .about img {
    max-width: 80%;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {
  .post img {
    max-width: none;
    max-height: 67vh;
  }
  .about img {
    max-width: none;
    max-height: 50vh;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {
  .post img {
    max-width: none;
    max-height: 67vh;
  }
  .about img {
    max-width: none;
    max-height: 50vh;
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  .post img {
    max-width: none;
    max-height: 67vh;
  }
  .about img {
    max-width: none;
    max-height: 50vh;
  }
}