/*FONTS*/
@font-face {
    font-family: 'bemio_italic';
    src: url('/fonts/bemio_italic-webfont.eot');
    src: url('/fonts/bemio_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bemio_italic-webfont.woff2') format('woff2'),
         url('/fonts/bemio_italic-webfont.woff') format('woff'),
         url('/fonts/bemio_italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	min-height: 1200px;
	background-image: radial-gradient(ellipse farthest-corner, #1b5481 0%, #0b0c29 100%);
}

/*HEADER STYLES*/
.header-bg {
	min-height: 140px;
	position: relative;
	padding: 0;
	max-height: 300px;
}

.logo-link {
	text-indent: -7777px;
	width: 320px;
	height: 93px;
	background: url(/images/royal-fit-logo.png) no-repeat;
	background-size: 320px 93px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	z-index: 2;
}

/*.logo-container {
	position: relative;
	z-index: 4;
	top: -405px;
}*/

/*.header-bg video {
	height: 100%;
	position: relative;
	z-index: 1;
	top: -40px !important;
	min-height: 300px;
	left: -140px;

}*/

/*CONTENT AREA*/
.hp-free-pillow-gif {
	margin-bottom: 40px;
	margin-top: 30px;
}

.hp-free-pillow-gif img {
	margin-left: auto;
	margin-right: auto;
	border: 10px solid rgba(255, 255, 255, 0.83);
	border-radius: 5px;
}

.content {
	/*background-image: url(/images/quilt.png);*/
	position: relative;
	z-index: 3;
	padding-bottom: 80px!important;
	padding-top: 40px;

}

.stuff {
	margin-top: -110px;
	margin-bottom: 120px;
	padding-bottom: 60px;
	padding-left: 0px;
	padding-right: 0px;
	color: #fffffe!important;
}

.flex-container {
	display: flex;
	margin-bottom: 100px;
}

.stuff h1 {
	font: normal 42px/42px "bemio_italic";
	color: #fffffe;
	margin-bottom: 40px;
	padding-left: 2%;
	padding-right: 2%;
	clear: left;
	text-shadow: 0 3px 2px rgba(0, 0, 0, 0.51);
}

#homepage h1 {
	width: 70%!important;
	margin-left: auto;
	margin-right: auto;
}

.your-fit .stuff h1{
	font-size: 60px;
	color: #ffffff;
	line-height: 60px;
	margin-bottom: 30px;
}

.stuff h2 {
	font: normal 36px/36px "bemio_italic";
	color: #fffffe;
	margin-bottom: 10px;
	padding-left: 10%;
	padding-right: 10%;
}

.stuff p {
	font: 22px/28px "proxima-nova-condensed";
	color: #fffffe;
	margin-bottom: 40px;
}

.stuff p a {
	color: #9dc9e5;
}

.stuff p a.btn-next {
	color: #2a3e32;
}

.stuff p a:hover {
	color: #7dc63e;
	text-decoration: none;
}

.stuff p a.btn-next:hover {
	color: #2a3e32;
}

.under-headline {
	display: none;
}

.question-pic {
	text-align: center;
	width: 64%!important;
	margin-left: 18%!important;
	border: 10px solid rgba(255, 255, 255, 0.83);
	border-radius: 5px;
}

.stuff .embed-responsive {
	margin-bottom: 60px;
	-moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.57);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.57);
}

.circle-step {
    font-family: "bemio_italic";
	background-color: #022539;
	border: 10px solid #7EACC3;
	padding: 28px 14px 14px 12px;
	width: 112px!important;
	height: 112px;
	display: block;
	border-radius: 60px;
	margin-right: auto;
	margin-left: auto;
	margin-top: -56px;
	font-size: 34px;
	font-weight: bold;
	line-height: 40px;
	color: #ffffff;
	text-transform: uppercase;
	text-align: center;
	display: none;
}

