@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');


* { box-sizing: border-box; }

html, body{padding: 0; margin: 0; font-family: "Sintony", sans-serif; overflow-x:hidden; 
  scrollbar-width: thin;
  scrollbar-color: #888 #ccc;
  background: linear-gradient(
    45deg,
    #999 5%,
    #fff 10%,
    #ccc 30%,
    #fff 50%,
    #ccc 70%,
    #fff 80%,
    #ccc 95%,
    #bbb 100%
  );
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* cursor: pointer;
  transition: all 0.2s ease-in-out;*/
}

/* setting font min/max size - font-size: clamp(minimum-size, prefered-size, maximum-size) */

H1 {font-size: clamp(2.5rem, 4.7vw, 5.5vw);
    text-align: center; position: relative; padding-top:12%; padding-bottom:0;
    font-family: "Metal Mania", system-ui;
    line-height:2.5rem;; text-shadow:3px 1px 1px #d31010;}
 
H2 {font-size: clamp(2.5rem, 2.8vw, 2.5vw); padding:0; line-height:1.5rem;
    text-align: center; position: relative; font-family: "Anton SC", sans-serif;} 
H3 {font-size: clamp(1.5rem, 1.8vw, 1.8vw); padding:0; line-height:1rem;
    text-align: center; position: relative;} 
H4 {}
P {font-size: clamp(1.2rem, 1.5vw, 1.5vw); padding:0; line-height:0.7rem;
    text-align: center; position: relative; }


.container 
    {width:100%; height: 98vh; scroll-behavior: smooth; background-color: transparent;
    background-image: url("bros_redesign_2a_550px2.png"); background-repeat: no-repeat;
    background-position:  50% 20%; z-index:10;
}

.cards-wrapper 
    {width: 1000vw; position: absolute; top:28%; right: 0; bottom: 0; left: 0;
    display: flex; flex-wrap: nowrap;}
/* controlling h1, etc. location on page */


.card {width:100vw; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
}

.card a {color:red; text-shadow:3px 1px 1px #000000;}
.card a:hover {color:rgb(0, 0, 0); text-shadow:3px 1px 1px #d31010 ;}

.card:nth-child(1) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(2) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
}

.card:nth-child(3) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(4) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(5) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(6) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(7) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(8) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(9) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.card:nth-child(10) {
    width:100%; height:100%;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

.spacer {width:100vw;  height:auto; overflow:hidden;}

div.gallery {margin-bottom:3%; text-align: center; }
div.gallery:hover img {/* width:101%; height:auto; z-index:5; */ }
div.gallery img {margin:0; width:80%; height: auto; padding:1%;}
div.desc {padding: 15px;   text-align: center;  }
.responsive {   padding: 0 6px;   float: left;   width:18.99999%;  }

/* 
.gallery {display:grid; grid-template-columns: 100vw 100vw 100vw 100vw 100vw; grid-template-rows: 100vh 100vh 100vh;}
.gallery > div {grid-column-start: 1;  grid-column-end:2; grid-row-start:1; grid-row-end: 2; background-image:}
*/



.menu {width:100%; height:50px; display:flex; position: fixed; top:0; 
    justify-content: center; align-items: center; text-align: center; overflow: hidden;
    text-transform: uppercase; z-index:15; border-bottom: solid 3px rgb(233, 14, 14); overflow: hidden;  
    background-color: #333;}
.menu a {float: left;  display: block; color: #f2f2f2;  text-align: center;
  padding: 14px 16px;  text-decoration: none;  font-size: 17px;}}
.menu > div {}
.menu a {font-size: clamp(.8rem, 1.5vw, 1.5vw); color:rgb(0, 0, 0); font-weight: bold;} 


.undermenu {width:100vw; height:auto; display:flex; text-align: center; justify-content: center; align-items: center;}

nav{ position:fixed; top:80px; left:0; height:50px; width:100%; z-index: 1;

ul{margin:0; padding:0; list-style:none;margin:0 auto;

li{ 

a{color:rgb(0, 0, 0); text-decoration:none; transition:all 0.3s ease-in-out; padding:1%; font-weight: 600;

&:hover{ color:#F38A8A; }  }  }
    
.active{
a{ color:#F38A8A; border-bottom:3px solid #F38A8A; } } } }


.footer {width:100vw;  text-transform: uppercase; position: fixed; bottom:1%;
    display: flex; display:flex; justify-content: center; align-items: center; text-align: center;
    padding-right:3%; padding-left:3%; border-top: solid 3px black;
    background-color: #d31010;
}
.foooter > div { }
.footer a {font-size: 1vw; color:white; 
    font-weight: bold; margin-right:1%; margin-left:1%;}


/* BUttons Section */

.buttons {width:100vw; height:60px; display: flex; z-index:12;
    position: absolute; bottom:6%; justify-content: center; align-items: center;}
.buttons a {color:maroon; }
.callbutton {border:solid 2px black; border-radius: 20px; margin:1%; 
    padding-top:1%; padding-bottom:1%; padding-left:2%; padding-right:2%;
    text-align: center; font-size:1.2rem; font-weight: bolder; background-color: #e2e5e7;
background: linear-gradient(
    45deg,
    #999 1%,
    #fff 50%,
    #ccc 95%
  );
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}

.emailbutton {border:solid 2px black; border-radius: 10px; margin:1%; padding:2%;
    padding-top:1%; padding-bottom:1%; padding-left:2%; padding-right:2%;
    text-align: center; font-size:1.2rem; font-weight: bolder; background-color: #e2e5e7;
  background: linear-gradient(
    45deg,
    #999 1%,
    #fff 50%,
    #ccc 95%
  );
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}


@media only screen and (max-width: 600px) 
{
body {background-color: rgb(188, 210, 255);}

}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100vw;
  min-height: 100vh; z-index:9;
}

video {width:100%; height:100%; }

/* 
.vertword {width:100vw; height:auto; display:flex; position: fixed; top:20%; left:10%; transform: rotate(270deg); 
    justify-content: center; align-items: center; z-index: 16; text-transform: uppercase;
     z-index:15; background-image: url("bros_bg_3.png"); background-repeat: no-repeat; }
.vertword img {}
*/

/* - Metallic Background.

    background: linear-gradient(
    45deg,
    #999 5%,
    #fff 10%,
    #ccc 30%,
    #ddd 50%,
    #ccc 70%,
    #fff 80%,
    #999 95%
    );
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
*/


/* Glowing Font Text.

-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate; */}

/* @-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
 
*/

/* .scroll_effect {width:100%; height:60px; display:flex; justify-content: center; align-items: center; 
    text-transform: uppercase; position:absolute; bottom:1%;}
.scroll_effect > div { }
.scroll_effect a {color:rgb(243, 239, 239); font-weight: bold; margin:2%; }
*/




section {width:100vw; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
}

section img {margin:0; padding:0; position: fixed;
  display: flex; justify-content: center; align-items: center; text-align: center;}

section:nth-child(1) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(2) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
}

section:nth-child(3) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(4) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(5) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(6) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(7) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(8) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(9) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}

section:nth-child(10) {
  width:100%; height:100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;    
}