@font-face {
  font-family: apercu condensed pro; src: url("../fonts/apercu-condensed-bold-pro.woff");
}

@font-face {
  font-family: apercu pro; src: url("../fonts/apercu-regular-pro.woff");
}

@font-face {
  font-family: hello headline; src: url("../fonts/HelloHeadline-Regular.woff");
}

@font-face {
  font-family: nunito semibold; src: url("../fonts/Nunito-SemiBold.woff");
}


html, body{
	height: 100%; overflow: hidden; font-family: "nunito semibold", "Arial", sans-serif;
}

body{
	background:#f9f7eb;
}

h1{
	font-size: 58px; font-weight: bold; line-height: 1.1; margin:0; font-family: "hello headline", impact;
}

form{
	position: relative;
}

.card {
	background:transparent; border: none; width: 1270px; height: 800px; perspective: 1000px; 
/*	position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;*/
}

.content {
	position: absolute; width: 100%; height: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.1); transition: transform 1s; transform-style: preserve-3d;
}

.left-col{
	width:50%;
}

/*.card:hover .content,*/
.card.flip .content {
	transform: rotateY(180deg) ; transition: transform 0.5s;
}

.front,
.back {
	position: absolute; height: 100%; width: 100%; border-radius: 5px; backface-visibility: hidden; padding: 80px; color:#1A3768; display: flex; flex-direction: column; justify-content: center; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; background: linear-gradient(0deg,rgba(218, 240, 253, 1) 0%, rgba(148, 190, 230, 1) 25%, rgba(148, 190, 230, 1) 75%, rgba(218, 240, 253, 1) 100%);
}

#bluey-pedestal{
	position:absolute; bottom:0; right:20px; z-index:1;
}

#grannies{
	position:absolute; bottom:-120px; right:-280px; z-index:2;
}

#banner{
	position: absolute; bottom: 0; left:0; z-index:0;
}

.card.flip .front{
	pointer-events:none;
}

.back {
	background:#1A3768; transform: rotateY(180deg); color: #FFFFFF; 
}

.headline{
	display: flex; align-items: center; text-transform: uppercase; margin-bottom:30px; color:#FFFFFF;
}

.headline img{
	max-height: 160px;
}

.front .headline img{
	margin-left: 40px;
}

.back .headline img{
	margin-right: 40px;
}

p.summary{
	font-size: 20px; margin:0; margin-bottom: 40px;
}

.input-group{
	background:#fff; padding: 10px; display: flex; justify-content: space-between; border-radius: 40px; position: relative;
}

.input-group input{
	background: transparent; border: none; flex-grow: 1; margin-right: 10px; margin-left: 20px; font-size: 18px; padding-right: 70px; color: #666;
}

.input-group input:focus,
.input-group input:active,
.input-group input:focus-visible{
	border: none; outline: none;
}

.input-group button{
	border: none; width: 50px; height: 50px; background-position-x: 19px; border-radius: 50%; background: #1A3768 no-repeat center;
}

.input-group button.submit{
	background-image: url("../images/chevron-submit.png"); position: relative;
}

.input-group button.submit span{
	text-transform: uppercase; position: absolute; font-size: 18px; line-height: 1; height: 18px; top: 0; bottom: 0; margin: auto; left: -80px;
}

.input-group button.processing{
	background-image: url("../images/loading-spin.png"); background-size: 30px; animation: buttonSpin 0.66s linear infinite;
}

.input-group button.processing span{
	display: none;
}

@keyframes buttonSpin{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.input-group button:hover{
	background-color:#1A3768;
}

.input-group button:focus,
.input-group button:active,
.input-group button:focus-visible{
	border: none; outline: none;
}

.d-none{
	display: none;
}

.o-zero{
	opacity: 0;
}

#go-back{
	border: none; color:#BB5400; text-transform: uppercase; font-size: 24px; border-radius: 30px; padding: 15px 25px 15px 50px; background: url("../images/chevron-back.png") #FFCA2E left center no-repeat; background-position-x: 18px; background-size: 16px; font-weight: bold; margin: 0 auto 0 0;
}

#go-back:focus,
#go-back:active,
#go-back:focus-visible{
	border: none; outline: none;
}

#keyboard-close-wrap{
	background-position: center; background-repeat: no-repeat; background-size:cover; position: relative; position: absolute; height: 100%; left: 0; right: 0; z-index: 3; transition: all 0.5s ease;
}

#bg-images img{
	transition: all 2.5s linear; opacity: 0; z-index: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}


#bg-images img.active{
	opacity: 1;
}

body.kioskboard-body-padding #keyboard-close-wrap, body.kioskboard-body-padding #keyboard-close-wrap2{
	margin-top: -300px; transition-delay: 0.5s; 
}

#form-msg{
	position: absolute; background: #ffe3e3; border: 1px solid #ccc; border-radius: 10px; padding: 20px; top: 0; bottom: -20px; left:0; margin: auto; display:flex; align-items: center; justify-content: space-between; transform: translateY(90%); opacity: 0; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; z-index:999;
}

#form-msg:before{
	content: ""; position: absolute; height: 20px; width: 20px; background: #ffe3e3; top: -10px; left: 0; right: 0; margin: auto; transform: rotate(45deg); border-top: 1px solid #ccc; border-left: 1px solid #ccc;
}

#form-msg.show{
	opacity: 1; transform: translateY(100%); transition: all 0.5s ease;
}

#form-msg a{
	font-size: 30px; line-height: 1; margin-left: 12px; color: inherit;
}

#form-msg p{
	margin: 0;
}

/* QR UPDATES */
#keyboard-close-wrap2{
	display: flex; justify-content: center; align-items: center;
	background-position: center; background-repeat: no-repeat; background-size:cover; position: relative; position: absolute; height: 100%; left: 0; right: 0; z-index: 3; transition: all 0.5s ease;
}
.card2 {
	background:transparent; border: none; 
	width: 565px !important; 
	height: 600px; 
	perspective: 1000px; position: relative; margin: 0 20px;
}
.card2 h1{
	font-size: 42px; font-weight: bold; line-height: 1.0; margin:0; font-family: "apercu condensed pro", impact;
}
.card2 .headline img{
	max-height: 100px;
}
.card2 .qr-image{box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;border-radius: 5px; 
/*overflow: hidden;*/
}