html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; }

body {
    background-color:#282828;
    color:rgb(250,250,250);
    font-family: Comfortaa;
    line-height: 1.8em;
    letter-spacing: .04em;
    font-weight:normal;
    font-style: normal;
}

body.blog {
    color: #666;
    background-color: #fff;
}

h1,h2,h3,h4,h5,h6 {
    font-family: Josefin-Sans;
    font-weight:normal;
    font-style: normal;
}

h1 {
  font-size: 2.2em;
  letter-spacing: .01em;
  line-height: 1.2em;
}

h2 {
  font-size: 1.35em;
  letter-spacing: .01em;
  line-height: 1.2em;
}

@media screen and (min-width: 800px) {
h1 {
  font-size: 2.6em;
  letter-spacing: .01em;
  line-height: 1.2em;
}
h2 {
  font-size: 1.6em;
  letter-spacing: .01em;
  line-height: 1.2em;
}
}

h3 {
  font-size: 1.2em;
  letter-spacing: .01em;
  line-height: 1.2em;
}
h4, h5, h6 {
  font-size: 1em;
  letter-spacing: .01em;
  line-height: 1.2em;
}

.preformatted pre {
  font-family: monospace;    
  -moz-tab-size: 4;
  -o-tab-size:   4;
  tab-size:      4;
  white-space: pre;
}

a {
    outline-style:none;
    color:rgb(250,250,250);
    text-decoration: none;
}
a:hover {
    color:rgb(200,200,200);
}

.blog a {
    color: #282828;
}

.blog a:hover {
    color: #383838;
}

#page-outer {
    margin: auto;
    width: 351px;
}

@media screen and (min-width: 370px) {
/*
#page-outer {
    margin: auto;
    width: 570px;
}

@media screen and (min-width: 600px) {*/
#page-outer {
    width: 95vw;
    max-width: 1216px;
}
}

#page-inner {
    margin: auto;
    width: 336px;    
    padding-top: 55px;
}

@media screen and (min-width: 370px) {
/*#page-inner {
    margin: auto;
    width: 546px;    
    padding-top: 55px;
}

@media screen and (min-width: 600px) {*/
#page-inner {
    width: 88vw;
    max-width: 1164.8px;
}
}

.site-header 
{
    text-align: center;
}

.sub-heading
{
    margin-bottom:1em;
    white-space: nowrap;
}

.sub-heading span 
{
    padding-bottom:0.5em;
    border-bottom:1px solid white; 
}

.blog .sub-heading span
{
    border-bottom:1px solid black;     
}

.sub-heading a 
{
    padding: 1em 0em;
}

.nav-page
{
  padding-left: 2em;
  padding-right: 2em;
}

.nav-page ul
{
    text-align: center;
    margin-right: -2em;
}

.nav-page li {
    display: inline-block;
    margin-right: 2em;
}

.nav-page a {
    /* extra padding to make it easier to click on items */
    padding: 1em 0;
}

.content-post {
    margin-top: 45px;
    margin-bottom: 45px;
}

.content-meta {
    color:rgb(180, 180, 180);    
}

.content-text a {
    text-decoration: underline;
}

.content-text p {
    margin-bottom: 1em;
}

.content-text .preformatted {
    margin-bottom: 1em;
}

.content-text .codespan {
  font-family: monospace;
  background: none repeat scroll 0% 0% #444;
  text-shadow: 0px 1px #000;
  padding: 0em 0.3em;
  white-space: pre-wrap;
}

.content-text h1,h2,h3,h4,h5,h6 {
    margin-bottom: 0.5em;
}

.content-title
{
    margin-bottom: 0.5em;
}

.content-title a
{
    /* extra padding to make it easier to click on items */
    padding: 0.5em 0em;    
}

.content-title.homepage
{
}

.content-title.homepage span 
{
}

.image-grid-container 
{
    margin: 0 auto 1em;
    width:333px;
}

@media screen and (min-width: 370px) {
/*
.image-grid-container 
{
    margin: 0 auto 1em;
    width:540px;
}

@media screen and (min-width: 600px) {*/
    .image-grid-container {
        width:90vw;
        max-width:862.2px;
    }
}

@media screen and (min-width: 958px) {
    .image-grid-container {
        width:90vw;
        max-width:1152px;
    }
}

