:root {
  /*--yellow: goldenrod;*/
  --gold: #f8931f;
  /*--shadow: 0 1px 20px rgba(104, 104, 104 ,0.8);*/
  --shadow: 0 1px 20px rgba(255, 127, 80, 0.8);
  --grey: #343436;
  --blue: #535063;
  --lightblue: #76718e;
  --cream: #eee5be;
  --brown: #b96e16;
  --black: #000;
}

* {
  margin: 0;
  padding: 0;
}

html {
  /*color: #444;*/
  color: var(--blue);
  font-family: Cambria, Cochin, Georgia, 'Times New Roman', Times, serif;
  /*font-family: 'Oxygen', sans-serif;*/
  /*font-size: 20px;*/
  box-sizing: border-box;
  font-size: 62.5%;
  font-weight: 500;
}

body {
  font-size: 1.4rem;
}

img {
  max-width: 100%;
  /*display: block;*/
  height: auto;
}

/*  ###############################################################  */
/*  Navigation */

nav {
  position: fixed;
  width: 100%;
  z-index: 10;
  flex: 0 0 auto;
  /*font-family: 'Oxygen', sans-serif;*/
}

nav ul {
  list-style-type: none;
  display: none; /* display index list with toggle btn */
}

nav ul a {
  display: block;
  background: var(--blue);
  padding: 20px;
  font-size: 1.7rem;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 2s ease, background 1s ease, padding 1s ease;
}

nav ul a:hover {
  background: var(--lightblue);
  color: #e0e0ce;
  padding-left: 30px;
}

.nav-container {
  padding: 0 20px;
  /*background: #474747;*/
  /*background: var(--blue);*/
  background: rgba(83, 80, 99, 0.9);
  border-bottom: 3px solid var(--gold);
  display: flex;
  justify-content: space-between;
}

.nav-container img {
  width: 240px;
  align-self: center;
}

.btn {
  padding: 1.8px;
  display: inline-block;
  border: 1.4px solid var(--gold);
  align-self: center;
}

.bar {
  width: 22px;
  height: 2px;
  margin: 6px;
  background: var(--gold);
}

/* nav media queries*/

@media screen and (min-width: 776px) {
  .nav-container {
    display: none;
  }
  nav ul {
    display: flex !important; /*!imp stops nav vanish on scrn resize*/
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(83, 80, 99, 0.8);
  }
  nav ul a {
    background: transparent; /* set transparancy of nav */
  }
  nav ul a:hover {
    background: transparent;
    padding-left: 20px;
  }
}

/*  ###############################################################  */

header {
  min-height: 85vh;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7)), url(img/c.jpg) center/cover scroll no-repeat;
  /*background: url(img/c.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;*/
  display: flex;
  flex-direction: column;
}

