/* - - - Element - - - */

/* body */
body {
  color:#000;
  font-family:Georgia, serif;
  font-size:18px; font-style:normal; font-weight:normal;
  hyphens:auto; word-wrap:break-word;
  letter-spacing:0; line-height:30px;
    background-color:#fff;
    background-position:center; background-repeat:repeat; background-size:auto;
    width:100%; height:100%;
      margin:0; padding:0;
      overflow-x:hidden; overflow-y:scroll;
}

/* body */
body, .menu.head.top {
  width:1280px;
    margin:0 auto;
}

/* figure, object */
figure, object {
  line-height:0;
    width:100%;
      margin:0; padding:0;
}
figure image, object image,
figure img, object img {
  width:100%;
}

/* - - - Inline - - - */

/* active */
a {
  color:#1777ff;
  text-decoration:none;
    cursor:hand; cursor:pointer;
}

/* bold */
b, strong {
  font-weight:700;
}

/* italic */
em, i {
  font-style:italic;
}

/* heading */
h1 {
  font-family:'Montserrat', Helvetica, sans-serif;
	font-size:90px; font-style:italic; font-weight:900;
  letter-spacing:0; line-height:90px;
    margin:0; padding:0;
}
h2 {
  font-family:'Montserrat', Helvetica, sans-serif;
	font-size:40px; font-style:italic; font-weight:900;
  letter-spacing:0; line-height:40px;
    margin:0; padding:0;
}

/* hr */
hr {
  background-color:rgba(0, 0, 0, 0.2);
  width:100%; height:1px;
    border:none;
    margin:0; padding:0;
}

/* image, img, svg */
image, img, svg {
  display:inline-block;
}
image.blue, img.blue,
image.green, img.green,
image.red, img.red,
image.white, img.white,
image.yellow, img.yellow {
  display:none;
}
svg g {
  fill:#000;
}

/* paragraph */
p {
  text-align:justify; text-justify:inter-word;
    margin:0; padding:0;
}

/* placeholder */
:-ms-input-placeholder {
  color:rgba(0, 0, 0, 0.3);
}
::-webkit-input-placeholder {
  color:rgba(0, 0, 0, 0.3);
}
::placeholder {
  color:rgba(0, 0, 0, 0.3);
}

/* quote */
q {
  font-style:italic;
  quotes:'\201C' '\201D' '\2018' '\2019';
}

/* sub */
sub {
  font-size:14px;
  vertical-align:sub;
}

/* super */
sup {
  font-size:14px;
  vertical-align:super;
    margin:0 3px 0 1px;
}

/* - - - Division - - - */

/* .button */
.button {
  color:#1777ff;
    cursor:hand; cursor:pointer;
    display:inline-block;
    position:relative;
}
.button.border {
  background-color:rgba(255, 255, 255, 1);
  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
    top:-1px;
}
.button a {
  font-size:0;
    width:100%; height:100%;
      position:absolute;
      top:0; left:0;
}
.button image.black,
.button img.black {
  display:none;
}
.button image.blue,
.button img.blue {
  display:inline-block;
}
.button svg g {
  fill:#1777ff;
}
.button .on {
  display:none;
}

/* .test */
.test {
  font-family:'Lucida Console', Monaco, monospace;
  font-size:14px;
  line-height:14px;
    background-color:#fbd04f;
    width:400px;
    z-index:1000;
      box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.25);
      padding:20px;
      position:fixed;
      top:40px; left:40px;
}
.test.right {
left:auto; right:40px;
}
.test.bottom {
  top:auto; bottom:40px;
}
.test p {
  text-align:left;
}
.test p + p {
  margin-top:18px;
}

/* .title */
.title {
  border-bottom:1px solid rgba(0, 0, 0, 0.2);
  padding-bottom:35px;
}

/* - - - Responsive - - - */

/* battle station */
@media screen and (min-width:2160px) {
  body, .menu.head.top {font-size:21px; line-height:35px; width:1920px;}
  h1 {font-size:130px; line-height:130px;}
  h2 {font-size:90px; line-height:90px;}
}

/* laptop */
@media screen and (max-width:1439px) {
  body, .menu.head.top {width:89%;}
}

/* tablet */
@media screen and (min-width:1080px) {
  .mobile {display:none !important;}
}
@media screen and (max-width:1079px) {
  .desktop {display:none !important;}
  body, .menu.head.top {width:90%;}
}

/* mobile */
@media screen and (max-width:799px) {
  body {font-size:16px; line-height:25px;}
  h1 {font-size:40px; line-height:44px;}
  h2 {font-size:32px; line-height:34px;}
  figure.head, object.head {padding-bottom:20px}
  .title {padding-bottom:25px;}
}

/* nokia */
@media screen and (max-width:299px) {
  body, .menu.head.top {width:99%;}
}

/* - - - Exception - - - */

/* desktop */
@media screen and (pointer:fine) and (min-width:800px)  {

  /* active */
  a:active, a:hover {
    color:rgba(0, 0, 0, 0.3);
  }

  /* .button */
  .button:hover {
    color:rgba(0, 0, 0, 0.3);
  }
  .button.border:hover {
    background-color:rgba(255, 255, 255, 0);
    box-shadow:0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 1px rgba(0, 0, 0, 0.2);
      top:0px;
  }
  .button:hover image.black,
  .button:hover img.black {
    display:inline-block;
    opacity:0.3;
  }
  .button:hover image.blue,
  .button:hover img.blue {
    display:none;
  }
  .button:hover svg g {
    fill:rgba(0, 0, 0, 0.3);
  }

}

/* - - - Animation - - - */

/* active, .button */
a, .button {
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    top 0.05s ease-in-out;
  -o-transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    top 0.05s ease-in-out;
  -ms-transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    top 0.05s ease-in-out;
  -moz-transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    top 0.05s ease-in-out;
  -webkit-transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    top 0.05s ease-in-out;
}

/* image, img, svg */
svg g {
  transition:fill 0.15s ease-in-out;
  -o-transition:fill 0.15s ease-in-out;
  -ms-transition:fill 0.15s ease-in-out;
  -moz-transition:fill 0.15s ease-in-out;
  -webkit-transition:fill 0.15s ease-in-out;
}