body {color: #555555;
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  min-height: 100vh;
  background: url('../img/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  flex-direction: column
}
/** GENERAL STYLES **/

.ClearFix {clear:both}

#Header {text-align: center; position: relative}
#logocontainer {position: relative; width: 600; margin: 0 auto;}
#logocontainer #HeaderLogo {bottom: 10px; right: 0; position: absolute}

#MenuContainer {background-color: #bd202e; padding: 1px; text-align: center; color: #FFFFFF}
#MenuContainer a {color: yellow}
#PageContent {padding: 10px; width: 75%; margin: 0 auto; background-color: #FFFFFF;}
#Footer{text-align: center; font-size: 0.75em; width: 60%; margin: 0 auto; background-color: #FFFFFF;}

.BoldText {font-weight: 600}

/** FORM STUFF **/
.ZipForm {text-align: center}
.ZipForm label {font-weight: 600;}
.ZipForm input[type="text"] {padding: 5px; border: 1px solid rgba(76,187,23,1); border-radius: 5px; margin: 0 10px 0 10px; width: 100px;}
.ZipForm input[type="submit"] {background-color: rgba(76,187,23,1); border: 1px solid rgba(76,187,23,1); border-radius: 5px; color: #FFFFFF; padding: 5px; cursor: pointer;}
/** USA STUFF **/

.RepZipCodeLabel {font-weight: 500;}
/*.FindMyRepZip {padding: 5px; border: 1px solid rgba(76,187,23,1); border-radius: 5px; margin: 0 10px 0 10px; width: 100px;}
.FindMyRepButton {background-color: rgba(76,187,23,1); border: 1px solid rgba(76,187,23,1); border-radius: 5px; color: #FFFFFF; padding: 5px; cursor: pointer:}
.ZipSearch {font-size: 1.25em}*/
.OfficeTitle {}
.OfficialHolder {width: 50%; margin: 0 auto 30px auto}

.OfficialHolder {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap if they don't fit */
    gap: 10px; /* Add spacing between items */
}

.USRepDetails, .MPDetails, .USRepPhotoHolder, .MPPhotoHolder {
    flex: 1 1 auto; /* Flexible width based on available space */
}

.OfficalSection {margin: 0 0 10px 0; padding: 5px;}

.OfficialDemocrat {background-color: rgba(70,130,180,0.3); border: 1px solid  rgba(70,130,180,1)}
.OfficialRepublican {background-color: rgba(196,2,51,0.3); border: 1px solid  rgba(196,2,51,1)}
.OfficialNeutral {background-color: rgba(145,163,176,0.5); border: 1px solid  rgba(145,163,176,1)}

.USRepDetails {float:right; width: 300px;  border:1px solid blue}
.USRepPhotoHolder {float:left; width: 190px}
.USRepPhoto {width:180px}

.MPHolder {width: 65%; margin: 0 auto 30px auto;}
.MPSection {margin: 0 0 10px 0; padding: 5px;}
.MPDetails {float:right; width: 380px;}
.MPPhotoHolder {float:left; width: 250px}
.MPPhoto {width:240px}

/******************
 ** MOBILE LAYOUT
 *****************/
 
@media (max-width: 768px) {
    #PageContent {
        flex-direction: column;
        width: 100%;
        border:1px solid green
    }
    
    .USRepDetails, .USRepPhotoHolder, .MPDetails, .MPPhotoHolder {
        float: none;
        width: 100%;
    }

    .USRepPhoto, .MPPhoto {
        max-width: 100%;
    }

    .OfficialHolder {
        flex-direction: column;
        gap: 20px; /* Spacing between stacked items */
    }
}

@media (max-width: 992px) {
	
    /* Larger tablets and smaller desktops */
	body{ font-size: 1.75em; min-height: 50vh;}
	
	    #PageContent {
        flex-direction: column;
        width: 100%;
        border:1px solid green
    }
    
    .USRepDetails, .USRepPhotoHolder, .MPDetails, .MPPhotoHolder {
        float: none;
        width: 100%;
    }

    .USRepPhoto, .MPPhoto {
        max-width: 100%;
    }

    .OfficialHolder, .MPHolder {
        flex-direction: column;
        gap: 20px; /* Spacing between stacked items */
		width: 95%;
    }
	
	#footer {width: 99%}
}