@charset "utf-8";
/* CSS Document */
body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; }
.goBeyond { display: block; position: absolute; right: -150px; top: 3px; border-radius: 50%; cursor: default; }
.goBeyond .fa { width: 30px; height: 30px; opacity: 0 }
.goBeyond .fa:hover { opacity: 0.1 }
/* header */
header { display: block; height: 700px; margin: 0 0 50px; background: url(/image/banner-homepage.jpg) no-repeat; background-size: cover; position: relative; }
h1 { font-size: 10vw; font-weight: 700; text-align: center; text-transform: uppercase; width: 100%; margin: auto; transform: translateY(-50%); word-wrap: break-word; letter-spacing: 0.2em; position: absolute; top: 50%; height: 225px; }
.transparent-text { background-color: rgba(255,255,255,.4); color: #000; /* the magic property */
mix-blend-mode: screen; }
/* footer */
footer { display: block; position: relative; width: 1280px; margin: 100px auto 50px; overflow: hidden; }
.copyRight { background: rgba(0,0,0,.6); height: 20px; padding: 5px 45px 5px 30px; border-radius: 0 50% 50% 0; position: relative; width: 80px; display: inline-block; float: left; margin-left: 15px; line-height: 19px; }
.copyRight img { border-radius: 50%; position: absolute; left: -15px; top: 0; }
.beian { display: inline-block; float: right; text-align: right; background: #666; height: 20px; padding: 5px 20px 5px 45px; border-radius: 50% 0 0 50%; position: relative; margin-right: 15px; }
.beian a { text-decoration: none;}
.beian .circle { display: block; width: 30px; height: 30px; border-radius: 50%; background: #666; position: absolute; right: -15px; top: 0; }
/* photo gallery */
.title { max-width: 1440px; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 4rem; }
.title h2 { font-size: 2rem; text-transform: uppercase; }
.title h2:after { content: ""; width: 100px; height: 3px; background-color: #d03a63; display: block; margin-left: auto; margin-right: auto; margin-top: 30px; }
.title h2 span { background: linear-gradient(45deg, #ff2a8a, #0250bc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.container { max-width: 1280px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-auto-rows: 400px; grid-gap: 5px; grid-auto-flow: dense; }
@media (max-width: 499px) {
.container { grid-template-columns: 1fr; }
}
.container figure { display: block; margin: 0; padding: 0; width: 100%; height: 100%; position: relative; }
.container figure figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.65); padding: 2rem 1rem; }
.container figure figcaption span { color: #fff; display: block; }
.container figure figcaption span.img-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.4rem; }
@media (min-width: 376px) {
.container figure figcaption span.img-title { font-size: 1.5rem; }
}
.container figure figcaption span.img-description { font-size: 0.9rem; }
@media (min-width: 376px) {
.container figure figcaption span.img-description { font-size: 1rem; }
}
.container img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
 @media (min-width: 799px) {
.horizontal { grid-column: span 2; }
}
 @media (min-width: 799px) {
.vertical { grid-row: span 2; }
}
 @media (min-width: 799px) {
.big { grid-column: span 2; grid-row: span 2; }
}