.hover_bkgr_fricc{
    background-color:rgba(025,052,084,.9);
    cursor:pointer;
    display:none;
    position:fixed;
    padding: 1em 2em 2em 2em ;
    top: 1em;
    left: 1em;
    width: auto;
    z-index:10000;
    max-width: 95%;
    border-radius: 0.4em;
}
#thebox img {
    width: auto;
}
.wp-funraise-embed-giving.form button {
    background-color: #fff; color: #fff;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height: 100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 0.5em 0.5em 3em #555;
    display: inline-block;
    height: auto;
    width: auto; 
    min-height: 5em;
    vertical-align: middle;
    position: relative;
    border-radius: 0.4em;
    padding: 1em;
}
.popupCloseButton {
    background-color: #fff;
    border: 0.2em solid #999;
    border-radius: 2.5em;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -1em;
    right: -1em;
    font-size: 1.25em;
    line-height: 1.5em;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.surround_box_fricc {
    max-width: 90%; 
    background-color: white; 
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 1em;
    margin: 1em;
    display: inline-block;
    font-weight: bold;
}


@media screen and (max-width:  500px) {
  #thebox img {
    width: 400px !important;
  }
   .hover_bkgr_fricc {
     padding: 1em !important;
   }
   #thebox { 
     padding: 0px !important; border: 0px !important; 
   }
}
@media screen and (min-width: 501px) and (max-width:  600px) {
  #thebox img {
    width: 500px !important;
  }
    .hover_bkgr_fricc {
     padding: 1em !important;
   }
   #thebox { 
     padding: 0px !important; border: 0px !important; 
   }
}
@media screen and (min-width: 601px) and (max-width:  900px) {
  #thebox img {
    width: 600px !important;
  }
   .hover_bkgr_fricc {
     padding: 1em !important;
   }
   #thebox { 
     padding: 0px !important; border: 0px !important; 
   }
}
@media screen and (min-width: 901px) {
  #thebox img {
    width: 900px !important;
  }
   .hover_bkgr_fricc {
     padding: 1em !important;
   }
   #thebox { 
     padding: 0px !important; border: 0px !important; 
   }
}


@media screen and (min-width: 901px) {  

  .cmaa-button  {background-image: url("saint-cecilia-campaign2-768x625.webp")  !important;
	         background-size: contain !important;  
	         max-width: 70% !important; 
	 } 
}	

@media screen and (max-width: 900px) {
    .hover_bkgr_fricc {
          padding: 0.5em 1.5em 1.5em 1.5em !important;
          top: 3em !important;
     }

 .surround_box_fricc {
	  padding: 0 !important;
      height, width: auto !important;
      background-color: rgba(167,191,220,.7) !important;
    }
    #thebox {
      background-color: rgba(167,191,220,.5) !important;
      border: 0.25em solid white  !important;
    }
    #thebox img {
       border : 1em auto !important;

       min-width: 50% !important;
       width: 80% !important;
       height: 70% !important;
       max-width: 90% !important;
    }
  .cmaa-button  {
	         background-image: url("saint-cecilia-campaign-2026-mobile.jpg") !important ;
	         background-size: contain !important ; 
	         max-width: 100% !important; 
	 }
 }
@media screen and (pointer: coarse) and (hover: none)  {
  .hover_bkgr_fricc {
          padding: 1.5em !important;
          top: 3em !important;

          left: 0 !important;
          right: 0 !important;
          border-top : 2em !important;
          border-left, border-right: 0 !important;
          padding: 2em !important;
          height, width: auto !important;
     }

    .surround_box_fricc {
	  padding: 0 !important;
      height, width: auto !important;
      background-color: rgba(167,191,220,.7) !important;
    }
    #thebox {
      background-color: rgba(167,191,220,.5) !important;
      border: 0.25em solid white !important;
    }
    #thebox img {
       border : 1.5em auto !important;

       min-width: 80%;
       max-width: 100% !important;
       max-height: 100%  !important;
       width: 80% !important;
       height: 70% !important;
    }
   .cmaa-button  {
	         background-image: url("saint-cecilia-campaign-2026-mobile.jpg") !important ;
	         background-size: contain !important ;
             width: 80% !important;
	 }

}

@media screen and (max-height: 400px) {
  .hover_bkgr_fricc {
      top: 10% !important;	  
      left: 20% !important;
      max-height: 80% !important;
      max-width: 45% !important;
      padding: 0 !important;
      border: 0 !important;
  }
    .surround_box_fricc {
      height: auto !important;
      width: auto !important;
      border: 1em 0em 1em 0em !important;
      padding: 1em 0.5em 1em 0.5em !important;
      border-color: rgba(025,052,084,.9) !important;
      background-color:rgba(025,052,084,.9) !important;
    }
   .cmaa-button  {
	         background-image: url("saint-cecilia-campaign-2026-mobile.jpg") !important ;
	         background-size: contain !important ;
             width: 80% !important;
	 }
}
@media screen and (min-height: 400px) and (max-height: 600px) {
  .hover_bkgr_fricc {
      top: 10% !important;	  
      left: 20% !important;
      max-height: 80% !important;
      max-width: 45% !important;
      padding: 0 !important;
      border: 0 !important;
  }
    .surround_box_fricc {
      height: auto !important;
      width: auto !important;
      border: 1em 0em 1em 0em !important;
      padding: 1em 0.5em 1em 0.5em !important;
      border-color: rgba(025,052,084,.9) !important;
      background-color:rgba(025,052,084,.9) !important;
    }
   .cmaa-button  {
	         background-image: url("saint-cecilia-campaign-2026-mobile.jpg") !important ;
	         background-size: contain !important ;
             width: 80% !important;
	 }
 }