/* CSS Varibles*/
:root{
    --primary:rgba(221, 221, 221, 0.548);
    --dark:#333;
    --light:#fff;
    --shadow: 0 1px 5px rgba(92,56,32,0.9);
    --brandbrown:rgb(92, 56, 32);
    --brandcream:rgb(244, 237, 221);
}
/*   *=Reset defult html settings   */
*{
    margin:0;
    padding: 0;
    box-shadow: 0 0 black;
}
/*  MR & MR Hair and Beauty */
html{
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--dark)
}

body{
    background: var(--brandcream);
    line-height: 1.4;
}


/*LANDING PAGE   START*/
#LandingPage{
    background-image: url('../Images/Haiup.jpg');
    height: 100vh;
    /* Make Image fit entire window= background-size; cover:*/
    background-size: cover;
    background-position: center;
    /* Using Flex-box to change layout of text*/
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*  text-align: center;  = To Make sure it stays aligned when veiwing though small screens*/
    text-align: center;
    padding: 0 1.25rem;
}
/* To make sure landing page always fits browser window we have to use the vh css unit (vh stands for View Port HEIGHT can also be used vw for WIDTH ).
Veiw port is the body of the browser. "100 slices" in a page*/
#LandingPage h1{
    margin-top:-8.125rem;
    margin-bottom: 0.06rem;
    font-size: 3.75rem;
    color: var(--brandcream);
}
#LandingPage p{
    margin-top:6.25rem;
    font-size: 2.18rem;
    color: rgb(92, 56, 32);
}
#LandingPage .button{
    font-size: 18px;
    text-decoration: none;
    color:rgb(244, 237, 221);
    border:rgb(244, 237, 221) 1px solid;
    padding: 0.625rem 1.25rem;
    border-radius: 0.625rem;
    margin-top:11.25rem;
}
#LandingPage .button:hover{
    background-color: rgb(92, 56, 32);
    color:rgb(244, 237, 221); 
}

/*-----END OF LANDING PAGE------*/


/*GLOBAL*/
.logo{
    display:grid;
    grid-gap:0;
    background-repeat: no-repeat;
    padding-top:5px;
    padding-left:2px;
}
.logo2{
    background-repeat: no-repeat;
    left:0;
    top:0;
    margin-top: -10px;
}
.fix-me{
    position:fixed;
    top:10px;
    right: 12px;
    background: transparent;
    color:var(--brandbrown);
    font-size:25px;
    text-decoration: none;
}
.Landing-fix-me{
    position:fixed;
    top:10px;
    right: 8px;
    background: transparent;
    color:var(--brandcream);
    font-size:25px;
    text-decoration: none;
}
.btn{
    background: var(--brandbrown);
    color: var(--light);
    padding:0.6rem 1.3rem;
    text-decoration: none;
    border:0;
    margin-top:20px;
}

img{
    max-width: 100%;
}
.wrapper{
    display:grid;
    grid-gap:20px;
}
/*  GLOBAL   END */


/*     MODAL    */

.modal{
    position: fixed;
    z-index: 1;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color:rgba(92, 56, 32, 0.3);
    text-align: center;
}
.modal-content{
    background-color: var(--brandcream);
    margin:20% auto;
    padding:20px;
    width:70%;
    box-shadow: var(--shadow);
    animation-name: modalopen;
    animation-duration:1s;
}
.modal-header{
    color: var(--brandbrown);
    text-align: center;
}
.closeBtn{
    color: var(--brandbrown);
    float: right;
    font-size: 30px;
    margin-top: -20px;
    margin-left: 10px;
}
.closeBtn:hover,.closeBtn:focus{ 
    color: var(--shadow);
    text-decoration: none;
    cursor: pointer;
}
@keyframes modalopen{
    from{ opacity:0}
    to{opacity: 1;}
}

/*   NAV BARS   */
.Landing-nav{
text-align: center;
align-items: center;
}
.Landing-nav .current a{
    background-color: var(--brandbrown);
    color: var(--brandcream)
}
.Landing-nav ul{
    display:grid;
    grid-gap: 0;
    list-style:none;
    grid-template-columns: repeat(3,1fr);
    margin-top:-120px;
    align-content: center;
}
.Landing-nav a{
    background:transparent;
    display:inline;
    text-decoration: none;
    padding:0.8rem;
    text-align: center;
    color: var(--light);
    text-transform: uppercase;
    font-size: 3rem;
}
.Landing-nav a:hover{
    background: transparent;
    color: var(--brandbrown);
}
/*-----END OF LANDING NAV------*/



/*  MAIN NAV */
.main-nav{
    text-align: center;
    align-items: center;
    padding:5px 200px;
    margin-top:-10px;
}
.main-nav .current a{
    background-color: var(--brandbrown);
    color: var(--brandcream)
}
.main-nav ul{
    display:grid;
    grid-gap: 5px 100px;
    padding:0;
    list-style:none;
    grid-template-columns: repeat(3,1fr);
    padding:20px 0px 0px 0px;
    align-content: center;
}
.main-nav a{
    background: var(--primary);
    display:block;
    text-decoration: none;
    padding:0.8rem;
    text-align: center;
    color: var(--dark);
    text-transform: uppercase;
    font-size: 1.1rem;
    box-shadow:var(--shadow);
}
.Font a{
    box-shadow: var(--brandcream);
    background:var(--brandcream);
    padding:0 0;

}
.Font:hover,.Font:focus{
    color: var(--shadow);
    text-decoration: none;
    cursor: pointer;

}

/*-----END OF  MAIN NAV------*/



/*   SUB Nav   */
.sub-nav{
   padding: 0px 0px 15px 0px;
}
.sub-nav .current a{
    background-color: transparent;
    color: var(--brandbrown);
}
.sub-nav ul{
    display:grid;
    grid-gap: 5px;
    padding:0;
    list-style:none;
    grid-template-columns: repeat(6,1fr);
}
.sub-nav a{
    background: var(--brandcream);
    display:block;
    text-decoration: none;
    padding:0.1rem;
    text-align: center;
    color: var(--dark);
    text-transform: uppercase;
    font-size: 0.9rem;
}
.sub-nav a:hover{
    color: var(--brandbrown);
}
/*   END OF SUB NAV  */


/* Sub-nav2 (Beauty) */
.sub-nav2{
    padding: 0px 0px 15px 0px;
}
.sub-nav2 .current a{
    background-color: var(--brandcream);
    color: var(--brandbrown);   
}
.sub-nav2 ul{
    display:grid;
    grid-gap: 5px;
    padding:0;
    list-style:none;
    grid-template-columns: repeat(6,1fr);
}
.sub-nav2 a{
    background: var(--brandcream);
    display:block;
    text-decoration: none;
    padding:0.1rem 0.2rem;
    text-align: center;
    color: var(--dark);
    text-transform: uppercase;
    font-size: 0.9rem;
}
.sub-nav2 a:hover{
    background: var(--brandcream);
    color: var(--brandbrown);
}
/* Sub-nav2 (Beauty)  END */
/*      END OF NAV BAR(S)   */


