/*======================================
=           General Styles            =
======================================*/
body {
	font-family      : 'Poppins', sans-serif;
	background-color : white;
	margin           : auto;
	font-size        : 18px;
	font-weight      : 300;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing : -0.5px;
}

h1, h2, h5 {
	font-family : 'Lora', serif;
	color       : #125B7F;
}

h1 {
	font-size   : 35px;
	font-weight : 600;
}

h2 {
	font-size   : 28px;
	font-weight : 600;
}

h3 {
	font-size : 22px
}

h4 {
	font-size   : 24px;
	font-weight : 400;
}

h5 {
	font-size   : 16px;
	font-weight : 700;
}

@media (min-width : 768px) {
	h1 {
		font-size : 38px;
	}

	h2 {
		font-size   : 50px;
		font-weight : 600;
	}
}

a:link {
	text-decoration : none;
}

hr {
	clear : both;
}

.img-bdr {
	border     : 10px solid #FFF;
	box-shadow : 0 0 1px #555;
}

.btn-primary {
	background-color : #F27935 !important;
	border-color     : #F27935 !important;
	border-radius    : 6px;
	padding          : 15px 30px;
}

#personal.headline {
	color : #105B7F;
}

#personal.headline h1 {
	font-size     : 35px;
	margin-bottom : 20px;
}

@media (min-width : 768px) {
	#personal.headline h1 {
		font-size     : 31px;
		margin-bottom : 20px;
	}
}

@media (max-width : 500px) {
	#personal h4 {
		font-size : 5vw;
	}

	#personal .subtext p {
		font-size : 4.5vw;
	}
}

.focus-form {
	cursor : pointer;
}

.bounce {
	-moz-animation    : bounce 2s infinite;
	-webkit-animation : bounce 2s infinite;
	animation         : bounce 2s infinite;
}

@keyframes bounce {
	0%, 25%, 50%, 75%, 100% {
		transform : translateY(0);
	}
	40% {
		transform : translateY(-10px);
	}
	60% {
		transform : translateY(-6px);
	}
}

.divider-icon::before,
.divider-icon::after {
	width        : 35%;
	height       : 1px;
	border-top   : 1px solid #CCC;
	display      : inline-block;
	content      : '';
	padding-top  : 0.5em;
	margin-left  : 20px;
	margin-right : 20px;
}

.center-mid {
	margin    : 0;
	position  : absolute;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%, -50%);
}

.header-bar {
	color      : #125B7F;
	background : repeating-linear-gradient(-45deg, #F6F6F6, #F6F6F6 10px, #FFF 10px, #FFF 20px);
	padding    : 5px;
	border-top : 10px solid #3F51B5;
}

.titlebar {
	color         : #125B7F;
	background    : repeating-linear-gradient(-45deg, #F6F6F6, #F6F6F6 10px, #FFF 10px, #FFF 20px);
	padding       : 5px;
	border-top    : 10px solid #3F51B5;
	margin-bottom : 10px;
}

/*======================================
=                Steps                =
======================================*/

.step > .steps ul {
	display : none;
}

/* Error */
label.error {
	color       : #A94442;
	font-size   : 14px;
	font-weight : 100;
}

.step > .content > .title,
.tabcontrol > .content > .title {
	display : none;
}

.no-actions .actions {
	visibility : hidden;
}

.actions.prev-action ul li:nth-of-type(2) {
	visibility : hidden;
}

.btn.btn-next {
	background   : #F27935;
	color        : #FFF;
	border-color : transparent;
	font-weight  : 500;
	width        : 60%;
	float        : right;
}

.btn.btn-next svg {
	margin-right : 20px;
	margin-top   : 2px;
}

.btn-lg {
	padding : 15px;
}

.btn i {
	margin-left : 15px;
}

/*======================================
=         Tooltip with Sarah          =
======================================*/

.tooltip-wrapper {
	position   : relative;
	text-align : left;
	clear      : left;
	padding    : 5px 0;
}

.tooltip-message p {
	font-size   : 13px;
	line-height : 1.6;
	color       : rgba(0, 0, 0, 0.65);
}

img.worker {
	position : absolute;
	left     : 0;
	width    : 55px;
	height   : 55px;
}

.tooltip-message {
	display          : inline-block;
	border-radius    : 6px;
	background-color : #F7F7F7;
	margin-left      : 68px;
	padding          : 15px;
}

.img-circle {
	border-radius : 50%;
}

@media (max-width : 768px) {
	.tooltip-message {
		margin-left : 62px;
	}
}

@media (min-width : 768px) {
	.tooltip-wrapper {
		padding : 15px 0;
	}

}


/*======================================
=            Form Holder             =
======================================*/

.form-holder {
	margin  : 0px auto;
	padding : 5px;
}

label {
	font-weight    : 400;
	letter-spacing : -0.5px;
}

.form-holder h3 {
	font-size     : 24px;
	margin-bottom : 20px;
}

.form-holder h3.current {
	display : block;
}

.radio {
	margin-bottom : 25px;
}

.form-step .radio label {
	height      : 50px;
	display     : block;
	padding     : 21px;
	text-align  : center;
	cursor      : pointer;
	font-size   : 23px;
	line-height : 0px;
}

.form-step .radio label input {
	visibility : hidden;
}

#tcpa-disc {
	font-size     : 12px;
	max-width     : 470px;
	margin        : 30px auto;
	padding-right : 20px;
}


select.input-lg {
	height : 60px;
}

.input-lg {
	height: 60px;
}

.dollar-prefix {
	position : relative;
}

#personal .dollar-prefix:before {
	content      : '$';
	position     : absolute;
	top          : 4px;
	left         : 1px;
	z-index      : 1;
	color        : inherit;
	font-weight  : 500;
	background   : white;
	padding      : 15px;
	border-right : 1px solid #125B7F;
}


