.pink-hover:before,
.red-hover:before,
.white-hover:before,
.yellow-hover:before {
    bottom: 0;
    width: 100%;
    left: 0;
    content: ''
}

.pink-hover:hover .to-white-color,
.red-hover:hover .to-white-color,
.white-hover:hover .to-white-color,
.yellow-hover:hover .to-white-color {
    color: #fff
}

.flex-center,
.progress {
    -webkit-box-align: center
}

.clearfix,
.container {
    clear: both
}

.pink-hover:before,
.red-hover:before,
.top-link .lock-icon .anim:before,
.top-link .lock-icon:before,
.white-hover:before,
.yellow-hover:before {
    content: ''
}

.dog-activator:hover .dog .ear,
.dog-activator:hover .run-cloud1 {
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: .5s
}

.lb-nav a,
a,
a:active,
a:hover {
    outline: 0
}

.yellow-hover,
.yellow-hover>* {
    position: relative
}

.yellow-hover .plus-icon {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.yellow-hover:before {
    position: absolute;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    background: #f9cc3a;
    height: 0
}

.yellow-hover .to-white-color {
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.yellow-hover:hover:before {
    height: 100%
}

.yellow-hover:hover .plus-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.red-hover,
.red-hover>* {
    position: relative
}

.red-hover .plus-icon {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.red-hover:before {
    position: absolute;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    background: #e51937;
    height: 0
}

.red-hover .to-white-color {
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.red-hover:hover:before {
    height: 100%
}

.red-hover:hover .plus-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.pink-hover,
.pink-hover>* {
    position: relative
}

.pink-hover .plus-icon {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.pink-hover:before {
    position: absolute;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    background: #f47471;
    height: 0
}

.pink-hover .to-white-color {
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.pink-hover:hover:before {
    height: 100%
}

.pink-hover:hover .plus-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.white-hover,
.white-hover>* {
    position: relative
}

.white-hover .plus-icon {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.white-hover:before {
    position: absolute;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    background: #fff;
    height: 0
}

.white-hover .to-white-color {
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.white-hover:hover:before {
    height: 100%
}

.white-hover:hover .plus-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@font-face {
    font-family: montserrat-bold;
    src: url(../fonts/montserrat/MontserratBold.eot);
    src: url(../fonts/montserrat/MontserratBold.eot) format("embedded-opentype"), url(../fonts/montserrat/MontserratBold.woff) format("woff"), url(../fonts/montserrat/MontserratBold.ttf) format("truetype"), url(../fonts/montserrat/MontserratBold.html#montserrat-bold) format("svg");
    font-weight: 800
}

@font-face {
    font-family: montserrat;
    src: url(../fonts/montserrat/Regular/MontserratRegular.eot);
    src: url(../fonts/montserrat/Regular/MontserratRegular.eot) format("embedded-opentype"), url(../fonts/montserrat/Regular/MontserratRegular.woff) format("woff"), url(../fonts/montserrat/Regular/MontserratRegular.ttf) format("truetype"), url(../fonts/montserrat/Regular/MontserratRegular.html#montserrat) format("svg");
    font-weight: 800
}

@font-face {
    font-family: opensans;
    src: url(../fonts/opensans/Regular/OpenSans-Regular.eot);
    src: url(../fonts/opensans/Regular/OpenSans-Regular.eot) format("embedded-opentype"), url(../fonts/opensans/Regular/OpenSans-Regular.woff) format("woff"), url(../fonts/opensans/Regular/OpenSans-Regular.ttf) format("truetype"), url(../fonts/opensans/Regular/OpenSans-Regular.html#opensans) format("svg")
}

@font-face {
    font-family: opensans-light;
    src: url(../fonts/opensans/Light/OpenSans-Light.eot);
    src: url(../fonts/opensans/Light/OpenSans-Light.eot) format("embedded-opentype"), url(../fonts/opensans/Light/OpenSans-Light.woff) format("woff"), url(../fonts/opensans/Light/OpenSans-Light.ttf) format("truetype"), url(../fonts/opensans/Light/OpenSans-Light.html#opensans-light) format("svg")
}

@font-face {
    font-family: opensans-semibold;
    src: url(../fonts/opensans/Semibold/OpenSans-Semibold.eot);
    src: url(../fonts/opensans/Semibold/OpenSans-Semibold.eot) format("embedded-opentype"), url(../fonts/opensans/Semibold/OpenSans-Semibold.woff) format("woff"), url(../fonts/opensans/Semibold/OpenSans-Semibold.ttf) format("truetype"), url(../fonts/opensans/Semibold/OpenSans-Semibold.html#opensans-semibold) format("svg")
}

@media (min-width:0px) {
    .col-xs-1-10 {
        width: 10%
    }
    .col-xs-2-10 {
        width: 20%
    }
    .col-xs-3-10 {
        width: 30%
    }
    .col-xs-4-10 {
        width: 40%
    }
    .col-xs-5-10 {
        width: 50%
    }
    .col-xs-6-10 {
        width: 60%
    }
    .col-xs-7-10 {
        width: 70%
    }
    .col-xs-8-10 {
        width: 80%
    }
    .col-xs-9-10 {
        width: 90%
    }
    .col-xs-10-10 {
        width: 100%
    }
}

@media (min-width:800px) {
    .col-sm-1-10 {
        width: 10%
    }
    .col-sm-2-10 {
        width: 20%
    }
    .col-sm-3-10 {
        width: 30%
    }
    .col-sm-4-10 {
        width: 40%
    }
    .col-sm-5-10 {
        width: 50%
    }
    .col-sm-6-10 {
        width: 60%
    }
    .col-sm-7-10 {
        width: 70%
    }
    .col-sm-8-10 {
        width: 80%
    }
    .col-sm-9-10 {
        width: 90%
    }
    .col-sm-10-10 {
        width: 100%
    }
}

@media (min-width:1025px) {
    .col-md-1-10 {
        width: 10%
    }
    .col-md-2-10 {
        width: 20%
    }
    .col-md-3-10 {
        width: 30%
    }
    .col-md-4-10 {
        width: 40%
    }
    .col-md-5-10 {
        width: 50%
    }
    .col-md-6-10 {
        width: 60%
    }
    .col-md-7-10 {
        width: 70%
    }
    .col-md-8-10 {
        width: 80%
    }
    .col-md-9-10 {
        width: 90%
    }
    .col-md-10-10 {
        width: 100%
    }
}

@media (min-width:1500px) {
    .col-lg-1-10 {
        width: 10%
    }
    .col-lg-2-10 {
        width: 20%
    }
    .col-lg-3-10 {
        width: 30%
    }
    .col-lg-4-10 {
        width: 40%
    }
    .col-lg-5-10 {
        width: 50%
    }
    .col-lg-6-10 {
        width: 60%
    }
    .col-lg-7-10 {
        width: 70%
    }
    .col-lg-8-10 {
        width: 80%
    }
    .col-lg-9-10 {
        width: 90%
    }
    .col-lg-10-10 {
        width: 100%
    }
}

[class*=col] {
    float: left
}

[class*=flex] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.flex-center {
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

img {
    max-width: 100%;
    border: 0
}

.image.absolute {
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%
}

.image.absolute img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.yellow {
    background: #f9cc3a
}

.red {
    background: #e51937
}

.white {
    background: #fff
}

.black {
    background: #202020
}

.light-grey {
    background: #f6f6f6
}

.pointer {
    cursor: pointer
}

.right {
    float: right
}

.left {
    float: left
}

.no-padding {
    padding: 0!important
}

.no-margin {
    margin: 0!important
}

body,
p {
    margin: 0
}

.absolute {
    position: absolute
}

.absolute.left {
    left: 0
}

.absolute.right {
    right: 0
}

.relative {
    position: relative
}

div,
section {
    box-sizing: border-box
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

@media (min-width:0px) {
    .col-xs-1-12 {
        width: 8.33333%
    }
    .col-xs-2-12 {
        width: 16.66667%
    }
    .col-xs-3-12 {
        width: 25%
    }
    .col-xs-4-12 {
        width: 33.33333%
    }
    .col-xs-5-12 {
        width: 41.66667%
    }
    .col-xs-6-12 {
        width: 50%
    }
    .col-xs-7-12 {
        width: 58.33333%
    }
    .col-xs-8-12 {
        width: 66.66667%
    }
    .col-xs-9-12 {
        width: 75%
    }
    .col-xs-10-12 {
        width: 83.33333%
    }
    .col-xs-11-12 {
        width: 91.66667%
    }
    .col-xs-12-12 {
        width: 100%
    }
}

@media (min-width:675px) {
    .col-sm-1-12 {
        width: 8.33333%
    }
    .col-sm-2-12 {
        width: 16.66667%
    }
    .col-sm-3-12 {
        width: 25%
    }
    .col-sm-4-12 {
        width: 33.33333%
    }
    .col-sm-5-12 {
        width: 41.66667%
    }
    .col-sm-6-12 {
        width: 50%
    }
    .col-sm-7-12 {
        width: 58.33333%
    }
    .col-sm-8-12 {
        width: 66.66667%
    }
    .col-sm-9-12 {
        width: 75%
    }
    .col-sm-10-12 {
        width: 83.33333%
    }
    .col-sm-11-12 {
        width: 91.66667%
    }
    .col-sm-12-12 {
        width: 100%
    }
}

@media (min-width:1025px) {
    .col-md-1-12 {
        width: 8.33333%
    }
    .col-md-2-12 {
        width: 16.66667%
    }
    .col-md-3-12 {
        width: 25%
    }
    .col-md-4-12 {
        width: 33.33333%
    }
    .col-md-5-12 {
        width: 41.66667%
    }
    .col-md-6-12 {
        width: 50%
    }
    .col-md-7-12 {
        width: 58.33333%
    }
    .col-md-8-12 {
        width: 66.66667%
    }
    .col-md-9-12 {
        width: 75%
    }
    .col-md-10-12 {
        width: 83.33333%
    }
    .col-md-11-12 {
        width: 91.66667%
    }
    .col-md-12-12 {
        width: 100%
    }
}

@media (min-width:1500px) {
    .col-lg-1-12 {
        width: 8.33333%
    }
    .col-lg-2-12 {
        width: 16.66667%
    }
    .col-lg-3-12 {
        width: 25%
    }
    .col-lg-4-12 {
        width: 33.33333%
    }
    .col-lg-5-12 {
        width: 41.66667%
    }
    .col-lg-6-12 {
        width: 50%
    }
    .col-lg-7-12 {
        width: 58.33333%
    }
    .col-lg-8-12 {
        width: 66.66667%
    }
    .col-lg-9-12 {
        width: 75%
    }
    .col-lg-10-12 {
        width: 83.33333%
    }
    .col-lg-11-12 {
        width: 91.66667%
    }
    .col-lg-12-12 {
        width: 100%
    }
}

.text-center {
    text-align: center
}

body * {
    word-break: break-word
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: montserrat, sans-serif;
    color: #202020
}

article,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block
}

.hidden,
[hidden],
template {
    display: none
}

p {
    color: inherit
}

b,
strong {
    font-weight: 700
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

.page-view .project .title .count,
.yr,
text {
    font-family: montserrat-bold, sans-serif
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

.b-t,
.pre,
.red-mask span,
.se-tre,
.vid-bt span {
    text-transform: uppercase
}

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 {
    border: 0;
    padding: 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] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

.footer,
section {
    float: left;
    width: 100%
}

textarea {
    overflow: auto
}

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

td,
th {
    padding: 0
}

.button {
    border: 0;
    border-radius: 8px;
    border-bottom: 2px solid #e51937;
    padding: 20px 50px;
    display: inline-block;
    overflow: hidden
}

.container {
    margin: 0 auto;
    width: 90%;
    max-width: 1704px
}

@media (max-width:1599px) {
    .container {
        width: 94%
    }
}

@media (max-width:767px) {
    .container {
        width: 81.25%
    }
}

.section-header {
    padding: 78px 0
}

.flex-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.white-color {
    color: #fff!important
}

.yellow-color {
    color: #f9cc3a!important
}

.black-color {
    color: #202020!important
}

a {
    background-color: transparent;
    color: #202020;
    text-decoration: none
}

a:active,
a:focus,
a:hover,
a:visited {
    color: #e51937
}

.top-link .lock-icon {
    height: 28px;
    width: 23px;
    margin-top: -3px;
    background: url(../anim/lock-part-2.html) 0 3px no-repeat, url(../anim/lock-body.html) 0 12px no-repeat;
    background-size: auto!important;
    position: relative
}

.top-link .lock-icon .anim:before,
.top-link .lock-icon:before {
    position: absolute;
    width: 21px;
    height: 100%;
    background: url(../anim/old-key.html) 0 3px no-repeat;
    -o-object-fit: contain;
    object-fit: contain;
    background-size: 100%;
    top: 5px;
    left: 10px;
    opacity: 0
}

.top-link .lock-icon .anim {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 28px
}

.top-link .lock-icon .anim:before {
    background: url(../anim/old-key-white.html) 0 3px no-repeat;
    background-size: 100%
}

.top-link .arrow-icon {
    height: 18px;
    width: 18px;
    background: #e4715e;
    border-radius: 4px;
    position: relative
}

.top-link .arrow-icon .profile {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px
}

.top-link .arrow-icon .profile span {
    position: absolute;
    background: #fff;
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.top-link .arrow-icon .profile span:first-child {
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px
}

.top-link .arrow-icon .profile span:nth-child(2) {
    top: 2px;
    right: 2px;
    width: 8px;
    height: 2px
}

.top-link .arrow-icon .profile span:nth-child(3) {
    top: 7px;
    right: 2px;
    width: 8px;
    height: 3px
}

.top-link .arrow-icon .profile span:nth-child(4) {
    top: 12px;
    right: 2px;
    width: 8px;
    height: 3px
}

.top-link .arrow-icon .anim:before,
.top-link .arrow-icon:before {
    content: '';
    position: absolute;
    width: 21px;
    height: 100%;
    background: url(../anim/arrow.html) 0 3px no-repeat;
    -o-object-fit: contain;
    object-fit: contain;
    background-size: 100%;
    top: -4px;
    left: -5px;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.top-link .arrow-icon .anim {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px
}

.top-link .arrow-icon .anim:before {
    background: url(../anim/arrow-white.html) 0 3px no-repeat;
    background-size: 100%
}

.top-link:hover .arrow-icon .anim:before,
.top-link:hover .arrow-icon:before {
    opacity: 0;
    left: 10px
}

.top-link:hover .arrow-icon .profile span {
    opacity: 1
}

.top-link:hover .arrow-icon .profile span:first-child {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.top-link:hover .arrow-icon .profile span:nth-child(2) {
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

.top-link:hover .arrow-icon .profile span:nth-child(3) {
    -webkit-transition-delay: .6s;
    transition-delay: .6s
}

.top-link:hover .arrow-icon .profile span:nth-child(4) {
    -webkit-transition-delay: .7s;
    transition-delay: .7s
}

.top-link:hover .lock-icon {
    background: url(../anim/lock-part-2.html) no-repeat, url(../anim/lock-body.html) 0 12px no-repeat
}

@-webkit-keyframes open {
    0%,
    25% {
        background: url(../anim/lock-part-2.html) 0 3px no-repeat, url(../anim/lock-body.html) 0 12px no-repeat
    }
    37.5% {
        background: url(../anim/lock-part-2.html) no-repeat, url(../anim/lock-body.html) 0 12px no-repeat
    }
    100% {
        background: url(../anim/lock-part-2.html) 0 3px no-repeat, url(../anim/lock-body.html) 0 12px no-repeat
    }
}

@keyframes open {
    0%,
    25% {
        background: url(../anim/lock-part-2.html) 0 3px no-repeat, url(../anim/lock-body.html) 0 12px no-repeat
    }
    37.5% {
        background: url(../anim/lock-part-2.html) no-repeat, url(../anim/lock-body.html) 0 12px no-repeat
    }
    100% {
        background: url(../anim/lock-part-2.html) 0 3px no-repeat, url(../anim/lock-body.html) 0 12px no-repeat
    }
}

@-webkit-keyframes key {
    0% {
        opacity: 0;
        left: 10px
    }
    25% {
        opacity: 1
    }
    100% {
        opacity: 0;
        left: -15px
    }
}

@keyframes key {
    0% {
        opacity: 0;
        left: 10px
    }
    25% {
        opacity: 1
    }
    100% {
        opacity: 0;
        left: -15px
    }
}

@-webkit-keyframes arrow {
    0% {
        left: -5px
    }
    75% {
        left: 10px;
        opacity: 0
    }
    85% {
        opacity: 0;
        left: -5px
    }
    100% {
        opacity: 0
    }
}

@keyframes arrow {
    0% {
        left: -5px
    }
    75% {
        left: 10px;
        opacity: 0
    }
    85% {
        opacity: 0;
        left: -5px
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes run {
    0%,
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }
    75% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg)
    }
}

@keyframes run {
    0%,
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }
    75% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg)
    }
}

@-webkit-keyframes run2 {
    0%,
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    50% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg)
    }
}

@keyframes run2 {
    0%,
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    50% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg)
    }
}

@-webkit-keyframes shrink {
    0%,
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    50% {
        -webkit-transform: scaleX(1.05);
        transform: scaleX(1.05)
    }
}

@keyframes shrink {
    0%,
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    50% {
        -webkit-transform: scaleX(1.05);
        transform: scaleX(1.05)
    }
}

@-webkit-keyframes scroll {
    0% {
        background-position-x: -11px
    }
    100% {
        background-position-x: -31px
    }
}

@keyframes scroll {
    0% {
        background-position-x: -11px
    }
    100% {
        background-position-x: -31px
    }
}

@-webkit-keyframes scroll2 {
    0% {
        background-position-x: 0
    }
    100% {
        background-position-x: -20px
    }
}

@keyframes scroll2 {
    0% {
        background-position-x: 0
    }
    100% {
        background-position-x: -20px
    }
}

@-webkit-keyframes scroll3 {
    0% {
        background-position-x: -212px
    }
    100% {
        background-position-x: -636px
    }
}

@keyframes scroll3 {
    0% {
        background-position-x: -212px
    }
    100% {
        background-position-x: -636px
    }
}

@-webkit-keyframes blink {
    0%,
    100%,
    47%,
    53% {
        visibility: hidden
    }
    50% {
        visibility: visible
    }
}

@keyframes blink {
    0%,
    100%,
    47%,
    53% {
        visibility: hidden
    }
    50% {
        visibility: visible
    }
}

.dog-activator .run-cloud1 {
    left: 0;
    width: 200px;
    background-position: -212px 0;
    background-image: url(../anim/run-cloud.html);
    height: 71px
}

.dog-activator .dog {
    height: 71px;
    width: 115px;
    display: inline-block;
    margin-bottom: 40px;
    position: relative
}

.dog-activator .dog .ear {
    z-index: 4
}

.dog-activator .dog .eyelid {
    visibility: hidden;
    width: 13px;
    height: 7px;
    left: 78px;
    top: 5px;
    z-index: 5
}

.dog-activator .dog .paths {
    height: 71px;
    width: 115px
}

.dog-activator .dog .paths .path-lane:nth-child(2) {
    z-index: 3;
    left: 4px;
    margin-bottom: 6px
}

.dog-activator .dog .paths .path-lane:first-child {
    margin-top: 24px;
    background-position-x: -11px;
    width: 30px;
    left: 8px
}

.dog-activator .dog .paths .path-lane {
    z-index: 1;
    position: relative;
    width: 40px;
    height: 5px;
    margin-bottom: 4px;
    border-radius: 4px;
    background: url(../anim/path.html);
    overflow: hidden
}

.dog-activator .dog .body {
    z-index: 2
}

.dog-activator .dog [class*=leg] {
    z-index: 4
}

.dog-activator:hover .run-cloud1 {
    -webkit-animation-name: scroll3;
    animation-name: scroll3;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: .5s
}

.dog-activator:hover .dog .ear {
    -webkit-animation-name: shrink;
    animation-name: shrink;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: .5s
}

.dog-activator:hover .dog .eyelid,
.dog-activator:hover .dog .first-leg {
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear
}

.dog-activator:hover .dog .eyelid {
    -webkit-animation-name: blink;
    animation-name: blink;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.dog-activator:hover .dog .first-leg {
    -webkit-animation-name: run;
    animation-name: run;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.dog-activator:hover .dog .path-lane,
.dog-activator:hover .dog .second-leg {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear
}

.dog-activator:hover .dog .second-leg {
    -webkit-animation-name: run2;
    animation-name: run2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}

.dog-activator:hover .dog .path-lane {
    -webkit-animation-name: scroll2;
    animation-name: scroll2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.dog-activator:hover .dog .path-lane:first-child {
    -webkit-animation-name: scroll;
    animation-name: scroll;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.dog-activator:hover .dog .path-lane:nth-child(2) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.dog-activator:hover .dog .path-lane:nth-child(3) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.page-view {
    height: 650px;
    position: relative;
    width: 1170px;
    max-width: 100%
}

@media (max-width:1599px) {
    .page-view {
        height: 450px;
        position: relative;
        width: 768px;
        max-width: 100%
    }
}

@media (max-width:1199px) {
    .page-view {
        height: 350px;
        width: 700px
    }
}

@media (max-width:767px) {
    .page-view {
        width: 85%
    }
}

@media (max-width:490px) {
    .page-view {
        height: 210px
    }
}

@media (max-width:320px) {
    .page-view {
        height: 185px;
        width: 250px
    }
}

.page-view .project {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    left: 0;
    margin: auto;
    right: 0
}

.page-view .project.loaded .title .team p {
    opacity: 1
}

.page-view .project .title {
    text-align: center;
    position: relative;
    top: -86px
}

.page-view .project .title .count {
    font-size: 32px;
    color: #7c7c7c;
    background: #1d1a1a;
    line-height: 58px;
    padding: 0 9px;
    letter-spacing: -2px;
    display: inline-block
}

.page-view .project .title .team p {
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    display: inline-block;
    background: #1d1a1a;
    overflow: hidden
}

@media (max-width:1599px) {
    .page-view .project .title {
        top: -140px
    }
    .page-view .project .title .count {
        font-size: 22px;
        line-height: 44px
    }
    .page-view .project .team p {
        height: 43px
    }
    .page-view .project .team text {
        font-size: 45px
    }
    .page-view .project .team svg {
        margin-top: -14px
    }
}

@media (max-width:767px) {
    .page-view .project .title {
        top: -120px
    }
    .page-view .project .title .count {
        font-size: 17px;
        line-height: 33px
    }
    .page-view .project .team p {
        height: 33px
    }
    .page-view .project .team text {
        font-size: 34px
    }
    .page-view .project .team svg {
        margin-top: -23px
    }
}

.lb-loader,
.lightbox {
    text-align: center;
    line-height: 0
}

.page-view .project:nth-child(1) {
    z-index: 30
}

.page-view .arrows .arrow {
    float: left;
    cursor: pointer;
    width: 30px;
    height: 40px;
    position: absolute;
    top: calc(50% - 20px)
}

.page-view .arrows .arrow:hover svg polygon {
    fill: #e51937
}

@media (max-width:1799px) {
    .page-view .arrows .arrow.previous {
        right: 85px
    }
    .page-view .arrows .arrow.next {
        left: 90px
    }
}

@media (max-width:1599px) {
    .page-view .arrows .arrow.previous {
        right: 35px
    }
    .page-view .arrows .arrow.next {
        left: 40px
    }
}

.page-view .arrows .arrow.next {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.page-view .arrows .arrow:hover.previous {
    -webkit-transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: transform .4s cubic-bezier(.25, .46, .45, .94), -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0)
}

.page-view .arrows .arrow:hover.next {
    -webkit-transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: transform .4s cubic-bezier(.25, .46, .45, .94), -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    -webkit-transform: translate3d(5px, 0, 0) rotate(180deg);
    transform: translate3d(5px, 0, 0) rotate(180deg)
}

.page-view .arrows .arrow svg {
    height: 40px;
    width: 25px;
    padding: 2px
}

.page-view .arrows .arrow svg polygon {
    fill: #fff
}

.sc a:hover path,
.to-next:hover .arrow svg polygon,
.to-prev:hover .arrow svg polygon {
    fill: #e51937
}

.page-view .arrows .arrow {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.55, .085, .68, .53);
    transition: -webkit-transform .3s cubic-bezier(.55, .085, .68, .53);
    transition: transform .3s cubic-bezier(.55, .085, .68, .53);
    transition: transform .3s cubic-bezier(.55, .085, .68, .53), -webkit-transform .3s cubic-bezier(.55, .085, .68, .53);
    margin-right: 10px
}

@media screen and (max-width:640px) {
    .page-view .arrows {
        bottom: 60px;
        left: 50%;
        z-index: 120;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .page-view .arrows .arrow.previous:hover {
        -webkit-transform: none;
        transform: none
    }
    .page-view .arrows .arrow.next:hover {
        -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
        transform: translate3d(0, 0, 0) rotate(180deg)
    }
}

@-webkit-keyframes mask-play {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0
    }
}

@keyframes mask-play {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0
    }
}

.page-view {
    background: url(../img/urban-sprite-2.png) -9999px -9999px no-repeat
}

.page-view h1 {
    font-size: 180px!important;
    letter-spacing: 4px;
    text-shadow: 14px 0 rgba(1, 0, 0, .5)
}

.page-view .project:nth-child(1) {
    background-image: url(../images/team-building-ecuador.jpg)
}

.page-view .project:nth-child(2) {
    background-image: url(../images/team_building_convencion.jpg)
}

.page-view .project:nth-child(3) {
    background-image: url(../images/team_building_mindo.jpg)
}

.page-view .project:nth-child(4) {
    background-image: url(../images/team_building_oriente.jpg)
}

.page-view .project:nth-child(5) {
    background-image: url(../images/team_building_guayaquil.jpg)
}

.page-view .project:nth-child(6) {
    background-image: url(../images/convencion_guayaquil.jpg)
}

.page-view .project:nth-child(7) {
    background-image: url(../images/aventura_eventos.jpg)
}

.page-view .project:nth-child(8) {
    background-image: url(../images/olimpiada_corporativa.jpg)
}

.page-view .project:nth-child(9) {
    background-image: url(../images/team_building_biking.jpg)
}

.page-view .project:nth-child(10) {
    background-image: url(../images/team_building_paramo.jpg)
}

.page-view .project:nth-child(11) {
    background-image: url(../images/trabajo_en_equipo_ecuador.jpg)
}

.page-view .project:nth-child(12) {
    background-image: url(../images/taller_de_cuerdas_ecuador.jpg)
}

.page-view .project:nth-child(13) {
    background-image: url(../images/eventos_corporativos_ecuador.jpg)
}

.page-view .project:nth-child(14) {
    background-image: url(../images/team_building_playero.jpg)
}

.page-view .project:nth-child(15) {
    background-image: url(../images/team-building-rafting.jpg)
}

.page-view .project:nth-child(16) {
    background-image: url(../images/convenciones_ecuador.jpg)
}

.page-view .project:nth-child(17) {
    background-image: url(../images/convenciones_guayaquil.jpg)
}

.page-view .project:nth-child(18) {
    background-image: url(../images/seminario_en_la_jungla.jpg)
}

.page-view .project:nth-child(19) {
    background-image: url(../images/liderazgo_ecuador.jpg)
}

.page-view .project:nth-child(20) {
    background-image: url(../images/cursos-liderazgo-ecuador.jpg)
}

@media (max-width:1199px) {
    .page-view .arrows .arrow,
    .page-view .project .text {
        display: none
    }
    .page-view .project:nth-child(1) {
        background-image: url(../images/tablet/team-building-ecuador.jpg)
    }
    .page-view .project:nth-child(2) {
        background-image: url(../images/tablet/team_building_convencion.jpg)
    }
    .page-view .project:nth-child(3) {
        background-image: url(../images/tablet/team_building_mindo.jpg)
    }
    .page-view .project:nth-child(4) {
        background-image: url(../images/tablet/team_building_oriente.jpg)
    }
    .page-view .project:nth-child(5) {
        background-image: url(../images/tablet/team_building_guayaquil.jpg)
    }
    .page-view .project:nth-child(6) {
        background-image: url(../images/tablet/convencion_guayaquil.jpg)
    }
    .page-view .project:nth-child(7) {
        background-image: url(../images/tablet/aventura_eventos.jpg)
    }
    .page-view .project:nth-child(8) {
        background-image: url(../images/tablet/olimpiada_corporativa.jpg)
    }
    .page-view .project:nth-child(9) {
        background-image: url(../images/tablet/team_building_biking.jpg)
    }
    .page-view .project:nth-child(10) {
        background-image: url(../images/tablet/team_building_paramo.jpg)
    }
    .page-view .project:nth-child(11) {
        background-image: url(../images/tablet/trabajo_en_equipo_ecuador.jpg)
    }
    .page-view .project:nth-child(12) {
        background-image: url(../images/tablet/taller_de_cuerdas_ecuador.jpg)
    }
    .page-view .project:nth-child(13) {
        background-image: url(../images/tablet/eventos_corporativos_ecuador.jpg)
    }
    .page-view .project:nth-child(14) {
        background-image: url(../images/tablet/team_building_playero.jpg)
    }
    .page-view .project:nth-child(15) {
        background-image: url(../images/tablet/team-building-rafting.jpg)
    }
    .page-view .project:nth-child(16) {
        background-image: url(../images/tablet/convenciones_ecuador.jpg)
    }
    .page-view .project:nth-child(17) {
        background-image: url(../images/tablet/convenciones_guayaquil.jpg)
    }
    .page-view .project:nth-child(18) {
        background-image: url(../images/tablet/seminario_en_la_jungla.jpg)
    }
    .page-view .project:nth-child(19) {
        background-image: url(../images/tablet/liderazgo_ecuador.jpg)
    }
    .page-view .project:nth-child(20) {
        background-image: url(../images/tablet/cursos-liderazgo-ecuador.jpg)
    }
}

@media (max-width:580px) {
    .page-view .project:nth-child(1) {
        background-image: url(../images/mobile/team-building-ecuador.jpg)
    }
    .page-view .project:nth-child(2) {
        background-image: url(../images/mobile/team_building_convencion.jpg)
    }
    .page-view .project:nth-child(3) {
        background-image: url(../images/mobile/team_building_mindo.jpg)
    }
    .page-view .project:nth-child(4) {
        background-image: url(../images/mobile/team_building_oriente.jpg)
    }
    .page-view .project:nth-child(5) {
        background-image: url(../images/mobile/team_building_guayaquil.jpg)
    }
    .page-view .project:nth-child(6) {
        background-image: url(../images/mobile/convencion_guayaquil.jpg)
    }
    .page-view .project:nth-child(7) {
        background-image: url(../images/mobile/aventura_eventos.jpg)
    }
    .page-view .project:nth-child(8) {
        background-image: url(../images/mobile/olimpiada_corporativa.jpg)
    }
    .page-view .project:nth-child(9) {
        background-image: url(../images/mobile/team_building_biking.jpg)
    }
    .page-view .project:nth-child(10) {
        background-image: url(../images/mobile/team_building_paramo.jpg)
    }
    .page-view .project:nth-child(11) {
        background-image: url(../images/mobile/trabajo_en_equipo_ecuador.jpg)
    }
    .page-view .project:nth-child(12) {
        background-image: url(../images/mobile/taller_de_cuerdas_ecuador.jpg)
    }
    .page-view .project:nth-child(13) {
        background-image: url(../images/mobile/eventos_corporativos_ecuador.jpg)
    }
    .page-view .project:nth-child(14) {
        background-image: url(../images/mobile/team_building_playero.jpg)
    }
    .page-view .project:nth-child(15) {
        background-image: url(../images/mobile/team-building-rafting.jpg)
    }
    .page-view .project:nth-child(16) {
        background-image: url(../images/mobile/convenciones_ecuador.jpg)
    }
    .page-view .project:nth-child(17) {
        background-image: url(../images/mobile/convenciones_guayaquil.jpg)
    }
    .page-view .project:nth-child(18) {
        background-image: url(../images/mobile/seminario_en_la_jungla.jpg)
    }
    .page-view .project:nth-child(19) {
        background-image: url(../images/mobile/liderazgo_ecuador.jpg)
    }
    .page-view .project:nth-child(20) {
        background-image: url(../images/mobile/cursos-liderazgo-ecuador.jpg)
    }
}

.page-view .project:nth-child(even).hide,
.page-view .project:nth-child(odd).hide {
    -webkit-mask: url(../img/urban-sprite.png);
    mask: url(../img/urban-sprite.png);
    -webkit-mask-size: 3000% 100%;
    mask-size: 3000% 100%;
    -webkit-animation: mask-play 1.4s steps(29) forwards;
    animation: mask-play 1.4s steps(29) forwards
}

.masky:hover .red-mask span,
.preview:hover .red-mask span {
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 750ms;
    -webkit-animation-timing-function: "linear";
    -webkit-animation-fill-mode: forwards
}

.no-cssmask .page-view .project.hide {
    opacity: 0;
    -webkit-transition: opacity 1.4s ease;
    transition: opacity 1.4s ease;
    -webkit-mask: none!important;
    mask: none!important
}

body:after {
    content: url(../img/multiply.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
    display: none
}

.lb-dataContainer:after,
.lb-outerContainer:after {
    content: "";
    clear: both
}

body.lb-disable-scrolling {
    overflow: hidden
}

.lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #000;
    filter: alpha(Opacity=80);
    opacity: .8;
    display: none
}

.lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10000;
    font-weight: 400
}

.lightbox .lb-image {
    display: block;
    height: auto;
    max-width: inherit;
    max-height: none
}

.lightbox a img {
    border: none
}

.lb-outerContainer {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    background-color: #fff
}

.lb-loader,
.lb-nav {
    position: absolute;
    left: 0
}

.lb-outerContainer:after {
    display: table
}

.lb-loader {
    top: 43%;
    height: 25%;
    width: 100%
}

.lb-cancel {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: url(../images/loading.gif) no-repeat
}

.lb-nav {
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10
}

.lb-container>.nav {
    left: 0
}

.lb-nav a {
    background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}

.lb-next,
.lb-prev {
    height: 100%;
    cursor: pointer;
    display: block
}

.lb-nav a.lb-prev {
    width: 34%;
    left: 0;
    float: left;
    background: url(../images/prev.png) left 48% no-repeat;
    filter: alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity .6s;
    transition: opacity .6s
}

.lb-nav a.lb-prev:hover {
    filter: alpha(Opacity=100);
    opacity: 1
}

.lb-nav a.lb-next {
    width: 64%;
    right: 0;
    float: right;
    background: url(../images/next.png) right 48% no-repeat;
    filter: alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity .6s;
    transition: opacity .6s
}

.lb-nav a.lb-next:hover {
    filter: alpha(Opacity=100);
    opacity: 1
}

.lb-dataContainer {
    margin: 0 auto;
    padding-top: 5px;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.lb-dataContainer:after {
    display: table
}

.lb-data {
    padding: 0 4px;
    color: #ccc
}

.lb-data .lb-details {
    width: calc(100% - 70px);
    float: left;
    text-align: left;
    line-height: 1.1em;
    padding: 20px
}

.lb-data .lb-caption {
    font-size: 13px;
    font-weight: 700;
    line-height: 1em
}

.lb-data .lb-caption a {
    color: #4ae
}

.lb-data .lb-number {
    display: block;
    clear: left;
    padding-bottom: 1em;
    font-size: 12px;
    color: #999
}

.lb-data .lb-close {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
    padding: 20px;
    background: url(../img/multiply.png) center no-repeat;
    text-align: right;
    outline: 0;
    filter: alpha(Opacity=70);
    opacity: .7;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

.b-t,
.text,
.tr-button,
.vid,
.vid-bt span {
    text-align: center
}

.lb-data .lb-close:hover {
    cursor: pointer;
    filter: alpha(Opacity=100);
    opacity: 1
}

.progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 999;
    background: #1e1b1b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.progress img {
    width: 585px;
    position: absolute;
    left: 0;
    top: 18px;
    right: 0;
    margin: auto;
    bottom: 0
}

.progress .progress-bar {
    width: 115px;
    height: 115px;
    position: relative
}

.progress .progress-bar img {
    position: relative
}

.progress .progress-bar .mask {
    bottom: 0;
    left: 0;
    position: absolute;
    overflow: hidden;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    width: 115px;
    height: 0
}

.progress .progress-bar .mask:before {
    content: '';
    width: 115px;
    height: 115px;
    background: #ffca25;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 50%
}

@media (max-width:767px) {
    .progress img {
        width: 320px
    }
    .progress .progress-bar {
        width: 63px;
        height: 66px
    }
    .progress .progress-bar .mask {
        width: 65px
    }
    .progress .progress-bar .mask:before {
        width: 65px;
        height: 62px
    }
}

.header {
    position: relative;
    overflow: hidden;
    margin-bottom: -6px
}

.header .br {
    top: 0
}

.header .br.right {
    padding: 8px
}

@media (max-width:1599px) {
    .header .br.right {
        padding: 2px
    }
    .header .br.right svg {
        width: 67px
    }




}



@media (max-width:767px) {
    .header .br.right svg {
        width: 100px
    }
}

@media (max-width:1599px) {
    .header .br.left {
        width: 75px
    }
}

@media (max-width:800px) {
    .header {
        min-height: 740px;
        background: url(../images/tablet-main-bg.png) no-repeat;
        background-size: cover
    }
    .im img {
        display: none
    }
}

@media (max-width:767px) {
    .header .br.left {
        width: 57px
    }
    .header {
        min-height: 361px;
        background: url(../images/iphone-6-main-bg.png) no-repeat;
        background-size: cover
    }
}

@media (max-width:320px) {
    .header {
        min-height: 560px;
        background: url(../images/main-bg-320.jpg) no-repeat;
        background-size: cover
    }
}

.dt-1.bg,
.dt-2 {
    background: #1e1b1b
}

.header .container {
    top: 60px;
    left: 0;
    right: 0;
    margin: auto
}

@media (max-width:1599px) {
    .header .container {
        top: 30px
    }
}

@media (max-width:767px) {
    .header .container {
        top: 20px
    }
}

.im img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%
}

.im .m-m-1 {
    position: relative
}

.m-t,
[class*=dt] {
    position: absolute
}

[class*=dt] svg {
    width: 100%;
    height: 100%
}

.dt-1 {
    top: 76px;
    left: 160px;
    height: 70px;
    width: 750px
}

.dt-1.month {
    width: 820px;
    z-index: 2
}

@media (max-width:1599px) {
    .dt-1 {
        width: 500px;
        height: 62px;
        bottom: 220px;
        left: 170px;
        top: inherit
    }
    .dt-1 svg {
        margin-left: -15px;
        margin-top: -5px
    }
    .dt-1 text {
        font-size: 49px
    }
}

@media (max-width:1199px) {
    .dt-1 {
        height: 63px;
        width: 430px;
        bottom: 138px;
        left: 118px
    }
    .dt-1 svg {
        margin-left: -15px;
        height: 63px;
        margin-top: -6px
    }
    .dt-1 text {
        font-size: 42px
    }
}

@media (max-width:767px) {
    .dt-1 {
        left: 15px;
        height: 32px;
        width: 225px;
        bottom: 160px
    }
    .dt-1 svg {
        margin-left: -18px;
        margin-top: -31px
    }
    .dt-1 text {
        font-size: 22px
    }
}

.dt-2 {
    top: 144px;
    left: 36px;
    height: 109px;
    width: 615px
}

@media (max-width:1599px) {
    .dt-2 {
        top: inherit;
        bottom: 146px;
        height: 74px;
        width: 465px;
        left: 100px
    }
    .dt-2 text {
        font-size: 78px
    }
    .dt-2 svg {
        margin-top: -26px;
        height: 100px;
        width: 561px
    }
}

@media (max-width:1199px) {
    .dt-2 {
        left: 118px;
        height: 82px;
        width: 450px;
        bottom: 56px
    }
    .dt-2 text {
        font-size: 76px
    }
    .dt-2 svg {
        margin-top: -23px
    }
}

@media (max-width:767px) {
    .dt-2 {
        left: 15px;
        height: 42px;
        width: 245px;
        bottom: 120px
    }
    .dt-2 svg {
        margin-top: -56px
    }
    .dt-2 text {
        font-size: 40px
    }
}

.m-t {
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    left: 0;
    right: 0
}

.pre,
.yr {
    display: inline-block;
    box-sizing: border-box
}

.m-t .inner {
    position: relative;
    width: 100%;
    max-width: 970px;
    height: 475px
}

.pre,
.yr,
canvas {
    position: absolute
}

@media (max-width:1400px) and (min-width:1200px) {
    .m-t {
        bottom: -40px
    }
}

@media (max-width:767px) and (min-width:320px) {
    .m-t {
        bottom: -90px
    }
}

.pre {
    background: #e51937;
    color: #fff;
    line-height: 26px;
    font-size: 23px;
    letter-spacing: 1px;
    padding: 0 8px;
    top: 50px;
    left: 170px
}

@media (max-width:1599px) {
    .pre {
        top: inherit;
        bottom: 282px;
        right: inherit
    }
    .pre span {
        font-size: 28px
    }
}

@media (max-width:1199px) {
    .pre {
        left: 118px;
        line-height: 28px;
        bottom: 202px
    }
}

@media (max-width:767px) {
    .pre {
        left: 15px;
        line-height: 16px;
        padding: 0 2px;
        bottom: 192px
    }
    .pre span {
        font-size: 15px
    }
}

.yr {
    font-size: 131px;
    color: #e51937;
    line-height: 110px;
    background: #1e1b1b;
    padding: 0 8px;
    max-width: 335px;
    top: 57px;
    right: -135px;
    letter-spacing: -4px
}

.insta,
.se-tre {
    color: #fff;
    z-index: 1
}

.b-t,
.f-string {
    max-width: 100%
}

.yr span {
    float: left
}

.yr .o-1 {
    margin-left: -9px
}

.yr .o-2 {
    margin-left: -7px;
    margin-right: -8px
}

@media (max-width:1599px) {
    .yr {
        font-size: 98px;
        letter-spacing: -1px;
        line-height: 92px;
        top: inherit;
        bottom: 207px;
        left: 582px;
        right: inherit
    }
}

@media (max-width:1199px) {
    .yr {
        font-size: 95px;
        letter-spacing: 0;
        line-height: 82px;
        left: 500px;
        z-index: 1;
        bottom: 126px
    }
}

@media (max-width:767px) {
    .yr {
        font-size: 33px;
        letter-spacing: 4px;
        line-height: 43px;
        padding: 0 2px;
        left: 210px;
        bottom: 155px
    }
}

.image-container {
    width: 200px;
    height: 200px;
    position: relative
}

.image-container .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    background-size: cover;
    filter: alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
    -moz-transition: opacity 0s linear .6s, -moz-transform 1s cubic-bezier(.165, .84, .44, 1) .6s;
    -o-transition: opacity 0s linear .6s, -o-transform 1s cubic-bezier(.165, .84, .44, 1) .6s;
    -webkit-transition: opacity 0s linear .6s, -webkit-transform 1s cubic-bezier(.165, .84, .44, 1) .6s;
    transition: opacity 0s linear .6s, -webkit-transform 1s cubic-bezier(.165, .84, .44, 1) .6s;
    transition: opacity 0s linear .6s, transform 1s cubic-bezier(.165, .84, .44, 1) .6s;
    transition: opacity 0s linear .6s, transform 1s cubic-bezier(.165, .84, .44, 1) .6s, -webkit-transform 1s cubic-bezier(.165, .84, .44, 1) .6s
}

.content {
    background: url(../img/back-content-2.png) no-repeat, url(../img/back-content-1.png) no-repeat, url(../img/back-content-3.png) 0 bottom no-repeat #282729;
    background-size: auto, auto, contain
}

@media (max-width:1199px) {
    .content {
        background: url(../img/back-content-1.png) no-repeat, url(../img/quote-bg-768.png) 0 bottom no-repeat #282729;
        background-size: contain
    }
    .content .s-qte,
    .m-t .inner img {
        display: none
    }
}

@media (max-width:767px) {
    .content {
        background: url(../img/back-content-1.png) no-repeat, url(../images/qte-bg-mobile.png) 0 bottom no-repeat #282729;
        background-size: contain
    }
}

.insta {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #1f1b1b;
    padding-right: 12px;
    padding-left: 8px
}

.insta div {
    display: inline-block;
    vertisal-align: top
}

.insta .sm-l,
.insta .sm-t {
    line-height: 27.39px;
    display: block
}

.insta .sm-t {
    font-size: 11.21px;
    font-family: opensans-semibold, sans-serif
}

.insta .sm-l {
    font-size: 24.9px;
    font-family: montserrat, sans-serif;
    margin-top: -3px;
    padding-bottom: 3px
}

.b-t,
.vid .inner {
    display: inline-block
}

.insta svg {
    width: 39px;
    height: 39px
}

@media (max-width:1199px) {
    .insta {
        right: 16px
    }
    .insta svg {
        width: 36px;
        height: 36px
    }
    .insta .sm-t {
        font-size: 16px;
        line-height: 25.27px
    }
    .insta .sm-l {
        font-size: 23px;
        line-height: 25.27px
    }
}

@media (max-width:767px) {
    .insta {
        right: 0;
        padding-left: 6px;
        padding-right: 7px
    }
    .insta svg {
        width: 27px;
        height: 27px
    }
    .insta .sm-t {
        font-size: 13px;
        line-height: 19.12px
    }
    .insta .sm-l {
        font-size: 17.38px;
        line-height: 19.12px
    }
}

.b-t {
    margin-bottom: 180px;
    position: relative;
    width: auto
}

.b-t:after,
.b-t:before {
    content: '';
    top: -28px;
    left: 0;
    background: #e51937;
    height: 4px;
    width: 65px;
    position: absolute
}

.b-t:after {
    left: inherit;
    top: inherit;
    bottom: 0;
    right: 0
}

@media (max-width:1199px) {
    .b-t {
        margin-top: 40px
    }
    .b-t:after,
    .b-t:before {
        top: -10px;
        left: 2px;
        height: 1px;
        width: 24px
    }
    .b-t:after {
        left: inherit;
        top: inherit
    }
}

@media (max-width:767px) {
    .b-t {
        margin-top: 0;
        margin-bottom: 150px
    }
    .b-t:after,
    .b-t:before {
        left: -15;
        top: -7px
    }
    .b-t:after {
        left: inherit;
        top: inherit;
        right: -15px
    }
}

@media (max-width:375px) and (min-width:320px) {
    .b-t {
        margin-top: 80px;
        margin-bottom: 130px
    }
}

.f-string {
    background: #1e1b1b;
    width: 730px;
    position: relative;
    margin: 0 auto
}

@media (max-width:1599px) {
    .f-string {
        height: 62px;
        width: 758px
    }
    .f-string svg {
        margin-top: -23px;
        margin-left: -18px;
        width: 800px
    }
    .f-string text {
        font-size: 64px
    }
}

@media (max-width:1199px) {
    .f-string {
        height: 50px;
        width: 640px
    }
    .f-string svg {
        margin-top: -34px;
        margin-left: -18px;
        width: 660px
    }
    .f-string text {
        font-size: 54px
    }
}

@media (max-width:800px) {
    .f-string {
        height: 41px;
        width: 508px
    }
    .f-string svg {
        margin-top: -41px;
        margin-left: -18px;
        width: 530px
    }
    .f-string text {
        font-size: 43px
    }
}

@media (max-width:767px) {
    .f-string {
        max-width: none;
        margin-left: -15px;
        margin-right: -15px;
        height: 24px;
        width: 296px
    }
    .f-string svg {
        margin-top: -55px;
        margin-left: -21px;
        width: 320px
    }
    .f-string text {
        font-size: 25px
    }
}

.s-string {
    background: #1e1b1b;
    width: 650px;
    max-width: 100%;
    margin: 0 auto
}

@media (max-width:1599px) {
    .s-string {
        height: 62px;
        width: 606px
    }
    .s-string svg {
        margin-top: -23px;
        margin-left: -13px;
        width: 630px
    }
    .s-string text {
        font-size: 64px
    }
}

@media (max-width:1199px) {
    .s-string {
        height: 50px;
        width: 515px
    }
    .s-string svg {
        margin-top: -34px;
        margin-left: -13px;
        width: 550px
    }
    .s-string text {
        font-size: 54px
    }
}

@media (max-width:800px) {
    .s-string {
        height: 41px;
        width: 408px
    }
    .s-string svg {
        margin-top: -41px;
        margin-left: -13px;
        width: 430px
    }
    .s-string text {
        font-size: 43px
    }
}

@media (max-width:767px) {
    .s-string {
        height: 24px;
        width: 240px
    }
    .s-string svg {
        margin-top: -55px;
        margin-left: -13px;
        width: 285px
    }
    .s-string text {
        font-size: 25px
    }
}

.masky:hover .red-mask {
    width: 100%
}

.masky:hover .red-mask span {
    animation-name: fadeIn;
    animation-duration: 750ms;
    -webkit-animation-iteration-count: "infinity";
    animation-iteration-count: "infinity";
    animation-timing-function: "linear";
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    animation-fill-mode: forwards
}

.vid {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -82px;
    padding: 0
}

.vid .inner {
    position: relative
}

.vid .inner:before {
    content: url(../img/blur-tr.png);
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    height: 1px
}

@media (max-width:1799px) {
    .vid {
        padding: 0 20px;
        left: inherit;
        margin-bottom: 15px
    }
}

@media (max-width:1599px) {
    .vid {
        top: 53px
    }
    .vid .inner {
        max-width: 600px
    }
}

@media (max-width:1199px) {
    .vid {
        left: 0;
        top: -8px;
        position: relative
    }
    .vid .inner {
        max-width: 100%
    }
}

@media (max-width:767px) {
    .vid {
        top: 50px;
        padding: 0
    }
    .vid .inner:before {
        content: url(../images/blur-mobile.png);
        bottom: 13px
    }
    .vid .red-mask {
        display: none
    }
}

.s-qte,
.se-tre {
    display: inline-block
}

.content {
    position: relative
}

.qt,
.se-tre,
.tr-button {
    position: absolute;
    top: 0
}

.tr-button {
    background: url(../img/button-bg-2.png) no-repeat #e51937;
    width: 78px;
    height: 78px;
    line-height: 90px;
    z-index: 1
}

@media (max-width:1599px) {
    .tr-button {
        width: 76px;
        height: 76px
    }
}

@media (max-width:767px) {
    .tr-button {
        width: 47px;
        height: 47px;
        background-size: 11px;
        line-height: 52px
    }
    .tr-button img {
        width: 11px
    }
}

.se-tre {
    font-size: 15.55px;
    background: #1c1a1a;
    line-height: 40px;
    padding: 0 13px;
    right: 0
}

@media (max-width:1599px) {
    .se-tre {
        line-height: 56px;
        font-size: 22px
    }
}

@media (max-width:767px) {
    .se-tre {
        line-height: 31px;
        font-size: 12px;
        padding: 0 8px
    }
}

.qt {
    left: 0;
    color: #e51937;
    font-family: opensans, sans-serif;
    font-size: 109.72px;
    width: 40px;
    height: 28px
}

.preview .in,
.s-qte {
    position: relative
}

.s-qte {
    max-width: 482px;
    padding: 122px 60px 132px
}

.s-qte .qt {
    top: 85px;
    left: -16px
}

.tt {
    font-size: 30px;
    font-family: opensans-light, sans-serif;
    line-height: 40px;
    color: #fff
}

.ar,
.footer p,
.text li,
.text p {
    font-family: opensans, sans-serif
}

.ar {
    float: right;
    font-size: 18px;
    color: #a8a8a8;
    margin-top: 25px
}

.preview {
    width: 33.333%;
    float: left;
    margin-bottom: 54px;
    padding-right: 25px;
    padding-left: 25px;
    cursor: pointer
}

.preview img {
    width: 100%;
    height: 800px;
    -o-object-fit: cover;
    object-fit: cover;
    margin-bottom: -4px
}

.preview .wrap {
    position: absolute;
    top: 0;
    height: 100%;
    left: 25px;
    right: 25px
}

.preview:nth-child(2) .wrap,
.preview:nth-child(3n+2) .wrap {
    right: 0
}

.preview:first-child {
    padding-left: 0;
    width: 66.666%
}

.preview:first-child img {
    height: 550px
}

.preview:first-child .wrap {
    left: 0
}

.preview:first-child .in:after {
    content: '';
    height: 4px;
    position: absolute;
    background: #e51937;
    width: 84px;
    top: calc(50% - 2px);
    left: calc(100% - 17px);
    z-index: 1
}

.preview:nth-child(2) {
    padding-right: 0
}

.preview:nth-child(2) img {
    height: 550px
}

.preview:nth-child(3n) {
    padding-left: 0;
    z-index: 3
}

.preview:nth-child(3n) .wrap {
    left: 0
}

.preview:nth-child(3n) .in {
    position: relative
}

.preview:nth-child(3n) .in:after,
.preview:nth-child(3n+1) .in:after {
    height: 4px;
    position: absolute;
    background: #e51937;
    width: 84px;
    top: calc(50% - 2px);
    left: calc(100% - 17px);
    content: ''
}

.preview:nth-child(3n) .in:after {
    z-index: 1
}

.preview:nth-child(3n+1) {
    z-index: 2
}

.preview:nth-child(3n+1) .in:after {
    z-index: 1
}

.preview:nth-child(3n+2) {
    padding-right: 0;
    z-index: 1
}

.preview:hover .red-mask {
    width: 100%
}

.preview:hover .red-mask span {
    animation-name: fadeIn;
    animation-duration: 750ms;
    -webkit-animation-iteration-count: "infinity";
    animation-iteration-count: "infinity";
    animation-timing-function: "linear";
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    animation-fill-mode: forwards
}

@media (max-width:1599px) {
    .preview img {
        height: 290px
    }
    .preview:first-child img,
    .preview:nth-child(2) img {
        height: 315px
    }
}

@media (max-width:1199px) {
    .preview .in:after,
    .preview .tr-button {
        display: none
    }
    .preview img,
    .preview:nth-child(2n) img,
    .preview:nth-child(2n+1) img {
        height: 293px
    }
    .preview {
        width: 50%;
        margin-bottom: 36px;
        padding-right: 17px;
        padding-left: 16px
    }
    .preview .wrap {
        left: 17px;
        right: 16px
    }
    .preview:nth-child(2n+1) {
        padding-left: 0;
        padding-right: 17px;
        width: 50%
    }
    .preview:nth-child(2n+1) .wrap {
        left: 0;
        right: 16px
    }
    .preview:nth-child(2n) {
        width: 50%;
        padding-right: 0
    }
    .preview:nth-child(2n) .wrap {
        right: 0;
        left: 17px
    }
}

@media (max-width:767px) {
    .preview {
        width: 100%!important;
        margin-bottom: 0;
        padding-right: 0!important;
        padding-left: 0!important
    }
    .preview .wrap {
        right: 0!important;
        left: 0!important
    }
    .preview img {
        height: 219px
    }
}

.b-qte {
    max-width: 545px;
    padding-top: 122px;
    padding-bottom: 132px
}

.b-qte .tt {
    font-size: 80px;
    line-height: 105px;
    margin-bottom: -20px
}

@media (max-width:1599px) {
    .b-qte {
        max-width: 545px;
        padding-top: 70px;
        padding-bottom: 132px
    }
    .b-qte .tt {
        font-size: 42px;
        line-height: 68px
    }
}

.full-qte {
    min-height: 1328px;
    padding-top: 200px;
    padding-left: 182px;
    padding-right: 20px
}

.full-qte .qt {
    font-size: 140px;
    top: 80px;
    left: -100px
}

.full-qte .ar {
    font-size: 20px;
    line-height: 25px;
    margin-top: 68px
}

@media (max-width:1599px) {
    .full-qte {
        min-height: 865px;
        padding-left: 90px;
        padding-top: 150px
    }
    .full-qte .qt {
        font-size: 78px;
        top: 50px;
        left: -60px
    }
    .full-qte .ar {
        font-size: 21px;
        line-height: 25px;
        margin-top: 25px;
        float: left
    }
}

@media (max-width:1199px) {
    .full-qte {
        min-height: 565px
    }
}

@media (max-width:767px) {
    .full-qte {
        min-height: 430px;
        padding-left: 44px;
        padding-top: 10px
    }
    .full-qte .qt {
        font-size: 59.6px;
        top: 54px;
        left: -45px
    }
    .full-qte .tt {
        font-size: 32px;
        line-height: 56.19px
    }
    .full-qte .ar {
        font-size: 16px;
        line-height: 25px;
        margin-top: 20px
    }
}

@media (max-width:375px) {
    .full-qte {
        padding-top: 150px;
        padding-right: 0
    }
    .full-qte .tt {
        font-size: 31px
    }
}

.image-loader {
    position: relative
}

.image-loader .insta,
.image-loader .se-tre,
.image-loader .tr-button {
    opacity: 0;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 750ms;
    animation-duration: 750ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.image-loader .in,
.image-loader .inner {
    z-index: 1;
    -webkit-animation-name: imageBlockLoad;
    animation-name: imageBlockLoad;
    -webkit-animation-duration: 1.7s;
    animation-duration: 1.7s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.image-loader .in:after,
.image-loader .inner:after {
    opacity: 0;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 750ms;
    animation-duration: 750ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.image-loader .mask {
    z-index: 1;
    background: #010101;
    position: absolute;
    top: 0;
    left: 0;
    right: calc(100% - 20px);
    height: 0;
    overflow: hidden;
    -webkit-animation-name: imageLoad;
    animation-name: imageLoad;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.image-loader.scroll .in,
.image-loader.scroll .in:after,
.image-loader.scroll .inner,
.image-loader.scroll .inner:after,
.image-loader.scroll .insta,
.image-loader.scroll .mask,
.image-loader.scroll .se-tre,
.image-loader.scroll .tr-button {
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.line {
    overflow: hidden
}

.line.grey,
.line.red {
    background: 0 0!important
}

.line.grey:before,
.line.red:before {
    content: '';
    background: #1e1b1b;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.full,
.line.let-line.grey:before,
.line.let-line.red:before {
    height: 100%
}

.line.red:before {
    background: #e51937
}

.line>* {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: .5s ease;
    transition: .5s ease;
    position: relative;
    float: left
}

.line.let-line>* {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

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

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

@-webkit-keyframes imageBlockLoad {
    0%,
    25% {
        width: 0;
        overflow: hidden
    }
    100%,
    50% {
        width: 100%;
        overflow: hidden
    }
}

@keyframes imageBlockLoad {
    0%,
    25% {
        width: 0;
        overflow: hidden
    }
    100%,
    50% {
        width: 100%;
        overflow: hidden
    }
}

.stick {
    overflow: hidden
}

.full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    cursor: pointer;
    z-index: 99
}

[class*=modal] {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    background: rgba(0, 0, 0, .7)
}

[class*=modal] .close {
    top: 0;
    right: 0;
    padding: 40px;
    position: absolute;
    width: 24px;
    height: 24px;
    background: url(../img/multiply.png) center no-repeat;
    cursor: pointer;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

[class*=modal] .close:hover {
    background-color: rgba(255, 255, 255, .2)
}

[class*=modal] iframe {
    top: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 90%;
    z-index: 100
}

@-webkit-keyframes imageLoad {
    0% {
        height: 0;
        right: calc(100% - 20px)
    }
    25% {
        height: 100%;
        right: calc(100% - 20px)
    }
    50% {
        right: 0;
        left: 0;
        height: 100%
    }
    100% {
        left: 100%;
        right: 0;
        height: 100%
    }
}

@keyframes imageLoad {
    0% {
        height: 0;
        right: calc(100% - 20px)
    }
    25% {
        height: 100%;
        right: calc(100% - 20px)
    }
    50% {
        right: 0;
        left: 0;
        height: 100%
    }
    100% {
        left: 100%;
        right: 0;
        height: 100%
    }
}

.photos {
    margin-top: -364px;
    position: relative;
    z-index: 99;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.photos:before {
    content: '';
    position: absolute;
    left: 0;
    top: 364px;
    bottom: 146px;
    width: 100%;
    z-index: -1;
    background: url(../img/back-photos.png) no-repeat;
    background-size: cover
}

.photos .preview,
.photos .preview .inner {
    position: relative
}

.photos .preview:first-child {
    width: 33.333%
}

.photos .preview:nth-child(2) {
    width: 66.666%
}

.photos .preview .tr-button img {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0
}

.photos .se-tre {
    padding: 0 13px;
    top: inherit;
    bottom: 0;
    right: -1px;
    width: 850px;
    height: 88px;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url(../img/photos-refresh.png);
    background-position: 30px 22px;
    background-repeat: no-repeat
}

@media (max-width:1599px) {
    .photos .se-tre {
        width: 314px;
        height: 50px;
        background-position: 17px 12px;
        background-size: 26px
    }
    .photos .se-tre text {
        font-size: 25px
    }
    .photos .se-tre svg {
        margin-top: -25px;
        margin-left: -47px
    }
}

@media (max-width:1199px) {
    .photos {
        margin-top: 0
    }
    .photos:before {
        top: 0;
        bottom: 0;
        background: #282729
    }
    .photos .preview:nth-child(2n+1) {
        width: 50%
    }
    .photos .preview:nth-child(2n) {
        width: 50%;
        padding-left: 17px
    }
    .photos:nth-child(2) img {
        height: 212px
    }
}

@media (max-width:767px) {
    .photos:nth-child(2) img {
        height: 159px!important
    }
    .photos .se-tre {
        width: 240px;
        height: 38px;
        background-position: 13px 9px;
        background-size: 20px
    }
    .photos .se-tre svg {
        margin-top: -32px;
        margin-left: -60px
    }
    .photos .se-tre text {
        font-size: 19px
    }
}

.red-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(229, 25, 55, .7);
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
    overflow: hidden;
    white-space: nowrap
}

.red-mask span {
    font-family: montserrat-bold, sans-serif;
    color: #fff;
    font-size: 24px;
    position: absolute;
    right: 66px;
    bottom: 50px;
    z-index: 10;
    opacity: 0
}

@media (max-width:1400px) {
    .red-mask {
        white-space: normal
    }
    .red-mask span {
        right: 30px;
        padding-left: 20px;
        bottom: 45px
    }
}

.quote {
    margin-top: -146px;
    background: url(../img/quote-bg.png) no-repeat;
    background-size: cover;
    position: relative;
    z-index: 31
}

.vid-bt,
.vid-bt span,
.vid-bt:after {
    position: absolute
}

.quote .s-qte {
    max-width: 100%;
    width: 700px;
    padding: 270px 90px 108px;
    float: right
}

.quote .s-qte .qt {
    font-size: 140px;
    top: -30px;
    left: -100px
}

.quote .s-qte .tt {
    font-size: 80px;
    line-height: 105px;
    margin-bottom: -20px
}

.quote .s-qte .ar {
    font-size: 20px;
    margin-top: 75px
}

@media (max-width:1599px) and (min-width:1200px) {
    .quote .s-qte {
        min-height: 500px;
        top: 150px
    }
    .quote .s-qte .tt {
        display: inline-block
    }
}

@media (max-width:1599px) {
    .quote .s-qte {
        min-height: 500px
    }
    .quote .s-qte .qt {
        font-size: 78px;
        top: -20px;
        left: -60px
    }
    .quote .s-qte .tt {
        font-size: 42px;
        line-height: 68px
    }
    .quote .s-qte .ar {
        font-size: 21px;
        line-height: 25px;
        margin-top: 25px;
        float: left
    }
}

@media (max-width:1199px) {
    .quote {
        margin-top: 0;
        background: url(../img/photos-bg-768.png) no-repeat #282729;
        background-position-y: bottom;
        background-size: cover
    }
    .quote .s-qte {
        min-height: 500px;
        width: 500px
    }
}

@media (max-width:800px) {
    .quote {
        background: url(../img/photos-bg-800.png) no-repeat;
        background-size: cover
    }
    .quote .s-qte {
        min-height: 700px;
        width: 700px
    }
}

@media (max-width:767px) {
    .quote {
        margin-top: -1px;
        background: url(../images/ph-mobile.jpg) no-repeat;
        background-position-y: bottom;
        background-size: cover
    }
    .quote .s-qte {
        min-height: 430px;
        padding-left: 44px;
        padding-top: 180px;
        padding-right: 0
    }
    .quote .s-qte .qt {
        font-size: 59.6px;
        top: -15px;
        left: -45px
    }
    .quote .s-qte .tt {
        font-size: 32px;
        line-height: 56.19px
    }
    .quote .s-qte .ar {
        font-size: 16px;
        line-height: 25px;
        margin-top: 20px
    }
}

.vid-bt {
    bottom: -190px;
    padding-top: 11px;
    padding-left: 11px;
    border-left: 4px solid #413f3f;
    border-top: 4px solid #413f3f
}

.vid-bt a:not(.red-mask) {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1
}

.vid-bt:after {
    content: '';
    background: url(../img/video-play-bt.png) center no-repeat;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 100px
}

.vid-bt span {
    bottom: 0;
    height: 100px;
    line-height: 100px;
    background: url(../img/bg-red-video.jpg) center no-repeat;
    background-size: cover;
    font-size: 22px;
    right: 0;
    left: 11px;
    color: #fff;
    z-index: 1
}

@media (max-width:1599px) and (min-width:1200px) {
    .vid-bt {
        bottom: -30px
    }
}

@media (max-width:1599px) {
    .vid-bt {
        padding-top: 7px;
        padding-left: 7px;
        max-width: 420px
    }
    .vid-bt span {
        height: 78px;
        line-height: 78px;
        font-size: 19px;
        left: 7px
    }
    .vid-bt:after {
        background-size: 139px;
        bottom: 78px
    }
}

@media (max-width:1199px) {
    .vid-bt {
        bottom: -98px;
        padding-top: 4px;
        padding-left: 5px;
        max-width: 355px;
        left: 43px
    }
    .vid-bt span {
        height: 58px;
        line-height: 58px;
        font-size: 19px;
        left: 5px
    }
    .vid-bt:after {
        background-size: 119px;
        bottom: 58px
    }
}

@media (max-width:767px) {
    .vid-bt {
        bottom: -190px
    }
}

@media (max-width:375px) {
    .vid-bt {
        bottom: -173px;
        padding-top: 4px;
        padding-left: 4px;
        max-width: 100%;
        left: 23px;
        right: 23px;
        border-width: 2px
    }
    .vid-bt span {
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        left: 4px
    }
    .vid-bt:after {
        background-size: 82px;
        bottom: 42px
    }
}

.slider {
    background: url(../img/slider-bg.jpg) center bottom no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 400px
}

.slider .text.mobile {
    display: none
}

@media (max-width:1199px) {
    .slider {
        background: url(../img/slider-bg-768.png) center top no-repeat #282729;
        background-size: auto 100%;
        padding-top: 480px
    }
    .slider .text.mobile {
        display: block
    }
    .to-next,
    .to-prev {
        display: none!important
    }
}

@media (max-width:800px) {
    .slider {
        background: url(../img/slider-bg-768.png) center top no-repeat #282729
    }
}

@media (max-width:767px) {
    .slider {
        background: url(../images/slider-mobile-bg.png) center top no-repeat #282729;
        background-size: 100% 100%
    }
}

.to-next,
.to-prev {
    position: absolute;
    top: 0;
    height: 100%;
    width: 255px;
    cursor: pointer;
    z-index: 99
}

.to-next:hover .red-mask,
.to-prev:hover .red-mask {
    width: 100%
}

.to-next:hover .red-mask span,
.to-prev:hover .red-mask span {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 750ms;
    animation-duration: 750ms;
    -webkit-animation-iteration-count: "infinity";
    animation-iteration-count: "infinity";
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@media (max-width:1599px) {
    .to-next,
    .to-prev {
        width: 200px
    }
}

.to-next {
    right: -255px
}

.to-next .arrow.next {
    left: 55px
}

.to-next .img-preview.next {
    left: 140px
}

@media (max-width:1799px) {
    .to-next {
        right: -200px
    }
    .to-next .img-preview.next {
        left: inherit;
        right: 0
    }
}

.to-prev {
    left: -255px
}

.to-prev .arrow.previous {
    right: 55px
}

.to-prev .img-preview.previous {
    right: 140px
}

.img-preview {
    position: absolute;
    top: calc(50% - 55px);
    border-bottom: 3px solid #413f3f
}

.img-preview.next {
    border-left: 3px solid #413f3f;
    padding-left: 6px
}

.img-preview.previous {
    border-right: 3px solid #413f3f;
    padding-right: 6px
}

.img-preview img {
    width: 103px;
    height: 103px;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width:1799px) {
    .to-prev {
        left: -200px
    }
    .to-prev .img-preview.previous {
        right: inherit;
        left: 0
    }
    .img-preview {
        top: calc(50% - 44px)
    }
    .img-preview img {
        width: 83px;
        height: 83px
    }
}

@media (max-width:1199px) {
    .img-preview {
        display: none!important
    }
}

.loaded .count,
.loaded .text {
    opacity: 1
}

.count,
.text {
    opacity: 0
}

.text {
    width: 867px;
    max-width: 100%;
    position: absolute;
    background: #212121;
    left: 0;
    right: 0;
    bottom: -107px;
    margin: auto;
    min-height: 20px;
    max-height: 100px
    padding: 40px;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.text ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.text li {
    position: relative;
    padding: 0
}

.text>div {
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.text li,
.text p {
    font-size: 22px;
    color: #fff;
    line-height: 34px;
    display: inline-block
}

.footer p,
.footer p a,
.sc .t {
    color: #666
}





.sc .x {
    color: #1e1b1b
}







.text:after,
.text:before {
    content: '';
    top: 36px;
    background: #e51937;
    height: 4px;
    width: 65px;
    position: absolute
}

.text:before {
    left: 48px
}

.text:after {
    top: inherit;
    bottom: 40px;
    right: 45px
}

@media (max-width:1599px) and (min-width:767px) {
    .text:before {
        top: 20px
    }
    .text:after {
        bottom: 20px
    }
}

@media (max-width:1599px) {
    .text {
        padding: 10px 50px;
        min-height: 0
    }
    .text:after,
    .text:before {
        height: 2px;
        width: 30px
    }
    .text li,
    .text p {
        font-size: 15px;
        line-height: 24px
    }
}

@media (max-width:1199px) {
    .text {
        bottom: 0;
        position: relative;
        margin-top: -52px;
        width: 100%;
        opacity: 1
    }
    .text li,
    .text p {
        font-size: 19px;
        line-height: 34px
    }
    .text li:before {
        top: 14px
    }
    .text p:after {
        content: url(../img/slide-touch.png);
        position: absolute;
        left: calc(50% - 20px);
        top: -20px;
        z-index: 33
    }
}

@media (max-width:767px) {
    .text {
        margin-top: -87px;
        padding: 42px 15px;
        min-height: 195px
    }
    .text:after,
    .text:before {
        width: 22px
    }
    .text:after {
        right: 36px
    }
    .text:before {
        left: 36px
    }
    .text p {
        font-size: 14.58px;
        line-height: 22.54px;
        max-width: 260px;
        margin: 0 auto
    }
    .text p:after {
        left: calc(50% - 37px);
        top: -22px
    }
}

.footer {
    background: #0e0e0e;
    padding-top: 196px;
    padding-bottom: 66px;
    margin-bottom: -20px
}

.md a:first-child:before,
.sc .t:before {
    content: '';
    height: 3px;
    background: #e41d38;
    top: calc(50% - 4px);
    z-index: 1
}




.sc .x:before {
    content: '';
    height: 3px;
    background: #e41d38;
    top: calc(50% - 4px);
    z-index: 1;
    margin-right: 30px
}





.footer p {
    line-height: 24px
}

.ct {
    margin-top: 58px
}

@media (max-width:1199px) {
    .footer {
        padding-top: 95px;
        padding-bottom: 10px;
        border-bottom: 10px solid #282729
    }
    .footer p {
        line-height: 31px;
        font-size: 18px;
        text-align: center
    }
    .ct {
        margin-bottom: 55px;
        margin-top: 68px
    }
    .md {
        text-align: center
    }
}

.md a {
    position: relative;
    display: inline-block
}

.md a:first-child {
    margin-right: 168px
}

.md a:first-child:before {
    position: absolute;
    width: 43px;
    right: -107px
}

@media (max-width:767px) {
    .footer {
        border-bottom: none;
        padding-bottom: 0
    }
    .footer p {
        line-height: 24px;
        font-size: 14px
    }
    .ct {
        margin-bottom: 35px;
        margin-top: 40px
    }
    .md a {
        text-align: center
    }
    .md a:first-child {
        margin-right: 114px;
        width: 105px
    }
    .md a:first-child:before {
        right: -73px;
        width: 33px
    }
    .md a:nth-child(2) {
        width: 35px
    }
    
    
    
.sc .x:before {
    content: '';
    height: 2px;
    width: 1px;
    background: #e41d38;
    top: calc(50% - 4px);
    z-index: 1;
    margin-right: 40px
}

    
    
    
    
}

.sc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 47px
}

.sc .t {
    font-size: 18px;
    font-family: montserrat-bold, sans-serif;
    position: relative;
    margin-right: 110px
}



.sc .x {
    font-size: 17px;
    font-family: montserrat-bold, sans-serif;
    position: relative;
    margin-right: 110px
}




.sc .t:before {
    position: absolute;
    width: 43px;
    right: -104px
}



.sc .x:before {
    position: absolute;
    width: 43px;
    right: -104px
}





.sc a {
    margin-left: 58px
}

@media (max-width:1199px) {
    .sc {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .sc .t {
        font-size: 24px;
        margin-bottom: 50px
    }
    .sc div {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        text-align: center;
        overflow: hidden
    }
    .sc a {
        margin: 0 44px
    }
    .sc a svg {
        width: 23px;
        height: 23px
    }
    
    
        .scxx svg {
        width: 50px;
        height: 23px
    }

    
    
}

@media (max-width:767px) {
        
    .sc .t {
        font-size: 18px;
        margin-bottom: 32px;
        margin-right: 60px
    }
    .sc .t:before {
        width: 33px;
        right: -93px

        
    }
    .sc a {
        margin: 0 56px 0 0

    }
    
    
    
    .sc .x {
    font-size: 15px;
    margin-right: 1px
   
 }
            
    
    .sc a svg {
        width: 17px;
        height: 17px

    }
    .sc a:last-child {
        margin: 0

    }
}

.cw {
    text-align: right;
    margin-top: 110px

}

@media (max-width:1199px) {
    .cw {
        margin-top: 34px
    }
}

@media (max-width:767px) {
    .cw {
        margin-top: 30px
    }
}