/* 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: #C1C1C1;
}

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;
}

/* 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;
}

/*--------------------------------------------------------------
# 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
--------------------------------------------------------------*/
table#category-overview, table#dlc-overview {
	max-width: 700px;
	margin: 50px auto;
}
table#category-overview tr td, table#dlc-overview tr td {
	border-width: 0px;
	border-bottom: 1px solid black;
}
table#category-overview tr td, table#dlc-overview tr td {
	text-align: left;
	font-size: 1em;
}
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:first-child img {
	width: 80px;
}
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
}
#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 .section3 {
	background: url(/assets/img/icons/info-circle.svg);
}
.card .section4 {
	background: url(/assets/img/icons/exclamation_triangle.svg);
}
.card .recommendation {
	background: url(/assets/img/icons/recommendations.svg);
}
.card .card_references {
	background: url(/assets/img/icons/references.svg);
}
.card .card_references.empty_references {
	background: none;
}
.card .section3, .card .section4, .card .recommendation, .card .card_references {
	position:relative;
	padding: 20px 40px 20px 120px;
	background-repeat: no-repeat;
	background-size: 80px;
	background-position: 20px 50%;
}
.card .section3 {
	padding-top: 30px;
}
.card .section1 {
	height: 10vh;
}
.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: 70px;
}
.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: 45px;
	margin: 0px 0.4vw;
}
.card .inactive_section {
	display: none;
}
button.flipper {
	position: absolute;
	height: 30px;
	width: 30px;
	bottom: -15px;
	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 {
	padding-left: 0;
}
#toggle-yesno {
	margin: 5px 10px;
}

/* end init */

 /* Yes-No */
ul#yesno-categories, ul#yesno-dlcs {
	list-style-type: none;
}
ul#yesno-categories li {
 margin: 3px 0px;
 padding: 3px 8px;
 border-radius: 5px;
 font-size: 1.1em;
}
#yesno-categories img {
	height: 0.9em;
	opacity: 1;
	margin: 0em 0.35em;
	vertical-align: baseline;
}
ul#yesno-dlcs li {
	display: inline;
}
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;
}

.yes-no-ffwd {
	float: right;
	margin: 3px;
	width: 20px;
	height: 20px;
}
#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, #yesno-card-question {
	text-align: justify;
}
#yesno-quicktour {
	margin: 2em 3em;
}
#yesno-quicktour .step {
	display: none;
	padding: 2em 3em;
	background-color: rgb(93, 167, 224, 0.4);
	border-radius: 4px;
}
#yesno-quicktour .step:after {
	content:'';
	display:block;
	clear: both;
}
#yesno-quicktour .step.active {
	display: block;
}
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 {
	background-color: #3a78b6;
	color: white;
	border-width: 0px;
	border-radius: 3px;
	padding: 4px 8px;
	font-weight: bold;
	font-size: 1em;
}
#yesno-quicktour-step1 button:hover, button.yesno-quicktour-nextstep:hover {
	background-color: #5da7e0;
}
#quick-tour-yes, #quick-tour-no {
	width: 45%;
	text-align: center;
	padding: 2em 1.5em;
	border: 1px dotted #5da7e0;
	background-color: rgb(93, 167, 224, 0.5);
	border-radius: 4px;
	margin-top: 2em;
}
#quick-tour-yes {
	float: left;
}
#quick-tour-no {
	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;
}
#yesno-categories svg {
	opacity: 0.4;
}
#yesno-categories svg.active {
	opacity: 1;
	cursor: pointer;
}
#yesno-stats {
	display: none;
	clear: right;
}
#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;
}
.yesno-controls button, .yesno-filterstats select, button#yesno-report {
	border: 2px solid #3a78b6;
	background-color: #5da7e0;
	border-radius: 3px;
	padding: 4px 8px;
	color: #3a78b6;
	font-weight: bold;
	margin-right: 1em;
}
.yesno-filterstats select {
	float: right;
	margin-right: 0px;
}
.yesno-filterstats label, .game h4 {
	font-size: 1.5em;
	font-weight: bold;
	color: #3a78b6;
}
.game h4 {
	margin-bottom: 0.8em;
}
.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;
}
#yesno-gameboard .yesno-controls #yesno-prv {
	float: left;
}
#yesno-gameboard .yesno-controls #yesno-next {
	float: right;
	margin-right: 0px;
}
button#yesno-report {
	border-width: 0px;
	margin: 1em auto;
	padding: 8px 16px;
	font-size: 1em;
	width: auto;
	border-radius: 5px;
}
button#yesno-report.inactive {
	opacity: 0.25;
}
.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;
}

/* 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: -15px;
	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 1vw;
		}

		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 (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);
    }
}