@import url('../lib/bootstrap/css/bootstrap.min.css');
@import url('../lib/font-awesome/font-awesome.min.css');
@import url('../lib/ekko-lightbox/ekko-lightbox.css');
@import url('../lib/owl-carousel/owl.carousel.min.css');
@import url('../lib/owl-carousel/owl.theme.default.min.css');
@import url('../lib/whatsapp-widget/whatsapp.css');
@import url('../lib/font-caveat/caveat.css');
@import url('color.css');
@import url('custom.css');

html, body{
	margin:0;
	padding:0;
	font-size:14px;
	line-height:normal;
	color:#666;
	overflow-x:hidden !important;
}

body{
	background: #fff;
}


/* ADDONS */
.home-produtos-relative{
	position: relative; 
	left: -100px;
}
@media only screen and (max-width: 800px) {
	.home-produtos-relative{
		position: relative; 
		left: 0px;
	}
}


a,
a:link,
a:active,
a:visited{
	color:#666;
	transition:0.5s;
	text-decoration:none
}
a:hover{
	color: var(--red)	
}

/* LINKS */
.cor-links-rodape a,
.cor-links-rodape a:link,
.cor-links-rodape a:active,
.cor-links-rodape a:visited{
	color:var(--blue);
	transition:0.5s
}
.cor-links-rodape a:hover{
	color:var(--red);
}

.cor-links-unidades{
	transition:0.5s
}
.cor-links-unidades:hover{
	opacity:0.4
}

/* COMPONENTS */
#relative-components,
.relative-components{
	position:relative;
	width:100%
}
.home-bolacha-left-top{
	position:absolute;
	width:100px;
	left:0px;
	top:-100px;
	z-index:8;
}
.home-cocacola-right-top{
	position:absolute;
	width:200px;
	right:0px;
	top:-120px;
	z-index:8;
}
.home-chocolate-left-bottom{
	position:absolute;
	width:130px;
	left:0px;
	bottom:-50px;
	z-index:8;
}
.home-bolacha-right-bottom{
	position:absolute;
	width:120px;
	right:0px;
	bottom:-70px;
	z-index:8;
}
.produtos-chocolate-left-middle{
	position:absolute;
	width:80px;
	left:0px;
	bottom:-50px;
	z-index:8;
}
.produtos-jujuba-right-middle{
	position:absolute;
	width:100px;
	right:0px;
	bottom:-60px;
	z-index:8;
}
@media only screen and (max-width: 900px) {
	.home-bolacha-left-top{
		width:50px;
		top:-80px;
	}
	.home-cocacola-right-top{
		position:absolute;
		width:120px;
		top:-90px;
	}
	.home-chocolate-left-bottom{
		width:95px;
		bottom:-40px;
	}
	.home-bolacha-right-bottom{
		width:90px;
		bottom:-65px;
	}
	.produtos-chocolate-left-middle{
		width:60px;
		bottom:-90px;
	}
	.produtos-jujuba-right-middle{
		width:80px;
		bottom:-70px;
	}
}


/* BACKGROUNDS */
.webp .background-ng-red{
	background: url(../img/backgrounds/background-ng-red.webp) center center repeat-y;
	background-size:100%
}
.no-webp .background-ng-red{
	background: url(../img/backgrounds/background-ng-red.jpg) center center repeat-y;
	background-size:100%
}
.webp .background-circle-produtos-home{
	background: url(../img/backgrounds/background-circle-produtos-home.webp);
	background-position: center bottom 40%;
	background-repeat:no-repeat;
	background-size:100%
}
.no-webp .background-circle-produtos-home{
	background: url(../img/backgrounds/background-circle-produtos-home.png);
	background-position: center bottom 40%;
	background-repeat:no-repeat;
	background-size:100%
}
.webp .background-ng-white{
	background: url(../img/backgrounds/background-ng-white.webp) center center repeat-y;
	background-size:100%
}
.no-webp .background-ng-white{
	background: url(../img/backgrounds/background-ng-white.jpg) center center repeat-y;
	background-size:100%
}
.webp .background-ng-white-faixa{
	background: url(../img/backgrounds/background-ng-white-faixa.webp) center top no-repeat #fff;
	background-size:100%
}
.no-webp .background-ng-white-faixa{
	background: url(../img/backgrounds/background-ng-white-faixa.jpg) center top no-repeat #fff;
	background-size:100%
}


