/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
    font-family: 'calibri';
    font-weight: normal;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    overflow:hidden;
    background:#000;
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
	font-family: Arial;
	color: #000;
	font-size: 16px;
}

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:9999; /* makes sure it stays on top */
}
.pre-title{
    font-size: 4em;
    position: relative;
    top: 5em;
    left: 8em;
}
.pre-subtitle{
    font-size:2em;
    font-weight: 500;
    position: relative;
    top: 9em;
    left: 18em;
}
#preloader > img{ display: none; }
#preloader > img, .background > img{ width: 100%; }
.gamestart{ position: absolute; top: 3.2em; font-size: 1.8em; left: 4.4em; width: 6.5em; display: none;  border-radius: 0.625em; background: #2F528F; outline: 0;  border: 1px solid #2F528F; color: #fff; padding: 0.5em 0.5em; border-radius: 0.4em; cursor: pointer; }
.play { position: absolute; bottom: 2.45em; font-size: 1.8em; right: 0.5em; width: 6.5em; padding: 0.4em 0.7em; border-radius: 0.625em; background: #2F528F; outline: 0;  border: 1px solid #2F528F; color: #fff; padding: 0.5em 0.5em; border-radius: 0.4em; cursor: pointer; }
.wGlow {
	-webkit-animation: whiteGlow 3s infinite; /* Safari 4+ */
	-moz-animation: whiteGlow 3s infinite; /* Fx 5+ */
	-o-animation: whiteGlow 3s infinite; /* Opera 12+ */
	animation: whiteGlow 3s infinite; /* IE 10+, Fx 29+ */
}
.background{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    color: white;
    text-align: center;
    overflow: hidden;
    background-color: white;
	/*background: url("../img/farm-bg.png") no-repeat center / contain;*/
}
.game-view{
	overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}
.title-img{
    position: absolute;
    background: url("../img/scenes/1-Title/1-Title-BG-animated.png") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.start-img{
    position: absolute;
    background: url("../img/scenes/2-Start/2-start-BG.png") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.start-frames{
    position: absolute;
    background: url("../img/scenes/2-Start/2-start-layer-1.png") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.next-btn{
    position: absolute;
    bottom: 2em;
    right: 2em;
    background: url("../img/scenes/2-Start/2-start-button-next.png") no-repeat center / cover;
    width: 17.5em;
    height: 6.5em;
}
.next-btn:hover{
    background: url("../img/scenes/2-Start/2-start-button-next-over.png") no-repeat center / cover;
    cursor: pointer;
}
.page3-bg{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
#page3 .farm-bg .farm-area1{
    position: absolute;
    top: 2.8em;
    left: 2.8em;
    width: 38em;
    height: 38.3em;
    border-radius: 34em;
    cursor: pointer;
}
#page3 .farm-bg .farm-area2{
    position: absolute;
    width: 12.1em;
    height: 6.3em;
    top: 30.6em;
    left: 31em;
    cursor: pointer;
}
#page3 .store-bg .store-area1{
    position: absolute;
    top: 3em;
    left: 2.7em;
    width: 38.6em;
    height: 38.6em;
    border-radius: 34em;
}
#page3 .store-bg .store-area2{
    position: absolute;
    width: 12.1em;
    height: 6.2em;
    top: 31em;
    left: 1.4em;
}
#page3 .farm-bg{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-farm-button.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    left: 1em;
    top: 6.3em;
    z-index: 1;
}
#page3 .farm1-bg{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-farm-button-over.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    left: 1em;
    top: 6.3em;
   z-index: 0;
   display: none;
}
#page3 .store-bg{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-store-button.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    right: 1em;
    top: 6em;
    z-index: 1;
}
#page3 .store1-bg{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-store-button-over.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    right: 1em;
    top: 6em;
    z-index: 0;
    display: none;
}
.plant{
    position: absolute;
    background: url("../img/scenes/4.0-Plant/4-Plant-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.tractors{
    position: absolute;
    top: 17em;
    right: 1.2em;
    width: 37em;
    height: 28em;
}
.dd{ cursor: pointer;}
#page4 .tractor-1{
    position: absolute;
    top: 1em;
    left: 3em;
}
#page4 .tractor-2{
    position: absolute;
    top: 9.5em;
    left: 21.5em;
}
#page4 .tractor-3{
    position: absolute;
    top: 11em;
    left: 1em;
}
#page4 .tractor-4{
    position: absolute;
    top: 18em;
    left: 19em;
    -webkit-clip-path: polygon(2% 96%, 7% 98%, 15% 99%, 23% 98%, 28% 96%, 34% 98%, 61% 100%, 75% 100%, 91% 100%, 99% 98%, 99% 67%, 99% 31%, 97% 4%, 92% 0%, 60% 0%, 46% 0%, 36% 17%, 25% 46%, 7% 72%, 0% 87%);
    clip-path: polygon(2% 96%, 7% 98%, 15% 99%, 23% 98%, 28% 96%, 34% 98%, 61% 100%, 75% 100%, 91% 100%, 99% 98%, 99% 67%, 99% 31%, 97% 4%, 92% 0%, 60% 0%, 46% 0%, 36% 17%, 25% 46%, 7% 72%, 0% 87%);
}
#page4 .tractor-5{
    position: absolute;
    top: 21.5em;
    left: 2em;
}
#page4 .tractor-1 img{ width: 23em; height: 9em;}
#page4 .tractor-2 img{ width: 15em; height: 9em;}
#page4 .tractor-3 img{ width: 21em; height: 10em;}
#page4 .tractor-4 img{ width: 18em; height: 10em;}
#page4 .tractor-5 img{ width: 16em; height: 8em;}


