/* everywhere else */
* {
    /*font-family: Arial, Helvetica, sans-serif;
    font-family: "PT Sans Caption";
    font-family: "PT Sans";
    */
    font-family: "Open Sans";
}

h1,
h2,
h3{
    font-family: "PT Sans Caption";
}

p{
    font-family: "Open Sans";
}

.navbar .navbar-brand {


}

.navbar{
    width: 100%;
    /*background-color: rgba(46, 49, 146, 1) !important;*/
    background-color: rgb(245, 245, 245) !important;
    opacity: 1;
    -webkit-box-shadow: 0px 3px 6px 1px rgba(97,97,97,0.3);
    -moz-box-shadow: 0px 3px 6px 1px rgba(97,97,97,0.3);
    box-shadow: 0px 3px 6px 1px rgba(97,97,97,0.3);
}


.nav-link{
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    font-size: 15px;
    font-weight: 100;

}

.nav-item a{
    color: whitesmoke !important;
}

.nav-item.active .nav-link{
    color: #00FF00 !important;
}

.nav-item .register-link{
    background-color: #000000;
    color: whitesmoke !important;
}

@media (min-width: 991px) {
    .navbar{
        max-height: 70px;
    }
    .nav-item .register-link{
        background-color: #000000;
        border-radius: 10px;
    }
    .nav-item .register-link:hover{
        -webkit-box-shadow: 0px 0px 10px 1px rgba(239, 255, 37, 0.5);
        -moz-box-shadow: 0px 0px 10px 1px rgba(239, 255, 37, 0.5);
        box-shadow: 0px 0px 10px 1px rgba(239, 255, 37, 0.5);
    }
}
@media (max-width:  991px) {
    .nav-item .register-link{
        color: rgba(0, 172, 78, 1) !important;
    }
    .navbar .container {
        width: 100%;
        max-width: 100%;
    }
    .navbar .navbar-toggler{
        margin-top: 10px;
    }
    .navbar .navbar-collapse{
        text-align: center;
    }
    .navbar .navbar-toggler{
        display: none;
    }
    .navbar .navbar-toggler{
        display: none;
    }

    .navbar .container{
        text-align: center;
    }
}

.nav-item{
    margin-left: 10px;
}

.navbar .navbar-brand img {
    display: inline-block;
    height: 50px;
    margin-right: 10px;
    margin-top: -5px;
    margin-bottom: -5px;
}




.flash-container {
    margin: 0px auto;
    text-align: center;
}

flash-messages {
    position: absolute;
    /*position: fixed;*/
    /*top: 20px;*/
    /*left: 20%;*/
    /*right: 20%;*/
    /*width: inherit;*/
}

.main_container{
    position: relative;
    overflow-y: scroll;
    height: 100%;
}

.router-outlet {

    margin: 0;
    padding: 0;
    overflow: inherit;
    margin-top: 1rem auto;
}


/* Customize container */
@media (min-width: 68em) {
    .container-fluid,
    .container {
        max-width: 68rem;
        margin: 0 auto;
    }
}

@media (max-width: 68em) {
    #main_navbar > div{
        margin: 10px;
    }
    .container-fluid,
    .container {
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 992px) {
    .container-fluid,
    .container {
        min-width: 90%;

    }
}
@media (max-width: 768px) {
    .container-fluid,
    .container {
        min-width: 90%;
        max-width: 95%;
    }
}
@media (max-width: 575px) {
    .container-fluid,
    .container {
        min-width: 60%;
        max-width: 95%;
    }
}



.ng-valid[required], .ng-valid.required {
    border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form) {
    border-left: 5px solid #a94442; /* red */
}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
    position: relative;
    overflow-y: scroll;
    height: 100%;
    color: #5a5a5a;
    background-color: rgb(245, 245, 245);
    margin-top: 40px;
}


@media (max-width: 68em) {
    body {
        position: relative;
        margin-top: 60px;
    }
}

.page{
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: 80vh;
}

.footer{
    background-color: rgb(245, 245, 245) !important;
    opacity: 1;
    color: white !important;

    min-height: 3rem;
    max-height: 3rem;
}
.footer {
    /* min-height: 134px; */
    -webkit-box-shadow: 0px -3px 6px 1px rgba(97,97,97,0.3);
    -moz-box-shadow: 0px -3px 6px 1px rgba(97,97,97,0.3);
    box-shadow: 0px -3px 6px 1px rgba(97,97,97,0.3);
}
.footer a{
    color:  rgba(0, 172, 78, 1) !important;
}



