.library-item {
	float: left;
	font-size: 0.8em;
	margin-bottom: 3em;
	position: relative;
}
/*
.card-click {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.card-click:hover {
	background-color: #000;
	opacity: 0.1;
}
*/
.library-item .card {
	height: 280px;
	position: relative;
}
.library-item .card:hover, .library-item .card:hover span i a {
	color: #FFF;
	cursor: pointer;
}
.library-item h4 {
    font-size: 20px;
    font-weight: 600;
}
.library-item .card span {
	font-size: 4em;
	position: absolute;
	right: 5%;
	bottom: 5%;
}
#library-item-end {
	clear: both;
}
.warning {
	text-align: center;
	margin: 1em 16%;
	padding: 3em;
	width: 67%;
	border: 2px solid #c7e3ff;
	border-radius: 10px;
	background-color: #eef6fe;
	font-size: 1.1em;
}

/* overwrite */
.about .content .read-more {
	margin-top: 1em;
}
/* general styling extra's */
html {
	scroll-behavior: smooth;
}
p.image-container {
	text-align: center;
}
p.image-container img {
	width: 75%;
	max-width: 600px;
	margin: 5em auto;
}
img.email {
	height: 1.2em;
	vertical-align: middle;
	margin: 0px 3px 2px;
}
/* home page, animated logo */
#logo {
	position: relative;
	width: 400px;
	height: 400px;
}
#logo.flipped {
	transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg);
	-webkit-transition: all 2s ease-in;
	-moz-transition: all 2s ease-in;
	-o-transition: all 2s ease-in;
	transition: all 2s ease-in;
	}
#logo.flippedAgain {
	transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg);
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;
	}
#logo .card {
	border-radius: 5px;
	width: 30%;
	height: 45%;
	background-color: green;
	position: absolute;
	left: calc(50% - 15%);
	top: calc(25% - 22.5%);
	-webkit-transition: all 2s ease-in;
	-moz-transition: all 2s ease-in;
	-o-transition: all 2s ease-in;
	transition: all 2s ease-in;
	}
#logo .card1.angle {
	transform:rotate(-64deg); -webkit-transform:rotate(-64deg); -moz-transform:rotate(-64deg); -o-transform:rotate(-64deg);
	left: calc(50% - 15% - 17%);
	top: calc(25% - 22.5% + 8%);
}
#logo .card2.angle {
	transform:rotate(-48deg); -webkit-transform:rotate(-48deg); -moz-transform:rotate(-48deg); -o-transform:rotate(-48deg);
	left: calc(50% - 15% - 14%);
	top: calc(25% - 22.5% + 6%);
}
#logo .card3.angle {
	transform:rotate(-32deg); -webkit-transform:rotate(-32deg); -moz-transform:rotate(-32deg); -o-transform:rotate(-32deg);
	left: calc(50% - 15% - 10%);
	top: calc(25% - 22.5% + 4%);
}
#logo .card4.angle {
	transform:rotate(-16deg); -webkit-transform:rotate(-16deg); -moz-transform:rotate(-16deg); -o-transform:rotate(-16deg);
	left: calc(50% - 15% - 5%);
	top: calc(25% - 22.5% + 2%);
}
#logo .card6.angle {
	transform:rotate(16deg); -webkit-transform:rotate(16deg); -moz-transform:rotate(16deg); -o-transform:rotate(16deg);
	left: calc(50% - 15% + 5%);
	top: calc(25% - 22.5% + 2%);
}
#logo .card7.angle {
	transform:rotate(32deg); -webkit-transform:rotate(32deg); -moz-transform:rotate(32deg); -o-transform:rotate(32deg);
	left: calc(50% - 15% + 10%);
	top: calc(25% - 22.5% + 4%);
}
#logo .card8.angle {
	transform:rotate(48deg); -webkit-transform:rotate(48deg); -moz-transform:rotate(48deg); -o-transform:rotate(48deg);
	left: calc(50% - 15% + 14%);
	top: calc(25% - 22.5% + 6%);
}
#logo .card9.angle {
	transform:rotate(64deg); -webkit-transform:rotate(64deg); -moz-transform:rotate(64deg); -o-transform:rotate(64deg);
	left: calc(50% - 15% + 17%);
	top: calc(25% - 22.5% + 8%);
}
#logo .card360 {
	transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg);
	}
#logo .card1 {
	background-color: #83b3db;
}
#logo .card2 {
	background-color: #7fccdc;
}
#logo .card3 {
	background-color: #94cfbd;
}
#logo .card4 {
	background-color: #bdd895;
}
#logo .card5 {
	background-color: #f7f09f;
}
#logo .card6 {
	background-color: #f8d18c;
}
#logo .card7 {
	background-color: #f2bc9a;
}
#logo .card8 {
	background-color: #eea4b5;
}
#logo .card9 {
	background-color: #dc98c1;
}
/* end of animated logo */

h1 strong, h2 strong {
	color: #b2dbf9;
}
h1 strong.extrastrong, h2 strong.extrastrong {
	color: #3a77b6;
}

H1.logo a {
  text-transform: none;
}
H1.logo a strong {
	color: #FFF;
}
H1.logo a em {
	color: #C1C1C1;
	font-style: normal;
	font-weight: normal;
	font-size: 0.85em;
}
h1 img.logosub, h3 img.logosub {
	margin-left: -10px;
	margin-top: -20px;
	width: 25px;
}
h3 img.logosub {
	vertical-align: baseline;
	width: 60px;
	margin-left: 10px;
}
.contact .forkus,  .contact .joinus{
	width: 300px;
	margin: 0 auto;
}

