body {
    height:100%;
    width:100%;
    background:rgba(236,236,236);
}

.navbar {
    z-index:1000000000000000;
    font-family:'Raleway', Helvetica, sans-serif;
    background-color: RGBA(23, 40, 80)
}

.nav-brand {
    height:55%;
    width:55%;
    transition:300ms;
    min-width:180px;
    min-height:50px;
}

.nav-scrolled {
    height:3.5vw !important;
}

.nav-brand-scrolled {
    height:40% !important;
    width:40% !important;
}

.nav-link {
    cursor: pointer !important;
}

.dropdown-item {
    color:white;
    transition:300ms;
}

.dropdown-item:hover {
    background: transparent !important;
    color:lightgray !important;
}

#top-banner {
    height:60vw;
    width:100%;
    transform: rotate(180deg);
    margin-top: -10vw;

    background:url("images/Basketball-blue3.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

#top-banner2 {
    height:60vw;
    width:100%;
    margin-top:-5vw;
    transform: rotate(180deg);
    margin-top: -59vw;
    position:absolute;
    z-index:-1;

    background:#101010;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    -webkit-clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);
    clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);

}

.shield {
    z-index:20; 
    height:23vw; 
    width:24.5vw;
    position:relative;
    left:65%;
    top:-19vw
}

.parallax {

    height:100%;
    transform: rotate(180deg);

    
        /* Create the parallax scrolling effect */
    background-attachment: fixed;
    
    -webkit-clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);
    clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);

    

    }

.top-h1-box {
    position:absolute; 
    z-index:50000000000000; 
    font-family: "Oswald" ,Helvetica, sans-serif;
    color:white;
    margin-top:24.5vw;
    margin-left:5.5%;
    letter-spacing:.1vw;

}

.c-h1 {
    font-size:5vw;
    background-color:RGBA(235, 177, 0, .70);
    padding-left:1vw;
    margin-bottom:1vw;
}

#c-h1-1 {
    padding-right:1vw;
}

#c-h1-2 {
    margin-right:6vw;
}

#c-h1-3 {
    margin-right:19vw;
}

.c-h2 {
    display:none;
}

#area2 {
    margin-top:-16vw;
    text-align:center;

    height:15vw;
}

#area2-h1 {
    font-size:4.5vw;

    font-family:'Oswald', Helvetica, sans-serif;

}

#divider1 {
    height:1px;
    width:12%;
    margin-left:44%;
    margin-top:1vw;
    margin-bottom:1vw;
    background:lightgray;

}

#area2-p {
    font-size:1.2vw;
    margin-top:1vw;
    margin-left:17%;
    margin-right:17%;

    font-family:"Raleway", sans-serif;
}

#area3 {
    background-image: -webkit-linear-gradient(180deg, #013A6B 50%, #004E95 50%);
    height: 25vw;
    width:80%;
    margin-left:10%;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    text-align: center;
    position:relative;
    z-index:10;
    margin-top:-2vw;
}

#area3-back {
    background-image: -webkit-linear-gradient(150deg, #004E95 50%, #013A6B 50%);
    height: 20vw;
    width:100%;
    margin-top:-22vw;

    border-top-style:solid;
    border-bottom-style:solid;
    border-top-width:1vw;
    border-bottom-width:1vw;
}

#area3-mimic-border {
    background:#202020;
    height: 26.5vw;
    width:82.5%;
    margin-left:8.75%;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    text-align: center;
    margin-top:-25.75vw;
}

#area3-sub1 {
    float:left;
    width:49%;
}

#area3-sub1 h1 {
    font-size:3vw;
    color:white;
    padding-top:2vw;
    margin-left:24%;
    font-family:'Oswald', Helvetica, sans-serif;
}

#medal-icon {
    font-size:4vw;
    position:relative;
    top:1vw;
    left:12%;
    padding:3%;
    border-style:solid;
    border-radius:48%;
    border-color: white;
    color:white;
}

#area3-sub1 p {
    font-size:1.2vw;
    color:white;
    padding-top:2.5vw;
    margin-left:38%;
    margin-right:12%;
    

    font-family:"Raleway", sans-serif;
}

