:root {
    --red-grad: linear-gradient(0deg, rgba(180,9,55,1) 0%, rgba(218,37,42,1) 50%, rgba(240,15,93,1) 100%);
    --orange-grad: linear-gradient(0deg, rgba(255,41,26,1) 0%, rgba(255,100,20,1) 80%, rgba(255,150,34,1) 100%);
    --blue-grad: linear-gradient(0deg, rgba(10,80,122,1) 0%, rgba(11,32,55,1) 100%);
    --purple-grad: linear-gradient(0deg, rgba(87,26,184,1) 0%, rgba(166,40,206,1) 60%, rgba(240,77,179,1) 100%);
    --cyan-grad: linear-gradient(0deg, rgba(25,113,232,1) 0%, rgba(35,190,226,1) 80%, rgba(27,224,201,1) 100%);
    --green-grad: linear-gradient(0deg, rgba(12,94,96,1) 0%, rgba(12,132,118,1) 60%, rgba(63,209,91,1) 100%);
    --navy: #0B2037;
    --grey: #E6EEF4;
    --red: #DA252A;
    --green: #3FD15B;
    --cyan: #25C2F4;
    --purple: #F14EB3;
    --orange:  #FFB336;
    --aus-green: #012F33;
    --dark-green: #012124;
    --yellow: #FDD13C;
    --space: 3rem;
    --radius: 1em;
    --btn-radius: 5em;
  }

.grid2{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
    gap: 3rem;
    width: 100%;
}

.grid3{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    gap: 3rem calc(var(--space) / 3);
    width: 100%;
}

.grid4{
    display: grid;
    grid-template-columns: repeat(4 , minmax(250px, 1fr) );
    gap: 3rem calc(var(--space) / 3);
    width: 100%;
}

body .outerWrap .topBar,
body .outerWrap #menu,
body .outerWrap footer,
body .outerWrap .supportLink,
body .contact.socialContainer,
body .outerWrap #banner,
body #mobileTopMenu,
body .InstaBlogBtn{
    display: none !important;
}

body .outerWrap {
    font-size: 18px;
    color: var(--navy);
    font-weight: 300;
    overflow-x:hidden;
}

header, 
#section9,
#footerTop{
    display: none;
}


body h1, 
body h2, 
body h3{
    text-align: left;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--navy);
    margin: 0 0 .2em;
    line-height: 1em;
}

body h2{
    font-size: 2rem;
}

main section .textSection{
    padding: 4rem 0;
}

main  #section2 .textSection{
    padding: 0rem 0 var(--space);
}

main  #section1 .textSection{
    padding: 0 0 var(--space);
}

#subBanner .container{
    max-width: 1200px;
}

section{
    padding: 0;
}

.container{
    max-width: 1200px;
}

#section2 h2,
#section3 h3,
#section4 h3,
#section5 h3{
    font-size: 50px;
    text-align: center;
    margin-bottom: .5em;
    padding-top: 0;
}

#section3 h4,
#section4 h4,
#section5 h4{
    font-size: 1em;
    text-align: center;
    margin-bottom: var(--space);
}

.landing-banner{
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    transition: all .3s ease;
    padding: 1em 0;
}

.landing-banner:before{
    content:'';
    display: block;
    background: var(--navy);
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    height: 100px;
    left: 0%;
    opacity: 0;
    transition: all .2s ease;
}

.landing-banner a{
    color: white;
}

.landing-banner .container{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    padding: 10px 0;
}

body.scroll-up .landing-banner{
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 1000;
}

body.scroll-up .landing-banner:before{
    content:'';
    background: var(--navy);
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    height: 100px;
    left: 0%;
     opacity: 1;
}

.landing-banner .landing-logo-wrap{
    width: 20%;
}

.landing-banner .landing-contact{
    display: flex;
    align-items: center;
    line-height: normal;
    margin: 0;
    padding: 0;
}

.landing-banner .banner-enquire{
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    background: var(--red-grad);
    padding: .5em 1.3em;
    border-radius: var(--btn-radius);
    line-height: normal;
    margin-left: 1em;
    text-transform: uppercase;
    font-size: .9em;
    font-weight: 700;
    box-shadow: 1px 1px 10px transparent;
    transition: all .3s ease;
}

