@charset "utf-8";
/* responsive stylesheet */

@media screen and (min-width: 320px) and (max-width: 1344px) {
.inner {width: 90%; margin: 0 5%;}
section.login article img.img-background {width: auto; min-width: 100%; height: 100%; min-height: 100%; bottom: 0px;}
section.welcome article img.img-background {width: auto; min-width: 100%; height: 100%; min-height: 100%; bottom: 0px;}
section.scene article img.img-background {width: auto; min-width: 100%; height: 100%; min-height: 100%; bottom: 0px;}
section.complete article img.img-background {width: auto; min-width: 100%; height: 100%; min-height: 100%; bottom: 0px; left: 50%; transform: translateX(-50%);}
section.scene.scene01 article img.img-background {left: 50%; transform: translateX(-50%);}
section.scene.scene08 article img.img-background {left: 50%; transform: translateX(-50%);}
section.scene.scene05 article img.img-background {right: 0;}
section.scene.scene03 article .sign {bottom: 30%;}
section.scene.scene10 article .sign {bottom: 30%;}
section.scene.scene05 article .sign {bottom: 20%;}
}

@media screen and (min-width: 320px) and (max-width: 1244px) {
.inner {width: 90%; margin: 0 5%;}
section.login article .welcome {width: 400px; height: 491px;}
section.login article .welcome h1 {margin-top: 50px; font-size: 2.5em; text-shadow: 2px 2px 0px #af9353;}
section.complete article .carrot-stash {width: 100%; z-index: 2000;}
section.complete article .carrot-stash .carrot {width: auto; height: auto; padding-top: 0px; margin-top: -20px; position: absolute; font-size: 2.0em; font-weight: 800; text-align: center;  color: var(--white);}
.carrot-stash .pumpkin-size1 { background-size: cover;}
.carrot-stash .pumpkin-size2 { background-size: cover;}
.carrot-stash .pumpkin-size3 { background-size: cover;}
.carrot-stash .pumpkin-size4 { background-size: cover;}
/* Pumpkins */
.pumpkin1,.pumpkin2,.pumpkin3,.pumpkin4,.pumpkin5 {width: 90px; height: 90px; position: absolute; background: url("../images/pumpkin-patch-1.png") no-repeat center center;}
.carrot-stash .pumpkin1 {background: url("../images/pumpkin-patch-1.png") no-repeat center center; background-size: cover;}
.carrot-stash .pumpkin2 {top: 0px; left: 10%; background: url("../images/pumpkin-patch-1.png") no-repeat center center; background-size: cover;}
.carrot-stash .pumpkin3 {top: 0px; left: 20%; background: url("../images/pumpkin-patch-1.png") no-repeat center center; background-size: cover;}
.carrot-stash .pumpkin4 {top: 0px; left: 30%; background: url("../images/pumpkin-patch-1.png") no-repeat center center; background-size: cover;}
.carrot-stash .pumpkin5 {top: -120px; left: 20%; background: url("../images/pumpkin-patch-1.png") no-repeat center center; background-size: cover;}

.stash {top: 50px; left: 38%;}

.carrot-stash .pumpkin-pos01 { top: 0px; left: 0px; }
.carrot-stash .pumpkin-pos02 { top: 0px; left: 50px; }
.carrot-stash .pumpkin-pos03 { top: 0px; left: 100px; }
.carrot-stash .pumpkin-pos04 { top: 0px; left: 150px; }
.carrot-stash .pumpkin-pos05 { top: 0px; left: 200px; }
.carrot-stash .pumpkin-pos06 { top: 0px; left: 250px; }
.carrot-stash .pumpkin-pos07 { top: 0px; left: 300px; }
.carrot-stash .pumpkin-pos08 { top: 0px; left: 350px; }
.carrot-stash .pumpkin-pos09 { top: 0px; left: 400px; }
.carrot-stash .pumpkin-pos10 { top: 0px; left: 450px; }
.carrot-stash .pumpkin-pos11 { top: 0px; left: 500px; }
.carrot-stash .pumpkin-pos12 { top: 0px; left: 550px; }
.carrot-stash .pumpkin-pos13 { top: 0px; left: 600px; }
.carrot-stash .pumpkin-pos14 { top: 0px; left: 650px; }
.carrot-stash .pumpkin-pos15 { top: 0px; left: 700px; }
.carrot-stash .pumpkin-pos16 { top: 0px; left: 750px; }
.carrot-stash .pumpkin-pos17 { top: 0px; left: 800px; }
.carrot-stash .pumpkin-pos18 { top: 0px; left: 850px; }
.carrot-stash .pumpkin-pos19 { top: 0px; left: 900px; }
.carrot-stash .pumpkin-pos20 { top: 0px; left: 950px; }
}

/* Background becomes static */
@media screen and (min-width: 320px) and (max-width: 1200px) {
section.scene.scene02 article .sign {left: 350px; transform: none;}
section.scene.scene02 article .bunny {left: 200px; transform: none;}
}

@media screen and (min-width: 320px) and (max-width: 1044px) {
section.welcome article .sign {width: 300px; height: 235px; top: -60px; right: 10px;}
section.welcome article .sign h1 {margin-top: 95px; margin-left: 70px; font-size: 1.8em;}
section.welcome article .content {width: calc(100% - 90px); padding: 25px; top: 130px; left: 20px;}
section.welcome article .content p {font-size: 1.1em;}
section.scene.scene05 article .sign {left: 40%; z-index: 25;}
section.scene.scene05 article .bunny {left: auto; right: 1%;}
.carrot-stash .pumpkin-pos01 { top: -40px; left: 0px; }
.carrot-stash .pumpkin-pos02 { top: -40px; left: 50px; }
.carrot-stash .pumpkin-pos03 { top: -40px; left: 100px; }
.carrot-stash .pumpkin-pos04 { top: -40px; left: 150px; }
.carrot-stash .pumpkin-pos05 { top: -40px; left: 200px; }
.carrot-stash .pumpkin-pos06 { top: -40px; left: 250px; }
.carrot-stash .pumpkin-pos07 { top: -40px; left: 300px; }
.carrot-stash .pumpkin-pos08 { top: -40px; left: 350px; }
.carrot-stash .pumpkin-pos09 { top: -40px; left: 400px; }
.carrot-stash .pumpkin-pos10 { top: -40px; left: 450px; }
.carrot-stash .pumpkin-pos11 { top: 10px; left: 0px; }
.carrot-stash .pumpkin-pos12 { top: 10px; left: 50px; }
.carrot-stash .pumpkin-pos13 { top: 10px; left: 100px; }
.carrot-stash .pumpkin-pos14 { top: 10px; left: 150px; }
.carrot-stash .pumpkin-pos15 { top: 10px; left: 200px; }
.carrot-stash .pumpkin-pos16 { top: 10px; left: 250px; }
.carrot-stash .pumpkin-pos17 { top: 10px; left: 300px; }
.carrot-stash .pumpkin-pos18 { top: 10px; left: 350px; }
.carrot-stash .pumpkin-pos19 { top: 10px; left: 400px; }
.carrot-stash .pumpkin-pos20 { top: 10px; left: 450px; }
}

@media screen and (min-width: 320px) and (max-width: 944px) {
.col2 {width: 50%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 25%;}
.col4-span3 {float: left; width: 75%;}
.col5 {float: left; width: 50%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 50%;}
section.login article .bunny {width: auto; min-width: 250px; height: auto; left: 70%; transform: translateX(0);}
section.login article .content {width: calc(90% - 100px); top: 25px; right: 5%;}
section.welcome article .bunny {width: auto; min-width: 250px; height: auto; left: 70%; transform: translateX(0);}
section.scene.scene06 article .sign {left: 62%;}
section.scene.scene06 article .bunny {left: 30%;}
section.scene.scene07 article .bunny {bottom: 25%; right: 25%;}
footer aside.copyright {padding: 0 0 36px 0;}
footer aside.copyright p {text-align: left;}
}

@media screen and (min-width: 320px) and (max-width: 844px) {
.col2 {float: left; width: 100%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 100%;}
.col4-span3 {float: left; width: 100%;}
.col5 {float: left; width: 100%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 100%;}
header .col4 {float: left; width: 25%;}
header .col4-span3 {float: left; width: 75%;}
section.login article .carrot.carrot1 {display: none;}
section.login article .carrot.carrot2 {width: 70px; height: 94px;}
section.login article .carrot.carrot3 {width: 50px; height: 67px;}
section.login article .carrot.carrot4 {width: 50px; height: 67px;}
section.scene.scene01 article .sign {width: 200px; height: 177px; bottom: 12%; left: 50%; transform: translateX(-50%);}
section.scene.scene01 article .sign h2 {margin-top: 45px; margin-left: 35px; font-size: 1.5em;}
section.scene.scene01 article .bunny {width: 107px; bottom: 80px; left: auto; right: 10px; transform: none;}
section.scene.scene02 article .sign {width: 200px; height: 177px; bottom: 20%; left: 100px;}
section.scene.scene02 article .sign h2 {margin-top: 30px; margin-left: 40px; font-size: 1.5em;}
section.scene.scene02 article .bunny {width: 107px; bottom: 150px; left: 260px;}
section.scene.scene03 article .bunny {width: 107px; bottom: 180px; left: 320px;}
section.scene.scene04 article .sign {width: 200px; height: 177px; bottom: 20%; left: 6%;}
section.scene.scene04 article .sign h2 {margin-top: 30px; margin-left: 45px; font-size: 1.5em;}
section.scene.scene04 article .bunny {width: 107px; bottom: 250px; left: 50%;}
section.scene.scene05 article .sign {width: 200px; height: 177px; bottom: 22%; left: 20%;}
section.scene.scene05 article .sign h2 {margin-top: 30px; margin-left: 45px; font-size: 1.5em;}
section.scene.scene05 article .bunny {width: 107px; bottom: 150px; right: 10%;}
section.scene.scene06 article .sign {width: 200px; height: 177px; bottom: 12%; left: 65%; transform: none;}
section.scene.scene06 article .sign h2 {margin-top: 32px; margin-left: 45px; font-size: 1.5em;}
section.scene.scene06 article .bunny {width: 107px; bottom: 80px; left: 35%; transform: none;}
section.scene.scene07 article .sign {width: 200px; height: 177px; bottom: 20%;}
section.scene.scene07 article .sign h2 {margin-top: 30px; margin-left: 40px; font-size: 1.5em;}
section.scene.scene07 article .bunny {width: 107px; bottom: 120px; left: 210px;}
section.scene.scene08 article .sign {width: 200px; height: 177px; bottom: 12%; left: 50%; transform: translateX(-50%);}
section.scene.scene08 article .sign h2 {margin-top: 45px; margin-left: 35px; font-size: 1.5em;}
section.scene.scene08 article .bunny {width: 107px; bottom: 80px; left: auto; right: 10px; transform: none;}
section.scene.scene09 article .sign {width: 200px; height: 177px; bottom: 20%; left: 100px;}
section.scene.scene09 article .sign h2 {margin-top: 30px; margin-left: 40px; font-size: 1.5em;}
section.scene.scene09 article .bunny {width: 107px; bottom: 150px; left: 260px;}
section.scene.scene10 article .sign {width: 140px; height: 260px;}
section.scene.scene10 article .sign h2 {margin-top: 50px; margin-left: 20px; font-size: 1.3em;}
section.scene.scene10 article .bunny {width: 127px; bottom: 120px; right: 10px;}
.no-respond {display: none;}
.popup-inner aside p span.fp {padding-top: 5px;}
}

@media screen and (min-width: 320px) and (max-width: 744px) {
section.login article .welcome {width: 250px; height: 307px;}
section.login article .welcome h1 {margin-top: 40px; font-size: 1.5em;}
section.login article .bunny {left: 60%;}
section.welcome article .bunny {left: 60%;}
section.scene article .progress-bar {margin: 60px 0 0 20px; max-width: 140px; width: 140px;}
section.scene article .progress-bar .basket {background: var(--dark-orange);}
section.scene article .progress-bar nav {display: none;}
section.complete article .progress-bar {margin: 60px 0 0 20px; max-width: 140px; width: 140px;}
section.complete article .progress-bar .basket {background: var(--dark-orange);}
section.complete article .progress-bar nav {display: none;}
footer aside.logo {width: 100%;}
footer aside.links {margin-left: 0; padding: 0 0 36px 0; width: 100%;}
.popup-question .popup-inner article {width: calc(100% - 52px);}
.popup-question .popup-inner aside {width: calc(100% - 52px); padding: 25px;}
.popup-question .popup-inner aside .title {float: left; width: 100%; height: 25px; position: relative; z-index: 30;}
.popup-question .popup-inner aside .title img {width: auto; height: auto;}
.popup-question .popup-inner aside .screenshot {float: right; width: calc(50% - 6px); padding: 35% 0 0 0;}
.popup-question .popup-inner aside .links {float: left; width: 45%; margin: 25px 5% 50px 0;}
}

@media screen and (min-width: 320px) and (max-width: 644px) {
section.scene.scene04 article .bunny {bottom: 250px; left: auto; right: 20px;}
.col7 {float: left; width: 100%;}
}

@media screen and (min-width: 320px) and (max-width: 544px) {
section.scene.scene04 article .bunny {bottom: 50px; left: auto; right: -15px;}
section.scene.scene05 article .sign {bottom: 18%; left: 2%;}
section.scene.scene05 article .bunny {bottom: 50px; right: 10%;}
section.scene.scene06 article .sign {bottom: 12%; left: auto; right: 2%;}
section.scene.scene08 article .bunny {bottom: 130px; left: 80%;}
section.scene.scene09 article .sign {bottom: 25%; left: 41%;}
section.scene.scene09 article .bunny {bottom: 25px; height: 200px; right: 10px;}
.popup-anagram .popup-inner article form input[type=text] {width: 20px; height: 20px; border-radius: 2px; margin: 0 1px 2px 1px; font-size: 1.1em;}
.popup-question .popup-inner article p {font-size: 1.0em;}
.popup-question .popup-inner article form label .text {font-size: 1.0em;}
section.complete article .carrot-stash .carrot {margin-top: -25px; font-size: 1.4em;}
.pumpkin1,.pumpkin2,.pumpkin3,.pumpkin4,.pumpkin5 {width: 70px; height: 70px;}
.carrot-stash .pumpkin-pos01 { top: -40px; left: -15px; }
.carrot-stash .pumpkin-pos02 { top: -40px; left: 25px; }
.carrot-stash .pumpkin-pos03 { top: -40px; left: 65px; }
.carrot-stash .pumpkin-pos04 { top: -40px; left: 105px; }
.carrot-stash .pumpkin-pos05 { top: -40px; left: 145px; }
.carrot-stash .pumpkin-pos06 { top: -40px; left: 185px; }
.carrot-stash .pumpkin-pos07 { top: -40px; left: 225px; }
.carrot-stash .pumpkin-pos08 { top: -40px; left: 265px; }
.carrot-stash .pumpkin-pos09 { top: -40px; left: 305px; }
.carrot-stash .pumpkin-pos10 { top: -40px; left: 345px; }
.carrot-stash .pumpkin-pos11 { top: 10px; left: -15px; }
.carrot-stash .pumpkin-pos12 { top: 10px; left: 25px; }
.carrot-stash .pumpkin-pos13 { top: 10px; left: 65px; }
.carrot-stash .pumpkin-pos14 { top: 10px; left: 105px; }
.carrot-stash .pumpkin-pos15 { top: 10px; left: 145px; }
.carrot-stash .pumpkin-pos16 { top: 10px; left: 185px; }
.carrot-stash .pumpkin-pos17 { top: 10px; left: 225px; }
.carrot-stash .pumpkin-pos18 { top: 10px; left: 265px; }
.carrot-stash .pumpkin-pos19 { top: 10px; left: 305px; }
.carrot-stash .pumpkin-pos20 { top: 10px; left: 345px; }
}

@media screen and (min-width: 320px) and (max-width: 444px) {
header a.btn {box-shadow: none; margin-top: 21px; width: 40px; background: var(--white); font-size: 1.2em; color: var(--dark-orange);}
header a.btn span {display: none;}
header a.btn::before {font-family: "Font Awesome 5 Free"; transition: all .25s ease-in-out; font-weight: 900; content: "\f2f5"; color: var(--dark-orange);}
header a.btn:hover::before {color: var(--light-orange);}
header a.btn:hover {color: var(--light-orange);}
section.login article .welcome {left: -30px;}
section.login article .carrot.carrot2 {display: none;}
section.login article .carrot.carrot3 {display: none;}
section.scene.scene02 article .sign {left: 40px;}
section.scene.scene02 article .bunny {width: 107px; bottom: 150px; left: 240px;}
section.scene.scene05 article .bunny {bottom: 20px; right: 10%;}
section.scene.scene06 article .bunny {bottom: 20px; left: 15%;}
section.scene.scene10 article .bunny {bottom: 50px; right: -25px;}
.popup-question .popup-inner aside .title img {display: none;}
.popup-question .popup-inner aside .screenshot {display: none;}
.popup-question .popup-inner aside .links {width: 100%; margin-top: 5px; margin-bottom: 50px;}
section.complete article .carrot-stash .carrot {margin-top: -27px; font-size: 1.2em;}
.pumpkin1,.pumpkin2,.pumpkin3,.pumpkin4,.pumpkin5 {width: 60px; height: 60px;}
.carrot-stash .pumpkin-pos01 { top: -10px; left: -15px; }
.carrot-stash .pumpkin-pos02 { top: -10px; left: 15px; }
.carrot-stash .pumpkin-pos03 { top: -10px; left: 45px; }
.carrot-stash .pumpkin-pos04 { top: -10px; left: 75px; }
.carrot-stash .pumpkin-pos05 { top: -10px; left: 105px; }
.carrot-stash .pumpkin-pos06 { top: -10px; left: 135px; }
.carrot-stash .pumpkin-pos07 { top: -10px; left: 165px; }
.carrot-stash .pumpkin-pos08 { top: -10px; left: 195px; }
.carrot-stash .pumpkin-pos09 { top: -10px; left: 225px; }
.carrot-stash .pumpkin-pos10 { top: -10px; left: 255px; }
.carrot-stash .pumpkin-pos11 { top: 30px; left: -15px; }
.carrot-stash .pumpkin-pos12 { top: 30px; left: 15px; }
.carrot-stash .pumpkin-pos13 { top: 30px; left: 45px; }
.carrot-stash .pumpkin-pos14 { top: 30px; left: 75px; }
.carrot-stash .pumpkin-pos15 { top: 30px; left: 105px; }
.carrot-stash .pumpkin-pos16 { top: 30px; left: 135px; }
.carrot-stash .pumpkin-pos17 { top: 30px; left: 165px; }
.carrot-stash .pumpkin-pos18 { top: 30px; left: 195px; }
.carrot-stash .pumpkin-pos19 { top: 30px; left: 225px; }
.carrot-stash .pumpkin-pos20 { top: 30px; left: 255px; }
}

@media screen and (min-width: 320px) and (max-width: 344px) {
section.scene.scene03 article .bunny {width: 107px; bottom: 60px; left: 290px;}
}