body {font-family:'lato',sans-serif; font-weight:normal; color:#484E53; padding-bottom: 30px;background-color:#77767b;}

h1, h2, h3, h4 {color:#484e53;font-weight:600;}
strong, b {font-weight:600;}
a, .btn-link {color:#3faade;}
a:hover,  .btn-link:hover, a:active,  .btn-link:active a:focus,  .btn-link:focus {color:#92d0ec;}
.lead {font-weight: 400;}

::placeholder {color: #b3b3b3 !important;font-style: italic;}
::-webkit-input-placeholder {color: #b3b3b3 !important;font-style: italic;}
::-moz-placeholder {color: #b3b3b3 !important;font-style: italic;}
:-ms-input-placeholder {color: #b3b3b3 !important;font-style: italic;}

.modal-backdrop.in {opacity: 0.80;}
#result-modal .modal-content {box-shadow: none !important;-webkit-box-shadow:none !important;background-color:transparent !important;border:none  !important;}
#result-modal .modal-body {text-align:center;}
#result-modal .modal-body h1, #result-modal .modal-body p, #result-modal .modal-body h2, #result-modal .modal-body li {color:#fff;}
#result-modal .modal-body h1 {font-size:30px;}
#result-modal .modal-body p {font-size:21px;}
#result-modal .modal-body #nextq {background-color:#ed1c24;border-color:#ed1c24;text-transform: uppercase;color:#fff;padding:10px 60px;font-size:22px;} 
#result-modal .modal-body .para {min-height:200px;}
#result-modal .modal-body .disc * {font-size:12px;}
#result-modal .modal-body .btn span.icon-angle-right {line-height: 0.85;margin-left: 30px;margin-right: -30px;font-size: 36px;}
#result-modal .answer-is-true {padding-top:200px;background: transparent url(../images/chair-tick.png) 50% 20px no-repeat;background-size: 40%;}
#result-modal .answer-is-false {padding-top:200px;background: transparent url(../images/chair-cross.png) 50% 20px no-repeat;background-size: 40%;}
#result-modal .disc {text-align:left; padding:30px 0 0;}
#result-modal .disc a, #result-modal .disc a:hover, #result-modal .disc a:focus {color:#fff;text-decoration:underline;}  
#result-modal #important-info {margin-top:20px;}
#result-modal .btn-group {margin-top:10px;}
#result-modal .btn-group .btn {white-space: normal;width:100%;margin:5px 0;font-size:18px;line-height:1.2;background-color:#ed1c24;border-color:#ed1c24;}
#result-modal .btn-group .btn strong {display:block;font-weight:normal;}
#result-modal .btn-group .btn span.icon-angle-right {line-height: 0.85;margin:9px 0 0;font-size: 30px;}

#tandc-modal h2 {font-size:18px;}
#tandc-modal h2 small {font-size:80%;display: block;color:#484E53;padding-top:5px;}
#tandc-modal ol {padding-left:15px;}
#tandc-modal ol li {font-size: 12px;}

span.icon-angle-right {line-height:1;margin-left:4px;}
.btn span.icon-angle-right {line-height:1.5;margin-left:30px;margin-right:-30px;}
.btn {transition:all 0.3s ease;font-size:16px;font-weight:400;border-radius:3px;padding:4px 40px;}
/*.btn:hover {text-decoration:none;color:#f8a916;}*/
.btn.disabled {opacity:1;}
.btn-ybr {color: #fff; background-color:#ed1c24;border-color:#ed1c24;}
.btn-ybr:hover {color:#fff;background-color:#ed1c24;border-color:#ed1c24;}
.btn-rby {color:#ed1c24;background-color:#fff;border-color:#ed1c24;}
.btn-rby:hover {color:#ed1c24;background-color:#fff;border-color:#ed1c24;}
.btn-ybr-lg {font-size: 18px; line-height: 1.3333333;}

.form-group {position:relative;margin-bottom:20px;}
.form-group input.form-control {padding:8px 12px 8px 40px;height:40px;}
.input-icon {position: absolute;width: 45px;height: auto;top: -5px;left: -5px;}
.help-block {font-size:14px; color:#fff;}
.has-error .help-block  {color:#fff;background:rgba(237,20,61,0.6);padding:3px 6px;border-radius:4px;}
.has-error .help-block p, .has-error .help-block ul {margin:0 !important;}
.help-block li:before {color:#fff;font-family: 'icomoon';content: "\e928";padding-right:6px;}
.checkbox {font-size:20px;color:#fff;}
.checkbox label {padding-left:20px;font-size:16px;}
.checkbox label input[type=checkbox] {margin-top:3px; margin-left:-20px;}
.btn-group .btn {margin:5px;border-radius:4px !important;width:48%;padding:10px;}

#entry {margin-top:25px;}
#entry .btn-ybr {font-size:18px;padding:10px 40px;}

#main .wrap {background:transparent url(../images/hlhs_Tablet_portrait.jpg) 50% 0 no-repeat;background-size:cover;background-origin:padding-box;}
#main.done .wrap {background-image:linear-gradient(to bottom, rgba(209,210,212,1) 0%, rgba(226,227,228,1) 22%, rgba(253,253,253,1) 72%, rgba(255,255,255,1) 100%);}
#quiz .wrap {background:transparent url(../images/hlhs_portrait_blur.png) 50% 0 no-repeat;background-size:cover;background-origin:padding-box;}

header {background-color:transparent;border-bottom:1px solid #fff;margin-left:-15px;margin-right:-15px;}
header .row {margin-left:0;margin-right:0;}
#ybrlogo {padding:0;margin:10px 0;}
#terms {padding-top:20px;font-size:12px !important;}
#terms p {color:#fff;}
#terms a, #terms a:hover, #terms a:focus {color:#fff;text-decoration:underline;}

#questions {text-align:center;padding:20px 0;}
#q-butt li {background:#ffd300;border:2px solid #fff;width:36px;height:36px;border-radius:18px;font-weight:800;line-height:30px;font-size:18px;}
#q-butt li.on {background-color:#fff;border-color:transparent;}
.allqs p.lead {color:#fff;font-size:18px;font-weight:400;text-shadow: 2px 2px 1px rgba(100, 100, 100, 1);}
.allqs p.small {color:#fff;font-size:14px;text-shadow: 1px 1px 1px rgba(100, 100, 100, 1);}
.ans {display:-ms-grid;display: grid;grid-gap: 10px;-ms-grid-columns: 1fr 10px 1fr;grid-template-columns: 1fr 1fr;}
.answer {background-color: #fff;border:3px solid #fff;border-radius: 5px;position:relative;}
.answer p {font-size:15px;color:#484E53;}
.aa {-ms-grid-row: 1;-ms-grid-column: 1;}
.ab {-ms-grid-row: 1;-ms-grid-column: 3;}
.ac {-ms-grid-row: 1;-ms-grid-column: 5;}
.ad {-ms-grid-row: 1;-ms-grid-column: 7;}

.answer:hover {border-color:#ffd300;}
.answer span {position:absolute;top:-2px;left:-2px;background:#484E53;color:#fff;border-radius:5px 0 5px 0;width:25px;height:25px;line-height:23px;}
.answer:hover span {background:#ffd300;color:#484E53;}

.confirmation {padding:50px 0;}
.yball {background:transparent url(/images/Yball.png) 50% 50% no-repeat;background-size:contain;width:28px;height:28px;display:inline-block;margin:0 4px;vertical-align:text-bottom;}

#intro {text-align:center;min-height:370px;}
#intro h1, #intro p {color:#fff;}
#intro h1 {line-height:1.1;font-weight:400;}
#intro .start h1 {font-size:28px;text-shadow: 2px 2px 1px rgba(100, 100, 100, 1);margin:10px 0 20px;}
.done #intro {padding-bottom:30px;}
.done.done-no #intro {padding-bottom:0;}
.done #intro h1 {font-size:34px;}
.done #intro h1, .done #intro p {color:#484E53;}
.done #wrap-phone {height:300px;overflow:hidden;text-align:center;padding-top:30px;}
.done #wrap-phone img {margin:0 auto;}

#tandcstrip {background-image:linear-gradient(to bottom,rgba(0, 0, 0, 0.35),rgba(0, 0, 0, 0.35));margin-left:-15px;margin-right:-15px;padding:10px;border-bottom:4px dashed #ffd500;}
#tandcstrip a, #tandcstrip a:hover, #tandcstrip a:focus {color:#fff;text-decoration: underline;}

#getstarted {background-image:linear-gradient(to bottom,rgba(0, 0, 0, 0.35),rgba(0, 0, 0, 0.55)), url(../images/bg_road.jpg);background-position:50% 50%;background-repeat:no-repeat;background-origin:padding-box;overflow:hidden;}
#getstarted h2, #getstarted h3, #getstarted p, #getstarted label {color:#fff;font-weight:400;}
#getstarted h2 {line-height:1.2;}
#getstarted h2 em {font-style:normal;color:#ffd500;}
#getstarted h3 {text-align:center;font-size:18px; background:transparent url(../images/arrow.png) 5% 0 no-repeat;background-size:contain;padding-top:15px;}


#intro .congrats {background-image:linear-gradient(to bottom,rgba(0, 0, 0, 0.75),rgba(0, 0, 0, 0.75));padding:30px;border-radius:15px;margin:30px 0;}
#intro .congrats h1 {margin:0 0 20px;font-size:28px;}
#intro .congrats h1 em {font-style: normal;color:#ffd500;}
#intro .congrats p {font-size:18px;line-height:1.25;}
#intro .congrats .btn-grp {margin-top:25px;text-align: center;}
#intro .congrats .btn-grp .btn {padding:6px 20px;}

#social {background: #fff;padding:30px 0;text-align:center;font-size:18px;font-weight:800;}

#hot {border-top:10px solid #ffd500;background:#fff;padding-top:30px;padding-bottom:30px;}
#hot h2 {font-size:28px;font-weight:400;}
#hot h2 em {font-style: normal;color:#ed1c24;}
#meet-today {padding:20px 0;}
#meet-today h2 {font-size:24px;color:#fff;margin-top:0;margin-bottom:15px;}
#meet-today .btn-grp {margin:15px 0 20px;text-align: center;}
#meet-today .btn-grp .btn {padding:6px 20px;}
#smasher-promo {}
#smasher-promo h3 {font-size:18px;font-weight:400;margin-bottom:0;}

.rate-block {margin:0 30px -10px;}
.rate-block strong {font-weight:800;font-size:110px;line-height:1;}
.rate-block small {display:block;padding-top:4px;font-size:14px;}
.rate-block .pc-pa {position:relative;}
.rate-block .pc {font-weight:800;vertical-align:top;font-size:70px;line-height:1.2;}
.rate-block .pa {font-weight:600;font-size:35px;position:absolute;bottom:-5px;left:5px;}
#finder {width: 140px;margin-top: -56px;margin-left: 111px;}

#quiz-results {background: #eee;padding-top:30px;padding-bottom:30px;text-align:center;}
#quiz-results h2 {font-size:36px;font-weight:400;margin-bottom:20px;}
#quiz-results p {font-size:16px;}
#quiz-results a, #quiz-results a:hover, #quiz-results a:focus {color:#484E53;text-decoration: none;}

#stay-in-touch {background: #fff;padding-top:30px;padding-bottom:30px;text-align:center;}

h2 {font-size: 22px;}


.disclaimers {font-size:12px; padding:30px 0 20px;}

/* iphone 5 */
@media (max-width:320px) {
}
/* iPad portrait min-height to leave landscape phone as a xs device */
@media (min-width:481px ) and (min-height:400px ) {
	#ybrlogo {margin:15px auto;}
	#getstarted h2 {margin-top:70px;font-size:30px;line-height:1.25;}
	#getstarted p {font-size:16px;}
	#intro {min-height:510px;}
	#main .wrap {background-position:50% 20%;}
	#quiz .wrap {padding-bottom:30px;}
	#intro .congrats h1 {font-size:45px;}
	#quiz-results {padding-bottom:0;}
	.answer p {font-size:18px;}
	.ans img {max-width: 70%;margin:0 auto;}
	#intro .congrats {margin:50px 0;}
	.done #intro {padding-top:30px;min-height:auto;text-align:left;}

	#hot p {font-size:16px;}
	#meet-today h2 {font-size:32px;}
	#meet-today .btn-grp .btn {font-size:24px;}

	#result-modal .answer-is-true {padding-top:360px;background-size: 35%;}
	#result-modal .answer-is-false {padding-top:360px;background-size: 35%;}
	#result-modal .btn-group .btn {white-space: normal;width:48%;margin:5px;}
	.allqs p.lead {font-size:24px;margin:0 100px 15px;line-height:1.2;}
	.allqs p.small {font-size:16px;margin-bottom:20px;}
}
/* ipad landscape */
@media (min-width:769px) {
	#ybrlogo {margin:20px auto;max-width:90%;}
	#main .wrap {background:transparent url(../images/hlhs_desktop.jpg) 50% 0 no-repeat;background-size:cover;background-origin:padding-box;}
	#quiz .wrap {background:transparent url(../images/hlhs_landscape_blur.png) 50% 0 no-repeat;background-size:cover;background-origin:padding-box;padding-bottom:60px;}
	#intro .start {text-align:left;}
	#intro .start h1 {font-size:56px;margin:100px 0 70px;}	
	#intro .btn-ybr, #intro .btn-rby {padding:10px 70px;font-size:24px;}
	.done #intro .btn-ybr, .done #intro .btn-rby {padding:10px 40px;font-size:18px;}
	#getstarted {padding-bottom:30px;}
	#getstarted h3 {background-position:15% 0;}
	#intro .congrats {background-image:linear-gradient(to bottom,rgba(0, 0, 0, 0.45),rgba(0, 0, 0, 0.45));margin-top:60px;}
	.done #intro h1 {font-size:32px;margin:20px 0;}	
	#hot h2 {font-size:32px;margin-top:15px;}
	#result-modal .answer-is-true {padding-top:300px;background-size: 30%;}
	#result-modal .answer-is-false {padding-top:300px;background-size: 30%;}
	.ans {
		grid-template-columns: 1fr 1fr 1fr 1fr ;
		-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
	}
	.allqs p.lead {font-size:30px;margin:20px 20% 30px;}
	.allqs p.small {margin-bottom:40px;}
	#q-butt {margin-top:30px;}
	#q-butt li {border: 4px solid #fff;width: 46px;height: 46px;border-radius: 23px;line-height: 36px;font-size: 20px;}
	#terms {padding-top:30px;}
	.rate-block strong {font-size:135px;}
	.rate-block .pc {font-size:85px;}
	.rate-block .pa {font-size:40px;}

}
@media (min-width:993px) {
	.rate-block {margin:0 95px -10px;}
}
@media (min-width:1201px) {
	#ybrlogo {margin:30px auto;max-width:80%;}
	#getstarted {background-size:cover;}
	#getstarted h2 {font-size:44px;}
	#getstarted h3 {background-position:22% 0;}
	.rate-block {margin:0 120px -10px;}
	.rate-block strong {font-size:145px;}
	.rate-block .pc {font-size:95px;}
	.rate-block .pa {font-size:45px;}

}
@media (min-width:1439px) {
	#ybrlogo {margin:30px auto;max-width:60%;}
	.rate-block {margin:0 200px -10px;}
}
@media (min-width:1679px) {
	#ybrlogo {margin:30px auto;max-width:50%;}
}