/* -----------------------------------------
   How It Works
----------------------------------------- */

.how-it-works .step {
    border-bottom: 1px solid #ccc;
    padding: 20px;
}

.how-it-works h2,
.how-it-works h3 {
    color: #ec8041;
}

.subhead-container {
    background: #fff4e8;
    padding: 20px;
    border: 1px solid #ccc;
}

.subhead-container p:last-of-type {
    margin-bottom: .5rem;
}

/* -----------------------------------------
   About/Team
----------------------------------------- */

#meet-the-team img {
    margin-bottom: 5px;

}

#meet-the-team li {
    font-size: 1em;
    line-height: 1.2em;
}

#meet-the-team span {
    color: #ec8041;
    font-weight: bold;
}

/* -----------------------------------------
   Contact Page
----------------------------------------- */
.contact-page-methods {
    background-color: #f5f5f5;
}

.contact-page-methods h3 {
    font-size: 1.2rem;
}

.contact-page-methods .columns {
    min-height: 100px;
}

.contact-page-methods .columns:nth-child(1n+2) {
    border-left: 1px solid #ccc;
    background-color: #fff;
}

.contact-page-methods > .row {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.contact-page-methods > .row:last-child {
    border-bottom: 1px solid #ccc;
}

.contact-page-methods .contact-icon {
    float: left;
    padding: 0;
    height: 38px;
    width: 38px;
    display: block;
    margin: -10px 5px 30px -10px;
    padding: 0 5px 0 0;
    border-radius: 0 0 26px 0;
    text-align: center;
    line-height: 30px;
    color: white;
    background-color: #ec8041;
    font-size: 1.4rem;
}

.contact-icon .ss-icon {
    font-sie: 1.1rem;
}

.contact-method {
    padding: 10px;
    background-color: transparent;
}


/* -----------------------------------------
Register Page
----------------------------------------- */

.progress-track.step1 { display: none;}

#role h3 { text-align: center;}
#role.initial {
    display: block;
    margin:  0 auto 15px;
    text-align: center;
    background: #fafafa;
    padding: 10px 0;
    border-radius:5px;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 7, 0.05);
}

#role.initial label { display:  inline-block;  vertical-align: top;  padding: 0; margin: 20px 0 20px 0; min-width: 136px; width: 30%;
    transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s; }

#role.initial label input { text-align: center; margin: 40px auto 0 auto; display: block; top:8px; position: relative; cursor: pointer;}


#role.initial label span{
    line-height: 20px;
    margin: 0 auto;
    position: relative;
    display: block;
    vertical-align: top;
    color: #000;
    box-sizing: border-box;
    transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
}

#role.initial label span span {
    white-space: nowrap;
    color: #000;
    display: inline-block;
}

#role .role-desc { margin: 4px 0 0 0; padding: 0; line-height: 16px; text-indent: 0px; font-size: 13px;
    position: absolute; left: 18px;  }

#role.initial .role-desc { margin: 5px auto 5px auto; color: #000; line-height: 16px;
    padding: 8px; border-radius: 3px; position: relative; left: auto; text-align: center;
}

#role.initial label.radio-off span { opacity: .4;}
#role.initial label.radio-off span span { opacity: 1;}

#role.initial label.buyer-check {
    border-right: 1px solid #ccc;
}

#role.initial label.auctioneer-check {
    border-right: 1px solid #ccc;
}

#role.initial label.buyer-check span.icon{
    width: 38px; height: 38px;
    background: url(../svg/buyer-check.svg) center center no-repeat;
    background-size: contain;
    position: relative; display: inline-block;
    float: left;
    z-index: 50;

    margin-left: -19px;
    left: 50%;
}

#role.initial label.facility-check span.icon{
    width: 38px; height: 38px;
    background: url(../svg/facility-check.svg) center center no-repeat;
    background-size: contain;
    position: relative; display: inline-block;float: left;
    z-index: 50;
    margin-left: -19px;
    left: 50%;

}

#role.initial label.auctioneer-check span.icon{
    width: 38px; height: 38px;
    background: url(../svg/auctioneer-check.svg) center center no-repeat;
    background-size: contain;
    position: relative; display: inline-block;
    float: left;
    z-index: 50;

    margin-left: -19px;
    left: 50%;
}

.oldie #role.initial label.buyer-check span.icon{background: #fff url(../png/buyer-check.png) center center no-repeat;}
.oldie #role.initial label.buyer-check span.icon{background: #fff url(../png/facility-check.png) center center no-repeat;}

#role label input:checked + span:nth-child(1){ color: #000 !important; }


.role-form-expanded {
    display: none; height: 0;
    overflow: hidden;
    transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    animation: fadein 1s;
    -moz-animation: fadein 1s;
    -webkit-animation: fadein 1s;
    -o-animation: fadein 1s;
}

#form-join.expanded .role-form-expanded { height: auto !important; display: block !important; overflow: visible}

#form-join p {
    font-size: .8em;
    margin: 10px 0;
}

#extended-fields {
    margin-top: 15px;
}

#extended-fields input[type="checkbox"] {
    margin-left: 15px;
}

/* -----------------------------------------
   Ts & Cs
----------------------------------------- */

.terms .body-content ul,
.terms .body-content ul li {
    list-style-type: none;
}

.terms .body-content ul li {
    margin-bottom: 10px;
}

/* -----------------------------------------
   Site Map
----------------------------------------- */

.stateface {
    font-size: 40px;
    line-height: 0;
    color: #eb7e46;
}

