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

/* Reset */
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;
}

/* HTML5 display-role reset for older browsers */
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;
}

/* End Reset */

/* Style tag */
#content H1,
#content H2,
#content H3,
#content H4,
#content H5,
#content H6 {
    font-family: 'hagin-caps-medium', Arial, Helvetica, san-serif;
    margin: 0 0 15px;
    color: #564027;
    line-height: 100%;
}

#content H1 {
    font-size: 30px;
}

#content H2 {
    font-size: 28px;
}

#content H3 {
    font-size: 26px;
}

#content H4 {
    font-size: 24px;
}

#content H5 {
    font-size: 22px;
}

#content H6 {
    font-size: 20px;
}

#content P,
#content UL,
#content PRE,
#content OL,
#content BLOCKQUOTE,
#content FORM,
#content INPUT,
#content TEXTAREA,
#content SELECT,
#content BUTTON,
#content TABLE,
#content TR,
#content TD,
#content TH {
    margin: 0 0 10px;
    font: 18px/100% 'Glegoo', Arial, Helvetica, san-serif;
    color: #83817f;
}

#content TH, #content TD {
    padding: 10px;
}

#content A {
    line-height: 100%;
    font: 18px/100% 'Glegoo', Arial, Helvetica, san-serif;
    color: #e2b15f;
}

#content .alignleft {
    float: left;
    margin: 0 15px 15px 0;
}

#content .alignright {
    float: right;
    margin: 0 0 15px 15px;
}

#content UL {
    list-style-type: disc;
    margin: 0 14px 10px;
}

#content OL {
    list-style-type: decimal;
    margin: 0 18px 10px;
}

#content OL LI, #content UL LI {
    margin: 0 0 10px;
}

TEXTAREA {
    resize: none;
    overflow: auto;
}

A:focus {
    outline: 0;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

.clear {
    clear: both;
    height: 0;
    line-height: 0px;
    font-size: 1px;
}

A {
    text-decoration: none;
}

A:HOVER {
    text-decoration: underline;
}

IMG {
    border: none;
    display: block;
}

LABEL {
    cursor: pointer;
}

BUTTON SPAN {
    display: none;
}

BUTTON {
    cursor: pointer;
}

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

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
    padding: 0;
    margin: 0;
}

input:focus {
    border: none;
    outline: none;
}

/* End Style tag */
BODY {
    background: #fff;
    margin: 0;
    padding: 0;
    text-align: left;
    font: 18px/100% 'Glegoo', Arial, Helvetica, san-serif;
    color: #83817f;
    min-width: 1130px;
    -webkit-transform: translateZ(0px);
}

.container {
    width: 1130px;
    margin: auto;
    padding: 0 10px;
    position: relative;
    z-index: 10;
}

/* HEADER */
HEADER {
    background: url("../images/bg/bg-img-1.jpg") no-repeat;
    background-size: cover;
    overflow: hidden;
}

.wrap-container {
    max-width: 1600px;
    width: 100%;
    margin: auto;
    position: relative;
}

HEADER .container:after {
    content: "";
    position: absolute;
    right: -909px;
    width: 995px;
    height: 1500px;
    top: -200px;
    background: rgba(226, 177, 95, 0.19);
    transform: rotate(28deg);
    -webkit-transform: rotate(28deg);
    -moz-transform: rotate(28deg);
    -o-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    z-index: 10;
}

HEADER .wrap-container {
    overflow: hidden;
}

HEADER .wrap-bg {
    max-width: 1600px;
    width: 100%;
    margin: auto;
    position: relative;
}

HEADER .wrap-bg:before {
    content: "";
    position: absolute;
    right: -5000px;
    top: 0;
    background: rgba(226, 177, 95, 0.19);
    width: 5000px;
    height: 100%;
}

HEADER .container {
    padding-top: 40px;
    height: 940px;
}

.logo {
    float: left;
}

NAV {
    float: right;
    overflow: hidden;
    margin: 25px 0 0;
}

NAV UL {
    margin: 0 -55px 0 0;
}

NAV LI {
    float: left;
    margin: 0 55px 0 0;
    font: 30/100% 'hagin-caps-medium', Arial, Helvetica, san-serif;
    color: #fff;
}

NAV LI A {
    display: block;
    font: 30px/100% 'hagin-caps-medium', Arial, Helvetica, san-serif;
    color: #fff;
    border-bottom: 5px solid trahsparent;
    padding: 0 0 3px;
}

NAV LI.active A,
NAV LI A:hover {
    border-bottom: 5px solid #e2b15f;
    text-decoration: none;
}

.title-box {
    padding: 170px 0 0;
}

.title-box H2 {
    font: 100px/100% 'Great Vibes', Arial, Helvetica, san-serif;
    color: #e2b15f;
    text-align: center;
    margin: 0 0 -13px;
}

