article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}

html {
    cursor: default;
    font-size: 100%;
    overflow-y: scroll;
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body,
form,
input,
button,
select,
textarea {
    font-size: 100%;
    margin: 0
}

h1,
h2,
h3,
h5,
h6,
p {
    font-weight: 400
}

a {
    outline: none
}

a:active,
a:hover {
    outline: none;
    pointer: cursor
}

a:focus {
    outline: none
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

mark {
    background: #FF0;
    color: #000
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: none
}

q:before,
q:after {
    content: '';
    content: none
}

small,
sub,
sup {
    font-size: 75%
}

sub {
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em
}

sub {
    bottom: -0.25em
}

nav ul {
    list-style: none
}

audio[controls],
canvas,
video {
    display: inline-block;
    *display: inline
}

audio {
    display: none;
    _display: expression(this.controls ? 'inline': 'none');
    *zoom: 1
}

audio[controls] {
    display: inline-block
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic
}

svg:not(:root) {
    overflow: hidden
}

legend {
    *margin-left: -7px
}

button,
input,
select,
textarea {
    -webkit-appearance: none;
    border-radius: 0;
    vertical-align: baseline;
    *vertical-align: middle
}

button,
input {
    line-height: normal;
    _overflow: expression(this.type=='button|reset|submit' ? 'visible': '')
}

button {
    overflow: visible
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
    overflow: visible
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box
}

input[type="search"] {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

ul,
li {
    list-style: none
}

.container {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.container:after {
    content: " ";
    display: block;
    clear: both
}

@media screen and (max-width: 1140px) {
    .container {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 600px) {
    .container {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

.section {
    clear: both;
    padding: 0px;
    margin: 0px
}

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%
}

@media screen and (max-width: 700px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

.col:first-child {
    margin-left: 0
}

.group:before,
.group:after {
    content: "";
    display: table
}

.group:after {
    clear: both
}

.group {
    zoom: 1
}

.span_12_of_12 {
    width: 100%
}

.span_11_of_12 {
    width: 91.53%
}

@media screen and (max-width: 900px) {
    .span_11_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_11_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_10_of_12 {
    width: 83.06%
}

@media screen and (max-width: 900px) {
    .span_10_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_10_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_9_of_12 {
    width: 74.6%
}

@media screen and (max-width: 900px) {
    .span_9_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_9_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_8_of_12 {
    width: 66.13%
}

@media screen and (max-width: 900px) {
    .span_8_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_8_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_7_of_12 {
    width: 57.66%
}

@media screen and (max-width: 900px) {
    .span_7_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_7_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_6_of_12 {
    width: 49.2%
}

@media screen and (max-width: 900px) {
    .span_6_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_6_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_5_of_12 {
    width: 40.73%
}

@media screen and (max-width: 900px) {
    .span_5_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_5_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_4_of_12 {
    width: 32.26%
}

@media screen and (max-width: 900px) {
    .span_4_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_4_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_3_of_12 {
    width: 23.8%
}

@media screen and (max-width: 900px) {
    .span_3_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_3_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_2_of_12 {
    width: 15.33%
}

@media screen and (max-width: 900px) {
    .span_2_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_2_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_1_of_12 {
    width: 6.866%
}

@media screen and (max-width: 900px) {
    .span_1_of_12 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_1_of_12:last-child {
        margin-bottom: 0px
    }
}

.span_5_of_5 {
    width: 100%
}

@media screen and (max-width: 900px) {
    .span_5_of_5 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_5_of_5:last-child {
        margin-bottom: 0px
    }
}

.span_4_of_5 {
    width: 79.6%
}

@media screen and (max-width: 900px) {
    .span_4_of_5 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_4_of_5:last-child {
        margin-bottom: 0px
    }
}

.span_3_of_5 {
    width: 59.2%
}

@media screen and (max-width: 900px) {
    .span_3_of_5 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_3_of_5:last-child {
        margin-bottom: 0px
    }
}

.span_2_of_5 {
    width: 38.8%
}

@media screen and (max-width: 900px) {
    .span_2_of_5 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_2_of_5:last-child {
        margin-bottom: 0px
    }
}

.span_1_of_5 {
    width: 18.4%
}

@media screen and (max-width: 900px) {
    .span_1_of_5 {
        width: 100%;
        margin-bottom: 60px;
    }
    .span_1_of_5:last-child {
        margin-bottom: 0px
    }
}

@media only screen and (max-width: 480px) {}

@font-face {
    font-family: 'geomanist_regularregular';
    src: url('../fonts/geomanist-regular-webfont.eot');
    src: url('../fonts/geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/geomanist-regular-webfont.woff2') format('woff2'), url('../fonts/geomanist-regular-webfont.woff') format('woff'), url('../fonts/geomanist-regular-webfont.ttf') format('truetype'), url('../fonts/geomanist-regular-webfont.svg#geomanist_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistextralight';
    src: url('../fonts/geomanist-extralight-webfont.eot');
    src: url('../fonts/geomanist-extralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/geomanist-extralight-webfont.woff2') format('woff2'), url('../fonts/geomanist-extralight-webfont.woff') format('woff'), url('../fonts/geomanist-extralight-webfont.ttf') format('truetype'), url('../fonts/geomanist-extralight-webfont.svg#geomanistextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    overflow-y: visible !important
}

body {
    height: 100%;
    padding: 0px;
    font-family: 'geomanist_regularregular', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible !important
}

a {
    pointer: cursor
}

.bordertop {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    height: 30px;
    background: white;
    z-index: 10
}

.bordertop.resumeee {
    position: relative
}

@media screen and (max-width: 700px) {
    .bordertop {
        height: 0px;
    }
}

.borderbottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
    height: 30px;
    background: white;
    z-index: 10
}

@media screen and (max-width: 700px) {
    .borderbottom {
        height: 0px;
    }
}

.borderbottomdown {
    position: absolute;
    width: 100%;
    margin-top: -29px;
    height: 30px;
    background: white;
    z-index: 10
}

@media screen and (max-width: 700px) {
    .borderbottomdown {
        height: 0px;
    }
}

.borderleft {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 30px;
    background: white;
    z-index: 10
}

@media screen and (max-width: 700px) {
    .borderleft {
        height: 0px;
    }
}

.borderright {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    width: 30px;
    background: white;
    z-index: 10
}

@media screen and (max-width: 700px) {
    .borderright {
        height: 0px;
    }
}

.button {
    width: 100px;
    padding: 10px;
    letter-spacing: 9px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

.button:hover {
    letter-spacing: 4px
}

.button {
    width: 100px;
    padding: 10px;
    letter-spacing: 9px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

.buttton:hover {
    letter-spacing: 4px
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999998
}

#loader-wrapper p {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    margin: auto;
    z-index: 9999999;
    text-align: center;
    font-size: 11px;
    letter-spacing: 3px;
    color: #717171
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    height: 100vh;
    overflow: hidden;
    background: white;
    z-index: 9999998;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

#loader-wrapper .loader-section.section-left {
    left: 0
}

#loader-wrapper .loader-section.section-right {
    right: 0
}

canvas {
    display: block;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.5;
    z-index: 9999999
}

body.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.3s 1s ease-out;
    transition: all 0.3s 1s ease-out
}

body.loaded #loader-wrapper canvas,
body.loaded #loader-wrapper p {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

body.loaded #loader-wrapper .loader-section.section-left {
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

body.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.no-js #loader-wrapper {
    display: none
}

.navToggle {
    z-index: 999;
    position: fixed;
    width: 50px;
    height: 50px;
    right: 60px;
    margin: 0 auto;
    top: 60px;
    cursor: pointer;
    background: #FFF
}

@media screen and (max-width: 700px) {
    .navToggle {
        top: 0px;
        right: 0px;
    }
}

.navToggle:hover {
    background: #FFF
}

.navToggle .icon {
    -webkit-transition: all 0.25s;
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 22px;
    height: 2px;
    background-color: #1a1a1c
}

.navToggle .icon:before,
.navToggle .icon:after {
    -webkit-transition: all 0.25s;
    position: absolute;
    width: 22px;
    height: 2px;
    background-color: #1a1a1c;
    content: ''
}

.navToggle .icon:before {
    top: -8px;
    left: 0
}

.navToggle .icon:after {
    top: 8px;
    left: 0
}

.navToggle:hover .icon {
    background-color: #555
}

.navToggle:hover .icon:before {
    top: -10px;
    background-color: #555
}

.navToggle:hover .icon:after {
    top: 10px;
    background-color: #555
}

.navToggle.open .icon {
    -webkit-transition: all 0.4s;
    background-color: transparent;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg)
}

.navToggle.open .icon:before {
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.navToggle.open .icon:after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

#menu {
    z-index: 999;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: fixed;
    width: 200px;
    height: 0px;
    overflow: hidden;
    text-align: center;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    top: 50%;
    transform: translateY(-50%)
}

#menu ul {
    list-style: none;
    padding: 0;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 100;
    text-transform: uppercase
}

#menu li {
    margin: 30px 0;
    padding: 5px 0;
    cursor: pointer;
    font-family: "Source Sans Pro", sans-serif;
    letter-spacing: 0.5em;
    text-decoration: none;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s
}

#menu li:first-child {
    margin-top: 0
}

#menu li a {
    color: #434343;
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

#menu li a:hover {
    text-decoration: line-through
}

@media screen and (max-width: 730px) {
    #menu li a#resnav {
        opacity: 0.3;
    }
}

#menu.active {
    height: auto
}

.bgblack {
    width: 100%;
    height: 0%;
    background: rgba(238, 238, 238, 0.9);
    position: fixed;
    z-index: 998;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s
}

.bgblack.active {
    display: block;
    opacity: 1;
    cursor: url("../img/closex.png"), auto;
    height: 100%
}

@media screen and (max-width: 768px) {}

.opl {
    position: fixed;
    bottom: 100px;
    left: 0px;
    z-index: 99999
}

@media screen and (max-width: 1000px) {
    .opl {
        display: none;
    }
}

.opl a {
    width: 73px;
    height: 56px;
    text-indent: -9999px;
    display: block;
    background: url("https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png") no-repeat
}

.csswinner {
    position: fixed;
    bottom: 150px;
    left: 0px;
    z-index: 99999
}

.tilt {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto
}

.tilt__back,
.tilt__front {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.tilt__back {
    position: relative
}

.tilt__front {
    position: absolute;
    top: 0;
    left: 0
}

header {
    overflow: hidden;
    top: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    @-webkit-keyframes Floatingx {
        from {
            -webkit-transform: translate(0, 0px)
        }
        65% {
            -webkit-transform: translate(0, 3%)
        }
        to {
            -webkit-transform: translate(0, 0px)
        }
    }
    @-moz-keyframes Floating {
        from {
            -moz-transform: translate(0, 0px)
        }
        65% {
            -moz-transform: translate(0, 3%)
        }
        to {
            -moz-transform: translate(0, 0px)
        }
    }
}

header #logo {
    top: 60px;
    left: 60px;
    position: absolute;
    opacity: 0.8;
    pointer-events: none
}

@media screen and (max-width: 700px) {
    header #logo {
        top: 35px;
        left: 35px;
    }
}

header #logo img {
    width: 100px
}

@media screen and (max-width: 375px) {
    header #logo {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

header #arrow {
    position: fixed;
    z-index: 11;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 6%;
    width: 30px;
    height: auto
}

header #arrow a {
    cursor: pointer
}

header #arrow img {
    width: 30px
}

@media screen and (max-width: 375px) {
    header #arrow img {
        display: none;
    }
}

header h1 {
    font-size: 45px;
    font-family: 'geomanistextralight', sans-serif;
    font-weight: 400;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 500;
    width: 100%;
    margin: auto;
    color: #6b6b6b;
    pointer-events: none;
    letter-spacing: 18px;
    text-align: center
}

header h1 span {
    letter-spacing: 0px
}

header h1 span#e {
    letter-spacing: 18px
}

@media screen and (max-width: 1180px) {
    header h1 {
        font-size: 43px;
    }
}

@media screen and (max-width: 950px) {
    header h1 {
        font-size: 35px;
        letter-spacing: 14px;
    }
    header h1 span#e {
        letter-spacing: 14px
    }
}

@media screen and (max-width: 740px) {
    header h1 {
        font-size: 35px;
        width: 70%;
        margin: 0px auto;
        left: 0;
        right: 0;
        letter-spacing: 14px;
    }
    header h1 span#e {
        letter-spacing: -18px
    }
}

@media screen and (max-width: 375px) {
    header h1 {
        display: none;
    }
}

.hero__imgwrap {
    position: relative;
    height: 100%;
    margin: 0px auto;
    overflow: hidden;
    background-color: #eeeeee;
    margin-left: 30px;
    margin-right: 30px
}

@media screen and (max-width: 700px) {
    .hero__imgwrap {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.hero__imgwrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.hero__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100vh;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.hero__imgwrap .tilt__back,
.hero__imgwrap .tilt__front {
    background-size: auto 100vh
}

#page-content {
    overflow: hidden;
    margin: 0;
    width: 100%
}

#page-body {
    padding-top: 150px
}

#page-body.nopadding {
    padding: 0
}

