/* Box Model Hack */
* {
     box-sizing: border-box;
}

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

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
html{
     font-size: 10px;
     box-sizing: border-box;
     
}
body {

     font-family: "Roboto Flex", sans-serif;
     font-size: 2.2em;
     font-weight: 100;
     /* width:100%; */
}

/* Nav */

body {
		padding-top: 3.25em;
          /* width: 192rem; */
          /* width: 160rem; */
	}

	#nav {
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 1000;
		background-color: rgba(113, 183, 226, 1);
		/* background-image: url("../../images/overlay.png"); */
		width: 100%;
		height: 3.9em;
		line-height: 3.25em;
		text-align: center;
		font-family: "Roboto Flex", sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		cursor: default;
          display: flex;
          justify-content: center;
	}

		#nav ul {
			position: relative;
			z-index: 1001;
               margin: 0;
               padding: 0;
		}

		#nav li {
			display: flex;
               flex-direction: row;
               justify-content: center;
               justify-self: center;

			margin: 0 0.5em 0 0.5em;
			top: 0;
			position: relative;
			-moz-transition: top .15s ease-in-out;
			-webkit-transition: top .15s ease-in-out;
			-o-transition: top .15s ease-in-out;
			-ms-transition: top .15s ease-in-out;
			transition: top .15s ease-in-out;
		}

			#nav li > ul {
				display: none;
			}

			#nav li a, #nav li span {
				-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				transition: background-color .075s ease-in-out, color .075s ease-in-out;
				position: relative;
				display: block;
				text-decoration: none;
				color: rgb(0, 0, 0);
				top: -8px;
				padding: 5px 1.5em 0.25em 1.5em;
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
				outline: 0;
                    font-family: "Roboto Flex", sans-serif;
                    font-size: 1.5em;
                    font-weight: 100;
                    text-transform: none;
			}

			#nav li:hover, #nav li.active {
				top: 3px;
			}

			#nav li:hover a, #nav li:hover span {
				background: rgb(7, 101, 159);
				color: #ffffff;
			}

			#nav li.active a, #nav li.active span {
				background: #C1CAC5;
				color: #fff;
			}

			#nav li.current a {
				background: rgba(113, 183, 226, 1);
				color: #fff;
			}

