@charset "UTF-8";
/* CSS Document */
/* Body ----------------------------------------------------------------------------------------------------*/
/*html { overflow: hidden;}*/
html, body {
	height: 100%;
	min-height: 100%;
}
body {
	background: #61CAB7 url('../img/bg-aqua.jpg') no-repeat center top;
	background-size: 100% auto;
	background-attachment: fixed;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#3C9BA3', endColorstr = '#65CBB9');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#3C9BA3', endColorstr = '#65CBB9')";
	background-image: -moz-linear-gradient(top, #3C9BA3, #65CBB9);
	background-image: -ms-linear-gradient(top, #3C9BA3, #65CBB9);
	background-image: -o-linear-gradient(top, #3C9BA3, #65CBB9);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#3C9BA3), to(#65CBB9));
	background-image: -webkit-linear-gradient(top, #3C9BA3, #65CBB9);
	background-image: linear-gradient(top, #3C9BA3, #65CBB9);
	font: 100 normal 16px/136% 'Gochi Hand', cursive;
	color: #444;
}
a {
	text-decoration: none;
	outline: 0;
	display: inline-block;
	text-align: center;
	outline: none;
	cursor: pointer;
	position: relative;
}
.mobile {
	display: none !important;
}
.non-mobile {
	display: block !important;
}
h1, h2, h3, h4, h5 {
	font-family: 'Amatic SC', cursive;
	line-height: 95%;
	font-weight: 700;
	margin: 0;
}
h1 {
	font-size: 5em;
	letter-spacing: -0.04em;
}
h1 span {
	white-space: nowrap;
}
h2 {
	font-size: 3.5em;
	letter-spacing: -0.03em;
}
h1, h2 {
	margin:0 0 0.5em;
}
h3 {
	font: 400 1.2em/1.8em 'Luckiest Guy', cursive;
	letter-spacing: 0.03em;
}
h3 span {
	font-size: 3em;
	line-height: 100%;
}
h4 {
	font-size: 1.8em;
	font-weight: 400;
	display: block;
	margin: 0 0 0.2em;
}
h4 span {
	font-weight: 700 !important;
}
h1, h2, h3 {
	text-align: center;
	text-shadow:0px 2px 3px rgba(0,0,0,0.6), -1px -1px 0 #206F62, 1px -1px 0 #206F62, -1px 1px 0 #206F62, 1px 1px 0 #206F62;
	color: #FFF;
}
p, input.simple, textarea.simple, select.simple, label.fixed {
	font: normal 1.5em/126% 'Gochi Hand', cursive;
}
#send p {
	color: #FFF;
	text-align: center;
	margin: 0 0 0.4em 0;
	line-height: 110%;
	text-shadow:0px 2px 3px rgba(0,0,0,0.4), -1px -1px 0 #206F62, 1px -1px 0 #206F62, -1px 1px 0 #206F62, 1px 1px 0 #206F62;
	padding: 0 0.2em 0;
}
/* Containers ----------------------------------------------------------------------------------------------------*/
nav {
	width: 100%;
	height: 4.5em;
	padding: 0;
	position: fixed;
	bottom: 2.9em;
	left: 0;
	z-index: 100;
	overflow: hidden;
	color: #FFF;
	background: url('../img/bg-nav.png') no-repeat center top;
	background-size: 100% auto;
}
#formulario, #master {
	width: 100%;
	height: 100%;
	min-height: 100%;
}
section {
	height: 100%;
	width: 100% !important;
	display: none;
	overflow: auto;
}
section .container {
	padding: 2em 0 6.4em;
}
/*section>div>div {
	-webkit-animation: fadeIn 0.8s ease;
	-moz-animation: fadeIn 0.8s ease;
	-o-animation: fadeIn 0.8s ease;
	-ms-animation: fadeIn 0.8s ease;
	animation: fadeIn 0.8s ease;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}*/
footer {
	width: 100%;
	height: 1.5em;
	background: #FF2116;
	text-align: center;
	color: #FFF;
	padding: 0.4em 0 1em;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	font: 400 1em/120% 'Amatic SC', cursive;
}
#xmas {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
}
/* Slider ----------------------------------------------------------------------------------------------------*/
section#welcome {
	display: block;
}
nav .slidesjs-previous {
	float: left;
}
nav .slidesjs-next {
	float: right;
}
/* Inputs Labels Extra ----------------------------------------------------------------------------------------------------*/
.field-holder {
	margin: 0 0 2.2em;
}
.field-holder:first-child {
	margin: 0 0 0.2em;
}
label.simple, span.fake-label {
	color: #FFF;
	font: 400 1.2em/1.8em 'Luckiest Guy', cursive;
	text-align: right;
	padding: 0.5em 0 0.4em;
	text-shadow:0px 2px 3px rgba(0,0,0,0.4), -1px -1px 0 #206F62, 1px -1px 0 #206F62, -1px 1px 0 #206F62, 1px 1px 0 #206F62;
	letter-spacing: 0.03em;
}
span.fake-label {
	margin: 0 0.5em;
}
label.fixed {
	background: #A765C8 url('../img/bg-btn-purple.png') no-repeat top left;
	background-size: 100% 100%;
	display: inline-block;
	padding: 0.35em 0.7em;
	color: #FFF;
	-webkit-border-radius: 0.666em;
	-moz-border-radius:0.666em;
	border-radius: 0.666em;
	border:0.1em solid #6F3C88;
	cursor: pointer;
	-webkit-appearance: none; /* don't apply default styling */
	-webkit-transition: .111s ease -webkit-transform;
	transition: .111s ease transform;
	text-shadow:-0.05em -0.05em 0 #6F3C86, 0.05em -0.05em 0 #6F3C86, -0.05em 0.05em 0 #6F3C86, 0.05em 0.05em 0 #6F3C86;
	box-shadow: 0.1em 0.1em 0.05em rgba(0,0,0,0.1);
	text-align: center;
}
label.fixed:last-child {
	margin-right: 0 !important;
}
label.fixed:hover {
	background: #A765C8 url('../img/bg-btn-purple-f2.png') no-repeat top left;
	background-size: 100% 100%;
	transform: scale(1.05);
	box-shadow: -0.1em -0.1em 0.3em rgba(255,255,255,0.3);
}
#holder-gender {
	text-align: right;
}
#holder-behave label.fixed {
	margin: 0 1.7% 0 0;
	padding: 0.35em 0;
	width: 23%;
}
#recipient label.fixed {
	margin: 0 auto 0;
	padding: 0.35em 0;
	width: 98.5%;
}
input.simple, textarea.simple, select.simple {
	background:#FFF;
	padding: 0.35em 4%;
	color: #333;
	width: 91%;
	max-width: 91%;
	border-radius: 0.666em;
	border:0.1em solid #999;
}
textarea.simple {
	background:transparent;
	padding: 0;
	border-radius: 0;
	border:none;
}
input[type=radio] {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
input[type='radio']:checked + label.fixed {
	background: #9553B6 url('../img/bg-btn-purple-f3.png') no-repeat top left;
	background-size: 100% 100%;
	color: #F5EFF8;
	cursor: default;
	box-shadow: 0.1em 0.1em 0.05em rgba(255,255,255,0.3);
}
input[type='radio']:checked + label.fixed:hover {
	transform: scale(1);
    transition-duration: 0.03s;
}
select.simple {
	height: 2.15em;
	padding: 0 4% !important;
	line-height: 3em;
	outline:none;
	cursor:pointer;
	text-align: center;
	width: 98% !important;
	max-width: 98% !important;
}
.btn {
	margin: 0 auto;
	border-radius: 0.7em;
	font-size: 1.2em;
	padding: 0.85em 1.8em 0.65em;
	-webkit-appearance: none; /* don't apply default styling */
	-webkit-transition: .111s ease -webkit-transform;
	transition: .111s ease transform;
	font-family: 'Luckiest Guy', cursive;
	letter-spacing: 0.07em;
	max-height: 1.2em;
	box-shadow: 0.1em 0.1em 0.05em rgba(0,0,0,0.1);
	border-width: 0.15em;
	border-style: solid;
	color: #FFF;
}
.btn-red {
	background: #FF1B00 url('../img/bg-btn-red.png') no-repeat top left;
	background-size: 100% 100%;
	border-color: #C90E01;
	text-shadow:-0.1em -0.1em 0 #CB0600, 0.1em -0.1em 0 #CB0600, -0.1em 0.1em 0 #CB0600, 0.1em 0.1em 0 #CB0600;
}
.btn-gold {
	background: #FFD700 url('../img/bg-btn-gold.png') no-repeat top left;
	background-size: 100% 100%;
	border-color: #EBC200;
	text-shadow:-0.1em -0.1em 0 #EBC200, 0.1em -0.1em 0 #EBC200, -0.1em 0.1em 0 #EBC200, 0.1em 0.1em 0 #EBC200;
	display: none;
}
.btn-gold i {
	text-shadow:-0.07em -0.07em 0 #EBC200, 0.07em -0.1em 0 #EBC200, -0.07em 0.07em 0 #EBC200, 0.07em 0.07em 0 #EBC200;
}
.btn:hover {
	transform: scale(1.05);
	cursor: pointer;
}
.btn:active {
	transform: scale(.975);
}
.btn-red:hover {
	background: #FF1B00 url('../img/bg-btn-red-f2.png') no-repeat top left;
	background-size: 100% 100%;
	box-shadow: -0.1em -0.1em 0.3em rgba(255,255,255,0.3);
}
.btn-gold:hover {
	background: #FFD700 url('../img/bg-btn-gold-f2.png') no-repeat top left;
	background-size: 100% 100%;
	box-shadow: -0.1em -0.1em 0.3em rgba(255,255,255,0.3);
}
.btn-fit {
	padding-left: 0;
	padding-right: 0;
	width: 98%;
}
input[type='submit'] {
	max-height: inherit;
}
#btn-start, #btn-submit {
	animation: tada 1s ease;
	animation-delay: 4.2s;
}
#btn-submit {
	animation-delay: 6s;
}
/* Letter ----------------------------------------------------------------------------------------------------*/
#letter-page {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 0 0 3em;
  min-height: 58em;
  padding: 4em 0 8em;
  position: relative;
  background: -moz-linear-gradient(180deg, #ffffff 0%, #fafafa 30%, #f7f7f7 33%, #ffffff 34%, #fafafa 63%, #f7f7f7 66%, #ffffff 67%, #fafafa 96%, #f7f7f7 99%);
  background: -webkit-linear-gradient(180deg, #ffffff 0%, #fafafa 30%, #f7f7f7 33%, #ffffff 34%, #fafafa 63%, #f7f7f7 66%, #ffffff 67%, #fafafa 96%, #f7f7f7 99%);
  background: -o-linear-gradient(180deg, #ffffff 0%, #fafafa 30%, #f7f7f7 33%, #ffffff 34%, #fafafa 63%, #f7f7f7 66%, #ffffff 67%, #fafafa 96%, #f7f7f7 99%);
  background: -ms-linear-gradient(180deg, #ffffff 0%, #fafafa 30%, #f7f7f7 33%, #ffffff 34%, #fafafa 63%, #f7f7f7 66%, #ffffff 67%, #fafafa 96%, #f7f7f7 99%);
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 30%, #f7f7f7 33%, #ffffff 34%, #fafafa 63%, #f7f7f7 66%, #ffffff 67%, #fafafa 96%, #f7f7f7 99%);
}
#letter-page:before, #letter-page:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 98%;
  z-index: -1;
}
#letter-page:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
#letter-page:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}
#letter-stamp {
	height: 6em;
	background: url('../img/stamp.png') left top no-repeat;
	background-size: auto 100%;
}
#letter-header {
	height: 6em;
	margin-bottom: 2em;
}
#letter-page textarea {
	height: 32em;
	max-height: 32em;
	min-height: 32em;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}
