@charset "UTF-8";

/* CSS Document */

@media only screen and (min-width:1500px) {
  *, html{
font-size: 20px;
}
.header{
  height: 80px;
}
.menu{
  padding-bottom: 18px;
}
.branding img {
    width: 416.75px;
  }
.badass_small, .year p{
    font-size: 0.6em;
}

.exp_info_box {
    grid-column-end: span 7;
}

.legend{
  grid-auto-rows: auto;
  max-width: 550px;
  padding: 20px 10px 20px 20px;
  background-color: #ffffff;

}

}
@media only screen and (max-width:1050px) {
  .research_q {
    grid-template-rows: minmax(30px, auto) repeat(2, minmax(50px, auto));
  }

  .project_content {
    grid-gap: 20px 0px;
  }
  .background_countrys{
    grid-row: 3  /-1;
  }

.locals{
  grid-column: span 3 / 12;
}
.producer{
  grid-column: 2 / span 3;
}
  .container h3, .contact_content h3 {
    grid-column: 4 / -4;
  }

  .interM {
    /* grid-row: 9; */
    grid-column: 6 / span 4;
  }

  .barriesL, .barriesP {
    grid-column: 5 / span 3;
  }

  .portrait {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .exp_info_box {
    grid-column-end: span 7;
  }
}

@media only screen and (max-width:750px) {
  .project_content {
    grid-template-rows: 50px auto auto minmax(80px, auto) 50px repeat(3, minmax(80px, auto)) 30px;
    /* grid-template-rows: 50px auto repeat(6, minmax(30px, 70px)) minmax(0px, auto) 50px; */
  }


  .interM {
    grid-row: 8;
  }

  .barriesL, .barriesP {
    grid-column: 5 / span 4;
  }

  .header {
    height: auto;
    grid-template-rows: 70px minmax(0px, auto);
  }

  nav {
    grid-row: 2;
    grid-column: 2 /-2;
  }

  #menu {
    display: none;
  }

  .menu a {
    justify-self: center;
    align-self: center;
    padding-top: 15px;
  }

  .mobile_menu_action {
    display: block;
    grid-row: 1;
  }

  .closer {
    display: none;
    grid-row: 1;
  }
}

@media only screen and (max-width:630px) {
  .branding img {
    width: 263px;
  }
  .opener {
      padding: 15vh 0px calc(15vh - 70px) 0px;
    }
  .research_q {
    grid-template-rows: minmax(20px, auto) repeat(2, minmax(50px, auto));
  }

  .item_text h4::after{
    display: inline-block;
  }
  .project_content {
    grid-template-rows: 50px auto repeat(6, minmax(30px, 45px)) minmax(0px, auto) 50px;
  }
  .background_countrys{
    grid-row: 2  /-1;
    margin-top: 40px;
  }
  .item_roadmap_2 {
    grid-row: 8;
  }
  .interM {
    grid-row: 9;
  }
  .locals{
    grid-column: span 2 / 12;
  }
  .producer{
    grid-column: 2 / span 2;
  }

.exp_legend_button, .pro_legend_button{
  padding: 5px 10px 5px 10px;
}
  .container h3, .contact_content h3 {
    font-size: 1.2em;
    letter-spacing: 0.02em;
  }

  h4, .mail_address, button, .number {
    font-size: 1em;
  }

  h2 {
    font-size: 2em;
    line-height: 1.2em;
    letter-spacing: 0.01em;
  }


  .producer, .locals {
    margin: 0px;
  }

  .interM {
    grid-column: 5 / span 4;
  }

  .interM h4 {
    text-align: center;
  }

  .item_text p {
    display: none;
  }

  .barriesL {
    grid-column: 5 /span 2;
    content: 'i';
  }

  .barriesP {
    grid-column: 7 / span 2;
    content: 'i';
  }

  .barriesP span, .barriesL span{
    display: block;
  }

  .year {
    letter-spacing: 0.1em;
    padding: 2px 0px 0px 2px;
  }

  .year p {
    font-size: 0.75em;
  }

  .experience_content .exp_left {
    grid-column-start: 3 !important;
  }

  .exp_info_box {
    grid-column-end: span 15;
  }

  .contact_content {
    grid-template-rows: 50px repeat(6, minmax(40px, auto));
  }

  .about {
    grid-column: 3 / -3;
    grid-row: 3;
  }

  .portrait_container {
    grid-row: 4 / auto;
    grid-column: 4 / -4;
  }

  .tel_container {
    grid-row: 5;
  }

  address {
    grid-row: 6;
  }
  .footer{
    grid-template-rows: minmax(50px, 1fr) auto;
    grid-row-gap: 10px;
    padding-bottom: 15px;
  }
  .footer .badass_small{
    grid-column-start: 2;
    justify-self: left;
    grid-row: 2;
  }
  .legal_nav{
    grid-column: 2 / -5 ;
  }
}

@media only screen and (max-width:460px) {
  h2 {
    font-size: 1.85em;
    letter-spacing: 0.005em;
    line-height: 1.3em;
  }
  .background_countrys{
    grid-row: 3  /-1;
    margin-top: -20px;
  }
.barriesP {
  grid-column: 6 / span 3;
  }
  .barriesL {
    grid-column: 5 /span 3;
  }
  .project_content {
    grid-template-rows: 50px auto repeat(6, 30px) minmax(0px, auto) 50px;
  }

  .contact_content {
    row-gap: 20px;
    column-gap: 0px;
  }

  .about {
    grid-column: 2 / -2;
  }

  .legal_nav{
    grid-column: 2 / -2 ;
  }
  .year {
    letter-spacing: 0.08em;
    padding: 2px 0px 0px 2px;
  }

  .year p {
    font-size: 0.5em;
  }
  .exp_legend_button, .pro_legend_button{
      display: none;
  }
}