.title-box H3 {
    font: 110px/100% 'hagin-caps-medium', Arial, Helvetica, san-serif;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.38);
    width: 410px;
    margin: 0 auto 19px;
}

.title-box H4 {
    font: 24px/100% 'Josefin Sans', Arial, Helvetica, san-serif;
    color: #fff;
    text-align: center;
}

/* content */
#content .bg-img-story {
    background: url("../images/bg/pattern-1.jpg") repeat;
    overflow: hidden;
}

#content .bg-img-story .wrap-container:after {
    content: "";
    position: absolute;
    right: -5000px;
    top: 0;
    background: #fff;
    width: 5000px;
    height: 100%;
}

#content .bg-img-story .container:before {
    content: "";
    position: absolute;
    right: -410px;
    width: 995px;
    height: 1500px;
    top: -200px;
    background: #fff;
    transform: rotate(28deg);
    -webkit-transform: rotate(28deg);
    -moz-transform: rotate(28deg);
    -o-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    z-index: 10;
}

#content .wrap-container .wrap-box {
    float: right;
    width: 760px;
    height: 759px;
    position: relative;
    z-index: 100;
}

#content .bg-img-story:hover .container:before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

#content .img-area {
    position: relative;
}

#content .bg-img-story .img-area:after {
    background: url("../images/bg/bg-img-2.png") no-repeat;
    content: "";
    position: absolute;
    left: 0;
    top: 145px;
    width: 756px;
    height: 501px;
    z-index: 1;
}

#content .bg-img-story .box {
    width: 540px;
    float: right;
    text-align: center;
}

#content .wrap-container .title {
    margin: 178px 0 42px 0;
    position: relative;
    padding: 0 0 43px;
}

#content .wrap-container .title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 138px;
    height: 35px;
    background: url("../images/icons/border.png") no-repeat;
    margin: 0 0 0 -69px;
}

#content .wrap-container H3 {
    font: 60px/100% 'Great Vibes', Arial, Helvetica, san-serif;
    color: #e2b15f;
    margin: 0 0 2px;
    text-align: center;
}

#content .wrap-container H4 {
    font: 60px/100% 'hagin-caps-medium', Arial, Helvetica, san-serif;
    color: #564027;
    margin: 0;
    text-align: center;
}

#content .wrap-container P {
    font: 18px/170% 'Glegoo', Arial, Helvetica, san-serif;
    color: #83817f;
    text-align: center;
    margin: 0 0 25px;
}

#content .wrap-btn {
    text-align: center;
}

#content .wrap-btn A {
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.47);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.47);
    margin: 15px 0 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    font: 24px/100% 'hagin-caps-medium', Arial, Helvetica, san-serif;
    text-align: center;
    color: #151415;
    text-align: center;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    padding: 18px 4px;
    width: 190px;
    background: rgba(156, 156, 156, 0.17);
    background: -moz-linear-gradient(top, rgba(156, 156, 156, 0.17) 0%, rgba(0, 0, 0, 0.17) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(156, 156, 156, 0.17)), color-stop(100%, rgba(0, 0, 0, 0.17)));
    background: -webkit-linear-gradient(top, rgba(156, 156, 156, 0.17) 0%, rgba(0, 0, 0, 0.17) 100%);
    background: -o-linear-gradient(top, rgba(156, 156, 156, 0.17) 0%, rgba(0, 0, 0, 0.17) 100%);
    background: -ms-linear-gradient(top, rgba(156, 156, 156, 0.17) 0%, rgba(0, 0, 0, 0.17) 100%);
    background: linear-gradient(to bottom, rgba(156, 156, 156, 0.17) 0%, rgba(0, 0, 0, 0.17) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9c9c9c', endColorstr='#000000', GradientType=0);
}

#content .wrap-btn A:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.17);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.17) 0%, rgba(156, 156, 156, 0.17) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.17)), color-stop(100%, rgba(156, 156, 156, 0.17)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.17) 0%, rgba(156, 156, 156, 0.17) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.17) 0%, rgba(156, 156, 156, 0.17) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.17) 0%, rgba(156, 156, 156, 0.17) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.17) 0%, rgba(156, 156, 156, 0.17) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#9c9c9c', GradientType=0);
}

#content .bg-img-menu {
    background: url("../images/bg/pattern-2.jpg") repeat;
    overflow: hidden;
}

#content .bg-img-menu .wrap-container:after {
    content: "";
    position: absolute;
    left: -5000px;
    top: 0;
    background: #fff;
    width: 5000px;
    height: 100%;
}

#content .bg-img-menu .container:before {
    content: "";
    position: absolute;
    left: -400px;
    width: 995px;
    height: 1500px;
    top: -200px;
    background: #fff;
    transform: rotate(-28deg);
    -webkit-transform: rotate(-28deg);
    -moz-transform: rotate(-28deg);
    -o-transform: rotate(-28deg);
    -ms-transform: rotate(-28deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    z-index: 10;
}

#content .bg-img-menu:hover .container:before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

