body,html {
 width:100%;
 height:100%
}
body {
 font-family:Muli,Helvetica,Arial,sans-serif
}
#mainNav,#mainNav .navbar-brand,h1,h2,h3,h4,h5,h6 {
 font-family:Catamaran,Helvetica,Arial,sans-serif;
 font-weight:200;
 letter-spacing:1px
}
a {
 -webkit-transition:all .35s;
 -moz-transition:all .35s;
 transition:all .35s
}
a:focus,a:hover {
 color:#fcbd20;
 text-decoration: none;
}
hr {
 max-width:100px;
 margin:25px auto 0;
 border-width:1px;
 border-color:rgba(34,34,34,.1)
}
hr.light {
 border-color:#fff
}
p {
 font-size:18px;
 line-height:1.5;
 margin-bottom:20px
}
p.price {
    font-size: 24px;
}
p.couponError {
    font-size: 12px;
    color: red;
}
section {
    padding: 50px 0 150px 0;
}
section h2 {
 font-size:50px
}
#mainNav {
    border-color: rgba(34,34,34,.05);
    background-color: #0e3d70;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s
}
#mainNav .navbar-brand {
 color:#fdcc52
}
#mainNav .navbar-nav>li>a,.btn {
 font-family:Lato,Helvetica,Arial,sans-serif;
 text-transform:uppercase
}
#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover {
 color:#fcbd20
}
#mainNav .navbar-toggler {
 font-size:12px;
 padding:8px 10px;
 color:White
}
#mainNav .navbar-nav>li>a {
 font-size:11px
}
#mainNav .navbar-nav>li>a.active {
 color:#fdcc52!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:White
}
/*#mainNav .navbar-nav>li>a:focus:hover,#mainNav .navbar-nav>li>a:hover {
 color:#fdcc52
}*/
#mainNav.navbar-shrink, .navbar-innerPages {
    border-color: rgba(34,34,34,.1);
    background-color: #0e3d70;
}
 #mainNav.navbar-shrink .navbar-brand {
  color:#222
 }
 #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:#fff
 }
 #mainNav.navbar-shrink .navbar-nav>li>a:focus:hover,#mainNav.navbar-shrink .navbar-nav>li>a:hover {
  color:#fdcc52
 }
@media (min-width:992px) {
 #mainNav {
  border-color:transparent;
  background-color:#0e3d70;
 }
 #mainNav .navbar-brand {
  color:fade(white,70%)
 }
 #mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover {
  color:#fdcc52
 }
 #mainNav .navbar-nav>li>a,#mainNav .navbar-nav>li>a:focus {
  color:rgba(255,255,255,1)
 }
/* #mainNav .navbar-nav>li>a:focus:hover,#mainNav .navbar-nav>li>a:hover {
  color:#fdcc52
 }*/
 #mainNav.navbar-shrink {
  border-color:rgba(34,34,34,.1);
  background-color:#0e3d70;
 }
 #mainNav.navbar-shrink .navbar-brand {
  color:#222
 }
 #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:#fff
 }
 #mainNav.navbar-shrink .navbar-nav>li>a:focus:hover,#mainNav.navbar-shrink .navbar-nav>li>a:hover {
  color:#fdcc52
 }
}
.img-thumbnail{
    padding:0;
    border-radius:0;
}
header.masthead {
 position:relative;
 width:100%;
 padding-top:150px;
 padding-bottom:100px;
 color:#fff;
 background:url(../img/bg-pattern.png),#005;
 background:url(../img/bg-pattern.png),-webkit-linear-gradient(to right,#005,#3024dc);
 background:url(../img/bg-pattern.png),linear-gradient(to right,#005,#3024dc)
}
header.masthead .header-content {
 max-width:500px;
 margin-bottom:100px;
 text-align:center
}
header.masthead .header-content h1 {
 font-size:30px
}
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 {
  height:100vh;
  min-height:775px;
  padding-top:0;
  padding-bottom:0
 }
 header.masthead .header-content {
  margin-bottom:0;
  text-align:left
 }
 header.masthead .header-content h1 {
  font-size:30px
 }
 header.masthead .device-container {
  max-width:325px
 }
}

@media (min-width:1200px) {
    header.masthead .header-content h1 {
        font-size: 50px
    }
}

footer {
    text-align: center;
}

#innerPageFooter {
    text-align: center;
    /*position: absolute;*/
    left: 0;
    bottom: 0;
    width: 100%
}

#invoicePageFooter {
    text-align: center;
    /*position: absolute;*/
    right: 1rem;
    bottom: 0;
    width: 100%
}

#invoicesTable {
    margin-bottom: 3rem;
}

#affiliateDetails {
    margin-bottom: 1rem;
}

