/* -------------------------------------- Navbar formatting -------------------------------------- */


#navbar, #gnavbar{
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;

}

.navbar .navbar-nav .nav-link {
    font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover{
  opacity:1;
  color:#FF47FF;
}
#gnavbar .nav-link:hover{
  opacity:1;
  color: whitesmoke;
}

.sm-icons {
  flex-direction: row;
  padding: 20px;
}
.sm-icons li{
  padding-left:5px;
  padding-right:5px;
}


/* -------------------------------------- jumbo image and general text formatting -------------------------------------- */

#jumbo{
  text-align: center;
  color: whitesmoke;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)), url('concert-2527495_1920.jpg');
  opacity: .5px;
  background-size: cover;
      padding-top: 5%;
      padding-bottom: 5%;
  margin-bottom: 2px;
}

#gjumbo{
  text-align: center;
  color: whitesmoke;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)), url('a-party-2250007_1920.jpg');
  opacity: .5px;
  background-size: cover;
      padding-top: 10%;
      padding-bottom: 10%;
  margin-bottom: 2px;
}

/* -------------------------------------- h1 formatting -------------------------------------- */

#jumbo h1, #gjumbo h1{
  width: 100%;
  font-family: 'Italiana', sans-serif;
  font-size: 4.5em;
  font-weight: 900;
  padding-bottom:20px;
}
#about h1, #events h1, #services h1, #gallery h1, #carousel h1{
  width: 100%;
  padding-top: 50px;
  margin-bottom: 0px;
  text-align: center;
  font-family: 'Italiana', sans-serif;
  font-size: 4em;
  font-weight: 900;
}
#contact h1{
  width: 100%;
  text-align: center;
  font-family: 'Italiana', sans-serif;
  font-size: 4em;
  font-weight: 900;
}
.Web3Uncovered23 h1, .RavynRobyn23 h1, .Farcaster23 h1, .Web3Builders h1, .BaxusNYC23 h1, .CryptoSummer23 h1, .LoveShack h1, .bCube h1, .IBC h1, .dabl h1, #ComingSoon h1{
  color: #FF47FF;
}
.gWeb3Uncovered23 h1, .gRavynRobyn23 h1, .gFarcaster23 h1, .gWeb3Builders h1, .gBaxusNYC23 h1, .gCryptoSummer23 h1, .gLoveShack h1, .gbCube h1, .gIBC h1, .gdabl h1{
  color: whitesmoke;
}

/* -------------------------------------- h2 formatting -------------------------------------- */
#services h2{
  width: 100%;
  padding-top: 20px;
  text-align: left;
  font-family: 'Italiana', sans-serif;
  font-size: 3em;
  font-weight: 700;
  border-bottom: 3px solid #FF47FF;
}
#upcoming h2{
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: center;
  font-family: 'Italiana', sans-serif;
  font-size: 3em;
  font-weight: 700;
}
#carousel h2{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-family: 'Italiana', sans-serif;
  font-size: 2.5em;
  font-weight: 700;
}

/* -------------------------------------- p and column text formatting -------------------------------------- */
p, .column, .btn-lg{
  font-family: 'Roboto', sans-serif;
}

#lead{
  font-size: 2.2em;
  font-weight: 500;
  padding-bottom: 30px;
}

#endorserow{
  font-size: 1em;
  width: 100%;
  margin: auto;
}
#endorserow .col-md-4{
  padding-right: 15px;
  padding-left: 15px;
}

#contact p, #ProductContact p{
  font-size: 1.5em;
}

#ProductContact p{
  text-align: center;
 }

 #ProductContact{
  margin: auto;
  padding-bottom: 25px;
 }

#about p, #contact .column{
  font-size: 1.2em;
  text-align: justify;
}
.socials-bar p{
  font-size: 1.5em;
  text-align: center;
  padding-bottom: 45px;

}
.gsocials-bar p{
  font-size: 1.5em;
  text-align: center;
  padding-bottom: 45px;
}

/* -------------------------------------- button formatting -------------------------------------- */

