@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400');
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400i');
@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    padding-top: 0px;
    background-color: #fff;
    width: 100%;
    font-family: 'Alegreya Sans', sans-serif;
    margin: 0;
}

p {
    font-size: 1.3em;
    font-family: 'Alegreya Sans', sans-serif;
    margin-bottom: 1em;
    line-height: 1.6em;
    text-rendering: optimizeLegibility;
}
section {
    padding: 30px 0;
}
p.formHeading {
    text-align: left;
    font-size: 1.8em;
    margin-bottom: 40px;
    margin-top: 5%;
}
.stanFont,
#typedName {
    font-size: 1em;
    line-height: 3;
    color: #1b3147;
    font-family: 'Alegreya Sans', Arial, sans-serif;
}


.stanFont {
    line-height: 1.8;
    color: #21456b;
}
.smallFont {
    font-size: 1em;
}
select#language,
select#language-res {
    font-size: 1.4em;
    display: block;
    width: 100%;
    margin-top: 30px;
    height: 43px;
    line-height: 1.42857143;
    color: #21456b;
    border-color: transparent;
    border-radius: 4px;
    font-family: 'Alegreya Sans', sans-serif;
    background-color: rgba(255,255,255,0.8)
}
select#language-res {
    margin-top: 0px;
    font-size: 1.2em;
    background-color: #fff;
    margin-bottom: 5px;
    border-radius: 8px;
    border-color: rgba(183,183,183,0.8);
    border-width: 2px;
}
select#language:focus,
select#language-res:focus {
    border: 1px solid #08b8b1;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#signUpLanguage {
    font-size: 15px;
    display: block;
    width: 100%;
    height: 43px;
    line-height: 1.42857143;
    color: #acb6c0;
    border: 1px solid #dce4ec;
    border-radius: 4px;
    padding: 10px 15px;
    background-image: none;
}
select:focus {
    border: 1px solid #08b8b1;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#name,
#name-res {
    font-size: 1.2em;
    margin-top: 30px;
    border-radius: 8px;
    border-color: rgba(183,183,183,0.8);
    font-family: 'Alegreya Sans', 'sans-serif';
    color: #21456b;
    background: rgba(255,255,255,0.82);
    border-width: 2px;
}
#name-res {
    margin-top: 0px;
    margin-bottom: 5px;
}
#name:focus,
#name-res:focus {
    border: 1px solid #08b8b1;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
form-control:focus {
    border-color: red;
}
svg {
    overflow: hidden;
}
#copyright {
    color: #21456b;
    font-size: 0.8em;
    margin: 0 0 10px;
    padding-top: 0px;
    margin-top: 0px;
}
.col a:hover {
    text-decoration: none;
}
#fallback {
    display: none;
}
.audioButtonsGrp {
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
}
.audioButtonsGrp a:hover,
.audioButtonsGrp a.hover {
    text-decoration: none;
}
input[type="radio"] {
    vertical-align: baseline;
}
/*Changes to Header from FreeLancer*/

header {
    color: #fff;
    background: #18bc9c;
}
header .container {
    padding-top: 100px;
    text-align: left;
    transform:skewY(5deg);
    transform-origin:0;

}

#api-container {
    padding-bottom: 0px;
}

.bg-color {
    background: #fafafa;
}
header img {
    display: block;
    margin: 0 auto 20px;
}
header .intro-text .name {
    display: block;
    font-family: 'Montserrat', sans-serif;
    width: 50%;
    text-align: left;
    font-size: 4.3em;
    font-weight: 500;
    padding-top: 5%;
}
header .intro-text .skills {
    font-size: 1.25em;
    font-weight: 300;
}
header .intro-text .subFeature {
    font-size: 1.8em;
}
header .intro-text #apiTextStyle {
    padding-bottom: 4%;
}
.boxed {
    margin-top: 15px;
    margin-bottom: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

.paper-tile {
    margin-top: 30px;
    margin-bottom: 50px;
    padding-top:40px;
    padding-bottom: 2%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 37%;
    margin-right: 37%;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    -moz-box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.paper-tile-multi {
    width: 26%;
    /*padding-top: 30px;*/
    padding-bottom: 2%;
    border-radius: 15px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.paper-tile-caption {
    margin-top: 0px;
    background-color: rgba(17,145,168,0.8);
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    width: 100%;
    padding-top: 9px;
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-radius: 15px 15px 0 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.2em;
    color: white;
    z-index: 1;
}
h2 {
    text-transform: capitalize;
}
section h2 {
    padding-bottom: 10%;
    padding-top: 35px;
    font-size: 2.2em;
    color: #21456b;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.featureText {
    font-size: 1.2em;
    padding-top: 13%;
    color: #21456b;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}
.smallText {
    font-size: 1.1em;
    color: #57789A;
    padding-bottom: 5%;
}
.fa-android:hover,
.fa-apple:hover {
    /*font-size:7.5em;*/
    
    color: #007D65;
}
.fa-lg {
    font-size: 3em;
    /*color:#365a80;*/
    
    color: #049372;
}
.fa-stack {
    height: 1.5em;
}
.colorText {
    font-size: 1.5em;
    padding-top: 2%;
    color: #007D65;
}
.bottomHeader {
    padding-bottom: inherit;
}
.styleName,
.styleName:hover,
.styleName:focus,
.styleName:active {
    padding-top: 30px;
    font-size: 0.86em;
    font-weight: 300;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    color: rgba(15,64,108,1);
}
.noOverflow {
    overflow: none;
}
a.linkStyle {
    font-size: 0.93;
    line-height: 21px;
    font-family: 'Alegreya Sans', Arial, sans-serif;
    color: #009F98;
    text-decoration: none;
}
a.linkStyle:hover,
a.linkStyle:focus {
   
    font-size: 1.1em;
    background-color: rgba(255, 255, 255);
}
#sign_up_body {
    background: url('../img/bg_sign_up.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#sign_in_body {
    background: url('../img/bg_sign_in.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#footer_bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
}
.trans .well {
    background-color: rgba(236, 240, 241, 0.93);
}
.formLabel {
    font-weight: normal;
    padding-bottom: 10%;
    padding-right: 5%;
}
/*Styling for General Error Box*/

.styleAlertBox .alert-danger {
    color: #21456b;
    border-radius: 15px;
    background: rgba(255,255,255, 0.7);
    border-color: #f0f0f0;
    font-size: 1em;
    -webkit-box-shadow: 2px 4px 6px 1px #D3D3D3;
       -moz-box-shadow: 2px 4px 6px 1px #D3D3D3;
            box-shadow: 2px 4px 6px 1px #D3D3D3;
    margin-top:10%;
    margin-bottom:10%;
    z-index: 1001;
}
/*Styling for Modal Errors*/

.styleReqAlertBox .alert-danger {
    margin-top: 5%;
    color: #21456b;
    border-radius: 15px;
    background: rgba(255,255,255, 0.7);
    border-color: #f0f0f0;
    font-size: 1em;
    -webkit-box-shadow: 2px 4px 6px 1px #D3D3D3;
       -moz-box-shadow: 2px 4px 6px 1px #D3D3D3;
            box-shadow: 2px 4px 6px 1px #D3D3D3;
}
.alert > p {
    font-size: 0.8em;
    color: #21456b;
    font-family: 'Montserrat', sans-serif;
}
.fillPage .well {
    position: fixed;
    padding: 5%;
    margin: 0;
    width: 100%;
    height: 100%;
}
.pageBottom {
    position: absolute;
    bottom: 0;
    right: 2px;
    padding-right: 5%;
}
#loginNavColor {
    color: #87D37C;
}
#loginNavColor:hover {
    color: #C5EFF7;
}
div.arrow {
    top: 0px;
}

.modal-content {
    border-radius: 18px;
}

.reduce-width {
    width: 400px !important;
}

.modal-body {
    border-radius: 18px;
}
.modal-title {
    font-size: 1.18em;
    color: #fff;
    font-family: "Alegreya Sans", sans-serif;
    padding-top: 18px;
    padding-bottom: 18px;
    font-weight: 300;
    text-transform: uppercase;
}
.modal-header {
    border-color: transparent;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    padding: 2px;
}
.modal-body {
    background-color: #fff;
}
select.formDropdown {
    font-size: 15px;
    display: block;
    width: 100%;
    height: 43px;
    line-height: 1.42857143;
    color: #2c3e50;
    border: 1px solid #dce4ec;
    border-radius: 4px;
    padding: 10px 15px;
    background-image: none;
    margin-top: 3%;
}
select.formDropdown:not(:first-child) {
    color: #2c3e50;
}
.dialogMsg {
    font-size: 1.2em;
}

.dialogMsgSuccess {
    font-size: 1.15em;
}
.hideEmail {
    display: none;
}
.modal-body {
    color: #2c3e50;
}


#features,
#about,
#press {
    transform:skewY(-5deg);
    transform-origin:0;
    padding-bottom: 10%
}

#press {
    background-color: transparent;
}


#about {
    background-color: #fff;
}

