a,
#header,
#header .logo svg,
#header .logo img,
.hero-home .container .learnmore a:before,
.hero-home h1 .title:first-child:before,
.section.section-1 .heading h2 .title:before,
.section.section-1 .twoColumns .image img,
.section.section-2 .heading h2 .title:before,
.section.section-2 .block .column .over,
.section.section-3 .wrapper .heading h2 .title:before,
.section.section-4 .wrapper .heading h2 .title:before,
.section.section-5 .heading h2 .title:before,
.section.section-5 .slider-wrap .item,
.section.section-6 .heading h2 .title:before,
.section.section-6 .slider-wrap .logos .item,
footer .wrapper .heading h2 .title:before,
footer .wrapper .heading h2 .title:after,
.side-panel .content .wrapper .icon-tabs .column,
.side-panel .close-pane {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
section {
    /*border: 1px solid red;*/
}
section[data-anchor=section0] {
    padding-top: 0 !important;
}
section[data-anchor=section0] .fp-tableCell {
    vertical-align: top;
}
.fp-auto-height .fp-section {
    height: auto !important;
}

.hero-home .image,
.hero-home .image img,
.hero-home .container .bg,
.hero-home .container .learnmore,
.hero-home .links,
.section.section-1 .twoColumns .image:before,
.section.section-3 .wrapper:before,
.section.section-3 .wrapper .block .column,
.section.section-4 .wrapper:before,
.section.section-4 .wrapper .block .image,
footer .link,
footer .wrapper:before,
footer .wrapper .heading .text,
.side-panel .content {
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease
}
section {

    box-sizing: content-box;
}

@font-face {
    font-family: 'Chillax-Variable';
    src: url("../fonts/Chillax-Variable.woff2") format("woff2"), url("../fonts/Chillax-Variable.woff") format("woff"), url("../fonts/Chillax-Variable.ttf") format("truetype");
    font-weight: 200 700;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'Chillax-Extralight';
    src: url("../fonts/Chillax-Extralight.woff2") format("woff2"), url("../fonts/Chillax-Extralight.woff") format("woff"), url("../fonts/Chillax-Extralight.ttf") format("truetype");
    font-weight: 200;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'Chillax-Light';
    src: url("../fonts/Chillax-Light.woff2") format("woff2"), url("../fonts/Chillax-Light.woff") format("woff"), url("../fonts/Chillax-Light.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'Chillax-Regular';
    src: url("../fonts/Chillax-Regular.woff2") format("woff2"), url("../fonts/Chillax-Regular.woff") format("woff"), url("../fonts/Chillax-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'Chillax-Medium';
    src: url("../fonts/Chillax-Medium.woff2") format("woff2"), url("../fonts/Chillax-Medium.woff") format("woff"), url("../fonts/Chillax-Medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'Chillax-Semibold';
    src: url("../fonts/Chillax-Semibold.woff2") format("woff2"), url("../fonts/Chillax-Semibold.woff") format("woff"), url("../fonts/Chillax-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'Chillax-Bold';
    src: url("../fonts/Chillax-Bold.woff2") format("woff2"), url("../fonts/Chillax-Bold.woff") format("woff"), url("../fonts/Chillax-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: normal
}

body,
#header .menu ul.right li a {
    font-family: 'Chillax-Regular', serif;
    font-style: normal
}

.section.section-contact h1,
.section.section-page h1,
.section.section-page h2,
.section.section-page h3,
.section.section-page h4,
.section.section-page h5 {
    font-family: 'Chillax-Medium', serif;
    font-style: normal
}

.btn,
b,
strong,
#header .menu ul li a,
.hero-home h1,
.section.section-1 .heading h2,
.section.section-1 .twoColumns h3,
.section.section-2 .heading h2,
.section.section-3 .wrapper .heading h2,
.section.section-3 .wrapper .block .lg,
.section.section-4 .wrapper .heading h2,
.section.section-5 .heading h2,
.section.section-6 .heading h2,
footer .wrapper .heading h2,
.side-panel .content .wrapper h2 {
    font-family: 'Chillax-Bold', serif;
    font-style: normal
}

.section.section-1 .twoColumns .quote,
.section.section-2 .block h3,
.section.section-3 .wrapper .block,
footer .wrapper .heading p,
.side-panel .content .wrapper .icon-tabs {
    font-family: 'Chillax-Semibold', serif;
    font-style: normal
}

body {
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.5;
    color: #919191;
    background: #f8f8f8
}

@media only screen and (min-width: 992px) {
    body {
        font-size: 18px
    }
}

input:-internal-autofill-previewed,
input:-internal-autofill-selected,
textarea:-internal-autofill-previewed,
textarea:-internal-autofill-selected,
select:-internal-autofill-previewed,
select:-internal-autofill-selected {
    background-color: transparent !important
}

.form-control {
    color: #7192E6;
    padding: 12px;
    border-radius: 16px;
    border: 2px solid #303030;
    background: transparent;
    height: auto;
    background: #fff
}

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url(//static.offertoro.com/public/site-images/select.svg) right 20px center no-repeat;
    background-size: 8px;
    padding-right: 40px;
    height: auto !important
}

textarea.form-control {
    height: 120px
}

.form-control:focus,
button:focus,
input[type="submit"],
:focus {
    outline: 0;
    box-shadow: none
}

.form-control:focus {
    border-color: #7192E6;
    color: #7192E6;
    background-color: transparent
}

a {
    color: #7192E6
}

a:hover {
    text-decoration: none;
    color: #333033
}

img {
    max-width: 100%;
    height: auto
}

.container {
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1200px
}

.container.container-full {
    max-width: 100%
}

.btn {
    border-radius: 16px;
    /*font-size: 14px;*/
    border: 0;
    padding: 14px 35px;
    text-transform: uppercase
}

.btn.btn-primary {
    background: #7192E6;
    color: #fff
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: #7192E6;
    background: #fff;
    -webkit-box-shadow: 3px 3px 0px 0px #7192e6;
    -moz-box-shadow: 3px 3px 0px 0px #7192e6;
    box-shadow: 3px 3px 0px 0px #7192e6
}

.btn.btn-secondary {
    background: #303030;
    color: #fff
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    color: #303030;
    background: #fff;
    -webkit-box-shadow: 3px 3px 0px 0px #303030;
    -moz-box-shadow: 3px 3px 0px 0px #303030;
    box-shadow: 3px 3px 0px 0px #303030
}

.mb-40 {
    margin-bottom: 20px !important
}

@media only screen and (min-width: 992px) {
    .mb-40 {
        margin-bottom: 40px !important
    }
}

b,
strong {
    font-weight: normal
}

.wrap-top {
    margin-top: 110px;
}
.wrap-top .docs-sidebar + div {
    padding-top: 50px;
}

.floating-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}
#header {
    padding: 20px 0
}

#header .menu {
    display: none
}

.non-homepage-footer {
    margin-top: 40px;
    padding-bottom: 20px;
}
#header .menu ul, .non-homepage-footer ul {
    list-style: none;
    margin: 0;
    padding: 0
}

#header .menu ul li a, .non-homepage-footer ul li a {
    font-size: 28px;
    color: #fff
}

#header .menu ul li.current_page_item,
#header .menu ul li ul {
    display: none;
    padding-top: 20px
}

#header .menu ul.right {
    text-align: center;
    margin-bottom: 40px;
    border-top: 1px solid #F8F8F8;
    margin-top: 40px;
    padding-top: 40px
}

#header .menu ul.right li {
    display: inline-block;
    margin: 0 15px
}


#header .menu ul.right li a {
    text-transform: uppercase;
    font-size: 16px;
}

#header .menu ul.right li .btn-secondary {
    background: #fff;
    color: #303030
}

#header .toggle {
    width: 40px;
    height: 40px;
    background: url(//static.offertoro.com/public/site-images/menu.svg) center no-repeat;
    background-size: cover
}

#header .toggle.open {
    background-image: url(//static.offertoro.com/public/site-images/close.svg)
}

#header .container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

#header .logo svg,
#header .logo img {
    width: 102px
}

@media only screen and (min-width: 992px) {

    #header .logo svg,
    #header .logo img {
        width: 134px
    }
}

#header.active {
    background: #fff;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.2)
}

#header.active .navmenu-item {
    background: #7192E6
}

@media only screen and (min-width: 992px) {
    #header.active {
        background: transparent;
        box-shadow: none
    }
}

#header.open {
    background: #303030
}

@media only screen and (min-width: 992px) {
    #header.open {
        background: transparent
    }
}
.non-homepage-footer ul li:not(:last-child):after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: #303030;
    position: absolute;
    right: -25px;
    top: 50%;
    margin-top: -3px
}

