@import 'https://fonts.googleapis.com/css?family=Sintony';
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Metal+Mania&family=Zen+Dots&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Holtwood+One+SC&family=Metal+Mania&family=Zen+Dots&display=swap');

* { box-sizing: border-box; }



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:0.8vw; color:#444; text-shadow:1px 1px rgb(0, 0, 0); font-family: "Sintony", serif;
position: fixed; bottom:20%; text-align: center; margin-left:1%; margin-right:1%;}

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



/*  PHONE DISPLAY - values up to 800px wide  */

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

body { height: 100vh; padding: 0; margin: 0; font-family: "Sintony", sans-serif; 
font-weight: 300; font-size: 13px; text-transform: uppercase;  scrollbar-width: thin;
background: #333;  color: #fff;  line-height: 1.6; }

header { background-color: #3a0ce0;  padding: 0;  margin: 0; }

#myVideo {position:fixed; top:1; left:1;  min-width:0%;  min-height:100%; }

.scroll-snapping { scroll-snap-type: y proximity; }

H1 {font-size:12vw; text-align: center; color:white; position: fixed; top:10%; font-family: "Germania One", sans-serif; text-shadow: 5px 8px rgb(0, 0, 0);}
H2 {font-size:4vw; text-align: center; color:white; position: fixed; bottom:20%; text-shadow: 2px 5px rgb(0, 0, 0);}
H3 {font-size:6vw; text-align: center; color:white; position: fixed; top:38%; font-family: "Holtwood One SC", serif; text-shadow: 3px 4px rgb(151, 33, 12);}
H4 {font-size:3vw; text-align: center; color:white; position: fixed; bottom:15%; text-shadow: 2px 5px rgb(0, 0, 0);}
H5 {font-size:3vw; color:white; font-family: "Sintony", sans-serif; position:fixed; top:2%; }
H6 {font-size:5vw; color:white; font-family: "Sintony", sans-serif; display: flex; top:5%; }

.logoarea { display: flex; justify-content: center; align-items: center; text-align: center;}
.logo {width:100%; display: flex; justify-content: center; align-items: center; text-align: center; padding:2%;
position:fixed; top:8%; z-index:20; }

.large {font-size:5vw; color:red; font-family: "Nosifer", sans-serif;}
.small { font-family: "Sintony", sans-serif; font-size:3vw; color:white;}


/* PARALLAX SECTION */

.section {text-align: center;  position: absolute;  width: 100%;  height: 100vh;  letter-spacing: 4px;  overflow: hidden;  clip: rect(0, auto, auto, 0);  border:solid 2px black; }
.section .fixed { overflow: hidden; position: fixed; position: fixed; top:40%; left: 50%;  }  /*  top:60%;  left: 50%;  --  60% from top for phone display */
.section .fixed img {width:100%; z-index:95; }
.section .white { color: #fff; }
.section a {color:blue;  }
.section a:hover {color:blue; }

.section .services {width:100%; height:100vh; font-size:5vw; line-height:8vw; transition-duration: 4s;
font-weight:bold; color:#333; padding-left:3%; padding-right:3%; position: fixed; top:30%; left:0%;}
.section .services a { font-size:5vw; color:red; width:100vw; line-height:11vw; }
.section .services a:hover { font-size:5vw; color:rgb(10, 25, 228); width:100vw; line-height:11vw; }
.section .services p {font-size:4vw; color:black;}

.section .services2 {width:100%; height:100vh; font-size:5vw; line-height:8vw; transition-duration: 4s;
font-weight:bold; color:#333; padding-left:3%; padding-right:3%; position: fixed; top:45%; left:0%;}
.section .services2 a { font-size:5vw; color:red; width:100vw; line-height:11vw; }
.section .services2 a:hover { font-size:5vw; color:rgb(10, 25, 228); width:100vw; line-height:11vw; }
.section .services2 p {width:90vw; font-size:6vw; color:black; color:rgb(182, 20, 20); text-shadow: 1px 2px rgb(139, 137, 137);}


.section:nth-child(1) { display:flex; justify-content: center; align-items: center; color: #000;  top: 0;  z-index: 4;
animation-duration: 0.5s; animation-timing-function: ease-in-out; scroll-snap-type: y proximity; }
.section:nth-child(1) .fixed { transform: translate(-50%, -50%); }
.section:nth-child(1) p {font-size:6vw; color:white; text-shadow: 3px 3px rgb(0, 0, 0); padding-top:0%;}

.section:nth-child(2) {animation-duration: 0.5s; animation-timing-function: ease-in-out; scroll-snap-type: y proximity;
background-image: url('0607small.gif'); background-repeat: no-repeat; background-size: cover;
color: #252525; top: 100vh;  z-index: 6; }
.section:nth-child(2) .fixed {transform: translate(-50%, -50%);}

.section:nth-child(3) {animation-duration: 0.5s; animation-timing-function: ease-in-out; scroll-snap-type: y proximity;
background-image: url('0607small.gif'); background-repeat: no-repeat; background-size: cover;
color: #252525;  top: 200vh;   z-index: 8; }
.section:nth-child(3) .fixed { transform: translate(-50%, -50%); }
.section:nth-child(3) .fixed p {font-size:8vw; color:orange; }

.section:nth-child(4) {animation-duration: 0.5s; animation-timing-function: ease-in-out; scroll-snap-type: y proximity;
background-color: rgb(226, 46, 15); color: #252525;  top: 300vh;  z-index: 10; }
.section:nth-child(4) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(5) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 400vh;  z-index: 12;}
.section:nth-child(5) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(6) {background-color: rgb(24, 194, 24);
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 500vh;  z-index: 12;}
  .section:nth-child(6) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(7) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 600vh;  z-index: 12;}
  .section:nth-child(7) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(8) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 700vh;  z-index: 12;}
.section:nth-child(8) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(9) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 800vh;  z-index: 12;}
.section:nth-child(9) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(10) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;   top: 900vh;  z-index: 12;}
.section:nth-child(10) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(11) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 1000vh;  z-index: 12;}
.section:nth-child(11) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(12) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 1100vh;  z-index: 12;}
.section:nth-child(12) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(13) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 1200vh;  z-index: 12;}
.section:nth-child(13) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(14) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 1300vh;  z-index: 12;}
.section:nth-child(14) .fixed { transform: translate(-50%, -50%); }

