/*
Theme Name: Genesis Child Theme
Theme URI: http://ottimoto.com.au
Description: Blank child theme for the Genesis Framework - Playground.   
Author: Otti Ott
Author URI: http://ottimoto.com.au
Template: genesis  
License: GPL-2.0+  
License URI: http://www.gnu.org/licenses/gpl-2.0.html  
*/


/* ===================================================================================================================
===================================================================================================================
ADDITIONS/CHANGES CSS CHILD THEME.
===================================================================================================================
=================================================================================================================== */

/* ===================================================================================================================
   * Responsive styles for Life Chiropractic & Wellness website in addition to styles defined in Genesis Framework
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

/* ===================================================================================================================
Title: HTML5 Responsive styles - design dependent
   =================================================================================================================== */
   
   
	/* color: rgb(0, 0, 0); BLACK. */
	/* color: rgb(255, 255, 255); WHITE. */
	/* color: rgb(0, 133, 143); GREEN. */
	/* color: rgb(0, 166, 179); GREEN LIGHT - MOBILE NAV HOVER/ACTIVE. */
	/* color: rgb(92, 220, 230); GREEN VERY LIGHT - NAV MOBILE. */
	/* color: rgb(142, 130, 92); BROWN. */ /* #8e825c. */
	/* color: rgb(249, 248, 246); BROWN 5%. */
	/* color: rgb(220, 217, 205); BROWN 30%. */
	/* color: rgb(83, 98, 113); DARK GREEN - TEXT. */
	/* color: rgb(218, 103, 48); ORANGE - LINKS. */
	/* color: rgb(253, 247, 244); ORANGE 5% - BUTTON BG. */
	/* color: rgb(179, 64, 9); ORANGE DARK - LINKS HOVER. */
	/* color: rgb(247, 235, 229); ORANGE DARK 10% - BUTTON BG HOVER. */



/* FONTS. */
/* Fira Sans Light as well as Merriweather Light & Bold added in functions.php. 
Fira Sans Light = 300
Fira Sans Medium = 500
Merriweather Light = 300
Merriweather Bold = 700
*/
   

/* OWN CSS FILES.
====================================================================================================================== */
/* @import 'mediaquery-reporter.css'; Add media reporter to see bar for breakpojnt changes. DELETE!!! */


/* HELPER CLASSES.
====================================================================================================================== */
/* Add the .screen-reader-text class to hide text from browsers but make it available for screen readers. */
/* Already defined in style.css. */

/* HELPER CLASSES.
====================================================================================================================== */


/* TYPOGRAPHY.
====================================================================================================================== */
/* BODY. */
body {
	font-family: 'Merriweather', serif;
	font-weight: 300;
	line-height: 1.6;
	margin: 0 0 5px;
	font-size: 16px; /* Required for em's to work correctly. */
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
}

/* PARAGRAPHS. */
p {
	font-size: 1em; /* 16px. */
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	margin-bottom: 18px;
}

/* HEADINGS & TILTLES. Overwrite fonts set in style.css. */
h1, h2, h3, h4, h5, h6, .entry-title, .widget-title, .blog h1.archive-title {
	font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 300;
	line-height: normal;
	text-transform: uppercase;
	margin: 0 0 30px;
}
h1, .entry-title {
	font-size: 1.875em; /* 30px. */
	color: rgb(0, 133, 143); /* GREEN. */
}
h2, .blog h1.archive-title, .archive h1.archive-title {
	font-size: 1.5em; /* 24px. */
	color: rgb(0, 133, 143); /* GREEN. */
	font-weight: 300;
	margin-bottom: 30px;
}
h3 {
	font-size: 1.375em; /* 22px. */
	color: rgb(0, 133, 143); /* GREEN. */
}
.questionsContainer h3 {
	color: rgb(255, 255, 255); /* WHITE. */
	margin-bottom: 25px;
}
h4 {
	font-size: 1.125em; /* 18px. */
	color: rgb(0, 133, 143); /* GREEN. */
}
.entry-content h3, .entry-content h4 {
	font-weight: 300;
}
.entry-content h4 {
	margin-top: 0px;
}
h5 {
	font-size: 1.0625em; /* 17px. */
}
h6, .ab-block-post-grid header h6.ab-block-post-grid-title {
	font-size: 1em; /* 16px. */
}
/* BUTTONS. */
.site-container .wp-block-button .wp-block-button__link, input[type="submit"] {
	font-size: 1.0625em; /* 17px. */
	font-family: 'Merriweather', serif;
	font-weight: 300;
}
/* WIDGET TITLE. */
.widget-title {
	color: rgb(0, 133, 143); /* GREEN. */
	font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 300;
	line-height: normal;
	text-transform: uppercase;
	font-size: 1.0625em; /* 17px. */
}

/* NAVIGATION. */
/* Desktop. */
.genesis-nav-menu a, .genesis-nav-menu .sub-menu a {
	font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 500;
	line-height: normal;
	font-size: 1.0625em; /* 17px. */
}
/* Mobile. */
.menu-toggle, .sub-menu-toggle {
	font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 500;
	line-height: normal;
	font-size: 1.375em; /* 22px. */
}

/* Header image caption. */
figure.wp-block-image.headerImage figcaption {
	font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: normal;
	text-transform: uppercase;
	font-size: 1.375em; /* 22px. */
	color: rgb(255, 255, 255); /* WHITE. */
}

/* QUESTIONS CONTAINER. PARALLAX. */
.questionsText {
	font-weight: 700;
	font-size: 1.0625em; /* 17px. */
}

/* BLOG TEASER. TEXT. */
.ab-block-post-grid .ab-block-post-grid-text {
	font-size: 15px;
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
}
/* BLOG TEASER. DATE. */
.ab-block-post-grid .ab-block-post-grid-date {
	font-size: 0.875em; /* 14px. */	
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
}
/* BLOG TEASER. READ MORE. */
.ab-block-post-grid a.ab-block-post-grid-more-link {
	font-size: 15px;
	font-weight: 300;
}

/* FOOTER WIDGET TEXT. */
.footer-widgets p {
	font-size: 0.9375em; /* 15px. */
}

/* SITE FOOTER. */
.site-footer p {
	font-size: 0.8125em; /* 13px. */
}

/* FORM. */
input, select, textarea,
input::-webkit-input-placeholder, input:-moz-placeholder, input:-ms-input-placeholder {
	font-family: 'Merriweather', serif;
	font-weight: 300;
}

/* Messages. */
span.wpcf7-not-valid-tip, div.wpcf7-validation-errors {
	font-size: 16px;
}



/* END TYPOGRAPHY.
====================================================================================================================== */