.non-homepage-footer ul li {
    display: inline-block;
    margin: 0 10px;
    position: relative;
    line-height: 1
}
.non-homepage-footer ul li {
    margin: 0 15px
}
.non-homepage-footer ul li:last-child {
    margin-right: 0
}
.non-homepage-footer ul li a {
    position: relative;
    font-size: 16px;
    font-family: 'Chillax-Medium', serif;
    color: #303030
}
.non-homepage-footer ul li a:hover {
    color: #7192E6
}

@media only screen and (min-width: 992px) {
    .floating-header {
        position: absolute;
    }
    #header {
        padding: 37px 0px;
        text-align: center;
        background: transparent
    }

    #header .toggle {
        display: none
    }

    #header .menu {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: calc(82% - 134px)
    }

    #header .menu ul.center li:after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 3px;
        background: #303030;
        position: absolute;
        right: -25px;
        top: 50%;
        margin-top: -3px
    }

    #header .menu ul.center li:last-child:after {
        display: none
    }

    #header .menu ul li {
        display: inline-block;
        margin: 0 10px;
        position: relative;
        line-height: 1
    }
}

@media only screen and (min-width: 992px) and (min-width: 1200px) {
    #header .menu ul li {
        margin: 0 20px
    }
}

@media only screen and (min-width: 992px) {
    #header .menu ul li:last-child {
        margin-right: 0
    }

    #header .menu ul li a {
        position: relative;
        font-size: 16px;
        font-family: 'Chillax-Medium', serif;
        color: #303030
    }

    #header .menu ul li a:hover {
        color: #7192E6
    }

    #header .menu ul.right {
        margin-bottom: 0px;
        border-top-width: 0;
        margin-top: 0px;
        padding-top: 0px
    }

    #header .menu ul.right li {
        margin: 0 10px
    }

    #header .menu ul.right li .btn-secondary {
        background: #303030;
        color: #fff
    }

    #header .menu ul.right li .btn-secondary:hover {
        background: #7192E6
    }
}

@media only screen and (max-width: 991px) {
    #header .menu {
        position: fixed;
        width: 100%;
        background: #303030;
        left: 0;
        top: 76px;
        padding-top: 40px
    }

    #header .menu ul li {
        text-align: center;
        margin-bottom: 20px
    }

    #header .menu ul li:last-child a {
        display: inline-block
    }
}

.anchor {
    display: block;
    position: relative;
    top: -82px;
    visibility: hidden
}

.main {
    padding-top: 82px
}

@media only screen and (min-width: 992px) {
    .anchor {
        top: -164px
    }

    .main {
        padding-top: 164px
    }
}

.hero-home {
    position: relative;
    overflow: hidden
}

@media only screen and (min-width: 992px) {
    .hero-home {
        padding-bottom: 12px
    }

    .hero-home:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        margin: 0 auto;
        transform: translate(8px, -5px);
        width: 100%;
        height: 100%;
        content: '';
        border: 4px solid #303030;
        border-radius: 0px 0px 64px 64px;
        max-width: 1236px;
        border-top: 0;
        z-index: -1
    }
}

.hero-home .image {
    position: relative;
    text-align: center;
    max-width: 70%;
    margin: 0 auto;
    opacity: 0;
    width: 530px;
    height: 100%;
    max-height: 650px;
}

.hero-home .image.active {
    opacity: 1
}

.hero-home .image .float {
    animation: float 5s ease-in-out infinite
}

