@font-face {
    font-family: "icons";
    src: url("../fonts/icons.woff") format("woff");
    src: url("../fonts/icons.svg") format("svg");
    src: url("../fonts/icons.eot") format("eot");
    src: url("../fonts/icons.eot") format("embedded-opentype");
    src: url("../fonts/icons.ttf") format("truetype")
}
@font-face {
    font-family: "PragmaticaSlab";
    src: url("../fonts/PragmaticaSlab-Medium.woff") format("woff");
    src: url("../fonts/PragmaticaSlab-Medium.svg") format("svg");
    src: url("../fonts/PragmaticaSlab-Medium.eot") format("eot");
    src: url("../fonts/PragmaticaSlab-Mediumns.eot") format("embedded-opentype");
    src: url("../fonts/PragmaticaSlab-Medium.ttf") format("truetype")
}
html {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}
body {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    background-color: #fff;
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 8px;
    line-height: 14px;
    -webkit-font-feature-settings: 'kern' 1;
    -o-font-feature-settings: 'kern' 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased
}
header,
section,
footer {
    display: block;
    position: relative;
    min-width: 880px;
}
header .box,
section .box,
footer .box {
    display: block;
    position: relative;
    width: 860px;
    min-width: 860px;
    margin: 0 auto
}
@media all and (max-width: 860px) {
    header,
    section,
    footer {
        width: 100% !important;
        min-width: 300px !important
    }
    header .box,
    section .box,
    footer .box {
        width: 100% !important;
        min-width: 300px !important;
        padding: 1em !important
    }
#features .features-graph .sq-bt-label{
        visibility: hidden;
    }
#features .features-graph .btn-with-icon{
    display: block;
    width: 70px;
    height: 35px!important;
    background-color: #fff;
    border: 1px solid #9df;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    transition-duration: 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 5em;
    z-index: 0;
    cursor: pointer;
    margin-left: 8%;
    margin-right: 8%;
    text-align: center;
    }
#features .features-graph .flash-oval {
    background-color: #00bff3;
    width: 12em;
    height: 11em;
    border-radius: 6em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 2em auto 2em auto!important;
   }
#features .features-graph .icon-features-1:after,#features .features-graph .icon-features-2:after ,#features .features-graph .icon-features-3:after,#features .features-graph .icon-features-4:after,#features .features-graph .icon-features-5:after,#features .features-graph .icon-features-6:after{
    visibility: hidden!important;
   }