.image-grid {
    text-align:justify;
    text-align-last:justify;
    font-size: 0; /* remove the white spaces between images */
    line-height: 0; /* remove the white spaces between images */
}

.page-image-container {
    width: 95%;
    margin: 1.5em auto;
    text-align: center;
}

.page-image {
    width:auto;
    display:inline-block;
    position:relative;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    font-size: 0; /* remove the white spaces between images */
    line-height: 0; /* remove the white spaces between images */        
}

.image-grid img {
}

.image-grid img:hover {
}

.image-tile {
    width:auto;
    display:inline-block;
    position:relative;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    margin-bottom:6px;
    margin-right:1px;  
}

.image-overlay, .page-image-overlay {
    color:rgb(250,250,250);
    width:100%;
    height:100%;
    font-size: 16px; /* parent is 0 so restore the default of 16px */
    line-height: 1.8em;
    position:absolute;
    top:0;
    text-shadow: 0 0 2px #000;
    background: rgba(0,0,0,0.3); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4)); /* Standard syntax */

    -webkit-transition:-webkit-opacity .3s ease;
       -moz-transition:   -moz-opacity .3s ease;
        -ms-transition:    -ms-opacity .3s ease;
            transition:        opacity .3s ease;
    opacity: 0;
}

.image-overlay:hover, .page-image-overlay:hover {
  opacity: 1.0;
}

.image-overlay a, .page-image-overlay a
{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

.image-overlay .image-title, .page-image-overlay .page-image-title 
{
    position:absolute;
    bottom:0;
    padding:5px;
    text-align:left;
    text-align-last:left;
    width: calc(100% - 10px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.8em;
}

.page-image img {
    max-width:498px;
}

@media screen and (min-width: 600px) {
    .page-image img {
        max-width:83vw;
    }
}

@media screen and (min-width: 1280px) {
    .page-image img {
        max-width:1062.4px;
    }
}

.galleries .image-overlay {
    text-shadow: 0 0 2px #000;

    background: rgba(0,0,0,0.3); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4), rgba(0,0,0,0.1), rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4), rgba(0,0,0,0.1), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4), rgba(0,0,0,0.1), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.4), rgba(0,0,0,0.1), rgba(0,0,0,0)); /* Standard syntax */

    -webkit-transition:-webkit-opacity .3s ease;
       -moz-transition:   -moz-opacity .3s ease;
        -ms-transition:    -ms-opacity .3s ease;
            transition:        opacity .3s ease;
    opacity: 1.0;
 }

.galleries .image-overlay:hover {
    opacity: 0;
}

.galleries .image-overlay .image-title
{
    text-align:center;
    text-align-last:center;
    font-family: Josefin-Sans;
    letter-spacing: .01em;
    font-size: 1.6em;
    white-space: auto;    
    bottom: auto;
    top: 50%;
    transform: translate(0, -50%);
}


.picture-container {
    position:absolute;
    overflow:hidden;
    min-width:370px;
    min-height:400px;
    width:100%;
    height:100%;
    max-height:1280px;
}

.photo {
    position:absolute;
    width:100%;
    height:100%;
}

.photo img {
    max-width: 100%;
    max-height: 100%;
    width: auto; /* for ie9 */    
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

.overlay {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
}

.overlay .close-button {
    position:absolute;
    top:0;
    height: 70px;
    left:0;
    width:100%;
    /* only transition on transform properties which are hardware accelerated = way better performances */
    -webkit-transition:-webkit-opacity .3s ease;
       -moz-transition:   -moz-opacity .3s ease;
        -ms-transition:    -ms-opacity .3s ease;
            transition:        opacity .3s ease;
}

.opened .close-button {
    opacity: 0.7;    
}
.closed .close-button {
    opacity: 0;    
}
.overlay .close-button:hover {
    opacity: 1.0;
}
.overlay .close-button a {
    position:absolute;
    width: 100%;
    height: 100%;
    text-align: right;
}

.overlay .close-button img {
    padding: 22px;
}

.overlay .zoom-area {
    position:absolute;
    top:70px;
    left:150px;
    right:150px;
    bottom: 70px;
    height: 100%;
}

.overlay .nav-left {
    position:absolute;
    height: 100%;
    left:0;
    width: 150px;
    /* only transition on transform properties which are hardware accelerated = way better performances */
    -webkit-transition:-webkit-opacity .3s ease;
       -moz-transition:   -moz-opacity .3s ease;
        -ms-transition:    -ms-opacity .3s ease;
            transition:        opacity .3s ease;
}
.opened .nav-left {
    opacity: 0.7;    
}
.closed .nav-left {
    opacity: 0;    
}
.overlay .nav-left:hover {
    background: rgba(0,0,0,0.3); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.4)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.4)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(to left, rgba(0,0,0,0) rgba(0,0,0,0.4)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.4)); /* Standard syntax */    
    opacity: 1.0;
}

