@charset "UTF-8";
/* -----------------------------------

CSS Table OF CONTENTS*

#GLOBAL CSS 
#TYPOGRAPHY
  #BODY
  #HEADINGS
  #LINKS
  #HORIZONTAL RULE
  #HELPER
  #TYPE SPECIMEN
  #TYPOGRAPHY
  #LINKS
#BOTTUNS
#MEDIA
  #IMG
#LAYOUT
#MEDIA
  #IMG
#LAYOUT
  #MEDIA QUERIRE
   #CONTAINER
   #RESPONSIVE TYPE
#GRID
  #


  ----------------------------------------------- */
/* BODY */
body {
  font-family: "miller-banner, serif";
  font-size: 100%;
  line-height: 1.4em;
  color: black; }

/* HEADINGS */
h1, h2, h3 {
  font-family: "cronos-pro, sans-serif";
  margin: .5em 0;
  font-weight: 400; }

h1 {
  font-size: 3em;
  line-height: 1; }

h2 {
  font-size: 2em;
  line-height: 1.1; }

h3 {
  font-size: 1.5em;
  line-height: 1.2; }

p {
  max-width: 35em; }

/* LINKS */
a {
  color: #fff; }

a:hover {
  color: #5dac3e; }

/* HORIZONTAL RULE */
hr {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  margin: 4em 0; }

/* HELPER */
.sectionhead {
  font-family: "miller-banner, serif";
  text-align: center;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .2em; }

.sectionhead:after {
  display: block;
  content: "";
  width: 50px;
  border: 4px solid #d83a89;
  margin: 1em auto 6em auto; }

.meta {
  font-size: .8em;
  margin: 0 0 2em 0; }

/* Type Specimen */
.mainhead {
  font-size: 6em;
  color: #d83a89;
  margin-bottom: 0; }

.subhead {
  margin-bottom: 1em; }

/* BUTTONS */
button,
.button {
  font-size: inherit;
  font-family: "miller-banner, serif";
  background-color: #fff;
  line-height: 1;
  color: #fff;
  padding: 1em 2em;
  display: inline-block;
  margin: .5em;
  border: 1px solid #fff;
  border-radius: .5em;
  cursor: pointer;
  text-decoration: none; }
  button:hover,
  .button:hover {
    background-color: #5dac3e;
    color: #fff;
    border-color: #5dac3e; }
  button.alt,
  .button.alt {
    color: #5dac3e;
    background-color: #fff; }
    button.alt:hover,
    .button.alt:hover {
      background-color: #5dac3e;
      color: #fff;
      border-color: #5dac3e; }
  button.dark,
  .button.dark {
    color: #fff;
    background-color: transparent;
    border-color: #fff; }
    button.dark:hover,
    .button.dark:hover {
      background-color: #fff;
      color: #000; }

/* Responsive Images */
img {
  max-width: 100%;
  height: auto; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  height: 100%; }

body {
  font-size: 87.5%;
  margin: 0; }

.container {
  padding: 0 4%;
  margin: 0 auto; }

@media (min-width: 768px) {
  body {
    font-size: 100%; } }

@media (min-width: 1050px) {
  .container {
    max-width: 1050px; } }

@media (min-width: 1250px) {
  body {
    font-size: 112.5%; }
  .container {
    max-width: 1250px; } }

/* GRID */
.row .column {
  margin-bottom: 2%; }

@media (min-width: 768px) {
  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: -1%;
    margin-right: -1%; }
    .row.swap {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }
    .row.center {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .row .column {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      margin: 1%; }
      .row .column.one-half {
        width: 48%; }
      .row .column.one-third {
        width: 31.3333%; }
      .row .column.two-thirds {
        width: 64.6666%; }
      .row .column.one-fourth {
        width: 23%; }
      .row .column.one-fifth {
        width: 18%; } }

.container {
  margin: 0; }

body {
  background-color: #bef1f5; }

/* site header and footer */
.site-header, .site-footer {
  background-color: white;
  padding: 1em;
  color: #36c4d6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .site-header h1, .site-footer h1 {
    font-family: #36c4d6;
    font-size: 1.5em;
    margin: .5em 0 0 0;
    /* to adjust baseline with nav text */ }
  .site-header a, .site-footer a {
    color: #36c4d6;
    text-decoration: none; }

/* SITE HEADER */
.site-header {
  background-color: white;
  position: absolute;
  width: 100%; }

/* SITE FOOTER */
.site-footer {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #fff; }

/* SITE NAVIGATION */
.site-header .site-nav {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease; }
  .site-header .site-nav ul {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    list-style: none; }
  .site-header .site-nav li {
    opacity: 0;
    font-size: 2em;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }
  .site-header .site-nav a {
    color: white;
    display: block;
    padding: .5em; }
  .site-header .site-nav.active {
    position: fixed;
    height: 100%;
    z-index: 100;
    background: #058d8d;
    color: #fff; }
    .site-header .site-nav.active ul {
      top: 50%; }
    .site-header .site-nav.active li {
      -webkit-transition: all .4s ease-out;
      -o-transition: all .4s ease-out;
      transition: all .4s ease-out;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
      color: white; }
      .site-header .site-nav.active li:nth-child(1) {
        -webkit-transition-delay: 0;
        -o-transition-delay: 0;
        transition-delay: 0; }
      .site-header .site-nav.active li:nth-child(2) {
        -webkit-transition-delay: .2s;
        -o-transition-delay: .2s;
        transition-delay: .2s; }
      .site-header .site-nav.active li:nth-child(3) {
        -webkit-transition-delay: .4s;
        -o-transition-delay: .4s;
        transition-delay: .4s; }
      .site-header .site-nav.active li:nth-child(4) {
        -webkit-transition-delay: .6s;
        -o-transition-delay: .6s;
        transition-delay: .6s; }

.site-footer .site-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none; }

.site-footer .site-nav a {
  display: block;
  padding: 1em; }

/* Menu Button */
.menu-button {
  position: absolute;
  top: 2em;
  right: 2em;
  cursor: pointer;
  z-index: ２00; }

.menu-button.navicon {
  font-size: 1.5em;
  top: 1em;
  right: 1em;
  line-height: .75;
  text-align: center;
  width: 1em;
  height: 1em;
  overflow: hidden; }
  .menu-button.navicon:before {
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "\2630";
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0); }

.active .menu-button.navicon:before {
  content: "\2715";
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition: .4s all ease-out;
  -o-transition: .4s all ease-out;
  transition: .4s all ease-out; }

section {
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.mainhead {
  font-size: 1.2em;
  color: #36c4d6;
  margin-top: 0;
  padding-top: 50px; }

/* Hero Sections */
.hero .container {
  margin: 0;
  width: 100%; }

.hero {
  margin-top: 0;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .hero .container {
    margin: 100px auto 0;
    position: relative;
    padding: 0; }
    .hero .container h2, .hero .container p {
      padding-left: 20%; }
    .hero .container h2 {
      font-size: 8em;
      font-size: 8vw;
      margin: 0;
      color: #36c4d6;
      font-family: "cronos-pro, sans-serif"; }
    .hero .container p {
      color: #36c4d6;
      max-width: 50%; }

/* CIRCLES */
.half-circles {
  width: 100%;
  padding: 25% 0 2% 0; }
  .half-circles .circle1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background: #058d8d;
    z-index: -1;
    bottom: 0; }
  .half-circles .circle2 {
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background: #36c4d6;
    z-index: -1;
    bottom: 0; }
  .half-circles .circle3 {
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background: #8ff0f3;
    z-index: -1;
    bottom: 0; }
  .half-circles .circle4 {
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background: white;
    z-index: -1;
    bottom: 0; }

/* Layout section */
#works h3.mainhead {
  text-align: center; }

#works .container {
  margin: 0 auto; }
  #works .container h3 img {
    text-align: center; }
  @media (min-width: 768px) {
    #works .container .row-subjects {
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%; }
      #works .container .row-subjects .column {
        margin: 20px; }
      #works .container .row-subjects .column:nth-child(even) {
        padding-top: 200px; } }

/* ABOUT ME SECTION */
section {
  margin-top: 0; }

#about .container {
  margin: 0 auto;
  width: 100%; }

#about {
  margin-top: 0;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  #about .container {
    margin: 0 auto;
    position: relative;
    padding: 0; }
    #about .container h2 {
      font-size: 2em;
      margin: 0;
      padding-left: 20%;
      padding-top: 20px;
      color: #36c4d6; }
    #about .container p {
      padding-left: 20%; }
      #about .container p img {
        border-radius: 50%; }
    @media (min-width: 768px) {
      #about .container .half-circles {
        width: 100%;
        padding: 2% 0 25% 0; }
      #about .container .circle5 {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 0 0 50% 50%/0 0 100% 100%;
        background: #058d8d;
        z-index: -1;
        top: 0; }
      #about .container .circle6 {
        position: absolute;
        width: 90%;
        height: 90%;
        border-radius: 0 0 50% 50%/0 0 100% 100%;
        background: #36c4d6;
        z-index: -1;
        top: 0; }
      #about .container .circle7 {
        position: absolute;
        width: 80%;
        height: 80%;
        border-radius: 0 0 50% 50%/0 0 100% 100%;
        background: #8ff0f3;
        z-index: -1;
        top: 0; }
      #about .container .circle8 {
        position: absolute;
        width: 70%;
        height: 70%;
        border-radius: 0 0 50% 50%/0 0 100% 100%;
        background: white;
        z-index: -1;
        top: 0; } }

