/*
Theme Name: Dcom Theme
Author: Debt.com
Description: Child Theme of Voice created for Debt.com Microsite
Template: voice
Version:1.3
Text Domain: dcom-theme
*/


/**** Remove boxshadow from all buttons ****/
button,
input[type=button],
a.btn {
	box-shadow: none;
}

.rounded-circle {
    border-radius: 50%!important;
}

button:hover,
input[type=button]:hover,
a.btn:hover,
button:focus,
input[type=button]:focus,
a.btn:focus,
button:active,
input[type=button]:active,
a.btn:active {
	box-shadow: none;
}

.btn,
button.btn,
input[type=button].btn,
input[type=reset].btn,
input[type=submit].btn,
a.btn {
  /*** GENERAL BUTTON STYLES ***/
	font-weight: 300;
	transition: all 250ms ease;
	padding: 0.6rem 1.1rem;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	white-space: normal;
	box-shadow: none !important;
	text-shadow: none !important;
	font-size: 1em;
	border: none;
  /*** PRIMARY BUTTON STYLES ***/;
}

.btn:hover,
button.btn:hover,
input[type=button].btn:hover,
input[type=reset].btn:hover,
input[type=submit].btn:hover,
a.btn:hover,
.btn:active,
button.btn:active,
input[type=button].btn:active,
input[type=reset].btn:active,
input[type=submit].btn:active,
a.btn:active,
.btn:focus,
button.btn:focus,
input[type=button].btn:focus,
input[type=reset].btn:focus,
input[type=submit].btn:focus,
a.btn:focus {
	box-shadow: none;
	outline: none;
}

.btn:not(:disabled):not(.disabled):active,
button.btn:not(:disabled):not(.disabled):active,
input[type=button].btn:not(:disabled):not(.disabled):active,
input[type=reset].btn:not(:disabled):not(.disabled):active,
input[type=submit].btn:not(:disabled):not(.disabled):active,
a.btn:not(:disabled):not(.disabled):active {
	box-shadow: none;
	-webkit-transform: translateY(3px);
	outline: none;
}

.btn.btn-primary,
button.btn.btn-primary,
input[type=button].btn.btn-primary,
input[type=reset].btn.btn-primary,
input[type=submit].btn.btn-primary,
a.btn.btn-primary {
	background-color: #416331;
	border: none;
	outline: none;
	color: white !important;
	font-weight: 400;
}

.btn.btn-primary:hover,
button.btn.btn-primary:hover,
input[type=button].btn.btn-primary:hover,
input[type=reset].btn.btn-primary:hover,
input[type=submit].btn.btn-primary:hover,
a.btn.btn-primary:hover,
.btn.btn-primary:active,
button.btn.btn-primary:active,
input[type=button].btn.btn-primary:active,
input[type=reset].btn.btn-primary:active,
input[type=submit].btn.btn-primary:active,
a.btn.btn-primary:active,
.btn.btn-primary:focus,
button.btn.btn-primary:focus,
input[type=button].btn.btn-primary:focus,
input[type=reset].btn.btn-primary:focus,
input[type=submit].btn.btn-primary:focus,
a.btn.btn-primary:focus {
	background-color: #578641;
	border: none;
	outline: none;
}

.btn.btn-primary:not(:disabled):not(.disabled):active,
button.btn.btn-primary:not(:disabled):not(.disabled):active,
input[type=button].btn.btn-primary:not(:disabled):not(.disabled):active,
input[type=reset].btn.btn-primary:not(:disabled):not(.disabled):active,
input[type=submit].btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn.btn-primary:not(:disabled):not(.disabled):active {
	background-color: #578641;
	box-shadow: none;
	outline: none;
}

.btn.btn-outline,
button.btn.btn-outline,
input[type=button].btn.btn-outline,
input[type=reset].btn.btn-outline,
input[type=submit].btn.btn-outline,
a.btn.btn-outline {
	border-color: #2a353d;
	color: #5a5a5a;
	border: 1px solid;
	font-weight: 400;
}

