@import url("https://fast.fonts.net/cssapi/d3348798-8d2a-4715-a2b8-bbe6935e5742.css");

.wool-various{
	position: absolute;
	z-index: 1;
	top: 100px;
    left: -250px;
}

.single-wheat{
	position: absolute;
	right: calc(20% - 250px);
	z-index: 1;
	top: 38%;
}

.single-wheat.selectedStage{
	right: calc(5% - 250px);
    top: 13%;
}

.coffee-grain{
	position: absolute;
	z-index: 1;
	right: calc(25% - 250px);
    top: 10%;

}

.coffee-grain.selectedStage{
	right: calc(20% - 250px);
    top: 5%;

}

.only-home-wheatWgrain{
	position: absolute;
	z-index: -1;
	right: calc(10% - 250px);
	top: 18%;
}

.wool-ball{
	position: absolute;
	z-index: 1;
	right: calc(2% - 330px);
    bottom: -60px;
}

.wool-ball.selectedStage{
	right: calc(5% - 450px);
    bottom: auto;
    top: 57%;
}

.wool-various.selectedStage{
	left: -430px;
}

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

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

.ear-wheat{
	position: absolute;
	z-index: 1;
	left: calc(20% - 250px);
    top: 35%;
}

.ear-wheat.selectedStage{
	left: calc(5% - 250px);
    top: 25%;
}
.ear-wheat-2{
	position: absolute;
	z-index: 1;
	left: calc(30% - 490px);
    top: 65%;
}

.ear-wheat-2.selectedStage{
	left: calc(20% - 490px);
    top: 60%;
}

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



/* test slide*/
.maxwidth-wrapper{
	padding:0 5%;
	padding-bottom: 300px;
	position: relative;
}

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

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

.blends-wrapper .tag{
	position: absolute;
    width: auto;
}

.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: 'Nunito', serif!important;
	font-weight: 400;
	padding: 0 40px;
	color:rgb(116, 132, 138);
	font-size: 11pt;
	margin-bottom: 60px;
}

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

.page-title-2{
	margin-left: 0;
	text-align: center;
	padding-top: 100px;
	position: relative;
	z-index: 2;
	text-shadow: 0px 0px 10px #242424;
}
	.page-title-2 h1{
		font-family: 'Nunito', sans-serif!important;
		font-size: 36px;
		font-weight: 600;
		color: #fff;
		padding-bottom: 20px;
		line-height: 1.1;
	}

	.page-title-2 h1 span{
		color:#fff!important;
	}
	.page-title-2 h2{
		font-family: 'Nunito', sans-serif!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;
}

.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:rgb(116, 132, 138);
	margin-top: 10px;
	font-size: 16pt;
}
.search-container {
	position: relative;
}
#search-bar {
	padding: 10px 20px;
	padding-right: 40px;
	width: 100%;
	
	background-color: transparent;
	border: 2px solid #fff;
	outline: none;
	font-family: 'Nunito', sans-serif!important;
	font-weight: 500;
	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;
}

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

.selected img {
	width: 70px;
	height: 70px;
	
	border: 2px 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: 'Nunito', sans-serif!important;
	font-weight: 700;
	margin-bottom: 5px;
}

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

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

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




/*--- RATE ---*/

.element-footer-vote{
	padding-top: 36%;
	background-image: url(../img/copos.jpg);
	background-repeat: no-repeat;
	background-size: 68%;
	background-position: 100% 65%;
	-webkit-transition: background-image 1s ease-in-out;
	transition: background-image 1s ease-in-out;
	width: 30%;
}

.background-footer-vote{
	padding-top: 37%;
	background-image: url(../img/fruteira.png);
	background-repeat: no-repeat;
	background-size: 45%;
	background-position: 115% 30%;
	-webkit-transition: background-image 1s ease-in-out;
	transition: background-image 1s ease-in-out;
	width: 70%;
}

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

.user-rating #rating {
	font-family: 'Nunito', sans-serif!important;
	font-weight: 500;
	color: rgb(251,196,31);
}

.classification {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1000px;
    margin: 0 auto;
}

.classification .blends-wrapper {
	margin: auto;
}

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

.stars-container:hover .star > div {
	background-position: 47px 0 !important;
}
.stars-container.active .star > div {
	background-position: 47px 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: 0 0 !important;
}
.star.active ~ .star > div {
	background-position: 0 0;
}

.rate-info {
	font-family: 'Nunito', sans-serif!important;
	font-weight: 400;
	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: 20px 5%;
    margin-bottom: 0px;
    max-width: 100%;
    color: #242424!important;
    background-color: #fff;
}

.comment-text p, .comment-text span {
	font-family: 'Nunito', sans-serif!important;
	font-weight: 400;
	font-size: 18px;
	color: #242424!important;
}

.comment-text p strong {
	font-family: 'Nunito', sans-serif!important;
	font-weight: 500;
}

.fb-comments {
	display: block !important;
	background-color: white;
	width: 80%;
    padding: 0 5%;
}

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

@media(max-width: 500px) {
	.fb-wrapper{
		background: linear-gradient(0deg, #FFFFFF 70%, transparent 35%);
	}

	.selected .user-info .name {
		font-size: 20px;
		color: #fff;
		font-family: 'Nunito', sans-serif!important;
		font-weight: 700;
		margin-bottom: 5px;
	}
	
	.selected .user-info .city {
		font-size: 14px;
		color:#fff;
	}

	.selected img {
		width: 75px;
		height: 75px;
		border: 2px solid white;
		border-radius: 50%;
	}

	.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 80%, transparent 35%);
	}
}
@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;
}

@media(max-width: 780px) {

	.blends-wrapper .tag{
		width: 20%;
	}
}

@media(max-width: 760px) {

	.wool-various{
		top: -10px;
		left: -250px;
	}

	.wool-various img{
		width: 65%;
	}

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


	.single-wheat{
		top: 70%;
	}
	
	.coffee-grain{
		
		top: 35%;
	
	}
	
	.only-home-wheatWgrain{
		top: 35%;
	}
	
	.coffee{
		position: absolute;
		z-index: 1;
		left: 2%;
		top: auto;
		bottom: -50px;
	}
	
	
	#mobile-element #wrapper-type-change{
		height: 200px;
		width: 100%;
	}


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

	
	.start-wrapper{
		margin-left: 0;
		text-align: center;
	}

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

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

	.selected {
		width: 100%;
	}

	.comment-text {
		padding: 33px 10px;
	}

	.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){
	.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: 150px;
	}
}