/*==============================
=            Loader            =
==============================*/

@media screen and (max-width: 1160px) {
	body {
		&.internas {
			background-image: none;
		}		
	}
	#header {
		height: auto;
		nav {
			position: absolute;
			top: 0;
			left: 0;
		}
		#banner {
			height: auto;
			position: relative;
			.bg {
				&.home {
					width: 100%;
					// max-width: 456px;
					/* height: auto; */
					height: 347px !important;
					position: relative !important;
					margin-top: 60px !important;
					top: 0 !important;
					left: 0 !important;
					bottom: inherit !important;
					right: inherit !important;
					// background-position: 0 0 !important;
					// background-position-x: 0 !important;
					// background-position-y: 0 !important;
				}
			}
			.container {
				width: 100%;
				float: left;
				.text {
					background-color: #3ed6ad;
					text-align: justify;
					width: auto;
					padding: 20px 20px 10px 20px;
					position: relative;
					float: left;
					top: inherit;
					left: inherit;
					right: inherit;
					bottom: inherit;
					display: block;
					.btn-link {
						width: 50%;
						float: none;
						margin: 0 auto;
						padding-left: 1.5%;
						padding-right: 1.5%;
						text-transform: inherit;
						display: block;
						border-color: #3d4650;
						margin-bottom: 30px;
					}
					p {
						text-align: justify;
						margin-bottom: 30px;
						margin-top: 20px;
					}
					h2 {
						text-transform: inherit;
					}
				}
			}
		}
		#banner-interna {
			background-size: 100% !important;
			height: 100px !important;
			position: relative !important;
			margin-top: 60px !important;
			top: 0 !important;
			left: 0 !important;
			bottom: inherit !important;
			right: inherit !important;
			background-position: 0 0 !important;
			background-position-x: 0 !important;
			background-position-y: 0 !important;
			&.aminoacidos-ajinomoto,
			&.esportes,
			&.saude,
			&.beleza {
				// background: none;
			}
		}
		#banner-interna.o-que-sao-aminoacidos {
			// background: none;
		}
	}
	#conteudo {
		background-image: none;
		.parallax {
			display: none;
		}
		.box {
			transform: none;
			.text {
				background-color: #3ed6ad;
				text-align: left;
				width: auto;
				margin: 0;
				padding: 0;
				position: relative;
				float: left;
				top: inherit;
				left: inherit;
				right: inherit;
				bottom: inherit;
				display: block;
				.btn-link {
					width: 100%;
					float: none;
					margin: 0 auto;
					padding-left: 0;
					padding-right: 0;
					text-transform: inherit;
					display: block;
					border-color: #3d4650;
				}
				p {
					text-align: left;
					margin-bottom: 15px;
				}
				h2 {
					text-transform: inherit;
				}
			}
			&.esportes,
			&.saude,
			&.beleza {
				height: auto;
				margin: 10px 0 0 0;
				.text {
					background-image: none !important; 					
					text-align: justify;
					width: auto;
					height: auto;
					padding: 20px 20px 30px 20px;
					margin-left: 0;
					position: relative;
					float: left;
					top: inherit;
					left: inherit;
					right: inherit;
					bottom: inherit;
					display: block;
					overflow: hidden;
					&:before {
						content: none !important;
					}
					h3 {
						background: none;
						text-indent: inherit;
						text-transform: uppercase;
						height: auto;
						margin: 0;
						padding: 0 0 14px 0;
						float: none;
					}
					.btn-link {
						width: 50%;
						float: none;
						margin: 0 auto;
						padding-left: 1.5%;
						padding-right: 1.5%;
						text-transform: inherit;
						display: block;
						position: relative;
						top: inherit;
						left: inherit;
						right: inherit;
						bottom: inherit;
						border-color: #3d4650;
					}
					p {
						text-align: left;
						margin-top: 0;
						margin-bottom: 15px;
					}
					h2 {
						text-transform: inherit;
					}
					h3, p {
						color: #3d4650;
					}
					&:before {
						content: '';
						position: absolute;
						top: 15px;
						right: 15px;
						width: 10px;
						height: 10px;
						border-top: 3px solid #3d4650;
						border-left: 3px solid #3d4650;
						-ms-transform: rotate(-138deg); /* IE 9 */
						-webkit-transform: rotate(-138deg); /* Safari */
						transform: rotate(-138deg);						
					}
				}
				.slide-fotos {
					img {
						width: 100vw !important;
						height: auto !important;
						float: left;
						margin-top: 0 !important;
						margin-left: 0 !important;
						// display: none !important;
						&:first-child {
							// display: block !important;
						}
					}
				}
			}
			&.esportes {				
				.text {
					background-color: $yellow;
				}
			}
			&.saude {
				.text {
					border-color: #3d4650;
				}
				.slide-fotos {
					img {
						right: 0 !important;
						left: inherit !important;
					}
				}
			}
			&.beleza {
				.text {
					background-color: $pink;
				}
			}
			.slide-fotos {
				transform: none;
				width: 100%;
				height: 250px;
				img {
					transform: none;
				}
			}
			.no-skew {
				transform: none;
			}
		}
		.container {
			width: 100%;
		}
		&.internas {
			margin-top: 0 !important;
			h1 {
				display: none;
			}
			.acordion {
				width: 100%;
				margin: 0;
				padding: 0;
				.content {
					margin-top: 20px !important;
					margin-bottom: 20px !important;
					.image {
						.left {
							float: initial;
							margin: 0;
						}
					}
					p, h3{
						width: 90% !important;
						margin: 0 !important;
						padding: 0 5% !important;
					}
				.oqs-title {
					padding: 0px !important;
				}
				}
				.image {
					width: 100%;
					img {
						width: 100%;	
					}
				}
			}
			&.aminoacidos-ajinomoto,
			&.o-que-sao-aminoacidos,
			&.esportes,
			&.saude,
			&.beleza {
				h2 {
					background-image: none;
					border-left: 0 none;
					border-right: 0 none;
					width: 95%;
					margin-bottom: 5px;
					padding-top: 15px;
					padding-bottom: 15px;
					padding-right: 4%;
					color: #1d2847;
				}
				.prol {
					background: none;
					height: auto;
					padding-top: 0;
					margin-top: 15px;
				}
				.image {
					// display: none;
				}
			}
			&.aminoacidos-ajinomoto {
				h2 {
					background-color: #ff0000;
					text-align: justify;
					&.active {
						background-color: #ff0000;
						text-align: justify;
					}
				}
			}
			&.esportes {
				h2 {
					background-color: #f7ec64;
					text-align: justify;
					&.active {
						background-color: #f7ec64;
						text-align: justify;
					}
				}
			}
			&.saude {
				h2 {
					background-color: #58eea5;
					text-align: justify;
					&.active {
						background-color: #58eea5;
						text-align: justify;
					}
				}
			}
			&.beleza {
				h2 {
					background-color: #eea5c9;
					text-align: justify;
					&.active {
						background-color: #eea5c9;
						text-align: justify;
					}
				}
			}
			&.o-que-sao-aminoacidos {
				h2 {
					background-color: #00aeef;
					text-align: justify;
					&.active {
						background-color: #00aeef;
					text-align: justify;
					}
				}
				p {
					width: 94% !important;
					margin: 0 !important;
					padding: 0 3% !important;
				}
				.proteinas {
					h3 {
						width: 90% !important;
						margin: 0 !important;
    				padding: 0 5% !important;
					}
					.box-proteinas {
						&.box-1,
						&.box-2 {
							-webkit-border-radius: 0;
							border-radius: 0;
							width: 100% !important;
							margin: 0 0 20px 0 !important;
						}
					}
				}
				.destaque-areas {
					background: none;
					height: auto;
					margin: 0 !important;
					.box-destaque {
						&.box-1,
						&.box-2,
						&.box-3,
						&.box-4 {
							width: 94% !important;
							// margin: 0 !important;
    					padding: 0 3%;
							position: relative;
							top: inherit;
							left: inherit;
							bottom: inherit;
							right: inherit;
							p {
								width: 100% !important;
								padding: 0 !important;
							}
						}
					}
				}
				.fonte {
					min-height: inherit;
					.bg {
						display: none;
						position: relative;
						width: 100%;
						height: 350px;
						margin: 30px 0 !important;
						left: inherit;
						top: inherit;
					}
					img {	
						display: none;
					}		    
				}
			}
		}
	}
}