.dollar-prefix:before {
	content      : '$';
	position     : absolute;
	top          : 4px;
	left         : 1px;
	z-index      : 1;
	color        : inherit;
	font-weight  : 500;
	padding      : 15px;
	border-right : 1px solid #125B7F;
}

.input-dollar {
	padding-left : 55px;
	border-color : transparent;
	box-shadow   : none;
}

#personal .input-dollar {
	background : white !important;
}

input[type="radio"]:checked ~ .fa-chevron-right {
	color : white;
}

input[type="radio"] ~ span.label-bg {
	padding       : 30px 16px;
	position      : absolute;
	left          : 0;
	top           : 0;
	right         : 0;
	bottom        : 0;
	background    : #F6F6F6;
	border-radius : 5px;
	border        : 1px solid #CCC;
	font-size     : 20px;
	color         : #125B7F;
	font-weight   : 500;
}

input[type="radio"]:checked ~ span.label-bg {
	background : #F27935;
	color      : white;
}

input[type="radio"]:checked ~ .fas {
	z-index : 400;
}

input[type="radio"]:checked ~ .fa-chevron-right {
	color : white;
}

.fa-chevron-right {
	right     : 10px;
	font-size : 14px;
	height    : 22px;
	position  : absolute;
	z-index   : 500;
}

p.opt-in {
	font-size  : 12px;
	margin     : 10px 0;
	color      : #777;
	text-align : justify;
}

.form-control {
	border-radius    : 0;
	background-color : #F5F5F5;
}

p.phone-disc {
	font-size  : 11px;
	margin-top : 10px;
	color      : #777;
	text-align : justify;
}

.example-img {
	margin-bottom : 20px;
	width         : 100%;
}

p.confirmation-text {
	font-size  : 12px;
	text-align : justify;
}

/*======================================
=               DIVIDERS               =
======================================*/

.divider {
	border-bottom    : 1px solid #FFF;
	background-color : #E2E2E2;
	height           : 4px;
	margin           : 0.5em 0px 1.5em;
}

.divider span {
	display          : block;
	width            : 150px;
	height           : 6px;
	background-color : #F26622;
}

.divider span.small {
	display          : block;
	width            : 100px;
	height           : 6px;
	background-color : #F26622;
	margin           : 20px auto;
}


/*======================================
=          Navigation Top Bar         =
======================================*/

.navbar {
	border-radius : 0px;
	margin        : 0px;
	font-size     : 16px;
}

.navbar-default {
	background-color : transparent;
	border-color     : transparent;
}

#slide-nav {
	display     : none;
	width       : 1600px;
	margin      : auto;
	border-top  : 0;
	padding-top : 20px;
}

#slide-nav.in {
	transition : .33s all ease;
}

#slide-nav img {
	width     : 40px;
	transform : translateX(120px);
}

#slide-nav.in img {
	transition : .33s all ease;
	width      : 55px;
	transform  : translateX(140px);
}

