/* LIVE SITE CSS FOR HEADER CHANGES */

/* COLOUR REFERENCES
Navy blue: #202946
Secondary blue: #0A5794
Mustard: #F1CB30
Light blue: #5B9EB8
Light tint: #F2F2F2
*/

/* ==== CONTENTS ==== */
/*
Fonts
General
Global
Buttons
Layout
Header
Nav-Bar
Home

*/

/* ==== FONTS ==== */
@font-face {
    font-family: "adelle-bold";
    src: local('adelle-bold'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Bold.woff"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Bold.woff2"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Bold.otf");
    font-display: block;
    unicode-range: U+000-5FF;
}
@font-face {
    font-family: "adelle-regular";
    src: local('adelle-regular'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Regular.woff") format('woff'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Regular.woff2") format('woff2'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Regular.otf") format('otf');
    font-display: swap;
    unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
    font-family: "adelle-light";
    src: local('adelle-light'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Light.woff"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Light.woff2"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Adelle-Light.otf");
    font-display: swap;
    unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
    font-family: "gotham-book";
    src: local('gotham-book'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Gotham-Book.woff"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Gotham-Book.woff2"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Gotham-Book.otf"),;
    font-display: swap;
    unicode-range: U+000-5FF;
}
@font-face {
    font-family: "gotham-bold";
    src: local('gotham-bold'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Gotham-Bold.woff"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Gotham-Bold.woff2"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/Gotham-Bold.otf");
    font-display: swap;
    unicode-range: U+000-5FF;
}
@font-face {
    font-family: "proxima-nova-black";
    src: local('proxima-nova-black'),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/ProximaNova-Black.woff"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/ProximaNova-Black.woff2"),
        url("/wp-content/themes/positiveinternetcompany/assets/fonts/ProximaNova-Black.otf");
    font-display: swap;
    unicode-range: U+000-5FF;
}

/* end fonts */

/* ==== GENERAL ==== */

html {
    font-size: 10px;
    scroll-behavior: smooth;
    background: #ffffff;
}

body {
    margin-top: 0px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: 'adelle-light', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    font-size: 18px;
    color: #202946;
}

h1, h2, h3, h5, h6, strong, #under-development ul li{
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: 'adelle-bold', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
}

h4, header p, p.lead, #contact p, .form-control::-webkit-input-placeholder, .form-control{
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: 'adelle-regular', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
}

.btn{
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: 'gotham-bold', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
}

nav.navbar ul.navbar-nav li, .navbar-dark .navbar-brand {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: 'gotham-book', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    z-index: 200;
}

/* ==== GLOBAL ==== */
/* ==== Font styling ==== */

h1 {font-size: 5.7rem;}

h2 {font-size: 3.4rem;}

h2 {margin: 0 0 40px;}

h3{
    margin: 0 0 35px 0;
    font-size: 3rem;
    color: #0A5794;
    text-transform: lowercase;
}

h4 {font-size: 2.1rem;}

h5 {font-size: 2.2rem; margin-bottom: 10px;}

h6 {font-size: 1.6rem; margin: 0px;}

p {margin: 0 0 15px;}

p.lead {font-size: 2.7rem;}

/* ==== Additives ==== */
h3 + p {margin-top: 30px;}
#contact h6 + p {margin-top: 3px;}

/* ==== Links ==== */
a, a:hover, a:active, a:focus, a:visited {color: #0A5794;}
/* ==== Images ==== */

img {
    max-width: 100%;
    vertical-align: baseline;
}

/* ==== FORMS ==== */
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    box-shadow: inset 0 -1px 0 #ddd;
}

.form-control{border: none; color: #202946;}
.form-control::-webkit-input-placeholder {color: #202946;}
.form-control-lg {line-height: 2.5;}

/* ==== BUTTONS ==== */
.btn {
    color: #FFF;
    padding: 1rem 4.4rem;
    font-size: 1.7rem;
    min-width: 40%;
}

.btn.btn-outline {color: #202946;}

.btn-lg{ padding: 1rem 5rem;}

.btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #202946;
    border-color: #202946;
}

.btn-primary.btn-outline, .btn-primary.btn-outline:hover, .btn-primary.btn-outline:not(:disabled):not(.disabled):active {
    background-color: #FFF;
    border-color: #202946;
}

.btn-primary.btn-outline:hover{
    background-color: #202946;
    color: #FFF;
}

.grecaptcha-badge {
z-index: -999;
}

/* ==== Flags ==== */
.flag-icon {width: 2em; line-height: 1.4em; margin-left: 10px;}
.flag-icon:hover, .flag-icon.active {border: 2px solid #FFF;}

/* ==== LAYOUT ==== */
section, header {
    padding: 50px 0;
    margin: 0 0;
}

section h1, section h2 {margin: 0 0 15px 0;}


.container {
   max-width: calc(100% - 70px);
   width: 100%;
}

/* ==== NAV BAR ==== */
.logo-text {
    font-size: 2rem;
}

.navbar-brand img {
    width: 200px;
    left: 30px; /* use 55px for 768px+*/
    position: absolute;
    top: 3rem;
}

nav.navbar {
    background-color: #202946;
    padding: 20px 10px;
   /* margin: 0 40px; */
    z-index: 200;
}

ul.navbar-nav {margin-left: 5px;}

nav.navbar ul.navbar-nav li
{
    padding: 0px 7px;
    font-weight: 700;
    font-size: 1.3rem;
}

.navbar-dark .navbar-nav a, .navbar-dark .navbar-text {color: #FFF;}
.navbar-dark .navbar-brand p {margin: 0 0 0 10px; font-size: 1.8rem;}

/* .navbar-toggler:not(:disabled):not(.disabled) {
    top: 0.25rem;
} */

/* Underline nav item current and hover*/
.nav > li > a:focus, .nav > li > a:hover {box-shadow: none;}

.navbar-nav > li > a {
    padding: 0;
}

.navbar-nav > li > a {
    display: inline-block;
    padding: 10px 0;
    transition: 0.35s;
    text-decoration: none;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > .active > a {
    box-shadow: inset 0px -5px 0px #FFF;
    color: #FFF;
}
/*end underline nav items*/

/*Mobile toggle hamburger*/
.navbar-collapse {
    background-color: #202946;
    padding: 0;
    z-index: 1;
}

.navbar .navbar-toggler{border: none;}
.navbar .navbar-toggler:focus{outline: none;}

.navbar-toggler span {
    display: block;
    background-color: #FFF;
    height: 3px;
    width: 25px;
    margin-top: 4px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    left: 0;
    opacity: 1;
    border: none;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
    -webkit-transition: transform .35s ease-in-out;
    -moz-transition: transform .35s ease-in-out;
    -o-transition: transform .35s ease-in-out;
    transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    top: -12px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}

/* ==== HEADER ==== */
header {
    height: 100vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #F2F2F2;
}

header p{color: #0A5794; font-size: 2.8rem;}

/*Blocks with background image*/
.img-block {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    background-color: #0A5794;
}

section.img-block > div.container.overlay, .container.overlay {
    background: #FFF;
    padding: 45px 0;
    color: #202946;
}

section h3:after {
    content: ""; /* This is necessary for the pseudo element to work. */
    display: block; /* This will put the pseudo element on its own line. */
    width: 60px; /* Change this to whatever width you want to have before hover. */
    padding-top: 15px; /* This creates some space between the element and the border. */
    border-bottom: 8px solid #0A5794; /* This creates the border. Replace black with whatever color you want. */
}

section .text-center h3:after {margin: 0 auto;}

.container.tint {
    background-color: #F2F2F2;
    padding: 45px 0;
}

/* ==== HOME ==== */

/* ==== Our Creds ==== */
.img-block.pattern-1{
    background-image: url('../../assets/img/foliage-pattern-1.png');
}
.img-block.pattern-2{
    background-image: url('../../assets/img/foliage-pattern-2.png');
}

/* ==== Carousel ==== */
/* owl nav */
.owl-prev span, .owl-next span {
    color: #666;
}

.owl-prev span:hover,
.owl-next span:hover {
    color: #000;
}

.owl-prev, .owl-next {
    position: absolute;
    top: 0;
    height: 100%;
}

.owl-prev {
    right: 100%;
}

.owl-next {
    left: 100%;
}

.owl-carousel .owl-item img {
    position: relative;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

/* removing blue outline from buttons */
button:focus, button:active {
    outline: none;
}

/* ==== Positive Thinking ==== */
#positive-thinking .container{
    background-image: url('../../assets/img/foliage-t-l.png');
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: top left;
}


  #being-green .offset-1 {
    margin-left: 3rem;
  }



/* ==== Being Green ==== */
#being-green .container{
    background-image: url('../../assets/img/foliage-b-r.png');
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: bottom right;
}

@media (min-width: 625px) {
    .dodge-leaves p:nth-of-type(2) {
        /* keep text clear of leaves on small screens */
        margin-right: 45px;
    }
    
}

@media (min-width: 768px) {
    .dodge-leaves p:nth-of-type(2) {
        margin-right: 0;
    }
    
    .owl-carousel .owl-item img {
        width: 100%;
    }

    .navbar-brand img {
        width: 200px;
        left: 55px; /* use 30px for <768px */
        position: absolute;
        top: 3rem;
    }
}

/* ==== Social ==== */
.social .fa {font-size: 5rem; color: #0A5794;}
#sb_instagram #sbi_load .sbi_follow_btn{margin-top: 15px;}

/* ==== Contact ==== */
.contact-keyline{
    display: block;
    width: 80.5%; /* Change this to whatever width you want to have before hover. */
    padding-top: 15px; 
    border-bottom: 8px solid #0A5794;
}

#contact h5 {
    color: #0A5794;
}

#contact p {line-height: 2rem; font-size: 1.6rem;}

/* ==== Under Development ==== */
#under-development .container{
    background-image:
        url('../../assets/img/foliage-2-b-r.png'),
        url('../../assets/img/foliage-2-t-l.png');
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: bottom right, top left;
    background-color: #0A5794;
    padding: 45px 0;
    color: #FFF;
}
#under-development ul li a {color: #FFF;}
#under-development ul li {padding: 5px 0; font-size: 1.6rem;}
#under-development .fa {font-size: 1.3rem;}

#under-development .card-columns {
    column-count: 2;
    column-gap: 0;
}

/* ==== FOOTER ==== */
footer {
    background: #202946;
    color: #FFF;
    padding: 30px 0;  /* 60px 0 */
    min-height: 120px; /* was 330px */
    font-size: 1.4rem;
    margin-top: 20px;
}

footer a:link, footer a:visited {color: inherit;}

footer a:hover {
    text-decoration: underline;
}

footer h6 {
    font-size: 1.4rem;
}

/* ==== MEDIA QUERIES ==== */
@media (min-width: 320px){

}

@media (max-width: 480px) {
    #sb_instagram.sbi_col_3 #sbi_images .sbi_item {
        /* make IG imgs smaller & 2 abreast */
        width: 50%;
    }
} /* end MQ max-width: 480px */

@media (min-width: 560px){

}

@media (min-width: 768px){
    .navbar-dark .navbar-toggler {
        left: 1rem;
        position: absolute;
        top: 2rem;
    }
}
@media (min-width: 992px){
    

}
@media (min-width: 1200px){

    .container.overlay, .container.tint {
        max-width: 1185px;
        width: 100%;
    }
}

@media (min-width: 1400px){
    .container.overlay, .container.tint {
        width: 100%;
    }
}

@media (min-width: 1600px){
    .container.overlay, .container.tint {
        width: 100%;
    }
}

@media screen and (max-width:1199px){
    #under-development .container{
        background-size: 50%;
    }
    nav.navbar {
        margin: 0;
    }
    .navbar-dark .navbar-brand p {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 991px) {

    nav.navbar ul.navbar-nav li
    {
        padding: 0px 5px;
        font-size: 1.1rem;
    }
    #under-development .container{
        background-size: 60%;
    }
}

@media screen and (max-width: 767px){
    html {
        font-size: 8px;
    }
    body {
        font-size: 16px;
    }

    nav.navbar ul.navbar-nav li {
        font-size: 1.4rem;
    }

    .navbar-nav > li > a > span {
        padding: 5px 0;
        margin-bottom: 15px;
    }

    .img-fluid2 {
      max-width: 80%;
    }

    header {height: 70vh; margin-top: 69px; /*Height of nav bar*/}
    header p{font-size: 2.2rem;}

    #under-development .container{
        background-size: 70%;
    }

    #under-development .card-columns {
        column-gap: 2rem;
    }

    #under-development ul li {
        font-size: 1.3rem;
    }

    #positive-thinking .offset-2 {
      margin-left: 0;
    }

    #positive-thinking .ml-5,
    #positive-thinking .mx-5 {
      margin-left: 0 !important;
    }

    #positive-thinking .col-10,
    #being-green .col-10 {
      max-width:calc(100% - 70px);
      flex: 0 0 calc(100% - 70px);
    }

    #positive-thinking img,
    #being-green img {
        margin-bottom: 10px;
    }

    #being-green .offset-1 {
      margin-left:0 !important;
    }



    /* ==== FOOTER ==== */

    footer{
        padding: 20px 10px;
        min-height: 165px;
    }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .container {
        max-width: 720px;
        width: 100%;
    }
}

