/*----------  Variables  ----------*/

$blue= #1d2847;
$white = #ffffff;
$green = #58eea5;
$yellow = #f7ec64;
$pink = #eea5c9;
$patternColorText = #1d2847;

*{
	padding:0;
	margin:0;
	text-decoration:none;
	border:0;
	font-family: 'Roboto', sans-serif;
}

.container{
	width:1150px;
	margin:0 auto;
	position:relative;
}

body{
	overflow-x:hidden;
	background:$white;
    overflow-y: scroll;
    
    &.internas{
	background-image: url("../images/background-internas.jpg");
	background-position: center top;
	background-size: 100% auto;
	// &.saude {
	// 	#header {
	// 		.logo {
	// 			margin: 0;
	// 			float: right;
	// 		}
	// 		.menu {
	// 			bottom: -235px;
	// 			top: inherit;
	// 			left: inherit;
	// 			right: 55px;
	// 		}
	// 		.interna {
	// 			.logo {
	// 				margin: 0 !important;
	// 			}
	// 		}
	// 	}
	// 	#conteudo {
	// 		.acordion {
	// 			h2 {
	// 				background-color: #58eea6;
	// 			}
	// 		}
	// 		&.internas {
	// 			h1 {
	// 				font-size: 3.5em;
	// 				margin-top: 25px;
	// 				padding-right: 100px;
	// 			}
	// 		}
	// 	}
	// }
    }
}

.container-big{
	width:1100px;
	margin:0 auto;
}

.policy-box p {
  line-height: 1.4em;
  margin-bottom: 20px;
  text-align: justify;
}
.policy-box h2,
.policy-box h3,
.policy-box h4 {
  color: #1d2847;
  margin-bottom: 5px;
}
.policy-box ul {
  margin-bottom: 20px;
}
.policy-box ul li {
  line-height: 1.4em;
  list-style: inside;
  margin-bottom: 5px;
  text-align: justify;
}

/*==============================
=            Button            =
==============================*/

.btn-link{
	padding:10px 15px;
	border: 2px solid $white;
	text-align:center;
	color:$blue;
	font-size:14px;
	border-radius(10px);
	width: 180px;
	float:right;
	font-weight:bold;
	transition(.2s);
	text-transform:uppercase;

	&:hover{
		color:$blue;
		border: 2px solid $blue;
	}
}


/*=====  End of Button  ======*/


 @import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
 /* 
    font-family: 'Roboto', sans-serif;
*/


