@font-face {font-family: 'sfIcon';src: url('fonts/sfIcon.woff') format('woff');font-weight: normal;font-style: normal;} @keyframes glow {0% {opacity:0;} 10% {opacity:1;} 20% {opacity:0;} 100% {opacity:0;}} @-webkit-keyframes glow {0% {opacity:0;} 5% {opacity:1;} 50% {opacity:0;} 100% {opacity:0;}} html {height: 100%;} body {height: 100%;margin: 0;padding: 0;font: 100%/1.5 sans-serif;} a {display: block;text-decoration: none;color: rgb(150,0,0);margin-top: 1.5em;} p {line-height: 1.5em;margin: 0;} .allCards #singleCardViewer {display: none;} .allCards #allCardsViewer {display: block;} .singleCard #allCardsViewer {display: none;} .singleCard #singleCardViewer {display: block;} #allCardsViewer {width: 100%;height: 100%;} .card {width: 20em;max-width: 80%;padding: 1em;padding-left: 1.5em;padding-right: 1.5em;background-color: #eeeeec;border-radius: 1em;box-shadow: 0 0 1em rgba(0,0,0,.5);cursor: pointer;} #allCardsViewer .card {display: inline-block;margin: 1em;vertical-align: top;} .card div,.card img {pointer-events: none;} #singleCard {position: relative;left: 50%;margin-top: 2em;width: 80%;max-width: 40em;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);} .card div.label {font-weight: normal;font-size: .8em;opacity: .5;} .card .relevance {margin: 0;font-size: .8em;opacity: .8;} .card .topic {font-size: .8em;opacity: .8;} .card .copyright,.card .author {font-size: .5em;opacity: .4;} .card .copyright::before {content: "© ";} .card .issue {font-style: italic;} .card .title {margin-top: 1em;border-top: 1px rgba(0,0,0,.5) solid;color: black;font-weight: bold;} .card .usecase,.card .actors {margin-top: 1em;} .card .url {pointer-events: auto;} .card img {width: 100%;} p.author {font-style: italic;color: rgba(0,0,0,.5);margin: 0;margin-top: 1.5em;} #switchIcon {display: none;z-index: 100;position: absolute;left: 50%;top: 50%;font-size: 2em;padding: 0;margin: 0;line-height: 1em;height: 1em;opacity: 1;-webkit-transform: translate(-50%,0%);-moz-transform: translate(-50%,0%);-ms-transform: translate(-50%,0%);-o-transform: translate(-50%,0%);transform: translate(-50%,0%);-webkit-animation: glow 4s ease-out infinite;-moz-animation: glow 4s ease-out infinite;-o-animation: glow 4s ease-out infinite;animation: glow 4s ease-out infinite;pointer-events: none;} #switchIcon::before {border-radius: .5em;box-shadow: 0 0 .25em rgba(255,255,255,.3);background-color: rgba(255,255,255,.3);font-style: normal;font-family: 'sfIcon';color: rgba(255,0,0,.8);} #switchIcon.next::before {content: '\f120';} #switchIcon.previous::before {content: '\f122';} #switchIcon.last::before {content: '\f121';} #switchIcon.first::before {content: '\f123';}