/* ====================== STATIC HEADER  ====================================== */
/* Animations removed. Contact EB for original w/ animation 
removed hero imgs from dashboard page: mobile: home hero mobile http://positive2.honeydigital.co.uk/wp-content/uploads/2020/02/home-hero-mobile.png
desktop - http://positive2.honeydigital.co.uk/wp-content/uploads/2020/01/home-hero.png
*/



/* variables */
:root{
    --fade-in-duration:200ms;

    --giraffe-scale:100%;

    --sprites-bg:/* url("https://positive-internet.com/wp-content/uploads/2020/01/home-hero.png") */;

    --sprites-width:5000;
    --sprites-height:4167;
    --sprites-aspect-ratio: calc( var(--sprites-width) / var(--sprites-height) );

    --sprites-width-small:2000;
    --sprites-height-small:1667; /* was 1667 */
    --sprites-aspect-ratio-small:calc( var(--sprites-width-small) / var(--sprites-height-small) );

    --sprite-repetitions:1;
    --sprite-speed:1;
    --sprite-direction:1;

    /* Quantity of layers */
    --sprites-layers:3;

    /* General pause before animation begins (affects all) */
    --sprites-pause:0.2s;
    --sprites-delay:0.5s;

    --sprites-duration:1.0s;

    --sprites-overlap:0.5;

    /* How much rotation to add to the sprites */
    --sprites-sway:3deg;
    --sprites-foliage-sway:1deg;

    /* Distance to cover as a percentage */
    --sprites-travel:11%;
    --sprites-destination:0;

    /* https://github.com/KingScooty/sass-easing/blob/master/_sass-easing.scss */
    --ease-in-back:cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --ease-out-back:cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --ease-in-out-back:cubic-bezier(0.68, -0.55, 0.265, 1.55);;
    --ease-out-natural:cubic-bezier(.4,0,.2,1);
    --ease-out:ease-out;
}