.btn-lg{
  margin-top: 8px;
  font-size: 1.5em;
}
.btn-outline-success{
  color: white;
  border-color: white;
}
.btn-lg:hover, .btn-outline-success:hover{
  opacity:1;
  color:white;
  background-color: #FF47FF;
}

#moreEvents{
  margin-top: 5%;
}
@media screen and (max-width: 750px) {
  #moreEvents{
    margin-top: 15%;
  }
}


#Gallerybtn, #ProductContactbtn, #GProductContactbtn{
  color: white;
  background-color: #212529;
  border-color: white;
}


#Gallerybtn:hover, .btn-outline-success:hover
{
  opacity:1;
  color: white;
  background-color: #FF47FF;
  border-color: black;

}
#ProductContactbtn:hover, .btn-outline-success:hover
{
  opacity:1;
  color: white;
  background-color: #FF47FF;
  border-color: black;

}

#GProductContactbtn:hover, .btn-outline-success:hover{
  opacity:1;
  color: white;
  background-color: #848884;
  border-color: black;
} 

/* -------------------------------------- img formatting -------------------------------------- */

#about{
  width:100%;
}
#about img{
max-height: 450px; 
max-width: 100%;  
box-shadow: 10px 10px 5px lightgrey;
}


/* everything in #upcoming except #ComingSoon images */
.CorksandForks img:hover, .Web3BuildersUpcoming img:hover, .Web3Uncovered24 img:hover, .FlixFeast img:hover, .Hadron img:hover{
  filter: brightness(50%);
  transition: 0.4s;
}

#upcoming img{
  width: 100%;
  display: block;
  margin:auto;
  margin-bottom: 0px;
  box-shadow: 10px 10px 5px lightgrey;
}

#gallery img{
  width: 100%;
  display: block;
  margin:auto;
  box-shadow: 10px 10px 5px lightgrey;
}

#contact .column img{
  width: 85%;
  height: auto;
}
#services img{
    width: 100%;
    display: block;
}
#carousel{
    width: 100%;
    margin: auto;
    padding-top: 45px;
    padding-bottom: 50px;
}
#carouselExampleCaptions{
  box-shadow: 10px 10px 5px lightgrey;
}



/* -------------------------------------- Link formatting -------------------------------------- */

#gallery a, #upcoming a, #services a{
  text-decoration: none;
}

#services a {
    color: #FF47FF;
}

.socials-bar a{
  padding-right: 5px;
  padding-left: 5px;
  color: #212529;
}
.socials-bar a:hover{
  opacity:1;
  color: #FF47FF;
}

.gsocials-bar a{
  padding-right: 5px;
  padding-left: 5px;
  color: #212529;
}
.gsocials-bar a:hover{
  opacity:1;
  color: #848884;
}

/*-----------------------------------------Map & Video formatting--------------------------------------------------------*/


#MapVid{
  width: 100%;
  margin: auto;
  padding-bottom: 5%;

}
#EventVid iframe{
  width: 100%;
  height: 360px;
}

#EventMap iframe{
  /*width: 600px;
  height: 450px;*/
  width: 100%;
  height: 360px;
}

@media screen and (max-width: 750px) {
  #EventVid iframe, #EventMap iframe{
    width: 100%;
  }
}

/*----------------------------------------Endorsement Row Formatting------------------------------------------------------*/



/* -------------------------------------- Upcoming Events Row and Column Formatting -------------------------------------- */


#upcoming{
    width: 100%;
    margin: auto;
}

.CorksandForks, .Web3BuildersUpcoming, .Web3Uncovered24, .FlixFeast, .Hadron{
  padding-top: 0px;
  margin-top: 0px;
  position: relative;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#upcoming .col-md-12{
  background-color: black;
}


#upcoming .content{
  width:100%;
  height:100%;
  top:0;
  left:0;
  position: absolute;
  background:rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction: column;
  opacity: 0;
  transition: 0.4s;
}

@media (hover: hover){
  #upcoming .content:hover{
    width: 100%;
    opacity: 1;
    font-family: 'Italiana', sans-serif;
    font-size: .6em;
    font-weight: 900;
    color: #FF47FF;
  }
}

