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

/*header {
    background: white;
    color: #5E5E5E
}*/

/*selector desendente .. un elemento hijo*/
/* body header div nav ol li a || toma todas las a que hay */

/* selector de clase .*/
/* .link */

/* selector de id # */
/* #portafolio*/
/*body{
   font-family: Raleway, sans-serif;
}*/
/*h1 strong{
    color: red
} Ponerle color diferente a todo lo que esté dentro de strong en el h1, en este caso es juanes*/
body{
    margin: 0;

}

/* --------------- CABECERA------------------- */
.header {
    -webkit-box-shadow: 2px 7px 18px -9px rgba(0,0,0,0.10);
    -moz-box-shadow: 2px 7px 18px -9px rgba(0,0,0,0.10);
    box-shadow: 2px 7px 18px -9px rgba(0,0,0,0.10);
    border-radius: 0px;
    background-color: #FFFFFF; /*Fondo del Header*/
    color: #5E5E5E; /*Color número del header*/
    height: 120px; /* alto */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    margin-top: 10px;
}
.lista_ordenada{
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  height: inherit;
}

.menu-center__botton{
  height: inherit;
  display: flex;
}

.menu{
    height: inherit;
}

.menu__button {
    color: black; /* Color del menú*/
    font-weight: 400; /* Grosor del menú*/
    font-size: 25px;
    text-decoration: none; /* subrayado del menú*/
    font-family: 'Staatliches', cursive;
    display: flex;
    align-items: center;
    height: inherit;
    padding: 0 30px;
}

.container-welcome{
    /* border: 1px solid red;*/
    width: 1480px;
    margin: 0 auto;
    display: inherit;
    justify-content: inherit;
    align-items: inherit;
    height: inherit;
    flex-wrap: inherit;
}
/* --------------- SECCIÓN PRINCIPAL ------------------- */