#features {   
    background-color: #fafafa;
}
 
#features .container, 
#about .container,
#press .container   {
    transform:skewY(5deg);
    transform-origin:0;
}


#about h2 {
    padding-bottom: 2.5%;
    padding-top: 5px;
}

#ns_head_custom {
    background-color: rgba(17,145,168,0.8); /* For browsers that do not support gradients */
    background-image: url('../img/hp/ns_bg_main.jpg') no-repeat center center fixed;
    background: -webkit-linear-gradient(left, rgba(17,145,168,0.8) , rgba(57,207,182,0.8)),url('../img/hp/ns_bg_main.jpg') no-repeat center center fixed; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,0.8), rgba(57,207,182,0.8)),url('../img/hp/ns_bg_main.jpg') no-repeat center center fixed; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,0.8), rgba(57,207,182,0.8),url('../img/hp/ns_bg_main.jpg') no-repeat center center fixed); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,0.8) , rgba(57,207,182,0.8),url('../img/hp/ns_bg_main.jpg') no-repeat center center fixed); /* Standard syntax */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transform:skewY(-5deg);
    transform-origin:0;
}

#ns_head_api {
    background-color: rgba(17,145,168,0.8); /* For browsers that do not support gradients */
    background-image: url('../img/hp/ns_bg_api.jpg') no-repeat center center fixed;
    background: -webkit-linear-gradient(left, rgba(17,145,168,0.8) , rgba(57,207,182,0.8)),url('../img/hp/ns_bg_api.jpg') no-repeat center center fixed; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,0.8), rgba(57,207,182,0.8)),url('../img/hp/ns_bg_api.jpg') no-repeat center center fixed;  For Opera 11.1 to 12.0 
    background: -moz-linear-gradient(right, rgba(17,145,168,0.8), rgba(57,207,182,0.8),url('../img/hp/ns_bg_api.jpg') no-repeat center center fixed); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,0.8) , rgba(57,207,182,0.8),url('../img/hp/ns_bg_api.jpg') no-repeat center center fixed); /* Standard syntax */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transform:skewY(-5deg);
    transform-origin:0;
}


#ns_search_btn,
#ns_search-res_btn,
#ns_contact_btn {
    background-color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
    padding-left: 70px;
    padding-right: 70px;
    border-radius: 4px;
    margin-top: 30px;
    text-transform: uppercase;
    font-family: 'Alegreya Sans', sans-serif;
    color:#21456b;
    font-weight: 700;
}

#ns_search_btn:hover,
#ns_contact_btn:hover{
    border-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
}

#ns_search-res_btn:hover {
    color: #fff;
    border-color: transparent;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
}

#ns_search-res_btn,
#ns_contact_btn {
    margin-top: 0px;
}
#ns_nav_head {
    letter-spacing: 1.5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.94em;
}
.form-control::-webkit-input-placeholder {
    color: #565a5c;
}
.form-control:-moz-placeholder {
    color: #565a5c;
}
.form-control::-moz-placeholder {
    color: #565a5c;
}
.form-control:-ms-input-placeholder {
    color: #565a5c;
}
.navbar-fixed-top {
    padding: 0 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}
.navbar-default {
    background-color: transparent;
    border-color: transparent;
}
#ns_navbar_solid {
    /*background-color: rgba(44, 62, 80, 1);*/
    border-color: transparent;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
}
#req_name {
    padding: 10px 10px;
}
#req-btn {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 5px 80px;
    outline: 0 !important;
    outline-offset: 0  !important;
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
    border-radius: 5px;
    border-color: transparent;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */

}
a#req-btn {
    text-decoration: none;
    color: #fafafa;
    font-family: "Alegreya Sans",sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
}
#req-btn:hover,
#req-btn:focus,
#req-btn:active,
#req-btn.active {
/*    background-color: rgba(0, 102, 74, 0.5);
    border-width: 2px;*/
    color: #fff;
    outline: 0 !important;
    outline-offset: 0  !important;
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
}

