@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Roboto);

@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")
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0
}



section {
    display: block;
    position: relative;
    min-width: 880px
}

section .box
 {
    display: block;
    position: relative;
    width: 860px;
    min-width: 860px;
    margin: 0 auto
}

@media all and (max-width: 860px) {

    section
 {
        width: 100% !important;
        min-width: 600px !important
    }
    
    section .box
     {
        width: 100% !important;
        min-width: 600px !important;
        padding: 1em !important
    }
}


.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
    }
}


.cust-txt-tab {
    min-height: 30px;
    text-align: center;
    border-bottom: 2px solid #00bff3;
}

.cust-txt-tab a {
    color: #00bff3;
    font-size: 15px;
    font-weight: 500;
    margin: 0 10px;
    padding: 10px 10px 13px 10px;
    text-decoration: none;
    /* border-bottom: 2px solid #0075c9; */
    font-family: Gotham, Arial, Helvetica!important;
}


.btn-with-tab.__active {
    border: 2px solid #00bff3 !important;
    border-bottom: 2px solid #fff !important;
}

.btn-tab-active {
    border: 2px solid #00bff3 !important;
    border-bottom: 2px solid #fff !important;
}

.image-feature-1 {
    background-image: url(../images/slide01.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    
}

.image-feature-2 {
    background-image: url(../images/slide02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;    
}

.image-feature-3 {
    background-image: url(../images/slide03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;    
}

.image-feature-4 {
    background-image: url(../images/slide04.jpg);
    background-size: 100%;
    background-repeat: no-repeat;    
}


.image-feature-5 {
    background-image: url(../images/slide05.jpg);
    background-size: 100%;
    background-repeat: no-repeat;    
}

.image-feature-6 {
    background-image: url(../images/slide06.jpg);
    background-size: 100%;
    background-repeat: no-repeat;    
}


/* --------------------------------------------------------------------------------------------------- */

.icon-features-1, .icon-features-2, .icon-features-3, .icon-features-4, .icon-features-5, .icon-features-6  {
  position: relative;
}




.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
#features {
    text-align: center
}
#features .features-title {
    display: inline-block;
    position: relative;
    color: #404040;
    font-size: 32px;
    font-family: "Roboto";
    font-weight: 400;
    line-height: 46px;
    text-transform: uppercase;
    letter-spacing: 3px;
    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;
    flex-wrap: wrap;
    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: 100%;
    text-align: left;
    margin: 30px 0;
}

#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: "Open Sans";
    font-weight: 900;
    padding: 0;
    font-size: 1.5em
}
#features .features-textblock p {
    color: #404040;
    font-family: "Open Sans";
    font-size: 12px;
    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: #404040;
    font-family: "Open Sans";
    font-size: 12px;
    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-image: url(../images/slide00.jpg);
    background-size: 100%;
    background-repeat: no-repeat; */
    width: 12em;
    height: 12em;
    border-radius: 7em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 3.4em auto 2em auto;
    border: 5px solid #00bff3;
}
#features .features-graph .flash-oval img {
    position: absolute;
    right: 32px;
    top: 23px;
    border-radius:50%;
}



#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)
}
#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: 3%;
    top: 115%;
}

#features .features-graph .label-top {
    right: 3.3%;
    top: 115%
}

#features .features-graph .label-top-right {
    right: 1.77%;
    top: 115%
}
#features .features-graph .label-bottom-left {
    right: 3.3%;
    bottom: -40%;
}
#features .features-graph .label-bottom {
    right: 3.3%;
    bottom: -40%;
}
#features .features-graph .label-bottom-right {
    right: 3.3%;
    bottom: -40%;
}
#features .features-graph .icon-features-1:after {
    content: ' ';
    background-image: url(../images/top-left-01.png);
    background-size: 100%;
    height: 245px;
    width: 168px;
    background-repeat: no-repeat;
    position: absolute;
    top: 150%
}
#features .features-graph .icon-features-2:after {
    content: ' ';
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/top.svg);
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    top: 150%
}
#features .features-graph .icon-features-3:after {
    content: ' ';
    background-image: url(../images/top-right-01.png);
    background-size: 100%;
    height: 245px;
    width: 168px;
    background-repeat: no-repeat;
    position: absolute;
    top: 150%;
    right: 40%
}
#features .features-graph .icon-features-4:after {
    content: ' ';
    background-image: url(../images/bottom-left.png);
    background-size: 100%;
    height: 245px;
    width: 168px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -70.5%
}
#features .features-graph .icon-features-5:after {
    content: ' ';
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/bottom.svg);
    height: 110px;
    width: 85px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 60.5%
}
#features .features-graph .icon-features-6:after {
    content: ' ';
    background-image: url(../images/bottom-right.png);
    background-size: 100%;
    height: 245px;
    width: 168px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -70.5%;
    right: 40%;
}
#features .features-graph #top-left-line {
    position: absolute;
    top: 170px;
    left: 50px;
    z-index: -4
}
#features .features-graph .icon-features-1 {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/icon-1.svg);
    background-size: 150%;
    background-position: 50% 0
}
#features .features-graph .icon-features-2 {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/icon-2.svg);
    background-size: 70%;
    background-position: 50% 50%
}
#features .features-graph .icon-features-3 {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/icon-3.svg);
    background-size: 65%
}
#features .features-graph .icon-features-4 {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/icon-4.svg);
    background-size: 150%;
    background-position: 50% 0
}
#features .features-graph .icon-features-5 {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/icon-5.svg);
    background-size: 150%
}
#features .features-graph .icon-features-6 {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/598117/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: #404040;
    font-family: "Open Sans";
    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: #404040;
    font-family: "Open Sans";
    font-size: 14px;
    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: #0075c9;
    width: 12em;
    height: 12em;
    border-radius: 7em;
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
    z-index: 100;
    margin: 4em auto 3em auto
}
#features .features-graph .flash-oval img {
    position: absolute;
    right: 33px;
    top: 25px;
}