.hero-home .image .over, .cloud-animations {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.hero-home .image .over { z-index: 3; }

@media only screen and (min-width: 992px) {
    .hero-home .image, .cloud-animations {
        max-width: 530px;
        margin-right: 0;
        margin-left: auto
    }
}

.cloud-animations {
    /*border: 1px solid red;*/
}
.cloud-animations > img { position: absolute; z-index: 2; display: none; } /* TODO remove opacity after animations */
.cloud-animations > img:nth-child(n+7) { animation: throw 350ms; }
.cloud-animations > img.yellow-circle-c, .cloud-animations > img.dash-h, .cloud-animations > img.dash-i { z-index: 0; animation: throw_cloud2 350ms; }
.cloud-animations .person-ipad { width: 46.5%; bottom: 0%; left: 35%; }
.cloud-animations .cloud-a { width: 56%; left: 0; z-index: 3; } /* animation-delay: 20s; */
.cloud-animations .cloud-b { width: 30.6%; left: 65%; top: 28.7%; z-index: 1; }
.cloud-animations .cloud-a-ring-a { width: 9%; left: 45%; top: 10%; }
.cloud-animations .cloud-a-ring-b { width: 12%; left: 45%; top: 6%; }
.cloud-animations .cloud-a-ring-c { width: 18%; left: 44%; top: 2%; }
.cloud-animations .dark-lightning { width: 7%; left: 6%; top: 42%; }
.cloud-animations .dark-triangle-a { width: 6%; left: 45%; top: 23.5%; }
.cloud-animations .dark-triangle-b { width: 5%; left: 50.5%; top: 52%; }
.cloud-animations .dash-a { width: 3.4%; left: 6.2%; top: 24%; }
.cloud-animations .dash-b { width: 1.9%; left: 1%; top: 30.7%; }
.cloud-animations .dash-c { width: 1.2%; left: 24%; top: 34.7%; }
.cloud-animations .dash-d { width: 2.2%; left: 43%; top: 37.7%; }
.cloud-animations .dash-e { width: 0.57%; left: 41.7%; top: 43.9%; }
.cloud-animations .dash-f { width: 2%; left: 46%; top: 52%; }
.cloud-animations .dash-g { width: 2%; left: 24%; top: 61%; }
.cloud-animations .dash-h { width: 1.6%; left: 82%; top: 47.2%; }
.cloud-animations .dash-i { width: 0.6%; left: 91%; top: 62.2%; }
.cloud-animations .dollar-a { width: 8%; left: 24%; top: 27.8%; }
.cloud-animations .dollar-b { width: 6.1%; left: 36%; top: 31.8%; }
.cloud-animations .dollar-c { width: 5.4%; left: 21.5%; top: 42%; }
.cloud-animations .dollar-d { width: 3.4%; left: 17.5%; top: 51.7%; }
.cloud-animations .dollar-e { width: 5.6%; left: 39.5%; top: 47%; }
.cloud-animations .halfmoon { width: 6.8%; left: 14.7%; top: 28%; }
.cloud-animations .light-triangle-a { width: 6.8%; left: 31.2%; top: 39.2%; }
.cloud-animations .light-triangle-b { width: 5%; left: 28.5%; top: 58.8%; }
.cloud-animations .light-triangle-c { width: 6%; left: 86.5%; top: 46.8%; }
.cloud-animations .lightning { width: 4%; left: 13.8%; top: 63.8%; }
.cloud-animations .plus { width: 3%; left: 61.8%; top: 21.2%; }
.cloud-animations .square-a { width: 16%; left: 29.2%; top: 21.3%; }
.cloud-animations .square-b { width: 6%; left: 17.2%; top: 21.8%; }
.cloud-animations .envelope { width: 20%; left: 68.2%; top: 13%; }
.cloud-animations .yellow-circle-a { width: 2.3%; left: 27.2%; top: 54.8%; }
.cloud-animations .yellow-circle-b { width: 2.3%; left: 46.2%; top: 45.2%; }
.cloud-animations .yellow-circle-c { width: 4.8%; left: 95.2%; top: 53.2%; }
.cloud-animations .yellow-circle-d { width: 2.3%; left: 48.2%; top: 56.2%; }
.cloud-animations .extra-a { width: 2.3%; left: 46.2%; top: 45.2%; }
.cloud-animations .extra-b { width: 5.5%;left: 40.7%;top: 55.4%; }
.cloud-animations .light-dash-a { width: 1%; left: 46.8%; top: 58.2%; }
.cloud-animations .light-dash-b { width: 1.3%; left: 52.7%; top: 55.6%; }

.person-ipad.animate {
    animation: slide_popin 800ms forwards;
}
.cloud-a.animate, .cloud-b.animate {
    animation: cloud_grow 300ms;
}
[class*="cloud-a-ring"].animate {
    animation: radiate 2000ms infinite;
}

.ease_bounce_out > span {
    animation-name: ease_bounce_out;
    animation-duration: 400ms;
    /*animation-delay: 0.2s; // should be dynamically adjusted by js +0.1s */
    animation-fill-mode: forwards;
}

@keyframes ease_bounce_out {
    0% {
        bottom: -80px;
        opacity: 0;
    }
    80% {bottom: 8px;}

    100% {
        bottom: 0;
        opacity:1;
    }
}

@keyframes cloud_grow {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes slide_popin {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
@keyframes throw {
    from {
        opacity: 0;
        left: 24%;
        top: 10%;
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        opacity: 0.7;
        transform: translateY(0);
        transform: translateX(0);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes throw_cloud2 {
    from {
        opacity: 0;
        left: 80.2%;
        top: 37.2%;
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        opacity: 0.7;
        transform: translateY(0);
        transform: translateX(0);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes radiate {
    0% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(+5%);
    }
}
.hero-home .image > img, .hero-home .image .over > img, .cloud-animations {
    width: 100%
}

.hero-home .container {
    padding-top: 140px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    background: #fff;
    text-align: center;
    padding-bottom: 80px
}

.hero-home .container .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('//static.offertoro.com/public/site-images/bg.svg') center no-repeat;
    background-size: cover;
    opacity: 0;
}

.hero-home .container .learnmore {
    position: absolute;
    display: inline-block;
    font-size: 14px;
    bottom: 30px;
    text-align: center;
    left: 0;
    width: 100%;
    z-index: 3;
    opacity: 0
}

@media only screen and (min-width: 992px) {
    .hero-home .container .learnmore {
        width: auto;
        left: 40px;
        bottom: 60px
    }
}

.hero-home .container .learnmore a {
    color: #303030;
    padding-left: 52px;
    position: relative
}

.hero-home .container .learnmore a:before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #303030 url(//static.offertoro.com/public/site-images/arrowdown.svg) center no-repeat;
    background-size: 16px;
    position: absolute;
    top: 50%;
    margin-top: -18px;
    left: 0;
    -webkit-box-shadow: 2px 2px 0px 0px #fff;
    -moz-box-shadow: 2px 2px 0px 0px #fff;
    box-shadow: 2px 2px 0px 0px #fff
}

.hero-home .container .learnmore a:hover {
    color: #7192E6
}

.hero-home .container .learnmore a:hover:before {
    background-color: #7192E6
}

@media only screen and (min-width: 992px) {
    .hero-home .container {
        max-width: 1380px;
        padding-right: 80px;
        padding-left: 80px;
        text-align: left;
        border: 4px solid #303030;
        border-radius: 0px 0px 60px 60px;
        margin-top: -4px;
        -webkit-box-shadow: 4px 3px 0px 0px #7192e6;
        -moz-box-shadow: 4px 3px 0px 0px #7192e6;
        box-shadow: 4px 3px 0px 0px #7192e6
    }
}

.hero-home .container .content {
    position: relative;
    z-index: 2
}

.hero-home .container p {
    word-wrap: break-word;
    opacity: 0
}

@media only screen and (min-width: 992px) {
    .hero-home .container {
        padding-bottom: 40px;
        display: flex;
        justify-content: space-between
    }

    .hero-home .container p {
        max-width: 474px
    }

    .hero-home .container .content {
        width: 46%;
        padding: 40px 0 40px
    }
}

@media only screen and (min-width: 992px) and (min-width: 992px) {
    .hero-home .container .content {
        padding-bottom: 100px;
        padding-top: 80px
    }
}

.hero-home .clear {
    clear: both
}

@media only screen and (min-width: 992px) {
    .hero-home .clear {
        padding-top: 40px
    }
}


.hero-home .container .bg, #header, .hero-home h1 .title:first-child, .hero-home .image, .hero-home .links,.hero-home .learnmore, .hero-home .clear p {
    opacity: 0; /* set opacity to promote page animations */
}
.hero-home h1 {
    font-size: 28px;
    margin-bottom: 30px;
    line-height: 1.5;
    color: #303030;
    position: relative;
    opacity: 0; /* added opacity since during start, it prints the whole word and then fades out */
}

@media only screen and (min-width: 992px) {
    .hero-home h1 .title {
        display: block;
        float: left;
        position: relative
    }

    .hero-home h1 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}

.hero-home h1 .title:first-child {
    position: relative
}
/**
"we live" circle
 */
.we-live-circle {
    opacity: 0;
    position: absolute;
    top: -15px;
    left: -16px;
}
.we-live-circle.animate .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 0.5s cubic-bezier(.2,.95,.74,.7) forwards;
}

@keyframes dash {

    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }

    50% {
        fill-opacity:0;
    }
    60% {
        fill-opacity:1;
    }

    100% {
        stroke-dashoffset: 0;
    }


}

@media only screen and (min-width: 992px) {
    .hero-home h1 .title:first-child:before {
        width: 198px;
        height: 99px;
        top: -19px;
        left: -13px
    }
}

.hero-home h1 .title:first-child.active:before {
    opacity: 1
}

.hero-home h1 [aria-label="We live and breathe"] .char1,
.hero-home h1 [aria-label="We live and breathe"] .char2,
.hero-home h1 [aria-label="We live and breathe"] .char3,
.hero-home h1 [aria-label="We live and breathe"] .char4,
.hero-home h1 [aria-label="We live and breathe"] .char5,
.hero-home h1 [aria-label="We live and breathe"] .char6,
.hero-home h1 [aria-label="We live and breathe"] .char7,
.hero-home h1 [aria-label="We live and breathe"] .char8 {
    color: #7192E6
}


.hero-home .links {
    margin-bottom: 60px;
    margin-top: 30px;
    opacity: 0
}

@media only screen and (min-width: 992px) {
    .hero-home .links {
        margin-bottom: 0;
        margin-top: 60px
    }
}

/*.section {*/
/*    padding: 60px 0*/
/*}*/

@media only screen and (min-width: 992px) {
    .section {
        padding: 100px 0
    }
}

.section .mt-40 {
    margin-top: 40px
}

#advertiser_section, #adv_section2, #adv_section3 {
    position: relative;
    z-index: 2;
    background-size: cover !important;
    -webkit-transition: background 1.5s linear;
    -moz-transition: background 1.5s linear;
    -o-transition: background 1.5s linear;
    -ms-transition: background 1.5s linear;
    transition: background 1.5s linear;
}
#advertiser_section.animate-me {
    background: url('//static.offertoro.com/public/site-images/asec-a.svg') top center no-repeat;
}
#adv_section2.animate-me {
    background: url('//static.offertoro.com/public/site-images/asec-b.svg') top center no-repeat;
}
.fade-in-background {
    animation: fadeIn 3s;
    -webkit-animation: fadeIn 3s;
    -moz-animation: fadeIn 3s;
    -o-animation: fadeIn 3s;
    -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

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

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

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

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

.section.section-1 .heading {
    text-align: center
}

.section.section-1 .heading h2 {
    color: #7192E6;
    font-size: 28px;
    text-align: center
}


.section.section-1 .heading h2 {
    font-size: 48px
}
.section.section-1 .heading h2 > div { height: 58px; }

.hero-home h1 {
    font-size: 48px;
    max-width: 570px;
    margin-bottom: 0px;
}

.section.section-1 .heading h2 .title {
    display: block;
    /*position: relative;*/
    max-width: 140px;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {
    .section.section-1 .heading h2 .title {
        max-width: 235px
    }

    .section.section-1 .heading h2 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}

.heading > h2 { position: relative; }

#adv_section2 .heading > h2 svg, #adv_section3 .heading > h2 svg {
    /*position: absolute;*/
    /*top: 55px;*/
    /*left: 50%;*/
    /*margin-left: -116px;*/
    display: none;
}
#section-1a .heading > h2 svg {
    /*opacity: 0;*/
}
.adv-underline-svg { opacity: 0; }
.animate .adv_underline_path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: adv_underline_path_animation 2s linear forwards;
}