/* PRINT PAGE */
@media (min-width: 768px) {
  #print {
    min-height: 100vh;
    background: #000;
    color: gray;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 60% 40%;
    grid-template-columns: 60% 40%; }
    #print .split-box {
      height: 100%;
      margin-top: 150px;
      margin-bottom: 0; }
    #print .split-box:first-child {
      background: #fff; }
    #print .split-box:last-child {
      background: #000; }
      #print .split-box:last-child .brandlogo h2 {
        text-decoration: none;
        padding: 0 .3em;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, yellow));
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 50%, yellow 50%);
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 50%, yellow 50%);
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, yellow 50%);
        background-position: 0 0;
        background-size: 200% auto;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); }
      #print .split-box:last-child h2 a {
        text-decoration: none;
        padding: 0 .3em;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, yellow));
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 50%, yellow 50%);
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 50%, yellow 50%);
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, yellow 50%);
        background-position: 0 0;
        background-size: 200% auto;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); }
      #print .split-box:last-child h2 a:hover {
        background-position: -100% 0;
        color: #fff;
        -webkit-animation: big 0.1s;
        animation: big 0.1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(2.1);
        transform: scale(2.1); }
      #print .split-box:last-child h2 a:active {
        -webkit-animation: small 0.1s;
        animation: small 0.1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards; } }

