/* ================================================================================== */
/* == Normalize.css v5.0.0 ========================================================== */
/* ================================================================================== */

html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

*,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none }

/* Viewport Sizing */
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}



/* ================================================================================== */
/* == General Styles ================================================================ */
/* ================================================================================== */

html,body { background: #75767C url(img/bg2.png); font-family: Source Sans Pro, sans-serif; color: #66686C; line-height: 1.45; 

/*background: #DE6262; background: linear-gradient(to top, #DE6262 , #FFB88C);*/
/*background: #EC6F66; background: linear-gradient(to top, #EC6F66 , #F3A183);*/
}
.container { width: 100%; max-width: 1100px; margin: 30px auto; background: #fff; box-shadow: 0 7px 30px rgba(0,0,0,0.25), 0 3px 10px rgba(0,0,0,0.15); }
.container:after { content: ""; display: table; clear: both; }
@media screen and (max-width: 1100px) {
	.container { margin: 0 auto; }
}

a { text-decoration: none; color: red;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s; }
a:hover { color: blue; }

h1, h2, h3, h4 { font-family: 'Roboto Slab', serif; font-weight: 700; text-transform: uppercase; }


/* ================================================================================== */
/* == Header ======================================================================== */
/* ================================================================================== */

#header { text-align: center; overflow: hidden; background: #0D0F17; color: #fff; padding: 50px; }
#header h1 { margin: 0 0 0.2em 0; line-height: 1.15em; }
#header .logo { background: url(img/scissors.png) no-repeat center; background-size: 60%; border: 2px solid #6A72AA; width: 95px; height: 95px; float: left; border-radius: 50px; margin: 3px 16px 0 0; }
#header .heading { float: left; text-align: left; }
#header .headline { float: left; }
#header .headline p { font-style: italic; }
#header .call { float: right; border: 2px solid #6A72AA; padding: 17px 20px 13px 20px; color: #6A72AA; border-radius: 8px; background: RGBA(106, 114, 170, 0.2); }
#header .call .phone { font-size: 30px; color: #fff; }

@media screen and (max-width: 900px) { 
	#header .heading { float: none; margin: 0 auto 40px auto; overflow: hidden; }
	#header .call { float: none; }
}

@media screen and (max-width: 650px) { 
	#header .heading { text-align: center; }
	#header .logo { float: none; margin: 0 auto 15px auto; }
	#header h1 br { display: none; }
}



/* ================================================================================== */
/* == Content ======================================================================= */
/* ================================================================================== */

.section { overflow: hidden; padding: 70px; border-bottom: 1px solid #EFEEE9;}
.section h2 { font-size: 2.2rem; line-height: 1.1em; color: #282B45; margin-bottom: 0.5em; text-align: center; }
.section h3 { color: #282B45; margin-bottom: 0.2em; }
.section p { margin-bottom: 1em; }

@media screen and (max-width: 650px) {
	.section { padding: 50px; }
}
@media screen and (max-width: 450px) {
	.section { padding: 35px; }
}



#hero { padding: 0; }
#hero img { display: block; width: 100%; }

@media screen and (max-width: 650px) {
	#hero { display: none; }
}



#intro { }
#intro h2 { text-align: left; }
#intro img { float: right; width: 40%; }
#intro .text { float: left; width: calc(60% - 70px); }

@media screen and (max-width: 950px) {
	#intro img { float: right; width: 50%; }
	#intro .text { float: left; width: calc(50% - 70px); }
}
@media screen and (max-width: 650px) {
	#intro h2 { text-align: center; }
	#intro img { float: none; width: 100%; margin-bottom: 30px; }
	#intro .text { float: none; width: 100%; }
}



#map { padding: 0; position: relative; }
#map iframe { display: block; width: 100%; height: 565px; }

#services { text-align: center; }
#services ul { display: flex; justify-content: space-between; width: 100%; overflow: hidden; margin: 50px 0 30px 0; }
#services li { float: left; width: 27%; border: 3px solid; border-radius: 50%; position: relative; overflow: hidden; }
#services li img { display: block; width: 100%; height: auto; }
#services li span { position: absolute; top: 50%; left: 0; margin-top: -22px; width: 100%; z-index: 9; background: rgba(83,81,104,0.75); color: #fff; padding: 10px;  color: #fff; font-weight: bold; font-family: 'Roboto Slab', serif; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.8); font-size: 21px; line-height: 1.1em; }

@media screen and (max-width: 650px) {
	#services ul { flex-wrap: wrap; margin-bottom: 0; }
	#services li { width: 85%; margin: 0 auto 30px auto; border-radius: 0; border: none;}
	#services img { border-radius: 50%; border: 3px solid; }
	#services li span { position: static; display: block; margin: 5px 0 0 0; background: none; text-shadow: none; color: #66686C; }
}
/*@media screen and (max-width: 450px) {
	#services ul { display: block; }
	#services li { width: 100%%; margin-bottom: 30px; }
}*/






#museum-collage { position: relative; overflow: hidden; }
#museum-collage:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.5); z-index: 1; }
#museum-collage img { float: left; width: 50%; }
#museum-collage .collage-overlay { position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -150px; color: #fff; font-weight: bold; font-family: 'Roboto Slab', serif; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.8); z-index: 2; }
#museum-collage .collage-overlay {
	width: 0;
	height: 0;
	border: 150px solid transparent;
	border-bottom-color: rgba(83,81,104,0.95);
}
#museum-collage .collage-overlay:before {
	content: '';
	position: absolute;
	left: -150px;
	top: 150px;
	width: 0;
	height: 0;
	border: 150px solid transparent;
	border-top-color: rgba(83,81,104,0.95);
}
#museum-collage .collage-overlay:after { content: "Hair Museum"; position: absolute; top: 106px; left: -105px; width: 210px; line-height: 40px; font-size: 36px; text-transform: uppercase; text-align: center; }

@media screen and (max-width: 450px) {
	#museum-collage .collage-overlay { display: none; }
	#museum-collage:after { background: rgba(255,255,255,0.25); }
}



#info { background: #F0EFED; overflow: hidden; }
#info .left { width: 320px; float: left; }
#info .left h2 { text-align: left; }
#info .right { width: calc(100% - 320px); }
#info .facebook { display: inline-block;
    background: RGBA(65, 89, 147, 1.00);
    color: #fff;
    padding: .4em 0;
    width: 180px; text-align: center;
    border-radius: 4px;
    font-size: 1.3rem;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	margin: 5px 0 25px 0;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.25), inset 0px -1px 2px rgba(0,0,0,0.3), inset 0px 1px 2px rgba(255,255,255,0.3), inset 0px -15px 30px rgba(0,0,0,0.1), inset 0px 15px 30px rgba(255,255,255,0.1);
    font-weight: 700;}

