@media screen and (max-width: 950px){
	.desktop{
		display: none;
	}
	.mobile{
		display: block;
	}
	header {
		width: 100%;
    	padding: 0;
    	position: static;
	}
	.wrapper {
    	width: calc(100% - 20px);
	}
	header .icon{
		position: fixed;
		right: 0;
		top: 0px;
		padding: 0;
		box-sizing: border-box;
		font-size: 20px;
		background-color: transparent;
		border: 0;
		z-index: 10;
		width: 60px;
		height: 61px;
	}
	header .logo{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		width: 100%;
		background-color: #FFF;
	}
	header .logo a{
		display: inline-block;
		width: 40px;
	}
	header button i{
		color: #333;
	}
	header .wrapper.flexIndex{
		width: 100%;
	}
	header .wrapper.flexIndex nav{
    	width: 100%;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    position: fixed;
	    top: 0;
	    left: auto;
	    height: 100vh;
	    background-color: #FFF;
	    z-index: 10;
	    -ms-justify-content: center;
	    justify-content: center;
	    -ms-align-items: flex-start;
	    align-items: flex-start;
	    z-index: 8;
	    right: -100%;
	    -webkit-transition: All ease-out 0.3s;
		-moz-transition: All ease-out 0.3s;
		-o-transition: All ease-out 0.3s;
		transition: All ease-out 0.3s;
	}
	header .wrapper.flexIndex nav ul li {
    	width: 100%;
    	display: block;
    	text-align: center;
    	padding: 10px 20px;
	}
	header nav ul li a {
	    font-family: 'open_sansbold';
	    color: #222;
	    font-size: 15px;
	    line-height: 100%;
	    padding: 4px 0;
	    display: inline-block;
	    position: relative;
	}
	.menui {
		background: #000;
		transition: 0.6s ease;
		transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
		margin-top: 10px;
		position: absolute;
	}
	.iconos {
    	position: relative;
    	top: 5px;
    	right: 16px;
	}
	.top-animate {
		background: #000 !important;
		top: 13px !important;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.mid-animate {
		opacity: 0;
	}
	.bottom-animate {
		background: #000 !important;
		top: 13px !important;
		-webkit-transform: rotate(-225deg);
		transform: rotate(-225deg);
	}
	.top-menu {
		top: 5px;
		width: 25px;
		height: 3px;
		border-radius: 10px;
		background-color: #000;
		right: 0;
	}
	.mid-menu {
		top: 13px;
		width: 25px;
		height: 3px;
		border-radius: 10px;
		background-color: #000;
		right: 0;
	}
	.bottom-menu {
		top: 21px;
		width: 25px;
		height: 3px;
		border-radius: 10px;
		background-color: #000;
		right: 0;
	}
	body.open header .wrapper.flexIndex nav{
	    right: 0;
	}


	footer .wrapper {
		width: 100% !important;
		position: relative;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	footer .legal{
		position: relative;
	}
	footer ul {
		-ms-justify-content: center;
		justify-content: center;
		margin-top: 20px;
	}
	#mc_embed_signup  {
		position: relative;
		background-color: #7c7c7c;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		right: unset ;
	}
	#mc_embed_signup form  {
		min-width: unset !important;
		max-width: unset !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	#mc_embed_signup #mce-EMAIL::placeholder{
		padding-left: 5px;
	}

	#mc_embed_signup .mc-field-group{
		text-align: center;
	}
	

}

