.mid-right-bg{
	display: none;
	position: absolute;
	top: 480px;
    left: calc(50% + 670px);
}

.top-left-bg{
	position: absolute;
	top: -200px;
	left: -250px;
	
}

.top-right-bg{
	position: absolute;
    right: -205px;
    top: -330px;
}
.coffee{
	position: absolute;
	z-index: 1;
	left: calc(40% - 290px);
    top: 75%;
}

.coffee img{
	max-width: 90%;
}

.coffee.selectedStage{
	right: calc(2% - 300px);
	top: 40%;
	left: auto;
}

.base-left-bg{
	position: absolute;
	bottom: -200px;
	left: calc(50% - 700px);
	/*animation-name: test;*/
  	animation-duration: 3600ms;
	animation-delay: 1200ms;
  	animation-iteration-count: infinite;
}

.base-right-bg{
	position: absolute;
	bottom: -200px;
	left: calc(50% + 20px);
}

.maxwidth-wrapper{
	z-index: 20;
	padding:0 5%;
	padding-bottom: 120px;
	position: relative;
}

.maxwidth-wrapper.quiz{
	/*z-index: 0;*/
}

.maxwidth-wrapper.quiz .classification{
	z-index: 20;
	position: relative;
}

.maxwidth-wrapper.selectStage{
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 0px;
}

.blends-wrapper{
	padding: 0 10%;
	margin-bottom: 30px;
	position: relative;
	z-index: 20;
	padding-top:75px;
}

.blends-wrapper img:last-child{
	/*animation-name: croffee;*/
	animation-duration: 5600ms;
  	animation-delay: 500ms;
	animation-iteration-count: infinite;
}

.blends-wrapper img.tag{
	animation-name: croffee-tag;
	animation-duration: 2500ms;
  	animation-delay: 1000ms;
	animation-iteration-count: infinite;
}

.blends-wrapper .tag{
	position: absolute;
	width: auto;
	z-index: 20;
	top: 40px;
    left: calc(50% - 290px);
}

.under-blends{
	margin-left: 30%;
	margin-top: -30px;
	background-repeat: no-repeat;
}

.blends-wrapper img{
	max-width: 100%;
}

.absolute{
	padding: 0 5%;
	position: relative;
}
.mobile-element-wrapper{
	display:none;
    justify-content: center;
}

.flex{
	display:flex;
	width: 70%;
}
.wrapper-type{
	margin-top: -165px;
}

.vote{
	margin-top: 215px;
}

.vote > .wrapper-type{
	display: flex;
    height: 322px;
    width: 325px;
    margin-bottom: -140px;
	position: relative;
	pointer-events: none;
}

.vote > .wrapper-type > .machine{
	padding-top: 103%;
	width: 100%;
    max-width: 100%;
    margin: 0 auto;
}


.white-link{
	color:white!important;
	text-decoration: underline!important;
}

.note{
	font-family: 'ClanOTBOOK'!important;
	font-weight: 400;
	padding: 0 40px;
	margin-top: -40px;
    margin-bottom: 30px;

	color:#fff;
	font-size: 12px;
}

.page-title{
	position: relative;
	z-index: 20;
	margin: 0 auto;
	text-align: center;
	padding: 0 10%;
	padding-top: 50px;
}

.page-title-2{
	margin-left: 0;
	text-align: center;
	padding: 0 5%;
	padding-top: 50px;
	position: relative;
	z-index: 2;
	text-shadow: 0px 0px 10px #242424;
}
	.page-title-2 h1{
		font-family: 'ClanOTBOLD'!important;
		font-size: 30px;
		font-weight: 500;
		color: #fff;
		padding-bottom: 20px;
		line-height: 1.1;
	}

	.page-title-2 h1 span{
		color:#fff!important;
	}
	.page-title-2 h2{
		font-family: 'ClanOTBOLD'!important;
		font-size: 20px;
		font-weight: 500;
		color: #fff;
		padding-bottom: 20px;
		line-height: 1.1;
	}


.start-wrapper{
	margin: 0 auto;
	position: relative;
	z-index: 20;
	text-align: center;
	padding-top: 40px;
}

.main-img {
	max-width: 100%;
}

.maxibon-black-wrapper{
	margin:0 20px;
}

.footer-back{
	display: none;
}

.footer-select{
	background-color: rgb(239,241,240);
	margin-top: -25px;
}

.show-footer > .footer-back{
	padding-top: 50px;
	display:block!important;
}

.show-footer > .footer-back > .footer-template > .machine-footer{
	margin-top: -300px;
	position: relative;
}

#content .maxwidth-wrapper div .footer-text{
	font-size: 16px;
	color:white;

}

#content .maxwidth-wrapper .footer-text-2{
	font-size: 14px;
}


/*--- SELECTED ---*/