.banner {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.banner h1 {
  font-size: 2.8rem;
  text-transform: uppercase;
  color: var(--gold);
}

.banner h3 {
  text-transform: capitalize;
  font-size: 2.5rem;
  color: var(--blue);
  padding: 50px 0;
  font-style: italic;
}

.banner img {
  margin: 0 auto;
}

.banner-icons {
  padding: 20px;
}

.banner-icons a {
  display: inline-block;
  font-size: 3rem;
  background: var(--blue);
  padding: 5px 10px;
  margin: 0 10px;
  border-radius: 50%;
  color: #f5f3f5;
  transition: color 1s ease, transform 1s ease;
}

.banner-icons a:hover {
  color: var(--gold);
  transform: translateY(-10px);
}

/* banner media queries*/

@media screen and (min-width: 776px) {
  .banner h3 {
    font-size: 3.5rem;
  }
  header {
    min-height: 85vh;
    background-attachment: fixed;
  }
}

/*  ###############################################################  */

.about {
  display: grid;
  max-width: 1000px;
  margin: 10px auto;
  grid-gap: 10px 10px;
  grid-template-columns: 3fr 12fr 5fr;
}
/*make all direct descendants of .about occupy center col*/

.about > blockquote {
  grid-column: 1 / -1;
  font-size: 2.6rem;
  font-style: italic;
  text-align: center;
  margin: 0;
  /*color: #444;*/
  color: var(--gold);
}

.about > .about-p {
  grid-column: 1 / -1;
  font-size: 1.7rem;
  font-style: italic;
  text-align: center;
  margin: 3rem 3%;
}

@media screen and (min-width: 776px) {
  .about > blockquote {
    font-size: 3.5rem;
  }
  .about > .about-p {
    font-size: 2.2rem;
  }
}

/*@media screen and (min-width: 577px) and (max-width: 991px) {
 .about>blockquote{
  	font-size: 4.0rem;
  }

} */

/*  ###############################################################  */
/* Cuts gallery*/

.title h2 {
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
}

.title-underline {
  background: var(--gold);
  width: 100px;
  height: 4px;
  margin: 10px auto;
}

.title {
  padding: 50px 0;
}

.cuts {
  padding: 0 0 0 0;
  background: #f5f3f5;
}

.cuts-center {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 2rem 1rem 2rem;
}

.cut {
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
  overflow: hidden;
}

.cuts img {
  width: 100%;
  display: block;
  transition: opacity 2s ease, transform 2s ease;
}

.cuts img:hover {
  opacity: 0.3;
  cursor: pointer;
  transform: scale(1.3); /* a value of less than 1 to zoom out  ie 0.6 */
}

/*   cuts gallery set with grid  */

@media screen and (min-width: 576px) {
  .cuts-center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 4rem 1rem 4rem;
  }
}

/*@media screen and (min-width:1024px){
  .cuts-center{
    grid-template-columns: repeat(4, 1fr);
    padding: 0 20px;
  }
}*/

/*  ###############################################################  */
/* Break section*/

.break {
  /* font-family: arial, helvetica, sans-serif; */
  font-family: Cambria, Cochin, Georgia, 'Times New Roman', Times, serif;
  height: 15vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin: 5px 0 0 0;*/
}

.break1 {
  background-image: url(img/paisley.png);
}

.break2 {
  background-image: url(img/curls3.png);
}

.break3 {
  background-image: url(img/curls2.png);
}

@media screen and (min-width: 776px) {
  .break {
    height: 20vh;
    /*margin: 10px 0 0 0;*/
  }
}

/*  ###############################################################  */

/*  default styling */

.wrapper {
  padding: 0rem 3% 0rem 3%;
  background: #fff;
  /*max-width: 800px;*/
  /*margin: 0 auto;*/
  /*display: grid;*/
}

.wrapper .small-img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.wrapper2 {
  padding: 0;
  background: #fff;
}

.wrapper h1,
.wrapper2 h1 {
  text-align: center;
  text-transform: capitalize;
  font-style: italic;
  font-size: 2.2rem;
  color: var(--blue);
  font-family: 'Oxygen', sans-serif;
}

.wrapper p,
.wrapper2 p {
  text-align: center;
  /*text-transform: capitalize;*/
  font-style: italic;
  font-size: 1.7rem;
  color: var(--blue);
  padding: 1rem 1rem;
}

.wrapper-underline,
.wrapper2-underline {
  background: var(--blue);
  width: 120px;
  height: 3px;
  margin: 5px auto;
}

