/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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;
	border: 0;
	font-size: 100%;
    font-weight: normal;
	font: inherit;
	vertical-align: baseline;
    font-kerning: normal;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
em, i, dfn {
    font-style: italic;
}



/* ___________________my css___________________ */
* {
    box-sizing: border-box;
}
::-webkit-scrollbar {
    display: none;
}

/* ___________________typo___________________ */
body {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    color: rgba(0, 0, 0, 1);
}
.label, .nav-menu {
    /font-size: 40px;
    /color: rgba(255, 255, 255, 1);
    /-webkit-text-stroke: 0.5px;
    /text-shadow: 1px 1px 0 #000, 1px 0 1px #000, 0 1px 0 #000, 1px 1px 0 #000;
    /*text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 1px 1px 0 #000;*/
    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
}
a:link {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}
a:visited {
    color: rgba(0,0,0,1);
    text-decoration: none;
}
a:hover {
    color: rgba(0,0,0,.1);
    text-decoration: none;
}
a:active {
    color: rgba(0,0,0,1);
    text-decoration: none;
}
.contact, .work-description, .work, .general-description {
    font-size: 14px;
    line-height: 1.22;
    margin-top: 0;
}
/.applink {
    color: rgba(255, 255, 255, 1);
    -webkit-text-stroke: 0.5px;
    text-shadow: 1px 1px 0 #000, 1px 0 1px #000, 0 1px 0 #000, 1px 1px 0 #000;
}
/* _____________under construction_____________ */
.under-construction {
    width: 100%;
    height: 100vh;
    position: absolute;
    display: flex;
    padding-right: 4px;
}
.intro-title-box {
    margin: auto;
}
.intro-title {
    font-size: 60px;
    line-height: 1;
    right: 1.5px;
    color: rgba(26,26,26);
    font-weight: 500;
    margin: auto;
    display: table;
    cursor: pointer;
}
/*
.intro-title:hover {
    color: rgba(85,26,139,1);
    transition: all .7s ease;
    text-decoration: none;
}
*/

/* ____________________label____________________ */
.label {
    /background-color: rgba(124,124,124,.7);
    padding-top: 12px;
    left: 16px;
    position: fixed;
    z-index: 20;
    top: 0;
    visibility: visible;
}

/* __________________nav-menu__________________ */
.nav-menu {
    /background-color: rgba(124,124,124,.7);
    top: 12px;
    right: 16px;
    position: fixed;
    z-index: 10;
}
.nav-menu span {
    transition: color 250ms;
}
.nav-menu-item {
    display: inline-block;
}
.nav-menu-symbol {
    /color: rgba(0, 0, 0, 1);
    /text-shadow: 1px 0 1px #000, 1px 0 1px #000, 0 0 0 #000, 1px 0.5px 0.5px #000;
}

/* __________________nav-filter__________________ */
.filter {
    /background-color: rgba(124,124,124,1);
    position: fixed;
    top: 50px;
    /width: 116px;
    font-size: 14px;
/*    height: 100vH;*/
    height: auto;
    /right: 15px;
    right: 16px;
    text-align: right;
    /line-height: inherit;
    z-index: 100;
}
.category {
    /display: table;
    cursor: pointer;
}
.category:hover {
    color: rgba(0,0,0,.1);
    text-decoration: none;
}

/* _________________works grid_________________ */
.wrapper {
    /background-color: rgba(124,124,124,1);
    width: auto;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: flex;
    z-index: -100;
}

.grid {
    /background-color: rgba(124,124,124,.7);
    position: absolute;
    margin: 0 0 0 300px;
    /top: 102px;
}
/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}
/* grid-item */
.grid-sizer, .grid-item {
    width: 19%;
}
.gutter-sizer { 
    width: 1.7vw; 
}
.grid-item {
/*    background-color: rgba(124,124,124,1);*/
    margin-bottom: 2%;
    position: absolute;
    float: left;
}
.grid-item--width2 { 
    width: 38%;
}
.empty-item {
    width: 100%;
    height: 100vh;
    margin-bottom: 0;
    background: transparent;
/*    background-color: rgba(124,200,124,1);*/
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.grid-item-image img, video {
    position: relative;
    max-width: 90%;
/*    max-height: 260px;*/
    display: block;
    margin: 5% auto;
    object-fit: cover;
}

.grid-item-image {
    transition: all .2s;
}

/* overlay */
/*
div.grid-item-image div.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /border: 3px solid;
    display: none;
    padding: 50px;
    margin: 0 auto;
}
div.grid-item-image:hover div.overlay {
    display: block;
}
*/
div.grid-item-image:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05); 
    transition: .2s;
}
/*
.overlay-text {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: default;
}
.overlay-text-title {
    font-weight: 700;
    /-webkit-text-stroke: 0.5px;
    /text-shadow: 1px 1px 0 #000, 1px 0 1px #000, 0 1px 0 #000, 1px 1px 0 #000;
}
.overlay-text-tags {
    /-webkit-text-stroke: 0.5px;
    /text-shadow: 1px 1px 0 #000, 1px 0 1px #000, 0 1px 0 #000, 1px 1px 0 #000;
}
*/

/* contact & short description */
#divLeft {
    /background-color: rgba(124,124,124,1);
    position: fixed;
    display: block;
    top: 50px;
    width: 165px;
    height: auto;
    left: 15px;
}

/* project grid */
.project-grid {
    position: relative;
    margin: 0 170px auto 240px;
    top: 50px;
    width: calc(100vw - 410px);
/*  background-color: rgba(124,124,124,1);*/
}
.space {
    position: relative;
    height: 15vh;
}
.project-grid-item {
    position: relative;
    height: 0;
    padding-top: 56.25%;
/*    background-color: rgba(90,0,0,1);*/
}
.project-grid-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }   
.project-grid-item-image-paroles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
 }
.project-grid-item-image-myr {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% / 3.0675);
    padding: 0.5%;
}
.project-grid-item-image-hydra {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 4.5%;
    padding-right: 4.5%;
}

/* resize */
/@media screen and (max-width: 600px) {
.content {
    width: calc(100vw - 125px);
    }
}
@media screen and (max-width: 600px) {
.grid-item, .grid-sizer {
    width: 85%;
    }
}
/*@media screen and (max-width: 600px) {
.grid-item {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    }
}
@media screen and (max-width: 600px) {
.overlay-text {
    font-size: 50%;
    }
}
/*.grid {
	position: relative;
    display: flex;
    flex-flow: row wrap;
    margin-top: 12%;
    margin-left: 25%;
    width: auto;
    /*margin-right: 5%;*/
/*}
.grid-item {
    margin-bottom: 2.5vw;
    margin-right: 2.5vw;
    max-width: 32%;
    height: auto;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}
.grid-item-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}*/
/*
/*@media screen and (max-width: 600px)
.overlay-text {
    font-size: 100%;
}
@media screen and (max-width: 600px)
.overlay-text-title {
    font-size: 5vw;
}
@media screen and (max-width: 600px)
.grid-item-large .overlay-text-title {
    font-size: 5vw;
}
@media screen and (max-width: 600px)
.grid-item img {
    height: auto !important;
}


/.grid:before, .grid:after {
    content:"";
    display: table;
}
/.grid:after {
    clear: both;
}
/*header, section, aside {
    margin-bottom: 24px;
}
section {
    float: left;
    width: 49.5%;
}
aside {
    float: right;
    width: 49.5%;
}
.work {
    width: 100%;
}

/* footer */
/*footer {
    margin-bottom: 0;
    margin-left: 5%;
}
*/