@font-face {
        font-family: "Adaline Script";
        src: url("../fonts/adaline-script-regular.ttf") format("truetype"),
               url("../fonts/adaline-script-regular.otf") format("opentype"),
               url("../fonts/adaline-script-regular.woff") format("woff");
}
@font-face {
        font-family: "Century Gothic";
        src: url("../fonts/07558_CenturyGothic.ttf") format("truetype");
}
@font-face {
        font-family: "AvenirLTStd";
        src: url("../fonts/AvenirLTStd-Medium.otf") format("opentype");
}

body{
       box-sizing: border-box;
       -webkit-box-sizing: border-box;
       font-family: "AvenirLTStd", sans-serif;
       font-size: 16px;   
}

.main-body{
	width:  100%;
}

.site-header{
    width: 100%;
    height: 390px;
    background-image: url("../img/background-header-aicha.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

.va_title_h1{
	font-family: "Adaline Script", sans-serif;
	color:#ffffff;
	font-size: 10rem;
    line-height: 0.5em;
    text-align: right;
    padding-right:  19%;
    text-shadow: rgb(0 0 0 / 70%) 2px 5px;
    margin-bottom: 30px;
}

.va_title_voyance{
	display: block;
	font-family: "Century Gothic", sans-serif !important;
	color:#ffe52c !important;
	font-size: 4.8rem;
}

.image-aicha{
    margin-top: -40%;
}

.main-contain{
    margin-bottom: 60px;
}

.va_firstname{
    font-family: "Adaline Script", sans-serif;
    color:#0b1742;
    font-weight: 700;
    font-size: 45px;
}
.va_lp_text{
    font-family: "AvenirLTStd", sans-serif; 
    font-size: 18px; 
    text-align:  justify;
}
.va_title_h2{
    font-family: "AvenirLTStd", sans-serif; 
    font-size: 25px;
    font-weight: 900;
    color: #004898;
    text-align: center;
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 0px;
    padding: 0 50px;
}

.separateur{
    width: 45%;
    background-color: #0a2758;
    margin: 20px auto;

}

.bg-trans{
       background-color: #0a2758!important;
}

header.confirmation h1{
    z-index: 99!important;
}
.va_tarot-tirage{
    font-family: "AvenirLTStd", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: #800426;
    font-weight: 400;
    text-align: center;
}
.text-bold{
    font-size: 30px;
    font-weight: bold;   
}
.form-text-description{
    font-family: "AvenirLTStd", sans-serif; 
    font-size: 25px;
    font-weight: 900;
    color: #004898;
    text-align: center;
    font-style: italic;
    margin-top: 50px;
    margin-bottom: 0px;
    padding: 0 50px;
}

/****Tirage Tarot*/

.forme-part{
    flex: 2;
}

.form-part-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.form-firstPart-hide{
    display:none;
}

.carte-tirage{
    width: 338px;
    height: 338px;
    background-image: url("../img/bg-carte-tarot.png");
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 2rem;
    position: relative;
    background-position: center;
}


.n7{
    z-index: 1007; 
}

.n6{
    z-index: 1008; 
}

.n5{
    z-index: 1009; 
}

.n4{
    z-index: 1010; 
}

.n3{
    z-index: 1011; 
}

.n2{
    z-index: 1012; 
}

.n1{
    z-index: 1013; 
}

.card{
    width: 90px;
    height: 152px ;
    position: absolute;
    transition: all .5s ease-in-out;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: 0s ease 0s 1 normal none running none; 
    cursor: pointer;
    background-color: transparent !important;
    border: 0px !important;
}


.carte-result{
    width: 100%;
    height:150px ;
    display: flex;
    justify-content: center;
}

.carte-result img{
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition:  all .3s ease-in;
}

/* form */ 

.form-main form{
    width: 80%;
    margin: 20px auto;
}
label{
    font-family: "AvenirLTStd", sans-serif;
    font-size: 18px;   
    font-style: italic; 
    padding-right: 15px;
}

input[type=text],
input[type=email]{
    flex: 1;
    padding-left: 10px;
}

input[type=checkbox]{
    width: 17px!important;
    height: 17px!important;
    margin-right: 0!important;
}

.form-check-label{
    font-size: 14px;   
    font-style: normal; 
    padding-left: 15px!important;
}

.checkbox-group{
    display: flex;
}
::placeholder{
   font-style:italic;
}

.checkbox-group p{
   font-size: 13px;
   padding-left: 15px;
}
.checkbox-group a,
.form-footer-text.small.text-muted a{
       text-decoration: none;
       color: #c6ae56;
}
.spacing-top{
       margin-top: 3rem; 
}
.btn-submit,
button.btn.btn-primary{
    font-family: "AvenirLTStd", sans-serif;
    font-size: 18px;
    font-weight:700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: #29497f;
    border: 0px;
    border-radius: 5px;
    padding: 10px 40px;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
    transition: all .3s ease-in-out;
    box-shadow: 1px 7px 5px -3px #12528d69;
    cursor: pointer;
    margin: auto;
}
.btn-submit:hover{
    box-shadow: 1px 0px 5px -3px #12528d69;
}

/* step */

.form-main{
    display: none;
}

.form-main-active{
    display: block;
}


.form-firstPart-hide{
    display:none;
}


.carte{
    width: 80px;
    height: 125px;
    background-color: #c1c1c1;
    border-radius: 5px;
}
.carte.carte-1.bg{
       background-image: url("../img/carte-tarot-grise.png");
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat;
}

.carte:not(:last-child){
    margin-right: 1.5rem;
}


/****** Déploiement des cartes au click ******/ 

.n0 {
    transform: translate(124.57px, 11px) rotate(12deg);
    top: 30%;
}

.n1 {
    transform: translate(75.83px, 3px) rotate(10deg);
    top: 30%;
}

.n2 {
    transform: translate(39.09px, 3px) rotate(6deg);
    top: 30%;
}

.n3 {
    transform: translate(-7.65px, 3px) rotate(0deg);
    top: 30%;
}

.n4 {
    transform: translate(-63.39px, -1px) rotate(14deg);
    top: 30%;
}

.n5 {
    transform: translate(-116.13px, 3px) rotate(3deg);
    top: 30%;
}

.n6 {
    transform: translate(-163.87px, 3px) rotate(1deg);
    top: 30%;
}


.n7 {
    transform: translate(-217.61px, 7px) rotate(-11deg);
    top: 30%;
}

/* n-direction*/

.d3{
    transform: translate(55.57px, 364.082172px) rotate(00deg);
}
.d2{
    transform:translate(-42.13px, 364.082172px) rotate(0deg);
}

.d1{
    transform: translate(-151.43px, 364.082172px) rotate(0deg);
}

/******Footer*****/

.site-footer{
       background: #0b1742;
       padding-top: 15px;
       padding-bottom: 15px;
}
.site-footer p{
       font-family: "AvenirLTStd", sans-serif;
       font-size: 16px;
       color: #ffffff;
       text-align: center;
       margin-bottom: 0px;
}
.site-footer a{
    text-decoration: none;
    color: #c6ae56;
}

/*============RESPONSIVE DESIGN============*/

@media (max-width: 540px){
    .d3{
        transform: translate(50.57px, 294.082172px) rotate(00deg) !important;
    }
    .d2{
        transform:translate(-32.13px, 294.082172px) rotate(0deg) !important;
    }

    .d1{
        transform: translate(-117.43px, 294.082172px) rotate(0deg) !important;
    }
    .carte-tirage{
        width: 250px !important;
        height: 250px !important;
    }

    .carte {
        width: 60px;
        height: 95px;
    }
    .mobile-center{
        text-align: center;
    }
}

@media (max-width: 767px){
       .site-header{
              align-items: center;
              height: 250px;
              background-position: top right 35%;
       }
       .va_title_h1{
              font-size: 4rem !important; 
              text-align: center;
       }
       .va_title_voyance{
              font-size: 2rem !important; 
       }
       .image-aicha{
              margin-top: -25%;
              width: 230px;
              height: auto;
              padding-bottom: 20px;
       }
       .va_title_h2{
              font-size: 20px;
              padding: 0px;
       }
       .text-bold{
              font-size: 22px;
       }
       .card{
              width: 65px;
              height: auto;
       }
       .n7{
              transform: translate(-172.61px, 7px) rotate(-11deg);  
       }
       .n6{
              transform: translate(-148.87px, 3px) rotate(1deg);  
       }
       .n5{
              transform: translate(-100.13px, 3px) rotate(3deg);  
       }
       .n4{
              transform: translate(-62.39px, -1px) rotate(14deg); 
       }
       .n3{
              transform: translate(-22.65px, 3px) rotate(0deg); 
       }
       .n2{
              transform: translate(13.09px, 3px) rotate(6deg);
       }
       .n1{
              transform: translate(48.83px, 3px) rotate(10deg);
       }
       .n0{
              transform: translate(100.57px, 11px) rotate(12deg);
       }

    .form-text-description{
        font-size: 20px !important;
        padding: 0px !important;
    }
    .form-group{
        flex-direction: column;
    }
    
}

@media (max-width: 980px){
       .va_title_h1{
              padding-right: 0%;
       }
       .form-group{
            margin-bottom: 1.5rem;
        }
        input{
            border: 1px solid #7f7f7f;
            border-radius: 3px;
        }
}