@keyframes adv_underline_path_animation {

    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }

    30% {
        fill-opacity: 1;
    }

    60% {
        fill-opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@media only screen and (min-width: 992px) {
    .section.section-1 .heading h2 .title:before {
        width: 232px;
        height: 32px;
        bottom: -82px
    }
}

.section.section-1 .heading h2 .title.active:before {
    opacity: 1
}

.section.section-1 .heading .text {
    clear: both;
    padding-top: 20px
}

@media only screen and (min-width: 992px) {
    .section.section-1 .heading .text {
        padding-top: 40px
    }
}

.section.section-1 .twoColumns {
    margin-top: 40px
}

.section.section-1 .twoColumns h3 {
    color: #7192E6;
    font-size: 24px
}

@media only screen and (min-width: 992px) {
    .section.section-1 .twoColumns h3 {
        font-size: 36px
    }
}

.section.section-1 .twoColumns h3 .title {
    display: block;
    float: left;
    position: relative
}

.section.section-1 .twoColumns h3 .title span {
    display: block;
    float: left;
    min-width: 10px;
    min-height: 10px;
    position: relative
}

.section.section-1 .twoColumns .image {
    border: 2px solid #303030;
    border-radius: 30px;
    height: 250px;
    padding: 30px;
    margin-top: 20px;
    overflow: hidden;
    background: #fff;
    position: relative
}

.section.section-1 .twoColumns .image:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(//static.offertoro.com/public/site-images/bg3.svg) center no-repeat;
    background-size: cover
}

.section.section-1 .twoColumns .image.active:before {
    filter: blur(40px)
}

@media only screen and (min-width: 992px) {
    .section.section-1 .twoColumns .image {
        margin-top: 0;
        height: 450px;
        border-radius: 60px;
        border-width: 4px
    }
}

.section.section-1 .twoColumns .image img {
    z-index: 1;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0
}

.section.section-1 .twoColumns .icon {
    margin-bottom: 20px
}

.section.section-1 .twoColumns .icon img {
    max-width: 60px
}

.section.section-1 .twoColumns .text {
    clear: both;
    padding-top: 20px
}

/*.section.section-1 .twoColumns .text p {*/
/*    opacity: 0*/
/*}*/

.section.section-1 .twoColumns .quote {
    color: #7192E6;
    background: #FFFFFF;
    border: 2px solid #303030;
    box-sizing: border-box;
    border-radius: 15px;
    padding: 20px
}

@media only screen and (min-width: 992px) {
    .section.section-1 .twoColumns .quote {
        border-radius: 30px;
        margin-top: 30px
    }
}

.section.section-1 .twoColumns .quote p {
    margin-bottom: 0
}

.section.section-1 .twoColumns .block {
    margin-bottom: 50px
}

.section.section-1 .twoColumns .block:last-child {
    margin-bottom: 0
}

@media only screen and (min-width: 992px) {
    section .twoColumns .block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 150px;
        flex-direction: row-reverse
    }

    section[data-anchor="section1-b"] .twoColumns .block {
        flex-direction: initial;
    }

    section[data-anchor="section1-b"] .twoColumns .block .image:before {
        background-image: url(//static.offertoro.com/public/site-images/bg4.svg)
    }

    section[data-anchor="section1-c"] .twoColumns .block .image:before {
        background-image: url(//static.offertoro.com/public/site-images/bg5.svg)
    }
}

@media only screen and (min-width: 992px) {
    .section.section-1 .twoColumns .block .column {
        width: 48%
    }
}

.section.section-2 .clear {
    clear: both;
    padding-top: 60px
}

@media only screen and (min-width: 992px) {
    .section.section-2 .clear {
        padding-top: 80px
    }
}

.section.section-2 .heading h2 {
    color: #7192E6;
    font-size: 28px
}

@media only screen and (min-width: 992px) {
    .section.section-2 .heading h2 {
        font-size: 48px
    }
}

.section.section-2 .heading h2 .title {
    display: block;
    position: relative;
    position: relative
}

@media only screen and (min-width: 992px) {
    .section.section-2 .heading h2 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}

.section.section-2 .heading h2 .title .char14,
.section.section-2 .heading h2 .title .char15,
.section.section-2 .heading h2 .title .char16,
.section.section-2 .heading h2 .title .char17,
.section.section-2 .heading h2 .title .char18 {
    color: #303030
}

.montool_underline_path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: montool_underline_path_animtaion 2s linear forwards;
}


@keyframes montool_underline_path_animtaion {

    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }

    70% {
        fill-opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
    }
}
.section-2 .heading > h2 svg {
    position: absolute;
    top: 55px;
    left: -1px;
    display: none;
}

@media only screen and (min-width: 992px) {
    .section.section-2 .heading h2 .title:before {
        width: 332px;
        height: 32px;
        bottom: -88px
    }
}

.section.section-2 .heading h2 .title.active:before {
    opacity: 1
}

.section.section-2 .heading .text {
    clear: both;
    padding-top: 20px
}

@media only screen and (min-width: 992px) {
    .section.section-2 .heading .text {
        padding-top: 40px
    }
}

.section.section-2 .wrap {
    /* overflow-x: scroll */
}

.section.section-2 .container-full {
    padding-right: 0
}

.section.section-2 .block {
    display: flex;
    text-align: center;
    justify-content: space-between;
    width: 1060px;
    margin: 0 auto;
    color: #fff;
    /*max-width: 100%;*/
}

.section.section-2 .block .image {
    margin: 0 -10px;
    height: 300px
}

.section.section-2 .block .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media only screen and (min-width: 992px) {
    .section.section-2 .block .image {
        height: 400px
    }
}

@media only screen and (min-width: 992px) {
    .section.section-2 .block {
        width: 1598px
    }
}

.section.section-2 .block h3 {
    font-size: 14px;
    margin-bottom: 20px
}

@media only screen and (min-width: 992px) {
    .section.section-2 .block h3 {
        font-size: 16px
    }
}

.section.section-2 .block .column {
    padding: 20px;
    border: 2px solid #303030;
    border-radius: 30px;
    width: 250px;
    background: #7192E6 url(//static.offertoro.com/public/site-images/bg7.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    opacity: 0;
}

.section.section-2 .block .col-wrap:first-child .column {
    background-image: url(//static.offertoro.com/public/site-images/bg6.jpg)
}

.section.section-2 .block .col-wrap:last-child .column {
    background-image: url(//static.offertoro.com/public/site-images/bg8.jpg)
}

.section.section-2 .block .column .over {
    position: absolute;
    top: 0;
    left: 0;
    padding: 55px 10px;
    opacity: 0;
    transform: translateY(20px)
}

@media only screen and (min-width: 992px) {
    .section.section-2 .block .column .over {
        top: 80px;
        padding: 55px 30px
    }
}

@media only screen and (min-width: 992px) {
    .section.section-2 .block .column {
        border-radius: 60px;
        width: 362px;
        padding: 60px 40px;
        min-height: 532px;
        border-width: 4px;
        /*opacity: 0;*/
        /*transform: translateY(50px)*/
    }

    .section.section-2 .block .column.active {
        opacity: 1;
        transform: translateY(0px)
    }
}

.section.section-2 .block a.column {
    color: #fff
}

.section.section-2 .block a.column.touched .image {
    opacity: 0
}

.section.section-2 .block a.column.touched .over {
    opacity: 1;
    transform: translateY(0px)
}

.section.section-3 {
    text-align: center
}

@media only screen and (min-width: 992px) {
    .section.section-3 .container {
        position: relative
    }

    .section.section-3 .container:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        margin: 0 auto;
        transform: translate(7px, 7px);
        width: 100%;
        height: 100%;
        content: '';
        border: 4px solid #303030;
        border-radius: 64px;
        max-width: 1160px;
        width: calc(100% - 40px);
        border-top: 0;
        z-index: -1
    }
}

@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper {
        border: 4px solid #303030;
        box-sizing: border-box;
        border-radius: 60px;
        padding: 100px 60px;
        -webkit-box-shadow: 4px 3px 0px 0px #7192e6;
        -moz-box-shadow: 4px 3px 0px 0px #7192e6;
        box-shadow: 4px 3px 0px 0px #7192e6;
        overflow: hidden;
        background: #fff;
        position: relative
    }

    .section.section-3 .wrapper:before {
        content: '';
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: url('//static.offertoro.com/public/site-images/bg9.svg') center no-repeat;
        background-size: cover
    }

    .section.section-3 .wrapper .heading,
    .section.section-3 .wrapper .block {
        position: relative;
        z-index: 2
    }

    .section.section-3 .wrapper.active:before {
        filter: blur(40px)
    }
}

.section.section-3 .wrapper .heading {
    text-align: center;
    max-width: 598px;
    margin: 0 auto
}

.section.section-3 .wrapper .heading h2 {
    color: #303030;
    font-size: 28px;
    text-align: center
}

@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper .heading h2 {
        font-size: 48px
    }
}

.section.section-3 .wrapper .heading h2 .title {
    display: block;
    position: relative;
    max-width: 230px;
    margin: 0 auto
}

.section.section-3 .wrapper .heading h2 .title .char1,
.section.section-3 .wrapper .heading h2 .title .char2,
.section.section-3 .wrapper .heading h2 .title .char3,
.section.section-3 .wrapper .heading h2 .title .char4 {
    color: #7192E6
}
.section-3 .heading > h2 svg {
    position: absolute;
    top: 55px;
    left: 0;
    display: none;
    width: 113px;
}
@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper .heading h2 .title {
        max-width: 390px
    }

    .section.section-3 .wrapper .heading h2 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}
.user_acq_path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: user_acq_path_animtaion 1s linear forwards;
}

/** important for no delay staggering */
/*.title span { bottom: -60px; opacity: 0; }*/

@keyframes user_acq_path_animtaion {

    0% {
        stroke-dashoffset: 500;
        fill-opacity: 0;
    }

    50% {
        fill-opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/*section { opacity: 1 !important; }*/


@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper .heading h2 .title:before {
        width: 114px;
        height: 20px;
        bottom: -72px
    }
}

.section.section-3 .wrapper .heading h2 .title.active:before {
    opacity: 1
}

.section.section-3 .wrapper .heading .text {
    clear: both;
    padding-top: 20px
}

@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper .heading .text {
        padding-top: 40px
    }
}

.section.section-3 .wrapper .block {
    color: #303030;
    margin-top: 40px;
    font-size: 14px
}

