:root 
{
  --xr_green: rgb(20, 170, 55);
  --xr_lemon: rgb(247, 238, 106);
  --xr_light_blue: rgb(117, 208, 241);
  --xr_pink: rgb(237, 155, 196);
  --xr_purple: rgb(152,98,151);
  --xr_light_green: rgb(190,210,118);
  --xr_warm_yellow: rgb(255,193,30);
  --xr_bright_pink: rgb(207,98,151);
  --xr_red: rgb(220,79,0);
  --xr_dark_blue: rgb(56,96,170);
  --xr_angry: rgb(200,0,130);
}

@font-face{
    font-family:"FucXed";
    font-style:normal;
    font-weight:normal;
//    src:url("fucxedcaps-v3-webfont.woff2") format("woff2"),url("../resources/fucxedcaps-v3-webfont.woff") format("woff");
    src:url("../resources/FUCXED-CAPS-Lower-Case.otf") format("opentype");
    font-display:swap
}

@-ms-viewport
{
    /*noinspection CssInvalidPropertyValue*/
    width: device-width;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
    border: 0;
    /*text-size-adjust: 200%;
	vertical-align: baseline;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
    font-size: 17px;
    font-family: 'Lexend', sans-serif;
}


h1 {
    font-size: 32px;
    text-align: center;
    padding: 20px;
    font-weight: 700;
}
h2 {
    font-size: 23px;
    margin-bottom: 0;
    font-weight: 700;
    padding: 15px;
    line-height: 30px; 
}
h3 {
    font-size: 1.6rem;
}
h4 {
    font-size: 1.3rem;
}

sup
{
    vertical-align: super;
    font-size: 10px;
}

div#content {
    display: flex;
    flex-direction: column;
}

div.slide 
{
    /* was overridden by one below further down file
	padding-top: 77px; */
	margin-bottom: 0;
    z-index: 5;
    /*position: relative;*/
    position: fixed;
	top: 0;
	left: 0;
	right: 0;
    /* was overridden by one below further down file
	bottom: 33px;*/
	padding-top: 77px;
	bottom: 25px; /* same as footer height */
	overflow: scroll;

}

div.slide-inner {
    max-width: 1000px;
    margin: auto;
    z-index: 10;
}

div.report
{
    max-width: 1000px;
    margin: auto;
    z-index: 10;
    font-weight: 300;
}


div.progress {
    font-size: 17px;
    padding: 10px;
    text-align: center;
}

header 
{
    color: white;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    font-size: 43px;
    font-family: "FucXed", sans-serif;

    position: fixed;
    height: 66px;
    background-color: black;
    width: 100%;
    z-index: 1000;
}

div.footer 
{
    color: white;
    padding-top: 7px;
    padding-bottom: 7px;
    box-sizing: border-box;
    font-size: 21px;
    font-family:"FucXed", sans-serif;

    position: fixed;
	top: auto;
    height: 33px;
	bottom: 0;
    background-color: black;
    width: 100%;
    z-index: 1000;
}

div.privacy
{
	width: 50%;
    text-align: center;
	float: left;
}

div.contact
{
	width: 50%;
    text-align: center;
	float: left;
}

a.whiteLink 
{
	color: white;
	text-decoration: none;
}

button, a.action {
    width: 265px;
    max-width: 100%;
    margin: 40px auto 40px;
    padding: 13px;
    border: none;
    outline: none;
    display: block;
//    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.33;
    text-align: center;
    color: #393e41;
    /*background-color: rgb(60, 200, 85);*/
    background-color: var(--xr_green);
    font-family:"FucXed", sans-serif;
    cursor: pointer;
}

a#donateClick
{
    background-color: var(--xr_bright_pink);
    text-transform: none;
    font-family: 'Lexend', sans-serif;
    font-size: 25px;
    padding: 25px 13px;
}

a#tryAgain
{
    text-transform: none;
    font-family: 'Lexend', sans-serif;
}

input.cancel, a.action {
    width: 265px;
    max-width: 100%;
    margin: 40px auto 40px;
    padding: 13px;
    border: none;
    outline: none;
    display: block;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.33;
    text-align: center;
    color: #393e41;
    /*background-color: rgb(60, 200, 85);*/
    background-color: var(--xr_green);
    font-family:"FucXed", sans-serif;
    cursor: pointer;
}