/* LINKS, BUTTONS, TRANSITIONS, SITE HEADER ETC.
====================================================================================================================== */
/* LINKS. */
/* Remove the outline around all links. */
a, a:active, a:focus {
	outline: none; /* Works in Firefox, Chrome, IE8 and above */ 
}
a, a:visited, .entry-title a, .entry-title a:visited {
	color: rgb(218, 103, 48); /* ORANGE - LINKS. */
	text-decoration: none;
	border-bottom: 1px solid rgb(255, 255, 255); /* WHITE. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(255, 255, 255); /* WHITE. */
}
a:hover, a:focus, a:active, .entry-title a:hover, .entry-title a:focus, .entry-title a:active {
	color: rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	text-decoration: none;
	border-bottom: 1px solid rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
}

/* BUTTONS. */
.wp-block-button .wp-block-button__link, .wp-block-button .wp-block-button__link:visited {
	color: rgb(218, 103, 48) !important; /* ORANGE - LINKS. */
	background-color: rgb(253, 247, 244) !important; /* ORANGE 5% - BUTTON BG. */
	border: 2px solid rgb(218, 103, 48) !important; /* ORANGE - LINKS. */
	border-radius: 3px !important;
}
.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link:active {
	color: rgb(179, 64, 9) !important; /* ORANGE DARK - LINKS HOVER. */
	background-color: rgb(247, 235, 229) !important; /* ORANGE DARK 10% - BUTTON BG HOVER. */
	border: 2px solid rgb(179, 64, 9) !important; /* ORANGE DARK - LINKS HOVER. */
	box-shadow: none;
}
/* Button margin bottom. */
.wp-block-button.alignleft {
	margin-bottom: 1em;
	margin-right: 0;
}