#features .features-textblock h2{
        font-size: 1rem!important;
   }
   #features .features-textblock p{
    font-size: 13px!important;
   }
   #features .features-textblock ul li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: -5px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 9px!important;
    font-weight: 300;
    line-height: 1.5em;
    padding: 0.4em 0;
}
}
.animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
#features {
    text-align: center
}
#features .features-title {
    display: inline-block;
    position: relative;
    color: #ff00d7;
    font-size: 23px;
    font-family: "Roboto";
    font-weight: 700;
    line-height: 46px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: 'Poppins', sans-serif;
    margin: 1em 0
}
#features .features-title::after {
    display: block;
    position: absolute;
    bottom: -.2em;
    left: 50%;
    margin-left: -40px;
    content: "";
    width: 80px;
    height: 3px;
    background-color: #00BFF3;
}
#features .features-content {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    padding-bottom: 5em;
    margin-bottom: 5em;
    border-bottom: 2px solid #e5f7fb
}
#features .features-content+.features-content {
    border: 0
}
#features .features-content-col {
    width: 50%;
    text-align: left
}
#features .features-textblock {
    display: none;
    position: relative
}
#features .features-textblock.__active {
    display: block
}
#features .features-textblock h1,
#features .features-textblock h2,
#features .features-textblock h3,
#features .features-textblock h4,
#features .features-textblock h5 {
    color: #404040;
   font-family: 'Poppins', sans-serif;
    font-weight: 900;
    padding: 0;
    font-size: 2.5em;
    margin-bottom: 15px!important;
}
#features .features-textblock p {
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7em
}
#features .features-textblock ul {
    margin: 0;
    padding: 0 2em;
    list-style: none
}
#features .features-textblock ul li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: -5px;
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7em;
    padding: 0.7em 0
}
#features .features-textblock ul li:before {
    display: inline-block;
    position: relative;
    top: -1px;
    left: -11px;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%
}
#features .features-graph {
    height: 425px;
    margin: 25px
}
#features .features-graph .button-holder {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center
}
#features .features-graph .animation-holder {
    display: flex;
    justify-content: center;
    align-items: center
}
#features .features-graph .flash-oval {
    background-color: #00bff3;
    width: 12em;
    height: 12em;
    border-radius: 7em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 10em auto 9em auto
}
#features .features-graph .flash-oval img {
    position: absolute;
    right: 32px;
    top: 23px;
    width: 35px;
}
#features .features-graph .btn-with-icon {
    display: block;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border: 1px solid #9df;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    transition-duration: 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 5em;
    z-index: 0;
    cursor: pointer;
    margin-left: 8%;
    margin-right: 8%;
    text-align: center;
    opacity: 0.5;
    filter: alpha(opacity=50)
}
#features .features-graph .btn-with-icon.__active {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color:#a8098f;
}
#features .features-graph .btn-with-icon:hover {
    opacity: 1
}
#features .features-graph .sq-bt-label {
    letter-spacing: 0;
    color: #656b6f;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    position: absolute;
    text-transform: uppercase
}
#features .features-graph .label-top-left {
    right: 36%;
    top: 33%;
}
#features .features-graph .label-top {
    right: 21.3%;
    top: 33%
}
#features .features-graph .label-top-right {
    right: 6.7%;
    top: 33%
}
#features .features-graph .label-bottom-left {
    right: 36.3%;
    bottom: 13%;
}
#features .features-graph .label-bottom {
    right: 21.4%;
    bottom: 13%;
}
#features .features-graph .label-bottom-right {
    right: 6.6%;
    bottom: 13%;
}
#features .features-graph .icon-features-1:after,#features .features-graph .icon-features-7:after {
    content: ' ';
 
   /* background-image:url("{{ asset('themeassets/images/icons/top-left.svg') }}");*/
  /*  background-image: url("../themeassets/images/icons/top-left.svg") */
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    top: 36.4%
}
#features .features-graph .icon-features-2:after,#features .features-graph .icon-features-8:after {
    content: ' ';
    /*background-image: url("themeassets/images/icons/top.svg");*/
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    top: 36.4%
}
#features .features-graph .icon-features-3:after,#features .features-graph .icon-features-9:after {
    content: ' ';
    /*background-image: url("images/icons/top-right.svg");*/
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    top: 36.4%;
    right: 10%
}
#features .features-graph .icon-features-4:after,#features .features-graph .icon-features-10:after {
    content: ' ';
    /*background-image: url("images/icons/bottom-left.svg");*/
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 26%
}
#features .features-graph .icon-features-5:after,#features .features-graph .icon-features-11:after {
    content: ' ';
   /* background-image: url("images/icons/bottom.svg");*/
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 23%
}
#features .features-graph .icon-features-6:after,#features .features-graph .icon-features-12:after {
    content: ' ';
    /*background-image: url("images/icons/bottom-right.svg");*/
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 26%;
    right: 10%
}
#features .features-graph #top-left-line {
    position: absolute;
    top: 170px;
    left: 50px;
    z-index: -4
}
#features .features-graph .icon-features-1 {
    /*background-image: url("images/icons/icon-1.svg");*/
    background-size:70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-2 {
    /*background-image: url("images/icons/icon-2.svg");*/
    background-size: 70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-3 {
    /*background-image: url("images/icons/icon-3.svg");*/
    background-size: 65%;
}
#features .features-graph .icon-features-4 {
    /*background-image: url("images/icons/icon-4.svg");*/
    background-size: 65%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-5 {
    /*background-image: url("images/icons/icon-5.svg");*/
    background-size: 65%
}
#features .features-graph .icon-features-6 {
    /*background-image: url("images/icons/icon-6.svg");*/
    background-size: 65%;
    background-position: 50% 50%;
}

 #features .features-graph .icon-features-7 {
    /*background-image: url("images/icons/icon-7.svg");*/
    background-size:70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-8 {
    /*background-image: url("images/icons/icon-8.svg");*/
    background-size: 70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-9 {
    /*background-image: url("images/icons/icon-9.svg");*/
    background-size: 65%;
}
#features .features-graph .icon-features-10 {
    /*background-image: url("images/icons/icon-10.svg")*/
    background-size: 65%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-11 {
    /*background-image: url("images/icons/icon-11.svg")*/
    background-size: 65%
}
#features .features-graph .icon-features-12 {
    /*background-image: url("images/icons/icon-12.svg")*/
    background-size: 65%;
    background-position: 50% 50%;
}
/*******features Images******/
 #features .features-graph .icon-features-7 {
    /*background-image: url("images/icons/icon-7.svg");*/
    background-size:70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-8 {
    /*background-image: url("images/icons/icon-8.svg");*/
    background-size: 70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-9 {
    /*background-image: url("images/icons/icon-9.svg");*/
    background-size: 65%;
}
#features .features-graph .icon-features-10 {
    /*background-image: url("images/icons/icon-10.svg")*/
    background-size: 65%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-11 {
    /*background-image: url("images/icons/icon-11.svg")*/
    background-size: 65%
}
#features .features-graph .icon-features-12 {
    /*background-image: url("images/icons/icon-12.svg")*/
    background-size: 65%;
    background-position: 50% 50%;
}
#features .features-graph .wave {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    text-align: center;
    top: 0
}
#features .features-graph .wave2 {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple2;
    animation-name: ripple2;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    top: 0;
    text-align: center
}
#features .features-graph .wave3 {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple3;
    animation-name: ripple3;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    text-align: center;
    top: 0
}
#features .features-graph .wave4 {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple4;
    animation-name: ripple4;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    text-align: center;
    top: 0
}
@-webkit-keyframes ripple {
    from {
        opacity: 0.8
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}
@keyframes ripple {
    from {
        opacity: 0.8
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}
@-webkit-keyframes ripple2 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0
    }
}
@keyframes ripple2 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0
    }
}
@-webkit-keyframes ripple3 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}
@keyframes ripple3 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}
@-webkit-keyframes ripple4 {
    from {
        opacity: 0.6
    }
    to {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 0
    }
}
@keyframes ripple4 {
    from {
        opacity: 0.4
    }
    to {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 0
    }
}
#features .features-items {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    padding: 0
}
#features .features-items li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
    text-align: left;
    padding: 20px 50px 20px 20px
}