.section.section-3 .wrapper .block p {
    margin-bottom: 0
}

@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper .block {
        display: flex;
        justify-content: space-between;
        max-width: 900px;
        margin: 0 auto;
        margin-top: 40px
    }
}

.section.section-3 .wrapper .block .lg {
    font-size: 28px
}

.section.section-3 .wrapper .block .lg span {
    color: #7192E6
}

@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper .block .lg {
        font-size: 48px
    }
}

.section.section-3 .wrapper .block .column {
    border: 2px solid #303030;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 10px;
    opacity: 0.25
}

@media only screen and (min-width: 992px) {
    .section.section-3 .wrapper .block .column {
        border-width: 4px;
        width: 30%;
        padding: 20px 10px;
        margin-bottom: 0px;
        opacity: 0;
        transform: translateY(50px)
    }

    .section.section-3 .wrapper .block .column.active {
        opacity: 0.25;
        transform: translateY(0px)
    }

    .section.section-3 .wrapper .block .column:hover {
        opacity: 1;
        background: #fff
    }
}

.section.section-4 {
    text-align: center
}

@media only screen and (min-width: 992px) {
    .section.section-4 {
        text-align: left
    }

    .section.section-4 .container {
        position: relative
    }

    .section.section-4 .container:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        margin: 0 auto;
        transform: translate(7px, 7px);
        width: 100%;
        height: 100%;
        content: '';
        border: 4px solid #303030;
        border-radius: 64px;
        max-width: 1160px;
        width: calc(100% - 40px);
        border-top: 0;
        z-index: -1
    }
}

.section.section-4 .wrapper {
    border: 2px solid #303030;
    padding: 50px 30px;
    border-radius: 30px;
    background: #fff;
    position: relative;
    overflow: hidden
}

.section.section-4 .wrapper:before {
    content: '';
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url('//static.offertoro.com/public/site-images/bg9.svg') center no-repeat;
    background-size: cover
}

.section.section-4 .wrapper.active:before {
    filter: blur(40px)
}

@media only screen and (min-width: 992px) {
    .section.section-4 .wrapper {
        border-width: 4px;
        box-sizing: border-box;
        border-radius: 60px;
        padding: 40px 60px;
        -webkit-box-shadow: 4px 3px 0px 0px #7192e6;
        -moz-box-shadow: 4px 3px 0px 0px #7192e6;
        box-shadow: 4px 3px 0px 0px #7192e6;
        overflow: hidden
    }
}

.section.section-4 .wrapper .block {
    position: relative;
    z-index: 2
}

.section.section-4 .wrapper .block .image img {
    width: 100%
}

@media only screen and (min-width: 992px) {
    .section.section-4 .wrapper .block .image {
        opacity: 0;
        transform: translateX(40px)
    }

    .section.section-4 .wrapper .block .image.active {
        opacity: 1;
        transform: translateX(0px)
    }
}

@media only screen and (min-width: 992px) {
    .section.section-4 .wrapper .block {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .section.section-4 .wrapper .block .image {
        width: 50%
    }
}

.section.section-4 .wrapper .heading {
    margin: 0 auto
}

.section.section-4 .wrapper .heading h2 {
    color: #303030;
    font-size: 28px
}

@media only screen and (min-width: 992px) {
    .section.section-4 .wrapper .heading h2 {
        font-size: 48px
    }
}

.section.section-4 .wrapper .heading h2 .title {
    display: block;
    position: relative;
    max-width: 240px;
    margin: 0 auto
}

.section.section-4 .wrapper .heading h2 .title .char1,
.section.section-4 .wrapper .heading h2 .title .char2,
.section.section-4 .wrapper .heading h2 .title .char3,
.section.section-4 .wrapper .heading h2 .title .char4 {
    color: #7192E6
}

@media only screen and (min-width: 992px) {
    .section.section-4 .wrapper .heading h2 .title {
        max-width: 100%
    }

    .section.section-4 .wrapper .heading h2 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}

.section-4 .heading > h2 svg {
    position: absolute;
    top: -32px;
    left: -17px;
    display: none;
}

.easy_int_path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: easy_int_path_animtaion 1s linear forwards;
}

@keyframes easy_int_path_animtaion {

    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }


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

@media only screen and (min-width: 992px) {
    .section.section-4 .wrapper .heading h2 .title:before {
        width: 132px;
        height: 110px;
        bottom: -83px;
        left: -6px
    }
}

.section.section-4 .wrapper .heading h2 .title.active:before {
    opacity: 1
}

.section.section-4 .wrapper .heading .text {
    clear: both;
    padding-top: 20px
}

@media only screen and (min-width: 992px) {
    .section.section-4 .wrapper .heading .text {
        padding-top: 40px
    }
}

.section.section-5 {
    text-align: center
}

.section.section-5 .heading {
    text-align: center
}

.section.section-5 .heading h2 {
    color: #7192E6;
    font-size: 28px;
    text-align: center
}

@media only screen and (min-width: 992px) {
    .section.section-5 .heading h2 {
        font-size: 48px
    }
}

.section.section-5 .heading h2 .title {
    display: block;
    position: relative;
    max-width: 126px;
    margin: 0 auto
}

@media only screen and (min-width: 992px) {
    .section.section-5 .heading h2 .title {
        max-width: 210px
    }

    .section.section-5 .heading h2 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}

.section-5 .heading > h2 svg {
    position: absolute;
    top: 60px;
    left: 0px;
    display: none;
    width: 210px;
}

.partner_underline_path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: partner_underline_path_animation 1s linear forwards;
}

@keyframes partner_underline_path_animation {
    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }

    30% {
        fill-opacity: 1;
    }

    60% {
        fill-opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@media only screen and (min-width: 992px) {
    .section.section-5 .heading h2 .title:before {
        width: 214px;
        height: 24px;
        bottom: -83px
    }
}

.section.section-5 .heading h2 .title.active:before {
    opacity: 1
}

.section.section-5 .heading .text {
    clear: both;
    padding-top: 20px
}

@media only screen and (min-width: 992px) {
    .section.section-5 .heading .text {
        padding-top: 40px
    }
}

.section.section-5 .slider-wrap {
    clear: both;
    padding-top: 40px
}

.section.section-5 .slider-wrap .item {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%)
}

.section.section-5 .slider-wrap .item:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%)
}

.section.section-5 .slider-wrap .item img {
    max-height: 60px;
    width: auto
}

.section.section-5 .slider-wrap .owl-carousel {
    margin-bottom: 30px
}

@media only screen and (min-width: 992px) {
    .section.section-5 .slider-wrap {
        padding-top: 100px
    }
}

.section.section-6 {
    text-align: center
}

.section.section-6 .heading {
    text-align: center
}

.section.section-6 .heading h2 {
    color: #7192E6;
    font-size: 28px;
    text-align: center
}

@media only screen and (min-width: 992px) {
    .section.section-6 .heading h2 {
        font-size: 48px
    }
}

.section.section-6 .heading h2 .title {
    display: block;
    position: relative;
    max-width: 240px;
    margin: 0 auto
}

.section.section-6 .heading h2 .title .char1,
.section.section-6 .heading h2 .title .char2,
.section.section-6 .heading h2 .title .char3 {
    color: #303030
}

@media only screen and (min-width: 992px) {
    .section.section-6 .heading h2 .title {
        max-width: 396px
    }

    .section.section-6 .heading h2 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}

.section-6 .heading > h2 svg {
    position: absolute;
    top: 59px;
    left: 92px;
    display: none;
    width: 298px;
}

.integrations_underline_path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: integrations_underline_path_animation 1s linear forwards;
}


@keyframes integrations_underline_path_animation {

    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }

    40% {
        fill-opacity: 0;
    }
    60%{
        fill-opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@media only screen and (min-width: 992px) {
    .section.section-6 .heading h2 .title:before {
        width: 314px;
        height: 37px;
        bottom: -86px
    }
}

.section.section-6 .heading h2 .title.active:before {
    opacity: 1
}

.section.section-6 .slider-wrap {
    clear: both;
    padding-top: 40px
}

@media only screen and (min-width: 992px) {
    .section.section-6 .slider-wrap {
        padding-top: 80px
    }
}

.section.section-6 .slider-wrap .logos {
    max-width: 730px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.section.section-6 .slider-wrap .logos .item {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    width: 25%;
    margin-bottom: 20px
}

.section.section-6 .slider-wrap .logos .item:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%)
}

.section.section-6 .slider-wrap .logos .item img {
    max-height: 100px;
    width: auto
}

.section.section-contact {
    padding-top: 140px;
    background: #303030;
    color: #7192E6
}

@media only screen and (min-width: 992px) {
    .section.section-contact {
        padding-top: 300px
    }
}

.section.section-contact h1 {
    font-size: 26px;
    margin-bottom: 40px;
    line-height: 1.5
}