.landing-banner .banner-enquire:hover{
    color:white;
    box-shadow: 1px 1px 10px var(--red);
}

.landing-banner .banner-enquire:before{
    content:'';
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .5em;
    transform: translateX(0px);
    transition: all .3s ease;
    width: 18px;
    height: 18px;
    background: url(https://www.havealook.com.au/files/envelope.svg) no-repeat center center / contain;
    
}

.landing-banner .banner-enquire:hover:before{
    transform: translateX(-5px);
}

.landing-banner .banner-enquire:after{
    display: none;
}

.landing-banner .phone-number{
    font-size: 1em;
}

main{
  padding-top: 0;
}

body #subBanner{
    padding-top: 30px;
    background: var(--blue-grad)!important;
}

#subBanner .sub-wrap{
    gap: 2em;
    align-items: center;
    padding: 2rem 0 0;
    position: relative;
}

#subBanner .sub-wrap .left{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

#subBanner .sub-wrap .right{
    display: flex;
    transform: translateY(20px);
    position: relative;
}

#subBanner .sub-wrap .right:before{
    content:'';
    background: none;
    width: 130%;
    height: 120%;
    position: absolute;
    top: -80px;
    left: -70px;
    z-index: -1;
}


#subBanner .sub-wrap.australia .right:before{
    display: none;
}

#subBanner .sub-wrap.starter .right:before{
    background: url(thumbnaillarge/Landing-Sub-starter-gfx.png) no-repeat top center / contain;
}
#subBanner .sub-wrap.economy .right:before{
    background: url(thumbnaillarge/Landing-Sub-economy-gfx.png) no-repeat top center / contain;
}
#subBanner .sub-wrap.premium .right:before{
    background: url(thumbnaillarge/Landing-Sub-premium-gfx.png) no-repeat top center / contain;
}
#subBanner .sub-wrap.works .right:before{
    background: url(thumbnaillarge/Landing-Sub-works-gfx.png) no-repeat top center / contain;
}



#subBanner .sub-wrap .right img{
    width: 100%;
    height: auto;
    max-width: 540px;
    margin: auto;
}

#subBanner .sub-wrap.australia .right{
    transform: translateY(0px);
}

#subBanner .sub-wrap.australia .right img{
    max-width: 600px;
}


#subBanner .sub-wrap h1{
    font-size: 3.2em;
    color: var(--yellow);
}

#subBanner .sub-wrap h1 span{
    display: block;
    color: var(--orange);
}

#subBanner .sub-wrap.starter h1 span{color: var(--orange);}
#subBanner .sub-wrap.economy h1 span{color: var(--purple);}
#subBanner .sub-wrap.premium h1 span{color: var(--cyan);}
#subBanner .sub-wrap.works h1 span{color: var(--green);}

#subBanner .sub-wrap h2{
    background: none;
    padding: 0;
    margin: 0em 0;
    font-weight: 700;
    font-size: 2.5em;
    margin: .5em 0;
    color: white;
   
}

#subBanner .sub-wrap.works h1{
     color: var(--green);
}

#subBanner .sub-wrap p{
    padding: 0;
    margin: 1em 0;
    text-align: left;
    font-size: 1.2em;
}

#subBanner .sub-wrap a{
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: flex-start;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--red-grad);
    color: white;
    padding: .9em 2em;
    border-radius: var(--btn-radius);
    margin: 0;
    transition: all .3s ease;
    box-shadow: 1px 1px 10px 3px transparent;
}

#subBanner .sub-wrap a:hover{
    box-shadow: 1px 1px 10px 3px var(--red);
}

#subBanner .sub-wrap a:after{
    display: none;
}

#subBanner .sub-wrap a:before{
    content:'';
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .5em;
    transform: translateX(0px);
    transition: all .3s ease;
    width: 24px;
    height: 24px;
    background: url(https://www.havealook.com.au/files/cta-icon.svg) no-repeat center center / contain;
}

#subBanner .sub-wrap a:hover:before{
    transform: translateX(2px);
}




/* KEY FEATURES */
.keys-wrap {
    padding: var(--space) 0 5rem;
}

.keys-wrap .key{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em;
    text-align: center;
}

.keys-wrap .key .key-icon{
    display: block;
    width: 100px;
    height: auto;
    margin: 0 auto .5em;
}

