@import 'https://fonts.googleapis.com/css?family=Sintony';
@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Limelight&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');


html, body {margin: 0;  height: 100%; font-weight: 300; }
body { overflow-x: hidden; }

h1 {font-size:3.5vw; text-align: center; position: fixed; top:6%;
    font-family: "Nosifer", serif;}
h2 {font-size:3.5vw; text-align: center; position: fixed; top:6%;
    font-family: "Nosifer", serif;}
h3 {font-size:2vw; text-align: center; position: fixed; bottom:15%;
    font-family: "anton SC", serif;}
h4 {font-size:1.6vw; text-align: center; position: fixed; bottom:10%;
    font-family: "anton SC", serif;}

/* font-size: clamp(1rem, 1.5vw, 2vw); */

.full-screen {width: 100vw; height: 100%; 
background-image: url("bros_redesign_2a_550px2.png"); 
/* background-image: url("bros_redesign_2a_550px2.png"); */
background-repeat: no-repeat; background-position:50% 50%;   
display: block;  overflow: hidden;
}

#intro {display: flex;   flex-direction: column;
  justify-content: center;    color: var(--color-just-black); }


/* MENU AREA */

.menu {width:100%; height:auto;
    background-color:white; 
    position: fixed;
    display: -webkit-box; display: -ms-flexbox;
    display: flex; justify-content: center; align-items: center; text-align: center; 
    z-index:999;
}
.menu a {text-transform: uppercase; color:#7e1616; font-family: "Sintony", serif;
    padding: 1rem 2rem; text-decoration: none; font-size:1.3vw;  font-weight: bold;}
.menu > div { height:auto;}


#masthead {width:100%;
    background-color:white; 
    position: fixed; top:10%;
    display: -webkit-box; display: -ms-flexbox;
    display: flex; justify-content: center; align-items: center; text-align: center; 
    z-index:999; 
}
#masthead a {text-transform: uppercase; color:black; font-family: "Sintony", serif;
    padding: 1rem 1rem; text-decoration: none; font-size:.9vw; font-weight:700;
    justify-content: center; align-items: center; text-align: center;}


#footer {width:100%; height:60px;
      background-color:white; 
      position: fixed; bottom:0%;
      display: -webkit-box; display: -ms-flexbox;
      display: flex; justify-content: center; align-items: center; text-align: center; 
      z-index:999; 
  }
#footer a {text-transform: uppercase; color:black; font-family: "Sintony", serif;
      padding: 1rem 1rem; text-decoration: none; font-size:.9vw; font-weight:700;
      justify-content: center; align-items: center; text-align: center;}

#footer a:active { color: rgb(250, 3, 3);
background-color: transparent;
text-decoration: underline;}

/* CLOSE MENU AREA */


#panels #panels-container { 
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
  overflow: hidden;
  background-image: url("0607(3).gif"); background-repeat:no-repeat;
  background-size:100vw 100vh;
}
#panels #panels-container .panel {
  color: var(--color-just-black);
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: center;
}
#panels #panels-container .panel img {
  max-width: 100%;
  height: auto;
  display: block;
}
#panels #panels-container .panel .panels-navigation {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#panels #panels-container .panel .anchor-panel,
#panels #panels-container .panel .nav-panel {
  text-transform: uppercase;
  margin-right: 2rem;
}
#panels #panels-container .panels-navigation {
  position: absolute;
  width: 100%;
  bottom: 2rem;
  right: 2rem;
}

#panels-container p {font-size:1.2vw; color:#444; text-shadow:1px 1px rgb(0, 0, 0); font-family: "Sintony", serif;
position: fixed; bottom:20%; text-align: center; margin-left:2%; margin-right:2%;}

a {  color: var(--color-just-black) }

.spacer {width:100%; height:auto; overflow:hidden;
display: flex; justify-content: center; align-items: center; text-align: center;}
.responsive {display:grid; width:100%;}
div.gallery {margin-bottom:1%; text-align: center; }
div.gallery img {margin:0; width:100%; height: auto; padding:1%;}

div.gallery:hover img {}
div.desc {}


.gallery {
    --s: 250px; /* control the size */
    --g: 15px;  /* control the gap */
    --f: 1.5;   /* control the scale factor */
    
    display: grid;
    gap: var(--g);
    width: calc(3*var(--s) + 2*var(--g));
    aspect-ratio: 1;
    grid-template-columns: repeat(3,auto);
}
  
.gallery > img {
    width: 0;
    height: 0;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    cursor: pointer;
    filter: grayscale(80%);
    transition: .35s linear;
}




@media only screen and (max-width:1500px) 
{

.menu {height:50px;}
.menu > div img {height:50px;}
h1 {font-size:4vw;}
h2 {font-size:3vw;}
h3 {font-size:3vw;}
h4 {font-size:3vw;}
#footer a {font-size:1.3vw;}
#footer a {font-size:1.2vw;}

}


@media only screen and (max-width:1250px) 
{

#panels #panels-container {background-image: url("bg_1_1080.gif");}
h1 {font-size:4vw;}
h2 {font-size:3vw;}
h3 {font-size:3vw;}
h4 {font-size:3vw;}
#footer a {font-size:1.3vw;}

}

@media only screen and (max-width:500px) 
{

.menu {background-color:rgb(163, 28, 28);}
#panels #panels-container {background-image: url("0607small.gif");}
h1 {font-size:10
  vw;}
h2 {font-size:3vw;}
h3 {font-size:3vw;}
h4 {font-size:3vw;}
#footer a {font-size:3.0vw;}

}