body { 
	color: #292f36;
	font-family: helvetica;
	line-height: 1.6;
	margin:0px; 
	padding:0px;
}
strong{
	font-size:22px;
}
.strong_robot{
	color:#13afb5;
}
.strong_music{
	color:#e85c5c;
}

header {
	height:360px;
	z-index:10;
}
.header_banner {
	background-color: #333;
	background-image: url(../img/cam.jpg); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	
	width: 100%;
	height: 300px;
}

header .logo {
	background-color: transparent; 
	background-image: url(../img/logo.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;

	position: absolute;
	top: 26px; 
	left: 9px;

	height: 250px;
	width: 250px;

}

header h1 {
	position: absolute;

	top: 35px; 
	left: 62px;
	color: #fff;

	font-size:62px;
	font-family:"pacifico";
	text-shadow: 2px 4px black;
}
header span{
    top: 0px;
    margin-left: 71%;
    color: #fff;
    font-size: 35px;
    display: flex;
    padding-top: 48px;
	font-family:"rameto";
	text-shadow: 2px 4px black;
}
.fixed-header {
	position: fixed;

	top:0; 
	left:0;
	width: 100%; 
}
nav {
	width:100%;
	height:50px;

	background: #292f36;
	/* postion:fixed; */

	z-index:10;
	box-shadow: 2px -25px 50px ;
}

.image-central{
	background-image:url(../img/esc.jpg);
	background-size: cover;
	background-repeat:no-repeat;
	width:100%;
	height:150px;
	
	border:solid 4px;
}





/*--------------------------------------------------------------------------*/

.menu, .menu ul, .menu li, .menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.menu {
	height: 40px;
	width: 100%;

	border-radius: 7px;
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

.menu a {
	display: block;
	padding: 0 44px;

	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 15px;

	color: #fff;

	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	transition: color .2s ease-in-out;
	transition: font-size .4s ease-in-out;
}


.menu li:hover > a {
	color: #d1e1f9;
	font-size:20px;

	transition: font-size .2s ease-in-out;
}

.menu li > ul > li{
	background:#292f36;
	width:180px;
	border-radius: 0 0 5px 5px;
	opacity:0;
}
.menu li > ul > li:hover{
	font-size:10px;	
}
.menu ul {
	position: absolute;
	top: 40px;
	left: 0px;

	background: #292f36;

	border-radius: 0 0 5px 5px;
	transition: opacity .2s ease .2s;
}

.menu li:hover > ul {
	opacity: 1;
}

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	transition: height .2s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
	opacity:1;
	transition:opacity .3s;
}

.menu ul li a {
	width: 130px;
	padding: 4px 10px;
	margin: 0;
	border: none;

}
.menu ul li:last-child a { 
	border: none; 
}
/*---------------------------------visitanos-------------------------------------*/
#derecha{
	text-align: right;
	color: white;

	margin-top: -49px;
	margin-right: 24px;
	margin-left:90%;

	padding-left:10px;

	border-left: ridge 1px #c7c5c5;

	transition: color .2s ease-in-out;
	transition: font-size .2s ease-in-out;
}
#derecha:hover{
	color: #d1e1f9;
	font-size:18px;
	
    transition: color .2s ease-in-out;
	transition: font-size .2s ease-in-out;
}

/*---------------------------------visitanos-fin---------------------------------*/



