/* CSS Document */ .mosaic{width: 100%; margin: 0 auto; padding: 0; max-width: 1300px; } .mosaic h2 { margin-left:20px;} #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: 33%; height: auto !important; min-height: 260px; max-height: 260px; overflow: hidden; float: left; background: #FFF; font-family: "Work Sans", Arial, sans-serif; font-size: 1.0em; line-height:1.1em; color: #FFF; margin: 0%; } #hpboxes .hprow1 h3, #hpboxes .hprow2 h3 { font-family: "Work Sans", Arial, sans-serif;position: relative; top:0px; height: 10px;margin: 0px 0px 48px 0px; padding: 10px 10px 60px 10px; z-index: 31; font-size: 2.0em; line-height:1.0em; color: #FFFFFF; } #hpboxes .hprow1 .hovtext, #hpboxes .hprow2 .hovtext { padding: 10px; color: #FFFFFF; } #hpboxes .hprow1 a.hov, #hpboxes .hprow2 a.hov { margin: 0px;padding: 10px;font-family: "Work Sans", Arial, sans-serif; font-size: 1.0em; line-height:1.1em; color: #fff; display:block; background-image:url(https://www.bard.edu/images/tints/60white.png) !important; background-repeat:repeat; background-position:0 0; height: 260px; } #hpboxes .hprow2 a.hov:hover, #hpboxes .hprow2 a.hov:active { text-decoration: none;} body.drpb #hpboxes .hprow1 .hov, body.drpb #hpboxes .hprow2 .hov { background: none !important; } #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:-260px; border-radius:0px; padding: 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/60white.png) !important; background-repeat:repeat; background-position:0 0; height: 400px; } #hpboxes .hprow2 a:hover, #hpboxes .hprow2 a:active { text-decoration: none;} body.drpb #hpboxes .hprow1 .hov, body.drpb #hpboxes .hprow2 .hov { background: none !important; } #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: 50%; height: auto !important; min-height: 240px; max-height: 500px; overflow: visible; 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; } #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 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.0em; line-height:1.1em; color: #fff; display:block; background-image:url(https://www.bard.edu/images/tints/60white.png) !important; background-repeat:repeat; background-position:0 0; height: 260px;} #hpboxes .hprow2 a:hover, #hpboxes .hprow2 a:active { text-decoration: none;} body.drpb #hpboxes .hprow1 .hov, body.drpb #hpboxes .hprow2 .hov { background: none !important; } #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:-200px; border-radius:0px;} #hpboxes .hprow1:hover .hprowtext { margin-bottom:-90px; 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; } }