@font-face {
    font-family: 'HelveticaNeueRegular';
    src: url('/css/fonts/helveticaneue-light-webfont.eot');
    src: url('/css/fonts/helveticaneue-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/helveticaneue-light-webfont.woff') format('woff'),
         url('/css/fonts/helveticaneue-light-webfont.ttf') format('truetype'),
         url('/css/fonts/helveticaneue-light-webfont.svg#HelveticaNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueLTRegular';
    src: url('/css/fonts/helveticaneuelt-medium-webfont.eot');
    src: url('/css/fonts/helveticaneuelt-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/helveticaneuelt-medium-webfont.woff') format('woff'),
         url('/css/fonts/helveticaneuelt-medium-webfont.ttf') format('truetype'),
         url('/css/fonts/helveticaneuelt-medium-webfont.svg#HelveticaNeueLTRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* * { margin: 0; padding: 0; outline: 0; } */
* { margin: 0; outline: 0; }

body, html { height: 100%; }

body {
    font-size: 12px;
    line-height: 1.3;
    font-family: arial, sans-serif;
    color: #000;
    background: #fff;
    min-width: 100%;
}

a { color: #5c738f; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

ol, ul { list-style: none outside none; }

h1, h2, h3, h4, h5 { margin: 0; }

h2 { font-family: 'HelveticaNeueRegular', arial, sans-serif; font-weight: bold; color: #333; }

.button {
	margin: 0 auto;
	padding: 8px 30px;
	display: block;
	width: fit-content;
	background: #5c738f;
	border-radius: 8px;
	font-size: 2rem;
	font-family: 'HelveticaNeueLTRegular', arial, sans-serif;
	color: #fff;
	text-decoration: none;

	&.brown { background: #454545;
		&:hover,
		&:focus { background: #3e3e3e; }
	}

	&:hover,
	&:focus { background: #536781; color: #fff; text-decoration: none; } }

.shell { max-width: 1025px; min-width: 320px; margin: 0 auto; }

.infoMessage {
	border: thin solid Black;
	background-color: #A7D37F;
	width: 50%;
	/* text-align: left; */
	padding-bottom: 5px;
	padding-top: 5px;
	font-size: 12px;
}
.errorMessage {
	border: thin solid Black;
	background-color: #FFAAAA;
	width: 50%;
	text-align: left;
	padding-bottom: 5px;
	padding-top: 5px;
	font-size: 12px;
}

.header { background: #5c738f; }
.header .container { position: relative; padding: 37px 0 0 0; }
.header a.login { position: absolute; top: 12px; right: 0; display: block; padding: 0 0 0 22px; background: url(/images/login-icon.png) no-repeat 0 center; font-size: 15px; line-height: 18px; color: #ffffff; }

#logo { display: block; max-width: 100%; }

.navigation { height: 34px; float: right; display: inline; }
.navigation ul li { padding: 0 5px; font-size: 13px; line-height: 34px; color: #ffffff; height: 34px; float: left; display: inline; }
.navigation ul li a { padding: 0 15px; color: #ffffff; text-transform: uppercase; border-radius: 5px 5px 0 0; display: block; }
.navigation ul li a:hover,
.navigation ul li a.active { color: #262626; background: #e2e2e2; text-decoration: none; }

.banner { background: #ebebeb url(/images/quote-wp-bg.png) repeat-x 0 0; padding: 25px 0 0 0; }
.quotes-wp { position: relative; }
.quotes-wp .quote-text { position: absolute; top: 105px; left: 0; width: 53%; font-family: 'HelveticaNeueRegular', arial, sans-serif; z-index: 20; }
.quotes-wp .quote-text p { padding: 0 0 100px 0; font-size: 25px; line-height: 40px; color: #000000; }
.quotes-wp .quote-text p a { color: #5c738f; font-size: 35px; }
.quotes-wp .quote-text p span { color: #5c738f; font-size: 35px; }
.quotes-wp .quote-text a.demo-btn { width: 260px; height: 40px; background: url(/images/request-btn.png) no-repeat 0 0; font-size: 22px; line-height: 40px; color: #ffffff; font-family: 'HelveticaNeueLTRegular', arial, sans-serif; display: block; padding: 0 0 0 30px; }
.quotes-wp .quote-text a.demo-btn:hover { text-decoration: none; }

.quotes-slider { position: relative; width: 100%; padding: 0; margin: 0; display: block; }
.quotes-slider .slides li { display:none; position: relative; height: 100%; }
.quotes-slider .slides li .quote-box { position: absolute; top: 30px; right: 0; padding: 10px 10px 10px 15px; background: #5c738f; width: 225px; border-radius: 5px; }
.quotes-slider .slides li .quote-box p { display: block; text-indent: 35px; background: url(/images/comma.png) no-repeat 0 0; font-size: 18px; line-height: 25px; color: #ffffff; font-style: italic; font-family: 'HelveticaNeueRegular', arial, sans-serif; }
.quotes-slider .slides li .quote-box .anchor { position: absolute; bottom: -25px; left: 32px; width: 30px; height: 25px; background: url(/images/anchor.png) no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; display: block; }
.quotes-slider .slides li .image { width: 100%; display: block; }
.quotes-slider .slides li .image img { width: 100%; display: block; }


.case { .button { margin-top: 4rem; } }
.features-wp { padding: 70px 0; }
.features-wp h2 { font-size: 36px; text-align: center; line-height: 40px; padding: 0 0 60px 0; }
.features-wp .col { padding: 0 0 35px 0; font-size: 16px; line-height: 24px; color: #454545; width: 270px; margin: 0 auto; text-align: justify; }
.features-wp .col2 { padding: 0 0 35px 0; font-size: 16px; line-height: 24px; color: #454545; width: 470px; margin: 0 auto; text-align: justify; }
.features-wp .col h3 { font-size: 24px; line-height: 28px; color: #3c3c3c; padding: 0 0 20px 0; text-align: center; font-weight: normal; }
.features-wp .col2 h3 { font-size: 24px; line-height: 28px; color: #3c3c3c; padding: 0 0 20px 0; text-align: center; font-weight: normal; }
.features-wp .col .image { display: block; padding: 0 0 18px 0; }
.features-wp .col .image img { display: block; margin: 0 auto; }
.features-wp .col .title { display: block; font-weight: bold; color: #5c738f; }

.videos-wp { background: #bdc8d5; padding: 40px 0; }
.videos-wp h2 { padding: 0 0 40px 0; font-size: 36px; line-height: 40px; text-align: center; text-shadow: #c6cdd6 0 1px 1px; }
.videos-wp .col { width: 323px; margin: 0 auto; font-family: 'HelveticaNeueRegular', arial, sans-serif; }
.videos-wp .col .title { display: block; font-size: 18px; font-weight: bold; line-height: 22px; color: #323232; padding: 0 0 10px 0; }
.videos-wp .col .video-box { margin: 0 0 15px 0; background: url(/images/video-shadow.png) no-repeat center bottom; padding: 0 0 7px 0; }
.videos-wp .col .video-box img { display: block; width: 100%; }
.videos-wp .col p { padding: 0 0 10px 0; font-size: 14px; line-height: 20px; color: #323232; font-style: italic; }

.video-boxLg { margin: 0 0 15px 0; background: url(/images/video-shadow.png) no-repeat center bottom; padding: 0 0 7px 0; }
.video-boxLg img { display: block; }

.contact-wp { padding: 45px 0 25px 0; }
.contact-wp h2 { padding: 0 0 30px 0; font-size: 33px; line-height: 35px; text-align: center; }
.contact-wp p { padding: 0 0 22px 0; font-size: 20px; line-height: 28px; color: #323232; margin: 0; }
.contact-wp p.ls { color: #555555; }
.contact-wp p a { color: #5c738f; }
.contact-wp p .address-text { font-size: 16px; line-height: 28px; color: #3c3c3c; display: block; }
.contact-wp .fields-wp { display: block; }
.contact-wp .field-wp { width: 500px; background: #ffffff; border: solid 1px #c3c4c4; border-radius: 5px; box-shadow: #efefef 3px 3px 3px 3px; height: 50px; margin: 0 0 15px 0; }
.contact-wp .field-wp input.field { box-shadow: inset #ededed 0 1px 3px; background: transparent; padding: 14px 15px; font-size: 18px; color: #555555; border: 0; width: 500px; }
.contact-wp .textarea-wp { margin: 0 0 20px 0; background: #ffffff; border: solid 1px #c3c4c4; border-radius: 5px; box-shadow: #efefef 3px 3px 3px 3px; }
.contact-wp textarea.field { padding: 15px; height: 140px; resize: none; width: 100%; box-shadow: inset #ededed 0 1px 3px; background: transparent; border: 0; font-size: 18px; color: #555555; }
.contact-wp input.submit-btn { margin: 0 0 55px 0; width: 145px; height: 40px; background: #5c738f; border: 0; border-radius: 10px; font-size: 22px; color: #ffffff; cursor: pointer; text-transform: uppercase; font-family: 'HelveticaNeueLTRegular', arial, sans-serif; }

.whatIsVideo-wp { padding: 45px 0 25px 0; }
.whatIsVideo-wp h2 { padding: 0 0 30px 0; font-size: 33px; line-height: 35px; text-align: center; }
.whatIsVideo-wp p { padding: 0 0 22px 0; font-size: 20px; line-height: 28px; color: #323232; margin: 0; }
.whatIsVideo-wp p.ls { color: #555555; }
.whatIsVideo-wp p a { color: #5c738f; }

.video { position: relative; }

.video a {
   position: absolute;
   display: block;
   background: url(/images/youtube_play_icon.png);
   height: 96px;
   width: 96px;
   top: 50%;
   left: 50%;
   margin: -10px 0 0 -40px;
}
.video-box2 { margin: 0 0 15px 0; background: url(/images/video-shadow.png) no-repeat center bottom; padding: 0 0 7px 0; }

.footer { background: #262626; padding: 30px 0 50px 0; }
.footer .col { width: 180px; float: left; display: inline; }
.footer .col-long { width: 285px; float: right; display: inline; }
.footer ul li { display: block; font-size: 15px; line-height: 25px; color: #f0f9ff; }
.footer ul li a { color: #f0f9ff; }
.footer a.logo { display: block; margin: 0 0 20px 0; width: 284px; height: 54px; background: url(/images/footer-logo.png) no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer .social { display: block; }
.footer .social .text { float: left; display: inline; padding: 0 15px 0 0; line-height: 32px; font-size: 20px; color: #ffffff; }
.footer .social a.icon { float: left; display: inline; margin: 0 4px 0 0; width: 32px; height: 32px; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer .social a.icon-f { background: url(/images/f-icon.png) no-repeat 0 0; }
.footer .social a.icon-t { background: url(/images/t-icon.png) no-repeat 0 0; }
.footer .social a.icon-in { background: url(/images/in-icon.png) no-repeat 0 0; }

.main-container { padding: 60px 0 40px 0; min-height: 750px; }
.main-container .main-title { margin: 0 0 35px 0; padding: 0 0 0 20px; height: 46px; background: url(/images/main-title-bg.png) no-repeat 0 center; }
.main-container .main-title h2 { position: relative; line-height: 46px; font-size: 36px; }
.main-container .main-title h2 .text { padding: 0 15px 0 0; background: #ffffff; display: inline; position: relative; z-index: 5; }
.main-container .main-title h2 .bg { position: absolute; top: 50%; margin-top: -; right: 0; width: 100%; height: 11px; background: url(/images/main-title-bg-2.png) repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; display: block; }

.main-container .text-wp { padding: 0 0 50px 0; }
.main-container .text-wp p { font-size: 16px; line-height: 26px; color: #454545; padding: 0 0 30px 0; margin: 0; }
.main-container .box-text { margin: 5px 0; padding: 15px; background: #f2f2f2; border-radius: 5px; font-size: 16px; color: #5c738f; font-weight: bold; font-style: italic; }

.main-container .features-wp { padding: 0; }
.main-container .features-wp p { padding: 0 0 25px 0; }
.main-container .features-wp .col .image { padding: 0 0 40px 0; }

.login-form { padding: 50px 0 0 0; position: relative; }
.login-form .required { position: absolute; top: 0; right: 10px; font-size: 16px; color: #3C3C3C; line-height: 20px; display: block; }
.login-form label { display: block; font-size: 20px; line-height: 24px; color: #323232; padding: 0 0 5px 0; font-weight: normal; }
.login-form .field-wp { width: 100%; display: block; background: #ffffff; border: solid 1px #c3c4c4; border-radius: 5px; box-shadow: #efefef 3px 3px 3px 3px; height: 50px; margin: 0 0 15px 0; }
.login-form input.field { width: 100%; display: block; box-shadow: inset #ededed 0 1px 3px; background: transparent; padding: 14px 15px; font-size: 18px; color: #555555; border: 0; }
.login-form .form-buttons { padding: 20px 0; }
.login-form input.login-btn,
.login-form a.btn { float: left; display: inline; padding: 0 20px; height: 40px; background: #5c738f; border: 0; border-radius: 10px; font-size: 22px; color: #ffffff; cursor: pointer; text-transform: uppercase; font-family: 'HelveticaNeueLTRegular', arial, sans-serif; border: 0; text-align: center; line-height: 40px; margin: 0 20px 0 0; }
/* .login-form .error-message { display: block; width: 80%; border: solid 1px #000; background: #ffaaaa; color: #000000; text-align: center; padding: 10px; margin: 0 auto 30px auto; font-size: 14px; line-height: 18px; } */
.error-message { display: block; width: 80%; border: solid 1px #000; background: #ffaaaa; color: #000000; text-align: center; padding: 10px; margin: 0 auto 30px auto; font-size: 14px; line-height: 18px; }
.info-message { display: block; width: 80%; border: solid 1px #000; background: #A7D37F; color: #000000; text-align: center; padding: 10px; margin: 0 auto 30px auto; font-size: 14px; line-height: 18px; }

/* Section Steps */
.section-steps { padding: 85px 0 79px; background: #bdc8d5; }
.section-steps h2 { padding-bottom: 36px; font-size: 36px; text-align: center; }
.section-steps p { padding: 0 15px; font-size: 20px; line-height: 28px; color: #323232; margin: 0; }
.section-steps .steps { margin: 70px -30px 0; text-align: center; letter-spacing: -3px; }

.icon-plan,
.icon-quote,
.icon-order,
.icon-track,
.icon-invoice,
.icon-follow { display: inline-block; vertical-align: middle; }

.icon-plan { width: 194px; height: 170px; background: url(/images/icon-plan.jpg) no-repeat; }
.icon-quote { width: 203px; height: 170px; background: url(/images/icon-quote.jpg) no-repeat; }
.icon-order { width: 212px; height: 170px; background: url(/images/icon-order.jpg) no-repeat; }
.icon-track { width: 190px; height: 170px; background: url(/images/icon-track.jpg) no-repeat; }
.icon-invoice { width: 203px; height: 170px; background: url(/images/icon-invoice.jpg) no-repeat; }
.icon-follow { width: 200px; height: 170px; background: url(/images/icon-follow.jpg) no-repeat; }

.faq-title { padding: 15px; color: #5c738f; font-weight: bold; font-style: italic; }


/* Media CSS */

@media (min-width: 1200px) {
	.container { width: 1175px; }
}

@media (max-width: 1200px) {

	.videos-wp .col { width: 300px; }
	.videos-wp .col .video-box { width: 300px; }
	.contact-wp .field-wp { width: 460px; }
	.contact-wp .field-wp input.field { width: 458px; }

	.section-steps .steps { margin: 70px 0 0; padding: 0 100px; text-align: center; }
	.icon-plan,
	.icon-quote,
	.icon-order,
	.icon-track,
	.icon-invoice,
	.icon-follow { margin-top: 15px; }

	.footer .col { width: 160px; }
	.footer .col-long { width: 285px; }

}

@media (min-width: 1px) and (max-width: 992px) {

	.quotes-wp .quote-text { top: 10px; }
	.quotes-wp .quote-text p { padding: 0 0 20px 0; font-size: 18px; line-height: 24px; }
	.quotes-wp .quote-text p a { font-size: 22px; }

	.contact-wp .field-wp { width: 100%; }
	.contact-wp .field-wp input.field { width: 100%; }

	.quotes-slider .slides li .quote-box { top: 0; width: 200px; }
	.quotes-slider .slides li .quote-box p { font-size: 14px; line-height: 20px; text-indent: 20px; background-size: 16px 14px; }

	.main-container { min-height: 20px; }
	.main-container .main-title h2 { font-size: 26px; }

	.section-steps .steps { margin: 70px 0 0; }
	.icon-plan,
	.icon-quote,
	.icon-order,
	.icon-track,
	.icon-invoice,
	.icon-follow { margin-top: 15px; }

	.footer .col { float:none; display: block; margin: 0 auto; width: 285px; }
	.footer .col-long { margin: 0 auto; display: block; float:none; padding-top: 20px; }
}

@media (min-width: 1px) and (max-width: 768px) {
	.section-steps .steps { margin: 70px 0 0; padding: 0 60px; }
}

@media (min-width: 1px) and (max-width: 768px) {

	.header { padding-left: 10px; padding-right: 10px; }

	h1#logo { margin-bottom: 20px; margin-top: 10px; }
	.navigation { float:none; display: block; height: 30px; }
	.navigation ul li { font-size: 12px; line-height: 30px; height: 30px; padding: 0 3px; }
	.navigation ul li a { padding: 0 8px; }

	.quotes-slider .slides li .quote-box { top: 0; width: 150px; padding: 5px 5px 5px 10px; }
	.quotes-slider .slides li .quote-box p { font-size: 12px; line-height: 18px; text-indent: 20px; background-size: 16px 14px; }

	.login-form input.login-btn,
	.login-form a.btn { padding: 0 10px; height: 36px; font-size: 14px; line-height: 36px; margin: 0 10px 0 0; }
}

@media (min-width: 1px) and (max-width: 640px) {
	.quotes-wp .quote-text a.demo-btn { width: 200px; height: 31px; background-size: 200px 31px; font-size: 16px; line-height: 31px; padding: 0 0 0 20px; }
}

@media (min-width: 1px) and (max-width: 480px) {
	h1#logo { width: 300px; height: 58px; }
	h1#logo a { height: 58px; background-size: 300px 58px; }

	.quotes-wp .quote-text { top: 15px; width: 45%; }
	.quotes-wp .quote-text p { padding: 0 0 20px 0; font-size: 12px; line-height: 16px; }
	.quotes-wp .quote-text p a { font-size: 14px; }

	.quotes-wp .quote-text a.demo-btn { width: 130px; height: 20px; background-size: 130px 20px; font-size: 12px; line-height: 20px; padding: 0 0 0 10px; }
	.quotes-slider .slides li { padding-top: 100px; }

	.main-container .main-title { padding: 0 0 0 10px; }
	.main-container .main-title h2 { font-size: 16px; }
	.main-container .main-title h2 .text { height: 46px; display: inline-block; }

	.login-form input.login-btn,
	.login-form a.btn { padding: 0 10px; height: 30px; font-size: 11px; line-height: 30px; margin: 0 5px 0 0; }
}