/* TRANSITIONS. */
/* Links, buttons, form inputs, gallery inputs. */
a,
button, .button,
input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus,
.gallery img {
	transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
/* Toggle Button hamburger. Remove transition otherwise the extra transition appears as transition delay. */
.menu-toggle::before {
	transition: none;
}
/* Buttons in submenu (MOBILE). */
.sub-menu-toggle::before {
	transition: transform 0.25s ease-in-out;
}
.genesis-nav-menu .sub-menu {
	transition: opacity 0.4s ease-in-out;
}
/* Link text with border bottom. */
.ab-block-post-grid header h6.ab-block-post-grid-title a {
	transition: all 0.25s ease-in-out;
}

/* SITE HEADER. */
/* Remove/edit Site Header drop shadow, if wanted. */
.site-header {
	box-shadow: none;
	background-color: rgb(0, 133, 143); /* GREEN. */
}
/* The logo should be smaller on mobiles and larger later again. Also requires padding top and bottom. */
.site-header .title-area img.custom-logo {
	width: 70%;
	padding-top: 6px;
	padding-bottom: 6px;
}
/* Remove the border bottom and the box-shadow from the header logo. */
a.custom-logo-link {
	border-bottom: 0px solid white;
	box-shadow: none;
}

/* LINKS, BUTTONS, TRANSITIONS, SITE HEADER ETC.
====================================================================================================================== */


/* HEADER.
====================================================================================================================== */
/* Hide the h1 entry header (page title) with the same styles used for screen-reader-text, (still visible to screen readers). 
Also for footer titles. */
header.entry-header {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* END HEADER.
====================================================================================================================== */


/* NAVIGATION.
====================================================================================================================== */
/* NAVIGATIONAL LINKS. */
/* MOBILE ONLY. */
/* The hamburger - larger. */
.site-header .menu-toggle::before {
	font-size: 25px;
	width: 30px;
	top: 2px;
}
/* Toggle/ button - remove the outline on focus etc. */
.menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus {
	outline: 0px solid rgb(0, 133, 143); /* GREEN. */;
}
/* Toggle button. */
/* Distance navigation from top - different for mobile/desktop. */
.menu-toggle {
	margin-top: 25px;
}
.menu-toggle, .menu-toggle:visited {
	color: rgb(255, 255, 255); /* WHITE. */
	background-color: transparent;
}
.menu-toggle:hover, .menu-toggle:focus, .menu-toggle:active {
	color: rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
}
/* The navigation link text on mobile. Remove the border bottom and the box-shadow. */
.genesis-nav-menu a, .genesis-nav-menu a:visited,
.sub-menu-toggle, .sub-menu-toggle:visited {
	color: rgb(255, 255, 255); /* WHITE. */
	border-bottom: 0px solid white;
	box-shadow: none;
}
.genesis-nav-menu a:hover, .genesis-nav-menu a:focus, .genesis-nav-menu a:active, 
.sub-menu-toggle:hover, .sub-menu-toggle:focus, .sub-menu-toggle:active {
	color: rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
	background-color: rgba(92, 220, 230, 0.1); /* GREEN VERY LIGHT - NAV MOBILE. Transparency. */
}
.genesis-nav-menu a span {
	padding-left: 10px;
}
/* Active navigation item including states. */
/* Active/Current item. */
.genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .current-menu-item > a:visited, 
.genesis-nav-menu .sub-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:visited {
	color: rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
	background-color: rgba(92, 220, 230, 0.1); /* GREEN VERY LIGHT - NAV MOBILE. Transparency. */
}
/* Active/Current item on hover. */
.genesis-nav-menu .current-menu-item > a:hover, .genesis-nav-menu .current-menu-item > a:focus, .genesis-nav-menu .current-menu-item > a:active, 
.genesis-nav-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu .sub-menu .current-menu-item > a:focus, .genesis-nav-menu .sub-menu .current-menu-item > a:active {
	color: rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
	background-color: rgba(92, 220, 230, 0.1); /* GREEN VERY LIGHT - NAV MOBILE. Transparency. */
}

/* Submenu. */
.genesis-nav-menu .sub-menu a, .genesis-nav-menu .sub-menu a:visited {
	background-color: inherit;
}
.genesis-nav-menu .sub-menu a:hover, .genesis-nav-menu .sub-menu a:active, .genesis-nav-menu .sub-menu a:focus {
	background-color: rgba(92, 220, 230, 0.1); /* GREEN VERY LIGHT - NAV MOBILE. Transparency. */
}




/* END NAVIGATION.
====================================================================================================================== */


/* HERO SLIDER & HERO IMAGES.
====================================================================================================================== */


/* END HERO SLIDER & HERO IMAGES.
====================================================================================================================== */


/* HOME.
====================================================================================================================== */
/* HOME HEADING H2 */
/* Move with negative margin possible with flex. Remove margins etc on larger devices (aboive main breakpojnt). */
h2.whiteHeadingh2 {
	background-color: rgba(0, 133, 143, 0.9); /* GREEN. */
	color: rgb(255, 255, 255); /* WHITE. */	
	padding: 40px 20px 40px 20px;
}

/* The image with overlapping text - margins. */
.contentColRev .wp-block-column:nth-child(1) {
	margin-bottom: 0;
}
.contentColRev .wp-block-column:nth-child(1) .wp-block-image {
	margin-bottom: 0;
}

/* END HOME.
====================================================================================================================== */

/* PAGES.
====================================================================================================================== */
/* FULL PAGE WIDTH & PAGES WITH SIDEBAR.
--------------------------------------------- */
/* Classes assigned for each page as body class. */
/* Website width (30px padding left & right). Also adjust padding top, depending on height of site-header. */
.pageFullWidth .site-inner, .pageSidebar .site-inner {
	/* background-color: rgb(240, 240, 240); */
	max-width: 1320px;
	padding-top: 0;
}
/* Navigation width. Set width and center. */
.pageFullWidth .site-header .wrap, .pageSidebar .site-header .wrap, .home .site-header .wrap, .blog .site-header .wrap, .single .site-header .wrap, .archive .site-header .wrap, .error404 .wrap {
	/* background-color: rgb(220, 220, 220); */	
	max-width: 1320px;
	margin: 0 auto;
}
/* The width of the whole content. */
.pageFullWidth .content {
	/* background-color: rgb(230, 230, 230); */
	width: 100%;
}
/* END FULL PAGE WIDTH & PAGES WITH SIDEBAR.
--------------------------------------------- */

/* SIDEBAR PAGES.
--------------------------------------------- */
/* Content left for website with sidebar. */
.pageSidebar .content {
	/* background-color: rgb(200, 200, 200); */
}
/* Content right (Sidebar) for website with sidebar. */
.pageSidebar .sidebar-primary {
	/* background-color: rgb(180, 180, 180); */
}
/* END SIDEBAR PAGES.
--------------------------------------------- */

/* INNER CONTENT & COLUMNS.
--------------------------------------------- */
/* Columns wide width. */
.full-width-content .entry-content .alignwide {
	margin: 0 auto;
	max-width: 100%;
}
/* Columns full width. */
.alignfull {
	/* background-color: rgb(200, 200, 0); */
}
/* END INNER CONTENT & COLUMNS.
--------------------------------------------- */

/* PAGE SPECIFIC.
--------------------------------------------- */
/* HEADER IMAGE. */
/* Text below header image first. */
figure.wp-block-image.headerImage figcaption {
	margin-top: 0;
	margin-bottom: 0;
	padding: 5px 5px 5px 5px;
	background-color: rgb(142, 130, 92); /* BROWN. */
}
/* Remove distance to below content when stacked. */
figure.wp-block-image.headerImage, figure.wp-block-image.headerImage .wp-block0column:nth-child(1) {
	margin-bottom: 0;
}

/* CONTENT COLUMN. */
/* Distance after. */
.site-container .wp-block-columns.contentCol {
	margin-bottom: 10px;
}

/* FLEX COLUMNS. */
.contentCol .wp-block-column:nth-child(1), .contentColRev .wp-block-column:nth-child(1) {
	flex-basis: 100%;
}
.contentCol .wp-block-column:nth-child(2), .contentColRev .wp-block-column:nth-child(2) {
	flex-basis: 100%;
}

/* Button left column remove float. Distance bottom. */
.leftColButton.alignleft {
	float: none;
	margin-bottom: 40px;
}

/* Kjersti photo. Remove margin right. */
.leftColImage .alignleft {
	margin-right: 0;
}

/* LOGO CONTENT OFFSET. */
.contentCol .wp-block-column:nth-child(1) {
	text-align: center;
	padding-top: 15px;
}
.contentCol .wp-block-column:nth-child(1) .wp-block-image.doubleBorderBottom {
	margin-bottom: 15px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgb(0, 133, 143); /* GREEN. */
	box-shadow: 0px 5px 0px 0px white, 0px 6px 0px 0px rgb(0, 133, 143); /* GREEN. */
	text-align: left;	
}
.contentCol .wp-block-column:nth-child(1) .wp-block-image.doubleBorderBottom img {
	width: 35%;
}

/* Download links in left column. */
.downloadLink a:before {
	font-family: 'FontAwesome';
	content: '\f019';
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	padding-right: 7px;
}

/* TEXT COLUMN OFFSET. */
/* The main text column pushed further down. */
.contentCol .wp-block-column:nth-child(2) {
	padding-top: 20px;
}

/* QUESTIONS CONTAINER. PARALLAX. */
/* AWB (Advanced Wordpress Backgrounds) Plugin container used. */
.questionsContainer.wp-block-nk-awb {
	padding-top: 50px;
	padding-bottom: 40px;
	margin-bottom: 45px;
}
.questionsText {
	color: rgb(255, 255, 255); /* WHITE. */
}

/* GOOGLE MAP CONTAINER. */
.googleMapContainer .ab-container-content {
	max-width: 100% !important;
	line-height: 0;
}

/* 404 page. */
.error404 .site-inner .content-sidebar-wrap .entry {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* END PAGE SPECIFIC.
--------------------------------------------- */

/* END PAGES.
====================================================================================================================== */


/* PAGE PRELOADER.
====================================================================================================================== */
/* Full size colour div with slight opacity. */
#page-preloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999;
    opacity: 0.98;
    background: rgb(0, 133, 143); /* GREEN. */
}
/* Once footer script adds class preloader-loaded (page is loaded), hide the spinner and the whole pageloader div. */
#page-preloader.preloader-loaded .page-preloader-spin {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#page-preloader.preloader-loaded {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* If no js -<> load no preloader. */
.no-js #page-preloader {
    display: none;
}
/* Preloader styles. Outer spinner with inner div, followed by two inner spinners with pseudo classes. */
/* It really is used as a box with a border all around and only the top border has a colour. Then border radius bends the border. */
#page-preloader .page-preloader-spin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1001;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: white;
    -webkit-animation: PreloaderSpin 2s linear infinite;
    animation: PreloaderSpin 2s linear infinite;
}
#page-preloader svg {
	position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1001;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
}
#page-preloader .page-preloader-spin:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: white;
    -webkit-animation: PreloaderSpin 3s linear infinite;
    animation: PreloaderSpin 3s linear infinite;
}
#page-preloader .page-preloader-spin:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: white;
    -webkit-animation: PreloaderSpin 1.5s linear infinite;
    animation: PreloaderSpin 1.5s linear infinite;
}
/* The preloader animation. */
@-webkit-keyframes PreloaderSpin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes PreloaderSpin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* END PAGE PRELOADER.
====================================================================================================================== */


/* BLOG PAGES.
====================================================================================================================== */
/* BLOG TEASER. */
/* Blog Teaser Title. Remove the underline on hover and have a double border bottom instead. */
.ab-block-post-grid header h6.ab-block-post-grid-title a, .ab-block-post-grid header h6.ab-block-post-grid-title a:visited {
	color: rgb(218, 103, 48); /* ORANGE - LINKS. */
	text-decoration: none;
	border-bottom: 1px solid rgb(255, 255, 255); /* WHITE. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(255, 255, 255); /* WHITE. */
}
.ab-block-post-grid header h6.ab-block-post-grid-title a:hover, .ab-block-post-grid header h6.ab-block-post-grid-title a:active, .ab-block-post-grid header h6.ab-block-post-grid-title a:focus {
	color: rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	text-decoration: none;
	border-bottom: 1px solid rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
}

