/* CSS Document
Colors
Green #063D23
Red #A5141F
Grey #434C60

*/

* {
	box-sizing: border-box;
}
body {
  width:100%;
  margin: 0;
  font-family: 'Noto Serif', serif;
  background-color: white;
  color: black;
  text-align: left;
  padding: 0;
}
img {
	max-width: 100%;
	height:auto;
}
h1{
  color:#434C60;
  font-size: 35px;
}
h2{
  color:#434C60;
  font-size: 20px;
}
.icon {
}
.face {
	/*max-width: 23px;*/
}
.insta{
/*	max-width: 48px;*/
}
.header{
}
.shop {
  /*background-color: #b9c2c6;
  background:url(../images/testBackground.jpg) center center no-repeat;
	background-size: cover;*/

  /*padding-bottom: 100px;*/
}
.shopContact {
  /*background-color: #b9c2c6;
	background:url(../images/contactBackground.jpg) left top no-repeat;
	background-size: cover;
  padding-bottom: 200px;
  width: 100%;*/
}
.logo_type {
	font-family: 'Great Vibes', cursive;
	/*color:#A5141F !important;*/
	font-size: 35px;
}

.logo{
  /*position: relative;
	top: 30px;
	left: -10px;
	z-index: 3;*/
}
.paul {
	/*position: relative;
	top: -10px;*/
}

.jen {
	/*position: relative;
	top: -50px;*/
}


.focus {
	display: none;
	/*width: 40%;
	margin-top: 0px;
	position: relative;
	top: -180px;
	right: -129px;*/
}
.contact_btn {
	display: none;
	text-align: center;
}
a:link {
  text-decoration: none;
}
.models{
	/*position: relative;
	top: -50px;*/
}

.address{
	font-size: .75em;
  padding: 5px 10px 5px 10px;
	background-color: #271813;
	color: #0EBB38;
	text-align: right;

	/*opacity: 0.85;
	z-index: 1;
	position: relative;
	top: -55px;*/
}

.bar{
  height: 30px;
	background: #737373;
	/*	opacity: 0.85;
	z-index: 1;
	position: relative;
	top: -55px;*/
}
.curly {
	/*position: relative;
	top: -50px;*/
}
.hours{
	/*padding: 30px;
	background: #271813;
	color: black;*/
	border: 2px solid #AEBDD3;
  border-radius: 5px;
	/*
		border-left-width: 50px;
		position: relative;
	top: -50px;*/
}

.phone{
	/*position: relative;
	top: -4px;
	font-size: 15px;
	padding: 10px 15px 2px 2px;
	background-color: #271813;
	color: white;
	z-index: 1;
	text-align: right;*/
}
#more {
	display: none;
}

td, th {
    border-bottom: 1px solid #dddddd;
    padding: 4px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
.pic {
	max-width: 100px;
}
.head {
	/*color: #07AD1A;
	padding: 20px;
	text-shadow: 2px 2px black;*/
}

.contact {
  text-align: center;
  margin-top: 25px;
  font-size: 18px;
  color: black;
}
.fancy {
	font-family: 'Allura';
	font-size: 35px;
	line-height: 95%;
}

.jennifer {
	max-width: 179px;
  /*margin-right: 112px;*/
}
.corinne {
	max-width: 165px;
  /*margin-right: 112px;*/
}

.roll img{
	width: 75%;
	filter: grayscale(100%);
	transition: Is;
	padding-bottom: 10px;
}
.roll img:hover{
	filter: grayscale(0);
	transform: scale(1.1);
}
.copywrite {
	margin-top: 10px;
	text-align: center;
	font-size: 12px;
}
.footer a:link{
	text-decoration: none;
}
/*********************************/
.map {
text-decoration: none;
color: black;
}
.map a:link {
  color: black;
  text-decoration: none;
  }
.map a:visited {
  color:black;

  }
.map a:hover {
  color:#0EBB38;
  }
.map a:active {
   color:red;
  }

.nav{
	display: none;
	margin-top: 0px;
	background-color: #271813;
}

.nav li {
  padding: 0.25em;
  font-size: 1.25em;
  display:inline;
  }
.nav a:link {
  color: white;
  text-decoration: none;
  }
.nav a:visited {
  color:#B12831;

  }
.nav a:hover {
  color:#0EBB38;
  }
.nav a:active {
   color:red;
  }

/*********************************/

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
}

