@charset "UTF-8";
/* CSS Document */
*{
	box-sizing: border-box;
}
*:focus-visible{
    outline:3px solid #c58700;
    border-radius:1px;
}

body {
	font-family: 'Helvetica Now Text', Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.5;
	background-color: #eaeaea;
	padding:0;
	margin: 0;
}
.logo {
	height:32px;
	margin-top:20px;
}

.container {
	max-width: 900px;
	margin: 0 auto;
}

.header {
	height: 72px;
	padding: 0 8px;
	background-color:#000;
}

h1, h3 {
	font-family: 'Helvetica Now Display', Helvetica, sans-serif;
	font-weight: 800;
}
h1 {
	color: #fff;
	font-size: 30px;
	line-height:1.1;
	text-align: center;
	margin:0;
}
h2 {
	font-family: 'Helvetica Now Text', Helvetica, sans-serif;
	font-weight: normal;
	font-size: 16px;
	margin: 0 0 50px 0;
	line-height: 1.3;
	font-weight:700;
	padding-right: 24px;
}
h3 {
	color: #000;
	font-size: 24px;
	line-height:1.1;
	margin-bottom:50px;
	display: block;
	text-align: center;
}
@media(min-width:768px){
	h1 { font-size:38px; line-height:1; }
	h3 { font-size:26px; line-height:1.1; }
}
@media(min-width:1024px){
	h1{ font-size:44px; line-height:1; }
}
@media(min-width:1336px){
	h3{ font-size:28px; line-height:1.1; }
}

input[type=submit] {
	font-size:16px;
	text-decoration: none;
    cursor:pointer;
	font-family: 'Helvetica Now Text', Helvetica, sans-serif;
	font-weight: bold;
	padding-bottom:4px;
	border-bottom:2px solid #0000eb;
    margin-bottom:0px;
}
input[type=submit]:hover, input[type=submit]:focus{
	color:#0000eb;
	text-decoration:none;
	padding-bottom:2px;
}

a img {border: none;}
a {
	font-size:16px;
	color: #0000eb;
	text-decoration: none;
	font-family: 'Helvetica Now Text', Helvetica, sans-serif;
	font-weight: normal;
	padding-bottom:4px;
	border-bottom:2px solid #0000eb;
}
a:hover, a:focus{
	color:#0000eb;
	text-decoration:none;
	padding-bottom:2px;
}

/* Adjustments */
.pb-20{ padding-bottom:20px; }
.mb-70{ margin-bottom:70px; line-height: 1.7rem; }


.headline{
	background-color:#0000eb;
	padding: 20px 0 60px;
}

#content {
	display: inline-block;
	background-color: #fff;
	padding: 50px 30px 0 50px;
	min-height: 800px;
	box-shadow: 1px 15px 15px -3px rgba(0,0,0,0.2);
	margin-top:-30px;
}	
#content.ty {
	min-height: 100px;
}
	

#form {
	width:410px;
	position: relative;
	float: left;
	vertical-align:top;
}
.input-contain{
	width:100%;
	padding-right:24px;
}
input {
	font-family: 'Helvetica Now Text', Helvetica, sans-serif;
	width: 100%;
	height:56px;
	padding-left:16px;
	margin-bottom: 28px;
	font-size:16px;
	border: 1px solid #736e7d;
}
input:focus{
	border-left: 4px solid #006ed7;
	padding-left: 12px;
}
input[type=radio] {
	text-align: left;
	margin-left: 10px;
	display: inline-block;
	width: 20px;
}


.req {
	color: #d90909;
	
	position: relative;
}
.error {
	color: #d90909 !important;
	display: block;
	font-size: 12px;
	font-weight:bold;
	position: relative;
    float:left;
	margin-top: -36px;
}

.img-container{
	float: left;
}
.form-img{
	width:404px;
}

