/* Choozeo CSS */

/*
purple = #622473
orange = #f3950A
*/

body {
	font-size: 18px;
  font-family: 'Quicksand', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.background-bicolor {
	color: #FFF;
	background: #622473;
	background: -moz-linear-gradient(-60deg, #622473 0%, #622473 50%, #f3950a 50%, #f3950a 100%);
	background: -webkit-linear-gradient(-60deg, #622473 0%,#622473 50%,#f3950a 50%,#f3950a 100%);
	background: linear-gradient(115deg, #622473 0%,#622473 50%,#f3950a 50%,#f3950a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#622473', endColorstr='#f3950a',GradientType=1 );
}

.top {
	background-color: #FFF;
}

.top .logo-choozeo {
  max-width: 200px;
  height: auto;
  margin: 15px auto;
}

.head .head-title {
	margin: 120px 0;
}

.head .head-title h1 {
	font-size: 42px;
	line-height: 42px;
	text-transform: uppercase;
	font-weight: bold;
}

.head .head-title p {
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
}

.main {
	padding: 30px 0;
	background-color: #FFF;
}

.main h2 {
	text-align: center;
	color: #622473;
	font-size: 42px;
	text-transform: uppercase;
	margin: 60px auto;
}

.main .steps {
	margin: 60px 0;
}

.main .steps .step-num {
	position: relative;
	padding: 20px 0 0 80px;
	margin: 15px 0;
}

.main .steps .step-num span.num {
	position: absolute;
	top: 0;
	left: 0;
	color: #f3940c;
	font-size: 70px;
}

.main .steps .step-txt span.txt {
	color: #f3940c;
	font-size: 20px;
	font-weight: bold;
}


.main .steps .step-num.step-num-1 {
	padding-left: 60px;
}

.main .steps .step-2-image img,
.main .steps .step-3-image img,
.main .steps .step-4-image img {
	max-width: 250px;
}

.simulateur-calcul {
	padding: 60px 0;
}

.simulateur .simulateur-calcul h3 {
	margin: 15px 0;
	font-size: 42px;
	line-height: 32px;
	text-transform: uppercase;
}

.simulateur .simulateur-calcul h3 span {
	font-weight: normal;
	text-transform: none;
}

.simulateur .simulateur-calcul .inputr {
	margin: 20px 0;
	width: 100%;
	line-height: 30px;
	border-radius: 15px;
	padding-left: 15px;
	border: 1px solid #FFF;
	color: #622473;
	font-size: 18px;
}

.simulateur .simulateur-calcul .inputr::-webkit-input-placeholder {
	color: #622473;
	font-size: 18px;
}
.simulateur .simulateur-calcul .inputr::-moz-placeholder {
	color: #622473;
	font-size: 18px;
}
.simulateur .simulateur-calcul .inputr:-ms-input-placeholder {
	color: #622473;
	font-size: 18px;
}
.simulateur .simulateur-calcul .inputr:-moz-placeholder {
	color: #622473;
	font-size: 18px;
}

.simulateur .simulateur-calcul .inputr2 {
	background-color: #fdc75f;
}

.simulateur .simulateur-image {
	padding: 30px 0;
}

.simulateur .simulateur-image img {
	max-width: 250px;
}

.cards {
	padding: 40px 0;
}

.cards h4 {
	text-transform: uppercase;
	font-size: 24px;
	line-height: 28px;
	color: #622473;
}

.cards h4 span {
	font-weight: normal;
}

.bottom {
	text-align: center;
	background-color: #622473;
}

.bottom h3.phrase {
	display: inline-block;
	position: relative;
	font-size: 26px;
	line-height: 32px;
	font-weight: bold;
	color: #FFF;
	padding: 30px;
}

.bottom h3.phrase span {
	text-transform: uppercase;
}

.bottom h3.phrase a {
	text-decoration: none;
	color: #FFF;
}

.footer {
	background-color: #FFF;
  text-align: left;
  padding: 15px;
}

.footer p {
	font-size: 11px;
	line-height: 14px;
}

@media (min-width: 768px) {


	.head .background-card {
		background-image: url(../img/choozeo-head-card.png);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 500px;
	}

	.simulateur .simulateur-calcul .inputr {
		width: 300px;
	}

	.simulateur .simulateur-image {
		padding: 100px 0;
	}

	.bottom h3.phrase {
		font-size: 36px;
		line-height: 42px;
	}

	.bottom h3.phrase::before,
	.bottom h3.phrase::after {
		color: #f3950a;
		font-size: 105px;
		font-weight: bold;
		content: "“";
		position: absolute;
		top: 45%;
		left: -50px;
	}

	.bottom h3.phrase::after {
		content: "”";
		left: auto;
		right: -50px;
	}

}

@media (min-width: 1200px) {
	.head .background-card {
		background-size: 800px;
	}
}