/*  ===================================
      Responsive Design, Mobile-First
      (cc) 3con14.pro
    =================================== */

/* Reglas comunes ------------------------------- */
* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 0.5s ease-out;
}
body {
  font       : 16px sans-serif;
  background : rgba(0,0,0,0.2);
  padding    : 1rem;
}

main,header,nav,section,article,aside,footer {
  outline    : 1px solid #fff;
  background : rgba(0,0,0,0.1);
}

header,nav,article,aside,footer {
  padding: 0.8rem;
}

section { background: rgba(0,0,0,0.1); }
aside   { background: rgba(0,0,0,0.1); }

a {	text-decoration:none }


/* Smartphone ----------------------------------- */

main {
  display        : flex;
  flex-direction : row;
  flex-wrap      : wrap;
}

nav {
  display        : flex;
  flex-direction : column;
}

.menu {
  background : rgba(0,0,0,0.2);
  margin     : 1px;
  padding    : 2px 1em;
  text-align : center;
}

header,nav,section,aside,footer {
  width: 100%;
}

img {
	border: 1px solid white;
	background-size: 100% 100%;
	background-repeat:no-repeat;
	background:url(../img/imagen.jpg);
	background-size: cover;
	width:100%;
}

/* Tablet --------------------------------------- */
@media all and (min-width: 568px) {
  section { flex: 3; order: 2; }
  aside { flex: 1; order: 1; }
  footer { order: 3; }
  nav { 
    flex-direction  : row;
    justify-content : flex-end;
  }
} 
/* Desktop -------------------------------------- */
@media all and (min-width: 768px) {
  section {
    display   : flex;
    flex-wrap : wrap;
    order: 1;
  }
  article { width: 33.33%; }
  nav     { justify-content: center; }
}