.popup{
    position: absolute;
    background: url("../img/scenes/4.5-Plant-Error/4.5-Plant-error.png") no-repeat center / contain;
    width: 50em;
    height: 38em;
    top: 7em;
    left: 19em;
    display: none;
}
.btn-tryagain{
    width: 24em;
    height: 7.5em;
    position: absolute;
    top: 28em;
    left: 13em;
    border-radius: 1em;
    cursor: pointer;
}
.fact1-bg{
    position: absolute;
    background: url("../img/scenes/5-Fact_One/5-Fact-One-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.fact-next-btn{
    position: absolute;
    bottom: 1.9em;
    right: 2.3em;
    background: url("../img/scenes/5-Fact_One/5-Fact-One-next-button.png") no-repeat center / contain;
    width: 15.9em;
    height: 7em;
    cursor: pointer;
    z-index: 1;
    display: none;
}/*
.fact-next-btn:hover{
    position: absolute;
    background: url("../img/scenes/5-Fact_One/5-Fact-One-next-button-over.png") no-repeat center / contain;
    bottom: 0em;
    right: -0.5em;
    width: 22em;
    height: 11em;
    cursor: pointer;
}*/
.fact-next-btn1{
    position: absolute;
    background: url("../img/scenes/5-Fact_One/5-Fact-One-next-button-over.png") no-repeat center / contain;
    bottom: 0em;
    right: -0.5em;
    width: 22em;
    height: 11em;
    cursor: pointer;
    z-index: 0;
    display: none;
}
.animation{
    position: absolute;
    width: 35em;
    height: 14em;
    left: 17em;
    top: 10em;
}
.tractor-img{
    width: 23em;
    height: 9em;
}
.tractor-flip-img{
    position: absolute;
    top: 12em;
    left: -47em;
    width: 23em;
    height: 9em;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.ui-draggable-dragging{
    z-index: 999;
}
.irrigate-bg{
    position: absolute;
    background: url("../img/scenes/6-Irrigate/6-Irrigate-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.irpart1{
    position: absolute;
    background: url("../img/scenes/6-Irrigate/6-Irrigate-pipe.png") no-repeat center / cover;
    width: 32em;
    height: 11em;
    top: 14em;
    left: 7em;
    transform: rotate(9deg);
    display: none;
}
.irpart2{
    position: absolute;
    background: url("../img/scenes/6-Irrigate/6-Irrigate-sprayer.png") no-repeat center / cover;
    width: 7em;
    height: 11em;
    top: 16em;
    left: 33em;
    display: none;
    z-index: 1;
}
.irpart3{
    position: absolute;
    background: url("../img/scenes/6-Irrigate/6-Irrigate-support.png") no-repeat center / cover;
    width: 23em;
    height: 24em;
    top: 15em;
    left: 17em;
    z-index: 1;
    display: none;
}
.irpart4{
    position: absolute;
    background: url("../img/scenes/6-Irrigate/6-Irrigate-double-sprayer.png") no-repeat center / cover;
    width: 8em;
    height: 9em;
    top: 14em;
    left: 7em;
    display: none;
}
.irrigate-parts{
    position: absolute;
    top: 17em;
    right: 1.2em;
    width: 37em;
    height: 28em;
}
.irrigatepart-1 img{
    width: 34em;
    height: 19em;
    position: absolute;
    top: -1em;
    left: 2em;
}
.irrigatepart-2 img{
    width: 7em;
    height: 12em;
    position: absolute;
    top: 9em;
    left: 18em;
}
.irrigatepart-3 img{
    width: 18em;
    height: 18em;
    position: absolute;
    top: 10em;
    left: 1em;
}
.irrigatepart-4 img{
    width: 14em;
    height: 15em;
    position: absolute;
    top: 13em;
    left: 21em;
}
.irrigate1-bg{
    position: absolute;
    background: url("../img/scenes/7-Irrigate_Complete/7-Irrigate-Complete-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.power-btn{
    position: absolute;
    width: 5.78em;
    height: 5.786em;
    top: 32.5em;
    left: 26em;
    border-radius: 30em;
    cursor: pointer;
    background: url("../img/scenes/7-Irrigate_Complete/yellow-btn.png") no-repeat center / contain;
}
.power-btn:hover{
    background: url("../img/scenes/7-Irrigate_Complete/white-btn.png") no-repeat center / contain;
}
/*
.power-btn1{
    position: absolute;
    width: 3em;
    height: 3em;
    top: 34em;
    left: 27.35em;
    border-radius: 30em;
    cursor: pointer;
    background: url("../img/scenes/7-Irrigate_Complete/7-Irrigate-Complete-button-mini.png") no-repeat center / contain;
    display: none;
}
*/
.watering{display: none;}
.water1{
    position: absolute;
    width: 5em;
    height: 5em;
    top: 8em;
    left: 45em;
}
.water1 img{ width: 12em; height: 10em;}
.water2{
    position: absolute;
    width: 5em;
    height: 5em;
    top: 14em;
    left: 4.5em;
}
.water2 img{ width: 6em; height: 6em;}
.water3{
    position: absolute;
    width: 5em;
    height: 5em;
    top: 19em;
    left: 10.7em;
}
.water3 img{ width: 10em; height: 11em;}
.water4{
    position: absolute;
    width: 5em;
    height: 5em;
    top: 19.5em;
    left: 19.7em;
}
.water4 img{ width: 10em; height: 11em;}
.irrigate3-bg{
    position: absolute;
    background: url("../img/scenes/8-Fact_Two/8-Fact-Two-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.fact2-next-btn{
    position: absolute;
    bottom: 2.5em;
    right: 3.3em;
    background: url("../img/scenes/8-Fact_Two/8-Fact-Two-next-button.png") no-repeat center / contain;
    width: 14.5em;
    height: 6em;
    cursor: pointer;
    display: none;
}
.fact2-next-btn:hover{
    position: absolute;
    background: url("../img/scenes/8-Fact_Two/8-Fact-Two-next-button-over.png") no-repeat center / contain;
    bottom: 0.5em;
    right: -0.5em;
    width: 22.5em;
    height: 10em;
    cursor: pointer;
}
.plant1-bg{
    position: absolute;
    background: url("../img/scenes/9.0-Fertilizer/9-Fertilizer-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
#page9 .tractor-1{
    position: absolute;
    top: 3em;
    left: 2em;
}
#page9 .tractor-2{
    position: absolute;
    top: 1.5em;
    left: 18.5em;
    -webkit-clip-path: polygon(2% 96%, 7% 98%, 15% 99%, 23% 98%, 28% 96%, 34% 98%, 61% 100%, 75% 100%, 91% 100%, 99% 98%, 99% 67%, 99% 31%, 97% 4%, 92% 0%, 60% 0%, 46% 0%, 36% 17%, 25% 46%, 7% 72%, 0% 87%);
clip-path: polygon(2% 96%, 7% 98%, 15% 99%, 23% 98%, 28% 96%, 34% 98%, 61% 100%, 75% 100%, 91% 100%, 99% 98%, 99% 67%, 99% 31%, 97% 4%, 92% 0%, 60% 0%, 46% 0%, 36% 17%, 25% 46%, 7% 72%, 0% 87%);
}
#page9 .tractor-3{
    position: absolute;
    top: 11em;
    left: 1em;
}
#page9 .tractor-4{
    position: absolute;
    top: 20em;
    left: 1em;
}
#page9 .tractor-5{
    position: absolute;
    top: 19.5em;
    left: 21em;
}
#page9 .tractor-1 img{  width: 16em; height: 8em;}
#page9 .tractor-2 img{  width: 17em; height: 10em;}
#page9 .tractor-3 img{  width: 35em; height: 9em;}
#page9 .tractor-4 img{  width: 18em; height: 9em;}
#page9 .tractor-5 img{  width: 15em; height: 9em;}
.popup1{
    position: absolute;
    background: url("../img/scenes/9.5-Fertilizer-Error/9.5-Fertilize-error.png") no-repeat center / contain;
    width: 50em;
    height: 38em;
    top: 7em;
    left: 19em;
    display: none;
}
.popup1 .btn-tryagain1{
    width: 24em;
    height: 7.5em;
    position: absolute;
    top: 28.7em;
    left: 13em;
    border-radius: 1em;
    cursor: pointer;
}
.fact3-bg{
    position: absolute;
    background: url("../img/scenes/10-Fact_Three/10-Fertilizer-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.fact3-next-btn{
    position: absolute;
    bottom: 2.5em;
    right: 3.3em;
    background: url("../img/scenes/10-Fact_Three/10-Fertilizer-next-button.png") no-repeat center / contain;
    width: 14.5em;
    height: 6em;
    cursor: pointer;
    display: none;
}
.fact3-next-btn:hover{
    position: absolute;
    background: url("../img/scenes/10-Fact_Three/10-Fertilizer-next-button-over.png") no-repeat center / contain;
    bottom: 0.5em;
    right: -0.5em;
    width: 22.5em;
    height: 10em;
    cursor: pointer;
}
#page10 .animation{
    position: absolute;
    top: 9em;
    left: 8.8em;
}
.fertilize-img{
    width: 35em;
    height: 9em;
}
.plant2-bg{
    position: absolute;
    background: url("../img/scenes/11.0-Crop_Protection/11-Crop-Protection-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
#page11 .tractor-1{
    position: absolute;
    top: 6em;
    left: 7em;
}
#page11 .tractor-2{
    position: absolute;
    top: 6em;
    left: 23em;
}
#page11 .tractor-3{
    position: absolute;
    top: 18em;
    left: 1em;
}
#page11 .tractor-4{
    position: absolute;
    top: 15em;
    left: 14em;
}
#page11 .tractor-5{
    position: absolute;
    top: 15em;
    left: 27em;
}
#page11 .tractor-1 img{  width: 5.6em; height: 12.2em;}
#page11 .tractor-2 img{  width: 7.3em; height: 11.5em;}
#page11 .tractor-3 img{  width: 11em; height: 11em;}
#page11 .tractor-4 img{  width: 10em; height: 14em;}
#page11 .tractor-5 img{  width: 9em; height: 14.5em;}

