/* 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(7), .box:nth-child(13) {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;}

.soft-touch {background-image:url(../images/01_soft-touch_IMG_8976.jpg); background-size:cover;} 
.soft-touch:after {content:"soft touch";}
.dance-in-the-mirrors {background-image:url(../images/02_dance-in-the-mirrors_IMG_8978.jpg); background-size:cover;} 
.dance-in-the-mirrors:after {content:"dance in the mirrors";}
.friendly-handshake {background-image:url(../images/03_friendly-handshake_IMG_8965.jpg); background-size:cover;} 
.friendly-handshake:after {content:"friendly handshake";}
.tango {background-image:url(../images/04_tango_IMG_8974.jpg); background-size:cover;} 
.tango:after {content:"tango";}
.night-walk {background-image:url(../images/05_night-walk_IMG_8959.jpg); background-size:cover;} 
.night-walk:after {content:"night walk";}
.two-gether {background-image:url(../images/06_two-gether_IMG_8964.jpg); background-size:cover;} 
.two-gether:after {content:"two gether";}
.gold-player {background-image:url(../images/07_gold-player_IMG_8966.jpg); background-size:cover;} 
.gold-player:after {content:"gold player";}
.gold-thinker {background-image:url(../images/08_gold-thinker_IMG_8968.jpg); background-size:cover;} 
.gold-thinker:after {content:"gold thinker";}
.gold-winner {background-image:url(../images/09_gold-winner_IMG_8981.jpg); background-size:cover;} 
.gold-winner:after {content:"gold winner";}
.tense {background-image:url(../images/10_tense_IMG_9025.jpg); background-size:cover;} 
.tense:after {content:"tense";}
.in-tense {background-image:url(../images/11_in-tense_IMG_9020.jpg); background-size:cover;} 
.in-tense:after {content:"in tense";}
.acapella {background-image:url(../images/12_acapella_IMG_9029.jpg); background-size:cover;} 
.acapella:after {content:"acapella";}
.spring {background-image:url(../images/13_spring_IMG_8995.jpg); background-size:cover;} 
.spring:after {content:"spring";}
.greetings {background-image:url(../images/14_greetings_IMG_9016.jpg); background-size:cover;} 
.greetings:after {content:"greetings";}
.welcome {background-image:url(../images/15_welcome_IMG_9009.jpg); background-size:cover;} 
.welcome:after {content:"welcome";}


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