@font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src: url("../fonts/codropsicons/codropsicons.eot"); src: url("../fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"), url("../fonts/codropsicons/codropsicons.woff") format("woff"), url("../fonts/codropsicons/codropsicons.ttf") format("truetype"), url("../fonts/codropsicons/codropsicons.svg#codropsicons") format("svg"); }
@font-face { font-family: 'camera-icons'; src: url("../fonts/camera-icons/camera-icons.eot?7h6q4p"); src: url("../fonts/camera-icons/camera-icons.eot?#iefix7h6q4p") format("embedded-opentype"), url("../fonts/camera-icons/camera-icons.woff?7h6q4p") format("woff"), url("../fonts/camera-icons/camera-icons.ttf?7h6q4p") format("truetype"), url("../fonts/camera-icons/camera-icons.svg?7h6q4p#camera-icons") format("svg"); font-weight: normal; font-style: normal; }
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: scroll; overflow-x: hidden; width: 100vw; }
button:focus { outline: none; }
.hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; }
/* Content */

.content { padding: 1em 0 3em; max-width: 1080px; margin: 0 auto; }
/* Related demos */

.content--related { text-align: center; font-weight: bold; padding: 0 1em; }
.media-item { display: inline-block; padding: 1em; vertical-align: top; -webkit-transition: color 0.3s; transition: color 0.3s; }
.media-item__img { max-width: 100%; opacity: 0.3; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.media-item:hover .media-item__img, .media-item:focus .media-item__img { opacity: 1; }
.media-item__title { margin: 0; padding: 0.5em; font-size: 1em; }

.post-content {background: #b2120c;opacity: 1;top:40%;left:0; right: 0;position: absolute; color:#fff; text-align: center; padding: 1% 0;}
.grid { position: relative; margin: 0 auto; }
.js .grid::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: #000 url(../images/loading.svg) no-repeat 50% 75px; background-size: 60px auto; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.js .grid--loaded::after { opacity: 0; }
.grid__item { width: 270px; padding: 10px; }
.grid__item--current { opacity: 0 !important; }
.img-wrap { display: block; position: relative;}
.img-wrap:focus, .img-wrap:hover { outline: none; }
.img-wrap img { display: block; max-width: 100%; }
.preview { position: fixed; z-index: 1000; top: 0; left: 0; display: -ms-flex; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 50%; height: 100%; pointer-events: none; }
.preview::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: #000; -webkit-transition: opacity 0.6s; transition: opacity 0.6s; }
.preview--open { pointer-events: auto; }
.preview--open::before { opacity: 1; }
.clone { position: fixed; z-index: 110; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-backface-visibility: hidden; }
.original { position: relative; z-index: 120; display: block; object-fit: contain; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-backface-visibility: hidden; }
.preview--open .animate { /* open */
	-webkit-transition: -webkit-transform 0.6s, opacity 0.2s; transition: transform 0.6s, opacity 0.2s; }
.animate { /* close */
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; }
.description { color: #fff; }
.js .description--grid { display: none; }
.description--preview { font-size: 2em; position: absolute; z-index: 140; width: 100%; left: 100%; top: 0; height: 100%; padding: 0 1em; display: -ms-flex; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; opacity: 0; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
.preview--open .description--preview { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.description--preview h3 { font-weight: normal; margin: 0;background: #b2120c; padding: 1%; width: 100%; font-weight: bold; font-size: 30px;}
.description--preview p { font-size: 0.65em; max-width: 100%; }
.description--preview p em { color: #5D5D5D; display: block; padding: 0.4em 0 0 0; }
/* Details */

.details { max-width: 100%;/* IE 10-11 bug flexbox */
}
.details ul { line-height: 1; position: relative; margin: 0; padding: 0; list-style: none; }
.details ul li { font-size: 0.5em; position: relative; display: inline-block; margin: 0 1em 0 0; padding: 0.15em 0; white-space: nowrap; opacity: 0; color: #9d9d9d; -webkit-transition: -webkit-transform 1s, opacity 1s; transition: transform 1s, opacity 1s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
.preview--open .details ul li { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.preview--open .details ul li:nth-child(1) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.preview--open .details ul li:nth-child(2) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.preview--open .details ul li:nth-child(3) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.preview--open .details ul li:nth-child(4) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.preview--open .details ul li:nth-child(5) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.details ul li:first-child { font-weight: bold; color: #909090; }
.icon { font-family: 'camera-icons'; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; display: inline-block; vertical-align: middle; text-transform: none; /* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; }
.icon + span { margin-left: 5px; vertical-align: middle; }
.icon-focal_length:before { content: '\e600'; }
.icon-exposure_time:before { content: '\e601'; }
.icon-iso:before { content: '\e602'; }
.icon-camera:before { content: '\e603'; }
.icon-aperture:before { content: '\e604'; }
.details .icon { margin-right: 5px; color: #77d45b; }
/* Close button */

.action { font-size: 1.5em; margin: 0; padding: 0; cursor: pointer; vertical-align: top; color: #fff; border: none; background: none; }
.action:hover, .action:focus { color: #ccc; outline: none; }
.action--close { position: fixed; z-index: 150; top: 0; right: 0; padding: 1em; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); }
.preview--image-loaded .action--close { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.text-hidden { position: absolute; display: block; overflow: hidden; width: 0; height: 0; color: transparent; }
 @media screen and (max-width: 40em) {
.description--preview h3 { font-size: 0.5em; }
.description--preview p,  .details { display: none; }
     
     article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
     
 /* = MEDIA QUERIES= */    
@media screen and ( max-width: 600px ) {.js .description--grid { display: block; background: #000; padding: 5%; pointer-events: none !important; } .post-content {display: none;} .js .description--grid a:hover, .js .description--grid a:focus, .js .description--grid a:visited {text-decoration: none !important;} .preview--open { pointer-events: none !important; } .preview  {display: none;} .preview::before {display: none;} .grid__item {pointer-events: none !important;}}
@media screen and ( max-width: 414px ) {}
@media screen and ( max-width: 320px ) {}