/* =============================================================================
   General
   ========================================================================== */
::selection {
    background: #77be70;

    /* Safari */
}

::-moz-selection {
    background: #77be70;

    /* Firefox */
}

html {
    background: #ee3c2b;
    -webkit-font-smoothing: antialiased;
}

body {
    font: 1em/1.4 "proxima-nova", sans-serif;
    font-weight: 400;
    color: #311d09;
}

img {
    width: 100%;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

@media screen and (max-width: 960px) {
    body {
        min-width: 100%;
        font-size: 1em;
        line-height: 1.5;
        -webkit-text-size-adjust: none;
    }

    img {
        max-width: 100%;
        height: auto;
        margin: auto;
    }
}

@media screen and (max-width: 550px) {
    body {
        min-width: 100%;
        font-size: 0.750em;
    }

    img {
        max-width: 100%;
    }
}

/* =============================================================================
   Fonts
   ========================================================================== */
h1,
h2,
h3,
h4,
h5 {
    line-height: 1em;
    font-weight: 400;
    color: #000;
    text-align: center;
    text-transform: uppercase;
}

h1 {
    font-size: 2.750em;
    font-family: SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 1px 2px 0 #ee3c2b, 3px 5px 0 #d73527;
}

h2 {
    font-size: 2em;
    font-family: SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* h2, h3, h4, h5 {
	font-size: 24px;
	
	font-family: SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-weight: normal; 
	font-style: normal;
} */
p {
    font-family: SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 20px;
    font-size: 1.250em;
    text-align: center;
}

a {
    color: #ee3c2b;
    cursor: pointer;
    text-decoration: none;

    /* Transition */
    -webkit-transition: 0.3s color;
    -moz-transition: 0.3s color;
    -ms-transition: 0.3s color;
    -o-transition: 0.3s color;
    transition: 0.3s color;
}

a:focus,
a:hover {
    color: #000000;
}

/* =============================================================================
   Buttons
   ========================================================================== */
a.btn {
    border: 4px solid #ee3c2b;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 12px 22px 13px 22px;
    text-align: center;
    font: 1.750em SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;

    /* Transition */
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -ms-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;

    /* Gradient 
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); */
    /* box-shadow: 2px 3px 0 #ee3c2b, 6px 7px 0 #d73527; */
    /* cursor: default; */
}

/* Generic Button */
a.btn {
    background-color: #fbf3dc;
}

a.btn:hover {
    background-color: #ffdd3f;
}

a.btn:active {
    background-color: #f7e8be;
}

/* =============================================================================
   General Layout
   ========================================================================== */
#container {
    margin: 20px auto 30px;
    max-width: 900px;
}

.logo {
    margin: 0 auto 10px;
    max-width: 305px;
    text-align: center;
}

@media screen and (max-width: 900px) {
    #container {
        width: 90%;
    }
}

@media screen and (max-width: 550px) {
    #container {
        margin-bottom: 20px;
    }

    .logo {
        margin-bottom: 5px;
        width: 90%;
    }
}

/* =============================================================================
   Spritely Original Code
   ========================================================================== */
#scene-container {
    /* min-width:900px; */
    /* padding-top:359px; */
    position: relative;
    width: 100%;
}

#scene-background {
    position: relative;
    width: 100%;
    height: 680px;
    z-index: 1000;
}

.scene-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* min-width: 900px; */
    height: 100%;
    overflow: hidden;
}

#clouds-01 {
    background: transparent url("../img/universal/bg-scene-clouds-01.png") 300px 0 repeat-x;
}

#clouds-02 {
    background: transparent url("../img/universal/bg-scene-clouds-02.png") 300px 0 repeat-x;
}

#clouds {
    background: transparent url("../img/universal/bg-scene-cloud.png") 0 214px repeat-x;
}

#water {
    background: url("../img/universal/bg-scene-water.gif") 0 280px repeat-x;
}

#sand {
    background: url("../img/universal/bg-scene-sand.png") center 340px repeat-x;
}

