body {
    background-color: rgb(37, 37, 37);
    font-family: 'Raleway', sans-serif;
}

.main {
    background-color: rgb(17, 16, 16);
    width: 100%;
    height: 940px;
    background-image: url("/nc_assets/img/helmets.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*h1 {*/
/*    margin-bottom: 0;*/
/*    font-family: 'Raleway', sans-serif;*/
/*    font-weight: 900;*/
/*    text-align: center;*/
/*    color: white;*/
/*    font-size: 93px;*/
/*    letter-spacing: 10px;*/
/*    word-spacing: 30px ;*/
/*}*/

/*span {*/
/*    font-size: 110px;*/
/*    color: #CE0C2E;*/
/*}*/

h2 {
    position: relative;
    font-family: 'Raleway', sans-serif;
    border: solid white;
    color: white;
    text-align: center;
    font-size: 48px;
    width: fit-content;
    margin: auto;
    padding: 5px 80px; 
    top: 300px; 
    z-index: 1;
}

.mainImg {
    
    position: relative;
    bottom: 75px;
    left: 30%;
    height: 650px;
}

.heading > h2 {
    margin: auto;
    max-width: 1000px;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 8px;
    border-image-source: linear-gradient(
        to right,
        #462523 0,
        #cb9b51 22%, 
        #f6e27a 45%,
        #f6f2c0 50%,
        #f6e27a 55%,
        #cb9b51 78%,
        #462523 100%
        );
    color:transparent;
    -webkit-background-clip:text;
    top: 10px;
}

h2 {
    text-align: center;

    }


.heading span{
    /* position: absolute;*/
    /*transform: translate(-50%,-50%);*/
    /*top: 50%;*/
    /*left: 50%; */
    font-family: 'Times New Roman',serif;
    letter-spacing: 5px;
    text-align: center;
    font-size: 64px;
    font-weight: bold;
    background-image: linear-gradient(
     to right,
     #462523 0,
     #cb9b51 22%, 
     #f6e27a 45%,
     #f6f2c0 50%,
     #f6e27a 55%,
     #cb9b51 78%,
     #462523 100%
     );
    color:transparent;
    -webkit-background-clip:text;
 }

 #pupHeading{
     margin-bottom: 0;
 }

 #fameHeading {
     margin-top: 5px;
 }

 .fame {
     font-size: 64px;
 }

 #players {
    display: flex;
    justify-content: space-evenly;
    
 }

 .flip-card {
    background-color: transparent;
    width: 250px;
    height: 315px;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 8px;
    border-image-source: linear-gradient(
        to right,
        #462523 0,
        #cb9b51 22%, 
        #f6e27a 45%,
        #f6f2c0 50%,
        #f6e27a 55%,
        #cb9b51 78%,
        #462523 100%
        );
    color:transparent;
    -webkit-background-clip:text;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    margin: 30px 30px;
}

 .team {
     Width:355px;
     height:255px ;
 }
 
    #teamFront img{
     Width: 355px;
     height:255px;
    
 }
 

  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .Transform {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  .flip-card > p {
    background: 
    linear-gradient(rgb(37, 37, 37) 0 0) padding-box, /*this is your grey background*/
    linear-gradient(to right, #462523 0,
    #cb9b51 22%, 
    #f6e27a 45%,
    #f6f2c0 50%,
    #f6e27a 55%,
    #cb9b51 78%,
    #462523 100%
    ) border-box;
    color: #313149;
    padding: 3px;
    border: 5px solid transparent;
    border-radius: 15px;
    text-align: center;
    /* -webkit-background-clip:text; */
    perspective: 1000px;
    position: relative;
    bottom: 15px;
    width: 175px;
    font-family: 'Permanent Marker', sans-serif;
    margin: auto;
    letter-spacing: 3px;
    font-weight: 600;
    font-size: 18px;
  }
  


  .flip-card-back h1 {
    margin-top: 50px;
  }

  .st > p {
    width: 200px;
  }

  p span {
    background-image: linear-gradient(
        to right,
        #462523 0,
        #cb9b51 22%, 
        #f6e27a 45%,
        #f6f2c0 50%,
        #f6e27a 55%,
        #cb9b51 78%,
        #462523 100%
        );
       color:transparent;
       -webkit-background-clip:text;
  } 

  .flip-card-front img {
    width: 250px;
    height: 315px;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-image: url(/nc_assets/img/logos/annie-spratt-6a3nqQ1YwBw-unsplash.jpg) ;
    color: white;
    transform: rotateY(180deg);
  }

.connect{
    overflow: hidden;
    background-color: #f1f0f0;
    width: 100%;
}

#connectHeading {
    color: #CE0C2E;
}

