/* CSS Document */
@charset "utf-8";
@font-face {font-family:'Oswald'; src:url('../fonts/Oswald-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}

html {scroll-behavior:smooth;}
html, body {margin:0; padding:0; height:100%;}
html, body, button, input, select, textarea {font-family:Arial, sans-serif; font-size:14px; line-height:24px; font-weight:normal; color:#555;}
div, img {position:relative; display:block; box-sizing:border-box; max-width:100%; height:auto;}

a {color:inherit; text-decoration:none;}
a:focus {outline:none}
a:hover, a:active {outline:0; color:#000;}

h1, h2, h3, h4, h5, h6 {font-family:'Oswald', Arial, sans-serif; font-weight:400; color:#000; text-transform:uppercase;}
h1 {font-size:60px; line-height:72px; padding:42px 0 48px; margin:0 0 42px; border-top:#bbb 1px dotted; border-bottom:#bbb 1px dotted;}
h2 {font-size:32px; line-height:42px; padding:0 0 48px; margin:0 0 42px; border-bottom:#bbb 1px dotted;}
p, ul, ol, table {margin-bottom:24px; display:block;}

hr {padding:0; margin:48px 0; height:0; border:0 none; border-bottom:#bbb 1px dotted;}

.main {width:888px; padding:0 0 60px; margin:0 auto;}
.header {padding:32px 0 18px; margin:0; text-align:right; color:#aaa;}
.footer {padding:24px 0; margin:42px 0 24px; text-align:center; color:#aaa; border-top:#bbb 1px dotted; border-bottom:#bbb 1px dotted;}
.header a, .footer a {display:inline-block; margin:0 12px;}
.info {padding:48px 0; font-style:italic; color:#aaa;}
.to-top {padding:0; margin:0 auto; text-align:center;}

.gallery {line-height:0px; display:grid; grid-template-rows:repeat(8, 1fr); grid-template-columns:repeat(3, 1fr); grid-auto-flow:row; grid-gap:6px;}
.gallery a {position:relative; display:block; box-sizing:border-box; max-width:100%; height:auto;}
.box {overflow:hidden; vertical-align:top; margin:0;}
.box:nth-child(1), .box:nth-child(10) {grid-row: span 2; grid-column: span 2;}
.box img {width:100%;}
.box::after {position:absolute; top:0; left:0; display:block; width:100%; text-align:center; padding:33% 0 40%; font-size:18px;
font-family:'Oswald', Arial, sans-serif; color:#000; background:rgba(255,255,255,0.8); z-index:100; opacity:0; transition:opacity 0.4s;}
.box:hover::after {cursor:pointer; opacity:1;}
.box:active::after {opacity:0;}

.mocca {background-image:url(../images/01_mocca_IMG_0792.jpg); background-size:cover;} 
.mocca:after {content:"mocca";}
.behind {background-image:url(../images/02_behind_IMG_0795.jpg); background-size:cover;} 
.behind:after {content:"behind";}
.telling {background-image:url(../images/03_telling_IMG_0794.jpg); background-size:cover;} 
.telling:after {content:"telling";}
.gent {background-image:url(../images/04_gent_IMG_0801.jpg); background-size:cover;} 
.gent:after {content:"gent";}
.meed {background-image:url(../images/05_meed_IMG_0803.jpg); background-size:cover;} 
.meed:after {content:"meed";}
.on-flying {background-image:url(../images/06_on-flying_IMG_0813.jpg); background-size:cover;} 
.on-flying:after {content:"on flying";}
.here {background-image:url(../images/07_here_IMG_0817.jpg); background-size:cover;} 
.here:after {content:"here";}
.there {background-image:url(../images/08_there_IMG_0824.jpg); background-size:cover;} 
.there:after {content:"there";}
.bingo {background-image:url(../images/09_bingo_IMG_0819.jpg); background-size:cover;} 
.bingo:after {content:"bingo";}
.morning {background-image:url(../images/10_morning_IMG_0826.jpg); background-size:cover;} 
.morning:after {content:"morning";}
.sleeping {background-image:url(../images/11_sleeping_IMG_0828.jpg); background-size:cover;} 
.sleeping:after {content:"sleeping";}
.awakening {background-image:url(../images/12_awakening_IMG_0831.jpg); background-size:cover;} 
.awakening:after {content:"awakening";}
.you {background-image:url(../images/13_you_IMG_0823.jpg); background-size:cover;} 
.you:after {content:"you";}
.me {background-image:url(../images/14_me_IMG_0834.jpg); background-size:cover;} 
.me:after {content:"me";}
.from {background-image:url(../images/15_from_IMG_0870.jpg); background-size:cover;} 
.from:after {content:"from";}
.unsurance {background-image:url(../images/16_unsurance_IMG_0872.jpg); background-size:cover;} 
.unsurance:after {content:"unsurance";}
.predestination {background-image:url(../images/17_predestination_IMG_0871.jpg); background-size:cover;} 
.predestination:after {content:"predestination";}
.no-chance-to-fall {background-image:url(../images/18_no-chance-to-fall_IMG_0873.jpg); background-size:cover;} 
.no-chance-to-fall:after {content:"no chance to fall";}


/*///////////////////// IMAGE LIGHTBOX /////////////////////////*/

#imagelightbox {position:fixed; z-index:202;
cursor:pointer; 
-ms-touch-action: none; touch-action: none;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3 ); /* 50 */
box-shadow: 0 0 10px rgba(0,0,0,0.3); /* 50 */
}
#imagelightbox-overlay {position:fixed; top:0; right:0; bottom:0; left:0; z-index:201; 
background-color:#fff; background-color:rgba(255,255,255,.9);
}
#imagelightbox-loading, #imagelightbox-loading div {border-radius:50%;}
#imagelightbox-loading {position:fixed; top:50%; left:50%; z-index:203; 
width: 2.5em; /* 40 */
height: 2.5em; /* 40 */
padding:0.625em; /* 10 */
margin: -1.25em 0 0 -1.25em; /* 20 */
background-color:#ddd;
}
#imagelightbox-loading div {
width: 1.25em; /* 20 */
height: 1.25em; /* 20 */
background-color: #fff;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
#imagelightbox-caption {position:fixed; left:0; right:0; bottom:0; z-index:10001;
text-align: center; color: #fff; background-color: rgba(0,0,0,0.3);
padding: 0; /* 10 */
}
@-webkit-keyframes imagelightbox-loading {
from {opacity:0.5;	-webkit-transform: scale(0.75);}
50%	 {opacity:1;	-webkit-transform: scale(1);}
to	 {opacity:0.5;	-webkit-transform: scale(0.75);}
}
@keyframes imagelightbox-loading {
from {opacity:0.5;	transform: scale(0.75);}
50%	 {opacity: 1;	transform: scale(1);}
to	 {opacity:0.5;	transform: scale(0.75);}
}


/*///////////// RESPONSIVE /////////////*/

@media screen and (max-width: 899px) {
h1, h2, p, .info {padding-left:2%; padding-right:2%;}
}
@media screen and (max-width: 449px) {
.gallery {display:block;}
.gallery a {margin-bottom:6px;}
.footer a {display:block; margin:6px auto;}
}