body{
    background-image: url('backgroundImg.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* General */

.dividingLine{
    border-top: 2px black solid;
    width: 100px;
    margin-bottom: 5px;
    margin-top: 5px;
    height: 10px;
    margin:auto;
}
.stripedLine{
    display:flex;
    width:100px;
    height:10px;
    margin-bottom:5px;
    margin-top:5px;
    margin:auto;
}
.stripedLine .redStripe{
    width:19px;
    height:4px;
    border-bottom:red solid 4px;
}
.stripedLine .greenStripe{
    width:19px;
    height:4px;
    border-bottom:green 4px solid;
}

#underConstruction{
    position:absolute;

    z-index:90;
    width:100%;
    height:90%;
    right:8%;
    font-size:30px;
    background:linear-gradient(silver, grey);
    

}

/* Header CSS: */

header{
    text-align:center;
    background-image:url("looseSaluteHeaderWhite.png");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height: 600px;
    width:90%;
    margin:auto;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    margin-top: 20px;
}

#flashHeader{
    background-image:url("looseSaluteNewLogoFlash2.png");
}

#looseSaluteLogo{
    margin:auto;
    width:50%;
}

/* Navbar CSS: */

#navbar{
    height: 75px;
    background-color:white;
    width: 90%;
    margin: auto;
    text-align: center;
}
#navbar li{
    margin-top: 0;
    display: inline-block;
    font-size: 25px;
    padding: 5px;
    margin: 15px;
    margin-right: 45px;
}
/* QUOTES and IMAGE sandwich: */

#quotesAndImage{
    width: 90%;
    height: fit-content;
    margin:auto;
    margin-bottom:20px;
}

#quotesAndImage img{
    display:inline-block;
    width:45%;
}
#quotesAndImage p{
    width: 15%;
    font-size: 25px;
    display:inline-block;
    vertical-align:top;
    margin: 35px;
}

/* About Div CSS: */
#about{
    width: 90%;
    background-color:white;
    opacity: 95%;
    margin: auto;
    margin-top: 15px;
    text-align: center;
    padding-bottom: 25px;

}
#about h2{
    font-size: 45px;
    padding-top: 25px;
}

.aboutParagraph{
    font-size: 24px;
    margin: auto;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 25px;

}
#about img{
    padding-top: 2px;
    padding-bottom: 2px;
    width: 49%;
}
#aboutImages{
    width: 90%;
    margin: auto;

}

#intro{
    display:flex;align-items:center;margin:auto;width:90%;height:550px;overflow: scroll;
}

#introPara{
    width: 70%;margin-left:5px;padding:0px;padding-left: 10px;
}


/* Photos CSS */
#photos{
    width: 90%;
    background-color:white;
    opacity: 95%;
    margin: auto;
    margin-top: 15px;
    text-align: center;
    padding-bottom: 25px;
}
#photos h2{
    font-size: 45px;
    padding-top: 25px;
}

#photoPair{
    align-items:top;
}
#photoPair div{
    display: inline-block;
    width: 42%;
    object-fit:contain;
    overflow:hidden;
    vertical-align:top;
}
#photoPair div img{
    margin:auto;
    width:100%;
    vertical-align:top;
}


#posterContainer{
    width: 90%;
    margin:auto;
    margin-top: 10px;
}
#posterContainer img{
    width: 31%;
    box-shadow: 5px 5px 5px black;
    border: 1px black solid;
    margin: 5px;
}
/* captionFloat CSS: */
#captionFloat{
    position: fixed;
    background-color: black;
    border-radius: 25px;
    font-size: 20px;
    bottom:-100;
    color:white;
    text-align:center;
    padding:15px;
    left:0;
    right:0;
    width: 250px;
    margin:auto;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    z-index:100;

}

/* Loading mechanism */
#loader{
display:none;width: 80%; height: 50%; font-size: 50px; position:fixed; background-color:silver; box-shadow:6px 6px 6px black; top: 100px; margin:auto;left: 50; right: 50;}