/* Border above and below post excerpt - use the image and the text div. */
/* Mixture of border-bottom and box-shadow. Box-shadow values: Horizontal Offset, Vertical Offset, Blur, Spread. */
.ab-block-post-grid .ab-block-post-grid-image {
	border-bottom: 1px solid rgb(0, 133, 143); /* GREEN. */
	box-shadow: 0px 5px 0px 0px white, 0px 6px 0px 0px rgb(0, 133, 143); /* GREEN. */
	padding-bottom: 1em;
}

.ab-block-post-grid .ab-block-post-grid-text {
	border-bottom: 1px solid rgb(0, 133, 143); /* GREEN. */
	box-shadow: 0px 5px 0px 0px white, 0px 6px 0px 0px rgb(0, 133, 143); /* GREEN. */
	padding-bottom: 1em;
}

/* Blog Teaser - Read more. */
.ab-block-post-grid a.ab-block-post-grid-more-link, .ab-block-post-grid a:visited.ab-block-post-grid-more-link {
	color: rgb(218, 103, 48); /* ORANGE - LINKS. */
	text-decoration: none;
	border-bottom: 1px solid rgb(255, 255, 255); /* WHITE. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(255, 255, 255); /* WHITE. */
}
.ab-block-post-grid a:hover.ab-block-post-grid-more-link, .ab-block-post-grid a:active.ab-block-post-grid-more-link, .ab-block-post-grid a:focus.ab-block-post-grid-more-link {
	color: rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	text-decoration: none;
	border-bottom: 1px solid rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
}

/* Icon after read more link. Style dashicons (comes with Wordpress). */
.ab-block-post-grid a.ab-block-post-grid-more-link:after, .ab-block-post-grid a:visited.ab-block-post-grid-more-link:after { 
	font-family: 'FontAwesome';
	content: '\f138';
	color: rgb(218, 103, 48); /* ORANGE - LINKS. */
	padding-left: 5px;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font-size: 15px;
	padding-right: 5px;
	vertical-align: middle;
}
.ab-block-post-grid a:hover.ab-block-post-grid-more-link:after, .ab-block-post-grid a:active.ab-block-post-grid-more-link:after, .ab-block-post-grid a:focus.ab-block-post-grid-more-link:after {
	color: rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
}

/* SINGLE BLOG POST. */
/* Change the border top. */
.entry-footer .entry-meta {
	border-top: 0px solid rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	border-bottom: 1px solid rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	padding-bottom: 10px;
}

/* SINGLE BLOG POSTS AFTER. */
/* Remove the padding and box-shadow. */
.after-entry.widget-area {
	box-shadow: none;
	padding: 0;
}

/* BLOG ARCHIE PAGE - NAVIGATION. */
.archive-pagination li a {
	font-weight: 300;
	color: rgb(218, 103, 48) !important; /* ORANGE - LINKS. */
	background-color: rgb(253, 247, 244) !important; /* ORANGE 5% - BUTTON BG. */
	border: 2px solid rgb(218, 103, 48) !important; /* ORANGE - LINKS. */
	border-radius: 3px !important;
}
.archive-pagination li a:focus, .archive-pagination li a:hover, .archive-pagination li.active a {
	color: rgb(179, 64, 9) !important; /* ORANGE DARK - LINKS HOVER. */
	background-color: rgb(247, 235, 229) !important; /* ORANGE DARK 10% - BUTTON BG HOVER. */
	border: 2px solid rgb(179, 64, 9) !important; /* ORANGE DARK - LINKS HOVER. */
	box-shadow: none;
}



/* END BLOG PAGES.
====================================================================================================================== */


/* LIGHBOX/GALLERY IMAGES.
====================================================================================================================== */


/* END LIGHBOX/GALLERY IMAGES.
====================================================================================================================== */


/* FOOTER.
====================================================================================================================== */
/* FOOTER WIDGETS.
--------------------------------------------- */
/* The widget area, above the site footer. */
.footer-widgets {
	background-color: rgb(249, 248, 246); /* BROWN 5%. */
	max-width: 100%;
	margin: 0 auto;
	border-top: 5px solid rgb(220, 217, 205); /* BROWN 30%. */
	padding: 30px 0;
}

/* Width Footer Widgets. */
.footer-widgets .wrap {
	max-width: 1320px;
}
/* Paragraphs inside footer. */
.footer-widgets p {
	margin-bottom: 15px;
}
/* The image/logo inside the footer. */
.footer-widgets .widget_media_image#media_image-3 img {
	width: 50%;
}
/* The ACA Logo inside footer. */
.footer-widgets .widget_media_image#media_image-4 img {
	width: 30%;
}

/* Style Font Awesome (plugin - Better Font Awesome). */
.awesome-phone-icon:before {
	font-family: 'FontAwesome';
	content: '\f095';
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	padding-right: 5px;
}
.awesome-email-icon:before {
	font-family: 'FontAwesome';
	content: '\f0e0';
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	padding-right: 5px;
}
.awesome-location-icon:before {
	font-family: 'FontAwesome';
	content: '\f124';
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	padding-right: 5px;
}

/* Footer links. */
/* Remove the border bottom and the box-shadow from the header logo. */
.footer-widgets .widget_media_image a {
	border-bottom: 0px solid white;
	box-shadow: none;
}
/* Adjust the footer link bottom border and box-shadow to suit. */
.footer-widgets .textwidget a, .footer-widgets .textwidget a:visited {
	border-bottom: 1px solid rgb(249, 248, 246); /* BROWN 5%. */
	box-shadow: 0px 2px 0px 0px rgb(249, 248, 246), 0px 3px 0px 0px rgb(249, 248, 246); /* BROWN 5%. */
}
.footer-widgets .textwidget a:hover, .footer-widgets .textwidget a:active, .footer-widgets .textwidget a:focus {
	border-bottom: 1px solid rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
}

/* SITE FOOTER. Width Site Footer. */
.site-footer {
	background-color: rgb(249, 248, 246); /* BROWN 5%. */
	border-top-width: 0px;
	text-align: left;
}
.site-footer .wrap {
	margin: 0 auto;
	border-top: 1px solid rgb(142, 130, 92); /* BROWN. */ /* #8e825c. */
	padding-top: 30px;
}

/* Site footer links. */
.site-footer a, .site-footer a:visited {
	border-bottom: 1px solid rgb(249, 248, 246); /* BROWN 5%. */
	box-shadow: 0px 2px 0px 0px rgb(249, 248, 246), 0px 3px 0px 0px rgb(249, 248, 246); /* BROWN 5%. */
}
.site-footer a:hover, .site-footer a:active, .site-footer a:focus {
	border-bottom: 1px solid rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
	box-shadow: 0px 2px 0px 0px white, 0px 3px 0px 0px rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
}

