html, body { height: 100%; }
body {font-family: 'Montserrat', sans-serif; color: #FFF; font-size: 13px;}
body { background: #000 url(images/background.jpg) no-repeat center center / cover; margin: 0; background-attachment: fixed;}
body.blackout { overflow: hidden; }

a { color:#FFFFFF; text-decoration:underline; }

.lrg_container { max-width: 1000px; position: relative; margin: 0 auto;}

.blackout_element {z-index:-1; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0); width: 100%; height: 100%; }
.blackout .blackout_element {  background-color: rgba(0,0,0,0.9); z-index: 10; }
.ani {
		-webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
		-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
		-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
		-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
		transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;}

input:required {
    box-shadow:none;
    shadow:none;
}
input:invalid {
    box-shadow:none;
    shadow:none;
}
input:-moz-submit-invalid {
    box-shadow:none;
    shadow:none;
}
input:-moz-placeholder {
    box-shadow:none;
    shadow:none;
}
textarea:required {
    box-shadow:none;
    shadow:none;
}
textarea:invalid {
    box-shadow:none;
    shadow:none;
}
textarea:-moz-submit-invalid {
    box-shadow:none;
    shadow:none;
}
textarea:-moz-placeholder {
    box-shadow:none;
    shadow:none;
}

.logo, .logo_2 { top: 20px; left: 20px; background: url(images/logo_ds.png) no-repeat center center / contain; width: 102px; height: 81px; z-index: 13;}
.front_page .logo { opacity: 0; }
.font_page .logo_2 { opacity: 1; }
.nav_container { top: 20px; right: 20px; color:#fff; text-transform: uppercase; font-size: 11px; text-shadow: 2px 2px 3px rgba(0,0,0,0.8);text-align: right; padding-left: 130px; z-index: 13; }
.nav_container .menu, .nav_container .menu > div, .nav_container .log_toggle { display: inline-block; cursor: pointer;}
.nav_container .menu > div { padding: 10px 7px;}
.nav_container .log_toggle {}
.nav_container .log_toggle .log_button { background-color:  #FFF; color:#000; border-radius: 12px; border: 1px solid #000; box-shadow: 4px 4px 4px rgba(0,0,0,0.5); padding: 8px 12px; text-shadow:none;}
.menu u { content: ''; background-color: #fff; box-shadow: 2px 2px 8px rgba(0,0,0,.5); width: 0px; height: 6px; position: absolute; bottom: -2px; left: 138px;}

.section {height: 100vh;}
.section .margins { padding: 140px 30px 30px; padding-top:9vh; }
.termsandconditions .margins { padding: 140px 30px 30px; padding-top:9vh; }
.faq .margins { padding: 140px 30px 30px; padding-top:9vh; }
.home { background: url(images/lrg_header.png) no-repeat center center; background-size: 90vh}
.down_arrow { background: url(images/down_arrow.png) no-repeat center center / contain; width: 100%; height: 16px; bottom: 20px; opacity: 0; left: 0; z-index: 0; display:none;}
.front_page .down_arrow  { opacity: 1; z-index: 2;}

.termsandconditions { width:100%; display: inline-block; vertical-align: top; position: relative;}
.termsandconditions h2 { background: url(images/divider_hori.png) bottom left repeat-x; background-size: 399px; margin-bottom: 13px; padding-bottom: 13px; }
.termsandconditions .heading { font-weight:bold; font-size: 1.17em; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; }
.termsandconditions .heading li { font-weight:normal; font-size:1.5vh; }

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

.block { width: 40%; max-width: 440px;	display: inline-block; vertical-align: top; position: relative; }
.block h2 { background: url(images/divider_hori.png) bottom left repeat-x; background-size: 399px; margin-bottom: 13px; padding-bottom: 13px; }
.block p { line-height: 17px;}

.card_holder {  display: inline-block; vertical-align: top;max-width: 340px; }
.card { background: url(images/card_front.png) no-repeat center center / contain; width: 251px; height: 160px; margin:50px auto; }
.card {  z-index: 1; position: relative;}

.card.back { background: url(images/card_back.png) no-repeat center center / contain; }
.right .card_holder, .left .block { float: left; }
.left .card_holder, .right .block { float: right; }
.right .card { transform: rotate(-7deg); margin-left: 40px; }
.left .card { transform: rotate(7deg); margin-right: 60px; }

.panel_container {position: relative; top: -60px; float: right; background: url(images/divider_vert.png) no-repeat center left }
.panel, .faq_panel {background-color: #fff; margin: 30px 30px 30px 6vw; padding: 30px; border-radius: 20px; color: #000;max-width: 270px;}
.faq_panel h2 { text-align: center; text-transform: uppercase; margin-top: 0;background: url(images/divider_hori_black.png) bottom left repeat-x; background-size: 399px; margin-bottom: 13px; padding-bottom: 13px; }
.faq_panel h3 { color:#87946b; }

.login_panel { 	position: fixed; top: 70vh; left: 50%; display: none;z-index: 13;}
.loaded .login_panel {display: block;}
.login_panel .panel { 	position: relative; left: -50%; top: -50vh; padding: 30px 70px; margin: 30px;}
.login_panel .close, .popuperror .close  { background: url(images/close_circle.png) no-repeat center center / contain; position: absolute; cursor: pointer; top: -16px; right: -16px; width: 36px; height: 36px;}
.login_panel button { margin: 20px auto; display: block; }
.login_panel .small { font-size: .7em; text-align: center; }
.login_panel .grey { color: #999;}
.loading_wheel { background:url(images/loader_green.gif) no-repeat center center / contain; height: 13px; width: 100%; display: block;}

.my_account { font-weight: 100; }
.my_account .left .block { /*width: 320px;*/ }
.my_account h3, .my_account h4  { margin-bottom: 3px;}
.my_account label {display: inline-block; font-size: inherit; text-transform: uppercase; padding-top:3px; width:25%;}
.my_account .user_detail { display: inline-block; }
.my_account input, .my_account .selector { background: transparent; color: #FFF; display:inline-block; width:200px}
.my_account select { width:200px; display: inline-block; color:#000; }

.graph_holder { width: 520px; float: right; background: url(images/divider_vert.png) repeat-y left top; }
.graph { width: 25%; display: inline-block; vertical-align: top; background: url(images/divider_vert.png) repeat-y right top } 
.graph_icon { width: 100%; /*height: 120px;*/ text-align: center; margin: 20px 0; box-sizing:border-box; }
.graph_text { text-align: center; padding: 20px 20px 0px 20px; 	min-height: 120px;}
.graph_icon.graph_points { background: url(images/graph_points.png) no-repeat center center / contain;}
.graph_icon.graph_pig { background: url(images/graph_pig.png) no-repeat center center / contain; color: #000; padding: 20% 0 10% 0; box-sizing: border-box; font-size: 21px;}
.graph_icon.graph_pie { background: url(images/graph_pie.png) no-repeat center center / contain;  padding: 15% 0 15% 0; box-sizing: border-box; }


label { display: block;font-size: 10px; padding-top: 6px;}
input {	box-sizing: border-box; margin: 1px 5px; padding:5px 7px; width:100%; position: relative; left: -5px;border: 1px solid #ddd;}
input[type=checkbox] {	margin: 15px 21px 4px 0; width: 1px; height: 1px; opacity: 0;}
input[disabled=disabled] {	opacity: .4;
	border: 1px solid #666;
}
.checkbox {position: relative; padding-left:10px;} 
.checkbox label:before { content:''; position: absolute; top:7px; left: 0; width: 15px; height: 15px; border:1px solid #ddd; }
.checkbox label.checked:after { content:''; position: absolute; top:9px; left:2px; width: 11px; height: 11px; border:1px solid #ddd; background-color: #87946b;}
.col { width: 49%; display: inline-block; }
.col.full, .col.full input { width: 100%; }
.selector { position: relative; }
.col.full .selector {	display: inline-block; width: 32%;}
.col.full .selector:last-child {	display: inline-block; width: 33%;}
select { width: 100%; position: absolute; opacity: 0; top: 0; z-index: 2 }
select + input { z-index: 0; background: url(images/dropdownarrow.png) no-repeat 96% center / 6px; padding-right: 21px;}
textarea {width: 100%; border: 1px solid #ddd; height: 120px;}
button { background-color: #87946b; text-transform: uppercase; padding: 9px 12px;margin-top: 15px; border-radius: 9px; border: none; color: #fff; font-weight: bold; text-align: center; width: 50%; }
button.muted { background-color: transparent; border: 1px solid #87946b; color: #87946b;}

input, textarea, keygen, button { font-size: 12px; }
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: #87946b solid 1px;
}
select { height: 100%; border: none;}

.err_exists input, .checkbox.err_exists label:before  {border: 1px solid #f00; }


.popuperror {	position: absolute; display: none;
	background: #FFFFFF;
	top: 70px;
	left: -40px;
	width: 300px;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 1px 1px 8px rgba(0,0,0,.7);
	color: #C00;}
	
	.popuperror h3 { text-align: center; margin-top: 0;}
.loaded .popuperror {display: inherit;}

.options { padding: 0 0 0 40px; position: relative; font-size: 22px; margin-bottom: 15px; }
.options i { display:block; position:absolute; top: 0; left: 0; height: 35px; width: 25px; background: url(images/contact_sprite.png) no-repeat left top; background-size: 25px;}
.options.phone i {}
.options.store i { background-position: left -43px; }
.options.facebook i { background-position: left -86px; }
.options p { font-size: 12px; margin:0;}

.visual_element { position: fixed; bottom: 0; opacity: 0 }
.visual_element.stick { opacity: 1 }
.visual_element.rev { opacity: 1 }
.visual_element.rev.stick { opacity: 0 }
.bg_left { background: url(images/bg_left.png) no-repeat left bottom / contain; height: 30vh; width: 100%; left: 0; }
.strainer { background: url(images/strainer.png) no-repeat right bottom / contain; height: 50vh; width: 100%; right: 0; }
.gum_leaves_2 { background: url(images/gum_leaves_2.png) no-repeat right top / contain; height: 10vh; width: 100%; right: 160px; top: 0; }
.rolling_pin { background: url(images/rolling_pin.png) no-repeat right bottom / contain; height: 50vh; width: 100%; right: 0; }
.dough { background: url(images/dough.png) no-repeat left bottom / contain; height: 64vh; width: 34vw; left: 0; bottom: 0; }

.footer { width: 100%; bottom: 9px; font-size: 12px; text-align: center; color: #999; opacity: 1; left: 0; z-index: 12;}
.footer a { color:#999; }
.front_page .footer { opacity: 0; z-index: 0;}

.my_account { display: none; }
.loaded .my_account { display: inherit;}

.fixed {position: fixed;}


@media only screen and (min-width: 900px) {
	body { font-size: 1.2vw; }
	.lrg_container { max-width: none; }
	.block { max-width:inherit;  }
	.block p { line-height: 2vw; }
	.panel { max-width: 31vw; }
	.faq_panel { max-width: 100%; }
	.card_holder { max-width: inherit;}
	.card { width: 34vw; height: 21vw; }
	.section .margins { padding: 25vh 5vw 30px; }
	.termsandconditions .margins { padding: 25vh 10vw 30px; }
	.faq .margins { padding: 25vh 20vw 30px; }
	.logo, .logo_2 {width: 10vw; height: 15vh; }
	.nav_container { font-size: 1vw; }
	label, input, textarea, keygen, select, button {font-size: 1vw;}
	.checkbox label:before {  width: 1vw; height: 1vw;}
	.checkbox label.checked:after {width: .9vw; height: .9vw;}
	.col-25 {width: 25%;}
	.col-50 { width: 50%;}
	.col-45 { width: 45%;}


}
@media only screen and (max-width: 900px) {
	.panel { margin: 30px 30px 30px 2vw;}
	.faq_panel { margin: 0;}
	.panel_container {background:0;}


	.my_account { }
	.my_account .margins { padding: 140px 0 30px;}
	.my_account .left .block { width: 100%; text-align:center; margin: 0 auto; float: none; }
	.my_account h3, .my_account h4  { }
	.my_account label {width:25%;}
	.my_account .user_detail { 	display: block; margin-bottom: 5px; }
	.my_account input, .my_account select, .my_account .selector { display: block; margin: 5px auto; text-align: center;}

	.graph_holder { background: url(images/divider_hori.png) repeat-x left bottom; background-size: 403px 4px;	width: 100%; margin: 40px 0; }
	.graph { background: url(images/divider_hori.png) repeat-x right top; background-size: 403px 4px; width: 100%; } 
	.graph_icon { margin-top: 40px; }
	.graph_text { margin-bottom: 40px; min-height: 1px; }
	.graph_icon.graph_points { }
	.graph_icon.graph_pig {  padding: 12% 0 6% 0; }
	.graph_icon.graph_pie {  padding: 10% 0 10% 0;}
	.center-points { position: relative; top: 50%; left:50%; }
    .col-50 { width: 100%;}
	.col-45 { width: 100%;}


	.card_holder, .block {display: block; width: 100%;max-width: 100%; }
	.right .card, .left .card {margin: 60px auto 0;}
	.panel_container {top:0;  width: 100%;}
	.panel { margin: 83px 0 0; border-radius: 0; max-width: inherit;}
	.faq_panel { margin: 0; border-radius: 0; max-width: inherit; }
	.login_panel { width: 100%; }
	.menu > div {font-size: 0.7em;}
	.footer { position: static; margin:30px 0 ;}
}

@media only screen and (max-width: 600px) {
	.logo { display: none; }
	.nav_container { top:0; right:inherit; left: 0; font-size: 18px; text-shadow: 2px 2px 3px rgba(0,0,0,0.8);text-align: center; padding-left:0; width: 100%;	z-index: 12; }
	.nav_container .log_toggle { position: absolute; top: 20px; right: 20px;}
	.nav_container .log_toggle .log_button { background-color:inherit; color:#FFF; border-radius: 0; box-shadow: none; border:none; text-shadow: 2px 2px 3px rgba(0,0,0,0.8); padding: 8px 12px; }
	.nav_container .menu {position: absolute; width: 100%; top: -80vh; margin-top: 90px; opacity: 0; background: url(images/divider_hori.png) bottom left repeat-x; background-size: 399px; display: block;}
	.nav_container .menu.on { position: absolute; width: 100%; top: 0vh; opacity: 1; }
	.nav_container .menu > div { margin:0; padding:0px; display: block; background: url(images/divider_hori.png) top center repeat-x; background-size: 399px;}
	.nav_container .menu.on > div { padding:30px; }
	.nav_container .menu > div.nav_home { display: none;}
	.nav_container .hamburger, .nav_container .close { position: absolute; top: 20px; left: 20px; width: 30px ; height: 30px; }
	.nav_container .hamburger {background: url(images/hamburger_ds.png) no-repeat center center / contain; width: 38px ; height: 33px;}
	.panel_register_card .panel { margin-top: 6px;}
	.nav_container .close {background: url(images/close_x.png) no-repeat center center / contain;opacity: 0;}
	.blackout .close {opacity: 1;}
	.section {	height: inherit; clear: both;}
	.section.home {	height: 100vh; background-size: 140vw;}
	.card { width: 350px; height: 161px; max-width: 300px; max-height: 160px; border-radius: 20px;}
	.visual_element {display: none;}
	.menu u {display: none;}
	.termsandconditions .heading li { font-size:13px; }
}	

/* FIX GET VENUES PROBLEM */
form.register-your-card-form {
	position:relative;
}

.form-is-loading {position:absolute;z-index:1;background-color:rgba(255,255,255,0.9);top:0;bottom:0;left:0;right:0;}
.form-is-loading span {}

.loader {
  font-size: 10px;
  margin: -5.5em 0 0 -5.5em;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #53a259;
  background: -moz-linear-gradient(left, #53a259 10%, rgba(83,162,89, 0) 42%);
  background: -webkit-linear-gradient(left, #53a259 10%, rgba(83,162,89, 0) 42%);
  background: -o-linear-gradient(left, #53a259 10%, rgba(83,162,89, 0) 42%);
  background: -ms-linear-gradient(left, #53a259 10%, rgba(83,162,89, 0) 42%);
  background: linear-gradient(to right, #53a259 10%, rgba(83,162,89, 0) 42%);
  position:absolute;top:50%;left:50%;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;

}
.loader:before {
  width: 50%;
  height: 50%;
  background: #53a259;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}