.wrapper {
    width: 1080px;
    margin: 0 auto;
    margin-bottom: 0px
}

@media only screen and (max-width: 1200px) {
    .wrapper {
        width: 960px;
    }
}

@media only screen and (max-width: 1024px) {
    .wrapper {
        width: 780px;
    }
}

@media only screen and (max-width: 781px) {
    .wrapper {
        width: calc(100% - 80px);
    }
}

@media only screen and (max-width: 500px) {
    .wrapper {
        width: calc(100% - 40px);
    }
}

.wrapper img {
    width: auto;
    max-width: 100%;
    border: 0;
    -ms-interpolation-mode: bicubic
}

.wrapper img,
.wrapper object,
.wrapper video {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0;
    vertical-align: top
}

.wrapper-small {
    width: 780px;
    margin: 0 auto
}

@media only screen and (max-width: 1200px) {
    .wrapper-small {
        width: 780px;
    }
}

@media only screen and (max-width: 1024px) {
    .wrapper-small {
        width: 780px;
    }
}

@media only screen and (max-width: 781px) {
    .wrapper-small {
        width: calc(100% - 80px);
    }
}

@media only screen and (max-width: 500px) {
    .wrapper-small {
        min-width: calc(100% - 40px);
    }
}

.wrapper-mini {
    width: 400px;
    margin: 0 auto
}

