@charset "UTF-8";
/* CSS Document */

/******************************************************\
* beautybyhand.co.uk  -  fonts                         *
* hewn of solid text at oastone.co.uk                  *
*                                                      *
* version 1, july 2018                                 *
* sets up fonts and basic text styles                  *
\******************************************************/



/* ==== set up those font faces ==== */

/* -- either by embedding fonts from google fonts -- */

/*@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);*/
/*@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);*/

/* -- or by using your own web fonts -- */

@font-face {
    font-family: 'Chin up Buttercup Cutecaps';
    src: url('../fonts/hinted-ChinupButtercupCutecaps.eot');
    src: url('../fonts/hinted-ChinupButtercupCutecaps.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hinted-ChinupButtercupCutecaps.woff2') format('woff2'),
        url('../fonts/hinted-ChinupButtercupCutecaps.woff') format('woff'),
        url('../fonts/hinted-ChinupButtercupCutecaps.ttf') format('truetype'),
        url('../fonts/hinted-ChinupButtercupCutecaps.svg#ChinupButtercupCutecaps') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'The Hand Extrablack';
    src: url('../fonts/hinted-TheHandExtrablack.eot');
    src: url('../fonts/hinted-TheHandExtrablack.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hinted-TheHandExtrablack.woff2') format('woff2'),
        url('../fonts/hinted-TheHandExtrablack.woff') format('woff'),
        url('../fonts/hinted-TheHandExtrablack.ttf') format('truetype'),
        url('../fonts/hinted-TheHandExtrablack.svg#TheHandExtrablack') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'The Hand';
    src: url('../fonts/hinted-TheHandBold.eot');
    src: url('../fonts/hinted-TheHandBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hinted-TheHandBold.woff2') format('woff2'),
        url('../fonts/hinted-TheHandBold.woff') format('woff'),
        url('../fonts/hinted-TheHandBold.ttf') format('truetype'),
        url('../fonts/hinted-TheHandBold.svg#TheHandBold') format('svg');
    font-weight: 500;
    font-style: normal;
}




/* ==== set base fonts ==== added sizing in here too as easier ==== */

body {
	font-family: 'The Hand', Helvetica, Arial, sans-serif;	
	color: #575757;
	/*font-weight: normal;*/
	/* trying these here to cover off p, li, ol, etc */
	font-size: 24px;
	line-height: 30px;
}
/* no-faceface fallback */
.no-fontface body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 24px;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
	margin-top: 0;
	margin-bottom: 10px;
}

h1 {
	display: none;	
}

h2 {
	font-family: 'Chin up Buttercup Cutecaps', Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #ed1e79;
	font-size: 64px; 
	line-height: 72px;
}
/* no-faceface fallback */
.no-fontface h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 56px; 
	line-height: 64px;
}

h3 {
	font-family: 'The Hand Extrablack', Helvetica, Arial, sans-serif;
	font-weight: 500;	
	color: #ed1e79;
	font-size: 34px; 
	line-height: 40px;
	
}
/* no-faceface fallback */
.no-fontface h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 26px; 
	line-height: 30px;
}
h4 {
	font-family: 'The Hand Extrablack', Helvetica, Arial, sans-serif;
	font-weight: 500;	
	font-size: 30px; 
	line-height: 36px;
	
}
/* no-faceface fallback */
.no-fontface h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 24px; 
	line-height: 30px;
}
h5, h6 {
	font-family: 'The Hand Extrablack', Helvetica, Arial, sans-serif;
	font-weight: 500;	
	font-size: 24px; 
	line-height: 30px;
	
}
/* no-faceface fallback */
.no-fontface h5, .no-fontface h6 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 18px; 
	line-height: 24px;
}

h5 {
	color: #ed1e79;
}

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6,
ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6,
ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 {
	margin-top: 30px; /* puts large space after <p>/<ul>/<ol>/<hr> when before headings making heirarchy clearer */
} 

.hero button {
	font-family: 'The Hand Extrablack', Helvetica, Arial, sans-serif;
	font-weight: 500;	
	font-size: 24px; 
	line-height: 30px;
}
.no-fontface .hero button {
	font-family: Helvetica, Arial, sans-serif;	
	font-weight: normal;	
	font-size: 18px; 
	line-height: 24px;
}

/* ---- root font styles ---- */

* {
  /*font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-family: 'Avenir Next', Helvetica, Arial, sans-serif;*/
  /*font-weight: normal;
  font-style: normal;*/ /* tagged out because I have no clue why it's needed */

	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	
  /* color: #131B1A;*/ /* tagged out because I have no clue why it's needed */
  /*line-height: 1.5;*/
}

/* ---- typography ---- */
/* -- using relative sizes (rems) based on 16 being the base font size -- */

/*h1 {
	font-size: 2.25rem;
	text-transform: uppercase;
}

h2 {
  	font-size: 2.25rem;
	text-transform: uppercase;
	margin: 0;
	line-height: 3.1rem;
}

h3 {
	font-size: 1.125rem;
	text-transform: uppercase;
	font-weight: normal;
}

h4 {
	font-size: 1.125rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: 0.875rem;
}

p {
	
}*/

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

a.linky {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid #ed1e79;
}

a[href^=tel] { 
	/* fixes iOS' habit of restyling telephone links */
	color: inherit; 
	/*text-decoration: none;*/
}
h5 a, h5 a[href^=tel] {
	text-decoration: underline;
}

p.smaller,
p span.smaller {
	font-size: 21px;
	line-height: 27px;
}
/* no-faceface fallback */
.no-fontface p.smaller {
	font-size: 13px;
	line-height: 19px;
}

strong, b {
	font-family: 'The Hand Extrablack', Helvetica, Arial, sans-serif;
	font-weight: 500;
}
.no-fontface strong, .no-fontface b {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
}