/* NAVIGATION BAR */

header {
	background:url(../images/menu/bar.png) top center no-repeat;

	width:100%;
	height:113px;
  display: block;
  margin-left: auto;
  margin-right: auto;
	top:0px;
	position:fixed;
	z-index:9999;
}

header nav {
	display:block;
	width:1450px;
	margin:0 auto;
	height:100px;
}



header #nav {
	width:950px;
	float:left;
	list-style:none;
	padding-top:0px;
	height:100px;

}



header #nav #n-logo a {
	background: url(../images/menu/logo.png) top center no-repeat;
	width: 290px;
	height: 200px;
	float: left;
	cursor: pointer;
	display: block;
	}


/*btn producto*/
header #nav #n-producto a {
	background: url(../images/menu/bt-videos.png) top center no-repeat;
	background-position:top;
	width:90px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:60px;
	margin-left:15px;
	}

header #nav #n-producto a:hover {background-position:bottom;}


header #nav li#n-producto.current a {
    background: url(../images/menu/bt-videos.png) top center no-repeat;
	background-position:bottom;
}


/*btn videos*/
header #nav #n-videos a {
	background: url(../images/menu/bt-productos.png) top center no-repeat;
	background-position:top;
	width:140px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:60px;
	margin-left:15px;
	}

header #nav #n-videos a:hover {background-position:bottom;}

header #nav li#n-videos.current a {
    background: url(../images/menu/bt-productos.png) no-repeat;
	background-position:bottom;
}



/*btn social*/
header #nav #n-social a {
	background: url(../images/menu/bt-social.png) top center no-repeat;
	background-position:top;
	width:180px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:60px;
	margin-left:20px;
	}

header #nav #n-social a:hover {background-position:bottom;}

header #nav li#n-social.current a {
    background: url(../images/menu/bt-social.png) no-repeat;
	background-position:bottom;
}


/*btn contacto*/
header #nav #n-contacto a {
	background: url(../images/menu/bt-contacto.png) top center no-repeat;
	background-position:top;
	width:130px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:60px;
	margin-left:15px;
	}

header #nav #n-contacto a:hover {background-position:bottom;}

header #nav li#n-contacto.current a {
    background: url(../images/menu/bt-contacto.png) no-repeat;
	background-position:bottom;
}





/* REDES*/
header #redes {float:left; margin-top:40px;}


/*btn facebook*/
header #redes a.n-fb {
	background: url(../images/menu/face.svg) top center no-repeat;
	width:60px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:-40px;
	margin-left:10px;
}


/*btn instagram*/
header #redes a.n-inst{
	background: url(../images/menu/insta.svg) top center no-repeat;
	width:60px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:-40px;
	margin-left:20px;
}


/*btn instagram*/
header #redes  a.n-ytb {
	background: url(../images/menu/video.svg) top center no-repeat;
	background-position:top;
	width:60px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:-40px;
	margin-left:10px;
}






/*MEDIA QUERIES // RESPONSIVE ---------------------------------------------*/


/*1920*/
@media screen and (max-width:1800px) {

	header {
		background:url(../images/menu/bar.png) top center no-repeat;

		width:1800px;
		height:113px;
  display: block;
  margin-left: auto;
  margin-right: auto;
		top:0px;
		position:fixed;
		z-index:9999;
	}



}



/*1600*/
@media screen and (max-width:1600px) {
	header {
		background:url(../images/menu/bar.png) top center no-repeat;

		width:1600px;
		height:113px;
  display: block;
  margin-left: auto;
  margin-right: auto;
		top:0px;
		position:fixed;
		z-index:9999;
	}

}

/*1300*/
@media screen and (max-width:1300px) {
	header {
		background:url(../images/menu/bar.png) top center no-repeat;

		width:1440px;
		height:113px;
  display: block;
  margin-left: auto;
  margin-right: auto;
		top:0px;
		position:fixed;
		z-index:9999;
	}


}