.btn.btn-outline:hover,
button.btn.btn-outline:hover,
input[type=button].btn.btn-outline:hover,
input[type=reset].btn.btn-outline:hover,
input[type=submit].btn.btn-outline:hover,
a.btn.btn-outline:hover,
.btn.btn-outline:active,
button.btn.btn-outline:active,
input[type=button].btn.btn-outline:active,
input[type=reset].btn.btn-outline:active,
input[type=submit].btn.btn-outline:active,
a.btn.btn-outline:active,
.btn.btn-outline:focus,
button.btn.btn-outline:focus,
input[type=button].btn.btn-outline:focus,
input[type=reset].btn.btn-outline:focus,
input[type=submit].btn.btn-outline:focus,
a.btn.btn-outline:focus {
	background-color: #2a353d;
	outline: none;
	color: white;
}

.btn.btn-outline:not(:disabled):not(.disabled):active,
button.btn.btn-outline:not(:disabled):not(.disabled):active,
input[type=button].btn.btn-outline:not(:disabled):not(.disabled):active,
input[type=reset].btn.btn-outline:not(:disabled):not(.disabled):active,
input[type=submit].btn.btn-outline:not(:disabled):not(.disabled):active,
a.btn.btn-outline:not(:disabled):not(.disabled):active {
	background-color: #2a353d;
	box-shadow: none;
	outline: none;
	color: white;
}

.btn.btn-outline.light,
button.btn.btn-outline.light,
input[type=button].btn.btn-outline.light,
input[type=reset].btn.btn-outline.light,
input[type=submit].btn.btn-outline.light,
a.btn.btn-outline.light {
	border-color: white;
	color: white;
}

.btn.btn-outline.light:hover,
button.btn.btn-outline.light:hover,
input[type=button].btn.btn-outline.light:hover,
input[type=reset].btn.btn-outline.light:hover,
input[type=submit].btn.btn-outline.light:hover,
a.btn.btn-outline.light:hover,
.btn.btn-outline.light:focus,
button.btn.btn-outline.light:focus,
input[type=button].btn.btn-outline.light:focus,
input[type=reset].btn.btn-outline.light:focus,
input[type=submit].btn.btn-outline.light:focus,
a.btn.btn-outline.light:focus,
.btn.btn-outline.light:active,
button.btn.btn-outline.light:active,
input[type=button].btn.btn-outline.light:active,
input[type=reset].btn.btn-outline.light:active,
input[type=submit].btn.btn-outline.light:active,
a.btn.btn-outline.light:active {
	background-color: white;
	color: #2a353d;
}

.btn.btn-outline.dark,
button.btn.btn-outline.dark,
input[type=button].btn.btn-outline.dark,
input[type=reset].btn.btn-outline.dark,
input[type=submit].btn.btn-outline.dark,
a.btn.btn-outline.dark {
	border-color: #2a353d;
	color: #2a353d;
}

.btn.btn-outline.dark:hover,
button.btn.btn-outline.dark:hover,
input[type=button].btn.btn-outline.dark:hover,
input[type=reset].btn.btn-outline.dark:hover,
input[type=submit].btn.btn-outline.dark:hover,
a.btn.btn-outline.dark:hover,
.btn.btn-outline.dark:focus,
button.btn.btn-outline.dark:focus,
input[type=button].btn.btn-outline.dark:focus,
input[type=reset].btn.btn-outline.dark:focus,
input[type=submit].btn.btn-outline.dark:focus,
a.btn.btn-outline.dark:focus,
.btn.btn-outline.dark:active,
button.btn.btn-outline.dark:active,
input[type=button].btn.btn-outline.dark:active,
input[type=reset].btn.btn-outline.dark:active,
input[type=submit].btn.btn-outline.dark:active,
a.btn.btn-outline.dark:active {
	background-color: #2a353d;
	color: white;
}

.btn.light,
button.btn.light,
input[type=button].btn.light,
input[type=reset].btn.light,
input[type=submit].btn.light,
a.btn.light {
	color: white;
	border-color: white;
}