footer {
    background-color: #fafafa;
    color: #21456b ;
}

footer .container {
   /* transform:skewY(-5deg);
    transform-origin:0;*/
}

footer h4 {
    padding-bottom: 10%;
    padding-top: 35px;
    font-size: 2.2em;
    color: #21456b;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}
footer ul {
    list-style-type: none;
    padding: 0;
}

a.footer-link{
    color:#21456b ;
    font-size: 1em;
}

.footer-head {
    font-family: 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
}



@media only screen and (min-width: 768px) {
    .inline {
        display: inline-block;
        vertical-align: top;
    }
    .name-field {
        width: 50%;
    }
    .lang-select {
        width: 200px;
        font-size: 12px;
        margin-right:0;
        margin-left:0;
    }
    .search {
        margin: 0;
    }
    .navbar-default .navbar-nav > li > a {
        color: #fff;
        text-decoration: none;
        border-bottom: transparent solid 1px;
        padding-bottom: 5px;
    }
    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus, 
    .navbar-default .navbar-nav > li > a:active, 
    .navbar-default .navbar-nav > li > a.active {
        color: #fafafa;
        /*border-bottom: #fafafa solid 2px;*/
    }

}
@media only screen and (min-width: 768px) {
    .inline {
        display: inline-block;
        vertical-align: top;
    }
    .name-field {
        width: 50%;
    }
    .lang-select {
        width: 165px;
        font-size: 12px;
        margin-right:auto;
        margin-left:auto;
    }
    .search {
        margin: 0;
    }
   
}


#name_results-header {
    background-color: #fff;
    color: #e1e4e7;
    font-size: 0.80em;
    line-height: 2.4;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    /*  line-height: 35px;*/
}
#name_results-header .container {
    padding-top: 0px;
    padding-bottom: 10px;
    transform: skewY(0deg);
    transform-origin: 0;
}
#search-bar {
    background-color: #eff4f6;
}
#search-results {
    background-color: #fff;
    /*background-image: url("../img/hp/ns_nr_pic3.jpg");*/
    padding-top: 3%;
    margin-bottom: auto;
    min-height: 60vh;
}
.snail-btn {
    position: relative;
    width: 65px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.snail-btn-checkbox {
    display: none;
}
.snail-btn-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(44, 62, 80, 1);
    border-radius: 20px;
}
.snail-btn-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}
.snail-btn-inner:before,
.snail-btn-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 24px;
    padding: 0;
    line-height: 24px;
    font-size: 12px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.snail-btn-inner:before {
    content: "On";
    padding-left: 10px;
    background-color: #617487;
    color: #FFFFFF;
}
.snail-btn-inner:after {
    content: "Off";
    padding-right: 10px;
    background-color: #F2F2F2;
    color: #999999;
    text-align: right;
}
.snail-btn-switch {
    display: block;
    width: 37px;
    margin: -6.5px;
    background: rgba(44, 62, 80, 1);
    border: 2px solid rgba(44, 62, 80, 1);
    border-radius: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 37px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}
.snail-btn-checkbox:checked + .snail-btn-label .snail-btn-inner {
    margin-left: 0;
}
.snail-btn-checkbox:checked + .snail-btn-label .snail-btn-switch {
    right: 0px;
}
#snail_icon {
    padding-top: 2px;
    padding-left: 4px;
}
.paper-tile h5,
.paper-tile-multi h5 {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    padding-bottom: 12px;
    text-transform: lowercase;
    font-size: 1.76em;
    color: #808080;
}
.audio-btn {
    border-color: #03a678;
    background-color: #03a678;
}
.audio-btn:hover,
.audio-btn:focus,
.audio-btn:active,
.audio-btn.active {
    border-color: #00664A;
    background-color: #00664A;
}


.subheading {
    padding-bottom: 8%;
    color: #21456b;
    font-size: 1.2em;
    font-family: 'Alegreya Sans', Arial, sans-serif;
}

footer .footer-above {
    /*padding: 10px 0;*/
    background-color:#fafafa ;
 /*   transform: skewY(5deg);
    transform-origin: 0;*/
    padding-bottom: 0;
}

footer .footer-below {
    padding: 10px 0;
    /*background-color: rgba(35, 49, 64, 1);*/
    width: 100%;
    height: 100%;
    background-color:#fafafa;
}
.footer-below h4 {
    text-transform: capitalize;
    font-family: 'Alegreya Sans', sans-serif;
    margin-top: 5px;
    margin-bottom: 5px;
}
.btn-social {
    width: 40px;
    height: 40px;
    font-size: 15px;
    line-height: 38px;
}
.alert-success {
  /*  background-color: blue;*/
    border-color: transparent;
}

#footer-res {
    width: 100%;
    position: static;
    left: 0;
    bottom: 0;
}
#modal-req-btn {
    width: 100%;
    margin-bottom:40px;
}


#modal-submit-btn,
#pay-now-btn{
    width: 100%;
}

#modal-req-btn,
#modal-submit-btn,
#pay-now-btn{
    border-color: transparent;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
}
#modal-req-btn:hover,
#modal-req-btn:focus,
#modal-req-btn:active,
#modal-req-btn.active,
#pay-now-btn:hover,
#pay-now-btn:focus,
#pay-now-btn:active,
#pay-now-btn.active,
#modal-submit-btn:hover,
#modal-submit-btn:focus,
#modal-submit-btn:active,
#modal-submit-btn.active {
    background-color: #049372;
}
#modal-ok-btn {
    border-color: transparent;
    background-color: #16A085;
}
#modal-ok-btn:hover,
#modal-ok-btn:focus,
#modal-ok-btn:active,
#modal-ok-btn.active {
    background-color: #049372;
}
a#modal-ok-btn {
    text-decoration: none;
}

#pay-now-btn {
    margin-top: 20px;
    margin-bottom: 40px;
}

#modalCheckb {
    line-height: 1.43;
    font-size: 0.8em;
    padding-left: 33px;
}
#ns-res-label {
    margin-top: 24%;
    vertical-align: center;
    line-height: 2.5;
    font-size: 1.9em;
    color: #21456b;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    text-align:center;
}