/* SOCIALS. */
.simple-social-icons ul li {
	margin: 0 !important;
}

/* Retargeting Pixel 06/2020. */
.reTarget {
	display: none;
}


/* END FOOTER WIDGETS.
--------------------------------------------- */

/* BACK TO TOP. */
#topbutton, #topbutton:visited {
	position: fixed;
	display: none;
	height: 40px;
	width: 40px;
	line-height: 40px;
	right: 15px;
	bottom: 15px;
	z-index: 1;
	background: rgb(218, 103, 48); /* ORANGE - LINKS. */
	border-radius: 40px;
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	/* Remove the border bottom and the box-shadow from the header logo. */
	border-bottom: 0px solid white;
	box-shadow: none;
}
#topbutton:hover, #topbutton:active, #topbutton:focus {
	background: rgb(179, 64, 9); /* ORANGE DARK - LINKS HOVER. */
}
#topbutton:after {
	font-family: 'FontAwesome';
	content: '\f139';
}

/* FOOTER.
====================================================================================================================== */


/* FORM - REGISTER YOUR INTEREST.
====================================================================================================================== */
/* Style input, select and textarea. */
/* First for contact form on Contact page. */
.wpcf7 input {
	margin-bottom: 15px;
}
/* Height for textarea. */
.wpcf7 textarea {
	height: 150px;
}

/* Next for Patient Info Form. */
/* Colour here responsible for drop-down. Placeholder later for text fields. */
input, select, textarea {
	background-color: rgb(249, 248, 246); /* BROWN 5%. */
	border: 1px solid rgb(142, 130, 92); /* BROWN. */ /* #8e825c. */
	color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
	font-weight: 300;
	padding: 15px;
}

/* When fileds are in focus. */
input:focus, select:focus, textarea:focus {
	border: 1px solid rgb(220, 217, 205); /* BROWN 30%. */
	outline: none;
}

/* Placeholder colour for input fields. Less opacity on focus. */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: rgb(83, 98, 113); /* DARK GREEN - TEXT. */
    opacity: 1;
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
    opacity: 0.7;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: rgb(64, 24, 1); /* VERY DARK BROWN. */ /* Text, Brain graphic drop caps. */ /* #401801 */
    opacity: 1;
}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
    opacity: 0.7;
}

/* Firefox > 19 */
input::-moz-placeholder, textarea::-moz-placeholder {
    color: rgb(64, 24, 1); /* VERY DARK BROWN. */ /* Text, Brain graphic drop caps. */ /* #401801 */
    opacity: 1;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
    opacity: 0.7;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder, textarea::-ms-input-placeholder {
    color: rgb(64, 24, 1); /* VERY DARK BROWN. */ /* Text, Brain graphic drop caps. */ /* #401801 */
    opacity: 1;
}
input:focus:-ms-input-placeholder, textarea:focus::-ms-input-placeholder {
    opacity: 0.7;
}

/* The acceptance boxes below all fields/fieldsets. */
span.wpcf7-list-item {
	margin-left: 0;
}
span.wpcf7-list-item input {
	vertical-align: middle;
}
span.wpcf7-list-item-label {
	vertical-align: middle;
}

/* Note at the end of the form. */
h4.noteForm, p.noteForm {
	padding-left: 0;
}

/* Distance below form. */
.wpcf7-form {
	margin-bottom: 3%;
}

/* The submit button disabled. */
input[type="submit"]:disabled {
	background-color: rgb(241, 241, 235) !important; /* GREEN 10%. */ /* Button bg, Links bg. */ /* #f2f2ec */
	border: 1px solid rgb(118, 119, 59) !important; /* GREEN. */ /* Button text, Button border. */ /* #76773b */
	opacity: 0.4;
}
/* The submit button. */
.wpcf7-submit, .wpcf7-submit:visited, input[type="submit"] {
	color: rgb(218, 103, 48) !important; /* ORANGE - LINKS. */
	background-color: rgb(253, 247, 244) !important; /* ORANGE 5% - BUTTON BG. */
	border: 2px solid rgb(218, 103, 48) !important; /* ORANGE - LINKS. */
	border-radius: 3px !important;
	font-weight: 300 !important;
}
.wpcf7-submit:hover, .wpcf7-submit:active, .wpcf7-submit:focus {
	color: rgb(179, 64, 9) !important; /* ORANGE DARK - LINKS HOVER. */
	background-color: rgb(247, 235, 229) !important; /* ORANGE DARK 10% - BUTTON BG HOVER. */
	border: 2px solid rgb(179, 64, 9) !important; /* ORANGE DARK - LINKS HOVER. */
	box-shadow: none;
}

div.wpcf7-response-output {
	margin-left: 0;
	padding: 0.5em 1.3em;
}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
	border: 1px solid #f00;
	color: #f00;
}


/* END FORM - REGISTER YOUR INTEREST.
====================================================================================================================== */


/* MEDIA QUERIES
====================================================================================================================== */
/* All above is mobile first. */
/* 
320px = 20em
480px = 30em
640px = 40em
768px = 48em
940px = 58.75em
960px = 60em
992px = 62em
1024px = 64em
1440px = 90em
1920px = 120em
*/

/* Main breakpoints for Genesis Framework seems to be:
959/960px for Navigation, Fixed Header, Footer Widgets
599px/600px for Flex Grid -> Change to 959/960
*/

	/* ------------ TYPOGRAPHY. ------------ */

	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ LINKS, BUTTONS, TRANSITIONS, SITE HEADER ETC. ------------ */

	/* ------------ END LINKS, BUTTONS, TRANSITIONS, SITE HEADER ETC. ------------ */
	
	/* ------------ HEADER. ------------ */

	/* ------------ END HEADER. ------------ */
	
	/* ------------ NAVIGATION. ------------ */

	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ HERO SLIDER & HERO IMAGES. ------------ */

	/* ------------ END HERO SLIDER & HERO IMAGES. ------------ */
	
	/* ------------ HOME. ------------ */

	/* ------------ END HOME. ------------ */
	
	/* ------------ PAGES. ------------ */

	/* ------------ END PAGES. ------------ */
	
	/* ------------ PAGE PRELOADER. ------------ */

	/* ------------ END PAGE PRELOADER. ------------ */
	
	/* ------------ BLOG PAGES. ------------ */

	/* ------------ END BLOG PAGES. ------------ */
	
	/* ------------ LIGHBOX/GALLERY IMAGES. ------------ */

	/* ------------ END LIGHBOX/GALLERY IMAGES. ------------ */
	
	/* ------------ FOOTER. ------------ */

	/* ------------ END FOOTER. ------------ */
	
	/* ------------ FORM - REGISTER YOUR INTEREST. ------------ */

	/* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */


/* XSmall screens: above 320px = 20em (inclusive 320px). */
@media only screen and (min-width: 20em) { 
	/* ------------ TYPOGRAPHY. ------------ */
	/* Header image caption. */
	figure.wp-block-image.headerImage figcaption {
		font-size: 1.4375em; /* 23px. */
	}
	/* ------------ END TYPOGRAPHY. ------------ */
}

/* XSmall screens: above 480px = 30em (inclusive 480px). */
@media only screen and (min-width: 30em) { 
	/* ------------ TYPOGRAPHY. ------------ */
	/* Header image caption. */
	figure.wp-block-image.headerImage figcaption {
		font-size: 1.625em; /* 26px. */
	}
	/* ------------ END TYPOGRAPHY. ------------ */
}

/* XXSmall screens: above 600px = 37.5em (inclusive 600px). */
@media only screen and (min-width: 37.5em) { 
	/* ------------ TYPOGRAPHY. ------------ */
	/* PARAGRAPHS. */
	p {
		font-size: 1em; /* 16px. */
	}
	
	/* HEADINGS & TILTLES. Overwrite fonts set in style.css. */
	h1, .entry-title {
		font-size: 2.25em; /* 36px. */
	}
	h2, .blog h1.archive-title, .archive h1.archive-title {
		font-size: 1.875em; /* 30px. */
	}
	h3 {
		font-size: 1.75em; /* 28px. */
	}
	h4 {
		font-size: 1.375em; /* 22px. */
	}
	h5 {
		font-size: 1.25em; /* 20px. */
	}
	h6, .ab-block-post-grid header h6.ab-block-post-grid-title {
		font-size: 1.0625em; /* 17px. */
	}
	/* BUTTONS. */
	.site-container .wp-block-button .wp-block-button__link, input[type="submit"]  {
		font-size: 1.125em; /* 18px. */
	}
	/* WIDGET TITLE. */
	.widget-title {
		font-size: 1.125em; /* 18px. */
	}

	/* NAVIGATION. */
	/* Desktop. */
	.genesis-nav-menu a, .genesis-nav-menu .sub-menu a {
		font-size: 1.125em; /* 18px. */
	}
	
	/* Header image caption. */
	figure.wp-block-image.headerImage figcaption {
		font-size: 2em; /* 32px. */
	}
	
	/* QUESTIONS CONTAINER. PARALLAX. */
	.questionsText {
		font-size: 1.125em; /* 18px. */
	}
	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ PAGES. ------------ */
	/* HEADER IMAGE. */
	/* Text on top of header image. */
	figure.headerImage {
		position: relative;
	}
	figure.wp-block-image.headerImage figcaption {
		position: absolute;
		top: 35%;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		padding: 5px 5px 5px 5px;
		background-color: rgba(142, 130, 92, 0.85); /* BROWN. */
		width: 97%;
		border-radius: 3px;
	}
	
	/* FLEX COLUMN CHANGE. */
	/* Flex Grid Columns to have breakpoint changed from 600px to 768px. */
	.entry .entry-content .wp-block-columns {
		flex-wrap: wrap; /* flex items will wrap into multiple lines. */
	}
	.wp-block-column {
		flex-basis: 100%; /* defines the default size of an element. */
		flex-grow: 1; /* flex grow specifies how much the item will grow, relative to the rest of the flexible items in the same container. */
	}
	.wp-block-column:not(:last-child) {
		margin-right: 0px;
	}
	.wp-block-column:not(:first-child), .wp-block-column:nth-child(2n) {
		margin-left: 0px;
	}
	
	/* LOGO CONTENT OFFSET. */
	.contentCol .wp-block-column:nth-child(1) {
		padding-top: 20px;
	}
	
	/* TEXT COLUMN OFFSET. */
	/* The main text column pushed further down. */
	.contentCol .wp-block-column:nth-child(2) {
		padding-top: 2%;
	}
	
	/* QUESTIONS CONTAINER. PARALLAX. */
	/* AWB (Advanced Wordpress Backgrounds) Plugin container used. */
	.questionsContainer.wp-block-nk-awb {
		margin-bottom: 55px;
	}
	/* ------------ END PAGES. ------------ */
}

/* Medium screens: above 640px = 40em (inclusive 640px). */
@media only screen and (min-width: 40em) { 

}

/* XMedium screens: above 768px = 48em (inclusive 768px). */
@media only screen and (min-width: 48em) { 
	/* ------------ TYPOGRAPHY. ------------ */
	/* Header image caption. */
	figure.wp-block-image.headerImage figcaption {
		font-size: 2.25em; /* 36px. */
	}
	
	/* FOOTER WIDGET TEXT. */
	.footer-widgets p {
		font-size: 1em; /* 16px. */
	}
	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ HOME. ------------ */
	/* HOME HEADING H2 */
	/* Move with negative margin possible with flex. Remove margins etc on larger devices (aboive main breakpojnt). */
	h2.whiteHeadingh2 {
		padding: 30px 55px 30px 55px;
		margin-left: -150px;
		margin-top: 20px;
	}
	
	/* The image with overlapping text - margins. */
	.contentColRev .wp-block-column:nth-child(1) {
		margin-bottom: 1em;
	}
	.contentColRev .wp-block-column:nth-child(1) .wp-block-image {
		margin-bottom: 1em;
	}
	/* ------------ END HOME. ------------ */
	
	/* ------------ PAGES. ------------ */
	/* HEADER IMAGE. */
	/* Text on top of header image. */
	figure.wp-block-image.headerImage figcaption {
		top: 37%;
		padding: 5px 5px 5px 5px;
		width: 87%;
	}
	
	/* CONTENT COLUMN. */
	/* Distance after. */
	.site-container .wp-block-columns.contentCol {
		margin-bottom: 30px;
	}
	
	/* FLEX COLUMN CHANGE. */
	/* Flex Grid Columns to have breakpoint changed from 600px to 768px. */
	.entry .entry-content .wp-block-columns {
		flex-wrap: nowrap; /* all flex items will be on one line. */
	}
	.contentCol .wp-block-column:nth-child(1) {
		flex-basis: 33%; /* defines the default size of an element. */
		flex-grow: 0; /* flex grow specifies how much the item will grow, relative to the rest of the flexible items in the same container. */
	}
	.contentCol .wp-block-column:nth-child(2) {
		flex-basis: 67%;
		flex-grow: 0; /* flex grow specifies how much the item will grow, relative to the rest of the flexible items in the same container. */
	}
	.contentColRev .wp-block-column:nth-child(1) {
		flex-basis: 67%; /* defines the default size of an element. */
		flex-grow: 0; /* flex grow specifies how much the item will grow, relative to the rest of the flexible items in the same container. */
	}
	.contentColRev .wp-block-column:nth-child(2) {
		flex-basis: 33%;
		flex-grow: 0; /* flex grow specifies how much the item will grow, relative to the rest of the flexible items in the same container. */
	}
	.wp-block-column:not(:last-child) {
		margin-right: 32px;
	}
	.wp-block-column:not(:first-child), .wp-block-column:nth-child(2n) {
		margin-left: 32px;
	}
	
	/* LOGO COLUMN OFFSET. */
	/* The first column holding the logo to have negative margin to move upwards. */
	.contentCol .wp-block-column:nth-child(1) {
		margin-top: -70px;
		background-color: white;
		z-index: 10;
	}
	.contentCol .wp-block-column:nth-child(1) {
		text-align: center;
		padding-top: 30px;
	}
	.contentCol .wp-block-column:nth-child(1) .wp-block-image.doubleBorderBottom {
		margin-bottom: 30px;
		padding-bottom: 30px;
		text-align: center;
	}
	.contentCol .wp-block-column:nth-child(1) .wp-block-image.doubleBorderBottom img {
		width: 65%;
	}
	
	/* TEXT COLUMN OFFSET. */
	/* The main text column pushed further down. */
	.contentCol .wp-block-column:nth-child(2) {
		padding-top: 8%;
	}
	
	/* 404 page. */
	.error404 .site-inner .content-sidebar-wrap .entry {
		padding-top: 70px;
		padding-bottom: 70px;
	}
	/* ------------ END PAGES. ------------ */
	
	/* ------------ FOOTER. ------------ */
	/* The image/logo inside the footer. */
	.footer-widgets .widget_media_image#media_image-3 img {
		width: 30%;
	}
	/* The ACA Logo inside footer. */
	.footer-widgets .widget_media_image#media_image-4 img {
		width: 20%;
	}
	/* ------------ END FOOTER. ------------ */
}