@media (min-width : 1600px) {
	#slide-nav {
		width       : 209px;
		display     : block;
		margin-left : 30px;
	}
}

.mainLogo {
	max-width : 100%;
}

@media (min-width : 768px) {
	.mainLogo {
		max-width : 275px;
	}
}

.navbar-collapse {
	text-align : center;
}

.dropdown-menu {
	text-align : center;
}

.navbar-toggle {
	margin-top : 25px;
}

@media (min-width : 768px) {
	.mainLogo {
		margin : 0 auto;
	}

	.navbar-right {
		margin-top : 25px;
	}

	.navbar-collapse {
		text-align : left;
	}

	.dropdown-menu {
		text-align : left;
	}
}

.navbar-brand {
	height : auto;
}

.dropdown-menu > li > a {
	padding : 10px 20px;
}

/*======================================
=            Main Hero            =
======================================*/

.hero {
	background-image : none;
	background-color : #CDEAEE;
}

.hero header {
	border-top : 10px solid #09344D
}

@media (min-width : 768px) {
	.hero {
		background-image    : url("../img/mainbg2.jpg");
		background-position : top center;
		background-repeat   : no-repeat;
		background-size     : cover;
		background-color    : #CDEAEE;
		overflow            : hidden;
		min-height          : 600px;
	}
}


.hero-alt {
	border-bottom : 1px solid #CCC;
}

.loanAmount {
	margin-top : 25px;
	max-width  : 450px;
}

.mainForm {
	text-align : center;
	margin-top : 25px;
	max-width  : 450px;
	margin     : 25px auto 0 auto;
}

.icon-wrapper img {
	width      : 60px;
	height     : 60px;
	margin-top : 20px;
}

.mainHero {
	padding : 0 0 60px 0;
}

@media (min-width : 768px) {
	.mainHero {
		margin   : 0px;
		position : relative;
		padding  : 30px 0 60px;
	}
}

.mainHero .subtext p {
	position     : relative;
	padding-left : 25px;
}

.mainHero .subtext p .fa-check {
	position : absolute;
	left     : 2px;
	top      : 3px;
	color    : #165A7E;
}

.mainHero .loanAmount h4,
.mainHero .subtext h4 {
	font-weight : 100;
}

p.help-block {
	font-size : 12px;
}

.amtbtn {
	min-width : 225px;
}

.mainHero .amtbtn .fa-angle-right {
	vertical-align : middle;
}

.mainHero h6 {
	text-transform : uppercase;
	letter-spacing : 3px;
}

@media (max-width : 992px) {
	.mainHero {
		background-image : none;
		background-color : #white;
	}
}

.progress {
	background-color : #CCC;
}

.progress-wrapper span {
	color       : #09344D;
	font-weight : 500;
}

.progress.header {
	border-radius : 0;
	height        : 10px;
	margin-bottom : 0;
}

.progress.header .progress-bar {
	background-color : #09344D;
}


.mainForm .progress {
	height        : 10px;
	margin-bottom : 0;
	border-radius : 20px;
	float         : left;
	width         : 85%;
	margin-top    : 5px;
	box-shadow    : none;
}

.progress-bar {
	background-color : #09344D;
}

/*======================================
=              Headlines               =
======================================*/

.hero-logo {
	max-width : 375px;
	margin    : 0 auto;
}

.headline {
	/*max-width : 1024px;*/
}

.headline-active {
	display : block;
}

.headline-inactive {
	display : none;
}

.headline button {
	margin-top : 30px;
}

.headline .fa-handshake {
	font-size : 65px;
}

.hero-arrow {
	font-size  : 50px;
	margin-top : 25px;
	color      : #F26622;
}


.animate-right {
	position  : relative;
	animation : animateright 1s;
}

@keyframes animateright {
	0% {
		right   : 50px;
		opacity : 0;
	}
	100% {
		right   : 0;
		opacity : 1;
	}
}

.animate-left {
	position  : relative;
	animation : animateleft 1s;
}

@keyframes animateleft {
	0% {
		left    : 50px;
		opacity : 0;
	}
	100% {
		left    : 0;
		opacity : 1;
	}
}

.animate-btm {
	position  : relative;
	animation : animatebtm 1s;
}

@keyframes animatebtm {
	0% {
		bottom  : -50px;
		opacity : 0;
	}
	100% {
		bottom  : 0;
		opacity : 1;
	}
}