@media only screen and (min-width: 992px) {
    .section.section-contact h1 {
        font-size: 30px
    }
}

.section.section-contact .contact-card {
    background: url(//static.offertoro.com/public/site-images/blob2.svg) bottom center no-repeat;
    background-size: 100%;
    max-width: 330px;
    margin: 0 auto;
    animation: float 5s ease-in-out infinite
}

@media only screen and (min-width: 768px) {
    .section.section-contact .contact-card {
        max-width: 500px
    }
}

@media only screen and (min-width: 768px) and (min-width: 992px) {
    .section.section-contact .contact-card {
        max-width: 500px;
        width: 118%
    }
}

.section.section-contact .contact-card .social {
    margin-top: 30px;
    text-align: center
}

.section.section-contact .contact-card .social ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.section.section-contact .contact-card .social ul li {
    display: inline-block;
    margin: 0 15px 0 0
}

.section.section-contact .contact-card .social ul li a {
    display: inline-block
}

.section.section-contact .contact-card .social ul li img {
    width: 36px
}

.section.section-contact .contact-card .social ul li a:hover {
    opacity: 0.7
}

.section.section-contact .contact-card .image {
    width: 75%;
    margin: 0 auto
}

@media only screen and (min-width: 992px) {
    .section.section-contact .contact-card .image {
        width: 72%
    }
}

.section.section-contact .contact-card .image img {
    width: 100%
}

.section.section-contact .contact-card .body {
    color: #7192E6;
    width: 75%;
    margin: 0 auto;
    padding: 20px 0 70px
}

@media only screen and (min-width: 768px) {
    .section.section-contact .contact-card .body {
        padding: 50px 0 125px
    }
}

@media only screen and (min-width: 768px) and (min-width: 992px) {
    .section.section-contact .contact-card .body {
        width: 72%;
        padding: 37px 0 125px
    }
}

.section.section-contact form {
    position: relative
}

@media only screen and (min-width: 992px) {
    .section.section-contact form {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-width: 522px
    }

    .section.section-contact form .form-group {
        width: 48%;
        margin-bottom: 30px
    }

    .section.section-contact form .form-group-full {
        width: 100%
    }
}

.section.section-contact form .form-group {
    margin-bottom: 30px
}

.section.section-contact form .submit {
    max-width: 300px;
    margin: 0 auto;
    text-align: center
}

@media only screen and (min-width: 992px) {
    .section.section-contact form .submit {
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

.section.section-contact .twoColumns .list .item {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    word-wrap: break-word;
    color: #fff
}

.section.section-contact .twoColumns .list .item:last-child {
    margin-bottom: 0
}

.section.section-contact .twoColumns .list .item .icon {
    width: 30px
}

.section.section-contact .twoColumns .list .item a {
    color: #fff
}

.section.section-contact .twoColumns .list .item a:hover {
    color: #c2b59b;
    text-decoration: underline
}

.section.section-contact .twoColumns .list .item p {
    margin-bottom: 0;
    width: calc(100% - 30px);
    padding-left: 20px;
    font-size: 14px
}

@media only screen and (min-width: 768px) {
    .section.section-contact .twoColumns .list .item p {
        font-size: 18px
    }
}

.section.section-contact .twoColumns .column:first-child {
    margin-bottom: 40px
}

@media only screen and (min-width: 992px) {
    .section.section-contact .twoColumns {
        display: flex
    }

    .section.section-contact .twoColumns .column {
        width: 60%
    }

    .section.section-contact .twoColumns .column:first-child {
        padding-right: 40px;
        margin-bottom: 0px
    }

    .section.section-contact .twoColumns .column:last-child {
        width: 40%
    }
}

.section.section-page {
    padding-top: 120px;
    min-height: 75vh
}

@media only screen and (min-width: 992px) {
    .section.section-page {
        padding-top: 280px
    }
}

.section.section-page h1 {
    margin-bottom: 20px;
    font-size: 28px
}

@media only screen and (min-width: 992px) {
    .section.section-page h1 {
        font-size: 36px;
        margin-bottom: 30px
    }
}

.section.section-page h2,
.section.section-page h3,
.section.section-page h4,
.section.section-page h5 {
    margin: 40px 0 20px
}

footer {
    text-align: center
}

footer .btn.btn-primary {
    background: #fff;
    color: #303030;
    display: block;
    width: 100%
}

footer .btn.btn-primary:hover,
footer .btn.btn-primary:focus {
    color: #7192E6;
    background: #fff;
    -webkit-box-shadow: 4px 4px 0px 0px #303030;
    -moz-box-shadow: 4px 4px 0px 0px #303030;
    box-shadow: 4px 4px 0px 0px #303030
}

@media only screen and (min-width: 992px) {
    footer .btn.btn-primary {
        font-size: 24px
    }
}

footer .link {
    margin-top: 30px;
    opacity: 0;
    max-width: 100%;
    transform: translateY(20px)
}

footer .link.active {
    opacity: 1;
    transform: translateY(0)
}

footer .container {
    padding: 0;
    position: relative
}

/*footer .container:after {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    right: 0;*/
/*    margin: 0 auto;*/
/*    transform: translate(0px, -6px);*/
/*    height: 100%;*/
/*    content: '';*/
/*    border: 2px solid #303030;*/
/*    border-radius: 34px;*/
/*    border-bottom: 0;*/
/*    z-index: -1*/
/*}*/

/*@media only screen and (min-width: 992px) {*/
/*    footer .container:after {*/
/*        border-radius: 64px;*/
/*        border-width: 4px;*/
/*        transform: translate(0px, -8px);*/
/*        max-width: 1160px;*/
/*        width: calc(100% - 40px)*/
/*    }*/
/*}*/

@media only screen and (min-width: 992px) {
    footer {
        text-align: left
    }

    footer .container {
        padding: 0 20px
    }
}

footer .wrapper {
    border: 2px solid #303030;
    border-bottom: 0;
    padding: 50px 30px;
    border-radius: 30px 30px 0 0;
    background: #7192E6;
    color: #fff;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0px -4px 0px 0px #7192E6;
    -moz-box-shadow: 0px -4px 0px 0px #7192E6;
    box-shadow: 0px -4px 0px 0px #7192E6;
    text-align: center
}

footer .wrapper:before {
    content: '';
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(//static.offertoro.com/public/site-images/footer.svg) top center no-repeat;
    background-size: cover;
    opacity: 0
}

footer .wrapper.active:before {
    opacity: 1
}

@media only screen and (min-width: 992px) {
    footer .wrapper {
        border-width: 4px;
        box-sizing: border-box;
        border-radius: 60px 60px 0 0;
        padding: 60px 40px;
        overflow: hidden
    }
}

footer .wrapper .heading {
    margin: 0 auto;
    position: relative;
    z-index: 2
}

footer .wrapper .heading h2 {
    font-size: 24px
}

@media only screen and (min-width: 992px) {
    footer .wrapper .heading h2 {
        font-size: 48px
    }
}

footer .wrapper .heading h2 .title {
    display: block;
    position: relative;
    max-width: 278px;
    margin: 0 auto
}

@media only screen and (min-width: 992px) {
    footer .wrapper .heading h2 .title {
        max-width: 520px
    }

    footer .wrapper .heading h2 .title span {
        display: block;
        float: left;
        min-width: 10px;
        min-height: 10px;
        position: relative
    }
}
footer .heading > h2 svg.st {
    position: absolute;
    top: -20px;
    right: -37px;
    display: none;
    width: 64px;
}
.smth_path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: smth_path_animtaion 4s linear forwards;
}


@keyframes smth_path_animtaion {

    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }

    10% {
        fill-opacity: 1;
    }


    100% {
        stroke-dashoffset: 0;
    }
}

@media only screen and (min-width: 992px) {
    footer .wrapper .heading h2 .title:before {
        width: 63px;
        height: 61px;
        right: -44px
    }
}

@media only screen and (min-width: 992px) {
    footer .wrapper .heading h2 .title:after {
        width: 163px;
        height: 18px;
        left: 0;
        bottom: -135px
    }
}

footer .heading svg.et {
    position: absolute;
    bottom: 8px;
    left: 7px;
    display: none;
    width: 145px;
}
.brand_underline_path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: brand_underline_path_animtaion 4s linear forwards;
}

@keyframes brand_underline_path_animtaion {

    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }

    40% {
        fill-opacity: 1;
    }


    100% {
        stroke-dashoffset: 0;
    }
}

footer .wrapper .heading h2 .title.active:before {
    opacity: 1
}

footer .wrapper .heading h2 .title.active2:after {
    opacity: 1
}

footer .wrapper .heading .text {
    clear: both;
    padding-top: 20px;
    opacity: 0
}

footer .wrapper .heading .text.active {
    opacity: 1
}

@media only screen and (min-width: 992px) {
    footer .wrapper .heading .text {
        padding-top: 40px
    }
}

