/*
Theme Name: Chiqui Esteban
Description: Custom HTML/CSS theme
Version: 1.0
*/

:root {
  --oxido: #A36058;
  --cobalto: #7A8492;
  --fondo: #EFEBE3;
  --text-color: #222222;
  --verde: #9bb98d;
}

html {
  scroll-behavior: smooth;
  
}

body {
  padding:0;
  margin:0;
}

/* LINKS */
.linkHead a {
      font-family: "Roboto", sans-serif;
      font-size:1rem;
      color:bisque;
      @media only screen and (max-width: 640px) {
        font-size: .8rem;
      }
}

.linkHead a:hover {
  color:beige
}

/* FIRST PANEL */

#first-splash {
  background:var(--oxido);
  padding:2rem;
  margin:0;
} 

.big-indiv-block {
  max-width:650px;
  margin:0 auto;
}

.bigHead {
  font-family: "DM Serif Text", serif;
  font-size:4rem;
  color:bisque;

  @media only screen and (max-width: 640px) {
      font-size:3rem;
  }
}


.bigSubHead {
  font-family: "Roboto", sans-serif;
  font-size:1rem;
  text-transform: uppercase;
  color:bisque;
  margin-bottom:1rem;
  font-weight: 100;
  @media only screen and (max-width: 600px) {
    font-size: 1rem;
    font-weight: 700;
  }
}

.textGroup {
  font-family: "Roboto", sans-serif;
  font-size:.9rem;
  line-height:1.5rem;
  color:var(--fondo);
  max-width:600px;
  
}

.textGroup p:first-of-type {
  color:bisque;
  margin-bottom:0;
  padding-bottom:1rem;
  font-size:1.2rem;
  line-height:2rem;
  font-weight: 100;
}

.textGroup p {
  padding-bottom:1rem;
}

/* SECOND PANEL STYLES */

#second-splash, #fourth-splash-int {
  background-color: black;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  color: #FFF;
  font-weight: 100;

  h2 {
   font-family: "DM Serif Text", serif;
  }

  p a {
    color: #FFF;
  }

  p a:hover {
    color: beige;
  }

  .text-section {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.4rem;
    width:30%;

    .text-cont {
      margin: 0 auto;
      max-width:400px;
      padding:2rem;
    }
  }

  .center-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width:45%;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }
  }

  .right-section {
    display: flex;
    flex-direction: column;
    width:25%;
  }
}

.image-with-text {
  flex: 1;
  display: flex;
  padding:0; margin:0;
  flex-direction: column;
  padding: 0.5rem;
  text-align: center;
}

.image-with-text img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding:0; margin:0;
}


  @media (max-width: 1019px) and (min-width: 640px) {
    #second-splash, #fourth-splash-int {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .text-section {
      width: 50%!important;
      order: 1;
    }

    .center-image {
      width: 50%!important;
      order: 2;
    }

    .right-section {
      width: 100%!important;
      order: 3;
      flex-direction: row!important;
    }

    .image-with-text {
      width: 50%!important;
    }
  }

  /* Small screens (below 720px) */
  @media (max-width: 719px) {
    #second-splash, #fourth-splash-int {
      flex-direction: column;
      padding-bottom:4rem;
    }

    .center-image {
      width: 100%!important;
      order: 1;
      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }


    .text-section {
      width: 100%!important;
      order: 2;
    }

    .right-section {
      width: 100%!important;
      order: 3;
      flex-direction: column;
    }

    .image-with-text {
      width: 100%!important;
      height: 50%;
    }
  }

  #third-splash {
    background:var(--cobalto);
    padding-top:4rem;
    padding-bottom:4rem;

    .quote {
      font-family: "DM Serif Text", serif;
      font-weight: 400;
      font-style: italic;
      font-size:1.5rem;
      padding-top: 3rem;
      padding-bottom:3rem;
      color: #FFF;

       @media (max-width: 719px) {
        padding:2rem;
        font-size:1.5rem;
       }

      .who {
        font-family: 'Roboto', sans-serif;
        font-size:1.2rem;
        padding-top:1.5rem;
        @media (max-width: 719px) {
          font-size:1rem;
        }

        a {  color:#FFF; }
        a:hover {color:beige;}
      }
    }

  }

#fourth-splash {
  font-family: "DM Serif Text", serif;
  color:#FFF;
  background:#000;
  
  h2 {
      padding:0; margin:0;
      text-align: center; 
      padding:3rem;
      font-size:1.6rem;
  }

  .image-text {
    max-width:380px;
    text-align: center;
    margin:0 auto;
    margin-bottom:.5rem;
  }

}

#fourth-splash-int {
  .text-section, .center-image { 
    width:40%;
    
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }

  }

  .right-section {
    width:20%;
  }
}

#fourth-splash-int {
  .center-image, .text-section {
    flex-direction: column;
  }
}

#fifth-splash {
  overflow: hidden;

  .indivillo {
    display:inline;
    float:left;
    width:25%;
    background:black;
    
    img {
      width:100%;
      vertical-align: top; /* or vertical-align: bottom; */
      display: block;
    }
    
    @media (max-width: 719px) {
     width:50%;
     padding:0!important; 
     margin:0!important;
    }

    a {
       transition: filter 1s ease;
    }
  }

  .indivillo a:hover {
    filter: grayscale(90%);
  }
}

#sixth-splash {

  overflow: hidden;
  padding-bottom:5rem;

  .double-page {
    display:inline;
    float:left;
    width:33%;

    img {
      width:100%;
      vertical-align: top; /* or vertical-align: bottom; */
      display: block;
    }

    @media (max-width: 719px) {
     width:100%;
     padding:0!important; 
     margin:0!important;
    }
  }

  .single-page {
    display:inline;
    float:left;
    width:17%;

    img {
      width:100%;
      vertical-align: top; /* or vertical-align: bottom; */
      display: block;
    }

    @media (max-width: 719px) {
     width:50%;
     padding:0!important; 
     margin:0!important;
    }
  }
}

#resume-splash {
  background:var(--oxido);
  padding:2rem;
  margin:0;

  h2 {
    font-size:3rem;
    color:bisque;
    max-width:620px;
    margin:0 auto;
  }
} 

#resumeBlock {

    max-width:620px;
    color:bisque;
    margin:0 auto;

}

    p.workplace {
      font-family: "DM Serif Text", serif;
      font-size:1.5rem;
      border-top:1px solid bisque;
    }

    p.job-title {
      font-family: 'Roboto', sans-serif; 
      color:#FFF;
    }

    p.job-story {
      font-family: 'Roboto', sans-serif;
      font-weight:100;
      color:#FFF;
      line-height:1.4rem;
      a {color:#FFF;}
      a:hover {color:bisque;}
    }