@media (hover: none) and (max-width: 1369px){

  #upcoming img::before{
    filter: brightness(50%);
  }
  #upcoming .content{
    width: 100%;
    opacity: 1;
    font-family: 'Italiana', sans-serif;
    font-size: .6em;
    font-weight: 900;
    color: #FF47FF;
  }

}



/* -------------------------------------- Recent Events Row and Column Formatting  -------------------------------------- */

.Web3Uncovered23, .RavynRobyn23, .Farcaster23, .Web3Builders, .BaxusNYC23, .CryptoSummer23, .LoveShack, .bCube, .IBC, .dabl,
.gWeb3Uncovered23, .gRavynRobyn23, .gFarcaster23, .gWeb3Builders, .gBaxusNYC23, .gCryptoSummer23, .gLoveShack, .gbCube, .gIBC, .gdabl{
  margin-top: 0px;
  /*width: 100%;*/
  position: relative;
}

#moreEvents{
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: 500;
}

#gallery{
    margin: auto;
    margin-bottom: 5px;
    width: 100%;
}

#gallery .content{
  width:100%;
  height:100%;
  top:0;
  left:0;
  position: absolute;
  background:rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction: column;
  opacity: 0;
  transition: 0.4s;
}
#gEvents{
  padding-bottom: 5%;
}


@media (hover: hover){
  #gallery .content:hover{
    width: 100%;
    opacity: 1;
    font-family: 'Italiana', sans-serif;
    font-size: .6em;
    font-weight: 900;
    color: #FF47FF;
  }
}
@media (hover: none) and (max-width: 1369px){

  #gallery img::before{
    filter: brightness(50%);
  }
  #gallery .content{
    width:100%;
    opacity: 1;
    font-family: 'Italiana', sans-serif;
    font-size: .5em;
    font-weight: 900;
    color: #FF47FF;
  }

}


/* -------------------------------------- Services and Plans Column Formatting -------------------------------------- */ 

#services{
  margin-top: 45px;
}
#serviceColumns{
  width: 100%;
  padding-top: 20px;
  margin: auto;
  margin-bottom: 45px;
}

#Basic, #Plus, #Premium{
  border-radius: 25px;
  color: lightgray;
  background-color: #202020;
  box-shadow: 10px 10px 5px lightgrey;
  padding-bottom: 20px;
  margin-top: 20px;
}
@media screen and (max-width: 750px) {
  #serviceColumns h2{
    width: 100%;
    margin-top: 0;
    font-size: 3em;
  }
}
@media screen and (max-width: 1000px)
              and (min-width: 751px){
  #serviceColumns h2{
    font-size: 2em;
  }
}
@media screen and (max-width: 1000px)
              and (min-width: 751px){
  #serviceColumns .col-md-4{
    font-size: .75em;
  }
}
@media screen and (max-width: 750px) {
  #serviceColumns .col-md-4{
    width: 100%;
    margin-top: 0;
    font-size: 1em;
  }
}


/* -------------------------------------- About Section Formatting -------------------------------------- */
#about {
  box-sizing: border-box;
  margin-bottom: 45px;
}
/* Create two columns that float next to eachother */
#about .column {
  float: left;
  width: 50%;
  margin-top: 40px;
  padding: 20px;
}
/* Clear floats after the columns */
#about .row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 1000px){
  #about .column{
    font-size: .75em;
  }
}

@media screen and (max-width: 750px) {
  #about .column{
    width: 100%;
    margin-top: 0;
    font-size: 1em;
  }
}

/* -------------------------------------- Contact Section Formatting -------------------------------------- */

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: white;
  color: black;
  padding: 12px 20px;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #FF47FF;
  color: white;
}

#contact {
  box-sizing: border-box;
}



#contact{
  margin-top: 50px;
  background-color: darkgray;
  padding-top: 10px;

}

/* Create two columns that float next to eachother */
#contact .column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 60px;

}

#contact .row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 610px) {
  #contact .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}