.horseweed{left: 8em; position: absolute; top: 37em;}
.horseweed img{width: 13em; height: 13em;}
.horseweed1{left: 23em;position: absolute;top: 24em;}
.horseweed1 img{width: 11em;height: 11em;}
.thistle{left: 22em;position: absolute;top: 7em;}
.thistle img{ width: 8em; height: 11em;}
.thistle1{  left: 43em;  position: absolute;  top: 29em;}
.thistle1 img{  width: 8em;  height: 11em;}
.purslane{ position: absolute; top: 15em; left: 10em;}
.purslane img{ width: 4em; height: 4em;}
.purslane1{ position: absolute; top: 18em; left: 16em;}
.purslane1 img{ width: 7em; height: 7em;}
.purslane2{ position: absolute; top: 28em; left: 2em;}
.purslane2 img{ width: 5em; height: 5em; transform: rotate(180deg);}
.purslane3{ position: absolute; top: 38em; left: 24em;}
.purslane3 img{ width: 6em; height: 6em; transform: rotate(16deg);}
.purslane4{ position: absolute; top: 42em; left: 38em;}
.purslane4 img{ width: 6em; height: 6em; transform: rotate(189deg);}
.d-horseweed{ left: 7em; position: absolute; top: 37em; display: none;}
.d-horseweed img{width: 13em; height: 13em;}
.d-horseweed1{ left: 22em; position: absolute; top: 25em; display: none;}
.d-horseweed1 img{width: 11em; height: 11em;}
.d-thistle{ left: 23em; position: absolute; top: 8em; display: none;}
.d-thistle img{  width: 8em; height: 11em;}
.d-thistle1{ left: 44em; position: absolute; top: 30em; display: none;}
.d-thistle1 img{  width: 8em; height: 11em;}
.popup2{
    position: absolute;
    background: url("../img/scenes/11.5-Crop_Protection-Error/11.5-Crop-protection-error.png") no-repeat center / contain;
    width: 50em;
    height: 38em;
    top: 7em;
    left: 19em;
    display: none;
}
.popup2 .btn-tryagain2{
    width: 24em;
    height: 7.5em;
    position: absolute;
    top: 28.7em;
    left: 13em;
    border-radius: 1em;
    cursor: pointer;
}
.fact4-bg{
    position: absolute;
    background: url("../img/scenes/12-Fact_Four/12-Fact-Four-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.fact4-next-btn{
    position: absolute;
    bottom: 2.5em;
    right: 3.3em;
    background: url("../img/scenes/12-Fact_Four/12-Fact-Four-next-button.png") no-repeat center / contain;
    width: 14.5em;
    height: 6em;
    cursor: pointer;
    display: none;
}
.fact4-next-btn:hover{
    position: absolute;
    background: url("../img/scenes/12-Fact_Four/12-Fact-Four-next-button-over.png") no-repeat center / contain;
    bottom: 0.5em;
    right: -0.5em;
    width: 22.5em;
    height: 10em;
    cursor: pointer;
}
.growinga-bg{
    position: absolute;
    background: url("../img/scenes/13-Growing_A/13-Growing-A-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.growinga-btn{
   position: absolute;
   top: 30em;
   left:68em;
   width: 20em;
   height: 10em;
   background: url("../img/scenes/13-Growing_A/13-Growing-A-pointer-button.png") no-repeat center / cover;
   border-radius: 0 7em 0 10em;
   cursor: pointer;
}
.growinga1-btn{
    position: absolute;
    top: 30em;
    left: 67.6em;
    width: 20.7em;
    height: 10em;
    background: url("../img/scenes/13-Growing_A/13-Growing-A-pointer-button-over.png") no-repeat center / cover;
    border-radius: 0 7em 0 10em;
    cursor: pointer;
    display: none;
 }

.growingb-bg{
    position: absolute;
    background: url("../img/scenes/14-Growing_B/14-Growing-B-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.growingb-btn1{
   position: absolute;
   top: 29.9em;
   left: 63.2em;
   width: 24em;
   height: 6em;
   background: url("../img/scenes/14-Growing_B/14-Growing-B-pointer-internode-button.png") no-repeat center / cover;
   cursor: pointer;
   z-index: 1;
}

.growingb-btn2{
    position: absolute;
    top: 40.7em;
    left: 64em;
    width: 18em;
    height: 7em;
    background: url("../img/scenes/14-Growing_B/14-Growing-B-pointer-node-button.png") no-repeat center / cover;
    cursor: pointer;
    z-index: 1;
 }
 .growingb1-btn1{
    position: absolute;
    top: 29.5em;
    left: 62.8em;
    width: 24.5em;
    height: 7em;
    background: url("../img/scenes/14-Growing_B/14-Growing-B-pointer-internode-button-over.png") no-repeat center / cover;
    cursor: pointer;
    z-index: 0;
    display: none;
 }
 
 .growingb1-btn2{
     position: absolute;
     top: 40.5em;
    left: 63.5em;
    width: 18.8em;
    height: 7.5em;
     background: url("../img/scenes/14-Growing_B/14-Growing-B-pointer-node-button-over.png") no-repeat center / cover;
     cursor: pointer;
     z-index: 0;
     display: none;
  }

 .growingc-bg{
    position: absolute;
    background: url("../img/scenes/15-Growing_C/15-Growing-C-BG.jpg") no-repeat center / contain;
    width: 90em;
    height: 51em;
}
.growingc-btn{
   position: absolute;
   top: 25.7em;
    left: 59em;
    width: 29em;
    height: 14.5em;
   background: url("../img/scenes/15-Growing_C/15-Growing-C-pointer-pinhead-button.png") no-repeat center / contain;
   cursor: pointer;
   z-index: 1;
}
.growingc1-btn{
    position: absolute;
    top: 25.4em;
    left: 59.1em;
    width: 28.5em;
    height: 15.4em;
    background: url("../img/scenes/15-Growing_C/15-Growing-C-pointer-pinhead-button-over.png") no-repeat center / contain;
    cursor: pointer;
    z-index: 0;
    display: none;
 }
.growingd-bg{
    position: absolute;
    background: url("../img/scenes/16-Growing_D/16-Growing-D-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.growingd-btn1{
   position: absolute;
   top: 24.9em;
   left: 68em;
   width: 22em;
   height: 8em;
   background: url("../img/scenes/16-Growing_D/16-Growing-D-pointer-buds-button.png") no-repeat center / cover;
   cursor: pointer;
   z-index: 1;
}
.growingd1-btn1{
    position: absolute;
    top: 24.5em;
    left: 67.4em;
    width: 23em;
    height: 8.9em;
    background: url("../img/scenes/16-Growing_D/16-Growing-D-pointer-buds-button-over.png") no-repeat center / cover;
    cursor: pointer;
    z-index: 0;
    display: none;
 }
.growingd-btn2{
    position: absolute;
    top: 38em;
    left: 58.5em;
    width: 27em;
    height: 8em;
    background: url("../img/scenes/16-Growing_D/16-Growing-D-pointer-blooms-button.png") no-repeat center / cover;
    cursor: pointer;
    z-index: 1;
 }
 .growingd1-btn2{
    position: absolute;
    top: 37.4em;
    left: 58.1em;
    width: 27.5em;
    height: 9em;
    background: url("../img/scenes/16-Growing_D/16-Growing-D-pointer-blooms-button-over.png") no-repeat center / cover;
    cursor: pointer;
    z-index: 0;
    display: none;
 }
 .growinge-bg{
    position: absolute;
    background: url("../img/scenes/17-Growing_E/17-Growing-E-BG.jpg") no-repeat center / contain;
    width: 90em;
    height: 51em;
}
.growinge-btn{
   position: absolute;
   top: 33.7em;
   left: 59.5em;
   width: 29em;
   height: 14.5em;
   background: url("../img/scenes/17-Growing_E/17-Growing-E-pointer-bolls-button.png") no-repeat center / contain;
   cursor: pointer;
   z-index: 1;
}
.growinge1-btn{
    position: absolute;
    top: 33.7em;
    left: 60.2em;
    width: 27.5em;
    height: 14.5em;
    background: url("../img/scenes/17-Growing_E/17-Growing-E-pointer-bolls-button-over.png") no-repeat center / cover;
    cursor: pointer;
    z-index: 0;
    display: none;
 }
.plant3-bg{
    position: absolute;
    background: url("../img/scenes/18.0-Defoliate/18-Defoliate-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
#page18 .tractor-1{
    position: absolute;
    top: 6em;
    left: 7em;
}
#page18 .tractor-2{
    position: absolute;
    top: 6em;
    left: 23em;
}
#page18 .tractor-3{
    position: absolute;
    top: 18em;
    left: 1em;
}
#page18 .tractor-4{
    position: absolute;
    top: 15em;
    left: 14em;
}
#page18 .tractor-5{
    position: absolute;
    top: 15em;
    left: 27em;
}
#page18 .tractor-1 img{  width: 5.6em; height: 12.2em;}
#page18 .tractor-2 img{  width: 7.3em; height: 11.5em;}
#page18 .tractor-3 img{  width: 11em; height: 11em;}
#page18 .tractor-4 img{  width: 10em; height: 14em;}
#page18 .tractor-5 img{  width: 9em; height: 14.5em;}
.popup3{
    position: absolute;
    background: url("../img/scenes/18.5-Defoliate-Error/18.5-Defoliate-error.png") no-repeat center / contain;
    width: 50em;
    height: 38em;
    top: 7em;
    left: 19em;
    display: none;
}
.popup3 .btn-tryagain3{
    width: 24em;
    height: 7.5em;
    position: absolute;
    top: 28.7em;
    left: 13em;
    border-radius: 1em;
    cursor: pointer;
}
.defoliant-pour{
    position: absolute;
    background: url("../img/scenes/18.7-Defoliate-Success/18.7-pour-defoliant.png") no-repeat center / contain;
    width: 26em;
    height: 19em;
    top: 10.9em;
    left: 15em;
    display: none;
}
.fact5-bg{
    position: absolute;
    background: url("../img/scenes/19-Fact_Five/19-Fact-Five-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.fact5-next-btn{
    position: absolute;
    bottom: 2.5em;
    right: 3.3em;
    background: url("../img/scenes/19-Fact_Five/19-Fact-Five-next-button.png") no-repeat center / contain;
    width: 14.5em;
    height: 6em;
    cursor: pointer;
    display: none;
}
.fact5-next-btn:hover{
    position: absolute;
    background: url("../img/scenes/19-Fact_Five/19-Fact-Five-next-button-over.png") no-repeat center / contain;
    bottom: 0.5em;
    right: -0.5em;
    width: 22.5em;
    height: 10em;
    cursor: pointer;
}
.plant4-bg{
    position: absolute;
    background: url("../img/scenes/20.0-Harvest/20-Harvest-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
#page20 .tractors{
    position: absolute;
    top: 17em;
    right: 1.2em;
    width: 37em;
    height: 28em;
}
#page20 .tractor-1{
    position: absolute;
    top: 1em;
    left: 2em;
}
#page20 .tractor-2{
    position: absolute;
    top: 5.5em;
    left: 18.5em;
    -webkit-clip-path: polygon(2% 96%, 7% 98%, 15% 99%, 23% 98%, 28% 96%, 34% 98%, 61% 100%, 75% 100%, 91% 100%, 99% 98%, 99% 67%, 99% 31%, 97% 4%, 92% 0%, 60% 0%, 46% 0%, 36% 17%, 25% 46%, 7% 72%, 0% 87%);
clip-path: polygon(2% 96%, 7% 98%, 15% 99%, 23% 98%, 28% 96%, 34% 98%, 61% 100%, 75% 100%, 91% 100%, 99% 98%, 99% 67%, 99% 31%, 97% 4%, 92% 0%, 60% 0%, 46% 0%, 36% 17%, 25% 46%, 7% 72%, 0% 87%);
}
#page20 .tractor-3{
    position: absolute;
    top: 11em;
    left: 1em;
}
#page20 .tractor-4{
    position: absolute;
    top: 20em;
    left: 20em;
}
#page20 .tractor-5{
    position: absolute;
    top: 21.5em;
    left: 2em;
}
#page20 .tractor-1 img{
    width: 23em;
    height: 9em;
}
#page20 .tractor-2 img{
    width: 18em;
    height: 10em;
}
#page20 .tractor-3 img{
    width: 21em;
    height: 10em;
}
#page20 .tractor-4 img{
    width: 16em;
    height: 9em;
}
#page20 .tractor-5 img{
    width: 16em;
    height: 8em;
}
.popup4{
    position: absolute;
    background: url("../img/scenes/20.5-Harvest-Error/20.5-Harvest-error.png") no-repeat center / contain;
    width: 50em;
    height: 38em;
    top: 7em;
    left: 19em;
    display: none;
}
.btn-tryagain4{
    width: 24em;
    height: 7.5em;
    position: absolute;
    top: 28em;
    left: 13em;
    border-radius: 1em;
    cursor: pointer;
}
.harvest-animation{
    position: absolute;
    background: url("../img/scenes/20.5-Harvest-Error/20-Harvest-harvester.png") no-repeat center / cover;
    width: 21.5em;
    height: 10em;
    top: 9em;
    left: 26.3em;
    display: none;
}
.harvest-flip-img{
    background: url("../img/scenes/20.5-Harvest-Error/20-Harvest-harvester.png") no-repeat center / cover;
    position: absolute;
    top: 21em;
    left: -21.5em;
    width: 21em;
    height: 10em;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    display: none;
}
.fact6-bg{
    position: absolute;
    background: url("../img/scenes/21-Fact_Six/21-Fact-Six-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.fact6-next-btn{
    position: absolute;
    bottom: 2.5em;
    right: 3.3em;
    background: url("../img/scenes/21-Fact_Six/21-Fact-Six-next-button.png") no-repeat center / contain;
    width: 14.5em;
    height: 6em;
    cursor: pointer;
    display: none;
}
.fact6-next-btn:hover{
    position: absolute;
    background: url("../img/scenes/21-Fact_Six/21-Fact-Six-next-button-over.png") no-repeat center / contain;
    bottom: 0.5em;
    right: -0.5em;
    width: 22.5em;
    height: 10em;
    cursor: pointer;
}
.load-bg{
    position: absolute;
    background: url("../img/scenes/22.0-Load_Truck/22-Harvest-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.popup-wrong{
    position: absolute;
    background: url("../img/scenes/22.5-Load_Truck-Error/22.5-Load-Truck-error.png") no-repeat center / contain;
    width: 50em;
    height: 38em;
    top: 7em;
    left: 19em;
    display: none;
}
.popup-right{
    position: absolute;
    background: url("../img/scenes/22.7-Load_Truck-Success/22.7-Load-Truck-success.png") no-repeat center / contain;
    width: 50em;
    height: 38em;
    top: 7em;
    left: 19em;
    display: none;
}
.btn-tryagain5{
    width: 24em;
    height: 7.5em;
    position: absolute;
    top: 28em;
    left: 13em;
    border-radius: 1em;
    cursor: pointer;
}
.btn-continue{
    width: 24em;
    height: 7.5em;
    position: absolute;
    top: 28em;
    left: 13em;
    border-radius: 1em;
    cursor: pointer;
}
.drag-success5{
    position: absolute;
    width: 20em;
    height: 20em;
    top: 1em;
    left: 1em;
}
.drag-success5 img{ position: absolute; width: 10em; height: 9em;}
.drag-success5:nth-child(1){position: absolute; top: 9em; left: 32em;}
.drag-success5:nth-child(2){position: absolute; top: 11em; left: 3em;}
.drag-success5:nth-child(3){ position: absolute;top: 19em; left: 17em;}
.drag-success5:nth-child(4){ position: absolute;top: 19em; left: 37em;}
.drag-success5:nth-child(5){position: absolute;top: 28em; left: 9em;}
.drag-success5:nth-child(6){position: absolute;top: 29em; left: 37em;}
.drag-success5:nth-child(7){position: absolute;top: 37em; left: 2em;}
.rock-1, .rock-2{
    position: absolute;
    width: 10em;
    height: 10em;
    top: 5em;
    left: 5em;
}
.rock-1 img,.rock-2 img{position:absolute; width: 12em; height: 7em;}
.rock-1{position: absolute; top:9em; left: 16em;}
.rock-2{position: absolute; top:21em; left: 1em;}
.shovel{
  position: absolute;
  top: 8em;
  left: 41em;
}
.shovel img{
    position: absolute;
    width: 7em;
    height: 6em;
}
.cat{
    position: absolute;
    top: 29em;
    left: 1em;
}
.cat img{
    position: absolute;
    width: 5em;
    height: 6em;
}
.scarecrow{
    position: absolute;
    top: 26em;
    left: 25em;
}
.scarecrow img{
    position: absolute;
    width: 12em;
    height: 13em;
}
.drag-success5{
    position: absolute;
    width: 20em;
    height: 20em;
    top: 1em;
    left: 1em;
}
.bale{display: none;}
.bale img{ position: absolute; width: 6em; height: 5em;}
.bale:nth-child(1){position: absolute; top: 38em; left: 73em;}
.bale:nth-child(2){position: absolute; top: 38em; left: 67em;}
.bale:nth-child(3){ position: absolute;top: 38em; left: 61em;}
.bale:nth-child(4){ position: absolute;top: 38em; left: 55em;}
.bale:nth-child(5){position: absolute;top: 33.8em; left: 70em;}
.bale:nth-child(6){position: absolute;top: 33.8em; left: 64em;}
.bale:nth-child(7){position: absolute;top: 33.8em; left: 58em;}
.processing-bg{
    position: absolute;
    background: url("../img/scenes/23-Processing/23-Processing-BG.png") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.processing-next-btn{
    position: absolute;
    bottom: 9.5em;
    left: 2.5em;
    background: url("../img/scenes/23-Processing/23-Processing-next-button.png") no-repeat center / cover;
    width: 18.5em;
    height: 6em;
    cursor: pointer;
}
.processing-next-btn:hover{
    background: url("../img/scenes/23-Processing/23-Processing-next-button-over.png") no-repeat center / cover;
}
.page24-bg{
    position: absolute;
    background: url("../img/scenes/24-Store_or_Farm/24-Farm-Store-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
#page24 .farm-bg1 .farm-area11{
    position: absolute;
    top: 2.8em;
    left: 2.8em;
    width: 38em;
    height: 38.3em;
    border-radius: 34em;
}
#page24 .farm-bg1 .farm-area22{
    position: absolute;
    width: 12.1em;
    height: 6.3em;
    top: 30.6em;
    left: 31em;
}
#page24 .store-bg1 .store-area11{
    position: absolute;
    top: 3em;
    left: 2.7em;
    width: 38.6em;
    height: 38.6em;
    border-radius: 34em;
    cursor: pointer;
}
#page24 .store-bg1 .store-area22{
    position: absolute;
    width: 12.1em;
    height: 6.2em;
    top: 31em;
    left: 1.4em;
    cursor: pointer;
}
#page24 .farm-bg1{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-farm-button.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    left: 1em;
    top: 6.3em;
    z-index: 1;
}
#page24 .farm1-bg1{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-farm-button-over.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    left: 1em;
    top: 6.3em;
   z-index: 0;
   display: none;
}
#page24 .store-bg1{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-store-button.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    right: 1em;
    top: 6em;
    z-index: 1;
}
#page24 .store1-bg1{
    position: absolute;
    background: url("../img/scenes/3-Farm_or_Store/3-Farm-Store-store-button-over.png") no-repeat center / contain;
    width: 44em;
    height: 44em;
    right: 1em;
    top: 6em;
    z-index: 0;
    display: none;
}