.overlay .nav-right {
    position:absolute;
    right:0;
    width: 150px;
    height: 100%;
    /* only transition on transform properties which are hardware accelerated = way better performances */
    -webkit-transition:-webkit-opacity .3s ease;
       -moz-transition:   -moz-opacity .3s ease;
        -ms-transition:    -ms-opacity .3s ease;
            transition:        opacity .3s ease;
}
.opened .nav-right {
    opacity: 0.7;    
}
.closed .nav-right {
    opacity: 0;    
}
.overlay .nav-right:hover {
    background: rgba(0,0,0,0.3); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.4)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.4)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(to right, rgba(0,0,0,0) rgba(0,0,0,0.4)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.4)); /* Standard syntax */    
    opacity: 1.0;
}

.overlay .nav-left a {
    position:absolute;
    top:70px;
    bottom: 70px;
    width: 100%;
}
.overlay .nav-left img {
    position:absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
}

.overlay .nav-right a {
    position:absolute;
    top:70px;
    bottom: 70px;
    width: 100%;
}
.overlay .nav-right img {
    position:absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
}

.container {
    position:absolute;
    width:100%;
    min-width:370px;
}

.container.opened {
    min-height: 50px;
}

.container.closed {
    overflow:hidden;
    height:50px;
}

.container {
    top: 340px;
}

@media screen and (min-height: 500px) {
.container {
    top: 440px;
}
}
@media screen and (min-height: 600px) {
.container {
    top: 530px;
}
}
@media screen and (min-height: 700px) {
.container {
    top: 620px;
}
}
@media screen and (min-height: 800px) {
.container {
    top: 710px;
}
}
@media screen and (min-height: 900px) {
.container {
    top: 800px;
}
}
@media screen and (min-height: 1000px) {
.container {
    top: 890px;
}
}
@media screen and (min-height: 1100px) {
.container {
    top: 980px;
}
}
@media screen and (min-height: 1200px) {
.container {
    top: 1070px;
}
}

.slider {
    position: relative;
    background:rgba(0,0,0,0.5);
	/*overflow-y: scroll;*/
	/* complete liquid height based on the parent's height!! */
    height:100%;

    /* only transition on transform properties which are hardware accelerated = way better performances : transform, opacity, filter */
	-webkit-transition:-webkit-transform .3s ease, opacity .3s ease;
       -moz-transition:   -moz-transform .3s ease, opacity .3s ease;
        -ms-transition:    -ms-transform .3s ease, opacity .3s ease;
            transition:        transform .3s ease, opacity .3s ease;
}

.opened .slider { 
    /* visible */
    -webkit-transform: translate(0, 0%);
       -moz-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
            transform: translate(0, 0%);
    opacity: 1;
}
.closed .slider { 
    /* completely offscreen */
    -webkit-transform: translate(0, +150px);
       -moz-transform: translate(0, +150px);
        -ms-transform: translate(0, +150px);
            transform: translate(0, +150px);
    opacity: 0;
}

.slider {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;

    border-top:1px solid grey;
}

.comment-form-outer {
  padding: 0 1em 1em 1em;
}

.comment-form {
  background-color: #333;
  padding: 1em;
  border-radius: 7px;
}

.blog .comment-form {
  background-color: #f4f7f8;
}

.comment-form form{
}

.comment-form h2 {
  color: rgb(250,250,250);
  padding-bottom: 0.6em;
  border-bottom: 2px dashed rgba(0,0,0, 0.3);
  border-radius: 10px;
}
.blog .comment-form h2 {
  color: #333;
}

.comment-form input[type="text"],
.comment-form textarea {
   width: 100%;
   padding: 0.5em;
   margin: 0;
   margin-bottom: 1em;
   background: #ccc;
   font-family: Comfortaa;
   font-size: 1em;
   border: none;
   border-radius: 4px;
   outline: 0;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
   box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
}