@media screen and (max-width: 768px) {
    #scene-background {
        position: relative;
        width: 100%;
        height: 850px;
        z-index: 1000;
    }
}

/* =============================================================================
   New Scene Code
   ========================================================================== */
#scene-midground {
    position: absolute;
    top: 0;
    z-index: 2000;
    width: 100%;
    height: auto;

    /* background: #000; */
    overflow: hidden;
}

#scene-midground-island {
    position: absolute;
    top: 208px;
    z-index: 2500;
    width: 100%;
    height: 350px;
    background: transparent url('../img/universal/bg-scene-island.png') center top no-repeat;
    background-size: 1550px 101px;
}

#scene-button {
    position: absolute;
    top: 90px;
    z-index: 3000;
    width: 100%;
    height: auto;
    text-align: center;
}

#scene-foreground {
    position: absolute;
    top: 0;
    z-index: 3000;
    width: 100%;
    height: auto;

    /* background: #000; */
    overflow: hidden;
}

.scene-foreground {
    margin: 40px auto 0;
    max-width: 960px;
}

/* ---------- TIKI GUY / GIRL ---------- */
#tiki-girl {
    float: left;
    background: transparent url('../img/universal/bg-scene-tiki-girl.png') 0 0 no-repeat;
    width: 316px;
    height: 380px;
}

#tiki-guy {
    margin-right: 40px;
    float: right;
    background: transparent url('../img/universal/bg-scene-tiki-guy.png') 0 0 no-repeat;
    width: 182px;
    height: 388px;
}

/* ---------- SHADOW ---------- */
#scene-foreground-shadow {
    position: absolute;
    top: 0;
    z-index: 2000;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.scene-foreground-shadow {
    margin: 400px auto 0;
    max-width: 960px;
}

#tiki-girl-shadow {
    float: left;
    margin-left: 50px;
    background: url("../img/universal/bg-scene-shadow-01.png") 0 0 no-repeat;
    width: 214px;
    height: 34px;
}

#tiki-guy-shadow {
    float: right;
    background: url("../img/universal/bg-scene-shadow-02.png") 0 0 no-repeat;
    width: 200px;
    height: 34px;
}

/* ---------- FLAMES ---------- */
#outerr {
    min-width: 960px;

    /* overflow-x: hidden; */
    overflow: hidden;
}

#containerr {
    /* background: gray; ACTIVATE COLOUR FOR TESTING */
    width: 960px;
    margin: 0px auto;
    height: 470px;
}

.roww {
    /* background: blue; ACTIVATE COLOUR FOR TESTING */
    width: 1240px;
    margin-left: -140px;
}

.inner {
    position: relative;

    /* background: yellow; ACTIVATE COLOUR FOR TESTING */
    margin-left: 140px;
    width: 960px;
    height: 100px;
}

.scene-flame {
    position: absolute;
    top: 0;
    overflow: hidden;
}

#flame-l {
    background: transparent url('../img/universal/bg-scene-flame-l.png') no-repeat;
    top: 23px;
    left: -69px;
    width: 66px;
    height: 152px;

    /* z-index: 2000; */
    float: left;
}

#torch-l {
    background: transparent url('../img/universal/bg-scene-torch-l-shadow.png') 0 0 no-repeat;
    background-size: 115px 303px;
    top: 160px;
    left: -60px;
    width: 115px;
    height: 303px;

    /* z-index: 2000; */
    float: left;
}

#flame-r {
    background: transparent url('../img/universal/bg-scene-flame-l.png') 0 0 no-repeat;
    top: 23px;
    right: -78px;
    width: 66px;
    height: 152px;

    /* z-index: 2000; */
    float: right;
}

#torch-r {
    background: transparent url('../img/universal/bg-scene-torch-r-shadow.png') 0 0 no-repeat;
    background-size: 100px 303px;
    top: 160px;
    right: -120px;
    width: 100px;
    height: 303px;

    /* z-index: 2000; */
    float: right;
}

/* ---------- FOOTER ---------- */
#scene-footer {
    position: absolute;
    top: 460px;
    z-index: 4000;
    width: 100%;
    height: auto;
}

