* {
    box-sizing: border-box;
}

body, 
    html {
    height: 100%;
    font-family: 'Baloo Tamma 2', cursive;
}

/* Text */
h1, h2, h3, h4, UL {
    color: #07205f !important;
}
h1 {
    font-size: 2.5rem;
    margin-top: 1rem;
}
h2 {
    margin-top: 2rem;
}
h3 {
    font-size: 1.5rem;
    margin-bottom: .2rem;
}
p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.lead {
    font-size: 1.4rem;
    margin-bottom: 0;
}
ul {
    color: #cae8ff;
    margin-bottom: 3rem;
    list-style: none;
}
/* Text END */

/* Header */
.header-green-bg {
    background-color:#070f39;
    border-bottom: 2px solid #fff;
}
.header-bg {
    background-color: none;
}
.brand-greendark1-bg {
    background-color:#0350cf;
}
.logo {
    background-image: url(../images/ncode-logo-web-sml.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 222px;
    height: 60px;
}
.orange-logo {
    background-image: url(../images/ncode-logo-web-sml-orange.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 222px;
    height: 60px;
}
}
.logo-banner {
    background-color: #070f39;
    border-bottom: 2px solid #d9d9d9;
    padding: 1rem 0;
}
.brand-greendark1-bg h2,
    .brand-greendark1-bg h2 a,
    .brand-greendark1-bg h3,
    .brand-greendark1-bg h3 a,
    .brand-greendark1-bg p,
    .brand-greendark1-bg p a {
    color:#ffffff;
}
.brand-white-bg h1,
    .brand-white-bg h1 a,
    .brand-white-bg h2,
    .brand-white-bg h2 a,
    .brand-white-bg h3,
    .brand-white-bg h3 a {
    color:#0350cf;
}
.brand-white-bg p,
    .brand-white-bg p a {
    color:#666666;
}
.brand-white-bg {
    padding-top: 30px;
}
.brand-grey-bg {
    background-color: #666666;
    background-image: url(cssimg/darkgrey_bg.jpg);
    background-repeat: repeat-x;
}
.brand-grey-bg h2,
    .brand-grey-bg h2 a,
    .brand-grey-bg h3,
    .brand-grey-bg h3 a {
    color:#f1fbe3;
}
.brand-grey-bg p,
    .brand-grey-bg p a {
    color:#ffffff;
}
.img-fluid {
    max-width: 80%;
}
.container-header {
    padding: 0;
}
/* Header END */

/* NavBar */
.navbar .navbar-toggler {
    color: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.1);
}
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: .25rem;
}
/*
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
*/
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(7, 32, 95, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.custom-toggler.navbar-toggler {
    border-color: rgb(7, 32, 95, 0.5);
    background-color: #ffffff;
} 
.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-image: none;
    background-size: auto;
    background-size: 100% 100%;
}
.navbar-nav .nav-item a {
    color: #07205f;
    background-color: none;
    border-radius: 5px;
    margin:0 5px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    transition: background-color 2s, box-shadow 1s, color 2s ease;
}
.navbar-nav .nav-item a {
    color: #07205f;
    background-color: none;
    border-radius: 5px;
    margin:0 5px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    transition: background-color 2s, box-shadow 1s, color 2s ease;
}
.navbar-nav .nav-item a:hover,
    .navbar-nav .nav-item a.active {
    color: #0087fa;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 2px 10px 0px;
    transition: box-shadow 1s ease;
}
.navbar-nav .nav-item a.active:hover {
    color: #0087fa;
    background-color: #ffffff;
    box-shadow: rgba(0, 135, 250, 0.5) 0px 2px 4px 0px, rgba(0, 135, 205, 0.1) 0px 2px 10px 0px;
}
.navbar-nav .nav-item a.navcontact {
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 5px 5px 5px 5px;
    background-color: #07205f;
}
.navbar-nav .nav-item a.navcontact:hover {
    color: #ffffff !important;
    text-decoration: none;
    background-color: #0087fa;
}

a.changeColour {
    text-decoration: none;
}
.changeColour {
    border-radius: 5px;
    background-color: none;
    padding: 3px 10px 5px 10px;
    display: inline-flex;
}
.changeColour:hover {
}
.changeTip {
    color: #666666 !important;
    margin: 5px 10px 0 0;
    text-decoration: none;
}
.changeToGreen,
    .changeToOrange,
    .changeToBlue {
    display:inline-block;
    border-radius: 15px;
    width: 20px !important;
    height: 20px !important;
    margin-top: 5px;
    border: none;
}
.changeToGreen {
    background-color: #077c01;
}
.changeToGreen:hover {
    background-color: #5fc96f;
}
.changeToOrange {
    background-color: #dddddd;
    border: 1px solid #ff771c
}
.changeToOrange:hover {
    background-color: #ff771c;
}
.changeToBlue {
    background-color: #dddddd;
    border: 1px solid #0254d2
}
.changeToBlue:hover {
    background-color: #0254d2;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .8rem;
    padding-left: .8rem;
    padding-bottom: 5px;
    letter-spacing: 1px;
}

.navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}
/* NavBar END */

/* Buttons */
.btn-brand-white {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    margin: 5px;
}
.btn-brand-white a {
    color:#000000 !important;
}
.btn-brand-white:hover {
    background-color: #0087fa;
    border: 1px solid #ffffff;
    color:#ffffff !important;
}
.btn-brand-white:hover a {
    color:#ffffff !important;
    text-decoration: none;
}
.btn-brand-white a:hover {
    color:#ffffff !imptant;
}

.btn-brand-blue {
    background-color: #0350cf;
    color:#ffffff;
    border: 1px solid #0350cf;
    margin: 5px;
    padding-bottom: 2px;
    transition: background-color 1s, color 1s;
}
.btn-brand-blue:hover {
    background-color: #ffffff;
    color:#000000;
}


.btn-brand-darkblue {
    background-color: #07205f;
    color:#ffffff;
    border: 1px solid #0350cf;
    margin: 5px;
    padding-bottom: 2px;
    transition: background-color 1s, color 1s;
}
.btn-brand-darkblue:hover {
    background-color: #ffffff;
    color:#000000;
}

.btn-brand-grey {
    background-color: #5f5f5f;
    color:#ffffff;
    border: 1px solid #5f5f5f;
}
.btn-brand-grey:hover {
    background-color: #ffffff;
    color:#000000;
    margin: 5px;
}
/* Buttons END */

/* Font Awesome */
.fab {
    font-size: 3rem;
    color: #ffffff;
    margin: 0 10px;
}
    


/* Carousel CSS */
.carousel-container {
    padding: 0 0;
}
.carousel-inner img {
    width: 100%;
    height: 100%;
    padding: 0 0;
}
.carousel-indicators {
    margin-bottom: 0;
}
.carousel-indicators li {
    background-color: #0087fa;
    opacity: .3;
}
.carousel-indicators li .active {
    background-color: #0350cf;
}

.carouselH4 {
    color: #c64f00 !important;
}
.indicateOrange {
    background-color: #ff771c !important;
}
.indicateOrangeLight {
    background-color: #ffb482 !important;
}

.carousel-caption p {
    margin-top: 0;
    margin-bottom: 0.1rem;
}
.carousel-caption p a {
    text-decoration: none;
    color: #000000;
}
.carousel-caption .btn-info {
    margin-top: 0;
}
.btn-info {
    text-decoration: none;
    color: #ffffff !important;
    padding: 5px 8px 2px;
    margin: 10px 5px 0 5px;
    font-weight: bold;
    background: #0087fa;
    transition: background 2s ease;
}
.btn-info:hover {
    background: #0350cf;
    transition: background 0.3s ease;
}
.btn-info-orange {
    text-decoration: none;
    color: #ffffff !important;
    padding: 5px 8px 2px;
    margin: 10px 5px 0 5px;
    font-weight: bold;
    background: #ff771c;
    border: 1px solid #ff771c;
    transition: background 2s, border 2s ease;
}
.btn-info-orange:hover {
    background: #c64f00;
    border: 1px solid #c64f00;
    transition: background 0.3s ease;
}


/* Hover Animated Button Gradient - sheen moves across on hover 
.btn-info {
    background: linear-gradient(90deg, var(--c1, #0350cf), var(--c2, #66baff) 51%, var(--c1, #0087fa)) var(--x, 0)/ 200%;
    border: none;
    color: #ffffff !important;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    margin: -2px 5px 0 5px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.5s;
}
.btn-info:hover {
 	--x: 100%; 
}
.btn-info-gradient {
    --c1: #0350cf;
    --c2: #0087fa;
}
*/

.carousel-caption h4,
    .carousel-caption p {
    color: #000000;
}

/* Alternative background slides in carousel
.slidebg1 {
    background-image: url(https://www.noahscode.com/images/carousel/slide01-abc.png);
    background-repeat: no-repeat;
}
.slidebg2 {
    background-image: url(https://www.noahscode.com/images/carousel/slide02-belmont.png);
    background-repeat: no-repeat;
}
.slidebg3 {
    background-image: url(https://www.noahscode.com/images/carousel/slide03-milton.png);
    background-repeat: no-repeat;
}
*/

/* Lightbox */
.ekko-lightbox-item {
    text-align: center;
}
.ekko-lightbox-container > div.ekko-lightbox-item {
    top: 8%;
}