section.features {
    padding: 100px 0 150px 0
}
section.contact {
    text-align: left;
    padding: 100px 0 250px 0
}
section.pricing {
 position:relative;
 padding:100px 0 250px 0
}
section.pricing h2 {
 font-size:50px;
 margin-top:0
}
section.pricing h3 {
    margin-top: 10%;
    font-weight:400;
}
section.pricing .badges .badge-link {
 display:block;
 margin-bottom:25px
}
section.pricing .badges .badge-link:last-child {
 margin-bottom:0
}
section.pricing .badges .badge-link img {
 height:60px
}
@media (min-width:768px) {
 section.pricing .badges .badge-link {
  display:inline-block;
  margin-bottom:0
 }
}
section.features .section-heading {
 margin-bottom:100px
}
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:50px;
 padding-bottom:50px;
 text-align:center
}
section.features .feature-item h3 {
 font-size:30px
}
section.features .feature-item i {
 font-size:80px;
 display:block;
 margin-bottom:15px;
 background:-webkit-linear-gradient(to right,#005,#3024dc);
 background:linear-gradient(to right, #005,#3024dc);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent
}
section.contact h2,section.faq .faq-content h2 {
 margin-top:0;
 margin-bottom:25px
}
section.faq {
 position:relative;
 padding:100px 0 150px 0;
 /*background-image:url(../img/bg-faq.jpg);*/
 background-position:center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover
}
section.faq .faq-content {
 position:relative;
 z-index:1
}
section.faq .faq-content h2 {
 font-size:50px;
 max-width:450px;
 color:#fff;
}

section.faq h2 {
margin-bottom: 5%;
}

section.faq i{
    color: #3024dc;
}

.faq-item {
    margin-bottom: 10%;
}

@media (min-width:768px) {
 section.faq .faq-content h2 {
  font-size:80px
 }
}
section.faq .overlay {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color:rgba(0,0,0,.5)
}
footer ul,section.contact ul.list-social {
 margin-bottom:0;
}
section.contact h2 i {
 color:#dd4b39
}
section.contact ul.list-social li a {
 font-size:30px;
 line-height:60px;
 display:block;
 width:60px;
 height:60px;
 color:#fff;
 border-radius:100%
}
footer p,footer ul li a {
 font-size:11px
}
footer,footer ul li a {
 color:rgba(255,255,255,.6)
}
footer a {
    color: rgba(255,255,255,.6);
}
footer a:hover, footer a:focus {
    color: #fff;
}

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-youtube a {
 background-color:#cc181e
}
section.contact ul.list-social li.social-youtube a:hover {
 background-color:#c50d0c
}
section.contact ul.list-social li.social-instagram a {
    background-color: #e4405f
}
section.contact ul.list-social li.social-instagram a:hover {
    background-color: #dd354d
}
section.contact ul.list-social li.social-pinterest a {
    background-color: #bd081c
}
section.contact ul.list-social li.social-pinterest a:hover {
    background-color: #b5fd0a
}
footer {
    padding: 25px 0;
    background-color: #303030;
}
footer p {
 margin:0
}
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:#fdcc52;
 background:-webkit-linear-gradient(#fdcc52,#fdc539);
 background:linear-gradient(#fdcc52,#fdc539)
}
.text-primary {
 color:#fdcc52
}
.no-gutter>[class*=col-] {
 padding-right:0;
 padding-left:0
}
.btn-outline {
 color:#fff;
 border:1px solid #fff
}
.btn-outline.active,.btn-outline:active,.btn-outline:focus,.btn-outline:hover {
 color:#fff;
 border-color:#0b0;
 background-color:#0b0
}
.btn {
 border-radius:3px
}
.btn-xl {
 font-size:11px;
 padding:15px 45px
}

/*#loginForm {
    margin-left: 10%
}*/

#subscribeForm {
    padding: 20px 0 150px 0
}

#loginForm,
#affiliateApplication,
#confirmation,
#error,
#changePassword,
#forgotPassword,
#manageAccount,
#subscribe {
    margin-top: 2%;
    min-height: 100vh;
    margin-bottom: 5rem;
}

#SignUpBtn .nav-link {
    background-color: none;
    max-width: 85px;
    text-align: left;
}

#SignInBtn .nav-link {
    background-color: none;
    max-width: 85px;
    text-align: left;
}

#SignOutBtn .nav-link {
    background-color: none;
    max-width: 85px;
    text-align: left;
}

/*#SignUpBtn .nav-link {
    background-color: #0c0;
    margin-top: 10px;
    padding: 7px;
    max-width: 85px;
    text-align: center;
}

#SignInBtn .nav-link {
    background-color: #33b0fc;
    margin-top: 10px;
    padding: 7px;
    max-width: 85px;
    text-align: center;
}

#SignOutBtn .nav-link {
    background-color: #e20707;
    margin: 5px 10px 0 0;
    padding: 7px;
    max-width: 85px;
}
*/

