/*
Theme Name: Johnsson
Author: A.Stein
Author URI: http://www.astein.fr
Description: Theme for Kristofer Johnsson 2015 website, designed by A.Stein
Version: 1.0
Tags: grid, grey background, responsive, photography
*/

/* RESET */

html, 
body, 
div, 
span, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
a, 
ul, 
li,
form, 
label,
table,
tr, 
th, 
td {
 border: 0;
 font-family: inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0;
 outline: 0;
 padding: 0;
 vertical-align: baseline;
}

a {
 text-decoration: none;
}

/* MAIN DESIGN */

body {
 background: #eaeaea;
 font: 12pt 'Open Sans', sans-serif;
}

a {
 color: #000;
}

.clear {
 clear: both;
}

.i {
 width: 16px;
 height: 16px;
 display: inline-block;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-repeat: no-repeat;
 vertical-align: middle;
}

.i-chevron-left {
 background-image: url('img/chevron-left.png');
}

.i-chevron-right {
 background-image: url('img/chevron-right.png');
}

.i-facebook {
 background-image: url('img/icon-facebook.png');
}

.i-twitter {
 background-image: url('img/icon-twitter.png');
}

.i-pinterest {
 background-image: url('img/icon-pinterest.png');
}

.i-google {
 background-image: url('img/icon-google.png');
}

.i-tumblr {
 background-image: url('img/icon-tumblr.png');
}

.i-instagram {
 background-image: url('img/icon-instagram.png');
}

.loading div {
 opacity: 0;
}

#wrapper {
 margin: 0 auto;
}

#header {
 text-align: center;
 width: 100%;
 font-size: 13pt;
 padding: 30px 0 30px 0;
 position: absolute;
 top: 0;
 left: 0;
}

#header.fixed {
 position: fixed;
 z-index: 9999;
 background-color: rgba(234, 234, 234, 0.8);
 top: 0;
 left: 0;
 padding: 10px 0 10px 0;
}

#header ul li {
 list-style: none;
 display: inline;
 margin: 0 10px 0 0;
}

#header-title h1 {
 display: inline;
}

#header ul li a {
 color: #000;
}

#content {
 width: 100%;
 margin: 80px 0 50px 0;
}

#grid {
 width: 100%;
}

.thumb {
 position: relative;
 width: 100%;
 margin: 0 0 6px 0;
}

.thumb .thumb-hover {
 background-color: rgba(245, 245, 245, 0.8);
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 9950;
 text-align: center;
 display: none;
}

.thumb img {
 width: 100%;
 position: relative;
 display: block;
 top: 0;
 z-index: 9949;
}

.loading {
 background: url('img/loading.gif') top center no-repeat;
}

#project, #project img {
 width: 100%;
}

#project img {
 margin: 0 0 10px 0;
}

#project {
 margin: 0 0 100px 0;
}

#grid-title, #project-title {
 width: 100%;
 text-align: center;
 margin: 0 0 10px 0;
}

#project-title, #project-footer {
 font-size: 10pt;
 line-height: 14pt;
}

#project-footer {
 text-align: center;
}

#project-footer div {
 width: 33.3%;
 float: left;
}

#project-footer-prev {
 text-align: left;
}

#project-footer-next {
 text-align: right;
}

#project-footer-share a {
 margin: 0 0 0 5px;
}

#page {
 text-align: center;
 font-size: 10pt;
 line-height: 14pt;
}

#page p {
 margin: 0 0 10px 0;
}

#page p a {
 text-decoration: underline;
}

@media only screen and (max-width: 600px) {
 #project-footer-prev, #project-footer-next {
  width: 10% !important;
 }
 #project-footer-share {
  width: 80% !important;
 }
 .hide-mobile {
  display: none;
 }
 #header-title h1 {
  display: block;
  margin: -25px 0 5px 0;
 }
 #header.fixed {
  top: 0;
  left: 0;
  padding: 10px 0 10px 0;
 }
 #header {
  font-size: 11pt;
 }
 #wrapper {
  width: 90%;	
 }
 #grid {
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
 }
}

@media only screen and (min-width: 600px) and (max-width: 900px) {
 #wrapper {
  width: 510px;	
 }
 .thumb {
  width: 160px;
  margin: 0 10px 10px 0;
 }
}

@media only screen and (min-width: 901px) and (max-width: 1301px) {
 #wrapper {
  width: 720px;	
 }
 .thumb {
  width: 230px;
  margin: 0 10px 10px 0;
 }
}

@media only screen and (min-width: 1301px) {
 #wrapper {
  width: 1000px;	
 }
 .thumb {
  width: 240px;
  margin: 0 10px 10px 0;
 }
}