/* Général */
html {
    min-height: 100%;
}

html, body{
    height: 100%;
    background: #FFF;
}

h1{
  margin: 0 !important;
}

h1.name-profil, .name-profil p {
  margin: 0 !important;
  margin-bottom: 0 !important;
}

.card{
  border-radius:16px !important;
  overflow: hidden;
}

/*======     ====*/

.createCard-steps{
  display: flex;
  justify-content:flex-end;
}

.createCard-step{
  width: 45px;
  text-align: center;
  color:#d8d8d8;
  border-bottom: 2px solid #d8d8d8;
  margin:0 5px;
}

.step-active{
  color: #e7302a;
  border-bottom: 3px solid #e7302a;
  font-weight: bold;
}

/* ==== Create card V2   ====*/
.tab-content>.active{
  width:100% !important;
}

#v-pills-tabContent{
  width: 100%; 
}

.preview{
  overflow: hidden;
  border : 5px solid #000;
  border-radius : 41px;
  width: 400px;
}

/*=== input color ====*/

.color-label {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.color-input {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

input[type="color"] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 50%, transparent 50%, currentColor 50%);
  border: none;
  outline: none;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
}

input[type=color]::-webkit-color-swatch {
  border-radius: 50%;
  border: none;
}

/*==== end ====*/

.preview-card{
  margin:auto;
  height:700px;
  width:380px;
}

.container-card{
  max-width: 570px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Banner */
.banner{
  background-color:#000;
  height:250px;
  background-position:center;
}

.banner-2{
  position: relative;
  background-color:#000;
  height:250px;
  background-position:center;
}

.small-banner{
  position: relative;
  background-color:#000;
  height:150px;
  background-position:center;
}

.small-banner-tp2{
  position: relative;
  border-radius: 20px;
  margin:15px;
  background-color:#000;
  height:150px;
  background-position:center;
}

.bg-menu{
  background-color: red;
  height: 45px;
  width: 100%;
}

.banner-trap{
  background-color:#000;
  height:200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* frame image */

.frame-round{
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border:5px solid #f1efef;
}

.frame-rounded{
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border:5px solid #f1efef;
  border-radius: 1em;
}

.frame-square{
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 150px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border:5px solid #f1efef;
}


.name-profil{
  margin-top:20px;
}

/* card-body */
.card-body-banner{
 background-color:#FFF;
 height: calc(100vh - 250px );
 display: block;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;


}

.cardS-body-small-banner{
 background-color:#FFF;
 height: calc(100vh - 150px );
 display: block;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}

.cardS-body{
 background-color:#FFF;
 height:100vh;
 display: block;
 background-size: cover;
 background-position: center;
}

/* block link */
.m-btn{
  width: 33%;
  margin:auto;
  padding: 0;
  margin-bottom:15px;
}

/* bouton rond */

.round-btn{
  height: 60px;
  width:60px;
  line-height: 60px;
  font-family: 'icomoon' !important;
  margin: auto;
  margin-bottom:5px;
  font-size:30px;
  border-radius: 50%;
  background-color:#000;
}

.round-btn a:hover{
  text-decoration:none !important;
}


.round-btn i{
  color: #FFF;
}

.round-btn a{
  text-decoration: none;
}

/* bouton barre */

.btn-card{
  margin: auto;
  height: 50px;
  width: 75%;
  color: #000;
  display: inline-flex;
 /* margin-bottom: 10px;*/
  text-decoration: none;
  border-bottom: 1px solid #b1afaf;
  padding: 10px;
}

.btn-card-3{
  margin: auto;
  height: 45px;
  width: 75%;
  color: #000;
  display: block;
  margin-bottom: 15px;
  text-decoration: none;
  /*border-bottom: 1px solid #b1afaf;*/
}

.btn-card:hover{
  color: #000;
  text-decoration:none;
}

.btn-smd{
  margin: auto;
  border-radius: 50px;
  height: 50px;
  width: 85%;
  color: #000;
  display: inline-flex;
  text-decoration: none;
  /*border: 1px solid #b1afaf;*/
  padding: 10px;
  margin-bottom: 12px;
}

.btn-smd a{
  text-decoration: none;
}

.btn-smd p{
  width: 100%;
  text-align: center;
}


.card-icon{
  display: inline-block;
  width: 20%;
}

.card-icon i{
  font-size: 25px;
  vertical-align: middle;
}

.card-roundIcon{
  width: 45px;
    height: 45px;
    display: inline-block;
    line-height: 38px;
    background-color: #000;
    border-radius: 50%;
}

.card-roundIcon i{
  font-size: 25px;
  color: #fff;
  vertical-align: middle;
}

.card-text{
  display: inline-block;
  text-align: left;
  width: 78%;
  padding-left: 10px;
  text-transform: uppercase;
}

.card-text-3{
  display: inline-block;
  text-align: left;
  width: 78%;
  text-transform: uppercase;
}



.card-roundIcon a:hover, .btn-card a:hover {
  text-decoration:none !important;
}


.showQrcode{
  width: 300px;
  height: auto;
}




.icom a{
  padding: 0 15px;
  border:0;
}

.icom i{
  color: #FFF;
  vertical-align:text-bottom;
  font-size: 20px;
  padding: 5px;
}



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

/* Bouton de partage */

a.butt-share{
  position: relative;
}

.butt-share{
  width: 45px;
  height: 45px;
  line-height: 45px;
  transform: translateX(-10px);
  text-align: center;
  color: #FFF;
  position: fixed;
  right: 10px;
  bottom:60px;
}

.btn-share{
  border-radius: 50%;
  line-height: 45px;
  background-color: #000;
}

.butt-share i{
  font-size:20px;
  vertical-align: text-bottom;
}

/* bar tap barre du bas */

.bar-tap{
  height: 40px;
  line-height: 40px;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  bottom: 0;
  text-align: center;
  color: #a5a5a5;
  display: block;
}

.bar-tap-2{
  height: 40px;
  line-height: 40px;
  width: 100%;
  background-color: #efefef;
  bottom: 0;
  text-align: left;
  color: #a5a5a5;
  display: inline-block;
}

.bar-tap-2 div{
  display: inline-block;
}

.bar-ico{
  width: 88%;
  text-align: center
}

.bar-qrcode{
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  position: absolute;
  right: 5px;
}

.bar-qrcode a{
  color: #a5a5a5;
}
.bar-qrcode a:hover{
  color: #a5a5a5;
  text-decoration: none;
}

.bar-tap span{
  font-size:25px;
  vertical-align: middle;
}


@media screen and (width: 375px) and (height: 667px){
  .banner{
    height: 200px;
  }
  .m-btn{
    margin-bottom:0px;
  }

  .butt-share{
    bottom:45px;
  }

}