@media only screen and (max-width: 1200px) {
    .wrapper-mini {
        width: 400px;
    }
}

@media only screen and (max-width: 1024px) {
    .wrapper-mini {
        min-width: 780px;
    }
}

@media only screen and (max-width: 500px) {
    .wrapper-mini {
        min-width: calc(100% - 40px);
    }
}

.wrapper:after,
.wrapper-small:after,
.wrapper-mini:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0
}

.left-float {
    float: left
}

.right-float {
    float: right
}

.align-center {
    text-align: center
}

.align-right {
    text-align: right
}

.text-light {
    color: #ffffff
}

.colored {
    color: #ea4452
}

.wolf-container {
    width: 100%;
    *display: inline-block;
    height: 1%
}

.wolf-container:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0
}

.wolf-item {
    float: left;
    width: calc(50% - 40px);
    margin-right: 80px;
    margin-bottom: 160px;
    position: relative;
    left: 0px
}

.wolf-item.wthird {
    width: calc(33.2% - 53px)
}

.wolf-item.wfull {
    width: 100%;
    margin-right: 0px
}

.wolf-item.wright {
    margin-right: 0px
}

.wolf-item-inner {
    display: inline-block;
    max-width: 85%;
    position: relative;
    float: left
}

.vcenter .wolf-item-inner {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%
}

.wolf-item.wright .wolf-item-inner {
    float: right
}

.wolf-item.wmiddle .wolf-item-inner {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%
}

.wolf-item.wmiddle.vcenter .wolf-item-inner {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%
}

.wolf-item.wolfmediafull .wolf-item-inner {
    max-width: 100%
}