#content .bg-img-menu .box {
    width: 540px;
    float: left;
    text-align: center;
}

#content .bg-img-menu .wrap-box {
    float: left;
    width: 760px;
    height: 759px;
    position: relative;
}

#content .bg-img-menu .img-area:after {
    background: url("../images/bg/bg-img-3.png") no-repeat;
    content: "";
    position: absolute;
    right: 0;
    top: 70px;
    width: 1040px;
    height: 1081px;
    z-index: 1;
}

#content .bg-img-client {
    background: url("../images/bg/pattern-3.jpg") repeat;
    overflow: hidden;
}

#content .bg-img-client .wrap-container:after {
    content: "";
    position: absolute;
    right: -5000px;
    top: 0;
    background: #fff;
    width: 5000px;
    height: 100%;
}

#content .bg-img-client .container:before {
    content: "";
    position: absolute;
    right: -410px;
    width: 995px;
    height: 1500px;
    top: -200px;
    background: #fff;
    transform: rotate(28deg);
    -webkit-transform: rotate(28deg);
    -moz-transform: rotate(28deg);
    -o-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    z-index: 10;
}

#content .bg-img-client:hover .container:before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

#content .bg-img-client .box {
    width: 540px;
    float: right;
    text-align: center;
}

#content .bg-img-client .wrap-box {
    float: right;
    width: 760px;
    height: 759px;
    position: relative;
}

#content .bg-img-client .img-area:after {
    background: url("../images/bg/bg-img-4.png") no-repeat;
    content: "";
    position: absolute;
    left: 40px;
    top: 148px;
    width: 578px;
    height: 500px;
    z-index: 1;
}

/* FOOTER */
.top-footer {
    background: url("../images/bg/bg-footer.png") no-repeat;
    background-size: cover;
    overflow: hidden;
}

.top-footer .container:after {
    content: "";
    position: absolute;
    left: -5000px;
    top: 0;
    background: rgba(0, 0, 0, 0.19);
    width: 5000px;
    height: 100%;
}

.top-footer .wrap-bg {
    position: relative;
    max-width: 1600px;
    margin: auto;
}

.top-footer .wrap-bg:after {
    content: "";
    position: absolute;
    left: -5000px;
    top: 0;
    background: rgba(0, 0, 0, 0.19);
    width: 5000px;
    height: 100%;
}

.top-footer .wrap-container {
    overflow: hidden;
}

.top-footer .container:before {
    content: "";
    position: absolute;
    left: -750px;
    width: 1000px;
    height: 1000px;
    top: -400px;
    background: rgba(0, 0, 0, 0.19);
    transform: rotate(28deg);
    -webkit-transform: rotate(28deg);
    -moz-transform: rotate(28deg);
    -o-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    z-index: 10;
}

.top-footer .container {
    height: 220px;
    padding: 64px 0 0;
}

.wrap-top-page {
    width: 1130px;
    padding: 0 10px;
    margin: auto;
    position: relative;
}

.top-page {
    position: absolute;
    left: 50%;
    top: -40px;
    z-index: 100000;
    background: #fff;
    width: 80px;
    height: 80px;
    margin: 0 0 0 -40px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.top-page A {
    display: block;
    text-align: center;
    font: bold 18px/100% 'Josefin Sans', Arial, Helvetica, san-serif;
    color: #101010;
    position: relative;
    padding: 44px 0 0;
}

.top-page A:hover {
    text-decoration: none;
}

.top-page A:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 18px;
    width: 18px;
    height: 11px;
    background: url("../images/icons/arrow.png") no-repeat;
    margin: 0 0 0 -9px;
}

.top-footer .left-box {
    float: left;
    width: 50%;
    overflow: hidden;
}

.top-footer .right-box {
    float: left;
    width: 50%;
    overflow: hidden;
}

.top-footer H3 {
    font: bold 24px/100% 'Josefin Sans', Arial, Helvetica, san-serif;
    color: #fff;
    margin: 0 0 23px;
}

.top-footer UL LI {
    float: left;
    width: 50%;
    font: 14px/190% 'Glegoo', Arial, Helvetica, san-serif;
    color: rgba(255, 255, 255, 0.27);
}

.top-footer UL LI P {
    float: left;
    font: 14px/190% 'Glegoo', Arial, Helvetica, san-serif;
    color: rgba(255, 255, 255, 0.27);
}

.top-footer .right-box UL LI {
    width: 33.33%;
}

.bottom-footer {
    background: #271614;
    padding: 45px 0;
}

.bottom-footer .copyright {
    text-align: center;
    font: 14px/100% 'Glegoo', Arial, Helvetica, san-serif;
    color: rgba(255, 255, 255, 0.46);
    padding: 0 10px;
}

/* Button-hover-effect */
.top-page:hover {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes pul {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pul {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.top-page:hover {
    -webkit-animation-name: pul;
    animation-name: pul;
}