/* mobile style */

body > header{
    position: relative;
    background-color: #F2F2F2;

    /* controlled by pseudo element inside sprites */
    height:auto;
    width:100%;
    
    max-height:90vh;
    min-height:10vh; 
   /*  height: 100vh; to make it full screen height on mobile */
    overflow:hidden;

    /* max-width:calc(100% - 40px); */
}
/* Spacer element */
body > header::before{
    /* As we need to restrict the height by 90vh */
    --h:calc(100% / var(--sprites-aspect-ratio));
    content:'';
    width:100%;
    height:0;
    display:block;
    padding-top:calc(100% / var(--sprites-aspect-ratio));
}

header .headline{
    position: absolute;
    left:20%;
    right:20%;
    top:50%;
    transform:translateY(-50%);
    z-index:90; /* was 909 */
    text-align: center;
    margin:0;
    /* gap for the nav bar */
    margin-top: calc(74px / 2);
    user-select: none;
}

header .headline h1{
    font-size:calc( 1rem + 7vmin ); /* was 10vmin*/
}

.sprites{
    overflow:hidden;
    /* outline:1px solid purple; */

    /* Flood fill width of parent */
    width:100%;
    height:100%;

    /* position:relative; */
    position:absolute;
    top:0;
    left:0;

    /* Fake centralise it */
    transform:translateX(-50%);
    margin-left:50%;

    /* Set the vanishing point for some fancy GPU accelerated transforms 
    perspective:500px;
    */

    background:transparent var(--sprites-bg) no-repeat no-repeat center center;
    background-size: cover;

    /* This hides some of the loading sins */
    animation:Fade var(--fade-in-duration) linear 0s 1 both normal;
}

