/* Course styling */
:root {
  --thumbsize: 50px;
}

.slide {width: 780px; height: 585px; margin-top:50px; background: #8592BC; position: relative; box-shadow: 0 0 4px 4px rgba(0,0,0,0.15); overflow: hidden;}
.slide p, .slide ol, .slide ul, .slide pre {font-family: Crimson; color: white; font-size: 220%; padding: 15px 40px 0 40px; font-weight: Normal; z-index:2; position: relative;}
.slide pre {font-size: 100%; padding:0;}
.slide-txt {display:inline-block; font-family: Crimson; color: white; font-size: 220%; padding: 5px; font-weight: Normal; z-index:2; position: relative; vertical-align:middle; margin:auto;}
.slide-NFItxt {display:inline-block; font-family: Verdana, sans-serif; color: black; font-size: 200%; padding: 15px 40px 0 40px; font-weight: Normal; z-index:2; position: relative; vertical-align:middle; margin:auto;}
.layer1 .slide-NFItxt {font-size: 100%;}
.layer2 .slide-NFItxt {font-size: 110%;}
.slide .slide-ref {font-family: Crimson; color: #0C2577; font-size: 200%; padding: 0 40px 0 20px; font-weight: Normal; float: right; z-index:2; position: relative; text-align: right; margin-top: -10px;}
.slide ul {list-style-type: "– "; padding: 15px 40px 0 50px;}
.slide ul ul {list-style-type: "– "; padding: 0 40px 0 30px; font-size: 80%;}
.slide ol {padding: 15px 40px 0 50px;}
.slide li {margin-top: 5px;}
.slide NFItable {font-family: Verdana, sans-serif; color: black; font-size: 160%; text-align: center; margin: 20px; margin-left: auto; margin-right: auto;}
.slide table {font-family: Crimson; color: white; font-size: 160%; text-align: center; margin: 20px; margin-left: auto; margin-right: auto;}
.slide-frnt {width: 100%; height: 360px; background: #0C2577; position: absolute; top: 0;}
.slide-frnt p {font-family: Crimson; color: white; font-size: 300%; padding: 100px 0 0 0; font-weight: Bold; text-align: center;}
.slide-aut {width: 100%; height: 150px; background: white; position: absolute; bottom: 0;}
.slide-aut p {font-family: Crimson; color: #0C2577; font-size: 170%; padding: 40px;}
.slide-ttl {position: relative; font-family: Crimson; color: white; font-size: 260%; padding: 40px 40px 0 40px; font-weight: Bold; z-index:2; height:70px;}
.slide-cnt {padding:0; border: 0 solid red; overflow:hidden;}
.slide-ftr {width: 100%; height: 30px; background: #0C2577; position: absolute; bottom: 0;}
.slide-ftr p {font-family: Crimson; color: white; font-size: 110%; padding: 3px 10px 3px 10px;}
.slide-ftr a {color: white;}
.slide-float-lft {float: left; position:absolute; z-index:1;}
.slide-float-rgt {right: 0; position:absolute; z-index:1;}
.slide-float-rgt-bot {right: 0; bottom: 0; position:absolute; z-index:1; margin-bottom: 30px;}
.slide-float-lft-bot {left: 0; bottom: 0; position:absolute; z-index:1; margin-bottom: 30px;}
.slide-float-mdl {margin-left: auto; position:absolute; z-index:1;}
/*.slide-float-mdl {left: 50%; margin-left: -130px; position:absolute; z-index:1;}*/
.slide-fll {left:0; top:0; position:absolute; z-index:1; width: 100%; height: 555px;}
.shape-txt {width: 250px; height: 250px; float: right; shape-outside: polygon(30% 45%, 100% 45%, 100% 100%, 0% 100%); z-index:3; position: relative; margin-top: 200px;}
.div-line {position: absolute; left: 0; top: 50%; height: 2px; background: white; width: 100%;}
.slide-2clmn {column-count: 2; column-gap: 40px;}
/* .viewer {display: none; justify-content: center; background-color: black;} /* switch to display: flex; when being used */
#viewer .slide {position: absolute;}
/* #viewer .slide #hideSlide {z-index:4; background: black;} */
/* border-style: solid; border-width: 1px;  */

.colophon_entry {width:100%; clear:both;}
.thumbcutter {width:var(--thumbsize); height:var(--thumbsize); overflow:hidden; position:relative; float:left; margin:10px 14px;}
.img-link img {transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);}
.img-link:hover img {transform: scale(1.02); box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);}

#scrollProgress {position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; z-index: 100; border: none; background: transparent; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
#scrollProgress.show {opacity: 1; visibility: visible;}
.progress-bg {fill: none; stroke: rgba(0,0,0,0.15); stroke-width: 20;}
.progress-bar {fill: none; stroke: black; stroke-width: 20; transition: stroke-dashoffset 0.1s linear; transform: rotate(-90deg); transform-origin: 50% 50%;}

.arrow {font-size: 26px; fill: black; font-weight:bold;}
#scrollProgress:hover {transform: scale(1.1);}

/* All B1C1 slide styling ==================================================== */
.nfi.toAnimate {transform: translateX(-800px);}
.nfi.Animated {animation: flyIn1 2s ease-out 7s 1 forwards;}
@keyframes flyIn1 {to {transform: translateX(0);}}
.prof.toAnimate {transform: translateX(-800px);}
.prof.Animated {animation: flyIn1 2s ease-out 10s 1 forwards;}
.web.toAnimate {transform: translateX(-800px);}
.web.Animated {animation: flyIn1 2s ease-out 14s 1 forwards;}

.areaslist.toAnimate {transform:none;}
.areaslist.Animated {animation: flyIn2 11s 1s ease-out 1 forwards;}
@keyframes flyIn2 {from {top:585px;} to {top:-600px;}}

.bodyfluids.toAnimate {transform:none;}
.bodyfluids.Animated {animation: fadeIn 1s 26s ease-out 1 forwards;}
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}

/* All B1C2 slide styling ==================================================== */
.areaslist.toAnimate {transform:none;}
.areaslist.Animated {animation: flyIn3 11s 1s ease-out 1 forwards;}
@keyframes flyIn3 {from {top:585px;} to {top:-600px;}}

.aristoFade.toAnimate {opacity: 0;}
.aristoFade.Animated {animation: aFade 25s 5s ease-in forwards;}
@keyframes aFade {from {opacity:0;} to {opacity:1;}}

.frontTurn.toAnimate {width:780px;}
.frontTurn.Animated {animation: fTurn 0.8s 16.5s ease-in forwards;}
@keyframes fTurn {from {width:780px;} to {width:0;}}

.backTurn.toAnimate {width:0;}
.backTurn.Animated {animation: bTurn 0.8s 17.2s ease-in forwards;}
@keyframes bTurn {from {width:0;} to {width:780px;}}

.picWilliam.toAnimate {width:100%; bottom:-100%; position:absolute; z-index:2;}
.picWilliam.Animated {animation: slideinB 2s 22s ease forwards, slideLft 2s 24s ease forwards;}
@keyframes slideinB {from {bottom:-100%;} to {bottom:30px;}}
@keyframes slideLft {from {right:0%;} to {right:48%;}}

.measureWill.toAnimate {height:100%; right:-100%; position:absolute; z-index:3; box-shadow: 0 0 4px 4px rgba(0,0,0,0.15);}
.measureWill.Animated {height:100%; animation: slideinR1 2s 32s ease forwards;}
@keyframes slideinR1 {from {right:-100%;} to {right:0%;}}

.measureWilliam.toAnimate {height:100%; right:-100%; position:absolute; z-index:4; box-shadow: 0 0 8px 8px rgba(0,0,0,0.15);}
.measureWilliam.Animated {height:100%; animation: slideinR2 2s 33s ease forwards;}
@keyframes slideinR2 {from {right:-100%;} to {right:46%;}}

.printsWilliam.toAnimate {height:250px; left:-100%; top:130px; position:absolute; z-index:5; box-shadow: 0 0 8px 8px rgba(0,0,0,0.15);}
.printsWilliam.Animated {height:250px; left:-100%; top:130px; animation: slideinR3 2s 46s ease forwards;}
@keyframes slideinR3 {from {left:-100%;} to {left:0%;}}

.printsWill.toAnimate {height:250px; right:-100%; top:320px; position:absolute; z-index:6; filter: drop-shadow(0 0 8px gray);}
.printsWill.Animated {height:250px; right:-100%; top:320px; animation: slideinL 2s 46s ease forwards;}
@keyframes slideinL {from {right:-100%;} to {right:0%;}}

.end.toAnimate {height:44.95px; margin-left:319.8px; margin-top:125px; position:absolute; border: 2px solid white; box-shadow: 5px 5px 8px rgba(0,0,0,0.25); opacity:0;}
.end.Animated {animation: fadeMin 0.5s 9.8s forwards, moveEnd 1.5s 10.3s forwards;}
.boxend.toAnimate {width:44.95px; height:44.95px; margin-left:319.8px; margin-top:125px; position:absolute; border: 2px solid white; opacity:0;}
.boxend.Animated {animation: fadeMin 0.5s 9.8s forwards;}
@keyframes fadeMin {to {opacity:1;}}
@keyframes moveEnd {to {height:120px; margin-left:40px; margin-top:270px; border-width:5px;}}
.endlabel.toAnimate {margin-left:40px; margin-top:210px; position:absolute; opacity:0;}
.endlabel.Animated {animation: fadeMin 0.5s 11.8s forwards}

.split.toAnimate {height:44.9px; margin-left:284.45px; margin-top:65.05px; position:absolute; border: 2px solid white; box-shadow: 5px 5px 8px rgba(0,0,0,0.25); opacity:0;}
.split.Animated {animation: fadeMin 0.5s 13s forwards, movesplit 1.5s 13.5s forwards;}
.boxsplit.toAnimate {width:44.95px; height:44.95px; margin-left:284.45px; margin-top:65.05px; position:absolute; border: 2px solid white; opacity:0;}
.boxsplit.Animated {animation: fadeMin 0.5s 13s forwards;}
@keyframes movesplit {to {height:120px; margin-left:40px; margin-top:70px; border-width:5px;}}
.splitlabel.toAnimate {margin-left:35px; margin-top:10px; position:absolute; opacity:0;}
.splitlabel.Animated {animation: fadeMin 0.5s 15s forwards}

.splits.toAnimate {height:44.9px; margin-left:457.3px; margin-top:202.2px; position:absolute; border: 2px solid white; box-shadow: 5px 5px 8px rgba(0,0,0,0.25); opacity:0;}
.splits.Animated {animation: fadeMin 0.5s 15.8s forwards, movesplits 1.5s 16.3s forwards;}
.boxsplits.toAnimate {width:44.95px; height:44.95px; margin-left:457.3px; margin-top:202.2px; position:absolute; border: 2px solid white; opacity:0;}
.boxsplits.Animated {animation: fadeMin 0.5s 15.8s forwards;}
@keyframes movesplits {to {height:120px; margin-left:610px; margin-top:270px; border-width:5px;}}
.splitslabel.toAnimate {margin-left:585px; margin-top:210px; position:absolute; opacity:0;}
.splitslabel.Animated {animation: fadeMin 0.5s 17.8s forwards}

.ends.toAnimate {height:44.95px; margin-left:434px; margin-top:71.65px; position:absolute; border: 2px solid white; box-shadow: 5px 5px 8px rgba(0,0,0,0.25); opacity:0;}
.ends.Animated {animation: fadeMin 0.5s 16.5s forwards, moveends 1.5s 17s forwards;}
.boxends.toAnimate {width:44.95px; height:44.95px; margin-left:434px; margin-top:71.65px; position:absolute; border: 2px solid white; opacity:0;}
.boxends.Animated {animation: fadeMin 0.5s 16.5s forwards;}
@keyframes moveends {to {height:120px; margin-left:610px; margin-top:70px; border-width:5px;}}
.endslabel.toAnimate {margin-left:590px; margin-top:10px; position:absolute; opacity:0;}
.endslabel.Animated {animation: fadeMin 0.5s 18.5s forwards}

.dots.toAnimate {height:515px; margin-left:220px; margin-top:20px; position:absolute; opacity:0;}
.dots.Animated {animation: fadeMin 6s 20s forwards;}

/* Locard rule animations */
.plus-de-12.toAnimate {opacity:0;}
.plus-de-12.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 39s linear forwards, fadeOut 1s 44s forwards;}
@keyframes str400 {from {stroke-dashoffset: 400;} to {stroke-dashoffset: 0;}}
.certitude.toAnimate {opacity:0;}
.certitude.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 42.3s linear forwards, fadeOut 1s 44s forwards;}
.points-8-12.toAnimate {opacity:0;}
.points-8-12.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 44s linear forwards, fadeOut 1s 53.5s forwards;}
.nettete.toAnimate {opacity:0;}
.nettete.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 47s linear forwards, fadeOut 1s 53.5s forwards;}
.rarete.toAnimate {opacity:0;}
.rarete.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 49s linear forwards, fadeOut 1s 53.5s forwards;}
.presence.toAnimate {opacity:0;}
.presence.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 51s linear forwards, fadeOut 1s 53.5s forwards;}
.centre.toAnimate {opacity:0;}
.centre.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 52s linear forwards, fadeOut 1s 53.5s forwards;}
.triangle.toAnimate {opacity:0;}
.triangle.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 53s linear forwards, fadeOut 1s 53.5s forwards;}
.pores.toAnimate {opacity:0;}
.pores.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 53.5s linear forwards, fadeOut 1s 57s forwards;}
.direction.toAnimate {opacity:0;}
.direction.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 54.5s linear forwards, fadeOut 1s 57s forwards;}
.tres-peu.toAnimate {opacity:0;}
.tres-peu.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 57s linear forwards;}
.ne-plus.toAnimate {opacity:0;}
.ne-plus.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 59s linear forwards;}
.presomption.toAnimate {opacity:0;}
.presomption.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 60.5s linear forwards;}
.nombre.toAnimate {opacity:0;}
.nombre.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 63.5s linear forwards;}
.nettete2.toAnimate {opacity:0;}
.nettete2.Animated {opacity:1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: str400 1s 65s linear forwards;}