/* --------------------------------------------------------------------------------- zona 2 ----------------------------------------------------------*/
/*------------------------cuadro-izquierda----------------------------------------*/
.cuadro-izquierda {
	background-image:url(../img/board.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	width:150px;
	height:1146px;
	margin-left:0px;
	position:absolute; 
	top: 400px;
	z-index:-1;
	filter:saturate(500%);
}

/*--------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------*/
.contenido{
	display:flex;

	justify-content:space-between;
	flex-wrap:wrap;
	width: 1000px; 
	max-width: 100%; 
	margin:0 auto; 
	padding-top: 60px; 
	
}

article {
	display:block;
	flex-wrap:wrap;
	width: 720px; 
	float: left;
	flex-shrink:1;
	order:2;
	text-align:justify;
 }
 
/* article p:first-of-type { */
	/* margin-top: 0; */
	/* display:flex;   */
/* } */
p{
	font-family:"righteous";
	font-size:17px;
	line-height:25px; 
}

/*-------------------------CONTENIDO DEL ASIDE------------------------------------*/

aside { 
	width: 120px; 
	height:152px;
	
	float: right;
	border:ridge 1px gray;
	padding:25px 200px 100% 25px;
	
	margin-right:-150px;
	box-shadow:8px 5px 25px 8px;

	order:3;
} 

.image {
	background-size: cover;
	background-repeat:no-repeat;
	
	width:298px;
	height:193px;
	
	margin-left:-21px;
	margin-top:-21px;
	margin-right:-21px;
	
	border-radius:5px;
	transition:filter .4s;
} 
.image:hover {
	filter:saturate(400%);
	transition:filter .4s;
} 
.movil{
	background-image:url(../img/movil.jpg);
}
.mus{
	background-image:url(../img/ces.jpg);
}
.esa{
	background-image:url(../img/esa.jpg);
}


.box1, .box2, .box3{
	width:256px;
	height:292px;

	border-radius:5px;
	border-top:7px;
	border:1px solid gray;

	padding:20px;
	text-align: center;
	text-shadow:0 1px 1px rgba(0,0,0,.4);

	transition: box-shadow .3s ease;
	box-shadow:5px 5px 10px -6px,
			   5px 5px 10px -6px inset;
}
.box1{
	margin-top: 10px;
}
.box2{
	margin-top: 39px;
}
.box3{
	margin-top: 39px;
}
.box1:hover, .box2:hover, .box3:hover{
	width:260px;
	height:296px;
	transition: box-shadow .1s ease,
				width .3s,
				height .3s;
	box-shadow:5px 5px 0px 2px,
             1px 0px 15px 1px inset;
}


 .box1 > p, .box2 > p, .box3 > p{
	margin-top: 23px;
	margin-left: -6px;
	margin-right: -16px;
	
	font-size:16px;
	font-family:"indi";
	line-height:18px;
} 
.box1 > h5, .box2 > h5, .box3 > h5{
	margin-top: -6px;
	margin-left: 19px;
	margin-right: 0px;
	
	font-size:17px;
	font-family:"itim";
	position:absolute;	
}

.box1 > hr, .box2 > hr, .box3 > hr{
	width:257px;
	height:3px;
	border-radius:50%;
	margin-top:-5px;
	margin-left:1px;
	margin-bottom:2px;
	background-color:#8a2828;
}
/*-------------------------FIN-ASIDE--------------------------------------------*/


/*-------------------DIV-ABAJO------------------*/
 #div-abajo-imagenes{ 
	display:flex;
	width:100%; 
	height:300px; 
	border:ridge 1px gray;
	order:4;
	box-shadow: 8px 5px 25px 8px;
	background-image:url(../img/fondo.jpg);
	background-size:cover;
	background-repeat:no-repeat;
} 
.imagen-div-abajo{
	display:block;
	margin:auto;
	width:250px;
	height:250px;
	background-size:cover;
	background-repeat:no-repeat;
	border-radius:250px;
	transition:filter .4s,
				width .3s,
				height .3s;
}
.dvi1{
	background-image:url(../img/brazo.jpg);
}
.dvi2{
	background-image:url(../img/ojo.jpg);
}
.dvi3{
	background-image:url(../img/tecno.jpg);
}
.dvi1:hover, .dvi2:hover, .dvi3:hover{
	width:280px;
	height:280px;
	filter:blur(5px);
	transition:filter .4s,
				width .3s,
				height .3s,
				opacity .3s;
}
/*-------------------FIN-DIV-ABAJO------------------*/





 
/*--*-*-*-*-*-*-*-*-*-*-*MUSICA-*-*-*-*-*-*-*-*-*-*-*-*--*/
.header_music{ 
	 background-image:url(../img/concert.jpg); 
} 
.cuadro-izquierda_music{
	background-image:url(../img/micro.jpg); 
	filter:none;
	height:905px;
}

