style.css

@charset "UTF-8";
/* ———————————— UPDATED 2017 ———————————— */
/* ———————————— BRAND COLORS/SETUP ———————————— */
/*—————*/
/*—————*/
/*—————*/
/* —————————————— INSTALL FONTS ——————————————— */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* —————————————— INITIAL GLOBAL —————————————— */
.section {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 68px; }
  @media screen and (min-width: 760px) {
    .section {
      padding-top: 56px;
      padding-bottom: 78px; } }
  @media screen and (min-width: 1080px) {
    .section {
      padding-top: 60px;
      padding-bottom: 100px; } }

.inner {
  margin: 0 auto;
  width: 93.066666666667%;
  text-align: center; }
  @media screen and (min-width: 760px) {
    .inner {
      width: 84.473684210526%; } }
  @media screen and (min-width: 1080px) {
    .inner {
      width: 83.333333333333%; } }
  @media screen and (min-width: 1440px) {
    .inner {
      width: 1440px; } }

.inner_block {
  margin: 0 auto;
  width: 93.066666666667%; }
  @media screen and (min-width: 760px) {
    .inner_block {
      width: 75%; } }
  @media screen and (min-width: 1080px) {
    .inner_block {
      width: 60%; } }

.header_main {
  text-align: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh; }
  .header_main:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%; }

.header_short {
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  height: 140px;
  text-align: center; }
  .header_short:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%; }
  @media screen and (min-width: 760px) {
    .header_short {
      height: 200px; } }
  @media screen and (min-width: 1080px) {
    .header_short {
      height: 260px; } }

p.bottom {
  margin-bottom: 40px; }
  @media screen and (min-width: 760px) {
    p.bottom {
      margin-bottom: 40px; } }
  @media screen and (min-width: 1080px) {
    p.bottom {
      margin-bottom: 40px; } }

.list_center {
  border-top: 1px solid #cccccc;
  padding-top: 20px;
  width: 77%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 0px;
  text-align: center; }
  .list_center div {
    display: block;
    margin: 0 auto;
    width: 13px;
    height: 10px;
    margin-bottom: 26px; }
  .list_center li {
    margin-bottom: 3px; }
    .list_center li:last-child {
      margin-right: 0; }
    @media screen and (min-width: 1080px) {
      .list_center li {
        display: inline-block;
        margin-right: 20px; } }

/* —————————————— GLOBAL MIXIN ———————————————— */
/*-----*/
/*-----*/
/*-----*/
.grid_1_1_1:after {
  content: "";
  display: table;
  clear: both; }