.wolf-mouseparallax {
    position: relative;
    height: 100%
}

.wolf-item-inner>.wolf-media {
    position: relative;
    z-index: 0
}

.wolf-item .wolf-caption:not(.static) {
    position: absolute;
    top: 40px;
    right: 0px;
    max-width: 600px;
    text-align: left;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
    z-index: 1
}

.wolf-item.wfull .wolf-caption:not(.static) {
    max-width: 80%
}

.wolf-item.wright .wolf-caption:not(.static) {
    top: auto;
    bottom: 40px;
    left: 0px;
    right: auto;
    text-align: right;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px)
}

.wolf-item .wolf-caption.ctop:not(.static) {
    top: 40px;
    bottom: auto
}

.wolf-item .wolf-caption.cbottom:not(.static) {
    top: auto;
    bottom: 40px
}

.wolf-item .wolf-caption.cleft:not(.static) {
    left: -120px;
    right: inherit;
    text-align: right
}

.wolf-item .wolf-caption.cright:not(.static) {
    right: -120px;
    left: inherit;
    text-align: left
}

.wolf-item .wolf-caption.ccenter:not(.static) {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    right: 0px;
    width: 50%;
    min-width: 240px
}

.wolf-item.wolf-text .wolf-item-inner {
    position: static
}

.wolf-item.wolf-text .wolf-caption:not(.static) {
    max-width: 80%;
    right: 0;
    top: 40px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
}

.wolf-item.wolf-text.wright .wolf-caption:not(.static) {
    right: auto;
    left: 0
}

.wolf-item.wolf-text .wolf-caption:not(.static) .wolf-caption-inner {
    position: relative;
    left: auto;
    right: auto
}

.wolf-item .wolf-caption.static {
    position: static;
    top: auto;
    right: auto;
    right: auto;
    max-width: 100%
}

.wolf-item.filter-out {
    display: none
}

.wolf-responsive .wolf-item {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 80px
}

.wolf-responsive .wolf-item .wolf-item-inner {
    margin-top: 0px !important;
    width: 85% !important;
    max-width: 85% !important
}

.wolf-responsive .wolf-media {
    top: 0 !important
}

.wolf-responsive .wolf-media:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0
}

.wolf-responsive .wolf-caption:not(.static) {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-left: -15% !important;
    margin-top: -40px !important;
    display: inline-block;
    max-width: 100% !important;
    width: 100% !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important
}

.wolf-responsive .wleft .wolf-caption:not(.static) {
    float: right;
    margin-right: -15% !important
}

.wolf-responsive .wolf-item .wolf-caption .wolf-caption-inner {
    position: relative;
    left: auto;
    right: auto
}

.wolf-responsive .wolf-caption.ccenter {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
}

.portfolio-wolf-item .portfolio-caption a {
    text-decoration: none;
    color: #313131;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease 0.05s;
    display: block
}

@media only screen and (max-width: 1025px) {
    .portfolio-wolf-item .portfolio-caption a {
        border: 0px;
    }
}

.portfolio-wolf-item .portfolio-caption a:hover {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px)
}

.portfolio-wolf-item .portfolio-caption a h3 {
    font-size: 30px;
    letter-spacing: 8px;
    font-weight: 400;
    margin: 0px;
    padding: 0px;
    font-family: 'geomanist_regularregular', sans-serif
}

@media only screen and (max-width: 1200px) {
    .portfolio-wolf-item .portfolio-caption a h3 {
        font-size: 24px;
    }
}

.portfolio-wolf-item .portfolio-caption a p {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 9px;
    text-decoration: line-through;
    padding: 0px;
    margin: 0px;
    margin-top: 10px
}

@media only screen and (max-width: 1200px) {
    .portfolio-wolf-item .portfolio-caption a p {
        font-size: 12px;
    }
}

.portfolio-wolf-item .portfolio-caption.hovered a {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px)
}

.portfolio-wolf-item .portfolio-caption span {
    letter-spacing: 0px
}

.portfolio-wolf-item.wright .portfolio-caption a:hover,
.portfolio-wolf-item.wright .portfolio-caption.hovered a {
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px)
}

.portfolio-wolf-item .portfolio-media a.wolf-media-link img {
    transition: all 0.5s ease 0.05s;
    width: 430px;
    height: auto
}

.portfolio-wolf-item .portfolio-media a.wolf-media-link:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05)
}

.portfolio-wolf-item .portfolio-media.hovered a.wolf-media-link img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05)
}

#heno .wolf-caption:not(.static) {
    top: 150px !important
}

@media only screen and (max-width: 1025px) {
    #heno .wolf-caption:not(.static) {
        top: 0px !important;
    }
}

#volcanic .wolf-caption:not(.static) {
    top: 20px !important;
    bottom: auto important
}

@media only screen and (max-width: 1025px) {
    #volcanic .wolf-caption:not(.static) {
        top: 0px !important;
    }
}

#metro .wolf-caption:not(.static) {
    top: 80px !important
}

@media only screen and (max-width: 1025px) {
    #metro .wolf-caption:not(.static) {
        top: 0px !important;
    }
}

#tea .wolf-caption:not(.static) {
    top: 40px !important
}

@media only screen and (max-width: 1025px) {
    #tea .wolf-caption:not(.static) {
        top: 0px !important;
    }
}

.wolf-responsive .wolf-item {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 80px
}

.wolf-responsive .wolf-item .wolf-item-inner {
    margin-top: 0px !important;
    width: 85% !important;
    max-width: 85% !important
}

