/******************** Eric Meyer's Reset CSS v2.0 - http://cssreset.com ********************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
a{text-decoration:none;}


/*************************************** tipos **************************************/

@font-face {
    font-family: 'DuepuntozeroRegular';
    src: url('typo/duepuntozero-webfont.eot');
    src: url('typo/duepuntozero-webfont.eot') format('embedded-opentype'),
         url('typo/duepuntozero-webfont.woff2') format('woff2'),
         url('typo/duepuntozero-webfont.woff') format('woff'),
         url('typo/duepuntozero-webfont.ttf') format('truetype'),
         url('typo/duepuntozero-webfont.svg#DuepuntozeroRegular') format('svg');
			}

@font-face {
    font-family: 'DuepuntozeroboldRegular';
    src: url('typo/duepuntozero_bold-webfont.eot');
    src: url('typo/duepuntozero_bold-webfont.eot') format('embedded-opentype'),
         url('typo/duepuntozero_bold-webfont.woff2') format('woff2'),
         url('typo/duepuntozero_bold-webfont.woff') format('woff'),
         url('typo/duepuntozero_bold-webfont.ttf') format('truetype'),
         url('typo/duepuntozero_bold-webfont.svg#DuepuntozeroboldRegular') format('svg');
			}

@font-face {
    font-family: 'DuepuntozeroBlackRegular';
    src: url('typo/duepuntozero_black-webfont.eot');
    src: url('typo/duepuntozero_black-webfont.eot') format('embedded-opentype'),
         url('typo/duepuntozero_black-webfont.woff2') format('woff2'),
         url('typo/duepuntozero_black-webfont.woff') format('woff'),
         url('typo/duepuntozero_black-webfont.ttf') format('truetype'),
         url('typo/duepuntozero_black-webfont.svg#DuepuntozeroBlackRegular') format('svg');
			}


/*************************************** body **************************************/


body	{
	padding-top:130px;
	-webkit-font-smoothing: antialiased ;
	-moz-osx-font-smoothing: grayscale;
	font-family:'DuepuntozeroRegular', san-serif;
	font-size:22px;
	line-height:28px;
	text-align:center;
	color: rgba(98,107,113,1);
	background-color:rgba(255,255,255,1);
	}
		
::selection { background-color: rgba(0,158,224,1) ; color: white ; text-shadow: none; }		
::-moz-selection { background-color: rgba(0,158,224,1) ; color: white ; text-shadow: none; }
::-webkit-selection { background-color: rgba(0,158,224,1) ; color: white ; text-shadow: none; }

		
/*******************************envoltura principal****************************************/

.wrapper	{
	width:1024px;
	margin:0 auto;
	}	
		
			
/*************************************** header **************************************/


header		{
	width:100%;
	height:107px;
	position:fixed;
	top:0;
	background-color:rgba(0,0,0,1);
	padding-top:23px;
	box-shadow: 0 0.5px 2px 2px rgba(2,2,2,.2);
	-moz-box-shadow: 0 0.5px 2px 2px rgba(2,2,2,.2);
	-o-box-shadow: 0 0.5px 2px 2px rgba(2,2,2,.2);
	-webkit-box-shadow: 0 0.5px 2px 2px rgba(2,2,2,.2);
	-ms-box-shadow: 0 0.5px 2px 2px rgba(2,2,2,.2);
	z-index:10;
	}


/*************************************** logo **************************************/

		
header h1	{
	background-image:url(bgimg/header/elegon_disenio_y_comunicacion.png);
	background-repeat:no-repeat;
	background-size:contain;
	width:194px;
	height:84px;
	float:left;
	text-indent:-9999px;
	margin-left: 30px ;
	}


/*************************************** nav **************************************/

		
#navMain 	{
	float: right ;
	margin-right: 30px ;
	padding-top: 17px ;
	}
			