.grid_1_1_1 li {
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background: white;
  float: left !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0; }
  @media screen and (min-width: 760px) {
    .grid_1_1_1 li {
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_1_1_1 li {
      margin-right: 0%; } }
.grid_1_1_1 li {
  height: 210px;
  width: 100%; }
  @media screen and (min-width: 760px) {
    .grid_1_1_1 li {
      width: 100%;
      height: 316px;
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_1_1_1 li {
      width: 100%;
      height: 600px;
      margin-right: 0%; } }

.grid_1_2_2:after {
  content: "";
  display: table;
  clear: both; }
.grid_1_2_2 li {
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background: white;
  float: left !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0; }
  @media screen and (min-width: 760px) {
    .grid_1_2_2 li {
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_1_2_2 li {
      margin-right: 0%; } }
.grid_1_2_2 li {
  height: 210px;
  width: 100%; }
  @media screen and (min-width: 760px) {
    .grid_1_2_2 li {
      height: 210px;
      width: 50%; }
      .grid_1_2_2 li:nth-child(2n+2) {
        margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_1_2_2 li {
      height: 373px;
      width: 50%; }
      .grid_1_2_2 li:nth-child(2n+2) {
        margin-right: 0%; } }

.grid_1_3_3:after {
  content: "";
  display: table;
  clear: both; }
.grid_1_3_3 li {
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background: white;
  float: left !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0; }
  @media screen and (min-width: 760px) {
    .grid_1_3_3 li {
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_1_3_3 li {
      margin-right: 0%; } }
.grid_1_3_3 li {
  height: 210px;
  width: 100%; }
  @media screen and (min-width: 760px) {
    .grid_1_3_3 li {
      height: 203px;
      width: 33.33333333333333%; }
      .grid_1_3_3 li:nth-child(3n+3) {
        margin-right: 0; } }
  @media screen and (min-width: 1080px) {
    .grid_1_3_3 li {
      height: 273px;
      width: 33.33333333333333%; }
      .grid_1_3_3 li:nth-child(3n+3) {
        margin-right: 0; } }

.grid_2_2_2:after {
  content: "";
  display: table;
  clear: both; }
.grid_2_2_2 li {
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background: white;
  float: left !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0; }
  @media screen and (min-width: 760px) {
    .grid_2_2_2 li {
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_2_2_2 li {
      margin-right: 0%; } }
.grid_2_2_2 li {
  height: 150px;
  width: 50%;
  margin-right: 0; }
  .grid_2_2_2 li:nth-child(2n+2) {
    margin-right: 0; }
  @media screen and (min-width: 760px) {
    .grid_2_2_2 li {
      height: 210px;
      width: 50%;
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_2_2_2 li {
      height: 373px;
      width: 50%;
      margin-right: 0%; } }

.grid_1_2_3:after {
  content: "";
  display: table;
  clear: both; }
.grid_1_2_3 li {
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background: white;
  float: left !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0; }
  @media screen and (min-width: 760px) {
    .grid_1_2_3 li {
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_1_2_3 li {
      margin-right: 0%; } }
.grid_1_2_3 li {
  height: 210px;
  width: 100%; }
  @media screen and (min-width: 760px) {
    .grid_1_2_3 li {
      height: 210px;
      width: 50%; }
      .grid_1_2_3 li:nth-child(2n+2) {
        margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_1_2_3 li {
      height: 273px;
      width: 33.33333333333333%; }
      .grid_1_2_3 li:nth-child(2n+2) {
        margin-right: 0%; }
      .grid_1_2_3 li:nth-child(3n+3) {
        margin-right: 0; } }

.grid_2_3_3:after {
  content: "";
  display: table;
  clear: both; }
.grid_2_3_3 li {
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background: white;
  float: left !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0; }
  @media screen and (min-width: 760px) {
    .grid_2_3_3 li {
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_2_3_3 li {
      margin-right: 0%; } }
.grid_2_3_3 li {
  height: 150px;
  width: 50%;
  margin-right: 0; }
  .grid_2_3_3 li:nth-child(2n+2) {
    margin-right: 0; }
  @media screen and (min-width: 760px) {
    .grid_2_3_3 li {
      height: 203px;
      width: 33.33333333333333%;
      margin-right: 0%; }
      .grid_2_3_3 li:nth-child(2n+2) {
        margin-right: 0%; }
      .grid_2_3_3 li:nth-child(3n+3) {
        margin-right: 0; } }
  @media screen and (min-width: 1080px) {
    .grid_2_3_3 li {
      height: 273px;
      width: 33.33333333333333%;
      margin-right: 0%; }
      .grid_2_3_3 li:nth-child(2n+2) {
        margin-right: 0%; }
      .grid_2_3_3 li:nth-child(3n+3) {
        margin-right: 0; } }

.grid_3_3_4:after {
  content: "";
  display: table;
  clear: both; }
.grid_3_3_4 li {
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background: white;
  float: left !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0; }
  @media screen and (min-width: 760px) {
    .grid_3_3_4 li {
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_3_3_4 li {
      margin-right: 0%; } }
.grid_3_3_4 li {
  height: 123px;
  width: 33.33333333333333%;
  margin-right: 0; }
  @media screen and (min-width: 760px) {
    .grid_3_3_4 li {
      height: 203px;
      width: 33.33333333333333%;
      margin-right: 0%; } }
  @media screen and (min-width: 1080px) {
    .grid_3_3_4 li {
      height: 260px;
      width: 25%;
      margin-right: 0%; } }
  @media screen and (min-width: 1440px) {
    .grid_3_3_4 li {
      height: 350px;
      width: 25%; } }

/* —————————————————— SOCIAL —————————————————— */
.common_social, .instagram, .facebook, .snapchat, .vimeo, .twitter, .behance, .linkedin, .youtube, .treehouse, .fyuse {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  background-image: url(_library/asset/ico_sprite_social_b.svg);
  background-size: 1000%;
  height: 30px;
  width: 30px;
  display: inline-block;
  margin-right: 5px; }
  .common_social:last-child, .instagram:last-child, .facebook:last-child, .snapchat:last-child, .vimeo:last-child, .twitter:last-child, .behance:last-child, .linkedin:last-child, .youtube:last-child, .treehouse:last-child, .fyuse:last-child {
    margin-right: 0; }
  .common_social:hover, .instagram:hover, .facebook:hover, .snapchat:hover, .vimeo:hover, .twitter:hover, .behance:hover, .linkedin:hover, .youtube:hover, .treehouse:hover, .fyuse:hover {
    background-position-y: -60px; }

.instagram {
  background-position-x: 0px; }
  .instagram:hover {
    background-color: #2a5b83; }

.facebook {
  background-position-x: -30px; }
  .facebook:hover {
    background-color: #4b6daa; }

.snapchat {
  background-position-x: -60px; }
  .snapchat:hover {
    background-color: #fffc01; }

.vimeo {
  background-position-x: -90px; }
  .vimeo:hover {
    background-color: #1ab7ea; }

.twitter {
  background-position-x: -120px; }
  .twitter:hover {
    background-color: #659fcb; }

.behance {
  background-position-x: -150px; }
  .behance:hover {
    background-color: #319DD4; }

.linkedin {
  background-position-x: -180px; }
  .linkedin:hover {
    background-color: #0077B5; }

.youtube {
  background-position-x: -210px; }
  .youtube:hover {
    background-color: #EE1C1B; }

.treehouse {
  background-position-x: -240px; }
  .treehouse:hover {
    background-color: #69C773; }

.fyuse {
  background-position-x: -270px; }
  .fyuse:hover {
    background-color: #f99805; }

/* ——————————————— TYPOGRAPHY ————————————————— */
h1 {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  font-family: 'Lato', sans-serif;
  color: #2b2727;
  font-weight: 500;
  font-size: 23px;
  line-height: 28px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 18px; }
  @media screen and (min-width: 760px) {
    h1 {
      font-size: 30px;
      line-height: 31px;
      margin-bottom: 23px; } }
  @media screen and (min-width: 1080px) {
    h1 {
      font-size: 40px;
      line-height: 40px;
      margin-bottom: 32px; } }

h2 {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  font-family: 'Fira Sans', sans-serif;
  color: #49afc6;
  font-weight: normal;
  padding-top: 33px;
  font-size: 25px;
  line-height: 29px;
  padding-bottom: 23px;
  text-align: center; }
  @media screen and (min-width: 760px) {
    h2 {
      padding-top: 57px;
      font-size: 28px;
      line-height: 32px;
      padding-bottom: 24px; } }
  @media screen and (min-width: 1080px) {
    h2 {
      padding-top: 54px;
      font-size: 31px;
      line-height: 37px;
      padding-bottom: 25px; } }

h3 {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  font-family: 'Lato', sans-serif;
  color: #2b2727;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 7px; }

p {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s;
  font-family: 'Fira Sans', sans-serif;
  color: #2b2727;
  font-weight: 200;
  font-size: 14px;
  line-height: 25px;
  text-align: center; }
  @media screen and (min-width: 760px) {
    p {
      font-size: 15px;
      line-height: 28px; } }
  @media screen and (min-width: 1080px) {
    p {
      font-size: 16px;
      line-height: 30px; } }

/* —————————————————— RESET ——————————————————— */
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

/* ———————————— DESIGN COMPONENTS ————————————— */
.logo_primary {
  display: inline-block;
  vertical-align: middle;
  background-image: url(_library/asset/gfx_logo_primary_b.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 78%;
  width: 136px;
  height: 62px;
  margin-bottom: 50px; }
  @media screen and (min-width: 760px) {
    .logo_primary {
      width: 216px;
      height: 100px;
      background-size: 60%; } }
  @media screen and (min-width: 1080px) {
    .logo_primary {
      background-size: 60%;
      width: 216px;
      height: 100px; } }

.logo_interior {
  display: inline-block;
  vertical-align: middle;
  background-image: url(_library/img/asset/gfx_logo_primary_b.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  width: 287px;
  height: 80px; }
  @media screen and (min-width: 760px) {
    .logo_interior {
      background-size: 70%; } }
  @media screen and (min-width: 1080px) {
    .logo_interior {
      background-size: 90%; } }

.style_button {
  -webkit-transition: .125s;
  -moz-transition: .125s;
  -ms-transition: .125s;
  -o-transition: .125s;
  transition: .125s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  font-family: 'Fira Sans', sans-serif;
  vertical-align: middle;
  color: white;
  background: #49afc6;
  padding: 11px 30px;
  font-weight: 400;
  font-size: 14px;
  border: 0;
  margin: auto;
  display: inline-block;
  margin-top: 28px;
  margin-bottom: 54px; }
  .style_button:hover {
    background-color: #3ba3bb; }

.underline {
  width: 40px;
  height: 3px;
  background: #49afc6;
  margin-top: 0px;
  margin-bottom: 15px; }

.separator {
  width: 100%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  height: 5px;
  margin-top: -53px;
  margin-bottom: 54px;
  background: #49afc6; }
  @media screen and (min-width: 760px) {
    .separator {
      margin-top: -58px;
      margin-bottom: 48px; } }
  @media screen and (min-width: 1080px) {
    .separator {
      margin-top: -62px;
      margin-bottom: 46px; } }

.title_primary {
  margin-top: -19px; }
  @media screen and (min-width: 760px) {
    .title_primary {
      margin-top: 0; } }
  @media screen and (min-width: 1080px) {
    .title_primary {
      margin-top: 0; } }

.section_divide {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  height: 400px;
  text-align: center; }
  .section_divide:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%; }
  .section_divide .inner {
    display: inline-block; }
    .section_divide .inner p {
      color: white;
      font-family: lato;
      text-transform: uppercase;
      font-weight: 200;
      letter-spacing: 2px;
      font-size: 16px; }

.section_portfolio {
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  background-color: #161a1d;
  padding-top: 0px;
  padding-bottom: 0px; }
  @media screen and (min-width: 760px) {
    .section_portfolio {
      padding-top: 0px;
      padding-bottom: 0px; } }
  @media screen and (min-width: 1080px) {
    .section_portfolio {
      padding-top: 0px;
      padding-bottom: 0px; } }
  .section_portfolio ul {
    padding: 0;
    background-color: #161a1d; }
    .section_portfolio ul li {
      -webkit-transition: .125s;
      -moz-transition: .125s;
      -ms-transition: .125s;
      -o-transition: .125s;
      transition: .125s;
      position: relative;
      overflow: hidden; }
      .section_portfolio ul li:hover .layer_text {
        opacity: 1; }
        .section_portfolio ul li:hover .layer_text .container_layer_text p.title_project {
          margin-bottom: -20px; }
        .section_portfolio ul li:hover .layer_text .container_layer_text .layer_text_line {
          width: 60px;
          background-color: #49afc6; }
      .section_portfolio ul li:hover .layer_dark {
        background-color: black; }
      .section_portfolio ul li:hover .layer_img_portfolio {
        -webkit-transform: scale(1.025,1.025);
        -moz-transform: scale(1.025,1.025);
        -ms-transform: scale(1.025,1.025);
        -o-transform: scale(1.025,1.025);
        transform: scale(1.025,1.025); }
      .section_portfolio ul li .layer_text {
        -webkit-transition: .125s;
        -moz-transition: .125s;
        -ms-transition: .125s;
        -o-transition: .125s;
        transition: .125s;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 30;
        padding: 20px;
        position: absolute;
        width: 100%;
        height: 100%; }
        .section_portfolio ul li .layer_text:before {
          content: "";
          display: inline-block;
          vertical-align: middle;
          height: 100%; }
        .section_portfolio ul li .layer_text .container_layer_text {
          display: inline-block;
          text-align: center;
          width: 100%;
          vertical-align: middle; }
          .section_portfolio ul li .layer_text .container_layer_text p.title_project {
            -webkit-transition: .25s;
            -moz-transition: .25s;
            -ms-transition: .25s;
            -o-transition: .25s;
            transition: .25s;
            display: inline-block;
            width: 100%;
            color: white;
            font-family: 'Lato', sans-serif;
            font-size: 10px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 2.3px;
            line-height: 1.2;
            margin-bottom: 40px; }
            @media screen and (min-width: 760px) {
              .section_portfolio ul li .layer_text .container_layer_text p.title_project {
                font-size: 17px; } }
            @media screen and (min-width: 1080px) {
              .section_portfolio ul li .layer_text .container_layer_text p.title_project {
                font-size: 22px; } }
          .section_portfolio ul li .layer_text .container_layer_text .layer_text_line {
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -ms-border-radius: 2px;
            -o-border-radius: 2px;
            border-radius: 2px;
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -ms-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            width: 20px;
            height: 2px;
            background-color: #49afc6;
            display: inline-block; }
          .section_portfolio ul li .layer_text .container_layer_text p.location {
            -webkit-transition: .125s;
            -moz-transition: .125s;
            -ms-transition: .125s;
            -o-transition: .125s;
            transition: .125s;
            display: inline-block;
            width: 100%;
            font-family: 'Fira Sans', sans-serif;
            font-style: italic;
            font-size: 10px;
            color: white; }
            @media screen and (min-width: 760px) {
              .section_portfolio ul li .layer_text .container_layer_text p.location {
                font-size: 12px; } }
            @media screen and (min-width: 1080px) {
              .section_portfolio ul li .layer_text .container_layer_text p.location {
                font-size: 14px; } }
          .section_portfolio ul li .layer_text .container_layer_text ul {
            height: 0;
            opacity: 0;
            display: inline-block;
            overflow: auto;
            display: inline-block;
            background-color: transparent; }
            @media screen and (min-width: 1080px) {
              .section_portfolio ul li .layer_text .container_layer_text ul {
                height: initial;
                opacity: 1;
                margin-top: 15px; } }
            .section_portfolio ul li .layer_text .container_layer_text ul li {
              -webkit-box-sizing: content-box;
              -moz-box-sizing: content-box;
              -ms-box-sizing: content-box;
              -o-box-sizing: content-box;
              box-sizing: content-box;
              display: inline-block;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              -ms-border-radius: 50%;
              -o-border-radius: 50%;
              border-radius: 50%;
              -webkit-transition: .25s;
              -moz-transition: .25s;
              -ms-transition: .25s;
              -o-transition: .25s;
              transition: .25s;
              padding: 0;
              margin: 0;
              background-image: url(_library/asset/ico_sprite_badge.svg);
              background-size: 600%;
              background-color: transparent;
              background-position-y: 0px;
              height: 40px;
              width: 40px;
              display: inline-block;
              margin-right: 5px; }
              .section_portfolio ul li .layer_text .container_layer_text ul li:last-child {
                margin-right: 0; }
              .section_portfolio ul li .layer_text .container_layer_text ul li:hover {
                background-position-y: -40px;
                border-color: white; }
      .section_portfolio ul li .layer_dark {
        -webkit-transition: .25s;
        -moz-transition: .25s;
        -ms-transition: .25s;
        -o-transition: .25s;
        transition: .25s;
        z-index: 20;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .95; }
      .section_portfolio ul li .layer_img_portfolio {
        -webkit-transition: .125s;
        -moz-transition: .125s;
        -ms-transition: .125s;
        -o-transition: .125s;
        transition: .125s;
        background: black;
        z-index: 10;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform: scale(1.01,1.01);
        -moz-transform: scale(1.01,1.01);
        -ms-transform: scale(1.01,1.01);
        -o-transform: scale(1.01,1.01);
        transform: scale(1.01,1.01); }

li.xd {
  background-position-x: -1px !important; }

li.id {
  background-position-x: -41px !important; }

li.fed {
  background-position-x: -80px !important; }

li.ur {
  background-position-x: -120px !important; }

li.vd {
  background-position-x: -159px !important; }

li.cs {
  background-position-x: -199px !important; }

/* ————–––––———————— CSS MAIN —–––––——————————— */
.header_interior {
  height: 150px;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -ms-transition: .25s;
  -o-transition: .25s;
  transition: .25s; }
  @media screen and (min-width: 760px) {
    .header_interior {
      height: 285px; } }
  @media screen and (min-width: 1080px) {
    .header_interior {
      height: 360px; }
      .header_interior:hover {
        height: 500px; } }

.header_main {
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: white;
  padding-bottom: 0;
  padding-top: 0; }
  .header_main .container {
    display: inline-block;
    vertical-align: middle; }
    .header_main .container .logo_primary {
      margin-bottom: 23.389355322339vh; }
    .header_main .container .header_introduce {
      font-weight: 600;
      font-family: lato;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #b08838; }
    .header_main .container .header_position {
      line-height: 1;
      margin-bottom: 60px; }
    .header_main .container .header_description {
      font-family: 'Fira Sans', sans-serif;
      color: black;
      border-top: 2px solid #999;
      padding-top: 20px;
      padding-bottom: 22px;
      border-bottom: 2px solid #999;
      margin: 0 auto;
      margin-bottom: 6.513343328336vh; }
    .header_main .container ul {
      display: inline-block; }
      .header_main .container ul li {
        position: relative; }
        .header_main .container ul li:hover p {
          height: initial;
          opacity: 1;
          top: 40px;
          opacity: .8; }
        .header_main .container ul li a {
          display: block;
          width: 100%;
          height: 100%; }
        .header_main .container ul li p {
          height: 0;
          opacity: 0;
          font-family: 'Fira Sans', sans-serif;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          -ms-border-radius: 2px;
          -o-border-radius: 2px;
          border-radius: 2px;
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          font-style: italic;
          width: 100px;
          margin: 0 auto;
          position: absolute;
          font-size: 12px;
          color: white;
          background-color: #161a1d;
          left: -37px;
          top: 50px; }
  @media screen and (min-width: 760px) {
    .header_main .container .logo_primary {
      margin-bottom: 26.003309692671vh; }
    .header_main .container .header_description {
      width: 75%;
      margin-bottom: 11.82963vh; } }
  @media screen and (min-width: 1080px) {
    .header_main .container .logo_primary {
      margin-bottom: 25.386888888889vh; }
    .header_main .container .header_description {
      width: 50%;
      margin-bottom: 10.362vh; } }

.about {
  padding-top: 0;
  padding-bottom: 0; }
  .about .about_upper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 180px;
    width: 100%; }
    @media screen and (min-width: 760px) {
      .about .about_upper {
        height: 250px; } }
    @media screen and (min-width: 1080px) {
      .about .about_upper {
        height: 400px; } }
    .about .about_upper .inner {
      position: relative;
      height: 100%; }
      .about .about_upper .inner .side_buttons, .about .about_upper .inner .email, .about .about_upper .inner .resume {
        font-family: 'Fira Sans', sans-serif;
        -webkit-transition: .125s;
        -moz-transition: .125s;
        -ms-transition: .125s;
        -o-transition: .125s;
        transition: .125s;
        position: absolute;
        background-size: initial;
        display: inline-block;
        background-repeat: no-repeat;
        font-size: 14px;
        font-weight: 500 !important;
        color: white;
        letter-spacing: 2px;
        padding: 10px;
        border: 2px solid transparent;
        padding-top: 7px;
        padding-left: 43px;
        padding-right: 20px; }
        .about .about_upper .inner .side_buttons:hover, .about .about_upper .inner .email:hover, .about .about_upper .inner .resume:hover {
          border: 2px solid white; }
      .about .about_upper .inner .email {
        background-position-x: 10px;
        background-image: url(_library/asset/ico_mail.svg);
        left: -33px;
        top: 59px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg); }
        @media screen and (min-width: 760px) {
          .about .about_upper .inner .email {
            left: -81px; } }
        @media screen and (min-width: 1080px) {
          .about .about_upper .inner .email {
            -webkit-box-shadow: 0 0 3px #222;
            -moz-box-shadow: 0 0 3px #222;
            -ms-box-shadow: 0 0 3px #222;
            -o-box-shadow: 0 0 3px #222;
            box-shadow: 0 0 3px #222;
            left: 160px;
            top: 293px;
            border: 2px solid white; }
            .about .about_upper .inner .email:hover {
              background-color: #161a1d; } }
      .about .about_upper .inner .resume {
        background-position-x: 13px;
        background-image: url(_library/asset/ico_resume.svg);
        right: -41px;
        top: 67px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg); }
        @media screen and (min-width: 760px) {
          .about .about_upper .inner .resume {
            right: -90px; } }
        @media screen and (min-width: 1080px) {
          .about .about_upper .inner .resume {
            -webkit-box-shadow: 0 0 3px #222;
            -moz-box-shadow: 0 0 3px #222;
            -ms-box-shadow: 0 0 3px #222;
            -o-box-shadow: 0 0 3px #222;
            box-shadow: 0 0 3px #222;
            right: inherit;
            top: 301px;
            left: 200px;
            border: 2px solid white; }
            .about .about_upper .inner .resume:hover {
              background-color: #161a1d; } }
  .about .about_below {
    background-color: #f0f0f0;
    padding-bottom: 40px; }
    @media screen and (min-width: 1080px) {
      .about .about_below {
        background-color: white; } }
    .about .about_below .inner:after {
      content: "";
      display: table;
      clear: both; }
    .about .about_below .inner .content_bio {
      text-align: center;
      margin-bottom: 70px; }
      .about .about_below .inner .content_bio .profile_pic {
        -webkit-box-shadow: 0 0 3px #222;
        -moz-box-shadow: 0 0 3px #222;
        -ms-box-shadow: 0 0 3px #222;
        -o-box-shadow: 0 0 3px #222;
        box-shadow: 0 0 3px #222;
        display: inline-block;
        background-image: url(_library/asset/img_profile_pic.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 120px;
        height: 120px;
        border: 2px solid white;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        margin-bottom: 40px;
        margin-top: -90px; }
      .about .about_below .inner .content_bio .name {
        font-family: 'Lato', sans-serif;
        color: #b08838;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px; }
      .about .about_below .inner .content_bio .title {
        font-style: italic;
        font-weight: 300; }
      .about .about_below .inner .content_bio .line_divider {
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        display: inline-block;
        width: 50px;
        background-color: #b08838;
        height: 2px;
        margin-top: 18px;
        margin-bottom: 40px; }
      @media screen and (min-width: 1080px) {
        .about .about_below .inner .content_bio {
          float: left;
          width: 62%;
          margin-right: 5.5%;
          text-align: left; }
          .about .about_below .inner .content_bio .profile_pic {
            display: block;
            text-align: left;
            margin-top: -151px;
            width: 190px;
            height: 190px; }
          .about .about_below .inner .content_bio .name {
            display: block;
            text-align: left; }
          .about .about_below .inner .content_bio .title {
            display: block;
            text-align: left; }
          .about .about_below .inner .content_bio .line_divider {
            display: block;
            text-align: left; }
          .about .about_below .inner .content_bio .paragraph {
            text-align: left; }
            .about .about_below .inner .content_bio .paragraph p {
              display: block;
              text-align: left; } }
    .about .about_below .inner .content_scorecard {
      -webkit-transition: .125s;
      -moz-transition: .125s;
      -ms-transition: .125s;
      -o-transition: .125s;
      transition: .125s;
      text-align: center; }
      .about .about_below .inner .content_scorecard .icon_scorecard {
        display: inline-block;
        background-image: url(_library/asset/icon_scorecard.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 35px;
        height: 35px;
        margin-bottom: 25px; }
      .about .about_below .inner .content_scorecard ul {
        text-align: center;
        padding-bottom: 30px; }
        .about .about_below .inner .content_scorecard ul .section_score_type {
          -webkit-transition: .125s;
          -moz-transition: .125s;
          -ms-transition: .125s;
          -o-transition: .125s;
          transition: .125s;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          -ms-border-radius: 2px;
          -o-border-radius: 2px;
          border-radius: 2px;
          padding-top: 27px;
          padding-bottom: 19px;
          background-color: white;
          width: 32.338208955224%;
          display: inline-block;
          margin-right: 1.492537313433%;
          margin-bottom: 5px; }
          .about .about_below .inner .content_scorecard ul .section_score_type:hover {
            background: #161a1d; }
            .about .about_below .inner .content_scorecard ul .section_score_type:hover .score_amount {
              color: white; }
          .about .about_below .inner .content_scorecard ul .section_score_type:nth-child(3n+3) {
            margin-right: 0; }
          .about .about_below .inner .content_scorecard ul .section_score_type .score_amount {
            font-family: 'Lato', sans-serif;
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 41px;
            color: #161a1d; }
          .about .about_below .inner .content_scorecard ul .section_score_type .score_type {
            font-family: 'Fira Sans', sans-serif;
            font-weight: 400;
            color: #b08838; }
      .about .about_below .inner .content_scorecard p.scorecard_description {
        font-family: 'Fira Sans', sans-serif;
        padding-top: 20px;
        border-top: 1px solid black; }
      @media screen and (min-width: 760px) {
        .about .about_below .inner .content_scorecard ul .section_score_type {
          width: 16.147507788162%;
          margin-right: 0.623052959502%; }
          .about .about_below .inner .content_scorecard ul .section_score_type:nth-child(3n+3) {
            margin-right: 0.623052959502%; }
          .about .about_below .inner .content_scorecard ul .section_score_type:last-child {
            margin-right: 0; } }
      @media screen and (min-width: 1080px) {
        .about .about_below .inner .content_scorecard {
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          -ms-border-radius: 2px;
          -o-border-radius: 2px;
          border-radius: 2px;
          float: left;
          width: 32.5%;
          padding: 35px;
          margin-top: 77px;
          margin-bottom: 77px;
          background-color: #f0f0f0; }
          .about .about_below .inner .content_scorecard:hover {
            background-color: #eaeaea; }
          .about .about_below .inner .content_scorecard ul .section_score_type {
            width: 32.497492163009%;
            margin-right: 1.253918495298%; }
            .about .about_below .inner .content_scorecard ul .section_score_type:nth-child(3n+3) {
              margin-right: 0; } }

.footer {
  text-align: center;
  height: 296px;
  background: url(_library/asset/bg_divide.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0; }
  .footer:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%; }
  .footer a {
    vertical-align: middle;
    display: inline-block;
    font-family: 'Lato', sans-serif;
    padding: 20px 40px;
    text-transform: uppercase;
    border: 2px solid white;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    color: white; }

.copyright {
  text-align: center;
  padding: 0;
  padding: 30px;
  background-color: #161a1d; }
  .copyright p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 200;
    margin: 0 auto;
    color: white; }

.section_interior {
  padding: 0;
  background-color: white; }
  @media screen and (min-width: 1080px) {
    .section_interior {
      background-color: transparent; }
      .section_interior .inner {
        background-color: white; } }
  .section_interior .inner {
    margin: 0 auto;
    width: 93.066666666667%;
    text-align: center;
    padding-bottom: 70px; }
    @media screen and (min-width: 760px) {
      .section_interior .inner {
        width: 84.473684210526%; } }
    @media screen and (min-width: 1080px) {
      .section_interior .inner {
        width: 83.333333333333%; } }
    @media screen and (min-width: 1440px) {
      .section_interior .inner {
        width: 1440px; } }
    @media screen and (min-width: 1080px) {
      .section_interior .inner {
        -webkit-border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        -ms-border-radius: 3px 3px 0 0;
        -o-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
        padding-bottom: 0; } }
    .section_interior .inner .interior_body {
      -webkit-transition: .5s;
      -moz-transition: .5s;
      -ms-transition: .5s;
      -o-transition: .5s;
      transition: .5s; }
      @media screen and (min-width: 1080px) {
        .section_interior .inner .interior_body {
          margin-top: -170px;
          padding: 5%; } }
      .section_interior .inner .interior_body .body_nav {
        margin-top: 33px;
        height: 45px; }
        .section_interior .inner .interior_body .body_nav:after {
          content: "";
          display: table;
          clear: both; }
        @media screen and (min-width: 760px) {
          .section_interior .inner .interior_body .body_nav {
            margin-top: 63px; } }
        @media screen and (min-width: 1080px) {
          .section_interior .inner .interior_body .body_nav {
            margin-top: 0; } }
        .section_interior .inner .interior_body .body_nav .nav_text, .section_interior .inner .interior_body .body_nav .nav_prev, .section_interior .inner .interior_body .body_nav .nav_next {
          position: relative;
          -webkit-transition: .125s;
          -moz-transition: .125s;
          -ms-transition: .125s;
          -o-transition: .125s;
          transition: .125s; }
          .section_interior .inner .interior_body .body_nav .nav_text p, .section_interior .inner .interior_body .body_nav .nav_prev p, .section_interior .inner .interior_body .body_nav .nav_next p {
            -webkit-transition: .125s;
            -moz-transition: .125s;
            -ms-transition: .125s;
            -o-transition: .125s;
            transition: .125s;
            font-family: 'Fira Sans', sans-serif;
            display: inline-block;
            font-weight: 500;
            line-height: 1.3;
            opacity: 0; }
            @media screen and (min-width: 760px) {
              .section_interior .inner .interior_body .body_nav .nav_text p, .section_interior .inner .interior_body .body_nav .nav_prev p, .section_interior .inner .interior_body .body_nav .nav_next p {
                opacity: 1.0; } }
          .section_interior .inner .interior_body .body_nav .nav_text div, .section_interior .inner .interior_body .body_nav .nav_prev div, .section_interior .inner .interior_body .body_nav .nav_next div {
            -webkit-transition: .125s;
            -moz-transition: .125s;
            -ms-transition: .125s;
            -o-transition: .125s;
            transition: .125s;
            position: absolute;
            background-image: url(_library/asset/ico_nav_arrows.svg);
            background-repeat: no-repeat;
            background-size: 200%;
            width: 12px;
            height: 20px;
            opacity: 1.0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_nav .nav_text div, .section_interior .inner .interior_body .body_nav .nav_prev div, .section_interior .inner .interior_body .body_nav .nav_next div {
              opacity: 0; }
            .section_interior .inner .interior_body .body_nav .nav_text:hover div, .section_interior .inner .interior_body .body_nav .nav_prev:hover div, .section_interior .inner .interior_body .body_nav .nav_next:hover div {
              -webkit-transition: .5s;
              -moz-transition: .5s;
              -ms-transition: .5s;
              -o-transition: .5s;
              transition: .5s;
              opacity: 1.0; } }
        .section_interior .inner .interior_body .body_nav .nav_prev {
          float: left; }
          .section_interior .inner .interior_body .body_nav .nav_prev div {
            margin-right: 5px;
            left: 10px; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_nav .nav_prev:hover {
              padding-left: 25px; }
              .section_interior .inner .interior_body .body_nav .nav_prev:hover div {
                left: 0px; } }
        .section_interior .inner .interior_body .body_nav .nav_next {
          float: right; }
          .section_interior .inner .interior_body .body_nav .nav_next div {
            background-position-x: 100%;
            right: 10px; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_nav .nav_next:hover {
              padding-right: 25px; }
              .section_interior .inner .interior_body .body_nav .nav_next:hover div {
                right: 0px; } }
      .section_interior .inner .interior_body .body_content {
        text-align: center;
        margin-top: -20px; }
        .section_interior .inner .interior_body .body_content ul {
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          -ms-border-radius: 3px;
          -o-border-radius: 3px;
          border-radius: 3px;
          overflow: hidden; }
        .section_interior .inner .interior_body .body_content .content_avatar {
          -webkit-box-shadow: 0 0 3px #222;
          -moz-box-shadow: 0 0 3px #222;
          -ms-box-shadow: 0 0 3px #222;
          -o-box-shadow: 0 0 3px #222;
          box-shadow: 0 0 3px #222;
          -webkit-transition: .5s;
          -moz-transition: .5s;
          -ms-transition: .5s;
          -o-transition: .5s;
          transition: .5s;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          -ms-border-radius: 2px;
          -o-border-radius: 2px;
          border-radius: 2px;
          display: inline-block;
          background-color: #161a1d;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 140px;
          height: 140px;
          margin-top: -153px; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content .content_avatar {
              width: 200px;
              height: 200px;
              margin-top: -181px; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content .content_avatar {
              width: 215px;
              height: 215px;
              margin-top: -173px; } }
        .section_interior .inner .interior_body .body_content .content_title h1 {
          font-family: 'Lato', sans-serif;
          font-size: 21px;
          margin-top: 30px;
          font-weight: 600 !important;
          color: #161a1d;
          margin-bottom: -1px;
          line-height: 34px;
          letter-spacing: 4px;
          margin-bottom: 7px; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content .content_title h1 {
              font-size: 27px; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content .content_title h1 {
              font-size: 28px; } }
        .section_interior .inner .interior_body .body_content .content_title p {
          font-family: 'Fira Sans', sans-serif;
          margin-bottom: 18px; }
        .section_interior .inner .interior_body .body_content .content_bar {
          display: inline-block;
          width: 100px;
          height: 3px;
          background-color: #b08838;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          -ms-border-radius: 2px;
          -o-border-radius: 2px;
          border-radius: 2px;
          margin-bottom: 30px; }
        .section_interior .inner .interior_body .body_content .content_personal p {
          font-weight: 400;
          margin-bottom: 40px; }
        .section_interior .inner .interior_body .body_content a.linker_top, .section_interior .inner .interior_body .body_content a.linker_bottom {
          display: block;
          font-family: 'Fira Sans', sans-serif;
          text-transform: uppercase;
          font-size: 13px;
          font-weight: 500;
          color: #b08838; }
        .section_interior .inner .interior_body .body_content a.linker_bottom {
          margin-bottom: 40px;
          display: block;
          padding: 20px 0;
          border-bottom: 2px solid black;
          border-top: 2px dotted black; }
        .section_interior .inner .interior_body .body_content ul.study {
          margin-bottom: 40px; }
          .section_interior .inner .interior_body .body_content ul.study:after {
            content: "";
            display: table;
            clear: both; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.study {
              text-align: left; }
              .section_interior .inner .interior_body .body_content ul.study h2 {
                text-align: left; }
              .section_interior .inner .interior_body .body_content ul.study p {
                text-align: left; } }
          .section_interior .inner .interior_body .body_content ul.study li {
            float: left;
            margin-top: 40px; }
            @media screen and (min-width: 760px) {
              .section_interior .inner .interior_body .body_content ul.study li {
                margin-top: 0; } }
            .section_interior .inner .interior_body .body_content ul.study li p {
              font-size: 14px;
              color: #8c8c8c; }
            .section_interior .inner .interior_body .body_content ul.study li:hover h2 {
              border-top: 2px black solid;
              color: #161a1d; }
            .section_interior .inner .interior_body .body_content ul.study li:hover div {
              opacity: 1; }
            .section_interior .inner .interior_body .body_content ul.study li:hover p {
              color: #161a1d; }
          .section_interior .inner .interior_body .body_content ul.study div {
            -webkit-transition: .125s;
            -moz-transition: .125s;
            -ms-transition: .125s;
            -o-transition: .125s;
            transition: .125s;
            display: inline-block;
            width: 3px;
            height: 20px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -ms-border-radius: 2px;
            -o-border-radius: 2px;
            border-radius: 2px;
            background-color: #b08838;
            margin: 10px 0px;
            opacity: 0; }
          .section_interior .inner .interior_body .body_content ul.study .description, .section_interior .inner .interior_body .body_content ul.study .description_situation h2, .section_interior .inner .interior_body .body_content ul.study .description_approach h2, .section_interior .inner .interior_body .body_content ul.study .description_experience h2 {
            font-family: 'Fira Sans', sans-serif;
            text-transform: uppercase;
            color: #b08838;
            font-size: 14px;
            letter-spacing: 2.5px;
            font-weight: 600;
            border-top: 2px dotted black;
            padding-bottom: 0px; }
            @media screen and (min-width: 760px) {
              .section_interior .inner .interior_body .body_content ul.study .description, .section_interior .inner .interior_body .body_content ul.study .description_situation h2, .section_interior .inner .interior_body .body_content ul.study .description_approach h2, .section_interior .inner .interior_body .body_content ul.study .description_experience h2 {
                padding-top: 27px; } }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.study .description_situation p {
              margin-bottom: 40px; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.study .description_situation {
              width: 31.481481481481%;
              margin-right: 2.777777777778%;
              margin-bottom: 0;
              display: inline-block; } }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.study .description_approach {
              display: inline-block;
              width: 47.663551401869%;
              margin-right: 4.672897196262%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.study .description_approach {
              width: 31.481481481481%;
              margin-right: 2.777777777778%; } }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.study .description_experience {
              display: inline-block;
              width: 47.663551401869%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.study .description_experience {
              width: 31.481481481481%;
              margin-right: 0; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_1_1:after {
          content: "";
          display: table;
          clear: both; }
        .section_interior .inner .interior_body .body_content ul.grid_1_1_1 li {
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          background: white;
          float: left !important;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_1_1 li {
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_1_1 li {
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_1_1 li {
          height: 210px;
          width: 100%; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_1_1 li {
              width: 100%;
              height: 316px;
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_1_1 li {
              width: 100%;
              height: 600px;
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_2_2:after {
          content: "";
          display: table;
          clear: both; }
        .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li {
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          background: white;
          float: left !important;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li {
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li {
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li {
          height: 210px;
          width: 100%; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li {
              height: 210px;
              width: 50%; }
              .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li:nth-child(2n+2) {
                margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li {
              height: 373px;
              width: 50%; }
              .section_interior .inner .interior_body .body_content ul.grid_1_2_2 li:nth-child(2n+2) {
                margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_3_3:after {
          content: "";
          display: table;
          clear: both; }
        .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li {
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          background: white;
          float: left !important;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li {
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li {
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li {
          height: 210px;
          width: 100%; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li {
              height: 203px;
              width: 33.33333333333333%; }
              .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li:nth-child(3n+3) {
                margin-right: 0; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li {
              height: 273px;
              width: 33.33333333333333%; }
              .section_interior .inner .interior_body .body_content ul.grid_1_3_3 li:nth-child(3n+3) {
                margin-right: 0; } }
        .section_interior .inner .interior_body .body_content ul.grid_2_2_2:after {
          content: "";
          display: table;
          clear: both; }
        .section_interior .inner .interior_body .body_content ul.grid_2_2_2 li {
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          background: white;
          float: left !important;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_2_2 li {
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_2_2 li {
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_2_2_2 li {
          height: 150px;
          width: 50%;
          margin-right: 0; }
          .section_interior .inner .interior_body .body_content ul.grid_2_2_2 li:nth-child(2n+2) {
            margin-right: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_2_2 li {
              height: 210px;
              width: 50%;
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_2_2 li {
              height: 373px;
              width: 50%;
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_2_3:after {
          content: "";
          display: table;
          clear: both; }
        .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li {
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          background: white;
          float: left !important;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li {
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li {
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li {
          height: 210px;
          width: 100%; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li {
              height: 210px;
              width: 50%; }
              .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li:nth-child(2n+2) {
                margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li {
              height: 273px;
              width: 33.33333333333333%; }
              .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li:nth-child(2n+2) {
                margin-right: 0%; }
              .section_interior .inner .interior_body .body_content ul.grid_1_2_3 li:nth-child(3n+3) {
                margin-right: 0; } }
        .section_interior .inner .interior_body .body_content ul.grid_2_3_3:after {
          content: "";
          display: table;
          clear: both; }
        .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li {
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          background: white;
          float: left !important;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li {
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li {
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li {
          height: 150px;
          width: 50%;
          margin-right: 0; }
          .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li:nth-child(2n+2) {
            margin-right: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li {
              height: 203px;
              width: 33.33333333333333%;
              margin-right: 0%; }
              .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li:nth-child(2n+2) {
                margin-right: 0%; }
              .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li:nth-child(3n+3) {
                margin-right: 0; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li {
              height: 273px;
              width: 33.33333333333333%;
              margin-right: 0%; }
              .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li:nth-child(2n+2) {
                margin-right: 0%; }
              .section_interior .inner .interior_body .body_content ul.grid_2_3_3 li:nth-child(3n+3) {
                margin-right: 0; } }
        .section_interior .inner .interior_body .body_content ul.grid_3_3_4:after {
          content: "";
          display: table;
          clear: both; }
        .section_interior .inner .interior_body .body_content ul.grid_3_3_4 li {
          -webkit-transition: .25s;
          -moz-transition: .25s;
          -ms-transition: .25s;
          -o-transition: .25s;
          transition: .25s;
          background: white;
          float: left !important;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-bottom: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_3_3_4 li {
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_3_3_4 li {
              margin-right: 0%; } }
        .section_interior .inner .interior_body .body_content ul.grid_3_3_4 li {
          height: 123px;
          width: 33.33333333333333%;
          margin-right: 0; }
          @media screen and (min-width: 760px) {
            .section_interior .inner .interior_body .body_content ul.grid_3_3_4 li {
              height: 203px;
              width: 33.33333333333333%;
              margin-right: 0%; } }
          @media screen and (min-width: 1080px) {
            .section_interior .inner .interior_body .body_content ul.grid_3_3_4 li {
              height: 260px;
              width: 25%;
              margin-right: 0%; } }
          @media screen and (min-width: 1440px) {
            .section_interior .inner .interior_body .body_content ul.grid_3_3_4 li {
              height: 350px;
              width: 25%; } }

.livesite {
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  margin-top: 30px;
  border: 2px solid black;
  color: white;
  background: black;
  display: inline-block;
  padding: 10px 20px; }
  .livesite:hover {
    background-color: transparent;
    color: black; }