.quiz-bg{
    position: absolute;
    background: url("../img/scenes/25-Store_Quiz_A/25-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.correct-screen{
    position: absolute;
    background: url("../img/scenes/26-Store_Quiz_A-Correct/26-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.correct-screen1{
    position: absolute;
    background: url("../img/scenes/29-Store_Quiz_B-Correct/29-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.wrong-screen{
    position: absolute;
    top: 0em;
    background: url("../img/scenes/27-Store_Quiz_A-Error/27-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.quiz-tryagain, .quiz-tryagain1, .quiz-tryagain2, .quiz-tryagain3{
    width: 23.5em;
    height: 7.5em;
    position: absolute;
    top: 30.2em;
    left: 47.8em;
    border-radius: 1em;
    cursor: pointer;
}
.character{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/33.5-dress-up-kid.png") no-repeat center / cover;
    width: 24em;
    height: 44em;
    top: 4.5em;
    left: 4em;
}
.quiza-shirt img{position: absolute; width: 19em; z-index: 9;}
.quiza-shirt{position:absolute;}
.shirt-1{top: 19em; left: 33em;}
.shirt-2{top: 19em; left: 67em;}
.shirt-3{top: 34em; left: 33em;}
.shirt-4{top: 34em; left: 67em;}
.dress-up-shirt{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/SHIRTS/26-Store-Quiz-red-shirt.png") no-repeat center / contain;
    width: 24em;
    height: 14em;
    top: 16.9em;
    left: 5em;
    display: none;
    z-index: 1;
}
.dress-up-phant{
    position: absolute;
    background: url("../img/scenes/29-Store_Quiz_B-Correct/29-Store-Quiz-tan-pants.png") no-repeat center / contain;
    top: 29em;
    left: 10.7em;
    z-index: 2;
    width: 12.9em;
    height: 18em;
    display: none;
}
.dress-up-sockl{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/SOCKS/31-Store-Quiz-blue-sock-left.png") no-repeat center / contain;
    top: 38em;
    left: 9.9em;
    width: 5.8em;
    height: 17em;
    z-index: 1;
    display: none;
}
.dress-up-sockr{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/SOCKS/31-Store-Quiz-blue-sock-right.png") no-repeat center / contain;
    top: 37em;
    left: 18.1em;
    width: 6.2em;
    height: 19.2em;
    z-index: 1;
    display: none;
}
.quizb-phant img{
    width: 11em;
}
.quizb-phant{z-index: 2;}
.phant-1{
    position: absolute;
    top: 22em;
    left: 33em;
}
.phant-2{
    position: absolute;
    top: 22em;
    left: 47em;
}
.phant-3{
    position: absolute;
    top: 22em;
    left: 61em;
}
.phant-4{
    position: absolute;
    top: 22em;
    left: 75em;
}
/* html quiz */
.quiza-bg{
    position: absolute;
    background: url("../img/scenes/25-Store_Quiz_A/25-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
}
.quiza-bg .options .option{
    position: absolute;
    background: url("../img/scenes/25-Store_Quiz_A/25-Store-Quiz-money.png") no-repeat center / cover;
    width: 9em;
    height: 7em;
    cursor: pointer;
    z-index: 1;
}
.quiza-bg .shadowoptions .soption{
    position: absolute;  background: url("../img/scenes/25-Store_Quiz_A/25-Store-Quiz-money-over.png") no-repeat center / cover; width: 10em; height: 8em;
    cursor: pointer; z-index: 0; display: none;
}
.quiza-bg .option:nth-child(1){ top: 27em; left: 57em;}
.quiza-bg .option:nth-child(2){ top: 27em; left: 74em;}
.quiza-bg .option:nth-child(3){ top: 37.5em; left: 57em;}
.quiza-bg .option:nth-child(4){ top: 37.5em; left: 74em;}
.quiza-bg .soption:nth-child(1){ top: 26.5em; left: 56.5em;}
.quiza-bg .soption:nth-child(2){ top: 26.5em; left: 73.5em;}
.quiza-bg .soption:nth-child(3){ top: 37em; left: 56.5em; }
.quiza-bg .soption:nth-child(4){ top: 37em; left: 73.5em;}
.sidecharacter{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/33.5-dress-up-kid.png") no-repeat center / contain;
    width: 26em;
    height: 46em;
    top: 4.5em;
    left: 4em;
    z-index: 1;
}
.kid{
    position: absolute;
    top: -0.5em;
}
.wrong-popup, .wrong-popup1, .wrong-popup2, .wrong-popup3{
    position: absolute;
    top: 0em;
    background: url("../img/scenes/27-Store_Quiz_A-Error/27-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.correct-popup{
    position: absolute;
    background: url("../img/scenes/26-Store_Quiz_A-Correct/26-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.quizb-bg{
    position: absolute;
    background: url("../img/scenes/28-Store_Quiz_B/28-Store-Quiz-B-BG-new.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.quizb-bg .options .option{
    position: absolute;
    background: url("../img/scenes/28-Store_Quiz_B/28-Store-Quiz-B-seeds.png") no-repeat center / contain;
    width: 11em;
    height: 5em;
    cursor:pointer;
    z-index: 1;
}
.quizb-bg .shadowoptions .soption{
    position: absolute;  background: url("../img/scenes/28-Store_Quiz_B/28-Store-Quiz-B-seeds-over.png") no-repeat center / cover; width: 12em; height: 6em;
    cursor: pointer; z-index: 0; display: none;
}
.quizb-bg .option:nth-child(1){
    top: 28em;
    left: 57em;
}
.quizb-bg .option:nth-child(2){
    top: 28em;
    left: 74em;
 }
.quizb-bg .option:nth-child(3){
    top: 38.5em;
    left: 57em;
 }
.quizb-bg .option:nth-child(4){
    top: 38.5em;
    left: 74em;
 }
 .quizb-bg .soption:nth-child(1){
    top: 27.5em;
    left: 56.5em;
}
.quizb-bg .soption:nth-child(2){
    top: 27.5em;
    left: 73.5em;
 }
.quizb-bg .soption:nth-child(3){
    top: 38em;
    left: 56.5em;
 }
.quizb-bg .soption:nth-child(4){
    top: 38em;
    left: 73.5em;
 }
 .correct-popup1{
    position: absolute;
    background: url("../img/scenes/29-Store_Quiz_B-Correct/29-Store-Quiz-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.quizc-bg{
    position: absolute;
    background: url("../img/scenes/30-Store_Quiz_C/30-Store-Quiz-C-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.quizc-bg .options .option{
    position: absolute;
    background: url("../img/scenes/30-Store_Quiz_C/30-Store-Quiz-money.png") no-repeat center / contain;
    width: 9em;
    height: 7em;
    cursor: pointer;
    z-index: 1;
}
.quizc-bg .shadowoptions .soption{
    position: absolute;  background: url("../img/scenes/30-Store_Quiz_C/30-Store-Quiz-money-over.png") no-repeat center / cover; width: 10em; height: 7.7em;
    cursor: pointer; z-index: 0; display: none;
}
.quizc-bg .option:nth-child(1){
    top: 27em;
    left: 58em;
}
.quizc-bg .option:nth-child(2){
    top: 27em;
    left: 75em;
 }
.quizc-bg .option:nth-child(3){
    top: 37.5em;
    left: 58em;
 }
.quizc-bg .option:nth-child(4){
    top: 37.5em;
    left: 75em;
 }
.quizc-bg .soption:nth-child(1){ top: 26.6em; left: 57.5em;}
.quizc-bg .soption:nth-child(2){ top: 26.6em; left: 74.5em;}
.quizc-bg .soption:nth-child(3){ top: 37.1em; left: 57.5em; }
.quizc-bg .soption:nth-child(4){ top: 37.1em; left: 74.5em;}
 .correct-popup2{
    position: absolute;
    background: url("../img/scenes/31-Store_Quiz_C-Correct/31-Store-Quiz-C-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.quizc-sockl img{position: absolute; width: 10em; z-index: 9;}
.quizc-sockl{position:absolute;}
.sockl-1{top: 20em; left: 34em;}
.sockl-2{top: 20em; left: 74em;}
.sockl-3{top: 35em; left: 41em;}
.sockl-4{top: 35em; left: 63em;}
.quizd-bg{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-D-BG-new.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.poption25{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-25.png") no-repeat center / contain;
    width: 9em;
    height: 10em;
    top: 33em;
    left: 53em;
    cursor: pointer;
    z-index: 1;
}
#sdop1 {
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-25-over.png") no-repeat center / contain;
    width: 10em;
    height: 10.7em;
    top: 32.6em;
    left: 52.6em;
    z-index: 0;
    display: none;
}
.poption2{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-22.png") no-repeat center / contain;
    width: 9em;
    height: 10em;
    top: 38.2em;
    left: 62em;
    cursor: pointer;
    z-index: 1;
}
#sdop2{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-25-over.png") no-repeat center / contain;
    width: 10em;
    height: 10.5em;
    top: 37.9em;
    left: 61.5em;
    z-index: 0;
    display: none;
}
.poption1{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-1.png") no-repeat center / contain;
    width: 8em;
    height: 10em;
    top: 38em;
    left: 71em;
    z-index: 1;
    cursor: pointer;
}
#sdop3{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-1-over.png") no-repeat center / contain;
    width: 12em;
    height: 10.7em;
    top: 37.6em;
    left: 69em;
    z-index: 0;
    display: none;
}
.poption18{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-18.png") no-repeat center / contain;
    width: 9em;
    height: 10em;
    top: 33em;
    left: 78em;
    cursor: pointer;
    z-index: 1;
}
#sdop4{
    position: absolute;
    background: url("../img/scenes/32-Store_Quiz_D/32-Store-Quiz-18-over.png") no-repeat center / contain;
    width: 10em;
    height: 10.8em;
    top: 32.5em;
    left: 77.5em;
    z-index: 0;
    display: none;
}

.correct-popup3{
    position: absolute;
    background: url("../img/scenes/33.0-Store_Quiz_D-Correct/33-Store-Quiz-D-BG.jpg") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.quizd-sockr img{position: absolute; width: 10em; z-index: 9;}
.quizd-sockr{position:absolute;}
.sockr-1{top: 20em; left: 34em;}
.sockr-2{top: 20em; left: 74em;}
.sockr-3{top: 35em; left: 41em;}
.sockr-4{top: 35em; left: 63em;}
.nicejob-bg{
    position: absolute;
    background: url("../img/scenes/34-Nice_Job/34-Nice-Job-layers-new.png") no-repeat center / cover;
    width: 90em;
    height: 51em;
    display: none;
}
.loafers-left{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/left-shoe.png") no-repeat center / contain;
    width: 12em;
    height: 4.9em;
    top: 46em;
    left: 3em;
    z-index: 3;
}
.loafers-right{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/right-shoe.png") no-repeat center / contain;
    width: 12em;
    height: 4.9em;
    top: 46em;
    left: 12em;
    z-index: 3; 
}
#nicejob-next{
    display: block;
}
.congrats-bg{
    position: absolute;
    background: url("../img/scenes/35-Certificate/35-Certificate-BG.png") no-repeat center / cover;
    width: 90em;
    height: 51em;
}


/*pages*/
.page{
	width: 100%;
	height: 100%;
	z-index: 999;
	position: absolute;
	top:0;
	left:0;
	display: none;
}
#page1{ display: block; }


.round-img{
	top: 0; 
	right: 0; 
	position: absolute; 
	display: none;
	width: 100%;
    height: 100%;	
}
.level_1_round_0 .round-img{
	background: url(../img/level0_round0.png) no-repeat center / contain;
   /* width: 68.3em;
    height: 31.5em;*/
}
.level_1_round_1 .round-img{
    background: url(../img/level0_round1.png) center center / contain no-repeat;
    /*width: 55.75em;
    height: 35.45em;*/	
}
.level_1_round_2 .round-img{
    background: url(../img/level0_round2.png) center center / contain no-repeat;
   /*width: 57.0em;
    height: 31.85em;*/
}
.level_1_round_3 .round-img{
    background: url(../img/level0_round3.png) center center / contain no-repeat;
    /*width: 53.0em;
    height: 27.2em;*/
}
.level_1_round_4 .round-img{
    background: url(../img/level0_round4.png) center center / contain no-repeat;
    /*width: 45.35em;
    height: 30.8em;*/
} 
.level_2_round_0 .round-img{
	background: url(../img/level1_round0.png) no-repeat center / contain;
    /*width: 69.2em;
    height: 40.8em;*/
}
.level_2_round_1 .round-img{
    background: url(../img/level1_round1.png) center center / contain no-repeat;
    /*width: 90em;
    height: 31.25em;*/
}
.level_2_round_2 .round-img{
    background: url(../img/level1_round2.png) center center / contain no-repeat;
    /*width: 62.0em;
    height: 20.9em;*/
}
.level_2_round_3 .round-img{
    background: url(../img/level1_round3.png) center center / contain no-repeat;
    /*width: 54.1em;
    height: 37.5em;*/
}

.problemheading{
    position: absolute;
    top: -15.5em;
    left: -8em;
    width: 28em;
    font-size: 1.45em;
    line-height: 1.25em;
}
.problemdesc{
    background-color: #2F528F;
    padding: 1.5em 2.5em;
    font-weight: normal;
    color: white;
    font-size: 0.75em;
    position: absolute;
    top: -22.5em;
    left: -3em;
    width: 38em;
}
.problemquest{
    color: #2F528F;
    position: absolute;
    top: -6em;
    left: -4em;
    width: 12em;
    text-align: center;
    font-size: 1em;
}
.problemContainer {
    position: absolute;
    font-size: 2.0em;
    bottom: 1.5em;
    right: 1em;
    width: 67%;
	text-align: center;
}   
.problemimg{
    position: absolute;
    background: url("../img/scenes/33.5-Dress_Up_Kid/33.5-dress-up-kid.png") no-repeat center / contain;
    width: 26em;
    height: 46em;
    top: 4.5em;
    left: 4em;
    z-index: 1;
}
/*.problemDisplay div:last-child {
    font-size: 1.39em;
    color: #000;
    margin-top: 0.8em;
    line-height: 1.2;
}*/
/*
.options {
    display: table;
    width: 57%;
    margin: 1em auto 0;
}
.option{
    background: url("../img/scenes/25-Store_Quiz_A/25-Store-Quiz-money.png") no-repeat center / cover;
    position: absolute;
    width: 4em;
    height: 3.1em;
}
.option:hover{
    background: url("../img/scenes/25-Store_Quiz_A/25-Store-Quiz-money-over.png") no-repeat center / cover;
}
.himg{
    position: absolute;
    left: 0em;
    top: 0em;
}
.option:nth-child(1){
    top: -9em;
    left: 15em;
}
.option:nth-child(2){
    top: -9em;
    left: 24em;
 }
.option:nth-child(3){
    top: -3.5em;
    left: 15em;
 }
.option:nth-child(4){
    top: -3.5em;
    left: 24em;
 }
 .optionContent{
     display: none;
 }*/
.level_1_round_2 .options,.level_1_round_3 .options,.level_1_round_4 .options,.level_2_round_3 .options { width: 80%; }
.level_2_round_2 .options { width: 85%; }
.options > div {
    display: inline-block;

}
.optCon {
    margin: 0 auto;
    width: 9.5em;
    height: 7.55em;
    color: #000;
    font-size: 0.75em;
    padding-top: 1.75em;
    cursor: pointer;
    -webkit-clip-path: polygon(4% 33%, 20% 17%, 36% 10%, 30% 10%, 64% 10%, 78% 16%, 96% 32%, 80% 44%, 72% 39%, 72% 90%, 28% 90%, 28% 38%, 20% 44%);
    clip-path: polygon(4% 33%, 20% 17%, 36% 10%,50% 15%, 64% 10%, 78% 16%, 96% 32%, 80% 44%, 72% 39%, 72% 90%, 28% 90%, 28% 38%, 20% 44%);
}


div#question {
    position: absolute;
    top: 11em;
    color: #000;
    font-size: 1.6em;
	display: table;
    width: 19.35em;
	min-height: 6.3em;
    height: 100%;
    overflow: hidden;
    max-height: 6.3em;
	left: -19.35em;
}
div#question > div {
    display: table-cell;
	padding: 1em;
	vertical-align: middle;
}
div#question > div:first-child{ width: 1.2em; }
div#question > div:first-child > div{
	-ms-transform: rotate(-90deg); /* IE 9 */
	-ms-transform-origin: 30% 80%; /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari */
   -webkit-transform-origin: 30% 80%; /* Safari 3-8 */
  transform: rotate(-90deg);
  transform-origin: 30% 80%;
      position: absolute;
}
div#question #qns-title{
	background: #d9a60a;
}
div#question #qns-content{
	background-color: rgba(217, 166, 10, 0.75);
}
.xmask{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#fff;
    z-index:9999;
    display:none;
}

body #powerTip{ white-space: normal; min-width: 12.5em; width: 100%; max-width: 28em; font-size: 1.5em; }
/*.tip.yes::before{
    content: "";
    width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;   
  border-right:1em solid blue;
  position: absolute;
left: -1.1em;
}
.tip.yes::after{
    content: "";
    width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;   
  border-right:1em solid black;
  position: absolute;
left: -1em;
}*/
div#myth-fact {
    position: absolute;
    top: 13.5em;
    color: #000;
    font-size: 1.6em;
    display: table;
    width: 38.2em;
    right: 0;
    max-height: 9.2em;
    height: 100%;
	right: -38.2em;
}
div#myth-fact > div {
    display: table-cell;
    padding: 1em;
    vertical-align: middle;
}
div#myth-fact > div:last-child{ width: 2.42em; }
div#myth-fact > div:last-child > div {
    -ms-transform: rotate(90deg);
    -ms-transform-origin: 40% -18%;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 40% -18%;
    transform: rotate(90deg);
    transform-origin: 40% -18%;
    position: absolute;
    font-size: 2.3em;
}
div#myth-fact #myth-fact-title, div#myth-fact #myth-fact-content{
    background: #2c70ac;/*#0054a6;*/
}
/*div#myth-fact #myth-fact-content{
    background-color: rgba(44, 112, 172, 0.75);
}*/
div#myth {
    position: absolute;
    top: 3em;
    color: #000;
    font-size: 2.2em;
    display: table;
    width: 27.7em;
    min-height: 6.3em;
    height: 100%;
    overflow: hidden;
    max-height: 6.3em;
	left: -27.7em;
}
div#myth > div {
    display: table-cell;
    padding: 1em;
    vertical-align: middle;
}
div#myth > div:first-child{ width: 1.2em; }
div#myth > div:first-child > div{
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin: 26% 48%; /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari */
   -webkit-transform-origin: 26% 48%; /* Safari 3-8 */
  transform: rotate(-90deg);
  transform-origin: 26% 48%;
      position: absolute;
      font-size: 1.7em;
}
div#myth #myth-title,div#myth #myth-content{
    background: #d9a60a;
}
div#myth-fact-content {
    font-size: 1.4em;
}
.level_1_round_0 div#myth-fact-content {
    font-size: 1.25em;
}
/*div#myth #myth-content{
    background-color: rgba(217, 166, 10, 0.75);
}*/
.show-fact {
    background: #f26522;
    color: #000;
    border: 0;
    outline: 0;
    font-size: 2em;
    width: 7em;
    text-align: center;
    padding: 2.3em 1em;
    position: absolute;
    left: 31em;
    top: 3.3em;
    cursor: pointer;
	display: none;
}
.next{
    background: #387d01;
    color: #000;
    border: 0;
    outline: 0;
    font-size: 2em;
    width: 7em;
    text-align: center;
    padding: 0.5em 1em;
    position: absolute;
    left: 31em;
    top: 21.3em;
    cursor: pointer;
    border-radius: 0.4em;
	display: none;
}
/*#page6 .contentTitle,#page7 .contentTitle {
    font-size: 3em;
    position: absolute;
    left: 0.95em;
    font-weight: normal;
    top: 0.4em;
    margin: 0;
}*/
.popup-definition{ 
	cursor: pointer;
	color: #2C70AC;
    /* border: 0.05em solid #f00; */
    border-radius: 0.2em;
    padding: 0.2em;
    background: #FFFDE4;
}
.popupimg{
    background: url(../img/custom/reward-shirt.png) no-repeat center/contain;
    width: 23em;
    height: 23em;
    position: absolute;
    left: 24em;
    }