.tableContainer {
	overflow-x: auto;
}
table {
    margin: 0 auto;
}
table thead tr td {
	font-weight: bold;
	border-bottom: 2px solid black;
    font-size: 1.1em;
    text-align: center;
}
table tr td {
	border-left: 1px solid black;
	padding: 7px 15px;
    text-align: center;
}
table tr td:first-child {
	border-left: 0px solid white;

}
table tr.even td {
    background: rgba(70, 142, 206, 0.25);
}
table thead tr td.plot {
    background-color: #FFF;
    border-left: 2px solid #333;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}
table tr.odd td.plot {
    background-color: #FFF;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
}
table tr.even td.plot {
    background: rgba(70, 142, 206, 0.66);
    border-left: 2px solid #333;
    border-right: 2px solid #333;
}
table tr:nth-child(7) td.plot {
    border-bottom: 2px solid #333;
}

#features img {
	width: 400px;
}
#features div.image {
	text-align: center;
}
#features h2 {
	margin-bottom: 2em;
}
.about-training {
	color: black;
	margin-top: 2.5em;
}
.about .content .read-more.action:hover {
    background: linear-gradient(180deg, #f15b27 0%, #f15b27 100%);
}
.about .content .read-more.action {
    background: linear-gradient(180deg, #f15b27 0%, #f15b27 100%);
}
.about-extra {
	margin-top: 3em;
	font-size: 0.85em;
}
.about-extra .order-1 p:last-child {
	margin-bottom: 2em;
}
.about-extra div.col-lg-6 p:first-of-type {
	margin-top: 1em;
}
.about-extra h4 {
	border-bottom: 2px solid #b2dbf9;
	color: #b2dbf9;
	font-size: 1.2em;
	text-transform: uppercase;
	padding: 0.5em 0em;
}
.about-created-img {
	text-align: center;
}
.about-extra img {
  max-width: 90%;
  border-radius: 50%;
  margin: 10px;
}
.about-extra .social-links {
	text-align: center;
}
.about-extra .content a.read-more {
	font-size: 12px;
	padding: 5px 5% 5px 5%;
}
.about-extra .content.content-link {
	text-align: center;
}
.about-extra .content.content-link a {
	margin-top: 0px;
}
.about-extra .social-links a {
	font-size: 24px;
  display: inline-block;
  line-height: 1;
  padding: 6px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
	background-color: #0f71d4;
	color: white;
}
.social-link a {
	background-color: #0f71d4;
}
.about-extra .social-links a:hover, .social-link a:hover {
	background-color: rgb(15, 113, 212, 0.7);
}
/* fix links in faq */
div.faq-list div.show p a {
	display: inline;
	padding: 0px;
}
/*-----
# deckLoader
----*/
#deckLoader {
	position: fixed;
	top: 0px;
	bottom: 0px;
	background-color: white;
	opacity: 0.9;
	color: black;
	width: 100%;
	text-align: center;
}
#deckLoader.inactive {
	display: none;
}
.loaderContent {
	margin: 0 auto;
	padding-top: 50vh;
	display: inline-block;
	font-size: 2em;
}
.loaderContent div {
	display: inline-block;
}

/*--------------------------------------------------------------
# Splide glider
--------------------------------------------------------------*/
#splide {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999!important;
    background-color: #000;
		display: none;
}
#splide.showStart {
	  display: block;
		opacity: 0;
		transition: 0.5s;
}
#splide.showFull {
	  display: block;
		opacity: 0.99;
}
#allCards {
	display: none;
}
.splide__track {
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.splide__slide {
    width: 50%;
}
.splide__track  div.card {
	/*
    margin: 0 auto;
    min-height: 100vh;
    width: 50%;
    border-radius: 15px;
  */
	/*
	width: 50%;
	border-radius: 15px;
	position: absolute;
	margin: 0 25%;
	top: 0px;
	bottom: 0px;
	*/
	margin: 0 auto;
	top: 0px;
	height: 100%;
	border-radius: 15px;
	position: relative;
	width: 50%;
	max-width: 900px;
}
// Active Slide
.splide__slide.is-active {
  img {
    transform: scale(1);
  }
}

/* we don't want to display the navigation, but we do want to keep it,
so we can use it to trigger going to the correct card */
#splide ul.splide__pagination {
	display: none;
}

// Arrow Tweaks for Accessibility
.splide .splide__arrow {
  top: 0;
  bottom: 0;
  height: 100%;
  transform: none;
  border-radius: unset;
  width: 50px;
  opacity: .9;
  svg {
    filter: invert(1);
    width: 24px;
    height: 24px;
  }
}
.splide__arrow.splide__arrow--prev {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
}
.splide__arrow.splide__arrow--next {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
}
#splide__close {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: transparent;
    border-width: 0px;
    color: white;
    font-size: 1.5em;
    margin: 5px 10px;
    cursor: pointer;
    z-index: 9999;
}
#splide__close:hover {
    color: red;
}

.portfolio #portfolio-flters li {
	padding: 12px 34px;
	font-size: 1.2em;
}
.mobileText {
	display: none;
}

/* Libary */
div#phases-and-categories {
	width: 800px;
	height: 800px;
	border: 1px solid red;
	display: inline-block;
	margin: 0 auto;
}

/*--------------------------------------------------------------
# Sources
--------------------------------------------------------------*/
#sources ul {
	margin-left: 20px;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.youtube {
	background-color: #000;
	max-width: 560px;
	height: 315px;
	text-align: center;
}
.youtube button {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	display: inline-block;
	padding: 10px 28px;
	border-radius: 5px;
	transition: 0.5s;
	margin-top: 25%;
	color: #fff;
	border: 2px solid #fff;
	background-color: #111;
}
.youtube button:hover {
	background-color: #333;
}
.youtube.hide {
	display: none;
}
div.paragraph {
	margin-top: 0;
	margin-bottom: 1rem;
}
/*--------------------------------------------------------------
# Overwrite colours
--------------------------------------------------------------*/
#hero {
	background: linear-gradient(45deg, rgba(96, 168, 232, 0.9) 0%, rgba(66, 138, 202, 0.9) 100%), url("../img/hero-bg.jpg") center center no-repeat;
	background-size: cover;
}
#footer {
  background: linear-gradient(45deg, rgba(96, 168, 232, 0.9) 0%, rgba(66, 138, 202, 0.9) 100%), url("../img/hero-bg.jpg") center center no-repeat;
	background-size: cover;
}