/* Contain Main CSS */
.container-main {
    background: rgb(217,217,217);
    background: linear-gradient(180deg, rgba(217,217,217,1) 0%, rgba(255,255,255,1) 50%); 
    padding-bottom: 30px;
    background-repeat: no-repeat;
}
.brand-white-bg ul,
    .brand-white-bg ol {
    line-height: 2rem;
    padding-left: 10px;
}
.brand-blue-bg {
    background-color: #070f39;
    color: #ffffff;
}
.brand-blue-bg h2 {
    color: #ffffff;
}
.brand-blue-bg p {
    color: #cae8ff;
}

.brand-blue-grad-bg {
    background: rgb(2,80,207);
    background: linear-gradient(180deg, rgba(2,80,207,1) 0%, rgba(0,135,250,1) 100%); 
    border-bottom: 1px solid #ffffff;
}
.brand-blue-grad-bg h1, 
    .brand-blue-grad-bg h2, 
    .brand-blue-grad-bg h3 {
    color: #ffffff !important;
}
.brand-blue-grad-bg p {
    color: #cae8ff;
}
.orange-grad-bg {
    background: rgb(198,79,0);
    background: linear-gradient(180deg, rgba(198,79,0,1) 0%, rgba(255,119,28,1) 50%);
    border-bottom: 1px solid #ffffff;
}
.orange-grad-bg h1, 
    .orange-grad-bg h2, 
    .orange-grad-bg h3 {
    color: #ffffff !important;
}
.orange-grad-bg p {
    color: #fff2ea;
}

.grey-grad-bg {
    background: rgb(217,217,217);
    background: linear-gradient(180deg, rgba(217,217,217,1) 0%, rgba(255,255,255,1) 25%); 
}
.grey-grad-h1, 
    .grey-grad-h2, 
    .grey-grad-h3 {
    color: #07205f !important;
}
.grey-grad- p {
    color: #666666;
}
.white-bg {
    background: #ffffff; 
}
.white-bg h1, 
    .white-bg h2, 
    .white-bg h3 {
    color: #07205f !important;
}
.white-bg p {
    color: #666666;
}



.homecfabar .btn {
    background-color: #ffffff;
    color:#000000 !important;
    border: 1px solid #ffffff;
    margin:5px 0;
}
.homecfabar .btn:hover {
    background-color: #527e16;
    color:#ffffff;
}
.textblocklg-w {
    color: #ffffff;
}
.textblocklg .btn {
    margin: 5px 0;
}
.textColorOrange h2,
    .textColorOrange h3 {
    color: #c64f00 !important;
}
.textColorOrange p {
    color: #401a00 !important;
}
.textColorOrange .nav-link {
    color: #ff771c !important;
}
.textColorOrange .nav-link.active {
    color: #401a00 !important;
}

.colourChangingButton {
    background-color: #0252d0 !important;
}

.textblocksm {
    padding: 0 1.5rem;
}
.textblocksm p {
    font-size: 14px;
}
.textblocksm img {
    margin: 5px 0 10px 0;
    border-radius: 10px;
    border: 1px solid #ffffff;
}
.textblocksm img:hover {
  -webkit-filter: invert(10%); /* Safari 6.0 - 9.0 */
  filter: invert(10%);
}
.textblocksm p,
    .textblocksm p a {
        color:#ffffff;
        text-decoration: none;
}
.textblocksm h2 {
    font-size: 1.6rem;
}
.textblocksm h2:hover {
    color:#e0f5c5;
}
.textblocksm h2:hover .fa-angle-double-right {
    color:#e0f5c5;
    margin-left:2px;
}
.textblocksm p,
    .textblocksm p a,
    .textblocksm p a:hover {
    color:#ffffff;
}
.col-md-6 img {
    margin: 10px 0;
}

.textblocksm,
    .textblocksm a {
        color:#ffffff;
        text-decoration: none;
}

.txt-green,
    .txt-green a,
    .txt-green ul,
    .txt-green ul a{
    color: #5f5f5f;
    text-decoration: none;
}
.txt-green a:hover,
    .txt-green ul a:hover {
    color: #000000;
    text-decoration: underline;
}
.grid-data {
    line-height: 1.7rem;
    margin-top: 20px;
    text-align: left;
    font-size: 0.9rem;
}

