html, body {
  height: 100%;
  min-height: 100%;
  font-family: 'Raleway', sans-serif;
  scroll-behavior: smooth;
}

/* HACKS */
.homepage-movies-hack{margin-top:50px;}

/* TÍTULOS E TEXTOS */
body{font-size:16px;}
h1{font-size:2.5em;}
h2{font-size:2em;}
h3{font-size:1.5em;}
h4{font-size:1em;}
h5{font-size:0.8em;}
.card h4{font-weight:700;}
strong {font-weight: 700;}

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alfa+Slab+One&family=Caveat&family=Comfortaa&family=Dancing+Script:wght@500&family=Fredoka+One&family=La+Belle+Aurore&family=Pacifico&family=Permanent+Marker&family=Zen+Dots&display=swap');


font-family: 'Abril Fatface', cursive;
font-family: 'Alfa Slab One', cursive;
font-family: 'Caveat', cursive;
font-family: 'Comfortaa', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Fredoka One', cursive;
font-family: 'La Belle Aurore', cursive;
font-family: 'Pacifico', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Zen Dots', cursive; 

/* STRUCTURE */
#widget-left{height:100%;}
.wrap-content{max-width:1240px;margin:auto;}
.sidenav{width:350px;}
.max100{max-width:100%;}
.full-size{margin: 0;line-height: 0;padding:0;}
.hscroll {overflow-x: auto;display: block;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;white-space: nowrap;}
.padding10{padding:10px !important;}
.padding20{padding:20px !important;}
.padding30{padding:30px !important;}
.margin10{margin:10px !important;}
.margin20{margin:20px !important;}
.margin30{margin:30px !important;}
.padding-top10{padding-top:10px;}
.padding-top50{padding-top:50px;}
.padding-top70{padding-top:70px;}
.padding-top100{padding-top:100px;}
.padding-topbottom10{padding-top:10px;padding-bottom:10px;}
.padding-topbottom20{padding-top:20px;padding-bottom:20px;}
.padding-topbottom30{padding-top:30px;padding-bottom:30px;}
.padding-topbottom50{padding-top:50px;padding-bottom:50px;}
.margin-topbottom15{margin-top:15px;margin-bottom:15px;}
.margin-topbottom20{margin-top:20px;margin-bottom:20px;}
.margin-topbottom30{margin-top:30px;margin-bottom:30px;}
.margin-topbottom50{margin-top:50px;margin-bottom:50px;}
.border-radius5{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.border-radius10{-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.border-radius15{-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;}
.border-radius30{-moz-border-radius: 53px;-webkit-border-radius: 30px;border-radius: 30px;}
.border-radius50{-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}
.border-radius100{-moz-border-radius: 100px;-webkit-border-radius: 100px;border-radius: 100px;}
.top-border-radius5{-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
.top-border-radius10{-moz-border-radius: 10px 10px 0 0;-webkit-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;}
.top-border-radius15{-moz-border-radius: 15px 15px 0 0;-webkit-border-radius: 15px 15px 0 0;border-radius: 15px 15px 0 0;}
.top-neg10{margin-top:-10px;}
.top-neg20{margin-top:-20px;}
.top-neg30{margin-top:-30px;}
.thumb-upload{width:40px;height:auto;}
#box-thumb{
  border: 1px solid #9bc8ff;
  border-radius: 5px;
  padding: 15px;
  background: #e9f2fd;
}
.hide{display:none;}
.show{display:block;}

/* HEADER */
#header {width:100%;z-index:6666;padding:10px}
#header ul{list-style:none;}
#header ul li{display:inline-block;margin-right:20px;}
#header ul li:last-child{margin-right:0;}
#header .menu-top{font-size:0.8em;line-height: 2.8em;margin-right:20px;}
#header .row{margin-bottom:0;}

/* MENUS */


/* SLIDE */

/* SUBHEADER */

/* CONTENT */
.xps-href{cursor:pointer;}
.disabled {opacity: 0.5;}
.checkbox-list{list-style:none;}
.checkbox-list li{display:inline;margin-right:10px;}
.checkbox-list li:last-child{margin-right:0;}
.menu-bottom {position: fixed;bottom: 0;font-size: 0.7em;}
#alerts{position:fixed;bottom:0;width:100%;}
#alerts .info{padding:30px;margin:auto;max-width:400px;}
.menu-actions li {display: inline-block;}
.btn-actions li{display:inline-block !important;}
#search{border:0;margin:0;}
#pessoal, #personagens, #livre{padding-top:30px;}
#pessoal .row, #personagens .row, #livre .row{margin-bottom:30px;}
.circle-icon{width:50px;height:50px;border-radius:100%;text-align:center;font-size:20px;line-height:50px;}
.tabs{border-radius:30px;}
.thunbs .cards{position:relative;}
.xps-form{border-radius:30px;padding:0px 10px;position:relative;}
.xps-form select{border:0 !important;border-radius:30px !important;}
.xps-form input, .xps-form input:active, .xps-form input:focus{border:0 !important;margin:0;border-bottom: 0px solid #26a69a !important;-webkit-box-shadow: 0 0px 0 0 #26a69a !important;box-shadow: 0 0px 0 0 #26a69a !important;}
.btn-default{height:44px;line-height:44px;}
/*.img-upload{width:391px;height:725px;overflow: hidden;}*/
/*.img-upload-max{width:500px;height:1200px;}
.img-upload-max {width: 500px;height: 1200px;top: -100px;left: -50px;}*/

/* ELEMENTS */
#customcharacters .elements{width: 391px; height: 725px;}
#customcharacters .elements .pre{position:absolute;bottom:0px;}
#custompersonal, #customcharacters{display:none;}
.active{display:block !important;}

/* ELEMENTS LIST */
#personagens .glide__slide{background-size:160%;background-repeat:no-repeat;background-position:top center;}
#roupa .glide__slide{background-position:center center;}
#objeto .glide__slide{background-position:center left;}
#pele .glide__slide{background-position:center center;}
.glide__slide{position:relative;overflow:hidden;}
.glide__slide img{position:absolute;max-width:150%;}



/* CARDS */
.card, .toast, .btn, .btn-large, .btn-small, .btn-floating, .dropdown-content, .collapsible, .sidenav {
  -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0%), 0 3px 1px -2px rgb(0 0 0 / 0%), 0 1px 5px 0 rgb(0 0 0 / 0%);
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0%), 0 3px 1px -2px rgb(0 0 0 / 0%), 0 1px 5px 0 rgb(0 0 0 / 0%);}
.cards{overflow: hidden;}
.cards img{max-width:100%;}

/* BOTÕES */
.xps-btn-search {background: no-repeat;border: none;border-radius: 70px;width: 53px;height: 53px;padding: 0;margin: 0;line-height: inherit;}
.btn-actions li {display: inline;}
.btn-actions {list-style: none;}
.btn-search {background: none;border: 0;font-size: 1.5rem;}
.menu-actions .xps-form{padding: 0px 10px;}
.btn-default{border-radius:30px;}

/* GLIDE */
.glide__slide{height:54px;border:1px solid;border-radius:100%;}
#personagens .glide__slides{margin-top:0;}
#personagens .row{margin-bottom:5px;}


/* FOOTER */
#footer{position:absolute;width:100%;bottom:0;}

/* PREVIEW */
.prev-imagem1, .prev-imagem2, .prev-imagem3{position:absolute;}
.prev-imagem1, .prev-imagem2, .prev-imagem3{position:absolute;}
.preview img{
  max-width:100%;
  height: 585px;
}
.thunbs li{width:80px;height:80px;border-radius:15px;border:1px solid;margin-bottom:10px;}
.preview{
  transform:scale(1);
}

/* CEL COLORS */
.cel{height:30px;width:30px;border-radius:5px;cursor:pointer;}
.celColors{display:inline-flex;}
.celColors li{margin-right:5px;}

/* ELEMENTS */
.custom-text{position:absolute;top:0px;left:0px;color:#ff2d;font-size:32px;font-size:85px;}


/* EXTRA */
.clip{-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-clip: border-box;mask-clip: border-box;}
.clip1{-webkit-mask-image:url(../images/cases/iphone7plus/mascara/frente/base1.webp);}
.clip2{-webkit-mask-image:url(../images/cases/iphone7plus/mascara/lado/base1.webp);}
.clip3{-webkit-mask-image:url(../images/cases/iphone7plus/mascara/inclinado_esquerda/base1.webp);}
.clip4{-webkit-mask-image:url(../images/cases/iphone7plus/mascara/deitado_direita/base1.webp);}

/* TODO-TRANSFORMAR EM LISTA DINÂMICA */
.pele-1{background-image:url('../images/characters/professions/pele/pele1.png');}
.pele-2{background-image:url('../images/characters/professions/pele/pele2.png');}
.pele-3{background-image:url('../images/characters/professions/pele/pele3.png');}
.pele-4{background-image:url('../images/characters/professions/pele/pele4.png');}
.pele-5{background-image:url('../images/characters/professions/pele/pele5.png');}
.objeto-1{background-image:url('../images/characters/professions/objeto/livros.png');}
.objeto-2{background-image:url('../images/characters/professions/objeto/notebook.png');}
.objeto-3{background-image:url('../images/characters/professions/objeto/papeis.png');}
.objeto-4{background-image:url('../images/characters/professions/objeto/prancheta.png');}
.roupa-1{background-image:url('../images/characters/professions/roupa/roupa1.png');}
.roupa-2{background-image:url('../images/characters/professions/roupa/roupa2.png');}
.roupa-3{background-image:url('../images/characters/professions/roupa/roupa3.png');}
.roupa-4{background-image:url('../images/characters/professions/roupa/roupa4.png');}
.roupa-5{background-image:url('../images/characters/professions/roupa/roupa5.png');}
.roupa-6{background-image:url('../images/characters/professions/roupa/roupa6.png');}
.roupa-7{background-image:url('../images/characters/professions/roupa/roupa7.png');}
.roupa-8{background-image:url('../images/characters/professions/roupa/roupa8.png');}
.cabelo-1{background-image:url('../images/characters/professions/cabelo/cabelo-claro/0001.png');}
.cabelo-2{background-image:url('../images/characters/professions/cabelo/cabelo-claro/0002.png');}
.cabelo-3{background-image:url('../images/characters/professions/cabelo/cabelo-claro/0003.png');}
.cabelo-4{background-image:url('../images/characters/professions/cabelo/cabelo-escuro/0001.png');}
.cabelo-5{background-image:url('../images/characters/professions/cabelo/cabelo-escuro/0002.png');}
.cabelo-6{background-image:url('../images/characters/professions/cabelo/cabelo-escuro/0003.png');}
.cabelo-7{background-image:url('../images/characters/professions/cabelo/cabelo-ruivo/0001.png');}
.cabelo-8{background-image:url('../images/characters/professions/cabelo/cabelo-ruivo/0002.png');}
.cabelo-9{background-image:url('../images/characters/professions/cabelo/cabelo-ruivo/0003.png');}


#colorpick {position: absolute;top: 8px;right: 0;}
#colorpick .btn{height:30px;width:30px;}
.colorpicker-2x{position:absolute;}
.colorpicker-2x .colorpicker-saturation {
  width: 200px;
  height: 200px;
}
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
  width: 30px;
  height: 200px;
}
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div{
  height: 30px;
}


#drag-1, #drag-2 {
  margin: 0;
  transform: translate(0px, 0px);
  position:absolute;
  top:0;
}