/* 961up screens: above 960px = 60em (inclusive 960px). */
@media only screen and (min-width: 60em) { 
	/* ------------ TYPOGRAPHY. ------------ */
	/* PARAGRAPHS. */
	p {
		font-size: 1.0625em; /* 17px. */
	}
	
	/* HEADINGS & TILTLES. Overwrite fonts set in style.css. */
	h1, .entry-title {
		font-size: 2.75em; /* 44px. */
	}
	h2, .blog h1.archive-title, .archive h1.archive-title {
		font-size: 2.25em; /* 36px. */
	}
	h3 {
		font-size: 2em; /* 32px. */
	}
	h4 {
		font-size: 1.75em; /* 28px. */
	}
	h5 {
		font-size: 1.4375em; /* 23px. */
	}
	h6, .ab-block-post-grid header h6.ab-block-post-grid-title {
		font-size: 1.125em; /* 18px. */
	}
	/* BUTTONS. */
	.site-container .wp-block-button .wp-block-button__link, input[type="submit"]  {
		font-size: 1.1875em; /* 19px. */
	}
	/* WIDGET TITLE. */
	.widget-title {
		font-size: 1.1875em; /* 19px. */
	}

	/* NAVIGATION. */
	/* Desktop. */
	.genesis-nav-menu a, .genesis-nav-menu .sub-menu a {
		font-size: 1.1875em; /* 19px. */
	}
	
	/* Header image caption. */
	figure.wp-block-image.headerImage figcaption {
		font-size: 2.75em; /* 44px. */
	}
	
	/* QUESTIONS CONTAINER. PARALLAX. */
	.questionsText {
		font-size: 1.1875em; /* 19px. */
	}
	
	/* FOOTER WIDGET TEXT. */
	.footer-widgets p {
		font-size: 1em; /* 16px. */
	}
	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ LINKS, BUTTONS, TRANSITIONS, SITE HEADER ETC. ------------ */
	/* SITE HEADER. */
	/* The logo should be smaller on mobiles and larger later again. Also requires padding top and bottom. */
	.site-header .title-area img.custom-logo {
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	/* ------------ END LINKS, BUTTONS, TRANSITIONS, SITE HEADER ETC. ------------ */
	
	/* ------------ NAVIGATION. ------------ */
	/* NAVIGATIONAL LINKS. */
	/* DESKTOP ONLY. */
	/* Distance navigation from top - different for mobile/desktop. */
	.nav-primary {
		margin-top: 30px;
	}
	/* Border below navigation links. */
	/* Mixture of border-bottom and box-shadow. Box-shadow values: Horizontal Offset, Vertical Offset, Blur, Spread. */
	.genesis-nav-menu a, .genesis-nav-menu a:visited,
	.menu-toggle, .menu-toggle:visited, 
	.sub-menu-toggle, .sub-menu-toggle:visited {
		color: rgb(255, 255, 255); /* WHITE. */
		background-color: transparent;
		transition: all 0.4s ease-in-out;
		border-bottom: 1px solid rgb(0, 133, 143); /* GREEN. */
		box-shadow: 0px 2px 0px 0px rgb(0, 133, 143), 0px 3px 0px 0px rgb(0, 133, 143); /* GREEN. */
	}
	.genesis-nav-menu a:hover, .genesis-nav-menu a:focus, .genesis-nav-menu a:active, 
	.menu-toggle:hover, .menu-toggle:focus, .menu-toggle:active, 
	.sub-menu-toggle:hover, .sub-menu-toggle:focus, .sub-menu-toggle:active {
		color: rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
		border-bottom: 1px solid rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
		box-shadow: 0px 2px 0px 0px rgb(0, 133, 143), 0px 3px 0px 0px rgb(92, 220, 230); /* GREEN. */ /* GREEN VERY LIGHT - NAV MOBILE. */
		background-color: transparent;
	}
	/* Active navigation item including states. */
	.genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .current-menu-item > a:visited, 
	.genesis-nav-menu .sub-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:visited {
		border-bottom: 1px solid rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
		box-shadow: 0px 2px 0px 0px rgb(0, 133, 143), 0px 3px 0px 0px rgb(92, 220, 230); /* GREEN. */ /* GREEN VERY LIGHT - NAV MOBILE. */
		background-color: transparent;
	}
	.genesis-nav-menu .current-menu-item > a:hover, .genesis-nav-menu .current-menu-item > a:focus, .genesis-nav-menu .current-menu-item > a:active, 
	.genesis-nav-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu .sub-menu .current-menu-item > a:focus, .genesis-nav-menu .sub-menu .current-menu-item > a:active {
		border-bottom: 1px solid rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
		box-shadow: 0px 2px 0px 0px rgb(0, 133, 143), 0px 3px 0px 0px rgb(92, 220, 230); /* GREEN. */ /* GREEN VERY LIGHT - NAV MOBILE. */
		background-color: transparent;
	}
	/* SUB MENU. */
	.genesis-nav-menu .sub-menu {
		border: 0px solid rgb(0, 133, 143); /* GREEN. */
		width: 200px;
	}
	.genesis-nav-menu li:hover ul.sub-menu li a, .genesis-nav-menu li:hover ul.sub-menu li a:visited {
		background-color: rgba(92, 220, 230, 0.1); /* GREEN VERY LIGHT - NAV MOBILE. Transparency. */
		border: 0px solid rgb(0, 133, 143); /* GREEN. */
		box-shadow: none;
		width: 200px;
	}
	.genesis-nav-menu li:hover ul.sub-menu li a:hover, .genesis-nav-menu li:hover ul.sub-menu li a:active, .genesis-nav-menu li:hover ul.sub-menu li a:focus {
		background-color: rgba(92, 220, 230, 0.1); /* GREEN VERY LIGHT - NAV MOBILE. Transparency. */
		border: 0px solid rgb(0, 133, 143); /* GREEN. */
		box-shadow: none;
		color: rgb(92, 220, 230); /* GREEN VERY LIGHT - NAV MOBILE. */
	}
	
	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ HOME. ------------ */
	/* HOME HEADING H2 */
	/* Move with negative margin possible with flex. Remove margins etc on larger devices (aboive main breakpojnt). */
	h2.whiteHeadingh2 {
		padding: 30px 70px 30px 70px;
		margin-left: -150px;
		margin-top: 40px;
	}
	/* ------------ END HOME. ------------ */
	
	/* ------------ PAGES. ------------ */
	/* HEADER IMAGE. */
	/* Text on top of header image. */
	figure.wp-block-image.headerImage figcaption {
		top: 40%;
		width: 80%;
	}
	
	/* LOGO COLUMN OFFSET. */
	/* The first column holding the logo to have negative margin to move upwards. */
	.contentCol .wp-block-column:nth-child(1) {
		margin-top: -100px;
	}
	/* ------------ END PAGES. ------------ */
	
	/* ------------ FOOTER. ------------ */
	/* The widget area, above the site footer. */
	.footer-widgets {
		padding: 60px 0;
	}
	
	/* The image/logo inside the footer. */
	.footer-widgets .widget_media_image#media_image-3 img {
		width: 80%;
	}
	/* The ACA Logo inside footer. */
	.footer-widgets .widget_media_image#media_image-4 img {
		width: 50%;
	}
	
	/* SITE FOOTER. Width Site Footer. */
	.site-footer {
		text-align: center;
	}
	/* ------------ END FOOTER. ------------ */
}

