@font-face {
    font-family: "spongebob";
    src: url("fonts/spongeboytt1-webfont.woff") format('woff');
}
@font-face {
    font-family: "casual";
    src: url("fonts/londrinasolid-regular-webfont.woff") format('woff');
}


 html, body { height: auto; }

html{
    background-color: #94d0f1;
    padding: 0px;
}
body{
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    overflow: auto;
    margin: 0px;
}

#mainContainer{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin-top:0px;
    border: 20px solid transparent;
    border-top: 0px;
    border-bottom: 0px;
    border-image: url(images/border.png) 30 repeat;
    -webkit-border-image: url(images/border.png) 30 repeat;
}

#header{
    height: 200px;
    position: relative;
    z-index: -2;
    
    overflow-y: visible;

}
#mainWrapper{
        background-image: url(images/background3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: -3;
}

#spongebobScene{
    overflow: hidden;
    max-width: 960px;
    width: 100%;
    position: relative;
}

#sceneContainer{
    position: relative;  
}

#prizeBubble{
    position: absolute;
    height: auto;
    width: 25%;
    left: -7%;
    margin-top: -12%;
}

#prizebackingbubble{
    position: absolute;
    width: 150%;
    height: auto;
    z-index: 10;
    opacity: 0.99;
    
}
#dailyPrize{
    position:absolute;
    z-index: 10;
    width: 100%;
    height: auto;
    left: 24%;
    margin-top: 10%;
    
}

#logo {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 13;
    left: 0%;
    top: -2%;
}

#logoLine{
    transform: rotate(10deg)
    
}

#prizeArea{
    background-color: orange;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    width: 100%;
}


/*-------|Patrick hook event|-------*/

#patrickHook{
    position: relative;
    overflow: hidden;
    z-index: 4;
    width: 100%;
    height: 590px;
}
#patrickContainer{
    position: absolute;
    z-index: 4;
    width: 100%;
    left: 6%;
    height: auto;
    transform-origin: top left;
}
#patrickHookArm {
    position: absolute;
    z-index: 4;
    top: 24%;
    left: 11%;
    transform-origin: left ;
    height: auto;
    width: 10%;
    margin-top: 13%
}
#patrickHookBody{
    position: absolute;
    z-index: 5;
    height: auto;
    width: 20%;
}

/*--------|Patrick Jelly Event|---------*/

#patrickJellyEvent{
    position: absolute;
    overflow: visible;
    z-index: 4;
    width: 100%;
    height: 590px;
    top:30%; 
}

#patrickJellyContainer{
    position: absolute;
    z-index: 4;
    width: auto;
    height: auto;
    top: 0%;
    left: 0%;
    transform-origin: top left;
    transform: rotate(10deg);
    width: 100%;
    height: auto;
}
#patrickJellyArm {
    position: absolute;
    z-index: 4;
    transform-origin: 20% 90% ;
    top: 10%;
    left: 10%;
    width: 24%;
    height: auto;
    
    
}
#patrickJellyBody{
    position: absolute;
    z-index: 5;
    left: 12%;
    top: 100%;
    width: 16%;
    height: auto;
}

#patrickJelly{
    position: relative;
    z-index: 5;
    width: 10%;
    height: auto;
    
}

#washingLine{
    position: absolute;
    width: 100%;
    height: auto;
    top: 20%;
    z-index: 5;
}
#pantLine{
    position: absolute;
    z-index: 3;
    width: 100%;
    height: auto;
}
#linePant1,#linePant2,#linePant3,#linePeg1,#linePeg2,#linePeg3{
    height: auto;
    width: 20%;
    position: absolute;
    z-index: 5;
    
}
#linePant1 img,#linePant2 img,#linePant3 img{
    width: 100%;
    height: auto;   
}
#linePeg1 img,#linePeg2 img,#linePeg3 img{
    width: 100%;
    height: auto;
    padding-bottom:50%
}
#linePant1{
    left:10%;
    margin-top:3%;
    transform: rotate(5deg);
 
}
#linePant2{
    left:50%;
    margin-top:5%;
    transform: rotate(0deg);
   
}
#linePant3{
    left:75%;
    margin-top:3%;
    transform: rotate(-7deg);
 
}
#linePeg1{
    left:10%;
    margin-top:0%;
    transform: rotate(5deg);
  
}
#linePeg2{
    left:50%;
    margin-top:1%;
    transform: rotate(0deg);

}
#linePeg3{
    left:75%;
    transform: rotate(-7deg);
}









