/* CSS Document */
 #hpboxes { position: relative; display: grid; width: 90%; max-width: 1100px; height: auto !important; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); grid-gap: 10px; }

 #hpboxes .hprow1,
 #hpboxes .hprow2 { position: relative; display: block; width: 100%; height: 280px !important; min-height: 280px; max-height: 280px; overflow: hidden; float: left; background: #222; font-family: font-family: "Wix Madefor Display", sans-serif; font-size: 1.0em; line-height: 1.1em; color: #FFF; margin: 0; }

 #hpboxes .hprow1 h3, 
 #hpboxes .hprow2 h3 { font-family: font-family: "Wix Madefor Display", sans-serif; position: relative; top: 0px; height: 10px; margin: 0px; padding: 10px 0px 60px 0px; z-index: 31; font-size: 1.5em; line-height: 1.5em; color: #FFFFFF; }

 #hpboxes .hprow1 a, 
 #hpboxes .hprow2 a { margin: 0px; padding: 10px; font-family: font-family: "Wix Madefor Display", sans-serif; font-size: 1.0em; line-height: 1.1em; color: #fff; display: block; background-image: url(https://www.bard.edu/images/tints/80black.png); background-repeat: repeat; background-position: 0 0; height: 330px; }
/*
 #hpboxes .hprow1:nth-of-type(1) a {background-color: #b30526; opacity: 0.8;}
 #hpboxes .hprow1:nth-of-type(2) a {background-color: #094848; opacity: 0.8;}
 #hpboxes .hprow1:nth-of-type(3) a {background-color: #967734; opacity: 0.8;}
 #hpboxes .hprow1:nth-of-type(4) a {background-color: #b30526; opacity: 0.8;}
 #hpboxes .hprow1:nth-of-type(5) a {background-color: #094848; opacity: 0.8;}
 #hpboxes .hprow1:nth-of-type(6) a {background-color: #967734; opacity: 0.8;}
 #hpboxes .hprow1:nth-of-type(7) a {background-color: #b30526; opacity: 0.8;}
 #hpboxes .hprow1:nth-of-type(8) a {background-color: #094848; opacity: 0.8;}
*/

 #hpboxes .hprow2 a:hover, 
 #hpboxes .hprow2 a:active { text-decoration: none; }

 #hpboxes .hprow1 img, 
 #hpboxes .hprow2 img { width: 100%; height: auto !important; z-index: 30; object-fit: cover; min-height: 280px; }

 #hpboxes .hprow1 #embedshell { width: 100%; height: 280px !important; overflow: hidden; }

 #hpboxes .hprow1 iframe { width: 100%; height: 210px; z-index: 5; }

/* animated text box on HP Boxes */
 #hpboxes .hprow1 .hprowtext { width: 100%; position: absolute; bottom: 0; left: 0; margin-bottom: -260px; border-radius: 0px; }
 #hpboxes .hprow1:hover .hprowtext { margin-bottom: -60px; text-decoration: none;}
 #hpboxes .hprow1 .hprowtext a:link, 
 #hpboxes .hprow1 .hprowtext a:visited, 
 #hpboxes .hprow1 .hprowtext a:hover, 
 #hpboxes .hprow1 .hprowtext a:active { text-decoration: none; }

 #hpboxes .hprow1 .hprowvideo {vwidth: 100%; position: absolute; bottom: 0; left: 0; margin-bottom: -300px; border-radius: 0px; overflow: hidden; }
 #hpboxes .hprow1:hover .hprowvideo { margin-bottom: -300px; overflow: hidden; }
 #hpboxes .hprow1 .hprowvideo h3 { display: none; }
 #hpboxes .hprow1:hover .hprowvideo h3 { display: none; }

 #hpboxes .hprowtext { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }

@media only screen and (max-width: 1070px) {
/*	 #hpboxes {max-width: 700px !importanti;}*/
}