/******************************************
/* LAYOUT
/*******************************************/
header{
     height: 0px;
     width: 100%;
    /*border: 2px solid black;*/
     clear: both;
     float: left;
     background: rgba(113, 183, 226, 1);
     font-weight: bold;
     font-size: 1.4rem;
}
header nav ul{
     float: left;
     width: 100%;
     padding-top: 0px;
     padding-bottom: 10px;
     list-style-type: none;
     padding-left: 0px;
}
header nav li{
     float: left;
     text-decoration: none;
     width: 15%;
     padding-left: 0px;
     padding-top: 5px;
     text-align: center;
}
header nav li > a{
     text-decoration: none;
     color:rgba(113, 183, 226, 1);
}
#logo{
     height: auto;
     width: 20rem;
     float: left;
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     padding: 10px 0px 0px 10px;
}
img{
     padding: 0px;
     margin-left: 0px;
}
#main{
     height: 70rem;
     width: 100%;
     float: left;
     /*border: 2px solid black;*/
     background-image: url("../images/jovaughn-stephens-UCZrHNUEdX8-unsplash.jpg");
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: top;
     /*Photo by <a href="https://unsplash.com/@jovaughnstephens?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Jovaughn Stephens</a> on <a href="https://unsplash.com/photos/three-women-sitting-on-shore-near-trees-at-daytime-UCZrHNUEdX8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>*/
      
}
#main.container1{
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: flex-start;
     width: 192rem;
     height:60rem;
     padding-top: 20px;
     margin-top: -50px;
     margin-bottom: 0px;
     margin-left: -10px;
     box-sizing: border-box;
}
#main h1{
     height: 30%;
     width: 5rem;
     font-size: 94px;
     font-weight: normal;
     text-decoration: none;
     color: rgba(113, 183, 226, 1);
     padding-top: 80px;
     padding-left: 120px;
     border: none;
     margin: 5px 5px 20px 5px;
}
#main p{
     width:100%;
     font-size: 1.8em;
     color: white;
     padding-left: 130px;
     padding-top: 10px;
     padding-bottom: 10px;
     font-weight: 300;
}
#main #button1{
     display: none;
     /* width: 10%;
     height: 10%;
     text-align: center;
     font-size: 1.6rem;
     color: black;
     background: rgba(113, 183, 226, 1);
     padding: 20px 10px 20px 10px;
     border: none;
     border-radius: 5px;
     margin: 0px 0px 0px 130px;
     cursor: pointer; */
}
#main img{
     width: 65rem;
     height: auto;
     margin-top: 0px;
     margin-right: 0px;
     padding: 20px;
}
#inset {
     display: flex;
     flex-direction: column;
     width: 25rem;
     height: 25rem;
     background: rgba(113, 183, 226, 1);
     color: black;
     border: none;
     border-radius: 15px;
     padding: 20px 20px 20px 20px;
     margin-bottom: 0px;
     margin-left: 3em;
}
#inset > h3{
     width: auto;
     display: flex;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     align-self: center;
     font-size: 1.1em;
     margin: 0;
     color: rgb(7, 101, 159);
}
#inset h4{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     align-self: center;
     font-size: 4.6rem;
     font-weight: bold;
     margin-bottom: 0px;
     margin-top: 0px;
     padding: 0 0 0px 0;;
     color: rgb(7, 101, 159);
}
#inset p{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     align-self: center;
     font-size: 0.9em;
     margin: 0 0 0 0;
     padding: 0px;
     color: rgb(7, 101, 159);
     
}
#inset #button2{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     align-self: center;
     width: 7em;
     height: 3em;
     color: black;
     font-size: 1.7rem;
     background: white;
     padding: 5px;
     border-radius: 5px;
     border: none;
     cursor: pointer;
     clear: both;
     margin-top: 30px;
     text-align: center;
     text-decoration: none;
}
#main h3{
     /* display: none; */
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     align-self: center;
     color: rgb(255, 255, 255);
     font-weight: normal;
     font-size: 2.0em;
     font-style: italic;
     width: 5em;
     height: auto;
     padding: 0;
     /* transform: rotate(90deg); */
     /* transform-origin: top left; Rotates around the top-left corner */ 
     /* position: absolute;*/
     top: 300px;
     left: 1870px;
}
#about {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     align-self: center;
     max-width: 100%;
     min-width: 40%;
     height: auto;
     padding-top: 80px;
     padding-bottom: 80px;
}
#about h1{
     display: flex;
     width: 100%;
     height: auto;
     font-size: 3em;
     font-weight: 100;
     padding-top: 20px;
     padding-bottom: 20px;
     font-family: "Roboto Flex", sans-serif;
     margin: 0 0 0 20px;
}
#about p{
     display: flex;
     width: 90%;
     height: auto;
     align-items:flex-start;
     font-size: 2.8rem;
     font-weight: 100;
     font-family: "Roboto Flex", sans-serif;
     margin: 0 0 0 20px;
     padding-bottom: 40px;
     padding-top: 10px;
}
#about #buttonAbout{
     width: 8em;
     height: auto;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     align-self: center;
     color: white;
     font-size: 2.2rem;
     background: rgb(7, 101, 159);
     padding: 20px;
     cursor: pointer;
     margin-bottom: 0px;
     text-align: center;
     border: none;
     border-radius: 5px;
     text-decoration: none;
}
#services {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     height: auto;
     max-width: 100%;
     min-width: 40%;
     padding-top: 4rem;
     padding-bottom: 4rem;
}
#services h1{
     display: flex;
     width: 100%;
     height: auto;
     font-size: 3em;
     font-weight: 100;
     padding-top: 20px;
     padding-bottom: 20px;
     font-family: "Roboto Flex", sans-serif;
     margin: 0 0 0 20px;
}
#services ul h2{
     font-family:"Roboto Flex", sans-serif;
     font-size: 2em;
     font-weight: 300;
     width: 100%;
     color:rgb(7, 101, 159);
}
#services ul p{
     font-size: 1.1em;
     font-family:"Roboto Flex", sans-serif;
     font-weight: 100;
     text-align: left;
     padding: 5px;
}
 #services #icon1 , #services #icon2 , #services #icon3 {
     height: auto;
     width: 33%;
     float: left;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     padding-top: 20px;
     padding-bottom: 20px;
     text-decoration: none;
}
#services h2{
     width: 30%;
     height: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     /* float: left; */
     padding: 5px 5px 20px 5px;
     margin: 0px;
     color:rgba(113, 183, 226, 1);
}
#services p{
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     float: left;
     padding: 5px;
     color:black;
     margin: 0 0px 50px 0px;
     font-family:"Roboto Flex", sans-serif;
     font-size: 1.1em;
     /* border: black 1px solid;  */
}
#momentum {
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
     align-items:flex-start;     
     justify-content: flex-start;
     background: rgba(113, 183, 226, 1);
     color: black;
     background-image: url("../images/jabari-timothy-20e5uGmm2Es-unsplash.jpg");
     background-repeat: no-repeat;
     background-size: 50% auto;
     background-position:center right;
     border-radius: 0%;
     padding: 80px 0 80px 0;
     margin-bottom: 0px;
     margin-left: -10px;
     margin-right: -10px;
     font-family:"Roboto Flex", sans-serif;
}
#momentum h3{
     width: 100%;
     padding: 2px;
     margin: 20px 0 0 30px;
     font-size: 3em;
     color:black;
     font-weight: 300;
     text-transform: capitalize;
     
}
/* momentum h4{
     width: 100%;
     /* float: left; */
     /* padding: 2px;
     margin: 0px 0 20px 30px;
     font-size: 2.5rem;
     color:rgba(83, 49, 108, 1);
} */
#momentum p{
     width: 100%;
     float: left; 
     clear: both;
     margin-left: 30px;
     padding-right: 990px; 
     margin-bottom: 30px;
     color:black;
     font-size: 1.1em;
}
#momentum a{
     /* float: left;
     color:black;  */
     text-decoration: none;
     margin-right: 0;
}
#momentum #buttonMO{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     width: 8em;
     height: auto; 
     float: left;
     clear: both; 
     font-size: 2.2rem;
     color: white;
     background: rgb(7, 101, 159);
     padding: 20px;
     cursor: pointer;
     margin: 0 0 0 12em;
     text-align: center;
     border: none;
     border-radius: 5px;
}
#staff {
     display: flex;
     width: 100%;
     height: auto;
     float: left;
     flex-direction: column;
     align-items: center;
     justify-items:flex-start;
     padding-top: 80px;
     padding-bottom: 80px;
     text-decoration: none;
     cursor: default;
}
#staff figure{
     width: 33%;
     height:auto;
     display: flex;
     flex-direction: column;
     align-items: center;
}
#staff figcaption{
     width: 100%;
     height: auto;
     text-align: center;
     font-size: 3.5rem;
     font-weight: 100;
}
#staff h2{
     display: flex;
     width: 100%;
     height: auto;
     padding: 50px 0 50px 0px;
     margin-top: 0px;
     margin-bottom: 0px;
     font-weight: 100;
     color:black;
     text-decoration: none;
     font-size: 3.0em;
}
#staff .containerS {
     width: 85%;
     height: auto;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: center;
     justify-content: space-around;
     align-items: center;
     /* margin-left: 20%;
     margin-right: 20%; */
}
#staff #headshot1 , #staff #headshot2 , #staff #headshot3{
     /* display: flex;
     flex-direction: row;
     align-content: normal;
     align-items: center; */
     border-radius: 50%;
     height: auto;
     max-width: 100%;
     /* clear: both; */
     float: left; 
     cursor: default;
     padding:20px 40px 20px 40px;
}
/* #staff-container-1, #staff-container-2, #staff-container-3{
     display: flex;
     flex-direction: row;
     align-content: normal;
     align-items: center;
     border-radius: 50%;
     width: 80%;
     height: auto;
} */
/* #staff #headshot1{
     margin-left: 25rem;
}  */
#staff span{
     /* display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-content: normal;
     justify-content: space-evenly; */
     width: 7em;
     height: auto;
     color: white;
     background: rgb(7, 101, 159);
     padding: 12px;
     border-radius: 15px;
     cursor: default;
     float: left;
     text-align: center;
     font-size: 3.2rem;
     margin-bottom: 40px; 
}
#why h4{
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     align-self: center;
     /* float: left; */
     padding: 50px 0 30px 0;
     margin: 0px;
     font-family:"Roboto Flex", sans-serif;
     font-size: 2.0em;
     font-weight: 100;
     color: black;
}
#why p{
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     font-size: 1.3em;
     float: left; 
     color: black;
     padding: 0 0 10px 0;
}
#special{
     width: 100%;
     height: 50rem; 
     display: flex;
     flex-direction: column;
     float: left;
     background: rgb(226, 225, 225);
     background-image: url("../images/jabari-timothy-UiJqH_UBzOM-unsplash.jpg");
     background-size: 100% ;
     background-repeat: no-repeat;
     background-position: right top;
     background-clip: content-box;
     background-position-y: 19%;
     margin-left: -10px;
     margin-right: -10px;
     padding: 20px 0 0 0;
} 
#special a {
     text-decoration: none;
} 
#special h4{
     width: auto;
     color: black;
     text-decoration: none;
     margin-left: 50px;
     margin-top: 30px;
     font-size: 2.2em;
     font-family:"Roboto Flex", sans-serif;
}
#special p{
     width: auto;
     color: black;
     text-decoration: none;
     margin-left: 50px;
     font-size: 2.8rem;
}
#special h5{
     width: auto;
     color:rgb(7, 101, 159);
     font-weight: bold;
     font-size: 6.5rem;
     margin-left: 50px;
     margin-top: 5px;
     margin-bottom: 5px;
}
#special span{
     width: 15rem;
     height: 60px;
     color: white;
}
#special #button4{
     width: auto;
     height: 60px;
     color: white;
     background: rgb(7, 101, 159);
     padding: 20px;
     border-radius: 5px;
     border: none;
     cursor: pointer;
     position: absolute;
     left: 120px;
     margin-left: 0px;
}
#booking {
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     clear:both;
     font-family:"Roboto Flex", sans-serif;
     text-decoration: none;
     font-style: normal;
     padding: 80px 0 80px 0;
}
#booking h3{
     width: 100%;
     display: flex;
     justify-content: center;
     font-family:"Roboto Flex", sans-serif;
     font-weight: 100;
     font-size: 2em;
}
#booking p{
     width: 100%;
     display: flex;
     justify-content: center;
     font-size: 1.3em;
}
#button5, #button6{
     width: auto;
     height: 60px;
     display: flex;
     color: white;
     background: rgb(7, 101, 159);
     padding: 20px;
     border-radius: 5px;
     border: none;
     cursor: pointer;
     /* position: absolute; */
     left: 120px;
     margin: 0 0 10px 0;
     text-decoration: none;
}
#booking span{
     text-align: center;
     margin: 10px 0 10px 0;

}
#lookBook{
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     align-self: center;     
     justify-content: flex-start;
     /* float: left; */
     font-family:"Roboto Flex", sans-serif;
     font-size: 6.0rem;
     font-weight: 100;
     text-decoration: none;
     color: black;
     text-align: center;
     padding: 80px 10px 100px 10px;
     /* margin-left: 18%; */
}
/* .containerLook {
     width: 60%;
     margin: 2rem auto;
     height: auto;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
} */
#lookBook h2{
     display: flex;
     width: 100%;
     height: auto;
     font-family:"Roboto Flex", sans-serif;
     padding: 50px 0 50px 0;
     margin-top: 0px;
     margin-bottom: 0px;
     font-weight: 100;
     font-size: 7.0rem;
     color: black;    
}
#lookBook img{
     /* padding: 10px 10px 20px 10px; */
     width: 6em;
     height: auto;
     object-fit: cover;
     object-position: top;
     border-radius: 10%;
     filter: grayscale(100%); /* 100% for full grayscale */
     transition: filter 0.5s ease-in-out; /* Smooth transition for the filter change */
}
#lookBook img:hover{
     filter:grayscale(0%); /* 0% for full color */
}
#lookBook .grid-container{
     display: grid;
     width: 60%;
     height: auto;
     margin: 1rem 1rem 1rem 40rem;
     /* grid-template-columns: repeat(7, 1fr);
     grid-template-rows: repeat(9, 1fr); */
     /* display: flex; */
     /* align-content:flex-start; */
}
/* .gallery {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: repeat(9, 1fr);
     gap: 16px 16px;
} */
/* .gallery__img {
     width: 100%;
     height:100%;
     object-fit: cover;
     display: block;
} */
.grid-item {
     border-radius: 4px;
     display: block;
     color: white;
     font-weight: 600;
     object-fit: cover;
     height: 100%;
     width: 100%;
}
.item-1{
     grid-column: 1 / 3;
     grid-row: 1 / 4;
}
.item-2{
     grid-column: 3 / 5;
     grid-row: 1 / 4;
}
.item-3{
     grid-column: 5/ 7;
     grid-row: 1/ 6;
}
.item-5{
     grid-column: 1 / 3;
     grid-row: 4 / 8;
}
.item-4{
     grid-column: 3 / 5;
     grid-row: 4 / 6;
}
.item-6{
     grid-column: 3 / 5;
     grid-row: 6 / 8;
}
.item-7{
     grid-column: 5 / 7;
     grid-row: 6 / 8;
}
.item-8{
     grid-column: 1 / 4;
     grid-row: 8 / 10;
}
.item-9{
     grid-column: 4 / 7;
     grid-row: 8 / 10;
}
/* Tablet styles */
/* @media (max-width: 1024px) {
.grid-container {
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 16px 16px;
}
} */
/* Mobile styles */
/* @media (max-width: 640px) {
.grid-container {
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 16px 16px;
}
} */