/*======================================
=            Main Body            =
======================================*/

.mainWrapper {
	max-width : 1600px;
	margin    : 0 auto;
	padding   : 0 20px;
}

/*======================================
=              Logo Section           =
======================================*/

.logo-section {
	background-color : #165A7E;
	color            : white;
	padding          : 15px 0;
}

.logo-section img {
	margin : 0 5px;
	width  : 100px;
}

@media (min-width : 768px) {

	.logo-section img {
		margin : 0 15px;
		width  : 120px;
	}
}

.brightness {
	filter : brightness(0) invert(1);
}


/*======================================
=              Section 1            =
======================================*/

.section1 {
	padding       : 35px 0px;
	margin-bottom : 25px;
}

.section1 .img-responsive {
	margin : auto;
}

.section1 .mobile-headline-wrap h1 {
	font-size : 25px;
}

.section1 .mobile-headline-wrap {
	max-height : 176px;
	padding    : 26px 25px;
}

.section1 h3 {
	margin-top : 0;
}

@media (min-width : 768px) {
	.section1 {
		padding       : 80px 0 20px 0;
		margin-bottom : 25px;
	}
}

/*======================================
=              Partners           =
======================================*/

.partners {
	margin-bottom : 20px;
	padding       : 50px 0px;
}

.partner-icon {
	opacity        : 0.3;
	transition     : ease-in-out .35s;
	-webkit-filter : grayscale(100%);
	-moz-filter    : grayscale(100%);
	-o-filter      : grayscale(100%);
	-ms-filter     : grayscale(100%);
	filter         : grayscale(100%);
}

.partner-icon:hover {
	opacity        : 1;
	transition     : ease-in-out .35s;
	-webkit-filter : grayscale(0%);
	-moz-filter    : grayscale(0%);
	-o-filter      : grayscale(0%);
	-ms-filter     : grayscale(0%);
	filter         : grayscale(0%);
}

.trusted {
	margin : 50px 0px;
}

.partner-logo {
	max-width : 90px;
	margin    : 15px auto 0;
}

@media (min-width : 768px) {
	.partner-logo {
		max-width : 160px;
		margin    : 0 auto;
	}
}

.partners .table {
	margin-bottom : 0;
	background    : white;
}

.partners .table-headline {
	padding       : 15px;
	border-radius : 5px 5px 0 0;
	background    : white;
	border        : 1px solid #DDD;
	border-bottom : 0;
}

.partners .table-headline p {
	margin : 0;
}

.partners .table-headline h2 {
	margin-top : 0;
}

.partners .table > thead > tr > th {
	border-bottom : none;
}

.partners .table > tbody > tr > td {
	padding    : 5px 5px;
	text-align : center;
}

.partners .table > tbody > tr > td h6 {
	text-transform : uppercase;
	letter-spacing : 0;
	font-size      : 2vw
}

.partners .table > tbody > tr > td h5 {
	font-size : 3vw
}

@media (min-width : 768px) {
	.partners .table > tbody > tr > td {
		padding    : 20px 8px;
		text-align : center;

	}

	.partners .table > tbody > tr > td h6 {
		font-size : 12px;
	}

	.partners .table > tbody > tr > td h5 {
		font-size : 16px;
	}
}


.partners .table > thead > tr > th {
	text-align  : center;
	color       : white;
	font-weight : 100 !important;
	font-size   : 12px;
}

.partners .table > thead > tr {
	background : #165A7D;
}

.partners .table-footer {
	color      : white;
	background : #165A7D;
	padding    : 10px 20px;
}


.partners .table-footer p {
	font-size : 18px;
}

.partners .table-footer button.btn {
	background : #09344D;
}

.bestoffer {
	background : #DFF0D8 !important;
}

@media (max-width : 768px) {
	.partners .table > thead > tr > th {
		font-size : 14px;
	}
}

/*======================================
=            Section 2  Calc          =
======================================*/

.section2 {
	padding : 30px 0 45px 0;
}

.section2 .panel-headline {
	color         : #777;
	border-bottom : 10px solid #145A7D;
}

.section2 .panel-headline h2 {
	color : #145A7D;
}

.section2 .panel {
	background : white;
}

@media (max-width : 992px) {
	.section2 .panel {
		background : white;
	}

	.section2 .panel-headline {
		padding       : 15px;
		color         : #165A7C;
		border-bottom : 1px solid #DDD;
	}

	.section2 .panel-headline h2 {
		color : #165A7C;
	}
}