#navMain	li {
	height: 50px ;
	display: inline-block ;
	vertical-align: top ;
	font-family:'DuepuntozeroboldRegular', san-serif;
	line-height: 50px ;
	font-size: 24px ;
	padding: 0 20px ;
	text-decoration: none ;
	cursor: pointer ;
	}
	#navMain	li:hover	{
	color: white ;
	padding:0 20px;
	}
		#navMain	li:hover:after {
		display:block;
		content:"";
		height:2px;
		width:105%;
		background-color:rgba(0,158,224,1);
		margin:-8px 0 0 -1px;
		}
		
					
#navMain .encendido {
	height: 50px ;
	line-height: 50px ;
	font-size: 24px ;
	padding: 0 20px ;
	background-color: rgba(226,0,122,1) ;
	color: white ;
	border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
	text-decoration: none ;
	cursor: default ;
	}
	#navMain .encendido:hover {
		background-color: rgba(226,0,122,1) ;
		color: white ;
		}
		#navMain .encendido:hover:after {
			display:none;
			height: 0;
			}
			
			
#btnNavMobile {
	display: none;
	text-decoration: none;
	margin-top:15px;
	float: right;
	height: 40px;
	width:40px;
	background-image:url(bgimg/header/btn_responsive.png);
	background-repeat:no-repeat;
	background-size:contain;
	text-align: center;
	color: #a4c737;
	}

#btnNavMobile.nav-active{
	opacity: 1; 
	}


/*************************************** sections **************************************/	
	
				
section	{
	width:100%;
	padding: 90px 0 90px 0px ;
	}
	
section h2	{
	font-size: 60px ;
	font-family:'DuepuntozeroboldRegular', san-serif;
	color:rgba(255,255,255,1);
	padding-bottom:70px;
	}
	
	
/*************************************** section hero **************************************/

	
#hero		{	
	padding-top: 0px;
	width:100%;
	}
			
#hero h1	{
	font-size:54px;
	line-height:54px;
	font-family:'DuepuntozeroboldRegular', san-serif;
	text-align:center;
	color:rgba(0,158,224,1);
	padding: 80px 0 0 0;
	}
	
#hero div	{
	width: 100% ;
	height: 500px;
	position: relative;
	overflow:hidden;
	background-image:url(../img/hero/elegon_diseno_y_comunicacion.png);
	background-size: cover ;
	background-position: center ;
	}
	
#hero h3, p	{
	width: 800px ;
	margin:0 auto;
	padding-top:40px;
	}
	
#hero h3	{
	font-family:'DuepuntozeroboldRegular', san-serif;
	font-size:30px;
	line-height:34px;
	}
	
	
/*************************************** section servicios **************************************/


				
#secServicios		{	
	background-color: rgba(226,0,122,1) ;
	}
					
#secServicios ul	{
	width: 1024px ;
	margin: 0 auto;
	}
					
#secServicios dt 	{
	font-family:'DuepuntozeroboldRegular', sans-serif;
	font-size:30px;
	background-repeat:no-repeat;
	background-position:top;
	background-size:192px;
	padding: 230px 20px 20px 20px;
	}
				
#secServicios li 	{
	color:rgba(255,255,255,1);
	display:inline-block;
	vertical-align:top;
	width:300px;
	margin:0 45px;
	}
				
#secServicios li:first-child, #secServicios li:last-child {
	margin:0;	
	}
		
#secServicios dd 	{
	padding: 0 20px 15px 20px;
	font-size:20px;
	line-height:22px;
	}
					
#identidad dt		{
	background-image:url(bgimg/servicios/identidad.png);
	}
					
#grafico dt			{
	background-image:url(bgimg/servicios/grafico.png);
	}
					
#web dt				{
	background-image:url(bgimg/servicios/web.png);
	}
		
					
/*************************************** section trabajos **************************************/


				
#secTrabajos	{	
//height: 1100px;
	}
					
#secTrabajos h2	{
	font-size: 60px ;
	font-family:'DuepuntozeroboldRegular', san-serif;
	text-align:center;
	color:rgba(0,158,224,1);
	}
	
ul#galeria	{
	width: 1010px ;
	height: 1010px ;
	margin: 0 auto;
	}