/*1300*/
@media screen and (max-width:1200px) {
	header {
		background:url(../images/menu/bar.png) top center no-repeat;

		width:1440px;
		height:113px;
  display: block;
  margin-left: auto;
  margin-right: auto;
		top:0px;
		position:fixed;
		z-index:9999;
	}


/*btn facebook*/
header #redes a.n-fb {
	background: url(../images/menu/face.svg) top center no-repeat;
	width:48px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:-40px;
	margin-left:5px;
}


/*btn instagram*/
header #redes a.n-inst{
	background: url(../images/menu/insta.svg) top center no-repeat;
	width:48px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:-40px;
	margin-left:10px;
}


/*btn instagram*/
header #redes  a.n-ytb {
	background: url(../images/menu/video.svg) top center no-repeat;
	background-position:top;
	width:48px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:-40px;
	margin-left:5px;
}

}





/*1150*/
@media screen and (max-width:1150px) {
	header {
		background:url(../images/menu/bar.png) top center no-repeat;
		background-position: -620px 0px;
		width:1150px;
		height:113px;
  display: block;
  margin-left: auto;
  margin-right: auto;
		top:0px;
		position:fixed;
		z-index:9999;
	}

	header nav {width:100%; }
	header #nav {width:900px;}

	header #nav #n-logo a {
		background-size:230px 157px;
		width: 230px;
		height: 157px;
		margin-left:10px;
	}


	header #redes {
		width: 290px;
		height: 100px;
        float:right;
        margin-top:-140px;
		margin-right:0px;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
}

/*btn producto*/
header #nav #n-producto a {
	background: url(../images/menu/bt-videos.png) top center no-repeat;
	background-position:top;
	width:90px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:60px;
	margin-left:0px;
	}

/*btn facebook*/
header #redes a.n-fb {
	background: url(../images/menu/face.svg) top center no-repeat;
	width:45px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:20px;
	margin-left:5px;
}


/*btn instagram*/
header #redes a.n-inst{
	background: url(../images/menu/insta.svg) top center no-repeat;
	width:45px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:20px;
	margin-left:20px;
}


/*btn instagram*/
header #redes  a.n-ytb {
	background: url(../images/menu/video.svg) top center no-repeat;
	background-position:top;
	width:45px;
	height:100px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:20px;
	margin-left:5px;
}


}



/*1024**********************************************************************/
@media screen and (max-width:1024px) {
	header {
		background:url(../images/menu/bar.png) top center no-repeat;
		background-position: -620px 0px;
		width:1050px;
		height:113px;
  display: block;
  margin-left: auto;
  margin-right: auto;
		top:0px;
		position:fixed;
		z-index:9999;
	}

	header nav {width:100%; }
	header #nav {width:900px;}

	header #nav #n-logo a {
		background-size:230px 157px;
		width: 230px;
		height: 157px;
		margin-left:10px;
	}

	header #redes {
		width: 240px;
		height: 60px;
        float:right;
        margin-top:-170px;
		margin-right:140px;
}

/*btn producto*/
header #nav #n-producto a {
	background: url(../images/menu/bt-videos.png) top center no-repeat;
	background-position:top;
	width:90px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:60px;
	margin-left:0px;
	}


/*btn facebook*/
	header #redes a.n-fb {
	background: url(../images/menu/instac.svg) top center no-repeat;
		background-size:45px 45px;
		width:45px;
		height:45px;
		margin-top:70px;
		margin-left:25px;
	}


/*btn instagram*/
	header #redes a.n-inst{
	background: url(../images/menu/facec.svg) top center no-repeat;
		background-size:45px 45px;
		width:45px;
		height:45px;
		margin-top:70px;
		margin-left:25px;
	}


/*btn instagram*/
	header #redes  a.n-ytb {
	background: url(../images/menu/videoc.svg) top center no-repeat;
		background-size:45px 45px;
		width:45px;
		height:45px;
		margin-top:70px;
		margin-left:25px;
	}

}