#nothing-found{
	color:rgba(255,255,255,0.5);
	margin-top: 30px;
	font-size: 20px;
}
.search-container {
	position: relative;
	z-index: 20;
	margin-top: 20px;
}
#search-bar {
	padding: 10px 20px;
	padding-right: 40px;
	width: 100%;
	
	background-color: transparent;
	border: 2px solid #fff;
	outline: none;
	font-family: 'ClanOTBOOK'!important;
	font-weight: normal;
	font-size: 16px;
	color: #fff
}

.search-container img {
	position: absolute;
	margin: auto;
	top: 0; bottom: 0;
	right: 10px;
	
	cursor: pointer;
}

#selected-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 40px 0;
	z-index: 20;
}

.selected {
	width: 50%;
	margin: 10px 0;
	
	display: flex;
}

.selected img {
	width: 70px;
	height: 70px;
	
	border: 3px solid white;
	border-radius: 50%;

}

.selected .user-info {
	flex-grow: 1;
	padding-left: 20px;
	
	display: flex;
	align-items: justify-content;
	justify-content: center;
	flex-direction: column;
	text-align: left;
	
}

.selected .user-info .name {
	font-size: 16px;
	color: #fff;
	font-family: 'ClanOTBOLD'!important;
	font-weight: 500;
	margin-bottom: 5px;
}

.selected .user-info .city {
	font-size: 12px;
	font-family: 'ClanOTBOLD'!important;
	color:#fff;
}

#more-btn {
	width: 160px;
    height: 50px;
	font-size: 16px;
	margin-bottom: 20px;
	z-index: 20;
	position: relative;
}

#more-btn.hidden {
	display: none;
}




/*--- RATE ---*/

.user-rating {
	font-family: 'ClanOTBOOK', sans-serif!important;
	font-weight: normal;
	font-size: 32px;
	color: white;
	
	margin-bottom: 10px;
}

.user-rating #rating {
	font-family: 'ClanOTBOOK'!important;
	font-weight: normal;
	color: #e57f38;
}

.classification {
	display: flex;
	flex-direction: column;
	align-items: center;
}
	.classification .blends-wrapper {
		margin: auto;
	}

.stars-container {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}

.stars-container:hover .star > div {
	background-position: 46px 0 !important;
}
.stars-container.active .star > div {
	background-position: 46px 0;
}

.star {
	padding: 6px;
	cursor: pointer;
}

.star > div {
	width: 46px;
    height: 46px;
    background-size: cover;
    background-image: url(../img/index/2Estrelas.png);
}

.star:hover ~ .star > div {
	background-position: 0px 0 !important;
}
.star.active ~ .star > div {
	background-position: 0px 0;
}

.rate-info {
	font-family: 'ClanOTBOOK'!important;
	font-weight: normal;
	font-size: 16px;
	color: white;
}

.comment-section {
	background-color: white;
	margin-top: 300px;
	
	border-radius: 3px;
	box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2);
}

.rate-vaselina {
	position: relative;
	display: inline-block;
	
	margin-top: -250px;
}

.rate-vaselina img {
	max-width: 100%;
}

.comment-text {
	padding: 0 10% 20px;
	background-color: #fff;
	max-width: 100%;
	color: #000000!important;
	z-index: 20;
}

.comment-text p, .comment-text span {
	font-family: 'ClanOTBOOK'!important;
	font-weight: bold;
	font-size: 18px;
	color: #000000!important;
	padding: 0 15px;
	line-height: 1.3em;
}

.comment-text p strong {
	font-family: 'ClanOTBOOK'!important;
	font-weight: 500;
}

.fb-comments {
	display: block !important;
	background-color: white;
	width: 70%;
	margin-bottom: 100px;
}

