/*Theme Name: TSTO
Theme URI: tsto.org
Description: Portfolio
Version: 1.0
Author: TSTO
Author URI: tsto.org
*/

@font-face {
    font-family: 'GTAmerica';
    src: url('/wp-content/themes/tsto/fonts/GT-America-Mono-Light.eot');
    src: url('/wp-content/themes/tsto/fonts/GT-America-Mono-Light.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/tsto/fonts/GT-America-Mono-Light.woff2') format('woff2'),
         url('/wp-content/themes/tsto/fonts/GT-America-Mono-Light.woff') format('woff'),
         url('/wp-content/themes/tsto/fonts/GT-America-Mono-Light.ttf') format('truetype'),
    	 url('/wp-content/themes/tsto/fonts/GT-America-Mono-Light.svg#GT-America-Mono-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GTAmerica';
    src: url('/wp-content/themes/tsto/fonts/GT-America-Mono-Medium.eot');
    src: url('/wp-content/themes/tsto/fonts/GT-America-Mono-Medium.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/tsto/fonts/GT-America-Mono-Medium.woff2') format('woff2'),
         url('/wp-content/themes/tsto/fonts/GT-America-Mono-Medium.woff') format('woff'),
         url('/wp-content/themes/tsto/fonts/GT-America-Mono-Medium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

* {box-sizing: border-box;}
html {font-family:'GTAmerica', monospace;color:black;font-size:12px;}
body {margin:0;}

a {color:black;text-decoration:none;}
a:hover {color:gray;}
p {margin:0;}
h2 {font-weight:bold;font-size:1em;text-align:center;margin-bottom:2em;}
h3 {font-weight:bold;font-size:1em;text-align:center;}

hr {max-width:700px;border:0px;border-bottom:1px solid black;}

ul {
  max-width:700px;
  margin:0 auto;
}

#wrap {margin:0 auto; width:100%; margin:0px; height:100%;}
#pages {position:absolute;top:30px;right:30px;text-align:right;}

.header {width:100%; height:125px;position:fixed;top:0;left:0;z-index:999;}
.content {width:100%;}
.footer {width:100%;}
.container {padding-top:165px;padding-bottom:130px;}
.container p {margin:auto;max-width:700px;}

.portfolio-entry {display:block;width:22%;padding-top:15px;padding-bottom:15px;float:left;cursor:pointer;}
.portfolio-entry img {width:100%;height:auto;-webkit-transition:.3s ease-in-out;
	transition:.3s ease-in-out;}
.portfolio-entry:hover img {opacity:.5;}

.lazy {opacity:0;transition: opacity 0.3s;}
.initial, .loaded, .error {opacity:1;}

.entry-content {width:100%;height:auto;min-height:100%;margin:0px;z-index:999;overflow:hidden;}
.entry-content p {padding-bottom:15px;}
.entry-content img {margin-top:15px;margin-bottom:15px;width:auto;height:auto;max-height: 700px;max-width: 100%;}
.entry-title {padding-top:5px;padding-bottom:5px;padding-left:0;text-align:center;}

.hide {position:absolute;right:0;top:0;z-index:999;border:1px solid white;}
.hide:hover {background-color:#fff;}

.x-container {position:fixed;bottom:30;right:0;width:100%;text-align:right;margin-right:30px;}

.x {position:relative;display:inline-block;width:10px;padding-left:15px;padding-right:15px;padding-bottom:9px;padding-top:12px;opacity:1;z-index:999;background-color: transparent;border:1px solid black;font-size:1.5em;color:#000;}
.x:hover {background-color:#000;color:#fff;cursor:pointer;}

.i {position:absolute;display:flex;justify-content:center;align-items:center;right:30px;top:30px;width:40px;height:40px;opacity:1;z-index:999;background-color: transparent;border:1px solid black; font-size:1.1em;color:#000;}
.i:hover {background-color:#000;color:#fff;cursor:pointer;}

#title {padding-left:30px;padding-top:30px;line-height: 130%;min-width:500px;font-weight:bold;font-size: 1.1em;}
#grid {width:100%;height:100%;}
.container {margin-left:30px;margin-right:30px;height:100%;}
.indent {margin:0;padding:0;padding-left:30px;}
.gutter-sizer {width:3%;}

.wp-video-shortcode {width: 100%;}
.wp-audio-shortcode {width: 100%;}

.wp-video {
margin-left: auto ;
margin-right: auto ;
}

#cookie-notice {
  font-family: 'GTAmerica',monospace;
  font-size: 1em;
  line-height: 1.15;
  border-top: 1px solid black;
}

#cookie-notice .cn-button {
  border: 1px solid black;
  border-radius: 0;
  font-family: 'GTAmerica',monospace;
  font-size: 1em;
  text-transform: lowercase;
}

.cn-button.wp-default:hover {
  box-shadow: none;
  background: black;
  color: white;
}

.cn-button.wp-default {
  background: white;
  color: black;
}

.cn-text-container {
  margin: 0 0 10px 0;
}

@media (max-width: 599px) {
  .grid-sizer, .portfolio-entry {width:100%;}
  .gutter-sizer {width:0%;}
  
  body {font-size:9px;}
  .header {height:75px;}
  #title {min-width:275px;text-align: center;padding-left:0;}
  #title p {text-align: center;}
  #pages {position:relative;top:0;left:0;}
  .i {position:relative;top:25px;left:0;padding-top:12px;padding-bottom:11px;margin-left:auto;margin-right:auto;text-align:center;}
  .x-container {text-align:center;margin-right:0;}
  .container {padding-top:120px;}
}

@media (min-width: 600px) {
  .grid-sizer, .portfolio-entry {width:46.9%;}
  .gutter-sizer {width:6%;}
  
  body {font-size:1em;}
  .header {height:75px;}
  #title {min-width:420px;}
}

@media (min-width: 900px) {
  .grid-sizer, .portfolio-entry {width:31.3%;}
  .gutter-sizer {width:3%;}
  
  body {font-size:1.05em;}
  .header {height:75px;}
  #title {min-width:420px;}
}

@media (min-width: 1150px) {
  .grid-sizer, .portfolio-entry {width:22.7%;}
  .gutter-sizer {width:3%;}
  
  body {font-size:1.05em;}
  .header {height:75px;}
  #title {min-width:420px;}
}

@media (min-width: 1400px) {
  .grid-sizer, .portfolio-entry {width:17.6%;}
  .gutter-sizer {width:3%;}

  body {font-size:1.05em;}
  .header {height:75px;} /* 110px: */
  #title {min-width:420px;}
}

/* For devices 400px and larger: */
@media (min-width: 1400px) {
    .grid-sizer, .portfolio-entry {width:17.6%;}
    .gutter-sizer {width:3%;}

    body {font-size:1.05em;}
    .header {height:75px;} /* 110px: */
    #title {min-width:420px;}
}