/*reglas
selectores
declaraciones
propiedades
valores*/


/* selector de etiqueta header - section - article - nav */

  /* header {
  background: pink;
  } */


/* selector descendente */
/* body header div nav ol li a */


/* selector de clase */

/* .link */

/* selector de id # */
/* #Portafolio */

/*Colores del Proyecto*/
/* gris oscuro = #1d252c */
/* gris claro = #626262 */
/* background gris = #1b2127 */
/* celeste = #026fff */

/* Modelo de caja 
  Con la propiedad box-sizing, 
  y en particular con el valor 
  border-box de esta propiedad, 
  podemos modificar el comportamiento
  del modelo de caja 
  para que nuestro elemento 
  nunca supere el tamaño máximo 
  que le hayamos definido en width 
  y height. Esta es la opción 
  recomendada para trabajar. */

  /* Tipos de display
  Display es la propiedad de css 
  que indica cómo debe ser mostrado 
  un elemento html. 
  Todos los elementos tienen algún tipo 
  de display. 
  Si un elemento no se ve en pantalla
  es porque seguramente su display es none. 
  Los valores más comunes que puede 
  recibir la propiedad display son:

  block: el elemento intenta abarcar todo el ancho posible.

  inline: reduce su tamaño exclusivamente 
  hasta lo que abarca su contenido, 
  descartando las propiedades width y height.

  inline-block: combina lo mejor de block e inline, 
  ya que respeta las dimensiones indicadas 
  en las propiedades width y height, 
  pero coloca el elemento en línea (al costado) 
  de elementos hermanos que también tengan display: inline o inline-block.

  flex: asume algunas propiedades por defecto 
  que favorecen la alineación de los elementos internos.

  grid: similar a flex, asume algunas propiedades por defecto 
  organizando los contenidos en filas y columnas.

  none: oculta el elemento.*/


  /*  Alineando elementos de forma horizontal
  La propiedad de css que nos permite definir la forma en que se alinearán o distribuirán 
  los hijos de un elemento al que se le ha asignado un display flex es: justify-content. 
  Y puede tomar entre otros valores, los siguientes: 
  
  flex-start: para alinear todos los elementos hacia el inicio del espacio disponible.

  flex-end: para alinear todos los elementos hacia el final, a la derecha.

  center: para alinear todos los elementos al centro del espacio disponible.

  space-between: para distribuir los elementos con un espacio proporcional e igual entre ellos.

  space-evenly: para distribuir los elementos con un espacio proporcional e igual entre ellos 
  (incluyendo el primer y último elementos con respecto a los extremos del espacio disponible).

  space-around: similar a space-evenly pero tanto en el primero como en el último elemento, 
  el espacio hacia los extremos es la mitad del espacio usado entre los elementos.*/


body {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
  
  
}

.header {
  background-color: #F6E01C;
  color: black;
  display: flex;
  justify-content: space-between;
  height: 190px;
  align-items: center;
  border-top: 5px solid #000000;
  border-right: 5px solid #000000;
  border-left: 5px solid #000000;
  
  
}

.menu { /* .menu hereda de .header */
  
}

.header ol { /* .header ol hereda de .menu */
  display: flex;
  height: inherit;
}

.header ol li { /* .header ol li hereda de .header ol */
  height: inherit;
}

.header a { /* .header a hereda de .header ol li */
  color: #000000;
  text-decoration: none;
  height: inherit;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin:0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Fjalla One', sans-serif;
  font-weight: normal;
  /*font-style: italic;*/
}

h1 {
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: -.2px;
  color: white;
  margin: 0;
  /*margin: 100px 150px 70px 30px;*/
  /*text-transform: uppercase;*/
  /*text-decoration: underline;*/
}

h1 strong {
  color: #F6DF1D;
}

h2 {
  color: #F6DF1D;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 40px;
}

/*.hero {
  height: 300px;
  background-image: linear-gradient(90deg, #34164e 0%, #000000 100%) ;
  justify-content: space-between;
  
  background-repeat: no-repeat;
  /*background-position: x y;*/
 /* background-position-x: right;
  display: flex;
  align-items: center;
}
*/