@keyframes fadeIn {to {opacity:1;}}
@keyframes fadeOut {to {opacity:0;}}

.slice1.toAnimate {opacity:0;} .slice1.Animated {animation: fadeIn 1s 29s linear forwards, fadeOut 1s 44s forwards;}
.slice2.toAnimate {opacity:0;} .slice2.Animated {animation: fadeIn 0.7s 43.3s linear forwards, fadeOut 1s 53.5s forwards;}
.slice3.toAnimate {opacity:0;} .slice3.Animated {animation: fadeIn 1s 52.5s linear forwards, fadeOut 1s 57s forwards;}
.slice4.toAnimate {opacity:0;} .slice4.Animated {animation: fadeIn 1s 56s linear forwards;}

/* All B2C1 slide styling ==================================================== */

table#comparative td, table#comparative th {border-color:black; border-style:solid; border-width:2px; padding-left:10px;}
table#comparative {text-align:left; width:90%; border-collapse:collapse; font-size:200%; margin-top:90px;}
table#comparative thead {color:#0C2577; background-color:white;}

.arrowBayes.toAnimate {transform:none;}
.arrowBayes.Animated {animation: uTurn 2s 5s ease-in 1 forwards;}
@keyframes uTurn {from {transform:none;} to {transform:rotate(-180deg);}}

