@import url('https://fonts.googleapis.com/css?family=Raleway:100,300&subset=latin-ext');

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

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

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

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

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

body,
html {
    width: 100%;
}

body {
    background: #131313;
    font-family: 'Raleway', sans-serif;
    color: rgba(176, 176, 176, 1);
    font-size: 20px;
    font-weight: 300;
}

* {
    box-sizing: border-box;
}

*::selection {
    background: #ff1643;
    color: #fff;
}

a,
a.visited {
    color: #ff1643;
}



.clearfix::after,
#main::after,
#works::after {
    content: "";
    clear: both;
    display: table;
}

h1 {
    display: none;
}

h1,
h2 {
    font-size: 250%;
    margin-bottom: 5%;
    padding: 1%;
}


#main {
    position: relative;
    text-align: center;
    overflow: hidden;
}

#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg_gray@x2.jpg) no-repeat top center;
    background-size: 100%;
    z-index: 0;
}

#backgroundstroke {
    position: absolute;
    right: 0;
    top: 0;
    width: 32.1%;
}


#im_logo {
    width: 90%;
    max-width: 700px;
    display: block;
    margin: 150px auto 50px auto;
    position: relative;
}

.width {
    max-width: 1600px;
    margin: 0 auto;
}

.one,
.three {
    margin-bottom: 6%;
    width: 100%;
    padding: 1%;
    position: relative;
    line-height: 150%;
}

.one {
    font-weight: 100;
    font-size: 300%;
    letter-spacing: -1px;
}

.three {
    float: left;
    width: calc(100% / 3);
    font-size: 120%;
    padding: 1% 2%;
}

.three b {
    font-size: 150%;
}

.three svg {
    width: 40%;
}

.three svg path,
.three svg circle {
    fill: #FFE17F;
}

#works {
    margin: 0 auto;
    text-align: center;
    background: #e7e6ec url(../images/bg_works@x2.jpg) bottom center no-repeat;
    background-size: cover;
}

#works h2 {
    color: #000;
    font-weight: 100;
    padding-top: 5%;
    margin-bottom: 3%;
}

.work {
    display: inline-block;
    width: 50%;
    max-width: 250px;
    position: relative;
    margin: 5%;
    transition: transform .5s ease;
}


.work .logo {
    width: auto;
}

.work .btn {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 10;
    background: #ff1643;
    border-radius: 50%;
    top: 110%;
    left: 50%;
    margin-left: -25px;
}


.work .btn div {
    background: white;
    position: absolute;
    width: 30px;
    height: 5px;
    left: 10px;
    top: 22.5px;
    border-radius: 3px;
}

.work .btn::before,
.work .btn::after {
    content: "";
    border-radius: 3px;
    width: 5px;
    height: 15px;
    background: white;
    position: absolute;
    top: 10px;
    left: 22.5px;
    transition: transform .3s cubic-bezier(.49, 0, .36, 1.28);
}

.work .btn::after {
    top: 25px;
}

.work:hover .btn::before {
    transform: rotate(-45deg) scaleY(1.45) translate(5px, 5px);
}

.work:hover .btn::after {
    transform: rotate(45deg) scaleY(1.45) translate(5px, -5px);
}

.fancybox-is-open .fancybox-bg {
    opacity: 1 !important;
}

.fancybox-bg {
    background: #000 !important;
}

.fancybox-button {
    background: rgba(0, 0, 0, .2) !important;
}

#contact {
    text-align: center;
    font-size: 140%;
    font-weight: 100;
    color: #000;
    margin: 10% auto;
    width: 50%;
}

#contact a {
    font-size: 125%;
    text-decoration: none;
    background-color: #ff1643;
    border-radius: 8px;
    padding: 5px 10px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #fff;
}


#footer {
    margin: 2% 0;
    text-align: center;
    font-size: 75%;
    line-height: 120%;
}

#footer svg {
    width: 40px;
}