.hidden {display:none;}
.visible {display:block;}

#features .features-textblock p {
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7em
}
#features .features-textblock ul {
    margin: 0;
    padding: 0 2em;
    list-style: none
}
#features .features-textblock ul li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: -5px;
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7em;
    padding: 0.7em 0
}
#features .features-textblock ul li:before {
    display: inline-block;
    position: relative;
    top: -1px;
    left: -11px;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #00b0de;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%
}
#features .features-graph {
    height: 425px;
    margin: 25px
}
#features .features-graph .button-holder {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center
}
#features .features-graph .animation-holder {
    display: flex;
    justify-content: center;
    align-items: center
}
#features .features-graph .flash-oval {
    background-color: #00bff3;
    width: 12em;
    height: 12em;
    border-radius: 7em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 10em auto 9em auto
}
#features .features-graph .flash-oval img {
    position: absolute;
    right: 33px;
    top: 25px;
}


@font-face {
    font-family: "icons";
    src: url("../fonts/icons.woff") format("woff");
    src: url("../fonts/icons.svg") format("svg");
    src: url("../fonts/icons.eot") format("eot");
    src: url("../fonts/icons.eot") format("embedded-opentype");
    src: url("../fonts/icons.ttf") format("truetype")
}
@font-face {
    font-family: "PragmaticaSlab";
    src: url("../fonts/PragmaticaSlab-Medium.woff") format("woff");
    src: url("../fonts/PragmaticaSlab-Medium.svg") format("svg");
    src: url("../fonts/PragmaticaSlab-Medium.eot") format("eot");
    src: url("../fonts/PragmaticaSlab-Mediumns.eot") format("embedded-opentype");
    src: url("../fonts/PragmaticaSlab-Medium.ttf") format("truetype")
}
html {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}
body {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    background-color: #fff;
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 8px;
    line-height: 14px;
    -webkit-font-feature-settings: 'kern' 1;
    -o-font-feature-settings: 'kern' 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased
}
header,
section,
footer {
    display: block;
    position: relative;
    min-width: 880px;
}
header .box,
section .box,
footer .box {
    display: block;
    position: relative;
    width: 860px;
    min-width: 860px;
    margin: 0 auto
}
@media all and (max-width: 860px) {
    header,
    section,
    footer {
        width: 100% !important;
        min-width: 300px !important
    }
    header .box,
    section .box,
    footer .box {
        width: 100% !important;
        min-width: 300px !important;
        padding: 1em !important
    }
   #features .features-title1{
        font-size: 18px!important;
}
#features .features-graph .sq-bt-label{
        visibility: hidden;
    }
