/* 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(8), .box:nth-child(14) {grid-row: span 2; grid-column: span 2;}
.box:nth-child(10) {grid-row: span 2; grid-column: span 3;}
.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;}

.berry {background-image:url(../images/01_berry_IMG_1717.jpg); background-size:cover;}
.berry:after {content:"berry";}
.orange-cake {background-image:url(../images/02_orange-cake_IMG_1537.jpg); background-size:cover;}
.orange-cake:after {content:"orange cake";}
.biscuit {background-image:url(../images/03_biscuit_IMG_1547.jpg); background-size:cover;}
.biscuit:after {content:"biscuit";}
.coffee {background-image:url(../images/04_coffee_IMG_1558.jpg); background-size:cover;}
.coffee:after {content:"coffee";}
.espresso {background-image:url(../images/05_espresso_IMG_1564.jpg); background-size:cover;}
.espresso:after {content:"espresso";}
.caipirinha {background-image:url(../images/06_caipirinha_IMG_1702.jpg); background-size:cover;}
.caipirinha:after {content:"caipirinha";}
.cognac {background-image:url(../images/07_cognac_IMG_1675.jpg); background-size:cover;}
.cognac:after {content:"cognac";}
.absinthe {background-image:url(../images/08_absinthe_IMG_1771.jpg); background-size:cover;}
.absinthe:after {content:"absinthe";}
.rowan {background-image:url(../images/09_rowan_IMG_1800.jpg); background-size:cover;}
.rowan:after {content:"rowan";}
.champagne {background-image:url(../images/10_champagne_IMG_1827.jpg); background-size:cover;}
.champagne:after {content:"champagne";}
.poppy {background-image:url(../images/11_poppy_IMG_1797.jpg); background-size:cover;}
.poppy:after {content:"poppy";}
.interstellar {background-image:url(../images/12_interstellar_IMG_1798.jpg); background-size:cover;}
.interstellar:after {content:"interstellar";}
.orange-chocolate {background-image:url(../images/13_orange-chocolate_IMG_1432.jpg); background-size:cover;}
.orange-chocolate:after {content:"orange chocolate";}
.melting {background-image:url(../images/14_melting_IMG_1422.jpg); background-size:cover;}
.melting:after {content:"melting";}
.fig-syrup {background-image:url(../images/15_fig-syrup_IMG_1393.jpg); background-size:cover;}
.fig-syrup:after {content:"fig syrup";}
.candy-drops {background-image:url(../images/16_candy-drops_IMG_1398.jpg); background-size:cover;}
.candy-drops:after {content:"candy drops";}
.milky-way {background-image:url(../images/17_milky-way_IMG_1399.jpg); background-size:cover;}
.milky-way:after {content:"milky way";}
.jelly {background-image:url(../images/18_jelly_IMG_1415.jpg); background-size:cover;}
.jelly:after {content:"jelly";}
.fire-stone {background-image:url(../images/19_fire-stone_IMG_1439.jpg); background-size:cover;}
.fire-stone:after {content:"fire stone";}
.sugar-stone {background-image:url(../images/20_sugar-stone_IMG_1441.jpg); background-size:cover;}
.sugar-stone:after {content:"sugar stone";}



/*///////////////////// 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;}
}