/*     START OF SHOWCASE CSS   */
/* Top Container */
.top-container{
    display:grid;
    padding:1rem;
    grid-template-areas:
    'showcase showcase top-box-a'
    'showcase showcase top-box-b'
    'showcase showcase info';
    grid-gap: 10px;
}
/* grid-area:=Assign to grid-areas*/
.showcase{
    grid-area: showcase;
    min-height: 300px;
    background: url(/Images/Sciorrs.jpg);
    background-size: cover;
    background-position: center;
    padding:2rem;
    /*using flex-box within grid to Move Text in ShowcasePic*/
    display:flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    box-shadow: var(--shadow);
}
/*Inner Elements for showcase*/
.showcase h1{
    color: var(--light);
    margin-bottom: 0;
    font-size: 2.5rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.showcase p{
    font-size:1.7rem;
    margin-top:0;
    color: var(--light);
}


/* BEAUTY Showcase*/
.beautyshowcase{
    grid-area: showcase;
    min-height: 300px;
    background: url(/Images/oil.jpg);
    background-size: cover;
    background-position: center;
    /*using flex-box within grid to Move Text in ShowcasePic*/
    padding:2rem;
    display:flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    box-shadow: var(--shadow);
}
/*Inner Elements for showcase*/
.beautyshowcase h1{
    color: var(--light);
    margin-bottom: 0;
    font-size: 2.5rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.beautyshowcase p{
    font-size:1.7rem;
    margin-top:0;
    color: var(--light);
}
.Aboutshowcase{
    grid-area: showcase;
    min-height: 300px;
    background: url(/Images/Haiup.jpg);
    background-size: cover;
    background-position: center;
    /*using flex-box within grid to Move Text in ShowcasePic*/
    padding:2rem;
    display:flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    box-shadow: var(--shadow);
}
/*Inner Elements for showcase*/
.Aboutshowcase h1{
    color: var(--light);
    margin-bottom: 0;
    font-size: 2.5rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.Aboutshowcase p{
    font-size:1.7rem;
    margin-top:0;
    color: var(--light);
}
.AboutPic img{
    margin-top:20px;
    max-width: 200px;
    max-height: 180px;
    box-shadow: var(--shadow);
}
.WhoWeAre h4{
    margin-top:20px;
    font-size: 0.7rem;
}
.WhereAre h4{
    padding:0;
    margin-top:10px;
    margin-bottom:-20px;
    text-align: center;
}
#map{
    margin-top: 25px;
    grid-area: map;
    height: 300px;
    width:100%;
    background-color: var(--light);
    box-shadow: var(--shadow);
}
/*     END OF SHOWCASE CSS   */


/* top-box are the two boxes NEXT to the main pic 'Showcase'*/
/* Top Box Class Section....Just need to write .top-box because both have the same class*/
.top-box{
    display:grid;
    align-items: center;
    justify-items:center;
    padding:1rem;
}
.top-box h4{
    font-size:0.9rem;
}
.top-box h3{
    font-size:0.6rem;
    margin-top:50px;
    padding:0;
}
/* A class within a class*/
.top-box .OH{
    margin-bottom:20px;
    font-size:0.85rem;
}
.top-box .GV{
    margin-top:90px;
    font-size:0.4rem;
    padding:0;
}

/* grid-area:= Assign to grid-areas*/
.top-box-a{
    grid-area: top-box-a;
}
.top-box-b{
    margin-top:-30px;
    background: url(/Images/GiftVoucher.png);
    background-size: cover;
    background-position: center;
    max-height: 150px;
    min-width: 340px;
    grid-area: top-box-b;
    color: var(--brandcream);
    box-shadow: var(--shadow);
}
/* top-box are the two boxes NEXT to the main pic 'Showcase'*/
/*   END OF TOP SECTION SHOWCASE(S)  */


/*  PRICELIST Section ASSIGN TO GRID-AREAS  */
.WhoWeAre{
    grid-area: WhoWeAre;
}
.WhereAre{
    grid-area: WhereAre;
}
.Cutting{
    grid-area: Cutting;
    margin-top:-20px;
}
.Styling{
    grid-area: Styling;
}
.Blowdrying{
    grid-area: Blowdrying;
}
.Combo{
    grid-area: Combo;
}
.Foils{
    grid-area: Foils;
}
.Tinting{
    grid-area:Tinting;
}
.Gents{
    grid-area: Gents;
}
.GentsColour{
    grid-area: GentsColour;
}
.Children{
    grid-area: Children;
}
.Leg{
    grid-area: Leg;
}
.Bikini{
    grid-area: Bikini;
}
.Arms{
    grid-area: Arms;
}
.Lip{
    grid-area: Lip;
}
.ScalpMassage{
    grid-area: ScalpMassage;
    padding:0;
    margin-left: 40px;
}
.BackNeck{
    grid-area: BackNeck;
    padding:0;
    margin-left:-40px;
    
}
.FullBody{
    grid-area: FullBody;
    padding: 0;
    margin-top:20px;
    margin-left:-40px;
}
.FullBody h3{
    margin-top:-20px
}
.Neil{
    grid-area: Neil;
}
.info{
    grid-area: info;
}
/*  END OF ASSIGN TO GRID*/


/*    ABOUT US    CSS   */
.AboutUs{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'WhoWeAre WhereAre';
    padding-left: 50px;
    padding-right:50px; 
    margin-top:-7px;
    font-size: 0.9rem;
}
.AboutUs h3{
    padding-top: 20px;
    color:var(--brandbrown);
    margin-bottom: 20px;
}
.AboutUs p{
    font-size: 0.9rem;
}

/*   CUTTING PRICELIST CSS   */
.CuttingPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Cutting Cutting2';
    padding-left: 50px;
    margin-top:-7px;
    font-size: 0.9rem;
}
.CuttingPricelist h3{
    padding-top: 20px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.CuttingPricelist p{
    font-size: 0.8rem;
    margin-top:-10px;
}
.Cutting2 h3{
    margin-top:-15px;
}

/*   STYLING PRICELIST CSS   */
.StylingPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Blowdrying Styling'
    'OHair OHair1';
    padding-left: 50px;
    margin-top:-25px;
    font-size:0.9rem;
}
.StylingPricelist h3{
    color:var(--brandbrown);
    margin-bottom: -8px;
    margin-top:15px;
}
.StylingPricelist p{
    font-size: 0.8rem;
    margin-top:-10px;

}
.OHair{
    display: inline;
}

/*   COLOURING PRICELIST CSS   */
.ColourPricelist{
    display:grid;
    grid-gap: 10px;
    grid-template-areas:
    'Combo Foils'
    'Tinting Foils';
    align-items: start;
    padding-left: 50px;
    margin-top:-25px;
    font-size: 0.9rem;
}
.ColourPricelist h3{
    padding-top: 20px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.ColourPricelist p{
    font-size: 0.8rem;
    margin-top:-14px;
}
.Combo p{
    margin-top:-10px;
}
.Foils p{
    margin-top:-10px;
}
.Tinting p{
    margin-top:-10px;
}

/*    PERMING PRICELIST CSS    */
.PermingPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Perm Relax';
    padding-left: 50px;
    margin-top:-25px;
    font-size: 0.9rem;
    padding-bottom:53px;
}
.PermingPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -20px;
}
.PermingPricelist p{
    font-size: 0.8rem;
    margin-top:-5px;
}
/*    GENTS PRICELIST CSS   */
.GentsPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Gents GentsColour'
    'GentsPic GentsPic';
    padding-left: 50px;
    margin-top:-25px;
    font-size: 0.9rem;
}
.GentsPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.GentsPricelist p{
    font-size: 0.8rem;
    margin-top:-10px;
}

/*   KIDS PRICELIST CSS    */
.KidsPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Kids CC';
    padding-left: 50px;
    margin-top:-25px;
    font-size: 0.9rem;
    padding-bottom: 12px;
}
.KidsPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.KidsPricelist p{
    font-size: 0.8rem;
    margin-top:-10px;
}

/*---Time and Charges---*/

.time{/*MiniManicure-MiniPedicure*/
    padding-bottom: 5px;
    padding-left: 540px;
    margin-top:-18px;
    color:var(--brandbrown)
}
.timeST{/*StoneTherapy*/
    padding-bottom: 5px;
    padding-left: 540px;
    margin-top:-32px;
    color:var(--brandbrown)
}
.time2{/*Manicure-LuxManicure-Pedicure-LuxPedicure*/
    padding-bottom: 5px;
    padding-left: 540px;
    margin-top:-35px;
    color:var(--brandbrown)
}
.timeF{/*Faial,HourFacial*/
    color:var(--brandbrown);
    padding-bottom: 5px;
    margin-left:800px;
    margin-top:-40px;
}
.timeH{/*Faial,HourFacial*/
    color:var(--brandbrown);
    padding-bottom: 5px;
    margin-left:800px;
    margin-top:-55px;
}
.timeSF{/*Body Hevenly Hydro*/
    color:var(--brandbrown);
    padding-bottom: 5px;
    margin-left:800px;
    margin-top:-40px;
}
.charge{/*Combo2-TintingAll-Cutting Pricelist-GentsAll-Manicure-Pedicure-YoungLad-YounGent-StoneTherapy*//*Combo2-TintingAll-Cutting Pricelist-GentsAll-Manicure-Pedicure-YoungLad-YounGent-StoneTherapy*/
    padding-bottom: 5px;
    padding-left: 540px;
    margin-top:-18px;
    color:var(--brandbrown);
}
.chargeF{/*Faial,HourFacial*/
    padding-bottom: 5px;
    margin-left:800px;
    color:var(--brandbrown);
}
.charge3{/*EyelashEyeBrowTint*/
    padding-left:280px;
    margin-top:-21px;
    color:var(--brandbrown);
}
.chargeFF{/*Folis*/
    padding-left:400px;
    margin-left:100px;
    margin-top:-15px;
    color:var(--brandbrown);
}
.chargecc{/*ChildsCut-Perm-Relaxer-StylingAll*/
    padding-left:400px;
    margin-top:-15px;
    color:var(--brandbrown);
}
.chargeWax{/*-Forearms-Eye Brow Shape*/
    padding-left:170px;
    margin-top:-21px;
    color:var(--brandbrown);
}
.chargeWax1{/*Eye lash Tint-Eybrow Tint-*/
    padding-left:170px;
    margin-top:-21px;
    color:var(--brandbrown)
}
.chargeWax2{/*halfLeg-fullLeg*/
    padding-left:100px;
    margin-top:-21px;
    color:var(--brandbrown);
}
.chargeWax3{/*BikiniLine-Underarms*/
    padding-left:140px;
    margin-top:-21px;
    color:var(--brandbrown);
}
.chargeWax4{/*Lip-Chin*/
    padding-left:100px;
    margin-top:-21px;
    color:var(--brandbrown);
}
.chargeST{
    padding-bottom: 5px;
    padding-left: 540px;
    margin-top:-18px;
    color:var(--brandbrown);
}