.keys-wrap .key .key-heading{
    display: block;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.keys-wrap .key .key-text{
    line-height: 1.2em;
    font-size: 1.1rem;
    margin-top: .5em;
}



/* SECTION 1 - PACKAGE FEATURES*/
#section1 .textSection::before{
    display: none;
}

#section1 .siteContent .left p{
    max-width: 80%;
}

#section1 .siteContent .package-features{
    background: var(--grey);
    border-radius: var(--radius);
    padding: 2em 3em;
}

#section1 .siteContent .left div:last-child{
    margin-top: 2em;
}

#section1 .siteContent .package-features h2{
    margin: 0 0 .5em;
}

#section1 .siteContent .package-features ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#section1 .siteContent .package-features ul li{
    margin: 0;
    padding: 0 0 .2em;
    font-weight: 400;
    color: var(--navy);
}

#section1 .siteContent .package-features ul li:before{
    content:'\f00c';
    margin-right: .8em;
    font-family: 'fontAwesome';
    color: #37AE62;
}

#section1 .siteContent .package-price-wrap{
    display: block;
    border-radius: var(--radius);
    background: var(--navy);
    color: white;
    text-align: center;
    padding: 2rem;
    grid-column: 1 / -1;
    text-align: center;
}

#section1 .siteContent .package-price-wrap h2{
    color: white;
    margin-bottom: .1em;
    font-size: 3em;
    text-align: center;
    color: white;
}

#section1 .siteContent .package-price-wrap p{
    text-align: center;
}

/* BIG FEATURES BOX */
#section1 .siteContent .big-features .right{
    grid-column: 1/-1;
}

#section1 .siteContent .big-features .right .package-features ul{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
    gap: 0 var(--space);
}

#section1 .siteContent .big-features .left{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
    gap: var(--space);
    grid-column: 1/-1;
}

#section1 .siteContent .big-features .left p{
    max-width: none;
}

#section1 .siteContent .big-features .left div:last-child{
    margin-top: 0em;
}


.website-packages{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(400px, 1fr));
    gap: calc(var(--space) / 3);
    margin: var(--space) 0;
}

.website-packages .package{
    position: relative;
    background: var(--grey);
    padding: 2em 2em 1em;
    border-radius: var(--radius);
    overflow: hidden;
}

.website-packages .package:before{
    content: '';
    width: 45%;
    height: 8px;
    background: var(--red);
    position: absolute;
    top: 0;
    left: 0;
    
}

.website-packages .package .package-price{
    display: flex;
    flex-direction: column;
    font-size: 3rem;
    font-weight: 900;
    color: var(--red);
    margin: .5em 0 0;
    text-align: right;
}

.website-packages .package .package-price:before{
    content:'Package Price';
    color: var(--navy);
    font-size: .9rem;
    text-transform: uppercase;
    margin-bottom: .2em;
}

.website-packages .package .package-price:after{
    content:'INCLUDES GST & HOSTING';
    color: #444;
    font-size: .7rem;
    font-weight: 500;
    margin-top: .9em;
}


/* SECTION 2 - ENQUIRY  */
#packageEnquiry{
    background: var(--grey);
    padding: 4em 5em 2em;
    border-radius: var(--radius);
}

#packageEnquiry h2{
    text-align: center;
    margin-bottom: 1em;
}

#packageEnquiry .enqRow {
  width: 100%;
  margin: 10px auto 10px;
}

#packageEnquiry .enqRow:before{
    display: none;
}

#packageEnquiry .rowLabel {
  display: block;
  position: relative;
  padding: 0;
  line-height: 1.1em;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0;
  transition: 0.3s;
  cursor: pointer;
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1em;
  padding: 5px 5px 10px;
  margin: 0;
}

#packageEnquiry .enqRow .privacy{
    color: var(--navy);
    font-size: 1rem;
}

#packageEnquiry input,
#packageEnquiry textarea{
  border: 1px solid rgba(255,255,255,.2);
  background: #fff;
  color: #333;
  border-radius: calc(var(--radius) / 2) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: 0.3s ease-out;
  width: 100%;
  outline: 0px solid rgba(255,255,255,.4);
  padding: 15px;
  line-height: normal;
  font-size: 16px;
  border: 0 solid red;
  font-family: inherit;
}

