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, font, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline; }
html {
font-size: 62.5%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
body {
background: #fff; }
article, aside, details, figcaption, figure,
footer, header, main, nav, section {
display: block; }
input, textarea, select, button {
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit; }
table {
border-collapse: separate;
border-spacing: 0; }
caption, th, td {
font-weight: 400;
text-align: left; }
blockquote:before, blockquote:after,
q:before, q:after {
content: ""; }
blockquote, q {
quotes: "" ""; }
a:focus {
outline: thin dotted; }
a:hover, a:active {
outline: 0; }
a img {
border: 0; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-rendering: optimizeLegibility; }
/**
* Breakpoints
*/
/**
* Fonts
*/
/**
* Boxgrid variables
*/
/**
* Colours
*/
/**
* Animation
*/
/**
* General
*/
/**
* Applys a breakpoint around the provided content
* @param {string} $size size of the breakpoint
* @return {null} nothing returned breakpoint code wrapped around content
*/
/**
* Generates a list of font sizes at specific breakpoints
*/
/**
* If you have to ask what this does, then ask yourself what you are doing!!!
*/
/**
* Creates a class for each colour and a second class with each colour applied as background-color
*/
.boxgrid {
width: 101.5%;
margin-left: -0.75%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box; }
.boxgrid > .col {
margin: 1em 0.75%;
width: 98.5%;
box-sizing: border-box; }
.boxgrid > .col > .inner {
display: block;
box-sizing: border-box; }
.boxgrid:after {
content: "";
display: block;
clear: both;
height: 0px;
visibility: hidden; }
.boxgrid.no-margin {
width: 100%;
margin: 0; }
.boxgrid.no-margin > .col {
margin: 0;
width: 100%;
box-sizing: border-box; }
.boxgrid.no-margin > .col > .inner {
display: block;
box-sizing: border-box; }
@media screen and (min-width: 300px) {
.boxgrid > .xs_12 {
width: 98.5%;
display: block; }
.boxgrid > .xs_11 {
width: 90.1666666667%;
display: block; }
.boxgrid > .xs_10 {
width: 81.8333333333%;
display: block; }
.boxgrid > .xs_9 {
width: 73.5%;
display: block; }
.boxgrid > .xs_8 {
width: 65.1666666667%;
display: block; }
.boxgrid > .xs_7 {
width: 56.8333333333%;
display: block; }
.boxgrid > .xs_6 {
width: 48.5%;
display: block; }
.boxgrid > .xs_5 {
width: 40.1666666667%;
display: block; }
.boxgrid > .xs_4 {
width: 31.8333333333%;
display: block; }
.boxgrid > .xs_3 {
width: 23.5%;
display: block; }
.boxgrid > .xs_2 {
width: 15.1666666667%;
display: block; }
.boxgrid > .xs_1 {
width: 6.8333333333%;
display: block; }
.boxgrid > .xs_0 {
display: none; }
.boxgrid > .xs_pre_11 {
margin-left: 92.4166666667%; }
.boxgrid > .xs_pre_10 {
margin-left: 84.0833333333%; }
.boxgrid > .xs_pre_9 {
margin-left: 75.75%; }
.boxgrid > .xs_pre_8 {
margin-left: 67.4166666667%; }
.boxgrid > .xs_pre_7 {
margin-left: 59.0833333333%; }
.boxgrid > .xs_pre_6 {
margin-left: 50.75%; }
.boxgrid > .xs_pre_5 {
margin-left: 42.4166666667%; }
.boxgrid > .xs_pre_4 {
margin-left: 34.0833333333%; }
.boxgrid > .xs_pre_3 {
margin-left: 25.75%; }
.boxgrid > .xs_pre_2 {
margin-left: 17.4166666667%; }
.boxgrid > .xs_pre_1 {
margin-left: 9.0833333333%; }
.boxgrid > .xs_pre_0 {
margin-left: 0.75%; }
.boxgrid > .xs_post_11 {
margin-right: 92.4166666667%; }
.boxgrid > .xs_post_10 {
margin-right: 84.0833333333%; }
.boxgrid > .xs_post_9 {
margin-right: 75.75%; }
.boxgrid > .xs_post_8 {
margin-right: 67.4166666667%; }
.boxgrid > .xs_post_7 {
margin-right: 59.0833333333%; }
.boxgrid > .xs_post_6 {
margin-right: 50.75%; }
.boxgrid > .xs_post_5 {
margin-right: 42.4166666667%; }
.boxgrid > .xs_post_4 {
margin-right: 34.0833333333%; }
.boxgrid > .xs_post_3 {
margin-right: 25.75%; }
.boxgrid > .xs_post_2 {
margin-right: 17.4166666667%; }
.boxgrid > .xs_post_1 {
margin-right: 9.0833333333%; }
.boxgrid > .xs_post_0 {
margin-right: 0.75%; }
.boxgrid.no-margin > .xs_12 {
width: 100%; }
.boxgrid.no-margin > .xs_11 {
width: 91.6666666667%; }
.boxgrid.no-margin > .xs_10 {
width: 83.3333333333%; }
.boxgrid.no-margin > .xs_9 {
width: 75%; }
.boxgrid.no-margin > .xs_8 {
width: 66.6666666667%; }
.boxgrid.no-margin > .xs_7 {
width: 58.3333333333%; }
.boxgrid.no-margin > .xs_6 {
width: 50%; }
.boxgrid.no-margin > .xs_5 {
width: 41.6666666667%; }
.boxgrid.no-margin > .xs_4 {
width: 33.3333333333%; }
.boxgrid.no-margin > .xs_3 {
width: 25%; }
.boxgrid.no-margin > .xs_2 {
width: 16.6666666667%; }
.boxgrid.no-margin > .xs_1 {
width: 8.3333333333%; }
.boxgrid.no-margin > .xs_0 {
display: none; }
.boxgrid.no-margin > .xs_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .xs_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .xs_pre_10 {
margin-left: 83.3333333333%; }
.boxgrid.no-margin > .xs_pre_9 {
margin-left: 75%; }
.boxgrid.no-margin > .xs_pre_8 {
margin-left: 66.6666666667%; }
.boxgrid.no-margin > .xs_pre_7 {
margin-left: 58.3333333333%; }
.boxgrid.no-margin > .xs_pre_6 {
margin-left: 50%; }
.boxgrid.no-margin > .xs_pre_5 {
margin-left: 41.6666666667%; }
.boxgrid.no-margin > .xs_pre_4 {
margin-left: 33.3333333333%; }
.boxgrid.no-margin > .xs_pre_3 {
margin-left: 25%; }
.boxgrid.no-margin > .xs_pre_2 {
margin-left: 16.6666666667%; }
.boxgrid.no-margin > .xs_pre_1 {
margin-left: 8.3333333333%; }
.boxgrid.no-margin > .xs_pre_0 {
margin-left: 0; }
.boxgrid.no-margin > .xs_post_11 {
margin-right: 91.6666666667%; }
.boxgrid.no-margin > .xs_post_10 {
margin-right: 83.3333333333%; }
.boxgrid.no-margin > .xs_post_9 {
margin-right: 75%; }
.boxgrid.no-margin > .xs_post_8 {
margin-right: 66.6666666667%; }
.boxgrid.no-margin > .xs_post_7 {
margin-right: 58.3333333333%; }
.boxgrid.no-margin > .xs_post_6 {
margin-right: 50%; }
.boxgrid.no-margin > .xs_post_5 {
margin-right: 41.6666666667%; }
.boxgrid.no-margin > .xs_post_4 {
margin-right: 33.3333333333%; }
.boxgrid.no-margin > .xs_post_3 {
margin-right: 25%; }
.boxgrid.no-margin > .xs_post_2 {
margin-right: 16.6666666667%; }
.boxgrid.no-margin > .xs_post_1 {
margin-right: 8.3333333333%; }
.boxgrid.no-margin > .xs_post_0 {
margin-right: 0; }
.boxgrid > .col[data-bg_xs_order="1"] {
order: 1; }
.boxgrid > .col[data-bg_xs_order="2"] {
order: 2; }
.boxgrid > .col[data-bg_xs_order="3"] {
order: 3; }
.boxgrid > .col[data-bg_xs_order="4"] {
order: 4; }
.boxgrid > .col[data-bg_xs_order="5"] {
order: 5; }
.boxgrid > .col[data-bg_xs_order="6"] {
order: 6; }
.boxgrid > .col[data-bg_xs_order="7"] {
order: 7; }
.boxgrid > .col[data-bg_xs_order="8"] {
order: 8; }
.boxgrid > .col[data-bg_xs_order="9"] {
order: 9; }
.boxgrid > .col[data-bg_xs_order="10"] {
order: 10; }
.boxgrid > .col[data-bg_xs_order="11"] {
order: 11; }
.boxgrid > .col[data-bg_xs_order="12"] {
order: 12; }
.boxgrid > .xs_first {
order: -1; }
.boxgrid > .xs_last {
order: 999; }
.boxgrid > .xs_left {
display: flex;
justify-content: flex-start; }
.boxgrid > .xs_center {
display: flex;
justify-content: center; }
.boxgrid > .xs_right {
display: flex;
justify-content: flex-end; }
.boxgrid > .xs_text_left {
text-align: left; }
.boxgrid > .xs_text_center {
text-align: center; }
.boxgrid > .xs_text_right {
text-align: right; }
.boxgrid > .xs_top {
display: flex;
align-items: flex-start; }
.boxgrid > .xs_middle {
display: flex;
align-items: center; }
.boxgrid > .xs_bottom {
display: flex;
align-items: flex-end; } }
@media screen and (min-width: 550px) {
.boxgrid > .sm_12 {
width: 98.5%;
display: block; }
.boxgrid > .sm_11 {
width: 90.1666666667%;
display: block; }
.boxgrid > .sm_10 {
width: 81.8333333333%;
display: block; }
.boxgrid > .sm_9 {
width: 73.5%;
display: block; }
.boxgrid > .sm_8 {
width: 65.1666666667%;
display: block; }
.boxgrid > .sm_7 {
width: 56.8333333333%;
display: block; }
.boxgrid > .sm_6 {
width: 48.5%;
display: block; }
.boxgrid > .sm_5 {
width: 40.1666666667%;
display: block; }
.boxgrid > .sm_4 {
width: 31.8333333333%;
display: block; }
.boxgrid > .sm_3 {
width: 23.5%;
display: block; }
.boxgrid > .sm_2 {
width: 15.1666666667%;
display: block; }
.boxgrid > .sm_1 {
width: 6.8333333333%;
display: block; }
.boxgrid > .sm_0 {
display: none; }
.boxgrid > .sm_pre_11 {
margin-left: 92.4166666667%; }
.boxgrid > .sm_pre_10 {
margin-left: 84.0833333333%; }
.boxgrid > .sm_pre_9 {
margin-left: 75.75%; }
.boxgrid > .sm_pre_8 {
margin-left: 67.4166666667%; }
.boxgrid > .sm_pre_7 {
margin-left: 59.0833333333%; }
.boxgrid > .sm_pre_6 {
margin-left: 50.75%; }
.boxgrid > .sm_pre_5 {
margin-left: 42.4166666667%; }
.boxgrid > .sm_pre_4 {
margin-left: 34.0833333333%; }
.boxgrid > .sm_pre_3 {
margin-left: 25.75%; }
.boxgrid > .sm_pre_2 {
margin-left: 17.4166666667%; }
.boxgrid > .sm_pre_1 {
margin-left: 9.0833333333%; }
.boxgrid > .sm_pre_0 {
margin-left: 0.75%; }
.boxgrid > .sm_post_11 {
margin-right: 92.4166666667%; }
.boxgrid > .sm_post_10 {
margin-right: 84.0833333333%; }
.boxgrid > .sm_post_9 {
margin-right: 75.75%; }
.boxgrid > .sm_post_8 {
margin-right: 67.4166666667%; }
.boxgrid > .sm_post_7 {
margin-right: 59.0833333333%; }
.boxgrid > .sm_post_6 {
margin-right: 50.75%; }
.boxgrid > .sm_post_5 {
margin-right: 42.4166666667%; }
.boxgrid > .sm_post_4 {
margin-right: 34.0833333333%; }
.boxgrid > .sm_post_3 {
margin-right: 25.75%; }
.boxgrid > .sm_post_2 {
margin-right: 17.4166666667%; }
.boxgrid > .sm_post_1 {
margin-right: 9.0833333333%; }
.boxgrid > .sm_post_0 {
margin-right: 0.75%; }
.boxgrid.no-margin > .sm_12 {
width: 100%; }
.boxgrid.no-margin > .sm_11 {
width: 91.6666666667%; }
.boxgrid.no-margin > .sm_10 {
width: 83.3333333333%; }
.boxgrid.no-margin > .sm_9 {
width: 75%; }
.boxgrid.no-margin > .sm_8 {
width: 66.6666666667%; }
.boxgrid.no-margin > .sm_7 {
width: 58.3333333333%; }
.boxgrid.no-margin > .sm_6 {
width: 50%; }
.boxgrid.no-margin > .sm_5 {
width: 41.6666666667%; }
.boxgrid.no-margin > .sm_4 {
width: 33.3333333333%; }
.boxgrid.no-margin > .sm_3 {
width: 25%; }
.boxgrid.no-margin > .sm_2 {
width: 16.6666666667%; }
.boxgrid.no-margin > .sm_1 {
width: 8.3333333333%; }
.boxgrid.no-margin > .sm_0 {
display: none; }
.boxgrid.no-margin > .sm_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .sm_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .sm_pre_10 {
margin-left: 83.3333333333%; }
.boxgrid.no-margin > .sm_pre_9 {
margin-left: 75%; }
.boxgrid.no-margin > .sm_pre_8 {
margin-left: 66.6666666667%; }
.boxgrid.no-margin > .sm_pre_7 {
margin-left: 58.3333333333%; }
.boxgrid.no-margin > .sm_pre_6 {
margin-left: 50%; }
.boxgrid.no-margin > .sm_pre_5 {
margin-left: 41.6666666667%; }
.boxgrid.no-margin > .sm_pre_4 {
margin-left: 33.3333333333%; }
.boxgrid.no-margin > .sm_pre_3 {
margin-left: 25%; }
.boxgrid.no-margin > .sm_pre_2 {
margin-left: 16.6666666667%; }
.boxgrid.no-margin > .sm_pre_1 {
margin-left: 8.3333333333%; }
.boxgrid.no-margin > .sm_pre_0 {
margin-left: 0; }
.boxgrid.no-margin > .sm_post_11 {
margin-right: 91.6666666667%; }
.boxgrid.no-margin > .sm_post_10 {
margin-right: 83.3333333333%; }
.boxgrid.no-margin > .sm_post_9 {
margin-right: 75%; }
.boxgrid.no-margin > .sm_post_8 {
margin-right: 66.6666666667%; }
.boxgrid.no-margin > .sm_post_7 {
margin-right: 58.3333333333%; }
.boxgrid.no-margin > .sm_post_6 {
margin-right: 50%; }
.boxgrid.no-margin > .sm_post_5 {
margin-right: 41.6666666667%; }
.boxgrid.no-margin > .sm_post_4 {
margin-right: 33.3333333333%; }
.boxgrid.no-margin > .sm_post_3 {
margin-right: 25%; }
.boxgrid.no-margin > .sm_post_2 {
margin-right: 16.6666666667%; }
.boxgrid.no-margin > .sm_post_1 {
margin-right: 8.3333333333%; }
.boxgrid.no-margin > .sm_post_0 {
margin-right: 0; }
.boxgrid > .col[data-bg_sm_order="1"] {
order: 1; }
.boxgrid > .col[data-bg_sm_order="2"] {
order: 2; }
.boxgrid > .col[data-bg_sm_order="3"] {
order: 3; }
.boxgrid > .col[data-bg_sm_order="4"] {
order: 4; }
.boxgrid > .col[data-bg_sm_order="5"] {
order: 5; }
.boxgrid > .col[data-bg_sm_order="6"] {
order: 6; }
.boxgrid > .col[data-bg_sm_order="7"] {
order: 7; }
.boxgrid > .col[data-bg_sm_order="8"] {
order: 8; }
.boxgrid > .col[data-bg_sm_order="9"] {
order: 9; }
.boxgrid > .col[data-bg_sm_order="10"] {
order: 10; }
.boxgrid > .col[data-bg_sm_order="11"] {
order: 11; }
.boxgrid > .col[data-bg_sm_order="12"] {
order: 12; }
.boxgrid > .sm_first {
order: -1; }
.boxgrid > .sm_last {
order: 999; }
.boxgrid > .sm_left {
display: flex;
justify-content: flex-start; }
.boxgrid > .sm_center {
display: flex;
justify-content: center; }
.boxgrid > .sm_right {
display: flex;
justify-content: flex-end; }
.boxgrid > .sm_text_left {
text-align: left; }
.boxgrid > .sm_text_center {
text-align: center; }
.boxgrid > .sm_text_right {
text-align: right; }
.boxgrid > .sm_top {
display: flex;
align-items: flex-start; }
.boxgrid > .sm_middle {
display: flex;
align-items: center; }
.boxgrid > .sm_bottom {
display: flex;
align-items: flex-end; } }
@media screen and (min-width: 850px) {
.boxgrid > .md_12 {
width: 98.5%;
display: block; }
.boxgrid > .md_11 {
width: 90.1666666667%;
display: block; }
.boxgrid > .md_10 {
width: 81.8333333333%;
display: block; }
.boxgrid > .md_9 {
width: 73.5%;
display: block; }
.boxgrid > .md_8 {
width: 65.1666666667%;
display: block; }
.boxgrid > .md_7 {
width: 56.8333333333%;
display: block; }
.boxgrid > .md_6 {
width: 48.5%;
display: block; }
.boxgrid > .md_5 {
width: 40.1666666667%;
display: block; }
.boxgrid > .md_4 {
width: 31.8333333333%;
display: block; }
.boxgrid > .md_3 {
width: 23.5%;
display: block; }
.boxgrid > .md_2 {
width: 15.1666666667%;
display: block; }
.boxgrid > .md_1 {
width: 6.8333333333%;
display: block; }
.boxgrid > .md_0 {
display: none; }
.boxgrid > .md_pre_11 {
margin-left: 92.4166666667%; }
.boxgrid > .md_pre_10 {
margin-left: 84.0833333333%; }
.boxgrid > .md_pre_9 {
margin-left: 75.75%; }
.boxgrid > .md_pre_8 {
margin-left: 67.4166666667%; }
.boxgrid > .md_pre_7 {
margin-left: 59.0833333333%; }
.boxgrid > .md_pre_6 {
margin-left: 50.75%; }
.boxgrid > .md_pre_5 {
margin-left: 42.4166666667%; }
.boxgrid > .md_pre_4 {
margin-left: 34.0833333333%; }
.boxgrid > .md_pre_3 {
margin-left: 25.75%; }
.boxgrid > .md_pre_2 {
margin-left: 17.4166666667%; }
.boxgrid > .md_pre_1 {
margin-left: 9.0833333333%; }
.boxgrid > .md_pre_0 {
margin-left: 0.75%; }
.boxgrid > .md_post_11 {
margin-right: 92.4166666667%; }
.boxgrid > .md_post_10 {
margin-right: 84.0833333333%; }
.boxgrid > .md_post_9 {
margin-right: 75.75%; }
.boxgrid > .md_post_8 {
margin-right: 67.4166666667%; }
.boxgrid > .md_post_7 {
margin-right: 59.0833333333%; }
.boxgrid > .md_post_6 {
margin-right: 50.75%; }
.boxgrid > .md_post_5 {
margin-right: 42.4166666667%; }
.boxgrid > .md_post_4 {
margin-right: 34.0833333333%; }
.boxgrid > .md_post_3 {
margin-right: 25.75%; }
.boxgrid > .md_post_2 {
margin-right: 17.4166666667%; }
.boxgrid > .md_post_1 {
margin-right: 9.0833333333%; }
.boxgrid > .md_post_0 {
margin-right: 0.75%; }
.boxgrid.no-margin > .md_12 {
width: 100%; }
.boxgrid.no-margin > .md_11 {
width: 91.6666666667%; }
.boxgrid.no-margin > .md_10 {
width: 83.3333333333%; }
.boxgrid.no-margin > .md_9 {
width: 75%; }
.boxgrid.no-margin > .md_8 {
width: 66.6666666667%; }
.boxgrid.no-margin > .md_7 {
width: 58.3333333333%; }
.boxgrid.no-margin > .md_6 {
width: 50%; }
.boxgrid.no-margin > .md_5 {
width: 41.6666666667%; }
.boxgrid.no-margin > .md_4 {
width: 33.3333333333%; }
.boxgrid.no-margin > .md_3 {
width: 25%; }
.boxgrid.no-margin > .md_2 {
width: 16.6666666667%; }
.boxgrid.no-margin > .md_1 {
width: 8.3333333333%; }
.boxgrid.no-margin > .md_0 {
display: none; }
.boxgrid.no-margin > .md_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .md_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .md_pre_10 {
margin-left: 83.3333333333%; }
.boxgrid.no-margin > .md_pre_9 {
margin-left: 75%; }
.boxgrid.no-margin > .md_pre_8 {
margin-left: 66.6666666667%; }
.boxgrid.no-margin > .md_pre_7 {
margin-left: 58.3333333333%; }
.boxgrid.no-margin > .md_pre_6 {
margin-left: 50%; }
.boxgrid.no-margin > .md_pre_5 {
margin-left: 41.6666666667%; }
.boxgrid.no-margin > .md_pre_4 {
margin-left: 33.3333333333%; }
.boxgrid.no-margin > .md_pre_3 {
margin-left: 25%; }
.boxgrid.no-margin > .md_pre_2 {
margin-left: 16.6666666667%; }
.boxgrid.no-margin > .md_pre_1 {
margin-left: 8.3333333333%; }
.boxgrid.no-margin > .md_pre_0 {
margin-left: 0; }
.boxgrid.no-margin > .md_post_11 {
margin-right: 91.6666666667%; }
.boxgrid.no-margin > .md_post_10 {
margin-right: 83.3333333333%; }
.boxgrid.no-margin > .md_post_9 {
margin-right: 75%; }
.boxgrid.no-margin > .md_post_8 {
margin-right: 66.6666666667%; }
.boxgrid.no-margin > .md_post_7 {
margin-right: 58.3333333333%; }
.boxgrid.no-margin > .md_post_6 {
margin-right: 50%; }
.boxgrid.no-margin > .md_post_5 {
margin-right: 41.6666666667%; }
.boxgrid.no-margin > .md_post_4 {
margin-right: 33.3333333333%; }
.boxgrid.no-margin > .md_post_3 {
margin-right: 25%; }
.boxgrid.no-margin > .md_post_2 {
margin-right: 16.6666666667%; }
.boxgrid.no-margin > .md_post_1 {
margin-right: 8.3333333333%; }
.boxgrid.no-margin > .md_post_0 {
margin-right: 0; }
.boxgrid > .col[data-bg_md_order="1"] {
order: 1; }
.boxgrid > .col[data-bg_md_order="2"] {
order: 2; }
.boxgrid > .col[data-bg_md_order="3"] {
order: 3; }
.boxgrid > .col[data-bg_md_order="4"] {
order: 4; }
.boxgrid > .col[data-bg_md_order="5"] {
order: 5; }
.boxgrid > .col[data-bg_md_order="6"] {
order: 6; }
.boxgrid > .col[data-bg_md_order="7"] {
order: 7; }
.boxgrid > .col[data-bg_md_order="8"] {
order: 8; }
.boxgrid > .col[data-bg_md_order="9"] {
order: 9; }
.boxgrid > .col[data-bg_md_order="10"] {
order: 10; }
.boxgrid > .col[data-bg_md_order="11"] {
order: 11; }
.boxgrid > .col[data-bg_md_order="12"] {
order: 12; }
.boxgrid > .md_first {
order: -1; }
.boxgrid > .md_last {
order: 999; }
.boxgrid > .md_left {
display: flex;
justify-content: flex-start; }
.boxgrid > .md_center {
display: flex;
justify-content: center; }
.boxgrid > .md_right {
display: flex;
justify-content: flex-end; }
.boxgrid > .md_text_left {
text-align: left; }
.boxgrid > .md_text_center {
text-align: center; }
.boxgrid > .md_text_right {
text-align: right; }
.boxgrid > .md_top {
display: flex;
align-items: flex-start; }
.boxgrid > .md_middle {
display: flex;
align-items: center; }
.boxgrid > .md_bottom {
display: flex;
align-items: flex-end; } }
@media screen and (min-width: 1200px) {
.boxgrid > .lg_12 {
width: 98.5%;
display: block; }
.boxgrid > .lg_11 {
width: 90.1666666667%;
display: block; }
.boxgrid > .lg_10 {
width: 81.8333333333%;
display: block; }
.boxgrid > .lg_9 {
width: 73.5%;
display: block; }
.boxgrid > .lg_8 {
width: 65.1666666667%;
display: block; }
.boxgrid > .lg_7 {
width: 56.8333333333%;
display: block; }
.boxgrid > .lg_6 {
width: 48.5%;
display: block; }
.boxgrid > .lg_5 {
width: 40.1666666667%;
display: block; }
.boxgrid > .lg_4 {
width: 31.8333333333%;
display: block; }
.boxgrid > .lg_3 {
width: 23.5%;
display: block; }
.boxgrid > .lg_2 {
width: 15.1666666667%;
display: block; }
.boxgrid > .lg_1 {
width: 6.8333333333%;
display: block; }
.boxgrid > .lg_0 {
display: none; }
.boxgrid > .lg_pre_11 {
margin-left: 92.4166666667%; }
.boxgrid > .lg_pre_10 {
margin-left: 84.0833333333%; }
.boxgrid > .lg_pre_9 {
margin-left: 75.75%; }
.boxgrid > .lg_pre_8 {
margin-left: 67.4166666667%; }
.boxgrid > .lg_pre_7 {
margin-left: 59.0833333333%; }
.boxgrid > .lg_pre_6 {
margin-left: 50.75%; }
.boxgrid > .lg_pre_5 {
margin-left: 42.4166666667%; }
.boxgrid > .lg_pre_4 {
margin-left: 34.0833333333%; }
.boxgrid > .lg_pre_3 {
margin-left: 25.75%; }
.boxgrid > .lg_pre_2 {
margin-left: 17.4166666667%; }
.boxgrid > .lg_pre_1 {
margin-left: 9.0833333333%; }
.boxgrid > .lg_pre_0 {
margin-left: 0.75%; }
.boxgrid > .lg_post_11 {
margin-right: 92.4166666667%; }
.boxgrid > .lg_post_10 {
margin-right: 84.0833333333%; }
.boxgrid > .lg_post_9 {
margin-right: 75.75%; }
.boxgrid > .lg_post_8 {
margin-right: 67.4166666667%; }
.boxgrid > .lg_post_7 {
margin-right: 59.0833333333%; }
.boxgrid > .lg_post_6 {
margin-right: 50.75%; }
.boxgrid > .lg_post_5 {
margin-right: 42.4166666667%; }
.boxgrid > .lg_post_4 {
margin-right: 34.0833333333%; }
.boxgrid > .lg_post_3 {
margin-right: 25.75%; }
.boxgrid > .lg_post_2 {
margin-right: 17.4166666667%; }
.boxgrid > .lg_post_1 {
margin-right: 9.0833333333%; }
.boxgrid > .lg_post_0 {
margin-right: 0.75%; }
.boxgrid.no-margin > .lg_12 {
width: 100%; }
.boxgrid.no-margin > .lg_11 {
width: 91.6666666667%; }
.boxgrid.no-margin > .lg_10 {
width: 83.3333333333%; }
.boxgrid.no-margin > .lg_9 {
width: 75%; }
.boxgrid.no-margin > .lg_8 {
width: 66.6666666667%; }
.boxgrid.no-margin > .lg_7 {
width: 58.3333333333%; }
.boxgrid.no-margin > .lg_6 {
width: 50%; }
.boxgrid.no-margin > .lg_5 {
width: 41.6666666667%; }
.boxgrid.no-margin > .lg_4 {
width: 33.3333333333%; }
.boxgrid.no-margin > .lg_3 {
width: 25%; }
.boxgrid.no-margin > .lg_2 {
width: 16.6666666667%; }
.boxgrid.no-margin > .lg_1 {
width: 8.3333333333%; }
.boxgrid.no-margin > .lg_0 {
display: none; }
.boxgrid.no-margin > .lg_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .lg_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .lg_pre_10 {
margin-left: 83.3333333333%; }
.boxgrid.no-margin > .lg_pre_9 {
margin-left: 75%; }
.boxgrid.no-margin > .lg_pre_8 {
margin-left: 66.6666666667%; }
.boxgrid.no-margin > .lg_pre_7 {
margin-left: 58.3333333333%; }
.boxgrid.no-margin > .lg_pre_6 {
margin-left: 50%; }
.boxgrid.no-margin > .lg_pre_5 {
margin-left: 41.6666666667%; }
.boxgrid.no-margin > .lg_pre_4 {
margin-left: 33.3333333333%; }
.boxgrid.no-margin > .lg_pre_3 {
margin-left: 25%; }
.boxgrid.no-margin > .lg_pre_2 {
margin-left: 16.6666666667%; }
.boxgrid.no-margin > .lg_pre_1 {
margin-left: 8.3333333333%; }
.boxgrid.no-margin > .lg_pre_0 {
margin-left: 0; }
.boxgrid.no-margin > .lg_post_11 {
margin-right: 91.6666666667%; }
.boxgrid.no-margin > .lg_post_10 {
margin-right: 83.3333333333%; }
.boxgrid.no-margin > .lg_post_9 {
margin-right: 75%; }
.boxgrid.no-margin > .lg_post_8 {
margin-right: 66.6666666667%; }
.boxgrid.no-margin > .lg_post_7 {
margin-right: 58.3333333333%; }
.boxgrid.no-margin > .lg_post_6 {
margin-right: 50%; }
.boxgrid.no-margin > .lg_post_5 {
margin-right: 41.6666666667%; }
.boxgrid.no-margin > .lg_post_4 {
margin-right: 33.3333333333%; }
.boxgrid.no-margin > .lg_post_3 {
margin-right: 25%; }
.boxgrid.no-margin > .lg_post_2 {
margin-right: 16.6666666667%; }
.boxgrid.no-margin > .lg_post_1 {
margin-right: 8.3333333333%; }
.boxgrid.no-margin > .lg_post_0 {
margin-right: 0; }
.boxgrid > .col[data-bg_lg_order="1"] {
order: 1; }
.boxgrid > .col[data-bg_lg_order="2"] {
order: 2; }
.boxgrid > .col[data-bg_lg_order="3"] {
order: 3; }
.boxgrid > .col[data-bg_lg_order="4"] {
order: 4; }
.boxgrid > .col[data-bg_lg_order="5"] {
order: 5; }
.boxgrid > .col[data-bg_lg_order="6"] {
order: 6; }
.boxgrid > .col[data-bg_lg_order="7"] {
order: 7; }
.boxgrid > .col[data-bg_lg_order="8"] {
order: 8; }
.boxgrid > .col[data-bg_lg_order="9"] {
order: 9; }
.boxgrid > .col[data-bg_lg_order="10"] {
order: 10; }
.boxgrid > .col[data-bg_lg_order="11"] {
order: 11; }
.boxgrid > .col[data-bg_lg_order="12"] {
order: 12; }
.boxgrid > .lg_first {
order: -1; }
.boxgrid > .lg_last {
order: 999; }
.boxgrid > .lg_left {
display: flex;
justify-content: flex-start; }
.boxgrid > .lg_center {
display: flex;
justify-content: center; }
.boxgrid > .lg_right {
display: flex;
justify-content: flex-end; }
.boxgrid > .lg_text_left {
text-align: left; }
.boxgrid > .lg_text_center {
text-align: center; }
.boxgrid > .lg_text_right {
text-align: right; }
.boxgrid > .lg_top {
display: flex;
align-items: flex-start; }
.boxgrid > .lg_middle {
display: flex;
align-items: center; }
.boxgrid > .lg_bottom {
display: flex;
align-items: flex-end; } }
@media screen and (min-width: 1800px) {
.boxgrid > .xl_12 {
width: 98.5%;
display: block; }
.boxgrid > .xl_11 {
width: 90.1666666667%;
display: block; }
.boxgrid > .xl_10 {
width: 81.8333333333%;
display: block; }
.boxgrid > .xl_9 {
width: 73.5%;
display: block; }
.boxgrid > .xl_8 {
width: 65.1666666667%;
display: block; }
.boxgrid > .xl_7 {
width: 56.8333333333%;
display: block; }
.boxgrid > .xl_6 {
width: 48.5%;
display: block; }
.boxgrid > .xl_5 {
width: 40.1666666667%;
display: block; }
.boxgrid > .xl_4 {
width: 31.8333333333%;
display: block; }
.boxgrid > .xl_3 {
width: 23.5%;
display: block; }
.boxgrid > .xl_2 {
width: 15.1666666667%;
display: block; }
.boxgrid > .xl_1 {
width: 6.8333333333%;
display: block; }
.boxgrid > .xl_0 {
display: none; }
.boxgrid > .xl_pre_11 {
margin-left: 92.4166666667%; }
.boxgrid > .xl_pre_10 {
margin-left: 84.0833333333%; }
.boxgrid > .xl_pre_9 {
margin-left: 75.75%; }
.boxgrid > .xl_pre_8 {
margin-left: 67.4166666667%; }
.boxgrid > .xl_pre_7 {
margin-left: 59.0833333333%; }
.boxgrid > .xl_pre_6 {
margin-left: 50.75%; }
.boxgrid > .xl_pre_5 {
margin-left: 42.4166666667%; }
.boxgrid > .xl_pre_4 {
margin-left: 34.0833333333%; }
.boxgrid > .xl_pre_3 {
margin-left: 25.75%; }
.boxgrid > .xl_pre_2 {
margin-left: 17.4166666667%; }
.boxgrid > .xl_pre_1 {
margin-left: 9.0833333333%; }
.boxgrid > .xl_pre_0 {
margin-left: 0.75%; }
.boxgrid > .xl_post_11 {
margin-right: 92.4166666667%; }
.boxgrid > .xl_post_10 {
margin-right: 84.0833333333%; }
.boxgrid > .xl_post_9 {
margin-right: 75.75%; }
.boxgrid > .xl_post_8 {
margin-right: 67.4166666667%; }
.boxgrid > .xl_post_7 {
margin-right: 59.0833333333%; }
.boxgrid > .xl_post_6 {
margin-right: 50.75%; }
.boxgrid > .xl_post_5 {
margin-right: 42.4166666667%; }
.boxgrid > .xl_post_4 {
margin-right: 34.0833333333%; }
.boxgrid > .xl_post_3 {
margin-right: 25.75%; }
.boxgrid > .xl_post_2 {
margin-right: 17.4166666667%; }
.boxgrid > .xl_post_1 {
margin-right: 9.0833333333%; }
.boxgrid > .xl_post_0 {
margin-right: 0.75%; }
.boxgrid.no-margin > .xl_12 {
width: 100%; }
.boxgrid.no-margin > .xl_11 {
width: 91.6666666667%; }
.boxgrid.no-margin > .xl_10 {
width: 83.3333333333%; }
.boxgrid.no-margin > .xl_9 {
width: 75%; }
.boxgrid.no-margin > .xl_8 {
width: 66.6666666667%; }
.boxgrid.no-margin > .xl_7 {
width: 58.3333333333%; }
.boxgrid.no-margin > .xl_6 {
width: 50%; }
.boxgrid.no-margin > .xl_5 {
width: 41.6666666667%; }
.boxgrid.no-margin > .xl_4 {
width: 33.3333333333%; }
.boxgrid.no-margin > .xl_3 {
width: 25%; }
.boxgrid.no-margin > .xl_2 {
width: 16.6666666667%; }
.boxgrid.no-margin > .xl_1 {
width: 8.3333333333%; }
.boxgrid.no-margin > .xl_0 {
display: none; }
.boxgrid.no-margin > .xl_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .xl_pre_11 {
margin-left: 91.6666666667%; }
.boxgrid.no-margin > .xl_pre_10 {
margin-left: 83.3333333333%; }
.boxgrid.no-margin > .xl_pre_9 {
margin-left: 75%; }
.boxgrid.no-margin > .xl_pre_8 {
margin-left: 66.6666666667%; }
.boxgrid.no-margin > .xl_pre_7 {
margin-left: 58.3333333333%; }
.boxgrid.no-margin > .xl_pre_6 {
margin-left: 50%; }
.boxgrid.no-margin > .xl_pre_5 {
margin-left: 41.6666666667%; }
.boxgrid.no-margin > .xl_pre_4 {
margin-left: 33.3333333333%; }
.boxgrid.no-margin > .xl_pre_3 {
margin-left: 25%; }
.boxgrid.no-margin > .xl_pre_2 {
margin-left: 16.6666666667%; }
.boxgrid.no-margin > .xl_pre_1 {
margin-left: 8.3333333333%; }
.boxgrid.no-margin > .xl_pre_0 {
margin-left: 0; }
.boxgrid.no-margin > .xl_post_11 {
margin-right: 91.6666666667%; }
.boxgrid.no-margin > .xl_post_10 {
margin-right: 83.3333333333%; }
.boxgrid.no-margin > .xl_post_9 {
margin-right: 75%; }
.boxgrid.no-margin > .xl_post_8 {
margin-right: 66.6666666667%; }
.boxgrid.no-margin > .xl_post_7 {
margin-right: 58.3333333333%; }
.boxgrid.no-margin > .xl_post_6 {
margin-right: 50%; }
.boxgrid.no-margin > .xl_post_5 {
margin-right: 41.6666666667%; }
.boxgrid.no-margin > .xl_post_4 {
margin-right: 33.3333333333%; }
.boxgrid.no-margin > .xl_post_3 {
margin-right: 25%; }
.boxgrid.no-margin > .xl_post_2 {
margin-right: 16.6666666667%; }
.boxgrid.no-margin > .xl_post_1 {
margin-right: 8.3333333333%; }
.boxgrid.no-margin > .xl_post_0 {
margin-right: 0; }
.boxgrid > .col[data-bg_xl_order="1"] {
order: 1; }
.boxgrid > .col[data-bg_xl_order="2"] {
order: 2; }
.boxgrid > .col[data-bg_xl_order="3"] {
order: 3; }
.boxgrid > .col[data-bg_xl_order="4"] {
order: 4; }
.boxgrid > .col[data-bg_xl_order="5"] {
order: 5; }
.boxgrid > .col[data-bg_xl_order="6"] {
order: 6; }
.boxgrid > .col[data-bg_xl_order="7"] {
order: 7; }
.boxgrid > .col[data-bg_xl_order="8"] {
order: 8; }
.boxgrid > .col[data-bg_xl_order="9"] {
order: 9; }
.boxgrid > .col[data-bg_xl_order="10"] {
order: 10; }
.boxgrid > .col[data-bg_xl_order="11"] {
order: 11; }
.boxgrid > .col[data-bg_xl_order="12"] {
order: 12; }
.boxgrid > .xl_first {
order: -1; }
.boxgrid > .xl_last {
order: 999; }
.boxgrid > .xl_left {
display: flex;
justify-content: flex-start; }
.boxgrid > .xl_center {
display: flex;
justify-content: center; }
.boxgrid > .xl_right {
display: flex;
justify-content: flex-end; }
.boxgrid > .xl_text_left {
text-align: left; }
.boxgrid > .xl_text_center {
text-align: center; }
.boxgrid > .xl_text_right {
text-align: right; }
.boxgrid > .xl_top {
display: flex;
align-items: flex-start; }
.boxgrid > .xl_middle {
display: flex;
align-items: center; }
.boxgrid > .xl_bottom {
display: flex;
align-items: flex-end; } }
body {
font-family: "Playfair Display", serif;
font-size: 12px;
font-weight: 400;
line-height: 1.2; }
@media only screen and (min-width: 300px) {
body {
font-size: 12px; } }
@media only screen and (min-width: 850px) {
body {
font-size: 14px; } }
@media only screen and (min-width: 1200px) {
body {
font-size: 16px; } }
/**
* Headings
*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-weight: 600;
margin-bottom: 0.85em;
display: block; }
h1, .h1 {
font-size: 3em; }
h1.small, .h1.small {
font-size: 2.5em; }
h1.large, .h1.large {
font-size: 3.5em; }
h2, .h2 {
font-size: 2.5em;
font-family: "Playfair Display", serif;
font-weight: 800;
font-style: normal; }
h2.small, .h2.small {
font-size: 2em; }
h2.large, .h2.large {
font-size: 3em; }
h3, .h3 {
font-size: 2em; }
h4, .h4 {
font-size: 1.5em; }
h5, .h5 {
font-size: 1em; }
h6, .h6 {
font-size: 1em;
font-style: italic; }
/**
* Paragraphs
*/
p {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 1.2em;
line-height: 1.5;
margin-bottom: 1em; }
@media screen and (min-width: 550px) {
p {
font-size: 1.2em; } }
@media screen and (min-width: 850px) {
p {
font-size: 1.1em; } }
@media screen and (min-width: 1200px) {
p {
font-size: 1.1em;
line-height: 1.6; } }
@media screen and (min-width: 1800px) {
p {
font-size: 1.15em; } }
p.extra-small {
font-size: 1em; }
p.small {
font-size: 1.2em; }
p.large {
font-size: 2em; }
/**
* Links
*/
a {
color: inherit;
transition: color 0.3s; }
a:hover {
color: #ffd100;
transition: color 0.3s; }
/**
* Styling
*/
b, strong {
font-weight: 700; }
i, em {
font-style: italic; }
u {
text-decoration: underline; }
/**
* Lists
*/
ul, ol {
padding-left: 1em;
margin-bottom: 1em; }
ul li, ol li {
padding-bottom: 0.3em; }
.btn {
color: #ffffff;
background-color: #84b2e7;
font-size: 1.13em;
display: inline-block;
border: none;
margin: 0.2em 0;
padding: 0.8em 1.2em;
font-weight: 600;
text-transform: capitalize;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
text-align: center;
-webkit-appearance: none;
border-radius: 0; }
.btn:hover {
color: #ffffff;
transition: background-color 0.3s;
background-color: #99bfeb; }
.btn.white {
background: #fff;
color: #63666a; }
.wp-block-button__link {
background: #84b2e7;
border: none;
color: #fff;
font-family: "Playfair Display", serif;
font-weight: 800;
font-style: normal;
padding: 0.8em 1.3em;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px; }
.wp-block-button__link:hover {
background: #5997df; }
.pagination {
position: relative;
display: block;
width: 100%;
list-style: none;
text-align: center;
margin: 1em 0;
padding: 0;
font-size: 0;
line-height: 3;
overflow: hidden; }
.pagination li {
display: inline-block;
margin: 0;
padding: 0;
font-size: 12px; }
@media only screen and (min-width: 300px) {
.pagination li {
font-size: 12px; } }
@media only screen and (min-width: 850px) {
.pagination li {
font-size: 14px; } }
@media only screen and (min-width: 1200px) {
.pagination li {
font-size: 16px; } }
.pagination li a, .pagination li span {
position: relative;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
padding: 0.4em 0.5em;
text-align: center; }
.pagination li.active {
color: #ffd100; }
table {
border-collapse: collapse;
width: 100%;
font-size: 1em;
overflow-x: scroll;
display: block;
margin-bottom: 1em; }
table tbody {
display: table;
border: none;
min-width: 100%; }
@media only screen and (min-width: 1200px) {
table {
display: table;
table-layout: fixed; }
table tbody {
display: table-row-group;
width: 100%;
min-width: 0; } }
table tr:nth-child(odd) {
background-color: #f1f1f1; }
table th {
min-width: 12em;
font-size: 1.13em;
font-weight: 700;
padding: 0.5em 15px;
vertical-align: top;
background-color: #84b2e7;
color: #ffffff; }
@media only screen and (min-width: 1200px) {
table th {
min-width: 0;
padding: 0.45em 30px; } }
table .alt th {
background-color: #004fc0; }
table td {
padding: 0.5em 15px;
vertical-align: top; }
@media only screen and (min-width: 1200px) {
table td {
padding: 0.45em 30px; } }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url],
input[type=tel], input[type=search], input[type=date], textarea, select {
padding: 0.7em 0.65em;
margin: 0 0 0.5em;
border: #f1f1f1 solid 1px;
border-radius: 2px;
background-color: #ffffff;
line-height: 1.2;
color: #484847;
box-shadow: inset 0 2px 2px -1px #f3f3f3;
max-width: 100%;
width: 100%;
transition: border-color 0.3s;
font-size: 12px; }
@media only screen and (min-width: 300px) {
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url],
input[type=tel], input[type=search], input[type=date], textarea, select {
font-size: 12px; } }
@media only screen and (min-width: 850px) {
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url],
input[type=tel], input[type=search], input[type=date], textarea, select {
font-size: 14px; } }
@media only screen and (min-width: 1200px) {
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url],
input[type=tel], input[type=search], input[type=date], textarea, select {
font-size: 16px; } }
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus,
input[type=tel]:focus, input[type=search]:focus, input[type=date]:focus, textarea:focus, select:focus {
transition: border-color 0.3s;
border-color: #84b2e7; }
input[type=text].error, input[type=number].error, input[type=email].error, input[type=password].error, input[type=url].error,
input[type=tel].error, input[type=search].error, input[type=date].error, textarea.error, select.error {
transition: border-color 0.3s;
border-color: #D4323E; }
label {
margin: 0 0 0.3em;
display: block; }
textarea {
min-height: 120px;
font-family: "Playfair Display", serif; }
input[type=radio] + label {
width: auto;
cursor: pointer;
margin: 0 1em 0.4em 0;
padding: 0 0 0 1.8em;
display: inline-block;
position: relative; }
input[type=radio] + label:before {
content: "";
display: inline-block;
background-color: #ffffff;
position: absolute;
top: 0.1em;
left: 0;
vertical-align: middle;
border: #484847 solid 1px;
border-radius: 1em;
width: 1em;
height: 1em;
margin: 0 0.4em 0 0;
transition: border-color 0.3s; }
input[type=radio]:checked + label:before {
background-color: #484847;
background: -moz-radial-gradient(center, ellipse cover, #484847 35%, #ffffff 35%);
background: -webkit-radial-gradient(center, ellipse cover, #484847 35%, #ffffff 35%);
background: radial-gradient(ellipse at center, #484847 35%, #ffffff 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$text_colour', endColorstr='$background_colour',GradientType=1 ); }
input[type=radio] + label:focus:before {
transition: border-color 0.3s;
border-color: #84b2e7; }
input[type=radio].error + label:before {
border-color: #D4323E; }
input[type=checkbox] {
display: none; }
input[type=checkbox] + label {
position: relative;
width: auto;
cursor: pointer;
margin-right: 1em;
margin-bottom: 0.4em;
padding-left: 1.8em;
display: inline-block; }
input[type=checkbox] + label:before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 0.1em;
background-color: #ffffff;
vertical-align: middle;
border: #484847 solid 1px;
border-radius: 2px;
width: 1em;
height: 1em;
margin: 0;
transition: border-color 0.3s; }
input[type=checkbox]:checked + label:before {
content: "\2714";
line-height: 0.9em;
text-align: center;
color: #484847; }
input[type=checkbox] + label:focus:before {
transition: border-color 0.3s;
border-color: #84b2e7; }
input[type=checkbox].error + label:before {
border-color: #D4323E; }
.wpcf7 {
padding: 0; }
.wpcf7-form h1, .wpcf7-form h2, .wpcf7-form h3, .wpcf7-form h4, .wpcf7-form h5, .wpcf7-form h6 {
color: #84b2e7;
font-family: "Playfair Display", serif;
font-weight: 500;
font-style: normal;
font-size: 2.1em; }
.wpcf7-form h1 .number, .wpcf7-form h2 .number, .wpcf7-form h3 .number, .wpcf7-form h4 .number, .wpcf7-form h5 .number, .wpcf7-form h6 .number {
font-family: "Playfair Display", serif;
font-weight: 800;
font-style: normal;
font-size: 1.3em; }
.wpcf7-form label {
font-size: 1.3em; }
.wpcf7-form label small {
color: #b2b2b2;
font-family: "Playfair Display", serif;
font-weight: 300;
font-style: normal;
font-size: 0.8em; }
.wpcf7-form .wpcf7-form-control {
background: #f2f2f2;
margin-top: 10px; }
.wpcf7-form .wpcf7-radio {
background: #fff; }
.wpcf7-form span.wpcf7-list-item {
margin-bottom: 10px;
width: 85%; }
@media screen and (min-width: 550px) {
.wpcf7-form span.wpcf7-list-item {
margin-bottom: 20px;
width: 45%; } }
@media screen and (min-width: 850px) {
.wpcf7-form span.wpcf7-list-item {
margin-bottom: 20px;
width: 30%; } }
.wpcf7-form .wpcf7-list-item-label {
font-size: 1.3em; }
.wpcf7-form .wpcf7-submit {
-webkit-appearance: none;
border: 0;
cursor: pointer;
background: #84b2e7;
border: none;
color: #fff;
font-family: "Playfair Display", serif;
font-weight: 800;
font-style: normal;
padding: 0.8em 1.3em;
text-decoration: none;
text-transform: uppercase;
width: 100%; }
.wpcf7-form .wpcf7-submit:hover {
background: #5997df; }
@media screen and (min-width: 550px) {
.wpcf7-form .wpcf7-submit {
width: auto; } }
.alert {
padding: 0.85em 1em;
margin: 0.35em 0;
border-radius: 2px;
background-color: #f1f1f1;
color: #484847; }
.alert.error {
background-color: #D4323E;
color: #ffffff; }
.alert.success {
background-color: #7fb905;
color: #ffffff; }
.alert.warning {
background-color: #7fb905;
color: #ffffff; }
header {
position: absolute;
width: 100%;
z-index: 2; }
.blog header {
background: #868686; }
@media screen and (max-width: 550px) {
.blog header {
height: 135px; } }
.header-main {
display: block;
padding: 20px 0;
position: relative; }
@media screen and (min-width: 850px) {
.header-main {
display: flex; } }
.header-main .main-logo {
max-width: 350px; }
@media screen and (max-width: 550px) {
.header-main .main-logo {
max-width: 200px;
position: relative;
top: 20px; } }
.header-main nav {
margin-left: auto;
align-self: center; }
.header-main .btn-quote {
align-self: flex-end;
margin-left: 15px; }
@media screen and (min-width: 850px) {
.header-main .btn-quote {
align-self: center; } }
.header-contact {
display: flex;
width: 100%;
position: absolute;
right: 70px;
top: 44px;
width: auto; }
@media screen and (max-width: 850px) {
.header-contact {
right: 35px; } }
.header-contact a {
color: #63666a;
text-decoration: none; }
.header-contact .telephone {
padding: 0;
position: relative;
top: 12px; }
@media screen and (min-width: 850px) {
.header-contact .telephone {
top: 12px; } }
.header-contact .telephone a {
display: block;
font-family: "Open Sans", sans-serif; }
.header-contact .telephone a:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new 0 0 64 64' height='30px' version='1.1' viewBox='0 0 64 64' width='30px' xml:space='preserve'%3E%3Cg id='Layer_1'%3E%3Cg%3E%3Ccircle cx='32' cy='32' fill='%23272727' r='32'/%3E%3C/g%3E%3Cg opacity='0.2'%3E%3Cg%3E%3Cpath d='M28.962,25.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085 c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63 c0.362,0.1,0.661,0.181,0.888,0.255C42.943,49.985,43.056,50,43.169,50c0.155,0,0.31-0.033,0.452-0.098 c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724 c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978 c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,25.954,28.991,25.649,28.962,25.343z' fill='%23231F20'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M28.962,23.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085 c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63 c0.362,0.1,0.661,0.181,0.888,0.255C42.943,47.985,43.056,48,43.169,48c0.155,0,0.31-0.033,0.452-0.098 c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724 c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978 c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,23.954,28.991,23.649,28.962,23.343z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Layer_2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 30px;
padding-right: 10px;
position: relative;
width: 30px; }
@media screen and (min-width: 850px) {
.header-contact .telephone a:before {
display: inline-block; } }
.header-contact .email {
font-family: "Open Sans", sans-serif;
padding: 0;
position: relative;
top: 12px; }
@media screen and (min-width: 850px) {
.header-contact .email {
top: 12px; } }
.header-contact .email a {
display: block; }
.header-contact .email a:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new 0 0 64 64' height='30px' version='1.1' viewBox='0 0 64 64' width='30px' xml:space='preserve'%3E%3Cg id='Layer_1'%3E%3Cg%3E%3Ccircle cx='32' cy='32' fill='%23272727' r='32'/%3E%3C/g%3E%3Cg%3E%3Cg opacity='0.2'%3E%3Cpath d='M52,44c0,2.209-1.791,4-4,4H16c-2.209,0-4-1.791-4-4V24c0-2.209,1.791-4,4-4h32c2.209,0,4,1.791,4,4V44z' fill='%23231F20'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M52,42c0,2.209-1.791,4-4,4H16c-2.209,0-4-1.791-4-4V22c0-2.209,1.791-4,4-4h32c2.209,0,4,1.791,4,4V42z' fill='%23E0E0D1'/%3E%3C/g%3E%3Cg opacity='0.2'%3E%3Cg%3E%3Cpath d='M35.524,30.185c-1.938-2.146-5.109-2.146-7.047,0L13.05,43.228c-0.18,0.199-0.328,0.393-0.461,0.585 C13.29,45.119,14.549,46,16,46h32c1.451,0,2.71-0.881,3.411-2.187c-0.133-0.191-0.281-0.385-0.461-0.585L35.524,30.185z' fill='%23231F20'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M35.524,32c-1.938-1.9-5.109-1.9-7.047,0L13.05,43.546c-0.18,0.176-0.328,0.348-0.461,0.517 C13.29,45.22,14.549,46,16,46h32c1.451,0,2.71-0.78,3.411-1.936c-0.133-0.169-0.281-0.341-0.461-0.517L35.524,32z' fill='%23E0E0D1'/%3E%3C/g%3E%3C/g%3E%3Cg opacity='0.2'%3E%3Cg%3E%3Cpath d='M12.589,20.187C13.29,18.881,14.549,18,16,18h32c1.451,0,2.71,0.881,3.411,2.187 c-0.133,0.191-0.281,0.385-0.461,0.585L35.524,33.815c-1.938,2.146-5.109,2.146-7.047,0L12.589,20.187z' fill='%23231F20'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M28.476,32c1.938,1.9,5.109,1.9,7.047,0L50.95,20.454c0.18-0.176,0.328-0.348,0.461-0.517 C50.71,18.78,49.451,18,48,18H16c-1.451,0-2.71,0.78-3.411,1.936c0.133,0.169,0.281,0.341,0.461,0.517L28.476,32z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Layer_2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 30px;
padding-right: 10px;
position: relative;
width: 30px; }
@media screen and (min-width: 850px) {
.header-contact .email a:before {
display: inline-block; } }
footer {
background: #fbfbfb;
color: #63666a; }
.footer-container {
padding: 2em 0; }
@media screen and (min-width: 850px) {
.footer-container {
padding: 2.5em 0; } }
.footer-contact a {
text-decoration: none; }
.footer-contact a.telephone:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new 0 0 64 64' height='30px' version='1.1' viewBox='0 0 64 64' width='30px' xml:space='preserve'%3E%3Cg id='Layer_1'%3E%3Cg%3E%3Ccircle cx='32' cy='32' fill='%23272727' r='32'/%3E%3C/g%3E%3Cg opacity='0.2'%3E%3Cg%3E%3Cpath d='M28.962,25.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085 c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63 c0.362,0.1,0.661,0.181,0.888,0.255C42.943,49.985,43.056,50,43.169,50c0.155,0,0.31-0.033,0.452-0.098 c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724 c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978 c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,25.954,28.991,25.649,28.962,25.343z' fill='%23231F20'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M28.962,23.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085 c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63 c0.362,0.1,0.661,0.181,0.888,0.255C42.943,47.985,43.056,48,43.169,48c0.155,0,0.31-0.033,0.452-0.098 c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724 c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978 c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,23.954,28.991,23.649,28.962,23.343z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Layer_2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 30px;
padding-right: 10px;
position: relative;
width: 30px; }
@media screen and (min-width: 850px) {
.footer-contact a.telephone:before {
display: inline-block; } }
.footer-menu ul {
display: flex;
flex-wrap: wrap;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
list-style-type: none;
margin-bottom: 0;
padding-bottom: 0; }
.footer-menu ul li {
-ms-flex: 45%;
flex: 45%;
max-width: 45%;
margin-left: 5%;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #d8d8d8; }
@media screen and (max-width: 550px) {
.footer-menu ul li {
font-size: 1.1em;
margin-left: 0; } }
.footer-menu ul li a {
text-decoration: none; }
.footer-right {
color: #fff;
text-align: center; }
@media screen and (min-width: 850px) {
.footer-right {
text-align: right; } }
.footer-right p {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
margin: 0;
font-size: 14x; }
@media screen and (min-width: 850px) {
.footer-right p {
font-size: 16px; } }
.footer-top {
background: #fbfbfb;
border-top: 1px solid #f1f1f1;
margin-top: 4em; }
.footer-top .boxgrid {
padding: 20px 0 16px;
position: relative; }
.footer-top img {
position: absolute;
right: 0;
bottom: 0; }
@media screen and (max-width: 550px) {
.footer-top img {
display: none; } }
.social-media-container {
background: #4c4c4c;
padding: 10px; }
.social-media {
display: flex-block; }
@media screen and (max-width: 550px) {
.social-media {
margin: 0 auto 2em; } }
.social-media a {
text-decoration: none; }
.prs {
display: block;
margin-bottom: 15px; }
@media screen and (max-width: 850px) {
.prs {
margin: 0 auto 15px; } }
.container {
max-width: 1500px;
margin: 0 auto;
padding: 0 2em; }
@media screen and (min-width: 850px) {
.container {
padding: 0 2em; } }
.container.position-relative {
position: relative; }
.clearfix {
clear: both; }
.text-center {
text-align: center; }
.text-uppercase {
text-transform: uppercase; }
.primary-colour {
color: #84b2e7; }
.secondary-colour {
color: #ffd100; }
.responsive-img,
.img-responsive {
height: auto;
width: 100%; }
.border-box {
background: #fff;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(125, 125, 125, 0.8);
-moz-box-shadow: 0px 0px 10px 0px rgba(125, 125, 125, 0.8);
box-shadow: 0px 0px 10px 0px rgba(125, 125, 125, 0.8);
overflow: hidden;
padding: 2em; }
.hr-brand {
border-top: 3px solid #fff;
margin: 0 auto;
width: 30%; }
#carousel {
position: relative;
width: 80%;
margin: 2em auto 0; }
#slides {
overflow: hidden;
position: relative;
width: 100%; }
#slides ul {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
position: relative; }
#slides ul li {
width: 100%;
float: left;
text-align: center;
position: relative; }
#slides ul li .h3 {
color: #84b2e7;
font-family: "Playfair Display", serif;
font-weight: 500;
font-style: normal; }
#buttons a {
text-align: center;
display: block;
font-size: 50px;
float: left;
outline: 0;
color: #84b2e7;
text-decoration: none;
display: block;
width: 35px;
position: absolute;
top: 10%;
z-index: 10; }
#buttons a:hover {
color: #ffd100; }
#buttons a#prev {
left: -45px; }
#buttons a#next {
right: -45px; }
.gradient-row {
background: #31dca6;
background: linear-gradient(90deg, #31dca6 0%, #21afd4 100%);
height: 1vh; }
.hr-gradient-row {
background: #31dca6;
background: linear-gradient(90deg, #31dca6 0%, #21afd4 100%);
display: block;
height: 1vh;
margin: 0 auto 4em;
width: 20%; }
.main-navigation {
/* background:#fdfdfd;
height:100vh;
padding:2em 0;
position: absolute;
top: 0;
width: 100%;*/ }
@media screen and (min-width: 850px) {
.main-navigation {
border-bottom: 1px solid #efefef;
border-top: 1px solid #efefef; } }
.main-navigation .menu-primary-container ul {
background-color: rgba(255, 255, 255, 0.98);
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
position: fixed;
z-index: 99;
padding: 72px 25vw 0 25vw;
top: 0;
right: -100%;
height: 100vh;
width: 100%;
overflow: auto;
/* @media screen and (min-width:$bp_md){
display: block;
margin: 0;
text-align: center;
width: auto;
}*/ }
@media screen and (max-width: 850px) {
.main-navigation .menu-primary-container ul {
padding: 72px 2em 0 2em; } }
.main-navigation .menu-primary-container ul.active {
right: 0 !important; }
.main-navigation .menu-primary-container ul.sub-menu {
display: block;
padding: 0;
position: absolute; }
@media screen and (max-width: 850px) {
.main-navigation .menu-primary-container ul.sub-menu {
display: block;
background: #fff;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: fixed;
z-index: 100;
opacity: 0;
padding: 72px 2em 0 2em;
margin-bottom: 0;
top: 0;
right: -100%;
height: 100vh;
width: 100%;
overflow: auto; }
.main-navigation .menu-primary-container ul.sub-menu.active {
opacity: 1;
right: 0; } }
@media screen and (min-width: 850px) {
.main-navigation .menu-primary-container ul.sub-menu {
opacity: 0;
top: 44px;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out; } }
.main-navigation .menu-primary-container ul.sub-menu li {
display: block;
margin-left: 0; }
@media screen and (min-width: 850px) {
.main-navigation .menu-primary-container ul.sub-menu li {
clear: both;
padding-left: 0;
padding-right: 0; } }
.main-navigation .menu-primary-container ul li {
border-bottom: 1px solid #63666a;
display: block;
color: #84b2e7;
font-weight: 400;
margin: 0;
width: auto; }
@media screen and (min-width: 850px) {
.main-navigation .menu-primary-container ul li {
list-style-type: none; }
.main-navigation .menu-primary-container ul li.menu-item-has-children:hover > .sub-menu {
opacity: 1;
top: 98px;
z-index: 10; } }
.main-navigation .menu-primary-container ul li.current_page_item {
font-weight: 500; }
.main-navigation .menu-primary-container ul li.current_page_item a {
color: #84b2e7;
text-decoration: underline; }
.main-navigation .menu-primary-container ul li.menu-item-home a {
color: transparent; }
.main-navigation .menu-primary-container ul li.menu-item-home a:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='25px' id='Layer_1' style='enable-background:new 0 0 16 16;' version='1.1' viewBox='0 0 16 16' width='25px' xml:space='preserve'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='%2363666a' d='M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555 L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3 c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
height: 25px;
width: 25px;
display: inline-block;
position: relative;
right: 5px;
top: 6px; }
@media screen and (max-width: 850px) {
.main-navigation .menu-primary-container ul li.menu-item-home a:after {
right: 46px; } }
.main-navigation .menu-primary-container ul li.menu-item-home a:hover {
color: transparent; }
.main-navigation .menu-primary-container ul li a {
color: #63666a;
display: block;
font-size: 1.5em;
padding: 1em 0;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
text-decoration: none; }
@media screen and (max-width: 850px) {
.main-navigation .menu-primary-container ul li a {
display: block; } }
@media screen and (min-width: 850px) {
.main-navigation .menu-primary-container ul li a {
font-size: 1.4em;
text-align: center; } }
@media screen and (min-width: 1200px) {
.main-navigation .menu-primary-container ul li a {
font-size: 1.6em; } }
.main-navigation .menu-primary-container ul li a:hover {
color: #84b2e7; }
.main-navigation .menu-primary-container ul li .sub-menu {
background: #fff; }
@media screen and (min-width: 850px) {
.main-navigation .menu-primary-container ul li .sub-menu {
border-bottom: 4px solid #ffd100;
column-count: 3;
padding: 0;
position: absolute;
max-width: 1500px;
margin: 0;
padding: 2em 4em;
width: 100%;
left: 0;
top: 150px;
right: 0;
z-index: -1; } }
@media screen and (min-width: 850px) {
.main-navigation .menu-primary-container ul li .sub-menu li {
padding: 0; } }
@media screen and (min-width: 850px) {
.main-navigation .menu-primary-container ul li .sub-menu li a {
border-bottom: none;
display: flex;
margin: 0 0 10px;
padding: 0;
align-items: center;
justify-content: center; } }
.hamburger-menu {
width: 30px;
height: 30px;
position: absolute;
right: 24px;
top: 50px;
margin: 5px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index: 100; }
@media screen and (max-width: 850px) {
.hamburger-menu {
right: -5px; } }
.hamburger-menu.open span {
background: #84b2e7; }
.hamburger-menu span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #fff;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out; }
.hamburger-menu span:nth-child(1) {
top: 3px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center; }
.hamburger-menu span:nth-child(2) {
top: 12px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center; }
.hamburger-menu span:nth-child(3) {
top: 21px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center; }
.hamburger-menu.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 2px;
left: 4px; }
.hamburger-menu.open span:nth-child(2) {
width: 0%;
opacity: 0; }
.hamburger-menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 23px;
left: 4px; }
.hamburger-back {
display: none;
width: 30px;
height: 30px;
position: absolute;
right: 24px;
top: 8px;
margin: 5px auto;
cursor: pointer;
z-index: 100; }
@media screen and (min-width: 850px) {
.hamburger-back {
display: none !important; } }
.hamburger-back svg path {
fill: #ffd100; }
.full-width-slider.home {
margin: 0; }
.full-width-slider.home .home-slide {
position: relative; }
.full-width-slider.home .home-slide .owl-item.active .slide {
overflow: visible;
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.full-width-slider.home .home-slide .owl-item.active .slide.onScreen {
background-size: cover !important; }
.full-width-slider.home .home-slide .owl-item.active .slide .slide-inner {
overflow: visible;
width: 100%;
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.full-width-slider.home .home-slide .owl-item.active .slide .slide-inner.onScreen {
background-size: auto 100% !important; }
.full-width-slider.home .home-slide .owl-item.active .slide .heading {
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(-25px); }
.full-width-slider.home .home-slide .owl-item.active .slide .heading.onScreen {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.home .home-slide .owl-item.active .slide .link {
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(25px); }
.full-width-slider.home .home-slide .owl-item.active .slide .link.onScreen {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.home .home-slide .owl-item.active .slide .container h3 {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.home .home-slide .owl-item.active .slide .container .link .link-animation {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.home .home-slide .owl-item .slide {
background-color: #f1f1f1;
display: flex;
height: 99vh; }
.full-width-slider.home .home-slide .owl-item .slide .slide-inner {
display: flex;
width: 100%; }
.full-width-slider.home .home-slide .owl-item .slide .container {
align-self: center;
width: 100%; }
.full-width-slider.home .home-slide .owl-item .slide .container .heading {
text-align: right; }
.full-width-slider.home .home-slide .owl-item .slide .container h3 {
color: #fff;
font-size: 2.5em;
font-weight: 300;
margin: 0 0 0.5em;
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(-25px); }
.full-width-slider.home .home-slide .owl-item .slide .container .link .link-animation {
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(25px); }
.full-width-slider.home .home-slide .owl-item .slide .container .link a {
color: #fff;
font-family: "Open Sans", sans-serif;
float: right;
font-size: 1.3em;
font-weight: 200;
text-decoration: none; }
.full-width-slider.home .home-slide .owl-item .slide .container .link a:hover {
color: #ffd100; }
.full-width-slider.home .home-slide .owl-item .slide .container .link a:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink' height='18px' version='1.1' viewBox='0 0 9 12' width='15px'%3E%3Ctitle/%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-width='1'%3E%3Cg fill='%23ffffff' id='Core' transform='translate(-260.000000, -90.000000)'%3E%3Cg id='chevron-right' transform='translate(260.500000, 90.000000)'%3E%3Cpath d='M1,0 L-0.4,1.4 L4.2,6 L-0.4,10.6 L1,12 L7,6 L1,0 Z' id='Shape'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 18px;
margin-left: 10px;
width: 15px; }
.full-width-slider.home .home-slide .owl-dots {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
margin: 0 auto;
padding: 0 2em; }
.full-width-slider.home .home-slide .owl-dots .owl-dot {
outline: none; }
.full-width-slider.home .home-slide .owl-dots .owl-dot span {
background-color: unset;
border: 1px solid #fff; }
.full-width-slider.home .home-slide .owl-dots .owl-dot.active span {
background-color: #fff; }
.full-width-slider.home .home-slide .owl-nav {
position: absolute;
left: 0;
right: 0;
top: 20%;
max-width: 1500px;
margin: 0 auto;
padding: 0 2em; }
@media screen and (min-width: 850px) {
.full-width-slider.home .home-slide .owl-nav {
max-width: 970px;
padding: 0 2em; } }
@media screen and (min-width: 1200px) {
.full-width-slider.home .home-slide .owl-nav {
max-width: 1300px; } }
@media screen and (min-width: 1800px) {
.full-width-slider.home .home-slide .owl-nav {
padding: 0 1em; } }
.full-width-slider.home .home-slide .owl-nav button {
background: #d7d7d7;
border: 0;
border-radius: 40px;
color: #fff;
display: flex;
font-size: 2.5em;
height: 40px;
justify-content: center;
line-height: 0;
outline: none;
position: absolute;
padding: 0;
text-decoration: none;
width: 40px; }
.full-width-slider.home .home-slide .owl-nav button:hover {
background: #fff;
color: #bbbbbb; }
.full-width-slider.home .home-slide .owl-nav button.owl-prev {
left: 30px; }
.full-width-slider.home .home-slide .owl-nav button.owl-next {
left: 80px; }
.full-width-slider.home .home-slide .owl-nav button span {
align-self: center;
position: relative;
top: -2px; }
.full-width-slider.page {
margin: 0; }
.full-width-slider.page .page-slide {
position: relative; }
.full-width-slider.page .page-slide .owl-item.active .slide {
overflow: visible;
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.full-width-slider.page .page-slide .owl-item.active .slide.onScreen {
background-size: cover !important; }
.full-width-slider.page .page-slide .owl-item.active .slide .slide-inner {
overflow: visible;
width: 100%;
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.full-width-slider.page .page-slide .owl-item.active .slide .slide-inner.onScreen {
background-size: auto 100% !important; }
.full-width-slider.page .page-slide .owl-item.active .slide .heading {
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(-25px); }
.full-width-slider.page .page-slide .owl-item.active .slide .heading.onScreen {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.page .page-slide .owl-item.active .slide .link {
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(25px); }
.full-width-slider.page .page-slide .owl-item.active .slide .link.onScreen {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.page .page-slide .owl-item.active .slide .container h3 {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.page .page-slide .owl-item.active .slide .container .link .link-animation {
opacity: 1;
transform: translateY(0px); }
.full-width-slider.page .page-slide .owl-item .slide {
background-color: #f1f1f1;
display: flex;
height: 45vh; }
.full-width-slider.page .page-slide .owl-item .slide .slide-inner {
display: flex;
width: 100%; }
.full-width-slider.page .page-slide .owl-item .slide .container {
align-self: flex-end;
padding-bottom: 5em;
width: 100%; }
.full-width-slider.page .page-slide .owl-item .slide .container h3 {
color: #fff;
font-size: 3em;
font-weight: 200;
margin: 0;
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(-25px); }
.full-width-slider.page .page-slide .owl-item .slide .container .link .link-animation {
opacity: 0;
position: relative;
transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: .5s;
transform: translateY(25px); }
.full-width-slider.page .page-slide .owl-item .slide .container .link a {
color: #fff;
font-size: 1.3em;
font-weight: 200;
text-decoration: none; }
.full-width-slider.page .page-slide .owl-item .slide .container .link a:hover {
color: #ffd100; }
.full-width-slider.page .page-slide .owl-item .slide .container .link a:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink' height='18px' version='1.1' viewBox='0 0 9 12' width='15px'%3E%3Ctitle/%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-width='1'%3E%3Cg fill='%23ffffff' id='Core' transform='translate(-260.000000, -90.000000)'%3E%3Cg id='chevron-right' transform='translate(260.500000, 90.000000)'%3E%3Cpath d='M1,0 L-0.4,1.4 L4.2,6 L-0.4,10.6 L1,12 L7,6 L1,0 Z' id='Shape'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 18px;
margin-left: 10px;
width: 15px; }
.full-width-slider.page .page-slide .owl-dots {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
margin: 0 auto;
padding: 0 2em; }
.full-width-slider.page .page-slide .owl-dots .owl-dot {
outline: none; }
.full-width-slider.page .page-slide .owl-dots .owl-dot span {
background-color: unset;
border: 1px solid #fff; }
.full-width-slider.page .page-slide .owl-dots .owl-dot.active span {
background-color: #fff; }
.full-width-slider.page .page-slide .owl-nav {
position: absolute;
left: 0;
right: 0;
top: 20%;
max-width: 1500px;
margin: 0 auto;
padding: 0 2em; }
@media screen and (min-width: 850px) {
.full-width-slider.page .page-slide .owl-nav {
max-width: 970px;
padding: 0 2em; } }
@media screen and (min-width: 1200px) {
.full-width-slider.page .page-slide .owl-nav {
max-width: 1300px; } }
@media screen and (min-width: 1800px) {
.full-width-slider.page .page-slide .owl-nav {
padding: 0 1em; } }
.full-width-slider.page .page-slide .owl-nav button {
background: #d7d7d7;
border: 0;
border-radius: 40px;
color: #fff;
display: flex;
font-size: 2.5em;
height: 40px;
justify-content: center;
line-height: 0;
outline: none;
position: absolute;
padding: 0;
text-decoration: none;
width: 40px; }
.full-width-slider.page .page-slide .owl-nav button:hover {
background: #fff;
color: #bbbbbb; }
.full-width-slider.page .page-slide .owl-nav button.owl-prev {
left: 30px; }
.full-width-slider.page .page-slide .owl-nav button.owl-next {
left: 80px; }
.full-width-slider.page .page-slide .owl-nav button span {
align-self: center;
position: relative;
top: -2px; }
.page-hero.news {
height: 300px;
margin: 0 0 2em;
position: relative;
top: 0;
z-index: 1;
opacity: 0;
overflow: hidden;
width: 100%;
transition: 2s cubic-bezier(0.4, 0, 0.2, 1); }
@media screen and (min-width: 850px) {
.page-hero.news {
height: 400px; } }
@media screen and (min-width: 1200px) {
.page-hero.news {
height: 500px; } }
.page-hero.news.onScreen {
background-size: 110% auto !important;
opacity: 1; }
.page-hero.news.onScreen img {
transform: scale(1.1); }
.page-hero.news img {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
object-fit: cover;
object-position: center;
-webkit-transition-delay: 6s;
transition-delay: 6s;
transition: 2s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1); }
.button-block {
padding: 5em 2em; }
.button-block h1, .button-block h2, .button-block h3, .button-block h4, .button-block h5, .button-block h6 {
color: #84b2e7; }
.button-block p {
margin-bottom: 2em; }
.button-block a {
background: #84b2e7;
border: none;
color: #fff;
font-family: "Playfair Display", serif;
font-weight: 800;
font-style: normal;
padding: 0.8em 1.3em;
text-decoration: none;
text-transform: uppercase;
margin: 0 5px; }
@media screen and (max-width: 550px) {
.button-block a {
display: block; } }
.button-block a:hover {
background: #5997df; }
.home-intro {
background: #272727;
background-image: url(/wp-content/themes/wills-theme/assets/img/frontend/home/logo-background-pattern.png);
background-position: center right;
background-size: auto 100%;
background-repeat: no-repeat;
color: #fff;
font-weight: 400;
padding: 5em 0; }
.home-intro h1 {
font-weight: 400; }
.page-content {
padding: 1em;
opacity: 0;
position: relative;
bottom: 10px;
transition: 1.2s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s; }
.page-content.onScreen {
opacity: 1;
bottom: 0; }
@media screen and (min-width: 850px) {
.page-content {
padding: 2em 4em 2em; } }
@media screen and (min-width: 1200px) {
.page-content {
padding: 2em 6em 2em; } }
.page-content.no-padding {
padding: 0; }
.page-content.push-header {
padding-top: 12em; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
font-family: "Playfair Display", serif;
font-weight: 400;
font-style: normal;
color: #4a4d50; }
.page-content h1.small-margin, .page-content h2.small-margin, .page-content h3.small-margin, .page-content h4.small-margin, .page-content h5.small-margin, .page-content h6.small-margin {
margin: 0.4em 0; }
.page-content p {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.6; }
.page-content ul, .page-content ol {
padding-left: 1em;
margin-bottom: 1em;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 1.2em;
line-height: 1.4; }
@media screen and (min-width: 550px) {
.page-content ul, .page-content ol {
font-size: 1.3em; } }
@media screen and (min-width: 850px) {
.page-content ul, .page-content ol {
font-size: 1.2em; } }
@media screen and (min-width: 1200px) {
.page-content ul, .page-content ol {
font-size: 1.2em; } }
@media screen and (min-width: 1800px) {
.page-content ul, .page-content ol {
font-size: 1.25em; } }
.page-content ul li, .page-content ol li {
padding-bottom: 0.3em; }
.wp-block-column h1, .wp-block-column h2, .wp-block-column h3, .wp-block-column h4, .wp-block-column h5, .wp-block-column h6 {
margin: 15px 10px 20px; }
.wp-block-column p {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.6;
margin: 15px 10px 20px; }
.wp-block-cover {
height: auto; }
.wp-block-cover p {
font-family: "Playfair Display", serif;
font-weight: 300;
font-style: normal;
font-size: 1.2em;
line-height: 1.4; }
@media screen and (min-width: 550px) {
.wp-block-cover p {
font-size: 1.3em; } }
@media screen and (min-width: 850px) {
.wp-block-cover p {
font-size: 1.2em; } }
@media screen and (min-width: 1200px) {
.wp-block-cover p {
font-size: 1.2em; } }
@media screen and (min-width: 1800px) {
.wp-block-cover p {
font-size: 1.25em; } }
.brands-page .brand-img-block {
border: 1px solid #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
transition: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 0;
position: relative;
top: 20px; }
.brands-page .brand-img-block.onScreen {
opacity: 1;
top: 0; }
.brands-page .brand-img-block img {
padding: 2em 0;
max-width: 250px; }
.services-container {
background: #f1f1f1;
margin-bottom: 4em;
padding: 5em 0; }
.services-container h3 {
text-align: center; }
.services-container .services-block {
display: flex;
flex-wrap: wrap;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
margin-bottom: 0;
padding-bottom: 0; }
.services-container .services-block li {
-ms-flex: 45%;
flex: 45%;
max-width: 45%;
margin-left: 5%;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #d8d8d8; }
@media screen and (max-width: 550px) {
.services-container .services-block li {
font-size: 1.3em;
-ms-flex: 90%;
flex: 90%;
max-width: 90%; } }
.wpcf7 {
margin-bottom: 0; }
.wpcf7 br {
display: none; }
.wpcf7 .wpcf7-form label {
color: #63666a;
display: flex;
font-size: 1.3em;
margin: 0; }
@media screen and (max-width: 550px) {
.wpcf7 .wpcf7-form label {
display: block; } }
.wpcf7 .wpcf7-form label .inline-label {
font-size: 0.9em;
line-height: 1.5;
width: 30%; }
@media screen and (max-width: 550px) {
.wpcf7 .wpcf7-form label .inline-label {
width: 100%; } }
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap {
width: 100%; }
.wpcf7 .wpcf7-form .wpcf7-form-control {
background: #f2f4f3;
border: none;
box-shadow: none;
color: #63666a;
font-family: "Open Sans", sans-serif;
margin: 0;
width: 100%; }
@media screen and (max-width: 550px) {
.wpcf7 .wpcf7-form .wpcf7-form-control {
font-size: 17px; } }
.wpcf7 .wpcf7-form .wpcf7-submit {
-webkit-appearance: none;
border: 0;
cursor: pointer;
background: #84b2e7;
border: none;
color: #fff;
font-family: "Playfair Display", serif;
font-weight: 800;
font-style: normal;
padding: 0.8em 1.3em;
text-decoration: none;
text-transform: uppercase;
background: #84b2e7;
display: inline-block;
text-transform: unset;
transition: color 0.3s;
width: auto; }
.wpcf7 .wpcf7-form .wpcf7-submit:hover {
background: #5997df; }
.wpcf7 .wpcf7-form .wpcf7-submit:hover {
background: #448adb;
transition: color 0.3s; }
.grecaptcha-badge {
visibility: hidden; }
.page-content-news {
opacity: 0;
position: relative;
top: 10px;
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s; }
.page-content-news.onScreen {
opacity: 1;
top: 0; }
.page-content-news .breadcrumb {
color: #63666a;
font-family: "Open Sans", sans-serif;
font-size: 0.9em;
font-weight: 100;
margin-bottom: 2em; }
.page-content-news .breadcrumb a {
color: #63666a;
text-decoration: none; }
.page-content-news h1 {
color: #63666a;
font-size: 1.8em;
font-weight: 300;
margin-bottom: 5px; }
@media screen and (min-width: 550px) {
.page-content-news h1 {
font-size: 2.1em; } }
@media screen and (min-width: 850px) {
.page-content-news h1 {
font-size: 2.4em; } }
.page-content-news h2 {
color: #63666a;
font-size: 1.2em; }
@media screen and (min-width: 550px) {
.page-content-news h2 {
font-size: 1.3em; } }
@media screen and (min-width: 850px) {
.page-content-news h2 {
font-size: 1.5em; } }
.page-content-news h2.grey {
color: #63666a !important; }
.page-content-news h3, .page-content-news h4, .page-content-news h5, .page-content-news h6 {
color: #63666a;
margin: 0 0 0.5em;
text-transform: unset; }
.page-content-news p {
color: #63666a;
font-weight: 100; }
.page-content-news time {
display: block;
font-family: "Open Sans", sans-serif;
font-weight: 100;
margin-bottom: 2em; }
.page-content-news .wp-block-image {
margin: 2em 0; }
.page-content-news .wp-block-image img {
height: auto;
width: 100%; }
.news-archive {
margin-bottom: 2em; }
.news-archive .news-archive-block {
border-bottom: 1px solid #e4e5e5;
margin-bottom: 1em;
padding-bottom: 1em;
opacity: 0;
position: relative;
top: 15px;
transition: 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.news-archive .news-archive-block.onScreen {
opacity: 1;
top: 0; }
.news-archive .news-archive-block .news-archive-block-img-container {
height: 300px;
margin-bottom: 1em; }
.news-archive .news-archive-block .news-archive-block-img-container img {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
width: 100%; }
.news-archive .news-archive-block a {
text-decoration: none; }
.news-archive .news-archive-block .article-title {
color: #63666a;
display: block;
font-size: 1.5em;
font-weight: 300;
margin-bottom: 10px; }
@media screen and (min-width: 550px) {
.news-archive .news-archive-block .article-title {
font-size: 1.6em; } }
@media screen and (min-width: 850px) {
.news-archive .news-archive-block .article-title {
font-size: 1.7em; } }
.news-archive .news-archive-block time {
display: block;
margin-bottom: 1em; }
.news-archive .title {
border-bottom: 3px solid #e4e5e5;
color: #63666a;
display: block;
font-weight: 500;
margin: 0 0 15px;
padding-bottom: 15px; }
.news-sidebar {
margin-bottom: 2em; }
.news-sidebar .news-sidebar-block {
border-bottom: 1px solid #e4e5e5;
margin-bottom: 1em;
padding-bottom: 1em; }
.news-sidebar .news-sidebar-block .article-title {
color: #63666a;
display: block;
font-size: 1.5em;
font-weight: 300;
margin-bottom: 10px; }
@media screen and (min-width: 550px) {
.news-sidebar .news-sidebar-block .article-title {
font-size: 1.6em; } }
@media screen and (min-width: 850px) {
.news-sidebar .news-sidebar-block .article-title {
font-size: 1.7em; } }
.news-sidebar .news-sidebar-block time {
display: block;
margin-bottom: 1em; }
.news-sidebar .news-sidebar-block a {
color: #646464;
font-size: 1.1em;
text-decoration: none; }
.news-sidebar .news-sidebar-block a:hover {
/* color: $font_alt_colour;*/ }
.news-sidebar .title {
border-bottom: 3px solid #e4e5e5;
color: #63666a;
display: block;
font-weight: 500;
margin-bottom: 15px;
padding-bottom: 15px; }
body {
background-color: #ffffff;
color: #484847; }
/*# sourceMappingURL=frontend.css.map */