/*800*************************************************************************************************/
@media screen and (max-width:900px) {

header {
	background:#e2382d;
	height:80px;
	width:100%;
	}

nav {
	width:100%;
	}

header .contentMenu {
	width:100%;
	position:relative;
	}


header #nav #n-logo a {display: none;}


/*menu bar*/
header .menu_bar {
		display:block;
		position:absolute;
		right:10px;
		z-index:1000;
		width:90%;
}


header .menu_bar #logo {
		background: url(../images/menu/logo.png) top center no-repeat;
		background-size:150px 100px;
		width: 150px;
		height: 100px;
		float:none;
		position:absolute;
		left:-30px;
		top:10px;
		z-index:1000;
}


header .menu_bar .bt-menu {
		display:block;
		padding:24px;
		color:#fff;
		text-decoration:none;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
}


header .menu_bar span {
		float:right;
}


header .menu_bar span.icon-menu {
		background:url(../images/menu/menuBar.png) top no-repeat;
		height:41px;
		width:42px;
}


header nav {
		background:#e2382d;
		border-radius:20px;
		width:220px;
		height:220px;
		right:-100%;
		margin:0;
		position:fixed;
		top:72px;
		z-index:1000;
}



header #nav {
		width:100%;
		padding-top:5px;
}


header #nav #n-logo a {
	display:none;
}



header #nav #n-producto a,
header #nav #n-videos a,
header #nav #n-social a,
header #nav #n-contacto a {
	float:none;
	margin-top:5px;
	margin:0;
}


/*btn producto*/
header #nav #n-producto a {
	background: url(../images/menu/bt-videos.png) top center no-repeat;
	background-position:top;
	width:87px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:0px;
	margin-left:0px;
	}

/*btn videos*/
header #nav #n-videos a {
	background: url(../images/menu/bt-productos.png) top center no-repeat;
	background-position:top;
	width:130px;
	height:30px;

	cursor: pointer;
	display: block;
	margin-top:30px;
	margin-left:0px;
	}

header #nav #n-videos a:hover {background-position:bottom;}

header #nav li#n-videos.current a {
    background: url(../images/menu/bt-productos.png) no-repeat;
	background-position:bottom;
}



/*btn social*/
header #nav #n-social a {
	background: url(../images/menu/bt-social.png) top center no-repeat;
	background-position:top;
	width:175px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:0px;
	margin-left:0px;
	}

header #nav #n-social a:hover {background-position:bottom;}

header #nav li#n-social.current a {
    background: url(../images/menu/bt-social.png) no-repeat;
	background-position:bottom;
}


/*btn contacto*/
header #nav #n-contacto a {
	background: url(../images/menu/bt-contacto.png) top center no-repeat;
	background-position:top;
	width:119px;
	height:30px;
	float: left;
	cursor: pointer;
	display: block;
	margin-top:0px;
	margin-left:0px;
	}

header #nav #n-contacto a:hover {background-position:bottom;}

header #nav li#n-contacto.current a {
    background: url(../images/menu/bt-contacto.png) no-repeat;
	background-position:bottom;
}

header #redes {float:left; margin-top:80px;}


/*btn facebook*/
header #redes a.n-fb {
	background: url(../images/menu/instac.svg) top center no-repeat;
	width:50px;
	height:50px;
	float: right;
	cursor: pointer;
	display: block;
	margin-top:-50px;
	margin-right:175px;
}


/*btn instagram*/
header #redes a.n-inst{
	background: url(../images/menu/facec.svg) top center no-repeat;
	width:50px;
	height:50px;
	float: right;
	cursor: pointer;
	display: block;
	margin-top:-50px;
	margin-right:110px;
}


/*btn instagram*/
header #redes  a.n-ytb {
	background: url(../images/menu/videoc.svg) top center no-repeat;
	background-position:top;
	width:50px;
	height:50px;
	float: right;
	cursor: pointer;
	display: block;
	margin-top:-50px;
	margin-right:50px;
}

}

/*400*/
@media screen and (max-width:400px) {
header .menu_bar #logo {
		left:-20px;

}

}