#footer {
    margin: 10px auto;
    max-width: 900px;
    width: 100%;
    min-height: 84px;
    background: transparent url('../img/universal/footer-icon.png') top center no-repeat;
    background-size: 84px 84px;
}

#footer-level-01 {
    padding-top: 8px;
    height: 28px;

    /* background: #eee; */
}

#footer-level-02 {
    height: 14px;

    /* background: #ddd; */
}

#footer-level-03 {
    height: 28px;

    /* background: #ccc; */
}

.footer-facebook {
    float: right;
    margin: 4px 0 0 5px;
    max-width: 16px;
}

/* ---------- FOOTER - COLUMNS ---------- */
#footer .column-left {
    height: 10px;
    float: left;
    width: 44%;
    text-align: right;
}

#footer #footer-level-02 .column-left {
    background: url('../img/universal/footer-pattern-l.png') repeat-x right 5px;
    background-size: 8px 4px;
}

#footer .column-centre {
    height: 10px;
    float: left;
    width: 12%;
    text-align: center;
}

#footer .column-right {
    height: 10px;
    float: left;
    width: 44%;
    text-align: left;
}

#footer #footer-level-02 .column-right {
    background: url('../img/universal/footer-pattern-r.png') repeat-x left 6px;
    background-size: 8px 4px;
}

/* ---------- FOOTER - LARGE TEXT ---------- */
#footer .lge-text ul li {
    display: inline;
    padding: 0 2px 0 14px;
    border-left: 0;
    list-style: none;
    font-size: 1.100em;
    font-family: SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #451512;
}

#footer .lge-text li {
    background: url('../img/universal/footer-star.png') no-repeat 0 5px;
    background-size: 8px 8px;
}

#footer .lge-text li:first-child {
    background: none;
}

#footer .column-right .lge-text li:first-child {
    padding-left: 0;
}

#footer .column-left .lge-text li:last-child {
    padding-right: 0;
}

/* ---------- FOOTER - SMALL TEXT ---------- */
#footer .sml-text ul li {
    display: inline;
    padding: 0 6px 0 10px;
    border-left: 1px solid #937214;
    list-style: none;
    color: #451512;
}

#footer .sml-text ul li:first-child {
    border-left: 0;
}

#footer .column-right .sml-text ul li:first-child {
    border-left: 0;
    padding-left: 0;
}

#footer .column-left .sml-text ul li:last-child {
    padding-right: 0;
}

/* ---------- FOOTER - NOTICE ---------- */
#notice {
    clear: both;
    margin: 0 auto;
    padding: 10px 0;
    max-width: 768px;
    text-align: center;
}

#notice ul li {
    display: inline;
    padding: 0 8px;
    list-style: none;
}

#notice p,
li {
    margin: 0;
    font-size: 0.700em;
    line-height: 1.650em;
    color: #937214;
}

@media screen and (max-width: 960px) {
    /* #scene-midground {
		display: none;
	} */
    #torch-l {
        display: none;
    }

    .scene-foreground,
    	.scene-foreground-shadow {
        width: 95%;
    }

    #footer {
        width: 90%;
    }

    #footer .column-left {
        width: 43%;
    }

    #footer .column-centre {
        width: 14%;
    }

    #footer .column-right {
        width: 43%;
    }

    #footer .column-left .lge-text ul li:last-child {
        display: none;
    }

    #footer .column-right .lge-text ul li:last-child {
        display: none;
    }

    #footer .column-left .sml-text ul li:last-child {
        display: none;
    }

    #footer .column-right .sml-text ul li:first-child {
        display: none;
    }

    #footer .sml-text ul li {
        padding: 0;
        border: none;
        line-height: 5px;
    }
}

