/*------------------------------------------------------------------------*/
/*  1400px                                                                 */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 1400px) {

	body			{ font: normal 22px/34px "Utily-Regular"; }
	h1				{ font: normal 60px/60px "Croust-Sans-Ink"; }
	h2				{ font: normal 14px/14px "Croust-Sans-Ink"; }

	.container {
		max-width: 100%;
	}

	header nav ul li:hover ul {
		height: 240px;
	}

	section#cialho .button_link a {
		line-height: 50px;
		margin: 40px 0 0 0;
	}
	#news.show::before {
		width: 50%;
	}
	#news.show::after {
		right: 50%;
	}
	#news .image img {
		width: 540px;
		left: 50%;
	}

	section#about .title h1 p {
		font: normal 300px/120px "Utily-Regular";
	}
	section#about .title .description p {
		font: normal 16px/28px "Utily-Regular";
	}
	section#history .content {
		width: 75%;
	}
	section#history .description p {
		font: normal 16px/28px "Utily-Regular";
	}

	section#products .content {
		padding: 0 30px;
	}
	section#products .buttons_filter {
		width: 25%;
		right: 0;
	}
	section#products ul.list li img {
		padding: 15px 15px 0 15px;
	}
	section#products ul.list li span.tag {
		font: normal 11px/14px "Utily-Medium";
	}
	section#products ul.list li h2 {
		height: 32px;
		margin: 0 0 10px 0;
	}
	section#products ul.list li p {
		line-height: 54px;
	}
	.featherlight .featherlight-inner {
		padding: 120px 0;
	}
	.lightbox img {
		width: 480px;
	}
	.lightbox h3 {
		font: normal 20px/26px "Utily-Medium";
	}
	.lightbox p {
		font: normal 16px/22px "Utily-Regular";
	}
	.lightbox span {
		font: normal 12px/18px "Utily-Regular";
	}
	.lightbox ul li {
		font: normal 16px/34px "Utily-Regular";
	}

	section#contact .description {
		margin: 30px 0 0 0;
	}
	section#contact .description p {
		font: normal 16px/28px "Utily-Regular";
		margin: 0 0 15px 0;
	}

	section#cookies .content {
		width: 100%;
	}
	section#cookies .title span {
		margin: 0 0 15px 0;
	}

	section#faq ul li .question {
		font: normal 14px/90px "Utily-Bold";
	}
	section#faq ul li .more {
		width: 50px;
		height: 50px;
	}
	section#faq ul li .answer {
		font: normal 16px/28px "Utily-Regular";
		padding: 0 90px 0 0;
	}

}