/*  Start of Beauty Pricelist CSS*/
/* HANDSFEET PRICELIST CSS*/
.HandsFeetPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Manicure Pedicure'
    'Shellac Shellac1';
    padding-left: 50px;
    margin-top:-25px;
    font-size: 0.9rem;
}
.HandsFeetPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.HandsFeetPricelist h4{
    font-size:0.7rem;
}
.HandsFeetPricelist p{
    font-size: 0.8rem;
    margin-top:-10px;
}
/*  HAIR REMOVAL PRICELIST  CSS*/
.HairRemovalPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Leg Bikini Arms Lip';
    padding-left: 40px;
    margin-top:-25px;
    font-size: 0.9rem;
    margin-top:-30px;
    padding-bottom: 17px;
}
.HairRemovalPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.HairRemovalPricelist p{
    font-size: 0.8rem;
    margin-top:-10px;
}
#Roller{
    margin-top:-15px;
    margin-left:40px;
}
#Patch{
    font-size:0.9rem;
    text-align: center;
}
/*   FINISHING TOUCHES   CSS */
.FinishTouchesPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'Leg Bikini Arms Lip';
    padding-left: 40px;
    margin-top:-25px;
    font-size: 0.9rem;
    padding-bottom: 44px;
}
.FinishTouchesPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.FinishTouchesPricelist p{
    font-size: 0.8rem;
    margin-top:-10px;

}
/*   PURERELAX  Pricelist CSS   */
.PureRelaxPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-areas:
    'ScalpMassage BackNeck FullBody';
    margin-top:-25px;
    font-size: 0.9rem;
    padding:0;
    
}
.PureRelaxPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.PureRelaxPricelist p{
    font-size: 0.8rem;
    margin-top:3px;
}
.B{
    color: var(--brandbrown)
}
.B1{
    color: var(--brandbrown)
}
/*  STONETHERAPY Pricelist CSS   */
.StoneTherapyPricelist{
    display:grid;
    align-items: start;
    grid-gap: 10px;
    grid-template-columns: auto;
    margin-top:-25px;
    font-size: 0.9rem;
    padding-left:100px;
    padding-bottom: 5px;


}
.StoneTherapyPricelist h3{
    padding-top: 18px;
    color:var(--brandbrown);
    margin-bottom: -6px;
}
.StoneTherapyPricelist p{
    font-size: 0.8rem;
    margin-top:-5px;
}
/*  FACEBODY Pricelist CSS   */
.FaceBodyPricelist{
    display:grid;
    align-items: start;
    grid-gap:10px;
    grid-template-areas:
    'Neil'
    'Face'
    'Body';
    margin-top:-25px;
    font-size: 0.9rem;
    margin:0 auto;
    padding:1rem;
}
.FaceBodyPricelist h3{
    padding-top: 28px;
    margin-bottom: -15px;
    color:var(--brandbrown);
}
.FaceBodyPricelist h4{
    text-align: center;
    font-size:0.8rem;
    margin-top:10px;
    margin-bottom: -15px;
}
.FaceBodyPricelist p{
    font-size: 0.8rem;
}


/*  END OF PRICELIST CSS*/


/* custom styling for specific icons-fonts*/
.fa-facebook{
    color: var(--brandcream);
}
.fa-restroom{
    background: transparent;
    color:var(--brandbrown);
    align-content: center;
    align-items: center;
    padding:0;
    margin-top:-20px;
}
/* custom styling for specific icons-fonts*/



/* Info Section*/
.info{
    margin:0 25px;
    margin-top:-30px;
    min-height: 150px;
    background:var(--primary);
    box-shadow:var(--shadow);
    display:grid;
    grid-gap: 0 10px;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
    align-items: center;
}
.info img{
    align-self: center;
}
.info h2{
    text-align: center;
    color: var(--brandbrown);
    font-size:1.5rem;
    font-style: italic;
}
.info p{
    text-align: center;
    margin-top:5px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: bold;
    color: black;
}
.button1{
    font-size: 12px;
    text-decoration: none;
    color:var(--brandbrown);
    border:var(--brandbrown)1px solid;
    padding: 0.3rem 0.62rem;
    border-radius: 0.625rem;
    display:flex;
    justify-content: center;
    align-items: center;
    
}
.button1:hover{
    background-color: rgb(92, 56, 32);
    color:rgb(244, 237, 221); 
}
/* Info Page*/
.infoPage{
    margin:0 25px;
    min-height: 150px;
    background:var(--primary);
    box-shadow:var(--shadow);
    display:grid;
    grid-gap: 0px;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
    margin-bottom:77px;
}
.infoPage img{
    align-self: center;
    max-height: 300px;
}
.infoPage h2{
    color: var(--brandbrown);
    font-size:1.5rem;
    font-style: italic;
    text-align: center;

}
.infoPage p{
    margin-top:25px;
    font-size: 1rem;
    text-align: center;
    font-style: italic;
    color: black;
}


/*Portfolio--BRAND PICS*/
.portfolio{
    display:grid;
    grid-gap: 0 20px;
    grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
    /* padding-left usesd to aline images to center*/
    padding-left: 95px;
}
/*make sure image width is 100% of container*/
.portfolio img{
    width:105px;
    height: 75px;
    box-shadow: var(--shadow);
}


/*Footer(S)*/
.Landingfooter{
    background: var(--brandbrown);
    color:var(--brandcream);
    text-align: center;
    margin-top: -2.7rem;
}
.footer{
    background: var(--brandbrown);
    color:var(--brandcream);
    text-align: center;
    padding:0.1rem 0rem 0.16rem 0rem;
    margin-bottom:-25px;
}


/*--------------------------------------------------------------------------------------------------------------------------------------- 
------- ------------------------------------------START OF CSS MEDIA QUERIES-------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------  */