#packageEnquiry textarea {
    min-height: 100px;
}

#packageEnquiry .states input[type="radio"] ~ label.radioButton {
  border: 1px solid rgba(255,255,255,.2);
  background: white;
  color: var(--navy);
  transition: 0.3s ease-out;
}

#packageEnquiry .states input {
  opacity: 0;
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  padding: 0;
    cursor: pointer;
}

#packageEnquiry .states label {
  display: block;
  position: relative;
  font-size: 1.3rem;
  font-weight: 500;
  text-align: center;
  padding: 15px;
  border-radius: calc(var(--radius) / 2);
  line-height: 1.1em;
  box-sizing: border-box;
  margin: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

#packageEnquiry input[type="radio"] ~ label.radioButton:hover {
  border: 1px solid #114d8e;
  background: #fff;
}

#packageEnquiry .states input:checked ~ label.radioButton {
  transform: translatey(0px);
  border: 1px solid transparent;
  color: #fff;
  background: var(--blue-grad);
  background: var(--navy);
  border: 1px solid var(--navy);
}

#packageEnquiry .states .grid{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 90px, 1fr) );
  gap: .5em;
}

#packageEnquiry .primary-btn{
    background: var(--red-grad);
    border-radius: var(--btn-radius);
    width: 100%;
    padding: .8em 1em;
    margin: calc(var(--space) / 3) auto;
    border: 0px solid var(--red);
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    box-shadow: 1px 1px 10px transparent;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    text-transform: uppercase;
}

#packageEnquiry .primary-btn:hover{
    box-shadow: 1px 1px 10px var(--green);
}



/* SECTION 3 - WEB EXAMPLES */
#section3{
    background: var(--navy);
    color: white;
    padding: 0;
}
#section3 h3{
    margin: 0 0 .5em;
    padding: 0;
}

#section3 h3,
#section3 h4{
    color: white;
    text-align: center;
}

#section3 h3{
    color: white;
}


#section3 .web-example-wrap .web-example{
    background: var(--navy);
    display: flex;
    height: auto;
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
}

#section3 .web-example-wrap .web-example img{
    width: 100%;
}



/* SECTION 4 - PACKAGE STEPS */
.packageSteps {
    width: 100%;
    margin: 6em auto 1em;
}

.packageSteps .step {
    display: inline-block;
    width: 100%;
    background: var(--grey);
    padding: 5em 2em 2em;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    line-height: 1.6em;
    border-radius: var(--radius);
}

.packageSteps .step .card-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: -30px;
    width: 60px;
    height: 60px;
    top: -30px;
    text-align: center;
    fill: white;
}

.packageSteps .step .card-icon:before{
    content: '';
    background: var(--navy);
    color: white;
    padding: 0em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: -1;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    top: -20px;
    text-align: center;
}

.packageSteps .step .step-heading {
    font-weight: 700;
    color: var(--navy);
    font-size: 2rem;
    text-transform: uppercase;
    margin: 0 0 .2em;
    display: block;
}

.packageSteps .step .step-sub {
    font-weight: 600;
    color: var(--navy);
    font-size: 1.5rem;
    margin: 0 0 .7em;
    display: block;
}



/* SECTION 5 - OTHER PACKAGES */
#section5{
    background: var(--grey);
}

.web-package-wrap .package{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background: var(--navy);
    padding: 2rem 1rem;
    border-radius: var(--radius);
    color: white;
    text-align: center;
}

.web-package-wrap .package p{
    font-size: 1rem;
    line-height: 1.6em;

}

.web-package-wrap .package .package-heading,
.web-package-wrap .package .package-price{
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: .4em;
    line-height: .8em;
    color: var(--purple);
}

.web-package-wrap .package .package-price{
    margin: .3em 0 0;
    font-size: 2rem;
}

.web-package-wrap .package:nth-child(2) .package-heading,
.web-package-wrap .package:nth-child(2) .package-price{
     color: var(--cyan);
}
.web-package-wrap .package:nth-child(3) .package-heading,
.web-package-wrap .package:nth-child(3) .package-price{
     color: var(--orange);
}

.web-package-wrap .package .package-icons{
    padding: 2em;
    fill: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space);
    position: relative;
    z-index: 2;
}

