/* 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:#e6e6e6 1px solid; border-bottom:#e6e6e6 1px solid;}
h2 {font-size:32px; line-height:42px; padding:0 0 48px; margin:0 0 42px; border-bottom:#e6e6e6 1px solid;}
p, ul, ol, table {margin-bottom:24px; display:block;}
.center {text-align:center;}

hr {padding:0; margin:24px 0; height:0; border:0 none; border-bottom:#e6e6e6 1px solid;}

.main {width:888px; padding:0 0 60px; margin:0 auto;}
.header {padding:0 0 40px; margin:0; text-align:right; color:#aaa; text-transform:uppercase;}
.logo {position:absolute; left:0; top:12px; width:max-content; padding:0; margin:0 auto;}
.logo img {width:200px;}
.navi {padding:40px 0 0; margin:0 0 0 auto; width:max-content; right:0;}
.footer {padding:24px 0; margin:48px 0 24px; clear:both; line-height:36px; text-align:center; color:#aaa; border-top:#e6e6e6 1px solid; border-bottom:#e6e6e6 1px solid;}
.navi a, .footer a {display:inline-block; margin:0 12px;}
.deep {color:#555;}
.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-columns:repeat(3, 1fr); grid-auto-flow:row; grid-gap:6px; margin:48px 0;}
.gallery a {position:relative; display:block; box-sizing:border-box; max-width:100%; height:auto;}
.box {overflow:hidden; vertical-align:top; margin:0; background-size:cover;}
.box:nth-child(1), .box:nth-child(3), .box:nth-child(6), .box:nth-child(11) {grid-row: span 2;}
.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%; height:100%; text-align:center; padding:35% 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:nth-child(1)::after, .box:nth-child(3)::after, .box:nth-child(6)::after, .box:nth-child(11)::after {padding:70% 0 40%;}
.box:hover::after {cursor:pointer; opacity:1;}
.box:active::after {opacity:0;}

.light_of_joshua {background-image:url(../images/water/01_light_of_joshua.jpg);} .light_of_joshua:after {content:"light of joshua";}
.light_tulip {background-image:url(../images/water/02_light_tulip.jpg);} .light_tulip:after {content:"light tulip";}
.being_of_light {background-image:url(../images/water/03_being_of_light.jpg);} .being_of_light:after {content:"being of light";}
.way_of_light {background-image:url(../images/water/04_way_of_light.jpg);} .way_of_light:after {content:"way of light";}
.butterfly_angel {background-image:url(../images/water/05_butterfly_angel.jpg);} .butterfly_angel:after {content:"butterfly angel";}
.landscapes_of_light {background-image:url(../images/water/06_landscapes_of_light.jpg);} .landscapes_of_light:after {content:"landscapes of light";}
.river_of_love {background-image:url(../images/water/07_river_of_love.jpg);} .river_of_love:after {content:"rive of love";}
.birth_of_light {background-image:url(../images/water/08_birth_of_light.jpg);} .birth_of_light:after {content:"birth of light";}
.angel_of_awakening {background-image:url(../images/water/09_angel_of_awakening.jpg);} .angel_of_awakening:after {content:"angel of awakening";}
.lightflight {background-image:url(../images/water/10_lightflight.jpg);} .lightflight:after {content:"lightflight";}
.deep_blue_ocean {background-image:url(../images/water/11_deep_blue_ocean.jpg);} .deep_blue_ocean:after {content:"deep blue ocean";}


/*///////////////////// 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) {
.logo {left:2%;}
.navi a:first-child {display:none;}
h1, h2, p, .info {padding-left:2%; padding-right:2%;}
}
@media screen and (max-width: 599px) {
.header {text-align:center; padding:0 0 12px;}
.logo {position:relative; left:auto; width:120px;}
.navi {padding:20px 0 0; margin:0 auto;}
.gallery {display:block;}
.gallery a {margin-bottom:6px;}
.footer a {display:block; margin:6px auto;}
}