.btn.light:hover,
button.btn.light:hover,
input[type=button].btn.light:hover,
input[type=reset].btn.light:hover,
input[type=submit].btn.light:hover,
a.btn.light:hover,
.btn.light:active,
button.btn.light:active,
input[type=button].btn.light:active,
input[type=reset].btn.light:active,
input[type=submit].btn.light:active,
a.btn.light:active,
.btn.light:focus,
button.btn.light:focus,
input[type=button].btn.light:focus,
input[type=reset].btn.light:focus,
input[type=submit].btn.light:focus,
a.btn.light:focus {
	background-color: white;
	outline: none;
	color: #5a5a5a;
	border-color: white;
}

.btn.light:not(:disabled):not(.disabled):active,
button.btn.light:not(:disabled):not(.disabled):active,
input[type=button].btn.light:not(:disabled):not(.disabled):active,
input[type=reset].btn.light:not(:disabled):not(.disabled):active,
input[type=submit].btn.light:not(:disabled):not(.disabled):active,
a.btn.light:not(:disabled):not(.disabled):active {
	background-color: white;
	box-shadow: none;
	outline: none;
	color: #5a5a5a;
	border-color: white;
}



.wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal {
    float: right;
    line-height: 70px;
}




.ftc-disclaimer {
	max-width:600px;
	margin:25px auto;
	font-size: 14px;
    background-color: #efefef;
}



/***********
	HEADER STYLES
	***************/


.vce-logo img {
    max-width: 170px !important;
}

.header-1-wrapper {
	height: 120px !important;
    padding-top: 13px !important;
	max-width:33%;
}

.header-1-wrapper .site-branding {
    top: 20px;
    left: 0px;
	float:left;
	width: 46%;
    text-align: left;
}

.header-1-wrapper .credibility-logos {
	float:left;
	max-width: 300px;
	padding-top: 15px;
}

.header-1-wrapper .credibility-logos img {
	max-width: 27%;
    margin-right: 15px;
}

.header-1-wrapper .credibility-logos img.trustpilot-logo {
	margin-right:0;
	max-width: 33%;
}

.header-phone {
	float: right;
    max-width: 33%;
    text-align: center;
    padding-top: 20px;
}

.header-phone h3 {
	font-size: 20px;
    font-weight: 100;
}

.header-phone h3 span {
    display: block;
    color: #0fc7be;
    font-weight: 700;
    font-size: 25px;
}

.homepage-hero {
	background: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), url(/wp-content/themes/voice-microsite-child/images/hero-bkg.png);
    background-size: cover;
	color:white;
	text-align:center;
	height: 400px;
    background-position: 50% 50%;
	padding-top: 40px;
}

.homepage-hero h1 {
	color: white;
    font-size: 48px;
    width: 80%;
    margin: 0 auto;
    font-weight: 100;
	margin-bottom: 15px;
}

.homepage-hero h2 {
	color:white;
	width: 80%;
    margin: 0 auto;
    font-weight: 100;
	font-size: 25px;
}



/***********
	HOMEPAGE STYLES
	***************/

.vicki-message-container {
	text-align:center;
	background-color:#f0f0f0;
	padding-bottom: 50px;
}	

.vicki-message-container .vicki-image {
	margin:0 auto;
	width: 225px;
	border:7px solid #f0f0f0;
	margin-top:-112px;
}


.vicki-message-container p {
	width: 80%;
    margin: 25px auto 0;
	font-size:18px;
}

.step-container {
	background-image:url(/wp-content/themes/voice-microsite-child/images/customer-service.png);
	background-position-y: 0;
	background-repeat: no-repeat;
	height: 600px;
	background-color: white;
	background-position: right;
}

.step-container .steps {
    width: 650px;
	padding-top: 8%;
}

.step-container .steps h3 {
	color: #0fc7be;
	margin-bottom: 20px;
}

.step-container .steps ul {
	list-style-type: none;
	margin:0;
}

.step-container .steps ul li {
	font-size:20px;
	margin-bottom: 30px;
}