/*--------------------------------------------------------------
# Card Game
--------------------------------------------------------------*/
p.note {
	font-size: 0.8em;
	margin: 1em 0;
}
#card-game-order h5 {
	margin: 1.5em 0 0.75em;
}

/*--------------------------------------------------------------
# How does it work
	background-color: white;
	--------------------------------------------------------------*/
#howto .row .icon-box {
	background-color: white;
}
#howto .row .icon-box img {
	width: 80%;
	margin: 10%;
}
#howto .row .icon-box .footer-img {
	height: 275px;
}
#howto .row .icon-box p {
	margin: 0% 10%;
	text-align: center;
	line-height: 24px;
	height: 144px;
}
#howto {
	padding-top: 100px;
}
.howto {
	padding: 50px 0px 0px;
}
#xx-number {
	position: absolute;
  left: 50%;
  margin-left: 5px;
  font-size: 48px;
  font-weight: 900;
  color: #FFFFFF;
  top: 100px;
}
@media (max-width: 767px) {
	#xx-number {
  	font-size: 64px;
		top: 130px;
	}
}
video {
	width: 100%;
	max-width: 640px;
}
section#howto_benefits {
	padding-bottom: 2em;
}
section#howto-lc > div {
	margin-top: 2em;
}
section#howto-lc > div h3, section#howto-lc > div h4 {
	margin-top: 1em;
}

table#category-overview, table#dlc-overview {
	width: 70%;
	margin: 50px auto;
	background-color: #FFF;
	border-radius: 1em;
}
table#category-overview tr th {
	font-style: italic;
	padding: 1em 0 0.5em 0.5em;
}
table#category-overview tr th:first-child, table#category-overview tr td:first-child {
	max-width: 1em;
}

@media (max-width: 767px) {
	table#category-overview tr td:first-child {
		padding-left: 0px;
		padding-right: 0px;
	}
}