/* MENU */
.webp .navbar-background{
	background: url(../img/backgrounds/background-header.webp) center top no-repeat;
	background-size:cover
}
.no-webp .navbar-background{
	background: url(../img/backgrounds/background-header.jpg) center top no-repeat;
	background-size:cover
}

@media only screen and (max-width: 600px) {
	.navbar-background{
		background: url(../img/backgrounds/background-header.jpg) center top no-repeat;
		background-size:cover
	}
}

.navbar-brand{
	padding:0px
}
.navbar{
	margin:0;
	padding:0	
}

.navbar-nav .nav-item a{
	font-weight: 700;
	font-size:17px;
	margin: 0px;
	padding:2px 22px !important;
	color: var(--blue);
	text-transform:uppercase;
	transition: 0.5s;
}

.navbar-nav .nav-link:hover{
	color: var(--red);
}

.dropdown-item{
    font-size: 14px;
	line-height: 25px;
	text-transform: uppercase;
	color: #ffffff !important;
	font-weight: 500;
	text-align:center
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #ffffff !important;
	background: var(--blue);
}

.dropdown-item.active,.dropdown-item:active{
	color: #ffffff !important;
	text-decoration: none;
	background-color: var(--blue) !important
}

.dropdown:hover>.dropdown-menu {
  display: block;
  left: 25px;
  border: none
}
.navbar-toggler-icon{
	margin-bottom: 5px	
}
@media only screen and (max-width: 600px) {
	.navbar-collapse{
		margin-top:20px
	}	
	.navbar-brand{
		padding: 0px 12px;
		margin-right: 0px
	}
	.nav-link {
	   padding: 5px 20px !important;
	}
	.navbar-collapse{
		margin-bottom: 10px	
	}
	.dropdown:hover>.dropdown-menu {
	  margin-left: 15px;
	  margin-right: 15px;
	}
	.navbar-nav li.nav-item:nth-child(8),
	.navbar-nav li.nav-item:nth-child(9){
		display:inline !important
	}
}

/* MENU SOCIAL TOP */
.menu-social-top{
	list-style:none;
	padding:0;
	margin:0;
	text-align:left;
		
}
.menu-social-top > li{
	display:inline-table	
}
.menu-social-top > li > a,
.menu-social-top > li > a:link,
.menu-social-top > li > a:active,
.menu-social-top > li > a:visited,
.menu-social-top > li > a:focus{
	display:block;
	color:var(--blue);
	font-size:30px;
	text-align:center;
	margin-top:3px;
	margin-right:5px;
	cursor:pointer;
	transition:0.5s
}
.menu-social-top > li > a:hover{
	color:var(--red);
}
@media only screen and (max-width: 600px) {
	.menu-social-top{
		margin-left:auto;
		margin-right:auto;
		width:100%;
		margin-top:5px;
		margin-bottom:10px;
		text-align:center;
	}
	.menu-social-top > li{
		display:inline-table;
		margin-left:0px;
		margin-right:0px;
	}
}

/* MENU SOCIAL BOTTOM */
.menu-social-bottom{
	list-style:none;
	padding:0;
	margin:0;
	text-align:left;
		
}
.menu-social-bottom > li{
	display:inline-table	
}
.menu-social-bottom > li > a,
.menu-social-bottom > li > a:link,
.menu-social-bottom > li > a:active,
.menu-social-bottom > li > a:visited,
.menu-social-bottom > li > a:focus{
	display:block;
	color:var(--red);
	font-size:30px;
	text-align:center;
	margin-top:3px;
	margin-right:5px;
	cursor:pointer;
	transition:0.5s
}
.menu-social-bottom > li > a:hover{
	color:var(--blue);
}
@media only screen and (max-width: 600px) {
	.menu-social-bottom{
		margin-left:auto;
		margin-right:auto;
		width:100%;
		margin-top:5px;
		margin-bottom:10px;
		text-align:center;
	}
	.menu-social-bottom > li{
		display:inline-table;
		margin-left:0px;
		margin-right:0px;
	}
}