.blog .comment-form input[type="text"],
.blog .comment-form textarea {
   background: #fff;
}

.comment-form input[type="text"]:focus,
.comment-form textarea:focus,
.comment-form select:focus{
  background: #eee;
}

.comment-form label {
  font-size: 0.8em;
  line-height: 1em;
  color: #aaa;
}

.blog .comment-form label {
  color: #666;
}

.comment-form .submit {
  width: 60%;
  margin: 0.6em 20% 1em;
  background-color: #111;
  color: #eee;
  padding: 1.0em 3.0em 1.0em 3.0em;
  border-radius: 4px;
  border-style: none;
  font-family: Comfortaa;
  font-size: 1.1em;  
}

.comment-form textarea {
  height: 10em;
}

/* Page footer section */

.site-footer {
    color:rgb(220,220,220);
    text-align: center;
    padding-bottom: 45px;
    padding-left: 1em;
    padding-right: 1em;
}

.blog .site-footer {
    color: #777;
}

.site-footer p {
    margin-bottom: 1.0em;
}

.site-footer ul{
    text-align: center;
    margin-right: -1em;
    margin-bottom: 1.0em;
}

.site-footer li {
    display: inline-block;
    margin-right: 1em;
}

.site-footer a {
    color:rgb(220,220,220);
    /* extra padding to make it easier to click on items */
    padding: 1.0em 0em;
}

.site-footer a:hover {
    color:rgb(170,170,170);
}

.blog .site-footer a {
    color: #777;
}

.blog .site-footer a:hover{
    color: #999;
}

/* Blog post preview section */

.blog-post-preview {
    margin-bottom: 40px;
}

.blog-post-preview-image-container {
    display: inline-block;    
    min-width:336px;
    width:100%;
    padding: 0;
    vertical-align: top;
}

.blog-post-preview-image {
    width:100%;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);    
}

.blog-post-preview-content-container {
    display: inline-block;    
    width: 100%;
}

@media screen and (min-width: 659px) {
    .blog-post-preview-image-container {
        min-width:auto;
        width:300px;
        padding: 0 5px;
    }

    .blog-post-preview-content-container {
        width: calc(100% - 315px);
    }
}

@media screen and (min-width: 829px) {
    .blog-post-preview-image-container {
        min-width:auto;
        width:382px;
        padding: 0 5px;
    }

    .blog-post-preview-content-container {
        width: calc(100% - 397px);
    }
}

@media screen and (min-width: 1000px) {
    .blog-post-preview-image-container {
        min-width:auto;
        width:465px;
        padding: 0 10px;
    }

    .blog-post-preview-content-container {
        width: calc(100% - 490px);
    }
}

.blog-post-preview-content {
    height: 12em;
    position:relative;
    overflow:hidden;
    margin-bottom: 1em;
}

@media screen and (min-width: 659px) and (max-width: 1000px){
    .blog-post-preview-content {
        height: 6em;
    }
}

.blog-post-preview-overlay {
    position:absolute;
    width: 100%;
    height:100%;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(top,  rgba(137,255,241,0) 65%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(65%,rgba(137,255,241,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(137,255,241,0) 65%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(137,255,241,0) 65%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(137,255,241,0) 65%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(137,255,241,0) 65%,rgba(255,255,255,1) 100%); /* W3C */
    pointer-events: none;
}

.blog-post-preview-more-link a {
    padding: 10px 10px;
    border-radius: 5px;
    background: rgb(155, 226, 255);
    opacity: 0.8;
    transition:        transform .3s ease, opacity .3s ease;
}

.blog-post-preview-more-link a:hover {
    opacity:1.0;
}

.blog-nav {
display: block;
margin-bottom: 1em;  
}

.blog-nav.previous {
  text-align: left;
}

.blog-nav.next {
  text-align: right;
}

.blog-nav.index {
  text-align: center;
}

/* Fonts section */

@font-face {
  font-family: 'Comfortaa';
  src:  url('/fonts/comfortaa_regular-webfont.woff2') format('woff2'),
        url('/fonts/comfortaa_regular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Josefin-Sans';
  src:  url('/fonts/josefinsans-bold-webfont.woff2') format('woff2'),
        url('/fonts/josefinsans-bold-webfont.woff') format('woff');
}