/* Box Model Hack */
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 16px;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body, html{
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}


.second, .third, .fourth, .fifth, .sixth, .seventh {
  padding: 0 15%;
}

/******************************************
/* LAYOUT
/*******************************************/
header {
  height: 10%;
  width: 100%;
  padding: 0 5%;
}

.first {
  height: 700px;
  width: 100%;
  padding: 0 10%;
  background: url("https://pbs.twimg.com/media/FLUCUd6XECMYEQm?format=jpg&name=4096x4096");
  background-size: cover;
  padding-right: 30%;
  padding-top: 10%;
}

.second {
  height: 50%;
  width: 100%;

}

.third {
  height: 50%;
  width: 100%;
  background: #f3f4f6;
}

.fourth {
  height: 60%;
  width: 100%;
}

.fifth {
  height: 50%;
  width: 100%;
  background: #f3f1f4;
  text-align: center;
  padding-top: 3rem;
}

.sixth {
  height: 30%;
  width: 100%;
  text-align: center;
  padding-top: 3.8rem;
}

.seventh {
  height: 100%;
  width: 100%;
}

.col-1-3 {
  height: 100%;
  width: 31.3%;
  float: left;
  margin: 0 1%;
  text-align: center;
}

.col-1-2 {
  height: 100%;
  width: 50%;
  float: left;
}

.sqr {
  height: 33%;
  width: 98%;
  float: left;
  margin: 1% 1%;
}

.rect {
  height: 63%;
  width: 98%;
  float: left;
  margin: 1% 1%;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/

a {
  text-decoration: none;
  color: white;
}

.inline {
  display: inline-block;
  margin-right: 3%;
}

.inline:last-child {
  float: right;
}

.inline a {
  color: black;
}

.third-gal {
  background: url("https://pbs.twimg.com/media/FLUCUe3XEAwVqJw?format=jpg&name=900x900");
  background-size: cover;
}

.fourth-gal-1 {
  background: url("https://pbs.twimg.com/media/FLUCUfiXEB42VCS?format=jpg&name=small");
  background-size: cover;
}

.fourth-gal-2 {
  background: url("https://pbs.twimg.com/media/FLUCUgIX0AALBnI?format=jpg&name=small");
  background-size: cover;
}

.fourth-gal-3 {
  background: url("https://pbs.twimg.com/media/FLUCfS2X0AEFgrj?format=jpg&name=small");
  background-size: cover;
}

.sth-gal-1 {
  background: url("https://i.pinimg.com/originals/12/93/25/12932562c9ee876e5c034c7bfd25019e.jpg");
  background-size: cover;
}

.sth-gal-2 {
  background: url("https://www.avantgardesalonandspa.com/image/cache/AG-HOME-Galleries/Balayage/Balayage-Hair-by-Avant-Garde-Hair-Salon-1111x1311.jpeg");
  background-size: cover;
}

.sth-gal-3 {
  background: url("https://static.wixstatic.com/media/49086a_0a466cfa6a174af49b82a9d394276d81~mv2.jpg/v1/fill/w_640,h_426,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/49086a_0a466cfa6a174af49b82a9d394276d81~mv2.jpg");
  background-size: cover;
}

.sth-gal-4 {
  background: url("https://sev.h-cdn.co/assets/16/31/4000x3000/sd-aspect-1470329681-gettyimages-182656193.jpg");
  background-size: cover;
}

.sth-gal-5 {
  background: url("https://www.newbeauty.com/wp-content/uploads/2020/05/hairsalon-1024x736.png");
  background-size: cover;
}

.sth-gal-6 {
  background: url("https://t3.ftcdn.net/jpg/02/19/38/54/360_F_219385465_IQgSvWCyRjA0aR3nFffCqkDfjuCC85NG.jpg");
  background-size: cover;
}

nav {
  text-align: center;
  padding: 1.7% 0;
}

h1 {
  font-size: 5rem;
  color: white;
}

h3 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  color: white;
}

.btn {
  padding: 1rem;
  background: black;
}

.box {
  padding: 2%;
  background: black;
  margin-top: 3rem;
  width: 40%;
}

.first h2 {
  color: white;
  margin-bottom: 3rem;
  font-weight: bold;
  font-size: 1.2rem;
}

div .btn {
  background: white;
  color: black;
}

img {
  width: 50px;
  height: auto;
  margin-top: 3rem;
}

.second h4 {
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: bold;
}

p {
  margin: 2rem 0;
}

.third h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2rem;
}

.fourth .col-1-3 {
  padding-top: 31.5%;
}

.fifth h6 {
  font-weight: bold;
  font-size: 1.2;
}

.fifth h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.sixth h2 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.sixth div {
  height: 3px;
  width: 28px;
  background: black;
  margin: auto;
}

.padding {
  padding-right: 2rem;
}

@media (max-width: 768px) {
  
}