/*medium resolution, 481px to 1023px */
@media only screen and (min-width: 481px) {
    
*{ padding: 0; margin: 0; }

body { background-color: #02607c; }

#contenedor { background-color: #0e2024; margin-left: auto; margin-right: auto; height: auto; max-width: 95%; }

header { background-color: white; height: auto; margin-bottom: 10px; }

nav { float: right; width: auto; height: auto; }

nav ul { color: white; margin-top: 25px; list-style-type: none; }

nav li { color: white; font-size: 12px; float: right; margin-right: 15px; }

nav a { color: white; font-size: 16px; color: rgba(0,0,0,0.7); }

nav a:hover { color: dimgrey; font-size: 16px; color: rgb(0,0,0); }
    
section { clear: both; }

main { padding-bottom: 50px; height: auto; }

main p { color: rgba(0,0,0,0.7); }

h2 {color: white; }

h3 { font-size: 40px; color: white; }

h4 { margin: 40px; color: white; }

article { padding: 43px; float: left; width: 150px; height: auto; margin-right: auto; margin-left: auto; }

article img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); height: 240px; width: 210px; margin-left; 0px; margin-right: 0px; }

article img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); height: 240px; width: 210px; }

aside { padding: 10px; float:right; width: 300px; }

footer { padding-top: 20px; padding-bottom: 20px; clear: both; height: auto; }

footer p { font-size: 12px; color: white; }

    
}













/*high resolution,2014px and above */
@media only screen and (min-width: 1024px) {

*{ padding: 0; margin: 0; }

body { background-color: #02607c; }

#contenedor { background-color: #0e2024; margin-left: auto; margin-right: auto; height: auto; max-width: 960px; }

header { background-color: white; height: auto; margin-bottom: 10px; }

nav { float: right; height: auto; }

nav ul { color: black; margin-top: 25px; list-style-type: none; }

nav li { color: black; font-size: 12px; float: right; margin-right: 15px; }

nav a { color: black; font-size: 16px; color: rgba(0,0,0,0.7); }

nav a:hover { color: dimgrey; font-size: 16px; color: rgb(0,0,0); }

main { padding-bottom: 50px; }

main p { color: rgba(0,0,0,0.7); }

h2 { color: white; }

h3 { font-size: 24px; color: white; }

h4 { margin: 40px; color: white; }

article { padding: 43px; float: left; width: 150px; height: auto; margin-right: auto; margin-left: auto; }

article img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); height: 180px; width: 150px; margin-left; 0px; margin-right: 0px; }

article img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); height: 180px; width: 150px; }

aside { padding: 10px; float:right; width: 300px; }

footer { padding-top: 20px; padding-bottom: 20px; clear: both; height: auto; }

footer p { font-size: 12px; color: white; }
    
}