ul#galeria li	{
	width: 222px ;
	height: 222px ;
	border-radius:111px;
	display: inline-block ;
	-moz-border-radius:111px;
	-o-border-radius:111px;
	-webkit-border-radius:111px;
	-ms-border-radius:111px;
	vertical-align: top ;
	position: relative ;
	margin:15px;
	overflow: hidden ;
	}
	
ul#galeria img	{
	display: block ;
	overflow: hidden ;
	}
	
ul#galeria img a	{
	overflow: hidden ;
	}
	
ul#galeria li div	{	
	width: 222px ;
	height: 222px ;
	border-radius:111px;
	-moz-border-radius:111px;
	-o-border-radius:111px;
	-webkit-border-radius:111px;
	-ms-border-radius:111px;
	background-color: rgba(0,0,0,.8);
	position: absolute ;
	top: 0 ;
	left: 0 ;
	text-align: center ;
	font-family: 'DuepuntozeroboldRegular', sans-serif ;
	opacity: 0 ;
	transition: all .4s ease-out ;
	}
	
	ul#galeria li:hover div	{
		opacity: 1 ;
		}
		
ul#galeria h4	{
	width: 100% ;
	height: 42px ;
	color: white ;
	font-size: 34px ;
	position: absolute ;
	top: 0px ;
	left: 0px ;
	opacity: 0 ;
	transition: all .3s ease-out ;
	}
	
	ul#galeria li:hover h4	{
		top: 85px ;
		left: 0 ;
		opacity: 1 ;
		}

ul#galeria span	{
	height: 14px ;
	width: 100% ;
	font-size: 18px ;
	color:rgba(0,158,224,1);
	letter-spacing: 2px ;
	position: absolute ;
	top: 240px ;
	left: 0px ;
	text-transform:uppercase ;
	transition: all .4s ease-out ;
	opacity: 0 ;
	}
	
	ul#galeria li:hover span	{
		top: 120px ;
		left: 0 ;
		opacity: 1 ;
		}


/*************************************** esae **************************************/


					
#secAdemas	{
	background-color: rgba(0,158,224,1) ;
	margin: 0 auto;
	color:rgba(255,255,255,1);
	}


#secAdemas h3	{
	font-family:'DuepuntozeroboldRegular', sans-serif;
	font-size:30px;
	}

#secAdemas p	{
	width:100%;
	font-size:20px;
	line-height:24px;
	padding-top:30px;
	}
	
#impresion 	{
	width: 300px;
	display: inline-block;
	vertical-align:top;
	background-image:url(bgimg/ademas/impresion_digital.png);
	background-repeat:no-repeat;
	background-position:top;
	background-size:192px;
	padding-top:240px;
	margin-right:45px;
	}
		
#termoimpresion 	{
	width: 300px;
	display: inline-block;
	vertical-align:top;
	background-image:url(bgimg/ademas/termoimpresion.png);
	background-repeat:no-repeat;
	background-position:top;
	background-size:192px;
	padding-top:240px;
	margin-right:45px;
	}
		
#chapas 	{
	width: 300px;
	display: inline-block;
	vertical-align:top;
	background-image:url(bgimg/ademas/chapas.png);
	background-repeat:no-repeat;
	background-position:top;
	background-size:192px;
	padding-top:240px;
	}					
				

/*************************************** section contacto **************************************/


#secContacto	{
	background-color: rgba(25,25,25,1);
	color: rgba(255,255,255,1);
	font-size: 24px;
	}
				
#secContacto p {
	width: 200px;
	padding-top:0;
	}
				
#secContacto img {
	padding:15px 5px 0 0;
	width:36px;
	height:36px;
	}
									
.direccion	{
	color: rgba(0,158,224,1);
	padding-bottom: 20px ;
	}
				
.magenta	{
	color: rgba(226,0,122,1);
	}
		
.azul	{
	color: rgba(0,158,224,1);
	}
		
#secContacto a {
	color:rgba(255,255,255,1);
	}
				