.fb-wrapper{
	width: 100%;
	padding: 20px 25px;
	background: white;
	background: linear-gradient(0deg, #FFFFFF 40%, transparent 35%);
	z-index: 2;
}

@media(max-width: 500px) {
	.selected {
		width: 100%;
		padding-left: 15%;
    	justify-content: flex-start;
	}

	.selected .user-info{
		flex-grow: 0.4;
	}
	/* .fb-wrapper{
		background: linear-gradient(0deg, #FFFFFF 70%, transparent 35%);
	}
 */
	.selected .user-info .name {
		font-size: 14px;
		color: #fff;
		font-family: 'ClanOTBOLD'!important;
		font-weight: 500;
		margin-bottom: 5px;
	}
	
	.selected .user-info .city {
		font-size: 10px;
		font-family: 'ClanOTBOLD'!important;
		color:#fff;
	}

	.maxwidth-wrapper.selectStage {
		padding: 0;
	}
	
}

/* @media(max-width: 300px) {
	.fb-wrapper{
		background: linear-gradient(0deg, #FFFFFF 75%, transparent 35%);
	}
}
@media(max-width: 400px) {
	.fb-wrapper{
		background: linear-gradient(0deg, #FFFFFF 38%, transparent 38%);
	}
}
@media(max-width: 300px) {
	.fb-wrapper{
		background: linear-gradient(0deg, #FFFFFF 85%, transparent 35%);
	}
} */




.fb-comments,
.fb-comments > span,
.fb-comments > span > iframe {
	width: 100% !important;
	z-index: 20!important;
}

@media(max-width: 780px) {

	.blends-wrapper .tag{
		width: 30%;
    	left: 5%;
	}
}

@media(max-width: 768px) {
	.top-left-bg {
		top: -50px;
		left: -250px;
	}
	.page-title-2 h1 {
		font-size: 28px;
	}

	.blends-wrapper{
		padding: 0 0;
		padding-top:40px;
	}

	.top-left-bg img{
		width: 80%;
	}

	.mid-left-bg{
		top: 650px;
		right: 50%;
		left: calc(-30% - 280px);
	}

	.mid-right-bg{
		top: 580px;
		left:60%;
		right: calc(-30% - 190px);
	}

	.top-right-bg{
		position: absolute;
		left: unset;
		right: calc(-5% + -200px);
	}

	.top-right-bg img{
		width: 90%;
	}


	.base-left-bg{
		bottom: -340px;
		position: absolute;
		left: -420px;
	}
	.base-left-bg img{
		width: 800px;
	}

	.maxwidth-wrapper.quiz .base-left-bg{
		bottom: -68px;
		position: absolute;
		right: 55%;
		left: calc(-30%);
	}

	.maxwidth-wrapper.quiz .base-left-bg img{
		width: 70%;
	}
	.maxwidth-wrapper.quiz .base-right-bg{
		position: absolute;
		bottom: -100px;
		left: 70%;
		right: calc(-40% + 11px);
	}
	
	.base-right-bg{
		position: absolute;
		bottom: -105px;
		left: auto;
		right: -325px;
	}

	.base-right-bg img{
		width: 540px;
	}
	
	#mobile-element #wrapper-type-change{
		height: 200px;
		width: 100%;
	}


	.vote > .wrapper-type > .machine{
		margin-top:0;
	}

	
	.start-wrapper{
		margin-left: 0;
		padding-top: 10px;
		text-align: center;
	}

	.page-title{
		margin-left: 0;
		padding-top: 50px;
		padding-left:0;
		padding-right:0;
		text-align: center;
	}
	.vote{
		margin-top: 45px;
	}
	.search-container{
		margin: 0 20px;
	}

	#selected-container{
		margin: 0 20px;
	}

	.comment-text {
		padding: 0px 0 20px;
	}

	.element-footer-vote{
    	background-size: 115%;
	}

	.background-footer-vote{
    	background-size: 66%;
	}
}

@media(max-width: 640px) {
	.stars-container {
		transform: scale(0.7);
	}
}

@media(max-width: 510px) {
	.stars-container {
		transform: scale(0.5);
	}
}

@media(min-width: 1200px){
	.classification {
		max-width: 800px;
		margin: 70px auto 0px;
	}

	.page-title-2 {
		max-width: 800px;
		margin: 0 auto;
	}

	.base-left-bg{
		left: calc(-15% - 55px);
	}
	
	.base-right-bg{
		left: auto;
		right: calc(-20% - 140px);
	}

	.mid-right-bg{
		top: 480px;
		right: -212px;
		left: unset;
	}
	
	.wrapper-type {
		margin-left: 20%;
	}

	.machine{
		width: 600px;
	}

	.background{
		max-width: 350px;
	}

	.element{
		max-width: 400px;
	}

	.green .background{
		max-width: 500px;
	}

	.yellow .element{
		width: 500px;
	}
}

@media (min-width: 762px) {
	
	.page-title-2{
		
		text-shadow: none;
	}
}

@media (max-width: 767px) {
	.maxwidth-wrapper {
		padding-bottom: 10px;
	}
}

@keyframes test {
	0% {transform: rotateY(0deg) rotateZ(0deg);}
	50% {transform: rotateY(15deg) rotateZ(15deg)}
	100% {transform: rotateY(0deg) rotateZ(0deg)}
  }

  
@keyframes croffee {
	0% {transform: rotateY(0deg);}
	30% {transform: rotateY(10deg);}
	70% {transform: rotateY(-10deg);}
	100% {transform: rotateY(0deg)}
  }
/*
  @keyframes croffee-tag {
	0% {transform: rotateZ(0deg);}
	15% {transform: rotateZ(20deg);}
	30% {transform: rotateZ(-20deg);}
	45% {transform: rotateZ(0deg);}
	100% {transform: rotateZ(0deg);}
  }*/

  /*HeartBeat Test */
  @keyframes croffee-tag {
	0% {transform:  scale(1);}
	10% {transform: scale(1.2);}
	15%{transform: scale(1.2);}
	25% {transform:  scale(1);}
	100% {transform:  scale(1);}
  }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	button {
		padding-top:8px!important;
	}
 }