.contenido_music{
	margin-right:0px;
	margin-left:15%
}
.article_music{
	width:100%;
}



.content_article{
	display:flex;
	flex-direction:row;
}
.image-central_music{
	background-size:cover; 
	background-repeat:no-repeat;
	
	width:320px;
	height:250px;
	border-radius:250px;
	
	transition:filter .3s,
			   border-radius .5s;
}
.pp{
	width:100%;
}
.image-central_music:hover{
	border-radius:90px;
	filter:sepia(50%);
	transition:filter .3s,
			   border-radius .5s;
}



.content_1{
	margin-bottom:15px;
}
.p1_music{
	margin: 0px;
    padding-bottom:26px;
	order:1;
}
.image-central-derecha{
	background-image:url(../img/dj3.jpg);
	float:right;
	order:2;
	margin-left:15px;
}
.content_2{
	margin-top:25px;
    margin-bottom:20px;
}
.p2_music{
    margin: 0px;
    padding-top:5px;
    padding-bottom:11px;
	order:2;
}
.image-central_central{
	background-size:cover;
	background-image:url(../img/auri.jpg);
	float:left;
	order:1;
	margin-right: 15px;
}
.content_3{
	margin-top:20px;
    margin-bottom:35px;
}
.p3_music{
    margin: 0px;
    padding-top:5px;
	order:1;
}
.image-central-izquierda{
	background-image:url(../img/dj.jpg);
	float:right;
	order:2;
	margin-left:15px;
}
/*--*-*-*-*-*-*-*-*-*-*-*FIN-MUSICA-*-*-*-*-*-*-*-*-*-*-*-*--*/

/*----------*+*-*+*-+*-+*-+*-+*-+*-+*-+*-+ROBOTICA*-+*-+*-+*-*+-*-+*-+*-+*-+*-+*-+*-/-/-*-*/
.header_robot{ 
	 background-image:url(../img/robot.png); 
} 
.cuadro-izquierda_robot{
	background-image:url(../img/robt.jpg);
}
.image-derecha_robot{
	background-image:url(../img/walle.jpg);
}
.image-central_robot{
	background-image:url(../img/raf.jpg);
}
.image-izquierda_robot{	
	background-image:url(../img/robot3.png);
}
/*-----------------*+*-*+*-+*-+*-+*-+*-+*-+*-+*-+*-+*-+*-+*-*+-*-+*-+*-+*-+*-+*-+*-/-/-*-*/

/*------------------------------------*/
.commons{
	background-image:url(../img/fondo.jpg);
    position: relative;
    bottom:0px;
    height: 53px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color:white;
	padding-left:8px;
	width:100%;
}
.commons > a{
	color:red;
}
.common{
	padding-top:16px;
}
.commons_musica{
	bottom:0px;
}
/*------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@font-face {
	font-family:"rameto";
	src:url(../font/Rammetto/Rammetto.ttf);
}@font-face {
	font-family:"indi";
	src:url(../font/Indie_flower/IndieFlower.ttf);
}@font-face {
	font-family:"itim";
	src:url(../font/Itim/Itim-Regular.ttf);
}@font-face {
	font-family:"pacifico";
	src:url(../font/Pacifico/Pacifico-Regular.ttf);
}@font-face {
	font-family:"righteous";
	src:url(../font/Righteous/Righteous-Regular.ttf);
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------*/
@media (max-width:933px){
	.menu a {
		padding: 0 16px;
	}
	.cuadro-izquierda {
	opacity:0;
    }
}
@media (max-width:933px){
	aside {
    height:650px;
	margin:auto;
	width:240px;
    }
	.box1, .box2, .box3{
	margin-left:25%;
	}
	header span{
    font-size: 0px;
	}
	#derecha{
	margin-left:80%;
	}
	.contenido{
	padding-top: 10px;
	}
	article {
	font-size:10px;
	margin-right:4%;
	margin-left:4%;
    }
	.content_article{
	display:block;
	height:550px;
	flex-direction:column;
	flex-wrap:wrap;
	margin:auto;
	}
	.contenido_music{
	margin-left:0%;
	}
	.image-central_music{
	width:250px;
	}
}
/*------------------------------------*/