@import url('https://fonts.googleapis.com/css2?family=Sansita&display=swap');

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin: 0px!important;
}

body {
    font-family: "Sansita", cursive;
    color: #dfe5e8!important;
}

h1, {
    font-family: "Sansita", cursive;
    font-weight: 700;
}

h2, h3. h4, {
    font-family: "Sansita", cursive;
    font-weight: 700;
    color: #dfe5e8;
}

h5 {
    font-weight: 300;
    text-transform: none;
    margin: 0px;
    padding: 10px 0px 15px 0px;
}

body, html {
    height: 100%;
    background-color: #0d0d0d;
    -moz-background-color: #0d0d0d;
    -webkit-background-color: #0d0d0d;
  }

  .jumbotron-fluid {
    height:auto;
    margin: 0px!important;
    padding: 0px!important;
  }

  .col {
    margin: 0px!important;
    padding: 0px!important;
  }

  .img-fluid {
    min-width: 100%
  }
  
  .container, .container-fluid {
    min-width: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("/img/faded-LandF-bg.jpg");
    -moz-background-image: url("/img/faded-LandF-bg.jpg");
    -webkit-background-image: url("/img/faded-LandF-bg.jpg");
  
    /* Full height */
    height: auto;
  
    /* Center and scale the image nicely */
    background-position: center;
    -moz-background-position: center;
    -webkit-background-position: center;
  }


/* I just changed this from .footer to .site-footer to remove the gradient background from the card that was created in aboutus.html */
.site-footer {
    background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%,rgba(26,28,32,1) 30%, rgba(60,64,67,1) 50%, rgba(26,28,32,1) 70%)rgba(0,0,0,1) 100%!;
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%,rgba(26,28,32,1) 30%, rgba(60,64,67,1) 50%, rgba(26,28,32,1) 70%)rgba(0,0,0,1) 100%;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%,rgba(26,28,32,1) 30%, rgba(60,64,67,1) 50%, rgba(26,28,32,1) 70%)rgba(0,0,0,1) 100%;
}

.pb-widget {
    background-color: black!important;
}

.main-title {
    position: relative;
    z-index: 999;
    margin: 0;
    background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%,rgba(26,28,32,1) 30%, rgba(60,64,67,1) 50%, rgba(26,28,32,1) 70%)rgba(0,0,0,1) 100%!;
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%,rgba(26,28,32,1) 30%, rgba(60,64,67,1) 50%, rgba(26,28,32,1) 70%)rgba(0,0,0,1) 100%;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%,rgba(26,28,32,1) 30%, rgba(60,64,67,1) 50%, rgba(26,28,32,1) 70%)rgba(0,0,0,1) 100%;
    box-shadow: 3px 5px 8px 5px rgba(0,0,0,0.50);
    -webkit-box-shadow: 3px 5px 8px 5px rgba(0,0,0,0.50);
    -moz-box-shadow: 3px 5px 8px 5px rgba(0,0,0,0.50);
}

.navbar-brand:hover {
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

.title-text 
{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	letter-spacing: 1px;
}

h1 {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
   	background-size: 400% 400%;
    animation: shine 15s ease infinite;
    -moz-animation: shine 15s ease infinite;
    -webkit-animation: shine 15s ease infinite;
    -o-animation: shine 15s ease infinite;
    font-size: 8vw;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    line-height: 8vw;
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
    @keyframes shine {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

/* Hide e-mail icon */
.share-button_em {
  display:none!important;
}

@media (max-width : 767px) { 
    .desktop-header { display: none; }
    h1 { margin-bottom: 3.6%!important; padding: 20px; font-size:12vw; line-height:12vw; }
    .forge-icon {display:none!important;}
    .station-icon {display:none!important;}
    .forge-icon img {visibility:hidden;}
    .station-icon img {visibility:hidden;}
}

@media (min-width : 768px) { 
    .mobile-header { display: none; }
    h1 { margin-bottom: 3%!important; }
}

/* @media (max-width : 576px) { 
  .forge-icon {margin-left: 5%!important}
} */