/* ---------------------------- TABLET  STYLES ------------------------ */
@media only screen and (min-width: 601px) and (max-width: 900px) {
	
  	 #hpboxes .hprow1, 
	 #hpboxes .hprow2 { position: relative; display: block; width: 100%; height: 280px !important; min-height: 280px; max-height: 280px; overflow: hidden; float: left; background: #FFF; font-family: font-family: "Wix Madefor Display", sans-serif; font-size: 14px; line-height: 1.1em; color: #FFF; margin: 0;}
	
  	 #hpboxes .hprow1 h3, 
	 #hpboxes .hprow2 h3 { font-family: font-family: "Wix Madefor Display", sans-serif; position: relative; top: 0px; height: 10px; margin: 0px; padding: 10px 0px 60px 0px; z-index: 31; font-size: 1.3em; line-height: 1.3em; color: #FFFFFF; }
	
  	 #hpboxes .hprow1 a, 
	 #hpboxes .hprow2 a { margin: 0px; padding: 10px; font-family: font-family: "Wix Madefor Display", sans-serif; font-size: 1.3em; line-height: 1.5em; color: #fff; display: block; background-image: url(https://www.bard.edu/images/tints/80black.png); background-repeat: repeat; background-position: 0 0; height: 400px; }
	
  	 #hpboxes .hprow2 a:hover, 
	 #hpboxes .hprow2 a:active { text-decoration: none; }
 
	 #hpboxes .hprow1 img, 
	 #hpboxes .hprow2 img { width: 100%; height: 280px !important; z-index: 30; }
	
 	 #hpboxes .hprow1 #embedshell { width: 100%; height: 280px !important; overflow: hidden; }
	
  	 #hpboxes .hprow1 iframe { width: 100%; height: 210px; z-index: 5; }
	
  /* animated text box on HP Boxes */
  	 #hpboxes .hprow1 .hprowtext { width: 100%; position: absolute; bottom: 0; left: 0; margin-bottom: -360px; border-radius: 0px; }
  	 #hpboxes .hprow1:hover .hprowtext { margin-bottom: -140px; text-decoration: none; }
  	 #hpboxes .hprow1 .hprowtext a:link, 
	 #hpboxes .hprow1 .hprowtext a:visited, 
	 #hpboxes .hprow1 .hprowtext a:hover, 
	 #hpboxes .hprow1 .hprowtext a:active { text-decoration: none; }
}
/* ---------------------------- MOBILE ONLY  STYLES ------------------------ */
@media screen and (max-width: 600px) {
  	 #hpboxes { display: flex; flex-direction: column; align-items: center; margin: 0 auto; height: auto !important; }
	
  	 #hpboxes .hprow1, 
	 #hpboxes .hprow2 { position: relative; display: block; width: 90%; height: 280px !important; min-height: 240px; max-height: 240px; overflow: hidden; float: left; background: #FFF; font-family: font-family: "Wix Madefor Display", sans-serif; font-size: 1.0em; line-height: 1.3em; color: #FFF; margin: 0; }
	
  	 #hpboxes .hprow1 h3, 
	 #hpboxes .hprow2 h3 {font-family: font-family: "Wix Madefor Display", sans-serif; position: relative; top: 0px; height: 10px; margin: 0px; padding: 0px 0px 60px 0px; z-index: 31; font-size: 1.1em; line-height: 1.3em; color: #FFFFFF; }
	
	 #hpboxes .hprow1 a, 
	 #hpboxes .hprow2 a { margin: 0px; padding: 10px; font-family: font-family: "Wix Madefor Display", sans-serif; font-size: 1.0em; line-height: 1.1em; color: #fff; display: block; background-image: url(https://www.bard.edu/images/tints/80black.png); background-repeat: repeat; background-position: 0 0; height: 260px; }
	 #hpboxes .hprow2 a:hover, 
	 #hpboxes .hprow2 a:active { text-decoration: none; }
	
  	 #hpboxes .hprow1 img, 
	 #hpboxes .hprow2 img { width: 100%; height: 280px !important; z-index: 30; }
	
	 #hpboxes .hprow1 #embedshell { width: 100%; height: 280px !important; overflow: hidden; }
	 #hpboxes .hprow1 iframe { width: 100%; height: 210px; z-index: 5; }
 	
	/* animated text box on HP Boxes */
	 #hpboxes .hprow1 .hprowtext { width: 100%; position: absolute; bottom: 0; left: 0; margin-bottom: -200px;  border-radius: 0px; }
	 #hpboxes .hprow1:hover .hprowtext { margin-bottom: -40px; text-decoration: none; }
  
	 #hpboxes .hprow1 .hprowtext a:link, 
	 #hpboxes .hprow1 .hprowtext a:visited, 
	 #hpboxes .hprow1 .hprowtext a:hover, 
	 #hpboxes .hprow1 .hprowtext a:active { text-decoration: none; }
}