/* .gallery__item--1 {
     grid-column-start: 1;
     grid-column-end: 2;
     grid-row-start: 1;
     grid-row-end: 2;
}
.gallery__item--2 {
     grid-column-start: 3;
     grid-column-end: 4;
     grid-row-start: 1;
     grid-row-end: 2;
}
.gallery__item--3 {
     grid-column-start: 5;
     grid-column-end: 6;
     grid-row-start: 1;
     grid-row-end: 4;
}
.gallery__item--4 {
     grid-column-start: 1;
     grid-column-end: 2;
     grid-row-start: 3;
     grid-row-end: 4;
}
.gallery__item--5 {
     grid-column-start: 2;
     grid-column-end: 3;
     grid-row-start: 3;
     grid-row-end: 4;
}
.gallery__item--6 {
     grid-column-start: 1;
     grid-column-end: 6;
     grid-row-start: 10;
     grid-row-end: 12;
}
.gallery__item--7 {
     grid-column-start: 8;
     grid-column-end: 10;
     grid-row-start: 10;
     grid-row-end: 12;
}
.gallery__item--8 {
     grid-column-start: 18;
     grid-column-end: 20;
     grid-row-start: 10;
     grid-row-end: 12;
}
.gallery__item--9 {
     grid-column-start: 18;
     grid-column-end: 20;
     grid-row-start: 14 ;
     grid-row-end: 16 ;
} */
#copyright .menu li{
     text-decoration: none;
     list-style: none;
     display: inline-block;
     width: auto;
     border: solid 2px #cdcdcd;
     background-color: #cdcdcd;
     color:black;
     line-height: 1em;
     border-radius: 8px;
     padding: 1em 2em 1em 1em;
     margin-left: -50px;
     font-size: 1.7rem;
}
#footer {
    text-align: left;
    padding: 4em 0 4em 0;
    height: 300px;
    display: block;
}
 a.link.depth-0 , #navPanel {
     display: none;
}     
/*
#lookBook #pic1{
     margin-top: -20px;
}
#lookBook #pic4{
     margin-bottom: 600px;
}
#lookBook #pic2{
     margin-top: -20px;
}
#lookBook #pic5{
     margin-bottom: 400px;
} 
*/

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