#area3-sub2 {
    float:left;
    width:49%;
}

#area3-sub2 h1 {
    font-size:3vw;
    color:white;
    padding-top:2vw;
    position:relative;
    left:-4.5%;

    font-family:'Oswald', Helvetica, sans-serif;
}

#schedule-icon {
    font-size:4vw;
    position:relative;
    top:1vw;
    left:-4.5%;
    padding:3%;
    border-style:solid;
    border-radius:48%;
    border-color:white;
    color:white;

}

#area3-sub2 p {
    font-size:1.2vw;
    color:white;
    padding-top:2.5vw;
    position:relative;
    margin-left:32%;
    margin-right:15%;
    position:relative;
    left:-15%;

    font-family:"Raleway", sans-serif;
}

#area4 {
    margin-top:6vw;
    height:40vw;
    width:100%;
    background-image: url('images/bb-court-bg3.jpg');
    background-size: cover;
    filter: brightness(.9);

    -webkit-clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);
    clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);
}

#area4-mimic-border {
    height:42vw;
    background:#202020;
    width:100%;
    margin-top:-41vw;
    position:relative;
    z-index:-1;
    -webkit-clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);
    clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0% 10%);
}

#area4-img {
    width:49%;
    float:left;
}

#cp-logo {
    margin-top:11vw;
    margin-left:27%;
    z-index:5;
    height:19vw;
    width:22vw;
}

#area4-text {
   position:relative;
}

#area4-bg {
    width:50%;
    height:28vw;
    background:#013A6B;
    position:relative;
    z-index:2;
    margin-left:43%;
    margin-top:-34vw;

    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

#area4-text h1 {
    font-size:4vw;
    font-family: 'Oswald', 'Helvetica', sans-serif;
    position:relative;
    color:white;
    position:relative;
    padding-top:5vw;
    left:10%;
    z-index:40;
}

#area4-text p {
    font-size:1.4vw;
    text-align: center;
    font-family:"Raleway", sans-serif;
    color:white;
    position:relative;
    top:1vw;
    z-index:40;
    margin-left:15%;
    margin-right:15%;
}

#area4-text-mimic {
    width:53%;
    height:30vw;
    background:#202020;
    position:relative;
    z-index:1;
    margin-left:41.5%;
    margin-top:-29vw;

    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.some-area3 {
    height:60vw;
    background: rgba(1, 50, 102, 1);
    position:relative;
    top:9vw;
    border-top: solid 1vw #202020;
}

.footer-ul {
    font-size:1.2vw;
}

.footer-li {
    font-size:1vw;
    text-align:left;
    text-indent:1.5vw;
    list-style: none;
}

.footer-li a {
    text-decoration:none;
    color:white;
}

#copyright {
    position:relative;
    top:-4vw;
}

.email-form-container {
    color:white;
    height:28vw;
    width:40% !important;
    padding:0;
    padding-top:-2vw;
    margin-left:56%;
    margin-top:2vw;
    list-style: none;
    font-size:1.6vw;
}

.email-li {
    margin-top:1vw;
    font-size:1vw;
}

#ic1 {
    float:left;
    margin-right:2%
}

.lesser-email-input {
    text-indent:2%;
}

#lei2 {
    width:57%
}

.text-email-container {
    padding-top:1vw;
}

.email-text {
    height:10vw;
    width:82.5%;
    resize:none;
    padding-left:1%;
}

.email-send-button {
    position:relative;
    top:11vw;
    left:-17.5%;
    float:right;
}

.social-button-container {
    margin-top:2vw;
}

.social-button {
    color:white;
    font-size:1.8vw;
    background-color:transparent;
    border:none;
}