/*------------------------------------------------------------------------*/
/*  420px                                                                 */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 420px) {

	body			{ font: normal 22px/34px "Utily-Regular"; }
	h1				{ font: normal 32px/38px "Croust-Sans-Ink"; }
	h2				{ font: normal 14px/14px "Croust-Sans-Ink"; }

	header .menu_top,
	header #logo::after,
	header nav,
	header #social,
	header #sac,
	header #filter,
	section#products .breadcrumb .left,
	section#products .accordion li.not_mobile,
	.lightbox img {
		display: none;
	}

	a,
	.button_menu_mobile {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
				user-select: none; 
	}

	.button_menu_mobile {
		display: block;
		visibility: visible;
	}

	header {
		background: none;
		padding: 10px 0;
		position: fixed;
	}
	header.hide_header {
		background: #ffffff;
		-webkit-transform: none;
				transform: none;
	}
	header #logo {
		width: 100px;
		height: 60px;
		float: none;
		margin: 0 auto;
	}
	header #logo i {
		background-size: auto 60px;
		margin: 0;
	}

	section#cialho {
		height: calc(100vh - 50px);
		background-position: 47% 50%;
		background-size: cover;
	}
	section#cialho.small {
		background-size: cover;
	}
	section#cialho .content {
		width: 100%;
		text-align: center;
		padding: 0 15px;
	}
	section#cialho .title p {
		font: normal 14px/20px "Utily-Medium";
		margin: 0;
	}
	section#cialho .title h1 {
		margin: 10px 0;
	}
	section#cialho .button_link a {
		margin: 30px 0 0 0;
	}

	section#cialho .scroll {
		bottom: 80px;
	}
	section#cialho .scroll.hide {
		opacity: 1;
	}

	#news {
		width: 100%;
		height: auto;
		display: block;
		padding: 80px 0;
		position: relative;
		opacity: 1;
		visibility: visible;
	}
	#news::before,
	#news.show::before {
		content: "";
		width: 50%;
		height: 100%;
		background: #f27535;
		position: absolute;
		top: 0;
		right: 0;
	}
	#news::after,
	#news.show::after {
		content: "";
		width: 50%;
		height: 100%;
		background: #f5f9ff;
		position: absolute;
		top: 0;
		right: 50%;
		z-index: -1;
		-webkit-animation: none;
			animation: none;
	}
	#news .image {
		-webkit-transform: translateX(0);
				transform: translateX(0);
	}
	#news .image img {
		width: 100%;
		height: auto;
		padding: 0 20px;
		position: relative;
		top: 0;
		left: 0;
		-webkit-transform: translate(0, 0);
				transform: translate(0, 0);
	}

	section#about {
		background-position: 15% 50%;
		background-size: cover;
	}
	section#about .content {
		width: 100%;
		padding: 0 20px;
	}
	section#about .title span {
		font: normal 14px/20px "Utily-Medium";
	}
	section#about .title h1 {
		margin: 20px 0;
	}
	section#about .title h1 p {
		font: normal 240px/120px "Utily-Regular";
		padding: 0 0 0 30px;
	}
	section#about .title .description p {
		font: normal 14px/20px "Utily-Medium";
		letter-spacing: .5px;
	}
	section#about .scroll {
		bottom: 20px;
	}

	section#history {
		height: auto;
		display: block;
		padding: 80px 0 40px 0;
	}
	section#history .content {
		width: 100%;
		text-align: center;
		margin: 0 auto;
		padding: 0 20px;
	}
	section#history .content span {
		font: normal 14px/20px "Utily-Medium";
	}

	section#products .content {
		margin: 80px 0 0 0;
		padding: 0 20px;
	}
	section#products .title {
		text-align: center;
		margin: 10px 0 0 0;
	}
	section#products .title span {
		font: normal 14px/20px "Utily-Medium";
	}
	section#products .title h1 {
		margin: 0 0 20px 0;
	}

	section#products .buttons_filter {
		width: 100%;
		right: 0;
		top: calc(100% - 54px);
		-webkit-transition: all .3s ease;
				transition: all .3s ease;
	}
	section#products .buttons_filter.show {
		transform: translateY(calc(-100% + 60px));
	}
	section#products .buttons_filter::before {
		content: "Filtro";
		width: 100%;
		height: 54px;
		background: rgb(202,80,86);
		background: -webkit-linear-gradient(90deg, rgba(202,80,86,1) 0%, rgba(242,117,53,1) 100%);
		background: linear-gradient(90deg, rgba(202,80,86,1) 0%, rgba(242,117,53,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ca5056",endColorstr="#f27535",GradientType=1);
		color: #ffffff;
		font: normal 14px/54px "Utily-Bold";
		letter-spacing: 1px;
		text-transform: uppercase;
		display: block;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		cursor: pointer;
	}
	section#products .buttons_filter.show::before {
		background: #ffffff;
		height: 80px;
	}

	section#products .accordion {
		top: 80px;
	}
	section#products .accordion li .link {
		pointer-events: none;
	}
	section#products .accordion li,
	section#products .accordion li:first-child {
		border: none;
	}
	section#products .breadcrumb {
		width: 100%;
		margin: 20px 0;
		padding: 0;
	}
	section#products .breadcrumb .right {
		width: 100%;
		float: left;
		text-align: center;
	}
	section#products .breadcrumb p {
		font-size: 11px;
	}
	section#products .products {
		width: 100%;
	}
	section#products ul.list li {
		width: calc(50% - 10px);
		margin: 0 10px 10px 0;
	}
	section#products ul.list li img {
		padding: 20px 5px 0 5px;
	}
	section#products ul.list li h2 {
		height: 42px;
		padding: 0 10px;
	}
	section#products ul.list li p {
		font: normal 12px/48px "Utily-Bold";
	}
	.featherlight-content {
		width: 100%;
	}
	.featherlight-close {
		width: 90px;
		height: 90px;
		padding: 20px;
	}
	.featherlight-close::before,
	.featherlight-close::after {
		width: 50px;
	}
	.featherlight-close::before,
	.featherlight-close::after {
		top: 45px;
	}
	.featherlight .featherlight-inner {
		padding: 90px 0 0 0;
	}
	.lightbox .infos {
		width: 80%;
		margin-left: 10%;
	}
	.lightbox h3 {
		font: normal 18px/24px "Utily-Medium";
	}
	.lightbox p {
		font: normal 16px/22px "Utily-Regular";
	}
	.lightbox ul li {
		font: normal 16px/30px "Utily-Regular";
	}

	section#contact .content {
		margin: 80px 0 0 0;
		padding: 0 20px;
	}
	section#contact .title {
		margin: 10px 0 0 0;
	}
	section#contact .title span {
		font: normal 14px/20px "Utily-Medium";
	}
	section#contact .title h1 {
		margin: 0 0 20px 0;
	}
	section#contact .description {
		margin: 20px 0;
	}
	section#contact .description p {
		font: normal 16px/24px "Utily-Regular";
		margin: 0 0 20px 0;
	}

	section#faq .content {
		margin: 80px 0 0 0;
		padding: 0 20px;
	}
	section#faq .title {
		margin: 10px 0 0 0;
	}
	section#faq .title span {
		font: normal 14px/20px "Utily-Medium";
	}
	section#faq .title h1 {
		margin: 0 0 20px 0;
	}
	section#faq ul li {
		min-height: 85px;
		padding: 20px 0 0 0;
	}
	section#faq ul li .tag {
		font: normal 12px/22px "Utily-Medium";
		letter-spacing: 1px;
		text-transform: uppercase;
		margin: 0 0 20px 0;
	}
	section#faq ul li .question {
		font: normal 14px/22px "Utily-Bold";
		padding: 0 50px 20px 0;
	}
	section#faq ul li .more {
		width: 40px;
		height: 40px;
		top: 0;
	}
	section#faq ul li .more:before, section#faq ul li .more:after {
		width: 16px;
		left: calc(50% - 8px);
	}
	section#faq ul li.active .answer {
		font: normal 16px/24px "Utily-Regular";
		padding: 0 0 20px 0;
	}

	section#cookies .content {
		margin: 80px 0 20px 0;
		padding: 0 20px;
	}
	section#cookies .title {
		margin: 10px 0 0 0;
	}
	section#cookies .title span {
		font: normal 14px/20px "Utily-Medium";
	}
	section#cookies .title h1 {
		margin: 0 0 20px 0;
	}
	section#cookies .description {
		margin: 20px 0;
	}
	section#cookies .description p {
		font: normal 16px/24px "Utily-Regular";
		margin: 0 0 20px 0;
	}
	section#cookies .description span {
		display: inline-block;
		margin: 0 0 20px 0;
	}

}

/*------------------------------------------------------------------------*/
/*  360px                                                                 */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 360px) {

}

/*------------------------------------------------------------------------*/
/*  320px                                                                 */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 320px) {

}