.footer .footer-social-link{
    display: inline-block;
    margin-left:10px;
    font-size: 1.6rem;
}

.footer .tsandcs-links{

    padding-top: 20px;
    padding-bottom: 10px;
}

.footer .tsandcs-links .copyright{
    margin-top: 10px;
    margin-bottom: 5px;
    color: #676767;
    font-size: 0.8rem;
}
.footer .tsandcs-links a{
    color: #909090 !important;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


#myCarousel > div > div{

}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
    top: 10%;
    color: #383838;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 20rem;

}

.carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
    display:none
}

.carousel-item .highlight{
    color: rgba(0, 172, 78, 1);
}

/*
    background-color: rgba(46, 49, 146, 1);
    background-color: rgba(0, 172, 78, 1);
    background-color: rgba(237, 28, 36, 1);
    background-color: rgba(241, 91, 41, 1);
    background-color: rgba(251, 176, 64, 1);

    background-color: rgba(236, 0, 140, 1);
    */


@media (min-width: 992px) {
    .carousel-item {
        margin-top: 20px;
        height: 21rem;
    }
    .carousel-caption {
        top: 10%;
    }
}


@media (max-width: 992px) {
    .navbar{
        padding: 0rem 0rem;

    }

    .carousel-item {
        height: 25rem;
    }
    .carousel-caption {
        top: 5%;

    }
}

@media (max-width: 767px) {
    .carousel-item .container{
        width: 100%;
        margin: 0 10%;
    }
    .carousel-item {
        height: 20rem;
    }
    .carousel-caption {
        top: 15%;
    }
    .carousel-caption h1{
        font-size: 2.1rem;
    }
}

@media (max-width: 575px) {
    .carousel-item {
        height: 19rem;
    }
    .carousel-caption {
        top: 5%;
    }
    .carousel-caption h1{
        font-size: 1.8rem;
    }
}

@media (max-width: 375px) {
    .carousel-item {
        height: rem;
    }
    .carousel-caption {
        top: 2%;
    }
    .carousel-caption h1{
        font-size: 1.8rem;
    }
}
@media (max-width: 320px) {
    .carousel-item {
        height: 17rem;
    }
    .carousel-caption {
        top: 2%;
    }
    .carousel-caption h1{
        font-size: 1.6rem;
    }
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.marketing h2 {
    font-weight: normal;
}



/* Featurettes
------------------------- */

.marketing.featurettes .row.featurette{
    margin-top: 20px;
    margin-bottom: 20px;
}

.marketing.featurettes .featurette-divider {
    margin: 3rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.marketing.featurettes .featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
    font-size: 2rem;
    margin-bottom: 20px;
}

.marketing.featurettes .featurette-heading .highlight{
    /*color:#8dc63f;*/
    color: rgba(0, 172, 78, 1);
}



.marketing.featurettes .sm-featurette{
    margin-bottom: 30px;
    margin-left: 5px;
    margin-right: 5px;
    /*cursor: pointer;*/

}
.marketing.featurettes .sm-featurette .item{
    text-align: center;
    background-color: whitesmoke;
    min-height: 100px;
    min-width: 110px;
    -webkit-box-shadow: 0px 0px 2px 2px rgba(105, 105, 105, 0.5);
    -moz-box-shadow:    0px 0px 2px 2px rgba(105, 105, 105, 0.5);
    box-shadow:         0px 0px 2px 2px rgba(105, 105, 105, 0.5);

}
.marketing.featurettes .sm-featurette .item i{
    font-size: 50px;
    margin-top: 15px;
    color: #595959;
}
.marketing.featurettes .sm-featurette .item .caption{
    margin-top: 10px;
    color: #595959;
    text-align: center;
    font-size: .8rem;
}



.marketing.featurettes .card-group{
    width: 100%;
    margin: 0px auto;
}

.marketing.featurettes .card-block{
    padding: 0;
    margin: 0;

}

.marketing.featurettes .card{
    padding: 0;
    margin: 20px 15px;
    max-height: 100px;
    min-height: 100px;
    min-width: 130px;
    max-width: 190px;
}

.marketing.featurettes .card .card-title{
    position: absolute;
    margin: 0 0 2px 0;
    width: 100%;
    bottom: 0px;
    font-size: 0.9em;
    color: #636c72;

}

@media (min-width: 40em) {
    .marketing.featurettes .card{
        max-width: 137px;
        min-width: 137px;
    }

}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {

        margin-bottom: 20px;
    }
}

