/*!
 * Start Bootstrap - New Age v4.0.0-beta (http://startbootstrap.com/template-overviews/new-age)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-new-age/blob/master/LICENSE)
 */
body, html {
    width: 100%;
    height: 100%
}

body {
    font-family: Muli, Helvetica, Arial, sans-serif
}

a {
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    color: #8dc63f;
}

a:focus, a:hover {
    text-decoration: inherit;
}

.border {
	border: 0px !important;
}hr {
    max-width: 100px;
    margin: 25px auto 0;
    border-width: 1px;
    border-color: rgba(34, 34, 34, .1)
}

hr.light {
    border-color: #fff
}

h1, h2, h3, h4, h5, h6 {
    font-family: Catamaran, Helvetica, Arial, sans-serif;
    font-weight: 200;
    letter-spacing: 1px;
    margin-top: 15px;
}

.mb-5 {
    margin-top:50px;
    color:#00558c;
    text-align:center;
}

p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px
}


h1.mb-5.white{
    color: #fff;
    margin-bottom:
            15px !important;
}

p.white {
    color: #fff;
}

.white.italic {
    font-style: italic;
}

p.white.small {
    font-size:16px;
}

p.button {
    margin-bottom:10px;
}


section h2 {
    font-size: 50px;
    margin-top:20px;
}

.plans  {
    font-size:18px;
    text-align: left;
}

#better {
    margin-top: 30px;
}

#mainNav {
    border-color: rgba(34, 34, 34, .05);
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    font-family: Catamaran, Helvetica, Arial, sans-serif;
    font-weight: 200;
    letter-spacing: 1px
}

#mainNav .navbar-brand {
    color: #fdcc52;
    font-family: Catamaran, Helvetica, Arial, sans-serif;
    font-weight: 200;
    letter-spacing: 1px
}

#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
    color: #fcbd20
}

#mainNav .navbar-toggler {
    font-size: 18px;
    padding: 8px 10px;
    color: #222
}

#mainNav .navbar-nav > li > a {
    font-size: 16px;
    font-family: Lato, Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase
}

#mainNav .navbar-nav > li > a.blue.active {
    color: #00b1E2 !important;
    background-color: transparent;
}

#mainNav .navbar-nav > li > a.green.active {
    color: #c2ce13 !important;
    background-color: transparent;
}

#mainNav .navbar-nav > li > a.orange.active {
    color: #ffb81c !important;
    background-color: transparent;
}

#mainNav .navbar-nav > li > a.grey.active {
    color: #97999B !important;
    background-color: transparent;
}

#mainNav .navbar-nav > li > a.darkblue.active {
    color: #00558c !important;
    background-color: transparent;
}


#mainNav .navbar-nav > li > a.active:hover {
    background-color: transparent
}

#mainNav .navbar-nav > li > a, #mainNav .navbar-nav > li > a:focus {
    color: #222
}

#mainNav .navbar-nav > li > a:focus:hover, #mainNav .navbar-nav > li > a:hover {
    color: #fbad18
}

@media (min-width: 992px) {
    #mainNav {
        border-color: transparent;
        background-color: transparent
    }

    #mainNav .navbar-brand {
        color: fade(white, 70%)
    }

    #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
        color: #fff;
    }

    #mainNav .navbar-nav > li > a, #mainNav .navbar-nav > li > a:focus {
        color: rgba(255, 255, 255, .7)
    }

    #mainNav .navbar-nav > li > a:focus:hover, #mainNav .navbar-nav > li > a:hover {
        color: #fff
    }

    #mainNav.navbar-shrink {
        background-color: #fff;
        box-shadow: 11px 1px 11px 1px rgba(0, 50, 180, .25);
        padding: inherit;
    }
    #mainNav.navbar-shrink:after {
        content:"";
        background: -webkit-linear-gradient(left, #ccd626 0%, #94c95a 12%, #68bf90 47%, #45b2df 100%);
        display: block;
        height:10px;
        width: 100%;
        position: absolute;
        bottom: 0;
        laft:0;
        padding: inherit;
    }

    #mainNav.navbar-shrink .navbar-brand {
        color: #222;
        margin-bottom: 10px;
    }

    #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
        color: #fdcc52
    }

    #mainNav.navbar-shrink .navbar-nav > li > a, #mainNav.navbar-shrink .navbar-nav > li > a:focus {
        color: #222;
    }
}

