* {margin:0px; padding:0px; border:0; box-sizing:border-box;}
body {position:relative; min-width:320px; width:100vw; height:100vh; color:#000000; font-family:'Roboto Condensed', sans-serif; background-color:#ffffff; text-align:center;}
tbody {width:100%}
p {margin:10px 0; padding:0; font-size:18px; line-height:1.3;}
ol, ul {margin:0 0 0 20px;}
li {margin:0 0 5px 10px;}
a, a:link, a:visited, a:hover {color:inherit; text-decoration:underline;}

img.face {display:none; width:calc(100% - 20px); max-width:800px; margin:10px 0 0 0; box-shadow:0 1px 5px rgba(0,0,0,.2);}

.page {display:inline-block; position:relative; width:100%; max-width:900px; height:450px; margin:10px 0 0 0; perspective:1000px; over-flow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.2);}
.layers {position:relative; height:100%; transform-style:preserve-3d; transform:rotateX(var(--yp)) rotateY(var(--xp));}
.layer {position:absolute; inset:3vw; background-size:contain; background-position:center; background-repeat:no-repeat; display:flex; align-items:center; justify-content:center; transition:1s;}
.item1 {transform:translateZ(0px); inset:0vw; background-image:url(Images/Postcard5/layer1.png)}
.item2 {transform:translateZ(90px); inset:1vw; background-image:url(Images/Postcard5/layer2.png)}
.item3 {transform:translateZ(110px); inset:2vw; background-image:url(Images/Postcard5/layer3.png)}
.item4 {transform:translateZ(160px); inset:3vw; background-image:url(Images/Postcard5/layer4.png)}
.item5 {transform:translateZ(200px); inset:3.5vw; background-image:url(Images/Postcard5/layer5.png)}
.item6 {transform:translateZ(230px); ins-et:0vw; background-image:url(Images/Postcard5/layer6.png)}
.item7 {transform:translateZ(280px); ins-et:0vw; background-image:url(Images/Postcard5/layer7.png)}

.logo-orange {position:absolute; width:19%; left:0; top:0; pointer-events:none;}
.logo-red {position:absolute; width:17%; right:0; bottom:0; pointer-events:none;}

div.back {display:inline-block; width:100%; max-width:900px; margin:10px 0; background-position:0% 0%; box-shadow:0 1px 5px rgba(0,0,0,.2);}

form {width:100%; height:100%; background-color:rgba(255,255,255,1); text-align:center; margin-top:20px;}

div#cardview {display:none; padding:40px;}

div#cardform {display:inline-block; width:100%; max-width:900px; padding:20px 40px;}

div.left {display:inline-block; width:50%; vertical-align:top; padding-right:20px; text-align:left;}
div.right {display:inline-block; width:50%; vertical-align:top; padding-left:20px; border-left:2px solid #f8bcbb; text-align:left;}

h1 {display:inline-block; width:100%; max-width:740px; min-height:110px; font-size:2.4em; font-weight:bold; text-transform:uppercase; color:#009edf; background-image:url(/Images/Postcard5/poststamp.png); background-position:0 0; background-size:contain; background-repeat:no-repeat; padding:30px 0 10px 140px; line-height:1; text-align:left;}

div.input {position:relative; display:inline-block; width:100%; padding:0 0 7px 0; font-size:12px; line-height:12px; color:#000; text-align:left; vertical-align:top;}
div.input span {display:block; font-size:13px; line-height:15px; color:#000; text-align:left; padding:0;}
div.input input {width:100%; height:30px; color:#f48826; border:1px solid #e0e0e0; font-family:'Roboto Condensed', sans-serif; font-size:18px; line-height:18px; padding:7px 0 9px 0; margin:3px 0; text-align:left; overflow:hidden;}
div.input input[type="checkbox"] {width:24px; height:24px; background-color:#ffffff; border:0; border-radius:4px; font-family:'Roboto Condensed', sans-serif; font-size:18px; line-height:18px; float:left; margin:0 10px 10px 0;}
div.input select {width:100%; height:30px; background-color:#ffffff; color:#f48826; border:1px solid #e0e0e0; font-size:18px; line-height:18px; padding:0 0 0 0; margin:3px 0; text-align:left; overflow:hidden;}
div.input textarea {width:100%; height:195px; background-color:#ffffff; color:#f48826; border:1px solid #e0e0e0; font-family:'Roboto Condensed', sans-serif; font-size:16px; font-weight:bold; line-height:18px; padding:7px 0 9px 0; margin:3px 0; text-align:left; resize:none; overflow:hidden;}
div.input input[type="submit"] {color:#fff; background:linear-gradient(to bottom, #f48826, #cd5207); border:0; border-radius:4px; font-family:'Roboto Condensed', sans-serif; font-size:16px; line-height:1; padding:5px 10px 6px 10px; margin:0 0 0 3px; text-align:center;}
div.input input[type="button"] {color:#fff; background:linear-gradient(to bottom, #f48826, #cd5207); border:0; border-radius:4px; font-family:'Roboto Condensed', sans-serif; font-size:16px; line-height:1; padding:5px 10px 6px 10px; margin:0 0 0 3px; text-align:center;}
div.input data {position:absolute; right:3px; top:17px; font-size:11px; line-height:11px; color:#aaa; text-align:left; padding:0;}

p#text {font-style:italic; color:#f50;}

@media only screen and (max-width : 800px), only screen and (max-device-width : 800px){
	img.face {display:inline-block; width:calc(100% - 22px); box-shadow:none; border:1px solid #eee;}
	.page {display:none;}
	div.back {width:calc(100% - 22px); height:auto; margin:5px; padding:20px; box-shadow:none; border:1px solid #eee; overflow:hidden;}
	div#cardform {padding:10px;}
	div.left {width:100%; padding:0;}
	div.right {width:100%; padding:0; border:0;}
	form {background-image:none;}
	div.input textarea {height:100px;}
}
@media only screen and (max-width : 550px), only screen and (max-device-width : 550px){
	h1 {min-height:60px; padding:15px 0 0 25%; font-size:1.2em;}
	form {margin-top:0;}
}
@media only screen and (max-width : 450px), only screen and (max-device-width : 450px){
	div.back{height:auto; padding:20px;}
	div#cardform {padding:0;}
	div.left {width:100%; padding:0;}
	div.right {width:100%; padding:0; border:0;}
	form {background-image:none;}
}