.social-button a {
    text-decoration:none;
    color:snow;
}

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

    .navbar-toggler {
        margin-top:-10%;
      }
  
      #home-link {
          margin:0 !important;
      }
      
      .dropdown-menu {
          background:transparent !important;
          border:none !important;
      }

      #top-banner {
        height:144vw;
      }

      #top-banner2 {
          height:144vw;
          margin-top:-142vw;
      }

      .top-h1-box {
        margin-top:40vw;
        margin-left:5.5%;
        letter-spacing:.1vw;
        text-align: center;
    }
    
    .c-h1 {
        display:none;
    }

    .c-h2 {
        font-size:12vw;
        background-color:RGBA(235, 177, 0, .70);
        margin-bottom:1vw;
        text-align:center;
        display:block;
    }
    
    #c-h2-1 {
        margin-left:22%;
        margin-right:22%;
    }
    
    #c-h2-2 {
        margin-left:7%;
        margin-right:7%;
    }
    
    #c-h2-3 {
        margin-left:14%;
        margin-right:14%;
    }

    #c-h2-4 {
        margin-left:5%;
        margin-right:5%;
    }

    .shield {
        display:none;
    }

    #area2 {
        margin-top:10vw;
        height:56vw;
    }

    #area2 h1 {
        font-size:9vw;
    }
    
    #area2-p {
        font-size:4vw;
    }

    #area3 {
        height:80vw;
        width:90%;
        margin-left:5%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    }

    #area3-mimic-border {
        height:84vw;
        margin-top:-82vw;
        width:95%;
        margin-left:2.5%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        text-align: center;
    }

    #area3-back {
        height:72vw;
        margin-top:-77.5vw;
    }

    #area3-sub1 h1 {
        font-size:8.5vw;
        margin-left:0;
    }
    #area3-sub2 h1 {
        font-size:8.5vw;
        left:4%;
    }

    #area3-sub1 p {
       font-size:4vw;
       margin-left:3%;
       margin-right:3%;
       margin-top:12vw;
    }

    #area3-sub2 p {
        font-size:4vw;
        left:4%;
        margin-left:6%;
        margin-right:6%;
     }

     #schedule-icon {
         display:none;
     }

     #medal-icon {
         display:none;
     }

     #area4 {
         margin-top:10vw;
         height:100vw;
     }

     #area4-mimic-border{
         height:104vw;
         margin-top:-102vw;
     }

     #area4-bg {
        width:100%;
        margin-left:0;
        height:52vw;
        margin-top:-60vw;

        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
     }

     #area4-text-mimic {
         width:100%;
         height:56vw;
         margin-top:-54vw;
         margin-left:0;
         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
     }

     #cp-logo {
         height:32vw;
         width:38vw;
         margin-left:63%;
         margin-top:4vw;
     }

     #area4-text h1{
         font-size:8vw;
         margin-left:11%;
         padding-top:2vw;
     }

     #area4-text p {
         font-size:4vw;
         margin-left:5%;
         margin-right:5%;
     }


      .some-area3 {
        height:90vw !important;
    }
    
    .some-area3 img {
        height:32vw !important;
        width:90% !important;
        position:relative;
        left:2.5vw !important;
        margin-left:3% !important;
        padding-top:5vw;
    }
  
    .divider-bt {
        height:.2vw !important;
    }
    
    .some-area3 p {
        font-size:5vw !important;
        margin-left:8%;
        margin-right:8%;
        padding-bottom:3vw;
        padding-top:2vw;
    }
    
    .list-container {
        float:none !important;
        width:100% !important;
         margin:0 !important;
         margin-top:3vw !important;
    }
    
    .some-area3 ul {
        font-size:4vw !important;
        padding-left:25vw;
        padding-right:5vw;
    }
    
    .some-area3 li {
        font-size:3vw !important;
        padding-right:0 !important;
    }
    
    #copyright {
        font-size:2vw !important;
        position:relative;
        top:2vw;
    }
    
    #ul-2 {
       position:relative;
       margin-left:55vw;
       padding:0 !important;
       margin-right:0 !important;
    }
    
    #ul-4 {
        position:relative;
        margin-left:55vw;
        padding:0 !important;
        margin-right:0vw !important;
    }
    
    .contact-container {
        width: 100% !important;
    }
    
    .contact-container ul {
        position:relative;
        left:-5vw !important;
    }
    
    #ulc-2 {
        position:relative;
        top:-22vw;
        left: 50vw !important;
        width:40%;
    }
    
    #ulc-3 {
        position:relative;
        top:-22vw;
    }
    
    #ulc-4 {
        position:relative;
        right:-4vw !important;
        top:-22vw;
    }
    
    .contact-container {
        right:5vw;
        display:none !important;
    }
  
    .email-form-container {
        display:none !important;
    }
      
    .social-button-container-2 {
      display:block !important;
      width:50%;
      margin-left:auto;
      margin-right:auto;
      padding-left:10%;
      margin-top:2vw;
  }
  
  .social-button {
      color:white;
      font-size:5vw;
      background-color:transparent;
      border:none;
  }
  
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {

    body {
        overflow-x: hidden;
    }

    #home-link {
        margin:0 !important;
    }
    
    .dropdown-menu {
        background:transparent !important;
        border:none !important;
    }

    #top-banner {
        height:72vw;
    }

    #top-banner2 {
        height:72vw;
        margin-top:-71vw;
    }

    .top-h1-box {
        margin-top:28vw;
        margin-left:5.5%;
        letter-spacing:.1vw;
    }

    .c-h1 {
        font-size:8vw;
        background-color:RGBA(235, 177, 0, .70);
        margin-bottom:1vw;
        display:block;
    }
    
    #c-h1-2 {
        margin-right:11%;
    }
    
    #c-h1-3 {
        margin-right:36%;
    }

    .shield {
        height:30vw;
        width:30vw;
        top:-25vw;
        left:60%;
    }

    #area2 {
        margin-top:-24vw;
    }

    #area2 h1 {
        font-size:5.5vw;
    }

    #area2 p {
        font-size:1.8vw;
    }

    #area3 {
        margin-top:2vw;
        height:50vw;
        width:85%;
        margin-left:8%;
    }

    #area3-mimic-border {
        height:52vw;
        width:89%;
        margin-left:6%;
        margin-top:-51vw;
    }

    #area3 h1 {
        font-size:6vw;
    }

    #area3-sub1 h1 {
        margin-left:20%;
    }

    #area3-sub2 h1 {
        margin-left:10%;
    }

    #area3 p {
        font-size:2vw;
    }

    .some-area3 {
        height:88vw !important;
    }
    
    .some-area3 img {
        height:30vw !important;
        width:90% !important;
        position:relative;
        left:2.5vw !important;
        margin-left:3% !important;
        padding-top:5vw;
    }
    
    .divider-bt {
        height:.2vw !important;
    }
    
    .some-area3 p {
        font-size:5vw !important;
        margin-left:8%;
        margin-right:8%;
        padding-bottom:3vw;
        padding-top:2vw;
    }
    
    .list-container {
        float:none !important;
        width:100% !important;
         margin:0 !important;
         margin-top:3vw !important;
    }
    
    .some-area3 ul {
        font-size:4vw !important;
        padding-left:25vw;
        padding-right:5vw;
    }
    
    .some-area3 li {
        font-size:3vw !important;
        padding-right:0 !important;
    }
    
    #copyright {
        font-size:1.6vw !important;
        position:relative;
        top:1vw;
        margin-left:10%;
    }
    
    #ul-2 {
       position:relative;
       margin-left:55vw;
       padding:0 !important;
       margin-right:0 !important;
    }
    
    #ul-4 {
        position:relative;
        margin-left:55vw;
        padding:0 !important;
        margin-right:0vw !important;
    }
    
    .contact-container {
        width: 100% !important;
    }
    
    .contact-container ul {
        position:relative;
        left:-5vw !important;
    }
    
    #ulc-2 {
        position:relative;
        top:-22vw;
        left: 50vw !important;
        width:40%;
    }
    
    #ulc-3 {
        position:relative;
        top:-22vw;
    }
    
    #ulc-4 {
        position:relative;
        right:-4vw !important;
        top:-22vw;
    }
    
    .contact-container {
        display:none;
    }
    
    .social-button-container-2 {
        display:block !important;
        width:40%;
        margin-left:auto;
        margin-right:auto;
        padding-left:6%;
        margin-top:2vw;
    }
    
    .social-button {
        color:white;
        font-size:5vw;
        background-color:transparent;
        border:none;
    }
    
    .contact-container ul li {
        font-size: 2vw !important;
    }

    .email-form-container {
        display:none !important;
    }
}