.wolf-responsive .wolf-media {
    top: 0 !important
}

.wolf-responsive .wolf-media:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0
}

.wolf-responsive .wolf-caption:not(.static) {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-left: -15% !important;
    margin-top: -40px !important;
    display: inline-block;
    max-width: 100% !important;
    width: 100% !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important
}

.wolf-responsive .wleft .wolf-caption:not(.static) {
    float: right;
    margin-right: -15% !important
}

.wolf-responsive .wolf-item .wolf-caption .wolf-caption-inner {
    position: relative;
    left: auto;
    right: auto
}

.wolf-responsive .wolf-caption.ccenter {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
}

.modalwindow {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: scroll;
    background: white;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    transform: translate3d(0%, 0%, 0);
    -webkit-transform: translate3d(0%, -100%, 0);
    -moz-transform: translate3d(0%, -100%, 0);
    -ms-transform: translate3d(0%, -100%, 0);
    -o-transform: translate3d(0%, -100%, 0);
    -webkit-backface-visibility: hidden;
    opacity: 0
}

.closex {
    background: #FFF;
    z-index: 99998;
    position: fixed;
    width: 50px;
    height: 50px;
    right: 50px;
    top: 50px;
    cursor: pointer
}

.closex .inner-closex {
    background: url("../img/closex.png");
    background-size: cover;
    width: 100%;
    height: 100%;
    transition: ease-in-out all 0.33s;
    -webkit-transition: ease-in-out all 0.33s;
    -moz-transition: ease-in-out all 0.33s;
    -o-transition: ease-in-out all 0.33s
}

.closex:hover>.inner-closex {
    opacity: 0.5;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg)
}

@media screen and (max-width: 768px) {
    .closex {
        top: 0px;
        right: 0px;
    }
}

.show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0)
}

.owl-carousel .animated {
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.owl-height {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out
}

.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px)
}

.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-controls .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: red;
    color: blue
}

.owl-carousel.owl-loaded {
    display: block
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel .owl-refresh .owl-item {
    display: none
}

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    -webkit-transform-style: preserve-3d
}

.owl-carousel.owl-text-select-on .owl-item {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto
}

.owl-carousel .owl-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.no-js .owl-carousel {
    display: block
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease
}

.owl-carousel .owl-item img {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url("owl.video.play.png") no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: scale 100ms ease;
    -moz-transition: scale 100ms ease;
    -ms-transition: scale 100ms ease;
    -o-transition: scale 100ms ease;
    transition: scale 100ms ease
}

.owl-carousel .owl-video-play-icon:hover {
    -webkit-transition: scale(1.3, 1.3);
    -moz-transition: scale(1.3, 1.3);
    -ms-transition: scale(1.3, 1.3);
    -o-transition: scale(1.3, 1.3);
    transition: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1
}

.logos {
    width: 100%;
    margin: 60px auto 0px auto;
    background: white;
    padding: 0px
}

.logos:hover {
    cursor: move
}

.logos a:hover {
    cursor: move
}

.logos .logobox a img:hover {
    opacity: 0.8
}

#about .container {
    width: 800px;
    padding: 100px 0px;
    text-align: center
}

@media screen and (max-width: 950px) {
    #about .container {
        width: 85%;
        margin: 0px auto;
    }
}

#about .container p {
    font-weight: 400;
    line-height: 2;
    letter-spacing: 1.5px;
    font-size: 16px;
    font-size: 13px
}

.whatido {
    width: 100%;
    height: 100vh;
    overflow: hidden
}

@media screen and (max-width: 1000px) {
    .whatido {
        height: auto;
    }
}

.whatido .whatidocontainer {
    max-width: 100%;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    overflow: hidden;
    background-color: #eeeeee
}

@media screen and (max-width: 700px) {
    .whatido .whatidocontainer {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
    }
}

#parallaxbg {
    overflow: hidden;
    padding-top: 400px;
    z-index: -1
}

@media screen and (max-width: 1000px) {
    #parallaxbg {
        display: none;
    }
}

.layer {
    min-width: 100% !important;
    min-height: 100% !important;
    overflow: hidden
}

.layer.leight {
    top: -1000px !important;
    right: -70% !important;
    left: auto !important
}

.layer.leight img {
    width: 1342px;
    height: auto
}

@media screen and (max-width: 1500px) {
    .layer.leight img {
        width: 1200px;
    }
}

@media screen and (max-width: 1000px) {
    .layer.leight img {
        display: none;
    }
}

.layer.lseven {
    bottom: -800px !important;
    left: -750px !important
}

.layer.lseven img {
    width: 1079px;
    height: auto
}

@media screen and (max-width: 1500px) {
    .layer.lseven img {
        width: 979px;
    }
}

@media screen and (max-width: 460px) {
    .layer.lseven img {
        display: none;
    }
}

.layer.lsix {
    top: -800px !important;
    margin-left: -100px
}

@media screen and (max-width: 1250px) {
    .layer.lsix {
        margin-left: -300px;
    }
}

.layer.lsix img {
    width: 815px;
    height: auto
}

@media screen and (max-width: 1500px) {
    .layer.lsix img {
        width: 715px;
    }
}

@media screen and (max-width: 460px) {
    .layer.lsix img {
        display: none;
    }
}

.layer.lfour {
    top: 100px !important;
    right: -80% !important;
    left: auto !important
}

.layer.lfour img {
    width: 410px;
    height: auto
}