header.masthead {
    position: relative;
    width: 100%;
    padding-top: 150px;
    padding-bottom: 100px;
    color: #fff;
    background: url(../img/bg-pattern.png), #00afd7;
    background: url(../img/bg-pattern.png), -webkit-linear-gradient(to left, #00558c, #00afd7);
    background: url(../img/bg-pattern.png), linear-gradient(to left, #00558c, #00afd7)
}

header.masthead .header-content {
    max-width: 500px;
    margin-bottom: 100px;
    text-align: center
}

.img-responsive.screens {
    max-height: 250px;
}

header.masthead .header-content h1 {
    font-size: 30px;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px !important;
}

header.masthead .device-container {
    max-width: 325px;
    margin-right: auto;
    margin-left: auto
}

header.masthead .device-container .screen img {
    border-radius: 3px
}

@media (min-width: 992px) {
    header.masthead {
        padding-bottom: 0;
        padding-top:100px;
    }

    header.masthead .header-content {
        margin-bottom: 0;
        text-align: left
    }

    header.masthead .header-content h1 {
        font-size: 50px;
        text-align: left;
    }

    header.masthead .device-container {
        max-width: 325px
    }
}


section.download h2 {
    font-size: 50px;
    margin-top: 0
}

section.download .badges .badge-link {
    display: block;
    margin-bottom: 25px
}

section.download .badges .badge-link:last-child {
    margin-bottom: 0
}

section.download .badges .badge-link img {
    height: 60px
}

.img-fluid.center {
    vertical-align: middle;
    margin:auto;
    margin-bottom:30px;
}

@media (min-width: 768px) {
    section.download .badges .badge-link {
        display: inline-block;
        margin-bottom: 0
    }
}

@media (min-width: 768px) {
    section.download h2 {
        font-size: 70px
    }
}

section.features .section-heading h2 {
    margin-top: 0
}

section.features .section-heading p {
    margin-bottom: 0
}

section.features .device-container, section.features .feature-item {
    max-width: 325px;
    margin: 0 auto
}

section.features .device-container {
    margin-bottom: 100px
}

@media (min-width: 992px) {
    section.features .device-container {
        margin-bottom: 0
    }
}

section.features .feature-item {
    padding-top: 40px;
    text-align: center
}

section.features .feature-item h3 {
    font-size: 30px;
    color: #00afd7;
}

section.features .feature-item i {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
    background: -webkit-linear-gradient(to left, #00558c, #00558c);
    background: linear-gradient(to left, #00558c, #00558c););
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

section.cta {
    position: relative;
    padding: 50px 0;
    background-image: url(../img/bg-cta.jpg);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

#succes {
    padding-top:40px;
}

div#solutions {
    padding-top: 40px;
}

section#sales {
    padding-top: 40px;
}

section.cta .cta-content {
    position: relative;
    z-index: 1
}

section.cta .cta-content h2 {
    font-size: 50px;
    max-width: 450px;
    margin-top: 0;
    margin-bottom: 25px;
    color: #fff
}

@media (min-width: 768px) {
    section.cta .cta-content h2 {
        font-size: 80px
    }
}

section.cta .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5)
}

section.contact {
    text-align: center
}

section.contact h2 {
    margin-top: 0;
    margin-bottom: 25px
}

section.contact h2 i {
    color: #dd4b39
}

section.contact ul.list-social {
    margin-bottom: 0
}

section.contact ul.list-social li a {
    font-size: 40px;
    line-height: 80px;
    display: block;
    width: 80px;
    height: 80px;
    color: #fff;
    border-radius: 100%
}

section.contact ul.list-social li.social-twitter a {
    background-color: #1da1f2
}

section.contact ul.list-social li.social-twitter a:hover {
    background-color: #0d95e8
}

section.contact ul.list-social li.social-facebook a {
    background-color: #3b5998
}

section.contact ul.list-social li.social-facebook a:hover {
    background-color: #344e86
}

section.contact ul.list-social li.social-google-plus a {
    background-color: #dd4b39
}

section.contact ul.list-social li.social-google-plus a:hover {
    background-color: #d73925
}

.col-xs-12.my-auto {
    padding-bottom: 30px;
}

.row.h-100.right {
    display: flow-root;
}

footer {
    padding: 25px 0;
    text-align: center;
    color: rgba(255, 255, 255, .3);
    background-color: #222
}

footer p {
    font-size: 18px;
    margin: 0
}

footer ul {
    margin-bottom: 0
}

footer ul li a {
    font-size: 18px;
    color: rgba(255, 255, 255, .3)
}

footer ul li a.active, footer ul li a:active, footer ul li a:focus, footer ul li a:hover {
    text-decoration: none
}

.bg-primary {
    background: #cad5da;
    background: -webkit-linear-gradient(#cad5da, #eef2f4);
    background: linear-gradient(#cad5da, #eef2f4)
}

.text-primary {
    color: #fdcc52
}

.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.btn-outline {
    color: #fff;
    border: 1px solid;
    border-color: #fff
}

.btn-outline.active, .btn-outline:active, .btn-outline:focus, .btn-outline:hover {
    color: #fff;
    border-color: #8dc63f;
    background-color: #8dc63f;
}

.btn {
    border-radius: 300px;
    font-family: Lato, Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase
}

.btn-xl {
    font-size: 11px;
    padding: 15px 45px;
    margin-top:10px;
}

a.btn.btn-outline.btn-xl.good {
    color: #fff;
    border-color: #00b1E2;
    background-color: #00b1E2;
}

a.btn.btn-outline.btn-xl.better {
    color: #fff;
    border-color: #c2ce13;
    background-color: #c2ce13;;
}

a.btn.btn-outline.btn-xl.best{
    color: #fff;
    border-color: #ffb81c;
    background-color: #ffb81c;
}

a.btn.btn-outline.btn-xl.diamond {
    color: #fff;
    border-color: #97999B;
    background-color: #97999B;
    margin-bottom:20px;
}

.box {
    margin: 0 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    text-align:center;
    background-color: rgba(0,42,87,0.5);
}

.good {
    border-top: solid 8px #00b1E2;
    background-color: #fff;
    color: #00b1E2;
}

.better {
    border-top: solid 8px #c2ce13;
    background-color: #fff;
    color: #c2ce13;
}


.best {
    border-top: solid 8px #ffb81c;
    background-color: #fff;
    color: #ffb81c;
}

.complete {
    border-top: solid 8px #97999B;
    background-color: #fff;
    color: #97999B;;
}

.good.shadow {
    background-image: url(../img/boxshadow.png);
    background-repeat: no-repeat, repeat;
    background-position: right top;
}

.better.shadow  {
    background-image: url(../img/boxshadow.png);
    background-repeat: no-repeat, repeat;
    background-position: right top;
}


.best.shadow  {
    background-image: url(../img/boxshadow.png);
    background-repeat: no-repeat, repeat;
    background-position: right top;
}

.complete.shadow  {
    background-image: url(../img/boxshadow.png);
    background-repeat: no-repeat, repeat;
    background-position: right top;
}

ul.list-unstyled.text-muted {
    text-align: left;
}

.fa.fa-circle {
    font-size: 11px;
    margin-right:10px;
    vertical-align: middle;
    margin-top: auto;
}

.bold {
    color: #00afd7;
    font-weight: bold;
}

/* Use a wide full screen for small screens like tablets. */
@media (min-width: 768px) and (max-width:992px) {
    .container {
        padding-left: 2em;
        padding-right: 2em;
    }
}

/* --- Plans ---------------------------- */

.my_planHeader {
    text-align: center;
    color: white;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
.my_planTitle {
    font-size:2em;
    font-weight: bold;
}
.my_planPrice {
    font-size:1.4em;
    font-weight: bold;
}
.my_planDuration {
    margin-top: -0.6em;
}

@media (max-width: 768px) {
    .my_planTitle {
        font-size:small;
    }
}

/* --- Features ------------------------- */
.features{
    padding-bottom: 40px;
}

@media (max-width: 768px) {
    .my_feature {
        text-align: center
    }
}

.my_featureRow {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    border: 0.1em solid rgb(163, 163, 163);
    color: #868e96 !important
}

/* --- Plan 1 --------------------------- */
.my_plan1 {
    background: rgba(0, 177, 226, 0.17);
}

.my_planHeader.my_plan1 a {
    background: rgb(72, 109, 139);
    color:white;
}

.my_planHeader.my_plan1 {
    background: rgb(105, 153, 193);
    border-bottom: thick solid rgb(72, 109, 139);
}

/* --- Plan 2 --------------------------- */
.my_plan2 {
    background: rgba(194, 207, 19, 0.17);
}

.my_planHeader.my_plan2 a {
    background: rgb(108, 131, 62);
    color:white;
}

.my_planHeader.my_plan2 {
    background: rgb(134, 162, 77);
    border-bottom: thick solid rgb(108, 131, 62);
}

/* --- Plan 3 --------------------------- */
.my_plan3 {
    background: rgba(251, 173, 24, 0.1);
}

.my_planHeader.my_plan3 a {
    background: rgb(199, 127, 40);
    color:white;
}

.my_planHeader.my_plan3 {
    background: rgb(253, 161, 49);
    border-bottom: thick solid rgb(199, 127, 40);
}

.my_planFeature {
    text-align: center;
    font-size: 18px;
}

.my_planFeature i.my_check {
    color: rgba(4, 205, 112, 0.83);
}

i.fa.fa-check.my_check.blue {
    color: #00afd7;
}

/* --- Plan 4 --------------------------- */
.my_plan4 {
    background: rgba(151, 153, 155, 0.2);
}

.my_planHeader.my_plan4 a {
    background: rgb(199, 127, 40);
    color:white;
}

.my_planHeader.my_plan4 {
    background: rgb(253, 161, 49);
    border-bottom: thick solid rgb(199, 127, 40);
}

#solutions {
    padding-top: 20px;
}

/* --- Register --------------------------- */

.embed-responsive-1by1::before {
    padding-top: inherit;
}

div.embed-responsive.embed-responsive-1by1 {
    height: 950px;
}

@media (max-width: 768px) {
    div.embed-responsive.embed-responsive-1by1 {
        height: 1150px;
    }
}


/* --- menu right --------------------------- */

@media (max-width: 992px) {
    a.nav-link.js-scroll-trigger.darkblue.reseller.btn.btn-outline{
        background-color: #ffff;
        width:120px;
        float:right;
        margin-bottom:20px;
    }
}


.reseller {
    background-color: #00b1E2;
    color: #fff;
    padding: 10px 10px;
    border-color: #46b8da;


}