.sprites div{
    --overscan:100%;

    /* Calculated */
    --sprite-percentage:calc( var(--sprite-child) / var(--sprites-layers) );
    --sprite-duration:calc( var(--sprite-child) * var(--sprite-speed) * var(--sprites-duration));
    --sprite-delay:calc( var(--sprites-pause) + ( var(--sprite-child) * var(--sprites-delay) * var(--sprites-overlap) * var(--sprite-speed) ) );
    /* --sprite-delay:calc( var(--sprite-child) * var(--sprites-delay) * var(--sprites-overlap) * var(--sprite-speed) ); */
    
    /* Modify travel based on child */
    --sprite-travel:calc( var(--sprites-travel) * var(--sprite-percentage) );
    --sprite-destination:calc( var(--sprites-destination ));

    /* This allows the scaling of the individual sprites by percentage */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    /* outline:1px solid green; */
    
    /* Default size */
    position: absolute;
    transform-origin: center;

    width:var(--overscan);
    height:var(--overscan);

    /* animation:Foliage-Reveal var(--sprite-duration) var(--ease-out) var(--sprite-delay) var(--sprite-repetitions) both alternate;

    display: none; 
    opacity:0.5;*/
}

.sprites .left{
left:0;
    /* transform-origin: bottom left; */
}

