/*
*
* css - block - fancy image style - customizations
* - this is the block type with the text area on the left and the pair of images on the right
*
*
*  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
*  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
*  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
*
*
*
*/


/* mp 02019-04-10 - fix positioning for narrow / mobile devices */
#block-s28blockfrontpagephotosintofocus .order-lg-2
{
  order: 2;
  clear: both;
}



.fancy-image-top-right 
{
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 30px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);  
}

.fancy-image-bottom-left 
{
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 40px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);  
}




/* fancy image block - adjust the inner div height for various widths */
@media only screen and (max-width: 450px) {

.fancy-block-2-container 
{
  position: relative;
  height: 250px;
}

.fancy-image-block .fancy-image-block-title 
{
  font-size: 36px;
}

}



/* fancy image block - adjust the inner div height for various widths */
@media only screen and (min-width: 451px) {

.fancy-block-2-container 
{
  position: relative;
  height: 300px;
}

.fancy-image-block .fancy-image-block-title 
{
  font-size: 36px;
}

}

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

.fancy-block-2-container 
{
  position: relative;
  height: 350px;
}

.fancy-image-block .fancy-image-block-title 
{
  font-size: 36px;
}

}

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

.fancy-block-2-container 
{
  position: relative;
  height: 400px;
}

.fancy-image-block .fancy-image-block-title 
{
  font-size: 36px;
}

}

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

.fancy-block-2-container 
{
  position: relative;
  height: 400px;
}

}

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

.fancy-block-2-container 
{
  position: relative;
  height: 450px;
}

}