table#category-overview tr td, table#dlc-overview tr td {
	border-width: 0px;
}
table#dlc-overview tr td {
	border-bottom: 1px solid black;
	max-height: 100px;

}
table#category-overview tr td, table#dlc-overview tr td {
	text-align: left;
	font-size: 1em;
}
table#category-overview tr td:nth-child(2) {
	width: 150px;
	max-width: 150px;
	font-size: 0.9em;
	font-weight: bold;
	vertical-align: middle;
}
table#category-overview tr td:first-child, table#dlc-overview tr td:first-child {
	width: 150px;
	text-align: center;
	font-size: 0.9em;
	font-weight: bold;
}
table#category-overview tr td:nth-child(3) {
	width: 100px;
}
table#category-overview tr td:nth-child(3) img {
	height: 100px;
	margin: -7px -15px;
}
table#category-overview tr.separator td {
	height:40px;
}
table#category-overview tr.data-data-governance td:nth-child(1), table#category-overview tr.data-data-governance td:nth-child(2) {
	/* #83b3db */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(131, 179, 219, 0.5) calc(50% - 52px),
    rgb(131, 179, 219, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
				/* 	background: rgb(131, 179, 219, 0.5); */
}
table#category-overview tr.data-data-governance td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(131, 179, 219, 0.5) calc(50% - 52px),
		rgb(131, 179, 219, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
	/* 	background: linear-gradient(90deg, rgb(131, 179, 219, 0.5), #FFFFFF 50%); */
}
table#category-overview tr.transparency-accessibility td:nth-child(1), table#category-overview tr.transparency-accessibility td:nth-child(2) {
	/* #7fccdc */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(127, 204, 220, 0.5) calc(50% - 52px),
    rgb(127, 204, 220, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
}
table#category-overview tr.transparency-accessibility td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(127, 204, 220, 0.5) calc(50% - 52px),
		rgb(127, 204, 220, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
}
table#category-overview tr.privacy-data_protection td:nth-child(1), table#category-overview tr.privacy-data_protection td:nth-child(2) {
	/* #94cfbd */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(148, 207, 189, 0.5) calc(50% - 52px),
    rgb(148, 207, 189, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
}
table#category-overview tr.privacy-data_protection td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(148, 207, 189, 0.5) calc(50% - 52px),
		rgb(148, 207, 189, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
}
table#category-overview tr.cybersecurity td:nth-child(1), table#category-overview tr.cybersecurity td:nth-child(2) {
	/* #bdd895 */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(189, 216, 149, 0.5) calc(50% - 52px),
    rgb(189, 216, 149, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
}
table#category-overview tr.cybersecurity td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(189, 216, 149, 0.5) calc(50% - 52px),
		rgb(189, 216, 149, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
}
table#category-overview tr.safety-environmental_impact td:nth-child(1), table#category-overview tr.safety-environmental_impact td:nth-child(2) {
	/* #f7f09f */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(247, 240, 159, 0.5) calc(50% - 52px),
    rgb(247, 240, 159, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
}
table#category-overview tr.safety-environmental_impact td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(247, 240, 159, 0.5) calc(50% - 52px),
		rgb(247, 240, 159, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
}
table#category-overview tr.bias-fairness-discrimination td:nth-child(1), table#category-overview tr.bias-fairness-discrimination td:nth-child(2) {
	/* #f8d18c */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(248, 209, 140, 0.5) calc(50% - 52px),
    rgb(248, 209, 140, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
}
table#category-overview tr.bias-fairness-discrimination td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(248, 209, 140, 0.5) calc(50% - 52px),
		rgb(248, 209, 140, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
}
table#category-overview tr.ethics-human_rights td:nth-child(1), table#category-overview tr.ethics-human_rights td:nth-child(2) {
	/* #f2bc9a */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(242, 188, 154, 0.5) calc(50% - 52px),
    rgb(242, 188, 154, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
}
table#category-overview tr.ethics-human_rights td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(242, 188, 154, 0.5) calc(50% - 52px),
		rgb(242, 188, 154, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
}
table#category-overview tr.accountability-human_oversight td:nth-child(1), table#category-overview tr.accountability-human_oversight td:nth-child(2) {
	/* #eea4b5 */
	background: linear-gradient(to bottom,
    transparent calc(50% - 52px),
    rgb(238, 164, 181, 0.5) calc(50% - 52px),
    rgb(238, 164, 181, 0.5) calc(50% + 48px),
    transparent calc(50% + 48px));
}
table#category-overview tr.accountability-human_oversight td:nth-child(3) {
	background: linear-gradient(to bottom,
		transparent calc(50% - 52px),
		rgb(238, 164, 181, 0.5) calc(50% - 52px),
		rgb(238, 164, 181, 0.5) calc(50% + 48px),
		transparent calc(50% + 48px))
      left / 50% 100% no-repeat;
}
table#category-overview tr td:nth-child(4), table#category-overview tr td:nth-child(5) {
	border-top: 1px solid black;
	vertical-align: top;
}
table#category-overview tr td {
	padding-bottom: 10px;
}
table#dlc-overview tr td:first-child img {
	width: 50px;
}
table#dlc-overview tr td {
	font-size: 1.2em;
}
table#dlc-overview tr td:first-child {
	border-right: 1px solid black
}
.lifecycle-box {
	background-color: white;
	border-radius: 1em;
	height: 120px;
	margin: 1em;
	overflow: hidden;
}
.lifecycle-box .lc-number, .lifecycle-box img {
	float: left;
}
.lifecycle-box .lc-explanation {
	margin-left: 140px;
	padding: 0.5em;
	font-size: 0.9em;
}
@media (max-width: 767px) {
	.lifecycle-box .lc-explanation {
		height: 120px;
		overflow-y: auto;
	}
}
.lifecycle-box .lc-number {
	background-color: #b2dbf9;
	width: 50px;
	text-align: center;
	line-height: 120px;
}
.lifecycle-box img {
	line-height: 120px;
	max-height: 80px;
	margin: 20px;
}
.lifecycles img {
	width: 90%;
	margin: 1em 0 2em;
}
.quick-tips {
	padding: 1em;
	background-color: #ffffff;
	border-radius: 1em;
	margin: 0em;
}
.quick-tips div {
	margin-bottom: 1em;
}
.quick-tips img {
	float: left;
	width: 50px;
	margin-right: 1em;
}
.instruction-box {
	background-color: #5da6db;
	border-radius: 1em;
	margin: 1em 0;
	height: 100%;
}
.instruction-box .instruction-header {
	padding: 1em 3em;
	background-color: #ffffff;
	border-top-right-radius: 1em;
	border-top-left-radius: 1em;
	text-transform: uppercase;
}
.instruction-box .instruction-content {
	padding: 1em 3em;
}
#howto_benefits .row div.benefit-box {
	background-color: #d6e4f5;
	height: 100%;
	padding: 1em 2em;
	border-radius: 1em;
	text-align: center;
}
.benefit-focus {
	margin: 1em auto;
	border-radius: 50%;
	width: 150px;
	height: 150px;
	background-color: #ffffff;
	text-align: center;
	background-image: url(/assets/img/plot4ai-logo-text-small.png);
	background-position: 50% 10%;
	background-repeat: no-repeat;
	background-size: 80px;
}
.benefit-focus p {
	padding-top: 40%;
	color: #5da6db;
	text-transform: uppercase;
	font-size: 0.85em;
	font-weight: bold;
}
#howto_dlc ul li {
	font-size: 0.8em;
}
#howto_dlc ul {
	list-style-type: none
}
#plotImplementation table {
	margin: 30px auto;
}
img.illustration {
	width: 500px;
	max-width: 75%;
	display:block;
	margin: 10px auto;
}
img.illustration-card {
	width: 700px;
	max-width: 95%;
}
blockquote {
	font-size: 1.3em;
	color: #AAA;
	width: 50%;
	margin: 2em auto;
	font-style: italic;
}
blockquote em {
	font-style: normal;
	font-size: 0.8em;
}
section#howto, section#downloads {
	padding-bottom: 0px;
}
#dl-carddeck h3 img {
	margin-top: 3em;
}
#dl-carddeck .row img {
	border-radius: 20px;
}
div.section-title p.title-quote {
	width: 650px;
	max-width: 75%;
	margin: 1em auto;
}
section#howto_tac div.row {
	margin-top: 30px;
	margin-bottom: 30px;
}

/*--------------------------------------------------------------
# References
--------------------------------------------------------------*/
section#references-title {
	padding-bottom: 30px;
}