.web-package-wrap .package .package-icons:before{
    content:'';
    display: inline-block;
    position: absolute;
    background: red;
    background: var(--cyan-grad);
    width: 220px;
    height:220px;
    border-radius: 50%;
    z-index: -1;
}
    
.web-package-wrap .package.branding .package-icons:before{
    background: var(--green-grad);
    background: var(--orange-grad);
 }

.web-package-wrap .package.logo-design .package-icons:before{
    background: var(--purple-grad);
 }

.web-package-wrap .package .sub-price{
    font-weight: 700;
    margin-top: 1.5em;
}

.web-package-wrap .package .package-image{
    width: 100%;
    object-fit: contain;
}

.web-package-wrap .package .package-sub{
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1em;
}

.web-package-wrap .package a{
    background: var(--red-grad);
    border-radius: var(--btn-radius);
    border: none;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: .8em 1em;
    cursor: pointer;
    box-shadow: 1px 1px 10px transparent;
    transition: all .3s ease;
}

.web-package-wrap .package a:hover{
    box-shadow: 1px 1px 10px var(--red);
}

.web-package-wrap .package.starter a{
    background: var(--orange-grad);
}

.web-package-wrap .package.starter a:hover{
    box-shadow: 1px 1px 10px var(--orange);
}

.web-package-wrap .package.economy a{
    background: var(--purple-grad);
}

.web-package-wrap .package.economy a:hover{
    box-shadow: 1px 1px 10px var(--purple);
}

.web-package-wrap .package.premium a{
    background: var(--cyan-grad);
}

.web-package-wrap .package.premium a:hover{
    box-shadow: 1px 1px 10px var(--cyan);
}

.web-package-wrap .package.works a{
    background: var(--green-grad);
}

.web-package-wrap .package.works a:hover{
    box-shadow: 1px 1px 10px var(--green);
}


.web-package-wrap .package.branding .package-price{
    font-size: .85rem;
    line-height: 1.7em;
    margin-top: 1em;
}

.web-package-wrap .package.branding .package-price p{
    font-size: 1rem;
}


/* SECTION 6 - FOOTER */
#section6{
    background: var(--dark-green);
}

#section6 .siteContent{
    max-width: 300px;
    color: white;
}

#section6 .siteContent .footer-copyright{
    text-align: center;
    margin: 1em auto;
    font-size: 1rem;
}

#section6 .siteContent .footer-copyright:before{
    content:'\f1f9';
    font-family: 'fontAwesome';
    margin-right: .5em;
}




.siteBottom #section1 .priceInfoSection h4 {
    text-align: left;
}

.block-packages-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    grid-template-rows: auto;
    gap: 2em;
    margin-bottom: 2em;
    margin-top: var(--space);
}
.block-packages-wrap .block-packages {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2em 1em 1em;
    border: 1px solid #A7B6BF;
    position: relative;
    width: 100%;
    border-radius: 0 var(--radius) var(--radius) var(--radius);
}
.block-packages-wrap .block-packages h3 {
    position: absolute;
    top: -20px;
    left: -1px;
    display: block;
    background: white;
    padding: 5px 10px 5px 22px;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
}
.block-packages-wrap .block-packages h3:before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-left: 10px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    top: 10px;
    left: -1px;
}

.block-packages-wrap .block-packages .block-pacakges-blurb {
    width: 100%;
    margin-bottom: .5em;
    line-height: 1.6em;
}
.block-packages-wrap .block-packages .block-packages-checkmarks ul {
    position: relative;
    margin: 0;
    padding: 0;
	line-height: 1em;
}
.block-packages-wrap .block-packages .block-packages-checkmarks ul li {
    list-style-type: none;
    margin: 0 0 .8em;
    padding: 0;
    padding-left: 25px;
}
.block-packages-wrap .block-packages .block-packages-checkmarks ul li:before {
    color: #1DAE62;
    position: absolute;
    left: 0px;
}
.block-packages-wrap .block-packages .block-packages-left {
    width: 40%;
}
.block-packages.premium .block-packages-thumb, .block-packages.works .block-packages-thumb {
  transform: scale(1.6) translate(-10px, 20px);
  margin: 0 1em 0;
}