.step-container .steps ul li span.circle-number {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: block;
	border:2px solid #0fc7be;
	text-align: center;
	line-height: 35px;
	float: left;
    margin-right: 15px;
}

.form-widget-container {
	background-color: #0fc7be;
	padding:50px 0;
}

.debt-solutions-container {
	text-align: center;
	padding:50px 0;
}

.debt-solutions-container h3 {
	color: #0fc7be;
}

.debt-solutions-container h5 {
	font-weight:100;
	margin-bottom: 50px;
}

.debt-solutions-container .debt-solution {
	float:left;
	width:50%;
	padding:0 25px;
	margin-bottom:25px;
}

.debt-solutions-container .debt-solution img {
	width:250px;
	height:250px;
	padding:7px;
	border:1px solid white;
	margin-bottom:20px;
}

.debt-solutions-container .debt-solution h4 {
	
}

.debt-solutions-container .debt-solution p {
	
}

.trustpilot-container {
	background-color:#edf7fc;
	text-align: center;
	padding: 50px 0;
}

.about-dcom-container {
	background: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), url(/wp-content/themes/voice-microsite-child/images/about-bkg.jpg);
    background-size: cover;
	color:white;
	text-align:center;
	padding:125px 0;
}

.about-dcom-container h3 {
	color:white;
	font-weight:100;
	margin-bottom:30px;
}

.about-dcom-container p {
	font-size:20px;
	margin-bottom:40px;
}

.about-dcom-container a.btn.btn-primary {
    padding: 15px 20px;
    font-size: 25px;
	background-color: #0fc7be;
}
.about-dcom-container a.btn.btn-primary:hover {
	text-decoration:none;
	background-color: #0bada5;
}



/****************
    FOOTER STYLES
    *****************/

footer #nav_menu-2, footer .widget {
    background: transparent !important;
    border:none !important;
    text-align: center;
}

footer #nav_menu-2 ul#menu-footer-menu {
    width:78%;
}

footer #nav_menu-2 ul#menu-footer-menu-es {
    width:53%;
}

footer #nav_menu-2 ul#menu-footer-menu li, footer #nav_menu-2 ul#menu-footer-menu-es li {
    width:auto !important;
    margin: 0 15px !important;
}

footer #nav_menu-2 ul#menu-footer-menu li, footer #nav_menu-2 ul#menu-footer-menu-es li {

    float: none;
    display: inline-block;
}

.vce-responsive-nav {
    color: #2a353d !important;
}



@media screen and (max-width: 1600px){
	.step-container {
		background-position-x: 110%;
	}

	.step-container .steps {
		width: 590px;
	}
}



@media screen and (max-width: 1300px){
	.step-container {
		background-position-x: 140%;
	}

	.step-container .steps {
		width: 520px;
	}

	.step-container .steps ul li {
		font-size: 18px;
	}
}


@media screen and (max-width: 1200px){
	.step-container {
		background-position-x: 155%;
		height: 540px;
	}

	.step-container .steps {
		width: 450px;
		padding-top: 7%;
	}

	.step-container .steps h3 {
		font-size: 29px;
	}

	.step-container .steps ul li {
		font-size: 17px;
	}

	.step-container .steps ul li span.circle-number {
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: block;
		border: 2px solid #0fc7be;
		text-align: center;
		line-height: 35px;
		float: left;
		margin-right: 15px;
		margin-bottom: 22px;
		clear: both;
	}
}


@media only screen and (max-width: 1023px){
	#header .header-1-wrapper {
		height: 80px !important;
	}

	.site-branding img {
		max-width: 300px !important;
		margin-left: 50px;
		max-height:100% !important;
	}
	
	.vce-responsive-nav {
		margin: 23px 0 9px !important;
	}

	.header-1-wrapper .credibility-logos {
		max-width: 290px;
	}

	.header-1-wrapper .credibility-logos img {
		max-width: 20%;
		margin-right: 10px;
	}

	.header-phone {
		max-width: 30%;
		padding-top: 15px;
	}

	.header-phone h3 {
		font-size: 18px;
	}

	.header-phone h3 span {
		font-size: 20px;
	}
}