.section2 .panel-body {
	background-image : none;
	padding          : 0px;
	text-align       : left;
}

@media (min-width : 992px) {

	.section2 .panel-body {
		background-image    : url("../img/bgd-calc.jpg");
		background-position : left;
		background-repeat   : no-repeat;
		background-size     : cover;
		padding             : 30px;
		text-align          : left;
	}
}

.calculator label {
	color       : black;
	font-size   : 12px;
	font-weight : 600;
	white-space : nowrap;
}

.calculator small {
	font-size   : 12px;
	line-height : 12px !important;
}

.calculator .form-group small {
	white-space : nowrap;
}

.calculator .title {
	margin-bottom : 15px;
}

.calculator .title h3 {
	margin-bottom : 0;
}

/*======================================
=       Section 3 Financial Needs      =
======================================*/

.section3 {
	padding    : 30px 0 45px 0;
	background : whitesmoke;
}

.section3 .section3-headline {
	position : relative;
	margin   : auto;
}

.section3 .well {
	background : #165A7C;
	margin-top : 30px;
}

.section3 .well h2 {
	color : white;
}

.section3 .thumb {
	margin-bottom : 10px;
	background    : white;
	box-shadow    : 0 0 10px 0px rgba(0, 0, 0, 0.09);
	border-radius : 5px;
	overflow      : hidden;
	cursor        : pointer;
	transform     : translateY(0px);
	transition    : all .33s ease;
}

.thumb-wrapper .row .col-xs-6.col-sm-4:nth-child(odd) {
	transform : translateY(10px) translateX(10px);
}

.thumb-wrapper .row .col-xs-6.col-sm-4:nth-child(even) {
	transform : translateY(-10px) translateX(-10px);
}

.section3-footer {
	transform : translateY(10px);
}

@media (min-width : 768px) {
	.section3 .thumb {
		margin-bottom : 30px;
	}

	.thumb-wrapper .row .col-xs-6.col-sm-4:nth-child(odd) {
		transform : translateY(0px);
	}

	.thumb-wrapper .row .col-xs-6.col-sm-4:nth-child(even) {
		transform : translateY(0px);
	}

	.section3-footer {
		transform : translateY(0px);
	}
}


.section3 .thumb .thumb-body img {
	transition : all .33s ease;
	transform  : translateY(5px) scale(.90);
}

.section3 .thumb:hover {
	transform  : translateY(-10px);
	transition : all .33s ease;
	box-shadow : 0 10px 10px 0px rgba(0, 0, 0, 0.09);
}

.section3 .thumb:hover .thumb-body img {
	transition : all .33s ease;
	transform  : translateY(0) scale(1);
}

.section3 .thumb .thumb-footer {
	font-size   : 2.6vw;
	padding     : 15px 20px;
	text-align  : left;
	transition  : all .33s ease;
	white-space : nowrap;
}

@media (min-width : 500px) {
	.section3 .thumb .thumb-footer {
		font-size : 14px;
	}
}

/*======================================
=              Section 4  FAQS         =
======================================*/

.section4 {
	padding : 30px 0 45px 0;
}

.section4 .faq-title h1 {
	font-size  : 12vw;
	margin-top : 0px;
	color      : #DADADA;
}

@media (min-width : 768px) {
	.section4 .faq-title h1 {
		font-size  : 55px;
		margin-top : 80px;
	}
}

.section4 .faq-title img {
	width    : 180px;
	position : absolute;
	right    : 50px;
	top      : 150px;
	opacity  : 0.2;
}

@media (min-width : 1200px) {
	.section4 .faq-title img {
		right : 152px;
	}
}

.section4 .panel-body {
	padding : 30px;
}

.section4 .media-heading {
	font-family : Poppins;
	font-weight : normal
}

.section4 h2 {
	margin-top : 0;
}

#accordion .panel {
	border        : none;
	box-shadow    : none;
	border-radius : 0;
	margin-bottom : 0;
}

#accordion .panel-heading {
	padding       : 0;
	border        : none;
	border-radius : 0;
}

#accordion .panel-title a {
	display       : block;
	padding       : 14px 45px 14px 21px;
	background    : #FFF;
	font-size     : 16px;
	color         : #165A7E;
	border-bottom : 1px solid #165A7E;
	position      : relative;
	transition    : all 0.5s ease 0s;
}