/* Message ----------------------------------------------------------------------------------------------------*/
#overlay {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(97,202,183,0.7);
	top: 0;
	left: 0;
	z-index: 200;
}
#msg-box-holder {
	display: block;
	width: 40rem;
	height: 27.8888rem;
	position: absolute;
	left: 27%;
	top: 18%;
	border: red solid 1px;
}
#msg-box {
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	z-index: 201;
}
#msg-text {
	z-index: 202;
	position: relative;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
}
/* Responsify ----------------------------------------------------------------------------------------------------*/
@media (min-width: 1200px) {

body {
	font-size: 18px;
}
nav {
	height: 5em;
	padding: 0.5em 0 0;
	bottom: 3.4em;
}
footer {
	height: 2em;
	padding: 0.4em 0 1em;
}
section .container {
	padding: 4em 0 8.9em;
}

}
@media (max-width: 768px) {

}
@media (max-width: 600px){

body {
	font-size: 18px;
}
.mobile {
	display: block !important;
}
.non-mobile {
	display: none !important;
}
h1 {
	font-size: 4.8em;
}
h2 {
	font-size: 4em;
}
h3 {
	font-size: 1.9em;
}
p, input.simple, select.simple, label.fixed {
	font-size: 2.4em;
}
#letter p, textarea.simple {
	font-size: 1.8em;
}
section .container {
	padding-bottom: 9em;
}
.field-holder {
	margin: 0;
}
.field-holder > div {
	margin: 0 0 2.2em;
}
.btn {
	font-size: 1.6em;
	padding: 0.85em 1.6em 0.65em;
}
label.simple {
	width: 100%;
	display: inline-block;
}
label.simple, span.fake-label {
	text-align: center;
	padding: 0 0 0.1em;
	line-height: 1.4em;
	font-size: 1.92em;
}
#holder-gender {
	text-align: center;
}
#holder-gender label.fixed {
	width: 29.5%;
}
#holder-behave label.fixed {
	margin: 0 2.5% 2% 0;
	width: 47%;
}
#holder-behave label.fixed:nth-child(3n+1) {
	margin-right: 0 !important;
}
#holder-behave label.fixed:last-child {
	letter-spacing: -1px;
}
#letter-page {
	min-height: 36em;
	padding: 2em 0 3em;
}
#letter-page:before, #letter-page:after {
	display: none;
}
#letter-header {
	width: 50% !important;
	float: right !important;
	height: auto;
	margin: 0.2em 4% 1em 0;
	text-align: right;
}
#letter-stamp {
	width: 35% !important;
	height: 3em;
	margin-right: 0.4em;
	float: left !important;
	background-position: top right;
}
#letter-page .grid_10 {
	width: 86% !important;
	margin: 0 7%;
}
#letter-page textarea {
	height: 30em;
	max-height: 30em;
	min-height: 30em;
}

}
@media (max-width: 480px){

body {
	font-size: 16px;
}
nav {
	padding: 0;
	height: 3.5em;
}
.slidesjs-navigation span {
	display: none;
}
h1 {
	font-size: 4em;
}
h2 {
	font-size: 3.2em;
}
h3 {
	font-size: 1.1em;
}
h4 {
	font-size: 1.2em;
}
p, input.simple, select.simple, label.fixed {
	font-size: 1.4em;
}
#letter p, textarea.simple {
	font-size: 1.1em;
}
.field-holder > div {
	margin: 0 0 1.2em;
}
label.simple, span.fake-label {
	font-size: 1.1em;
}
.btn {
	font-size: 1.2em;
	padding: 0.85em 1.8em 0.65em;
}
select.simple {
	margin-bottom: 0.9em;
}
#letter-page {
	min-height: 21em;
	padding: 1em 0 2em;
}
#letter-page textarea {
	height: 18em;
	max-height: 18em;
	min-height: 18em;
}

}
@media (max-width: 360px){

body {
	font-size: 18px;
}
nav {
	bottom: 1.7em;
}
footer {
	height: 1em;
	font-size: 0.9em;
}
section .container {
	padding: 2em 0 7em;
}
.btn {
	font-size: 1em;
	padding: 0.85em 1.8em 0.65em;
}
.btn-red {
	letter-spacing: 0.05em;
}
.btn-red i {
	display: none;
}


}
@media (max-width: 320px) {

body {
	font-size: 18px;
}
h1 {
	font-size: 2.8em;
}
h2 {
	font-size: 2.3em;
}

}
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
#logo {
	background: url(../img/logo-2x.png) no-repeat center center;
	background-size:100%;
}
}
@media only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 360px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 360px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 360px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 360px) {
#logo {
	background: url(../img/logo-2x.png) no-repeat center center;
	background-size:85%;
}
}
@media only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 320px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 320px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 320px) {
#logo {
	background: url(../img/logo-2x.png) no-repeat center center;
	background-size:85%;
}
}