/* PICTOGRAM PAGE */
.pictgrams img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

/* SCROLL TRIGGERED ANIMATION VIA SCROLLOUT */
[data-scroll] {
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s; }

[data-scroll="in"] {
  opacity: 1; }

[data-scroll="out"] {
  opacity: 0; }

[data-scroll].split-crossed-left .image-block,
[data-scroll].split-crossed-left .text-block {
  -webkit-transition: 1s -webkit-transform ease-out;
  transition: 1s -webkit-transform ease-out;
  -o-transition: 1s transform ease-out;
  transition: 1s transform ease-out;
  transition: 1s transform ease-out, 1s -webkit-transform ease-out; }

[data-scroll="in"].split-crossed-left .image-block {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); }

[data-scroll="in"].split-crossed-left .text-block {
  -webkit-transform: translateX(-2em);
  -ms-transform: translateX(-2em);
  transform: translateX(-2em); }

[data-scroll="out"].split-crossed-left .image-block {
  -webkit-transform: translateX(2em);
  -ms-transform: translateX(2em);
  transform: translateX(2em); }

[data-scroll].split-crossed-left .text-block {
  -webkit-transform: translateX(-4em);
  -ms-transform: translateX(-4em);
  transform: translateX(-4em); }

[data-scroll].split-crossed-reversed .image-block,
[data-scroll].split-crossed-reversed .text-block {
  -webkit-transition: 1s ease-out transform;
  -o-transition: 1s ease-out transform;
  transition: 1s ease-out transform; }

[data-scroll="in"].split-crossed-reversed .image-block {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); }

[data-scroll="in"].split-crossed-reversed .text-block {
  -webkit-transform: translateX(-2em);
  -ms-transform: translateX(-2em);
  transform: translateX(-2em); }

[data-scroll="out"].split-crossed-reversed .image-block {
  -webkit-transform: translateX(2m);
  -ms-transform: translateX(2m);
  transform: translateX(2m); }

[data-scroll].split-crossed-reversed .text-block {
  -webkit-transform: translateX(-4em);
  -ms-transform: translateX(-4em);
  transform: translateX(-4em); }