/* -----------------------------------------
   Lien Law
----------------------------------------- */
.lien-law .law-src { 
	padding-bottom: 40px; 
	word-wrap: break-word;
}
.lien-law ul { 
	list-style: none;
} 
.lien-law br  { 
	line-height: 30px;
	position: relative;
	display: block;
}
.lien-law .laws, 
.lien-law .laws p, 
.lien-law .laws ul { 
	font-size: 14px; 
	line-height: 19px; 
	font-weight: normal; 
}
.lien-law .laws ul li{
	margin-bottom: 10px;
}
.lien-law strong,
.lien-law b { 
	display: block;
	position: relative;
	font-size: 18px !important;
	padding-bottom: 20px;
	margin-bottom: 0;
	font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}
.lien-law .state-name,
.lien-law .bold
 { font-weight: bold; }

.lien-law .bold {
	position: relative;
	font-size: 18px !important;
	padding-right: 5px !important;
	font-weight: bold !important;
	font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif !important;
}

.vi-lienlaw { display: none; }


/* -----------------------------------------
   Start Page
----------------------------------------- */
.startpage .body-content{ 
	text-align: center;
	margin: 0 auto !important;
	width: 100%;
	max-width: none !important;
	padding: 0;
}
.inner-start { 
	position: relative; 
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	display: block;
	padding: 20px;
}

.inner-start { margin: 0 auto;}

.startpage .body-content h2 { 
	color: #000;
	font-size: 32px;
	font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif !important;
	border-bottom: 1px solid #ccc;
	padding: 27px 0;
	margin: 10px auto 30px auto;
}

.startpage .body-content h2 em { font-weight: 800; white-space: nowrap;}

.startpage .body-content h3 { font-size: 32px; font-weight: bold; color: #333;}
.startpage .body-content p { color: #333;}

.why-start {
	text-align: left;
	list-style: none;
	padding: 0;
	margin: 0  auto 80px auto;
	color: #333;
}
.why-start li { margin-bottom: 50px;}

.why-start .col1, 
.why-start .col2 {
	width: 50%;
	display: table-cell;
}
.why-start p { font-size: 17px;}
.why-start .col1 {
	padding-right: 20px;
}
.why-start .col2 {
	padding-left: 10px;
}

.startpage .body-content .why-start h3 {
	font-size: 22px !important;
	font-weight: 600;
}
.why-start h3 span { color: #fff;
	background: #ef8136;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	position: relative;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	margin-right: 3px;
}

.whybox { position: relative;
	padding: 0 0 50px 0;
}

.whybox h3:first-child { margin-top: 40px; }

.greybg { background: #efefef;}
.start-btn { width: 235px; font-size: 21px; font-weight: 600 !important;}
.start-txt {font-size: 13px;font-weight: 600 !important;}

.startpage .bubble { background: #000; color: #fff; font-size: 21px; text-align: center; width: 90px; height: 90px; font-weight: bold;line-height: 90px; vertical-align: middle; border-radius: 50%; margin:-30px auto; top: -45px; position: relative; display: block; 
	
}
.startpage .bubble span { line-height: 23px !important; position: relative; top: 24px; display: block; vertical-align: middle;}

.startpage .movie h3 { margin: 40px auto;}

.startpage .movie iframe{ width: 100%; max-width: 640px; }

.startpage .movie { margin: 0 auto 140px auto;
}

.startpage .faqbox .subsect1 h3{ margin-top: 40px !important; }
.startpage .faqbox p { padding-bottom: 25px;}
.more-faq { text-decoration: underline; margin-bottom: 30px; position: relative; display: block;}


.bargraph { position: absolute; bottom: 0px; right: 20px; width: 170px; height: 290px; }

.bargraph .us, .bargraph .them { display: inline-block; vertical-align: bottom; }

.bargraph .bar{ width: 80px; background: #ef8136; position: absolute; bottom: 0px; }

.bargraph .us .bar { height: 230px; right: 0;}
.bargraph .them .bar { height: 29px; left: 0;}

.bargraph .minibubble { line-height: 50px; width: 50px; height: 50px; margin:  0 auto;
	border-radius: 50%; background: #333; position: relative; top: 0px; left: 20px; display: block; color: #fff; font-weight: bold; }

.bargraph .them .minibubble { position: absolute; bottom: 40px; left: 14px; top: auto; font-size: 12px; }
.bargraph .us .minibubble { font-size: 24px; left:42px; }

.start-bottom { padding: 40px 0 0 0; position: relative; display: block; margin: 0 auto; width: 100%;}
.start-contact {vertical-align: bottom; }
.start-contact, .getit { width: 50%; display: table-cell; position: relative; padding: 0;}

.getit { text-align: left; vertical-align: middle;}
.getit  ul { list-style: none; padding: 0; margin: 0 auto 40px auto;}

.getit  ul h3 { margin-top: 40px;}
.start-contact img { position: relative; margin: 0 auto; width: 50%; min-width: 220px; height: auto;}

#extended-fields .field-row {
    margin-left: -8px;
    margin-right: -8px;
}

#extended-fields .field-row .col-50-pro {
    width: 50%;
    float: left;
    padding-left: 8px;
    padding-right: 8px;
}

/* ----------------------------------------- */
/*            Mobile Media Size              */
/* ----------------------------------------- */
@media only screen and (max-width: 60.063em) {
	
	.why-start .col1, 
	.why-start .col2 {
		width: 100%;
		display: block;
	}
	.getwhy { 
		text-align: center;
	}
	.bargraph{ 
		display: none;
	}
	
}

@media only screen and (max-width: 40em) {
	.start-contact { display: none;}
	.getit { text-align: center; display: block; margin: 10px auto 0 auto;
		width: 100%;
	}	
}