li a{
    display: inline-block;
    color: white;
    text-align: left;
    padding: 10px 10px;
    text-decoration: none;
}

li a:hover {
}

li {
    display: inline-block;
}

/*********************************/

.indexLink {
margin-top: 15px;

}
.spaceTop {
/*padding-top: 15px;*/

}

/*********************************/

form {
  padding-top: 48px;
  margin: 0 auto;
  text-align: left;
  }

  input[type=text], textarea{
    width: 100%;
    padding: 10px 15px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #404040;
    border-radius: 4px;
    box-sizing: border-box;
	background-color: white;
}

input[type=submit], input[type=reset] {
    width: 49%;
	background-color: white;
	border: 1px solid #404040;
}

input[type=submit]:hover {
    background-color: #0EBB38;
}
input[type=reset]:hover {
	background-color: #B12831;
}

/*********************************/
.hero_text {
	display: none;
	font-size: 1em;
	/*padding-left: 25px;
	padding-right: 25px;
	text-align: left;*/
}
.text {
	font-size: 1em;
	/*padding-left: 25px;
	padding-right: 25px;
	text-align: left;*/
}


.test {
	font-size: 12px;
	padding: 10px;
	margin: 20px;
	border: 10px solid #AEBDD3;
	border-radius: 20px;
	background-color: #AEBDD3;
}

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


/*********************************/
.service {

}
.serviceText {
	text-align: left;
}

/*********************************/

/*.row:before, .row:after {
	content: "";
	display: table;
}
.row:after {
	clear: both;
}
*/
.col{

}
.col_first_pic{

}
.row2{

}
.col_first{

}
.col_next{

}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */

/* Larger than tablet */
@media (min-width: 400px) {

h1 {
	font-size: 35px;
	}
h2{
  font-size: 20px;
}
.topSpace {
/*padding-top: 50px;*/

}

.copywrite {
	font-size: 14px;
	text-align: center;
}

.phone{
	font-size: 18px;
	/*top: 75px;
	color: black;
	padding: 0;
	background-color: white;
	top: 45px;*/
}
.icon {
	/*top: 50px;*/
}

.logo{
	/*top: 73px;*/
}
.address {
	font-size: 1em;
	padding: 2px 25px 2px 50px;
	/*
	z-index: 3;
	top: -50px;*/
}
.paul {
	top: 0px;
}
.focus {
	/*width: 50%;
	margin-top: 200px;
	bottom: 100px;
	right: 0px;*/
}
.models{
	/*top: 15px;*/
}
.hours {
 padding-top: 0px;
 padding-bottom: 0px;
}

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width:481px){


}
/* Larger than tablet */
@media (min-width: 768px) {

h1{
		font-size: 45px;
	}
h2{
       font-size: 30px;
}
.logo{
	/*top: 55px;
	left: -10px;*/
}
.phone{
	font-size: 18px;
	/*top: 10px;*/
}
.address {
	top: 0px;
}
.models{
	top: 0px;
}
.bar {
	top:0px;
}
.hero_text{
	display: block;
}
.contact_btn {
	display: block;
}
.focus {

}
.hours {
	top: 0px;
}
.curly {
	top:0px;
}

.jen {
	top: 0px;
}
.hours{
  padding: 26px;
	padding: 61px;

	}
.icon{
	/*position: relative;
	bottom: -25px;
	left: 150px;
	top: 0px;*/
}
.insta{

}
.face{

}
.pic {
	max-width:175px;
  padding-top: 55px;
}

.nav{
	padding-left: 300px;
}

.roll img{
	width: 100%;
	filter: grayscale(100%);
	transition: Is;
	padding-bottom: 10px;
}
.contact {
  margin-top: 25px;
  font-size: 25px;
}


.contactForm {
	width: 78%;

}
.contactInfo {
	width: 78%;
}

.nav{
	padding-left: 25px;
    text-align: right;
	z-index: 4;
}
.nav{
	display:inline;
	font-size: 12px;
}
.stylist_text{
	max-width: 400px;
}
}


/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}