.perfundo__overlay { display: -webkit-box; display: -ms-flexbox; display: flex; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(0, 0, 0, .9) } .perfundo__overlay.is-active, .perfundo__overlay:target { visibility: visible } .perfundo__content { max-height: 100%; overflow: auto } .is-active>.perfundo__content, :target>.perfundo__content { -webkit-animation: .4s ease-out .2s both; animation: .4s ease-out .2s both; -webkit-animation-name: inherit; animation-name: inherit } .perfundo__html { padding: 2em; max-width: 42em; background-color: #fff } .perfundo__figure { display: none; margin: 1.5em } .is-active>.perfundo__figure, :target>.perfundo__figure { display: block } .perfundo__figure img { display: block; height: 0 } .perfundo__figcaption { color: #fff } .perfundo__image { max-width: 100%; background-size: 100% } .perfundo__control { position: absolute; width: 3em; height: 3em; background-position: center center; background-size: cover; text-indent: -999em } .perfundo__close { top: 1em; right: 1em; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21.7%2010.3c-0.4-0.4-1-0.4-1.4%200l-4.3%204.3-4.2-4.2c-0.4-0.4-1-0.4-1.4%200-0.4%200.4-0.4%201%200%201.4l4.2%204.2-4.3%204.3c-0.4%200.4-0.4%201%200%201.4%200.4%200.4%201%200.4%201.4%200l4.3-4.3%204.2%204.2c0.4%200.4%201%200.4%201.4%200%200.4-0.4%200.4-1%200-1.4l-4.2-4.2%204.3-4.3C22.1%2011.3%2022.1%2010.7%2021.7%2010.3zM16%200C7.2%200%200%207.2%200%2016s7.2%2016%2016%2016c8.8%200%2016-7.2%2016-16S24.8%200%2016%200zM16%2030C8.3%2030%202%2023.7%202%2016S8.3%202%2016%202s14%206.3%2014%2014S23.7%2030%2016%2030z%22%2F%3E%3C%2Fsvg%3E) } .perfundo__prev { left: 2em; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .perfundo__next { right: 2em } .perfundo__untarget { position: fixed; top: 0 } .perfundo__next, .perfundo__prev { top: 50%; margin-top: -1.5em; opacity: .2; -webkit-transition: opacity .2s; transition: opacity .2s; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2244.1%22%20height%3D%2294.7%22%20viewBox%3D%220%200%2044.1%2094.7%22%20enable-background%3D%22new%200%200%2044.088%2094.67%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M44.1%2047.3L1.5%2094.7%200%2093.3l41.4-46L0%201.3%201.5%200%2044.1%2047.3z%22%2F%3E%3C%2Fsvg%3E) } .perfundo__next:focus, .perfundo__next:hover, .perfundo__prev:focus, .perfundo__prev:hover { opacity: 1 } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .perfundo__link { color: inherit !important; } .perfundo__overlay { z-index: 9999 !important; } .perfundo__image { background-size: contain !important; background-position: center !important; width: 800px !important; padding-top: 62.6% !important; background-repeat: no-repeat !important; } .perfundo__caption { text-align: center; }