.section:nth-child(15) {background-color: chocolate;
  box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
  color: #fafafa;  top: 1400vh;  z-index: 12;}
.section:nth-child(15) .fixed { transform: translate(-50%, -50%); }


/* CLOSE PARALLAX SECTION */


/* Buttons Section */
.buttons {width:100vw; display: flex; z-index:999; justify-content: center; align-items: center;}
.buttonsposition {justify-content: center; align-items: center; padding:2%; 
position:fixed; bottom:8%; display:flex; z-index:999;}
.buttons a {color:maroon; text-decoration: none;}
.callbutton {width:6rem; height:2rem; border:solid 2px black; border-radius:10px; margin-right:10%;
display:flex; justify-content: center; align-items: center; font-family: "Boldonse", system-ui;
text-align: center; font-size:1rem; background-color:white;}
.emailbutton {width:6rem; height:2rem; border:solid 2px black; border-radius: 10px; margin-left:10%; 
display:flex; justify-content: center; align-items: center; font-family: "Boldonse", system-ui;
text-align: center; font-size:1rem; background-color:white}


/* HEADER BURGER MENU */
.mobilemenu { max-width:100vw; margin: auto;  color: rgb(255, 255, 255);  border-radius:10px;  }
.topnav { width:100%; overflow: hidden;   background-color:  rgb(151, 33, 12);  position:fixed; top:0; z-index:999; }
.topnav #myLinks { height:100vh; display: none; text-align: center; line-height: normal; 
  background-image:url('bros_bg_100.png'); background-repeat: no-repeat; background-size:100%; background-position:0% 20%; }
.topnav a { color: rgb(255, 255, 255); text-shadow:3px 4px rgb(0, 0, 0); padding: 14px 16px;  text-decoration: none;  font-size: 17px;  display: block;}
.topnav a.icon {  background: rgb(151, 33, 12);  display: block;  position: absolute;  right: 0;  top: 0;}
.active { height:6vh; background-color: rgb(151, 33, 12);  color:white; }


/* PAGE TRANSITIONS SECTION */

* {  margin: 0;  padding: 0; }

.container {width:100vw; height:100vh;  
/* background-image: url('0623.gif'), url('bros_goldfish_nobg.png');  background-repeat: no-repeat; 
  background-position:50%; background-blend-mode: overlay; background-size:100%, 50%; */
/*   CSS  Smooth Scroll */
overflow-y: scroll; scroll-behavior: smooth; scroll-snap-type: y mandatory; }