.hero {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-composition{
  height: 400px;
  width: 1300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image{
    background-image: url('../images/hero3.png');
    background-size: 250px;
    background-repeat: no-repeat;
    /*object-fit: cover;*/
    /*margin-left: 500px;*/
    display: flex;
}

.hero-text{
  margin: 10px 0px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tittle-welcome {
    font-family: 'Staatliches', cursive;
    color: black;
    line-height: 53px;
    font-weight: 450;
    /*letter-spacing: 2px; /* Kerning*/
    font-size: 50px;
    margin-top: 23px;
    margin-left: 400px;
}
/* --------------- ELEMENTOS DE PORTAFOLIO ------------------- */
.title_position{
  padding-top:  50px;
  background-color: #FAFAFA;
  display: flex;
  justify-content: center;
}
.tittle-seccion-1{ /*PROYECTOS (LOS MÁS DESTACADOS)*/
    font-family: 'Staatliches', cursive;
    font-size: 35px;
    color: black;
    background-color: #e5a80e;
    margin: 0px;
    padding: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    width: 470px;
}
.portfolio{
    background-color: #FAFAFA;
    padding: 20px;
}

.project-1{
     /*  border-top: 10px solid red;
    border-right: 10px solid green;
    border-left: 10px solid blue;
    border-bottom: 10px solid yellow;*/
    /*border-color: #027fff ; */
    /*border-top-color: red;
    border-top-width: 15px;
    border-top-style: solid; */
    -webkit-box-shadow: 5px 7px 11px 2px rgba(0,0,0,0.12);
    -moz-box-shadow: 5px 7px 11px 2px rgba(0,0,0,0.12);
    box-shadow: 5px 7px 11px 2px rgba(0,0,0,0.12);
    border-radius: 40px;
    padding: 50px;
    margin: 50px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
   /*border-top-left-radius: 10px;  una sola esquina redondeada*/
}

.project-1-details{
    width: 700px;
    margin-right: 300px;
    box-sizing: border-box;
}
/* --------------- TEXTOS DENTRO DEL PROYECTO ------------------- */
.project-1-tittle{ /* TÍTULO DE PROYECTOS*/
    font-family: 'Staatliches', cursive;
    font-size: 50px;/* Tamaño */
    /*font-weight: 700; negrita*/
    line-height: 70px; /*Espaciado Interlineado hacia abajo*/
    letter-spacing: 1px; /* Kerning*/
    margin-right: -400px;
    margin-bottom: 0px;
    margin-top: -10px;
}

.project-1-subtittle{ /* SUBTITULOS DE PROYECTOS*/
    font-family: Montserrat, raleway, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #5E5E5E;
    margin-top: 10px;
}

.project-1-date{ /* FECHAS DE PROYECTOS*/
    font-family: Montserrat, raleway, sans-serif;
    font-size: 20px; /* Tamaño*/
    font-weight: 500;
    color: #5E5E5E;
    line-height: 2px;
    margin-bottom: 3px;
}
.project-1-date strong{
    margin-bottom: 10px;
    font-weight: 700;
    color: rgb(0, 0, 0);
}

.project-1-url{ /* LINKS DE PROYECTOS*/
    font-family: Montserrat, raleway, sans-serif;
    font-size: 20px; /* Tamaño*/
    font-weight: 500;
    color: #5E5E5E;
    line-height: 25px;
    margin-right: -16px;
    margin-bottom: 50px;
}
.project-1-url strong{
    font-weight: 700;
    color: rgb(0, 0, 0);
}

.project-1-url a{
    color: black;
}

.project-1-description{
    font-family:  'lato', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /*Espaciado vertical*/
    color: black;
    margin-right: -300px;
}


.project-1-imageContainer { /*Reel*/
    width: -10px;
    margin-left: 50px;
    margin-top: 12px;
    box-sizing: border-box;
}

.project-2-imageContainer { /*Ingeniería de Sonrisas*/
    width: -10px;
    margin-left: 50px;
    margin-top: 12px;
    box-sizing: border-box;
}

.project-3-imageContainer { /*Doberman PD*/
    width: -10px;
    margin-left: 50px;
    margin-top: 12px;
    box-sizing: border-box;
}
.title_position-2{
  padding-top:  50px;
  padding-bottom: 100px;
  background-color: white;
  display: flex;
  justify-content: center;
}
.tittle-seccion-2{ /*EXPERIENCIA*/
    font-family: 'Staatliches', cursive;
    font-size: 35px;
    color: black;
    background-color: #e5a80e;
    margin: 0px;
    padding: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    width: 325px;
}

.exp-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.experiences-1{
    -webkit-box-shadow: 9px 11px 13px -6px rgba(0,0,0,0.27);
    -moz-box-shadow: 9px 11px 13px -6px rgba(0,0,0,0.27);
    box-shadow: 9px 11px 13px -6px rgba(0,0,0,0.27);
    border-radius: 40px;
    overflow: hidden;
    margin: 10px;
    width: 480px;
    flex-shrink: 0;
    background-color: #FAFAFA;
    flex-wrap: wrap;
}

.experiences-1-imageContainer{
  width: 500;
  height: 500;
  display: flex;
  object-fit: cover;
  background-image: url('../images/certificados.png');
  margin: 0;
  padding: 0;
}

.experiences-1 img{
  object-fit: cover;

}

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

.experiences-1-tittle{
    font-family: 'Staatliches', cursive;
    font-size: 25px;
}

.experiences-1-description{
    text-align: left;
    text-align: center;
    font-family: 'lato', sans-serif;
    color: #5E5E5E;

}

.experiences-1-url{
    font-family: 'lato bold', sans-serif;
    border: 1px solid #DA9D09;
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    color: #DA9D09;
}

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

.contact {
    margin-top: 100px;
    background-color: #e5a80e;
    color: white;
    height: 300px;/* alto */
    widows: 500px;/* ancho */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.social{
}

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


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

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

.social-link.behance{
    background-image: url('../images/behance.svg');
}

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

.form-email input{
    border-color: gray;
    border-radius: 20px;
    border-style: solid;
    padding: 5px 20px 5px 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;
    background: transparent;
    padding: 10px 0px;
    border-radius: 20px;
    width: 100px;
    margin-top: 10px;
   /* margin: 10px auto 0;*/
}

.form-email-tittle{
    font-family: 'Staatliches', cursive;
    color: black;
    letter-spacing: 2px;
    background-color: white;
    font-size: 30px;
    margin-bottom: 40px;
    margin-top: 5px;
}

.footer{
    background-color: white;
    font-family: Raleway, lato, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer img{
    vertical-align: middle;
}

.footer a{
    color: black;
}