/* CSS Document */ .mosaic {width: 100%; margin: 0 auto 30px auto; padding: 0; max-width: 1000px; } .mosaic h2 { font-size: 2.0em; margin: 0 0 20px 0; text-align: left;} #hpboxes { position: relative; display: block; width: 100%; height: auto !important; margin: 0 auto; max-width: 1300px; } #hpboxes .hprow1, #hpboxes .hprow2 { position: relative; display: block; width: 31%; height: auto !important; min-height: 250px; max-height: 250px; overflow: hidden; float: left; background: #FFF; font-family: "Work Sans", Arial, sans-serif; font-size: 1.0em; line-height:1.1em; color: #FFF; margin: 1%; background: #000 !important; } #hpboxes .hprow1 h3, #hpboxes .hprow2 h3 { font-family: "Work Sans", Arial, 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 .hov, #hpboxes .hprow2 .hov { margin: 0px; padding: 10px;font-family: "Work Sans", Arial, sans-serif; font-size: 1.0em; 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: 380px; } #hpboxes .hprow2 .hov:hover, #hpboxes .hprow2 .hov:active { text-decoration: none;} #hpboxes .hprow1 img, #hpboxes .hprow2 img { width: 100%; height: auto !important; z-index: 30; } #hpboxes .hprow1 #embedshell { width: 100%; height: auto !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:-330px; border-radius:0px;} #hpboxes .hprow1:hover .hprowtext { margin-bottom:-150px; 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 { width: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;} /* ---------------------------- Desktop ONLY STYLES ------------------------ */ @media only screen and (min-width: 901px) and (max-width: 1000px) { } /* ---------------------------- TABLET STYLES ------------------------ */ @media only screen and (min-width: 601px) and (max-width: 900px) { #hpboxes .hprow1, #hpboxes .hprow2 { position: relative; display: block; width: 50%; height: auto !important; min-height: 280px; max-height: 280px; overflow: hidden; float: left; background: #FFF; font-family: "Source Sans Pro", "SourceSans", Helvetica, Arial, sans-serif; font-size: 1.0em; line-height:1.1em; color: #FFF; margin: 0; } #hpboxes .hprow1 h3, #hpboxes .hprow2 h3 { font-family: "Source Sans Pro", "SourceSans", Helvetica, Arial, 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: "Source Sans Pro", "SourceSans", Helvetica, Arial, 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: auto !important; z-index: 30; } #hpboxes .hprow1 #embedshell { width: 100%; height: auto !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:-200px; 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 .hprow1, #hpboxes .hprow2 { position: relative; display: block; width: 100%; height: auto !important; min-height: 180px; max-height: 180px; overflow: hidden; float: left; background: #FFF; font-family: "Source Sans Pro", "SourceSans", Helvetica, Arial, sans-serif; font-size: 1.0em; line-height:1.3em; color: #FFF; margin: 0 0 20px 0; } #hpboxes .hprow1 h3, #hpboxes .hprow2 h3 { font-family: "Source Sans Pro", "SourceSans", Helvetica, Arial, sans-serif;position: relative; top:0px; height: 10px;margin: 0px; padding: 0px 0px 25px 0px; z-index: 31; font-size: 1.3em; line-height:1.3em; color: #FFFFFF; } #hpboxes .hprow1 .hov, #hpboxes .hprow2 .hov { height: 210px; } #hpboxes .hprow1 a, #hpboxes .hprow2 a { margin: 0px;padding: 10px;font-family: "Source Sans Pro", "SourceSans", Helvetica, Arial, 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: auto !important; z-index: 30; } #hpboxes .hprow1 #embedshell { width: 100%; height: auto !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:-180px; border-radius:0px;} #hpboxes .hprow1:hover .hprowtext { margin-bottom:-50px; 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; } }