footer .wrapper .bottom, .non-homepage-footer .bottom {
    margin-top: 40px;
    position: relative;
    z-index: 2
}

@media only screen and (min-width: 992px) {
    footer .wrapper .bottom, .non-homepage-footer .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

footer .bottom ul {
    list-style: none;
    margin: 0;
    padding: 0
}

footer .bottom ul li {
    position: relative
}

footer .bottom ul li a {
    color: #fff;
    font-size: 15px
}
footer.non-homepage-footer .bottom ul li a { color: #303030; }

footer .bottom ul li a:hover {
    opacity: 0.8
}

@media only screen and (min-width: 992px) {

    footer .bottom ul li {
        display: inline-block;
        margin-right: 30px
    }

    footer .bottom ul li:after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 3px;
        background: #fff;
        position: absolute;
        right: -20px;
        top: 50%;
        margin-top: -1px
    }

    footer .bottom ul li:last-child:after {
        display: none
    }
}

footer .bottom ul li .np {
    padding-right: 27px;
    display: inline-block;
    position: relative
}

footer .wrapper .bottom ul li .np:after {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 50%;
    background: url(//static.offertoro.com/public/site-images/icon.svg) center no-repeat;
    background-size: 100%;
    margin-top: -8px;
    content: ''
}

@media only screen and (min-width: 992px) {
    footer .bottom ul:last-child li {
        margin-right: 0
    }
}

.side-panel {
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(48, 48, 48, 0.6);
    z-index: 99999;
    display: none
}

.side-panel .wrap {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    position: relative;
}

.side-panel .content {
    max-width: 800px;
    min-height: 100%;
    width: 100%;
    background: url('//static.offertoro.com/public/site-images/menubg.svg') top center no-repeat white;
    backdrop-filter: blur(200px);
    background-size: cover;
    margin-right: 0;
    margin-left: auto;
    transform: translateX(100%);
    display: flex;
    flex-wrap: wrap
}

.side-panel .content.active {
    transform: translateX(0px)
}

.side-panel .content .wrapper {
    padding: 40px 20px;
    width: 100%
}

.side-panel .content .wrapper h2 {
    margin-bottom: 30px;
    font-size: 24px;
    color: #303030
}

@media only screen and (min-width: 992px) {
    .side-panel .content .wrapper h2 {
        font-size: 36px;
        margin-bottom: 50px
    }
}

.side-panel .content .wrapper h2.contact-icon span {
    position: relative
}

.side-panel .content .wrapper h2.contact-icon:before {
    content: '';
    width: 80px;
    height: 70px;
    position: absolute;
    top: 24px;
    background: url(//static.offertoro.com/public/site-images/scribble10.svg) center no-repeat;
    background-size: 100%;
    left: 161px
}

@media only screen and (min-width: 992px) {
    .side-panel .content .wrapper h2.contact-icon:before {
        width: 128px;
        height: 99px;
        top: 36px;
        left: 256px
    }
}

@media only screen and (min-width: 992px) {
    .side-panel .content .wrapper {
        padding: 50px;
        padding-right: 150px
    }
}

.side-panel .content .wrapper .alt {
    color: #303030
}

.side-panel .content .wrapper .form {
    width: 100%
}

@media only screen and (min-width: 992px) {
    .side-panel .content .wrapper .form .form-control {
        margin-bottom: 30px
    }
}

.side-panel .content .wrapper .form .submit input {
    width: 100%
}

@media only screen and (min-width: 992px) {
    .side-panel .content .wrapper .form .submit input {
        font-size: 24px
    }
}

.side-panel .content .wrapper .icon-tabs {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 12px;
    color: #7192E6;
    margin: 30px 0
}

.side-panel .content .wrapper .icon-tabs.icon-tabs2 {
    max-width: 220px
}

@media only screen and (min-width: 992px) {
    .side-panel .content .wrapper .icon-tabs {
        font-size: 18px
    }

    .side-panel .content .wrapper .icon-tabs.icon-tabs2 {
        max-width: 340px
    }
}

.side-panel .content .wrapper .icon-tabs .image {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px solid #7192E6;
    border-radius: 16px;
    margin: 0 auto 10px
}

.side-panel .content .wrapper .icon-tabs .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media only screen and (min-width: 992px) {
    .side-panel .content .wrapper .icon-tabs .image {
        width: 128px;
        height: 128px;
        border-width: 4px;
        border-radius: 30px
    }
}

.side-panel .content .wrapper .icon-tabs .column {
    opacity: 0.5;
    display: inline-block;
    color: #7192E6
}

.side-panel .content .wrapper .icon-tabs .column.active {
    opacity: 1
}

.side-panel .content .wrapper .pane {
    display: none
}

.side-panel .content .wrapper .pane.active {
    display: block
}

.side-panel .content .wrapper .styledRadio {
    display: flex;
    margin-bottom: 30px;
}

.side-panel .content .wrapper .styledRadio div {
    padding-right: 20px
}

.side-panel .content .bottom {
    width: 100%;
    align-self: flex-end;
    padding: 40px 20px;
    border-top: 1px solid #919191;
    text-align: center
}

.side-panel .content .bottom ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.side-panel .content .bottom ul li a {
    color: #919191
}

.side-panel .content .bottom ul li a:hover {
    color: #7192E6
}

@media only screen and (min-width: 992px) {
    .side-panel .content .bottom ul li {
        display: inline-block;
        margin: 0 20px;
        position: relative
    }

    .side-panel .content .bottom ul li:after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 3px;
        background: #303030;
        position: absolute;
        right: -25px;
        top: 50%;
        margin-top: -3px
    }

    .side-panel .content .bottom ul li:last-child:after {
        display: none
    }
}

.side-panel .content .password-wrap {
    display: none
}

.side-panel .close-pane {
    position: absolute;
    top: 30px;
    right: 20px;
    z-index: 1
}

@media only screen and (min-width: 992px) {
    .side-panel .close-pane {
        width: 100px;
        height: 100%;
        top: 0;
        right: 0;
        transform: translateX(100px);
        text-align: center;
        padding: 54px 0;
    }

    .side-panel .close-pane.active {
        transform: translateX(0px)
    }
}

.custom-input input[type=radio],
.custom-input input[type=checkbox] {
    opacity: 1;
    position: absolute;
    appearance: none
}

.custom-input input[type=radio]:checked+label:after,
.custom-input input[type=checkbox]:checked+label:after {
    opacity: 1
}

.custom-input input[type=checkbox]+label:before {
    border-radius: 10px
}

.custom-input input[type=checkbox]+label:after {
    border-radius: 6px
}

.custom-input input[type=radio]+label:before,
.custom-input input[type=radio]+label:after {
    border-radius: 50%
}

.custom-input label {
    position: relative;
    padding-left: 40px;
    cursor: pointer
}

.custom-input label:before {
    content: "";
    display: block;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 2px solid #303030;
    transition: all .2s ease-out
}

.custom-input label:after {
    content: '';
    background-color: #7192E6;
    font-size: 1rem;
    color: #fff;
    text-align: center;
    width: 22px;
    height: 22px;
    border: 1px solid #7192E6;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translate(0, -50%);
    transition: opacity .3s ease-out;
    opacity: 0
}

.backtoTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 3;
    opacity: 0
}

.backtoTop img {
    width: 36px
}

.backtoTop.show {
    opacity: 1
}

.backtoTop:hover {
    opacity: 0.6
}

@media only screen and (min-width: 768px) {
    .backtoTop {
        bottom: 40px;
        right: 30px
    }
}

@keyframes float {
    0% {
        transform: translateY(0px)
    }

    50% {
        transform: translateY(-20px)
    }

    100% {
        transform: translateY(0px)
    }
}

@keyframes montool_rtl {


    to {
        left: 0%;
    }
}

@keyframes montool_rtl_mobile {
    to {
        left: -100%;
    }
}

[data-anim_behavior="css_lettering"], .hero-home .title { opacity: 0; }

.move_rtl {
    animation-name: montool_rtl;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    opacity: 1 !important;
    left:300%;
}

.move_rtl_mobile {
    animation-name: montool_rtl_mobile;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 1;
    left: 100%;
}

.section-1 h2 {
    height: 50px;
}
.section-1 h2 > svg {
    width: 235px;
    display: block;
    margin: 0 auto;
}

.section-2 .heading > h2 svg {
    width: 327px;
}

#page_scroller section {
    opacity: 0; /* Sarah: There is another thing with the animation.. the page should be blank then everything should appear (in the order)  */
}

.docs-page { position: relative; }

.fp-7 .fp-tableCell {
    vertical-align: bottom; /* fix for showing footer section but shows "integrations" content as well */
}


/** Mobile Responsiveness **/
@media only screen and (max-width: 1200px) {

}