.navbar { width: 100vw; height:10px; position: fixed; top:6%;  
z-index: 1; display: inline-block; z-index:99; }

.row { width:100vw; height:80vw; display: flex; background-color: #000000; border-bottom:solid 3px #888; }

/* Create two equal columns that sit next to each other */
.column1 { font-size: 4vw; font-family: "Sintony", sans-serif; width: 50%;  text-align: center; }
.column2 { font-size: 4vw; font-family: "Sintony", sans-serif; width: 50%;  text-align: center; }

.navbar ul { list-style: none;  width: 100%;  justify-content: center; }
.navbar ul li { margin: 0 1rem;  padding: 1rem; }

.navbar ul li a { text-decoration: none; text-transform: uppercase; color: #f4f4f4; }

.navbar ul li a:hover { color: skyblue; }

section { display: flex;  flex-direction: column;  align-items: center; justify-content: center; text-align: center;
width: 100%; height: 100vh; scroll-snap-align: center; }

section h1 { font-size: 4rem; }

section p { font-size: 1.5rem; position: absolute; bottom:32%; }

/* Section Images */

section#home {
  background: url("http://placeimg.com/640/360/any") no-repeat center center/cover;
}
section#about {
  background: url("https://picsum.photos/640/360") no-repeat center center/cover;
}
section#services {
  background: url("http://placeimg.com/640/360/any") no-repeat center center/cover;
}
section#contact {
  background: url("https://placebear.com/640/360 ") no-repeat center center/cover;
}


/* BUBBLE BACKGROUND SECTION */


.wrapper {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #04fafd, 5%, #119dff, 50%, #030423);
  position: absolute;
}
.wrapper h1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-family: sans-serif;
  letter-spacing: 1px;
  word-spacing: 2px;
  color: #fff;
  font-size: 40px;
  font-weight: 888;
  text-transform: uppercase;
}
.wrapper div {
  height: 60px;
  width: 60px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  position: absolute;
  top: 10%;
  left: 10%;
  animation: 4s linear infinite;
}
div .dot {
  height: 10px;
  width: 10px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 20%;
  right: 20%;
}


/*
animation-direction: alternate; animation-iteration-count: infinite; 
*/

.wrapper div:nth-child(1) {
  top: 10%;
  left: 10%;
  animation: animate 18s linear infinite; 
}
.wrapper div:nth-child(2) {
  top: 70%;
  left: 80%;
  animation: animate 12s linear infinite;;
}
.wrapper div:nth-child(3) {
  top: 10%;
  left: 40%;
  animation: animate 3s linear infinite;
}
.wrapper div:nth-child(4) {
  top: 66%;
  left: 30%;
  animation: animate 7s linear infinite;
}
.wrapper div:nth-child(5) {
  top: 90%;
  left: 10%;
  animation: animate 9s linear infinite;
}
.wrapper div:nth-child(6) {
  top: 30%;
  left: 60%;
  animation: animate 5s linear infinite;
}
.wrapper div:nth-child(7) {
  top: 70%;
  left: 20%;
  animation: animate 8s linear infinite;
}
.wrapper div:nth-child(8) {
  top: 75%;
  left: 60%;
  animation: animate 10s linear infinite;
}
.wrapper div:nth-child(9) {
  top: 50%;
  left: 50%;
  animation: animate 6s linear infinite;
}
.wrapper div:nth-child(10) {
  top: 45%;
  left: 20%;
  animation: animate 10s linear infinite;
}
.wrapper div:nth-child(11) {
  top: 10%;
  left: 90%;
  animation: animate 9s linear infinite;
}
.wrapper div:nth-child(12) {
  top: 20%;
  left: 70%;
  animation: animate 7s linear infinite;
  
}
.wrapper div:nth-child(13) {
  top: 20%;
  left: 20%;
  animation: animate 8s linear infinite;
}
.wrapper div:nth-child(14) {
  top: 60%;
  left: 5%;
  animation: animate 6s linear infinite;
}
.wrapper div:nth-child(15) {
  top: 90%;
  left: 80%;
  animation: animate 9s linear infinite;
}
@keyframes animate {
  0% {
    transform: scale(0.2) translateY(0) rotate(70deg);
  }
  100% {
    transform: scale(1.6) translateY(-100px) rotate(360deg);
  }
}

}
/*  PHONE DISPLAY - values up to 800px wide  */