/* On mobile, please make all sections stack  

ALL Media Queries need work!!*/
/* 
@media screen and (max-width: 736px){
  header nav{
     display: 100%;
}
  #main{
      width: 100%;
  }
  #services{
      width: 100%;
     }
  #staff{
      width: 100%;
}
  #special{
      width: 100%;
}
  #lookBook{
      width: 100%;
} 
} */
/* On tablet, please make the sections in main stack  
@media (min-width: 500px) and (max-width: 1024px){
  main section {
      width: 100%;
  }
}
/* On laptop, please keep the normal layout, but everything should be light green 
  @media (min-width: 1024px) and (max-width: 1200px){
  html{
      background: lightgreen;
  }
  }
/* On larger screens, please keep the normal layout, but everything should be light blue 
  @media all and (min-width: 1200px){
  html{
    background: lightblue;
}
}
*/
	@media screen and (max-width: 1680px) {

			/* body, input, select, textarea, #nav, #main, #about, #services, #momentum, #staff, #services, #special, #booking{
				/*max-width: 100%; 
			} */
               #logo {
                    display: none;
               }
               #nav ul , #nav li {
                    padding: 0;
               }
               
               header nav ul {
                    max-width: 70%;
                    align-items: center; 
                    padding: 5px;
               }

               
               /* header nav li {
                    width: 15%;
               } */
               #main.container1 {
                    max-width: 100%;
                    margin-left: 0%;
                    /* padding: 3rem; */
               }
               #main img{
                    margin-left: 18rem;

               }
               #inset {
                    margin-left:8em;
                    margin-bottom:3em;
               }
               #about, #services, #momentum, #staff, #special, #booking, #lookBook{
                    /* width: 100%; */
                    margin: 0 0 0 0px;
                    flex-direction: column;
                    justify-content: flex-start;
               }
               #about {
                    padding-bottom: 1rem;
                    padding-top: 1rem;
               }
               #about h1{
                    width: 80%;
               }
               #about p {
                    width: 75%;
                    margin-left: 0;
               }
               #about #buttonAbout {
                    display: none;
               }
               #services h1{
                    width: 90%;
               }
               #services.container2{
                    max-width: 90%;
                    margin-left: 0%;
                    align-items: center;
               }
               #services #icon1, #services #icon2, #services #icon3{
                    width: 33%;
                    margin-left:0%;
                    padding-left: 2%;
               }
               #momentum{
                    max-width: 100%;
                    min-width: 50%;
                    margin-left:0%;
                    /* text-align: center;
                    align-items: center; */
               }
               #momentum p, #momentum h3 {
                    max-width: 45%;
                    padding: 10px 0px 10px 0px;
                    align-items:center;
                    text-align: center;
               }
               #momentum #buttonMO {
                    display: none;
               }
               #staff .containerS{
                    flex-direction: row;
                    /* width: 80%; */
               }
               #staff h2 {
                    width: 80%;
               }
               #why p{
                    padding: 10px 10px 10px 10px;
               }
               #booking {
                    width: 100%;
                    flex-direction: column;
                    background-image: none;
                    text-align: center;
                    padding: 10px 20px 10px 20px;
               }
               #booking p {
                    width:85%;

               }
               #special , #special #button4 {
                    display: none;
               }
               /* .grid-container{
                    display: flex;
                    flex-direction: column;
               }
              
               #lookBook img{
                    flex-direction: column;

               } */ 

               /* #lookBook {
                    display: none;
               }  */
               #lookBook {
                    width: 98%;
                    margin-left: 0%;
                    align-items: center;
                    padding: 0rem;
               }
              
               #lookBook .grid-container{
                    display: grid;
                    width: 90%;
                    height: auto;
                    margin: 1rem 1rem 1rem 1rem;
                    /* grid-template-columns: repeat(7, 1fr);
                    grid-template-rows: repeat(9, 1fr); */
                    /* display: flex; */
                    /* align-content:flex-start; */
               }

                a.link.depth-0 {
                    display: none;
               }       
          }

          @media screen and (max-width: 1280px){
               #lookBook {
                    width: 100%;
                     margin-left: 0%;
                    align-items: center;
                    padding: 0rem;
               }

               a.link.depth-0 {
                    display: none;        
               }
          }

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

               #nav {
                    display: none;

               }
               #main.container1 {
                    width: 100%;
                    height: auto;
               }

               #main img {
                    width: 100%;
                    align-items: center;
                    margin-left: 0;
                    height: 45rem;
               }
               #inset {
                    display: none;
               }
               #about #buttonAbout {
                    display: none;
               }
               #about {
                    width: 100%;
                    padding-bottom: 1rem;
               }
               #about p{
                    width: 80%;
                    margin-left: 0px;
               }
               #services {
                    width: 90%;
                    padding-top: 2rem;
                    padding-bottom: 2rem;
               }

               #services.container2{
                    max-width: 90%;
                    margin-left: 0%;
                    align-items: center;
               }

               #services #icon1, #services #icon2, #services #icon3 {
                    width: 100%;
               }
               #services ul p {
                    font-size: 3.0rem;
               }
               /* #services ul{
                    width: 100%;
                    display:flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
               } */

               #staff #headshot1, #staff #headshot2, #staff #headshot3 {
                    padding: 0;
               }
               #momentum {
                    width: 100%;
                    background-image: none;
               }
               #momentum p, #momentum h3 {
                    max-width: 90%;
                    padding: 10px 0px 10px 0px;
                    align-items: center;
                    text-align: center;
               }
               #momentum h3{
                    margin: 0;
                    padding: 20px;
               }
               #momentum p{
                    display: flex;
                    width: 100%;
                    font-size: 3.0rem;
                    justify-content: center;
                    padding:20px;
                    margin: 0;
               }
               #momentum #buttonMO{
                    display: none;
               }
               #staff {
                    width: 100%;
                    padding-top: 2rem;
                    padding-bottom: 2rem;
               }
               #staff .containerS{
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
               }
               #why p{
                    font-size: 3.0rem;
               }
               
               /*
			body, input, select, textarea {
				font-size: 11pt;
			} */
               
               #special {
                    display: none;
               }
               #booking {
                    width: 100%;
                    padding-top: 2rem;
                    padding-bottom: 2rem;
               }
               #booking p{
                    font-size: 3.0rem;
               }
               /* #lookBook {
                    display: none;
               } */
          		/* Nav */
               #lookBook{
                    width: 100%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    font-family:"Roboto Flex", sans-serif;
                    font-size: 6.0rem;
                    font-weight: 100;
                    text-decoration: none;
                    color: black;
                    text-align: center;
                    padding: 80px 10px 100px 10px;
                    /* margin-left: 18%; */
               }

               #lookBook .grid-container{
                    display:flex;
                    flex-direction: column;
                    margin: 1rem 0rem 1rem 0rem;
                    width: 100%;
                    height: auto;
               }
               a.link.depth-0 {
                    display: none;
               }                   
			body {
				padding-top: 44px;
			}

				body.homepage {
					padding-top: 0;
				}

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
			}

			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10001;
				background-color: rgba(21, 38, 23, 0.8);
				background-image: url("../images/overlay.png");
			}

				#titleBar .title {
					display: none;
					position: relative;
					font-family: 'Open Sans Condensed', sans-serif;
					font-weight: 700;
					text-transform: uppercase;
					font-size: 1.25em;
					line-height: 44px;
					color: #fff;
					z-index: 1000;
					text-align: center;
				}

				#titleBar .toggle {
					text-decoration: none;
					position: absolute;
					left: 0;
					top: 0;
					width: 80px;
					height: 60px;
					z-index: 1001;
				}

					#titleBar .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
					}

					#titleBar .toggle:before {
						display: inline-block;
						text-decoration: none;
						position: absolute;
						left: 0;
						top: 0;
						background: rgb(7, 101, 159);
						width: 44px;
						height: 44px;
						content: '\f0c9';
						color: #fff;
						text-align: center;
						line-height: 44px;
						font-size: 20px;
					}

					#titleBar .toggle:active:before {
						background-color: rgb(7, 101, 159);
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;
				background-color: #353c37;
				background-image: url("../images/overlay.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-image: url("../images/overlay.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-image: url("../images/overlay.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-image: url("../images/overlay.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-repeat: repeat, no-repeat;
				background-size: auto, 100% 100%;
				/* font-family: 'Open Sans Condensed', sans-serif; */
				font-weight: 700;
				text-transform: uppercase;
				font-size: 1.25em;
				box-shadow: inset -3px 0px 10px 0px rgba(0, 0, 0, 0.25);
			}

				#navPanel nav {
					position: relative;
					z-index: 1000;
				}

				#navPanel .link {
					display: block;
					color: inherit;
					text-decoration: none;
					height: 44px;
					line-height: 44px;
					padding: 0 1em 0 1em;
					color: #888;
					color: rgba(255, 255, 255, 0.5);
					border-top: solid 2px rgba(87, 93, 89, 0.15);
					font-size: 0.8em;
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

				#navPanel .indent-1 {
					display: inline-block;
					width: 1em;
				}

				#navPanel .indent-2 {
					display: inline-block;
					width: 2em;
				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 3em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

				#navPanel .depth-0 {
					color: #fff;
				}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

	}


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

               #main.container1 {
                    width: 100%;
                    height: auto;
                    margin-top: 3.6rem;
                    /* display: none; */
               }

               #main img {
                    width: 100%;
                    align-items: center;
                    margin-left: 0;
                    height: auto;
                    padding-top: 0rem;
                    margin-top: 2rem;
                    /* display: none; */
               }

               /* a.link.depth-0 {
                    display: none;
               } */
     }


               /* Small */

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

		/* Basic */

			body, input, textarea, select, #about, #services, #momentum, #staff, #booking, #lookBook, p , span, figcaption {
				font-size: 0.8em;
			}
               #about h1, #services h1, #staff h2, #momentum h3 {
                    font-size: 5.0em;
               }
               #lookBook h2 {
                    font-size: 3.0rem;
               }
               #about p , #services ul p, #services ul h2, #momentum p, #why h4, #why p, #staff figcaption, #booking p{
                    font-size: 3.0em;
               }
               #staff figcaption{
                    text-align: justify;
               }
               #staff figure {
                    width: 100%;
               }
                  #button5 { 
                    width: 21rem;
                    height: 60px;
                    display: flex;
                    color: white;
                    background: rgb(7, 101, 159);
                    /* padding: 20px 0 20px 0; */
                    border-radius: 5px;
                    border: none;
                    cursor: pointer;
                    /* position: absolute; */
                    left: 120px;
                    margin: 0 0 0 0;
                    text-decoration: none;
                    justify-content: center;
                    font-size: 2rem;
               }
               #main.container1 {
                    width: 100%;
               }
               /* #main {
                    background-image: url("../images/default-monochrome-black.svg");
               } */
               /* #main img {
                    width: 100%;
                    align-items: center;
                    margin-left: 0;  
                    background-image: url("../images/default-monochrome-black.svg") ;
               } */

               #staff #headshot1 , #staff #headshot2 , #staff #headshot3 {
                    padding: 0;
               }
               #staff figure {
                    width: 33%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin: 0;
                    padding: 2rem 0 2rem 0;
               }
               #staff figcaption {
                    width: 100%;
                    height: auto; 
                    text-align: center;
                    font-size: 2rem;
                    font-weight: 100;
                    align-items: center;
               }

               #why h4 {
                    font-size: 3rem;

               }
               #booking h3 {
                    font-size: 3rem;
               }

               #lookBook {
                    /* width: 100%; */
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    align-self: center;     
                    justify-content: flex-start;
                    /* float: left; */
                    font-family:"Roboto Flex", sans-serif;
                    font-size: 6.0rem;
                    font-weight: 100;
                    text-decoration: none;
                    color: black;
                    text-align: center;
                    padding: 80px 10px 100px 10px;
                    /* margin-left: 18%; */
	}
                .grid-container{
                    display: flex;
                    flex-direction: column;
                    margin: 1rem 0rem 1rem 0rem;
                    width: 100%;
                    height: auto;
                         }

               #navPanel .link {
                    display: block;
                    color: inherit;
                    text-decoration: none;
                    height: 44px;
                    line-height: 44px;
                    padding: 0 1em 0 1em;
                    color: #888;
                    color: rgba(255, 255, 255, 0.5);
                    border-top: solid 2px rgba(87, 93, 89, 0.15);
                    font-size: 0.8em;
               }
}