.subBtn {
    margin-top:40px;
	display:flex;
	justify-content: center;
	align-items:center;
	height:56px;
	width:100%;
	background-color:#0000eb;
	color:#fff;
	border:4px solid transparent;
	text-transform: uppercase;
	text-align: center;
	line-height:1.3;
	letter-spacing:2px;
	font-weight:800;
	text-decoration: none;
}
.subBtn span{
	display: block;
	width:100%
}
.subBtn:hover, .subBtn:focus{
	background-color:transparent;
	border:4px solid #0000eb;
	color:#0000eb;
	text-decoration: none;
}

.viewLNL {
	margin-top: 30px;
	margin-bottom: 60px;
	text-align: center;
}

.p {font-size: 16px; line-height: 1;}
.p-asterisks{font-size:12px; color:#333;}
.p-instructions {
	font-family: 'Helvetica Now Text', Helvetica, sans-serif;
	font-weight: normal;
	font-size: 16px;
	margin: 0 0 2em 0;
	line-height: 1;
	font-weight:700;
	padding-right: 24px;
}

@media(max-width:910px){
	.pb-20{ 
		padding-bottom:0;
	}
	
	.header{
		display: flex;
	}
	
	#content{
		padding-left:24px;
		padding-right:24px;
	}
	
	#form{
		width:100%;
	}
	
	.input-contain{
		padding-right:12px;
	}
	
	.img-container{
		display: block;
		width:100%;
	}
	.form-img{
		width:100%;
		max-width:100%;
	}
	
}

@media(max-width:768px){
	#content, .headline{
		padding-left:12px;
		padding-right:12px;
	}
}

@media(min-width:390px){
	.nobr{
		white-space:nowrap;
	}
}

/**********************************************************************
		FORM ELEMENTS
**********************************************************************/
/* BOOTSTRAP 3.4.1 OVERRIDE: INPUT FIELDS (.form-group, .form-control) */

/*Form Elements are by default 56px in height with a margin-bottom of 28px.  If a more slimmer design is needed (less height/less margin), use the adjustment code below and change margin/height to custom measurement*/

/* Slim Form Adjustment */

    /*.form-group{ height:48px; margin-bottom:12px; }

    .form-group .form-control,
    .form-group .select-control { height:48px; }

    .form-control ~ label.label-overlay.hover,
    .form-control:focus ~ label.label-overlay,
    .select-control ~ label.label-overlay.hover,
    .select-control:focus ~ label.label-overlay{ bottom:48px; }

    .label.label-overlay{ bottom:34px; font-size:14px; }*/


.form-header{
    margin:2em 0;
    text-align:center;
}

.form-group{
	height:56px;
	margin-bottom:28px;
}
.form-group .form-control,
.form-group .select-control,
.input-group .form-control{
	height:56px;
	padding: 10px 0 0 16px;
	font-size:14px;
	line-height:1.1;
	color:#000;
	border:1px solid #736e7d;
	border-radius:0;
	box-shadow:none;
	transition:initial;
}
.input-group .form-control{
	border-right:none;
}
.form-group .form-control:focus,
.form-group .select-control:focus,
.input-group .form-control:focus{
	border-color:#736e7d;
	box-shadow: 0 15px 15px 0 rgba(0,0,0,0.05);
	border-left:4px solid #006ed7;
	padding-left:13px;
	outline: none;
}

/* Change Autocomplete styles in Chrome */
.form-group .form-control:-webkit-autofill,
.form-group .form-control:-webkit-autofill:hover,
.form-group .form-control:-webkit-autofill:focus,
.form-group .select-control:-webkit-autofill,
.form-group .select-control:-webkit-autofill:hover,
.form-group .select-control:-webkit-autofill:focus{
	-webkit-box-shadow: 0 0 0 100px #fff inset;
}
/* Change Autocomplete styles in IE */
.form-group .form-control.edge-autoSuggestFieldFilled,
.form-group .select-control.edge-autoSuggestFieldFilled{
	background-color: #fff !important;
}