@media (max-width: 40em) {

    .featurette .featurette-img{
        text-align: center;

    }
}

/*.featurette-img{
    background-color: whitesmoke;
    -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
}*/

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(46, 49, 146, 1);
    z-index: -1;
}

.loading img{
    display: none;
}

/* .loading screen is visible when app is not bootstraped yet, .my-app is empty */
my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

/*my-app:empty + .loading h1 {*/
/*color: #979797;*/
/*position: absolute;*/
/*top: 50%;*/
/*width: 100%;*/
/*text-align: center;*/
/*transform: translate(0, -50%);*/
/*}*/

my-app:empty + .loading img {
    display: inline-block;
    position: absolute;
    text-align: center;
    width: 100px;

    top: calc(50% - 50px);
    left: calc(50% - 50px);


    -webkit-animation: bummer 2s;
    animation: bummer 2s;

    -webkit-transform: scale(0,0);
    transform: scale(0,0);

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}


@-webkit-keyframes bummer {
    0% {
        transform: scale(0.5,0.5);
        opacity: 0.05;
    }
    100% {
        -webkit-transform: scale(2,2);
        opacity: 1;
    }
}

@keyframes bummer {
    0% {
        transform: scale(0.5,0.5);
        opacity: 0.05;
    }
    100% {
        transform: scale(2,2);
        opacity: 1;
    }
}

.my-account-page{
    background-color: white;
    color: black !important;
}

.my-account-page .settings-nav{

}

.my-account-page .settings-nav a{
    background-color: rgba(0, 157, 255, 0.6);
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    color: white !important;

}

.my-account-page .settings-nav a.active{
    background-color: rgba(0, 157, 255, 1);
    margin-bottom: 10px;
    border-radius: 10px;
}

.my-account-page .tab-pane{
    margin-top:0;
    padding-top:0;
    margin-left: 0px;
    padding: 5px 10px;;
}
.my-account-page .settings-actions {
    margin-left: -10px;
    margin-bottom: 1rem;
}

.router-outlet{
    width: 100%;
}



.verify-code-page,
.login-page,
.register-page{
    background-color: rgba(0, 157, 225, 1);
    color: white;
}

.lead {
    font-size: 1.2rem;
    font-weight: 300;
}

.marketing{

    /*
    background-color: rgba(46, 49, 146, 1);
    background-color: rgba(0, 172, 78, 1);
    background-color: rgba(237, 28, 36, 1);
    background-color: rgba(241, 91, 41, 1);
    background-color: rgba(251, 176, 64, 1);

    background-color: rgba(236, 0, 140, 1);
    */

    color: white;
}