/* displays */
@media screen and (max-width: 767px) {

    #background {
        background-image: url(../images/bg_gray.jpg);
    }

    #im_logo {
        margin: 50px auto 20px auto;
    }

    body {
        font-size: 16px;
    }


    b {
        font-size: 120%;
    }

    .one {
        font-size: 150%;
        font-weight: 300;
    }

    .three {
        font-size: 150%;
        line-height: 150%;
        width: 100%;
        margin-bottom: 15%;
    }

    .three {
        font-size: 115%;
    }

    .three svg {
        width: 20%;
    }

    #works {
        background-image: url(../images/bg_works@x2.jpg);
    }

    #works h2 {
        padding-top: 15%;
        margin-bottom: 10%;
    }

    .work {
        margin: 5% 5% 20%;
    }

    #contact {
        width: 90%;
    }

    #contact a {
        font-size: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 14px;
    }

    h1,
    h2 {
        font-size: 150%;
    }

    .two,
    .three {
        font-size: 140%;
        line-height: 140%;
        padding: 1%;
        margin-bottom: 10%;
    }

    .three {
        font-size: 100%;
    }

    b {
        font-size: 125%;
    }

    #works a {
        max-width: 300px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    body {
        font-size: 16px;
    }

    h1,
    h2 {
        font-size: 180%;
    }


    .two {
        font-size: 150%;
        line-height: 140%;
        padding: 1%;
        margin-bottom: 10%;
    }

    b {
        font-size: 120%;
    }

    .three {
        font-size: 125%;
        line-height: 130%;
        padding: 1%;
        margin-bottom: 10%;
    }
}

/* reveal */

#background {
    opacity: 0;
    animation: revealopacity 2s 1s ease forwards;
}

@keyframes revealopacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#im_logo circle,
#im_logo path,
#backgroundstroke path {
    fill-opacity: 0;
    stroke: #fff;
    stroke-width: 1px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s ease forwards;
}

#backgroundstroke path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}



@keyframes dash {
    0% {
        fill-opacity: 0;
    }

    20% {
        fill-opacity: 0;
        stroke-opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-opacity: 0;
        fill-opacity: 1;
    }
}

.reveal {
    position: relative;
    animation: revealtext 1s cubic-bezier(1, 0, .7, 1) forwards;
    transform-origin: 100% 100%;
    color: rgba(176, 176, 176, 0);
}

@keyframes revealtext {
    0% {
        color: rgba(176, 176, 176, 0);
    }

    50% {
        color: rgba(176, 176, 176, 0);
    }

    51% {
        color: rgba(176, 176, 176, 1);
    }

    100% {
        color: rgba(176, 176, 176, 1);
    }
}

.three svg {
    animation: revealsvg 1s cubic-bezier(1, 0, .7, 1) forwards;
    opacity: 0;
}

@keyframes revealsvg {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    51% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }

}

.reveal::after,
.reveal::before {
    content: "";
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: revealab 1s cubic-bezier(1, 0, .7, 1) forwards;
    animation-delay: inherit;
    transform-origin: 0% 100%;
    opacity: 0;
}

.reveal::before {
    background: #FFE17F;
    animation-delay: 0.2s;
}

#r1,
#r1::after {
    animation-delay: 0.51s;
}

#r1::before {
    animation-delay: 0.71s;
}

#r2,
#r2::after {
    animation-delay: 0.23s;
}

#r2::before {
    animation-delay: 0.53s;
}

#r3,
#r3::after {
    animation-delay: 0.19s;
}

#r3::before {
    animation-delay: 0.39s;
}

#r4,
#r4::after {
    animation-delay: 0.44s;
}

#r4::before {
    animation-delay: 0.64s;
}

#r9,
#r9 svg,
#r9::after {
    animation-delay: 0.58s;
}

#r9::before {
    animation-delay: 0.78s;
}

#r10,
#r10 svg,
#r10::after {
    animation-delay: 0.34s;
}

#r10::before {
    animation-delay: 0.54s;
}

#r11,
#r11 svg,
#r11::after {
    animation-delay: 0.05s;
}

#r11::before {
    animation-delay: 0.25s;
}



@keyframes revealab {
    0% {
        transform: scaleX(0);
        opacity: 1;
    }

    50% {
        transform: scaleX(1);
        transform-origin: 0% 100%;
    }

    51% {
        transform-origin: 100% 100%;
    }

    100% {
        transform: scaleX(0);
        transform-origin: 100% 100%;
        opacity: 1;
    }
}

@keyframes revealab2 {
    0% {
        transform: scaleX(0);
        opacity: 1;
    }

    80% {
        transform: scaleX(1);
        transform-origin: 0% 100%;
    }

    81% {
        transform-origin: 100% 100%;
    }

    100% {
        transform: scaleX(0);
        transform-origin: 100% 100%;
        opacity: 1;
    }
}

/* svg animations */
#designplus1 {
    animation: rotate-360 15s infinite ease;
    transform-origin: 95% 35%;
}

