@import url(https://fonts.googleapis.com/css?family=DM+Sans:400,500,700);

@font-face {
    font-family: 'MonumentExtended_Regular';
    src: url("fonts/MonumentExtended-Regular.eot");
    src: url("fonts/MonumentExtended-Regular.eot?#iefix")format("embedded-opentype"),
    url("fonts/MonumentExtended-Regular.woff") format("woff"),
    url("fonts/MonumentExtended-Regular.woff2") format("woff2"),   
    url("fonts/MonumentExtended-Regular.otf") format("opentype"),
    url("fonts/MonumentExtended-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'ObjectSans_Regular';
    src: url("fonts/ObjectSans-Regular.eot");
    src: url("fonts/ObjectSans-Regular.eot?#iefix")format("embedded-opentype"),
    url("fonts/ObjectSans-Regular.woff") format("woff"),
    url("fonts/ObjectSans-Regular.woff2") format("woff2"),   
    url("fonts/ObjectSans-Regular.otf") format("opentype"),
    url("fonts/ObjectSans-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

body {
    background-color: #fff;
    font-family: 'ObjectSans_Regular', Helvetica, Arial, sans-serif;
    font-weight: normal;
    padding-right: 0 !important;
}
h1, h2, h3, h4, h5 {
    font-family: 'MonumentExtended_Regular', Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #000;
}
h1 {
    font-size: 64px;
    line-height: 79px;
    margin-bottom: 69px;
}
h2 {
    font-size: 50px;
    line-height: 60px;
    margin-bottom: 20px;
}
h3 {
    font-size: 36px;
    line-height: 43px;
    margin-bottom: 40px;
}
p {
    color: rgba(0,0,0,.6);
    font-size: 34px;
    line-height: 44px;
}
a {
    color: rgba(0,0,0,.5);
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
button {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
a:hover {
    text-decoration: none;
    color: #000;
}
a:active,
a:focus {
    outline: none;
}
.transition-all {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.text-black {
    color: #000 !important;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-100 {
    margin-bottom: 100px;
}
.mb-120 {
    margin-bottom: 120px;
}
img {
    pointer-events: none;
    width: 100%;
}
strong {
    font-weight: normal;
}
.hidden-box {
     opacity: 0;
}
.visible-box {
     opacity: 1;
}

/* --- header --- */
header {
    padding-top: 55px;
    padding-bottom: 120px;
}
.navbar-light .navbar-brand {
    position: relative;
    top: -3px;
}
.nav-item a {
    font-family: 'MonumentExtended_Regular', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 19px;
}
.navbar-nav li.active a {
    color: #000;
}
/* --- /header --- */

/* --- home page --- */
.section-first .purchase-btn,
.section-preview .purchase-btn {
    padding: 0 25px;
    height: 60px;
    background-color: #000;
    font-family: 'MonumentExtended_Regular', Helvetica, Arial, sans-serif;
    color: #FF8383;
    font-size: 20px;
    line-height: 60px;
}
.section-first .purchase-btn:hover,
.section-preview .purchase-btn:hover {
    color: #000;
    background-color: #FF8383;
}
.section-first .purchase-btn:active,
.section-first .purchase-btn:focus,
.section-preview .purchase-btn:active,
.section-preview .purchase-btn:focus {
    background-color: #FF5050;
}
.image-first {
    margin-bottom: 135px;
}
.image-center {
    position: relative;
    z-index: 2;
}
.image-top + img {
    display: none;
}
.element-image-second {
    background-image: url(../images/1.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 167px;
    height: 163px;
    top: 34px;
    right: 100px;
    z-index: -1;
}
.element-image-fourth {
    background-image: url(../images/4.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 187px;
    height: 271px;
    top: 375px;
    left: -30px;
}
.element-image-sixth {
    background-image: url(../images/group-4.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 295px;
    height: 237px;
    bottom: -15px;
    right: 275px;
    z-index: -1;
}
.element-image-seventh {
    background-image: url(../images/5.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 88px;
    height: 89px;
    top: 425px;
    left: -30px;
    z-index: -1;
}
.element-image-eighth {
    background-image: url(../images/3.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 192px;
    height: 184px;
    bottom: 50px;
    left: 130px;
    z-index: -1;
}
.mobile-btn {
    height: 50px;
    padding: 0 27px;
    background-color: #F5B4C4;
    color: #000;
    font-size: 24px;
    line-height: 50px;
}
.web-btn {
    height: 50px;
    padding: 0 27px;
    background-color: #B4C2F5;
    color: #000;
    font-size: 24px;
    line-height: 50px;
}
a.purchase-btn {
    height: 60px;
    padding: 0 25px;
    background-color: #2773E6;
    color: #fff;
    font-family: 'MonumentExtended_Regular', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 65px;
}
a.purchase-btn:hover {
    background-color: #000;
    color: #fff;
}
a.purchase-btn:active,
a.purchase-btn:focus {
    background-color: #175bc3;
}
a.purchase-link {
    color: #000;
    font-family: 'MonumentExtended_Regular', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 19px;
    padding: 0 45px;
}
a.purchase-link:hover {
    color: rgba(0,0,0,.4);
}
a.purchase-link:active,
a.purchase-link:focus {
    color: rgba(0,0,0,.6);
}
/* --- /home page --- */

/* --- full preview page --- */
.section-preview {
    margin-bottom: 7px;
}
.section-preview .col-lg-6 {
    margin-bottom: 30px;
}
.section-extensions {
    margin-bottom: 41px;
}
.section-extensions span {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    background: #E8E8E8;
    padding: 0 12px;
}
/* --- /full preview page --- */

/* --- footer --- */
footer {
    background-color: #E7E8EA;
    padding: 50px 0 52px;
}
.footer-logo {
    margin-bottom: 25px;
}
.footer-text {
    font-size: 16px;
    line-height: 26px;
}
.footer-title {
    font-family: 'MonumentExtended_Regular', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: #000;
    margin-bottom: 28px;
    margin-top: 11px;
}
.footer-list {
    margin: 0 0 40px 0;
    padding: 0;
    list-style-type: none;
}
.footer-list li {
    margin-bottom: 10px;
}
.footer-list li:last-child {
    margin-bottom: 0;
}
.footer-list li a {
    color: rgba(0,0,0,.5);
    font-size: 16px;
    line-height: 14px;
    display: inline-block;
}
.footer-list li.active a {
    color: #000;
}
.footer-list li a:hover {
    color: #000;
}
/* --- /footer --- */

/* --- animation --- */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.delay-0-1s,
.magictime.delay-0-1s {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
} 
.animated.delay-0-2s,
.magictime.delay-0-2s {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
} 
.animated.delay-0-3s,
.magictime.delay-0-3s {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
} 
.animated.delay-0-4s,
.magictime.delay-0-4s {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
} 
.animated.delay-0-5s,
.magictime.delay-0-5s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
.animated.delay-0-6s,
.magictime.delay-0-6s {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
.animated.delay-0-7s,
.magictime.delay-0-7s {
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}
.animated.delay-0-8s,
.magictime.delay-0-8s {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
.animated.delay-0-9s,
.magictime.delay-0-9s {
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}
.animated.delay-1s,
.magictime.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.animated.delay-1-1s,
.magictime.delay-1-1s {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.animated.delay-1-2s,
.magictime.delay-1-2s {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.animated.delay-1-3s,
.magictime.delay-1-3s {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.animated.delay-1-4s,
.magictime.delay-1-4s {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.animated.delay-1-5s,
.magictime.delay-1-5s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.animated.delay-1-6s,
.magictime.delay-1-6s {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
.animated.delay-1-7s,
.magictime.delay-1-7s {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
.animated.delay-1-8s,
.magictime.delay-1-8s {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.animated.delay-1-9s,
.magictime.delay-1-9s {
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
}
.animated.delay-2s,
.magictime.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.animated.delay-2-1s,
.magictime.delay-2-1s {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}
.animated.delay-2-2s,
.magictime.delay-2-2s {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
.upanddownsmalls {
    -webkit-animation-name: animation_13;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: both;
    -webkit-animation-play-state: running;
    animation-name: animation_13;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
.upanddownsmall {
    -webkit-animation-name: animation_12;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: both;
    -webkit-animation-play-state: running;
    animation-name: animation_12;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
.upanddown {
    -webkit-animation-name: animation_8;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: both;
    -webkit-animation-play-state: running;
    animation-name: animation_8;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
.upanddowninvers {
    -webkit-animation-name: animation_9;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: both;
    -webkit-animation-play-state: running;
    animation-name: animation_9;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
.animated.duration-1s {    
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.animated.duration-2s {    
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.animated.duration-3s {    
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
.fadeInDownCustom {
    -webkit-animation-name: fadeInDownSmall;
    animation-name: fadeInDownSmall;
}
.fadeInLeftCustom {
    -webkit-animation-name: fadeInLeftSmall;
    animation-name: fadeInLeftSmall;
}
@-webkit-keyframes animation_8 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,25,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@keyframes animation_8 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,25,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@-webkit-keyframes animation_9 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,20,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@keyframes animation_9 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,20,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@-webkit-keyframes animation_12 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,20,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@keyframes animation_12 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,20,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@-webkit-keyframes animation_13 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,10,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@keyframes animation_13 {
	0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: ease-in-out}
	50% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,10,0,1); opacity: 1; animation-timing-function: ease-in-out}
	100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; }
}
@-webkit-keyframes fadeInDownSmall {
	0% {opacity: 0;-webkit-transform: translateY(-20px);}
	100% {opacity: 1;-webkit-transform: translateY(0);}
}
@-moz-keyframes fadeInDownSmall {
	0% {opacity: 0;-moz-transform: translateY(-20px);}
	100% {opacity: 1;-moz-transform: translateY(0);}
}
@-o-keyframes fadeInDownSmall {
	0% {opacity: 0;-o-transform: translateY(-20px);}
	100% {opacity: 1;-o-transform: translateY(0);}
}
@keyframes fadeInDownSmall {
	0% {opacity: 0;transform: translateY(-20px);}
	100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes fadeInLeftSmall {
	0% {opacity: 0;-webkit-transform: translateX(-30px);}
	100% {opacity: 1;-webkit-transform: translateY(0);}
}
@-moz-keyframes fadeInLeftSmall {
	0% {opacity: 0;-moz-transform: translateX(-30px);}
	100% {opacity: 1;-moz-transform: translateY(0);}
}
@-o-keyframes fadeInLeftSmall {
	0% {opacity: 0;-o-transform: translateX(-30px);}
	100% {opacity: 1;-o-transform: translateY(0);}
}
@keyframes fadeInLeftSmall {
	0% {opacity: 0;transform: translateX(-30px);}
	100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes slideOutLeft {
	from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translateX(-110%);
        transform: translateX(-110%);
    }
}
@-moz-keyframes slideOutLeft {
	from {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        visibility: hidden;
        -moz-transform: translateX(-110%);
        transform: translateX(-110%);
    }
}
@-o-keyframes slideOutLeft {
	from {
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        visibility: hidden;
        -o-transform: translateX(-110%);
        transform: translateX(-110%);
    }
}
@keyframes slideOutLeft {
	from {
        transform: translateX(0);
    }
    to {
        visibility: hidden;
        transform: translateX(-110%);
    }
}
/* --- /animation --- */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    .element-image-second {
        background-image: url(../images/1@2x.png);
    }
    .element-image-fourth {
        background-image: url(../images/4@2x.png);
    }
    .element-image-sixth {
        background-image: url(../images/group-4@2x.png);
    }
    .element-image-seventh {
        background-image: url(../images/5@2x.png);
    }
    .element-image-eighth {
        background-image: url(../images/3@2x.png);
    }
    .image-top:before {
        background-image: url(../images/image-center-mobile@2x.png);
    }
}
@media only screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        margin: 0 -15px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .footer-top .col-lg-4,
    .footer-top .col-lg-3,
    .footer-top .col-lg-2 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media only screen and (max-width: 1200px) {
    a.purchase-link {
        display: block !important;
        margin: 60px 0 40px;
    }
}
@media only screen and (max-width: 1024px) {
    [class*=eff] {
        opacity: 1 !important;
    }
}
@media only screen and (max-width: 991px) {
    h1 {
        font-size: 40px;
        line-height: 60px;
    }
    h2 {
        font-size: 34px;
        line-height: 48px;
    }
    p {
        font-size: 26px;
        line-height: 34px;
    }
    header {
        padding-bottom: 55px;
    }
    .navbar-nav {
        margin: 20px -15px 0;
    }
    .nav-item a {
        display: inline-block;
    }
    .image-top * {
        display: none;
    }
    .image-top + img {
        display: block;
        margin-bottom: 70px;
    }
    .mb-120,
    .mb-100 {
        margin-bottom: 30px;
    }
    .section-first,
    .section-second,
    .section-third {
        margin-bottom: 70px;
    }
    .section-second .col-lg-2,
    .section-third .col-lg-2 {
        margin-bottom: 30px;
        text-align: left !important;
    }
}
@media only screen and (max-width: 767px) {
    .footer-top .footer-text {
        margin-bottom: 40px !important;
    }
    h3 {
        font-size: 28px;
    }
    a.purchase-link {
        padding: 0;
    }
}
@media only screen and (max-width: 320px) {
    h1 {
        font-size: 32px;
        line-height: 44px;
    }
    h3 {
        font-size: 24px;
        line-height: 34px;
    }
}

.grecaptcha-badge {
    display: none;
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
}