/***********************************************************/
/***Community Home Responsive Design Changes****/
/*********************************************************/

@media screen and (min-width: 200px) and (max-width: 1105px){
    body{
        overflow-x: hidden !important;
    }
}
@media screen and (min-width: 200px) and (max-width: 767px){
      #Comm-Col-1, #Comm-Col-2, #Comm-Col-3{
    display: none !important;
  }
  .zoneContentWrap{
    height: 46vh !important;
  }
}

/*  THIS WHOLE @MEDIA SECTION IS DEDICATED ONLY TO THE PICTURE RESIZING AND THE TEXT WITHIN THE PICTURE */
@media screen and (max-width: 375px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 160px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 177px !important;
    }
}
@media screen and (min-width: 360px) and (max-width: 401px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 165px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 180px !important;
    }
}
@media screen and (min-width: 402px) and (max-width: 423px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 175px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 190px !important;
    }
}
@media screen and (min-width: 424px) and (max-width: 439px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 180px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 197px !important;
    }
}
@media screen and (min-width: 440px) and (max-width: 444px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 185px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 200px !important;
    }
}
@media screen and (min-width: 445px) and (max-width: 451px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 190px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 203px !important;
    }
}
@media screen and (min-width: 452px) and (max-width: 460px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 193px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 205px !important;
    }
}
@media screen and (min-width: 461px) and (max-width: 489px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 200px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 220px !important;
    }
}
@media screen and (min-width: 490px) and (max-width: 535px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 220px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 240px !important;
    }
}
@media screen and (min-width: 536px) and (max-width: 557px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 230px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 252px !important;
    }
}
@media screen and (min-width: 558px) and (max-width: 582px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 245px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 265px !important;
    }
}
@media screen and (min-width: 300px) and (max-width: 582px){
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        padding-top: 0px;
        font-size: 20px;
        font-weight: bold;
        font-family: verdana, geneva, sans-serif;
    }
    .menuBackGroundLayerThreeHealthyCommunity div {
        padding-left: 12px !important;
    }
}
@media screen and (min-width: 583px) and (max-width: 601px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 250px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 275px !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; padding-top:0px !important; font-weight:bold;
        font-size:  20px !important;
    }
}
@media screen and (min-width: 602px) and (max-width: 618px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 255px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 281px !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
}
@media screen and (min-width: 602px) and (max-width: 618px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 255px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 275px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
     padding-top:0px !important; font-weight:bold;
        font-size:  20px !important;
    }
}
@media screen and (min-width: 619px) and (max-width: 652px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 270px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 288px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; padding-top:0px !important; font-weight:bold;
        font-size:  20px !important;
    }
}
@media screen and (min-width: 653px) and (max-width: 700px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 290px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 310px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; padding-top:0px !important; font-weight:bold;
        font-size:  20px !important;
    }
}
@media screen and (min-width: 701px) and (max-width: 734px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 300px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 323px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; padding-top:0px !important; font-weight:bold;
        font-size:  20px !important;
    }
}
@media screen and (min-width: 735px) and (max-width: 755px){
.zoneMiddleMenuWrap{
        width: 100% !important;
        height: 310px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 335px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; padding-top:0px !important; font-weight:bold;
        font-size:  20px !important;
    }
}
@media screen and (min-width: 756px) and (max-width: 790px){
.zoneMiddleMenuWrap{
        width: 100% !important;
        height: 330px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 351px !important;    
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        display: none !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; padding-top:0px !important; font-weight:bold;
        font-size:  20px !important;
    }
}   
@media screen and (min-width: 791px) and (max-width: 860px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 355px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 382px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        position: relative; bottom:38px;
        font-size:  15px !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity div div div{
        overflow: inherit !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; bottom: 18px;
        font-size:  26px !important;
    }
}
@media screen and (min-width: 861px) and (max-width: 920px){
.zoneMiddleMenuWrap{
        width: 100% !important;
        height: 380px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 412px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        position: relative; bottom:20px;
        font-size:  16px !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; bottom: 15px;
        font-size:  27px !important;
    }
}
@media screen and (min-width: 921px) and (max-width: 1000px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 420px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 450px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        position: relative; bottom:17px;
        font-size:  17px !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; bottom: 10px;
        font-size:  28px !important;
    }
}
@media screen and (min-width: 1001px) and (max-width: 1050px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 435px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 470px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        position: relative; bottom:15px;
        font-size:  18px !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; bottom: 10px;
        font-size:  29px !important;
    }
}
@media screen and (min-width: 1051px) and (max-width: 1105px){
    .zoneMiddleMenuWrap{
        width: 100% !important;
        height: 455px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity, .menuBackGroundLayerTwo, .menuBackGroundLayerOne{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 495px !important;
    }
    .menuBackGroundLayerOne{
        margin-left: 10px !important; 
    }
    .menuBackGroundLayerThreeHealthyCommunity a{
        position: relative; bottom:15px;
        font-size:  19px !important;
    }
    .menuBackGroundLayerThreeHealthyCommunity h1{
        position: relative; bottom: 8px;
        font-size:  30px !important;
    }        
}
@media screen and (max-width: 767px){
    .UCHeader{
        display:block !important;
    }
	.midContent{
		height: 1000px !important;
		width: 50vw !important;
	}
	#Comm-Col-1{
		width: 100vw !important;
		position: relative; top: 40px;
        border: none !important;
        height: 380px !important;
	}
	#Comm-Col-2{
		display:none !important;
	}
	#Comm-Col-3{
		width: 94vw !important;
        border: none !important;	
	}
	#Comm-Col-4{
		width: 100vw !important;
        border: none !important;
	}
}
@media screen and (min-width: 200px) and (max-width: 790px){
    .MobileMenu {
        display:block !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 1105px){
    .UCHeader{
        display:block !important;
    }
	.midContent{
		height: 1000px !important;
		width: 50vw !important;
	}
	#Comm-Col-1{
		width: 100vw !important;
		position: relative; top: 40px;
        border: none !important;
        height: 380px !important;
	}
	#Comm-Col-2{
		display:none !important;
	}
	#Comm-Col-3{
		width: 94vw !important;
        border: none !important;	
	}
	#Comm-Col-4{
		width: 100vw !important;
        border: none !important;
	}
}
@media screen and (min-width: 360px) and (max-width: 1050px){
    .Commmidmenu{
        display:none !important;
    }
}