@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;}

html {height: 100%;}

body {
	background: url('fondo.jpg') no-repeat center center fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: relative;
	font-size: 16px;
	background:rgba(#e4e4e4, 0.7);
}

.brd {
	border: 1px solid red
}

.menusup {
  text-align: center;
	width:100%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.divContenidoGral {
	height: 100%;
	display: flex;
	flex-direction row;
}

.costado{
	width: 220px;
	height: 100%;
	background-color: #161623;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;}

.item{
	width: 100%;
	max-width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	padding: 0px 5px;
  background-color: rgba(84, 90, 97, 0.53);
	flex-grow: 1;
	transition: all 0.3s ease 0s
	border: 5px solid transparent;
	border-right: 1px solid rgb(241, 241, 241);
	border-bottom: 1px solid rgb(50, 52, 60)}

.costado h2{
	padding: 5px 4px;
	font-family:'Roboto', sans-serif;
	font-weight: 700;
	font-size: 1.2em;
	color: rgb(255, 250, 247)}

.item1{}
.item1:hover{background-color: #65C6BB;}

.item2{}
	.item2:hover{background-color: #F64747;}

.item3{}
	.item3:hover{background-color: #913D88;}

.item4{}
	.item4:hover{background-color: #F62459;}

.item5{}
	.item5:hover{background-color: #2574A9;}

.item6{}
	.item6:hover{background-color: #66CC99;}

/*////////////////////////////////////////////MENU JULY//*/

.menusup{
	    top: 0;
      width: 100%;
      padding: 0.2em;
      box-shadow: 0px 0.5px 5px 0px;
	    background-color: rgba(50, 64, 101, 0.34);}
.menusup ul{
        display: flex;
	      justify-content: center;
	     align-items: center;
        text-decoration: none;
	     justify-content: space-around;
	      flex: 1;}
.headericono {
	      display: flex;
	      justify-content: space-around;
	      align-items: center;
	      align-content: center;
	      flex-grow: 0;
	      text-decoration: none;
	      margin-left: 0.5em;}


.wrapper {
	width: 100%
}

/*///////////////////////////////////////////
//                 BARRA TOP               //
///////////////////////////////////////////*/


.barraTop {
	width: 100%;
	height: 100px;
	background-color: #913D88;
	display: flex;
	align-items: center;
	padding: 15px;
	padding-left: 10px
}

.barraTop img {
	width: 80px
}

.barraTop h1 {
	margin-left: 15px,auto;
	font-family:'Roboto', sans-serif;
	font-weight: 700;
	font-size: 2em;
	color:rgb(255, 255, 255)
}





/* ///////////////////////////////////////////*/
/*//////////contenido INFORMACION/////////////*/

.infoContenidoTotal {
	margin: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 10px
}

.infoMain {
margin: 20px
}
.infoDatosMain {
	display: flex;
	flex-direction: row;
	background-color: rgba(255, 255, 255, 0.52);
	justify-content: center;
}

.infoDatosMain img {
	max-width: 100%
}

.infoTitulo {
		background-color: rgba(255, 255, 255, 0.70);
		padding: 15px 25px
}

.infoTitulo img {
	max-width: 100%
}
.infoTitulo h2{
	font-family:'Roboto', sans-serif;
	font-size: 2em;
}

.infoDatos {
	margin: 10px
}
.infoDatos h3{
	font-family:'Roboto', sans-serif;
	font-weight: 300;
	font-size: 2em;
}

.infoDatos h4{
	font-family:'Roboto', sans-serif;
	font-weight: 100;
	font-size: 1.2em;
}

.infoDatos img {
	max-width: 100%
}


@media (max-width: 480px) {
	.infoContenidoTotal {
		flex-direction: column;
	}
	.infoDatosMain {
		flex-direction: column;
	}
}

@media (min-width: 480px){
	.menusup{
		display: none;}
	.menusup ul{
		display: none;}
	.headericono{
		display: none;}
		.item{
			border-bottom: 1px solid rgb(241, 241, 241);
			border-right:none}
	}

@media (max-width: 480px) {
	.costado{
		display: none}
		body{background: none}
		.item{
			padding: 50px;
			border-bottom: 1px solid rgb(241, 241, 241);
			border-right:none
		 }
	}