/* ----------- reset ----------- */
html, body {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 16px;
}
button {
border: 0;
outline: 0;
background-color: #fff;;
}
/* ----------- iphone5 320x568 portrait ----------- */
body {
background: #fff;
/* color: #b1b1b1; ORIGNAL BODY COLOR */
color: #757474;
font-family: century-gothic, sans-serif;
font-style: normal;
font-weight: 400;
padding: 1rem;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 31vh max-content;
grid-template-areas:
"nav nav nav nav"
"content content content content"
;
grid-row-gap: 1rem;
grid-column-gap: 0.9rem;
height: 100%;
align-items: start;
}
.stickyContainer {
display: grid;
grid-area: nav;
align-self: start;
justify-self: left;
position: fixed;
grid-template-columns: 1rem max-content 1fr min-content 1rem;
grid-template-rows: 1rem minmax(min-content, max-content);
grid-template-areas:
". . . . ."
". name . menu ." ;
top: 0;
left: 0;
height: 35vh;
width: 100vw;
box-sizing: border-box;
background: white;
}
.gongName {
grid-area: name;
align-self: start;
justify-self: left;
}
.gongName img {
width: 2rem;
}
.gongMenu {
grid-area: menu;
align-self: start;
justify-self: left;
}
.picture,
.content,
.video {
grid-area: content;
align-self: start;
justify-self: left;
}
.picture img {
width: 100%;
height: auto;
}
.picture__ls {
display: none;
}
.contentPic {
width: 48vw;
height: auto;
margin-bottom: .5rem;
}
.contentPic img {
width: 100%;
height: auto;
}
video {
width: 100% !important;
height: auto !important;
margin-bottom: 1rem;
object-fit: cover;
}
.contentCopy p {
font-size: .8rem;
line-height: 1rem;
padding-right: 1.25rem;
margin: 0 0 .5rem 0;
}
.contentCopy p + p {
margin-top: 1rem;
}
.masonry {
column-count: 1;
column-gap: .5rem;
grid-area: content;
align-self: start;
justify-self: left;
}
.masonry-layout-panel {
break-inside: avoid;
}
.masonry-layout-panel img,
.masonry-layout-panel video {
width: 100%;
height: auto;
}
h1 {
font-weight: 200;
font-size: 3rem;
line-height: 2.5rem;
text-transform: uppercase;
letter-spacing: -.29rem;
margin: 0 0 1rem 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a, a:visited {
/* color: #b1b1b1; ORIGINAL VISITED COLOR */
color: #757474;
text-decoration: none;
font-size: .8rem;
line-height: 1rem;
}
a:hover, a.here, a:hover.here, a:visited.here {
/* color: #666565; ORIGINAL HOVER COLOR */
color: #b5070d;
}
p.strongPara {
font-weight: bold;
font-style: italic;
}
/* ----------- iphone5 568x320 landscape ----------- */
@media only screen and (min-width: 500px)
and (orientation: landscape) {
body{
padding: 1rem;
}
.container {
display: grid;
grid-template-columns: 12.5rem 1fr;
grid-template-rows: max-content;
grid-template-areas:
"nav content";
grid-row-gap: 1.2rem;
grid-column-gap: 0.9rem;
height: 90vh;
}
.stickyContainer {
display: grid;
grid-area: nav;
align-self: start;
justify-self: left;
position: fixed;
grid-template-columns: 1rem max-content 1.4rem 1px;
grid-template-rows: 1rem minmax(min-content, max-content) 1fr;
grid-template-areas:
". . . ."
". name . line"
". menu . line";
top: 0;
left: 0;
height: 94vh;
width: max-content;
box-sizing: border-box;
background: white;
}
.gongName {
grid-area: name;
margin-bottom: 1rem;
}
.gongLogo img {
width: 2rem;
}
.gongMenu {
grid-area: menu;
}
.gongLine {
grid-area: line;
background-color: #b1b1b1;
}
.picture,
.content,
.picture__ls {
grid-area: content;
align-self: start;
justify-self: left;
height: 90vh;
}
.picture {
display: none;
}
.picture__ls {
display: block;
justify-self: center;
}
.picture__ls img {
width: auto;
height: 90vh;
}
.content {
display: grid;
grid-template-columns: max-content 1fr;
grid-column-gap: 1rem;
}
.contentPic {
width: 20vw;
height: 100%;
}
.content {
height: 60.25vh;
}
.contentCopy p {
margin: -4px 0 1rem 0;
}
.masonry {
width: 100%;
columns: 2 3rem;
column-gap: .5rem;
grid-area: content;
align-self: start;
justify-self: left;
}
.masonry-layout-panel {
break-inside: avoid;
margin-bottom: .2rem;
}
h1 {
font-size: 3rem;
line-height: 2.5rem;
margin-top: -2px
}
ul {
margin: 0;
}
}
/* ----------- iphone6/7/8 landscape ----------- */
@media only screen and (min-width: 650px)
and (orientation: landscape) {
.content {
width: auto;
height: 61vh;
}
.masonry {
columns: 3;
column-gap: .5rem;
}
}
/* ----------- iPad 768x1024 Portrait ----------- */
@media only screen and (min-width: 765px)
and (orientation: portrait) {
body {
padding: 2.5rem 4rem;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 25vh max-content;
grid-template-areas:
"nav nav nav nav"
"content content content content"
;
grid-row-gap: 1rem;
grid-column-gap: 0.9rem;
height: 100%;
align-items: start;
}
.stickyContainer {
display: grid;
grid-area: nav;
align-self: start;
justify-self: left;
position: fixed;
grid-template-columns: 4rem max-content 1fr min-content 4rem;
grid-template-rows: 2.5rem minmax(min-content, max-content);
grid-template-areas:
". . . . ."
". name . menu ."
;
top: 0;
left: 0;
height: 30vh;
width: 100vw;
box-sizing: border-box;
background: white;
}
.gongName {
grid-area: name;
align-self: start;
justify-self: left;
}
.gongName img {
width: 2rem;
}
.gongMenu {
grid-area: menu;
align-self: start;
justify-self: left;
}
.picture {
grid-area: content;
align-self: start;
justify-self: center;
height: 68vh;
}
.picture img {
width: auto;
height: 100%;
}
.picture__ls {
display: none;
}
.content {
grid-area: content;
align-self: start;
justify-self: left;
width: 100%;
display: grid;
grid-template-columns: max-content 1fr;
grid-column-gap: 2.5rem;
}
.contentPic {
width: 38.5vw;
height: auto;
margin-bottom: .5rem;
}
.contentPic img {
width: 100%;
height: auto;
}
.masonry {
columns: 3;
column-gap: .5rem;
grid-area: content;
align-self: start;
justify-self: left;
}
.masonry-layout-panel {
break-inside: avoid;
display: inline-block;
margin-bottom: .4rem;
}
h1 {
font-size: 4.5rem;
line-height: 3.8rem;
letter-spacing: -.5rem;
margin: 0 0 1.6rem 0;
}
ul {
width: 6rem;
}
a, a:hover, a:visited {
font-size: .8rem;
line-height: 1rem;
}
}
/* ----------- iPad 768x1024 Landscape----------- */
/* @media only screen and (min-width: 1024px)
and (min-height: 768px)
and (orientation: landscape) {
body {
background: blue;
}
} */
/* ----------- iPhone X++ Landscape ----------- */
@media only screen and (min-width: 800px)
and (orientation: landscape) {
body {
padding: 1.2rem;
}
.container {
display: grid;
grid-template-columns: 11.2rem 1fr;
grid-template-areas:
"gong-name content"
"gong-logo content"
"gong-menu content"
;
grid-gap: 1rem;
height: 90vh;
margin: 0;
}
.stickyContainer {
grid-template-columns: 1.2rem max-content 1.4rem 1px;
grid-template-rows: 1.2rem minmax(min-content, max-content) 1fr;
height: 95vh;
}
.gongLogo img {
width: 2rem;
}
.picture {
display: none;
}
.picture__ls {
display: block;
justify-self: center;
}
.picture__ls img {
width: auto;
height: 90vh;
}
h1 {
font-size: 2.75rem;
line-height: 2.25rem;
}
.content {
grid-column-gap: 1.7rem;
}
.contentPic {
width: 30vw;
height: 40vh;
}
}
/* ----------- Desktop 1024px ----------- */
@media only screen
and (min-width: 1024px)
/* and (max-height: 1080px) */
and (orientation: landscape) {
body{
padding: 2rem;
}
.container {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-rows: max-content;
grid-template-areas:
"nav content";
grid-row-gap: 1.2rem;
grid-column-gap: 0.9rem;
height: 90vh;
}
.stickyContainer {
display: grid;
grid-area: nav;
align-self: start;
justify-self: left;
position: fixed;
grid-template-columns: 2rem max-content 2.5rem 1px;
grid-template-rows: 2rem max-content 1fr;
grid-template-areas:
". . . ."
". name . line"
". menu . line" ;
top: 0;
left: 0;
height: 94.5vh;
width: max-content;
box-sizing: border-box;
background: white;
}
.gongName {
grid-area: name;
margin-bottom: 1rem;
}
.gongLogo img {
width: 2rem;
}
.gongMenu {
grid-area: menu;
}
.gongLine {
grid-area: line;
background-color: #b1b1b1;
}
.picture,
.content,
.main {
grid-area: content;
align-self: start;
justify-self: left;
height: 90vh;
}
.main {
width: 95%;
}
.picture {
display: none;
}
.picture__ls {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
place-self: center;
}
.picture__ls img {
width: auto;
height: 50vw;
}
.content {
display: grid;
grid-template-columns: 40% minmax(18rem, 26rem);
grid-column-gap: 1.65rem;
}
.contentCopy p {
font-size: .9rem;
line-height: 1.2rem;
padding-right: 1.25rem;
margin: 0 0 .5rem 0;
}
.contentCopy p + p {
margin-top: 1.5rem;
}
.contentPic {
width: 100%;
height: auto;
margin-bottom: .5rem;
}
.contentPic img {
width: 100%;
height: auto;
}
.masonry {
columns: 4 12rem;
column-gap: .5rem;
grid-area: content;
align-self: start;
justify-self: left;
}
.masonry-layout-panel {
break-inside: avoid;
display: inline-block;
margin-bottom: .6rem;
cursor: pointer;
}
h1 {
font-weight: 200;
font-size: 4.75rem;
line-height: 3.75rem;
text-transform: uppercase;
margin-bottom: 2rem;
letter-spacing: -.5rem;
}
ul {
width: 7rem;
}
a, a:hover, a:visited {
font-size: .9rem;
line-height: .75rem;
}
}
/* Portrait and Landscape */
/* @media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
} */
/* iPad Pro 12.9 Portrait */
@media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
body {
padding: 2.5rem 4rem;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 25vh max-content;
grid-template-areas:
"nav nav nav nav"
"content content content content"
;
grid-row-gap: 1rem;
grid-column-gap: 0.9rem;
height: 100%;
align-items: start;
}
.stickyContainer {
display: grid;
grid-area: nav;
align-self: start;
justify-self: left;
position: fixed;
grid-template-columns: 4rem max-content 1fr min-content 4rem;
grid-template-rows: 2.5rem minmax(min-content, max-content);
grid-template-areas:
". . . . ."
". name . menu ."
;
top: 0;
left: 0;
height: 30vh;
width: 100vw;
box-sizing: border-box;
background: white;
}
.gongName {
grid-area: name;
align-self: start;
justify-self: left;
}
.gongName img {
width: 2rem;
}
.gongMenu {
grid-area: menu;
align-self: start;
justify-self: left;
}
.picture {
grid-area: content;
align-self: start;
justify-self: center;
height: 68vh;
}
.picture img {
width: auto;
height: 100%;
}
.picture__ls {
display: none;
}
.content {
grid-area: content;
align-self: start;
justify-self: left;
width: 100%;
display: grid;
grid-template-columns: max-content 1fr;
grid-column-gap: 2.5rem;
}
.contentPic {
width: 38.5vw;
height: auto;
margin-bottom: .5rem;
}
.contentPic img {
width: 100%;
height: auto;
}
.masonry {
columns: 3;
column-gap: .5rem;
grid-area: content;
align-self: start;
justify-self: left;
}
.masonry-layout-panel {
break-inside: avoid;
display: inline-block;
margin-bottom: .4rem;
}
h1 {
font-size: 4.5rem;
line-height: 3.8rem;
letter-spacing: -.5rem;
margin: 0 0 1.6rem 0;
}
ul {
width: 6rem;
}
a, a:hover, a:visited {
font-size: .8rem;
line-height: 1rem;
}
}
/* iPad Pro 12.9 Landscape */
@media only screen
and (min-device-width: 1366px)
and (max-device-height: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
body{
padding: 2rem;
}
.container {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-rows: max-content;
grid-template-areas:
"nav content";
grid-row-gap: 1.2rem;
grid-column-gap: 0.9rem;
height: 90vh;
}
.stickyContainer {
display: grid;
grid-area: nav;
align-self: start;
justify-self: left;
position: fixed;
grid-template-columns: 2rem max-content 2.5rem 1px;
grid-template-rows: 2rem max-content 1fr;
grid-template-areas:
". . . ."
". name . line"
". menu . line" ;
top: 0;
left: 0;
height: 94.5vh;
width: max-content;
box-sizing: border-box;
background: white;
}
.gongName {
grid-area: name;
margin-bottom: 1rem;
}
.gongLogo img {
width: 2rem;
}
.gongMenu {
grid-area: menu;
}
.gongLine {
grid-area: line;
background-color: #b1b1b1;
}
.picture,
.content,
.main {
grid-area: content;
align-self: start;
justify-self: left;
height: 90vh;
}
.main {
width: 95%;
}
.picture {
display: none;
}
.picture__ls {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
place-self: center;
}
.picture__ls img {
width: auto;
height: 50vw;
}
.content {
display: grid;
grid-template-columns: 40% minmax(18rem, 26rem);
grid-column-gap: 1.65rem;
}
.contentCopy p {
font-size: .9rem;
line-height: 1.2rem;
padding-right: 1.25rem;
margin: 0 0 .5rem 0;
}
.contentCopy p + p {
margin-top: 1.5rem;
}
.contentPic {
width: 100%;
height: auto;
margin-bottom: .5rem;
}
.contentPic img {
width: 100%;
height: auto;
}
.masonry {
columns: 4 12rem;
column-gap: .5rem;
grid-area: content;
align-self: start;
justify-self: left;
}
.masonry-layout-panel {
break-inside: avoid;
display: inline-block;
margin-bottom: .6rem;
cursor: pointer;
}
h1 {
font-weight: 200;
font-size: 4.75rem;
line-height: 3.75rem;
text-transform: uppercase;
margin-bottom: 2rem;
letter-spacing: -.5rem;
}
ul {
width: 7rem;
}
a, a:hover, a:visited {
font-size: .9rem;
line-height: .75rem;
}
}
/* Modal */
.modal {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgba(177,177,177,0.75); /* grey w/opacity */
}
.carousel {
display: grid;
grid-template-columns: 3em 80vw 3em;
height: 80vh;
background-color: #fff;
}
.carousel__contents-container {
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.carousel__contents {
height: 100%;
width: auto;
}
.carousel__slide {
width: 0;
height: 0;
margin: 0 auto;
text-align: center;
display: none;
}
.carousel__slide img {
width: 0;
height: 0;
}
.carousel__contents .carousel__slide.active {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
visibility: visible;
}
.next,
.prev {
max-width: 6em;
}
@media only screen and (min-width: 765px)
and (orientation: portrait) {
.carousel__slide.active img {
width: 80%;
height: 700px;
object-fit: contain;
/* border: 1px solid red; */
}
}
@media only screen and (min-width: 1024px)
and (orientation: landscape) {
.carousel__slide.active img {
object-fit: contain;
width: 80%;
height: 600px;
/* border: 2px solid blue; */
}
}
@media only screen and (min-width: 1065px)
and (orientation: landscape) {
.carousel__slide.active img {
object-fit: contain;
width: 80%;
height: 780px;
/* border: 2px solid blue; */
}
}
@media only screen and (min-width: 1370px)
and (orientation: landscape) {
.carousel__slide.active img {
width: 100%;
height: 100%;
object-fit: contain;
/* border: 2px solid deeppink; */
}
}
.open {
display: block;
}
.shut {
display: none;
}
/* The Close Button */
.close {
position: absolute;
top: 1.2rem;
right: 1.2rem;
width: 2.25rem;
height: auto;
z-index: 500;
}
.close:hover,
.close:focus {
color: #666565;
text-decoration: none;
cursor: pointer;
}