@media screen and (max-width: 1500px) {
    .layer.lfour img {
        width: 310px;
    }
}

@media screen and (max-width: 460px) {
    .layer.lfour img {
        display: none;
    }
}

.layer.lthree {
    top: 190px !important;
    left: 300px !important;
    top: auto
}

.layer.lthree img {
    width: 572px;
    height: auto
}

@media screen and (max-width: 1500px) {
    .layer.lthree img {
        width: 450px;
    }
}

@media screen and (max-width: 937px) {
    .layer.lthree img {
        display: none;
    }
}

@media screen and (min-height: 1000px) {
    .layer.lthree {
        top: 390px !important;
    }
}

@media screen and (min-height: 1300px) {
    .layer.lthree {
        top: 490px !important;
    }
}

.layer.lone {
    top: -500px !important;
    right: -40% !important;
    left: auto !important
}

.layer.lone img {
    width: 580px;
    height: auto
}

@media screen and (max-width: 1500px) {
    .layer.lone img {
        width: 480px;
    }
}

@media screen and (max-width: 800px) {
    .layer.lone img {
        display: none;
    }
}

.thatcontent {
    position: absolute;
    z-index: 5;
    height: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0px auto;
    left: 0;
    right: 0
}

@media screen and (max-width: 1000px) {
    .thatcontent {
        position: relative;
        height: auto;
    }
}

.thatcontent .container {
    top: 50%;
    transform: translateY(-50%);
    margin-top: -25px
}

@media screen and (max-width: 1000px) {
    .thatcontent .container {
        margin-top: 0px;
        top: auto;
        transform: none;
        padding-top: 150px;
        padding-bottom: 180px;
    }
}

.thatcontent h2 {
    text-align: center;
    font-weight: 400;
    letter-spacing: 5px;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 15px
}

.thatcontent p {
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    width: 85%;
    margin: 0px auto;
    line-height: 1.5;
    letter-spacing: 1px
}

.thatcontent svg {
    width: 60px;
    margin: 0px auto;
    display: block
}

.resume {
    width: 100%;
    margin: 0px;
    position: relative;
    background: white;
    height: 1620px;
    overflow: hidden
}

@media screen and (max-width: 900px) {
    .resume {
        height: auto !important;
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    .resume {
        height: 1427px;
    }
}

@media screen and (max-width: 976px) {
    .resume {
        padding-bottom: 5%;
    }
}

@media screen and (max-width: 730px) {
    .resume {
        display: none;
    }
}

.resumemargin {
    margin: 30px;
    background: #f1f1f1;
    position: relative;
    overflow: hidden;
    height: 100%
}

.resumecontainer {
    width: 1150px;
    margin: 0px auto
}

@media screen and (max-width: 1000px) {
    .resumecontainer {
        width: 90%;
        margin: 0px auto;
    }
}

@media screen and (max-width: 976px) {
    .resumecontainer {
        width: 80%;
        margin: 0px auto;
    }
}

.part1 {
    display: block;
    margin-left: 235px;
    margin-top: 762px;
    position: absolute;
    z-index: 4
}

.part1 a:hover {
    cursor: url("../img/downloadicon.png") 40 40, crosshair;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

@media screen and (max-width: 1000px) {
    .part1 {
        display: block;
        margin-left: 20%;
        margin-top: 762px;
        position: absolute;
        z-index: 4;
    }
    .part1 img {
        width: 80%
    }
}

@media screen and (max-width: 976px) {
    .part1 {
        margin-left: 25%;
        display: inline-block;
        width: 55%;
    }
    .part1 img {
        width: 100%
    }
}

.part2 {
    margin-top: 40px;
    display: block;
    margin-left: 249px;
    position: absolute;
    z-index: 3
}

@media screen and (max-width: 1000px) {
    .part2 {
        display: block;
        margin-left: 21%;
        position: absolute;
        z-index: 3;
    }
    .part2 img {
        width: 80%
    }
}

@media screen and (max-width: 976px) {
    .part2 {
        margin-left: 25.5%;
        display: inline-block;
        width: 55%;
    }
    .part2 img {
        width: 99%
    }
}

.part3 {
    margin-top: 666px;
    margin-left: 240px;
    position: absolute
}

@media screen and (max-width: 1000px) {
    .part3 {
        margin-top: 688px;
        margin-left: 20.4%;
        position: absolute;
    }
    .part3 img {
        width: 80%
    }
}

@media screen and (max-width: 976px) {
    .part3 {
        margin-left: 25.5%;
        display: inline-block;
        width: 55%;
    }
    .part3 img {
        width: 100%
    }
}

.part4 {
    margin-top: 761px;
    float: left;
    display: inline-block
}

@media screen and (max-width: 1000px) {
    .part4 {
        margin-top: 761px;
        float: left;
        display: inline-block;
    }
    .part4 img {
        width: 80%
    }
}

@media screen and (max-width: 976px) {
    .part4 {
        margin-top: 805px;
        width: 27%;
        display: inline-block;
    }
    .part4 img {
        width: 100%
    }
}

.part5 {
    margin-top: 832px;
    float: right;
    display: inline-block
}

@media screen and (max-width: 1000px) {
    .part5 {
        margin-top: 871px;
        float: right;
        display: inline-block;
        margin-right: -16%;
    }
    .part5 img {
        width: 74%
    }
}

@media screen and (max-width: 976px) {
    .part5 {
        display: none;
    }
}

#footer {
    width: 100%;
    margin: 0px auto;
    position: relative;
    letter-spacing: 1px
}

#footer .footercontainer {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    margin-bottom: 30px
}

