/* * Globals */
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    color: #333;
    text-shadow: none;

    /* Prevent inheritance from `body` */
}

/* * Base structure */
body {

}

.opacityLow {
	opacity: 0.5;
}

.buttonrow a {
	color: #ffffff;
}

.buttonrow p {
	font-size: 20px;
}

.buttonrow p button {
	margin-left: 20px;
}

.cover-container {
    max-width: 43em;
    z-index: 999;
    padding-bottom: 0;
    margin-bottom: 0;
}

.front {
    z-index: 999;
    position: absolute;
    top: 50px;
    left: 20px;
    width: 50%;
}

.front a {
	text-decoration: none;
}

#gauge {
    margin-top: 15%;
    margin-left: -2000px;
    z-index: 9999;
}

canvas#demo {
	background-image: url(./assets/images/timer-bg.png); 
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 30px 40px 30px;
}

#explainer {
    padding: 20% 30px;
    width: 400px;
    margin: auto auto;
}

#explainer p {
    font-family: 'Fredoka One', sans-serif;
    transform: rotate(-5deg);
    font-size: 28px;
}

.rabbit {
    color: #F98008;
}

.robot {
    color: #EB4A06;
}

.giant {
    color: #B8D175;
}

.stork {
    color: #D4301B;
}

.digger {
    color: #D4301B;
}

.wizard {
    color: #ebba34;
}

#preview-textfield {
    display: none;
}

h1,
h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 52px;
    padding: 10px 0 0 30px;
    line-height: auto;
    text-align: left;
    color: #fff;
}

h3 {
    font-size: 15px;
    line-height: auto;
    margin: 0;
}

/* * Header */
header {
    height: 20%;
}

header h1 {
    height: 90%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: deepskyblue;
    font-family: 'Fredoka One', sans-serif;
    text-align: center;
}

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    background-color: transparent;
    border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
    margin-left: 1rem;
}

.nav-masthead .active {
    color: #fff;
    border-bottom-color: #fff;
}

.area {
    overflow: hidden;
}

.hero {
    background-size: cover;
    height: 100vh;
    z-index: 999;
}

.hero.rabbit {
    background-image: url(./assets/images/4.jpg);
    background-color: #0571AF;
}

.hero.robot {
    background-image: url(./assets/images/1.jpg);
    background-color: #33A861;
}

.hero.stork {
    background-image: url(./assets/images/5.jpg);
    background-color: #D4301B;
}

.hero.digger {
    background-image: url(./assets/images/2.jpg);
    background-color: #F08D2C;
}

.hero.giant {
    background-image: url(./assets/images/3.jpg);
    background-color: #9C68C5;
}

.hero.wizard {
    background-image: url(./assets/images/6.jpg);
    background-color: #0571AF;
}

.hero.choice {
    background-image: url(./assets/images/9.jpg);
    background-color: #0571AF;
}

.rockstar {
	background-size: cover;
	background-repeat: repeat;
    background-image: url(./assets/images/10.jpg);
    background-color: #0571AF;
}

#below-fold {
    background-image: url(./assets/images/fun-background.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100vh;
}

.bottom-nav {
    position: relative;
    top: 60%;
    float: left;
    margin-left: 10%;
    z-index: 9999;
}

.boo {
    text-align: center;
}

.boo img {
    margin: 0 auto;
    width: 35%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.buttonrow {
    margin-top: 260px;
    margin-bottom: 50px;
    padding: 0 60px;
}

/* Buttons */
/* Buttons */
li > div > .buttons {
    margin: 0 0 0 20%;
}

.buttons-one a,
button {
    border-radius: 35px;
    padding: 20px 35px 20px 35px;
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
    border: none;
}

.btn-inside-bio {
    background-color: #deae36;
    color: #fff;
}

.btn-inside-bio:hover {
    color: #000;
}

.btn-inside-robot-one {
    background-color: #EB4A06;
    color: #33A861;
}

.btn-inside-robot-two {
    background-color: #ffffff;
    color: #33A861;
    margin-left: 40px;
}

.btn-inside-digger-one {
    background-color: #D4301B;
    color: #F08D2C;
}

.btn-inside-digger-two {
    background-color: #ffffff;
    color: #F08D2C;
    margin-left: 40px;
}

.btn-inside-giant-one {
    background-color: #B8D175;
    color: #9C68C5;
}

.btn-inside-giant-two {
    background-color: #ffffff;
    color: #9C68C5;
    margin-left: 40px;
}

.btn-inside-rabbit-one {
    background-color: #F98008;
    color: #0571AF;
}

.btn-inside-rabbit-two {
    background-color: #ffffff;
    color: #0571AF;
    margin-left: 40px;
}

.btn-inside-stork-one {
    background-color: #EB4A06;
    color: #88d5e3;
}

.btn-inside-stork-two {
    background-color: #ffffff;
    color: #88d5e3;
    margin-left: 40px;
}

.btn-inside-wizard-one {
    background-color: #ebba34;
    color: #D4301B;
}

.btn-inside-wizard-two {
    background-color: #ffffff;
    color: #D4301B;
    margin-left: 40px;
}

.col-md-6.bot,
.col-md-6.bottwo {
    position: absolute;
    bottom: 110px;
}

.btn-cta-one {
    background-color: #33A861;
    color: #ffffff;
    float: left;
    margin-left: 80px;
}

.btn-cta-two {
    background-color: #ffffff;
    color: #33A861;
    float: right;
    margin-right: -40px;
}

.btn-back {
	position: fixed;
	top: 70px;
	right: 100px;
	background-color: #ffffff !important;
	margin-left: 0;
	z-index: 99999;
}

/* Footer */
footer {
    z-index: 999;
    position: relative;
    bottom: 30px;
    width: 100%;
    padding: 90px 20px 20px;
}

footer p {
    font-size: 16px;
    color: #fff;
}

footer a {
    text-decoration: underline;
    color: #fff;
}

/* Surprise */
.surprise img {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 90%;
    text-align: center;
    bottom: 0;
}

img.robbie {
    bottom: -80%;
}

img.hop {
    bottom: -60px;
}

img.hagrid {
    bottom: -170px;
}

img.dig {
    bottom: -150px;
}

img.lanky {
    bottom: -80px;
}

img.dumbledore {
    bottom: -195px;
}

/* Balloons */
#balloon-container {
    height: 100vh;
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    z-index: 99;
    position: absolute;
}