.block-packages-wrap .block-packages .block-packages-thumb {
    padding: .5em .3em;
}
.block-packages-wrap .block-packages .block-packages-thumb img{
    width: 100%;
    display: block;
  max-width: 100%;
  height: auto !important;
}

.block-packages-wrap .block-packages-checkmarks {
    width: 55%;
    padding-top: .5em;
    padding-left: 1em;
}
.block-packages-wrap .block-packages-checkmarks strong {
    display: block;
    width: 80%;
    padding-bottom: 10px;
}
.block-packages-wrap .block-packages .block-packages-price {
    color: #1DAE62;
    font-size: 3em;
    font-weight: 900;
    line-height: 1em;
    letter-spacing: -1px;
}
.block-packages-wrap .block-packages .block-packages-price-wrap h4 {
    color: black;
    text-transform: uppercase;
    font-weight: 500;
  font-size: .85em;
  line-height: 1.1em;
  margin: 0;
}
.block-packages-wrap .block-packages .block-packages-price-wrap h5 {
    text-transform: uppercase;
    line-height: 1.1em;
    font-size: .7em;
    font-weight: 500;
}
/* -- Standard Block Styling --*/
.block-packages-wrap .block-packages.standard {
    grid-column: 1/-1;
}
.block-packages-wrap .block-packages.standard .block-pacakges-blurb {
    width: 45%;
    line-height: 2em;
}
.block-packages-wrap .block-packages.standard .block-packages-checkmarks {
    display: flex;
    justify-content: space-between;
    width: 52%;
}
.block-packages-wrap .block-packages.standard .block-packages-checkmarks ul {
    width: 49%;
    line-height: 1em;
}
.block-packages-wrap .block-packages.standard .block-packages-checkmarks ul li {
    margin: 0 0 1em;
}
.block-packages-wrap .block-packages.starter h3, .block-packages-wrap .block-packages.starter h3:before, .block-packages-wrap .block-packages.starter .block-packages-price {
    color: #F05A22;
    border-left-color: #F05A22;
}
.block-packages-wrap .block-packages.economy h3, .block-packages-wrap .block-packages.economy h3:before, .block-packages-wrap .block-packages.economy .block-packages-price {
    color: #AF1F6B;
    border-left-color: #AF1F6B;
}
.block-packages-wrap .block-packages.premium h3, .block-packages-wrap .block-packages.premium h3:before, .block-packages-wrap .block-packages.premium .block-packages-price {
    color: #1E6380;
    border-left-color: #1E6380;
}
.block-packages-wrap .block-packages.works h3, .block-packages-wrap .block-packages.works h3:before, .block-packages-wrap .block-packages.works .block-packages-price {
    color: #0E8C4A;
    border-left-color: #0E8C4A;
}
.block-packages.premium .block-packages-thumb, .block-packages.works .block-packages-thumb {
    transform: scale(1.6) translate(-10px, 20px);
    margin: 0 1em 0;
}
.block-packages.premium .block-packages-price-wrap, .block-packages.works .block-packages-price-wrap {
    padding-top: 4em;
}
.block-packages.premium:before {
    content: 'Most Popular';
    font-size: .9em;
    text-transform: uppercase;
    display: block;
    background: #ee1b28;
    color: white;
    position: absolute;
    top: -10px;
    right: -10px;
    padding: .2em .7em;
}
.block-packages.premium:after {
    content: '';
    font-size: .9em;
    display: block;
    background: transparent;
    color: white;
    position: absolute;
    top: 10px;
    right: -10px;
    border-top: 10px solid #b1111b;
    border-right: 10px solid transparent;
}


#footerBottom{
    background: var(--navy);
}


