/*
Theme Name: DanielGrangerHairdressing
Theme URI: http://www.DanielGrangerHairdressing.com/
Author: The Utterly Most Marvellous William Arthur Clarke
Author URI: http://www.Bklahrke.co.uk/
Description: The new website for Daniel Granger Hairdressing
Version: 1.0.0
Text Domain: daniel-granger-hairdressing-v2
*/

@charset "UTF-8";
@-ms-viewport {  width: device-width; }
@viewport { width: device-width; }

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}

/* Main */

html { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; max-width:1440px; width:100%; padding:0; margin: 0 auto; left:0; right:0; }
body { font-size: 18px; line-height: 26px; color: #333; -webkit-tap-highlight-color: #000; font-family: 'Abril Fatface', serif; padding:0; margin:0; }
body.archive-bg { background: #111; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

::selection { background: transparent; color: #0000ff; }
::-moz-selection { background: transparent; color: #0000ff; }

img::selection { background: transparent; }
img::-moz-selection { background: transparent; }

/*** T Y P O G R A P H Y ***/

@import url(https://fonts.googleapis.com/css?family=Oswald:300|Abril+Fatface|Source+Code+Pro);

h1, h2, h3, h4, h5, h6, a, p { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-weight:400; font-style: normal; }
h1, h3, h5, article#results li span, footer a.logo { line-height: 0.85em; width: 100%;  }
h1 { font-size: 120px; line-height:118px; letter-spacing: 0.2px; margin-bottom:30px; }
h2 { font-size: 54px; line-height: 64px; font-weight:300; text-decoration:none; margin-bottom:20px; }
h4, h2.call-out { font-size: 36px; line-height: 42px; font-weight:normal; text-decoration:none; margin-bottom:20px; }
h2.call-out { text-align:center; width:80%; padding:0 10%; }
h2, h3, h4 { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight:300; }
h3 { line-height: 76px; font-size: 76px; }
h5 { line-height: 32px; font-size: 32px; }
h3, h5 { margin-bottom: 12px; }
h4 { margin-bottom: 30px; }
h4.quote { margin-bottom: 10px; }
h4.quote:before { content: '\201C'; font-size: 46px; }
h4.quote:after { content: '\201D'; font-size: 46px; }
h4 span { font-size: 100%; font-weight:400; font-style:italic; letter-spacing: 1px; }
h6 { font-weight:200; font-size:18px; font-style:italic; margin-top:20px; }

p { margin-bottom:18px; }

a { color: #333333; text-decoration:none; outline: none; font-family: "source code pro"; cursor:pointer; border: none; -webkit-appearance: none; appearance: none; }
a:hover { text-decoration:none; outline: none; }

a.button { font-family: "source code pro"; cursor:pointer; border: none; -webkit-appearance: none; appearance: none; color:#333; text-decoration:none; text-transform:uppercase; background:transparent; vertical-align:middle; text-align:center; padding: 29px 46px 26px 46px; border: 2px solid #333; font-size:14px; letter-spacing:4px; display: inline-block; margin-bottom: 15px; outline: none; }  
a.button:hover { text-decoration:none; color:#fff; background:#333; outline: none; }
a.button:focus { outline: none; }

em {  }
strong {  }
span { font-weight:200; font-size:86px; line-height:24px; }
strike { color:#a8acb7; }

ul, li { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0; list-style-type: none; vertical-align: bottom; margin: 0; padding: 0; }

.cta { font-size: 14px; line-height: 0; color: #333; background-color:transparent; text-decoration: none; border-bottom: 10px solid #ececec; width:auto; padding: 0; display: inline-block; }
.cta:hover { border-color: #d5d5d5;}

img { border: 0; -ms-interpolation-mode: bicubic; }

/*** C O L O U R S ***/


/*** B U T T O N S ***/

.make-booking { font-size: 16px; color: #fff; background: #0000ff; width:205px; line-height: 63px; display: block; position: fixed; top:23px; right:110px; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); text-align: center; }
.make-booking:hover, .inline-button:hover { background: #1212B2; }

.primary-cta { font-size: 14px; color: #fff; background: transparent; border: 2px solid #fff; width:auto; line-height: 44px; padding: 0 30px; display: inline-block; position: relative; top:23px; left:0; text-transform: uppercase; }
.primary-cta:hover { background: #fff; color: #333; }

.inline-button { font-size: 14px; color: #fff; background: #0000ff; border: none; width:auto; line-height: 44px; padding: 0 30px; display: inline-block; text-transform: uppercase; }

.secondary-cta { font-size: 14px; color: #fff; position: relative; top:29px; margin-left:20px; background-color:transparent; text-decoration: none; border-bottom: 10px solid rgba(255,255,255,0.2); line-height: 0px; display: inline-block; width:auto; padding: 0; }
.secondary-cta:hover { border-color: rgba(255,255,255,0.4); }

/*** M A I N ***/

header { position: fixed; top:0; left:0; background: #fff; width: 530px; height: 110px; z-index:200; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); }

h1.logo { z-index: 100; font-size: 68px; line-height: 30px; display: inline-block; width: 118px; height: 45px; background: transparent url('images/danielgrangerhairdressing_logo.svg') no-repeat center center; background-size: 110px 110px; text-indent: 9999px; }
h1.logo { position: fixed; left: 33px; top: -11px;  }
h1.logo:hover { opacity: 0.6; cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

header ul { margin-top: 37px; margin-left: 175px; border-left: 1px solid #ececec; padding-left: 25px; height: 40px;   }
header ul li { font-family: 'Source Code Pro'; font-weight:400; font-size: 12px; width: auto; list-style: none; display: inline-block; margin-right:20px; letter-spacing: -0.2px; position: relative; top:-8px; background-color:transparent; text-decoration: none; border-bottom: 10px solid #ececec; line-height: 0px; }
header ul li:hover { border-color: #d5d5d5; color:#333; }
header ul li.header-address { position: relative; top:-14px; }

.page-container { -webkit-animation: Hello 0.1s ease-in; -moz-animation: Hello 0.1s ease-in; -o-animation: Hello 0.1s ease-in;  animation: Hello 0.1s ease-in; }
@keyframes Hello { 0% { opacity: 0; height:0; visibility: hidden; } 100% { opacity: 1; height:auto; visibility: visible; } }


/*** N A V ***/

.down { position:absolute; bottom: 40px; right: 35px; font-size:42px; z-index: 3; }
.white { color:#fff; } 

/* Navigation */

.tcon { appearance: none; border: none; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 40px; transition: 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 66px; background: transparent; outline: none; right: 46px; top: 52px; z-index: 100; position: fixed; border: 2px solid #333; color:#333; }
.tcon.home { border: 2px solid #fff; color:#fff; }
.tcon > * {display: block; }
.tcon:hover, .tcon:focus {outline: none; /*text-indent: 9999px;*/ }
.tcon:hover {outline: none; opacity: 0.6; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.tcon::-moz-focus-inner {border: 0; }
.tcon-menu__lines { display: inline-block; height: 2px; width: 20px; border-radius: 0; transition: 0.3s; background: #333; position: relative; color:#333; }
.tcon-menu__lines.home { background: #fff; color:#fff; }
.tcon-menu__lines::before, .tcon-menu__lines::after { display: inline-block; height: 2px; width: 20px; border-radius: 0px; transition: 0.3s; background: #333; content: ''; position: absolute; left: 0; -webkit-transform-origin: 2.85714px center; transform-origin: 2.85714px center; width: 100%; }
.tcon-menu__lines.home::before, .tcon-menu__lines.home::after { background: #fff; color:#fff; }
.tcon-menu__lines::before { top: 7px; }
.tcon-menu__lines::after { top: -7px; }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines { background: transparent; }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; width: 20px; }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); }

#sticky.light > .tcon-menu__lines:before, #sticky.light > .tcon-menu__lines:after { background:#fff; }
#sticky.dark > .tcon-menu__lines, #sticky.dark > .tcon-menu__lines:before, #sticky.dark > .tcon-menu__lines:after { background:#333; color:#333; }
#sticky.tcon.light { border-color: #fff; color:#fff; }
#sticky.tcon.dark { border-color: #333; color:#333; }

#sticky.dark.tcon-transform > .tcon-menu__lines { background:transparent; }
#sticky.dark.tcon-transform > .tcon-menu__lines:before, #sticky.dark.tcon-transform > .tcon-menu__lines:after, #sticky.light.tcon-transform > .tcon-menu__lines:before, #sticky.light.tcon-transform > .tcon-menu__lines:after { background:#fff; color:#fff; }
#sticky.tcon.dark.tcon-transform, #sticky.tcon.light.tcon-transform { border-color: #fff; color:#fff; }

.tcon-visuallyhidden { border: 0; clip: rect(0 0 0 0); /*height: 1px; margin: -1px;*/ overflow: visible; padding: 0; position: absolute; width: 100%; }
.tcon-visuallyhidden:active, .tcon-visuallyhidden:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.tcon-grid { padding: 1rem; }
.tcon-grid .tcon-grid__item { width: 0.5rem; height: 0.5rem; background: black; color: black; transition: 0.3s; }
.tcon-grid.tcon-transform .tcon-grid__item { -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(.8, .8, .8); transform: rotate3d(0, 0, 1, -45deg) scale3d(.8, .8, .8); }
.tcon-grid--rearrange .tcon-grid__item { box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem; }
.tcon-grid--rearrange.tcon-transform .tcon-grid__item { box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 0.5rem; }

body .custom-navbar { width: 100%; height:auto; }
body.fm-activate { overflow: hidden; }
.fm-menu { position: absolute; visibility: hidden; opacity: 0; width: 80%; height: auto; top: 0; left:0; right:0; z-index: 101; margin:0 auto; padding: 15% 10% 10% 10%; }
.fm-menu.fm-animated { opacity: 1; visibility: visible; }
.fm-menu .fm-nav { display: none; }
.fm-menu .fm-nav.active { display: block; }
.fm-scrollable { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow-x: hidden; overflow-y: auto; }
.fm-menu .fm-nav.fm-animated, .fm-menu.fm-horizontal .fm-nav.fm-animated { opacity: 1; }
.fm-overlay { height: 100%; width: 100%; background: #222; opacity: 0; position: fixed; left: 0; right: 0; top: 0; z-index: 100; visibility: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
body .fm-button { position: fixed; top: 23px; right: 23px; font-size: 15px; font-weight: 100; font-family: "source code pro"; padding: 30px 16px 30px 16px; z-index: 102; -webkit-background-clip: border-box; }

body.fm-activate .fm-overlay { opacity: 1; visibility: visible; }

.fm-nav ul li a { line-height: 100%; display: none; padding: 14px 0; font-size: 104px; text-align: left; color: rgba(255,255,255,0.3); -webkit-font-smoothing: antialiased; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; margin-bottom: 5px; overflow: visible; font-weight:400; font-family: 'Abril Fatface'; z-index: 150; }
.fm-nav ul li a:hover { color: rgba(255,255,255,1); }
.fm-nav ul li a.animated { display: block; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity:0.4; }
.fm-nav ul li img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; opacity:0; z-index: -50; width: auto; opacity: 0; visibility: hidden; height: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.fm-nav ul li a:hover + img { opacity:0.1; visibility: visible; height: 100%;  }

@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1;  -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }


/* C A R O U S E L */

.hero { width: 100%; display: block; padding: 0; position: relative; top:0; background: #000; border-bottom: 8px solid #222; overflow: visible; }
.salon-hero-img { border-bottom: none; }
.slider-content { position: absolute; top:50%; left:10%; margin-top:-16.75%; z-index: 40; color:#fff; }
.slider-content h1 { font-size: 104px; line-height: 106px; }
.slider-content small { font-size:14px; font-family: "source code pro"; text-transform: uppercase; position: relative; top:60px; }
.slider-content p { text-align: left; font-family: 'Source Code Pro'; font-weight: 400; font-size: 14px; line-height: 18px; width: 50%; } 
	
.container { position: relative; width: 100%; overflow:hidden;  }
.iosSlider { width: 100%; height: 100vh; overflow: visible!important;  }
.iosSlider .slider { width: 100%; height: 100vh;  }
.iosSlider .slider .item { float: left; width: 100%; height: 100vh; overflow: hidden; display: block; }
.iosSlider .slider .item img { width: 100%; height: auto; opacity: 1; }
.iosSlider.salon-slider .slider .item img { width: 100%; height: auto; opacity: 1; }
.iosSlider .slider .v-item { float: left; height: 100%; overflow: hidden; display: block; opacity: 1; }
.iosSlider .slider .v-item img { height: 100%; opacity: 1; width:auto; }


.prev, .next { position: absolute; top: 50%; width: 52px; height: 158px; border: none; background: transparent; color:#fff; font-size:20px; font-family: "source code pro"; text-align:center; line-height:40px; visibility:visible; border: 2px solid #fff; text-align: center; margin-top:-106px; line-height: 158px; }
.prev { left: -2px; }
.next { right: -2px; }
.prev:hover, .next:hover { background: #fff; color: #333; }

.container .selectorsBlock { position: absolute; bottom: 10px; width: 100%; height: 5%; }
.container .selectorsBlock .selectors { position: relative; top: 0; left: 0; margin: 0 auto; width: 12%; height: 100%; }
.container .selectorsBlock .selectors .item { position: relative; top: 0; left: 0; float: left; width: 16%; height: 100%; margin: 0 0 0 5%; background: #aaa; }
.container .selectorsBlock .selectors .selected { background: #333; }
.container .selectorsBlock .selectors .first { margin-left: 0; }

#slide-counter { width: 40%; border-top: 1px solid rgba(255,255,255,0.5); position: relative; top: -109px; left: 10%; z-index: 150; padding-top: 25px; font-size: 12px; color: #fff; font-family: "source code pro"; text-transform: uppercase; }

.page-down { width: 0px; height: 0px; border-top:36px solid #f9f9f9; border-right:36px solid #ffffff; border-bottom:36px solid #f9f9f9; border-left:36px solid #ffffff; position: absolute; bottom: -36px; left: 50%; margin-left:-30px; z-index:20; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.page-down p { position: absolute; bottom: -32px; left: -9px; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); }


/*** C O N T E N T ***/

section { display: block; clear: both; overflow: hidden; }

section#about { width: 80%; padding: 6.5% 10% 4.5% 10%; background: #222; }
section#about h1 { width: 212px; padding-right: 30px; color: #fff; font-family: 'oswald'; text-transform: uppercase; font-size: 21px; line-height: 27px; font-weight:300; position: relative; top: -14px; left: 0; -webkit-margin-before: 0;
-webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; }
section#about ul { width: 180px; }
section#about ul li, section#about p { font-family: 'Source Code Pro'; font-weight: 400; font-size: 13px; } 
section#about ul li, section#about p, section#about ul li a { color: #fff; }
section#about ul li { width: auto; list-style: none; display:inline-block; letter-spacing: -0.2px; background-color: transparent; text-decoration: none; border-bottom: 10px solid rgba(255,255,255,0.2); line-height: 0px; margin-bottom: 8px; vertical-align: initial; }
section#about ul li a { color: #fff; }
section#about ul li:hover { border-color: rgba(255,255,255,0.4); }
section#about ul li:first-child { margin-top:5px; } 
section#about p { line-height:18px; width: 65%; position: relative; margin-top: -122px; left: 250px; }
section#about p:first-letter { font-size: 64px; float: left; margin-right: 0.1em; margin-top: 0; text-transform: uppercase; font-family: 'Abril Fatface'; line-height: 0.76em; }

section#content-blocks, #team-profile, #salon-profile { width:80%; padding:6.5% 10% 10% 10%; background: rgb(255,255,255); background: -moz-linear-gradient(top,  rgba(255,255,255,1) 25%, rgba(247,247,247,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(247,247,247,1))); background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 25%,rgba(247,247,247,1) 100%); background: -o-linear-gradient(top,  rgba(255,255,255,1) 25%,rgba(247,247,247,1) 100%); background: -ms-linear-gradient(top,  rgba(255,255,255,1) 25%,rgba(247,247,247,1) 100%); background: linear-gradient(to bottom,  rgba(255,255,255,1) 25%,rgba(247,247,247,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); overflow: hidden; }
#salon-profile { padding:0 10%; }
.salon-fix { padding:5% 10% 0.2% 10%!important; }
section#promotion-blocks { width:80%; padding:5.5% 10%; }
section#content-blocks h2, section#promotion-blocks h2, section#team h2, section#promotion h2, .salon-content h2, .google-maps h2 { width: 50%; padding-right: 30px; font-family: 'oswald'; text-transform: uppercase; font-size: 21px; line-height: 27px; border-bottom: 1px solid #ececec; padding-bottom: 15px; }
section#content-blocks > .cta, section#promotion-blocks > .cta, section#team > .cta, section#promotion > .cta { position: relative; left: 98%; top: -40px; margin-left: -186px; }
section#team > .cta, section#promotion > .cta { margin-left:-154px; }
.block-container { display: inline-block; width: 100%; }
section#content-blocks img { position: relative; top: -50%; width: 100%; height:auto; display: inline-block; overflow: hidden; }
section#team img, section#promotion img { width: 100%; height: auto; display: block; margin-bottom: 45px; }
section#team summary, section#promotion summary { font-family: 'Source Code Pro';  font-size: 10px; line-height: 14px; width: 100%; padding-bottom: 45px; border-bottom: 1px solid #ececec; margin-bottom: 45px; }

.img-para { height:55vh; overflow: hidden; display: block; background: #333; position: relative; top: 0; left: -12.5%; width: 125%; margin: 80px 0; }

#team article img, section#content-blocks article img, #promotion article img { margin: 5px 0 25px 0; }
#team article p, section#content-blocks article p, #promotion article p { margin: 0 0 25px 0; }
#team article p:first-letter, section#content-blocks article p:first-letter, #promotion article p:first-letter, #salon-profile p:first-letter { float: none; margin-right: 0; margin-top: 0; text-transform: none; font-family: 'Source Code Pro'; font-weight: 400; font-size: 14px; line-height: 17px; }

.block, .block-list { background: #fff; position: relative; float: left; overflow: hidden; width: 23%; /* Fallback */ width: -webkit-calc(92% / 4); width: calc(92% / 4); -webkit-box-shadow: 0px 10px 37px 0px rgba(0,0,0,0.14); -moz-box-shadow: 0px 10px 37px 0px rgba(0,0,0,0.14); box-shadow: 0px 10px 37px 0px rgba(0,0,0,0.14); margin-right:2%; margin-bottom: 2%; }
.block:last-child, .block-list:last-child { margin-right: 0; }
.block:hover, .block-list:hover { -webkit-box-shadow: 0px 15px 70px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 15px 70px 0px rgba(0,0,0,0.3); box-shadow: 0px 15px 70px 0px rgba(0,0,0,0.3); cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /*transform: scale(1.1);*/ z-index:5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /***SHARPEN***/ color:#0000ff; }
.block:hover > h3, .block:hover > small { color:#0000ff; }
.block img, .block-list img { display: block!important; width: 100%!important; position: relative!important; top:0!important; left:0!important; margin:0!important; }
.block .within, .block-list .within { padding: 13px 20px 20px 20px; min-height: 140px; height: auto; }  
.block .within small, .block-list .within small { font-family: 'Source Code Pro'; font-weight: 400; font-size: 14px; text-transform: uppercase; }  
.block .within h3, .block-list .within h3 { font-family: 'Abril Fatface'; font-weight: 400; font-size: 32px; line-height: 36px; margin-top: 0; }  

.block .within .cta, .block-list .within .cta { font-size: 14px; color: #333; background-color:transparent; text-decoration: none; border-bottom: 10px solid #ececec; line-height: 0px; display: inline; width:auto; padding: 0; position: absolute; bottom: 20px; }
.block .within .cta:hover, .block-list .within .cta:hover { border-color: #d5d5d5; }

.promotion { position: relative; float: left; overflow: hidden; width: 47%; /* Fallback */ width: -webkit-calc(94% / 2); width: calc(94% / 2); border-bottom: 1px solid #ececec; margin: 0 auto; margin-bottom: 30px; margin-right:3%; height: 100px; }
.promotion:nth-child(even) { margin-right: 0; float: right; }
.promotion small { font-family: 'Source Code Pro'; font-weight: 400; font-size: 14px; text-transform: uppercase; } 
.promotion h3 { font-size: 32px; display: inline-block; font-family: 'Abril Fatface'; margin-top: 0; }
.promotion h4 { font-family: 'oswald'; text-transform: uppercase; font-size: 32px; position: relative; text-align: right; top: -73px; margin-top: 0; }
.promotion h4 > small { font-size: 21px; font-family: 'oswald'; text-transform: uppercase; } 
.promotion:hover { color:#0000ff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; }

#salon { width:100%; max-width:1440px; margin: 0 auto; height:100vh; min-height:872px; background: transparent url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2016/01/DGH_About.jpg') no-repeat center top; background-size: 104%; overflow: visible; position:relative; background-position: -30px -30px; }
.salon { width: 302px; height: 302px; background: rgba(0,0,0,0.9); margin-left: 320px; color: #fff; padding: 28px; z-index: 11; position:absolute; margin-top: 66px; }
.salon h3 { font-family: 'oswald'; text-transform: uppercase; font-size: 21px; line-height: 27px; font-weight: 300; }
.salon p { line-height: 18px; }
.salon ul { width: 180px; margin-top: 35px; }
.salon ul li, .salon p { font-family: 'Source Code Pro'; font-weight: 400; font-size: 13px; } 
.salon ul li, .salon p, .salon ul li a { color: #fff; }
.salon ul li { width: auto; list-style: none; display:inline-block; margin-right: 20px; letter-spacing: -0.2px; position: relative; top: -22px; background-color: transparent; text-decoration: none; border-bottom: 10px solid rgba(255,255,255,0.2); line-height: 0px; margin-bottom: 8px; }
.salon ul li:hover { border-color: rgba(255,255,255,0.4); }
.salon p:first-letter { font-size: 64px; float: left; margin-right: 0.1em; margin-top: 0; text-transform: uppercase; font-family: 'Abril Fatface'; line-height: 0.76em; }
.salon-one, .salon-two, .salon-three, .salon-four, .salon-five { -webkit-box-shadow: 0px 10px 60px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 10px 60px 10px rgba(0,0,0,0.2); box-shadow: 0px 10px 60px 10px rgba(0,0,0,0.2); border: 20px solid #fff; overflow:hidden; background:#333; margin: 0; position:relative }
.salon-one { width: 50%; height: auto; float: left; margin-left:20px; margin-top: 0; z-index: 5; }
.salon-two { width: 28.5%; height: auto; float: left; margin-left:-60px; margin-top: 46px; z-index: 10; }
.salon-three { width: 23%; height: auto; float: left; margin-left:-30px; margin-top: -21px; z-index: 6; }
.salon-four { width: 23%; height: auto; float: right; margin-right: 20px; margin-top: -60%; z-index: 8; }
.salon-five { width: 23%; height: auto; float: right; margin-right: 40px; margin-top: -35%; z-index: 7; }
.salon-one img, .salon-two img, .salon-three img, .salon-four img, .salon-five img { width: 100%; height: auto; display: block; }
.salon-single { padding: 5% 10% 0.5% 10%; } 
.salon-content { padding: 0% 10% 10% 10%; } 

.clearfix { overflow: auto; zoom: 1; }

section#team h2.subtitle, section#promotion h2.subtitle, section#content-blocks h2.subtitle, #team-profile h2, .salon-content h2.subtitle { width: 212px; padding-right: 30px; border-bottom:none; margin-right:0; position: absolute; margin-top: 0; }
section#team h2.money, section#promotion h2.money { width: 350px; padding-right: 30px; border-bottom: none; margin-right: 0; position: absolute; font-size: 120px; font-weight: 300; margin-top: 31px; }
section#team h2.money small, section#promotion h2.money small { font-size: 46px; font-weight: 300; margin-top: 31px; }
.block-container h2 { margin: 40px 0; width: 100%; }
#team-profile h2 { width: 90%; font-family: 'oswald'; text-transform: uppercase; font-size: 21px; line-height: 27px; position: relative; }
article.team-profile { border-top: 1px solid #ececec; margin-top:60px; padding-top:60px; }
article.salon-profile { border-top: none; margin-top:0; padding:60px 0; }
article.team-profile p, article.salon-profile p { width: 40%; font-family: 'Source Code Pro'; font-weight: 400; font-size: 13px; line-height: 17px; margin:0; margin-bottom: 20px; overflow: hidden; }
article.team-profile img, article.salon-profile img { border: 1px solid #ececec; outline: 10px solid #fff; outline-offset: -11px; height: auto; display: block; width: 45%; margin-right:60px; float:right; margin-bottom:60px; }
article.team-profile .video, article.salon-profile .video { position: relative; padding-bottom: 25.3%; padding-top: 0; height: 0; margin-right: 60px; float: right; margin-bottom: 60px; width: 45%; overflow: hidden; }
.collection-video { height: 0; padding-bottom: 50%; padding-top: 0; position: relative; }
article.team-profile iframe, article.salon-profile iframe, .collection-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
article.team-profile p img, article.salon-profile p img { height: auto; display: block; width: 100%;  margin: 0; float: none; border: none; outline: none; outline-offset: 0; }

#team, #promotion { width: 80%; padding: 5% 10% 6.5% 10%; }
#team h1, section#content-blocks h1, #team-profile h1, #promotion h1 { margin-top:100px; }
#team p, section#content-blocks p, #promotion p, .salon-content p { font-family: 'Source Code Pro'; font-weight: 400; font-size: 13px; line-height:17px; width: 65%; position: relative; left: 250px; margin-bottom: 50px; top: 0; }
.salon-content p { top: -10px; }

#team p::first-letter, section#content-blocks p::first-letter, article.team-profile p:nth-child(2)::first-letter, #promotion p::first-letter, .salon-content p::first-letter { font-size: 64px; float: left; margin-right: 0.1em; margin-top: 0; text-transform: uppercase; font-family: 'Abril Fatface'; line-height: 0.76em; }
#team-container { width: 100%; overflow: visible; position: relative; top: 10px; padding-top: 60px; border-top: 1px solid #efefef; }
.team { position: relative; float: left; width: 22%; /* Fallback */ width: -webkit-calc(88% / 4); width: calc(88% / 4); margin-right:4%; margin-bottom: 10px; }
.team:nth-child(4), .team:nth-child(8), .team:nth-child(12), .team:nth-child(16) { margin-right: 0; }
.team img { display: block; width: 100%; }
.team h3 { font-family: "source code pro"; font-size: 14px; line-height: 0px; text-align: left; position: absolute; bottom: 25px; margin-bottom: 0; }
.team img { border:1px solid #ececec; outline: 10px solid #fff; outline-offset: -11px; width: 100%; height: auto; display: block; }
.team img:hover { -webkit-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.15); box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.15); cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; z-index:5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; border:1px solid #0000ff; outline: 10px solid #0000ff; }

article.product { width: 960px; height: 540px; background: #000; overflow: hidden; margin: 0 auto; }
article.product .product-inner { background: #fff; width: 700px; padding: 30px 30px 40px 30px; margin: 0 auto; margin-top: -200px; position: relative; bottom: -100%; }
article.product .product-inner h3 { font-size: 44px; line-height: 46px; }
article.product .product-inner small { font-size:14px; font-family: "source code pro"; text-transform: uppercase; position: relative; top:-8px; }
article.product .product-inner .primary-cta { color: #333; border: 2px solid #333; top:10px; left:0; }
article.product .product-inner .primary-cta:hover { background: #333; color: #fff; }
article.product .product-inner .secondary-cta { color: #333; top:11px; margin-left:20px; border-color:#ececec; }
article.product .product-inner .secondary-cta:hover { border-color: #d5d5d5; }
article.product img { width: 100%; height: auto; display: block; }

#instagram { width: 90%; padding: 5% 5% 8% 5%; }

.services-table, .time-table { background: white; width: 85%; padding: 6.5% 7.5% 3% 7.5%; height: auto; position: relative; top: -200px; left: 0; right: 0; overflow: hidden; -webkit-box-shadow: 0px 10px 60px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0px 10px 60px 10px rgba(0,0,0,0.1); box-shadow: 0px 10px 60px 10px rgba(0,0,0,0.1); margin-bottom: -160px; }
.time-table { top:30px; margin-bottom:5%; }
.time-table .table-header { cursor: auto; }
.time-table h3 { font-family: "abril fatface", serif; font-size: 42px; text-transform: none; border-bottom: none; margin-top: -10px; }

table.priceList-styling { width: 100%; margin-bottom: 60px; }  
.colOne, .colTwo, .colThree, .colFour, .colFive, .colSix { border-bottom: 1px dashed #efefef; font-family: 'Source Code Pro'; font-weight: 300; font-size: 14px; line-height: 14px; position: relative; float: left; padding-top: 20px; height: 34px; }  
.colOne a, .colTwo a, .colThree a, .colFour a, .colFive a, .colSix a { font-weight:300; }
.colTwo, .colThree, .colFour, .colFive, .colSix { width: 15%; }
.colOne, .table-header { font-family: 'oswald'; text-transform: uppercase; font-size: 14px; width: 25%; }
.colOne.table-header-section { font-family: "abril fatface", serif; font-size: 42px; text-transform: none; border-bottom: none; }
.extracol { width: 75%; }
.extracol2 { width: 60%; }
.extracol3 { width: 100%; }

.promotion-ad { width: 100%; height: 180px; background: red; margin: 10px auto 35px auto; position: relative; float: left; }

#collections { width: 100%; display: block; margin: 0 auto; padding: 0; background: #000; }
.collection { width: 100%; height: 100vh; display: block; margin: 0 auto; padding: 0; position: relative; top: 0; left: 0; outline: 12px solid #fff; outline-offset: -12px; overflow: hidden; margin-top: -12px; }
.collection:first-child { margin-top: 0; }
.collection img { width: 100%; height: auto; display: block; }
#collection-gallery { width: 100%; overflow: hidden;  }
#collection-gallery ul li { position: relative; float: left; overflow: hidden; width: 50%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2); height: auto; display: block; margin-bottom:0; }
#collection-gallery ul li img { width: 100%; height: auto; display: block; margin-bottom:0; }
.collection-single h1 { margin-top: 110px!important; }
.collection-single small { font-size: 14px; font-family: "source code pro"; text-transform: uppercase; position: relative; top: 90px; }

section#credits, section#featured { width: 90%; padding: 5%; margin: 0; background: rgba(247,247,247,1); color: #333; }
section#credits article, section#featured ul li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4); height: auto; display: block; margin-bottom:0; }
section#credits article h3 { color: #333; font-family: 'oswald'; text-transform: uppercase; font-size: 18px; line-height: 18px; font-weight: 300; }
section#credits article ul li, section#credits article ul li a { font-family: 'Source Code Pro'; font-weight: normal!important; font-size: 14px; line-height: 21px; color: #333; }
#credits ul li a:hover { color: #0000ff; }  
section#featured ul li img { width: 70%; height: auto; padding: 7.5%;  }
section#featured ul li img:hover { opacity: 0.6; cursor: pointer;  }


.google-maps { position: relative; overflow: hidden; width: 80%; margin:5% 10% 10% 10%; }
.google-maps .gm-wrap { margin-top:45px; position: relative; padding-bottom: 35%; height: 0; overflow: hidden; width: 100%; }
.google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.google-maps h2 { margin-bottom: 45px; }

.salon-hero, .salon-hero-img { width: 100%; display: block; margin: 0 auto; padding: 0; background: #000; border-bottom: none; }
.salon-hero img, .salon-hero-img img { width: 100%; display: block; height:100%; opacity: 0.4; }
.salon-hero-img > .slider-content { margin-top: 6px; }

.openingtimes-styling { width: 100%; margin-top:0; margin-bottom: 60px; }
.openingtimes-styling .colOne, .openingtimes-styling .colTwo, .openingtimes-styling .colThree, .openingtimes-styling .table-header { width: 33.3333%; }
.table-wrapper, .contact-wrapper { /*position: relative; left: 0; top: 0;*/ width: 50%; overflow: hidden; margin:0;  display: inline-block; padding: 0; }
.contact-wrapper { float: right; margin-left: 7.5%; width: 42.5%; }
.contact-wrapper address { font-family: 'oswald'; text-transform: uppercase; font-size: 14px; font-style: normal; margin-top: -9px; margin-bottom: 20px; letter-spacing: 0.2px; }
.contact-wrapper address a { font-family: 'oswald'; text-transform: uppercase; font-size: 14px; font-style: normal; padding-left:7px; font-weight: bold; letter-spacing: 0.6px;}
.contact-wrapper address a:hover { color: #0000ff; }
.contact-wrapper address b { font-weight: normal!important; }

/*** F O O T E R ***/

footer { width:100%; display: block; height: auto; background:#222; clear: both; }

footer .container { width: 90%; line-height: 1; padding: 2.5% 5% 1.5% 5%; text-align: center; font-family: "source code pro"; font-size: 12px; line-height: 27px; text-align: left; background:#222; }

footer .container p { color: #efefef; margin-top: 16px; text-align: left; width: 100%; line-height: 16px; }
footer .container p a { float: right; color: #fff; text-align: right; margin-left: 40px; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; border-bottom: 10px solid rgba(255,255,255,0.2); line-height: 0px; display: inline-block; margin-top: 8px; }
footer .container p.colophon { margin-top:20px; width: 100%; border-top: 1px solid #333; padding-top: 20px; color:#999; }
footer .container p.colophon a { float: none; text-align: left; margin-left: 0; border-bottom: 10px solid rgba(255,255,255,0.2); line-height: 0px; display: inline-block; margin-bottom:-6px; }
footer .container p.colophon a:hover, footer .container p a:hover { border-color: rgba(255,255,255,0.4); }

/*** A B O U T ***/

.parallax { height: 500px; /* fallback for older browsers */ height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 300px; perspective: 300px; -webkit-perspective-origin-x: 100%; perspective-origin-x: 100%; }
.parallax__group { position: relative; height: 500px; /* fallback for older browsers */ height: 100vh; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.parallax__layer { position: absolute; top: 0; left: -2.5%; right: -2.5%; bottom: 0; -webkit-transform-origin-x: 100%; transform-origin-x: 100%; overflow: hidden; width: 105%; }
.parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); -webkit-transform: translateZ(90px) scale(.7); transform: translateZ(90px) scale(.7); z-index: 1; }
.parallax__layer--base { -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 4; }
.parallax__layer--back { -webkit-transform: translateZ(-300px) scale(2); transform: translateZ(-300px) scale(2); z-index: 3; }
.parallax__layer--deep { -webkit-transform: translateZ(-600px) scale(3); transform: translateZ(-600px) scale(3); z-index: 2; }

body#about, html#about { overflow: hidden; }
.parallax { font-size: 200%; }
.title { position: absolute; left: 50%; top: 47.5%; width: 60%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; }
.title h1 { text-align: left; font-size: 2em; line-height: 1em; }
.title small { font-size: 12px; font-family: "source code pro"; text-transform: uppercase; position: relative; margin-bottom: 0px; }
.title p { text-align: left; font-family: 'Source Code Pro'; font-weight: 400; font-size: 13px; line-height: 18px; width: 50%; }
.title p:first-letter { font-size: 64px; float: left; margin-right: 0.1em; margin-top: 0; text-transform: uppercase; font-family: 'Abril Fatface'; line-height: 0.76em; }

#group1 { z-index: 5; /* slide over group 2 */ }
#group1 .parallax__layer--base { background: #000 url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2016/01/DGH_About-Hero.jpg'); background-size: cover; background-position: 50% 50%; }
#group2 { z-index: 3; /* slide under groups 1 and 3 */ }
#group2 .parallax__layer--back { background: #000 url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2015/11/dgh_salon-025.jpg'); background-size: cover; }
#group3 { z-index: 4; /* slide over group 2 and 4 */ }
#group3 .parallax__layer--base { background: #000 url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2016/01/dgh_salon-016.jpg'); background-size: cover; }
#group4 { z-index: 2; /* slide under group 3 and 5 */ }
#group4 .parallax__layer--deep { background: #000 url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2016/01/dgh_salon-001.png'); background-size: cover; }
#group5 { z-index: 3; /* slide over group 4 and 6 */ }
#group5 .parallax__layer--base { background: #000 url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2016/01/dgh_salon-021.jpg'); background-size: cover; }
#group6 { z-index: 2; /* slide under group 5 and 7 */ }
#group6 .parallax__layer--back { background: #000 url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2016/01/dgh_salon-023.jpg'); background-size: cover; }
#group7 { z-index: 3; /* slide over group 7 */ }
#group7 .parallax__layer--base { background: #000 url('http://thenew.danielgrangerhairdressing.com/wp-content/uploads/2016/01/dgh_salon-022.jpg'); background-size: cover; }

/*** A D   S P A C E ***/

figure#ad-space { background: grey; width: 100%; height: 140px; position: relative; left: 0; bottom: 0; margin: 0 auto; padding: 0; }

/*** P A G E   N A V I ***/

section#page-navi { width: 100%; height: auto; position: relative; left: 0; bottom: 0; margin: 0 auto; padding: 0; z-index:10; }
section#page-navi ul li { position: relative; float: left; overflow: hidden; width: 50%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2); height: auto; display: block; margin-bottom:0; background: #000; }
section#page-navi ul li a { display: block; width: 100%; cursor: pointer; left: 0; }
section#page-navi ul li a h3 { font-family: 'Abril Fatface', serif; font-size: 54px; text-decoration: none; color: #fff; text-transform: none; width: 80%; z-index: 50; position: absolute; bottom: 40px; left: 40px; opacity: 1; line-height: 1em; visibility: hidden; }
section#page-navi ul li a small { font-size: 14px; text-decoration: none; color: #fff; text-transform: none; width: 80%; z-index: 50; position: absolute; bottom: 120px; left: 40px; opacity: 1; line-height: 1em; visibility: hidden; font-family: "source code pro"; text-transform: uppercase; }
section#page-navi ul li a span { font-size: 24px; text-decoration: none; color: #fff; text-transform: none; opacity: 1; line-height: 1em; visibility: hidden; font-family: "source code pro"; text-transform: uppercase; }
section#page-navi ul li a span:visted { color:#fff; }
section#page-navi ul li a div { left: 0; top: 0; right: 0; bottom: 0; margin-bottom: 0; border: none; opacity: 1; transition: opacity 250ms ease; -moz-transition: opacity 250ms ease; -webkit-transition: opacity 250ms ease; backface-visibility: visible; -webkit-backface-visibility: visible; position: relative; }
section#page-navi ul li a div img { width: 100%; height: auto; display: block; cursor: pointer; }
section#page-navi ul li a:hover div { opacity: 0.4; }
section#page-navi ul li a:hover h3, section#page-navi ul li a:hover small, section#page-navi ul li a:hover span { visibility: visible; }
section#page-navi ul li a h3, section#page-navi ul li a span, section#page-navi ul li a small { visibility: visible; }


/*** C H R O M E   H A C K S ***/

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .secondary-cta { top:23px; }
    section#about h1 { top: 0; }
    footer .container p.colophon a { margin-bottom:0; }
    section#content-blocks img { top: -50%; }
    section#about ul li:first-child { margin-top:0; }
}


/*** F I R E F O X   H A C K S ***/

@-moz-document url-prefix() { 
    .page-down p { bottom: -33px; left: -7px; }
    section#about ul { position: relative; top: -37px; }
    section#about p { margin-top: -162px; }
    .secondary-cta { top: 23px; }
    section#about ul li:first-child { margin-top:0; }
}

/*** S A F A R I   H A C K S   ***/

@media screen and (min-width:0\0) {
    article.team-profile img, article.salon-profile img { outline: 12px solid #fff ; outline-offset: -10px; }
}

/*** I E  H A C K S ***/   

@media screen { @media (min-width: 0px) { body .fm-button { padding: 18px 16px 41px 16px; } } }

/*** M E D I A   Q U E R I E S ***/

@media all and (min-width : 769px) and (max-width : 1024px) {
    .hero { margin-top: 60px; }
    .iosSlider { height: 75vh; }
    .slider-content { margin-top: -310px; }
    .slider-content h1 { font-size: 74px; line-height: 78px; }
    .primary-cta, .secondary-cta { top:0; }
    footer .container p { font-size: 11px; }
    footer .container p a { margin-left: 15px; }
    .salon-one { width: 90%; margin-left:20px; margin-top: 0; }
    .salon-two { width: 35%; margin-left:-60px; margin-top: -324px; }
    .salon-three { width: 28%; margin-left:-70px; margin-top: -550px; }
    .salon-four { width: 35%; margin-right: 80px; margin-top: -45%; }
    .salon-five { width: 27%; margin-right: 300px; margin-top: -18%; }
    header ul li { top: -8px; }
    header ul li.header-address { top: 12px; left: -271px; }
    .salon-hero { margin-top: 60px;}
}

@media all and (min-width : 0px) and (max-width : 1024px) {
    .slider-counter { top: -320px; }
    h1 { font-size: 56px; line-height: 58px; }
    h1.logo { background-size:cover; }
    section#about { width: 90%; padding: 6.5% 5% 4.5% 5%; }
    section#content-blocks { width:90%; padding:5%; }
    section#promotion-blocks { width:90%; padding:5%; }
    #team, #promotion { width: 90%; padding: 5%; padding-bottom: 30px; }
    #products h2 { margin: -4px auto 0 auto; }
    .block, .team, .block-list { width: 47%; width: -webkit-calc(94% / 2); width: calc(94% / 2); margin:3%; }
    .team:first-child, .team:nth-child(2) { margin-top:0!important; }
    .team:nth-child(odd) { margin-left: 0; margin-top: 0px; }
    .team:nth-child(even) { margin-right: 0; margin-top: 0px; }
    .team:nth-child(15), .team:nth-child(16) { margin-bottom: 30px; }
    .block:nth-child(odd) { margin-left: 0; }
    .block:nth-child(even) { margin-right: 0; }
    .block-list:nth-child(odd) { margin-right: 0; }
    .block-list:nth-child(even) { margin-left: 0; }
    header { width: 100%; height: 60px; }
    h1.logo { left: 11px; top: -32px; height: 34px; margin-bottom: 0; width: 83px; }
    header ul { left: 10px; top: -34px; height: 40px; margin-bottom: 0; margin-top: 10px; margin-left: 117px; }
    body .fm-button { top: 10px; right: 10px; padding: 6px 12px 10px 12px; font-size:12px; }
    .tcon, .tcon.home { width: 44px; border-color: #333; color: #333; padding: 6px 6px 10px 6px; }
    .tcon-menu__lines::before { top: 6px; }
    .tcon-menu__lines::after { top: -6px; }
    .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { width: 17px; }
    #sticky.tcon.light { border-color: #333; color: #333; }
    .tcon-menu__lines, .tcon-menu__lines:after, .tcon-menu__lines:before, #sticky.light > .tcon-menu__lines, #sticky.light >    .tcon-menu__lines:before, #sticky.light > .tcon-menu__lines:after, .tcon-menu__lines.home, .tcon-menu__lines.home:after, .tcon-menu__lines.home:before { background: #333; }  
    .tcon-transform > .tcon-menu__lines.dark-bg.home { background: transparent!important;}
    .make-booking { top: 10px; right: 63px; font-size: 12px; line-height: 40px; width: 152px; }
    .slider-content h1 { font-size: 42px; line-height: 48px; padding-top: 30px; margin-bottom: 22px; width:90%; }
    #team-container { width: 100%; overflow: visible; position: relative; top: 15px; padding-top: 30px; }
    .block:hover, .block-list:hover { transform: scale(1); }
    article.team-profile .video { padding-bottom: 56.4%; margin-right: 0; margin-bottom: 30px; width: 100%; }
    article.team-profile img, article.salon-profile img { width: 100%; margin-right: 0; float: right; margin-bottom:30px; }
    article.team-profile p, #salon-profile p { width: 100%; }
    article.team-profile { padding-top: 30px; margin-top:30px; }
    article.salon-profile { padding: 30px 0; }
    #sticky.tcon.dark.tcon-transform, #sticky.tcon.light.tcon-transform { border-color: #333; color: #333; }
    #sticky.dark.tcon-transform > .tcon-menu__lines:before, #sticky.dark.tcon-transform > .tcon-menu__lines:after, #sticky.light.tcon-transform > .tcon-menu__lines:before, #sticky.light.tcon-transform > .tcon-menu__lines:after {
    background: #333; }
    .fm-nav ul li a { font-size: 74px; }
    section#page-navi ul li a h3, section#page-navi ul li a span, section#page-navi ul li a small { visibility: visible; }
    /*section#page-navi ul li a div img { opacity: 0.4; }*/
}

@media all and (min-width : 0px) and (max-width : 768px) {
    .promotion:first-child { /*margin-top:25px;*/ margin-top:0; }
    #team h1, section#content-blocks h1, #team-profile h1, #promotion h1 { margin-top:70px; }
    .iosSlider .slider .item, .iosSlider { height: 560px; }
    .iosSlider .slider .item img { height: 100%; width: auto; left: -70%; position: relative; }
    .promotion { width: 100; width: -webkit-calc(100% / 1); width: calc(100% / 1); margin-bottom: 30px; margin-right: 0; height: 70px; }
    .slider-content { left: 5%; margin-top: 18vh; top: 10px; }
    h1 { font-size: 40px; line-height: 44px; }
    #team h1, section#content-blocks h1, #promotion h1 { margin-top:70px; margin-bottom: 10px; } 
    .slider-counter { top: -110px; left: 5%; width: 90%; } 
    .primary-cta { top: 0; margin-right: 40px; }
    .secondary-cta { top: 15px; margin-left: 0px; display: inline-block; }
    .prev, .next { visibility: hidden; } 
    section#content-blocks > .cta, section#promotion-blocks > .cta { left: 50%; top: -60px; }
    section#about { background-size:cover; padding-top: 36px; }
    section#about h1, section#team h2.subtitle, section#content-blocks h2.subtitle { width: 90%; padding-right: 0; position: inherit; }
    section#promotion h2.money { width: 90%!important; padding-right: 0!important; position: inherit!important; }
    section#content-blocks h2, section#promotion-blocks h2, section#team h2, section#team h2.money, section#promotion h2, .salon-content h2.subtitle { width:90%; }
    section#team h2.money { font-size: 46px; line-height: 0px; padding-bottom: 45px; margin-bottom: 15px; border-bottom: 1px solid #efefef; position: relative; }
    section#team h2.money small { font-size: 26px; line-height: 0px; }
    section#team h2.subtitle, section#content-blocks h2.subtitle, .salon-content h2.subtitle { padding-bottom: 15px; border-bottom: 1px solid #efefef; }
    section#promotion h2.money { padding-bottom: 15px!important; border-bottom: 1px solid #efefef!important; }
    .salon-content h2.subtitle { padding-right: 0; }
    section#about p { width: 100%; left: 0; top: 40px; margin-top: 20px; position: inherit; }
    #team p, section#content-blocks p, #promotion p, .salon-content p { width: 100%; left: 0; top: 0; margin-top: 20px; position: inherit; margin-bottom: 10px; }
    .salon-content p { margin-top: 90px; }
    section#promotion h2.money { font-size: 46px!important; line-height: 0px!important; padding-bottom: 40px!important; margin-bottom: 15px!important; } 
    section#promotion h2.money small { font-size: 26px!important; line-height: 0px!important; } 
    section#promotion img { margin: 30px auto; }
    section#promotion summary { padding-bottom: 30px; margin-bottom: 30px; }
    #team-profile h1 { margin-bottom: 10px; }
    .img-para { height: 50vh; width: 100%; left: 0; margin: 30px 0; top: 20px; }
    section#content-blocks img { top: -23%; width: 150%; }  
    section#content-blocks article img { top: 40px; width: 100%; }  
    .page-down { border-top: 16px solid #f9f9f9; border-right: 16px solid #ffffff; border-bottom: 16px solid #f9f9f9; border-left: 16px solid #ffffff; bottom: -16px; left: 50%; margin-left: -8px; }
    section#content-blocks h2, section#promotion-blocks h2, #team h2, #promotion h2 { width: 90%; padding-bottom: 16px; margin-bottom: 30px; border-bottom: 1px solid #ececec; }
    section#content-blocks > .cta, section#promotion-blocks > .cta, #team a.cta, #promotion a.cta { left:0; top: -24px; }
    .block .within, .block-list .within { padding: 10px; }
    .block .within h3, .block-list .within h3 { font-size: 22px; line-height: 26px; }
    .block, .team, .block-list { width: 48%; width: -webkit-calc(96% / 2); width: calc(96% / 2); margin: 2%; } 
    .block .within .cta, .block-list .within .cta { font-size: 12px; bottom: 10px; }
    .promotion h3 { font-size: 22px; }
    #salon { background-size: 300%; max-width: 100%; height: auto; min-height: 110vh; } 
    .salon { width: 260px; height: auto; padding: 20px; margin-left: 0; margin-top: 66px; }
    footer .container { font-size: 10px; }
    footer .container p a { text-align: left; float: none; margin-left: 0; display: inline-block; margin-top: 20px; }
    footer .container p a:first-child { margin-right: 20px; }
    footer .container p.colophon a:first-child { margin-right: 0; }
    footer .container p.colophon a:last-child { font-size:9.6px; }
    footer .container p.colophon { margin-top: 20px; padding-top: 5px; }
    .salon-one, .salon-two, .salon-three, .salon-four, .salon-five { border: 12px solid #fff; }
    .salon-one { width: 90%; margin-left: -12px; margin-top: 30px; }
    .salon-two { width: 45%; margin-left: 0; margin-top: -19px; }
    .salon-three { width: 45%; margin-left: 181px; margin-top: -296px; }
    .salon-four { width: 45%; margin-right: -12px; margin-top: -600px; }
    .salon-five { width: 45%; margin-right: 50px; margin-top: -140px; }
    header ul, header ul li, header ul li.header-address { display: none; visibility: hidden; }
    .services-table { width: 100%; left: -7.5%; }
    .colOne, .colTwo, .colThree, .colFour, .colFive, .colSix { font-size: 8px; line-height: 10px; height: 30px; padding-top: 20px; }  
    .colOne, .table-header { font-size: 10px; }
    .colOne.table-header-section { font-size: 24px; }
    section#content-blocks > .cta, section#promotion-blocks > .cta, section#team > .cta, section#promotion > .cta { margin-left: 0; }
    .inline-button { font-size: 12px; line-height: 40px; padding: 0 22px; }
    .promotion h4 { top: -50px; }
    .promotion h3 { line-height:26px; }
    .salon-fix { padding:5% 5% 0.2% 5%!important; width: 90%; }
    .salon-hero { margin-top: 30px;}
    .google-maps .gm-wrap { margin-top: 0; padding-bottom: 70%; }
    section.hero.salon-hero > .container > #myCarousel.iosSlider { height:42.5vh; }
    section.hero.salon-hero > .container > #myCarousel.iosSlider > .slider > .item img { width: 100%; height: auto; left:0; } 
    .fm-nav ul li a { font-size: 36px; margin-bottom: 0px;}
    .fm-menu { top: 40px; }
    #slide-counter { top: -22vh; left: 17px; padding-top: 5px; }
    #slide-counter.salon-carousel { top: -368px; }
    .salon-hero-img { margin-top: 60px; }
    .collection { outline: none; outline-offset: 0; margin-top:0; }
    .collection img { width: auto; height: 100%; opacity: 0.4; right:0; left: -50%; position: relative;}
    #collection-gallery ul li { width: 100%; /* Fallback */ width: -webkit-calc(100% / 1); width: calc(100% / 1); }
    .openingtimes-styling { margin-bottom: 10px; }
    .table-wrapper, .contact-wrapper {  width: 100%; }
    .time-table h3 { font-size: 24px; line-height: 64px; }
    .contact-wrapper address, .contact-wrapper address a { font-size: 12px; line-height: 18px; }
    .time-table { padding: 6.5% 7.5% 7.5% 7.5%; top: 10px; }
    section#page-navi ul li a h3 { font-size: 24px; width: 90%; bottom: 0; left: 10px; }
    section#page-navi ul li a span { font-size: 14px; }
    section#page-navi ul li a small { bottom: 70px; left: 10px; }
    section#about ul li:first-child { margin-top:5px; } 
    .title { left: 40%; }
    .title h1, .title h2 { font-size: 42px; width: 120%; line-height: 46px; }
    .title p { width: 100%; } 
    .parallax__layer--base { -webkit-transform: translateZ(1)!important; transform: translateZ(1)!important; }
    .parallax__layer--back { -webkit-transform: translateZ(0px) scale(1); transform: translateZ(0px) scale(1); }
    .parallax__layer--deep { -webkit-transform: translateZ(0px) scale(1); transform: translateZ(0px) scale(1); }
    section#credits article, section#featured ul li { width: 33.3333%; /* Fallback */ width: -webkit-calc(100% / 3); width: calc(100% / 3); margin-bottom: 20px; display: block; }
    section#featured ul li { margin-top: 0; margin-bottom: 0 }
    section#featured ul li:nth-child(1), section#featured ul li:nth-child(2), section#featured ul li:nth-child(3) { margin-top: 20px; }
    section#credits article h3 { font-size: 14px; }
    section#featured h2 { font-size: 36px; }
}

@media all and (min-width : 550px) and (max-width : 770px) { 
    .iosSlider .slider .item img { height: 100%; width: auto; left: 0; } 
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)  and (-webkit-min-device-pixel-ratio: 2) {
    .iosSlider .slider .item, .iosSlider {height:560px; }
    .iosSlider .slider .item img { height: auto; width: 110%; left: 0; }
    .prev, .next { visibility: visible; margin-top: -60px; }  
    .slider-content { left: 12.5%; top: -50px; }
    .secondary-cta { top: 0; }
    .slider-content h1 { width: 160%; font-size: 64px; line-height: 70px; margin-bottom: 34px; }
    #slide-counter.salon-carousel { position: absolute; top: 520px; }
    #salon-profile { padding: 5% 10%; }
    .fm-nav ul li a { font-size: 72px; } 
    .salon-hero-img > .slider-content { /*margin-top: -280px;*/ }
    #team p, section#content-blocks p, #promotion p, .salon-content p { margin-bottom: 30px!important; }
    section.hero.salon-hero > .container > #myCarousel.iosSlider { height: 55vh; }
    .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .slider-content h1 { width: 160%; font-size: 64px; line-height: 70px; margin-bottom: 34px; }
    #slide-counter.salon-carousel { position: absolute; top: 510px; left: 20px; }
    #salon-profile { padding: 5% 10%; }
    .salon-hero { margin-top:0; }
    .salon-hero-img > .slider-content { margin-top: -230px; }
    .slider-content { margin-top: -272px; }
    .fm-nav ul li a { font-size: 48px; } 
    #team p, section#content-blocks p, #promotion p, .salon-content p { margin-bottom: 30px!important; }
    .hero { margin-top:0; }
    header { width: 530px; height: 110px; }
    h1.logo { left: 33px; top: -11px; width: 118px; height: 45px; }
    header ul { margin-top: 37px; margin-left: 175px; height: 40px; }
    header ul li.header-address { position: relative; top: -8px; left:0; }
    .make-booking { font-size: 14px; width: 205px; line-height: 63px; top: 23px; right: 110px; }
    body .fm-button { top: 23px; right: 23px; padding: 18px 30px 41px 30px; }
    .tcon, .tcon.home, #sticky.tcon.light, #sticky.tcon.dark.tcon-transform, #sticky.tcon.light.tcon-transform { border-color: #fff; color: #fff; }
    .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
    section#content-blocks img { top:-43%; }
    body .fm-button { padding: 6px 6px 10px 6px; }
    .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
    .primary-cta { margin-right: 50px; }
    #slide-counter.salon-carousel { top: -402px; }
    section#content-blocks img { top: -42%; }
    body .fm-button { padding: 6px 6px 10px 6px; }
    .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
    .secondary-cta { top: 0px; }
    section.hero.salon-hero > .container > #myCarousel.iosSlider { height: 100vh; }
    #slide-counter.salon-carousel, #slide-counter { top:-12vh; }
    .collection img, .iosSlider .slider .item img { width: 100%; height: auto; left:0; }
    .slider-content { margin-top: 5vh; }
    body .fm-button { padding: 6px 6px 10px 6px; }
    .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
    .primary-cta { margin-right: 100px; }
    #slide-counter.salon-carousel { top: -468px; }
    section#content-blocks img { top: -26%; }
    body .fm-button { padding: 6px 6px 10px 6px; }
    .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
    .collection img, .iosSlider .slider .item img { width: 100%; height: auto; left:0; }
    .secondary-cta { top: 0px; }
    section.hero.salon-hero > .container > #myCarousel.iosSlider { height: 100vh; }
    #slide-counter.salon-carousel { top:-10vh; }
    .slider-content { margin-top: 6vh; }
    #slide-counter { top: -10vh; }
    .services-table { top: -20px; }
    section#content-blocks img { top: -42%; }
    body .fm-button { padding: 6px 6px 10px 6px; }
    .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(1); transform: translateZ(90px) scale(1); }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 1024px) {
.fm-nav ul li img { display: none!important; width: 0!important; }
.fm-nav ul li a:hover + img { opacity: 0!important; visibility: hidden!important; height: 0!important; }
section#promotion h2.money { font-size: 46px!important; line-height: 0px!important; padding-bottom: 40px!important; margin-bottom: 15px!important; } 
section#promotion h2.money small { font-size: 26px!important; line-height: 0px!important; } 
}

@media all and (min-width : 1440px) and (max-width : 9999px) {
    header { left: -720px; margin-left:50%; }
    body .make-booking { right: -604px; margin-right:50%; }
    body .fm-button { right: -694px; margin-right:50%; }
    h1.logo { left: -686px; margin-left:50%; }
}