@charset "UTF-8";
/* CSS Document */

/* body { margin:0; padding:0; font-family: 'Comic Sans MS'; font-size: 14px; background-image:url(images/bg-slide.gif); } */
html {}
body {font-family:Verdana, Geneva, sans-serif; margin:0; padding:0; /* background-color: rgba(129, 70, 124,1); */ background-image: url('images/background.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: scroll;}
footer { width:100%; background-color: rgba(99, 52, 95, 0.5); margin-top:50px; padding:45px 0px 35px 0px; border-top: .1rem solid grey; box-shadow: 0px 5px 50px 15px black;}
footer p {font-size: 1rem}

img { max-width: 100%; height: auto; padding-bottom: 25px;}

.center { text-align:center; }

p {font-size:12px; font-weight:100; letter-spacing:.3em; line-height:36px; color:#FFF; }

h1 {font-weight:100; letter-spacing:.3em; font-size: 4rem; color:#FAD21A;}
h2 {font-size:12px; font-weight:100; letter-spacing:.3em; color: rgba(173, 160, 160, 1)}
h3 {font-weight:100; letter-spacing:.3em; font-size: 3rem; border-bottom: .1rem solid rgba(255, 255, 255, 0.1); padding: 10px 0px 20px 0px;}

small {font-size:12px; font-weight:100; letter-spacing:.3em; color: rgba(173, 160, 160, 1)}
small.subscript {font-size: 0.8rem;}

span.yellow { color:#FAD21A; }
span.red { color:#FD2200; }
span.blue { color:#00B0A6; }
span.orange{ color: #E33916; }

.logo-tag { position:relative; margin-top:-95px;left:40px;}

.lever-link a {padding-left:60px;}

.tag-line { text-align:center; color:white; padding: 0px; }

#nameLiveView{ width: 263px; left: 30px; position: relative; top: 28px;}
	
#noteLiveView{ width: 263px; left: 30px; position: relative; top: 40px;}

.back-form-overlay-left { position:relative; margin-top:-364px; left: 7px; width:300px; text-align:left; }

.back-form-overlay-right { position:relative; top:-223px; left:328px; width:300px; }

.back-form-overlay-right input { margin-bottom: 17px; }

.price-badge { position:absolute; top:-40px; left:-50px; }

.photo-upload { position:relative; top:-312px; left:296px; width:300px; }

.photo-upload h1, .photo-upload input, .flip-container { margin-bottom:25px; }

.delivery-text { border-bottom:1px solid #67747B; border-top:1px solid #67747B; }

.delivery-text h1 { color:white; }

.example-text {position:absolute; bottom:204px; left:176px;}
.pricetag {position:absolute; top:249px; left:93px;}

.table-bg {background: url("images/table-bg.png") no-repeat center top; padding-bottom: 25px;}

div.table-bg div.price-cols {padding: 30px 20px 20px 20px; margin-bottom: 20px; background-color: rgba(99, 52, 95, 0.5); border-radius: 5px; box-shadow: 11px 7px 12px rgba(0, 0, 0, 0.43)}

div.postcard {background: url('images/postcard-bg.png') no-repeat center top; min-height: 351px; background-size: cover; display: flex;}
.postcard div {flex: 1;}
.postcard p {font-family: 'Source Serif Pro', Georgia, cursive; font-weight: 100;}

.postcard-note {padding: 35px 15px 0px 40px;transform: rotate(-1.4deg);padding-right: 76px;}
.postcard-addy {padding: 150px 0px 0px 0px;transform: rotate(-1.4deg);}
.postcard-addy p {align-self: flex-end; position: relative}
.postcard-addy div p:nth-child(3){top: -32px;}

.postcard p {color: #333; line-height: normal; letter-spacing: normal; font-size: 1.3rem; text-align: left; margin-bottom: 1rem;}

label {padding-top: 5px;}

/* BUTTONS by Cheeriottis (http://codepen.io/cheeriottis/pen/inluv) */

a.animate {
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
}

a.action-button {
  position: relative;
  padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
  border-radius: 10px;
  font-family: 'Pacifico', cursive;
  font-size: 2.8rem;
  color: #FFF;
  text-decoration: none;
  letter-spacing: 0.1rem;
}

div.price-button {min-height: 81px; padding: 0; margin: 0; border: none; border-radius: none; background: none; display: flex;justify-content: center;}

.action-button:active {
  transform: translate(0px, 4px);
  -webkit-transform: translate(0px, 4px);
  border-bottom: 1px solid transparent;
}

a.blue {
  background-color: #00B0A6;
  border-bottom: 5px solid #109A95;
  text-shadow: 2px -3px #109A95;
}

a.yellow {
  background-color: #FAD21A;
  border-bottom: 5px solid #D7C700;
  text-shadow: 2px -3px #D7C700;
}

a.red {
  background-color: #FD2200;
  border-bottom: 5px solid #C64021;
  text-shadow: 2px -3px #C64021;
}

/* 
	
	FORM ELEMENTS AND HACKING WUFOO 
	
	
*/ 
button {background-color: #FAD21A;}

.street-address-inputs input {width: 100%;margin: 2px;}

.address-inputs {display: inline-flex; width: 100%;margin: 2px;}
.address-inputs input:nth-child(1) {width: 40%}
.address-inputs input:nth-child(2) {width: 20%}
.address-inputs input:nth-child(3) {width: 40%}

form.wufoo {margin: 0px; }
textarea {padding: 6px 10px;}

input.title { margin-bottom:20px; }
textarea.body { height:296px; }

div.start-page div.row {margin-bottom: 20px;}
div.when-header {border-top:1px solid #FFF; padding-top: 20px;}
/* 
	
	MEDIA QUERIES AND ADJUSTMENTS FOR MOBILE
	
	
*/ 
@media screen and (max-width: 1130px) {

.example-text{left: 175px;top: 400px; width: 50%;}

.pricetag{left: 16px;top: 369px;width: 180px;}

}
    
/* 
	
	OLD STYLES DOWN HERE, LIKE FLIPPER, BUTTONS
	
	
*/ 

#to-the-future button {-webkit-perspective: 1000; -webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg); }

#to-the-future button:hover { -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(\0deg); }

/* FLIPPING STYLES!!

 entire container, keeps perspective */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
}

/* flip the pane when hovered */

.flip {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	height: 385px;
    width: 641px;
	margin-left: -20px;
}

/* flip speed goes here */
#flipper {
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;

	position: relative;
	 /*left: -38px;*/
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility:    hidden;
  	-ms-backface-visibility:     hidden;
	backface-visibility: 		 hidden;
	
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);

	margin-left: 10px;
}

/* WUFOO HASH OUT BASH OUT PARTY CRASHING GOOD TIME */

#header { display:none;}

#lever-up {background-image:url(images/lever-up.png) top left; position:relative; margin-top:-125px; margin-left:418px; width:35px; height:130px; z-index:9999;}

.checkbox-bg { background:url(images/when-selection-bg1.png) top left
 no-repeat; width:677px; height:235px; position:relative; left:-67px; top: -4px; }
 
 /*.checkbox-bg input {  margin: 174px 0 0 100px; }
 
 .checkbox-bg input:nth-child(2) {margin: 174px 0 0 221px}
 .checkbox-bg input:nth-child(3) {margin: 174px 0 0 221px} */
 
 .submit-style {
	border: none;
	 margin: 0;
	 padding: 0;
	 width: 239px; height:56px;
	 background: url(images/submit.png) 0 0 no-repeat; 
	 cursor: pointer;
 }
 
input:focus {
      border:1px solid #E33917;
}

.flop-continue a { background:url(images/continue-btn.png) top left; width:169px; height:57px;}
.flop-continue a:hover { background:url(images/continue-btn-over.png) top left;}

/*
	WUFOO FORM STYLES
}*/

#logo {padding:10px 0px;}

#container h1 {padding: 10px 38%;}

/*
	END WUFOO FORM STYLES
}*/
.flip-box {
	background:url(images/thankyou-bg.png) 100% 112px no-repeat;
	margin: 0 auto;
    padding: 40px 0;
    position: relative;
    width: 600px;
	}
	
#lever.fixed {
    border-radius: 0 0 0 0;
    left: 840px;
    position: fixed;
    top: 19px;
    z-index: 10;
}