#footer .span_4_of_12 {
    width: 33.3%;
    margin: 0px;
    padding: 0px
}

@media screen and (max-width: 1019px) {
    #footer .span_4_of_12.social {
        width: 64%;
        float: right;
        margin-right: 0px;
    }
}

@media screen and (max-width: 530px) {
    #footer .span_4_of_12.social {
        width: 100%;
        float: none;
        margin-right: 0px;
        margin: 0px auto;
        display: block;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 530px) {
    #footer .span_4_of_12 {
        width: 100%;
        margin-bottom: 20px;
    }
}

#footer a {
    text-decoration: none
}

#footer p {
    color: #313131;
    text-align: left;
    margin: 0px;
    padding: 0px;
    font-size: 15px
}

#footer #email p {
    text-align: right
}

@media screen and (max-width: 1019px) {
    #footer #email p {
        text-align: left;
    }
}

@media screen and (max-width: 530px) {
    #footer #email p {
        text-align: center;
        letter-spacing: 3px;
    }
}

#footer ul {
    margin: 0px;
    padding: 0px;
    float: right
}

#footer ul li {
    display: inline-block;
    margin: 0px;
    padding-left: 40px
}

#footer ul li a {
    font-size: 16px;
    color: #313131;
    text-decoration: none
}

#footer ul li a:hover {
    opacity: 0.4
}

@media screen and (max-width: 530px) {
    #footer ul li a {
        font-size: 13px;
    }
}

@media screen and (max-width: 530px) {
    #footer ul {
        position: relative;
        display: block;
        width: 373px;
        margin: 0px auto;
        float: none;
    }
}

@media screen and (max-width: 1019px) {
    #footer .copyright {
        display: none;
    }
}

#description {
    width: 80%;
    margin: 0px auto;
    padding: 125px 0px 100px 0px;
    z-index: 2;
    text-align: left;
    position: relative
}

@media screen and (max-width: 1200px) {
    #description {
        padding-top: 100px;
    }
}

@media screen and (max-width: 1000px) {
    #description {
        padding-top: 80px;
    }
}

@media screen and (max-width: 850px) {
    #description {
        padding-top: 60px;
    }
}

#description h1 {
    font-size: 50px;
    font-family: 'geomanistextralight', sans-serif;
    font-weight: normal;
    color: #313131;
    margin: 0px;
    padding: 0px;
    margin-left: -4px
}

@media screen and (max-width: 1150px) {
    #description h1 {
        font-size: 50px;
    }
}

@media screen and (max-width: 600px) {
    #description h1 {
        font-size: 40px;
    }
}

#description h4 {
    font-size: 15px;
    letter-spacing: 7px;
    font-family: 'geomanist_regularregular', sans-serif;
    font-weight: 400
}

@media screen and (max-width: 1150px) {
    #description h4 {
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
    #description h4 {
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 5px;
    }
}

#description p {
    width: 40%;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 30px;
    letter-spacing: 1px
}

@media screen and (max-width: 800px) {
    #description p {
        width: 90%;
    }
}

#description p a {
    color: #313131;
    text-decoration: none;
    letter-spacing: 6px;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

#description p a:hover {
    letter-spacing: 10px
}

@media screen and (max-width: 1150px) {
    #description p {
        font-size: 14px;
        width: 70%;
    }
}

@media screen and (max-width: 800px) {
    #description p {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    #description p {
        font-size: 13px;
    }
}

.portfolio-item {
    background-color: #f1f1f1;
    overflow: hidden
}

@media screen and (max-width: 700px) {
    .portfolio-item {
        margin: 0px;
    }
}

.portfolio-item img#work-04webimg {
    position: relative;
    width: 100%;
    margin-top: -130px
}

.portfolio-item img.first-img {
    margin-top: -150px;
}

@media screen and (max-width: 1000px) {
    .portfolio-item img#work-04webimg {
        margin-top: -108px;
        width: 100%;
    }
    .portfolio-item img.first-img {
        margin-top: -10px;
    }
}

@media screen and (max-width: 525px) {
    .portfolio-item img#work-04webimg {
        margin-top: -90px;
    }
}

.portfolio-item img#webmockup {
    width: 65%;
    height: auto;
    margin: 0px auto;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block
}

.portfolio-item img.center {
    margin: 0px auto;
    display: block
}

.modalwindow .borderbottom {
    width: 100%;
    bottom: 0;
    right: 0;
    height: 30px;
    background: white;
    z-index: 10
}

.btnwrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 100px;
    text-align: center
}

.btnwrapper .btn {
    position: relative;
    border: 1px solid #313131;
    z-index: 2;
    padding: 12px 22px;
    margin: 0 10px;
    box-sizing: border-box;
    font-size: 20px;
    letter-spacing: 6px;
    text-decoration: none;
    color: #313131;
    font-family: 'geomanistextralight', sans-serif;
    font-weight: 400
}

@media screen and (max-width: 850px) {
    .btnwrapper .btn {
        font-size: 16px;
    }
}

.btnwrapper .btn span {
    letter-spacing: 0px
}

.btnwrapper .btn:active:before {
    top: -10px;
    left: 18px;
    width: 100%;
    height: 100%;
    pointer: cursor
}

.btnwrapper .btn:hover:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer: cursor
}