.marketing .scroll-anchor{
    position: relative;
    top: -70px;
}
.marketing.howitworks,
.marketing.features,
.marketing.featurettes,
.marketing.pricing,
.marketing.howitworks{
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Carousel base class */
.carousel {
    /* background-color: rgba(0, 99, 176, 1); */
    background-color: white;
}

.marketing.features{
    /*background-image: radial-gradient(circle, rgba(0, 99, 176, 1) 0%, rgba(0, 172, 78, .1) 400%) ;*/
    background-color: rgba(0, 172, 78, 0.075);
    /*background-size: cover;*/
    color: black;
}

.marketing.features h3{
    /*color:#8dc63f;*/
    color: rgba(0, 172, 78, 1);
    font-size: 1.8rem;
}
.marketing.features .feature-col img{
    /*filter: invert(100%);*/
    max-width: 80px;
    margin-bottom: 5px;
}
.marketing.featurettes{

    /*background-image: radial-gradient(circle, rgba(0, 99, 176, 1) 0%, rgba(0, 99, 176, .8) 800%);*/
    background-color: white;
    color: black;
}

.marketing.howitworks{
    background-image: radial-gradient(circle, rgba(0, 172, 78, 1) 0%, rgba(0, 172, 78, .8) 800%);
}

.marketing.pricing{
    background-image: radial-gradient(circle, rgba(213, 213, 213, 1) 0%, rgba(213, 213, 213, .8) 800%);

}

.marketing.interested{
    background-color: rgba(0, 172, 78, 0.075);
    color: black;
}


.marketing.pricing .card{
    background-color: white;
    color: black;
    margin-bottom: 40px;
    border:0;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
}
/*.marketing.pricing .card:hover{
    -webkit-box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.025,1.025);
    -moz-transform: scale(1.025,1.025);
    transform: scale(1.025,1.025);
}*/


.marketing.features img.rounded-circle{
    background-image: radial-gradient(circle, #ffffff 60%, rgba(175, 175, 175, 0.8) 160%);
    padding: 25px;
}

div.marketing.pricing .title{
    color: white;
    margin: 0;
    padding: 15px 10px;
}
div.marketing.pricing .title h4{
    margin: 0;
}

div.marketing.pricing .price{
    background-color: white;
    margin: 0;
    padding: 3px 10px 0 10px;
}

div.marketing.pricing .price .price{
    font-size: 2rem;
}
div.marketing.pricing .price .note{
    font-size: 0.7rem;
}


div.marketing.pricing .features{
    background-color: white;
    margin: 10px 0;
    padding: 5px 0;
    border-top: 1px dotted rgba(0, 0, 0, 0.15);
}
div.marketing.pricing .features p{
    font-size: 0.8rem;
    margin: 5px 5px;
    padding: 2px 0;
}

div.marketing.pricing .annual-price{
    color: black;
    font-size: .9rem;
    margin: 0;
    border-top: 1px dotted rgba(0, 0, 0, 0.15);
    padding: 5px 10px;
}

div.marketing.pricing .action{
    background-color: white;
    padding: 15px 10px;
    border-top: 1px dotted rgba(0, 0, 0, 0.15);
}

div.marketing.pricing .action a{
    background-color: rgba(241, 91, 41, 1);
    border-radius: 10px;
    border: 0;
}
div.marketing.pricing .action a:hover{
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
}

div.marketing.pricing .tier-0 .title{
    background-color:rgb(141, 198, 63);
}

div.marketing.pricing .tier-1 .title{
    background-color:rgb(0, 172, 78);
}
div.marketing.pricing .tier-2 .title{
    background-color:rgb(251, 176, 64);
}
div.marketing.pricing .tier-3 .title{
    background-color:rgb(237, 28, 36);
}



#verify-invalid-form,
#verify-code-from-register,
#verify-code-error,
#verify-code-email-not-found,
#verify-code-invalid-or-expired,
#verify-code-requested,
#register-pass-mismatch,
#register-error,
#register-email-taken,
#login-error-creds{
    margin-top: 20px;
    display: inline-block;
    background-color: rgba(241, 91, 41, 1);
    border-radius: 5px;
    padding:10px 15px;
}

#verify-code-from-register,
#verify-code-requested{
    background-color:rgba(0, 172, 78, 1);
}






/* ref http://jsfiddle.net/AndrewDryga/zcX4h/1/ */
.spinner {
    display: inline-block;
    opacity: 0;
    width: 0;

    -webkit-transition: opacity 0.25s, width 0.25s;
    -moz-transition: opacity 0.25s, width 0.25s;
    -o-transition: opacity 0.25s, width 0.25s;
    transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {
    cursor:progress;
}

.has-spinner.active .spinner {
    opacity: 1;
    width: auto; /* This doesn't work, just fix for unkown width elements */
}

.has-spinner.btn-mini.active .spinner {
    width: 10px;
}

.has-spinner.btn-small.active .spinner {
    width: 13px;
}

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}


.marketing.features{
    padding-top:0;
}


.marketing.features .feature-col{
    margin-top: 50px;
    text-align: center;
}

.marketing.features .feature-col h3{
    margin-top: 15px;
    margin-bottom: 15px;
}


.marketing.features .feature-col p{
    margin-bottom: 20px;
    text-align: center;
    font-size: 1rem;
}

.marketing.features .call-to-action{
    width: 100%;
    text-align: center;
}
.marketing.features .call-to-action a{
    margin-top: 20px;
    background-color: rgba(241, 91, 41, 1);
    min-width: 200px;
}



/*
.marketing.howitworks .container{

    padding: 0;
}

.marketing.howitworks .nav{
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 100%;
    padding: 0;
    margin: 0 15px;
    margin-bottom: 10px;

}
.marketing.howitworks .nav .nav-item{
    margin:0;
    padding:0;
}
.marketing.howitworks .nav .nav-item:hover{
    background-color: rgba(0, 0, 0, 0.15);
}
.marketing.howitworks .nav .nav-item a{
    font-size: 1rem;
    padding: 5px 15px;
}

.marketing.howitworks .tab-content{
    background-color: transparent;
    padding: 10px 15px;
    width: 100%;
    min-height: 300px;
}
.marketing.howitworks h2{
    margin-bottom: 20px ;
}
*/