.circle-step.progress-0 {
	background: url(/images/progress-0.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-1 {
	background: url(/images/progress-1.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-2 {
	background: url(/images/progress-2.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-3 {
	background: url(/images/progress-3.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-4 {
	background: url(/images/progress-4.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-5 {
	background: url(/images/progress-5.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-6 {
	background: url(/images/progress-6.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-7 {
	background: url(/images/progress-7.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-8 {
	background: url(/images/progress-8.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.progress-9 {
	background: url(/images/progress-9.png) center top rgba(255, 255, 255, 0);
	border: none;
	width: 112px!important;
	height: 112px;
	padding-top: 35px!important;
}

.circle-step.number {
	font-size: 50px !important;
	padding-left: 14px;
	padding-top: 25px;
}

.circle-step.star {
	font-size: 47px;
	padding-top: 24px;
	padding-left: 16px;
}

.content-head {
	margin-bottom: 0px;
	padding-top: 40px;
}

.scoot-down {
	margin-top: 60px;
}

.stuff ul {
	list-style: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	border: none;
	padding-left: 0px;
}

.stuff ul li {
	font: 22px/36px "proxima-nova";
	font-weight: bold;
	margin-bottom: 22px;
	color: #0e4364;
}

.stuff ul li:last-of-type {
	margin-bottom: 0;
}

.stuff  input[type=text] {
	width: 100%;
	padding: 2.5% 4% 2%;
	color: #404040!important;
}

.info {
	text-align: center!important;
	font-size: 16px!important;
	margin-top: -40px;
	margin-bottom: 10px!important;
}

.question-pic {
	text-align: center;
	width: 80%!important;
	margin-left: 10%!important;
}

/*YOUR FIT PAGE STYLES*/
.bed-store-red {
	color: #c41100;
}

.calculating {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	animation: fadeout 2s;
	animation-delay: 2s;
	animation-fill-mode:forwards;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; display: none!important; }
}

.calculating p {
	font-family: 'bemio'!important;
	color: #fed77c;
}

.calculating i {
	color: #ffffff;
}

.results {
	opacity: 0;
	animation: fadein 2s;
	animation-delay: 2s;
	animation-fill-mode:forwards;
	margin-bottom: 120px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.results .flex-container {
	margin-bottom: 40px;
}

.results h3 {
	margin-top: 0;
}

.results ul {
	background-color: rgba(127, 185, 226, 0.28);
	padding: 20px;
	border-radius: 4px;
}

.results ul li {
	color: #ffffff;
	margin-bottom: 0px;
	font: 18px/28px "proxima-nova-condensed";

}

.mattress-pic {
	border: 20px solid #A4C5D5;
	-moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	background-color: #fffffe;
	border-radius: 10px;
}

.mattress-info {
	margin-bottom: 20px;
	text-align: center;
	padding-right: 3%;
	padding-left: 3%;
	flex: 1;
	position: relative;
	padding-bottom: 100px;
}

.stuff hr {
	border-bottom-style: none;
	border-bottom-width: 0;
	background-color: #e4e4e4;
	height: 1px!important;
	position: relative;
	z-index: 47;
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 60px;
	display: none;
}

.mattress-info h2 {
	font: bold 28px/28px "proxima-nova";
	text-align: center;
	color: #ffffff;
	text-transform: uppercase;
	text-shadow: 0 2px 1px rgba(0, 0, 0, 0.54);
}

.mattress-info p {
	text-align: center;
	color: #98c4e7;
}

.mattress-info p a.btn-next {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80%!important;
	margin-left: 10%;
}

.stuff h3 {
	font: 24px/26px "bemio_italic";
	font-style: italic;
	text-align: center;
}

.print-offer {
	float: left;
	display: inline;
	width: 100%;
	background-color: #75b0df;
	margin-bottom: 60px;
	border-radius: 20px;
	-webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.3);
	box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.21);
	padding-right: 10%;
	padding-left: 10%;
	padding-bottom: 60px;
}

.pillow-img {
	width: 400px;
	height: 240px;
	display: block;
	background: url(/images/pillow@2x.png) no-repeat;
	background-size: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -100px;
}

.print-offer h2 {
	color: #1b5481;
	font-size: 47px;
	line-height: 47px;
	padding-top: 0px;
	padding-bottom: 20px;
	text-shadow: 0 2px 1px rgba(255, 255, 255, 0.52);
}

.stuff .store-info .embed-responsive {
	margin-bottom: 0;
	border-style: none;

}

.store-info, .salesperson-info {
	text-align: center;

}

.store-info p, .salesperson-info p{
	margin-bottom: 0px;
}

.bio {
	background-color: #BCE4F6;
	padding: 20px;
	margin-bottom: 20px;
	min-height: 416px;

}

.bio h3 {
	color: #1b5480;
}

.bio img {
	-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/*BUTTONS*/
.btn-next {
    font: bold 30px "proxima-nova"!important;
    background-color: #7EC63F;
    padding: 18px 40px;
    text-transform: uppercase;
    border-radius: 40px;
    width: 60%!important;
    display: inline-block;
    margin-left: 20%;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    border-top-style: solid;
    border: 1px solid #55905C;
    -moz-box-shadow: 0 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 7px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px rgba(255, 255, 255, 0.2);
}

.your-fit .btn-next {
	margin-left: 0;
	margin-top: 24px;
	width: 100%!important;
	padding: 10px;
	font-size: 24px !important;
	line-height: 24px;
	margin-bottom: 40px;
}

.your-fit .btn-next.half-size {
	width: 50%!important;
	margin-left: 25%!important;
}

.btn-next:hover {
	text-decoration: none;
	position: relative;
	background-color: #a2d874;
	color: #2A3E33;
}

.btn-next:active {
	-moz-box-shadow: 0 2px #1f3a23;
	box-shadow: 0 2px #1f3a23;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
}

/*FORM ELEMENTS*/
.response {
	width: 80%;
	margin-left: 10%;
	margin-bottom: 30px;
	margin-top: 30px;

}

input[type=text], input[type=email] {
	font: bold 24px "proxima-nova" !important;
	padding: 12px 20px 12px 24px!important;
	width: 100%;
	margin-bottom: 24px;
	color: #3f403f !important;
	border-radius: 40px;
	border-style: none;
}

textarea {
	font: bold 24px "proxima-nova" !important;
	padding: 12px 20px 12px 24px!important;
	width: 100%;
	margin-bottom: 24px;
		color: #3f403f !important;
	border-color: #cbcccb;
	border-radius: 40px;
	border-style: none;
}

/* @group NEW RADIO BTN STYLES */
input[type="radio"] {
    display: none;
}

label.js, label.js1, label.js2, label.js3, label.js4 {
    display: block;
    float: left;
    margin-right: 5px;
    border: 1px none black;
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: pointer;
    width: 100%;
	background-color: #2f82b7;
	color: #fefffe;
	border-radius: 40px;
	margin-bottom: 24px;
	text-align: center;
}

label.js:hover, label.js1:hover, label.js2:hover, label.js3:hover, label.js4:hover {
	background-color: #509ed0;
}

label.js.active, label.js1.active, label.js2.active, label.js3.active, label.js4.active {
    color: #293d32;
	background-color: #7ec63e;
}

/* @end */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 11.8px 0;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
  background: #82afdd;
  border-radius: 25px;
  border: 0px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 4.6px #000000, 0px 0px 0px #0d0d0d;
  border: 4.7px solid rgba(101, 108, 113, 0.26);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -11.8px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #82afdd;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
  background: #82afdd;
  border-radius: 25px;
  border: 0px solid #010101;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 4.6px #000000, 0px 0px 0px #0d0d0d;
  border: 4.7px solid rgba(101, 108, 113, 0.26);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #82afdd;
  border: 0px solid #010101;
  border-radius: 50px;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
}

input[type=range]::-ms-fill-upper {
  background: #82afdd;
  border: 0px solid #010101;
  border-radius: 50px;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
}

input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 4.6px #000000, 0px 0px 0px #0d0d0d;
  border: 4.7px solid rgba(101, 108, 113, 0.26);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  height: 8.4px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #82afdd;
}

input[type=range]:focus::-ms-fill-upper {
  background: #82afdd;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 11.8px 0;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
  background: #82afdd;
  border-radius: 25px;
  border: 0px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 4.6px #000000, 0px 0px 0px #0d0d0d;
  border: 4.7px solid rgba(101, 108, 113, 0.26);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -11.8px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #82afdd;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
  background: #82afdd;
  border-radius: 25px;
  border: 0px solid #010101;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 4.6px #000000, 0px 0px 0px #0d0d0d;
  border: 4.7px solid rgba(101, 108, 113, 0.26);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #82afdd;
  border: 0px solid #010101;
  border-radius: 50px;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
}

input[type=range]::-ms-fill-upper {
  background: #82afdd;
  border: 0px solid #010101;
  border-radius: 50px;
  box-shadow: 6.6px 6.6px 0px rgba(54, 121, 121, 0), 0px 0px 6.6px rgba(62, 139, 139, 0);
}

input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 4.6px #000000, 0px 0px 0px #0d0d0d;
  border: 4.7px solid rgba(101, 108, 113, 0.26);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  height: 8.4px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #82afdd;
}

input[type=range]:focus::-ms-fill-upper {
  background: #82afdd;
}

/*FOOTER*/
.footer-bg {
	min-height: 120px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.adjust {
	max-height: 120px!important;
}

.footer-bg a.store-link {
	width: 200px;
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: -28px;
	margin-bottom: 80px;
	position: relative;
	z-index: 4;
}

.footer-bg a {
	color: #fefffe;
}

.footer-bg a img {
	width: 200px;
	padding: 14px 14px 20px;
	border-radius: 3px;
	box-shadow: 0 7px 4px rgba(0, 0, 0, 0.45);
	background-image: -webkit-linear-gradient(top, white 0%, #d7d7d7 100%);
	background-image: -moz-linear-gradient(top, white 0%, #d7d7d7 100%);
	background-image: -ms-linear-gradient(top, white 0%, #d7d7d7 100%);
	background-image: linear-gradient(to bottom, white 0%, #d7d7d7 100%);
}

.footer-bg p {
	position: relative;
	top: -60px;
	color: #fefffe;
	font: 18px/18px "proxima-nova-condensed";
}

/*UTILITY*/
.uh-oh .content {
	padding: 0;
}

/*MEDIA Queries*/
@media screen and (min-width: 1980px) {
	body {
		background-size: contain;
	}
}

@media screen and (max-width: 990px) {
	/*.content-head {
		position: relative;
		top: -56px!important;
		margin-bottom: -56px;
	}*/

	.logo-container {
		top: 0;
	}

	#video-bg {
		display: none!important;
	}
}

@media screen and (max-width: 600px) {
    #homepage h1 {
    	width: 100%!important;
    }

    .stuff {
    	padding: 0 20px 030px;
    }

    .stuff ul {
    	width: 100%!important;
    	padding-top: 30px;
    	margin-bottom: 0;
    }

    .stuff ul li {
    	font: 20px/20px "proxima-nova-condensed";
    	font-weight: normal;
	}

	.stuff ul li label {
		margin-bottom: 20px;
	}

	.print-offer h2 {
		font-size: 30px;
		line-height: 30px;
	}

	.flex-container {
		flex-direction: column;
	}

	.pillow-img {
		width: 100%;
		height: 230px;
		display: block;
		background: url(/images/pillow@2x.png) center center no-repeat;
		padding-left: 5%!important;
		background-size: 100%;
		margin-top: -100px;
	}

	.store-info {
		margin-bottom: 40px;
	}

	.store-info h1 {
		font-size: 40px!important;
		line-height: 40px!important;
		margin-bottom: 20px!important;
	}

	.bio {
		background-color: #BCE4F6;
		padding: 20px;
		margin-bottom: 20px;
		min-height: 0px;
	}

	.btn-next {
		width: 100%!important;
		margin-left: 0;
	}

	.your-fit .btn-next.half-size {
		width: 100%!important;
		margin-left: 0%!important;
	}

	.question-pic {
		text-align: center;
		width: 100%!important;
		margin-left: 0!important;
	}

	.response {
		width: 100%;
		margin-left: 0;
	}

	label.js, label.js1, label.js2, label.js3, label.js4 {
	    display: block;
	    float: left;
	    margin-right: 5px;
	    border: 1px none black;
		padding: 14px 20px;
		cursor: pointer;
	    width: 100%;
		background-color: #2f82b7;
		color: #fefffe;
		border-radius: 4px;
		text-align: center;
	}
}


@media screen and (max-width: 480px) {
	.pillow-img {
		height: 150px;
	}
}