.btnwrapper .btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 12px;
    left: -14px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    background-color: white;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.work-02 #description p {
    width: 70%
}

@media screen and (max-width: 1250px) {
    .work-02 #description p {
        width: 60%;
    }
}

@media screen and (max-width: 760px) {
    .work-02 #description p {
        width: 80%;
    }
}

@media screen and (max-width: 515px) {
    .work-02 #description p {
        width: 100%;
    }
}

.work-02 img#volcanicimage {
    float: right;
    width: 90%;
    margin-top: -200px
}

@media screen and (max-width: 1250px) {
    .work-02 img#volcanicimage {
        margin-top: -120px;
    }
}

@media screen and (max-width: 639px) {
    .work-02 img#volcanicimage {
        margin-top: -100px;
    }
}

.work-02 img#logo {
    width: 100%;
    padding-top: 100px
}

@media screen and (max-width: 1000px) {
    .work-02 img#logo {
        padding-top: 40px;
    }
}

.work-02 img#computor {
    margin: 0px auto;
    width: 100%;
    padding-top: 150px;
    padding-bottom: 100px
}

@media screen and (max-width: 760px) {
    .work-02 img#computor {
        padding-top: 70px;
        padding-bottom: 40px;
    }
}

.metro #metroimg {
    width: 100%;
    position: relative;
    height: auto;
    margin-top: -300px;
    padding-bottom: 108px;
    float: right
}

.metro #metroimg img {
    position: relative;
    float: right;
    width: 90%
}

@media screen and (max-width: 900px) {
    .metro #metroimg img {
        width: 100%;
    }
}

@media screen and (max-width: 1150px) {
    .metro #metroimg {
        margin-top: -200px;
    }
}

@media screen and (max-width: 900px) {
    .metro #metroimg {
        margin-top: -150px;
    }
}

.metro img.full {
    width: 100%
}

.metro img#folders {
    padding-top: 140px;
    width: 75%
}

.metro img#flats {
    padding-top: 50px
}

@media screen and (max-width: 1050px) {
    .metro img#last {
        width: 80%;
        margin: 0px auto;
        display: block;
    }
}

.metro .btnwrapper {
    margin-bottom: 125px
}

.infinitea #description p {
    width: 33%;
    font-size: 15px;
    line-height: 1.6
}

.infinitea img#cups {
    position: absolute;
    top: 30px;
    right: 30px
}

.infinitea img#product {
    width: 80%;
    margin-bottom: 125px
}

.infinitea .twocolfill {
    margin-top: 480px;
    width: 100%;
    position: relative;
    z-index: 6;
    display: block;
    height: 600px;
    overflow: hidden;
    margin-bottom: 150px
}

.infinitea .twocolfill img {
    width: 50%;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    float: left
}

.typoforstyles img {
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: block
}

.typoforstyles img.main {
    margin-top: -190px
}

@media screen and (max-width: 1150px) {
    .typoforstyles img.main {
        margin-top: -150px;
    }
}

.liveworm img#main {
    position: relative;
    float: right;
    width: 80%;
    margin-top: -300px
}

@media screen and (max-width: 1150px) {
    .liveworm img#main {
        margin-top: -210px;
    }
}

@media screen and (max-width: 800px) {
    .liveworm img#main {
        margin-top: -158px;
        width: 96%;
    }
}

.liveworm img#web {
    width: 60%;
    margin-bottom: 100px
}

@media screen and (max-width: 800px) {
    .liveworm img#web {
        width: 80%;
        margin-bottom: 80px;
    }
}

.work-08 #description p {
    width: 38%
}

@media screen and (max-width: 1000px) {
    .work-08 #description p {
        width: 80%;
    }
}

.work-08 img#main {
    position: relative;
    float: right;
    margin-top: -392px;
    width: 60%
}

@media screen and (max-width: 1000px) {
    .work-08 img#main {
        margin-top: -100px;
        width: 90%;
    }
}

.work-08 img.center {
    margin-bottom: 100px
}

@media screen and (max-width: 1150px) {
    .work-08 img.center {
        width: 80%;
        margin: 0px auto;
        margin-bottom: 100px;
    }
}

.work-05 #description p {
    width: 70%
}

@media screen and (max-width: 1180px) {
    .work-05 #description p {
        width: 80%;
    }
}

@media screen and (max-width: 1000px) {
    .work-05 #description p {
        width: 90%;
    }
}

.work-05 img#main {
    position: relative;
    float: right;
    width: 100%;
    margin-top: -200px
}

@media screen and (max-width: 1180px) {
    .work-05 img#main {
        margin-top: -120px;
    }
}

@media screen and (max-width: 1000px) {
    .work-05 img#main {
        margin-top: -90px;
    }
}

.work-04 #description p {
    width: 50%
}

@media screen and (max-width: 1000px) {
    .work-04 #description p {
        width: 90%;
    }
}

.work-04 img#login {
    margin: 0px auto;
    display: block;
    margin-bottom: 40px
}

@media screen and (max-width: 1000px) {
    .work-04 img#login {
        width: 100%;
    }
}

.centertext {
    text-align: center !important
}

.centertext p {
    margin: 0px auto
}

.work-01 #description p {
    width: 70%
}

@media screen and (max-width: 1000px) {
    .work-01 #description p {
        width: 90%;
    }
}

.work-01 img {
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: block
}

.omnify #description {
    margin-bottom: 0px
}

.fullwidth img {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block
}

img.fullwidth {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block
}