@font-face {
    font-family: 'Times Roman';
    src: url('../fonts/times-ro.ttf');
}

@font-face {
    font-family: 'MyriadPro Regular';
    src: url('../fonts/Myriad-Pro-Regular.ttf');
}

body{
    font-family: 'MyriadPro Regular', sans-serif;
    background-image: url("../img/bg-sonia-voyance.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.page-container{
	width: 1140px;
	margin: 0 auto;
	background: #f6f6f6;
}

header{
	background: #1c1109;
	height: 181px;
	display: flex;
	align-items: center;
	padding: 0 4rem;
}

header .card-img{
	width: 80%;
}

.voyance-special{
	width: 20%;
}

.voyance-special p{
	text-align: right;
	margin-bottom: 0px;
}

.text-vy-special{
	font-size: 20px;
	color: #ffffff;
	line-height: 1.6em;
}

.word-big{
	font-size: 2.3rem !important;
	text-transform: uppercase;
}

.main-contain{
	padding: 5rem 3rem 2rem;
}

.card-container{
	background: #ffffff;
    border: 1px solid #bdbdbd;
    padding: 30px 40px;
    margin-top: 40px;
}

.form-title, .card-carte-title{
	text-transform: uppercase;
	font-size: 16px;
	text-align: center;
	color: #d67e08;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

/*** Carte ***/

.card-carte{
	text-align: center;
}

.carte-selection{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.card-flip{
	background-color: transparent;
    width: 112px;
    height: 177px;
    perspective: 1000px;
    cursor: pointer;
    margin-right: 2px;
}

.card-item{
	position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-flip-front, .card-flip-back{
	position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.is-flipped {
    transform: rotateY(180deg);
}

.card-flip-front img{
	width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-flip-back img{
	width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-flip-back{
    color: white;
    transform: rotateY(180deg);
    background-color: #ffffff;
}

.card-content{
	display: flex;
}

.card-content-form{
	width: 60%;	
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card-image-voyant{
	width: 40%;
	display:flex;
	align-items: center;
	justify-content: center;
}

/*** Form ***/

form{
	width: 80%;
	margin: 0 auto;
}

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=date]{
	background: #feeed8;
	border: none;
}

.form-group input[type=text]:focus,
.form-group input[type=email]:focus,
.form-group input[type=date]:focus{
	outline: none;
	background-color: #dddddd;
    color: #000000;
}

.input-label{
	font-size: 17px;
	color: #340e12;
}

.form-text-info{
	font-size: 17px;
	font-style: italic;
	color: #878787;
}

.checkBox{
	display: flex;
	margin-bottom: 2rem;
}

.checkBox p,
.form-check-label {
	font-size: 18px;
	color: #1c1109;
	margin-bottom: 10px;
}

.checkBox.space{
	margin-top: 20px;
	margin-bottom: 0 !important;
}

.checkBox a,
.form-check-label  a,
.form-footer-text.small.text-muted a{
	text-decoration: none !important;
	color: #d67e08;
}

.checkBox a:hover{
	color: #a10074;
}

.checkbox{
	width: 2rem;
    height: 1rem;
    margin-right: 1rem;
}

.btnSend,
button.btn.btn-primary{
	width: 100%;
	font-family: 'Times Roman', sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	text-align: center;
	font-weight: 500;
	background: #d67e08;
	border: none;
	border-radius: 5px;
	padding: 15px 20px;
	color: #ffffff;
	transition: all 0.5s ease;
}

.btnSend:hover,
button.btn.btn-primary:hover{
	background: #ffffff;
	border: 1px solid #d67e08;
	color: #d67e08;
	box-shadow: 0px 3px 15px 0px #dddddd;
}


footer{
	text-align: center;
	padding: 0 3rem 2em;
}

.footer-text{
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	margin-bottom: 0px;
	color: #d67e08;
}

footer img{
	width: 100%;
	object-fit:cover;
}

.footer-link{
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	text-decoration: none !important;
	color: #a5a5a5;
}

.footer-link:hover{
	color: #000000;
}


/*============ RESPONSIVITE ============*/

@media (min-width: 769px) and (max-width: 1199px){
	header{
		padding: 0 2rem;
	}

	.page-container{
		width: 90%;
	}

	header .card-img{
		width: 60%;
	}

	.voyance-special{
		width: 40%;
	}
}

@media (min-width: 769px) and (max-width: 980px){
	.card-img img{
		width: 350px;
		height: auto;
		object-fit: cover;
	}

	header{
		height: 113px;
		padding: 0 2.5rem;
	}

	.card-image-voyant img{
		width: 100%;
	}

	.voyance-special img{
		width: 250px;
	}

	.word-big{
		font-size: 2rem !important;
	}
}

@media (max-width: 768px){
	.page-container{
		width: 95%;
	}

	header{
		flex-direction: column;
		justify-content: center;
		height: auto;
		padding: 0 0 30px;
	}

	.voyance-special{
		width: 100%;
		padding-top: 30px;
	}

	.card-img{
		width: 100%;
		text-align: center;
	}

	.voyance-special p{
		text-align: center;
	}

	.card-img img{
		width: 100%;
	}

	.card-content{
		flex-direction: column;
	}

	.card-content-form, .card-image-voyant{
 		width: 100%;
	}

	.card-image-voyant{
		display: none;
	}

	form{
		width: 100%;
	}

	.carte-selection{
		flex-wrap: wrap;
		padding-top: 0;
		padding-bottom: 0;
	}

	.card-flip{
		width: 70px;
		height: 140px;
	}

	footer{
		padding: 0 1rem 2rem;
	}
}

@media (max-width: 460px){
	.word-big{
		font-size: 2rem;
	}

	.card-container{
		padding: 2rem 1rem;
	}

	.main-contain{
		padding: 2rem 1rem;
	}

	.card-flip{
		width: 65px;
		height: 120px;
	}

}