.hero {

  justify-content: space-between;
  height: 300px;
  /*background-image: url('../images/hero.jpg') ;*/
  background-color: #000000;
  /*background-size: 500px 300px;*/
  /*background-repeat: no-repeat;*/
  /*background-position: x y;*/
  /*background-position-x: right;*/
  display: flex;
  align-items: center;
  
  
}

.hero-image{
  object-fit: cover ;
  border-right: 0.1px solid #FFFFFF;
  border-left: 0.1px solid #FFFFFF;
  border-bottom: 0.1px solid #FFFFFF;
}

.portfolio {
  background: #000000;
  padding: 20px;
  /*background: red;*/
  
}

.project {
  /*border-top: 10px solid red;
  border-right: 10px solid green;
  border-left: 10px solid orange;
  border-bottom: 10px solid pink;*/
  /*border-color: red;*/
  /*color: blue;*/
  /*border-top-color: red;
  border-top-width: 15px;
  border-top-style: solid;*/
  border: 1px solid gray;
  border-radius: 10px;
  /*border-top-left-radius: 50px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;*/
  /*margin: 10px;*/
  margin-bottom: 15px;
  /*margin-right: ;
  margin-left: ;
  margin-top: ;*/
  padding: 20px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.project-title {
  font-size: 30px;
  margin-top: 0;
  margin-bottom: 10px;
}

.project-course,
.project-date,
.project-url {
  margin: 10px 0;
}

.project-description {
  font-size: 20px;
}

.project strong {
  font-family: 'Fjalla One', sans-serif;
}

/*.project-date {
  margin: 10px 0;
}*/

.project-details {
  width: 500px;
}

.project-imageContainer {
  width: 500px;
}





.flexbox {
  display: flex;
  /*flex-wrap: nowrap;*/
  flex-wrap: wrap;
  /*flex-direction: column;*/

}

.box {
  /*width: 50px;*/
  border: 1px solid red;
  /*margin: 20px;*/
  /*flex-shrink: 0;*/
  height: 50px;
  display:block; 
  width: 99px; 
  padding: 020px 20px 0 
}

.footer {
  color: white;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between; 
}

.footer img {
  vertical-align: middle;

}

.footer a {
  color: white;
}


.event-list {
  display: flex;
  flex-wrap: wrap;
  background-color: #000000
  
}

.event-list-title {
  margin-left: 20px;
}

.event {
  
  margin: 10px;
  width: 480px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f4fbff;
  
}

.event img {
  width: 480px;
  height: 200px;
  object-fit: cover;
}

.event-detail {
  margin: 20px 40px;
  background-color: white;
  margin-top: -40px;
  position: relative;
  padding: 20px;
  text-align: center;
}

.event-description {
  text-align: left;
}

.event-url {
  border: 1px solid ;
  padding: 5px 20px;
  text-decoration: none;
  color: #056fff;
  border-radius: 5px;
}

.contact {
  background-color: #F6E01C;
  color: white;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.social {
  
}

.social-link {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  display: inline-block;
  background-size: 50px 50px;
}

.social-link.twitter {
  background-image: url('../images/twitter.svg');
  
}
.social-link.facebook {
  background-image: url('../images/facebook.svg');
  
}
.social-link.github {
  background-image: url('../images/github.svg');
  
}
.social-link.instagram {
  background-image: url('../images/instagram.svg');
  
}

.form-email input {
  border-color: gray;
  border-radius: 5px;
  border-style: solid;
  padding: 10px 20px 10px 25px;
  background-image: url('../images/envelope.svg');
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 5px;
}

.form-email button {
  display: block;
  margin-top: 10px;
  background: transparent;
  color: white;
  padding: 10px 0;
  border-radius: 5px;
  width: 100px;
  margin-bottom: 10px;
  

}

.form-email h3 {
  font-family: 'Source Sans Pro', sans-serif;
}

.container {
  /*border: 1px solid red;*/
  width: 1000px;
  margin:0 auto;
  display: inherit;
  justify-content: inherit;
  align-items: inherit;
  height: inherit;
  flex-wrap: inherit;
  
}

.blog {
  display: flex;
  flex-wrap: wrap;
  background-color: #000000;
}