.ctr-img {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
.ctr-img > img {
  width: 100px;
}

.pad-top {
  padding-top: 10rem;
}
.pad {
  padding-top: 4rem;
}
.pad20 {
  padding-top: 2rem;
}

.padflex {
  padding-top: 25rem;
}

@media screen and (min-width: 776px) {
  .wrapper2 {
    padding: 0rem 5% 0rem 5%;
    background: #fff;
  }
  .wrapper {
    padding: 0rem 5% 0rem 5%;
    background: #fff;
    /*max-width: 800px;*/
    /*margin: 0 auto;*/
    /*display: grid;*/
  }
  .wrapper h1,
  .wrapper2 h1 {
    font-size: 2.6rem;
  }
  .wrapper p,
  .wrapper2 p {
    font-size: 2.2rem;
    padding: 1rem 1rem;
  }
  .pad-top {
    padding-top: 7rem;
  }
  .pad {
    padding-top: 8rem;
  }
  .pad20 {
    padding-top: 3rem;
  }
  .padflex {
    padding-top: 1rem;
  }
}

/*  ###############################################################  */
/* cruelty free images*/

.cfree {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /*padding: 1rem 2rem;*/
  width: 90%;
}

.cfree img {
  flex: 0 1 auto;
  height: 70px;
  padding: 1rem 1rem;
}

@media screen and (min-width: 776px) {
  .cfree {
    /*padding: 1rem 2rem;*/
  }
  .cfree img {
    height: 90px;
    padding: 1.5rem 1rem;
  }
}

/*  ###############################################################  */

/*  Pricing */

.underline {
  /*border-bottom: 1px solid #000;*/
  border-bottom: 1px solid var(--blue);
  width: 100%;
  display: inline-block;
  line-height: 2;
}

.nounderline {
  border-bottom: 1px solid #fff;
}

.boxes {
  margin-top: 2rem;
  display: grid;
  grid-gap: 20px;
  /*grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));*/
  grid-template-columns: 1fr;
  font-family: 'Oxygen', sans-serif;
}

.box {
  /*text-align: center;*/
  padding: 1.5rem 2rem;
  /*text-align: left;*/
  /*box-shadow: var(--shadow);*/
  background: white;
  /*background: #fff;*/
  display: grid;
}

.box h3 {
  padding: 10px;
  display: block;
  background: white;
  color: var(--blue);
  text-transform: capitalize;
  /*font-style: italic;*/
  font-style: normal;
  font-size: 2.2rem;
  text-align: center;
}

.box p {
  padding: 5px;
  display: block;
  background: white;
  color: var(--blue);
  text-transform: capitalize;
  /*font-style: italic;*/
  font-style: normal;
  font-size: 1.6rem !important;
  /*border: 2px solid var(--gold);*/
  text-align: left;
}

.box img {
  width: 80%;
  justify-self: center;
}

@media screen and (min-width: 776px) {
  .boxes {
    grid-template-columns: 1fr 1fr;
  }
  .box p {
    font-size: 1.8rem;
  }
  .box h3 {
    font-size: 2.2rem;
  }
}

/*@media screen and (min-width: 577px) and (max-width: 991px) {
 .boxes {
    grid-template-columns: repeat(2, 1fr);
  }
  .box p { font-size: 2.0rem;}
}*/

/*###############################################################  */
/* Testimonials*/

.testimonial {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.testimonials {
  display: grid;
  grid-template-columns: 1fr;
}

.testimonials img {
  width: 80%;
  justify-self: center;
}

@media screen and (min-width: 576px) {
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonials img {
    width: 100%;
  }
}

/*###############################################################  */

/* contact me*/

.contact {
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)), url(img/e1.jpg) bottom/cover scroll no-repeat;
  min-height: 150vh;
  /*display: grid;*/
  /*grid-template-columns:  1fr;*/
}

.contact p {
  line-height: 5rem;
}

.contact img {
  width: 100%;
  max-width: 200px;
  display: block;
  margin: auto;
}

.contact .map {
  width: 98%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border: 2px solid var(--gold);
}

form {
  padding: 20px 10px;
  background-color: rgba(255, 255, 255, 1);
  margin: 30px 1% 30px 1%;
  border: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  font-family: 'Oxygen', sans-serif;
}

.form-row {
  flex: 0 1 auto;
  padding: 15px 4px;
  display: flex;
  justify-content: center;
  font-family: 'Oxygen', sans-serif;
}

.form-row label {
  padding-right: 10px;
}

.form-row input,
.form-row textarea {
  flex: 1;
}

.form-row button {
  background: var(--gold);
  color: var(--blue);
  padding: 0.7rem 1rem;
  border: 0;
}