/* NOTE: Accompanying JS File (siriusxm_theme_scripts.js) must be used in order for the label-overlay effect to work.  In addition, it must be used in conjunction with the Bootstrap classes .form-group and .form-control */
label.label-overlay{
	margin:0;
	position: relative;
	bottom:62px;
	left:17px;
    font-size:14px;
    line-height:1.1;
	font-weight:normal;
	color:#735e7d;
	transition:bottom .35s ease, font-size .35s ease;
}
.form-control:focus ~ label.label-overlay, 
.form-control ~ label.label-overlay.hover,
.select-control:focus ~ label.label-overlay,
.select-control ~ label.label-overlay.hover
{
	font-size:12px;
	bottom:75px;
}

/* SELECT DROPDOWN */
.form-group .select-control {
    display:block;
    width:100%;
    background-color:#fff;
    background-image:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
}
/* Hide default dropdown arrow on IE */
.form-group .select-control::-ms-expand{display:none;}

.form-group span.chevron{float:right;height:0;}
.form-group span.chevron::before{
    border-style:solid;
    border-width:2px 2px 0 0;
    content:'';
    display:inline-block;
    height:8px;
    width:8px;
    position:relative;
    transform:rotate(135deg);
    vertical-align:top;
    top:-32px;
    right:16px;
}
.form-group .select-control:focus + span.chevron::before{
    transform:rotate(-45deg);
}

/* TEXTAREA */
.form-group.textarea{
    height:122px !important;
}
.form-group.textarea .form-control{
    height:122px !important;
    resize:none;
    padding-top:18px;
}
.form-group.textarea label.label-overlay{
    bottom:114px;
}
.form-group.textarea .form-control:focus ~ label.label-overlay,
.form-group.textarea .form-control ~ label.label-overlay.hover{
    bottom:122px;
}

/* INPUT W/ BUTTONS */
/* BOOSTRAP 3.4.1 OVERRIDE: INPUT GROUPS (.input-group, .input-group-btn) */
.input-group{
	height:56px;
	margin-bottom:28px;
}
.input-group-btn>.btn-info{
	width:136px;
	border:1px solid #736e7d;
	border-left:none;
	padding-top:0;
}
.input-group-btn>.btn-info:active,
.input-group-btn>.btn-info:active:focus{
	color: #0000eb;
	background-color:transparent;
	box-shadow:none;
	border:1px solid #736e7d;
	border-left: none;
}
.input-group-btn{
	vertical-align:top;
}
.input-group .form-control:focus{
	border-right:none;
}

/*
NOTE: "label-group" class to be used in conjunction with "label-overlay"
And it must also be used with accompanying JS File "Siriusxm_theme_scripts.js"
*/
.input-group label.label-group{
	position: absolute;
	bottom:16px;
	z-index:4;
}
.form-control:focus ~ label.label-group,
.form-control ~ label.label-group.hover{
	bottom:32px;
}


/* DISABLED INPUT FIELDS */
/* Input Field */
.form-control[disabled], .select-control[disabled], input[disabled]{
	border:1px solid #eaeaea;
	background-color:#f5f5f5;
}
/* Input w/ Button*/
.form-control:disabled ~ .input-group-btn>.btn{
	color: #736e7d;
	background-color:#f5f5f5;
	border: 1px solid #eaeaea;
	border-left:none;
	opacity:1;
}

/* REQUIRED TEXT STYLE */
.input-required{
    color:#d4d4d4;
}

/* ERROR TEXT / ERROR BORDER */
.form-group span.input-error,
span.input-error{
	font-size: 12px;
	line-height:1;
	font-weight: 700;
	color:#d90909;
	display:block;
	position: relative;
	top:-16px;
}
.form-group .form-control.error-border,
.form-group .select-control.error-border{
	border: 1px solid #d90909;
}