@charset "UTF-8";
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
*, *:before, *:after {  box-sizing: border-box;  padding: 0;  margin: 0;}

	
body {  background: #291751;  overflow: hidden; cursor:default;
outline: none;-webkit-touch-callout: none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;
}

  
/*cartas feitas a partir de db*/
div #imagination_off{ background-repeat: no-repeat;  background-size: 400px 566px; max-width:400px;background-image: url("images/abana_a_cauda_Patas01.jpg"); }
/*random image 100% css*/
/*random image 100% css*/
.cardWrapper {position: relative;
    height: 40vmin; width: calc(40vmin / 1.4);
    background-size: 70px 120px;
    border-radius: calc(40vmin / 20);
    overflow: hidden;}

.cardRandom {width: 100%;height: 100%;  background-color: #329cd6; cursor: pointer;}

.car::before {  width: 100%;  height: 100%;content: "";
  background-image: url("images/cards.png");  background-size: cover;
  /*animation: randomCard 10000ms steps(51, end) infinite;
  animation-play-state: paused;*/
  font-family: 'Averia Sans Libre','Trebuchet MS', sans-serif;
  color: #44474b;    font-size: 1.1em;    letter-spacing: 0.12em;    margin-top: 10px;
  
 background-position: 0px 0px;
	} 
.testes::before	{ width: 100%;  height: 100%;content: ""; background-image: url("images/cards.png");  background-size: cover;
	   background-position: 400px 0px;} 

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

.car {font: 14px 'Averia Sans Libre','Trebuchet MS', sans-serif;color:#000;font-size: 1.1em; letter-spacing:0.12em;text-transform:uppercase;
    text-align: center; touch-action: none;user-select: none;  -webkit-user-drag: none; pointer-events: none;}
.carta-1 {background: linear-gradient(180deg, #329cd6, #f9fbfc);}
.cartat-1:after {content: "Passeios com treino"; }

.carta-2 {background: linear-gradient(180deg, #ffc21a, #f9fbfc);}
.cartat-2:after {content: "Treino canino"; }

.carta-3 {background: linear-gradient(180deg, #93c431, #f9fbfc);}
.cartat-3:after {content: "Terapia comportamental";}

.carta-4 {background: linear-gradient(180deg, #fe8bb9, #f9fbfc);}
.cartat-4:after {content: "Trivia";}

.carta-5 {background: linear-gradient(180deg, #c6b3dc, #f9fbfc);}
.cartat-5:after {content: "Curiosidades";}

.carta-6 {background: linear-gradient(180deg, #ff774d, #FF9E80);}
.cartat-6:after {content: "Vez do patudo";}
.tit {position: absolute;top:9px;}


.carta {position: relative;
width: calc(var(--cardh) - 20px);
height: calc(var(--cardv) - 20px);
/* width: 400px;height: 590px;*/
  border-radius: 21px;
  border: 3px solid white;
  display: flex;
  flex-direction: column;
  align-items: center;  }
  
.cartaresposta {
  width: calc(var(--cardh) - 20px);
  height: calc(var(--cardv) - 20px);
  border-radius: 21px;
  border: 3px solid white;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /*top:37px;*/
  background: linear-gradient(50deg, #c6b3dc, #f9fbfc); }
 
.time{position: fixed;    top: 200px;}
/*Respostas Cartaz script.js linha 69 adicionar blur a patas dadas*/
.overlay {display: none;cursor: help; 
  position: fixed;top:0px;left: 0px;right: 0px;bottom: 0px; width: 100%;   height: 100%; 
  background: linear-gradient(45deg, #24006b9c, #f42f8c8c);z-index:50;
  
outline: none;-webkit-touch-callout: none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent; }
 
  /*reactivar*/ 
.cardsfocus{filter: blur(0px);  -webkit-filter: blur(0px);}
.cardsoutfocus{filter: blur(3px);  -webkit-filter: blur(3px);}

/*RESPOSTA*/
.resposta { width: 100%; height: 100vh;
background: linear-gradient(45deg, #24006b9c, #f42f8c8c);  
display: flex;  
justify-content: center;  
align-items: flex-start;
padding-top: 90px;}



.logodadas {
  width: 180px;    height: 210px;
  background: white;
  border-radius: 0px 0px 100px 100px;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
textarea{outline: none; font-family: 'Averia Sans Libre','Trebuchet MS', sans-serif;font-size: x-large;
  -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none; user-select:none; resize: none; overflow: auto;
    height: 100%;
    background-color: #ffffff;
    border: #ffffff;cursor:n-resize;  color: transparent;
  text-shadow: 0px 0px 0px #000;  text-decoration: none;margin: 5px;}

.textareacredits{
    font-size: x-large;
	background-color: #ffffff6e;
    border: #fff9e9;
    border-radius: 26px;
    padding: 20px;
	width: 93%;    height: 50%; margin: 10px;
box-shadow: inset -3px -3px 5px 0px #ffe9ae, -1px -1px 4px 0px #ffffff, inset 5px 5px 10px 0px rgb(0 0 0 / 12%), inset 2px 2px 3px 0px rgb(0 0 0 / 7%), 1px 2px 3px 0px rgb(0 0 0 / 10%);}

textarea::-moz-selection { color:#000;}
textarea::selection { color: #000; }
textarea::-webkit-scrollbar {    width: 3px;}
textarea::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 2px #e4e4e4;}
textarea::-webkit-scrollbar-thumb {  background-color: #ffc21a;  outline: 1px solid #ffc21a;}
	
.logotipo {  width: 135px;height: 135px;
  display: flex;  flex-direction: column;align-items: center;  justify-content: center;
  -webkit-animation: scaled 2s infinite alternate;animation: scaled 2s infinite alternate;}
.abana{position: relative;top: 10px;background-image: url('images/abanaacauda-128.png');background-size: cover; box-shadow: 0 20px 10px rgba(198, 179, 220, 0.6);  border-radius: 50%;
animation-play-state: paused;}
.patas{position: absolute;top: 41px;background-image: url('images/patasdadas-128.png');background-size: cover;
border: solid 2px #f6eff9;border-radius: 50%;background-color: #efe5f4;
animation-play-state: paused;}

.patashaker	{animation-play-state: running;}	 
.abanashaker{animation-play-state: running;}
 
.titi  {font-family: 'Averia Sans Libre','Trebuchet MS', sans-serif;color: #44474b;font-size: 1.1em;
    letter-spacing: 0.12em;margin-top: 10px;}
  
.letring {width: 155px;height:21px; background-image: url('images/abanaacauda_letring.png');background-size: cover; padding-top: 10px;padding-bottom: 10px;margin: 5px;}
.jq-ry-group-wrapper {cursor: help; }/*stars*/
 .features {
  width: 98%;  height: 59%;
  background: #fff;
  margin-bottom: 7px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 20px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}
.ask{
	position: static;
    bottom: 40px;
    width: 98%;
    height: 200%;
	/*position: absolute;top: 238px;    width: 98%;    height: 62%;*/}

.features .block-info {    position: relative;    width: 100%;    height: 50px;
    display: flex;
    padding: 2px;    margin-bottom: 5px;}

.features .block-info .block-image {position: relative;top: 5px;height: 100%;width: 35px;
background-size: contain; background-repeat: no-repeat; background-image: url(images/certificados.png);}

.features .block-info .block-txt {height: 100%;width:calc(55%); font-size: 0.65em;  margin: 0;  padding: 0;  font-weight: bold;}
.features .block-info .block-rate {display: flex;justify-content: flex-end;align-items: center;}

.respostapergunta {
	position: absolute;top: 60px;right: 25px;pointer-events: all;cursor:pointer;
    width: 30px;height: 30px;
    color: #fff;    font-size: 23px;
    background: linear-gradient(50deg, purple, #5545ca);
    transform: translateY(-15px) rotate(45deg);
    border-radius: 7px;
    border: none;
    box-shadow: 4px 4px 5px rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;}
	
.respostapergunta i.fa.fa-eye-slash , i.fa.fa-eye{transform: translateY(15px) rotate(-45deg);
    position: relative;
    top: -17px;
    left: -3px;}
	
	
/* FIX FAZER Quando tem demasiadas letras o titulo fica animado
.txt_scrol {  display: inline-block;  white-space: nowrap;
  animation: floatText 25s infinite linear;
  padding-left: 0%; }
.txt_scrol:hover {animation-play-state: paused;}
@keyframes floatText {
  to {    transform: translateX(-100%);
  }
}
*/
.resposta a {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: white;
  text-decoration: none;
  text-shadow: 0px 0px 1px black;
}

@-webkit-keyframes scaled {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.10);
  }
}

@keyframes scaled {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.10);
  }
}
@-webkit-keyframes rotated {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotated {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*Patas dadas Logo anima*/
.stage {position: fixed;left: 0px;right:0px;top: 0px;
	/*position: fixed;left: 60px;right:auto;top: 6px;*/
	height: 70px;  width: 201px;  margin: auto;    
	perspective: 9999px;
    transform-style: preserve-3d;
    z-index: 100;}

	
.stagecenter{position: fixed;left: 0px;right:0px;top: 0px;}

.layer {  width: 100%;  height: 100%;  position: absolute;
  transform-style: preserve-3d;  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;  animation-fill-mode:forwards;  transform: rotateY(20deg) rotateX(15deg) translateZ(0);}

.layer:after {font: 35px/0.65 'Averia Sans Libre','Trebuchet MS', sans-serif;
    content: "PatasDadas";
    white-space: pre;
    text-align: center;
    height: 100%;    width: 100%;
    position: absolute;
    top: 0px;
    margin-top: 22px;
    color: whitesmoke;
    letter-spacing: 1px;
    text-shadow: 4px 0 10px rgb(0 0 0 / 13%);}
  
.layer:nth-child(1):after {  transform: translateZ(0px);}
.layer:nth-child(2):after {  transform: translateZ(-1.5px);}
.layer:nth-child(3):after {  transform: translateZ(-3px);}
.layer:nth-child(4):after {  transform: translateZ(-4.5px);}
.layer:nth-child(5):after {  transform: translateZ(-6px);}
.layer:nth-child(6):after {  transform: translateZ(-7.5px);}
.layer:nth-child(7):after {  transform: translateZ(-9px);}
.layer:nth-child(8):after {  transform: translateZ(-10.5px);}
.layer:nth-child(9):after {  transform: translateZ(-12px);}
.layer:nth-child(10):after {  transform: translateZ(-13.5px);}
.layer:nth-child(11):after {  transform: translateZ(-15px);}
.layer:nth-child(12):after {  transform: translateZ(-16.5px);}
.layer:nth-child(13):after {  transform: translateZ(-18px);}
.layer:nth-child(14):after {  transform: translateZ(-19.5px);}
.layer:nth-child(15):after {  transform: translateZ(-21px);}
.layer:nth-child(16):after {  transform: translateZ(-22.5px);}
.layer:nth-child(17):after {  transform: translateZ(-24px);}
.layer:nth-child(18):after {  transform: translateZ(-25.5px);}
.layer:nth-child(19):after { transform: translateZ(-27px);}
.layer:nth-child(20):after {  transform: translateZ(-28.5px);}
.layer:nth-child(n+10):after {  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);}
.layer:nth-child(n+11):after {  -webkit-text-stroke: 15px dodgerblue; /* text-shadow: 6px 0 6px #00366b, 5px 5px 5px #000000, 0 6px 6px #329cd6;*/}
.layer:nth-child(n+12):after {  -webkit-text-stroke: 15px #0077ea;}
.layer:last-child:after {  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);}
.layer:first-child:after {  color: #fff;  text-shadow: none;}
@keyframes ಠ_ಠ {  100% {    transform: rotateY(-10deg) rotateX(-10deg);  }
}

/*BTN Full screen*/
#GOFS {position:fixed;top:70px;left:11px; width:50px;    z-index: 999999; }
#GOFS button {  background-color:transparent;    font-size: 25px;    color: #ffffff;    border-style: hidden;  	margin: 10px;    cursor: pointer; }

/*butoes*/
.menucentro{opacity:0;display: none;}
.menucentroon{opacity:1;display: flex;
height:100%;width:100%;    
align-content: flex-start;
justify-content: center;}

/*CANDY*/
.menucentrocard {box-sizing: border-box;	overflow: hidden;}
.menucentrocard::before {
	content: '';
	position: absolute;
	width: 200%;	height: 200%;
	background: repeating-linear-gradient(
	white 0px,	white 7.5px,
	red 7.5px,	red 15px,
	white 15px,	white 22.5px,
	red 22.5px,	red 30px);
	transform: translateX(-20%) translateY(-20%) rotate(-45deg);
	animation: animate 10s linear infinite;}

.content {height: 100%;
display: flex;
align-items: center;
justify-content: center;
	position: relative;
	background-color: white;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	z-index: 2;}

.menucentrocard,.content {
	box-shadow: 0px 0px 5px pink,
				0px 0px 5px #fe8bb9;
	border-radius: 18px;}

.menucentrocard .content h1 {color: red;}
.menucentrocard .content p {	color: dimgray;}

@keyframes animate {	from {background-position: 0;	}
	to {	background-position: 0 180px;}
}
/*end candy*/
.menucentrocard{
width: calc(var(--cardh) - 20px);
height: calc(var(--cardv) - 20px);

	border: solid 4px #fff;
    padding: 20px;
    position: absolute; top: 90px; left: 0px;  right: 0px;z-index: 1;
    margin: auto;}
	
.spinner{position: fixed; top: -60px;  z-index: -20;  margin: auto;   
      -webkit-animation: spin 14s infinite linear;
    animation: spin 14s infinite linear; }
	
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}
		
.pataslogo{position:absolute; top:-20px;margin: auto;left: 0;right: 0;touch-action: none;
    user-select: none;-webkit-user-drag: none; pointer-events: none;
	/*width:220px;height:261px;*/
	width:128px;height:128px;
	background-image: url('images/patasdadas-128.png');background-size: cover;	}

.bubu{position: absolute;  bottom: 16px;}

#confetti{position: absolute;left:0px;top:0px;
height: 100%;width:100%;
z-index: 2;
touch-action: none;user-select: none;-webkit-user-drag: none; pointer-events: none;}
.confetti_hide{display:none;}
.confetti_show{display:block;}


/*MENU*/
.menu {position: absolute;
    top: 0px;
    z-index: 20;
    height: 70px;
    width: 100%;
    background-color: #f1f2f5;
    display: inline-flex;}
	
.menu button {margin: 5px;}

.custom-btn {position: relative;
    display: inline;
    width: 100%!important;
    height: 70px;
    border-radius: 14px;
    margin: 10px 0px 10px 0px;
    font-family: 'Averia Sans Libre', 'Trebuchet MS', sans-serif;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
  transition: all 0.3s ease;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;-webkit-touch-callout: none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
}


/* 3 */
.btn-3 {   width: 130px;  height: 70px;  line-height: 42px;  padding: 0;  border: none; }
.btn-3 span {  position: relative;  display: block;  width: 100%;  height: 100%;}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0px;
  top: 0px;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn-3:before {  height: 0%;  width: 2px;}
.btn-3:after {  width: 0%;  height: 2px;}
.btn-3:hover{   background: transparent;  box-shadow: none;}
.btn-3:hover:before {  height: 100%;}
.btn-3:hover:after {  width: 100%;}
.btn-3 span:hover{
   color: rgba(2,126,251,1);
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0px;
  bottom: 0px;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn-3 span:before {  width: 2px;  height: 0%;}
.btn-3 span:after {  width: 0%;  height: 2px;}
.btn-3 span:hover:before {  height: 100%;}
.btn-3 span:hover:after {  width: 100%;}

/* 5 */
.btn-5 {  width: 130px;  height: 70px;  line-height: 42px;  padding: 0px;  border: none; }
.btn-5:hover {  color: #329cd6;  background: transparent;   box-shadow:none;}
.btn-5:before,
.btn-5:after{
  content:'';
  position:absolute;
  top:0px;
  right:0px;
  height:2px;
  width:0px;
  background: #329cd6;
  box-shadow:
   -1px -1px 5px 0px #fff,
   7px 7px 20px 0px #fe8bb9,
   4px 4px 5px 0px #000;
  transition:400ms ease all;
}
.btn-5:after{  right:inherit;  top:inherit;  left:0px;  bottom:0px;}
.btn-5:hover:before,
.btn-5:hover:after{  width:100%;  transition:800ms ease all;}

/* 8 */
.btn-8 {   line-height: 42px;  padding: 0px;  border: none;     }
.btn-8 span {  position: relative;  display: block;  width: 100%;  height: 100%;}
.btn-8:before,
.btn-8:after {
  position: absolute;
  content: "";
  right: 0px;
  bottom: 0px;
  background: #c797eb;
  transition: all 0.3s ease;    }
   
.btn-8:before{   height: 0%;   width: 2px;}
.btn-8:after {  width: 0%;  height: 2px;
}
.btn-8:hover:before {  height: 100%;}
.btn-8:hover:after {  width: 100%;}
.btn-8:hover{  background: transparent;}
.btn-8 span:hover{  color: #c797eb;}
.btn-8 span:before,
.btn-8 span:after {
	position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  background: #c797eb;
  transition: all 0.3s ease;

}
.btn-8 span:before {  width: 2px;  height: 0%;}
.btn-8 span:after {  height: 2px;  width: 0%;}
.btn-8 span:hover:before {  height: 100%;}
.btn-8 span:hover:after {  width: 100%;}
      
/* 11 */
.btn-11 {  border: none;     color: #fff;    overflow: hidden;}
.btn-11:hover {    text-decoration: none;    color: #fff;}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .7;
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/*END Buttoes*/


/*Menu info letring*/
.container_ {  width: 100%;  height: 100vh;  margin: 0px auto;  overflow: hidden;}

.icon-button {
	background-color: white;
	border-radius: 3.6rem;
	cursor: pointer;
	display: inline-block;
	font-size: 2.0rem;
	height: 3.6rem;
	line-height: 3.6rem;
	margin: 0 5px;
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	width: 3.6rem;
}

.icon-button span {position: absolute;left: 50%;top: 50%;display: block;
height: 0px;width: 0px;	margin: 0px;border-radius: 0px;	
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;}
.icon-button:hover span {	width: 3.6rem;	height: 3.6rem;	border-radius: 3.6rem;	margin: -1.8rem;}
.youtube-play span {background-color: #f65314;}
.facebook span {	background-color: #329cd6;}
.gamepad span {	background-color: #93c431;}
.mobile span {	background-color: #fe8bb9;}

.icon-button i {
	background: none;
	color: white;
	height: 3.6rem;
	left: 0;top: 0;
	line-height: 3.6rem;
	position: absolute;
	
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 3.6rem;
	z-index: 10;}
.icon-button .fa-youtube-play {	color: #f65314;}
.icon-button .fa-facebook {	color: #329cd6;}
.icon-button .fa-gamepad {	color: #93c431 ;}
.icon-button .fa-mobile {	color: #fe8bb9 ;}
.icon-button:hover .fa-youtube-play,
.icon-button:hover .fa-facebook,
.icon-button:hover .fa-gamepad,
.icon-button:hover .fa-mobile {	color: white;}
.menutop-container {position: absolute;
	left: 10px;    top: 10px; 
    width: 50px;    height: 50px;
    border-radius: 50%;outline:none;
	border: 2px solid #fff;
       box-shadow: inset -3px -3px 5px 0px #d8ede8 , -1px -1px 4px 0px #d8ede8 , inset 5px 5px 10px 0px #f653141f, inset 2px 2px 3px 0px #f6531412, 1px 2px 3px 0px #f653141a;
	cursor: pointer;
	transition: all 0.3s; z-index:30;background-color: #ffc21a00;}

.menutop-container.full-menutop {
  border-radius: 0;
  padding: 0px !important;
  position: absolute;z-index: 30;
  width: 100%;  height: 100%;
  left: 0px;  top: 0px; bottom: 0px;
  transition: all 0.3s;
  background-color: #ffc21aff;
}

.full-menutop .menutop {  top: 20px;    left: 20px;}

.menutop {
 color: #fff;
 text-shadow: 1px 1px 4px #000000aa;
    font-size: 1.5em;
    position: absolute;
    z-index: 40;
    top: 10px;
    left: 12px;
    transition: all 0.3s;;}
	
.menutop i {  opacity: 0.7;  transform: scale(1);  transition: all 0.3s;}
.menutop i:hover {  opacity: 1;  transform: scale(1.2);  transition: all 0.3s;}

button#certo ,button#errado  {  background-color: #fe8bb9;    color: #ffffff;    border-color: #fff;
    width: 30px;height: 30px;
    font-size: 15px;text-align: center;
    border-style: solid;
    border-width: medium;
    border-radius: 50%; cursor: default; 
    position: relative;    left: -30px;    top: -12px;
    line-height: 26px;outline: none;-webkit-touch-callout: none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;}
	
/*Dice*/
#overandice {position: absolute;    z-index: 30;    top: 0px;    right: 0px;}
.overandice {width: 100%;  height: 0%;  opacity: 0;  visibility: hidden;  overflow: hidden; }
.overandice.opendice { opacity: 1;  visibility: visible;height: 100%;    touch-action: none; }
/*.overandice.opendice #wheel {animation: fadeInRight 0.5s ease forwards;  animation-delay: 0.35s;}*/


.container_dice {  width: 100%;  height: 100vh;  margin: 0 auto;  overflow: hidden;}
.menudice-container_dice { position: absolute;
    right: 10px;    top: 10px;
    width: 50px;    height: 50px;
    border-radius: 50%;
  	border: 2px solid #fff;
    box-shadow: inset -3px -3px 5px 0px #d8ede8 , -1px -1px 4px 0px #d8ede8 , inset 5px 5px 10px 0px #f653141f, inset 2px 2px 3px 0px #f6531412, 1px 2px 3px 0px #f653141a;
	transition: all 0.3s; z-index:24;
	background-color: #00ffc200 ;}

.menudice-container_dice.full-menudice {
  border-radius: 0;
  outline: none;-webkit-touch-callout: none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;
  padding: 0 !important;
  position: absolute;z-index: 30;
  width: 100%;  height: 100%;
  right: 0;  top: 0;
  transition: all 0.3s;
  background-color: #d7ede8ff ;
}

.full-menudice .menudice {  top: 20px;    right: 20px;}

.menudice {
  color: white;
    font-size: 1.5em;
    position: absolute; z-index: 40;
    top: 120px;
    left: 120px;
	  transition: all 0.3s;}
	
.menudice i {  opacity: 0.7;  transform: scale(1);  transition: all 0.3s;}
.menudice i:hover {  opacity: 1;  transform: scale(1.2);  transition: all 0.3s;}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    right: 20%;  }
 
  100% {
    opacity: 1;
    right: 0;  }
}

/*dice wheel*/
.first-face {display: flex;justify-content: center;align-items: center;}
.second-face {display: flex; justify-content: space-between;}
.second-face .pip:nth-of-type(2) {align-self: flex-end;}
.third-face { display: flex; justify-content: space-between;}
.third-face .pip:nth-of-type(2) {  align-self: center;}
.third-face .pip:nth-of-type(3) {  align-self: flex-end;}
.fourth-face, .sixth-face {  display: flex;  justify-content: space-between;}
.fourth-face .column, .sixth-face .column {display: flex;flex-direction: column;justify-content: space-between;}
.fifth-face {display: flex;  justify-content: space-between;}
.fifth-face .column {  display: flex;  flex-direction: column; justify-content: space-between;}
.fifth-face .column:nth-of-type(2) {  justify-content: center;}

[class$="face"] {width: 80px;height: 80px;  -o-object-fit: contain;object-fit: contain;}
.pip {width: 20px;height: 20px;margin: 2px;border-radius: 50%; background-color: #333;position: relative; top:-220px;left: -40px; z-index: 10000000;display: block;}
 
/*whell*/
/*#overlaydice:before {
    position: absolute;
    right: -50px;
    top: -56px;
    content: "";
    width: 100px;
    height: 100px;
    background: linear-gradient(182deg, #000000 0%, #ff000000 100%);
    transform: rotate(45deg);
    z-index: 1;
}*/

.coner{width: 150px;height: 100px;font-size:30px;position:fixed;z-index:100;content: "";border:none;background: linear-gradient(182deg, #859891 0%, #ff000000 100%); cursor:pointer;
 -webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;cursor:pointer;}
.float-top-right{top:-25px;right:-50px;transform: rotate(45deg);}
.float-top-left{top:-25px;left:-50px;transform: rotate(-45deg);}
.float-bottom-right{bottom:-25px;right:-50px;transform: rotate(135deg);}
.float-bottom-left{bottom:-25px;left:-50px;transform: rotate(225deg);}
.floa{color:#fff;	margin-top:16px;}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}


#overlaydice{position: absolute;width: 100%; height: 100%; 
top:0px;bottom:0px;left:0px;right:0px;margin:auto;
	    background: linear-gradient(160deg, #259191 0%, #e4e6eb 100%);
		background-image: url('images/spin.jpg');background-size: cover;background-position: center;

	display: grid;
    overflow: hidden;
    justify-content: center;
    align-content: center;
	
	-webkit-appearance:none;
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none; }
  
#overlaydice{animation: fadeInLeft 0.5s ease forwards; animation-delay: 0.35s;}
#wheel{cursor:pointer;
	width:var(--size);height:var(--size);
	border-radius:50%;	
	position:relative;
	overflow:hidden;
	border:8px solid #fff;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
	transform: rotate(0deg);}

#wheel:before{
	content:'';
	position:absolute;
	border:12px solid rgba(0,0,0,0.1);
	width:var(--sizer);
	height:var(--sizer);
	border-radius:50%;	z-index:1000;	
}

#inner-wheel{	width:100%;	height:100%;	
	-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
	-moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
	-o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
	-ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
	transition:         all 6s cubic-bezier(0,.99,.44,.99);	
}
#wheel div.sec{
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: var(--pie) var(--pipe) 0;
	border-color: #19c transparent;
	transform-origin: var(--pipe) var(--pie);
	left: 118px;
    top: 0px;	
	opacity:1;
}

#wheel div.sec:nth-child(1){
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	border-color: #93c431 transparent;	
}
#wheel div.sec:nth-child(2){
	transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	border-color: #329cd6 transparent;	
}
#wheel div.sec:nth-child(3){
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	border-color: #34495e transparent;	
}
#wheel div.sec:nth-child(4){
	transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	-moz-transform: rotate(240deg);
	-o-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	border-color: #ffc21a transparent;	
}
#wheel div.sec:nth-child(5){
	transform: rotate(300deg);
	-webkit-transform: rotate(300deg);
	-moz-transform: rotate(300deg);
	-o-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	border-color: #f65314 transparent;	
}
#wheel div.sec:nth-child(6){/*rosa*/
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	border-color: #fe8bb9 transparent;	
}
#wheel div.sec .fa{
	margin-top: -100px;
	color: rgba(0,0,0,0.2);
	position: relative;
	z-index: 10000000;
	display: block;
	text-align: center;
	font-size:36px;
	margin-left:-15px;
	
	text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}

#spin{
	width:68px;	height:68px;
	position:absolute;	top:50%;	left:50%;
	margin:-34px 0 0 -34px;
	border-radius:50%;
	box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
	z-index:1000;
	background:#fff;
	cursor:pointer;
	font-family: 'Averia Sans Libre','Trebuchet MS', sans-serif;
  
  -webkit-user-select: none; 
  -moz-user-select: none;    
  -ms-user-select: none;     
  -o-user-select: none;
  user-select: none;   
}


#spin:after{font-family: "FontAwesome";	content:"\f004";font-size: 30px;text-align:center;line-height:68px;color:#fff;text-shadow: 1px 1px 4px #000000aa;position: relative;	z-index: 100000;	width:68px;	height:68px;	display:block;}

#spin:before{
	content:"";
	position:absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 28px 20px;
	border-color: transparent transparent #ffffff transparent;
	top:-12px;
	left:14px;
}

#inner-spin{
	width:54px;	height:54px;
	position:absolute;	top:50%;	left:50%;
	margin:-27px 0 0 -27px;
	border-radius:50%;
	background:#eee;
	z-index:999;
	box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;
	
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
}

#spin:active #inner-spin{	box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;}
#spin:active:after{	font-size:15px;	}

#shine{
	width:var(--size);
	height:var(--size);
	position:absolute;
	top:0px;
	left:0px;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
opacity:0.3;}

@-webkit-keyframes hh {
  0%, 100%{    transform: rotate(0deg);    -webkit-transform: rotate(0deg);  }
  50%{    transform: rotate(7deg);    -webkit-transform: rotate(7deg);  }
}
@keyframes hh {
   0%, 100%{    transform: rotate(0deg);    -webkit-transform: rotate(0deg);  }
  50%{    transform: rotate(7deg);    -webkit-transform: rotate(7deg);  }
}
.spin {  -webkit-animation: hh 0.1s; animation: hh 0.1s;}
/*end dice*/

/*menu top*/
.spacer2, .spacer{width: 50px!important;min-width: 50px;resize: none;border: none;  }
/*social*/	
.socialfoot{position: absolute; right: 0; left: -10px;bottom: 0px;z-index:999;
    height: 70px;    width: -webkit-fill-available; margin: auto;
outline: none;-webkit-touch-callout: none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;}
.socialfoot.open a{animation: fadeInbottom 0.5s ease forwards;box-shadow: #f65314 0px 0px 3px;}
.socialfoot.open a:nth-child(1) {animation-delay: 0.7s;}
.socialfoot.open a:nth-child(2) {animation-delay: 0.8s;}
.socialfoot.open a:nth-child(3) {animation-delay: 0.9s;}
.socialfoot.open a:nth-child(4) {animation-delay: 1s;}
@keyframes fadeInbottom {
  0% { bottom: 20%;  }
  100% {  bottom: 80px;}
}
	
	
.overandover-menutop img {margin:0px 5px 5px 5px;}
#overandover {position: fixed;    z-index: 30;      top: 70px;  left: 0px;right:0px;}
.overandover {width: 100%;  height: 0%;  opacity: 0;  visibility: hidden;  overflow: hidden;}
.overandover.open { opacity: 0.9;  visibility: visible;  height: 100%;}
.overandover.open li { 
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.35s;
}
.overandover.open li:nth-of-type(2) {  animation-delay: 0.4s;}
.overandover.open li:nth-of-type(3) {  animation-delay: 0.45s;}
.overandover.open li:nth-of-type(4) {  animation-delay: 0.5s;}
.overandover nav {font-family:'Averia Sans Libre','Trebuchet MS', sans-serif;font-size: 1.5em;font-weight: 400;text-align: center;}

.overandover ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;    z-index: 30;
  width: -webkit-fill-available;
}
.overandover ul li {
    display: block;
    position: relative;
    opacity: 0;color: #fff;
}
.overandover ul li a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  opacity: 0.7;
  transform: scale(1);
  transition: all 0.3s;
}
.overandover ul li a:hover, .overandover ul li a:focus, .overandover ul li a:active {
  opacity: 1;
  transform: scale(1.2);
  transition: all 0.3s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}


/*SVG logo*/
.svg_logo { opacity: 0;display:none;}
.svg_logo_on{display:block;position: initial;  z-index: -999;
 animation: fadeIn linear 7s forwards;
  -webkit-animation: fadeIn linear 7s forwards;
  -moz-animation: fadeIn linear 7s forwards;
  -o-animation: fadeIn linear 7s forwards;
  -ms-animation: fadeIn linear 7s forwards;}
 @keyframes fadeIn {  0% {opacity:0;}  100% {opacity:1;}}
@-moz-keyframes fadeIn {  0% {opacity:0;}  100% {opacity:1;}}
@-webkit-keyframes fadeIn {  0% {opacity:0;}  100% {opacity:1;}}
@-o-keyframes fadeIn {  0% {opacity:0;}  100% {opacity:1;}}
@-ms-keyframes fadeIn {  0% {opacity:0;}  100% {opacity:1;}}
 
#svg-right, #svg-left,#svg-center {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
 position: absolute;   top: 50%;    bottom: 50%;    left: 0;    right: 0;    margin: auto;    z-index: 1;
    width: 70%;    height: 50%;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    align-items: center;     }

.heart{ animation: blobby2 4s infinite;backdrop-filter: blur(5px);color:red;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJoZWFydCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI2MDAuMjVweCIgaGVpZ2h0PSI0NDcuNXB4IiB2aWV3Qm94PSIwIDAgNjAwLjI1IDQ0Ny41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAuMjUgNDQ3LjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IkNhcGFfMSI+DQoJPGc+DQoJCTxwYXRoIGNsYXNzPSJibG9iaGVhcnQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik01OTUuMDE1LDEyNi41QzU4Ny4zNDgsNzguMTY3LDUzMi41ODMsMy4wMTEsNDQwLjIxNiwzLjAxMWMtNjEuNTM2LDAtMTA3Ljk4MiwxNi45OTYtMTM5LjY4NSw2MS40MTgNCgkJCUMyNjkuMTE0LDE5LjQzMiwyMjEuNjc3LDMsMTYxLjEyOCwzQzY4Ljc3NSwzLDkuNDg0LDg1Ljk5LDMuODE5LDE1NC40MjNjLTQuMjg0LDUxLjc0LDQuNDg3LDY4LjE2NiwyNi4zNTIsMTA2LjA0Ng0KCQkJYzIwLjIyNCwzNS4wMzgsNTYuMDIxLDYzLjgzLDEwMy4yMTQsOTUuNTgxYzYwLjc4NCw0MC44OTYsMTU0LjU2Myw4OS4yMDEsMTcxLjk0NCw4OS4yMDFjMTkuNDU3LDAsMTA3LjExMy00OS45NTUsMTU3LjE0Ni04Ny42MTUNCgkJCWM1NC45NzItNDMuMjk1LDgyLjAxMi01OC4wOTYsMTE3LjkzNC0xMTcuMjA5QzU5OS4yMDIsMjA5LjUsNjAxLjQxLDE2Ni44MTYsNTk1LjAxNSwxMjYuNXogTTU1NC4yOTksMjU2LjQyMg0KCQkJYy0xOS42MTcsMjUuNzQ0LTUwLjg1LDUyLjIyMy05MS41NDksODQuNzJjLTUzLjMzOSw0Mi41OS0xMzYuNTksOTEuODg5LTE1Ny4yNzEsOTEuNjc2DQoJCQljLTIwLjgyOS0wLjIxMy0xMDQuNTQzLTUwLjI1LTE2MC43NTYtODkuMTM3Yy00Mi45MTItMjkuNjg3LTgxLjc1My01My4wNDYtMTA4LjAwNC0xMDcuMTMzDQoJCQljLTEzLjg2My0yOC41NjMtMTQuOTEzLTUzLjQ3Ni0xMS4zODMtODQuODA1QzMxLjA2Miw5My43NTcsODEuODQ0LDI1LjU0NCwxNjEuMTI4LDI1LjU0NGM1OC41MDMsMCwxMDAuODg3LDguNjIyLDEzMS4xNDMsNTYuMjQ0DQoJCQljMCwwLDQuNDIzLDguOTg2LDguMjAyLDguOTg1YzMuNzc3LTAuMDAxLDkuMDE4LTguMTYxLDkuMDE4LTguMTYxYzI0LjA1MS00Ny42ODEsNzcuOTQ4LTYwLjk4NywxMzIuMzg3LTU5LjUzMw0KCQkJYzcyLjAwMywxLjkyMywxMzAuMDU0LDU4LjY5NCwxMzYuMDMxLDEyNi41NTRDNTgxLjY4MiwxOTIuNDY0LDU3NC41MiwyMjkuODg2LDU1NC4yOTksMjU2LjQyMnoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==")
}
.paw1 {animation: blobby 8s infinite;backdrop-filter: blur(5px);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJzdmctbGVmdCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI2MDAuMjVweCIgaGVpZ2h0PSI0NDcuNXB4IiB2aWV3Qm94PSIwIDAgNjAwLjI1IDQ0Ny41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAuMjUgNDQ3LjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggY2xhc3M9ImJsb2JwYXcxIiBmaWxsPSIjRkZGRkZGIiBkPSJNMjQ4LjQ2LDE3My43NThjLTI2LjAzOC0yMC4yNzUtNjkuNTkyLTE4LjU1My04Ni4wOS02Ljc1N2MtMTYuNDk4LDExLjc5NS0zNC4zNTIsNTguNjktMjMuNTg4LDg5Ljg4OA0KCWM1LjQ0NSwxNS43NzEsMTUuMTczLDI5LjMzNCwyNC42NTksMzEuMjg0YzcuMTQsMS40NzIsMTUuMjg1LTIuNjY4LDI0LjE5OS05LjA0M2M2LjgzNC01LjIxNyw5Ljk3MS0xNS4wNzcsMTMuODQ4LTIyLjM4Mg0KCWMzLjE5NC02LjE0OSw3LjgzMS0xMS42OTQsMTMuNTA1LTE2LjE0NGM2LjA0Ni0zLjkyOCwxMi43OTUtNi41MjQsMTkuNjQzLTcuNTU1YzguMTY3LTEuMzA2LDkuNTk0LTQuNDkzLDE2Ljc0MS05LjI3Mw0KCWM4LjkxNy02LjM3MiwxMy45MDctMTMuMjcxLDE0LjgyNS0yMC41MDdDMjY3LjQyOCwxOTMuNjYxLDI2MS42MjEsMTg0LjAxMiwyNDguNDYsMTczLjc1OHoiLz4NCjxwYXRoIGNsYXNzPSJibG9icGF3MSIgZmlsbD0iI0ZGRkZGRiIgZD0iTTYwLjg4NSwxMTMuODYyYy0xNC4xNjgsMTMuNjcyLTEwLjAxOSw0MC4xODMsOS40NDYsNjAuMzU0YzE5LjQ2MiwyMC4xNzEsNDUuODEsMjUuMjYxLDU5Ljk3OCwxMS41ODkNCgljMTQuMTY3LTEzLjY3MSwxMC4wMTktNDAuMTg0LTkuNDQ1LTYwLjM1NEMxMDEuMzk5LDEwNS4yOCw3NS4wNTMsMTAwLjE5LDYwLjg4NSwxMTMuODYyeiIvPg0KPHBhdGggY2xhc3M9ImJsb2JwYXcxIiBmaWxsPSIjRkZGRkZGIiBkPSJNMTA0Ljg5MSwyMTAuMDc1Yy0xOS43NzctMTEuMzItNDEuNTM3LTkuNzg0LTQ5LjUyNSwzLjQ4NGMtNy45ODcsMTMuMjcsMS4yMTEsMzIuNTYxLDIxLjAwMSw0My44NzQNCgljOC40MTQsNS4wMzEsMTguMTI3LDcuNjI1LDI4LjA3OSw3LjUwMWM1LjYxNS0wLjA1OCwxMS4xMjgtMS43ODcsMTUuODI5LTQuOTU5YzIuMjYyLTEuNjE5LDQuMTY4LTMuNjczLDUuNTk2LTYuMDQzDQoJYzQuMDI1LTcuNTM1LDMuODAzLTE2LjUwMS0wLjU4Ni0yMy41OTNDMTIwLjU1NCwyMjEuNzk5LDExMy40OTYsMjE0Ljc4OCwxMDQuODkxLDIxMC4wNzV6Ii8+DQo8cGF0aCBjbGFzcz0iYmxvYnBhdzEiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xODQuMzYsMTM5LjAwM2MxNi44NTctMTAuMTcyLDE4Ljc1LTM2Ljg4OSw0LjMwNy02MC44MjNjLTE0LjQ0MS0yMy45MzQtMzguOTYyLTM0LjcxMS01NS44MTgtMjQuNTQNCgljLTE2Ljg1NywxMC4xNzItMTguNzQ5LDM2Ljg5LTQuMzA3LDYwLjgyNEMxNDIuOTgzLDEzOC4zOTYsMTY3LjUwNSwxNDkuMTc1LDE4NC4zNiwxMzkuMDAzeiIvPg0KPHBhdGggY2xhc3M9ImJsb2JwYXcxIiBmaWxsPSIjRkZGRkZGIiBkPSJNMjI4LjA3NiwxNDAuNzU4YzUuNTIyLDYuNTIzLDE0LjEyNCw5LjYyMSwyMi42MzIsOC4xNDdjMi43MTktMC42MjgsNS4yNzktMS44MTYsNy41Mi0zLjQ4OA0KCWM0LjQ4OS0zLjUyOSw3LjgyMS04LjMwOCw5LjU3Mi0xMy43MThjMy4xMzQtOS41NzUsMy41NzEtMTkuNzkyLDEuMjU5LTI5LjUzMmMtNS4xNjgtMjMuNzc5LTIyLjY0OS0zNy4zODQtMzYuMDItMzQuMzQzDQoJYy0xNS4yMjMsMy40NS0yMy4zMDgsMjQuMDA0LTE4LjM2OCw0Ni43MjlDMjE2LjYxOCwxMjQuMzgsMjIxLjI1NSwxMzMuNDQ4LDIyOC4wNzYsMTQwLjc1OHoiLz4NCjwvc3ZnPg0K")
}
.paw2 {animation: blobby 8s infinite;backdrop-filter: blur(5px);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJzdmctcmlnaHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjAwLjI1cHgiIGhlaWdodD0iNDQ3LjVweCIgdmlld0JveD0iMCAwIDYwMC4yNSA0NDcuNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjAwLjI1IDQ0Ny41IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGNsYXNzPSJibG9icGF3MiIgIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMTkuNDk0LDQyMi42MDljMjcuNTMzLTEyLjc3NSw4Mi4zNzYtNDkuMzI4LDEyNS43NzktODEuNzc5DQoJYzQzLjM0Ni0zMi40MDcsNDkuNDQ2LTM3Ljc5Nyw2NC44ODEtNTIuODk1YzM5LjE5MS0zOC4zMzYsNDUuNjEzLTUxLjcwNywzNi44NDQtNzUuMjIyYy01LjUyNS0xMS4xMjMtMTUuMzMtMTUuMTU0LTI2LjMxNy0xOC44NzYNCgljMTMuMDcxLTExLjUwNSwyNS41MTMtMzQuNzU4LDI1LjkwOS01MS42MTJjMC41MjMtMTcuNTYtMy4wMzQtMzEuMDA1LTE3LjAzMy00Mi4wMTZjLTE3LjEwOC0xMC4yMDYtMzYuNDg1LTIuMTM2LTQ1LjczMiwwLjc0DQoJYzEuMTk0LTE3LjExNyw0LjYxOC0yOS40MjItOC41OTctNDMuNTM1Yy0xMi4xOTYtMTMuMDIzLTI2LjE2Ni0xNS43ODYtNDMuOTYzLTExLjM4MWMtMTcuMSw0LjEzLTMyLjg0MSwyNC42MDQtNDAuNDQ0LDQyLjMyMw0KCWMtNS4wMjUtNy42OTYtOS40NDEtMTQuNjk1LTI1Ljc3NS0xOC44NjNjLTEwLjgyNC0yLjc2Mi0zMS4wMTQsMS41NjctNDYuNDczLDMxLjk5Yy0xMC44NjcsMjEuMzg3LTE2LjQ2Niw3MC4wNjctMjQuNjEyLDk1LjMzNQ0KCWMtMjUuMjE0LDc0LjAyLTEwMC42MjIsMTIwLjc4Ny0xMTYuNjAxLDE0Mi4wMzFjLTQuNTM5LDYuMDY1LTYuNTU1LDkuOTksMi41NjcsMTYuNDQ3YzAsMCw3OC41MzEsNTEuMDgyLDExMC42MzYsNjYuNjYyDQoJQzMwMy4wMzEsNDI4LjAxMiwzMDkuNjI5LDQyNy4xODgsMzE5LjQ5NCw0MjIuNjA5eiBNNTIyLjk5NSwxMTYuNTg5YzE0LjE0MiwxMy4wNTIsOC45MDcsNDQuNTA1LTEwLjg2NSw2NC4yMzENCgljLTE5Ljc3LDE5LjcyOC0zNi4xODUsMjMuOTctNDkuNzU3LDExLjkwMmMtMTQuMzgyLTEyLjc4OC0xMC4wODItNDUuNjksMTAuMDQxLTY1LjA1OA0KCUM0ODkuOTY2LDExMC43NzMsNTA4Ljg1NCwxMDMuNTM1LDUyMi45OTUsMTE2LjU4OXogTTM0Ni4yNzcsMTY1LjczM2MtNi4wNTgsMC4wODQtMTAuNjQ2LTMuNDQzLTEzLjE2My02LjA1DQoJYy0zLjg4OC00LjAyOC02LjQ4My0xMi45ODUtNi40NzQtMTguNDY5YzAuMDA4LTUuMjQ1LTAuOTY3LTEzLjQ1MywxLjgzNi0yMi44MDJjNi4zNy0yMi44NDMsMjAuNDk0LTM2LjMzOSwzMy43ODgtMzMuMDM1DQoJYzE1LjEzNiwzLjc1LDIwLjQ4MiwxOS45OTksMTYuMTY2LDM5Ljg5MWMtMi4wNjgsOS41MzItMy45MjQsMTcuMTQ3LTEwLjA0NywyNi45NDENCglDMzYzLjQwNCwxNjAuMTc1LDM1NC45ODcsMTY1LjYxMiwzNDYuMjc3LDE2NS43MzN6IE00MDYuMzM3LDg5LjA1M2MxNS4xMjUtMjMuMDg4LDMyLjY0Ni0zNS44OTMsNDkuMzYtMjUuOTk3DQoJYzE2LjcxMyw5Ljg5NiwxNy45NTcsMzQuOTEsMi44MzIsNTcuOTk3Yy0xNS4xMjUsMjMuMDg3LTMzLjQ3MSwzNy41NDMtNTAuMTgyLDI3LjY0OA0KCUMzOTEuNjM1LDEzOC44MDQsMzkxLjIxNCwxMTIuMTQxLDQwNi4zMzcsODkuMDUzeiBNNDI3LjgyNywyOTUuNTczYy03LjM5MiwxLjQzNC0xNS42NTUtMC45MTMtMjQuNTUxLTYuOTY4DQoJYy02LjgwNy00Ljk1NS0xMS40NzgtMTcuNzk4LTE1LjE2Mi0yNC43NjFjLTMuMDI3LTUuODU5LTUuOTE2LTEwLjMxNC0xMS41NjMtMTQuNTQyYy02LjA0Ny0zLjcyOC0xMS4yMjYtNC41MzItMTguMjE0LTUuNDg5DQoJYy04LjMzNi0xLjIxNi0xNS45OTUtMy44MzUtMjQuNDItMTMuNzEzYy02Ljk4MS04LjE4Ni02LjM5Ny0yMC4wOTktNS4zMTUtMjYuOTVjMS4xNS03LjI5MSw3LjY5MS0xNC40MjIsMjIuNzI3LTIyLjQ4OQ0KCWMyMS42MzctMTEuNjA4LDUxLjg1NS0xMy4yMjIsNzMuMjA2LTQuMzQ5YzIwLjg5Niw4LjY4NSwzMi40NDEsMzkuNzQ5LDI4Ljg2Nyw3OC41MQ0KCUM0NTEuODc0LDI3MS40MDEsNDM3LjY1LDI5My42NzIsNDI3LjgyNywyOTUuNTczeiBNNDg5Ljc4NSwyNzEuMDI1Yy01LjY0OS0wLjA1MS0xMS4xNjQtMC4wNjctMTUuODMxLTMuMTMxDQoJYy0yLjI0NS0xLjU2MS00LjEyMi0zLjU0Ni01LjUxMi01LjgzN2MtMy44OTktNy4yODEtMy40OTgtMTcuNiwxLjA2Mi0yNC40NmM0LjkzMy04LjI2MSwxMC41MjQtMTYuNjk3LDE5LjI3OS0yMS4yNg0KCWMyMC4xMzQtMTAuOTYzLDM2LjIyOC0xMC4zMjIsNDQuMDAyLDIuNDk5YzcuNzc1LDEyLjgyMi00LjA1MiwzMS41NzQtMTQuNTg5LDM5LjEzOQ0KCUM1MTAuMTkxLDI2My43MjIsNDk5Ljc5OCwyNzEuMTM1LDQ4OS43ODUsMjcxLjAyNXoiLz4NCjwvc3ZnPg0K")
}


@keyframes blobby {
  0% {opacity: 0;    transform: scale(1);}
  50% {opacity: 1;    transform: scale(1.08);}
  100% {opacity: 0;    transform: scale(1);}
}
@keyframes blobby2 {
  0% {opacity: 1;    transform: scale(1);}
  50% {opacity: 0;    transform: scale(1.18);}
  100% {opacity: 1;    transform: scale(1);}
}


i.fa.fa-check:hover {color:#93c431;}
i.fa.fa-remove:hover {color:#ffc21a;}
i.fa.fa-cog  {text-shadow: 1px 1px 4px #000000aa;   font-size: 35px;color: #fff; 
position: fixed;cursor:pointer;
  top: 11px;    right: 9px;
 z-index: 999999;
 margin: 6px 11px 11px 8px;  }


span.jogadas span{display: block;height: 20px;text-align: left;text-shadow: 0 0 3px rgba(0,0,0,0.5);}
span.jogadas span.num{padding-right: calc(50% + 5px);text-align: right;}
span.jogadas span.of{padding-left: calc(50% + 5px);padding-top: 4px;	height: 16px;}
span.jogadas {color: #fff;display:inline-block;
font-family: 'Averia Sans Libre','Trebuchet MS', sans-serif;margin-right: 39px;
font-size:16px;font-weight:bold;height:40px;line-height:16px; min-width:40px;position:relative;top: 10px;}

span.jogadas::after {
    content: '';
    height: 1px;    width: 57px;
    position: absolute;    bottom: 0;    left: 50%;
    margin-left: -20px;
    background-color: #fe8bb9;    box-shadow: 0 0 3px rgb(0 0 0 / 100%);
    -webkit-transform-origin: 0 0;    -ms-transform-origin: 0 0;    transform-origin: 0 0;
    -webkit-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    transform: rotate(-45deg);}

/*Menu indent*/
.morph.active, .morph:active, .morph:focus {cursor:default;
    border: 2px solid #fafafa;
    box-shadow: inset -3px -3px 5px 0px #ffffff, -1px -1px 4px 0px #ffffff, inset 5px 5px 10px 0px rgb(0 0 0 / 12%), inset 2px 2px 3px 0px rgb(0 0 0 / 7%), 1px 2px 3px 0px rgb(0 0 0 / 10%);
}
.btn {width: 100%;
    border-radius: 1.2rem;
	text-align: center; font-family: 'Averia Sans Libre','Trebuchet MS', sans-serif;  font-size: 22px; color:#329cd6; }

.morph {
    border: 2px solid transparent;
    background: linear-gradient(160deg, #f0f1f4 0%, #e4e6eb 100%);
    box-shadow: -3px -3px 6px 2px #ffffff, 5px 5px 8px 0px rgb(0 0 0 / 17%), 1px 2px 2px 0px rgb(0 0 0 / 10%);
    transition: 0.1s;}


.patasdadas {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.loaded.patasdadas {  opacity: 1;}

.patasdadas--carta_notaus {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  z-index: 50;
  width: 100%;
  text-align: center;
  pointer-events: none;box-shadow: 5px 10px #291751;
}

.patasdadas--carta_notaus i { text-shadow: 0 0 3px #291751;
  font-size: 100px;
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.2s ease-in-out;
  position: absolute;
  width: 100px;
  margin-left: -50px;
}

.patasdadas_love .fa-check {  opacity: 1;  transform: scale(1);color:#93c431 ;}

.patasdadas_nope .fa-remove {  opacity: 1;  transform: scale(1);color:#ffc21a ;}
#nope:disabled { opacity: 0.5; color: darkgray;}
#love:disabled { opacity: 0.5; color: darkgray;}

.patasdadas--cards {
flex-grow: 1;
  padding-top: 90px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 10;
}

:root {
--size: 582px;
--sizer: 571px;
--pie: 286px;
--pipe: 165px;
--cardh:400px;
--cardv:637px;
}
.patasdadas--card { box-shadow: 1px 1px 20px #291751;
  display: inline-block;
  width: calc(var(--cardh) - 20px);
  height: calc(var(--cardv) - 20px);
  background: #FFFFFF;
  padding-bottom: 40px;
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  will-change: transform;
  transition: all 0.3s ease-in-out;
  cursor: -webkit-grab;
  cursor: grab;
}

.moving.patasdadas--card {box-shadow: 20px 20px 10px #00000055;
  transition: none;  cursor: -webkit-grabbing;  cursor: grabbing;}

.patasdadas--card img {
  max-width: 100%;
  pointer-events: none;
}

.patasdadas--card h3 {
  margin-top: 32px;
  font-size: 32px;
  padding: 0 16px;
  pointer-events: none;
}

.patasdadas--card p {
  margin-top: 24px;
  font-size: 20px;
  padding: 0 16px;
  pointer-events: none;
  align-items: flex-end;
  
}

.patasdadas--buttones {margin-left:25px;/*center menu debaixo*/
  flex: 0 0 100px;
  text-align: center;
  padding-top: 20px;
  position: inherit;
   z-index: 10;
}

.patasdadas--buttones button {cursor:pointer;
  border-radius: 50%;
  line-height: 60px;
  width: 60px;height: 60px;
  border: 0;
  background: #FFFFFF;box-shadow: #291751 0px 0px 3px;
  display: inline-block;
  margin: 0 8px;
}

.patasdadas--buttones button:focus {outline: none;-webkit-touch-callout: none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent; }
.patasdadas--buttones i {  font-size: 32px;  vertical-align: middle;}

.fa-heart  {  color: #291751 ; }
.fa-remove { color: #291751;}