/* MOBILE AND MEDIA QUERIES */
@media all and (max-width:700px){
   
    body .outerWrap{padding-top: 0 !important;}
    .grid3{grid-template-columns: 1fr; padding: 1rem;}
    .grid2{grid-template-columns: 1fr; padding: 1rem;}
    
    .landing-banner .container{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    .landing-banner .landing-contact{
        width: 100%;
        justify-content: center;
        font-size: .85em;
    }
    body.shrink .landing-banner:before{
        height: 140px;
    }
    .landing-banner .landing-logo-wrap{
        width: 100%;
        max-width: 200px;
        margin: 1em auto 0;
    }
    #subBanner .sub-wrap .left{
        padding: 0;
        width: 100%;
        align-items: center;
        padding-bottom: 2em;
    }
    #subBanner .sub-wrap .left h1{
        text-align: center;
        font-size: 3rem;
    }
    #subBanner .sub-wrap .left a{
        margin: auto;
    }

    #subBanner .sub-wrap .right{display: none;}
    
    #packageEnquiry{
        padding: 3rem 1rem;
    }
    #packageEnquiry .grid2{
        padding: 0;
        gap: 0;
    }
    #subBanner .sub-wrap h2{font-size: 1.8em; margin-top: .2em;}
    #section1 .siteContent .left p{max-width: none;}
    #section1 .siteContent .package-features{padding: 2em 1em}
    #section1 .siteContent .package-price-wrap h2{font-size:1.8em}
    #section2 h2, #section3 h3, #section4 h3, #section5 h3{font-size: 36px;}
    #section3 h4, #section4 h4, #section5 h4{padding: 0 20px}
    #section6 .siteContent{max-width: 220px}
    #subBanner .sub-wrap p{text-align: center;}
    #section1 .siteContent .package-price-wrap{border-radius: 0;}
    #packageEnquiry{border-radius: 0;}
    
}

@media (min-width:701px) and (max-width:1121px){
    #subBanner .sub-wrap .left{
        font-size: .8em;
        padding-bottom: 20px;
    }
    .outerWrap .container{padding: 0 20px;}
}

@media (min-width:701px) and (max-width:890px){
    #subBanner .sub-wrap .left{
        padding: 0;
        width: 100%;
        align-items: center;
        padding-bottom: 2em;
    }
    #subBanner .sub-wrap .left h1{
        text-align: center;
        font-size: 3rem;
    }
    #subBanner .sub-wrap .left a{
        margin: auto;
    }
    #packageEnquiry{
        padding: 3rem 1rem;
    }
    #packageEnquiry .grid2{
        padding: 0;
        gap: 0;
    }
}






@media all and (max-width: 700px) {
    body.scroll-up .landing-banner{
        position: fixed;
        top: 0px;
        left: 0;
        z-index: 1000;
        padding: 1em 0;
    }
    body.scroll-up .landing-banner:before{
        content:'';
        display: block;
        background: var(--navy);
        position: absolute;
        z-index: -1;
        width: 100%;
        top: 0px;
        height: 130px;
        left: 0%;
        opacity: 1;
        transition: all .2s ease;
    }
    body #subBanner{padding-top: 0; padding-bottom: 3rem;}
    body #subBanner .container {padding: 0 0em;}
    
    #section1 .block-packages-wrap .block-packages h3{font-size:1.5em}
	.block-packages-wrap {grid-template-columns: 1fr; padding: 1em;}
	.block-packages-wrap .block-packages.standard .block-pacakges-blurb {width: 100%; line-height: 1.2em;}
	.block-packages-wrap .block-packages.standard .block-packages-checkmarks {width: 100%;flex-wrap: wrap;}
	.block-packages-wrap .block-packages.standard .block-packages-checkmarks ul {width: 100%;}
	.block-packages-wrap .block-packages .block-packages-left {width: 100%;order: 2;}
	.block-packages-wrap .block-packages-checkmarks {width: 100%;order: 1;}
	.block-packages-wrap .block-packages .block-packages-thumb{transform: scale(.8);}
	.block-packages-wrap .block-packages.premium:before{top:-13px}
	
	.block-packages.premium .block-packages-thumb, .block-packages.works .block-packages-thumb {
		transform: scale(.8) translate(0, 0);
		margin: 0;
	}
	.block-packages.premium .block-packages-price-wrap, .block-packages.works .block-packages-price-wrap {
		padding-top: 0em;
	}
	.packageSteps {
		margin: 1.8em auto 0;
	}
	.packageSteps .step {
		width: 100%;
		margin: 1em auto;
		padding: 4.5em 1em 1em;
	}
	.siteBottom h3 {
		font-size: 1em;
		text-align: center;
	}
	.packageSteps .step:before {
		top: -30px;
		margin-left: -30px;
		width: 60px;
		height: 60px;
		text-align: center;
		font-size: 1.5em;
	}
}