.sprites .right{
    --sprite-direction:-1;
    right:0;
    /* transform-origin: bottom right; */
}

.sprites .la,
.sprites .lb,
.sprites .lc,
.sprites .giraffe {
    background-repeat: no-repeat;  
    background-size: cover; /* tried cover on full height but issues... check body > header height before changing  */
    background-position: left; /* necessary when bg size is cover */
}

.sprites .ra,
.sprites .rb,
.sprites .rc {
    background-repeat: no-repeat;  
    background-size: cover; /* tried cover on full height but issues... check body > header height before changing  */
    background-position: right; /* necessary when bg size is cover */
}

.sprites .la {
   /*  width: 100%;
    height: auto; */
   /* background-image: url("../../assets/img/Positive_New-Banner_Master_L1.png"); 
    background-image: url("../../assets/img/Positive_New-Banner_Master_Mobile_v2_L1.png"); */
    z-index: 3; 
}

.sprites .lb {
   /* width: 100%;
    height: 400px;  
    --overscan: 184%; */
    --sprite-child:2;
    background-image: url("../../assets/img/Positive_New-Banner_Master_L2.png");  
   /* background-image: url("../../assets/img/Positive_New-Banner_Master_Mobile_v2_L2.png"); */
    top: 0;
    left: -32%; /*  use -72% when background-size is cover & body > header is 100vh */
    z-index: 2;
}

