header {
    align-items: center;
    justify-content: center;
    background-size: cover;    
    background-position: top;
    background-repeat: no-repeat;
    background-image: url("https://manatix.com/assets/img/backgrounds4/4K Awards Ceremony Particle Video Background.jpg");
    opacity: 0.7;
}

@media screen and (min-width: 320px) and (max-width: 413px) {
    
    header {
        height: 370px;
        border-bottom: 3px solid #444;
        box-shadow: 0 0 8px 6px #000000;
    }    
}
@media screen and (min-width: 414px) and (max-width: 599px) {
    
    header {
        height: 320px;
        margin-top: 40px;
        border-bottom: 2px solid #222;
    }
}
@media screen and (min-width: 600px) and (max-width: 666px) {
    
    header {
        height: 330px;
        margin-top: 40px;
        border-bottom: 2px solid #222;
        box-shadow: 0 0 8px 6px #000000;
    }
}
@media screen and (min-width: 667px) and (max-width: 767px) {
    
    header {
        height: 310px;
        border-bottom: 2px solid #222;
        box-shadow: 0 0 8px 6px #000000;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    header {
        height: 360px;
        border-bottom: 2px solid #222;
        box-shadow: 0 0 8px 6px #000000;
    }
}
@media screen and (min-width: 800px) and (max-width: 811px) {
    
    header {
        height: 370px;
        border-bottom: 2px solid #222;
        box-shadow: 0 0 8px 6px #000000;
    }
}
@media screen and (min-width: 812px) and (max-width: 1023px) {
    
    header {
        height: 374px;
        border-bottom: 2px solid #222;
        box-shadow: 0 0 8px 6px #000000;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    header {
        height: 430px;
        border-bottom: 2px solid #222;
        box-shadow: 0 0 8px 6px #000000;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    
    header {
        height: 490px;
        border-bottom: 2px solid #333;
        box-shadow: 0 0 8px 6px #000000;
    }
}
@media screen and (min-width: 1281px) {
    
    header {
        height: 490px;
        border-bottom: 2px solid #333;
        box-shadow: 0 0 8px 6px #000000;
    }   
}

.leftIndex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .leftIndex {        
        margin: -290px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) {
    
    .leftIndex {
        margin-top: -470px;
    }    
}

#indexHeaderContainer {
    padding: 0;
}
#indexLogoSloganHolder {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}  

@media screen and (min-width: 320px) and (max-width: 374px) {
      
    .indexPageLogo {
        height: auto;
        width: 280px;
        margin: 65px 0 0 0;
        padding: 0;
    }
    .indexPledgstaSlogan {   
        margin: -5px 0 0 0;
        padding: 0 0 0 26.25px;
        font-size: 20px;
        letter-spacing: 20.5px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }
}
@media screen and (min-width: 375px) and (max-width: 413px) {
   
    .indexPageLogo {
        height: auto; 
        width: 320px;
        margin: 60px 0 0 0;
        padding: 0;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0;
        padding: 0 0 0 30px;
        font-size: 23.5px;
        letter-spacing: 23px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }
}
@media screen and (min-width: 414px) and (max-width: 599px) {
   
    .indexPageLogo {
        height: auto; 
        width: 320px;
        margin: 60px 0 0 0;
        padding: 0;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0;
        padding: 0 0 0 30px;
        font-size: 23.5px;
        letter-spacing: 23px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }
}
@media screen and (min-width: 600px) and (max-width: 666px) {
   
    .indexPageLogo {
        height: auto; 
        width: 349px;
        margin: 60px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0;
        padding: 0 0 0 30px;
        font-size: 20px;
        letter-spacing: 24px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }
}
@media screen and (min-width: 667px) and (max-width: 767px) {
  
    .indexPageLogo {
        height: auto; 
        width: 350px;
        margin: 110px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0;
        padding: 0 0 0 29.5px;
        font-size: 20px;
        letter-spacing: 24px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }      
}
@media screen and (min-width: 768px) and (max-width: 799px) {
   
    .indexPageLogo {
        height: auto; 
        width: 450px;
        margin: 245px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0;
        padding: 0 0 0 40px;
        font-size: 26px;
        letter-spacing: 32px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }    
}
@media screen and (min-width: 800px) and (max-width: 1023px) {

    .indexPageLogo {
        height: auto; 
        width: 550px;
        margin: 220px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0; 
        padding: 0 0 0 50.5px;
        font-size: 30px;
        letter-spacing: 41.5px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }   
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .indexPageLogo {
        height: auto; 
        width: 600px;
        margin: 190px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0; 
        padding: 0 0 0 54.5px;
        font-size: 35px;
        letter-spacing: 44.25px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    }   
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
  
    .indexPageLogo {
        height: auto; 
        width: 600px;
        margin: 150px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0; 
        padding: 0 0 0 54.5px;
        font-size: 35px;
        letter-spacing: 44.25px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    } 
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1138 + 1180 */
  
    .indexPageLogo {
        height: auto; 
        width: 650px;
        margin: 145px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0; 
        padding: 0 0 0 58.5px;
        font-size: 40px;
        letter-spacing: 47px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    } 
}
@media screen and (min-width: 1200px) and (max-width: 1280px) { /* 1200 */
  
    .indexPageLogo {
        height: auto; 
        width: 700px;
        margin: 120px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0; 
        padding: 0 0 0 64px;
        font-size: 42px;
        letter-spacing: 51.5px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    } 
}
@media screen and (min-width: 1281px) and (max-width: 1439px) {
  
    .indexPageLogo {
        height: auto; 
        width: 700px;
        margin: 120px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -5px 0 0 0; 
        padding: 0 0 0 64px;
        font-size: 42px;
        letter-spacing: 51.5px;
        text-shadow: 1.5px 1px 2px rgba(0,0,0, 0.7);
    } 
}
@media screen and (min-width: 1440px) {

    .indexPageLogo {
        height: auto; 
        width: 854px;
        margin: 120px 0 0 0;
        padding: 0 20px 0 20px;
    }
    .indexPledgstaSlogan {
        margin: -25px 0 0 0;
        padding: 0 0 0 78px;
        font-size: 53px;
        letter-spacing: 63px;
        text-shadow: 3px 3px 4px rgba(0,0,0, 0.8);
    }
}