#direccion 	{
	width: 200px;
	display: inline-block;
	vertical-align:top;
	margin-right:45px;
	text-align:right;
	padding-top:0px;
	margin-top:0;
	margin-top:150px;
	}
		
#mapa 	{
	width: 470px;
	height: 470px;
	display: inline-block;
	vertical-align:top;
	background-image:url(bgimg/contacto/mapa_elegon.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:470px;
	margin-right:45px;
	border-radius:235px;
	-moz-border-radius:235px;
	-o-border-radius:235px;
	-webkit-border-radius:235px;
	-ms-border-radius:235px;
	transition: all .3s ease-out ;

	}
	#mapa:hover 	{
	background-size:580px;
	background-position:center;
	}
	
	
#sergio {
	width: 200px;
	display: inline-block;
	vertical-align:top;
	text-align:left;
	margin-top:150px;
	}
		
#sergio h4	{
	padding-bottom:20px;
	color: rgba(226,0,122,1);
	font-family:'DuepuntozeroboldRegular', san-serif;
	font-size:26px;
	}
		
			
					
/*************************************** footer **************************************/		

		
footer	{
	height: 60px ;
	width:100%;
	padding: 30px 0 0 0 ;
	font-size: 20px ;
	background-color:rgba(98,107,113,1);
	color: white;
	text-align:center;
	position:relative;
	}
	
#caja_boton_subir {
	position: absolute;
	width: 68px;
	margin-left: -34px;
	top:-30px;
	left: 50%;
	height: 30px;
	overflow:hidden;
	}
#boton_subir {
	position: absolute;
	top:0px;
	left: 50%;
	margin-left: -34px;
	display: inline-block;
	width: 68px;
	height: 68px;
	border-radius:48px;
	-moz-border-radius:48px;
	-o-border-radius:48px;
	-webkit-border-radius:48px;
	-ms-border-radius:48px;
	background-color: rgba(98,107,113,1);  
	color: #white;
	}
	#boton_subir:before {
	width:0;
	height:0;
	content:"";
	position:absolute;
	bottom:38px;
	left:22px;
	border-left:12px solid transparent;
	border-right:12px solid transparent;
	border-bottom:12px solid white;
	}


/*/////////////////////////////////////// W O R K //////////////////////////////////////*/

/*************************************** Nav Work **************************************/	

	
#navMainWork 	{
	float:right;
	margin-right: 30px ;
	padding-top: 17px ;
	}
			
#navMainWork	li {
	height: 50px ;
	display: inline-block ;
	vertical-align: top ;
	font-family:'DuepuntozeroboldRegular', san-serif;
	line-height: 50px ;
	font-size: 24px ;
	padding: 0 20px ;
	text-decoration: none ;
	color: rgba(98,107,113,1);
	cursor: pointer ;
	}
	#navMainWork	li:hover	{
	color: white ;
	padding:0 20px;
	}
		#navMainWork	li:hover:after {
		display:block;
		content:"";
		height:2px;
		width:105%;
		background-color:rgba(0,158,224,1);
		margin:-8px 0 0 -1px;
		}
		
					
#navMainWork .encendido {
	height: 50px ;
	line-height: 50px ;
	font-size: 24px ;
	padding: 0 20px ;
	background-color: rgba(226,0,122,1) ;
	color: white ;
	border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
	text-decoration: none ;
	cursor: pointer ;
	}
	#navMainWork .encendido:hover {
		background-color: rgba(226,0,122,1) ;
		color: white ;
		}
		#navMainWork .encendido:hover:after {
			display:none;
			height: 0;
			}
			