/*--------|General Background|-----------*/

#sceneForeground{
    position: absolute;
    z-index: 4;
    width: 100%;
    height: auto;
    top: 52%;
   
}

#sceneBackground{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: auto;

}

/*-------------|Spongebob Charcater styling |---------------*/

#sceneFullSpongebob{
    width: auto;
    height: 100%;
    position: relative;
    z-index: 6;
}

#spongebobCharacter{
    position: relative;
    height: 50%;
    padding-top: 60%;
    width: 100%;
}

#sceneBody{
    position: absolute;
    left: 30%;
    top: 30%;
    z-index: 9;
    width: 33%;
}

#scenePantsfront{
    position: absolute;
    left: 38%;
    z-index:10; 
    transform-origin: top left;
     width: 58.6%;
    top: 62%;
}

#scenePantsBack{
    position: absolute;
    left: 38%;
    z-index:7;  
    transform-origin: top left;
    width: 58.6%;
    top:60.6%;
}
#sceneSelectedPantBack{
    position: absolute;
    z-index: 6;
    left: 30%;
    top: 68%;
    width: 36%;
}

#sceneUnderpants {
    position: absolute;
    left: 33.5%;
    top: 71.5%;
    z-index: 7;
    width: 28%;
}

#sceneSparkle {
    position: absolute;
    left: 33.5%;
    top: 50%;
    z-index: 6;
    width: 28%;
    opacity: 0;
}

#sceneSelectedPantFront{
    position: absolute;
    z-index: 8;
    left: 30%;
    top: 68%;
    width: 36%;
    
}

#armPants{
    width: 100%;
    height: 100%;
}

/*-------------|Pants Section styling |---------------*/

#pantPicker{
    background-image: url(images/backing.png);
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    min-height: 700px
}

#early {
    display: none;
}

#early h1{
    text-shadow: 0px 5px rgba(0,0,0,0.6);
}

#early p {
    color: white;
    font-family: "casual",sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
    


#pantPickerTitle{
    text-align: center;
    text-shadow: 0px 5px rgba(0,0,0,0.6);
}

h1{
    margin-top: 0px;
    padding-top: 50px;
    color: white;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: "spongebob",sans-serif;
    text-align: center;
}

#pantOptions{
    opacity: 0;
}

#backgroundBubbles{
    width: 100%;
    max-width: 960px;
    height: 840px;
    position: absolute;
    z-index: -1;
    overflow: hidden;
}

#backgroundConf{
    width: 100%;
    max-width: 960px;
    height: 840px;
    position: absolute;
    z-index: 9;
    overflow: hidden;
}

#backing3{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: pink;
    z-index: 1;
    position: absolute;
    left: 33%;
    top: 20%;
}
#backing2{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: pink;
    z-index: 1;
    position: absolute;
    left: 33%;
    top: 20%;
}
#backing1{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: pink;
    z-index: 1;
    position: absolute;
    left: 33%;
    top: 20%;
}

.letters{
    float: left;
    color: white;
    font-family: "spongebob",sans-serif;
    font-size: 25px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    text-shadow: 0px 5px rgba(0,0,0,0.6);
 
}

#option1, #option2, #option3 {
    position: relative;
    width: 33.3%;
    height: 70%;
    float: left;
}
#option1, #option3{
    margin-top: 10%;
}


#pantPos1,#pantPos2,#pantPos3{
    z-index: 2;
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 10%;

}


#shadowPos1{
    z-index: 2;
    position: relative;
    width: 100%;
    height: auto;

}
#shadowPos2{
    z-index: 2;
    position: relative;
    width: 100%;
    height: auto;

}
#shadowPos3{
    z-index: 2;
    position: relative;
            width: 100%;
    height: auto;
}

/*-------------|Button styling |---------------*/

#submitButtonArea{
    float: left;
    width: 100%;
    height: 100px;
    text-align: center;
    font-family: "spongebob",sans-serif;
    color: white;
    letter-spacing: 3px;
}

#help{
    float: left;
    width: 100%;
    
}

#helptext{
    text-align: center;
    padding-top: 30px;
    position: relative;
    font-family: "casual",sans-serif;
    color: white;
    font-size: 34px;
    letter-spacing: 3px;
    margin-top: 10px;
    text-transform: uppercase;
    text-shadow: 0px 5px rgba(0,0,0,0.6);
    
}