/*--------------------------------------------------------------
# Library
--------------------------------------------------------------*/
p.image-container img {
	margin: 0 auto;
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card {
	border-radius: 10px;
	padding: 50px 25px;
	text-align: center;
	font-size: 1em;
	font-weight: 550;
	color: #000;
}
.portfolio-wrap {
	border-radius: 10px;
}
.card-cat1 {
	background-color: #83b3db;
}
.card-cat2 {
	background-color: #7fccdc;
}
.card-cat3 {
	background-color: #94cfbd;
}
.card-cat4 {
	background-color: #bdd895;
}
.card-cat5 {
	background-color: #f7f09f;
}
.card-cat6 {
	background-color: #f8d18c;
}
.card-cat7 {
	background-color: #f2bc9a;
}
.card-cat8 {
	background-color: #eea4b5;
}
.card-cat9 {
	background-color: #dc98c1;
}
.card-cat10 {
	background-color: #a88cbd;
}
.splide__slide .card {
	padding: 0px;
}
.card .section1, .card .section2, .card .section4 {
	position:relative;
	padding: 10px 40px;
}
.card .section4 {
	padding: 20px 40px;
}
.card .recommendation_title h4 {
	margin-top: 0.5em;
	font-size: 2.5em;
}
.card .recommendation, .card .card_references {
	background-color: rgba(255, 255, 255, 0.3);
}
.card .card_references_title h4 {
	margin-top: 0.5em;
}
.card .card_references.empty_references {
	background: none;
}
.card .section3, .card .section4, .card .recommendation, .card .card_references {
	position:relative;
	padding: 20px 40px 20px 40px;
	background-repeat: no-repeat;
	background-size: 80px;
	background-position: 20px 50%;
}
.card .section3 {
	padding-top: 30px;
}
.card.card-cat4 .section3 {
	padding-bottom: 70px;
}
.card .section3 .cia {
	position: absolute;
  bottom: 5px;
  text-align: left;
  opacity: 0.3;
}
.card .section3 .cia span {
	border: 2px solid black;
	margin: 8px 10px 0px 0px;
	padding: 5px 10px;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
}
.card .section1 {
	height: 12vh;
}
.card .section4 {
	min-height: 10vh;
	color: white;
	background-color: rgba(0, 0, 0, 0.2);
}
.card .section4 p.yes {
	font-size: 1.75em;
}
.card .section4 p.maybe {
	font-size: 1.5em;
}
.card .section1 {
	max-height: 90px;
}
.card .section1_5 {
	background-color: rgba(255, 255, 255, 0.6);
	opacity: 0.5;
	line-height: 2.5em;
}
.card .section2 {
	min-height: 15vh;
	font-size: 1.8em;
	padding-bottom: 25px;
}
.card .section3 p, .card .recommendation p, .card .card_references div {
	text-align: justify;
	font-size: 1em;
}
.card .section3 ul, .card .recommendation ul, .card .card_references ul {
	text-align: left;
	font-size: 1em;
}
.card .section3 h4, .card .recommendation h4, .card .card_references h4 {
	text-align: center;
	margin-bottom: 1.1em;
	font-size: 1.2em;
	font-weight: 600;
}
.card .recommendation h4 {
	margin-top: 0px;
	padding-top: 10px;
}
.card .section3, .card .card_faq, .card .recommendation, .card .card_references {
	min-height: 27.5vh;
	max-height: 50vh;
	overflow-y: auto;
}
.card .section3, .card .recommendation {
	border-bottom: 1px dashed #333;
}
.card .section2, .card .card_faq {
	background-color: white;
}
.card .section1 .phase_icons {
	float: right;
	text-align: right;
}
.card .section1 .category_icons {
	float: left;
	text-align: left;
}
.card .section1 .phase_icons img, .card .section1 .category_icons img {
	opacity: 0.33;
	height: 8vh;
	max-height: 60px;
	margin: 0px 0.4vw;
}
.card .bg:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-repeat: no-repeat;
  background-position: 50px 200px;
}
.card.card-cat1 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_data-data_governance.svg);
}
.card.card-cat2 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_transparency-accessibility.svg);
}
.card.card-cat3 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_privacy-data_protection.svg);
}
.card.card-cat4 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_cybersecurity.svg);
}
.card.card-cat5 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_safety-environmental_impact.svg);
}
.card.card-cat6 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_bias-fairness-discrimination.svg);
}
.card.card-cat7 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_ethics-human_rights.svg);
}
.card.card-cat8 .bg:before {
	background-image: url(/assets/img/backgrounds/bg_accountability-human_oversight.svg);
}
.card .inactive_section {
	display: none;
}
button.flipper {
	position: absolute;
	height: 30px;
	width: 30px;
	bottom: 5px;
	left: 50%;
	margin-top: 15px;
	margin-left: -15px;
	cursor: pointer;
	background-image: url(/assets/img/icons/phone-flip.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: transparent;
	border-width: 0px;
	z-index: 9999;
}
img.flipper {
	vertical-align: baseline;
}
.card .threatIf {
	padding: 2px 10px;
	background: rgba(0,0,0,0.15);
	border-radius: 7px;
	font-weight: 750;
}


/****
 * games
 */

/* initial game status */
#yesno-gameboard {
	display: none;
}
#select-yes-no, #start-yes-no {
	display: none;
}
#start-yes-no button, #yesno-cards button {
	border: 1px solid #3a78b6;
	padding: 5px 20px;
	background-color: #5499d0;
	border-radius: 5px;
	color: #FFF;
}
.big-button {
	font-size: 2em;
	padding: 10px 40px;
	display: block;
	margin: 100px auto;
}
#yesno-categories, #yesno-dlcs {
	padding-left: 0;
}
#toggle-yesno {
	margin: 5px 10px;
}
#toggle-yesno.toggle {
	opacity: 0.5;
}

/* end init */

 /* Yes-No */
ul#yesno-categories, ul#yesno-dlcs {
	list-style-type: none;
}
ul#yesno-categories li, ul#yesno-dlcs li {
 margin: 3px 0px;
 padding: 3px 8px;
 border-radius: 5px;
 font-size: 0.9em;
}
@media (min-width: 992px) {
	.col-lg-3 ul#yesno-dlcs li {
		width: 67%;
	}
}
@media (max-width: 991px) {
	ul#yesno-dlcs li {
		width: 50%;
	}
}
#yesno-categories li.hide {
	display: none;
}
#yesno-categories img {
	height: 1.5em;
	opacity: 1;
	margin: 0em 0.35em;
}
ul#yesno-dlcs li:nth-of-type(1) {
	background-color: #BBB;
}
ul#yesno-dlcs li:nth-of-type(2) {
	background-color: #C5C5C5;
}
ul#yesno-dlcs li:nth-of-type(3) {
	background-color: #CFCFCF;
}
ul#yesno-dlcs li:nth-of-type(4) {
	background-color: #D9D9D9;
}
ul#yesno-dlcs li:nth-of-type(5) {
	background-color: #E3E3E3;
}
ul#yesno-dlcs li:nth-of-type(6) {
	background-color: #EEE;
}
ul#yesno-dlcs img {
	width: 10%;
	margin: 0.8em 5%;
	opacity: 0.3;
}
ul#yesno-dlcs img:hover {
	cursor: pointer;
}
ul#yesno-dlcs img:hover, ul#yesno-dlcs img.active, ul#yesno-dlcs img.active.focus:hover {
	opacity: 1;
}
ul#yesno-dlcs img.active:hover, ul#yesno-dlcs img.focus:hover {
	opacity: 0.3;
}
ul#yesno-dlcs li img.disabled:hover {
	cursor:auto;
	opacity: 0.3;
}
ul#yesno-dlcs li img.active.disabled:hover {
	cursor:auto;
	opacity: 1;
}