#btnCerrar {
	display: none;
	text-decoration: none;
	margin-top:15px;
	float: right;
	height: 40px;
	width:40px;
	background-color:rgba(226,0,122,1);
	border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
	text-align: center;
	color: #a4c737;
	position:relative;
	}
	#btnCerrar:before {
	width:31px;
	height:5px;
	content:"";
	background-color:#FFF;
	position:absolute;
	bottom:18px;
	left:4px;
	transform: rotate(-45deg);
	-ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
	border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	-webkit-border-radius:2px;
	-ms-border-radius:2px;
	}
	#btnCerrar:after {
	width:31px;
	height:5px;
	content:"";
	background-color:#FFF;
	position:absolute;
	bottom:18px;
	left:4px;
	transform: rotate(-135deg);
	-ms-transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
	border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	-webkit-border-radius:2px;
	-ms-border-radius:2px;
	}
		

/*************************************** Section Work **************************************/	

.wrapper_work	{
	width:980px;
	margin:0 auto;
	}

#secWork	{
	widht:980px;
	padding-top:50px;
	padding-bottom:60px;
	color:rgba(255,255,255,1);
	text-align:left;
	font-family: 'DuepuntozeroboldRegular', sans-serif ;
	}
			
h5	{
	font-size: 28px ;
	line-height:32px;
	color: black;
	}
	
h6	{
	font-size: 36px ;
	line-height:36px;
	color: rgba(0,158,224,1);
	padding:25px 0 10px 0;
	}
	
.subtitulo_work	{
	padding:60px 0 10px 0;
	}
	
.description	{
	font-family: 'DuepuntozeroRegular', sans-serif ;
	font-size: 20px ;
	line-height:24px;
	color: rgba(98,107,113,1);
	margin-bottom:15px;
	display:inline-block;
	}

#secWork img	{
	margin-top:10px;
	}	
	
#btnCerrarAbajo {
	margin:20px auto 0 auto;
	text-decoration: none;
	height:90px;
	width:90px;
	background-color:rgba(226,0,122,1);
	border-radius:50px;
	-moz-border-radius:50px;
	-o-border-radius:50px;
	-webkit-border-radius:50px;
	-ms-border-radius:50px;
	text-align: center;
	color: #a4c737;
	position:relative;
	z-index:9999;
	}
	#btnCerrarAbajo:before {
	width:45px;
	height:5px;
	content:"";
	background-color:#FFF;
	position:absolute;
	bottom:42px;
	left:22px;
	transform: rotate(-45deg);
	-ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
	border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	-webkit-border-radius:2px;
	-ms-border-radius:2px;
	}
	#btnCerrarAbajo:after {
	width:45px;
	height:5px;
	content:"";
	background-color:#FFF;
	position:absolute;
	bottom:42px;
	left:22px;
	transform: rotate(-135deg);
	-ms-transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
	border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	-webkit-border-radius:2px;
	-ms-border-radius:2px;
	}


#footerTrabajo	{
	height: 60px ;
	width:100%;
	padding: 30px 0 0 0 ;
	font-size: 20px ;
	background-color:rgba(98,107,113,1);
	color: white;
	text-align:center;
	}	
	

/*************************************** RESPONSIVE TABLET **************************************/		
/*************************************** RESPONSIVE TABLET **************************************/		
/*************************************** RESPONSIVE TABLET **************************************/		




@media only screen and (max-width: 990px)	{
			
/*************************************** body **************************************/

body	{
	padding-top:110px;
		}	

/*************************************** header **************************************/

header		{
	width:100%;
	height:92px;
	padding-top:18px;
			}

/*************************************** nav **************************************/

		
#navMain 	{
	float:right;
	margin-right: 30px ;
	padding-top: 17px ;
	}
			
#navMain	li {
	height: 40px ;
	line-height: 40px ;
	font-size: 20px ;
	padding: 0 12px ;
	}
	#navMain	li:hover	{
	padding:0 12px;
		}
					
#navMain .encendido {
	height: 40px ;
	line-height: 40px ;
	font-size: 20px ;
	padding: 0 12px ;
	}
	
	
/*******************************envoltura principal****************************************/

.wrapper	{
	width:100%;
	margin:0 auto;
	}


/*************************************** logo **************************************/

	
header h1	{
	background-image:url(bgimg/header/elegon_disenio_y_comunicacion.png);
	width:156px;
	height:68px;
	text-indent:-9999px;
	margin-left:4%;
	background-size:95%;
	background-repeat:no-repeat;
	background-position:center;
	}
			