#accordion .panel-title a.collapsed {
	border-bottom : 1px solid #DADADA;
}

#accordion .panel-title a.collapsed:hover {
	border-bottom : 1px solid #39A7EF;
	color         : #39A7EF;
}

#accordion .panel-title a:before,
#accordion .panel-title a.collapsed:before {
	content     : "-" !important;
	font-weight : 900;
	font-size   : 16px;
	width       : 35px;
	height      : 35px;
	line-height : 35px;
	background  : #165A7E;
	position    : absolute;
	top         : 10px;
	right       : 0;
	font-size   : 16px;
	color       : #FFF;
	text-align  : center;
	transition  : all 0.5s ease 0s;
}

#accordion .panel-title a.collapsed:before {
	content    : "+" !important;
	background : #DADADA;
}

#accordion .panel-title a.collapsed:hover:before {
	background : #39A7EF;
}

#accordion .panel-body {
	font-size   : 16px;
	color       : #888;
	line-height : 25px;
	padding     : 10px 20px;
	position    : relative;
	border      : none;
	transition  : all 0.5s ease 0s;
}

/*======================================
=            Main Footer            =
======================================*/

footer {
	padding    : 30px 0px 30px 0px;
	font-size  : 14px;
	background : #165A7E;
	color      : #5F8CA4;
}

footer section.footer-upper-deck p {
	color : #92B2C3;
}

footer .ola img {
	width         : 55px;
}

footer .footer-break .ola img {

}

footer .footer-break p {
	white-space : nowrap;
}

footer .footer-break {
	margin-top : 25px;
}

footer .footer-break p {
	margin-top : -5px;
	font-size  : 12px;
}

.footerLogo {
	max-width      : 150px;
	-webkit-filter : brightness(0) invert(1);
	filter         : brightness(0) invert(1);
}

.footerSubnav {
	padding-bottom : 20px;
	margin-bottom  : 20px;
	border-bottom  : 1px solid #6C78B8;
}

footer hr {
	border-color : #5F8CA4;
}

footer a:visited,
footer a:link {
	color       : #91B2C3;
	font-weight : 100;
}

footer a:visited:hover,
footer a:link:hover {
	color : whitesmoke;
}

.footerSubnav p {
	font-size : 14px;
}

.secure-copy {
	margin-top    : 25px;
	margin-bottom : 30px;
}

.social-icons {
	text-align : right;
	padding    : 0px;
}

.social-icons li {
	display             : inline-block;
	list-style-type     : none;
	-webkit-user-select : none;
	font-size           : 20px;
}

.social-icons li a {
	border      : 0;
	margin-left : 20px;
	color       : white;
}

.footerLogo {
	float   : none;
	opacity : .4;
}

@media (max-width : 768px) {

	.social-icons {
		text-align : center;
	}

	.footerLogo {
		float : none;
	}
}

