 /* this css will not compile if we move to vcard.css */
        .bg-solid{
            background: #000000 repeat scroll 0% 0% !important;
        }
        .bg-gradient-linear{
            background: linear-gradient(45deg,#000000 0%, #C03E4A 100%) repeat scroll 0% 0% !important;
        }
        .bg-gradient-upDown {
            background: linear-gradient(#000000 0%, #C03E4A) repeat scroll 0% 0% !important;
        }
        .bg-gradient-diagonal1 {
            background: linear-gradient(to right bottom, #000000, #C03E4A);
        }
        .bg-gradient-diagonal2 {
            background: linear-gradient(to right top, #000000, #C03E4A);
        }
        .bg-gradient-radial {
            background: radial-gradient(#000000 30%, #C03E4A 100%) repeat scroll 0% 0% !important;
        }
        /** css for icons color **/
        .bg-color-icon {
            background: #000000;
        }
        .bg-icon-gradient-linear{
            background: linear-gradient(45deg,#000000 0%, #C03E4A 100%);
        }
        .bg-icon-gradient-upDown {
            background: linear-gradient(#000000 0%, #C03E4A);
        }
        .bg-icon-gradient-diagonal1 {
            background: linear-gradient(to right bottom, #000000, #C03E4A);
        }
        .bg-icon-gradient-diagonal2 {
            background: linear-gradient(to right top, #000000, #C03E4A);
        }
        .bg-icon-gradient-radial {
            background: radial-gradient(#000000 30%, #C03E4A 100%);
        }
        /** color for icon **/
        .color-icons{
            color: #000000;
        }
        
        /** can not use gradiant in border **/
        .bg-gradient-border{
            border-bottom: 9px solid #000000;
        }
        /** icon css end **/
        /** Icons **/
        .qr-email1::before {
            content: "\e942";
        }
        .qr-phone-call::before {
            content: "\e941";
        }
        .qr-global::before {
            content: "\e97a";
        }
        .qr-brief-case::before{
            content: "\e97c";
        }
        .qr-location::before{
            content: "\e9ad";
        }
        .qr-fax::before{
            content: "\e97b";
        }
        #captcha-container {
            font-size: 20px;
            text-decoration: line-through;
            margin-right: 5px;
        }


        .card {
            width: 100%;
            max-width: 440px;
            background: #fff;
            /* border-radius: 16px; */
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .curve-header {
            background-color: #e00000;
            height: 440px;
            position: relative;
            clip-path: circle(87.3% at 59% 13%);
        }

        .profile-container {
            position: absolute;
            width: 100%;
            height: 430px;
            clip-path: circle(86.3% at 59% 13%);
        }

        .profile-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


 *, ::after, ::before {
      box-sizing: border-box;
   }
   body {
      margin: auto;
      font-family: Raleway, sans-serif;
      height: 100%;
   }
   #freemium{
      z-index: 10002;
   }
   .container-fluid {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
   }
   .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
   }
   .text-center {
      text-align: center !important;
   }
   .m-auto {
      margin: auto !important;
   }
   .mb-2, .my-2 {
      margin-bottom: .5rem !important;
   }
   img {
      vertical-align: middle;
      border-style: none;
   }
   .mt-5, .my-5 {
      margin-top: 3rem !important;
   }
   .ml-auto, .mx-auto {
      margin-left: auto !important;
   }
   .mr-auto, .mx-auto {
      margin-right: auto !important;
   }
   .mr-2, .mx-2 {
      margin-right: .5rem !important;
   }
   .ml-3, .mx-3 {
      margin-left: 1rem !important;
   }
   .align-items-center {
      -ms-flex-align: center !important;
      align-items: center !important;
   }
   .loaded h1 {
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      letter-spacing: 2px;
      font-size: 48px;
   }
   .loaded p {
      font-family: 'Lato', sans-serif;
      letter-spacing: 1px;
      font-size: 18px;
      color: #333333;
   }
  .h-100 {
	   height: 100% !important;
   }
  .block{
     display: none;
  }
  .dot-elastic {
     position: relative;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background-color: #ffc107;
     color: #ffc107;
     animation: dotElastic 1s infinite linear;
  }

  .dot-elastic::before, .dot-elastic::after {
     content: '';
     display: inline-block;
     position: absolute;
     top: 0;
  }

  .dot-elastic::before {
     left: -15px;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background-color: #ffc107;
     color: #ffc107;
     animation: dotElasticBefore 1s infinite linear;
  }

  .dot-elastic::after {
     left: 15px;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background-color: #ffc107;
     color: #ffc107;
     animation: dotElasticAfter 1s infinite linear;
  }
  @keyframes dotElasticBefore {
     0% {
        transform: scale(1, 1);
     }
     25% {
        transform: scale(1, 1.5);
     }
     50% {
        transform: scale(1, 0.67);
     }
     75% {
        transform: scale(1, 1);
     }
     100% {
        transform: scale(1, 1);
     }
  }
  @keyframes dotElastic {
     0% {
        transform: scale(1, 1);
     }
     25% {
        transform: scale(1, 1);
     }
     50% {
        transform: scale(1, 1.5);
     }
     75% {
        transform: scale(1, 1);
     }
     100% {
        transform: scale(1, 1);
     }
  }

  @keyframes dotElasticAfter {
     0% {
        transform: scale(1, 1);
     }
     25% {
        transform: scale(1, 1);
     }
     50% {
        transform: scale(1, 0.67);
     }
     75% {
        transform: scale(1, 1.5);
     }
     100% {
        transform: scale(1, 1);
     }
  }
  .loader-wrapper{
     z-index: 100;
     background: white;
     position: fixed;
  }
  .loaded .loader-wrapper{
     visibility: hidden;
     -webkit-transform: translateY(-100%);
     -ms-transform: translateY(-100%);
     transform: translateY(-100%);
     -webkit-transition: all 0.3s 1s ease-out;
     transition: all 0.3s 1s ease-out;
  }