@media (min-width:992px) {

    #SignUpBtn .nav-link {
        background-color: #28a745;
        margin: 0 10px 0 30px;
        padding: 7px 12px;
        max-width: 85px;
        border-radius: 2px;
    }

    #SignUpBtn :hover{
        background-color: #218838;
    }


    #SignInBtn .nav-link {
        background-color: #2aaaf9;
        margin: 0 10px 0 0;
        padding: 7px 12px;
        max-width: 85px;
        border-radius: 2px;
    }

    #SignInBtn :hover {
        background-color: #168ed8;
    }

    #SignOutBtn .nav-link {
        background-color: #e20707;
        margin: 0 10px 0 0;
        padding: 7px 12px;
        max-width: 85px;
        border-radius: 2px;
    }

    #SignOutBtn :hover {
        background-color: #c20606;
    }
    
}

#social-icons {
    margin-top: 15%;
    text-align: center;
}


#contact-form .btn {
    padding-left: 10%;
    padding-right: 10%;
}

.example.example2 {
    background-color: #fff;
}

    .example.example2 * {
        font-family: Source Code Pro, Consolas, Menlo, monospace;
        font-size: 16px;
        font-weight: 500;
    }

    .example.example2 .row {
        display: -ms-flexbox;
        display: flex;
        margin: 0 5px 10px;
    }

    .example.example2 .field {
        position: relative;
        width: 100%;
        height: 50px;
        margin: 0 10px;
    }

        .example.example2 .field.half-width {
            width: 50%;
        }

        .example.example2 .field.quarter-width {
            width: calc(25% - 10px);
        }

    .example.example2 .baseline {
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        bottom: 0;
        background-color: #cfd7df;
        transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .example.example2 label {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 8px;
        color: #cfd7df;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform-origin: 0 50%;
        cursor: text;
        transition-property: color, transform;
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .example.example2 .input {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        padding-bottom: 7px;
        color: #32325d;
        background-color: transparent;
    }

        .example.example2 .input::-webkit-input-placeholder {
            color: transparent;
            transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .example.example2 .input::-moz-placeholder {
            color: transparent;
            transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .example.example2 .input:-ms-input-placeholder {
            color: transparent;
            transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .example.example2 .input.StripeElement {
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            will-change: opacity;
        }

        .example.example2 .input.focused,
        .example.example2 .input:not(.empty) {
            opacity: 1;
        }

            .example.example2 .input.focused::-webkit-input-placeholder,
            .example.example2 .input:not(.empty)::-webkit-input-placeholder {
                color: #cfd7df;
            }

            .example.example2 .input.focused::-moz-placeholder,
            .example.example2 .input:not(.empty)::-moz-placeholder {
                color: #cfd7df;
            }

            .example.example2 .input.focused:-ms-input-placeholder,
            .example.example2 .input:not(.empty):-ms-input-placeholder {
                color: #cfd7df;
            }

            .example.example2 .input.focused + label,
            .example.example2 .input:not(.empty) + label {
                color: #aab7c4;
                transform: scale(0.85) translateY(-25px);
                cursor: default;
            }

            .example.example2 .input.focused + label {
                color: #24b47e;
            }

        .example.example2 .input.invalid + label {
            color: #ffa27b;
        }

        .example.example2 .input.focused + label + .baseline {
            background-color: #24b47e;
        }

        .example.example2 .input.focused.invalid + label + .baseline {
            background-color: #e25950;
        }

    .example.example2 input, .example.example2 button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        border-style: none;
    }

        .example.example2 input:-webkit-autofill {
            -webkit-text-fill-color: #e39f48;
            transition: background-color 100000000s;
            -webkit-animation: 1ms void-animation-out;
        }

    .example.example2 .StripeElement--webkit-autofill {
        background: transparent !important;
    }

    .example.example2 input, .example.example2 button {
        -webkit-animation: 1ms void-animation-out;
    }

    .example.example2 button {
        display: block;
        width: calc(100% - 30px);
        height: 40px;
        margin: 40px 15px 0;
        background-color: #24b47e;
        border-radius: 4px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        cursor: pointer;
    }

    .example.example2 input:active {
        background-color: #159570;
    }

    .example.example2 .error svg {
        margin-top: 0 !important;
    }

        .example.example2 .error svg .base {
            fill: #e25950;
        }

        .example.example2 .error svg .glyph {
            fill: #fff;
        }

    .example.example2 .error .message {
        color: #e25950;
    }

    .example.example2 .success .icon .border {
        stroke: #abe9d2;
    }

    .example.example2 .success .icon .checkmark {
        stroke: #24b47e;
    }

    .example.example2 .success .title {
        color: #32325d;
        font-size: 16px !important;
    }

    .example.example2 .success .message {
        color: #8898aa;
        font-size: 13px !important;
    }

    .example.example2 .success .reset path {
        fill: #24b47e;
    }

.list-inline {
    padding-left: 10%;
}