@-webkit-keyframes step-animation {
	0% {
		-webkit-transform : translatex(-200px);
		transform : translatex(-200px);
		opacity   : .45;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
	}
	100% {
		-webkit-transform : translatex(0px);
		transform : translatex(0px);
		opacity   : 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
}

@keyframes step-animation {
	0% {
		-webkit-transform : translatex(-200px);
		transform : translatex(-200px);
		opacity   : .45;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
	}
	100% {
		-webkit-transform : translatex(0px);
		transform : translatex(0px);
		opacity   : 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
}

.form-step.body.current {
	-webkit-animation : step-animation .65s forwards; /* Safari 4+ */
	-moz-animation    : step-animation .65s forwards; /* Fx 5+ */
	-o-animation      : step-animation .65s forwards; /* Opera 12+ */
	animation         : step-animation .65s forwards; /* IE 10+, Fx 29+ */
}

/*======================================
=             Modal Windows            =
======================================*/

.modal-box {
	font-family : 'Ubuntu', sans-serif;
	font-size   : 12px;
}

.modal-box .show-modal {
	color            : #FFF;
	background-color : #165A7E;
	font-size        : 18px;
	font-weight      : 600;
	text-transform   : capitalize;
	padding          : 10px 15px;
	margin           : 80px auto 0;
	border           : none;
	box-shadow       : -5px 5px 1px rgba(0, 0, 0, 0.3);
	display          : block;
}

.modal-box .show-modal:hover {
	color  : #FFF;
	border : none;
}

.modal-box .modal-dialog .modal-content .modal-header {
	background-color : #165A7E;
	color            : rgb(149, 183, 205);
	padding          : 5px 10px;
	text-transform   : uppercase;
}

.modal-box .modal-dialog .modal-content {
	text-align    : left;
	border-radius : 0px;
	border        : none;
	overflow      : hidden;
	position      : relative;
}

.modal-box .modal-dialog .modal-content:before {
	width    : 100%;
	height   : 130px;
	position : absolute;
	top      : 0;
	left     : 0;
}

.modal-box .modal-dialog .modal-content .close {
	color            : #165A7E;
	background-color : #FFF;
	font-size        : 32px;
	line-height      : 35px;
	height           : 35px;
	width            : 35px;
	box-shadow       : -5px 5px 1px rgba(0, 0, 0, 0.1);
	opacity          : 1;
	position         : absolute;
	left             : auto;
	right            : -3px;
	top              : 0;
	z-index          : 1;
	transition       : all 0.3s;
}

.modal-box .modal-dialog .modal-content .close span {
	margin  : -7px 0 0 0;
	display : block;
}

.modal-box .modal-dialog .modal-content .close:hover {
	color            : #FFF;
	background-color : #333;
}

.modal-box .modal-dialog .modal-content .modal-body {
	padding : 25px 20px 30px !important;
}

.modal-box .modal-dialog .modal-content .modal-body .icon {
	color         : #F26622;
	background    : #FFF;
	font-size     : 50px;
	line-height   : 100px;
	height        : 100px;
	width         : 100px;
	margin        : 0 auto 20px;
	border-radius : 50px;
	box-shadow    : 0 0 10px rgba(0, 0, 0, 0.2);
	position      : relative;
}

.modal-box .modal-dialog .modal-content .modal-body .icon:before {
	content       : "";
	width         : 130px;
	height        : 130px;
	border        : 2px solid #FFF;
	border-radius : 100px;
	opacity       : 0.2;
	transform     : translateX(-50%) translateY(-50%);
	position      : absolute;
	top           : 50%;
	left          : 50%;
}

.modal-box .modal-dialog .modal-content .modal-body .title {
	color          : #444;
	font-size      : 30px;
	font-weight    : 500;
	text-transform : capitalize;
	letter-spacing : 1px;
	margin         : 0 0 20px 0;
}

.modal-box .modal-dialog .modal-content .modal-body .description {
	color      : #444;
	font-size  : 16px;
	margin     : 0 0 25px;
	text-align : justify;
}

.modal-box .modal-dialog .modal-content .modal-body .subscribe {
	color          : #FFF;
	background     : #333;
	font-size      : 18px;
	font-weight    : 500;
	text-transform : capitalize;
	letter-spacing : 2px;
	padding        : 8px 30px;
	margin         : 0 auto 20px;
	border         : none;
	border-radius  : 50px;
	display        : block;
	overflow       : hidden;
	position       : relative;
	z-index        : 1;
	transition     : all 0.5s ease 0s;
}

.modal-box .modal-dialog .modal-content .modal-body .subscribe:hover {
	box-shadow : -5px 5px 1px rgba(0, 0, 0, 0.2);
}

.modal-box .modal-dialog .modal-content .modal-body .subscribe:before,
.modal-box .modal-dialog .modal-content .modal-body .subscribe:after {
	content       : "";
	background    : #3F51B5;
	width         : 100%;
	height        : 100%;
	border-radius : 0;
	transform     : skew(-45deg) scaleX(0);
	position      : absolute;
	top           : 0;
	right         : 70%;
	z-index       : -1;
	transition    : transform 0.3s ease-in-out 0s;
}

.modal-box .modal-dialog .modal-content .modal-body .subscribe:after {
	right : auto;
	left  : 70%;
}

.modal-box .modal-dialog .modal-content .modal-body .subscribe:hover:before,
.modal-box .modal-dialog .modal-content .modal-body .subscribe:hover:after {
	transform : skew(-45deg) scaleX(1.5);
}

.modal-box .modal-dialog .modal-content .modal-body .skip {
	color            : #949494;
	background-color : transparent;
	font-size        : 16px;
	font-weight      : 500;
	text-transform   : capitalize;
	border           : none;
}

.modal-box .modal-dialog .modal-content .modal-body .skip:hover {
	text-decoration : underline;
}

@media only screen and (max-width : 576px) {
	.modal-dialog {
		width : 93% !important;
	}
}