.card-box{
    background: #fff;
    padding-top: 140px;
    border-radius: 10px;
    height: 550px;
    width: 290px;
    box-shadow: 6px 6px 3px #f7f7f7; 
    position:relative;
    border: 1px solid #f0f0f0;
    margin-right: auto;
    margin-left: auto;
}
#mobile .container{
    background:url('../img/hp/ns_mobile_pic.png') top center no-repeat;
    width: 100%;
    /* whatever width you want */
    display: inline-block;
    position: relative;
    background-size: contain;
    margin: 0 auto;
}

#mobile .container:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
  display: block;
  content: '';
}

.mobile-content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  margin-top: 10%;

}

#mobile h2{
  color: #fff;
}

#mobile .smallText {
    color: #fff;
    padding-bottom: 0;
}



@media only screen and (max-width: 767px) {
    header .intro-text .name {
        font-size: 1.8em;
        width: 100%;
        margin-right:auto;
        margin-left:auto;
        text-align: center;
    }
    header .container {
        padding-top: 80px;
        padding-bottom: 0px;
    }
    #apiContainer {
        padding-bottom: 0px !important;
    }
    #ns_search_btn,
    #ns_search-res_btn {
        width: 100%;
        margin-top: 20px;
    }
    #ns_contact_btn {
        margin-top: 20px;
        margin-bottom: 80px;
    }
    #name,
    #name-res {
        font-size: 1.1em;
        margin-top: 0px;
        padding-left: 6px;
    }
    select#language,
    select#language-res {
        font-size: 1.1em;
        margin-top: 10px;
    }
    #press {
        padding: 30px;
    }
    ul#ns_nav_head {
        border-color: transparent;
        background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    }

    .lang-select {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .card-box {
        margin-bottom: 30px;
    }
     .footer-head {
        display:none;
    }

    footer h4 {
        text-align: center;
    }

    .footer-subhead {
        text-align: center;
        font-size: 1.1em;
    }

    .mobile-absent {
        display: none;
    }

    .mobile-center {
        text-align:center;
    }
}
@media only screen and (max-width: 499px) {
    .paper-tile,
    .paper-tile-multi {
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 35px;
        padding-bottom: 50px;

    }
    

    section h2,
    footer h4 {
        font-size: 1.7em;
    }

    footer h4 {
        text-align: center;
    }

   
    .subheading {
        font-size: 1.0em;
    }

    
    #mobile .container {
        background-image:none
    }

    #mobile h2{
        color: #21456b;
        padding: 10px;
    }

    #mobile .smallText {
        color: #21456b;
        padding: 10px;
    }

 
}
#paper-wrap {
    overflow: hidden;
}
.paper-tile-multi {
   /* padding-left: 30px;
    padding-right: 30px;*/
    display: inline-block;
    margin-top: 15px;
    margin-left: 4%;
    margin-bottom: 2%;
}
.paper-tile-content {
    position: absolute;
}
@media only screen and (max-width: 480px) {
    /* Smartphone view: 1 tile */
    
    .paper-tile-multi {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }
}
@media only screen and (max-width: 650px) and (min-width: 481px) {
    /* Tablet view: 2 tiles */
    
    .paper-tile-multi {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }
}
@media only screen and (max-width: 1050px) and (min-width: 651px) {
    .paper-tile-multi {
        width: 40%;
    }
}


/*Change bootstrap tooltip color*/

.tooltip.top .tooltip-inner {
    background-color: rgba(35, 49, 64, 1);
}
.tooltip.top .tooltip-arrow {
    border-top-color: rgba(35, 49, 64, 1);
}


.three-quarters-loader:not(:required) {
    -moz-animation: three-quarters-loader 1250ms infinite linear;
    -webkit-animation: three-quarters-loader 1250ms infinite linear;
    animation: three-quarters-loader 1250ms infinite linear;
    border: 3px solid #fff;
    border-right-color: transparent;
    border-radius: 10px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: none;
}
.search_wrapper div {
    float: left;
    clear: none;
}
.pageHeadTitle {
    padding-top: 80px;
    padding-bottom: 10px;
    font-size: 2.5em;
    font-family: "Montserrat", Arial, sans-serif;
    line-height: 1.5;
}
.secTitleStyle {
    font-family: "Montserrat", Arial, sans-serif;
    padding-bottom: 10px;
}

.simpleTextStyle {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.1em;
    line-height: 1.8;
}

.thick {
    font-weight: bold;
}

.gen-text-style {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1em;
    line-height: 1.8;
    font-size: 16px;
    opacity: 0.9;
}
#code-text-style {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.90em;
    line-height: 1.8;
}
.simpleSectStyle {
    padding: 15px 0;
}
#lastSect {
    padding-bottom: 60px;
}
#paraHeader {
    display: block;
    font-size: 1.2em;
    margin-bottom: 0.2em;
}
#other_info {
    margin-bottom: 2%;
}
/*Styling with MailChimp SignUpform*/

#mc_embed_signup {
    clear: left;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    /*width: 35%;*/
    margin-top: -60px;
}
#mc_embed_signup form,
#mc_embed_signup_scroll {
    padding: 10px 3% 10px 3%;
}
#mc_embed_signup label {
    font-weight: 300;
    text-align: center;
    color: #21456b;
}
#mc_embed_signup input.email,
#mc_embed_signup input.button {
    width: 100%;
    min-width: 90px;
    color: #21456b;
}