/* not used but how to centre with flex box*/
.hero {
  height: 200px;
  background: rgba(255, 0, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 776px) {
  form {
    margin: 30px 10% 30px 10%;
  }
  .contact .map {
    max-width: 80%;
  }
  .contact img {
    max-width: 300px;
  }
  /*.contact {background-attachment: fixed;}*/
  .contact {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)), url(img/e1.jpg) center/cover fixed no-repeat;
    min-height: 150vh;
  }
}

/*@media screen and (max-width: 576px) {
 .contact-me {
    grid-template-columns: 1fr;
  }
   .contact-form {
    grid-template-columns: 1fr;
  }
}*/

/*  ###############################################################  */
/* Footer section*/

footer {
  background: var(--blue);
  min-height: 15vh;
  display: grid;
  font-size: 2rem;
  color: var(--gold);
  /*text-align: center;*/
  /*justify-items: center;*/
  /*align-items: center;*/
  font-size: 1.6rem;
  padding: 1rem 10% 2rem 10%;
  /*grid-gap: 2rem;*/
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0.5rem;
  grid-template-areas:
    'ahead ahead'
    'area1 area2'
    'chead chead'
    'contact contact'
    'copy copy';
}

footer .underline {
  /*border-bottom: 1px solid #000;*/
  border-bottom: 1px solid var(--gold);
  width: 100%;
  display: inline-block;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.areas-title {
  grid-area: ahead;
}

.areas1 {
  grid-area: area1;
}

.areas2 {
  grid-area: area2;
  margin-bottom: 20px;
}

.comtact-title {
  grid-area: chead;
}

.contact-details {
  grid-area: contact;
  margin-bottom: 10px;
}

.copy {
  grid-area: copy;
  text-align: center;
}

@media screen and (min-width: 576px) {
  footer {
    grid-template-columns: 2fr 2fr 3fr;
    grid-template-areas:
      'ahead ahead chead'
      'area1 area2 contact'
      'copy copy copy';
    grid-column-gap: 4rem;
  }
  footer .areas-title {
    grid-area: ahead;
    /*grid-column: 1/3;*/
    /*justify-self: center;
  align-self: center;*/
  }
  footer .areas1 {
    grid-area: area1;
    /*grid-column: 1/2;*/
  }
  footer .areas2 {
    grid-area: area2;
    /*grid-column: 2/3;*/
  }
  footer .contact-title {
    grid-area: chead;
    /*grid-column: 3/4;*/
  }
  footer .contact-details {
    grid-area: contact;
    /*grid-column: 3/4;*/
  }
}

/*  ###############################################################  */

/* image gallery */

.wrap {
  padding: 50px;
  font-family: sans-serif;
  /*background: linear-gradient(to right, #F93D66, #6D47D9);*/
  background: linear-gradient(to right, #b96e16, #eee5be);
}

.close {
  background: none;
  color: black;
  border: 0;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
}
.item {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1;
}
.item img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item__overlay {
  background: #ffc60032;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  transition: 0.5s;
  transform: translateY(100%);
}
.item__overlay button {
  background: none;
  border: 2px solid white;
  color: white;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  padding: 5px;
}
.item:hover .item__overlay {
  transform: translateY(0);
}
.item.v2 {
  grid-row: span 2;
}
.item.v3 {
  grid-row: span 3;
}
.item.v4 {
  grid-row: span 4;
}
.item.h2 {
  grid-column: span 2;
}
.item.h3 {
  grid-column: span 3;
}
.item.h4 {
  grid-column: span 4;
}
.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 2;
}
.overlay.open {
  display: grid;
  align-items: center;
  justify-items: center;
}
.overlay-inner {
  background: white;
  width: 720px;
  padding: 20px;
}
.overlay img {
  background: #fee;
}

@media screen and (max-width: 576px) {
  .overlay-inner {
    background: white;
    width: 100%;
    /*width: 720px;*/
    padding: 20px;
  }
  .wrap {
    padding: 0;
  }
}