/*
Theme Name: Supersonic Playground Boilerplate
Theme URI: http://www.supersonicplayground.com/
Author: Supersonic Playground
Author URI: http://www.supersonicplayground.com/
Description: Starter boilerplate for new front end projects
Version: 1.0
License: All work ©2017 Supersonic Playground Ltd. Not for public use.
License URI: http://www.supersonicplayground.com/
Tags:
Text Domain: supersonicplayground
*/
/* The global.less stylesheet is where all of the previous separate LESS stylesheets are compiled into one main style.css stylesheet. In this process, the LESS is converted to standard CSS that can be read by the web browser

To complie global.less into stadard CSS you will need a CSS Preprocessor that works with LESS. On Macs we use CodeKit and you can find out more about configuring CodeKit here. */
/* 
Use: Reset
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 01-reset.less stylesheet is intended to remove many of the default browser settings and styles that browsers apply as standard and which can be detrimental to a design. It essentially resets the browser to a blank canvas so that we can style our projects as they should look without the browser adjusting our styles. */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,600,600i');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: top;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* 
Use: Mixins
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 02-mixins.less stylesheet contains a selection of common mixin classes that can themselves be used within other classes. */
/*************************************************************************
 #Input Override
**************************************************************************/
/* This can be used on things like form input to ensure that browsers don't apply their own styling. For more info check out https://css-tricks.com/almanac/properties/a/appearance/. */
/*************************************************************************
 #Transition Bezier
**************************************************************************/
/* This creates a transition using the @cubicBezier variable that is set in setup.less. When you use this class in the styling for the element, you can replace the @timing with the actual time that you want, for example 500ms.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-bezier(500ms);
} */
/*************************************************************************
 #Transition Bezier Delay
**************************************************************************/
/* This works exactly the same as the above class, except that you can also add a delay by replacing the @delay with the time that you want the delay to be.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-bezier-delay(500ms, 250ms);
} */
/*************************************************************************
 #Transition Linear
**************************************************************************/
/* This creates a transition using the simple linear movement. As above, you can replace @timing with the time of the transition.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-linear(500ms);
} */
/*************************************************************************
 #Transition None
**************************************************************************/
/* This can be used to cancel any previous transitions on an element.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-none();
} */
/* 
Use: Measurements
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 03-measurements.less sets the global Base Level and Base Size, as well as the various breakpoint sizes. The purpose of this is so that all measurements throughout the site are based off of the one - which itself is a calculation based on the which is set in setup.less - in order to achieve uniformity across the project.

The benefit of this is that all sizes and measurements will share a common scale, i.e. be multiples of the Base Level - if the scale then needs to be adjusted up or down, only the Base Level would need adjusting here and the whole site will scale proportionally, avoiding the need to arbitrarily update all measurements throughtout the site. */
/*************************************************************************
 #Base Level
**************************************************************************/
/* This is the Base Level. All measurements throughout the project will be based from this. It uses the Base Pixel Equivalent which is set in setup.less which is then converted into a percentage by overwriting the browser's default setting of 16px for body copy. If the Base Level needs to be another pixel value equivalent, then adjust the Base Pixel Equivalent in setup.less. For example, if 18px was required, then set the Base Pixel Equivalent to 18 in setup.less. */
/*************************************************************************
 #Base Size
**************************************************************************/
/* This is the Base Size. The @base-level variable effectively sets the project's base font size to a certain level, which becomes the equivalent to 1rem. The @base-size variable then converts 1rem into a global variable that can be used throughout the project to set the size of elements such as text or modules.

So for example, if the Base Pixel Equivalent in setup.less is set to 20, and you needed to create an element that would normally be width: 100px, you would instead set this to width: @base-size*5. */
/*************************************************************************
 #Breakpoints
**************************************************************************/
/* These are the predefined breakpoint measurements. They convert the browser's default font size (16px) into 1em and then multiply it to achieve a predefined set of screen sizes for the various media queries below to be based off of. */
/* 400px */
/* 500px */
/* 650px */
/* 750px */
/* 850px */
/* 1000px */
/* 1100px */
/* 1250px */
/* 1500px */
/* 1750px */
/* 2000px */
/*************************************************************************
 #From Media Queries
**************************************************************************/
/* These are the predefined breakpoint variables for 'from' media queries. They take the breakpoint measurements from above and wrap them up as variables that can be called throughout the site's LESS files for media queries where stuff needs to happen 'from' a particular screen size.

Your LESS code would look something like this:

.my-class-name {
	@media @from-750 {
		.do-something;
	}
} */
/*************************************************************************
 #To Media Queries
**************************************************************************/
/* These are the predefined breakpoint variables for 'to' media queries. They take the breakpoint measurements from above and wrap them up as variables that can be called throughout the site's LESS files for media queries where stuff needs to happen 'to' a particular screen size.

Your LESS code would look something like this:

.my-class-name {
	@media @to-750 {
		.do-something;
	}
} */
/*************************************************************************
 #HTML Font Size Adjustment
**************************************************************************/
/* This is a series of media queries that adjusts the html font size to achieve responsive typography whereby all the text on the site will scale proportionally very slightly from small the large screens. It ensures that the text scales to be slightly larger on large screens and slightly smaller on small screens. If the text is too small/large at either end of the scale, you can adjust the multiples to suit. */
html {
  font-size: 80%;
}
@media screen and (min-width: 31.25em) {
  html {
    font-size: 87.5%;
  }
}
@media screen and (min-width: 46.875em) {
  html {
    font-size: 92.5%;
  }
}
@media screen and (min-width: 62.5em) {
  html {
    font-size: 100%;
  }
}
@media screen and (min-width: 78.125em) {
  html {
    font-size: 105%;
  }
}
@media screen and (min-width: 93.75em) {
  html {
    font-size: 110%;
  }
}
@media screen and (min-width: 109.375em) {
  html {
    font-size: 115%;
  }
}
@media screen and (min-width: 125em) {
  html {
    font-size: 120%;
  }
}
/* 
Use: Grid
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 04-grid.less contains the underlying grid system. It works based on a combination of Fluid Margins and Column Widths which are set in setup.less. */
/*************************************************************************
 #Multi-Column Layout
**************************************************************************/
/* This part creates a set of Column Modules, which group a set number of Fluid Margins and Column Widths. These are then used later in 07-content-layout.less to create the various layout Grid Modules that form the overall grid system and allow us to create our responsive grid system layouts. */
/*
Use: Colours
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 05-colours.less stylesheet allows you to customise the colours of your project. This allows the colours to be set in once here and then referenced throughout the site's LESS files. The benefit of this is that they only need to be changed here and they will then update automatically throughout the site. The colours included in the Basic Front End Boilerplate are the standard Supersonic Playground brand colours, so you'll need to change them to whatever your project requires.

Also included are brand colours for various popular social networks. These can be kept if elements such as social sharing modules are included in the project, or removed if not.

Each colour consists of two parts: a variable and a mixin.

The Variable

This part is the variable. It contains the colour's hex value. This would be used throught the site's LESS files where a hex value would usually be used. For example: 'background-color: @blue-01'.

@blue-01: #133b75;

The Mixin

This part is the mixin. It creates a class that uses the variable's hex value to set the colour. This would be used throughtout the site's LESS files where a hex value would be used for the 'color:' property, for example text.

.blue-01() {
	color: @blue-01;
} */
/*************************************************************************
 #Colours
**************************************************************************/
/* #Core Colours ------------------------------------------------------------------------ */
/*
Use: Typography
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 06-typography.less stylesheet allows you to customise the typography of your project. Certain elements will be consistent across all project, but some elements should be changed to suit the project - for example the fonts included in the Basic Front End Boilerplate are the standard Supersonic Playground fonts and should be replaced by the fonts that are specific to your project.

Please remember: the Base Pixel Equivalent will be used to create the base font size, and the actual size of elements like h1's, h2's etc should then be scaled from this base size. Both of these settings should be updated in the setup.less stylesheet and not within 06-typography.less. */
/*************************************************************************
 #Import Fonts
**************************************************************************/
/* Depending on the fonts being used, this section may or may not be needed so consult the documentation from the font provider in each case. Where possible, always try and host the fonts within your project as this places less dependancy on referencing external websites. For more information on creating font projects with external resources, see our guides on Setting Up a Fonts.com Project and Setting Up a Typekit Project. */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/font-awesome/fa-brands-400.eot");
  src: url("fonts/font-awesome/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-brands-400.woff2") format("woff2"), url("fonts/font-awesome/fa-brands-400.woff") format("woff"), url("fonts/font-awesome/fa-brands-400.ttf") format("truetype"), url("fonts/font-awesome/fa-brands-400.svg#fontawesome") format("svg");
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/font-awesome/fa-light-300.eot");
  src: url("fonts/font-awesome/fa-light-300.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-light-300.woff2") format("woff2"), url("fonts/font-awesome/fa-light-300.woff") format("woff"), url("fonts/font-awesome/fa-light-300.ttf") format("truetype"), url("fonts/font-awesome/fa-light-300.svg#fontawesome") format("svg");
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/font-awesome/fa-regular-400.eot");
  src: url("fonts/font-awesome/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-regular-400.woff2") format("woff2"), url("fonts/font-awesome/fa-regular-400.woff") format("woff"), url("fonts/font-awesome/fa-regular-400.ttf") format("truetype"), url("fonts/font-awesome/fa-regular-400.svg#fontawesome") format("svg");
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 900;
  src: url("fonts/font-awesome/fa-solid-900.eot");
  src: url("fonts/font-awesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-solid-900.woff2") format("woff2"), url("fonts/font-awesome/fa-solid-900.woff") format("woff"), url("fonts/font-awesome/fa-solid-900.ttf") format("truetype"), url("fonts/font-awesome/fa-solid-900.svg#fontawesome") format("svg");
}
.montserrat {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}
.montserrat-bold {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
/*************************************************************************
 #Line Heights
**************************************************************************/
/* This part sets various line heights as mixins which can then be used further on in the LESS files. It's best practice to use straigh numbers instead of %, px or em. */
/*************************************************************************
 #Basic HTML
**************************************************************************/
/* This part allows you to customise the various basic typographic elements of the site. Please remember to set the Base Pixel Equivalent and header sizes in the setup.less stylesheet. */
/* This part sets a background colour for when a user selects a section of text. */
::-moz-selection {
  background-color: #4ABFE2;
  text-shadow: none;
  color: #FFFFFF;
}
::selection {
  background-color: #4ABFE2;
  text-shadow: none;
  color: #FFFFFF;
}
::-moz-selection {
  background-color: #4ABFE2;
  text-shadow: none;
  color: #FFFFFF;
}
/* This part sets the basic global font styles for the whole site. This acts as a fall back for when no other styles are being used. The fact that the font size is set to @base-size will reference the Base Size that we set in the Measurements LESS file. By default this is the equivalent to 20px. */
body {
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: #000000;
  line-height: 1.6;
}
/* This part sets the styles for headers. */
h1,
h2,
h3,
h4,
h5 {
  /* be sure to specify a font here */
  /* be sure to specify a colour here */
}
h1 {
  line-height: 1;
}
h2,
h3,
h4 {
  margin-bottom: 1rem;
  line-height: 1.2;
}
h5 {
  margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
p {
  margin-bottom: 1.5rem;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
p:last-child {
  margin-bottom: 0;
}
/* This part sets the anchor styles. */
a {
  -webkit-transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  /* be sure to specify a font here */
  /* be sure to specify a colour here */
}
a.no-decoration {
  text-decoration: none;
}
/* This class allows text to be transformed to uppercase if required */
.uppercase {
  text-transform: uppercase;
}
/* This creates styles for a stand first, which is a way of emphasising the first paragraph in a block of copy. */
.standfirst {
  font-size: 1.5rem;
}
/* This sets the styles for bold/strong text. */
strong {
  /* be sure to specify a bold font here */
}
/* This sets the styles for italic text. */
em {
  /* be sure to specify an italic font here */
}
/* This sets the styles for blockquotes. */
blockquote {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}
blockquote:last-child {
  margin-bottom: 0;
}
blockquote p {
  /* be sure to specify an italic font here */
  font-size: 2rem;
  line-height: 1.2;
  /* be sure to specify a colour here */
}
blockquote p:before,
blockquote p:after {
  display: inline;
  font: inherit;
  content: '"';
}
/* This creates a style for faded text. */
.faded {
  opacity: 0.5;
}
/* This class allows text to be striked through if required */
.strikethrough {
  text-decoration: line-through;
}
/* These classes allow text to hidden from view but still readable for screen readers for visually impaired people. */
.screen-reader,
.screenReader {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
}
/*************************************************************************
 #Font Awesome
**************************************************************************/
/* This creates a style for Font Awesome fonts. */
.fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
}
.fab {
  font-family: 'Font Awesome 5 Brands';
}
.fa,
.fas {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
}
.far {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
}
/*
Use: Content Layout
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 07-content-layout.less stylesheet contains the various core elements that, when combined, allow you to create a vast array of layouts based on the core 12 column grid system that underpins this system.

The Basic Front End Boilerplate contains everything you need to start building layouts, but there are also a wide variety of extra modules throughout the Supersonic System that can be added to your project to further enhance the layout and functionality. */
/*************************************************************************
 #Outer Container
**************************************************************************/
/* The Outer Container is the basic top level wrapper that is intended to contain all of the content of a particular layout. You can use as many Outer Containers as you need to, and by default they are set to width: 100% and float: left so you can stack them on top of each other to create different sections withoin a layout.

The Outer Container can be used on its own to create a full width layout, or it can be combined with an Inner Container as a direct child element where the content of a layout needs a finite width. */
.outer-container {
  position: relative;
  float: left;
  width: 100%;
}
/*************************************************************************
 #Inner Container
**************************************************************************/
/* The Inner Container is intended to sit as a direct child of the Outer Container to give the content of the page a maximum width so that it does not stretch the full width of the page. It has a left and right margin of auto by default so that it is horizontally centered, but instead of using max-width, we adjust the left and right margin at certain media queries to give a more responsive adjustment.

The Inner Container is not intended to be used on its own, but is instead intended to house the various Grid Modules that are designed to create the various page layouts.

As the Inner Container can contain floated elements, it includes a psuedo :after element that clears the floats of the elements within the Inner Container, so that it will retain the overall height of the content within it. */
.inner-container {
  position: relative;
  margin: 0 auto;
}
.inner-container:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
@media screen and (min-width: 62.5em) {
  .inner-container {
    margin: 0 2%;
  }
}
@media screen and (min-width: 78.125em) {
  .inner-container {
    margin: 0 4%;
  }
}
@media screen and (min-width: 93.75em) {
  .inner-container {
    margin: 0 6%;
  }
}
@media screen and (min-width: 109.375em) {
  .inner-container {
    margin: 0 8%;
  }
}
@media screen and (min-width: 125em) {
  .inner-container {
    margin: 0 10%;
  }
}
/*************************************************************************
 #Grid Modules
**************************************************************************/
/* The Grid Modules are a series of elements that are used to build the various layouts of the pages. Built on the underlying 12 column grid system found in 04-grid.less, each module is a made up of a certain number of @fluid-margin and @column-width measurements. For example, a one-third-page module is made up of 4x @column-width and 3x @fluid-margin.

They are designed to work in tandem with each other and are named accordingly, so a one-third-page element will sit alongside a two-thirds-page element.

By default, the Grid Modules only specify the width of the element and no other styles are applied. To position the modules correctly, they must also be combined with the various alignment and positioning classes found elsewhere in the system, most notably Vertical Margins, Vertical Padding, Internal Padding, Horizontal Positioning and Text Alignment.

Many of the classes have float clearing applied using :nth-child. This is to eliminate any odd rearrangements if the height of previous elements knocks them out of alignment. Please note: this float clearing is designed to work when classes of the same type are being used together, i.e. all one-third-page elements. It will cause errors in the arrangement if different classes are mixed together, so it should be removed if errors occur. */
.full-page,
.half-page,
.two-thirds-page,
.one-third-page,
.three-quarters-page,
.one-quarter-page,
.five-sixths-page,
.one-sixth-page {
  position: relative;
  z-index: 1;
}
.full-page .vertical-outer,
.half-page .vertical-outer,
.two-thirds-page .vertical-outer,
.one-third-page .vertical-outer,
.three-quarters-page .vertical-outer,
.one-quarter-page .vertical-outer,
.five-sixths-page .vertical-outer,
.one-sixth-page .vertical-outer {
  width: 100%;
}
.full-page,
.half-page,
.one-third-page,
.two-thirds-page,
.three-quarters-page,
.five-sixths-page {
  width: 93.996%;
}
@media screen and (min-width: 46.875em) {
  .half-page {
    width: 45.498%;
  }
  .half-page:nth-child(2n+3) {
    clear: both;
  }
}
@media screen and (min-width: 62.5em) {
  .two-thirds-page {
    width: 61.664%;
  }
}
@media screen and (min-width: 46.875em) {
  .two-thirds-page.center-align {
    width: 77.83%;
  }
}
@media screen and (min-width: 62.5em) {
  .two-thirds-page.center-align {
    width: 61.664%;
  }
}
@media screen and (min-width: 46.875em) {
  .one-third-page {
    width: 45.498%;
  }
  .one-third-page:nth-child(2n+3) {
    clear: both;
  }
}
@media screen and (min-width: 62.5em) {
  .one-third-page {
    width: 29.332%;
  }
  .one-third-page:nth-child(2n+3) {
    clear: none;
  }
  .one-third-page:nth-child(3n+4) {
    clear: both;
  }
}
.one-quarter-page {
  width: 45.498%;
}
.one-quarter-page:nth-child(2n+3) {
  clear: both;
}
@media screen and (min-width: 46.875em) {
  .one-quarter-page {
    width: 29.332%;
  }
  .one-quarter-page:nth-child(2n+3) {
    clear: none;
  }
  .one-quarter-page:nth-child(3n+4) {
    clear: both;
  }
}
@media screen and (min-width: 62.5em) {
  .one-quarter-page {
    width: 21.249%;
  }
  .one-quarter-page:nth-child(3n+4) {
    clear: none;
  }
  .one-quarter-page:nth-child(4n+5) {
    clear: both;
  }
}
@media screen and (min-width: 46.875em) {
  .three-quarters-page {
    width: 61.664%;
  }
}
@media screen and (min-width: 62.5em) {
  .three-quarters-page {
    width: 69.747%;
  }
}
.one-sixth-page {
  width: 29.332%;
}
.one-sixth-page:nth-child(3n+4) {
  clear: both;
}
@media screen and (min-width: 46.875em) {
  .one-sixth-page {
    width: 21.249%;
  }
  .one-sixth-page:nth-child(3n+4) {
    clear: none;
  }
  .one-sixth-page:nth-child(4n+5) {
    clear: both;
  }
}
@media screen and (min-width: 93.75em) {
  .one-sixth-page {
    width: 13.166%;
  }
  .one-sixth-page:nth-child(4n+5) {
    clear: none;
  }
  .one-sixth-page:nth-child(6n+7) {
    clear: both;
  }
}
.five-sixths-page {
  width: 61.664%;
}
@media screen and (min-width: 46.875em) {
  .five-sixths-page {
    width: 69.747%;
  }
}
@media screen and (min-width: 93.75em) {
  .five-sixths-page {
    width: 77.83%;
  }
}
/*************************************************************************
 #Vertical Margins
**************************************************************************/
/* The Vertical Margins allow you to create vertical spacing outside of both parent containers and their child elements. It’s very useful for separating sections and the modules within them by applying external spacing. The classes can be applied to Outer Containers, Inner Containers and any element within them, particularly Grid Modules.

There are two variants – full and half. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can changed to match your designs by updating the two variables @full-margin and @half-margin. */
/* Vertical Margin - this class has full margins top and bottom */
.vertical-margin {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
/* Vertical Margin Top - this class has only full margin top */
.vertical-margin-top {
  margin-top: 3rem;
}
/* Vertical Margin Bottom - this class has only full margin bottom */
.vertical-margin-bottom {
  margin-bottom: 3rem;
}
/* Vertical Half Margin - this class has half margins top and bottom */
.vertical-half-margin {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
/* Vertical Half Margin Top - this class has only half margin top */
.vertical-half-margin-top {
  margin-top: 1.5rem;
}
/* Vertical Half Margin Bottom - this class has only half margin bottom */
.vertical-half-margin-bottom {
  margin-bottom: 1.5rem;
}
/*************************************************************************
 #Vertical Padding
**************************************************************************/
/* The Vertical Padding allows you to create vertical spacing inside of both parent containers and their child elements. It's very useful for controlling the vertical rhythm of the page by applying internal spacing. The classes can be applied to Outer Containers, Inner Containers and any element within them, particularly Grid Modules.

There are two variants – full and half. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can changed to match your designs by updating the two variables @full-padding and @half-padding. */
/* Vertical Padding - this class has full padding top and bottom */
.vertical-padding {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
/* Vertical Padding Top - this class has only full padding top */
.vertical-padding-top {
  padding-top: 3rem;
}
/* Vertical Padding Bottom - this class has only full padding bottom */
.vertical-padding-bottom {
  padding-bottom: 3rem;
}
/* Vertical Half Padding - this class has half padding top and bottom */
.vertical-half-padding {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
/* Vertical Half Padding Top - this class has only half padding top */
.vertical-half-padding-top {
  padding-top: 1.5rem;
}
/* Vertical Half Padding Bottom - this class has only half padding bottom */
.vertical-half-padding-bottom {
  padding-bottom: 1.5rem;
}
/*************************************************************************
 #Modular Wrappers
**************************************************************************/
/* Modular Wrappers allows you to remove the bottom margin of the bottom row of multiple elements, therefore removing any unwanted white space when you have multiple elements stacked on top of each other. It works by wrapping the elements in a container that has a negative margin-bottom that is the same value of the element's bottom margin, which essentially cancels it out. This is useful if you have elements which need a margin-bottom to separate themselves from each other, but that don't need margin-bottom on the last row. For example if the parent container has padding top and bottom, there would be unwanted white space below the last row.

There are two variants - modular-wrapper-full and modular-wrapper-half. The former should be used with elements that have the vertical-margin or vertical-margin-bottom classes applied, while the latter should be used with elements that have the vertical-half-margin or vertical-half-margin-bottom classes applied. */
/* This gives both the Modular Wrappers the .clear-fix-after class so that any floats are cleared at the end. */
.modular-wrapper:after,
.modular-wrapper-full:after,
.modular-wrapper-half:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
/* Modular Wrapper Full - this removes the bottom margin from the last row of elements that have the vertical-margin or vertical-margin-bottom classes applied. */
.modular-wrapper-full {
  margin-bottom: -3rem;
}
/* Modular Wrapper Half - this removes the bottom margin from the last row of elements that have the vertical-half-margin or vertical-half-margin-bottom classes applied. */
.modular-wrapper-half {
  margin-bottom: -1.5rem;
}
/*************************************************************************
 #Internal Padding
**************************************************************************/
/* The Internal Padding is a simplified alternative to the Vertical Margins and Vertical Padding, and is intended to be used with elements to create a uniform padding within the element. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can be adjusted based on the designs. */
/* Internal Padding - this class has full padding */
.internal-padding {
  padding: 3rem;
}
/* Internal Half Padding - this class has half padding */
.internal-half-padding {
  padding: 1.5rem;
}
/*************************************************************************
 #Horizontal Alignment
**************************************************************************/
/* The Horizontal Alignment classes allow you to set the horizontal position that elements will occupy within an Inner Container. There are a range of classes to suit the layout of the designs.

Centred Alignment

This allows you to centre items within a container, and is particularly useful if you have modules of an uneven number of modules across multiple rows and don't want empty white space to the left or right of the bottom row, i.e. 3 on the top row and 2 on the bottom row. The central alignment is achieved using display: inline-block instead of floats.

In order to achieve centre alignment, you will need to combine two classes: center-container and center-align.

center-container

This class needs to be applied to the parent container of the modules, i.e. to the Inner Container. */
.center-container {
  /* This will align the items centrally, but will also align the text centrally as well, so if you want the text to be left-aligned, you can overwrite this with the .left-text class further on. */
  text-align: center;
  /* The negative word-spacing gets rid of the extra empty space to the right that inline-block elements create. It is a better alternative to setting a negative margin-right. */
  word-spacing: -0.27rem;
}
/* center-align

This class needs to be applied to the actual modules themselves, with the above center-container class applied to the parent container. */
.center-align {
  display: inline-block;
  float: none;
  /* This sets the left and right margins of the modules to be half the Fluid Margin. This is so that when the modules but up against each other, the combined half margins give the illusion of a full Fluid Margin. */
  margin-left: 1.5%;
  margin-right: 1.5%;
  /* This resets the negative word-spacing that is set on the parent container and ensures that the words within the module read as they should. */
  word-spacing: normal;
}
/* Left- and right-aligned

This allows you to align items either to the left or right using floats. Both classes are very similar, but whereas the center-align class has @fluid-margin*0.5 on both sides, these classes have a full @fluid-margin on just the side that they are floating. */
.left-align {
  display: block;
  float: left;
  margin-left: 3%;
  margin-right: 0;
  word-spacing: normal;
}
.right-align {
  display: block;
  float: right;
  margin-right: 3%;
  margin-left: 0;
  word-spacing: normal;
}
/* Clear Fix

These two classes allow you to add elements after modules to clear any floats. The first clear-fix class can be applied to an element to make it clear the floats. The second clear-fix-after can be applied to a parent container to create a pseudo element within the container that will clear the floats of all elements within it. */
.clear-fix {
  clear: both;
}
.clear-fix-after:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
/*************************************************************************
 #Text Alignment
**************************************************************************/
/* The Text Alignment allows you to set the alignment of text within an element. */
.center-text {
  text-align: center;
}
.left-text {
  text-align: left;
}
.right-text {
  text-align: right;
}
/*************************************************************************
 #Flex-Based Vertical Positioning
**************************************************************************/
.vertical-outer-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 62.5em) {
  .vertical-outer-flex {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
.vertical-outer-flex .vertical-top {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
.vertical-outer-flex .vertical-middle {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.vertical-outer-flex .vertical-bottom {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}
/* 
Use: Image Treatments
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* This file contains the various classes that apply to the images throughout the site. */
/*************************************************************************
 #Scaling
**************************************************************************/
/* The Scaling classes will scale an image proportionally to its container, with two options depending on whether the width or height should be most important. */
.full-width-image {
  width: 100%;
  height: auto;
}
.full-height-image {
  height: 100%;
  width: auto;
}
/*
Use: UI
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 09-ui.less stylesheet contains the core button styles for you to customise buttons. The core .button class can be applied to both button and anchor elements, and more styles can be added to it.

Included Styles

There are a number of styles included within the Basic Front End Boilerplate to help you get a project up and running. You'll notice that the additional styles are included within the main .button class using &.class. This is because each of the styles needs to be added to the HTML element in order to combine them - on their own, the won't work.

So when creating a button in your HTML, your markup should look like the below:

<a href="" class="button medium blue-fill">Click me</a>

Size Classes

There are three different size classes using the small, medium and large classes.

Visual Classes

There are two different visual classes; expanding-button and static-button. However, these two classes are mixins and are not intended to be be used on their own. Instead they have been included within the blue-fill, blue-static, white-fill and white-static classes. The expanding-button class uses the :before and :after psuedo classes to create an expanding animation effect. The static-button classes are fall backs for instances where psuedo classes are not supported, for example within buttons. */
/*************************************************************************
 #UI controls
**************************************************************************/
/* #Buttons ------------------------------------------------------------------------ */
.button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  display: inline-block;
  position: relative;
  margin: 0 0 1.5rem 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  text-align: center;
  text-indent: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  border: none;
  border-bottom: none;
  text-shadow: none;
  cursor: pointer;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 1;
  color: #FFFFFF;
  font-size: 0.75rem;
}
.button:last-child {
  margin-bottom: 0;
}
.button:focus {
  outline: none;
}
.button:hover {
  border-bottom: none;
}
.button:before,
.button:after {
  -webkit-transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  display: block;
  position: absolute;
  content: '';
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.button:before {
  z-index: -2;
}
.button:after {
  z-index: -1;
}
.button.small {
  min-width: 1.5rem;
  min-height: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0 1.5rem;
}
.button.medium {
  min-width: 2rem;
  min-height: 2rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0 2rem;
}
.button.large {
  min-width: 2.5rem;
  min-height: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 2.5rem;
}
.button.static-button {
  -webkit-transition: none;
  transition: none;
}
.button.black-static-button {
  -webkit-transition: none;
  transition: none;
  color: #FFFFFF;
  background-color: #000000;
}
i {
  position: relative;
}
i.icon-telephone:after {
  content: '\f095';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
}
i.icon-email:after {
  content: '\f0e0';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
}
/* 
Use: Forms
Scope: All devices
Theme: Supersonic System
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 10-lists.less stylesheet contains the basic list styles, as well as allowing custom list styles to be created to suit the design of the project.

For uls and ols, there is some basic indenting and styling defined that will affect all standard lists. There is also an additional .no-style-list class that can be added to a ul and ol to remove the basic styling when needed. */
/*************************************************************************
 #Basic Lists
**************************************************************************/
ul,
ol {
  /* This part indents the lists and creates common list styles. */
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  list-style-position: outside;
}
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
ul li,
ol li {
  margin-bottom: 0.5rem;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
ul li ul,
ol li ul,
ul li ol,
ol li ol {
  margin-top: 0.5rem;
}
ul li {
  list-style-type: square;
}
ol li {
  list-style-type: decimal;
}
/* This part allows the above list styles to be removed. */
.no-style-list {
  margin-left: 0;
}
.no-style-list li {
  list-style-type: none;
  margin-bottom: 0;
}
.no-style-list li ul,
.no-style-list li ol {
  margin-top: 0;
}
/*
Use: Modular
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 11-modular.less stylesheet allows custom module styles to be created to suit the design of the project. These should be any modular item that is used in a continuous or repetitive way. */
.dark-grey-section {
  background-color: #000000;
  color: #FFFFFF;
}
html,
body,
.site-wrap {
  height: 100%;
  margin: 0;
}
.intro-section {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
}
.intro-section p {
  line-height: 1.6;
}
.intro-section h3 {
  text-transform: uppercase;
  font-size: 1.2rem;
}
.contact-section {
  border-top: 0.1rem solid #000000;
  border-bottom: 0.1rem solid #000000;
}
.contact-section ul {
  margin-left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 3rem;
}
.contact-section ul li {
  list-style-type: none;
  margin-bottom: 0;
}
.contact-section ul li ul,
.contact-section ul li ol {
  margin-top: 0;
}
@media screen and (max-width: 62.5em) {
  .contact-section ul {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
.contact-section ul .vertical-top {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
.contact-section ul .vertical-middle {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.contact-section ul .vertical-bottom {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}
.contact-section ul li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0.5rem;
}
@media screen and (max-width: 62.5em) {
  .contact-section ul li {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
.contact-section ul li .vertical-top {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
.contact-section ul li .vertical-middle {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.contact-section ul li .vertical-bottom {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}
.contact-section ul li i {
  background-color: #4ABFE2;
  color: #FFFFFF;
  padding: 1rem 1.1rem;
  border-radius: 50%;
  margin-right: 1rem;
}
.contact-section ul li a {
  color: #000000;
  font-size: 1.2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  text-decoration: none;
}
@media screen and (max-width: 40.625em) {
  .contact-section ul li i {
    padding: 0.6rem 0.7rem;
  }
  .contact-section ul li a {
    font-size: 1.2rem;
  }
}
.contact-section .address {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.contact-section .address p {
  font-size: 1.2rem;
}
.image-grid {
  padding-top: 1.5rem;
}
.image-grid .grid-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 24%;
      -ms-flex: 0 0 24%;
          flex: 0 0 24%;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.image-grid .grid-item figure {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.image-grid .grid-item img {
  max-width: 100%;
}
@media screen and (max-width: 53.125em) {
  .image-grid .grid-item {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 48.5%;
        -ms-flex: 0 0 48.5%;
            flex: 0 0 48.5%;
    margin-bottom: 1.5rem;
  }
}
@media screen and (max-width: 25em) {
  .image-grid .grid-item {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    margin-bottom: 3rem;
  }
  .image-grid .grid-item figure {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}
.site-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
/* 
Use: Carousels
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 12-carousels.less stylesheet allows custom carousel styles to be created to suit the design of the project. */
/* 
Use: Animations
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 13-animations.less stylesheet allows custom animation styles to be created to suit the design of the project. */
/* 
Use: Forms
Scope: All devices
Theme: Supersonic System
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 14-forms.less stylesheet contains the basic form styles, as well as allowing custom form styles to be created to suit the design of the project. */
/*************************************************************************
 #Global Form Elements
**************************************************************************/
button,
input,
textarea,
select,
option {
  -webkit-transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
  transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
button:focus,
input:focus,
textarea:focus,
select:focus,
option:focus {
  outline: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="submit"],
select {
  min-height: 1.5rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select {
  padding: 0.25rem 0.5rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
  /* Add a background colour to match the design of your project */
  /* Add a text colour to match the design of your project */
}
button,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
textarea {
  font-size: 100%;
  overflow: auto;
  vertical-align: top;
  padding: 0.5rem;
}
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
  border: 0;
  border-radius: 0;
  padding: 0;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  border-color: transparent;
}
/* 
Use: Custom Styling
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 14-custom-styling.less stylesheet allows custom one-off styles to be created to suit the design of the project. */
/*
Use: Header
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 15-header.less stylesheet allows custom header, navigation or masthead styles to be created to suit the design of the project. */
header {
  border-bottom: 0.4rem solid #4ABFE2;
}
header .site-logo figure {
  width: 100%;
}
header .site-logo img {
  max-width: 100%;
}
/*
Use: Footer
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The 16-footer.less stylesheet allows custom footer styles to be created to suit the design of the project. */
.footer-container {
  width: 100%;
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  border-top: 0.4rem solid #4ABFE2;
  font-size: 0.8rem;
}
/*
Use: Setup
Scope: All devices
Theme: Supersonic System Biolerplate
Copyright 2017, © Supersonic Playground Ltd
Author: Supersonic Playground
*/
/* The setup.less stylesheet is one of the most important files in the system, but also one of the simplest to use. It contains a handful of key settings that are used universally across the site. The default settings may be okay for your project, in which case you may never need to update this file. */
/*************************************************************************
 #Base Pixel Equivalent
**************************************************************************/
/* The Base Pixel Equivalent is one of the most important settings as it is used to set the size of text and elements across the project. We avoid using fixed pixel measurements, as by their nature, they are fixed and do not give us the level of adjustment we need for responsive layouts. Instead we use the Base Pixel Equivalent, which is the pixel size equivalent of the body copy used in the designs. This number is then converted into the variable @base-size which is used as the basis for all dimensions throughout the site.

We then use a series of media queries to adjust @base-size responsively, so that all elements within the project universally adjust to become smaller or larger depending on the size of the screen.

So for example, if the Base Pixel Equivalent is set to 20, and you needed to create an element that would normally be width: 100px, you would instead set this to width: @base-size*5.

The main advantage of all of this is that it means that all text and elements share a common scale. If we want to adjust this scale, we just have to update one setting - the Base Pixel Equivalent - and the dimensions across the project will update universally, instead of having to manually update countless arbitrary measurements throughout the project. */
/*************************************************************************
 #Grid Measurements
**************************************************************************/
/* This part sets the width of the @fluid-margin and @column-width variables. The grid system is based on 12 columns in total, with Fluid Margins in between each column, and also on the far left and right of the layout. This means that there are 12 columns and 13 margins in total. Therefore, when the @fluid-margin and @column-width variables are multiplied by these amounts, they should equal 100% or slightly under (13 x 3% = 39%, 12 x 5.083% = 60.996%, 39% + 60.996% = 99.996%).

If the design that you're working to requires larger margins and thinner columns (a more spacious design) or thinner margins and larger columns (a tighter design) then adjust these percentages as you need to. */
/* Horizontal margin equal to 30px @ 1000px */
/* Column width - equal to 50.83px @ 1000px */
/*************************************************************************
 #Animation Easing
**************************************************************************/
/* This creates the bezier curve variable that is used within many of the animations throughout the project. It gives the animation the illusion of physics/friction. For more info check out http://cubic-bezier.com/ */
/*************************************************************************
 #Typographic Scale
**************************************************************************/
/* This allows you to set the scale of how each typographic element relates to each other. The base body size for the project is set using @base-size, and all other elements are multiples of this setting. */
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1rem;
}
.small {
  font-size: 0.75rem;
}
/*************************************************************************
 #Basic HTML Settings
**************************************************************************/
html,
body {
  overflow-x: hidden;
}
body {
  text-wrap: none;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;
}
img,
svg {
  border: 0;
  margin: 0;
  padding: 0;
  image-rendering: auto;
}
svg {
  display: block;
}
/*# sourceMappingURL=style.css.map */