/* XXMedium screens: above 992 = 62em (inclusive 992px). */
@media only screen and (min-width: 62em) { 

}

/* Large screens: above 1024 = 64em (inclusive 1024px). */
@media only screen and (min-width: 64em) { 	

}

/* BETWEEN screens: above 1081 = 73.8125em (inclusive 1081px). */
@media only screen and (min-width: 73.8125em) { 	

}

/* XLarge screens: above 1200 = 75em (inclusive 1200px). */
@media only screen and (min-width: 75em) { 	
	/* ------------ TYPOGRAPHY. ------------ */
	/* PARAGRAPHS. */
	p {
		font-size: 1.0625em; /* 17px. */
	}
	
	/* HEADINGS & TILTLES. Overwrite fonts set in style.css. */
	h1, .entry-title {
		font-size: 3.125em; /* 50px. */
	}
	h2, .blog h1.archive-title, .archive h1.archive-title {
		font-size: 2.75em; /* 44px. */
	}
	h3 {
		font-size: 2.375em; /* 38px. */
	}
	h4 {
		font-size: 1.9375em; /* 31px. */
	}
	h5 {
		font-size: 1.625em; /* 26px. */
	}
	h6, .ab-block-post-grid header h6.ab-block-post-grid-title {
		font-size: 1.25em; /* 20px. */
	}
	/* BUTTONS. */
	.site-container .wp-block-button .wp-block-button__link, input[type="submit"]  {
		font-size: 1.5em; /* 24px. */
	}
	/* WIDGET TITLE. */
	.widget-title {
		font-size: 1.5em; /* 24px. */
	}

	/* NAVIGATION. */
	/* Desktop. */
	.genesis-nav-menu a, .genesis-nav-menu .sub-menu a {
		font-size: 1.3125em; /* 21px. */
	}
	
	/* Header image caption. */
	figure.wp-block-image.headerImage figcaption {
		font-size: 3.125em; /* 50px. */
	}
	
	/* QUESTIONS CONTAINER. PARALLAX. */
	.questionsText {
		font-size: 1.5em; /* 24px. */
	}
	
	/* FOOTER WIDGET TEXT. */
	.footer-widgets p {
		font-size: 1.0625em; /* 17px. */
	}
	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ HOME. ------------ */
	/* HOME HEADING H2 */
	/* Move with negative margin possible with flex. Remove margins etc on larger devices (aboive main breakpojnt). */
	h2.whiteHeadingh2 {
		padding: 40px 50px 40px 50px;
		margin-left: -150px;
		margin-top: 80px;
	}
	/* ------------ END HOME. ------------ */
	
	/* ------------ PAGES. ------------ */
	/* HEADER IMAGE. */
	/* Text on top of header image. */
	figure.wp-block-image.headerImage figcaption {
		top: 42%;
		width: 70%;
	}
	
	/* 404 page. */
	.error404 .site-inner .content-sidebar-wrap .entry {
		padding-top: 70px;
		padding-bottom: 70px;
	}
	/* ------------ END PAGES. ------------ */
}

/* BETWEEN screens: above 1300 = 81.25em (inclusive 1300px). */
@media only screen and (min-width: 81.25em) { 	

}

/* XXLarge screens: above 1440 = 90em (inclusive 1440px). */
@media only screen and (min-width: 90em) { 	
	/* ------------ PAGES. ------------ */
	/* HEADER IMAGE. */
	/* Text on top of header image. */
	figure.wp-block-image.headerImage figcaption {
		top: 42%;
		width: 60%;
	}
	/* ------------ END PAGES. ------------ */
}

/* Mega screens: above 1921 = 120.0625em (inclusive 1921px). */
@media only screen and (min-width: 120.0625em) { 	
	/* ------------ PAGES. ------------ */
	/* HEADER IMAGE. */
	/* Text on top of header image. */
	figure.wp-block-image.headerImage figcaption {
		top: 44%;
		width: 42%;
	}
	/* ------------ END PAGES. ------------ */
}

/* MEDIA QUERIES FOR STANDARD DEVICES - PORTARIT AND LANDSCAPE. */
/* ----------- iPhone 4 and 4S ----------- */
/* Landscape and from iPhone 4 UP TO iPhone 6S+*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 

}

/* Landscape and iPhone 4 and 4S. */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* Landscape iPhone 5 and 5S */
@media only screen 
  and (min-device-width: 481px) 
  and (max-device-width: 568px)
  and (orientation: landscape) {

}

/* Landscape iPhone 6 */
@media only screen 
  and (min-device-width: 569px) 
  and (max-device-width: 667px) 
  and (orientation: landscape) { 

}

/* Landscape iPhone 6+*/
@media only screen 
  and (min-device-width: 668px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 

}

/*END MEDIA QUERIES
====================================================================================================================== */