/*************************************** section hero **************************************/
	
#hero div	{
	width: 100% ;
	height: 360px;
	overflow:hidden;
	background-image:url(../img/hero/elegon_diseno_y_comunicacion.png);
	background-position: center ;
	background-size:105%;
	}
	
#hero h3, p	{
	width: 80% ;
	padding: 1em 10% 0 10%;
	}
	
#hero {
	height:auto;
	}	

#hero h1	{
	width:90%;
	padding: 50px 5% 0 5%;
	font-size:39px;
	line-height:38px;
	}

#hero h3	{
	font-size:30px;
	line-height:32px;
	}	
	
	
/*************************************** section servicios **************************************/

#secServicios h2	{
	padding-bottom:20px;
	}
				
#secServicios	{
	height: auto;
	}
					
#secServicios ul	{
	width: 90% ;
	margin: 0 auto;
	}
				
#secServicios li 	{
	width:80%;
	padding-top:50px;
	margin:0;
	}
	
	
/*************************************** section trabajos **************************************/

				
#secTrabajos	{
	height: auto;
	}
					
#secTrabajos ul	{
	width: 90% ;
	height: auto;
	margin: 0 auto;
	}
	


/*************************************** section ademas **************************************/

				
#secAdemas	{
	height: auto;
	}
					
#secAdemas p	{
	width: 80%;
	}
	
#impresion 	{
	width: 80%;
	display:block;
	margin:0 auto;
	padding-bottom:70px;
	}
		
#termoimpresion 	{
	width: 80%;
	display:block;
	margin:0 auto;
	padding-bottom:70px;
	}
		
#chapas 	{
	width: 80%;
	display:block;
	margin:0 auto;
	}


/*************************************** section contacto **************************************/

				
#secContacto	{
	height: auto;
	}
					
#secContacto p	{
	width: 80%;
	text-align:center;
	}
									
.direccion	{
	color: rgba(0,158,224,1);
	padding-bottom: 20px ;
	}
	
#direccion 	{
	width: 80%;
	display:block;
	margin:0 auto;
	padding-bottom:50px;
	}
		
#mapa 	{
	width: 100%;
	display:block;
	margin:0 auto;
	padding-bottom:60px;
	background-size:470px;
	}
		
#sergio 	{
	width: 80%;
	display:block;
	margin:0 auto;
	}
		
#sergio h4	{
	padding-bottom:20px;
	color: rgba(226,0,122,1);
	font-family:'DuepuntozeroboldRegular', san-serif;
	font-size:26px;
	text-align:center;
	}
		
#secContacto img {
	padding:15px 5px 0 0;
	display:block;
	margin:0 auto;
	}
	
	
/*/////////////////////////////////////// W O R K //////////////////////////////////////*/
/*************************************** nav WORK **************************************/
		
#navMainWork 	{
	float:right;
	margin-right: 30px ;
	padding-top: 17px ;
	}
			
#navMainWork	li {
	height: 40px ;
	line-height: 40px ;
	font-size: 20px ;
	padding: 0 12px ;
	}
	#navMainWork	li:hover	{
	padding:0 12px;
		}
					
#navMainWork .encendido {
	height: 40px ;
	line-height: 40px ;
	font-size: 20px ;
	padding: 0 12px ;
	}
	
	
/*************************************** Section Work **************************************/	


#secWork	{
	padding-top:40px;
	}
	
.wrapper_work	{
	width:90%;
	margin:0 auto;
	}

#secWork img	{
	width:100%;
	}
	
h5	{
	width:100%;
	}
	
h6	{
	width:100%;
	}
	