#yesno-categories.started li {
	background-color: transparent;
}
svg.yes-no-ffwd {
	margin: 3px;
	width: 20px;
	height: 20px;
	display: none;
}
#yesno-categories.started svg.yes-no-ffwd, #yesno-quicktour svg.yes-no-ffwd {
	display: inline-block;
}
#yesno-categories.started img, #yesno-categories.started input {
	display: none;
}

#yesno-cards .category_icons {
	float: left;
}
#yesno-cards .phase_icons {
	float: right;
}
#yesno-cards .category_icons img, #yesno-cards .phase_icons img {
	margin: 0px 5px;
}
#yesno-card-response {
	width: 3em;
	text-align: center;
	font-weight: 600;
	opacity: .15;
	font-size: 1.5em;
	float: right;
	font-family: arial-bold;
	margin-right: -1em;
}
#yesno-card-body {
	clear: both;
}
#yesno-card-question {
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 3em;
	font-weight: bold;
}
#yesno-card-explanation {
	text-align: justify;
}
#yesno-quicktour {
	margin: 2em 3em;
}
#yesno-quicktour .step, #selectRoleDialog .step, #selectAiTypeDialog .step {
	padding: 2em 3em;
	background-color: rgb(93, 167, 224, 0.4);
	border-radius: 4px;
}
@media (max-width: 991px) {
	#yesno-quicktour .step, #selectRoleDialog .step, #selectAiTypeDialog .step {
		padding: 2em 1.5em;
	}
}
#yesno-quicktour .step {
	display: none;
}
#yesno-quicktour .step:after {
	content:'';
	display:block;
	clear: both;
}
#yesno-quicktour .step.active {
	display: block;
}
#selectAiTypeDialog .step-container {
	position: relative;
}
ul#yesno-tour-phase-explanation {
	list-style-type: none;
}
ul#yesno-tour-phase-explanation img {
	width: 15px;
	margin-right: 1em;
}
#select-yes-no, #start-yes-no {
	padding: 2em 3em;
	background-color: rgb(93, 167, 224, 0.4);
	border-radius: 4px;
}
button.yesno-quicktour-nextstep {
	float:right;
}
.step-container {
	height: 350px;
	overflow-y: auto;
}
#yesno-quicktour-step1 {
	text-align: center;
}
#yesno-quicktour-step1 button, button.yesno-quicktour-nextstep, #selectRoleDialog button, #selectAiTypeDialog button {
	background-color: #3a78b6;
	color: white;
	border-width: 0px;
	border-radius: 3px;
	padding: 4px 15px;
	font-weight: bold;
	font-size: 1em;
	text-transform: uppercase;
}
#selectAiTypeDialog button {
	line-height: 1.5em;
	height: 3.5em;
	width: 100%;
}
#yesno-quicktour-step1 button:hover, button.yesno-quicktour-nextstep:hover {
	background-color: #5da7e0;
}
#quick-tour-yes, #quick-tour-no, #role-dialog-deployer, #role-dialog-provider, #aitype-dialog-traditional, #aitype-dialog-generative, #aitype-dialog-both {
	width: 45%;
	text-align: center;
	padding: 2em 1.5em;
	border-radius: 4px;
	margin-top: 2em;
}
@media (max-width: 991px) {
	#quick-tour-yes, #quick-tour-no, #role-dialog-deployer, #role-dialog-provider, #aitype-dialog-traditional, #aitype-dialog-generative, #aitype-dialog-both {
		padding: 1em 0.7em;
		font-size: 0.8em;
	}
}
#quick-tour-yes, #quick-tour-no {
	border: 1px dotted #5da7e0;
	background-color: rgb(93, 167, 224, 0.5);
}
#role-dialog-deployer, #role-dialog-provider, #aitype-dialog-traditional, #aitype-dialog-generative, #aitype-dialog-both {
	border: 1px dotted #5da7e0;
	background-color: rgb(222, 222, 222, 1);
	border-radius: 5px;
}
@media (min-width: 992px) {
	#aitype-dialog-traditional, #aitype-dialog-generative, #aitype-dialog-both {
		width: 28%;
	}
}
@media (max-width: 991px) {
	#aitype-dialog-traditional, #aitype-dialog-generative, #aitype-dialog-both {
		width: 31%;
	}
}
#quick-tour-yes p, #quick-tour-no p, #role-dialog-deployer p, #role-dialog-provider p {
	line-height: 1.5em;
	min-height: 3em;
	margin-top: 1em;
}
#quick-tour-yes, #role-dialog-provider, #aitype-dialog-traditional {
	float: left;
}
#quick-tour-no, #role-dialog-deployer {
	float: right;
}
@media (min-width: 500px) {
	#aitype-dialog-both {
		float: right;
	}
	#aitype-dialog-generative {
		position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	}
}
@media (max-width: 499px) {
	#aitype-dialog-traditional, #aitype-dialog-generative, #aitype-dialog-both {
		width: 45%;
	}
	#aitype-dialog-both {
    clear: both;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
		top: 1em;
	}
	#aitype-dialog-generative {
	    float :right;
	}
}
#yesno-quicktour-step1:after {
	content:'';
	display:block;
	clear: both;
}
#yesno-quicktour-step2 ul, #yesno-quicktour-step3 ul {
	list-style-type: none;
}
#yesno-quicktour-step2 ul li i, #yesno-quicktour-step3 ul li i {
	color: #3a78b6;
}
#yesno-quicktour-step3 ul li i.bi-fast-forward-btn {
	color: black;
	font-size: 1.1em;
}
#yesno-quicktour-step4 strong, #yesno-quicktour-step6 strong {
	background-color: #3a78b6;
	color: white;
	padding: 2px 7px;
	border-radius: 3px;
	font-weight: bold;
}
#yesno-quicktour-footer {
	text-align: center;
}
#yesno-quicktour-footer ul {
	list-style-type: none;
	margin: 0 auto;
	display: inline-block;
	width: auto;
}
#yesno-quicktour-footer ul li {
	display: inline;
	font-size: 1em;
	color: #3a78b6;
	margin: 0 0.3em;
}
#yesno-quicktour-footer ul li i {
	cursor: pointer;
}
.yesno-card {
	border-radius: 10px;
	padding: 1.5em 3em;
	margin: 0px 0px 10px;
	min-height: 30em;
}
#selectRoleDialog input[type=checkbox], #selectAiTypeDialog input[type=checkbox] {
	display: none;
}
#yesno-categories svg {
	opacity: 0.4;
}
#yesno-categories svg.active {
	opacity: 1;
	cursor: pointer;
}
#yesno-stats {
	display: flex;
	clear: right;
	margin-top: 1em;
}
#yesno-stats ul {
	list-style-type: none;
	margin-top: 0.5em;
}
#yesno-stats ul li {
	max-width: 100%;
	border: 2px solid #999;
	padding: 2px 5px;
	background-color: #D1D1D1;
	color: #000;
	margin: 2px 0px;
	font-weight: bold;
	opacity: 0.5;
}
#yesno-stats ul li span {
	float: right;
}
#yesno-stat-atrisk {
	color: #F00;
}
@media (min-width: 992px) {
	.col-lg-3 .yesno-filterstats {
		margin-left: 15%;
	}
}
.col-lg-2 .yesno-filterstats {
	display: none;
}
.col-lg-2 .yesno-filterstats.tour {
	display: block;
}
.yesno-controls button, .yesno-filterstats select {
	border: 2px solid #3a78b6;
	background-color: #5da7e0;
	border-radius: 3px;
	padding: 4px 8px;
	color: #3a78b6;
	font-weight: bold;
	margin-right: 1em;
}
button.yesno-answers.selected {
	filter: brightness(50%);
}
.yesno-filterstats select {
	float: right;
	margin-right: 0px;
	width: 110px;
}
.yesno-filterstats label, .game h4 {
	font-size: 1.5em;
	font-weight: bold;
	color: #3a78b6;
}
.game h4 {
	margin-bottom: 0.8em;
}
@media (hover: hover) {
	.yesno-controls button:hover {
		border: 2px solid #5da7e0;
		background-color: #3a78b6;
		color: #5da7e0;
	}
}
.yesno-controls button.icon {
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
}
.yesno-controls button.icon i {
	font-size: 3em;
}
#yesno-gameboard .yesno-controls {
	text-align: center;
	background-color: #FFF;
  padding: 0px 10px;
  border-radius: 5px;
}
#yesno-gameboard .yesno-controls #yesno-prv {
	float: left;
}
#yesno-gameboard .yesno-controls #yesno-next {
	float: right;
	margin-right: 0px;
}
button.ctrlbutton {
	border-width: 0px;
	margin: 1em auto;
	padding: 6px 12px;
	font-size: 0.8em;
	font-weight: bold;
	width: auto;
	border-radius: 5px;
	text-transform: uppercase;
}
#report-warning button.ctrlbutton {
	font-size: 1em;
}
button#yesno-report {
	border: 1px solid #3a78b6;
}
button#start-again {
	background-color: transparent;
	border: 1px solid #3a78b6;
	color: #3a78b6;
	float: right;
}
button#yesno-continue {
	border: 1px solid #00658b;
	background-color: #00658b;
	color: #FFFFFF;
}
button#yesno-report-anyway {
	border: 1px solid #999999;
	background-color: #d1d1d1;
	color: #000000;
	opacity:0.5;
}
button#yesno-report.inactive {
	opacity: 0.25;
}
.report-feedback {
	border-radius: 5px;
	border: 1px solid #3a78b6;
	font-size: 0.85em;
  padding: 0.5em;
	background-color: white;
	display: none;
}
.report-feedback.active {
	display: block;
}
#report-warning .bi-exclamation-triangle-fill  {
	font-size: 1.5em;
	color: #f8d18c;
}
#report-warning p.buttons {
  text-align: left;
}
.report-feedback strong {
	font-size: 1.2em;
	color: #3a78b6;
}
.report-feedback strong em {
	font-style: normal;
	color: #000000;
}
.yesno-filterstats select.tour, #yesno-stats ul.tour, .yesno-controls button.icon i.tour, #yesno-report.tour {
	opacity: 0.15;
	transition: 0.25s linear all;
}
.yesno-filterstats select.tourActive, #yesno-stats ul.tourActive, .yesno-controls button.icon i.tourActive, #yesno-report.tourActive {
	opacity: 1;
	transition: 0.25s linear all;
}