/* MENU ADICIONAL TOP */
.menu-adicional-top{
	list-style:none;
	padding:0;
	margin:0;
	text-align:right;
		
}
.menu-adicional-top > li{
	display:inline-table	
}
.menu-adicional-top > li:nth-of-type(1) > a,
.menu-adicional-top > li:nth-of-type(1) > a:link,
.menu-adicional-top > li:nth-of-type(1) > a:active,
.menu-adicional-top > li:nth-of-type(1) > a:visited,
.menu-adicional-top > li:nth-of-type(1) > a:focus{
	display:block;
	color:#fff;
	background:var(--red);
	font-size:13px;
	padding:4px 15px;
	border-radius:5px;
	text-align:center;
	margin-top:2px;
	margin-right:2px;
	cursor:pointer;
	transition:0.5s
}
.menu-adicional-top > li:nth-of-type(1) > a:hover{
	background:var(--blue);
}

.menu-adicional-top > li:nth-of-type(2) > a,
.menu-adicional-top > li:nth-of-type(2) > a:link,
.menu-adicional-top > li:nth-of-type(2) > a:active,
.menu-adicional-top > li:nth-of-type(2) > a:visited,
.menu-adicional-top > li:nth-of-type(2) > a:focus{
	display:block;
	color:var(--blue);
	font-size:13px;
	padding:4px 15px;
	border-radius:5px;
	font-weight:500;
	text-align:center;
	margin-top:2px;
	margin-right:2px;
	cursor:pointer;
	transition:0.5s
}
.menu-adicional-top > li:nth-of-type(2) > a:hover{
	color:var(--red);
}
@media only screen and (max-width: 600px) {
	.menu-adicional-top{
		margin-left:auto;
		margin-right:auto;
		width:100%;
		margin-top:5px;
		margin-bottom:10px;
		text-align:center;
	}
	.menu-adicional-top > li{
		display:inline-table;
		margin-left:0px;
		margin-right:0px;
	}
}




/* BOTOES */
.botoes-red,
.botoes-red a,
.botoes-red a:link,
.botoes-red a:active,
.botoes-red a:visited{
	padding: 8px 28px;
	color:#fff !important;
	font-size:15px;
	font-weight: 500;
	margin: 5px;
	border-radius: 10px;
	transition: 0.5s;
	background: var(--red) !important;
}
.botoes-red:hover,
.botoes-red a:hover{
	background: var(--blue) !important;
}



.form-control input[type=select]{
	height:70px !important
}

.form-control{
	padding:10px 25px;
	border: 1px solid #cacaca;
	font-size:15px !important;
	height:48px;
	margin-bottom:11px;
	border-radius:7px;
	margin-top:3px;	
	font-weight:600;
	background:#f1f1f1;
}
.form-control:focus,
.form-control-busca:focus{
	background:#ffffff;
}
::placeholder{
  color: #777 !important;
  opacity: 1;
}

:-ms-input-placeholder{
  color: #777 !important;
}

::-ms-input-placeholder{
  color: #777 !important;
}
.has-error .checkbox, 
.has-error .checkbox-inline, 
.has-error .control-label, 
.has-error .help-block, 
.has-error .radio, 
.has-error .radio-inline, 
.has-error .checkbox label, 
.has-error .checkbox-inline label, 
.has-error .radio label, 
.has-error .radio-inline label{
    color: var(--red);
}
.help-block {
    display: block;
    margin-top: 5px;
    margin-left: 16px;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--red);
}

@media (min-width: 576px){
	.modal-dialog {
		max-width: 500px;
	}
}
.modal-content {
	border:none !important	
}

.ekko-lightbox .modal-footer {
    text-align:center !important;
}

.modal-open {
    overflow: hidden !important;
}