/*=============================================
=            Section header block            =
=============================================*/
#header{
	width:100%;
	float:left;
	height:769px;
	position:relative;
	.container.top-logo {
		width: 94%;
		max-width: 1140px;
		height: 45px;
		padding: 0 30px;
	}
	.logo{
		// width:220px;
		// margin-top:45px;
		// float:left;
		// height:50px;
		// margin-left:30px;
		// overflow:hidden;
		// text-indent:-9999px;
		// background: url("../images/logo.png") 100% 100% no-repeat;
		// background-size: 100%;
		
		background: url("../images/logo.png") center center no-repeat;
		background-size: 100%;
		width: 220px;
		height: 40px;
		position: relative;
		float: left;
		overflow: hidden;
		text-indent: -9999px;

		retinaBGImage("../images/logo@2x.png");
		
		&.aminoacidos-ajinomoto{
			background: url("../images/logo-red.png") 100% 100% no-repeat;
			retinaBGImage("../images/logo@2x.png");
			// retinaBGImage("../images/logo-red@2x.png");
		}
		
		&.o-que-sao-aminoacidos{
			background: url("../images/logo-blue.png") 100% 100% no-repeat;
			retinaBGImage("../images/logo@2x.png");
			// retinaBGImage("../images/logo-blue@2x.png");
		}
		
		&.beleza{
			background: url("../images/logo-pink.png") 100% 100% no-repeat;
			retinaBGImage("../images/logo@2x.png");
			// retinaBGImage("../images/logo-pink@2x.png");
		}
		
		&.saude{
			background: url("../images/logo.png") 100% 100% no-repeat;
			retinaBGImage("../images/logo@2x.png");
			// retinaBGImage("../images/logo@2x.png");
		}
		
		&.esportes{
			background: url("../images/logo-yellow.png") 100% 100% no-repeat;
			retinaBGImage("../images/logo@2x.png");
			// retinaBGImage("../images/logo-yellow@2x.png");
		}
		h1 {
			margin: 0;
		}
	}
	
	#banner{
		width:100%;
		height:769px;
		position:absolute;
		margin-left:0%;
		z-index:0;
		
		.bg{
			position:absolute;
			z-index:-1;
			width:100%;
		}
	}
	
	#banner-interna{
		width:100%;
		height:350px;
		position:absolute;
		margin-left:0%;
		z-index:0;
		
		&.aminoacidos-ajinomoto{
			background: url("../images/banners/aminoacidos.jpg")top center no-repeat;
		}
		
		&.o-que-sao-aminoacidos{
			background: url("../images/banners/o-que-sao-aminoacidos.jpg")top center no-repeat;
		}
		
		&.beleza{
			background: url("../images/banners/beleza.jpg")top center no-repeat;
		}
		
		&.saude{
			background: url("../images/banners/saude.jpg")top center no-repeat;
		}
		
		&.esportes{
			background: url("../images/banners/esportes.jpg")top center no-repeat;
		}
	}
	
	/*============================
	=            Menu            =
	============================*/
		
	/* Icon 1 */
		
	.menu-hamburguer{
		float:right;
		padding:6px;
		margin-top:5px;
		background:$blue;
		width:38px;
		height:38px;
		cursor:pointer;
		border-radius(50%);
	}

	#nav-icon1 {
	  width: 30px;
	  height: 5px;
	  margin-right:0px;
	  position: absolute;
	  transform: rotate(0deg);
	  transition: .5s ease-in-out;
	  cursor: pointer;
	  right:10px;
	  top:10px;
	}

	#nav-icon1 span, {
	  display: block;
	  position: absolute;
	  height: 3px;
	  width: 100%;
	  background: $white;
	  border-radius: 9px;
	  opacity: 1;
	  left: 0;
	  transform: rotate(0deg);
	  transition: .25s ease-in-out;
	}

	#nav-icon1 span:nth-child(1) {
	  top: 10px;
	}

	#nav-icon1 span:nth-child(2) {
	  top: 19px;
	}

	#nav-icon1 span:nth-child(3) {
	  top: 28px;
	}

	#nav-icon1.open span:nth-child(1) {
	  top: 18px;
	  -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  -o-transform: rotate(135deg);
	  transform: rotate(135deg);
	}

	#nav-icon1.open span:nth-child(2) {
	  opacity: 0;
	  left: -60px;
	}

	#nav-icon1.open span:nth-child(3) {
	  top: 18px;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	}
	
	.menu{
		// width:250px;
		// margin-top:25px;
		// float:right;
		// margin-right:30px;
		// position:relative;
		
		width:250px;		
		margin: 0;
		position:absolute;
		float: none;
		top: -10px;
		right: 30px;
		ul{
			width:220px;
			display:none;
			text-align:right;
			position:absolute;
			right: -1px;
			z-index:1;
			top: 58px;
			background:$blue;
			padding:15px;
			
			li{
				width:100%;
				float:left;
				margin-top:10px;
				margin-bottom:10px;
				list-style:none;
				
				a{
					color:$white;
					width:100%;
					font-size:14px;
					text-transform:uppercase;					
					padding-bottom:5px;
					border:2px solid $blue;
					margin-bottom:20px;
					transition(.5s);
										
					&.active-menu{
						font-weight:bold;						
					}
				}
			}
			
			&.home{
				li{
					a{
						
						&:hover{
							border-bottom:2px solid $green;
						}
						
						&.active-menu{
							border-bottom:1px solid $green;
						}
					}
				}
			}
			
			&.aminoacidos-ajinomoto{
				li{
					a{
						
						&:hover{
							border-bottom:2px solid #ff0000;
						}
						
						&.active-menu{
							border-bottom:1px solid #ff0000;
						}
					}
				}
			}
			
			&.o-que-sao-aminoacidos{
				li{
					a{
						
						&:hover{
							border-bottom:2px solid #00aeef;
						}
						
						&.active-menu{
							border-bottom:1px solid #00aeef;
						}
					}
				}
			}
			
			&.beleza{
				li{
					a{
						&:hover{
							border-bottom:2px solid #eea5c9;
						}
						
						&.active-menu{
							border-bottom:1px solid #eea5c9;
						}
					}
				}
			}
			
			&.saude{
				li{
					a{
						
						&:hover{
							border-bottom:2px solid $green;
						}
						
						&.active-menu{
							border-bottom:1px solid $green;
						}
					}
				}
			}
			
			&.esportes{
				li{
					a{
						
						&:hover{
							border-bottom:2px solid #f7ec64;
						}
						
						&.active-menu{
							border-bottom:1px solid #f7ec64;
						}
					}
				}
			}
		}
	}
	/*=====  End of Menu  ======*/
		
	&.interna{
		height:350px;
		
		.logo{
			margin-left:550px !important;
		}
	}
}	

#footer{
	width: 100%;
	padding: 17px 0;
	float:left;

	a{
		.privacy {
			color: #000;
			text-transform: uppercase;
		}
	}
	
	p{
		font-weight:bold;
		color:$blue;
		text-align:center !important;
		font-size:12px;
	}
}


/*=====  End of Section header block  ======*/


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

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #58eea5;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #75d9bc;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #2ccda2;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #1d2847;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    


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