header ul.center li:first-child, footer ul:first-child li:first-child {
    display: none !important;
}

.section.section-2 .wrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
    transform: translate3d(0, 0, 0);
    height: 566px;
    overflow: hidden;
}
.section.section-2 .block {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

.section.section-2 .block .col-wrap {
    width: 100%;
    display: flex;
}
.docs-sidebar .ot-icon-sidebar-wrap{
    border-radius: 10px;
    border: 2px solid #303030;
    padding: 8px;
    background: #FFFFFF;
    box-sizing: border-box;
    border-radius: 16px;
}
.docs-sidebar .hovered .ot-icon-sidebar-wrap { border-color: #7192E6; }
.ot-icon {
    display: block;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.docs-sidebar .ot-icon {
    width: 20px;
    height: 20px;
}
h2 > .ot-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 3px 8px 3px 0;
    float: left;
}

.ot-icon-welcome { background-image: url('//static.offertoro.com/public/site-images/docs-icons/welcome.png'); }
.ot-icon-mobile { background-image: url('//static.offertoro.com/public/site-images/docs-icons/mobile.png'); }
.ot-icon-arrow-mobile { background-image: url('//static.offertoro.com/public/site-images/docs-icons/arrow-mobile.png'); }
.ot-icon-announcement { background-image: url('//static.offertoro.com/public/site-images/docs-icons/announcement.png'); }
.ot-icon-mailbox { background-image: url('//static.offertoro.com/public/site-images/docs-icons/mailbox.png'); }
.ot-icon-chart { background-image: url('//static.offertoro.com/public/site-images/docs-icons/chart.png'); }
.ot-icon-globe { background-image: url('//static.offertoro.com/public/site-images/docs-icons/globe.png'); }
.ot-icon-shield { background-image: url('//static.offertoro.com/public/site-images/docs-icons/shield.png'); }
.ot-icon-cloud { background-image: url('//static.offertoro.com/public/site-images/docs-icons/cloud.png'); }
.ot-icon-monster { background-image: url('//static.offertoro.com/public/site-images/docs-icons/monster.png'); }
.ot-icon-apple { background-image: url('//static.offertoro.com/public/site-images/docs-icons/apple.png'); }
.ot-icon-chain { background-image: url('//static.offertoro.com/public/site-images/docs-icons/chain.png'); }

.docs-page-arrows { margin-top: 30px; }
.article-details { float: left; margin: 0 9px; }
.docs-page-arrows .arrow-item:first-child {  float: left; text-align: left; }
.docs-page-arrows .arrow-item:last-child { float: right; text-align: right; }
.docs-page-arrows .arrow-item > * { float: left; }
.docs-page-arrows .arrow-item > img { margin-top: 4px; }
.article-details .article-title { font-weight: bold; color: #303030; }
.article-details .primary-theme-mediumgray { font-size: 14px; }

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge add Firefox */
.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none; /* Firefox */
}


.mobile-banner { display: none; }
[data-anim_behavior]:not([data-anim_behavior="fade_activate"]) {
    opacity: 0;
}
[data-anim_behavior="lettering"] > span {
    opacity: 0;
    bottom: -60px;
}

/** mobile section **/
@media only screen and (max-width: 992px) {

    .section.section-4 .wrapper:before {
        background-image: url('/home/images/easy_integration_bg.svg');
        transform: scale(1.2);
        filter: blur(60px);
        opacity: 0.8;
    }

    .section.section-1 .twoColumns .image:before {
        background-image: url('/home/images/mobile_advertise_bg.svg');
        transform: scale(1.2);
    }

    .section.section-1 .heading h2 { text-align: left; }
    .section.section-1 .heading h2 .title { margin: 0; }
    .section.section-1 .heading h2 > div {
        height: 35px;
    }

    .section.section-1 .heading { text-align: left; }
    .section-1 h2 > svg { margin: 0; }

    .cloud-animations, .cloud-animation-placeholder { display: none; }
    .mobile-banner { display: block; }
    .article-details { display: none; }

    .section.section-2 .wrap {
        width: 100%;
        margin: 0 auto;
        position: relative;
        transform: translate3d(0, 0, 0);
        height: 384px;
        overflow: hidden;
    }
    .section.section-2 .block {
        width: 300%;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 100%;
        height: 384px;
        display: flex;
    }

    .section.section-2 .block .col-wrap {
        width: 100%;
        display: flex;
    }

    .section.section-2 .block .column {
        width: 90%;
        margin-left: 5%;
        opacity: 1;
    }

    header ul.center li:first-child, footer ul:first-child li:first-child {
        display: block !important;
    }

    .non-homepage-footer {
        display: none;
    }
    .docs-sidebar + div > .align-items-center .justify-content-end{
        /*display: none;*/
    }

    .non-homepage-footer ul li:nth-child(2), .non-homepage-footer ul li:nth-child(3), .non-homepage-footer ul li:nth-child(4) {
        display: none;
    }

    .section-4 .block .image {
        padding: 10px 0;
    }

    section[data-anchor] {
        padding: 30px 0;
    }
    section[data-anchor]:last-child {
        padding-bottom: 0;
    }

    .section.section-3 .wrapper .block .column.active {
        opacity: 1;
        background: #fff
    }

    .docs-sidebar {
        background: #F8F8F8;
        width: 100%;
        height: 140px;
        padding: 0;
        margin-bottom: 20px;
        /* overflow-x: auto; */
        overflow: hidden;
    }
    .docs-sidebar .wrap {
        display: flex;
        width: 100%;
        overflow: auto;
        box-sizing: content-box;
        padding-bottom: 17px;
    }
    .docs-sidebar a {
        display: flex;
        margin-left: 10px;
        border: 2px solid #e8e8e8;
        border-radius: 16px;
    }
    .docs-sidebar a.hovered {
        background: linear-gradient(0deg, rgba(89, 121, 204, 0.1), rgba(89, 121, 204, 0.1)), #FFFFFF;
        color: #7192E6 !important;
        border-color: #7192E6;
    }
    .wrap-top .col-sm-7 {
        width: 100%;
    }
    .doc-alignment {
        display: block;
        margin-left: 0;
    }
    .ot-icon-sidebar-wrap { display: inline-block; }
    .docs-sidebar .hovered .ot-icon-sidebar-wrap { display: inline-block;
        margin: 0 auto; }
    .docs-sidebar a:last-child {
        display: block;
    }
    .docs-sidebar .ml-5-per { display: block; }
    .wrap-top .docs-sidebar + div { padding: 20px; }
    .collapse-toggle {
        color: white;
        background: #555;
        padding: 0px !important;
    }
    .collapse-toggle:hover {
        color: white;
        background: #333;
    }

    .collapse-toggle .fa-chevron-circle-left { display: none; }
    .docs-sidebar.active .ml-5-per {
        display: block !important;
    }

    .docs-sidebar .doc-alignment {
        padding: 4px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        color: #303030;
    }

    .docs-sidebar + div {
        width: 100%;
        padding-left: 100px;
        box-sizing: border-box;
    }
    .docs-page .col-sm-7 {
        overflow: auto;
    }
    .docs-sidebar .doc-menu {
        padding: 4px;
        border-radius: 0;
        width: 110px;
        height: 120px;
        align-items: center;
        flex-direction: unset;
    }
    /*.docs-page footer { display: none; }*/

    .section.section-1 .heading h2, .hero-home h1 {
        font-size: 30px;
    }
    .hero-home h1 {
        max-width: unset;
    }
    .we-live-circle {
        width: 127px;
        top: -28px;
        left: 17px;
    }
    .side-panel .content {
        max-width: 500px;
    }
    .blue-theme-btn {
        font-size: 16px;
        line-height: 30px;
    }

    .section-1 h2 > svg {
        width: 140px;
        margin-top: -4px;
    }

    .section-2 .heading > h2 svg {
        width: 194px;
        top: 30px;
    }

    .section-3 .heading > h2 svg {
        top: 30px;
        width: 67px;
    }
    .section-4 .heading > h2 svg {
        width: 85px;
        top: -42px;
        left: -10px;
    }

    .section-5 .heading > h2 svg {
        width: 120px;
        top: 28px;
    }

    .section-6 .heading > h2 svg {
        width: 173px;
        left: 63px;
        top: 31px;
    }

    footer .heading > h2 svg.st {
        width: 25px;
        top: -27px;
        right: -10px;
    }

    footer .heading svg.et {
        width: 69px;
        bottom: -10px;
        left: 22px;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .side-panel form input.form-control, .side-panel form select.form-control,.side-panel form textarea.form-control{width:100%;}
    .side-panel .content .wrapper .icon-tabs.icon-tabs2 {max-width: 260px}
    .side-panel form input.blue-theme-btn{line-height:50px;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .side-panel form input.form-control, .side-panel form select.form-control,.side-panel form textarea.form-control{width:100%;}
}