/* vendor cards */
.vendor-card.hide {
	display: none;
}
.vendor-card {
	margin-top 10px;
	padding: 10px;
}
.vendor-card:nth-child(even) {
	background-color: rgb(0, 0, 0, 0.05)
}
.vendor-card textarea {
	width: 100%;
}

/* today's card */
#a-card-a-day .section-title p {
	margin-top: 2em;
	font-size: 1.5em;
}
#a-card-a-day .info {
	padding-top: 4em;
	font-size: 1em;
	opacity: 0.6;
}
#a-card-a-day .info p {
	margin-top: 1em;
}
#a-card-a-day .info .actually {
	font-size: 0.85em;
	opacity: 0.75;
}
#a-card-a-day .info img {
	margin-left: 0.3em;
	margin-right: 0.3em;
}
#todayscard #splideContainer {
	display: none;
}
#todayscard #splideContainer.show {
	display: block;
}
#todayscard #splideContainer.show .splide__slide {
	width: 100%;
}
#showtoday {
	background: #3a78b6;
	border: 0;
	padding: 10px 24px;
	color: #fff;
	transition: 0.4s;
	border-radius: 5px;
}
#showtoday:hover {
	background: #5da7e0;
}
.fliptext {
	position: absolute;
	display: block;
	height: 30px;
	bottom: 0px;
	left: 50%;
	line-height: 30px;
	opacity: 0.1;
	font-weight: 900;
	font-size: 1em;
	font-family: 'Arial Bold', sans-serif;
}
#fliptextflip {
	width: 125px;
	margin-left: -145px;
	text-align: right;
}
#fliptextcard {
	width: 125px;
	margin-left: 20px;
	text-align: left;
}
/* eof today's card */