#btnCerrarAbajo {
	height:70px;
	width:70px;
	}
	#btnCerrarAbajo:before {
	width:40px;
	height:5px;
	content:"";
	background-color:#FFF;
	position:absolute;
	bottom:33px;
	left:15px;
	transform: rotate(-45deg);
	-ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
	border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	-webkit-border-radius:2px;
	-ms-border-radius:2px;
	}
	#btnCerrarAbajo:after {
	width:40px;
	height:5px;
	content:"";
	background-color:#FFF;
	position:absolute;
	bottom:33px;
	left:15px;
	transform: rotate(-135deg);
	-ms-transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
	border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	-webkit-border-radius:2px;
	-ms-border-radius:2px;
	}

		
}




/*************************************** RESPONSIVE MÓVIL **************************************/	
/*************************************** RESPONSIVE MÓVIL **************************************/		
/*************************************** RESPONSIVE MÓVIL **************************************/		



@media only screen and (max-width: 767px)	{


/*************************************** body **************************************/		

body	{
	padding-top:90px;
	}				

/*************************************** header **************************************/		

header		{
	width:100%;
	height:80px;
	padding-top:10px;
			}			
	

/*************************************** menu nav **************************************/		
	
#btnNavMobile{
	display: block;
	margin-right: 4%;
	}
	
#navMain{
	float: none;
	clear: both;
	position: absolute;
	top: 73px;
	left: 0;
	width: 100%;
	z-index: 99;
	}
		
#navMain ul{
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
	max-height: 0;
	overflow: hidden;
	-webkit-transition: max-height .5s ease-in-out;
	-moz-transition: max-height .5s ease-in-out;
	-o-transition: max-height .5s ease-in-out;
	transition: max-height .5s ease-in-out;
		}
		
#navMain li{
	height: 45px ;
	background-color: rgba(20,20,20,.9);
	border-bottom: 1px solid rgba(0,0,0,1);
	display: block;
	border-radius:0;
	line-height: 45px ;
	font-size: 23px ;
	}
	#navMain	li:hover	{
					color: white ; /*Encima color blanco*/
					}
					#navMain	li:hover:after {
						display:none; /*No sale la línea azul*/
						}
	
#navMain li:last-child{
	border-bottom: 0; 
	}
		
#navMain li>.selected {
	border-bottom: none;
	color:#0F6;
	}
		
#navMain ul.open-navMain{
	max-height: 400px;
	}
		
#navMain .encendido {
	height: 45px ;
	line-height: 45px ;
	font-size: 23px ;
	border-radius:0;
	-moz-border-radius:0;
	-o-border-radius:0;
	-webkit-border-radius:0;
	-ms-border-radius:0;
	}
	
/*************************************** logo **************************************/


		
header h1	{
	background-image:url(bgimg/header/elegon_disenio_y_comunicacion.png);
	width:156px;
	height:68px;
	text-indent:-9999px;
	margin-left:4%;
	background-size:85%;
	background-repeat:no-repeat;
	background-position:center;
			}
			
/*************************************** section hero **************************************/
	
#hero div	{
	width: 100% ;
	height: 240px;
	overflow:hidden;
	background-image:url(../img/hero/elegon_diseno_y_comunicacion.png);
	background-position: center ;
	background-size:130%;
	}
	
#hero h1	{
	width:90%;
	padding: 40px 5% 0 5%;
	font-size:34px;
	line-height:34px;
	}	


/*************************************** section contacto **************************************/

		
#mapa 	{
	width: 100%;
	display:block;
	margin:0 auto;
	padding-bottom:0px;
	background-size:400px;
	border-radius:0;
	-moz-border-radius:0;
	-o-border-radius:0;
	-webkit-border-radius:0;
	-ms-border-radius:0;
	}
	
/*/////////////////////////////////////// W O R K //////////////////////////////////////*/
/*************************************** menu nav WORK **************************************/		
	
#btnCerrar{
	display: block;
	margin-right: 4%;
	}
	
#navMainWork{
	display: none;
	}
	
/*************************************** botón cerrar abajo WORK **************************************/		
#secWork	{
	padding-top:20px;
	}

.subtitulo_work	{
	padding:40px 0 10px 0;
	}	
	
#btnCerrarAbajo {
	display:none;
	}
	
}