@media screen and (max-width: 768px) {
    #scene-background,
    	#scene-midground,
    	#scene-foreground,
    	#scene-foreground-shadow,
    	#scene-midground-island,
    	#scene-footer {
        padding-top: 50px;
    }

    #scene-button {
        top: 0;
    }

    a.btn {
        width: 90%;
    }

    #footer .column-left,
    	#footer .column-centre,
    	#footer .column-right {
        width: 100%;
        text-align: center;
    }

    #footer-level-01 {
        padding: 100px 0 35px;
    }

    #footer-level-02 {
        display: none;
    }

    #footer-level-03 {
        margin: 0;
    }

    #footer .column-right .sml-text {
        display: none;
    }

    #footer .lge-text ul li {
        font-size: 1.100em;
    }

    #footer .lge-text li {
        background-position: 0 5px;
    }

    #notice {
        padding: 0;
        width: 90%;
        height: auto;
    }

    #notice ul li {
        display: block;
    }
}

@media screen and (max-width: 550px) {
    #footer .lge-text ul li {
        font-size: 1.500em;
    }

    #footer .lge-text li {
        background-position: 0 5px;
    }
}

/* ---------- ODD SIZE TO REMOVE TIKI GUY (AS HE HAS EXTRA WIDTH) ---------- */
@media screen and (max-width: 600px) {
    #tiki-girl {
        float: none;
        margin: 0 auto;
    }

    #tiki-girl-shadow {
        float: none;
        margin: 0 auto;
    }

    #tiki-guy,
    	#tiki-guy-shadow {
        display: none;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #flame-l {
        background-image: url('../img/universal/bg-scene-flame-l@2x.png');
        background-size: 1584px 152px;
    }

    #flame-r {
        background-image: url('../img/universal/bg-scene-flame-r@2x.png');
        background-size: 1584px 152px;
    }

    #tiki-girl {
        background-image: url('../img/universal/bg-scene-tiki-girl@2x.png');
        background-size: 12640px 380px;
    }

    #tiki-guy {
        background-image: url('../img/universal/bg-scene-tiki-guy@2x.png');
        background-size: 10920px 388px;
    }

    #clouds {
        background-image: url('../img/universal/bg-scene-cloud@2x.png');
        background-size: 570px 66px;
    }

    #clouds-01 {
        background-image: url('../img/universal/bg-scene-clouds-01@2x.png');
        background-size: 1440px 170px;
    }

    #clouds-02 {
        background-image: url('../img/universal/bg-scene-clouds-02@2x.png');
        background-size: 1440px 170px;
    }

    #tiki-girl-shadow {
        background: url("../img/universal/bg-scene-shadow-01@2x.png") 0 0 no-repeat;
        background-size: 214px 34px;
    }

    #tiki-guy-shadow {
        background: url("../img/universal/bg-scene-shadow-02@2x.png") 0 0 no-repeat;
        background-size: 200px 34px;
    }

    #footer .lge-text li {
        background: url('../img/universal/footer-star@2x.png') no-repeat 0 5px;
        background-size: 8px 8px;
    }
}

/* =============================================================================
   Form
   ========================================================================== */
#form-action {
    overflow: auto;
    height: auto !important;
}

#form-action .container {
    position: relative;
    width: 360px;
    margin: 20px auto 0;
    overflow: auto;
    height: auto !important;
}

@media screen and (max-width: 550px) {
    #form-action .container {
        width: 100%;
    }
}

/* Form Fields */
form input,
form textarea {
    font: 1.250em/1.1 SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    width: 100%;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 10px;
    margin-bottom: 16px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-appearance: none;
}

form input:focus,
form textarea:focus {
    border-color: #4c3928;
    outline: none;
}

/* Button */
form input.btn {
    border: none;
    cursor: pointer;
    padding: 16px 40px 15px 40px;
    text-align: center;
    font: 1.250em SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    background: #ffdd3f;

    /* Gradient 
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); */
}

form input.btn:hover {
    background: #fece3e;

    /* Gradient 
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); */
}

/* General Form Markup */
input,
textarea,
select {
    font-size: 12px;
    border: 1px solid;
    padding: 6px 5px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
    vertical-align: middle;
}

select {
    padding: 3px;
}

label,
input[type="button"],
input[type="submit"],
input[type="image"],
button {
    cursor: pointer;
}