@media screen and (max-width: 1160px) {
  #header #banner .bg.home {
    background-image: url('../images/banners/bg-home-mb.jpg');
		background-size: contain;
    background-position: center;
    height: auto;
  }

  .home img {
    display: none;
  }

	#header {
		nav {
			border: 0 none;
			top: 0;
		}
		.container.top-logo {
			width: 100%;
			max-width: inherit;
			margin-left: 0;
			margin-right: 0;
			border: 0 none;
			background-color: $patternColorText;
			margin-top: 0;
			padding: 10px 0 5px;
		}
		.logo {
			border: 0 none;
			float: none;
			display: block;
			margin: 0 auto;
		}
		.logo{
			background: url("../images/logo-white.png") center center no-repeat;
			retinaBGImage("../images/logo-white@2x.png");
			
			&.aminoacidos-ajinomoto,
			&.o-que-sao-aminoacidos,
			&.o-que-sao-aminoacidos,
			&.beleza,
			&.saude,
			&.esportes {
				background: url("../images/logo-white.png") center center no-repeat;
				retinaBGImage("../images/logo-white@2x.png");	
			}
		}
		.menu {
			width: 100%;
			margin: 0;
			float: none;
			top: 0;
			right: 0;
			ul {
				width: 100%;
				li {
					a {
						background-image: none;
						&:before {
							content: '';
							border-bottom: 1px solid #FFFFFF;
							border-right: 1px solid #FFFFFF;
							width: 4px;
							height: 4px;
							margin: 0 10px 2px 0;
							position: relative;
							display: inline-block;
							
							-ms-transform: rotate(-45deg);
							-webkit-transform: rotate(-45deg);
							transform: rotate(-45deg);
						}
						&.active-menu {
							&:before {
								content: none;
							}
						}
					}
				}
			}
		}
		&.interna {
			height: auto;
			.logo {
				background-size: 100%;
				margin-left: auto !important;
			}
		}
	}
}