#features .features-graph .btn-with-icon{
    display: block;
    width: 70px;
    height: 35px!important;
    background-color: #fff;
    border: 1px solid #9df;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    transition-duration: 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 5em;
    z-index: 0;
    cursor: pointer;
    margin-left: 8%;
    margin-right: 8%;
    text-align: center;
    }
#features .features-graph .flash-oval {
    background-color: #00bff3;
    width: 12em;
    height: 11em;
    border-radius: 6em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 2em auto 2em auto!important;
   }
#features .features-graph .icon-features-1:after,#features .features-graph .icon-features-2:after ,#features .features-graph .icon-features-3:after,#features .features-graph .icon-features-4:after,#features .features-graph .icon-features-5:after,#features .features-graph .icon-features-6:after,#features .features-graph .icon-features-7:after,#features .features-graph .icon-features-8:after,#features .features-graph .icon-features-9:after,#features .features-graph .icon-features-10:after,#features .features-graph .icon-features-11:after,#features .features-graph .icon-features-12:after{
    visibility: hidden!important;
   }
#features .features-textblock h2{
        font-size: 1rem!important;
   }
   #features .features-textblock p{
    font-size: 13px!important;
   }
   #features .features-textblock ul li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: -5px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 9px!important;
    font-weight: 300;
    line-height: 1.5em;
    padding: 0.4em 0;
}
}
.animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
#features {
    text-align: center
}
#features .features-title {
    display: inline-block;
    position: relative;
    color: #ff00d7;
    font-size: 23px;
    font-family: "Roboto";
    font-weight: 700;
    line-height: 46px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: 'Poppins', sans-serif;
    margin: 1em 0
}
#features .features-title::after {
    display: block;
    position: absolute;
    bottom: -.2em;
    left: 50%;
    margin-left: -40px;
    content: "";
    width: 80px;
    height: 3px;
    background-color: #00BFF3;
}
#features .features-content {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    padding-bottom: 5em;
    margin-bottom: 5em;
    border-bottom: 2px solid #e5f7fb
}
#features .features-content+.features-content {
    border: 0
}
#features .features-content-col {
    width: 50%;
    text-align: left
}
#features .features-textblock {
    display: none;
    position: relative
}
#features .features-textblock.__active {
    display: block
}
#features .features-textblock h1,
#features .features-textblock h2,
#features .features-textblock h3,
#features .features-textblock h4,
#features .features-textblock h5 {
    color: #404040;
   font-family: 'Poppins', sans-serif;
    font-weight: 900;
    padding: 0;
    font-size: 2.5em;
    margin-bottom: 15px!important;
}
#features .features-textblock p {
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7em
}
#features .features-textblock ul {
    margin: 0;
    padding: 0 2em;
    list-style: none
}
#features .features-textblock ul li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: -5px;
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7em;
    padding: 0.7em 0
}
#features .features-textblock ul li:before {
    display: inline-block;
    position: relative;
    top: -1px;
    left: -11px;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%
}
#features .features-graph {
    height: 425px;
    margin: 25px
}
#features .features-graph .button-holder {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center
}
#features .features-graph .animation-holder {
    display: flex;
    justify-content: center;
    align-items: center
}
#features .features-graph .flash-oval {
    background-color: #00bff3;
    width: 12em;
    height: 12em;
    border-radius: 7em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 10em auto 9em auto
}
#features .features-graph .flash-oval img {
    position: absolute;
    right: 32px;
    top: 23px;
    width: 35px;
}
#features .features-graph .btn-with-icon {
    display: block;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border: 1px solid #9df;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    transition-duration: 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 5em;
    z-index: 0;
    cursor: pointer;
    margin-left: 8%;
    margin-right: 8%;
    text-align: center;
    opacity: 0.5;
    filter: alpha(opacity=50)
}
#features .features-graph .btn-with-icon.__active {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color:#a8098f;
}
#features .features-graph .btn-with-icon:hover {
    opacity: 1
}
#features .features-graph .sq-bt-label {
    letter-spacing: 0;
    color: #656b6f;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    position: absolute;
    text-transform: uppercase
}
#features .features-graph .label-top-left {
    right: 36%;
    top: 33%;
}
#features .features-graph .label-top {
    right: 21.3%;
    top: 33%
}
#features .features-graph .label-top-right {
    right: 6.7%;
    top: 33%
}
#features .features-graph .label-bottom-left {
    right: 36.3%;
    bottom: 13%;
}
#features .features-graph .label-bottom {
    right: 21.4%;
    bottom: 13%;
}
#features .features-graph .label-bottom-right {
    right: 6.6%;
    bottom: 13%;
}
#features .features-graph .icon-features-1:after {
    content: ' ';
   /* background-image: url("images/icons/top-left.svg");*/
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    top: 36.4%
}
#features .features-graph .icon-features-2:after {
    content: ' ';
   /* background-image: url("images/icons/top.svg");*/
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    top: 36.4%
}
#features .features-graph .icon-features-3:after {
    content: ' ';
    /*background-image: url("images/icons/top-right.svg");*/
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    top: 36.4%;
    right: 10%
}
#features .features-graph .icon-features-4:after {
    content: ' ';
   /* background-image: url("images/icons/bottom-left.svg");*/
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 26%
}
#features .features-graph .icon-features-5:after {
    content: ' ';
   /* background-image: url("images/icons/bottom.svg");*/
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 23%
}
#features .features-graph .icon-features-6:after {
    content: ' ';
    /*background-image: url("images/icons/bottom-right.svg");*/
    background-size: 100%;
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 26%;
    right: 10%
}
#features .features-graph #top-left-line {
    position: absolute;
    top: 170px;
    left: 50px;
    z-index: -4
}
#features .features-graph .icon-features-1 {
    /*background-image: url("images/icons/icon-1.svg");*/
    background-size:70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-2 {
    background-image: url("images/icons/icon-2.svg");
    background-size: 70%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-3 {
    background-image: url("images/icons/icon-3.svg");
    background-size: 65%;
}
#features .features-graph .icon-features-4 {
    background-image: url("images/icons/icon-4.svg");
    background-size: 65%;
    background-position: 50% 50%;
}
#features .features-graph .icon-features-5 {
    background-image: url("images/icons/icon-5.svg");
    background-size: 65%
}
#features .features-graph .icon-features-6 {
    background-image: url("images/icons/icon-6.svg");
    background-size: 65%;
    background-position: 50% 50%;
}
#features .features-graph .wave {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    text-align: center;
    top: 0
}
#features .features-graph .wave2 {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple2;
    animation-name: ripple2;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    top: 0;
    text-align: center
}
#features .features-graph .wave3 {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple3;
    animation-name: ripple3;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    text-align: center;
    top: 0
}
#features .features-graph .wave4 {
    position: absolute;
    opacity: 0;
    width: 12em;
    height: 12em;
    border: #56a9e8 1px solid;
    border-radius: 7em;
    -webkit-animation-name: ripple4;
    animation-name: ripple4;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: linear;
    animation-iteration-count: linear;
    text-align: center;
    top: 0
}
@-webkit-keyframes ripple {
    from {
        opacity: 0.8
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}
@keyframes ripple {
    from {
        opacity: 0.8
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}
@-webkit-keyframes ripple2 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0
    }
}
@keyframes ripple2 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0
    }
}
@-webkit-keyframes ripple3 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}
@keyframes ripple3 {
    from {
        opacity: 0.7
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}
@-webkit-keyframes ripple4 {
    from {
        opacity: 0.6
    }
    to {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 0
    }
}
@keyframes ripple4 {
    from {
        opacity: 0.4
    }
    to {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 0
    }
}
#features .features-items {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    padding: 0
}
#features .features-items li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
    text-align: left;
    padding: 20px 50px 20px 20px
}

.hidden {display:none;}
.visible {display:block;}

#features .features-textblock p {
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7em
}
#features .features-textblock ul {
    margin: 0;
    padding: 0 2em;
    list-style: none
}
#features .features-textblock ul li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: -5px;
    color: #000;
   font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7em;
    padding: 0.7em 0
}
#features .features-textblock ul li:before {
    display: inline-block;
    position: relative;
    top: -1px;
    left: -11px;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #00b0de;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%
}
#features .features-graph {
    height: 425px;
    margin: 25px
}
#features .features-graph .button-holder {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center
}
#features .features-graph .animation-holder {
    display: flex;
    justify-content: center;
    align-items: center
}
#features .features-graph .flash-oval {
    background-color: #00bff3;
    width: 12em;
    height: 12em;
    border-radius: 7em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 10em auto 9em auto
}
#features .features-graph .flash-oval img {
    position: absolute;
    right: 33px;
    top: 25px;
}