#mc_embed_signup input.button {
     background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
     background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
     background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    color: #fff;
}
#mc_embed_signup .button:hover {
    background-color: #03A678;
    color: #fff;
}
#mc_embed_signup input:focus,
#mc_embed_signup select:focus,
#mc_embed_signup button:focus {
    outline: none;
}
#mc_embed_signup input:focus,
#mc_embed_signup select:focus,
#mc_embed_signup button:focus {
    border: 1px solid #00b16a;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#mc_embed_signup .button {
    background-color: #e8e8e8;
    color: #2c3e50;
    font-weight: bolder;
    font-family: 'Montserrat', sans-serif;
}
#mc_embed_signup input.email {
    font-family: 'Alegreya Sans', sans-serif;
}
#mc_embed_signup input.email::-webkit-input-placeholder {
    font-family: 'Alegreya Sans', sans-serif;
    color: #2c3e50;
    color: rgba(44, 62, 80, 0.80);
}
#mc_embed_signup input.email:-moz-placeholder {
    /* Firefox 18- */
    
    font-family: 'Alegreya Sans', sans-serif;
    color: #2c3e50;
    color: rgba(44, 62, 80, 0.80);
}
#mc_embed_signup input.email::-moz-placeholder {
    /* Firefox 19+ */
    
    font-family: 'Alegreya Sans', sans-serif;
    color: #2c3e50;
    color: rgba(44, 62, 80, 0.80);
}
#mc_embed_signup input.email:-ms-input-placeholder {
    font-family: 'Alegreya Sans', sans-serif;
    color: #2c3e50;
    color: rgba(44, 62, 80, 0.80);
}
.footer-link {
    font-size: 0.9em;
}
.footer-simple-color {
    color: #fff;
}
.terms-style {
    font-size: 0.85em;
    color: grey;
}
.terms-style > a {
   /*text-decoration: underline;*/
    color: #18bc9c;
}
.form-title-style {
    text-align: center;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    color: #fff;
    font-size: 1em;
    width: 100%;
    padding-top: 20px;
    margin-right:0;
    margin-left:0;
    margin-bottom: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.style-form-text {
    font-size: 1em;
    color: #617487;
}
.style-form-text > a {
    color: #009F98;
}
.style-form-text >a:hover,
.style-form-text >a:focus {
    color: #839DB9;
    /* text-decoration: underline;*/
}
#sign-up-text {
    margin-top: 6%;
    padding-bottom: 30px;   
}
#forgot-pass-text {
    margin-top: 1%;
}

#account-sign-up {
    margin-top: 3%;
}
#style-dev-dashboard {
    margin-top: 15%;
}
#dev_sign_in_btn,
#dev_reset_btn,
#user_reset_btn,
#user_sign_in_btn,
#user_sign_up_btn,
#validate_btn{
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    color: #fff;
    /*border-radius: 12px;*/
    width: 100%;
    text-transform: uppercase;
    /*border-color:none;*/
    border-color:transparent;
    margin-top: 20px;
    margin-bottom: 30px;
}

#ns-user-signup-btn {
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    color: #fff;
    /*border-radius: 12px;*/
    width: 60%;
    text-transform: uppercase;
    /*border-color:none;*/
    border-color:transparent;
    margin-top: 20px;
    margin-bottom: 30px;
}


#dev_regenerate_btn {
    border-color: #dfe8f1;
    background-color: #fafafa;
    border-radius: 4px;
    color: #2c3e50;
}

#footer-simple {
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    background-color: transparent;
}

#dev_show_key,
#dev_copy_clipboard,
#refer_copy_clipboard {
    background-color: #fafafa;
    border-color: rgba(236, 240, 241, 0.93);
    color: #7b8a8b;
    padding: 5px 12px;
    outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    margin-left: 4px;
}

#dev_show_key:hover,
#dev_copy_clipboard:hover,
#refer_copy_clipboard:hover {
    background-color: #fafafa;
    color:#2c3e50;

}

#apiContainer {
    padding-bottom: 120px;
    transform:skewY(0deg);
    transform-origin:0;
}

.gradient {
     background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
     background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
     background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */

}



#nslogo{
    height: 70px;
    padding-top: 3%;
}

/*Icons*/
.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto 100% !important;
  background-image: url("../img/sprite.svg");
}


.icon-google-play-badge {
  width: 83px;
  height: 32px;
  background-position: 0 0;
}
.icon-say {
  width: 40px;
  height: 32px;
  background-position: -128px 0;
}
.icon-hear {
  width: 40px;
  height: 32px;
  background-position: -192px 0;
}
.icon-search {
  width: 38px;
  height: 32px;
  background-position: -256px 0;
}
.icon-mail {
  width: 48px;
  height: 32px;
  background-position: -320px 0;
}
.icon-listen {
  width: 32px;
  height: 32px;
  background-position: -384px 0;
}
.icon-name {
  width: 32px;
  height: 32px;
  background-position: -448px 0;
}
.icon-language {
  width: 32px;
  height: 32px;
  background-position: -512px 0;
}
.icon-nslogo-solid {
  width: 190px;
  height: 32px;
  background-position: -576px 0;
}
.icon-instagram {
  width: 32px;
  height: 32px;
  background-position: -832px 0;
}
.icon-linkedin {
  width: 32px;
  height: 32px;
  background-position: -896px 0;
}
.icon-twitter {
  width: 39px;
  height: 32px;
  background-position: -960px 0;
}
.icon-facebook {
  width: 18px;
  height: 32px;
  background-position: -1024px 0;
}
.icon-google {
  width: 32px;
  height: 32px;
  background-position: -1088px 0;
}
.icon-audio-off {
  width: 32px;
  height: 32px;
  background-position: -1152px 0;
}
.icon-snail-off {
  width: 32px;
  height: 32px;
  background-position: -1216px 0;
}
.icon-audio-on {
  width: 32px;
  height: 32px;
  background-position: -1280px 0;
}
.icon-snail-on {
  width: 32px;
  height: 32px;
  background-position: -1344px 0;
}
.icon-female-solid {
  width: 30px;
  height: 32px;
  background-position: -1408px 0;
}
.icon-male-solid {
  width: 30px;
  height: 32px;
  background-position: -1472px 0;
}
.icon-female-outline {
  width: 30px;
  height: 32px;
  background-position: -1536px 0;
}
.icon-male-outline {
  width: 30px;
  height: 32px;
  background-position: -1600px 0;
}
.icon-app-store {
  width: 108px;
  height: 32px;
  background-position: -1664px 0;
}


.feature-size {
    transform: scale(2.8);
    margin-top: 30px;
}

.app-logo-size {
    transform: scale(1.8);
}

.google-logo-size {
    transform: scale(2.7);
}

.style-cartoon-icon {
    transform: scale(7.0);
    padding-top: : 30px;
    padding-bottom: : 5%;
    margin-top: : 30px;
    margin-bottom: : 12;
}

.scale-logo{
    transform: scale(3);
    transform-origin: : 0;
}

.social-resize{
    transform: scale(0.7);
}

#features h2 {
    padding-bottom: 2.8%;
}

#media h2 {
    padding-bottom: 2%;
}