.Trudy1.toAnimate {opacity:0;}
.Trudy2.toAnimate {opacity:0;}
.Trudy3.toAnimate {opacity:0;}
.Trudy1.Animated {animation: fadeIn 0.5s 12s 1 forwards;}
.Trudy2.Animated {animation: fadeIn 0.5s 24s 1 forwards;}
.Trudy3.Animated {animation: fadeIn 0.5s 32s 1 forwards;}
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}

.HIV1.toAnimate {opacity:0;}
.HIV2.toAnimate {opacity:0;}
.HIV3.toAnimate {opacity:0;}
.HIV4.toAnimate {opacity:0;}
.HIV1.Animated {animation: fadeIn 0.5s 45s 1 forwards;}
.HIV2.Animated {animation: fadeIn 0.5s 64s 1 forwards;}
.HIV3.Animated {animation: fadeIn 0.5s 79s 1 forwards;}
.HIV4.Animated {animation: fadeIn 0.5s 90s 1 forwards;}
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}

.reveal-container {position: relative; width: 780px; height: 555px; overflow: hidden; background: #000;}
.reveal-container img {position: absolute; top: 0; left: 0; width: 780px; height: 555px; object-fit: cover;}
.top-img.toAnimate {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 540px, black 560px, black 1665px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 540px, black 560px, black 1665px);
  -webkit-mask-size: 780px 1665px;
  mask-size: 780px 1665px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.top-img.Animated {animation: wipe-up-smooth 7s ease-in-out 1s forwards;}

@keyframes wipe-up-smooth {
  0% {-webkit-mask-position: 0 0; mask-position: 0 0;}
  100% {-webkit-mask-position: 0 -1110px; mask-position: 0 -1110px;}
}

/* All B2C2 slide styling ==================================================== */

table#scale td, table#scale th {border-color:white; border-style:solid; border-width:2px; padding-left:10px;}
table#scale {text-align:left; width:90%; border-collapse:collapse; font-size:200%; margin-top:20px;}
table#scale thead {color:#0C2577; background-color:white;}

table.NFIscale td, table#NFIscale th {border-color:black; border-bottom: 2px solid black; /* only bottom border */ padding-left:10px;}
table.NFIscale {text-align:left; width:90%; border-collapse:collapse; font-size:110%; margin-top:20px; font-family: Verdana, sans-serif; color:black}
table.NFIscale thead {font-weight: bold}
table.NFIscale thead tr:first-child th {border-top: 3px solid black; border-bottom: 2px solid black} /* Thicker top border above the header row */
table.NFIscale tbody tr:last-child td {border-bottom: 3px solid black} /* Thicker bottom border below the last row */

.layer1.toAnimate {opacity: 1;}
.layer1.Animated {animation: fadelayer1 0.5s 14s ease-in forwards;}
@keyframes fadelayer1 {from {opacity:1;} to {opacity:0;}}
.layer2.toAnimate {opacity: 0;}
.layer2.Animated {animation: fadelayer2 0.5s 14s ease-in forwards;}
@keyframes fadelayer2 {from {opacity:0;} to {opacity:1;}}

.stat1v.Animated {animation: transposeV1 2s 13s ease-in-out 1 forwards}
.stat2v.Animated {animation: transposeV2 2s 13s ease-in-out 1 forwards}
.stat1h.Animated {animation: transposeH1 2s 13s ease-in-out 1 forwards}
.stat2h.Animated {animation: transposeH2 2s 13s ease-in-out 1 forwards}
@keyframes transposeV1 {from {top:210px} to {top:305px}}
@keyframes transposeV2 {from {top:305px} to {top:210px}}
@keyframes transposeH1 {0%{transform:translateX(0)}50%{transform:translateX(-200px)}100%{transform:translateX(0)}}
@keyframes transposeH2 {0%{transform:translateX(0)}50%{transform:translateX(+200px)}100%{transform:translateX(0)}}

.stat1vcow.toAnimate, .stat2vcow.toAnimate, .stat1hcow.toAnimate, .stat2hcow.toAnimate, .statCow.toAnimate {opacity:0}
.stat1vcow.Animated {animation: fadeIn 0.5s 4s 1 forwards, transposeV1 2s 18s ease-in-out 1 forwards}
.stat2vcow.Animated {animation: fadeIn 0.5s 4s 1 forwards, transposeV2 2s 18s ease-in-out 1 forwards}
.stat1hcow.Animated {animation: fadeIn 0.5s 4s 1 forwards, transposeH1 2s 18s ease-in-out 1 forwards}
.stat2hcow.Animated {animation: fadeIn 0.5s 4s 1 forwards, transposeH2 2s 18s ease-in-out 1 forwards}
.statCow.Animated {animation: fadeIn 0.5s 4s 1 forwards}
.cowIm.Animated {animation: imTrans 0.5s 4s 1 forwards}
@keyframes imTrans {0%{opacity:1}100%{opacity:0.5}}

.stat1vlot.toAnimate, .stat2vlot.toAnimate, .stat1hlot.toAnimate, .stat2hlot.toAnimate, .statLot.toAnimate {opacity:0}
.stat1vlot.Animated {animation: fadeIn 0.5s 3s 1 forwards, transposeV1 2s 10.5s ease-in-out 1 forwards}
.stat2vlot.Animated {animation: fadeIn 0.5s 3s 1 forwards, transposeV2 2s 10.5s ease-in-out 1 forwards}
.stat1hlot.Animated {animation: fadeIn 0.5s 3s 1 forwards, transposeH1 2s 10.5s ease-in-out 1 forwards}
.stat2hlot.Animated {animation: fadeIn 0.5s 3s 1 forwards, transposeH2 2s 10.5s ease-in-out 1 forwards}
.statLot.Animated {animation: fadeIn 0.5s 3s 1 forwards}
.lotIm.Animated {animation: imTrans 0.5s 3s 1 forwards}

.stat1vnur.toAnimate, .stat2vnur.toAnimate, .stat1hnur.toAnimate, .stat2hnur.toAnimate, .statNur.toAnimate {opacity:0}
.stat1vnur.Animated {animation: fadeIn 0.5s 2s 1 forwards, transposeV1 2s 12.5s ease-in-out 1 forwards}
.stat2vnur.Animated {animation: fadeIn 0.5s 2s 1 forwards, transposeV2 2s 12.5s ease-in-out 1 forwards}
.stat1hnur.Animated {animation: fadeIn 0.5s 2s 1 forwards, transposeH1 2s 12.5s ease-in-out 1 forwards}
.stat2hnur.Animated {animation: fadeIn 0.5s 2s 1 forwards, transposeH2 2s 12.5s ease-in-out 1 forwards}
.statNur.Animated {animation: fadeIn 0.5s 2s 1 forwards}
.nurIm.Animated {animation: imTrans 0.5s 2s 1 forwards}

.scaleNFI.toAnimate {opacity:0; width:0}
.scaleNFI.Animated {animation: fadeZoomIn 0.5s 14s 1 forwards}
@keyframes fadeZoomIn {0%{opacity:0; width:0}100%{opacity:1; width:700px}}

.balloon1.toAnimate, .balloon2.toAnimate {opacity:0}
.balloon1.Animated {animation: fadeIn 0.5s 11s 1 forwards}
.balloon2.Animated {animation: fadeIn 0.5s 15s 1 forwards}

/* transposed conditional exercise styling ======================================= */
.expertStatement {font-weight:bold!important; margin:50px 0 0 0;}
.but_right {width:60px; height:60px; border-radius:50%; border:none; margin-top:20px; margin-left:40px; background-size:100% 100%; background-color:#060; display:inline-block; cursor: pointer;}
.but_wrong {width:60px; height:60px; border-radius:50%; border:none; margin-top:0; margin-left:10px; background-size:105% 105%; background-color:#C00; display:inline-block; cursor: pointer;}
.ic_right {background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,24l7,7 14,-14' fill='none' stroke='white' stroke-width='5'/%3E%3C/svg%3E");}
.ic_wrong {background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5,15.5l15,15M15.5,30.5l15,-15' fill='none' stroke='white' stroke-width='5'/%3E%3C/svg%3E");}
.observation.answered {color:#0C2577;}
.hypothesis.answered {color:#060;}
.feedback {display:none; opacity:0; z-index:9}
.feedback.Animated {display:initial; animation: feedBack 1.5s 0s 1 forwards;}
@keyframes feedBack {0% {opacity:0; width:0; height:0;} 15% {opacity:1; width:150px; height:150px;} 85% {opacity:1; width:150px; height:150px;} 100% {opacity:0; width:0; height:0;}}
.centered {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}.feedback {width:150px; height:150px; margin-left:float}
.sad {background-size:105% 105%; background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='30' cy='35' cx='35' style='fill:%23ffd669'/%3E%3Cg style='fill:%23000'%3E%3Cellipse cx='21' cy='36' rx='3.8' ry='4.6'/%3E%3Cellipse cx='49' cy='36' rx='3.8' ry='4.6'/%3E%3C/g%3E%3Cg style='fill:none;stroke:%23000;stroke-width:2.7;stroke-linecap:round'%3E%3Cpath d='M43,53a9,8 1 0 0 -16,0'/%3E%3Cpath d='M15,31c0.7,-1.8 3.4,-4.3 7,-3'/%3E%3Cpath d='M55,31c-0.7,-1.8 -3.4,-4.3 -7,-3'/%3E%3C/g%3E%3Cpath style='fill:%2321a8f3;stroke:none' d='m58,60c0,2.6 -2,5 -5,5 -2.6,0 -5,-2 -5,-5 0,-3.4 2.3,-8.3 5,-13 2.3,5 5,10 5,13z'/%3E%3C/svg%3E");}
.happy {background-size:105% 105%; background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='fill:%23ffd669' cx='35' cy='35' r='30'/%3E%3Cg style='fill:%23000'%3E%3Cellipse cx='20' cy='30' rx='4' ry='5'/%3E%3Cellipse style='fill:%23000' cx='50' cy='30' rx='4' ry='5'/%3E%3C/g%3E%3Cpath style='fill:none;stroke:%23000;stroke-width:2.7;stroke-linecap:round;' d='M50,42A16,16 0 0 1 35,52 16,16 0 0 1 20,42'/%3E%3C/svg%3E");}
.button_block {margin:40px 0 0 40px;}
.but_obs,.but_hyp{position:relative; top:-25px; width:120px; display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px; margin-right:10px; font-size: 16px; border-radius: 3px; background-color: #eee; color: black; border: none; cursor: pointer; transition: background-color 0.3s; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.but_obs:hover,.but_hyp:hover {background-color: white;}

/* Experimental styling =========================================================== */
/*.sub {font-family: Arimo-SemiBold; font-size: 180%; text-shadow:1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, -1px -1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 -1px 0 black, 0 1px 0 black, 1.5px 1.5px 2px black; color: white;}*/
.sub {font-family: "Arimo"; font-size: 180%; transform: scale(.85,1); color: white; font-weight: 900; -webkit-text-stroke: 0.8px black; text-shadow: 1px 1px 2px rgb(0,0,0,0.5);}