@media screen and (max-height:1824px){     /* Developed on Surface Pro 4  */
    .portfolio{
        padding-top:0px;
        margin-top:11px;
        margin-bottom:0px;
    }
}
@media screen and (max-width:1276px){
    #LandingPage p{
        padding:0 150px;
        
    }
    .CuttingPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        grid-gap: 0px;
        grid-template-areas:
        'Cutting Cutting2';
        margin-left:-10px;
    }
    .CuttingPricelist h3{
        margin-bottom:3px;
    }
    .CuttingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .CuttingPricelist p{
        padding:0;
        font-size: 0.65rem;
        padding-top:4px;
    }
    .charge{
        margin-left:-50px;
    }
 


    .ColourPricelist{
        font-size:0.7rem;

    }
    .ColourPricelist h3{
        margin-bottom:3px;
    }
    .ColourPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .ColourPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }



    .HandsFeetPricelist{
        font-size:0.7rem;
        margin-left:-10px;
    }
    .HandsFeetPricelist h3{
        margin-bottom:3px;
    }
    .HandsFeetPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .HandsFeetPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
    .time{
        margin-left:-150px;
    }
    .time2{
        margin-left:-150px
    }
    .portfolio{
        display:grid;
        grid-gap: 20px;
        grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
    }
}
@media screen and (max-width:1150px){
    .AboutUs{
        display:grid;
        align-items: start;
        grid-gap: 0px;
        grid-template-areas:
        'WhoWeAre'
        'WhereAre';
        padding-left: 50px;
        padding-right:50px; 
        margin-top:-30px;
        font-size: 0.9rem;
    }
    .AboutPic img{
        margin-top: 10px;
    }
    .WhoWeAre{
        text-align: center;
    }
    .WhoWeAre p{
        margin-top: -10px;
    }
    .WhereAre{
        text-align: center;
    }
    #map{
        margin-top:-10px;
    }
}
@media screen and (max-width:1096px){
    #LandingPage p{
        padding:0 100px;
        
    }
}
@media screen and (max-width:1087px){
    .sub-nav{
        padding-bottom: 0px;
    }
    .sub-nav2{
        padding-bottom:0px;
    }
    .top-box-b{
        max-width: 250px;
    }

    .CuttingPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        grid-gap: 0px;
        grid-template-areas:
        'Cutting Cutting2';
    }
    .CuttingPricelist h3{
        margin-bottom:3px;
    }
    .CuttingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .CuttingPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
    .charge{
        padding-left:460px;
    }
    

    .StylingPricelist{
        font-size:0.7rem;
    }
    .StylingPricelist h3{
        margin-bottom:3px;
    }
    .StylingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .StylingPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }



    .ColourPricelist{
        font-size:0.7rem;

    }
    .ColourPricelist h3{
        margin-bottom:3px;
    }
    .ColourPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .ColourPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
    .chargeFF{
        margin-left:-10px;
    }



    .HandsFeetPricelist{
        font-size:0.7rem;
    }
    .HandsFeetPricelist h3{
        margin-bottom:3px;
    }
    .HandsFeetPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .HandsFeetPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
    .time{
        margin-left:-130px;
    }
    .time2{
        margin-left:-130px;
    }
    .Pedicure{
        margin-left:-30px;
    }
    .Shellac1{
        margin-left:-30px;
    }

    .portfolio{
       grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
       padding-top:47px;

    }
    .portfolio img{
        width:75px;
        height: 50px;
        box-shadow: var(--shadow);
    }
}
@media screen and (max-width:1076px){
    .charge{
        margin-left:-50px;
    }
}
@media screen and (max-width:1068px){
    .Aboutshowcase p{
        font-size: 1.5rem;
    }
    .showcase p{
        font-size: 1.5rem;
    }
    .beautyshowcase p{
        font-size: 1.5rem;
    }
}
@media screen and (max-width:1114px){
    .portfolio{
        padding-top:0px;
        margin-top:0px;
    }    
}
@media screen and (max-width:1010px){
    .fix-me{
        font-size:1.4rem;
        margin-top:-5px;
    }
    .CuttingPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        grid-gap: 0px;
        grid-template-areas:
        'Cutting Cutting2';
        margin-left:-10px;
    }
    .CuttingPricelist h3{
        margin-bottom:3px;
    }
    .CuttingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .CuttingPricelist p{
        padding:0;
        font-size: 0.65rem;
        padding-top:4px;
    }
    .charge{
        margin-left:-70px;
    }
    

    .StylingPricelist{
        font-size:0.7rem;
    }
    .StylingPricelist h3{
        margin-bottom:3px;
    }
    .StylingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .StylingPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }



    .ColourPricelist{
        font-size:0.7rem;

    }
    .ColourPricelist h3{
        margin-bottom:3px;
    }
    .ColourPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .ColourPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }



    .HandsFeetPricelist{
        font-size:0.7rem;
        margin-left:-10px;
    }
    .HandsFeetPricelist h3{
        margin-bottom:3px;
    }
    .HandsFeetPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .HandsFeetPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
    .time{
        margin-left:-150px;
    }
    .time2{
        margin-left:-150px
    }
}
@media screen and (max-width:999px){
    .showcase p{
        font-size: 1.3rem;
    }
    .beautyshowcase p{
        font-size: 1.3rem;
    }
    .Aboutshowcase p{
        font-size: 1.3rem;
    }
}
@media screen and (max-width:998px){
    #LandingPage p{
        padding:0 100px;
        font-size: 1.8rem;  
    }
    #LandingPage h1{
        font-size: 2.8rem;
    }
}
@media screen and (max-width: 965px){
    .main-nav a{
        margin-bottom:-5px;
    }
    .main-nav{
        padding:10px 100px;
    }
    .main-nav .fas.fa-restroom.fa-4x{
        font-size: 3rem;
        margin:0;
    }
    .sub-nav{
        padding:5px;
    }
    .sub-nav a{
        font-size:0.8rem;
    }
    .sub-nav2{
        padding:5px
    }
    .sub-nav2 a{
        font-size:0.8rem;
    }
    .sub-nav2 ul{
      grid-gap: 4px;
    }


    .CuttingPricelist{
        font-size:0.65rem;
        display:grid;
        align-items: start;
        grid-gap: 0px;
        grid-template-areas:
        'Cutting Cutting2';
        margin-left:-10px;
    }
    .CuttingPricelist h3{
        margin-bottom:3px;
    }
    .CuttingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .CuttingPricelist p{
        padding:0;
        font-size: 0.6rem;
        padding-top:4px;
    }

    

    .StylingPricelist{
        font-size:0.65rem;
        margin-left: -10px;
    }
    .StylingPricelist h3{
        margin-bottom:3px;
    }
    .StylingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .StylingPricelist p{
        padding:0;
        font-size: 0.6rem;
        padding-top:4px;
    }



    .ColourPricelist{
        font-size:0.7rem;
        margin-left:-10px;

    }
    .ColourPricelist h3{
        margin-bottom:3px;
    }
    .ColourPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .ColourPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }


    .PermingPricelist{
        font-size:0.7rem;
        margin-left:-10px;
    }
    .PermingPricelist h3{
        margin-bottom:3px;
    }
    .PermingPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .PermingPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
    .chargecc{
        margin-left:-100px;
    }


    .GentsPricelist{
        font-size:0.7rem;
        margin-left:-10px;
    }
    .GentsPricelist h3{
        margin-bottom:3px;
    }
    .GentsPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .GentsPricelist p{
        padding:0;
        font-size: 0.65rem;
        padding-top:4px;
    }


    .KidsPricelist{
        font-size:0.7rem;
    }
    .KidsPricelist h3{
        margin-bottom:3px;
    }
    .KidsPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .KidsPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
   



    .HandsFeetPricelist{
        font-size:0.7rem;
        margin-left:-20px;
        grid-gap:0;
    }
    .HandsFeetPricelist h3{
        margin-bottom:3px;
    }
    .HandsFeetPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .HandsFeetPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }
    .time{
        margin-left:-165px;
    }
    .time2{
        margin-left:-165px;
    }
    .charge{
        margin-left:-85px;
    }


    .HairRemovalPricelist{
        font-size:0.7rem;

    }
    .HairRemovalPricelist h3{
        margin-bottom:3px;
    }
    .HairRemovalPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .HairRemovalPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }


    .FinishTouchesPricelist{
        font-size:0.7rem;
        margin-left:-10px;
    }
    .FinishTouchesPricelist h3{
        margin-bottom:3px;
    }
    .FinishTouchesPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .FinishTouchesPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }


    .PureRelaxPricelist{
        font-size:0.7rem;

    }
    .PureRelaxPricelist h3{
        margin-bottom:3px;
    }
    .PureRelaxPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .PureRelaxPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }



    .StoneTherapyPricelist{
        font-size:0.7rem;
        margin-left:-10px;
    }
    .StoneTherapyPricelist h3{
        margin-bottom:3px;
    }
    .StoneTherapyPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .StoneTherapyPricelist p{
        padding:0;
        font-size: 0.7rem;
        padding-top:4px;
    }


    .FaceBodyPricelist{
        font-size:0.7rem;
    }
    .FaceBodyPricelist h3{
        margin-bottom:3px;
    }
    .FaceBodyPricelist h4{
        margin-top:-7px;
        padding-bottom:4px;
    }
    .FaceBodyPricelist p{
        padding:0;
        font-size: 0.8rem;
        padding-top:4px;
    }

}
@media screen and (max-width:951px){
    
    .HandsFeetPricelist{
       grid-gap:0; 
       margin-left:-30px;
    }
    .Pedicure{
        margin-left:-20px;
    }
    .Shellac1{
        margin-left:-20px;
    }
    #Please{
        font-size:0.7rem;
    }

}
@media screen and (max-width:929px){
    .Aboutshowcase p{
        font-size: 1.17rem;
    }
    .showcase p{
        font-size: 1.17rem;
    }
    .beautyshowcase p{
        font-size: 1.17rem;
    }
}
@media screen and (max-width:920px){
    .HandsFeetPricelist{
       grid-gap:0; 
       margin-left:-40px;
    }
    .Pedicure{
        margin-left:25px;
    }
    .Shellac1{
        margin-left:25px;
    }
    .chargeF{/*Faial,HourFacial*/
        margin-left:600px;
    }
    .timeF{/*Faial,HourFacial*/
        margin-left:600px;
    }
    .timeH{/*Faial,HourFacial*/
        margin-left:600px;
    }
    .timeSF{/*Body Hevenly Hydro*/
        margin-left:600px;
    }
    

}           
@media screen and (max-width:890px){
    .logo{
        max-width: 60px;
    }
    .fix-me{
        font-size: 1rem;
    }
    .Aboutshowcase p{
        font-size: 1.15rem;
    }
    .showcase p{
        font-size: 1.15rem;
    }
    .beautyshowcase p{
        font-size: 1.15rem;
    }
    .CuttingPricelist{
        margin-left:-40px;
    }
    .StylingPricelist{
        margin-left:-40px;
    }
    .ColourPricelist{
        margin-left:-40px;
    }
    .PermingPricelist{
        margin-left:-40px;
    }
    .GentsPricelist{
        margin-left:-40px;
    }
    .KidsPricelist{
        margin-left:-40px;
    }
    .HandsFeetPricelist{
        margin-left:-40px;
    }
    .HairRemovalPricelist{
        margin-left:-20px;
    }
    .FinishTouchesPricelist{
        margin-left:-20px;
    }
    .PureRelaxPricelist{
        grid-gap: 15px;
    }
    .charge{
        margin-left: -100px;
    }
    .time{
        margin-left: -180px;
    }
    .time2{
        margin-left:-180px;
    }
    #Please{
        font-size:0.7rem;
    }
    .portfolio{
        margin:0;
        padding-left: 20px;
    }
}
@media screen and (max-width:877px){
    .Aboutshowcase p{
        font-size: 1.1rem;
    }
    .showcase p{
        font-size: 1.1rem;
    }
    .beautyshowcase p{
        font-size: 1.1rem;
    }
    .info p{
        font-size:0.7rem;
    }
}
@media screen and (max-width:870px){
   
    .sub-nav2 ul{
        grid-gap:2px;
    }
    .sub-nav2 a{
        font-size: 0.79rem;
    }
    
    .charge{
        margin-left:-110px;
        font-size:0.7rem;
    }
    .time{
        margin-left:-190px;
    }
    .time2{
        margin-left:-190px;
    }
    
    .Aboutshowcase{
        padding:1rem;
    }
    .Aboutshowcase p{
        font-size: 1.1rem;
    }
    .showcase{
        padding:1rem;
    }
    .showcase p{
        font-size: 1.1rem;
    }
    .beautyshowcase{
        padding:1rem;
    }
    .beautyshowcase p{
        font-size: 1.1rem;
    }
    .info{
        padding:0.5rem;
    }


    .CuttingPricelist{
        font-size:0.6rem;
    }
    .CuttingPricelist h3{
        margin-bottom:7px;
    }
    .CuttingPricelist p{
        font-size: 0.55rem;
    }
    .StylingPricelist{
        font-size:0.6rem;
    }
    .StylingPricelist h3{
        margin-bottom:7px;
    }
    .StylingPricelist p{
        font-size: 0.55rem;
    }
    .ColourPricelist{
        font-size:0.6rem;
    }
    .ColourPricelist h3{
        margin-bottom:7px;
    }
    .ColourPricelist p{
        font-size: 0.55rem;
    }
    .PermingPricelist{
        font-size:0.6rem;
    }
    .PermingPricelist h3{
        margin-bottom:7px;
    }
    .PermingPricelist p{
        font-size: 0.55rem;
    }
    .GentsPricelist{
        font-size:0.6rem;
    }
    .GentsPricelist h3{
        margin-bottom:7px;
    }
    .GentsPricelist p{
        font-size: 0.55rem;

    }
    .KidsPricelist{
        font-size:0.6rem;
    }
    .KidsPricelist h3{
        margin-bottom:7px;
    }
    .KidsPricelist p{
        font-size: 0.55rem;
    }
   

    .HandsFeetPricelist{
        font-size:0.6rem;
        padding-top:7px;
    }
    .Pedicure{
        margin-left:-20px;
    }
    .Shellac1{
        margin-left:-20px;
    }
    .HandsFeetPricelist p{
        font-size: 0.55rem;
    }
    .HairRemovalPricelist{
        font-size:0.6rem;
        padding-top:7px;
    }
    .HairRemovalPricelist p{
        font-size: 0.58rem;
    }
    .time2{
        margin-top:-28px;
    }
    .FinishTouchesPricelist{
        font-size:0.6rem;
        padding-top:7px;
    }
    .FinishTouchesPricelist p{
        font-size: 0.55rem;
    }
    .PureRelaxPricelist{
        font-size:0.6rem;
        padding-top:7px;
    }
    .PureRelaxPricelist p{
        font-size: 0.55rem;
    }
    .StoneTherapyPricelist{
        font-size:0.6rem;
        padding-top:7px;
    }
    .StoneTherapyPricelist p{
        font-size: 0.55rem;
    }
    .FaceBodyPricelist{
        font-size:0.6rem;
    }
    .FaceBodyPricelist p{
        font-size: 0.55rem;
    }
}
@media screen and (max-width:866px){
    #LandingPage p{
        padding:0 60px;
        font-size: 1.8rem;  
    }
}
@media screen and (max-width:860px){
    .sub-nav a{
        font-size: 0.7rem;
    }  
    .sub-nav2 ul{
        grid-gap:2px;
    }
    .sub-nav2 a{
        font-size: 0.7rem;
    }
}
@media screen and (max-width:844px){
    .Landing-nav a{
        font-size:2.5rem;
    }
}
@media screen and (max-width:835px){
    .charge{
        margin-left:-140px;
    }
    .time{
        margin-left:-220px;
    }
    .time2{
        margin-left:-220px;
    }
}
@media screen and (max-width:828px){
    .showcase p{
        font-size: 1.0rem;
    }
    .beautyshowcase p{
        font-size: 1.0rem;
    }
    .Aboutshowcase p{
        font-size: 1.0rem;
    }
}
@media screen and (max-width:823px) and (orientation: landscape){ /*  MOBILE Landscape display:none for Landing page  */
    #LandingPage h1{
        display: none;
    }
    #LandingPage p{
        display: none;
    }
    #LandingPage .button{
        margin:0;
    }
    .closeBtn{
        color: var(--brandbrown);
        font-size: 30px;
    }
}
@media screen and (max-width:803px){
    #LandingPage p{
        padding:0 20px;
    }
}
@media screen and (max-width:793px){
    .showcase p{
        font-size: 0.9rem;
    }
    .beautyshowcase p{
        font-size: 0.9rem;
    }
    .Aboutshowcase p{
        font-size: 0.9rem;
    }
}
@media screen and (max-width:791px){
    .chargeFF{
        margin-left:-100px;
    }
    .main-nav{
        padding:10px 40px;
    }
}
@media screen and (max-width:790px){
    .main-nav{
        padding: 10px 40px;
    }
    .main-nav ul{
        grid-gap: 5px 10px;
    }
    .Pedicure{
        margin-left:-40px;
    }
    .Shellac1{
        margin-left:-40px;
    }
    .showcase{
        min-height: 50px;
        max-width: 700px;
        padding:2rem;
    }
    .beautyshowcase{
        min-height: 50px;
        max-width: 700px;
        padding:2rem;
    }
    .info{
        margin:0;
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 37px;
    }
    .infoPage{
        grid-template-columns: repeat(1, 1fr);
    }
    .infoPage img{
        margin: 0 auto;
    }
    .Aboutshowcase{
        min-height: 50px;
        max-width: 700px;
        padding:2rem;
    }
    .top-container {
        grid-template-areas:
        'showcase showcase'
        'top-box-a top-box-b'
        'top-box-a info';
        grid-gap:10px;
    }
    .top-box{
        align-items: center;
        padding:0.8rem;
        margin-top:20px;
    }
    .top-box h4{
        margin-bottom: 15px;
        font-size: 0.82rem;
    }
    .top-box-a .OH{
        font-size: 0.8rem;
    }
    #Roller{
        font-size: 0.9rem;
    }
    #LandingPage h1{
        margin-top:-140px
    }
}
@media screen and (max-height: 1024px) and (orientation: portrait){   /*----------------- IPAD LAYOUT-----------------------------*/
    .closeBtn{
        color: var(--brandbrown);
        font-size: 30px;
    }
    .portfolio{
        padding-top:284px;
    }
    .footer{

        left:0;
        bottom:0;
        width:100%
    }
    .CuttingPricelist{
        grid-template-areas:
        'Cutting'
        'Cutting2';
        margin:0 auto;
        font-size:0.8rem;
        grid-gap: 20px;
        padding-left:0px;
        padding-bottom:203px;
    }
    .StylingPricelist{
        grid-template-areas:
        'Styling'
        'Blowdrying'
        'OHair'
        'OHair1';
        margin:0 auto;
        padding-left: 80px;
        font-size:0.8rem;
        padding-bottom:173px;
    }
    .ColourPricelist{
        grid-template-areas:
        'Combo'
        'Foils'
        'Tinting';
        margin:0 auto;
        padding-left: 0px;
        font-size:0.8rem;
        padding-bottom: 148px;
    }
    .chargeFF{
        margin-left: 60px;
    }
    .PermingPricelist{
        grid-template-areas:
        'Perm'
        'Relaxer';
        margin:0 auto;
        font-size:0.8rem;
        padding-left:0px;
        padding-bottom:392px;
    }
    .GentsPricelist{
        grid-template-areas:
        'Gents'
        'GentsColour';
        margin:0 auto;
        font-size:0.8rem;
        padding-left: 0px;
        padding-bottom:241px;
    }
    .KidsPricelist{
        grid-template-areas:
        'Kids'
        'CC';
        margin:0 auto;
        font-size:0.8rem;
        padding-left: 0px;
        padding-bottom:372px;
    }
    .chargecc{
        margin-left:60px;
    }
    .HandsFeetPricelist{
        grid-template-areas:
        'Manicure'
        'Pedicure'
        'Shellac'
        'Shellac1';
        margin:0 auto;
        padding-left: 0px;
        font-size:0.8rem;
    }
    .HandsFeetPricelist p{
        font-size:0.8rem;
    }
    .Pedicure{
        margin-left: -0px;
    }
    .Shellac1{
        margin-left: -0px;
    }
    .charge{
        margin-left:0px;
    }
    .time{
        margin-left: -80px;
    }
    .time2{
        margin-left: -80px;
    }
   
    .HairRemovalPricelist{
        grid-template-areas:
        'Leg'
        'Bikini'
        'Arms'
        'Lip';
        margin:0 auto;
        font-size:0.8rem;
        padding-left: 0px;
        padding-bottom:178px;
    }
    .chargeWax{
        margin-left:50px;
    }
    .chargeWax2{
        margin-left:120px;
    }
    .chargeWax3{
        margin-left:80px;
    }
    .chargeWax4{
        margin-left:120px;
    }
    .FinishTouchesPricelist{
        display: block;
        text-align: center;
        padding-left: 0;
        padding-top:50px;
        padding-left: 0px;
        padding-bottom:365px;
        font-size: 0.8rem;
    }
    .chargeWax1{
        margin-left:110px;
    }
    .PureRelaxPricelist{
        display: block;
        text-align: center;
        padding-left: 0;
        padding-top:50px;
        padding-bottom:141px;
        font-size: 0.8rem;
    }
    .ScalpMassage{
        margin: 0px;
    }
    .BackNeck{
        margin:0;
    }
    .FullBody{
        margin-left:0;
    }
    .StoneTherapyPricelist{
        padding-top:50px;
        padding-bottom: 402px;
    }
    .StoneTherapyPricelist p{
        font-size:0.8rem;
    }
    .FaceBodyPricelist{
        font-size: 0.8rem;
        padding-bottom: 17px
    }
    .FaceBodyPricelist p{
        font-size:0.8rem;
    }
    .infoPage{
        margin-top:20px;
        margin-bottom:-73px;
    }
}
@media screen and (max-width:768px) and (orientation: landscape){
    .closeBtn{
        color: var(--brandbrown);
        font-size: 30px;
    }  
}
@media screen and (max-width:765px){    /*     START OF TEXT-ALIGN:CENTER FOR PRICELIST   */
    .sub-nav a{
        font-size: 0.7rem;
    }  
    .sub-nav2 ul{
        grid-gap:2px;
    }
    .sub-nav2 a{
        font-size: 0.7rem;
    }
    .CuttingPricelist{
        font-size:0.7rem;
        display:grid;
        text-align: center;
        grid-gap: 0px;
        grid-template-areas:
        'Cutting'
        'Cutting2';
    }
    .CuttingPricelist p{
        font-size: 0.7rem;
    }
   
    .StylingPricelist{
        font-size:0.7rem;
        display:grid;
        text-align: center;
        grid-gap: 0px;
        grid-template-areas:
        'Blowdrying'
        'Styling';
    }
   .StylingPricelist p{
       font-size: 0.7rem;
   }
    .ColourPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 0px;
        grid-template-areas:
        'Combo'
        'Foils'
        'Tinting';
    }
    .ColourPricelist p{
        font-size: 0.7rem;
    }
    .chargeFF{
        margin-left: -410px;
        margin-top:-7px;
        margin-bottom: 5px;
    }
    .PermingPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 0px;
        grid-template-areas:
        'Perm'
        'Relax';

    }
    .PermingPricelist h3{
        margin-bottom:4px;
    }
    .PermingPricelist p{
        padding:0;
        font-size: 0.6rem;
    }
    .GentsPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 0px;
        grid-template-areas:
        'Gents'
        'GentsColour';
    }
    .GentsPricelist h3{
        margin-bottom:7px;
    }
    .GentsPricelist p{
        padding:0;
        font-size: 0.6rem;
    }
    .KidsPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 0px;
        grid-template-areas:
        'Kids'
        'CC';
    }

    .KidsPricelist p{
        font-size: 0.7rem;
    }
    .chargecc{
        margin-left:-400px;
        margin-top:-7px;
        margin-bottom: 5px;
    }
    .charge{
        margin-left:-470px;
        margin-top:-5px;
        margin-bottom: 5px;

    }
    .time{
        margin-left:-550px;
        margin-top: 1px;
    }
    .time2{
        margin-left:-550px;
        margin-top: 1px;
    }

    .HandsFeetPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 0;
        grid-template-areas:
        'Manicure'
        'Pedicure'
        'Shellac'
        'Shellac1';
        
    }
    .Pedicure{
        margin: 0 auto;
    }
    .Shellac1{
        margin: 0 auto;
    }
    .HandsFeetPricelist p{
        font-size: 0.7rem;
    }


    .HairRemovalPricelist{
        font-size:0.6rem;
        display:grid;
        align-items: start;
        grid-gap: 0px 10px;
        grid-template-areas:
        'Leg Arms'
        'Bikini Lip';
        margin-left: 30px;
    }
    .HairRemovalPricelist h3{
        margin-bottom:14px;
    }
    .HairRemovalPricelist h4{
        margin-top:-7px;
    }
    
    #Roller{
        font-size:0.8rem;
        padding-left:20px;
    }


    .FinishTouchesPricelist{
        font-size:0.6rem; 
    }
    .FinishTouchesPricelist h3{
        margin-bottom:4px;
    }
    .FinishTouchesPricelist h4{
        margin-top:-5px;
    }
    .LBTint{
        margin-left:0px;
        margin-top:-0px;
    }
    .charge3{
        margin-left:-100px;
    }
    .chargeWax{
        margin-top:-30px;
    }
    .chargeWax1{
        margin-left:10px;
    }
    .chargeWax2{
        margin-top:-30px;
        margin-left: 120px;
    }
    .chargeWax3{
        margin-top:-30px;
    }
    .chargeWax4{
        margin-top:-30px;
        margin-left: 120px;
    }
    .PureRelaxPricelist{
        font-size:0.6rem;
     
    }
    .PureRelaxPricelist h3{
        margin-bottom:4px;
    }
    .PureRelaxPricelist h4{

        margin-top:-7px;
    }
    .PureRelaxPricelist p{
        font-size: 0.55rem;
    }
 

    .StoneTherapyPricelist{
        font-size:0.7rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 0px;
    }
    
    .StoneTherapyPricelist p{
        font-size: 0.7rem;
    }
    .chargeST{
        margin-left: -550px;
        margin-top:1px;
    }
    .timeST{
        margin-left: -550px;
        margin-top:1px;
    }
    .FaceBodyPricelist{
        display:grid;
        text-align: center;
        grid-template-areas:
        'Neil'
        'Body'
        'Face';
        font-size: 0.7rem;
    }
    .chargeF{/*Faial,HourFacial*/
        margin-left:0px
    }
    .timeF{/*Faial,HourFacial*/
        margin:0;
    }
    .timeH{/*Faial,HourFacial*/
        margin:0;
    }
    .timeSF{/*Body Hevenly Hydro*/
        margin:0;
    }
}
@media screen and (max-width:760px){
    .sub-nav2 ul{
        grid-gap:2px;
    }
    .sub-nav2 a{
        font-size: 0.69rem;
    }
}
@media screen and (max-width:750px){
    #LandingPage h1{
        margin-top:-80px;
        margin-bottom: -60px;
        font-size: 2.8rem;
    }
    .sub-nav a{
        font-size: 0.65rem;
    }  
    .sub-nav2 ul{
        grid-gap:2px;
    }
    .sub-nav2 a{
        font-size: 0.65rem;
    }
    .info h2{
        font-size:1rem;
    }
}
@media screen and (max-width:722px) and (orientation: landscape){/* display:none for Landing page */
    #LandingPage h1{
        display: none;
    }
    #LandingPage p{
        display: none;
    }
    #LandingPage .button{
        margin:0;
    }
}
@media screen and (max-width:722px){
    #LandingPage p{
        font-size:1.6rem;
    }
}
@media screen and (max-width:709px){
    .sub-nav2 ul{
        grid-gap:2px;
    }
    .sub-nav2 a{
        font-size: 0.64rem;
    }
}
@media screen and (max-width:700px){
    .main-nav{
        padding:10px 20px;
    }
    .main-nav .fas.fa-restroom.fa-4x{
        font-size: 3rem;
        margin:0;
        padding: 0;
    }
    .sub-nav a{
        font-size: 0.65rem;
    }  
    .sub-nav{
        padding-bottom: 0px;
    }
    .sub-nav2{
        margin:0px;
        padding:0px;
    }
    .sub-nav2 ul{
        margin:0;
        padding:10 0 0 0;
        grid-gap:0px;
    }
    .sub-nav2 a{
        font-size: 0.65rem;
        padding:0;
    }
    .ScalpMassage{
        margin: 0;
        padding: 0;
    }
    .BackNeck{
        margin: 0;
        padding: 0;
    }
    .FullBody{
        margin: 0;
        padding: 20px 0 0 0;
    }
    .PureRelaxPricelist{
        font-size:0.6rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 10px;
        grid-template-areas:
        'ScalpMassage'
        'BackNeck'
        'FullBody';
    }
    .B1{
        margin-top:-1px;
    }
    .FinishTouchesPricelist{
        font-size:0.6rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 30px;
        grid-template-areas:
        'LBTint'
        'EyeLashTint'
        'EyeBrowTint';
        margin-left:-150px;
    }
    .chargeWax1{
        margin-left:80px;
    }
    .charge3{
        margin-left:-30px;
    }
}
@media screen and (max-width:698px){
    .AboutPic img{
    height: 160px;
    }
}
@media screen and (max-width:681px){
    .AboutPic img{
    height: 155px;
    }
}
@media screen and (max-width:652px){
    .sub-nav2 a{
        text-align: center;
        font-size: 0.7rem;
        margin:0px 30 0 30px;
    }
    .sub-nav2 ul{
        grid-gap: 46px;
    }
    .HandsFeetPricelist{
        font-size:0.6rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-template-areas:
        'ScalpMassage'
        'BackNeck'
        'FullBody';
    }
    
    
    .FinishTouchesPricelist{
        font-size:0.6rem;
        display:grid;
        align-items: start;
        text-align: center;
        grid-gap: 30px;
        grid-template-areas:
        'LBTint'
        'EyeLashTint'
        'EyeBrowTint';
    }
}
@media screen and (max-width:637px){
    .top-box .OH{
        font-size: 0.75rem;
    } 
}
@media screen and (max-width:633px){
    #LandingPage p{
        padding: 0px 5px;
        font-size: 1.5rem;
    }
}
@media screen and (max-width:626px){
    .top-container{
        display:grid;
        padding:1rem;
        grid-template-areas:
        'showcase showcase'
        'top-box-b top-box-b'
        'top-box-a top-box-a'
        'info info';
        grid-gap: 10px;
    }
    .top-box-b{
        margin:0 auto;
    }
    .top-box.top-box-a p{
        font-size:0.9rem;
    }
}
@media screen and (max-width:619px){
    .AboutPic img{
    height: 140px;
    }
}
@media screen and (max-width:599px){
    .top-box-a{
        padding-right:0;
        padding-left: 0;
    }
    .portfolio{
    grid-template-columns: repeat(auto-fit,minmax(60px, 1fr));
    }
}
@media screen and (max-width:588px){
    #LandingPage h1{
        font-size: 2.2rem;
    }
    #LandingPage p{
        padding: 0px 0px;
        font-size: 1.4rem;
    }
    .Landing-nav a{
        font-size: 1.8rem;
        padding:0;
    }
    .Landing-nav ul{
        grid-gap:0px;
    }
}
@media screen and (max-width:561px){
    .portfolio img{
        width: 63.5px;
        height: 45px;
    }
    .sub-nav2 ul{
        grid-gap:30px
    }
    .top-box .OH{
        font-size: 0.75rem;
    } 
    .AboutPic img{
        height: 130px;  
    }
    .sub-nav{
        padding-bottom: 8px;
    }
    
}
@media screen and (max-width:554px){
    .AboutPic img{
    height: 120px;
    }
}
@media screen and (max-width:550px){
    .sub-nav2 ul{
        grid-gap: 25px;
    }
    .sub-nav2{
        padding:5px;
    }
    .sub-nav{
        padding:5px;
    }
    .main-nav{
        padding: 10px 40px;
    }
    .main-nav ul{
        grid-gap: 5px 10px;
    }
    .StoneTherapyPricelist{
        font-size:0.6rem;
        display:grid;
        align-items: start;
        text-align: center;
    }
    .portfolio{
        grid-template-columns: repeat(auto-fit,minmax(50px, 1fr));
    }
    .portfolio img{
        width: 51.5px;
        height: 37px;
    }
    
}
@media screen and (max-width:543px){
    #LandingPage p{
        font-size: 1.2rem;
        padding:0px 10px;
    }
}
@media screen and (max-width:508px){
    .AboutPic img{
    height: 115px;
    }
}
@media screen and (max-width:492px){
    .AboutPic img{
    height: 100px;
    }
    .WhoWeAre p{
        font-size:0.8rem;
    }
}
@media screen and (max-width:460px){
    .main-nav a{
        font-size: 0.9rem;
    }
    .main-nav .fas.fa-restroom.fa-4x{
        font-size: 3rem;
        margin:0;
        padding:0;
    }
    .sub-nav{
        padding-bottom:5px;
    }
    .sub-nav2{
        padding:5px;
    }
    .sub-nav2 ul{
        grid-gap:20px;
    }
    .Aboutshowcase h1{
        font-size: 1rem; 
    }
    .showcase h1{
        font-size: 1rem; 
    }
    .beautyshowcase h1{
        font-size: 1rem; 
    }
    .info h2{
        font-size: 0.75rem;
    }
    .Aboutshowcase p{
        font-size: 0.7rem; 
    }
    .showcase p{
        font-size: 0.7rem; 
    }
    .beautyshowcase p{
        font-size: 1rem; 
    }
    .info p{
        font-size: 0.65rem;
    }
    .Aboutshowcase{
        padding:1.5rem;
    }
    .showcase{
        padding:1.5rem;
    }
    .beautyshowcase{
        padding:1.5rem;
    }
    .CuttingPricelist{
        align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
    .charge{
        margin-left:-460px;
        margin-top:-5px;
    }
    .chargeFF{
        margin-left:-400px;
        margin-top:-5px;
        margin-bottom: 6px;
    }
    .chargecc{
        margin-left:-400px;
        margin-top:-5px;
        margin-bottom: 7px;
    }
    .time{
        margin-left:-540px;
        margin-top:1px
    }
    .time2{
        margin-left:-540px;
        margin-top:1px
    }
    
    .StylingPricelist{
        align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
    .ColourPricelist{
       align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
    .PermingPricelist{
        align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
    .GentsPricelist{
        align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
    .KidsPricelist{
        align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
   
    .HandsFeetPricelist{
        align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
    
    .StoneTherapyPricelist{
        align-items: center;
        text-align: center;
        margin:0 auto;
        padding: 0;
    }
    .chargeST{
        margin-left:-540px;
        margin-top:-5px;
    }  
    .timeST{
        margin-left:-540px;
        margin-top:-1px
    } 
    #Patch{
        font-size: 0.6rem;
    }
}
@media screen and (max-width:460px){
    .sub-nav2 ul{
        grid-gap: 8px;
    }
}
@media screen and (max-width:444px){
    .AboutPic img{
    height: 95px;
    }
}
@media screen and (max-width:427px){
    .AboutPic img{
    height: 90px;
    }
    .WhoWeAre p{
        font-size:0.8rem;
    }
}
@media screen and (max-width:430px){
    .AboutPic img{
    height: 145px;
    width: 145px;
    }
    .WhoWeAre p{
        font-size:0.8rem;
    }
}
@media screen and (max-width:425px){
    .portfolio{
        margin-top: -40px;
    }
}
@media screen and (max-width:417px){
    .sub-nav2 a{
        font-size: 0.55rem;
    }
    .sub-nav2 ul{
        grid-gap: 15px;
    }
    .showcase p{
        font-size: 0.7rem;
        padding:0 20px;
    }
    .beautyshowcase p{
        font-size: 0.7rem;
        padding:0 20px;
    }
    .Aboutshowcase p{
        font-size: 0.7rem;
        padding:0 20px;
    }
    .Landing-nav a{
        font-size: 25px;
    }
    .Landing-fix-me{
        font-size: 20px;
        margin-top: -5px;
    }
    #LandingPage h1{
        font-size: 2.1rem;
        margin-top:-125px;
    }
    
}

/*--------------------------------------------------------------------------------------------------------------------------------------- 
------- ---------------------------------------START OF CSS MOBILE DEVICES---------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------  */

@media screen and (max-width:415px){
    .info{
        min-height: 130px;
    }
}
@media screen and (max-width: 414px){
    .logo{
        max-width: 40px;
    }
    .main-nav{
        margin-top:-21px;
    }
    .main-nav a{
        font-size: 0.8rem;
    }
}
@media screen and (max-width:414px) and (max-height:736px){/* iphone 6/7/8 PLUS  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!DONE!!!!!!!!!!!!!!!!!!!!!*/
    .closeBtn{
        color: var(--brandbrown);
        font-size: 30px;
    }
    .portfolio{
        padding: 0;
        margin-top:-60px;
        margin-bottom:20px;
        margin-left: 10px;
    }
    .info{
        margin-top:-14px;
    }
    .AboutUs{
        margin-top: -80px;
    }
    .AboutPic img{
    height: 140px;
    width: 140px;
    }
    .WhoWeAre p{
        font-size:0.8rem;
    }
    .top-box-a{
        margin-top:-10px;
    }
    .top-box-a p{
        margin-top:-10px;
    }
    .showcase{
        margin-top:-25px;
    }
    .beautyshowcase{
        margin-top:-25px;
    }
    .main-nav ul{
        margin-top:-15px;
    }
    .CuttingPricelist{
        margin-top: -30px;
    }
    .StylingPricelist{
        margin-top: -50px;
    }
    .ColourPricelist{
        margin-top: -50px;
    }
    .PermingPricelist{
        margin-bottom: -10px;
        padding-bottom: 203px;
    }
    .GentsPricelist{
        margin-top: -50px;
        margin-bottom: -15px;
        padding-bottom: 56px;
    }
    .KidsPricelist{
        margin-top: -50px;
        margin-bottom: -10px;
        padding-bottom: 194px;
    }
    .HandsFeetPricelist{
        margin-top:-50px;
    }
    .HairRemovalPricelist{
        margin: 0 auto; 
        padding-bottom: 192px; 
    }
    .FinishTouchesPricelist{
        padding-bottom:137px;
    }
    .ScalpMassage{
        margin-top:-60px;
        padding-bottom:0px;
    }
    .PureRelaxPricelist{
        margin-bottom:-1px;
    }
    .FullBody{
        padding-bottom: 0px;
        margin-bottom:-114px;
    }
    .StoneTherapyPricelist{
        padding-bottom: 232px;
    }
    .FaceBodyPricelist{
        margin-top:-30px
    }
    .chargeWax{
        margin-left:-10px;
    }
    .chargeWax2{
        margin-left: 20px;
    }
    .chargeWax3{
        margin-left: -20px;
    }
    .chargeWax4{
        margin-left: 60px;
    }
    .Arms{
        padding:0;
        margin-left:10px;
    }
    .Lip{
        padding:0;
        margin-left:10px;
    }
    .infoPage{
        margin-bottom: 70px;
    }

}
@media screen and (max-height:823px) and (max-width:411px){/*  Pixel 2 XL HEIGHT/Portrait !!!!!!!!!!DONE!!!!!!!!!!!!!!!!!!!!! */
    .closeBtn{
        color: var(--brandbrown);
        font-size: 30px;
    }
    .sub-nav{
        padding: 0px 0px 2px 0px;
     }
    .info{
        padding:6px;
        margin-top:-23px;
        margin-bottom: 43px;
     }
    .portfolio{
        margin-left:-8px;
        padding-top:0px;
        padding-bottom: 18px;
    }
    .top-box-a h4{
        padding-top:0px;
    }
    .top-box-a .OH{
        padding-top:0px;
    }
    .CuttingPricelist{
        margin-top:-40px;
        margin-bottom: -28px;
        padding-bottom: 46px;
    }
    .ColourPricelist{
        margin-top:-50px;
    }
    .StylingPricelist{
        margin-top:-50px;
        margin-bottom: -27px;
        padding-bottom: 35px;
    }
    .PermingPricelist{
        margin-top:-50px;
        margin-bottom: -29px;
        padding-bottom: 326px;
    }
    .GentsPricelist{
        margin-top:-50px;
        margin-bottom: -28px;
        padding-bottom: 123px;
    }
    .KidsPricelist{
        margin-top:-50px;
        margin-bottom: -28px;
        padding-bottom: 266px;
    }
    .HandsFeetPricelist{
        margin-top:-50px;
    }
    #Roller{
        margin-top:-5px;
        margin-bottom:0px;
        padding-bottom: 0px;

    }
    .HairRemovalPricelist{
        margin:10px;
        padding-bottom: 209px;
    }
    .chargeWax{
        margin-left:-10px;
    }
    .chargeWax2{
        margin-left: 20px;
    }
    .chargeWax3{
        margin-left: -20px;
    }
    .chargeWax4{
        margin-left: 60px;
    }
    .Arms{
        padding:0;
        margin-left:10px;
    }
    .Lip{
        padding:0;
        margin-left:10px;
    }

    .FinishTouchesPricelist{
        margin-top:-50px;
        padding-bottom:208px;
    }
    .PureRelaxPricelist{
        margin-top:-100px;
        margin-bottom: -35px;
        padding-bottom: 123px;
    }
    .StoneTherapyPricelist{
        margin-top:-50px;
        padding-bottom:329px;
    }
    .infoPage{
        margin-bottom: 65px;
    }


}
@media screen and (max-height:731px) and (max-width:411px){/*  Pixel 2 HEIGHT/Portrait !!!!!!!!!!!!!DONE!!!!!!!!!!!!!!!!!!!!! */
    .portfolio{
        margin-top:-55px;
        margin-left: 10px;
    }
    .main-nav{
        margin-top:-25px;
    }
    .top-box-a h4{
        margin-top:-9px;
    }
    .top-box.top-box-a p{
        font-size:0.8rem;
        padding-bottom:5px;
        margin-top: -8px;
    }
    .PermingPricelist{
        margin-top:0;
        margin-bottom: -10px;
        padding-bottom: 210px;
    }
    .GentsPricelist{
        margin-bottom: -10px;
        padding-bottom:58px;
    }
    .KidsPricelist{
        margin-bottom: -10px;
        padding-bottom: 200px;
    }
    #Roller{
        font-size: 0.7rem;
        margin-top:-15px;
        margin-bottom: -10px;

    }
    .HairRemovalPricelist{
        padding-bottom: 172px;
    }
    #Patch{
        padding-bottom: 20px;
    }
    .FinishTouchesPricelist{
        margin-bottom:123px;
        padding-bottom:17px;
    }
    .PureRelaxPricelist{
        margin-top:-40px;
        margin-bottom: 117px;
        padding-bottom: 36px;
    }
    .StoneTherapyPricelist{
        margin-top:-4px;
        margin-bottom: 62px;
        padding-bottom:171px;
    }
    .FaceBodyPricelist{
        margin-top: -50px;
    }
    .infoPage h2{
        margin-bottom:-10px;
    }
    .infoPage{
        margin-top:-5px;
    }

}
@media screen and (max-width:407px){
    .portfolio{
        grid-template-columns: repeat(auto-fit,minmax(50px, 1fr));
    }
    .portfolio img{
        width: 51.5px;
        height: 37px;
    }
    .HairRemovalPricelist{
        padding:0;
        margin:0 auto;
        align-items: center;
        grid-column-gap:30px;
    }
    #Roller{
        padding:0;
        margin:0 auto;
    }

    .chargeWax{
        margin-left:-50px;
    }
    .chargeWax2{
        margin-left:-10px;
    }
    .chargeWax3{
        margin-left:-50px;
    }
    .chargeWax4{
        margin-left:20px;
    }
}
@media screen and (max-width:399px){
    
    .portfolio{
        padding-left: 25px;
        margin-top:0px;
    }
    .portfolio img{
        width: 46.5px;
        height: 33px;
    }
    .sub-nav ul{
        grid-gap: 3px;
    }
    .sub-nav a{
        font-size:0.55rem;
    }
    .sub-nav2 a{
        font-size:0.55rem;
    }
    .sub-nav2 ul{
        grid-gap:7px;
    }
    .portfolio{
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit,minmax(50px, 1fr));
    }
    .top-box.top-box-b{
        display: none;
    }
    .top-box .top-box-a{
        padding:0;
    }
    .Aboutshowcase p{
        font-size:0.7rem;
    }
    .showcase p{
        font-size:0.7rem;
    }
    .beautyshowcase p{
        font-size:0.7rem;
    }
    .AboutPic img{
        height: 125px;
        width: 125px;
    }
    .WhoWeAre p{
        font-size:0.8rem;
        margin-top:-10px
    }

}
@media screen and (max-width:375px) and (max-height:667px){/* iphone 6/7/8   !!!!!!!!!!!!!DONE!!!!!!!!!!!!!!!!!!!!!  */    
    .info{
        margin:0;
        margin-top:-30px;
        margin-bottom: -40px;
        min-height: 100px;
    }
    .top-box h4{
        margin:0;
        margin-bottom:10px;
    }
    .top-box .top-box-a p{
        padding:1px;
    }
    .sub-nav{
        margin-bottom: 20px;
    }
    .portfolio{
        margin-top:39px;
        margin-left:-5px; 
    }
    .top-box .top-box-a{
        margin: 0 auto;
        padding:0;
        text-align: center;
    }
    .PermingPricelist{
        margin-bottom:-92px;
    }
    .KidsPricelist{
        margin-bottom:-91px;
    }
    .HairRemovalPricelist{
        margin-bottom:120px;
    }
    .FinishTouchesPricelist{
        margin-bottom: 0px;
        margin-bottom: 60px;
    }
    .StoneTherapyPricelist{
        margin-bottom:-1px;
    }
    .infoPage{
        margin-bottom:-30px;
    }

}
@media screen and (max-width:370px){
    .AboutPic img{
    height: 110px;
    width: 110px;
    }
}
@media screen and (max-height:768px) and (orientation:landscape){/*  IPAD Landscape */
    .portfolio{
        margin-top:14px;
    }
}
@media screen and (max-height:731px){
    .portfolio{
        padding-top:0px;
        padding-bottom: 0px;
    }
}
@media screen and (max-width:360px){/* Small Smart Phones DONE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DONE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
    .portfolio{
        margin-top:25px;
        margin-bottom:6px;
    }
    .info{
       min-height: 120px; 
    }
    .PermingPricelist{
        padding-bottom:100px;
        margin-bottom: -7px;
    }
    .KidsPricelist{
        padding-bottom:100px;
        margin-bottom: -16px;
    }
    .HairRemovalPricelist{
        margin-bottom:94px;
    }
    .FinishTouchesPricelist{
        margin-bottom:34px;
    }
    .StoneTherapyPricelist{
        margin-top:-30px;
    }

}
@media screen and (max-width:353px){
    .AboutPic img{
    height: 110px;
    width: 110px;
    }
    .WhereAre h4{
        font-size: 0.8rem;
    }
}
@media screen and (max-width:340px){
    .AboutPic img{
    height: 105px;
    width: 105px;
    }
    .top-box-a{
        margin-top:-20px;
    }
    .top-box-a p{
        margin-top:-10px;
    }
    .portfolio{
        padding-left:6px;
        margin-top:-23px;
    }
}
@media screen and (max-width:330px){
    #LandingPage h1{
        font-size: 1.9rem;
        margin-top:-105px;
    }
    #LandingPage p{
        font-size: 0.9rem;
        margin-top:45px;
    }
    #LandingPage .button{
        margin-top:200px;
        padding:7px 14px;
    }
    .AboutPic img{
        height: 100px;
        width: 100px;
    }
}
@media screen and (max-width:323px){
    .AboutPic img{
    height: 100px;
    width: 100px;
    }
}
@media screen and (max-width:568px) and (orientation: landscape){ /* iphone 5/SE lanscape  */
    #LandingPage .button{
        margin-top:-30px;
    }
    .Landing-nav{
        margin-top:40px;
    }
    .Landingfooter{
        margin-top:-80px;
    }
    .top-container{
        padding:0;
    }
    .top-box.top-box-a p{
        font-size: 0.5rem;
    }
}
@media screen and (max-width:320px){
    .AboutPic img{
    height: 95px;
    width: 95px;
    }
    .WhereAre h4{
        font-size: 0.75rem;
    }
    .info{
        min-height: 80px;
        margin-top:-40px;
    }
    .info p{
        font-weight: normal;
    }
    .sub-nav{
        margin-bottom:0;
    }
    .portfolio{
        margin-left:8px;
        margin-top:20px;
        margin-bottom: -8px;
    }
    .PermingPricelist{
        margin-top:-50px;
        margin-bottom:-10px;
    }
    .KidsPricelist{
        margin-bottom: -85px;
    }
    #Roller{
        margin-top:-30px;
    }
    .HairRemovalPricelist{
        margin-bottom: 37px;
    }
    #Patch{
        margin-top:-30px;
        margin-bottom: -20px;
    }
    .FinishTouchesPricelist{
        margin-top:-70px;
        margin-bottom: 14px;
    }
    .StoneTherapyPricelist{
        padding-bottom: 70px;
        margin-bottom: 12px;
    }
}