a.action {
    width: 365px;
    max-width: 100%;
    margin: 40px auto 40px;
    padding: 13px;
    border: none;
    outline: none;
    display: block;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.33;
    text-align: center;
    /* color: #393e41; */
    /* background-color: rgb(60, 200, 85); */
    background-color: var(--xr_green);
    font-family:"FucXed", sans-serif;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

button.action {
    width: 365px;
    max-width: 100%;
    margin: 40px auto 40px;
    padding: 13px;
    border: none;
    outline: none;
    display: block;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.33;
    text-align: center;
    /* color: #393e41; */
    /* background-color: rgb(60, 200, 85); */
    background-color: var(--xr_green);
    font-family:"FucXed", sans-serif;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.btn-sign {
    color: #ffffff;
    /*background-color: rgb(167, 214, 215);*/
    background-color: var(--xr_light_blue);
}

.btn-no {
    color: #b8b5ae;
    background-color: #e3dfd8;
}
/*

Chris commented this out 7Feb23 to remove phpStorms error Unknown function -internal-light-dark
input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    margin: 80px auto 60px;
    width: 265px;
    display: block;
    font-size: 22px;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    text-align: start;
    appearance: textfield;
    padding: .8125rem 1rem .75rem;
}
*/

.btn-facebook img, .btn-twitter img, .btn-whatsapp img {
    vertical-align: middle;
    margin-right: 15px;
    margin-top: -5px;
}

.btn-facebook {
    width: 265px;
    max-width: 100%;
    margin: 0;
    margin-bottom: 20px;
    padding: 14px;
    border: none;
    outline: none;
    display: inline-block;
    font-family: Helvetica, sans-serif;
    vertical-align: top;
    text-transform: none;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.33;
    text-align: center;
    color: white;
    /*background-color: #344f8b;*/
    background-color: var(--xr_dark_blue);
}

.show-answers {
	width: 320px;
	/*background-color: peru;*/
	background-color: var(--xr_red);
	color: white;
}

img.wood-block {
    position: absolute;
    z-index: 2000;
    opacity: 0.08;
    width: 100%;
    max-width: 700px;
    bottom: 0;
    right: 0;
    pointer-events: none;
}

.correct-answers {
    /*background-color: rgb(199, 235, 240);*/
    background-color: var(--xr_light_blue);
    color: black;
    padding: 10px;
	overflow: scroll;
	height:2000px;
}

.correct-answers-question {
    font-weight: 700;
 
}

.correct-answers-correct {
    margin: 10px;
    padding: 10px;
    background-color: rgb(120, 250, 185);
}

.correct-answers-selected {
    margin: 10px;
    padding: 10px;
    background-color: rgb(247, 201, 201);
}

.correct-answers-title {
    font-size: 15px;
    text-align: center;
    padding: 0;
    font-style: italic;
}

h1.slide {
    font-size: 28px;
	padding: 10px;

}

h1.well-done {
    text-transform: uppercase;
    font-family: "Lexend", sans-serif;
    font-size: 24px;
    padding: 15px;
}

h1.result {
    font-family: "Lexend", sans-serif;
    font-weight: 400;
}

h1.result2
{
    font-family: "Lexend", sans-serif;
    font-weight: 300;
}

h1.result3
{
    font-family: "Lexend", sans-serif;
    font-weight: 500;
}

h2.share-this {
    text-align: center;
    font-weight: 400;
}

h2.question 
{
	animation-duration: 2.5s;
	animation-name: fadeIn;
}

div.answer 
{
    cursor:pointer;
    padding: 15px;
    font-size: 19px;
    margin: 20px 10px;
    background-color: hsla(170, 39%, 100%, 1);
	opacity: 1;
    
}

div#answer0
{
	animation-duration: 3s;
	animation-name: fadeIn0;
}

div#answer1
{
	animation-duration: 3.75s;
	animation-name: fadeIn1;
}

div#answer2
{
	animation-duration: 4.5s;
	animation-name: fadeIn2;
}

div#answer3
{
	animation-duration: 4.75s;
	animation-name: fadeIn3;
}

div#answer4
{
	animation-duration: 5.5s;
	animation-name: fadeIn4;
}

div#answer5
{
	animation-duration: 5.75s;
	animation-name: fadeIn5;
}

div#answer6
{
	animation-duration: 6.5s;
	animation-name: fadeIn6;
}

div.question
{
    padding: 5px 0px;
    font-size: 19px;
    margin: 5px 10px;
    opacity: 1;

}

span.title
{
    font-weight: 500;
    font-size: larger;
    line-height: 200%;
}

div.response
{
    padding: 5px 0px;
    font-size: 19px;
    margin: 5px 10px;
    opacity: 1;
    display: none;
    leading: 1.5;

}


div.summary
{
    padding: 5px 0px;
    font-size: 19px;
    margin: 5px 10px;
    opacity: 1;
    display: none;
    leading: 1.5;
}

div.citation
{
    cursor:pointer;
    padding: 5px 0px;
    font-size: 15px;
    margin: 5px 10px 15px 10px;
    opacity: 1;
    display: none;
}

button#nextButton
{
    background-color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    display: none;
    width: 200px;
    font-family: "Lexend", sans-serif;
    padding: 5px;
    opacity: 1;

}

@keyframes fadeIn0 
{
	0% {opacity: 0;}
	10% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn1 
{
	0% {opacity: 0;}
	15% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn2 
{
	0% {opacity: 0;}
	20% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn3 
{
	0% {opacity: 0;}
	25% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn4 
{
	0% {opacity: 0;}
	30% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn5 
{
	0% {opacity: 0;}
	35% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn6 
{
	0% {opacity: 0;}
	40% {opacity: 0;}
	100% {opacity: 1;}
}


@keyframes opacityOff 
{
	from 
	{
    	opacity: 0;
	}

  	to 
	{
		opacity: 0.01;
	}
}

p.comment
{
    font-size: 12px;
	text-align: center;
}

div.reference
{
    text-align: right;
    padding-right: 10px;
    font-size: 12px;
}

div.reference-end {
    font-size: 12px;
    padding-top:  15px;
    text-align: center;
    padding-bottom: 10px;
}

div.open-reference {
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
}

hr {
    border-top: 1px solid grey;
    border-bottom: none;
    margin-bottom: 30px;
  }
  
div.corrections {
    display: flex;
    padding-top: 7px;
}

div.corrections > div {
width: 50%;
}

div.correct {
    text-align: center;
    vertical-align: middle;
    font-size: 50px;
    padding-top: 24px;
    color: #0b0;
}

img.center 
{
	display: block;
	margin-top: 10px;
	margin-left: auto;
	margin-bottom: 10px;
	margin-right: auto;
}

.talks 
{
	/*font-family: 'Crimson Text', serif;*/
  border-collapse: collapse;
  width: 100%;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.talks_add
{
	/*font-family: 'Crimson Text', serif;*/
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 15px;
	text-align: center;
}

p.talks 
{
    font-weight: 700;
    /*padding: 15px;*/
    line-height: 24px; 
	/*font-family: 'Crimson Text', serif;*/
	border-collapse: collapse;
	width: 100%;
	font-size: 20px;
	margin-top: 5px;
	margin-bottom: 1px;
	text-align: center;
}

p.select  
{
	text-align: center;
	/*font-family: 'Crimson Text', serif;*/
	border-collapse: collapse;
	width: 100%;
	font-size: 18px;
	color: var(--xr_green);

	/*
	margin-top: 10px;
	margin-bottom: 15px;
	*/
}

.talks td, .talks th 
{
  	border: 1px solid #ddd;
 	padding-top: 8px;
  	padding-bottom: 4px;
	text-align: center;
    font-weight: 700;

}

.talks tr:nth-child(even){background-color: #f2f2f2;}

.talks tr:hover {background-color: #ddd;}

.talks th 
{
  text-align: center;
  background-color: #c80082;
  color: white;
}

*[data-href] 
{
  cursor: pointer;
}

td a 
{
  display:inline-block;
  min-height:100%;
  width:100%;
  padding: 10px; /* add your padding here */
}

td 
{
  padding:0;  
}

td.contact
{
	display:none;
}

td.talk
{
	display:none;
}

td.link
{
	display:none;
}

#form1 
{

	display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: auto;
	margin-left: -150px;
	margin-top: -200px;
	/* Form outline */
	padding: 1em;
	border: 1px solid #CCC;
	border-radius: 1em;
	background-color:  var(--xr_light_blue);

}

#message1 
{

	display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: auto;
	margin-left: -150px;
	/*margin-top: -200px;*/
	padding: 1em;
	border: 1px solid #CCC;
	border-radius: 1em;
	background-color:  white;
	z-index: 10;

}

ul 
{
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li 
{
  margin-top: 1em;
}

.dateText
{
 	text-align: center;
	/*font-family: 'Crimson Text', serif;*/
	border-collapse: collapse;
	width: 100%;
	font-size: 20px;
	color: var(--xr_dark_blue);
    font-weight: 700;
	margin-bottom: 15px;
}

.submit
{
    width: 265px;
    max-width: 100%;
    margin: 40px auto 40px;
    padding: 13px;
    border: none;
    outline: none;
    display: block;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.33;
    text-align: center;
    color: #393e41;
    /*background-color: rgb(60, 200, 85);*/
    background-color: var(--xr_green);
    font-family:"FucXed", sans-serif;
    cursor: pointer;
}


.privacyText
{
 	text-align: center;
	/*font-family: 'Crimson Text', serif;*/
	border-collapse: collapse;
	width: 280px;
	font-size: 15px;
	color: var(--xr_dark_blue);
    font-weight: 700;
	margin-bottom: 15px;
	margin-left: 10px;
	margin-right: 10px;
}

.messageText
{
 	text-align: center;
	/*font-family: 'Crimson Text', serif;*/
	border-collapse: collapse;
	width: 280px;
	font-size: 15px;
	color: var(--xr_dark_blue);
    font-weight: 700;
	margin-bottom: 15px;
	margin-left: 10px;
	margin-right: 10px;
}

label 
{
	display: inline-block;
	text-align: left;
	font-size: 20px;
	color: var(--xr_dark_blue);
	font-weight: 700;
}

input#name, input#mail, input#message
{
	/* To make sure that all text fields have the same font settings
	 By default, text areas have a monospace font */
	font: 1em sans-serif;

	/* Uniform text field size */
	width: 280px;
	box-sizing: border-box;

	/* Match form field borders */
	border: 1px solid #999;
	margin-top: 2px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 2px;
}

input:focus 
{
  /* Additional highlight for focused elements */
  border-color: #000;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

button#submit
{
	margin-top: 30px;
	margin-bottom: 30px;
}

div.back
{
	position: fixed;
	top: 10px;
	z-index: 2001;
}

div.back a
{
	font-size: 25px;
    font-family:"FucXed", sans-serif;
    color: #ffffff;
    text-decoration: none;
}

h2.cta
{
	text-align: center;
}


@media (max-width: 900px)
{
    div.corrections 
	{
        display: block;
    }
    
    div.corrections > div 
	{
    	width: 100%;
    }
}

@media (max-width: 568px), (max-height: 700px)
{
    h1
    {
        font-size: 17px;
        padding: 7px;
        line-height: 23px;
    }

    h1.well-done
    {
         font-size: 20px;
         padding: 7px;
         line-height: 23px;
     }
	
    h2 
	{
        font-size: 17px;
        padding: 7px;
        line-height: 23px; 
    }


    div.answer 
	{
        padding: 11px;
        font-size: 19px;
        margin: 10px;
    }

    header 
	{
        padding: 8px;
        font-size: 23px;
        height: 36px;
    }
	
	div.slide 
	{
		padding-top: 45px;
	}

	div.footer 
	{
        padding: 5px;
        font-size: 15px;
        height: 25px;
    }

    a.action 
	{
        width: 265px;
        font-size: 17px;
		margin-top: 5px;
		margin-bottom: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 23px; 
    }
	
    button.btn-sign 
	{
        width: 265px;
        font-size: 17px;
		margin-top: 5px;
		margin-bottom: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 23px; 
    }

	.btn-facebook 
	{
        font-family: "Lexend", sans-serif;
        font-size: 17px;
		margin-top: 5px;
		margin-bottom: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 23px; 
	}
	
	.fb-img
	{
		height: 20px;
	}
	
	img.center 
	{
		/*width: 100%;*/
	}


}