@media screen and (max-width: 768px){
	.desktop{
		display: none;
	}
	.mobile{
		display: block;
	}
	header {
		width: 100%;
    	padding: 0;
    	position: static;
	}
	.wrapper {
    	width: calc(100% - 20px);
	}
	header .icon{
		position: fixed;
		right: 0;
		top: 0px;
		padding: 0;
		box-sizing: border-box;
		font-size: 20px;
		background-color: transparent;
		border: 0;
		z-index: 10;
		width: 60px;
		height: 61px;
	}
	header .logo{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		width: 100%;
		background-color: #FFF;
	}
	header .logo a{
		display: inline-block;
		width: 40px;
	}

	.text img {
		margin: 0px 10px;
		position: relative;
		top: -8px;
	}
	header button i{
		color: #333;
	}
	header .wrapper.flexIndex{
		width: 100%;
	}
	header .wrapper.flexIndex nav{
    	width: 100%;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    position: fixed;
	    top: 0;
	    left: auto;
	    height: 100vh;
	    background-color: #FFF;
	    z-index: 10;
	    -ms-justify-content: center;
	    justify-content: center;
	    -ms-align-items: center;
	    align-items: center;
	    z-index: 8;
	    right: -100%;
	    -webkit-transition: All ease-out 0.3s;
		-moz-transition: All ease-out 0.3s;
		-o-transition: All ease-out 0.3s;
		transition: All ease-out 0.3s;
	}
	header .wrapper.flexIndex nav ul li {
    	width: 100%;
    	display: block;
    	text-align: center;
    	padding: 10px 20px;
	}
	header nav ul li a {
	    font-family: 'open_sansbold';
	    color: #222;
	    font-size: 12px;
	    line-height: 100%;
	    padding: 4px 0;
	    display: inline-block;
	    position: relative;
	}
	.menui {
		background: #000;
		transition: 0.6s ease;
		transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
		margin-top: 10px;
		position: absolute;
	}
	.iconos {
    	position: relative;
    	top: 5px;
    	right: 16px;
	}
	.top-animate {
		background: #000 !important;
		top: 13px !important;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.mid-animate {
		opacity: 0;
	}
	.bottom-animate {
		background: #000 !important;
		top: 13px !important;
		-webkit-transform: rotate(-225deg);
		transform: rotate(-225deg);
	}
	.top-menu {
		top: 5px;
		width: 25px;
		height: 3px;
		border-radius: 10px;
		background-color: #000;
		right: 0;
	}
	.mid-menu {
		top: 13px;
		width: 25px;
		height: 3px;
		border-radius: 10px;
		background-color: #000;
		right: 0;
	}
	.bottom-menu {
		top: 21px;
		width: 25px;
		height: 3px;
		border-radius: 10px;
		background-color: #000;
		right: 0;
	}
	body.open header .wrapper.flexIndex nav{
	    right: 0;
	}
	section.mainBanner {
    	position: relative;
    	z-index: 1;
    	height: 70vh;
    	background-size: cover;
		background-position: center;
	}
	.mainBannerSlick li{
		height:70vh;
		overflow: hidden;
		position: relative;
		background-size: cover;
		background-position: center;
	}
	.mainBannerSlick li.slide_1{
		background-image: url(../images/banners/1---Banner_empanada_mobile.jpg);
	}
	.mainBannerSlick li.slide_2{
		background-image: url(../images/banners/2---Banner_empanada_mobile.jpg);
	}
	.mainBannerSlick li.slide_3{
		background-image: url(../images/banners/3---Banner_empanada_mobile.jpg);
	}
	.mainBannerSlick li.slide_4{
		background-image: url(../images/banners/4---Banner_empanada_mobile.jpg);
	}
	.mainBannerSlick li.slide_5{
		background-image: url(../images/banners/5---Banner_empanada_mobile.jpeg);
	}
	.mainBannerSlick li.slide_6{
		background-image: url(../images/banners/6---Banner_empanada_mobile.jpg);
	}
	.mainBannerSlick li.slide_7{
		background-image: url(../images/banners/7---Banner_empanada_mobile.jpeg);
	}
	.mainBannerSlick li.slide_8{
		background-image: url(../images/banners/8---Banner_empanada_mobile.jpg);
	}
	
	.slick-prev, .slick-next {
		top: 60% !important;
	}
	.mainBannerSlick li .texto{
		padding: 0 20px;
	}
	.mainBannerSlick li .texto h2{
		font-size: 35px;
		line-height: 140%;
	}
	section.mainBanner img{
		height: 100%;
		width: 100%;
		opacity: 0;
	} 
	section.banners .colIndex {
    	width: 100%;
    	margin: 0 0 50px 0;
	}
	section.banners {
    	padding: 0 0 40px 0;
	}
	section.cluster {
    	padding: 0 0 20px 0;
	}
	section.cluster .colIndex {
    	width: 100%;
    	margin: 0 0 30px 0;
	}
	section.messages {
    	padding: 0 0 30px 0;
	}
	section.messages article .texto {
    	padding: 20px;
	}
	/* footer ul{
		-ms-justify-content: flex-end;
		justify-content: flex-end;
	} */
	footer ul li a{
		padding: 0 5px;
	}
	/* footer .wrapper {
   	 	width: calc(100% - 30px);
	} */

	

	.mainBannerSlick .slick-dots {
    	bottom: 10px;
	}
	section.since {
    	padding: 50px 0;
    	text-align: center;
    	box-sizing: border-box;
	}
	section.messages article .texto p {
    	font-size: 14px;
	}
	section.mainBanner .slick-dots li button:before{
		width: 14px;
		height: 14px;
	}
	section.since h2 {
    	font-size: 30px;
	}
	/*-----LOCATIONS*/
	body#page-LOCATIONS section.mainBanner{
		background-image: url(../images/locations_banner.jpg);
	}
	section.locations ol li {
    	width: 100%;
    	margin: 0 0 50px 0;
	}
	/*-----DELIVERY*/
	body#page-DELIVERY section.mainBanner{
		background-image: url(../images/delivery_banner.jpg);
	}
	section.delivery .titulo h2 {
		font-size: 28px;
    	padding: 0 0 30px 0;
	}
	section.delivery {
    	padding: 50px 0 60px 0;
	}
	section.delivery .menuLast {
    	padding: 60px 0 0 0;
    	margin: 20px 0 0 0;
	}
	section.delivery ol.columnIndex li:last-child{
		position: static;
		width: 100%;
	}
	section.delivery .menuLast.menuLast2 {
    	padding: 40px 0 0 0;
    	margin: 20px 0 0 0;
    	border-top: thin solid #EEE;
	}
	section.delivery h3 {
    	padding: 0 0 10px 0;
	}
	section.delivery .menu_list li{
		width: 100%;
	}
	section.delivery ol.columnIndex li {
		width: 100%;
	}
	/*-----THE TRUCK*/
	section.thetruck {
    	padding: 60px 0 80px 0;
	}
	body#page-THETRUCK section.mainBanner{
		background-image: url(../images/thetruck_banner.jpg);
	}
	section.thetruck h3 {
		width: 100%;
    	font-size: 28px;
    	line-height: 130%;
    	text-align: center;
	}
	section.thetruck .colIndex{
		width: 100%;
	}
	section.thetruck a.btn {
    	margin: 20px 0 0 0;
	}
	section.thetruck .colIndex:nth-child(2) {
    	padding: 50px 0 0 0;
    	text-align: center;
	}
	/*-----CATERING*/
	section.catering {
    	padding: 60px 0 80px 0;
	}
	body#page-CATERING section.mainBanner{
		background-image: url(../images/catering_banner.jpg);
	}
	section.catering h3 {
		width: 100%;
    	font-size: 28px;
    	line-height: 130%;
    	text-align: center;
	}
	section.catering .colIndex{
		width: 100%;
	}
	section.catering a.btn {
    	margin: 20px 0 0 0;
		font-size: 12px ;
		padding: 15px 20px;
	}

	section.catering h3 span:nth-child(3){
		padding-bottom: 20px;
	}

	section.catering .colIndex:nth-child(2) {
    	padding: 50px 0 0 0;
    	text-align: center;
	}
	/*-----ABOUT US*/
	section.aboutUs {
    	padding: 60px 0 80px 0;
	}
	body#page-ABOUT section.mainBanner{
		background-image: url(../images/about_us_banner.jpg);
	}
	section.aboutUs h3 {
		width: 100%;
    	font-size: 28px;
    	line-height: 130%;
    	text-align: center;
	}
	section.aboutUs .colIndex{
		width: 100%;
	}
	section.aboutUs .colIndex:nth-child(2) {
    	padding: 50px 0 0 0;
    	text-align: center;
	}
	/*-----CONTACT*/
	section.contact {
    	padding: 60px 0;
	}
	body#page-CONTACT section.mainBanner{
		background-image: url(../images/about_us_banner.jpg);
	}
	section.contact .titulo {
    	text-align: center;
    	padding: 0 0 60px 0;
	}
	section.contact .colIndex {
    	width: 100%;
	}
	.formulario form div {
    	display: block;
    	width: 100%;
	}
	/*-----CONTACT*/
	section.shipping {
    	padding: 60px 0;
	}
	body#page-SHIPPING section.mainBanner{
		background-image: url(../images/shipping_banner.jpg);
	}
	section.shipping .colIndex {
		width: 100%;
		margin: 0 0 50px 0;
	}
	section.shipping h4 {
		padding: 30px 0;
	}
	section.shipping ol.flexIndex li {
		width: calc(50% - 4px);
		margin: 0 0 7px 0;
	}
	/* Catering*/
	.menuLast.cateringContainer {
		flex-direction: column;
	}
	
	.menuLast.cateringContainer img{
		width: 394px;
		margin: 40px 0 20px 0;
	}
	.cateringSub p {
		margin: 10px 0;
	}
}