#connectHeading:before {
    background-color: #080808;
}

#connectHeading:after {
    background-color: #080808;
}

.connectContainer {
    display: flex;
    justify-content: space-around;
    background-color: #f1f0f0;
    width: 100%;
    height: 500px;
}

.socialConnect {
    position: relative;
    top: 75px;
    height: 300px;
    width: 300px;
    background-color: white;
    box-shadow: 0px 1px 10px 3px #bbbaba;
}

.fbContainer {
    background-image: url(/nc_assets/img/hitstick.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.overlayOp {
    background-color: white;
    height: 100%;
    width: 100%;
    opacity: 80%;
}

.Link {
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: 900;
}

.Link a {
    width: 250px;
    height: 250px;
    margin: auto;
    position: relative;
    top: 30%;
    color: black;
    font-size: 24px;
    line-height: 50px;
    letter-spacing: 5px;
}

a span {
    font-size: 40px;
    font-weight: 900;
    color: #CE0C2E;
}

.welcomeContainer {
    height: 460px;
    width: 375px;
    background-color: #CE0C2E;
    text-align: center;
    color: white;
}

h5 {
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    font-weight: 900;
    margin: 0;
    color: #080808;

}

.welcomeContainer p {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1px;
    font-weight: 900;
    line-height: 25px;
    padding: 0 20px;
    margin-bottom: 0;
}

.instaContainer {
    background-image: url(/nc_assets/img/mural.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.twitterContainer {
    background-image: url(/nc_assets/img/running.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


h4 {
    font-family: 'Raleway', sans-serif;
    font-size:56px; 
    font-weight:700;  
    letter-spacing:5px; 
    text-transform:uppercase; 
    text-align:center; 
    margin:auto; 
    color: white;
    padding: 15px;
    line-height: 60px;
}

h4::after {
    background-color: white;
    content: '';
    display: block;
    position:relative; 
    left: 120px;
    top: 15px;
    height: 3px;
    width: 100px;
    margin-bottom: 0.25em;
}

.weeklygal {
    width: 100%;
    height: 750px;
    background-color: #CE0C2E;
    overflow: hidden;
}

.weeklygal h6 {
    font-family: 'Great Vibes', cursive;
    text-align: center;
    color: #fff;
    font-size: 72px;
    margin: 15px;
}

.galContainer {
    display: flex;
    width: 100%;
    height: 750px;
    
}

.galContainer h6 {
    position: relative;
    background-color: rgb(37, 37, 37);
    font-family: 'Raleway', sans-serif;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 48px;
    bottom: 120px;
    width: 70px;
    height: 100%;
    padding: 10px 30px ;
    margin: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    
}

.swiper {

    width: 800px;
    height: 600px;

}



.swiper-slide img {
    width: 100%;
    height: 100%;
}

.swiper .swiper-button-prev, .swiper .swiper-button-next {
    color: #fff;
}

.swiper .swiper-pagination-bullet-active {
    background: #fff;
}

.events {
    background-color: rgb(37, 37, 37);
}

h3 {
    font-family: 'Raleway', sans-serif;
    font-size:40px; 
    font-weight:700;  
    letter-spacing:1px; 
    text-transform:uppercase; 
    /* width:160px;  */
    text-align:center; 
    margin:auto; 
    white-space:nowrap; 
    padding-bottom:13px;
    color: white;
    margin-top: 25px;
    margin-bottom: 25px;
}

h3:before {
    background-color: #CE0C2E;
    content: '';
    display: block;
    position: relative;
    left: 740px;
    height: 3px;
    width: 100px;
    margin-bottom: 5px;
}

h3:after {
    background-color: #CE0C2E;
    content: '';
    display: block;
    position:relative; 
    left: 1060px;
    height: 3px;
    width: 100px;
    margin-bottom: 0.25em;
}



#eventsContainer {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 50px;
}

.eventOne, .eventTwo, .eventImgThree {
    width: 550px;
    height: 475px;
    background-color: white;
    border: 1px solid #f7f4f4;
    box-shadow: 0px 1px 10px 3px #f1f0f0;
}



.eventImg img, .eventImgTwo img, .eventImgThree img{
    width: 550px;
    height: 475px;
    border: 1px solid #f7f4f4;
    box-shadow: 0px 1px 10px 3px #f1f0f0;
}

/*.eventImg img {*/
/*    width: 700px;*/
/*    height: 544px;*/
/*    border: 1px solid #f7f4f4;*/
/*    box-shadow: 0px 1px 10px 3px #f1f0f0;*/
/*}*/

/*.eventImgTwo{*/
   
/*    background-color: black;*/
/*}*/

.eventImgTwo img {
    /*margin-left: 28px;*/
    width: 550px;
    text-align: center;
}

.eventTitle {
    color: #CE0C2E;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    text-shadow: 1px 1px 0 rgb(8, 8, 8)
}

.eventInfo {
    display: flex;
    justify-content: space-around;
}

.eventInfo span {
    font-weight: 900;
    color: #CE0C2E;
}

.eventLink {
    width: 325px;
    margin-top: 10px;
    text-align: center;
}

.eventLink a{
    position: relative;
    bottom: 475px;
    right: 25px;
    font-size: 18px;
    width: 225px;
    margin: 25px;
    padding: .2rem;
    padding-left: 15px;
    padding-right: 15px;
    letter-spacing: 5px;
    background-color: dodgerblue;
    text-decoration: none;
    color: white;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    border-radius: .5em;
    border: 2px solid rgba(255, 255, 255, 0.363);   
}

.eventLink :hover {
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.952);
}

.links {
    display: flex;
    justify-content: space-evenly;
    
}

.links a {
    color: white;
}

.links a:hover{
    color: red;
}

@media (max-width:1450px) {
    .mainImg {
        left: 20%;
    }
}

@media (max-width:431px) {
    .main{
        height: 844px;
        width: 100%;
    }
    
    .socialContainer {
        margin-top: 15px;
        right: 0;
        left: 45px;
    }

    #logo {
        display: none;
    }

    h1{
        font-size: 50px;
    }


    h2 {
        margin-top: 20px;
        font-size: 30px;
        padding: 5px;
        top: 325px;
    }
    
    .mainImg {
        height: 300px ;
        left: 10px;
        bottom: 100px;
    }
    
    .heading span {
        font-size: 36px;
    }
    .fame {
        font-size: 24px;     
    }
    .flip-card {
        margin-left: 62px;
    }
    
    .team {
        position:relative;
        right:50px;
        
    }
    
    .flip-card-back h1 {
        font-size: 24px;
    }

    #players {
        flex-direction: column;
    }
    
    
    
    .socialConnect {
        display: none;
    }    
    
    h3::before {
        left: 25px;
    }

    h3 {
        font-size: 30px;
    }

    h3::after {
        left: 265px;
    }
    
    .weeklygal {
        height: 95vh;
    }

    .galContainer {
        flex-direction: column;
    }

    .galContainer h6 {
        writing-mode: unset;
        text-orientation: unset;
        bottom: 0;
        width: 95%;
        height: min-content;
        font-size: 32px;
    }

    .swiper {
        width: 100%;
        height: 400px;
    }

    #eventsContainer {
        flex-direction: column;
        justify-content: space-evenly;
        width: 350px;
        height: 800px;
        margin: auto;
        margin-bottom: 25px;
    }

    .eventOne {
        height: 300px;
    }

    .eventTwo, .eventOne, .eventThree{
        width: 100%;
        height: 300px;
    } 

    .eventImg img {
        height: 300px;
    }

    .eventImg, .eventImg img, .eventImgTwo, .eventImgThree {
        width: 100%;
        height: 300px;
    }

    .eventImgTwo img, .eventImgThree img{
        width: 100%;
        margin-left: 0px;
        height: 300px;
    }

    .eventTitle span{
        font-size: 17px;
    }

    

    .eventInfo {
        font-size: 14px;
    }

    .eventLink, .eventLink a {
        width: 75%;
        bottom: 0;
        left: 3px;
        margin: 0;
        padding: .5rem 40px ;
    }

    .quickLinks h3 {
        margin-bottom: 5px;
    }

    .links {
        flex-wrap: wrap;
        width: 80%;
        margin: auto;
    }

    .links a {
        padding: 10px;
    } 

}

@media (max-width:350px) {
    .main{
        height: 844px;
        width: 350px;
    }
    
    #logo {
        display: none;
    }

    h1{
        font-size: 50px;
    }


    h2 {
        margin-top: 20px;
        font-size: 22px;
        padding: 5px;
    }
    
    .mainImg {
        height: 250px ;
        left: 10px;
        bottom: 175px;
    }
}