/* ADAPTAÇÃO PARA ESTRUTURA DO WILLIAN*/
#insertText {
  position: absolute;
  top: 34px;
  right: 19px;
}
.img-upload {
  width: auto;
  height: auto;
  overflow: hidden;
}
.clip1{width:100%;}
.img-upload-max{width:700px;}

.hk-custom-on {
/*  margin-top:-50px;*/
}
#customcharacters .elements{height:1034px;}
.glide__slides li {
  width: 60px;
}
.glide__slides li {
  display: inline-block;
}
#colorpick {
  position: absolute;
  top: 27px;
  right: 40px;
}
#colorpick i {
  line-height: 34px;
  width: 40px;
  border-radius: 5px;
  font-size: 25px;
}
.ctext{margin-bottom:0 !important;}

/* AJUSTANDO ELEMENTOS CUSTOMIZADOS A CADA VISÃO */
#imagem-1 .custompersonal .viewposition{
  transform: matrix3d(2.75,0.005803,0,0.000012,-0.002416,2.778421,0,-0.00001,0,0,1,0,350,42,0,2.85);
  width: 100%;
  height: 585px;
  display: block;
  transform-origin: 0px 0px;
}
#imagem-1 .customcharacters .viewposition{
  transform: matrix3d(2.75,0.005803,0,0.000012,-0.002416,2.778421,0,-0.00001,0,0,1,0,-25.5,6,0,2.91);
  width: 100%;
  height: 585px;
  display: block;
}
#imagem-2 .custompersonal .viewposition{
  transform: matrix3d(1.45,0.05,0,-0.00002,0,1.9,0,0.000038,0,0,1,0,269,18,0,1.9);
  width: 100%;
  height: 585px;
  display: block;
  transform-origin: 0px 0px;
}
#imagem-2 .customcharacters .viewposition{
  transform: matrix3d(1.46,0.05,0,-0.00002,0,1.9,0,0.000038,0,0,1,0,-35,6,0,2.00);
  width: 100%;
  height: 585px;
  display: block;
}
#imagem-3 .custompersonal .viewposition{
  transform: matrix3d(1.8,0.80,0,0.00003,-1.440164,1.74379,0,0.000029,0,0,1,0,811,92,0,2.50);
  width: 100%;
  height: 585px;
  display: block;
  transform-origin: 0px 0px;
}
#imagem-3 .customcharacters .viewposition{
  transform: matrix3d(1.8,0.80,0,0.000031,-1.440164,1.74379,0,0.000029,0,0,1,0,-31,-19,0,2.55);
  width: 100%;
  height: 585px;
  display: block;
}
#imagem-4 .custompersonal .viewposition{
  transform: matrix3d(2.85,-0.45,0,0.00022,1.7,3,0,0,0,0,1,0,149.7,302,0,3.82);
  width: 100%;
  height: 585px;
  display: block;
  transform-origin: 0px 0px;
}
#imagem-4 .customcharacters .viewposition{
  transform: matrix3d(2.8,-0.55,0,0,1.7,3,0,0,0,0,1,0,3.9,-35,0,3.89);
  width: 100%;
  height: 585px;
  display: block;
}

/* ELEMENTS */
.customcharacters .elements{
  width: 100%;
  height: 585px;
}
.customcharacters .elements .pre{
  position:absolute;
  bottom:0px;
  width: 100%;
  height: 585px;
}
.custompersonal, .customcharacters{display:none;}
.active{
  display:block !important;
}


.celColors {
  list-style: none;
}
#tabProdutoContent {
  z-index: 5 !important;
  overflow: hidden;
}
.thumb-produtos {
  z-index: 6 !important;
}
.preview-thumbnail li{width:80px;height:80px;}
.glide__slide img {
  position: absolute;
  max-width: 150%;
  left: -28%;
}
#objeto .glide__slide img {
  top: -85%;
  left: 16%;
}
#roupa .glide__slide img {
  top: -87%;
}
.colorText{list-style: none;padding-left:0px;}
.colorText li{width:20px;height:20px;float:left;margin-right:5px;margin-bottom:5px;border-radius:100%;cursor: pointer;}
#color{
  height: 30px !important;
  min-height: 0 !important;}