/*--------------------------------------------------------------------*/
header .burger_toggle{
	cursor: pointer;
	transition: all .5s;

	z-index: 99999999;
}

header .burger{
	box-sizing: border-box;
	font-size: 20px;
	background-color: transparent;
	border: 0;
	z-index: 10;
	width: 100%;
	height: auto;
	display: inline-flex;
}


/* @media screen and (min-width:768px) {
	header .burger_active{
		position: relative;
		right: -70px;
		transition: all .5s;
	}
} */

header .burgers {
	position: relative;
	top: -25px;
	right: -12px;
}


.burger .menui {
	background: #000;
	transition: 0.6s ease;
	transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
	margin-top: 10px;
	position: absolute;
}

.top-animate {
	background: #000 !important;
	top: 13px !important;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.mid-animate {
	opacity: 0;
}
.bottom-animate {
	background: #000 !important;
	top: 13px !important;
	-webkit-transform: rotate(-225deg);
	transform: rotate(-225deg);
}
.burger .top-menu {
	top: 5px;
	width: 25px;
	height: 3px;
	border-radius: 10px;
	background-color: #000;
	right: 0;
}
.burger .mid-menu {
	top: 13px;
	width: 25px;
	height: 3px;
	border-radius: 10px;
	background-color: #000;
	right: 0;
}
.burger .bottom-menu {
	top: 21px;
	width: 25px;
	height: 3px;
	border-radius: 10px;
	background-color: #000;
	right: 0;
}








.extra-nav{
	opacity: 0;
	transform: translateX(500px);
	transition: all .25s; 
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 0px 5px 5px #b7b2b245;
}

.active{
	opacity: 1;
	transform: translateX(0px);
	background-color: white;
	transition: transform .5s; 
}

.activeMobile{
	opacity: 1;
	transform: translateX(0px);
	background-color: transparent;
	position: relative !important;
	box-shadow: none !important;
	height: auto !important;
	top: 400px !important;
}

.extra-nav .flexIndex{
	height: 50%;
}

.extra-nav li a{
	font-size: 12px !important;
}


@media screen and (max-width:768px) {
	a.burger{
		display: none;
	}

	a.btn{
		background-color: black;
		color: white !important;
		padding:8px ;
	}

	header nav ul.nav.flexIndex li:nth-child(2) a{
		background-color: grey;
		color: white;
		padding: 8px;
	}

	header nav.extra-nav ul.nav.flexIndex li:nth-child(2) a{
		background-color: transparent;
		color: black;
		
	}
	header nav.extra-nav ul.nav.flexIndex li a,
	header nav ul.nav.flexIndex li a{
		padding: 8px;
	}


	.extra-nav{
		top: 240px !important;
		transform: none !important;
	}
	.activeMobile{
		position: fixed !important;
		transform: none !important;
	}

	nav.extra-nav.activeMobile{
		transform: translateY(50px) !important;
	}

}

@media screen and (min-width:768px) {
	.extra-nav .flexIndex{
		flex-direction: column !important;
		justify-content: space-between !important;
	}

	ul.nav.flexIndex {
		position: relative;
		left: 10px;
	}

	nav.extra-nav.active ul.nav.flexIndex{
		margin-right: unset !important;
	}
}