html {
font-family: sans-serif;
-ms-text-size-adjust: 100%
}
body {
margin: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block
}
audio, canvas, progress, video {
vertical-align: baseline
}
a {
background: transparent
}
a:active, a:hover {
outline: 0
}
b, strong {
font-weight: 700
}
h1 {
margin: .67em 0;
font-size: 2em
}
mark {
background: #ff0
}
img {
border: 0
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-size: 1em
}
button, input, optgroup, select, textarea {
margin: 0;
color: inherit
}
button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding: 0;
border: 0
}
input {
line-height: normal
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
height: auto
}
input[type=search] {
box-sizing: content-box;
-webkit-appearance: textfield
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
margin: 0 2px;
padding: .35em .625em .75em;
border: 1px solid silver
}
legend, td, th {
padding: 0
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
vertical-align: baseline;
margin: 0;
padding: 0;
font: inherit;
font-size: 100%;
border: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
display: block
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
content: ""
}
table {
border-collapse: collapse;
border-spacing: 0
}
button, input {
font: inherit
}
.mac button, .mac input {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: antialiased
}
button {
cursor: pointer
}
/*!
* ress.css • v1.0.1
* MIT License
* github.com/filipelinhares/ress
*/
html {
height: 100%;
overflow-y: scroll;
box-sizing: border-box;
-webkit-text-size-adjust: 100%
}
*, :after, :before {
position: relative;
box-sizing: inherit;
outline: none
}
:after, :before {
vertical-align: inherit;
text-decoration: inherit
}
* {
margin: 0;
padding: 0;
background-repeat: no-repeat
}
audio:not([controls]) {
display: none;
height: 0
}
hr {
overflow: visible
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block
}
small {
font-size: 80%
}
[hidden], template {
display: none
}
abbr[title] {
text-decoration: none;
border-bottom: 1px dotted
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active, a:hover {
outline-width: 0
}
code, kbd, pre, samp {
font-family: monospace, monospace
}
b, strong {
font-weight: bolder
}
dfn {
font-style: italic
}
mark {
color: #000;
background-color: #ff0
}
sub, sup {
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
input {
border-radius: 0
}
[type=number] {
width: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
textarea {
overflow: auto;
resize: vertical
}
button, input, optgroup, select, textarea {
font: inherit
}
optgroup {
font-weight: 700
}
button {
overflow: visible
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
padding: 0;
border-style: 0
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
outline: 1px dotted ButtonText
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button
}
button, select {
text-transform: none
}
button, input, select, textarea {
color: inherit;
background-color: transparent;
border-style: none
}
select {
-moz-appearance: none;
-webkit-appearance: none
}
select::-ms-expand {
display: none
}
select::-ms-value {
color: currentColor
}
legend {
display: table;
max-width: 100%;
white-space: normal;
color: inherit;
border: 0
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button
}
::-webkit-input-placeholder {
color: inherit;
opacity: .54
}
img {
border-style: none
}
progress {
vertical-align: baseline
}
svg:not(:root) {
overflow: hidden
}
audio, canvas, progress, video {
display: inline-block
}
@media screen {
[hidden~=screen] {
display: inherit
}
[hidden~=screen]:not(:active):not(:focus):not(:target) {
position: absolute!important;
clip: rect(0 0 0 0)!important
}
}
[aria-busy=true] {
cursor: progress
}
[aria-controls] {
cursor: pointer
}
[aria-disabled] {
cursor: default
}
::-moz-selection {
text-shadow: none;
color: #fff;
background: #000
}
::selection {
text-shadow: none;
color: #fff;
background: #000
}
a {
color: inherit;
text-decoration: none
}
.right {
float: right
}
.left {
float: left
}
.cf:after {
content: "";
display: table;
clear: both
}
.d-table {
display: table;
width: 100%;
height: 100%
}
.d-cell {
display: table-cell;
vertical-align: middle;
width: 100%
}
@font-face {
font-family: GTSuperDisplay-Medium;
src: url(../fonts/GTSuperDisplay-Medium.woff2) format("woff2"), url(../fonts/GTSuperDisplay-Medium.woff) format("woff"), url(../fonts/GTSuperDisplay-Medium.otf) format("opentype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: GT America Regular;
src: url(../fonts/GT-America-Regular.woff2) format("woff2"), url(../fonts/GT-America-Regular.woff) format("woff"), url(../fonts/GT-America-Regular.otf) format("opentype");
font-style: normal;
font-weight: 400
}
.a-split {
position: relative;
overflow: hidden;
padding-bottom: 6px
}
.a-split .word {
-webkit-transform: translateY(90%);
transform: translateY(90%);
opacity: 0
}
.a-split-line {
position: relative;
overflow: hidden;
padding-bottom: 6px
}
.a-split-line .line {
-webkit-transform: translateY(90%);
transform: translateY(90%);
opacity: 0
}
.a-fade-up {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0
}
.a-fade-up img {
-webkit-transform: translateY(10px) scale(.9);
transform: translateY(10px) scale(.9);
opacity: 0
}
[data-sal=custom-fade-up] {
-webkit-transform: translateY(20%);
transform: translateY(20%);
opacity: 0
}
#header .logo, #header .menu-desktop .item {
opacity: 0;
-webkit-transform: translateY(90%);
transform: translateY(90%)
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10000
}
#header .bar {
position: relative;
height: 100px
}
#header .bar .left {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
width: 104px;
height: 44px
}
#header .bar .left a, #header .bar .left a svg {
display: block;
width: 104px;
height: 70px
}
#header .bar .right {
float: right;
line-height: 99px
}
#header .bar .right .bt-menu {
cursor: pointer;
display: inline-block;
vertical-align: middle;
line-height: normal;
height: 19px;
width: 30px
}
#header .bar .right .bt-menu span {
display: block;
height: 3px;
width: 30px;
background-color: #212121;
margin-top: 5px;
border-radius: 6px
}
#header .bar .right .bt-menu span:first-child {
margin-top: 0
}
#header .bar .right .bt-menu span.line3 {
width: 20px
}
#header .menu-desktop {
position: absolute;
top: 40px;
right: 0;
overflow: hidden
}
#header .menu-desktop .item {
float: left;
text-align: center;
margin-left: 50px
}
#header .menu-desktop .item:first-child {
margin-left: 0
}
#header .menu-desktop .item a {
padding-top: 2px;
display: inline-block;
vertical-align: middle;
line-height: normal;
padding-bottom: 6px;
position: relative
}
#header .menu-desktop .item a:after {
content: "";
width: 0;
height: 1px;
background-color: #212121;
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: width .1s cubic-bezier(.455, .03, .515, .955);
transition: width .1s cubic-bezier(.455, .03, .515, .955)
}
#header .menu-desktop .item a span {
display: block
}
#header .menu-desktop .item a .title {
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 14px;
letter-spacing: .025em;
color: #212121
}
html.desktop #header .menu-desktop .item a:hover .title {
color: #212121
}
html.desktop #header .menu-desktop .item a:hover:after {
width: 100%
}
#header .menu-mobile {
display: none
}
#header .menu-mobile .menu {
position: absolute;
overflow: hidden
}
#header .menu-mobile .menu .item {
float: left;
text-align: center;
margin-left: 40px
}
#header .menu-mobile .menu .item:first-child {
margin-left: 0
}
#header .menu-mobile .menu .item a {
padding-top: 2px;
display: inline-block;
vertical-align: middle;
line-height: normal;
padding-bottom: 8px;
position: relative
}
#header .menu-mobile .menu .item a:after {
content: "";
width: 0;
height: 3px;
background-color: #212121;
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: width .2s cubic-bezier(.25, .46, .45, .94);
transition: width .2s cubic-bezier(.25, .46, .45, .94)
}
#header .menu-mobile .menu .item a span {
display: block
}
#header .menu-mobile .menu .item a .title {
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 14px;
letter-spacing: 0;
color: #212121;
letter-spacing: .02em;
text-transform: uppercase;
-webkit-transition: color .4s cubic-bezier(.25, .46, .45, .94);
transition: color .4s cubic-bezier(.25, .46, .45, .94)
}
html.desktop #header .menu-mobile .menu .item a:hover .title {
color: #212121
}
html.desktop #header .menu-mobile .menu .item a:hover:after {
width: 100%
}
body.page-template-tpl-home #header .menu-desktop .item_1 a .title {
color: #212121
}
body.page-template-tpl-home #header .menu-desktop .item_1 a:after {
width: 100%
}
body.page-template-tpl-about #header .menu-desktop .item_3 a .title {
color: #212121
}
body.page-template-tpl-about #header .menu-desktop .item_3 a:after {
width: 100%
}
#footer {
padding-top: 90px;
text-align: center;
display: block
}
#footer .inner_footer {
padding-bottom: 80px;
position: relative
}
#footer .left {
float: left;
text-align: left;
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 14px;
letter-spacing: 0;
color: #212121
}
#footer .center {
display: inline-block
}
#footer .center ul {
overflow: hidden
}
#footer .center ul li {
position: relative;
float: left;
padding: 0 18px 0 40px
}
#footer .center ul li:before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 22px;
height: 1px;
background-color: #212121
}
#footer .center ul li:first-child {
padding-left: 0
}
#footer .center ul li:first-child:before {
display: none
}
#footer .center ul li a {
position: relative;
display: block;
padding-bottom: 6px;
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 14px;
letter-spacing: 0;
color: #212121;
text-transform: capitalize;
text-decoration: none
}
#footer .center ul li a:after {
content: "";
position: absolute;
width: 0;
height: 1px;
left: 0;
bottom: 0;
background-color: #cecece;
-webkit-transition: all .1s cubic-bezier(.455, .03, .515, .955);
transition: all .1s cubic-bezier(.455, .03, .515, .955)
}
html.desktop #footer .center ul li a:hover:after {
width: 100%
}
#footer .center ul li:first-child {
margin-left: 0
}
#footer .center ul li.facebook a:after {
background-color: #3b5998
}
#footer .center ul li.twitter a:after {
background-color: #55acee
}
#footer .center ul li.dr a:after {
background-color: #ea4c89
}
#footer .center ul li.be a:after {
background-color: #1769ff
}
#footer .center ul li.pin a:after {
background-color: #cc2127
}
#footer .center ul li.ig a:after {
background-color: #3f729b
}
#footer .center ul li.in a:after {
background-color: #0976b4
}
#footer .center ul li.tu a:after {
background-color: #35465c
}
#footer .right {
float: right;
padding-right: 14px;
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 14px;
letter-spacing: 0;
text-align: right
}
#footer .right a {
text-decoration: none;
color: #212121;
display: block;
padding-bottom: 6px;
position: relative
}
#footer .right a, #footer .right a:after {
-webkit-transition: all .1s cubic-bezier(.455, .03, .515, .955);
transition: all .1s cubic-bezier(.455, .03, .515, .955)
}
#footer .right a:after {
content: "";
position: absolute;
width: 0;
height: 1px;
left: 0;
bottom: 0;
background-color: #212121
}
html.desktop #footer .right a:hover:after {
width: 100%
}
#footer-mobile {
display: none;
background-color: #f7f0e9;
text-align: center;
height: 100px!important;
padding-top: 50px!important
}
#footer-mobile .inner_footer {
display: inline-block;
text-align: center
}
#footer-mobile .inner_footer ul {
display: inline-block
}
#footer-mobile .inner_footer ul li {
position: relative;
float: left;
padding: 0 18px 0 40px
}
#footer-mobile .inner_footer ul li:before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 22px;
height: 1px;
background-color: #212121
}
#footer-mobile .inner_footer ul li:first-child {
padding-left: 0
}
#footer-mobile .inner_footer ul li:first-child:before {
display: none
}
#footer-mobile .inner_footer ul li a {
position: relative;
display: block;
padding-bottom: 6px;
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 14px;
letter-spacing: 0;
color: #212121;
text-transform: capitalize;
text-decoration: none
}
#footer-mobile .inner_footer ul li a:after {
content: "";
position: absolute;
width: 0;
height: 1px;
left: 0;
bottom: 0;
background-color: #cecece;
-webkit-transition: all .1s cubic-bezier(.455, .03, .515, .955);
transition: all .1s cubic-bezier(.455, .03, .515, .955)
}
html.desktop #footer-mobile .inner_footer ul li a:hover:after {
width: 100%
}
#footer-mobile .inner_footer ul li:first-child {
margin-left: 0
}
#footer-mobile .inner_footer ul li.facebook a:after {
background-color: #3b5998
}
#footer-mobile .inner_footer ul li.twitter a:after {
background-color: #55acee
}
#footer-mobile .inner_footer ul li.dr a:after {
background-color: #ea4c89
}
#footer-mobile .inner_footer ul li.be a:after {
background-color: #1769ff
}
#footer-mobile .inner_footer ul li.pin a:after {
background-color: #cc2127
}
#footer-mobile .inner_footer ul li.ig a:after {
background-color: #3f729b
}
#footer-mobile .inner_footer ul li.in a:after {
background-color: #0976b4
}
#footer-mobile .inner_footer ul li.tu a:after {
background-color: #35465c
}
body {
background-color: #f7f0e9;
color: #000;
font-size: 100%;
min-height: 100%
}
.wrapper, body {
position: relative
}
.wrapper {
overflow: hidden
}
.wrap {
position: relative;
max-width: 1200px;
width: 100%;
margin: 0 auto
}
#preload {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000000
}
#preload.disabled {
pointer-events: none
}
#preload .slider {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f7f0e9
}
#home {
padding-top: 100px
}
#home .banner {
position: relative;
height: 700px
}
#home .banner .wrap {
height: 100%
}
#home .banner .location, #home .banner h1, #home .banner h2 {
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 100px;
line-height: 100px;
letter-spacing: .025em;
color: #212121
}
#home .list_works ul {
overflow: hidden
}
#home .list_works ul li {
float: left;
position: relative;
width: 50%;
height: 600px;
margin: 0
}
#home .list_works ul li a {
background-color: #4671fb;
display: block;
width: 100%;
height: 100%
}
#home .list_works ul li .thumb {
width: 100%;
height: 100%;
text-align: center
}
#home .list_works ul li .thumb:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle
}
#home .list_works ul li .thumb img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%
}
#home .list_works ul li .over {
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
z-index: 10
}
#home .list_works ul li .over:before {
position: absolute;
width: 100%;
top: 0;
left: 0;
background-color: #212121;
-webkit-transform: scale(.9);
transform: scale(.9);
-webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94);
transition: all .2s cubic-bezier(.25, .46, .45, .94);
opacity: 0;
visibility: hidden;
z-index: 1
}
#home .list_works ul li .over .inner_over {
position: relative;
width: 100%;
z-index: 2
}
#home .list_works ul li .over .title {
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
font-size: 40px;
line-height: 24px;
letter-spacing: 0;
letter-spacing: .02em;
-webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94) .05s;
transition: all .2s cubic-bezier(.25, .46, .45, .94) .05s
}
#home .list_works ul li .over .category, #home .list_works ul li .over .title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
-webkit-transform: translateY(10px);
transform: translateY(10px);
opacity: 0;
visibility: hidden
}
#home .list_works ul li .over .category {
margin-top: 20px;
font-family: GT America Regular, Arial, sans-serif;
font-size: 14px;
line-height: 14px;
letter-spacing: 0;
-webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94) .1s;
transition: all .2s cubic-bezier(.25, .46, .45, .94) .1s
}
#home .list_works ul li .over:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle
}
#home .list_works ul li .block {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100
}
html.desktop #home .list_works ul li:hover .over:before {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
visibility: visible
}
html.desktop #home .list_works ul li:hover .over .category, html.desktop #home .list_works ul li:hover .over .title {
opacity: 1;
visibility: visible;
-webkit-transform: translate(0);
transform: translate(0)
}
#single.password-1 .navigation, #single.password-1 .page-head, #single.password-1 .wrap {
-webkit-filter: blur(20px);
filter: blur(20px);
-webkit-transition: all .3s cubic-bezier(.25, .46, .45, .94);
transition: all .3s cubic-bezier(.25, .46, .45, .94)
}
#single.password-1.unlock .navigation, #single.password-1.unlock .page-head, #single.password-1.unlock .wrap {
-webkit-filter: blur(0);
filter: blur(0)
}
#single.password-1.unlock .password-container {
opacity: 0;
visibility: hidden
}
#single .password-container {
background-color: #f7f0e9;
padding: 50px 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: fixed;
z-index: 400;
-webkit-transition: all .3s cubic-bezier(.25, .46, .45, .94);
transition: all .3s cubic-bezier(.25, .46, .45, .94)
}
#single .password-container .title {
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 20px;
line-height: 20px;
letter-spacing: 0;
text-align: center;
margin-bottom: 20px
}
#single .password-container .input input {
border: 1px solid #212121;
background-color: #f7f0e9;
font-family: GT America Regular, Arial, sans-serif;
line-height: 40px;
height: 40px;
padding: 0 10px
}
#single .password-container .button, #single .password-container .input input {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
letter-spacing: 0;
width: 250px
}
#single .password-container .button {
margin: 20px auto 0;
background-color: #212121;
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
line-height: 14px;
padding: 10px 20px;
color: #fff;
cursor: pointer;
text-align: center
}
#single .page-head {
position: relative;
height: 600px;
width: 100%;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center
}
#single .page-head h1 {
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
font-size: 80px;
line-height: 80px;
letter-spacing: .025em;
color: #212121
}
#single .page-head .category, #single .page-head h1 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
#single .page-head .category {
margin-top: 10px;
font-family: GT America Regular, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
letter-spacing: 0
}
#single .wrap {
border-top: 0;
padding-top: 100px
}
#single .informations {
border: 1px solid #212121;
overflow: hidden
}
#single .informations .left {
float: left;
padding: 0 60px;
width: 66%;
height: 214px
}
#single .informations .right {
float: right;
padding: 0 60px;
border-left: 1px solid #212121;
width: 34%;
height: 214px
}
#single .informations .right .line {
margin-top: 20px;
overflow: hidden
}
#single .informations .right .line:first-child {
margin-top: 0
}
#single .informations .right .label {
float: left;
width: 110px
}
#single .informations .right .content {
float: left;
font-family: GT America Regular, Arial, sans-serif;
font-size: 14px;
color: #212121
}
#single .informations .label, #single .informations .right .content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 18px;
letter-spacing: 0
}
#single .informations .label {
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
font-size: 18px
}
#single .informations .description {
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 22px;
letter-spacing: 0;
color: #212121;
margin-top: 20px
}
#single .medias {
margin-top: 100px;
width: 100%
}
#single .medias ul {
width: 100%
}
#single .medias ul li {
margin-bottom: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #212121
}
#single .medias ul li .text-content {
width: 80%;
margin: 0 auto
}
#single .medias ul li a {
color: #666
}
html.desktop #single .medias ul li a:hover {
text-decoration: underline
}
#single .medias ul li em {
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
line-height: 24px;
letter-spacing: 0
}
#single .medias ul li strong {
font-weight: 700
}
#single .medias ul li img {
max-width: 100%;
height: auto
}
#single .navigation {
margin-top: 100px;
width: 100%;
height: 400px
}
#single .navigation a {
text-decoration: none
}
#single .navigation .prev {
cursor: pointer;
position: relative;
background-color: #212121;
float: left;
width: 50%;
height: 100%;
overflow: hidden;
text-align: left
}
#single .navigation .prev a {
display: block;
overflow: hidden;
width: 200%;
height: 100%
}
#single .navigation .prev .link {
float: right;
width: 50%;
height: 100%
}
#single .navigation .prev .link .title {
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 400px;
letter-spacing: 0;
color: #fff;
text-align: left;
width: 100%;
padding-right: 11%
}
#single .navigation .prev .slide_container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: translate(-50%);
transform: translate(-50%)
}
#single .navigation .prev .title {
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 40px;
line-height: 50px;
letter-spacing: 0;
color: #fff;
padding-left: 10%;
text-align: center
}
#single .navigation .prev .content {
float: left;
width: 50%;
height: 100%;
padding-left: 2vw
}
#single .navigation .prev .arrow {
width: 48px
}
#single .navigation .prev .arrow svg {
display: block;
width: 48px;
height: 95px;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg)
}
#single .navigation .next {
cursor: pointer;
position: relative;
background-color: #212121;
float: right;
width: 50%;
overflow: hidden;
height: 100%;
text-align: right
}
#single .navigation .next a {
display: block;
overflow: hidden;
width: 200%;
height: 100%
}
#single .navigation .next .link {
float: left;
width: 50%;
height: 100%
}
#single .navigation .next .link .title {
font-family: GT America Regular, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 400px;
letter-spacing: 0;
color: #fff;
text-align: right;
width: 100%;
padding-right: 11%
}
#single .navigation .next .slide_container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%
}
#single .navigation .next .content {
float: right;
width: 50%;
height: 100%;
padding-right: 2vw
}
#single .navigation .next .content .title {
padding-right: 10%
}
#single .navigation .content {
position: relative;
width: 100%;
height: 100%;
line-height: 400px;
overflow: hidden
}
#single .navigation .content .inner_content {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center
}
#single .navigation .content .inner_content div svg {
display: inline-block;
vertical-align: middle
}
#single .navigation .content .thumb {
width: 50%;
height: 400px;
text-align: center
}
#single .navigation .content .thumb img {
display: inline-block;
vertical-align: middle;
opacity: 0;
visibility: hidden;
-webkit-transform: scale(.9);
transform: scale(.9)
}
#single .navigation .content .arrow {
width: 48px
}
#single .navigation .content .arrow svg {
display: block;
width: 48px;
height: 95px
}
#single .navigation .content .title {
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 40px;
line-height: 50px;
letter-spacing: 0;
font-style: normal;
color: #fff;
letter-spacing: .02em;
width: calc(50% - 48px)!important;
text-align: center
}
#about .page-content {
padding-top: 220px;
padding-bottom: 120px;
text-align: right
}
#about .page-content .title {
font-family: GTSuperDisplay-Medium, Arial, sans-serif;
font-size: 80px;
line-height: 80px
}
#about .page-content .text-content, #about .page-content .title {
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0;
z-index: 2
}
#about .page-content .text-content {
font-family: GT America Regular, Arial, sans-serif;
font-size: 24px;
line-height: 40px;
margin-top: 60px
}
#about .page-content .text-content p {
margin-top: 40px
}
#about .page-content .text-content a {
text-decoration: underline
}
#about .page-content .text-content span {
display: inline-block;
vertical-align: middle
}
#about .page-content .text-content span img {
display: block
}
#about .illustration {
position: absolute;
bottom: -110px;
left: 0;
z-index: 1;
width: 400px;
height: 500px;
overflow: hidden
}
#about .illustration img {
display: block;
opacity: 0;
-webkit-transform: translateY(10%) scale(1.1);
transform: translateY(10%) scale(1.1)
}
@media screen and (max-width:1250px) {
body .wrap {
width: 760px;
padding: 0 20px
}
body #header .bar .left {
left: 20px
}
body #header .menu-desktop {
right: 20px
}
body #header .menu-desktop .item {
margin-left: 25px
}
body #archives .list_works ul li, body #home .list_works ul li, body #illustrations .list_works ul li {
height: 360px;
width: 50%
}
body #home .banner .location, body #home .banner h1, body #home .banner h2 {
font-size: 70px;
line-height: 80px
}
body #home .banner {
height: 450px!important
}
body #single .banner {
height: 450px
}
body #single .banner img {
height: 350px!important;
width: auto
}
body #single .wrap {
padding-top: 50px
}
body #single .informations {
margin-top: 50px
}
body #single .informations .left, body #single .informations .right {
padding: 0 30px!important
}
body #single .informations .line .label {
width: 80px!important
}
body #single .navigation {
height: 300px
}
body #single .navigation .content {
line-height: 300px
}
body #single .navigation .content .title {
font-size: 30px
}
body #single .navigation .content .thumb {
height: 300px
}
body #single .navigation .next .link .title, body #single .navigation .prev .link .title {
line-height: 300px
}
body #about .illustration {
-webkit-transform: translate(-40%);
transform: translate(-40%)
}
body #footer {
display: none
}
body #footer-mobile {
display: block
}
}
@media screen and (max-width:767px) {
body .wrap {
width: 320px!important
}
body #footer-mobile .inner_footer ul li {
padding: 0!important;
margin-left: 16px
}
body #footer-mobile .inner_footer ul li:first-child {
margin-left: 0
}
body #footer-mobile .inner_footer ul li:before {
display: none
}
body #header .bar {
border-bottom: 0;
padding: 0 20px
}
body #header .bar .left {
left: 0
}
body #header .bar .menu-desktop {
right: 0
}
body #header .left, body #header .right {
position: relative;
z-index: 1
}
body #archives, body #home, body #illustrations {
padding-top: 100px
}
body #archives .banner, body #home .banner, body #illustrations .banner {
display: none
}
body #archives .wrap, body #home .wrap, body #illustrations .wrap {
border-top: 0;
padding: 0
}
body #archives .list_works ul li, body #home .list_works ul li, body #illustrations .list_works ul li {
width: 100%;
height: 320px!important
}
body #archives .list_works ul li a, body #home .list_works ul li a, body #illustrations .list_works ul li a {
height: 320px!important;
opacity: 1;
visibility: visible
}
body #archives .list_works ul li .thumb, body #home .list_works ul li .thumb, body #illustrations .list_works ul li .thumb {
-webkit-transform: scale(.8);
transform: scale(.8)
}
body #single .page-head {
height: 300px
}
body #single .page-head h1 {
font-size: 40px;
line-height: 40px
}
body #single .medias {
margin-top: 50px
}
body #single .wrap {
padding: 50px 20px 0!important
}
body #single .informations {
margin-top: 50px
}
body #single .informations .left, body #single .informations .right {
padding: 20px!important;
float: none;
width: 100%!important;
height: auto!important
}
body #single .informations .right {
border-left: 0;
border-top: 1px solid #cecece
}
body #single .navigation {
height: 160px
}
body #single .navigation .content {
line-height: 160px
}
body #single .navigation .content .thumb {
display: none
}
body #single .navigation .next .link .title, body #single .navigation .prev .link .title {
line-height: 160px
}
body #about .page-content {
padding-top: 150px;
padding-bottom: 0
}
body #about .page-content .title {
font-size: 70px;
line-height: 70px
}
body #about .illustration {
margin-top: 50px;
position: relative;
-webkit-transform: translate(0);
transform: translate(0);
left: auto;
bottom: auto;
width: 100%;
height: auto
}
/*SNS*/
.follow-me {
list-style: none;
margin: 0 0 -8px;
overflow: hidden;
padding: 0;
}
.follow-me li {
float: left;
margin: 0 8px 8px 0;
padding: 0;
}
.follow-me li a::before {
background-color: #fff;
border-style: solid;
border-width: 1px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
display: inline-block;
font-family: FontAwesome;
font-size: 16px;
height: 42px; /* Button height */
line-height: 42px; /* Button height */
-webkit-transition: all .3s ease;
transition: all .3s ease;
text-align: center;
width: 42px; /* Button width */
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before { border-color: #ff9900; color: #ff9900; content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before { border-color: #000000; color: #000000; content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before { border-color: #3399ff; color: #3399ff; content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before { border-color: #05cc47; color: #05cc47; content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before { border-color: #000000; color: #000000; content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before { border-color: #000000; color: #ea4c89; content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before { border-color: #007ee5; color: #007ee5; content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before { border-color: #3b5998; color: #3b5998; content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before { border-color: #6cc655; color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before { border-color: #0063cc; color: #0063dc; content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before { border-color: #f94877; color: #f94877; content: "\f180"; }
.follow-me li a[href*="github.com"]::before { border-color: #181717; color: #181717; content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before { border-color: #dc4e41; color: #dc4e41; content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before { border-color: #008fde; color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before { border-color: #125688; color: #125688; content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before { border-color: #d51007; color: #d51007; content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before { border-color: #0077b5; color: #0077b5; content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before { border-color: #eaeaea; color: #eaeaea; content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before { border-color: #bd081c; color: #bd081c; content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before { border-color: #ef3f56; color: #ef3f56; content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before { border-color: #ff4500; color: #ff4500; content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before { border-color: #00aff0; color: #00aff0; content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before { border-color: #2d2d2d; color: #2d2d2d; content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before { border-color: #84bd00; color: #84bd00; content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { border-color: #171a21; color: #171a21; content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before { border-color: #eb4929; color: #eb4929; content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before { border-color: #36465d; color: #36465d; content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before { border-color: #6441a5; color: #6441a5; content: "\f1e8"; }
.follow-me li a[href*="twitter.com"]::before { border-color: #55acee; color: #55acee; content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before { border-color: #1ab7ea; color: #1ab7ea; content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before { border-color: #11b58a; color: #11b58a; content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before { border-color: #e6162d; color: #e6162d; content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before { border-color: #64d548; color: #64d548; content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before { border-color: #21759b; color: #21759b; content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before { border-color: #cd201f; color: #cd201f; content: "\f16a"; }
.follow-me li a[href$="/feed"]::before { border-color: #ffa500; color: #ffa500; content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before { border-color: #363636; color: #363636; content: "\f000"; font-family: blogicon; }
.follow-me li a:hover::before {
color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before { background-color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before { background-color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before { background-color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before { background-color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before { background-color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before { background-color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before { background-color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before { background-color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before { background-color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before { background-color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before { background-color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before { background-color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before { background-color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before { background-color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before { background-color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before { background-color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before { background-color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before { background-color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before { background-color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before { background-color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before { background-color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before { background-color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before { background-color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before { background-color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before { background-color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before { background-color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before { background-color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before { background-color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before { background-color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before { background-color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before { background-color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before { background-color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before { background-color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before { background-color: #363636; }
}
}