/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

input:focus{ outline: 2px solid #e8c564; border-radius: 6px;}

textarea:focus{ outline: 2px solid #e8c564; }

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

.body{



}

@media screen and (max-width: 736px) {

.grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 12vh ;
  grid-gap: 0px;
  /*background-color: #2196F3;*/
  margin: 0px 0px 0px 0px;

  grid-template-areas:
  "header header"
  "content content";}

.header{ grid-area: header;
    position: fixed;
    width: 100%; height: 12vh;
    background-color:#a47e18;
    z-index: 3;}

.content {
  grid-area: content;
  justify-self: center;
  align-self:center;
}

.content .formbox{
  width: 60vw;
  border: 0px solid grey;
  margin-top: 15vh;

}
.content .emailbox{
 width:80%;  margin-left: auto; margin-right: auto; border: 0px solid #666; margin-top: 10vh;
}

.content .inputbox{ width:56vw; margin-left: auto; margin-right:auto; border: 0px solid #ccc; }

.content .inputbox .boxes{ width: 50vw; margin-left: auto; margin-right:auto; border: 0px solid #ccc; }

.pinbox{
  width: 7vw;
  height: 6vh;
  margin: 1.4vw;
  font-family:Montserrat; font-size: 6vw;
  color: #a47e18;
  text-align:center;
  background-color: #eee;
  border: 1px solid #a47e18;
  border-radius: 6px;
}

 .content .pinmessage { color: #5b1013; font-family: Montserrat; font-size: 5vw; text-align:center; 
 }

.error{ font-family: Montserrat; font-size: 3.5vw; font-weight: bold; color: #ff8888;  text-align: center;}

.buttonClass{
  float:right;
  font-size:13px;
  font-family:Arial;
  width:75px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#4b8f29;
  font-weight:bold;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow: 0px 4px 12px -6px #3e7327;
  text-shadow: 0px 1px 0px #5b8a3c;
  background:linear-gradient(#eb1717, #c21919);
}

.buttonClass:hover {
  background: linear-gradient(#fa3a0a, #fa3a0a);
}
.ebuttonClass a{ text-decoration: none; color: #fff;}

.ebuttonClass{
  font-size:12px;
  font-family:Arial;
  width:75px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#4b8f29;
  font-weight:bold;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow: 0px 4px 12px -6px #3e7327;
  text-shadow: 0px 1px 0px #5b8a3c;
  background:linear-gradient(#006edb, #006edb);
}

.ebuttonClass:hover{
  background: linear-gradient(#72b352, #77b55a);
}

.emailinput{
  width: 100%;
  padding: 12px;
  border: 1px solid #a47e18;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: #eee;
}

.emailinput textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #a47e18;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: #eee;
}

label {font-family: Ariel, Helvetica, sans-serif;}

}

/* TABLET  */

@media screen and (min-width: 737px)

and (max-width: 1027px) {


.grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 12vh ;
  grid-gap: 0px;
  /*background-color: #2196F3;*/
  margin: 0px 0px 0px 0px;

  grid-template-areas:
  "header header"
  "content content"
   ;
}

/*.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px   0;
  font-size: 30px;
}*/



.header{ grid-area: header;
    position: fixed;
    width: 100%; height: 8vh;
    background-color:#a47e18;
    z-index: 3;}



.content {
  grid-area: content;
  justify-self: center;
  align-self:center;
}

.content .formbox{
  width: 50vw;
  border: 0px solid grey;
  margin-top: 15vh;

}
.content .boxes{
 width:100%; border: 0px solid #666; margin-top: 0vh; padding: 0px 0px 0px 1.5vw;
}

.content .inputbox{ width:60%; margin-left: auto; margin-right:auto; border: 0px solid #ccc; }

.pinbox{
  width: 2.7vw;
  height: 6vh;
  margin: 1vw;
  font-family:Montserrat; font-size: 2vw;
  color: #a47e18;
  text-align:center;
  background-color: #eee;
  border: 1px solid #a47e18;
  border-radius: 6px;
}

 .content .pinmessage { color: #5b1013; font-family: Montserrat; font-size: 2vw; text-align:center; 
 }


.buttonClass{
  float:right;
  font-size:12px;
  font-family:Arial;
  width:90px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#4b8f29;
  font-weight:bold;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow: 0px 4px 12px -6px #3e7327;
  text-shadow: 0px 1px 0px #5b8a3c;
  background:linear-gradient(#eb1717, #c21919);
}

.buttonClass:hover {
  background: linear-gradient(#fa3a0a, #fa3a0a);
}

.ebuttonClass a{ text-decoration: none; color: #fff;}

.ebuttonClass{
  font-size:12px;
  font-family:Arial;
  width:90px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#4b8f29;
  font-weight:bold;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow: 0px 4px 12px -6px #3e7327;
  text-shadow: 0px 1px 0px #5b8a3c;
  background:linear-gradient(#006edb, #006edb);
}

.ebuttonClass:hover{
  background: linear-gradient(#72b352, #77b55a);
}


.emailinput{
  width: 100%;
  padding: 12px;
  border: 1px solid #a47e18;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: #eee;
}

.emailinput textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #a47e18;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: #eee;
}

label {font-family: Ariel, Helvetica, sans-serif;}

/*p435rw347-yp9897-th55r-ngw345w0kl-km54298-ert43r43x432-yut878jkl-cbx43286y-98wsxa9-55tr42wed-f43g54w32q-h8793-hkxz64192-unm4de3457-qdewr6-ertfdg7h765-o87ht56.php*/
/*yp9897-th55r-ngw345w0kl-km54298-ert43r43x432-yut878jkl-cbx43286y-98wsxa9-55tr42wed-f43g54w32q-h8793-hkxz64192-unm4de3457-qdewr6-ertfdg7h765-o87ht56.php
*/
.error{ font-family: Montserrat; font-size: 1.2vw; font-weight: bold; color: #ff0000;  text-align: center;}



}


/* DESKTOP  */

@media screen and (min-width: 1028px) {
.grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 12vh ;
  grid-gap: 0px;
  /*background-color: #2196F3;*/
  margin: 0px 0px 0px 0px;

  grid-template-areas:
  "header header"
  "content content"
   ;
}

/*.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px   0;
  font-size: 30px;
}*/



.header{ grid-area: header;
    position: fixed;
    width: 100%; height: 8vh;
    background-color:#a47e18;
    z-index: 3;}



.content {
  grid-area: content;
	justify-self: center;
	align-self:center;
}

.content .formbox{
	width: 46vw;
	border: 0px solid grey;
  margin-top: 15vh;

}
.content .boxes{
 width:100%; border: 0px solid #666; margin-top: 0vh; padding: 0px 0px 0px 1.5vw;
}

.content .inputbox{ width:50%; margin-left: auto; margin-right:auto; border: 0px solid #ccc; }

.pinbox{
	width: 2.5vw;
	height: 6vh;
	margin: 1vw;
	font-family:Montserrat; font-size: 2vw;
  color: #a47e18;
	text-align:center;
	background-color: #eee;
	border: 1px solid #a47e18;
	border-radius: 6px;
}

 .content .pinmessage { color: #5b1013; font-family: Montserrat; font-size: 2vw; text-align:center; 
 }


.buttonClass{
  float:right;
  font-size:12px;
  font-family:Arial;
  width:75px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#4b8f29;
  font-weight:bold;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow: 0px 4px 12px -6px #3e7327;
  text-shadow: 0px 1px 0px #5b8a3c;
  background:linear-gradient(#eb1717, #c21919);
}

.buttonClass:hover {
  background: linear-gradient(#fa3a0a, #fa3a0a);
}

.ebuttonClass a{ text-decoration: none; color: #fff;}

.ebuttonClass{
  font-size:12px;
  font-family:Arial;
  width:75px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#4b8f29;
  font-weight:bold;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow: 0px 4px 12px -6px #3e7327;
  text-shadow: 0px 1px 0px #5b8a3c;
  background:linear-gradient(#006edb, #006edb);
}

.ebuttonClass:hover{
  background: linear-gradient(#72b352, #77b55a);
}


.emailinput{
  width: 100%;
  padding: 12px;
  border: 1px solid #a47e18;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: #eee;
}

.emailinput textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #a47e18;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: #eee;
}

label {font-family: Ariel, Helvetica, sans-serif;}

/*p435rw347-yp9897-th55r-ngw345w0kl-km54298-ert43r43x432-yut878jkl-cbx43286y-98wsxa9-55tr42wed-f43g54w32q-h8793-hkxz64192-unm4de3457-qdewr6-ertfdg7h765-o87ht56.php*/
/*yp9897-th55r-ngw345w0kl-km54298-ert43r43x432-yut878jkl-cbx43286y-98wsxa9-55tr42wed-f43g54w32q-h8793-hkxz64192-unm4de3457-qdewr6-ertfdg7h765-o87ht56.php
*/
.error{ font-family: Montserrat; font-size: 1.2vw; font-weight: bold; color: #ff0000;  text-align: center;}

}