* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}

.contenedor {
	background:#ccc;
	width:90%;
	max-width:1000px;
	margin:auto;
	display:flex;

	flex-flow:row wrap;
}

body {
	/* background-image: url("../images/pasto.jpg"); */
	background-color: #000000;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed

}

header {
    background: #1e6c74;
	width:100%;
	padding:20px;
	display: flex;
	justify-content:space-between;
	align-items:center;
	flex-direction:column;/**otra forma de mostrar lo mismo*/
	flex-wrap:wrap;
}
header .logo {
	color:#fff;
	font-size:30px;
	padding: 10px;
}
header .logo img {
	width:50px;
	vertical-align: top;
}

header .logo a {
	color:#fff;
	text-decoration: none;
	line-height:50px;
}
header nav {
	width:100%;
	padding: 10px;
	/* Flexbox */
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

header nav a {
    background: #0095a5;
	color:#fff;
	text-align: center;
	text-decoration: none;
	padding:10px;

	/* Flexbox */
	flex-grow:1; 
}

header nav a:hover {
	background:#16e59c;
}

.main {
    background: #fff;
    padding: 20px;
    flex: 1 1 70%
}

.main form {
   text-align: center;
}
.player {
    text-align: center;
    margin: auto;
    width: fit-content;
    align-items: center;
    justify-content: center;
}
footer {
    background: #1e6c74;
	width: 100%;
	padding:20px;

	/* Flexbox */
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.validado,aside,footer,footer .links {
    display: flex;
    flex-wrap: wrap
}

.validado {
    background: #d5d5d5;
    width: 100%;
    padding: 10px;
    justify-content: space-between;
    text-align: center
}


 
/* Propiedades cuando la pantalla supere los 850px muestre diseño de escritorio */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
   
	* {
		margin: auto;
		padding: 0;
		box-sizing: border-box;
		font-family: sans-serif	
     }
	 
	.contenedor {
		background: #ccc;
		/* max-width: 1000px; */
		margin: auto;
		display: flex;
		flex-flow: row wrap;
		width: 100%;
	}
	
	body {
		background: #000000;
	}
	
	header {
		background: #1e6c74;
		padding: 0px;
		justify-content: space-between;
		flex-direction: column;
	}
	
	header .logo {
		color: #fff;
		font-size: 30px
	}
	
	header .logo img {
		width: 50px;
		vertical-align: top
	}
	
	header .logo a,header nav a {
		color: #fff;
		text-decoration: none
	}
	
	header .logo a {
		margin: auto;
		line-height: 50px
	}
	
	
	header,header nav {
		padding: 5px 0px 5px 0px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center
	}
	
	header nav a {
		background: #0095a5;
		text-align: center;
		padding: 10px;
		width: 60%;
		border-bottom: 1px solid;
		border-top: 1px solid;
		border-bottom-color: #85d4b7;
		border-top-color: #85d4b7;
		flex-grow: 1
	}
	
	header nav a:hover {
		background: #16e59c
	}

	header .botones_sociales {
		width: 75%;
		display: flex;
		align-items: center;
		color: #fff;
		justify-content: space-around
	}

	header .botones_sociales img {
		width: 100%;
		padding: 5px
	}
	
	h2 {
		text-align: right;
		font-size: 1.5em;
		font-weight: 700
	}
	
	.img1,h2,h3 {
		display: block
	}
	
	.img1 {
		float: right;
		padding-top: 10px
	}
	
	h3 {
		text-align: left;
		font-size: 1.5em;
		font-weight: 700
	}
	
	.main,.main2 {
		background: #fff;
		padding: 20px;
		flex: 1 1 70%;
		margin: auto;
		width: 100%
	}
	 
	.p1 {
		text-align: right
	}
	
	.p2 {
		text-align: left
	}
	
	.main article {
		margin-bottom: 20px;
		padding-bottom: 20px
	}
	.player {
    text-align: center;
    margin: auto;
    width: fit-content;
    align-items: center;
    justify-content: center;
}
	.main article:nth-last-child(1) {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none
	}
	
	footer {
		background: #1e6c74;
		width: 100%;
		justify-content: space-between;
		padding: 0px
	}
	
	
	.contenedor1,.contenedor1 .caja {
		display: flex;
		justify-content: space-between
	}
	
	.contenedor1 {
		max-width: 1000px;
		margin: auto;
		width: 90%
	}
	
	.contenedor1 .caja {
		width: 32%;
		overflow: hidden;
		flex-direction: column
	}
	
	.contenedor1 .caja img {
		width: 100%;
		height: 32%;
		object-fit: cover;
		padding: 10px
	}
	
	.contenedor1 .largo img {
		height: auto;
		padding: 10px
	}
	
	.contenedor1 .maslargo {
		height: 65%
	}
	
	.validado,aside,footer,footer .links {
		display: flex;
		flex-wrap: wrap
	}
	
	.validado {
		background: #d5d5d5;
		width: 100%;
		padding: 10px;
		justify-content: space-between;
		text-align: center
	}
	
	footer .links {
		background: #c0392b
	}
	
	footer .links a,footer .social a {
		color: #fff;
		text-decoration: none;
		padding: 10px
	}
	
	footer .links a {
		flex-grow: 1;
		text-align: center
	}
	
	footer .links a:hover {
		background: #e74c3c
	}
	
	footer .social {
		background: #e67e22
	}
	
	footer .social a {
		display: inline-block
	}

}