.table{
    display: table;
    position: absolute;
    bottom: 1.6em;
    font-size: 2.5em;
    right: 2.2em;
    width: 30em;
    color: #fff;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
	 padding-right: 1.35em;
}
.table-cell:first-child {
    width: 16em;   
}
.table-cell:last-child{ padding-right: 0; }
button.safe,button.start {
    border: 0;
    outline: 0;
    background: #0054a6;
    color: #fff;
    padding: 0.7em 0.5em;
	font-size: 0.9em;
    cursor: pointer;
}
button.start[disabled='disabled']{
	opacity: 0.6;
}

.stars{
	background: url(../img/stars.png) no-repeat top center/ contain;
    width: 100%;
    height: 30%;
    z-index: 99;
    display: block;
    position: absolute;	
	top:-30%;
	left:0;
}
#confetti-canvas{ position: absolute; }
.problemContainer.disabled {
    opacity: 0.5;
}
.optCon:not(.disabled):hover,.optCon.clicked{ background: transparent; }
.option .optCon.disabled,
.tip > div.disabled{ cursor: not-allowed; }
#mute {
    position: absolute;
    z-index: 999;
    width: 2em;
    height: 2em;
	cursor: pointer;
	right: 2em;
    top: 1em;
    display: none;
}
#mute > img {
    width: 100%;
    height: 100%;
}
/*popup*/
#overlay {
    width: 100%;
    height: 100%;
    background-color: #000 !important;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    -khtml-opacity: 0.1;
    opacity: 0.3 !important;
    z-index: 999;
    position:absolute;
    top:0px;
}
#popup{
    background: #5DA63D;
    display: none;
    height: 35em !important;
    left: 11em !important;
    position: absolute;
    text-align: center;
    bottom: 6.8em !important;
    width: 70em !important;
    z-index: 999;
    color: #fff;
}
button.close {
  /*  border: 0.1em solid #fff;
    background: white;
    color: black;
    position: absolute;
    left: 39em;
    bottom: 1em;
    font-size: 1.5em;
    margin: 0.5em auto;
    padding: 1em 2em;
    border-radius: 0.6em;*/

    position: absolute; bottom: 1.45em; font-size: 1.8em; right: 1.5em; width: 6.5em; padding: 0.4em 0.7em; border-radius: 0.625em; background: #2F528F; outline: 0;  border: 1px solid #2F528F; color: #fff; padding: 0.5em 0.5em; border-radius: 0.4em; cursor: pointer; 
}
#popup.correct-popup{
    background: transparent;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
 }
