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

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

html {
    font-size: 1em;
    line-height: 1.4;
}

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

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

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

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

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

textarea {
    resize: vertical;
}

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

.left {float:left}
.right {float:right; margin-right:20px;}
.clear {clear:both;}

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

html, body{ width:100%;  background-color:#1c79b8; background-image:url(../img/background.jpg); background-repeat:no-repeat; background-position:top center; font-family: 'Oxygen', sans-serif; margin:0px;padding:0px; position:relative;}
a:hover, a:active, a:focus {
  outline:0;
}


header {margin-top:30px;}
h1{padding:0px;margin:0px;}
h2 { color:white; margin:0px; padding:0px; font-size:50px; margin-bottom:30px;}
p {margin:0px;padding:0px; color:white; font-size:20px; margin-bottom:30px;}
#content {width:1000px; margin:0 auto; position:relative;z-index:100; }

/* Logo */

.logo {
	display:block;
	width:272px;
	height:100px;
	background-image:url(../img/logo.png);
	background-repeat:no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin:0 auto;
}


/* Landing Section */
#landing {margin-top:40px; text-align:center;}

span.highlight {color:#f2ca51;}


#email {margin-top:40px; display:none;}
#legal{margin-top:40px;display:none;}


/* Yellow Button */

.btnyellow {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  -webkit-box-shadow: 0px 4px 0px #bc9233;
  -moz-box-shadow: 0px 4px 0px #bc9233;
  box-shadow: 0px 4px 0px #bc9233;
  color: #ffffff;
  font-size: 30px;
  background: #ecb831;
  padding: 8px 20px 7px 20px;
  text-decoration: none;
}

.btnyellow:hover {
  background: #fbd05f;
  text-decoration: none;
}


/* Gray Button */

.btngray {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  -webkit-box-shadow: 0px 4px 0px #5e5e5e;
  -moz-box-shadow: 0px 4px 0px #5e5e5e;
  box-shadow: 0px 4px 0px #5e5e5e;
  color: #ffffff;
  font-size: 30px;
  background: #767676;
  padding: 8px 20px 7px 20px;
  text-decoration: none;
}

.btngray:hover {
  background: #acacac;
  text-decoration: none;
}



/* form styling */




form#emailform input[type="text"] {width:460px; margin:0px padding:0px;float:left; margin-right:10px; margin-bottom:10px; height:20px; font-size:20px; padding:10px; background-color:#d2eaf7; border:2px solid #0091c9;}
form#emailform textarea {width:955px;  margin:0px;margin-bottom:20px; height:150px;font-size:20px; padding:10px;background-color:#d2eaf7;border:2px solid #0091c9;}


form#emailform input:focus,form#emailform textarea:focus {
	background-color:#dfb95b;
	color:white;
}

form#emailform input.error { background-color:#cc2a29; color:white; border:2px solid white;}
form#emailform input.valid { background-color:#e3ffec; border:2px solid #32834b; color:#3F3F3F}
form#emailform textarea.error { background-color:#cc2a29; color:white; border:2px solid white;}
form#emailform textarea.valid { background-color:#e3ffec; border:2px solid #32834b; color:#3F3F3F}
/* legal styling */

.boxleft {width:350px; float:left;}

.boxright{width:350px; float:left;}


/* Animated Image Styling */

.imageLeft,.imageLeftBottom,.imageMiddle,.imageRightBottom,.imageRightBottom2,.imageRight,.imageRightTop {
	display:none;
}

.imageLeft img,.imageLeftBottom img,.imageMiddle img,.imageRightBottom img,.imageRightBottom2 img,.imageRight img,.imageRightTop img {
	width: 100%;max-width: 100%;
}

.imageLeft {position:absolute; top:30px; width:15%;}
.imageLeftBottom {position:fixed; left:20%; bottom:10%; width:10%;}
.imageMiddle {position:fixed; left:40%;bottom:0px; width:20%;}
.imageRightBottom {position:fixed; right:20%;bottom:20%;width:5%;}
.imageRightBottom2 {position:fixed; right:15%;bottom:10%;width:3%;}
.imageRight {position:fixed; right:0px; top:30%;width:15%;}
.imageRightTop {position:fixed; right:10%; top:5%;width:5%;}


#legalised{width:700px; margin:0 auto;}

.mobileImageBottom {display:none;}

#charNum{color:white; font-size:20px;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1440px) {
  h2 {  font-size:35px; margin-bottom:20px;}
  #content {width:768px; }
  form#emailform input[type="text"] {width:350px;}
form#emailform textarea {width:735px;}
 
  .btnyellow {
  color: #ffffff;
  font-size: 20px;
}

.btngray {
  font-size: 20px;
}

.btngray img {
  width:23px;
  height:25px;
}

.btnyellow img {
  width:26px;
  height:24px;
}

a#goback img {
	height:20px;
}

p {font-size:16px;}



}



@media only screen and (max-height: 650px) {
	.imageMiddle {position:fixed; left:45%;bottom:0px; width:18%;}
	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 480px) {
	.imageLeft {display:none;}
.imageLeftBottom {display:none;}
.imageMiddle {display:none;}
.imageRightBottom {display:none;}
.imageRightBottom2 {display:none;}
.imageRight {display:none;}
.imageRightTop {display:none;}

 #content {width:100%; }
a.btnyellow {display:block;margin:0px 20px;}
a.btngray{display:block;margin:0px 20px;}
h2{ font-size:25px;margin:0px 20px; margin-bottom:20px;}

form#emailform {width:80%; margin:0 auto; }
form#emailform input[type="text"] {width:95%; padding:4%; margin-right:0px;}
form#emailform textarea {width:95%;padding:4%;margin-right:0px;}

.right {float:none; margin-right:0px;width:96%;}
.right a{display:inline-block; float:none;margin:0px; margin-bottom:15px;}
.right a{font-size:14px;}
.right a.btnyellow{display:inline-block; float:none;}


.boxleft {width:100%; float:none; margin-left:20px; }

.boxright{width:100%; float:none;margin-left:20px; }

.boxright h2,.boxleft h2 {margin-left:0px;}
article#legal div div.right a#goback.btngray {width:100px; margin-left:20px;}
#legalised{width:85%;}

.logo {
	width:200px;
	height:74px;
	background-image:url(../img/logo_small.png);
}

header {margin-top:20px;}
#landing {margin-top:20px;}
.mobileImageBottom {position:fixed; bottom:0px;right:0px; display:block;}
#charNum{color:white; font-size:16px; margin-bottom:15px; display:block;}

}



@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

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

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

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

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

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        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) ")";
    }

    .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;
    }

    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;
    }
}