.balloon {
    height: 125px;
    width: 105px;
    border-radius: 75% 75% 70% 70%;
    position: relative;
}

.balloon:before {
    content: "";
    height: 75px;
    width: 1px;
    padding: 1px;
    background-color: #FDFD96;
    display: block;
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    margin: auto;
}

.balloon:after {
    content: "▲";
    text-align: center;
    display: block;
    position: absolute;
    color: inherit;
    top: 120px;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes float {
    from {
        transform: translateY(100vh);
        opacity: 1;
    }

    to {
        transform: translateY(-300vh);
        opacity: 0;
    }
}

audio {
    z-index: 9999;
    position: fixed;
    left: 10px;
    bottom: 20px;
    width: 150px; 
    display: block; 
}

/* Responsive */
@media (max-width:375px) {
	h1 {
	font-size: 40px;
	}

}

@media (max-width:399px) {
    header {
        margin-top: 150px;
    }
    
    .boo {
    	margin: 30px 0 30px;
    }
    
    .btn-back {
	top: 20px;
	right: 50px;
	margin-top: 10px;
	}
	
	button {
    padding: 17px 25px 17px 25px;
    }

	.front {
	top: 110px;
	width: 94%
	}
	
	#explainer {
    padding: 0;
    width: 100%;
    margin: auto auto;
    }
    
    #explainer p {
    transform: rotate(-1deg);
    font-size: 20px;
    padding: 20px;
    margin: 0;
    }
    
    .hero.giant {
 	background-position: center;
    }
    
    .bottom-nav {
    text-align: left;
    top: 75%;
    margin-left: 7%;
    }
    
    .buttonrow {
    	margin-top: 300px;
    }
    
    #gauge {
    	margin-top: -10px;
    }
    
    audio {
    	width: 101px;
    	top: 40px !important;
    	left: 30px;
    }
    
    .btn-inside-giant-two, .btn-inside-robot-two, .btn-inside-rabbit-two, .btn-inside-stork-two, .btn-inside-wizard-two, .btn-inside-digger-two {
    margin-left: 0;
    margin-top: 20px;
    text-align: left;
    }
    
    header h1 {
    font-size: 35px;
    text-align: center;
    }
    
    img.hagrid {
     bottom: -25px;
    }
    
    img.lanky {
    	bottom: -110px;
    }
    
    img.dig {
    	bottom: -50px;
    }
    
    img.dumbledore {
    bottom: 0px;
    }
    
    canvas#demo {
     margin-left: -15%;
    }
}

@media (min-width:400px) and (max-width:575px) {
    header {
        margin-top: 160px;
    }
    
     .boo {
    	margin: 30px 0 30px;
    }
    
    .btn-back {
	top: 20px;
	right: 50px;
	margin-top: 10px;
	}
	
	button {
    padding: 17px 25px 17px 25px;
    }

	.front {
	top: 110px;
	width: 94%
	}
	
	#explainer {
    padding: 0;
    width: 100%;
    margin: auto auto;
    }
    
    #explainer p {
    transform: rotate(-1deg);
    font-size: 20px;
    padding: 20px;
    margin: 0;
    }
    
    .hero.giant {
 	background-position: center;
    }
    
    .bottom-nav {
    text-align: left;
    top: 70%;
    margin-left: 7%;
    }
    
    .buttonrow {
    	margin-top: 300px;
    }
    
    #gauge {
    	margin-top: 50px;
    }
    
    .btn-inside-giant-two, .btn-inside-robot-two, .btn-inside-rabbit-two, .btn-inside-stork-two, .btn-inside-wizard-two, .btn-inside-digger-two {
    margin-left: 0;
    margin-top: 20px;
    text-align: left;
    }
    
    header h1 {
    font-size: 35px;
    text-align: center;
    }
    
    img.hagrid {
     bottom: -25px;
    }
    
    img.dig {
    	bottom: -50px;
    }
    
    
    img.lanky {
    bottom: -110px;
    }

    
    img.dumbledore {
    bottom: 0px;
    }
    
    canvas#demo {
     margin-left: -22%;
    }

}

@media (min-width:576px) and (max-width:767px) {
    header {
        margin-top: 160px;
    }
}

@media (min-width:768px) and (max-width:991px) {
	    header {
        margin-top: 140px;
    }
    
    img.hagrid {
    	bottom: 20px;
    }
    
    img.dumbledore {
    	bottom: 20px;
    }
    
    img.dig {
    bottom: -20px;
    }

}

@media (min-width:992px) and (max-width:1199px) {
    #below-fold {
        background-image: url(./assets/images/fun-background-1.jpg);
    }
        header {
        margin-top: 40px;
    }
    
}

@media (min-width:1200px) and (max-width:1399px) {
    #below-fold {
        background-image: url(./assets/images/fun-background-1.jpg);
    }
    
        header {
        margin-top: 40px;
    }
    
}

@media (min-width:1400px) {
    #below-fold {
        background-image: url(./assets/images/fun-background-1.jpg);
    }
}

@media (min-height:1000px) and (max-height:5099px) {
}