#popup.incorrect-popup{ background: #2F528F;}
#popup.congratulation-popup{ background: #2E3192;}
#popup .title{ font-size: 2.5em; margin: 3.3em 0 0 0; line-height: 2.5em; font-weight: normal; } 
#popup.nexts .title{ margin: 1.7em 0 0 0; }
#popup .pop_con, #popup .pop_wrong{ font-size: 2.21875em; } 
#popup .pop_wrong{ font-style: italic; min-height: 1.2em; }
#popup .popup-close button, #page4 button.nextLevel, #popup .popup-close .playVideo{ font-size: 1.479375em;  background: #FBAF5D; outline: 0;  border: 1px solid #FBAF5D; color: #fff; padding: 0.5em 0.7em; border-radius: 0.4em; cursor: pointer; margin-top: 0.55em; display: inline-block; margin-left: 1em; margin-right: 1em; }


@-webkit-keyframes whiteGlow {
	from { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(47, 82, 143, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}
@-moz-keyframes whiteGlow {
	from { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(47, 82, 143, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}
@-o-keyframes whiteGlow {
	from { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(47, 82, 143, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}
@keyframes whiteGlow {
	from { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(47, 82, 143, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(47, 82, 143, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}

@-webkit-keyframes level {
    0% { -webkit-transform: scale(0.98, 0.98); }
    50% { -webkit-transform: scale(1, 1);  }
    100% {-webkit-transform: scale(0.98, 0.98); }
}
@-moz-keyframes level {
    0% { -moz-transform: scale(0.98, 0.98); }
    50% { -moz-transform: scale(1, 1); }
    100% { -moz-transform: scale(0.98, 0.98); }
}
@-o-keyframes level {
    0% { -o-transform: scale(0.98, 0.98); }
    50% { -o-transform: scale(1, 1); }
    100% { -o-transform: scale(0.98, 0.98); }
}
@keyframes level {
    0% { transform: scale(0.98, 0.98); }
    50% { transform: scale(1, 1); }
    100% { transform: scale(0.98, 0.98); }
}

@-webkit-keyframes pulsate {
    0% { -webkit-transform: scale(1, 1); opacity: 1.0; }
    50% { -webkit-transform: scale(0.9, 0.9); opacity: 0.5; }
    100% {-webkit-transform: scale(1, 1); opacity: 1.0; }
}
@-moz-keyframes pulsate {
    0% { -moz-transform: scale(1, 1); opacity: 1.0; }
    50% { -moz-transform: scale(0.9, 0.9); opacity: 0.5; }
    100% { -moz-transform: scale(1, 1); opacity: 1.0; }
}
@-o-keyframes pulsate {
    0% { -o-transform: scale(1, 1); opacity: 1.0; }
    50% { -o-transform: scale(0.9, 0.9); opacity: 0.5; }
    100% { -o-transform: scale(1, 1); opacity: 1.0; }
}
@keyframes pulsate {
    0% { transform: scale(1, 1); opacity: 1.0; }
    50% { transform: scale(0.9, 0.9); opacity: 0.5; }
    100% { transform: scale(1, 1); opacity: 1.0; }
}

@-webkit-keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
@-moz-keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
@-o-keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
@keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}