@media screen and (max-width: 1000px){
	.step-container {
		height: auto;
		background-image: none !important;
		text-align: center;
	}

	.step-container .steps {
		width: 80%;
		padding: 50px 0;
		margin: 0 auto;
	}

	.step-container .steps h3 {
		font-size: 35px;
	}

	.step-container .steps ul li {
		font-size: 20px;
		margin-bottom:40px;
	}

	.step-container .steps ul li:last-of-type {
		margin-bottom:0px;
	}


	.step-container .steps ul li span.circle-number {
		float: none;
		margin: 0 auto 15px;
		clear:none;
	}

	.homepage-hero h1 {
		width: 95%;
	}
	.homepage-hero h2 {
		width: 95%;
	}
}


@media only screen and (max-width: 900px){
	.header-1-wrapper .credibility-logos {
		display:none;
	}
}



@media screen and (max-width: 750px){
	.debt-solutions-container .debt-solution {
		float:none;
		width:85%;
		margin:0 auto 60px;
	}

	.debt-solutions-container .debt-solution:last-of-type {
		margin-bottom:0;
	}

	.about-dcom-container {
		padding:75px 0;
	}

}


@media screen and (max-width: 670px){ 
	.homepage-hero {
		height: 350px;
	}

	.homepage-hero h1 {
		font-size: 36px;
		line-height: 43px;
	}
	.homepage-hero h2 {
		font-size: 23px;
	}

	.vicki-message-container .vicki-image {
		width: 200px;
		margin-top: -95px;
	}
	.vicki-message-container p {
		width: 90%;
		font-size: 16px;
		line-height: 24px;
	}

	.step-container .steps h3 {
		line-height: initial;
	}
	.step-container .steps ul li {
		line-height: 27px;
	}

	.about-dcom-container h3 {
		font-size: 30px;
	}

	.about-dcom-container p {
		font-size: 18px;
		margin-bottom: 60px;
		line-height: 28px;
	}

	.about-dcom-container a.btn.btn-primary {
		font-size: 21px;
	}
}



@media screen and (max-width: 567px){ 
	.homepage-hero {
		height: 315px;
	}

	.homepage-hero h1 {
		font-size: 32px;
    	line-height: 39px;
	}
	.homepage-hero h2 {
		font-size: 21px;
	}

	.vicki-message-container .vicki-image {
		width: 175px;
		margin-top: -80px;
	}
	.vicki-message-container p {
		width: 90%;
		font-size: 16px;
		line-height: 24px;
	}

	.step-container .steps {
		width: 90%;
	}

	.site-branding img {
		max-width: 275px !important;
	}

	.header-phone h3 {
		font-size: 16px;
		line-height: 20px;
	}
	.header-phone h3 span {
		font-size: 18px;
	}

}

@media screen and (max-width: 480px){ 

	.homepage-hero {
		height: 290px;
	}
	.homepage-hero h1 {
		font-size: 26px;
		line-height: 35px;
	}
	#header .header-1-wrapper {
		height: 108px !important;
	}
	.header-phone {
		max-width: 100%;
		padding-top: 0;
		float: none;
	}
	.header-1-wrapper .site-branding {
		top: 20px;
		left: 0px;
		float: none;
		width: 100%;
		text-align: center;
	}

	.site-branding img {
		margin-left:0;
	}

	.header-phone h3 span {
		display: inline;
	}

	.homepage-hero h2 {
		font-size: 19px;
		line-height: 23px;
	}
}


@media screen and (max-width: 400px){ 
	.homepage-hero h1 {
		font-size: 23px;
		line-height: 31px;
	}

	.homepage-hero h2 {
		font-size: 18px;
		line-height: 22px;
	}

	.step-container .steps h3 {
		font-size: 30px;
		line-height: 34px;
	}

	.step-container .steps ul li {
		line-height: 24px;
		font-size: 18px;
	}
}