.para-center p {
  text-align: center;
} 
.para-home,
    .para-home-tint {
  /* Full height is optional */
  /* height: 100%; */
        
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 1.5rem 0;
} 
.para-home {
  /* The image used */
  background-image:url(https://www.noahscode.com/images/img_parallax.jpg);
}
.para-home-tint {
  background-image:url(https://www.noahscode.com/images/img_parallax.jpg);
  -webkit-filter: opacity(70%); /* Safari 6.0 - 9.0 */
  filter: opacity(70%);
}
.para-home h1,
    .para-home .lead {
  color: #ffffff;
}

/* Nav Tabbed Content */
.nav-tabs {
    border-bottom: 1px solid #0250cf; 
}
.nav-tabs .nav-link {
    font-size: 1.2rem;
}
.tab-pane {
    padding: 30px 0;
}
.tab-pane h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
.tab-pane ul {
    line-height: 2rem;
}
.tabbed-section-title {
    margin-bottom: 20px;
}
/* Nav Tabbed Content END */

.thumb {
    margin-bottom: 30px;
}

/*
.page-top {
    margin-top:85px;
}
*/   

/* Javascript fading in & out when scrolling page */
.fadesection1a {
    padding: 5px 10px;
    border-radius: 10px;
    background: red;
    color: #f1fac0;
    -webkit-transition: background 3s, color 3s;
}
.fadesection1b {
    padding: 5px 10px;
    border-radius: 10px;
    background: #5d0000;
    color: white;
    -webkit-transition: background 1s, color 1s;
}

img.zoom {
    width: 100%;
    height: 200px;
    border-radius:5px;
    object-fit:cover;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}        
.transition {
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.modal-header {
    border-bottom: none;
}
.modal-title {
    color:#000;
}
.modal-footer{
    display:none;  
}

/* Portfolio Lightbox CSS */
.ekko-lightbox-nav-overlay a {
    color: #0350cf;
}
.folio-section {
    padding-top: 20px;
    padding-bottom: 20px;
}
.folio-section p {
    margin-top: 5px;
    margin-bottom: 0px;
}
.folio-description p {
    margin-top: 5px;
    margin-bottom: 10px;
}
/* Footer */
.footerlinks {
    font-size: 0.8rem;
}
.footerlinks a {
    color:#77c1ff !important;
    text-decoration: none;
    margin: 5px;
}
.footerlinks a:hover {
    text-decoration: underline;
}
.divider {
    color: #556bea;
}
.footer-bg {
    background-color:#070f39;
    padding-top: 10px;
}
.footer-bg ul {
    list-style:none;
}
footer .textblocksm img {
    border: none;
}
footer .textblocksm img:hover {
    -webkit-filter: none;
    filter: none;
}
.footer-address {
    text-align: center;
}
.footer-address img {
    margin: 20px 0 0 0 !important;
}
/* Footer End */

/* Dev */
.grow {
    flex: 1;
}
.main {
    overflow-y: auto;
}
/* Dev End */

/* Contact Form */
#fcf-form {
    display:block;
}
.fcf-body {
    margin: 0;
    /*
    font-family: -apple-system, Arial, sans-serif;
    */
    font-family: 'Baloo Tamma 2', cursive;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    padding: 30px;
    padding-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    max-width: 100%;
}
.fcf-form-group {
    margin-bottom: 1rem;
}
.fcf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}
.fcf-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    outline: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fcf-form-control:focus {
    border: 1px solid #313131;
}
select.fcf-form-control[size], 
    select.fcf-form-control[multiple] {
    height: auto;
}
textarea.fcf-form-control {
    font-family: -apple-system, Arial, sans-serif;
    height: auto;
}
label.fcf-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}
.fcf-credit {
    padding-top: 10px;
    font-size: 0.9rem;
    color: #545b62;
}
.fcf-credit a {
    color: #545b62;
    text-decoration: underline;
}
.fcf-credit a:hover {
    color: #0056b3;
    text-decoration: underline;
}
.fcf-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .fcf-btn {
        transition: none;
    }
}
.fcf-btn:hover {
    color: #212529;
    text-decoration: none;
}
.fcf-btn:focus, .fcf-btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


.fcf-btn-primary {
    color: #fff;
    /*
    background-color: #007bff;
    */
    background: #0087fa;
    transition: background 2s ease;
    
    border-color: #007bff;
}
.fcf-btn-primary:hover {
    color: #fff;
    /*
    background-color: #0069d9;
    */    
    background: #0350cf;
    transition: background 0.3s ease;
}
.fcf-btn-primary:focus, 
    .fcf-btn-primary.focus {
    color: #fff;
    /*
    background-color: #0069d9;
    */        
    background: #0350cf;        
    border-color: #0062cc;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.fcf-btn-lg, 
    .fcf-btn-group-lg>.fcf-btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}
.fcf-btn-block {
    display: block;
    width: 100%;
}
.fcf-btn-block+.fcf-btn-block {
    margin-top: 0.5rem;
}
input[type="submit"].fcf-btn-block, 
    input[type="reset"].fcf-btn-block, 
    input[type="button"].fcf-btn-block {
    width: 100%;
}
/* Contact Form End */