/* CSS BASIC */
body{ margin:0 auto;font-family:'Poppins', sans-serif;   background-color: #FFF; margin:0 auto; max-width:1600px ; color:#341f12  ;background-image: url(../rsc/bg.jpg);
    background-repeat: no-repeat;
    background-size: 40%;
    background-attachment: fixed;
    background-position: right top; }
::selection { background: #F6F6F6;}
a{ text-decoration:none; color:#341f12;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 1s ease;-ms-transition: all 0.5s ease; transition: all 0.5s ease;}
a:hover{ text-decoration:none; color: #fddb13}
a img{ border:none}
.padding{ padding:20px}
.side{ background-color: transparent; float:left; width:35%; height:auto;  }
.aside{ background-color: transparent;float:left; width:65%;height:auto;  }
.smiley { display:inline; width:20px; height:auto}
.Grid { clear:both;    }
#portfolio .Grid { clear:both; overflow:hidden    }
.Grid-col { width: 100%;   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left;     }
.cell { width: 33%; padding-left:3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; padding:20px; border-bottom:0px solid  #3AD6FE; color: #FFF   }
.Grid .equal-col { width: 100%;   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left;  overflow:visible ;     } 
@media (min-width: 500px) {   .Grid .Grid-col { width: 50%;  }  .Grid .equal-col { width:50% } }
@media (min-width: 800px) {   .Grid .Grid-col { width: 33.333333%;   }  .Grid .equal-col { width:50% }}
ul {width: 100%;  padding: 0;  position: relative;   list-style:none; }


input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
}


 /*  LIST */
 
#list{background-color:#FAFAFA}
.list-count { 
 text-align: center;
  width: 100%;
  padding: 0.5em;
  color:#ccc; font-size:11px
}

li {
  transition-property: margin, background-color, border-color;
  transition-duration: 0.4s, 0.2s, 0.2s;
  transition-timing-function: ease-in-out, ease, ease;
}

.empty-item {
  transition-property: opacity;
  transition-duration: 0s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.empty .empty-item {
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-delay: 0.3s;
  transition-timing-function: ease;
}

.hiding {margin-left: -100%; opacity: 0.5;}
.hidden { display: none !important;  }

 
 
.search-box { border:none; border:1px solid #CCC ; padding:7px ; color:#341f12; text-align:center; font-family:'Poppins', sans-serif;border-radius:30px; margin:0 auto; width:100% ;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 1s ease;-ms-transition: all 0.5s ease; transition: all 0.5s ease; }
.search-box:hover{  border:none; border:1px solid #3a1b08;  }
.search-box:focus{ transform:scale(1.2) ; outline: none;}
.search-box::placeholder {  color: #ccc; }
.search-box:hover::placeholder {  color: #ccc; }
 
 
 
 


.happpauser{ padding:20px; position:relative; overflow:hidden; background-color:#FFF; border-radius:10px;box-shadow: 14px 12px 18px 1px rgb(0 0 0 / 20%), 0 15px 12px rgb(0 0 0 / 2%); text-align:center; max-width:300px; padding-bottom:50px;  padding-top:50px;margin-bottom:20px; margin-top:20px;}

.in{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 1s ease;-ms-transition: all 0.5s ease; transition: all 0.5s ease; }
.in:hover{ transform:scale(1.1); z-index:99}

.id{ position:absolute; left:10px; top:10px; font-size:10px}
.domain{ position:absolute; right:10px; top:10px; font-size:10px}
.avatar{width:100px; height:100px; background-color:#341f12; border-radius:50%; margin:0 auto;  background-position:center center; background-repeat:no-repeat; background-size: 100% ;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 1s ease;-ms-transition: all 0.5s ease; transition: all 0.5s ease;  } 
.avatar:hover{ background-size:150% ; transform:scale(1.3); } 
.name{ margin:0  ; margin-top:20px; font-size:18px}
.title{ margin:0; font-weight:normal; margin-bottom:10px; font-size:14px}
.type{ color:#341f12; background-color: #EFEFEF ;   padding:2px 10px; font-size:10px; border-radius:10px; font-weight:bold  }
.pro{ color:#341f12 !important; background-color:#fddb13  !important; text-transform:uppercase      }
.relation{   background-color:#fff  !important; text-transform:uppercase ; border:1px solid #a59082; color:#a59082 !important    }
.links a { margin:5px; font-size:20px; display:inline-block}
.links a:hover { transform:scale(1.2)}
.stat{ font-size:1px; color:#FFF; opacity:0;display: block;} 

 
.edit{ display:inline-block; position:absolute; right:0; bottom:0; background-color:#fff; color:#341f12; padding:5px 20px; font-size:12px; font-weight:normal; border-left:1px solid #ccc; border-top:1px solid #ccc; border-top-left-radius:20px  }
.edit:hover{ display:inline-block; position:absolute; right:0; bottom:0; background-color:#fddb13; color:#FFF; padding:5px 20px; font-size:12px; font-weight:normal;  transform:scale(1.2); border:none}



.personality  .bar{
	background-color:#f6dd1a;background: linear-gradient(
-45deg, #F1F1F1,  #f6dd1a, #3cd8b1);
	background-size: 200% 200%;
	animation: gradient 2s ease infinite;
	height: 8px;border-radius:50px; 
}

.personality .barholder{ display:block;  background-color: #F1F1F1; position: relative !important}
.personality i { position:absolute; left:0;top:-14px; background-color:#ff5354; color:#FFF; border-radius:50%; padding:7px ; font-size:13px}

@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {	background-position: 0% 50%;}}

.ADD-btn{background-color:transparent; border:none; cursor:pointer; background-color:#f6dd1a; border-radius:50%; color:#FFF; padding:10px; box-shadow: 12px 10px 35px 0px rgba(238, 229 ,135, 0.9);
  transition: box-shadow 150ms linear, background-color 150ms linear, transform 150ms linear; width:50px; height:50px;  transform:scale(1) }
.ADD-btn:hover{  transform: scale(0.8); 
  box-shadow: 6px 8px 8px 0px rgba(0, 0, 0, 0); }
  
#NEW-BTN{position: fixed; left:15px; bottom:15px; z-index:9}  

.more-info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.9);
  padding:20px;
  opacity: 0;
  z-index: 20;
  box-sizing: border-box;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}
.more-info.open {
  display: block;
  opacity: 1;
  pointer-events: all;
}

.burger-wrap {
  position: absolute;
  z-index: 40;
  transition: 300ms 700ms transform ease-in; bottom:10px; left:10px
}
.burger-wrap.reappearBurger {
  opacity: 0;
  animation: 0.5s 2s fadeAppear ease-out forwards;
}

@keyframes fadeAppear { 0% { opacity: 0;  }100% {  opacity: 1;  } }
.burger {
  width: 20px;
  height: 17px;
  cursor: pointer;
  z-index: 30;
  transition: transform 1s ease-in;
}
.burger span {
  display: block;
  position: absolute;
  height: 2px;
  left: 0;
  background: #f6dd1d;
  border-radius: 9px;
  opacity: 1;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.burger span:nth-child(1) {
  top: 0px;
  width: 50%;
}
.burger span:nth-child(2) {
  top: 6px;
  width: 75%;
}
.burger span:nth-child(3) {
  top: 12px;
  width: 100%;
}
.burger.active span:nth-child(1) {
  width: 100%;
  top: 12px;
  transform: rotate(135deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  top: 12px;
  transform: rotate(-135deg);
}

.lni-whatsapp{ color: #0C9 }
.lni-youtube{ color: #F33}
.lni-twitter-filled{ color: #0CC}
.lni-facebook-filled{ color: #39C}
.lni-linkedin-original { color: #09C}
.lni-instagram { color:#f09433  }
.lni-pointer{ color: #3e2598} 

.client-off {}
.client-active .avatar{   -webkit-animation: ripple 2.7s linear infinite;animation: ripple 2.7s linear infinite;}

@-webkit-keyframes ripple {
   0% {  box-shadow: 0 0 0 0 rgba(0, 204, 153, 0.3),  }
   50% {  box-shadow:  0 0 0 0.6em rgba(253, 219, 19, 1)   }
   100% {  box-shadow:  0 0 0 0 rgba(0, 204, 153, 0.3) }}

@keyframes ripple {
   0% {  box-shadow: 0 0 0 0 rgba(0, 204, 153, 0.3),  }
   50% {  box-shadow:  0 0 0 0.6em rgba(253, 219, 19, 1)   }
   100% {  box-shadow:  0 0 0 0 rgba(0, 204, 153, 0.3) }}
   
   
   
   
   
   
#FORM { font-size:12px; font-weight:bold;   padding:20px; margin:0 auto}
#FORM .happpauser { max-width: inherit }
#FORM input[type=text]{ border:none; border:1px solid #EEE ; padding:7px ; color:#341f12; text-align: left; font-family:'Poppins', sans-serif;border-radius:30px; margin:0 auto; width:90% ;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 1s ease;-ms-transition: all 0.5s ease; transition: all 0.5s ease; margin-top:5px; margin-bottom:10px; display:block;width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;}

 
#FORM input:focus{ transform:scale(1.1) ; outline: none;} 
  

#FORM select{ border:none; background-color: #F7F7F7  ; padding:7px ; color:#341f12; text-align: left; font-family:'Poppins', sans-serif;  margin:0 auto; width:100% ;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 1s ease;-ms-transition: all 0.5s ease; transition: all 0.5s ease; margin-top:10px; margin-bottom:10px; border-radius:30px; width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;background: rgb(234,232,240);
background: linear-gradient(94deg, rgba(234,232,240,1) 0%, rgba(255,255,255,1) 100%); }
   
   
   
   
   
   
   
   
   
   
   /* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/* 
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/* 
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}