/* FONTS */ /* im-fell-english-sc-regular - latin */ @font-face { font-family: 'IM Fell English SC'; font-style: normal; font-weight: 400; src: url('../fonts/im-fell-english-sc-v10-latin-regular.eot'); /* IE9 Compat Modes */ src: local('IM FELL English SC'), local('IM_FELL_English_SC'), url('../fonts/im-fell-english-sc-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/im-fell-english-sc-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/im-fell-english-sc-v10-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/im-fell-english-sc-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/im-fell-english-sc-v10-latin-regular.svg#IMFellEnglishSC') format('svg'); /* Legacy iOS */ } /* im-fell-great-primer-regular - latin */ @font-face { font-family: 'IM Fell Great Primer'; font-style: normal; font-weight: 400; src: url('../fonts/im-fell-great-primer-v10-latin-regular.eot'); /* IE9 Compat Modes */ src: local('IM FELL Great Primer Roman'), local('IM_FELL_Great_Primer_Roman'), url('../fonts/im-fell-great-primer-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/im-fell-great-primer-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/im-fell-great-primer-v10-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/im-fell-great-primer-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/im-fell-great-primer-v10-latin-regular.svg#IMFellGreatPrimer') format('svg'); /* Legacy iOS */ } /* im-fell-great-primer-italic - latin */ @font-face { font-family: 'IM Fell Great Primer'; font-style: italic; font-weight: 400; src: url('../fonts/im-fell-great-primer-v10-latin-italic.eot'); /* IE9 Compat Modes */ src: local('IM FELL Great Primer Italic'), local('IM_FELL_Great_Primer_Italic'), url('../fonts/im-fell-great-primer-v10-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/im-fell-great-primer-v10-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/im-fell-great-primer-v10-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/im-fell-great-primer-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/im-fell-great-primer-v10-latin-italic.svg#IMFellGreatPrimer') format('svg'); /* Legacy iOS */ } body { font-family: 'IM Fell Great Primer'; } h1, h2, h3, h4, h5 { font-family: 'IM Fell English SC' } div.collection_container { display: flex; flex-wrap: wrap; } div.collection { background-color: #1f1f1f; border: #444 2px solid; margin: 4px; } @media only screen and (min-width: 1000px) { div.collection { width: calc(33.3333% - 8px); } } @media only screen and (min-width: 600px) and (max-width: 999px) { div.collection { width: calc(50% - 8px); } } @media only screen and (max-width: 599px) { div.collection { width: calc(100% - 8px); } } div.collection h1 { margin: 10px; text-align: center; } div.collection div.col-desc { padding: 10px; text-align: justify; } section.cta h2 { color: #1f1f1f; } /* Slide in stuff */ .col-img-container { position: relative; } .col-image { display: block; width: 100%; height: auto; } .col-img-desc { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(51, 51, 51, 0.4); overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .col-img-container:hover .col-img-desc { height: 50%; } .col-img-desc div { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }