/* GLOBAL STYLES
font-family: 'Roboto', sans-serif;
-------------------------------------------------- */  
 
/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('../fonts/MYRIADPRO-BOLD.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('../fonts/MYRIADPRO-COND.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('../fonts/MYRIADPRO-CONDIT.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Light';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Light'), url('../fonts/MYRIADPRO-Light.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('../fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('../fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('../fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('../fonts/MYRIADPRO-BOLD.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('../fonts/MYRIADPRO-BOLDIT.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('../fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
  }


body{
    font-size: 16px; 
}
 
*{
  box-sizing: border-box;
}

.idl-main{
  font-family: 'Myriad Pro Regular';
}
[v-cloak] > * { display:none; }
a:focus{
  outline: none;
}

.idl-bg-gray{background-color: #e5e9f0;} 
.idl-bg-white{background-color: #fff;} 
.idl-visualizer-wrap{} 
.idl-visualizer-con{
	max-width: 887px;
    width: 100%;
    margin: 0 auto;
    }
.dl-visualizer-box{}

.idl-visualizer-editbox{
  border: 6px solid #787777;
  border-radius: 60px;
  padding: 40px;
  width: 50%;
}

.idl-heading-style-01{
  font-family:  'Myriad Pro Semibold';;
  font-size: 20px; 
}

.idl-heading-style-02{
  font-family:  'Myriad Pro Semibold';;
  font-size: 15px; 
}

.idl-m-0{margin: 0;}

.idl-visualizer-color {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 20px 25px;
  gap:10px; 
}

.idl-border-black{border: 3px solid #000000;}
.idl-wh-140{width: 90px; height: 90px;}
.idl-wh-124{width: 100px; height: 100px;}
.idl-wh-164{width: 100px; height: 100px;}
.idl-borderR-100{border-radius: 100%;}

.hidden-image {
  visibility: hidden;
  max-width: 60px;
  vertical-align: middle;
}

.idl-text-center{text-align: center;}

.upload-box {
  padding: 30px 0 0;
  position: relative;
}

.upload-box input {
  position: absolute;
  height: 100px;
  width: 100%;
  z-index: 999;
  left: 0;
  opacity: 0;
}

.idl-visualizer-outPbox{ 
  width: 50%;
  position: relative;
}

.idl-flip-shadow { 
    position: absolute;
    bottom: -37px;
    width: calc(100% + (30px) );
    left: -15px;
    z-index: 1; 
}

.idl-visualizer-box {
    padding: 50px 20px 30px;
    display: flex;
    gap: 20px;
}

.idl-center{ 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; 
}

.idl-player-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.idl-player-box strong{
  margin-top: 10px;
}
 
.idl-upload{
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  color: #020202;
}

.idl-visualizer-content{
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  /*height: 1270px;
  width: 780px;*/
}
 
.idl-visualizer-logo {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12% 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 30%;
}

.idl-visualizer-logo img { 
  max-width: 100%;
  height: auto;
}

.idl-visualizer-pic {
  text-align: center;
  padding: 3px 16% 0;
  position: absolute;
  top: 28%;
  left: 0;
  width: 100%;
}

.idl-visualizer-back.back .idl-visualizer-pic { 
    padding: 0px 15% 0; 
}

.idl-visualizer-pic img { 
  max-width: 100%;;
}

.idl-flip-card {
  background-color: transparent; 
  width: 100%; 
}

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

 
.idl-flip-card.idl-flip-active .idl-flip-card-inner {
  transform: rotateY(180deg);
}

 

.idl-visualizer-front, .idl-visualizer-back{ 
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
position: relative;
}
 
.idl-visualizer-back { 
  transform: rotateY(180deg);
}

.img-back-logo {
  height: 50%  !important;
}

.idl-visualizer-back.back {
  position: absolute; 
  height: 100%;
  top: 0;
      width: 100%;
}


.idl-flip-shadow { 
}

.idl-flip-shadow img {
  max-width: 100%;
  height: auto;
}

.idl-flip-cta-box {
  font-family:  'Myriad Pro Semibold';;
  font-size: 37px;
  display: flex;
  justify-content: space-evenly;
}


.idl-flip-cta-box a{
  cursor: pointer;
  color: #020202;
  text-decoration: none;
}


.idl-position-relative {
  position: relative; 
} 

.logo-img {
  position: absolute;
  padding: 10px;
  display: flex;
}

.left-cta_btn {
    width: 50%;
    display: flex;
    justify-content: space-evenly;
    font-size: 24px;
    margin-bottom: 80px;
}

.idl-flip-cta-box div:first-child {
    width: 50%;
}

@media only screen and (max-width: 1024px){
.idl-visualizer-editbox { 
    padding: 20px; 
}

.idl-visualizer-color { 
    padding: 10px 20px 20px; 
}

.upload-box {
    padding: 20px 0 0; 
}

.idl-flip-shadow {
    position: absolute;
    bottom: -29px;
    width: calc(100% + (14px) );
    left: -7px; 
}

}


@media (min-width: 576px){}
@media all and (max-width:1400px) {}
@media all and (max-width:992px) {}
@media all and (max-width:767px) {

.idl-visualizer-box ,
.idl-flip-cta-box{ 
    flex-direction: column;
}

.idl-visualizer-outPbox,
.idl-visualizer-editbox,
.idl-flip-cta-box div:first-child,
.left-cta_btn{ 
    width: 100%;
} 

.idl-visualizer-box {
    padding: 50px 0 30px; 
}

.idl-heading-style-02 { 
    font-size: 10px;
    line-height: normal;
}

.idl-visualizer-color {
    padding: 10px 0 20px;
    gap: 5px;
}

.idl-heading-style-01 { 
    font-size: 16px;
}

.idl-flip-shadow { 
  bottom: -24px;

}

}


.idlloader {
  width: 220px;
  height: 80px;
}
.idlloader .avatar {
  float: left;
  width: 52px;
  height: 52px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 8px;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-avatar 2s infinite ease-out;
}
.idlloader .line {
  float: left;
  width: 140px;
  height: 16px;
  margin-top: 12px;
  border-radius: 7px;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-lines 2s infinite ease-out;
}
.idlloader .avatar + .line {
  margin-top: 11px;
  width: 100px;
}
.idlloader .line ~ .line {
  background-color: #ddd;
}

@keyframes shine-lines {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 140px;
  }
}
@keyframes shine-avatar {
  0% {
    background-position: -32px;
  }
  40%, 100% {
    background-position: 208px;
  }
}

.idlloader_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.upload_img {
   height: 40px;
}

.idlcroppie {
  position: absolute;
  z-index: 99999;
  background: rgba(0,0,0,0.5);
  height: 90vh;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
}

.idlpopup{
  background:rgba(0,0,0,.4);
  cursor:pointer;
  height:100%;
  position:fixed;
  text-align:center;
  top:0;
  width:100%;
  z-index:10000;
}
.idlpopup .helper{
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.idlpopup > div {
  background-color: #fff;
  box-shadow: 10px 10px 60px #555;
  display: inline-block;
  height: auto;
  max-width: 551px;
  min-height: 100px;
  vertical-align: middle;
  width: 60%;
  position: relative;
  border-radius: 8px;
  padding: 15px 5%;
  margin-top: 70px;
  min-width: 320px;
}
.popupCloseButton {
  background-color: #fff;
  border: 3px solid #999;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  font-family: arial;
  font-weight: bold;
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 25px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
}
.popupCloseButton:hover {
  background-color: #ccc;
}
.trigger_popup_fricc {
  cursor: pointer;
  font-size: 20px;
  margin: 20px;
  display: inline-block;
  font-weight: bold;
}
.idlbuttons button {
  border: none;
}

.idlbuttons button.bg-red-500 {
  background: red;
  color: #fff !important;
}
.idlbuttons button.bg-teal-500 {
  background: teal;
  color: #fff !important;
}
.idltopnotes {
  font-size: 12px;
}