#designplus2 {
    animation: rotate360c 5s infinite ease;
    transform-origin: 24% 5%;
}

#designpencil {
    animation: designpencil 1s infinite linear;
    transform-origin: 24% 5%;
}

#designline1a {
    animation: scalex 10s infinite ease;
    transform-origin: 80% 5%;
}

#designline1b {
    animation: scalex 10s infinite ease;
    transform-origin: 100% 5%;
}

#designline2a {
    animation: scalex 20s infinite ease;
    transform-origin: 0% 20%;
}

#designline2b {
    animation: scalex 20s infinite ease;
    transform-origin: 20% 20%;
}

#designline3a {
    animation: scalex 15s infinite ease;
    transform-origin: 0% 20%;
}

#designline3b {
    animation: scalex 15s infinite ease;
    transform-origin: 20% 20%;
}

#designline4a {
    animation: scalex 25s infinite ease;
    transform-origin: 0% 20%;
}

#designline4b {
    animation: scalex 25s infinite ease;
    transform-origin: 100% 20%;
}

#designline5a {
    animation: scalex 35s infinite ease;
    transform-origin: 0% 20%;
}

#designline5b {
    animation: scalex 15s infinite ease;
    transform-origin: 100% 20%;
}

#designline6 {
    animation: scalex 5s infinite ease;
    transform-origin: 100% 20%;
}

#designline7a {
    animation: scalex 20s infinite ease;
    transform-origin: 80% 20%;
}

#designline7b {
    animation: scalex 10s infinite ease;
    transform-origin: 100% 20%;
}

#designline8a {
    animation: scaley 20s infinite ease;
    transform-origin: 5% 70%;
}

#designline8b {
    animation: scaley 10s infinite ease;
    transform-origin: 5% 100%;
}

#createline1 {
    animation: scalex 10s infinite ease;
    transform-origin: 70% 95%;
}

#createline2a {
    animation: scalex 25s infinite ease;
    transform-origin: 70% 95%;
}

#createline2b {
    animation: scalex121 20s infinite ease;
    transform-origin: 70% 95%;
}

#createplus {
    animation: rotate360b 20s infinite ease;
    transform-origin: 5.5% 5.5%;
}

#createline3 {
    animation: scalex 20s infinite ease;
    transform-origin: 95% 100%;
}

#createline4 {
    animation: scalex 5s infinite ease alternate;
    transform-origin: 90% 95%;
}

#createline5 {
    animation: scalex1-121 10s infinite ease alternate;
    transform-origin: 90% 95%;
}

#createline6 {
    animation: scalex1-121 10s infinite ease alternate;
    transform-origin: 90% 95%;
}

#createpic {
    animation: scalex1121 10s infinite ease;
    transform-origin: 12% 95%;
}

#serviceline1a {
    animation: scalex 10s infinite ease;
    transform-origin: 70% 95%;
}

#serviceline1b {
    animation: scalex121 10s infinite ease;
    transform-origin: 100% 95%;
}

#serviceplus {
    animation: rotate360b 10s infinite ease;
    transform-origin: 11% 95%;
}

#servicegear {
    animation: rotate360 40s infinite linear;
    transform-origin: 50% 65%;
}

@keyframes rotate360 {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes rotate360b {
    0% {
        transform: rotate(0)
    }

    10% {
        transform: rotate(360deg)
    }

    45% {
        transform: rotate(360deg)
    }
}

@keyframes scalex121 {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(2)
    }

    0% {
        transform: scaleX(1)
    }
}

@keyframes scalex1121 {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(1.2)
    }

    0% {
        transform: scaleX(1)
    }
}

@keyframes scalex1-121 {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(.8)
    }

    0% {
        transform: scaleX(1)
    }
}

@keyframes scaley {
    0% {
        transform: scaleY(1)
    }

    50% {
        transform: scaleY(.9)
    }

    0% {
        transform: scaleY(1)
    }
}

@keyframes scalex {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(.8)
    }

    0% {
        transform: scaleX(1)
    }
}

@keyframes designpencil {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(.3deg)
    }

    50% {
        transform: rotate(0)
    }

    75% {
        transform: rotate(-.3deg)
    }
}

@keyframes rotate360c {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(360deg)
    }

    60% {
        transform: rotate(360deg)
    }
}

@keyframes rotate-360 {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(-360deg)
    }

    60% {
        transform: rotate(-360deg)
    }
}