.cartoon-title {
    padding-top: 80px;
    padding-bottom: 20px;
    font-family: 'Monserrat',Arial, sans-serif;
    font-size: 1.5em;
    color:#21456b;
}

.cartoon-text-style {
    font-size: 1em;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


 .card-num-style {
    font-size: 1.6em;
    font-family: 'Monserrat',Arial, sans-serif;
    overflow: auto;
    position: absolute;
    bottom: 20px;
    width: 100%;
    margin-right:auto;
    margin-left: auto;

}

.media-img {
    height: auto;
    width: auto;
    max-height: 452px;
    max-width: 300px;
}

.media-text {
    font-family: 'Alegreya Sans',sans-serif;
    font-style: italic;
    font-size: 1.22em;
    color: #2c3e50;
    padding-top: 2%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#press h2 {
    padding-bottom: 1%;
}



#ns_head_custom .container {
    padding-bottom: 12%;
}

.gender-scale {
    transform: scale(0.5);
    margin-bottom: -8px;
}




#ns_search-res_btn {
    border-radius: 8px;
    border-color: rgba(8,184,177,0.8);
    border-width: 2px;
    color: rgba(8,184,177,0.8);
}

.paper-name {
    padding-top: 27px;
}

.snail-style {
    margin-right: 9px;
}

.paper-border {
    margin-bottom: 27px;
    background:transparent;
    border-bottom:1px solid rgba(186, 49, 97,0.75);
    width: 25%;
    margin-left: auto;
    margin-right: auto;
}

.format-error-box {
    border-radius: 15px;
    background: rgba(255,255,255, 0.7);
    border-color: #f0f0f0;
    font-size: 1.26em;
    -webkit-box-shadow: 2px 4px 6px 1px #D3D3D3;
       -moz-box-shadow: 2px 4px 6px 1px #D3D3D3;
            box-shadow: 2px 4px 6px 1px #D3D3D3;
}

.style-sign-in-box {
    margin-top: 30%;
    border-radius: 10px;
    background: rgba(255,255,255, 0.7);
    -webkit-box-shadow: 2px 4px 6px 1px #D3D3D3;
       -moz-box-shadow: 2px 4px 6px 1px #D3D3D3;
            box-shadow: 2px 4px 6px 1px #D3D3D3;
}

.style-payment-box {
    margin-top: 30%;
    border-radius: 10px;
    background: rgba(44, 62, 103, 0.02);
    -webkit-box-shadow: 2px 4px 6px 1px #D3D3D3;
       -moz-box-shadow: 2px 4px 6px 1px #D3D3D3;
            box-shadow: 2px 4px 6px 1px #D3D3D3;
}

.style-sign-in-content {
    width: 80%;
    margin-right:auto;
    margin-left:auto;
}

.sign-in-title,
.user-sign-in-title {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom:20px;
    font-size: 0.85em;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;


}

.user-sign-in-title {
    width: 100%;
    text-align: center;
}

#modal-ok-btn {
    color: #fff;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
}

#ns-sign-in-logo {
    height: 50px;
    width: 100%;
}

#nsLogo-text {
    height: 70px;
    padding-top: 10px;
}

.db-header {
    font-family: "Alegreya sans", sans-serif;
    font-size: 1.28em;
    padding-bottom: 10px;
    color: #2c3e50;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
}

.modify-width {
    width: 500px;
}

.lang-select {
    margin-right: 2%;
    margin-left: 2%;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
    color: #f0f0f0;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: rgba(255,255,255,0.4);
}

.app-icon-style {
    margin-top:5%;
}

#title-style{
    padding-top: 14px;
}

.subtitle-style {
    font-size: 1.25em;
}

.grey-line {
    width:60%; 
    text-align:center; 
    border-bottom: 1px solid #d3d3d3; 
    line-height:0.1em; 
    margin-left:auto;
    margin-right: auto;
}

.grey-line span { 
  background:#fff; 
  padding:0 10px; 
  color: #56799c;
}



.abcRioButton {
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow 0 2px 4px 0px rgba(0, 0, 0, .25);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    -webkit-user-select: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    color: #262626;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: auto
}

.abcRioButton:hover {
    -webkit-box-shadow: 0 0 3px 3px rgba(66, 133, 244, .3);
    box-shadow: 0 0 3px 3px rgba(66, 133, 244, .3)
}

.abcRioButtonBlue {
    background-color: #4285f4;
    border: none;
    color: #fff
}

.abcRioButtonBlue:hover {
    background-color: #4285f4
}

.abcRioButtonBlue:active {
    background-color: #3367d6
}

.abcRioButtonLightBlue {
    background-color: #fff;
    color: #757575
}

.abcRioButtonLightBlue:active {
    background-color: #eee;
    color: #6d6d6d
}

.abcRioButtonIcon {
    float: left;
    padding: 8px;
}

.abcRioButtonBlue .abcRioButtonIcon {
    background-color: #fff;
    -webkit-border-radius: 1px;
    border-radius: 1px;
}

.abcRioButtonSvg {
    display: block
}

.abcRioButtonContents {
    font-family: Roboto, arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .21px;
    margin-left: 6px;
    margin-right: 6px;
    vertical-align: top
}

.abcRioButtonContentWrapper {
    height: 100%;
    width: 100%
}

.abcRioButtonBlue .abcRioButtonContentWrapper {
    border: 1px solid transparent
}

.abcRioButtonErrorWrapper,
.abcRioButtonWorkingWrapper {
    display: none;
    height: 100%;
    width: 100%
}

.abcRioButtonErrorIcon,
.abcRioButtonWorkingIcon {
    margin-left: auto;
    margin-right: auto
}

.abcRioButtonErrorState,
.abcRioButtonWorkingState {
    border: 1px solid #d5d5d5;
    border: 1px solid rgba(0, 0, 0, .17);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    color: #262626
}

.abcRioButtonErrorState:hover,
.abcRioButtonWorkingState:hover {
    border: 1px solid #aaa;
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1)
}

.abcRioButtonErrorState:active,
.abcRioButtonWorkingState:active {
    border: 1px solid #aaa;
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-box-shadow: inset 0 1px 0 #ddd;
    box-shadow: inset 0 1px 0 #ddd;
    color: #262626
}

.abcRioButtonWorkingState,
.abcRioButtonWorkingState:hover {
    background-color: #f5f5f5
}