/* Contact page CSS: */
#contact{
    width: 90%;
    background-color:white;
    opacity: 95%;
    margin: auto;
    margin-top: 15px;
    text-align: center;
    padding-bottom: 25px;
}
#contact h2{
    font-size: 45px;
    padding-top: 25px;
}
textarea{
    width: 100%;
}

/* Members Page CSS */

#members{
    width: 90%;
    background-color:white;
    opacity: 95%;
    margin: auto;
    margin-top: 15px;
    text-align: center;
    padding-bottom: 25px;
}
#members h2{
    font-size: 45px;
    padding-top: 25px;
}


#memberProfiles {
    width: 90%;
    height: fit-content;
    margin: auto;
}
.memberProfile{
    width: 46%;
    height: fit-content;
    background-color: white;
    display: inline-block;
    margin: 10px;
    box-shadow: 2px 2px 2px black;
    
}
.memberProfileWide{
    width: 94%;
    background-color: white;
    display:block;
    box-shadow: 2px 2px 2px black;
    margin:auto;
}
.memberProfileWide img{
   width:100%;
   object-fit:cover;
}
.memberProfile img{
    max-height:400px;
    
}

.photoCaption{
    font-size:20px;
    vertical-align:top;
    margin-top: 5px;
   
    

}

/* Gallery CSS */

#gallery{
    width: 90%;
    background-color:white;
    opacity: 95%;
    margin: auto;
    margin-top: 15px;
    text-align: center;
    padding-bottom: 25px;
}
#gallery h2{
    font-size: 45px;
    padding-top: 25px;
}

/* Events Page: (or Appearances) */

.eventDesc{
    font-size: 26px;
    margin-top:10px;
    display:inline-block;
    vertical-align:top;
    padding: 15px;
}
.upcomingEvent{
    height:200px;
    overflow:scroll;
}
.upcomingEvent img{
    max-height:200px;
}



/* DEVICE BREAKPOINTS: */

/* Tablet settings: */

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

    .memberProfile{
        width:90%;
        display:block;
        margin:auto;

            max-height:fit-content;
            object-fit:contain;

        
    }

    .memberProfile img{
        max-height:450px;
    }
    .memberProfileWide img{
        width:100%;
        margin:auto;

        
    }
    .upcomingEvent p, .upcomingEvent img{
        display:block;
        width:90%;
        margin:auto;

        
    }
    .upcomingEvent{
        height:fit-content;
        margin:auto;
    }
    header{
        height:400px;
        object-fit:contain;
    }
}


/* Vertical Navbar Breakpoint: */
@media screen and (max-width:810px){
    #navbar{

    height: fit-content;



    }
    #navbar li{
        display:block;
        border-bottom: 2px black solid;
    }
}

/* Intro Photo Array Breakpoint: */

@media screen and (max-width:820px){
    #quotesAndImage p{

    width:100%;
    margin:auto;



    }
    
}

/* Mobile phone breakpoint: */

@media screen and (max-width:500px){
    
    body{
        background:
        black;

    }

    #looseSaluteHeader, #flashHeader{
        
        width:100%;
        height:200px;
        background-position:center;
        background-size:contain;
    }

    #navbar{
    width:100%;
}

#mainPhoto{
    width:100%;
}

#intro{
    flex-direction:column;
    height:fit-content;
}
#introPara{
    padding-left:0px;
    margin:auto;
}
#submitBtn{
    width:100%;
}
.videoContainer{
    width:90%;
    margin:auto;
}

iframe{
    width:100%;
    object-fit:contain;
    margin:auto;
}


#posterContainer img{
    display:block;
    width:90%;
    margin:auto;

}

audio{
    margin:auto;
    display:block;
}

#quotesAndImage img{
    display:block;
    width: 100%;
    margin:auto;
}
#quotesAndImg p{
    display:none;

}
/* Member Profiles: */

.memberProfile{
        max-height:fit-content;
        object-fit:contain;
    }
    .photoCaption{
        padding-bottom:5px;
    }
}