/*------------------------------------*\ PERFUNDO WITH ICONS
\*------------------------------------*/
/** CONTENTS VARIABLES........... IMPORT.............. */
/*------------------------------------*\ $VARIABLES
\*------------------------------------*/
/*------------------------------------*\ $IMPORT
\*------------------------------------*/
/*------------------------------------*\ PERFUNDO
\*------------------------------------*/
/** CONTENTS VARIABLES........... OVERLAY............. CONTROLS............ ANIMATIONS.......... */
/*------------------------------------*\ $VARIABLES
\*------------------------------------*/
/*------------------------------------*\ $OVERLAY
\*------------------------------------*/
.perfundo__overlay { position: fixed; top: 0; left: 0; display: none; width: 100%;    z-index: 9999999; height: 100%; background: rgba(0, 0, 0, 0.9); }
.perfundo__overlay:before { position: absolute; top: 5em; right: 3.5em; bottom: 5em; left: 3.5em; background-position: center center; background-size: contain; background-repeat: no-repeat; content: ''; -webkit-animation: 0.4s ease-out 0.2s both; animation: 0.4s ease-out 0.2s both; }
.perfundo__overlay:target { display: block; }
.perfundo__overlay:target:before { -webkit-animation-name: perfundo-fade-in-zoom; animation-name: perfundo-fade-in-zoom; }

/*------------------------------------*\ $CONTROLS
\*------------------------------------*/
.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;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 32 32" xml:space="preserve"><path fill="#fff" d="M21.7 10.3c-0.4-0.4-1-0.4-1.4 0l-4.3 4.3-4.2-4.2c-0.4-0.4-1-0.4-1.4 0-0.4 0.4-0.4 1 0 1.4l4.2 4.2-4.3 4.3c-0.4 0.4-0.4 1 0 1.4 0.4 0.4 1 0.4 1.4 0l4.3-4.3 4.2 4.2c0.4 0.4 1 0.4 1.4 0 0.4-0.4 0.4-1 0-1.4l-4.2-4.2 4.3-4.3C22.1 11.3 22.1 10.7 21.7 10.3zM16 0C7.2 0 0 7.2 0 16s7.2 16 16 16c8.8 0 16-7.2 16-16S24.8 0 16 0zM16 30C8.3 30 2 23.7 2 16S8.3 2 16 2s14 6.3 14 14S23.7 30 16 30z"/></svg>'); }

.perfundo__prev, .perfundo__next { top: 50%; margin-top: -1.5em; opacity: 0.2; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="44.1" height="94.7" viewBox="0 0 44.1 94.7" enable-background="new 0 0 44.088 94.67" xml:space="preserve"><path fill="#fff" d="M44.1 47.3L1.5 94.7 0 93.3l41.4-46L0 1.3 1.5 0 44.1 47.3z"/></svg>'); }
.perfundo__prev:hover, .perfundo__prev:focus, .perfundo__next:hover, .perfundo__next:focus { opacity: 1; }

.perfundo__prev { left: 1em; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.perfundo__next { right: 1em; }

.perfundo__untarget { position: fixed; top: 0; }

/*------------------------------------*\ $ANIMATIONS
\*------------------------------------*/
@-webkit-keyframes perfundo-fade-in-zoom { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }

/*------------------------------------*\ $ANIMATIONS
\*------------------------------------*/
@keyframes perfundo-fade-in-zoom { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }

/*# sourceMappingURL=perfundo-icons.css.map */