body > div.beta-tag{
    z-index: 9000;
    position: fixed;
    top: 20px;
    left: calc((100% - 960px)/2 + 960px - 9px);
    cursor: pointer;
    background-color: #ffffff;
}
div.beta-tag span{
    z-index: 9000;
    position: fixed;
    top: 27px;
    left: calc((100% - 960px)/2 + 960px - 7px);
    padding: 0;
    transform: rotate(45deg);
    font-size: 0.7rem;
    font-weight: 900;
    z-index: 9999;
    color: white;
}


div.beta-tag .shape{
    background-color: #5cb85c;
    width: 30px;
    height: 30px;
    position: relative;
    text-align: center;
}
div.beta-tag .shape:before,
div.beta-tag .shape:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #5cb85c;
}
div.beta-tag .shape:before {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
}
div.beta-tag .shape:after {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
}


@media (max-width: 991px){
    body > div.beta-tag{
        top: 20px;
        left: calc(100% - 120px);
    }
    div.beta-tag span{
        transform: rotate(0deg);
        top: 27px;
        left: calc(100% - 119px);
    }
}

@media (min-width: 1089px){
    body > div.beta-tag{
        top: 20px;
        left: calc((100% - 960px)/2 + 960px);
    }
    div.beta-tag span{
        top: 27px;
        left: calc((100% - 960px)/2 + 960px + 2px);
    }
}

@media (min-width: 1200px){
    body > div.beta-tag{
        top: 20px;
        left: calc((100% - 1088px)/2 + 1088px);
    }
    div.beta-tag span{
        top: 27px;
        left: calc((100% - 1088px)/2 + 1088px + 2px);
    }
}


.marketing.services{
    height: 80px;
    padding-top: 15px;
    background-color: #ceffe5;
    /*background-image: linear-gradient(180deg, rgb(0, 157, 255) 0%, #ffffff 20%, #ffffff 80%, #08a84e 100%);*/
}

.marketing.services .service-icons img{
    min-height: 50px;
    max-height: 50px;
    margin: 0 20px;

    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

.marketing.services .service-icons img:hover {
    -webkit-filter: grayscale(1);
    filter: none;
}

.marketing.services .service-icons i{
    color: #ccc;
    font-size: 50px;
    line-height: 50px;
    margin-left: 10px;
}








.loginBtn {
    box-sizing: border-box;
    position: relative;
    /* width: 13em;  - apply for fixed size */
    margin: 0.2em;
    padding: 0 15px 0 46px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
}
.loginBtn:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
}
.loginBtn:focus {
    outline: none;
}
.loginBtn:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
    background-color: #4C69BA;
    background-image: linear-gradient(#4C69BA, #3B55A0);
    /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
    text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
    border-right: #364e92 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
    background-color: #5B7BD5;
    background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
.loginBtn--google {
    /*font-family: "Roboto", Roboto, arial, sans-serif;*/
    background: #DD4B39;
}
.loginBtn--google:before {
    border-right: #BB3F30 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
    background: #E74B37;
}


.marketing.features div.rounded-circle{
    background: whitesmoke !important;
    width: 120px !important;
    height: 120px !important;
    padding: 15px !important;
    margin: 0 auto !important;
}
.marketing.features div.rounded-circle img{
    width:90px !important;
    height:90px!important;
    padding: 5px !important;
}


img.featurette-image{
    max-height: 150px;
    text-align: center;
    filter: invert(0.8);
}




.marketing.interested .row.container{
    text-align: center;
}

.marketing.interested .row.container h3{
    margin: 10px auto;
}

.btn-primary {
    color: #fff;
    background-color: rgb(0, 172, 78);
    border-color: rgb(0, 172, 78);
}
.btn-primary:hover {
    color: #fff;
    background-color: rgb(0, 136, 62);
    border-color: rgb(0, 136, 62);
}


/*
.navbar-light .navbar-toggler-icon {
    background-image: url("/assets/IOLogo_diamond_green_dot_v1.svg");
}
*/


#flash{
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 9999;
    max-width: 600px;
    top: 10px;
}

.text-highlight{
    color: rgb(0, 136, 62);
}