@media screen and (min-width: 1161px) {
	#header {
		.menu {
			ul {
				margin: 0;
				top: 76px;
			}
		}
	}
	body {
		&.internas {
			background-image: none;
			&.saude,
			&.esportes,
			&.aminoacidos-ajinomoto,
			&.beleza,
			&.o-que-sao-aminoacidos {
				#header {
					.logo {
						background-size: 100%;
						margin: 0;
						float: right;
					}
					.menu {
						bottom: -210px;
						top: inherit;
						left: inherit;
						right: 26px;
					}
					.interna {
						.logo {
							margin: 0 !important;
						}
					}
				}
			}
		}
		#conteudo {
			.acordion {
				h2 {
					background-color: #58eea6;
				}
			}
			&.internas {
				h1 {
					font-size: 3.5em;
					margin: 0 0 20px 0;
					padding-right: 100px;
				}
				&.saude {
					h1 {
						color: #58eea6;
					}
				}
				&.esportes {
					h1 {
						color: #f7ec64;
					}
				}
				&.aminoacidos-ajinomoto {
					h1 {
						color: #ff0000;
					}
				}
				&.beleza {
					h1 { 
						color: #eea5c9;
					}
				}
				&.o-que-sao-aminoacidos {
					h1 {
						color: #00aeef;
					}
				}
			}
		}		
		&.beleza {
			#conteudo {
				.acordion {
					h2 {
						background-color: #eea5c9;
					}
				}
			}
		}
		&.beleza {
			#conteudo {
				.acordion {
					h2 {
						background-color: #eea5c9;
					}
				}
			}
		}
		&.esportes {
			#conteudo {
				.acordion {
					h2 {
						background-color: #f7ec64;
					}
				}
			}
		}
		&.o-que-sao-aminoacidos {
			#conteudo {
				.acordion {
					h2 {
						background-color: #00aeef;
					}
				}
			}
		}
		&.o-que-sao-aminoacidos {
			#conteudo {
				.acordion {
					h2 {
						background-color: #00aeef;
					}
				}
			}
		}
		&.aminoacidos-ajinomoto {
			#conteudo {
				.acordion {
					h2 {
						background-color: #ff0000;
					}
				}
			}
		}
	}
}

.resp-p {
	width: 90% !important;
	margin: 0 !important;
	padding: 0 5% !important;
}

.table {
  width: 100%;
  border: 1px solid;
}
.table td,
.table th {
  border: 1px solid;
  padding: 10px;
}

@media (max-width: 576px) {
  #header #banner .bg.home {
    height: 970px;
    background: url('../images/banners/bg-home-mb.jpg') no-repeat top center;
  }
  .home img {
    width: 200px;
  }
  .bg.home {
    width: 100vw;
    /* max-width: 456px; */
    height: auto;
    height: 347px !important;
    position: relative !important;
    margin-top: 60px !important;
    top: 0 !important;
    left: 0 !important;
    bottom: inherit !important;
    right: inherit !important;
    /* background-position: 0 0 !important; */
    background-position-x: -20px !important;
    /* background-position-y: 0 !important; */
  }

  .icon-normal {
    float: right;
    width: 31px;
    margin-top: 4px;
    height: 52px;
    background: url('../images/arrow-acordion.png') left center;
    margin-right: 7px;
    /* margin: 0 auto; */
  }

  .desk {
    display: none;
  }
}

@media (min-width: 576px) {
  .mob {
    display: none;
  }
}
.img_tag {
  background-image: url(assets/dist/images/tag.png);
  margin-top: -22px;
  margin-bottom: -35px;
}

/*=====  End of Loader  ======*/