@keyframes stretchBtn {
  0%   {font-size:3em;}
  25%  {font-size:4em;}
  50%  {font-size:3em;}
  75%  {font-size:4em;}
  100%   {font-size:3em;}
}
.yesno-controls button.icon i.tourActiveBig {
	animation-name: stretchBtn;
  animation-duration: 1s;
}
@keyframes stretchSelect {
  0%   {font-size:1em;}
  25%  {font-size:1.5em;}
  50%  {font-size:1em;}
  75%  {font-size:1.5em;}
  100%   {font-size:1em;}
}
.yesno-filterstats select.tourActiveBig {
	animation-name: stretchSelect;
  animation-duration: 1s;
}
@keyframes stretchStats {
  0%   {font-size:1em;}
  25%  {font-size:1.35em;}
  50%  {font-size:1em;}
  75%  {font-size:1.35em;}
  100%   {font-size:1em;}
}
#yesno-stats ul.tourActiveBig {
	animation-name: stretchStats;
  animation-duration: 1s;
}
@keyframes stretchReport {
  0%   {font-size:1em;}
  25%  {font-size:1.5em;}
  50%  {font-size:1em;}
  75%  {font-size:1.5em;}
  100%   {font-size:1em;}
}
#yesno-report.tourActiveBig {
	animation-name: stretchReport;
  animation-duration: 1s;
}
button#yesno-report, .yesno-filterstats select {
	background-color: #3a78b6;
	color: white;
}
button#yesno-report:hover {
	background-color: #5da7e0;
}

@media (orientation: portrait) {
    /* portrait styles */
		.splide__track div.card {
			width: 90%;
			margin: 0 5%;
		}
		.card .section1, .card .section2, .card .section4 {
			position:relative;
			padding: 5px 20px;
		}
		.card .section4 {
			padding: 10px 20px;
		}
		.card .section3, .card .section4, .card .recommendation, .card .card_references {
			position:relative;
			padding: 10px 20px 10px 60px;
			background-repeat: no-repeat;
			background-size: 50px;
			background-position: 5px 50%;
		}
		.card .section2 {
			padding-bottom: 25px;
		}
		.card .section3 {
			padding-top: 30px;
		}
		.card .section2, .card .section4 p.yes {
	    font-size: calc(1rem + 0.9vw);
		}
		.card .section4 p.maybe {
	    font-size: calc(1rem + 0.4vw);
		}
		#splide__close {
			margin: 2px 5px;
		}

		.card {
			font-size: 0.8rem
		}
		.card .section1 {
			min-height: 8vh;
		}
		.card .section1 .phase_icons img {
			opacity: 0.33;
			height: 6vh;
			margin: 0px 0.5vw;
		}
		.card .section1 .category_icons img {
			height: 4.5vh;
		}

		blockquote {
			width: 80%;
			font-size: 1.1em;
		}
}
/* smartphones, touchscreens */
@media (hover: none) and (orientation: portrait)  {
	  /* since we can swipe, we hide the buttons *
    .splide__arrow svg {
			display: none;
		}
    .splide__arrow.splide__arrow--prev, .splide__arrow.splide__arrow--next {
			background: none;
		}*/

		.card .mobileText {
			position: absolute;
			bottom: 5px;
			left: 0px;
			right: 0px;
			opacity: 0.2;
			font-size: 0.7em;
			width: 100%;
			display: block;
		}
}

@media (min-width: 550px) {
	.about-created-img {
		float: left;
	  width: 30%;
	}
	.about-extra div.col-lg-6 p:first-of-type {
		margin-bottom: 0em;
	}
}
@media (min-width: 768px) {
	.library-item {
		width: 330px;
	}
}
@media (max-width: 500px) {
	#yesno-quicktour {
		margin: 1em 0.5em;
	}
	#yesno-quicktour .step {
		padding: 1em;
	}
	.yesno-card {
		padding: 1.5em 1.5em;
	}
	#yesno-card-question {
		text-align:left;
	}
	button.yesno-quicktour-nextstep {
		margin-top: 0.5em;
	}
}

@media (max-width: 991px) {
	.yesno-horizontal {
		display: none;
	}
}
@media (min-width: 992px) {
	.yesno-vertical {
		display: none;
	}
}


/**
 * animations
 */
/* used to bounce the flip-icon on the cards */
.animation-bounce{
    animation-name: bounce;
    animation-duration: 1s;
}
@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    30%{
        transform: translateY(-70px);
    }
    50%{
        transform: translateY(5px);
    }
    70%{
        transform: translateY(-25px);
    }
    80%{
        transform: translateY(2px);
    }
    90%{
        transform: translateY(-15px);
    }
    100%{
        transform: translateY(0);
    }
}