.abcRioButtonWorkingState:active {
    background-color: #e5e5e5
}

.abcRioButtonErrorState,
.abcRioButtonErrorState:hover {
    background-color: #fff
}

.abcRioButtonErrorState:active {
    background-color: #e5e5e5
}

.abcRioButtonWorkingState .abcRioButtonWorkingWrapper,
.abcRioButtonErrorState .abcRioButtonErrorWrapper {
    display: block
}

.abcRioButtonErrorState .abcRioButtonContentWrapper,
.abcRioButtonWorkingState .abcRioButtonContentWrapper,
.abcRioButtonErrorState .abcRioButtonWorkingWrapper {
    display: none
}

.-webkit-keyframes abcRioButtonWorkingIconPathSpinKeyframes {
    0% {
        -webkit-transform: rotate(0)
    }
}

.abcRioButtonContents {
    font-size:13px;
    line-height:34px;
    color: #757575;
}


#ns-g-sign-in {
    height:36px;
    width:180px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    margin-bottom: 20px;
}

/*Stripe Integrations*/

.StripeElement {
  background-color: white;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #dce4ec;
  box-shadow: 0 1px 1px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.billing {
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 1.08em;
}

#payment-form input:focus,
#payment-form select:focus,
#payment-form button:focus {
    outline: none;
}

.add-padding-end {
    margin-top: 40px;
    text-align: center;
}

.end-text-style {
    font-size: 1.2em;
    text-align: center;
}

.add-bg-color {
  font-size: 1.6rem;
  font-family: "Alegreya Sans", sans-serif;
  line-height: 1.42857143;
  color: #fff;
  background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
}


.style-upgrade-box {
    color: #21456b;
}

.style-upgrade-box h2, h3 {
    text-transform: none;
    font-family: "Montserrat", sans-serif;

}

.style-upgrade-box h2{
    font-size: 1.35em;
    padding-top: 45px;
}

.style-upgrade-box h3{
    font-size: 1.05em;
}

.style-upgrade-box {
    margin-top: 30%;
    margin-bottom: 18%;
    border-radius: 10px;
    background: rgba(255,255,255, 1);
    -webkit-box-shadow: 2px 4px 6px 1px #D3D3D3;
    -moz-box-shadow: 2px 4px 6px 1px #D3D3D3;
    box-shadow: 2px 4px 6px 1px #D3D3D3;
}

#settings-box-style {
    margin-bottom: 0;
}


.plan-choice label {
    font-size: 16px;
    width: 100%;
    font-family: "Roboto", sans-serif;
}


.ns-green, .ns-green:hover, .ns-green:focus, .ns-green:active {
    color: rgba(17,145,168,1);
    text-decoration: none;
}

.grey {
    font-size: 0.94em;
    font-family: 'Montserrat', sans-serif;
    margin-top: 0.5em;
    margin-bottom: 1em;
    /*line-height: 1.6em;*/
    text-rendering: optimizeLegibility;
    color:#737373;
}

.radio, .checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}


.light-grey {
    color:#b8b8b8;

}

.bill-cycle-style {
    font-size: 1.15em;
}

#current-price {
    float: right;
    font-size: 1.6em;
}

#current-plan {
    font-size: 1.15em;
    color: rgba(17,145,168,1);
    font-family: 'Roboto', sans-serif;
}

.change-plan {
    text-decoration: underline;
    color: #737373;

}


#current-selection {
    background-color: rgba(255,255,255,0.96);
    z-index: 101;
    border-bottom: 1px solid #eee;
    padding: 20px;
}

#footer-validate {
    background-color: transparent;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #7b8a8b;
  background-color: #E3EBF3;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #7b8a8b;
  text-decoration: none;
  outline: 0;
  background-color: #E3EBF3;
}

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: #fff;

}

#password-style {
    margin-top: 4px;
    font-size: .97em;
}

#btn-yes {
    background-color: rgba(17,145,168,0.6);

}

#btn-no {
    background-color: rgba(17,145,168,1);
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  width: 60px;
  background-color: #f2f2f2;
  color: rgba(255,255,255,1);
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 3px 10px;
}


.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.switch-field input:checked + label {
  background-color: rgba(17,145,168,0.85);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}


.dropdown-menu > li > a {
    padding: 8px 30px;
    font-family: 'Alegreya Sans', sans-serif;
    text-transform: lowercase;
    text-transform: capitalize;
    border: 0;
    border-top: 1px solid #eee;
}

.dropdown-menu .used-names-bar {
    background-color: #ddd;
    height: 5px;
    margin: 10px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 95%;
}

li .progress {
    margin: 25px 25px 10px 25px;
    height: 5px;
    width: 80%;
}


.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    border-radius:4px;
    border-color: transparent;
}

.dropdown.open .dropdown-menu {
    max-height: 400px;
    opacity: 1;
    min-width: 270px;
    padding-bottom: 0;

}

.progress-bar {
    background-color: rgba(17,145,168,0.90);
}

#request-title,
#current-calls ,
#usage-title{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75em;
    margin-bottom: 8px;
    text-transform: capitalize;
}

#request-title {
    margin-left: 25px;
}

#current-calls {
    margin-right: 25px;
}

#usage-title{
   margin-left: 25px;
   margin-right: 25px;
   font-size: 0.75em;
   text-transform: capitalize;
   margin-bottom: 10px;
}

#user-plan-title{
   padding:0;
   padding-top: 10px;
   padding-bottom: 8px;
   margin-left: 25px;
   border-top: none;
   font-weight: 900;
}

.icon-style {
    margin-right: 10px;
    margin-left: -10px;
}


#user-plan-title:hover,
#user-plan-title:focus{
    background-color: transparent; 
}

.caret {
    margin-left: 6px;
    vertical-align: middle;
    border-top: 6px solid;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}



.nsloader {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid rgba(17,145,168,0.90);
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#dev_dashboard_body {
    background-color: #fafafa;
}

.api-key-block {
    background-color: #F5FFFD;
    padding: 4px 6px;
    border-radius: 2px;
    display:inline-block;
}

.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

.code-bg-color {
    background-color: #F5FFFD;
    color: #2c3e50;
}

/* Only for dev dashboard page*/
div.tooltip-inner{
  max-width: none;
  white-space: nowrap;
}

#coupon-code {
    margin-top: 8px;
    color:rgba(17,145,168,1);
}