#submitButton{
    height: 60px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    line-height: 60px;
    margin-top: 20px;
    transition: 0.2s;
    color: black;
    font-size: 24px;
    background-color: yellow;
    border: 10px solid black;
    opacity: 0.0;
    
}
#submitButton:hover{
    height: 80px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    line-height: 80px;
    margin-top: 10px;
    transition: 0.2s;
    font-size: 28px;
    background-color: yellow;
    box-shadow: -10px 20px 0px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    transform: rotate(-5deg);
    
}

#backButton{
    height: 60px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    line-height: 60px;
    margin-top: 20px;
    transition: 0.2s;
    color: black;
    font-size: 24px;
    background-color: yellow;
    border: 10px solid black;
    opacity: 1;
    
}
#backButton:hover{
    height: 80px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    line-height: 80px;
    margin-top: 10px;
    transition: 0.2s;
    font-size: 28px;
    background-color: yellow;
    box-shadow: -10px 20px 0px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    transform: rotate(-5deg);
    
}

/*-------------|Form styling |---------------*/

#entryForm{
    background-color: darkorange;
    height: 600px;
    display: none;
}
/*-------------|Prize styling |---------------*/

#prizeDescription{
    width: 60%;
    margin-left: 20%;
    padding-left: 10px;
    color: white;
    font-family: "casual",sans-serif;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 2px;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-top: 10px;
    font-size: 24px;
    text-align: center;
    
}

/*-------------|hover styling |---------------*/

#hover1, #quart1, #half1, #full1, #in-quart1, #in-half1, #in-full1, #out-quart1, #out-half1, #out-full1{
    position: absolute;
    float: left;
    width: 100%;
    height: auto;

}
#hover2, #quart2, #half2, #full2, #in-quart2, #in-half2, #in-full2, #out-quart2, #out-half2, #out-full2{
    position: absolute;
    float: left;
    width: 100%;
    height: auto;

}
#hover3, #quart3, #half3, #full3, #in-quart3, #in-half3, #in-full3, #out-quart3, #out-half3, #out-full3{
    position: absolute;
    float: left;
    width: 100%;
    height: auto;

}

/*-------------|Popup styling |---------------*/

#backgroundPopup{
    background-color: black;
    height: 1655px;
    width: 100%;
    opacity: 0.0;
    position: absolute;
    z-index: -100;
}

#popup{
    background-color: white;
    height: 600px;
    width: 80%;
    border-radius: 10px;
    position: absolute;
    z-index: -101;
    opacity: 0;
    margin-left: 10%;
    margin-top: 20%;
}

#correctAnswer{
    display: none;
    opacity: 0;
    width: 80%;
    margin-left: 10%;
    margin-right: auto;
    float: left;
   
}
#correctAnswer h1{
     text-shadow: 0px 5px rgba(0,0,0,0.7);
}
#correctAnswer p {
    color: white;
    font-family: "casual",sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
}

#incorrectAnswer{
    display: none;
    opacity: 0;
    text-align: center;
    padding-top: 50px;
}
#incorrectAnswer h1{
     text-shadow: 0px 5px rgba(0,0,0,0.7);
}
#incorrectAnswer p {

    text-align: center;
    font-family: "casual",sans-serif;
    color: white;
    font-size: 26px;
}

#form1,#form2,#form3,#form4,#form5,#form6{
    display: none;
}

.funnel input{
    border-radius: 20px;
    padding: 5px;
    letter-spacing: 1px;
    
 
}
.funnel select{
    padding: 0px 60px 10px 10px
}

.funnel p {
    color: white;
    letter-spacing: 1px;
    font-size: 16px;
    
}
.field-validation-error{
    background-color: white;
}
.answerOptionText {
    color: white !important;
    font-size: 18px !important;
}

.pending {
    color: white !important;
    font-size: 18px !important;
    font-family: "casual",sans-serif;
}


/*-------------|Terms styling |---------------*/

#terms1{
    height: auto;
    padding-bottom: 50px;
    background-color: darkorange;
    color: white;
    font-family: sans-serif;


    
}

#terms1 h1 {
    text-shadow: 0px 5px rgba(0,0,0,0.6);
}

#terms1 p {
    width: 90%;
    margin-left: auto;
    margin-right:auto;
}

#terms1 h3{
       margin-left: auto;
    margin-right: auto;
    width: 90%;
}

#terms1 table{
       
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


.tg .bold{
    font-weight: bold;
    text-align: center;
}

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}

.termsContainer{
    width: 90%;
    margin: auto
}

.termsContainer ul{
    padding-left: 10%;
}