.sprites .lc {
    background-image: url("../../assets/img/Positive_New-Banner_Master_L3.png"); 
    z-index: 1; 
    top: 2.3% ; /* or 7px or  1.3%  - 2% on mobile */
    left: -40.5%; /* or -130px */
}

/* left giraffe */
.sprites .giraffe{
   background-image:url("../../assets/img/new-giraffe.png"); 
   /*  background-image:url("../../assets/img/Positive_New-Banner_Master_Mobile_v2_Gerald.png"); */
    background-repeat: no-repeat; 
    left: -30%;
    top: -5%;
    /* We want the giraffe to appear behind the trees */
    z-index: 1;
    }

/* Right hand aligned */
.sprites .ra{
    background-image: url("../../assets/img/Positive_New-Banner_Master_R1.png");
   /* background-image: url("../../assets/img/Positive_New-Banner_Master_Mobile_v2_R1.png"); */
    right: -21%;
    top: 0;
    z-index:3;
}

.sprites .rb{
   /* background-image: url("../../assets/img/Positive_New-Banner_Master_R2.png"); */
   /*  background-image: url("../../assets/img/Positive_New-Banner_Master_Mobile_v2_R2.png"); */
   /* right: -19%;  or -70px 
    top: 0; */
    z-index:2;
}

.sprites .rc{
   /* background-image: url("../../assets/img/Positive_New-Banner_Master_R3.png"); */
  /*  right: -20.5%;  or -76px 
    top: 0; */
    z-index:1;
}

/*------------------------- 
EB start header media queries 
------------------------- */
@media only screen 
  and (min-width: 499px) /* and (orientation: landscape) */ {
    .navbar-brand img {
        width: 250px;
    }

    .sprites .la {
        background-image: url("../../assets/img/Positive_New-Banner_Master_L1.png");
        left: -14%; 
    }

    .sprites .lb {
        background-image: url("../../assets/img/Positive_New-Banner_Master_L2.png");
        left: -20%;
    }

    .sprites .lc {
        left: -30.5%; /* was -23.5% */ 
        top: 10.5px; /* was 14.5 */
    }

    .sprites .giraffe {
        left: -25%;
    }

    .sprites .ra {
        right: -15%;
    }

    .sprites .rb {
        background-image: url("../../assets/img/Positive_New-Banner_Master_R2.png"); 
        right: -20%; 
        top: 0;
        z-index:2;
    }

    .sprites .rc {
        background-image: url("../../assets/img/Positive_New-Banner_Master_R3.png");
        right: -18%; 
        top: 0;
        z-index:1;
    }
    
} /* end MQ */

@media screen and (min-width: 568px) { /* was 600px */
    .sprites .ra {
        right: -12%; /* was 11% */
    }

    .sprites .giraffe {
        left: -20%;
    }
} /* end MQ */

@media screen and (min-width: 738px) {
    .sprites .ra {
        right: -10%;
    }

    .sprites .rb {
        right: -25%;
    }

    .sprites .rc {
        right: -20%;
    }
}

@media screen and (min-width: 900px) {
    .sprites .la {
        left: -5%; 
    }

    .sprites .lb {
        left: -10%; 
    }

    .sprites .lc {
        left: -10%; 
    }

    .sprites .giraffe {
        left: -10%;
        top: -2%;
    }

    .sprites .ra {
        right: -5%;
    }

    .sprites .rb {
        right: -15%;
    }

    .sprites .rc {
        right: -10%;
    }
}