@media screen and (max-width: 650px) {
	#info .left { float: none; width: 100%; text-align: center; }
	#info .right { float: none; width: 100%; }
}



#connect { text-align: center; background: #282B45; color: #fff; }
#connect h2 { color: #fff; font-family: Source Sans Pro, sans-serif; font-weight: normal; font-style: italic; text-transform: none; display: inline; line-height: 1.1em;}
#connect .phone { font-size: 2.1rem; font-weight: 700; border: 2px solid #6A72AA; padding: 10px 20px; color: #fff; border-radius: 8px; background: RGBA(106, 114, 170, 0.3); margin-left: 30px; }

@media screen and (max-width: 950px) {
	#connect .phone { display: inline-block; margin: 20px 0 0 0; }
}


/* ================================================================================== */
/* == Testimonials ================================================================== */
/* ================================================================================== */

/*Testimonials*/
#testimonials { position: relative; overflow: hidden;background: #282B45 url(img/testimonial-background.jpg) center; background-size: cover; /*background: linear-gradient(to top, #DE6262 , #FFB88C);*/ color: #fff; font-size: 1.25rem; }
#testimonials h2 { position: absolute; top: 70px; color: #fff; width: 100%; text-align: center; font-size: 2.2rem; line-height: 1.1em; }
#testimonials .flexslider { margin: 140px 0 50px 0; }
#testimonials .testimonial { position: relative; border-radius: 2px; text-align: center;  }
#testimonials .testimonial img { width: 68px; border-radius: 50%; box-shadow: 0px 2px 3px rgba(0,0,0,0.3); }
#testimonials .testimonial .text { font-style: italic; background: url(img/testimonial-quote-left-light.png) no-repeat 20px 20px; padding: 30px 30px 150px 30px; max-width: 800px; margin: 0 auto; }
#testimonials .testimonial p { background: url(img/testimonial-quote-right-light.png) no-repeat right bottom; }
#testimonials .testimonial .speaker { position: absolute; bottom: 0; padding: 10px 30px 25px 30px; width: 100%; font-family: 'Roboto Slab', serif; }
#testimonials .testimonial .speaker span { display: block; line-height: 16px; font-weight: 700; color: rgba(255,255,255,0.85); }

@media screen and (max-width: 650px) {
	#testimonials h2 { top: 50px; }
}


/* ================================================================================== */
/* == Flexslider ==================================================================== */
/* ================================================================================== */

.flex-container a:hover,
.flex-slider a:hover { outline: none; }
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.flex-pauseplay span { text-transform: capitalize; }
.flexslider { margin: 0; padding: 0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides { display: block; }
* html .flexslider .slides { height: 1%; }
.no-js .flexslider .slides > li:first-child { display: block; }

.flexslider { position: relative; zoom: 1; }
.flexslider .slides { zoom: 1; }
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport { max-height: 300px; }
.flex-direction-nav { *height: 0; }
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  z-index: 10;
  overflow: hidden;
  opacity: 0.15;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-indent: -9999px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav .flex-prev { left: 20px; background: url(img/arrow-left.svg) no-repeat center; background-size: 80px; }
.flex-direction-nav .flex-next { right: 20px; background: url(img/arrow-right.svg) no-repeat center; background-size: 80px; }
.flexslider:hover .flex-direction-nav .flex-prev:hover,
.flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 0.5; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter: alpha(opacity=0); cursor: default; z-index: -1; }
.flex-control-nav { width: 100%; position: absolute; bottom: 0; text-align: center; }
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; }
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #474548; background: rgba(0,0,0,0.3);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); }
.flex-control-paging li a.flex-active { background-color: #000; background-color: rgba(0, 0, 0, 0.9); cursor: default; }

@media screen and (max-width: 360px) { 
	.flex-direction-nav .flex-prev { left: 10px; }
	.flex-direction-nav .flex-next { right: 10px; }
}





/* ================================================================================== */
/* == Footer ======================================================================== */
/* ================================================================================== */

#footer { clear: both; padding: 25px 5%; background: #0D1019; overflow: hidden; }
#footer a { color: #66686C; }
#footer .left { float: left; }
#footer .right { float: right; }



/* ================================================================================== */
/* == Media Queries ================================================================= */
/* ================================================================================== */

@media only screen and (min-width: 1024px) {

}

@media only screen and (max-width: 480px) {
}