#coupon-code:hover,
#coupon-code:focus {
    margin-top: 8px;
    color:rgba(57,207,182,1);
}
 
#coupon-section {
    display: none;
}

#api-key-value {
    display: none;
}

.btn-link {
    color:rgba(17,145,168,1);
}

.btn-link:hover,
.btn-link:focus {
    color:rgba(57,207,182,1);
    text-decoration: none;
    outline: 0 !important
}

#coupon-error {
    color: #fa755a;
}

.cross-out {
    text-decoration: line-through;
}

#reduced-price {
    float: right;
    font-size: 1.6em;
    color: #fa755a;
    margin-left: 5px;
}

.lower-alpha {
    list-style-type: lower-alpha;
}

.lower-roman {
    list-style-type: lower-roman;
}

#terms-checkbox {
    line-height: 1.43;
    font-size: 0.8em;
    padding-left: 33px;
}

.red-tooltip + .tooltip > .tooltip-inner {
    background-color: #E08283;
}

.red-tooltip + .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #E08283 !important;
}  

#refer-header,
#school-header {
    background-color: #fff;
    color:#21456B;
    font-size: 1.68em;
    line-height: 2.4;
    font-family: 'Montserrat', sans-serif;
}

#refer-header .container {
    transform: none;
    background-image: url('../img/hp/ns_bg_refer.svg');
    padding-bottom: 450px;
    background-size: 358px 250px;
    background-position: center;
    background-repeat: no-repeat;
    min-height:300px;
}

.refer-subtitle {
    padding-bottom: 8%;
    color: #21456b;
    font-size: 0.55em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.2;
}


#refer-sign-in {
    margin-top: -15%;
    background-color: #fafafa;
}

#invite-ref {
    margin-top: -15%;
     background-color: #fafafa;
}
.ns-refer-title {
    font-size: 1.34em;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 2%;
}

.inline-layout {
    display: inline;
}

#login input,
#login .form-control {
    display: inline;
    width: 25%;
    border-width: 1px;
    margin-bottom: 12px;
}

#login-btn, #invite-btn {
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    color: #fff;
    text-transform: uppercase;
    border-color:transparent;
    width: 195px;
    text-shadow: none;
    border: 0px;
    margin-right: -15px;
}

#invite-btn {
    margin-right: 0px;
}


.multiple_emails-container { 
    border:1px solid #dce4ec; 
    border-radius: 4px; 
    /*box-shadow: inset 0 1px 1px rgba(0,0,0,.075); */
    padding:0; margin: 0; cursor:text; width:100%; 
    background-color: #FFFFFF;
}

.multiple_emails-container input { 
    width:100%; 
    border:0; 
    outline: none; 
    padding: 5px 13px; 
}

.multiple_emails-container input{
    border: 0 !important;
}

.multiple_emails-container input.multiple_emails-error {    
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red !important; 
    outline: thin auto red !important; 
}

.multiple_emails-container ul { 
    list-style-type:none; 
    padding-left: 0; 
}

.multiple_emails-email { 
    margin: 3px 5px 3px 5px; 
    padding: 3px 5px 3px 5px; 
    border:1px #BBD8FB solid;   
    border-radius: 3px; 
    background: #F3F7FD; 
}

.multiple_emails-close { 
    float:left; 
    margin:0 3px;
}

ul.dropdown-menu-list { list-style: none }

#invite-link {
    display: inline;
}

.linkedin-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto 100% !important;
  background-image: url("../img/rounded-icons/linkedin-round.svg");
  margin-right: 20px;
}

.linkedin-icon:hover {
  background-image: url("../img/rounded-icons/linkedin-round-hover.svg");
}

.fb-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto 100% !important;
  background-image: url("../img/rounded-icons/fb-round.svg");
  margin-right: 20px;
}

.fb-icon:hover {
  background-image: url("../img/rounded-icons/fb-round-hover.svg");
}


.twitter-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto 100% !important;
  background-image: url("../img/rounded-icons/twitter-round.svg");
  margin-right: 20px;
}

.twitter-icon:hover {
  background-image: url("../img/rounded-icons/twitter-round-hover.svg");
}


.email-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto 100% !important;
  background-image: url("../img/rounded-icons/email-round.svg");
  margin-right: 20px;
}

.email-icon:hover {
  background-image: url("../img/rounded-icons/email-round-hover.svg");
}

.back-color {
    background-color: red;
}

.color2 {
    background-color: blue;
}

#refer-link-style {
    background-color: #F5FFFD;
    padding: 4px 6px;
    border-radius: 6px;
    color: #42586E;
    border: 1px dotted #cccccc;
    margin-bottom: 0em;
    font-size: 1.15em;
    display: inline-block;
}

#user-refer-sign-up {
    text-transform: capitalize;
    font-size: 0.9em;
}

.add-margin {
    margin-top: 40px;
    margin-bottom: 100px;
}

#unlock-link {
    font-size: 0.97em;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#upgrade-subtext {
    font-size: 0.8em;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: -10px;
    margin-bottom: 30px;
    color: #707070;

}

#upgrade-header,
#upgrade-subheader {
    color: #365A80;
}
#upgrade-header {
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 1px;
    margin-top: 30px;
    font-size: 1.35em;
}

#upgrade-subheader {
    font-size: 1.1em;
    margin-bottom:40px;
}

.upgrade-btn-style {
    font-family: Montserrat;
    padding: 10px 40px;
    border-width: 0px;
}

#school-header .container {
    transform: none;
    background-image: url('../img/hp/ns_bg_school.svg');
    padding-bottom: 450px;
    background-size: 358px 250px;
    background-position: center;
    background-repeat: no-repeat;
    min-height:300px;
}

#ns-buy-school-plan-btn {
    width:100%;
    border-color: transparent;
    background-color: rgba(17,145,168,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(17,145,168,1) , rgba(57,207,182,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(17,145,168,1), rgba(57,207,182,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(17,145,168,1) , rgba(57,207,182,1)); /* Standard syntax */
    outline: 0 !important;
    outline-offset: 0  !important;
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
    margin-top:30px;
    margin-bottom:60px;
}

#ns-buy-school-plan-btn:hover {
     background-color: #049372;
}

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
}

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}


@media only screen and (max-width: 600px) {
    .modal-dialog {
        vertical-align: top;
        width: 300px;
    }
}