/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


/* ===================================================================================================================
===================================================================================================================
ADDITIONS/CHANGES ONLY BELOW HERE.
===================================================================================================================
=================================================================================================================== */

/* ===================================================================================================================
   * Responsive styles for Emergency Support Netowrk in addition to styles defined by original Avada Theme
   * 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(21, 73, 156); BLUE. */ /* #47499c */
	/* color: rgb(186, 11, 26); RED. */ /* #ba0b1a */
	/* color: rgb(199, 59, 71); RED 80% - HOVER. */
	/* color: rgb(37, 37, 37); DARK GREY - TEXT. */ /* #252525 */
	/* color: rgb(238, 242, 248); BLUE 5%. */
	/* color: rgb(99, 93, 11) DARK GREEN TAGLINE BG. */ /* ##635d0b */
	/* color: rgb(241, 241, 241); BLACK 5%. */
	/* color: rgb(190, 190, 190); LIGHT GREY. */

	
   

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


/* GENERAL
====================================================================================================================== */
/* LINKS. */
#main a, #main a:visited {
	color: rgb(186, 11, 26); /* RED. */
}
#main a:hover, #main a:active, #main a:focus {
	color: rgb(199, 59, 71) !important; /* RED 80% - HOVER. */
	text-decoration: underline;
}

/* Content separator color. */
.fusion-content-sep {
	border-color: rgb(190, 190, 190) !important; /* LIGHT GREY. */
}

/* Horizontal line. */
.post-content hr {
	border-top: 1px solid #e0dede;
	border-bottom: 0px solid #e0dede;
}


/* END GENERAL
====================================================================================================================== */


/* FONTS/TYPOGRAPHY
====================================================================================================================== */
/* Google fonts loaded: Raleway
Raleway 300 = Light
Raleway 400 = Regular
Raleway 400i = Regular Italic
Raleway 500 = Medium
*/

/* Pill button font size. */
a.fusion-button {
	font-size: 20px;
	text-transform: none;
}
p strong {
	font-weight: bold;
}

/* Quick Link Text. */
.post-content p.qlText {
	font-size: 21px;
	font-weight: 200;
}

/* Read more link text larger as per theme, */
.fusion-read-more {
	font-size: 15px;
}

/* Quote tagline and also softened one. */
.quoteTagline, .quoteTaglineGrey, .testimonialsHome p {
	font-size: 24px;
	line-height: 1.5;
}

/* Lists. */
.fusion-checklist.fusion-checklist, ul.fusion-checklist.fusion-checklist {
	font-size: 15px !important;
}

/* Footer title headings. */
.fusion-footer-widget-area .widget-title {
	font-size: 20px !important;
	font-weight: 200;
	text-transform: none;
}

/* Text inside footer. larger on mobile, smaller for tablet and then larger again. */
.fusion-footer-widget-area .textwidget p {
	font-size: 15px;
}

/* Mobile first. Blog title & Search title on single blog page - apply font sizes close to what Avada re-sizes witrh similar heading. */
.single.single-post .fusion-post-title, .search-page-search-form .search .fusion-post-title {
	font-size: 24px !important;
	margin-bottom: 17px;
}

/* Single blog post heading with moire leading. */
.single-post #wrapper #main .post h2.fusion-post-title {
	line-height: normal;
}



/* END FONTS/TYPOGRAPHY
====================================================================================================================== */


/* HEADER
====================================================================================================================== */
/* Remove fixed declaration for header bg image. 
Parallax is responsible for that and can be turned off in theme options for a generic header bg image 
but not on single page in page options for individual header bg images there. */
.fusion-header { 
	background-attachment: scroll !important; 
	background-position: center bottom !important; /* Ensure the blue gradient always shows at the bottom. */
}

/* Mobile first INCLUDING FONT SIZE. Style injected tagline into header-1.php. Added after nav items etc and needs to be cleared. */
.fusion-header .fusion-row .taglineESN {
	clear: both;
	color: rgb(255, 255, 255); /* WHITE. */
	font-size: 15px;
	padding-top: 15px;
}
.fusion-header {
	padding-bottom: 8px !important;
}


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


/* NAVIGATION
====================================================================================================================== */
/* DESKTOP. */
/* Move main navigation down. */
.fusion-main-menu {
	margin-top: 96px;
}

/* When dropdown menu activated and mouse moved to submenus -> change the text colour of the main nav item. */
.fusion-main-menu > ul > li:hover > a {
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Padding for dropdown items a bit more than theme. */
.fusion-main-menu .fusion-dropdown-menu .sub-menu li a, .fusion-main-menu .sub-menu li a {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

/* MOBILE. */
/* Increase the font size for the hamburger menu slightly. */
.fusion-mobile-menu-icons a {
	font-size: 25px;
}

/* Add distance below the mobile nav holder to push injected text a little down. Use Specificity. */
.fusion-mobile-menu-design-modern.fusion-header-v1 .fusion-mobile-nav-holder.fusion-mobile-nav-holder {
	margin-bottom: 1px;
}


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


/* QUICK LINKS
====================================================================================================================== */
/* Subtle background behind container for all quick liks on Services page. */
.servicesQuickLinks {
	background-image: url(images/light_grey.png);
	background-repeat: repeat !important;
}

/* END QUICK LINKS
====================================================================================================================== */


/* BUTTONS AND PULSE BUTTONS
====================================================================================================================== */
/* PILL BUTTON. */
/* Margin for pill button top and bottom. */
.buttonMargin {
	margin-top: 20px;
	margin-bottom: 20px;
}
.buttonBottomMargin {
	margin-top: 20px;
	margin-bottom: 40px;
}
/* Remove all underlines for all buttons. */
.fusion-button {
	text-decoration: none !important;
}
/* First make the button text white. */
a:hover.fusion-button, a:active.fusion-button, a:focus.fusion-button {
	color: rgb(255, 255, 255) !important; /* WHITE. */
	background-color: rgb(186, 11, 26); /* RED. */
}
/* Next make the button text inside the span white too. */
a:hover.fusion-button .fusion-button-text, a:active.fusion-button1 .fusion-button-text, a:focus.fusion-button .fusion-button-text {
	color: rgb(255, 255, 255) !important; /* WHITE. */
	background-color: rgb(186, 11, 26); /* RED. */
}
a:hover.fusion-button i, a:active.fusion-button i, a:focus.fusion-button i {
	color: rgb(255, 255, 255) !important; /* WHITE. */
	background-color: rgb(186, 11, 26); /* RED. */
}

/* White button on background. */
.fusion-button.whiteButton {
	border-color: rgb(255, 255, 255) !important; /* WHITE. */
}


/* PULSE BUTTONS. */
.hi-icon-wrap {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 18px;
}
.hi-icon {
	display: inline-block;
	border-radius: 50%;
	position: relative;
	text-align: center;
	z-index: 1;
}
.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}


/* Effect 8 */
.hi-icon-effect-8 .hi-icon {
	background: rgba(255,255,255,0.1);
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
	transition: transform ease-out 0.1s, background 0.2s;
}
.hi-icon-effect-8 .hi-icon:after {
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	box-shadow: 0 0 0 2px rgba(186, 11, 26, 1); /* RED. */
	opacity: 0;
}
.hi-icon-effect-8 .hi-icon:hover:after {
	-webkit-animation: sonarEffect 1.3s ease-out 75ms;
	-moz-animation: sonarEffect 1.3s ease-out 75ms;
	animation: sonarEffect 1.3s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px rgba(186, 11, 26, 1), 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px rgba(186, 11, 26, 1), 0 0 0 10px rgba(255,255,255,0.5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}
@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px rgba(186, 11, 26, 1), 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px rgba(186, 11, 26, 1), 0 0 0 10px rgba(255,255,255,0.5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px rgba(186, 11, 26, 1), 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px rgba(186, 11, 26, 1), 0 0 0 10px rgba(255,255,255,0.5);
		transform: scale(1.2);
		opacity: 0;
	}
}

/* BUTTONS AND PULSE BUTTONS
====================================================================================================================== */



/* HOME
====================================================================================================================== */
/* First circle. All static things first. */
.x2, .x3, .x4, .x5 {
    margin: 0px auto;
}
.circle2, .circle3, .circle4, .circle5 {
	overflow: hidden;
    display: block;
    float: left;
    width: auto;
    height: auto;
    position: relative;
    border-radius: 50%;
}

.circle2 > div, .circle3 > div, .circle4 > div, .circle5 > div {
    position: absolute;
    text-align: center !important;
    top: 0;
    left: 0;
}
.circle2inner, .circle3inner, .circle4inner, .circle5inner {
    width:100%;
    height: 100%;
}
/* Now the things which change per circle - Blue circles hidden for mobile and portrait tablet -> no extra styling required for other devices (only for red circle). */
.x2 {
	width: 180px;
}
.circle2 {
	background: rgb(186, 11, 26); /* RED. */
	box-shadow: 0 0 0 30px rgba(186, 11, 26, 0.7);
	padding: 40%; /* Size of the circle determined by padding. */
}
.circle2inner{
	margin-top: 27% !important;
}
.circle2inner p {
	font-size: 17px;
	line-height: normal !important;
	margin-top: 0;
}


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


/* CONTENT
====================================================================================================================== */
/* Fusion title margin same percentage as set in WP, overwriting the style set for below 800. Use Specificity. */
.fusion-title.title {
	margin-bottom: 1% !important;
}

/* Mobile first: Circle Icons a bit smaller. */
.circleIcon img {
	width: 120px;
}

/* CIRCLE IMAGES. */
.circleImage {
	margin-right: 10px;
	margin-bottom: 10px;
}

/* Rollover link icon replacement. */
.fusion-rollover-link:before {
	font-family: 'Font Awesome 5 Free' !important;
	content: '\f0c1' !important;
	font-weight: 600;
}

/* Rollover link title back to white. Use Specificity. */
#main .fusion-rollover .fusion-rollover-content .fusion-rollover-title a {
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Checklists. */
.fusion-checklist.fusion-checklist, ul.fusion-checklist.fusion-checklist {
	margin: 0px 0px 25px 0px;
}
/* Remove the margin bottom for lists when they are stacked on mobile -> Add again later when next to each other. */
.listNoMargBottom .fusion-checklist.fusion-checklist, .listNoMargBottom ul.fusion-checklist.fusion-checklist {
	margin: 0px 0px 0px 0px;
}
.listNoMargBottom {
	margin-bottom: 0 !important;
}

/* Quote tagline. */
.quoteTagline {
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Quote tagline no colourisation - just percentage softened. */
.quoteTaglineGrey {
	color: rgb(21, 73, 156); /* BLUE. */
}

/* Testimonial. */
.fusion-testimonials.clean .testimonial-thumbnail {
	display: none;
}
/* Mobile first: Indents and padding for testimonials. */
.testimonialsHome blockquote p {
	padding-top: 30px;
	padding-left: 5%;
	padding-right: 5%;
}

/* THE TEAM. */
/* Make the name bolder. */
.fusion-person .person-author .person-name {
	font-weight: 500;
}
/* The content contains the list. Less margin top. Use Specificity. */
.fusion-person .person-content.person-content {
	margin-top: 5px;
}
/* Now replace the lts with the correct bullet and adjust everything. */
.fusion-person .person-content ul {
	margin-left: -1em;
	list-style: none;
}
.fusion-person .person-content ul li {
  padding-left: 0; 
  text-indent: -1.6em;
}
.fusion-person .person-content ul li::before {
	font-family: 'Font Awesome 5 Free' !important;
	content: '\f192' !important;
	color: rgb(21, 73, 156); /* BLUE. */
	padding-right: 11px;
	font-width: 600;
}

/* FAQ. */
/* Change the border bottom from grey to blue. Use Specificity. */
.fusion-accordian .fusion-panel.fusion-panel {
	border-bottom: 1px solid rgb(21, 73, 156); /* BLUE. */
}
/* Increase padding top and bottom for title links in accordion. Use Specificity. */
.fusion-accordian .panel-title.panel-title a {
	padding-top: 25px;
	padding-bottom: 25px;
}
/* The Plus sign to be red. Use Specificity. */
.fusion-accordian .panel-title a .fa-fusion-box.fa-fusion-box {
	background-color: rgb(255, 255, 255); /* WHITE. */
	border: 1px solid rgb(186, 11, 26); /* RED. */
}
.fusion-accordian .panel-title a .fa-fusion-box.fa-fusion-box:before {
	color: rgb(186, 11, 26); /* RED. */
}
.fusion-accordian .panel-title a:hover .fa-fusion-box.fa-fusion-box {
	background-color: rgb(186, 11, 26) !important; /* RED. */
	border: 1px solid rgb(186, 11, 26) !important; /* RED. */
}
.fusion-accordian .panel-title a:hover .fa-fusion-box.fa-fusion-box:before {
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Remove top distance form heading to content once opened. */
.fusion-accordian .panel-body {
	padding-top: 0;
}
.fusion-accordian .panel-body ul {
	margin-top: 0;
}


/* CATEGORY ARCHIVE (Blog category) pages. */
.archive.category #main, .archive.tag #main {
	padding-top: 3.5%;
	padding-bottom: 3%
}



/* END CONTENT
====================================================================================================================== */


/* BLOG TEASER
====================================================================================================================== */
/* Teaser border. */
.fusion-post-wrapper {
	border-left-width: 0px !important;
	border-right-width: 0px !important;
	border-bottom-width: 1px !important;
	border-bottom-color: rgb(190, 190, 190) !important; /* LIGHT GREY. */
}

/* Teaser background color. */
.fusion-post-wrapper {
	background-color: rgb(238, 242, 248) !important; /* BLUE 10%. */
	text-align: center !important;
}

/* Replace read more brackets after. */
/* After update the font change to Awesome 5 was required as well as set font-weight. Equalise for the link itself afterwards. */
.fusion-blog-shortcode .fusion-read-more:after {
	font-family: 'Font Awesome 5 Free' !important;
	content: '\f101' !important;
	padding-left: 7px;
	font-weight: 600;
}
.fusion-blog-shortcode .fusion-read-more {
	padding-right: 5px;
}

.fusion-post-wrapper .fusion-meta-info .fusion-alignleft {
	float: none !important;
}


/* END BLOG TEASER
====================================================================================================================== */


/* BLOG ARCHIVE (overview)
====================================================================================================================== */
/* Blog page NOT selected in settings -> reading. */
/* Remove format box under date. */
.fusion-format-box {
	display: none;
}

/* Add border bottom under heading on blog overview page for each heading. */
#wrapper #main .fusion-post-content > h2.fusion-post-title {
	border-bottom: 1px solid rgb(21, 73, 156); /* BLUE. */
	padding-bottom: 7px;
}

/* Replace read more brackets after. */
.fusion-read-more:after {
	font-family: 'Font Awesome 5 Free' !important;
	content: '\f101' !important;
	padding-left: 7px;
	font-weight: 600;
}

/* Remove the comments on the overview/archive listing. */
.fusion-posts-container .fusion-single-line-meta .fusion-comments {
	display: none;
}

/* SIDEBAR. */
.sidebar h4.widget-title {
	display: none;
}
/* Distances for injected headings. CAREFUL - ID dependant. */
.fusion-content-widget-area .widget#text-7, .fusion-content-widget-area .widget#custom_html-5, .fusion-content-widget-area .widget#custom_html-4 {
	margin-bottom: 15px;
}
/* Remove border top and bottom for list items. */
#sidebar .fusion-widget-area .widget_categories li, #sidebar.fusion-content-widget-area .widget_nav_menu li {
	border-top-width: 0px;
	border-bottom-width: 0px;
}
/* Replace brackets before list items in sidebar. */
/* After update the font change to Awesome 5 was required as well as set font-weight. In this case, the icon left needs negative margin left to achieve gap and equalise for the surrounding link itself afterwards. */
.fusion-widget-area .widget .recentcomments:before, .fusion-widget-area .widget_archive li a:before, .fusion-widget-area .widget_categories li a:before, .fusion-widget-area .widget_links li a:before, .fusion-widget-area .widget_meta li a:before, .fusion-widget-area .widget_nav_menu li a:before, .fusion-widget-area .widget_pages li a:before, .fusion-widget-area .widget_recent_entries li a:before, .widget_layered_nav li a:before, .widget_product_categories li a:before, .woocommerce-tabs .tabs a:hover .arrow:after, .woocommerce-tabs .tabs li.active a .arrow:after {
	font-family: 'Font Awesome 5 Free' !important;
	content: '\f101' !important;
	font-weight: 600;
	margin-left: -16px;
}
.fusion-widget-area .widget_categories li {
	padding-left: 16px;
}
/* Change padding for list items in sidebar. */
.fusion-widget-area .widget_nav_menu li {
	padding: 10px 10px 5px 16px;
}

/* Format the inserted h4 as per design. */
.sidebar .widget h4 {
	border-bottom: 1px solid rgb(21, 73, 156); /* BLUE. */
	padding-bottom: 7px;
}
.sidebar.fusion-content-widget-area .widget#text-5 h4 {
	margin-bottom: 30px;
}

/* Tagcloud. */
.fusion-content-widget-area .tagcloud {
	padding-top: 10px;
}
/* Links inside tagcloud. */
#main .tagcloud a, #main .tagcloud a:visited {
	border-color: rgb(186, 11, 26); /* RED. */
	background-color: rgb(255, 255, 255); /* WHITE. */
	color: rgb(186, 11, 26); /* RED. */
	border-radius: 25px;
	text-decoration: none;
}
#main .tagcloud a:hover, #main .tagcloud a:active, #main .tagcloud a:focus {
	border-color: rgb(186, 11, 26) !important; /* RED. */
	background-color: rgb(186, 11, 26) !important; /* RED. */
	color: rgb(255, 255, 255) !important; /* WHITE. */
}

/* SEARCH. */
/* Distance top and bottom of page. */
.search #main {
	padding-top: 3.5%;
	padding-bottom: 3%;
}

/* Remove the blue outlines. */
.search-field input, .search-button input {
	outline: none;
}

/* No results on search. */
.search-no-results #content .post-content .title-sep-container {
	display: none;
}

.searchform .search-table .search-button input[type=submit] {
	background-color: rgb(186, 11, 26); /* RED. */
}
.searchform .search-table .search-button input[type=submit]:hover {
	background-color: rgb(199, 59, 71) !important; /* RED 80% - HOVER. */
}


/* PAGINATION. */
/* Remove margin tp. */
.pagination {
	margin-top: 0;
}


/* END BLOG ARCHIVE (overview)
====================================================================================================================== */


/* BLOG SINGLE
====================================================================================================================== */
/* Distance top and bottom of page. */
.single.single-post #main {
	padding-top: 3.5%;
	padding-bottom: 3%;
}

/* Single navigation with less margin bottom and as percentage. */
.single-navigation {
	margin-bottom: 4%;
}

/* Featured image on single blog post. Distance to heading above. */
.single.single-post .post-slideshow {
	margin-top: 30px;
}

/* Related Posts. More distance bottom. */
.single-post .related-posts {
	margin-bottom: 25px;
}

#wrapper #main .post > h1.fusion-post-title {
	line-height: 1.3em !important;
}



/* END BLOG SINGLE
====================================================================================================================== */


/* CONTACT
====================================================================================================================== */
/* Remove the blue outlines. */
input, textarea {
	outline: none;
}


/* END CONTACT
====================================================================================================================== */


/* FOOTER
====================================================================================================================== */
/* Social networks inside footer - Linkedin. */
a.fusion-linkedin {
	border: 1px solid rgb(186, 11, 26) !important; /* RED. */
}
a:hover.fusion-linkedin, a:active.fusion-linkedin, a:focus.fusion-linkedin {
	background-color: rgb(186, 11, 26) !important; /* RED. */
}
a:hover.fusion-icon-linkedin:before, a:active.fusion-icon-linkedin:before, a:focus.fusion-icon-linkedin:before {
	color: rgb(255, 255, 255); /* WHITE. */
}

/* All link settings inside footer set in theme options, apart from underline. */
.fusion-footer-widget-area a:hover, .fusion-footer-widget-area a:active, .fusion-footer-widget-area a:focus {
	text-decoration: underline;
}

/* Headings h4 inside footer to be blue. */
.fusion-footer-widget-area .widget-title {
	color: rgb(21, 73, 156) !important; /* BLUE. */
	border-bottom: 1px solid rgb(21, 73, 156); /* BLUE. */
	margin-bottom: 45px;
	padding-bottom: 7px;
}

/* Replace bracket before for blog posts in footer. */
/* After update the font change to Awesome 5 was required as well as set font-weight. For icon left need to set to absolute to achieve gap and equalise for the link itself afterwards. */
.fusion-footer-widget-area .widget .recentcomments:before, .fusion-footer-widget-area .widget_archive li a:before, .fusion-footer-widget-area .widget_categories li a:before, .fusion-footer-widget-area .widget_links li a:before, .fusion-footer-widget-area .widget_meta li a:before, .fusion-footer-widget-area .widget_nav_menu li a:before, .fusion-footer-widget-area .widget_pages li a:before, .fusion-footer-widget-area .widget_recent_entries li a:before {
	font-family: 'Font Awesome 5 Free' !important;
	content: '\f101' !important;
	font-weight: 600;
	position: absolute;
	left: -4px;
}
.fusion-footer-widget-area .widget .recentcomments, .fusion-footer-widget-area .widget_archive li a, .fusion-footer-widget-area .widget_categories li a, .fusion-footer-widget-area .widget_links li a, .fusion-footer-widget-area .widget_meta li a, .fusion-footer-widget-area .widget_nav_menu li a, .fusion-footer-widget-area .widget_pages li a, .fusion-footer-widget-area .widget_recent_entries li a {
	margin-left: 4px;
}
/* Remove border bottom between li links. Also ensure same leading as phone links etc in column on the left of it. */
.fusion-widget-area .widget_recent_entries li {
	border-bottom: 0px solid white;
	padding-bottom: 6px;
}
/* Then reduce padding for last entry to line up with LinkedIn logo. */
.fusion-widget-area .widget_recent_entries li:last-child {
	padding-bottom: 0px;
}

/* Copyright text to align left first. */
.fusion-body .fusion-footer-copyright-center .fusion-copyright-notice {
	text-align: left;
}


/* To the top link. */
#toTop {
	background-color: rgb(186, 11, 26); /* RED. */
	opacity: 0.7;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	bottom: 10px;
}
#toTop:hover, #toTop:active, #toTop:focus {
	opacity: 1;
}


/* END FOOTER
====================================================================================================================== */


/* CONTACT FORM
====================================================================================================================== */
input[type="text"], input[type="email"], textarea {
	background-color: rgb(255, 255, 255) !important; /* WHITE. */
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	background-color: #f1f1f1 !important; /* LIGHT GREY. */
}


/* CONTACT FORM
====================================================================================================================== */


/* SKIPLINKS 508 REQUIREMENTS - ACCESSIBILITY
====================================================================================================================== */
.skiplist {
	margin: 0; 
	padding: 0
} 
.skip {
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip {
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a {
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active {
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover {
	cursor: default
}





/* Media Queries
====================================================================================================================== */
/* All above is mobile first. */
/* 
320px = 20em
480px = 30em
640px = 40em
768px = 48em 
800px 	Main Breakpoint change set in theme
940px = 58.75em
1024px = 64em
1440px = 90em
1920px = 120em
*/

/* Main breakpoint for Columns at 800px/801px. */
/* Main breakpoint for Typography at 799px/800px.*/
/* Main breakpoint for navigation changed from 800 to 940 px in theme options. */
/* Set in Theme Options -> Responsive. */


/* Small screens: 321px - 480px (20.0625em - 30em) */
@media only screen and (min-width: 20.0625em) { 
	/* ------------ GENERAL. ------------ */

	/* ------------ END GENERAL. ------------ */
	
	/* ------------ FONTS/TYPOGRAPHY. ------------ */

	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */

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

	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ QUICK LINKS. ------------ */
	
	/* ------------ END QUICK LINKS. ------------ */
	
	/* ------------ BUTTONS AND PULSE BUTTONS. ------------ */

	/* ------------ END BUTTONS AND PULSE BUTTONS. ------------ */
	
	/* ------------ HOME. ------------ */

	/* ------------ END HOME. ------------ */
	
	/* ------------ CONTENT. ------------ */

	/* ------------ END CONTENT. ------------ */
	
	/* ------------ BLOG TEASER. ------------ */

	/* ------------ END BLOG TEASER. ------------ */
	
	/* ------------ BLOG ARCHIVE (overview). ------------ */

	/* ------------ END BLOG ARCHIVE (overview). ------------ */
	
	/* ------------ BLOG SINGLE. ------------ */

	/* ------------ END BLOG SINGLE. ------------ */
	
	/* ------------ CONTACT. ------------ */

	/* ------------ END CONTACT. ------------ */
	
	/* ------------ FOOTER. ------------ */

	/* ------------ END FOOTER. ------------ */
}


/* XSmall screens: 481px - 640px (30.0625em - 40em) */
@media only screen and (min-width: 30.0625em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Mobile first. Blog title on single blog page - apply font sizes close to what Avada re-sizes witrh similar heading. */
	.single.single-post .fusion-post-title, .search-page-search-form .search .fusion-post-title {
		font-size: 29px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */
	/* Mobile first INCLUDING FONT SIZE. Style injected tagline into header-1.php. Added after nav items etc and needs to be cleared. */
	.fusion-header .fusion-row .taglineESN {
		font-size: 16px;
		padding-top: 13px;
	}
	.fusion-header {
		padding-bottom: 6px !important;
	}
	/* ------------ END HEADER. ------------ */
}

/* Medium screens: 641px - 767px (40.063em - 47.9375em) */
@media only screen and (min-width: 40.063em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Mobile first. Blog title on single blog page - apply font sizes close to what Avada re-sizes witrh similar heading. */
	.single.single-post .fusion-post-title, .search-page-search-form .search .fusion-post-title {
		font-size: 34px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */
	/* Mobile first INCLUDING FONT SIZE. Style injected tagline into header-1.php. Added after nav items etc and needs to be cleared. */
	.fusion-header .fusion-row .taglineESN {
		font-size: 20px;
		padding-top: 13px;
	}
	.fusion-header {
		padding-bottom: 5px !important;
	}
	/* ------------ END HEADER. ------------ */
	
	/* ------------ HOME. ------------ */
	/* Now the things which change per circle - Blue circles hidden for mobile and portrait tablet -> no extra styling required for other devices (only for red circle. */
	.x2 {
		width: 300px;
	}
	.x3 {
		width: 380px;
	}
	.x4 {
		width: 290px;
	}
	.x5 {
		width: 370px;
	}
	.circle2 {
		background: rgb(186, 11, 26); /* RED. */
		box-shadow: 0 0 0 45px rgba(186, 11, 26, 0.7);
		padding: 45%; /* Size of the circle determined by padding. */
	}
	.circle3 {
		background: rgb(21, 73, 156); /* BLUE. */
		box-shadow: 0 0 0 15px rgba(21, 73, 156, 0.7);
		padding: 33%; /* Size of the circle determined by padding. */
	}
	.circle4 {
		background: rgb(21, 73, 156); /* BLUE. */
		box-shadow: 0 0 0 25px rgba(21, 73, 156, 0.7);
		padding: 32%; /* Size of the circle determined by padding. */
	}
	.circle5 {
		background: rgb(21, 73, 156); /* BLUE. */
		box-shadow: 0 0 0 18px rgba(21, 73, 156, 0.7);
		padding: 24%; /* Size of the circle determined by padding. */
	}
	.circle2inner{
		margin-top: 30% !important;
	}
	.circle3inner {
		margin-top: 36% !important;
	}
	.circle4inner {
		margin-top: 42% !important;
	}
	.circle5inner {
		margin-top: 37% !important;
	}
	.circle2inner p {
		font-size: 30px;
		line-height: normal !important;
		margin-top: 0;
	}
	.circle3inner p {
		font-size: 22px;
		line-height: normal !important;
		margin-top: 0;
	}
	.circle4inner p {
		font-size: 24px;
		line-height: normal !important;
		margin-top: 0;
	}
	.circle5inner p {
		font-size: 20px;
		line-height: normal !important;
		margin-top: 0;
	}
	/* ------------ END HOME. ------------ */
}

/* XMedium screens: 768px - 940px (48em - 58.75em) */
@media only screen and (min-width: 48em) { 

}

/* ------------------------------------------------------------------------ */
/* MAIN BREAKPOINT CHANGE THEME at 801px (50.0625em) */
/* Address 801px instead of 800px as I have used min-width and the theme is based on max-width (1px difference because of that). */
@media only screen and (min-width: 801px) {
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Quick Link Text. */
	.post-content p.qlText {
		font-size: 22px;
	}
	
	/* Footer title headings. Smaller to fit and later larger again. */
	.fusion-footer-widget-area .widget-title {
		font-size: 16px !important;
	}
	
	/* Text inside footer. larger on mobile, smaller for tablet and then larger again. */
	.fusion-footer-widget-area .textwidget p {
		font-size: 13px;
	}
	
	/* Mobile first. Blog title on single blog page - apply font sizes close to what Avada re-sizes witrh similar heading. */
	.single.single-post .fusion-post-title, .search-page-search-form .search .fusion-post-title {
		font-size: 29px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ CONTENT. ------------ */
	/* Mobile first: Circle Icons now full size. */
	.circleIcon img {
		width: 100%;
	}
	
	/* Checklists. */
	/* Add margin bottom again when lists sit next to each other. */
	.listNoMargBottom .fusion-checklist.fusion-checklist, .listNoMargBottom ul.fusion-checklist.fusion-checklist {
		margin-bottom: 0px 0px 25px 0px;
	}
	.listNoMargBottom {
		margin-bottom: 20px !important;
	}

	
	/* Single service tagline box (column) to highlight content -> indent on larger devices. */
	.singleServiceTaglineCont {
		padding-left: 7%;
		padding-right: 7%;
	}
	
	/* Mobile first: Indents and padding for testimonials. */
	.testimonialsHome blockquote p {
		padding-top: 30px;
		padding-left: 10%;
		padding-right: 10%;
	}
	/* ------------ END CONTENT. ------------ */
	
	/* ------------ FOOTER. ------------ */
	/* Copyright text to be centered after breakpoint and larger. */
	.fusion-body .fusion-footer-copyright-center .fusion-copyright-notice {
		text-align: center;
	}
	/* ------------ END FOOTER. ------------ */
}

/* Only for max 800 for separaror width. */
@media only screen and (max-width: 800px) {
	/* The separator line is 60% set on eahc usage/page. make it 100% bekow main breakpoint. */
	.fusion-separator.sep-single {
		max-width: 100% !important;
	}
}

/* Main breakpoint 800px/801px (seems to be 799/800px for headings etc). */
@media only screen and (max-width: 1024px) {
	/* Home page only: Ensure the slider is still 100% inside the viewport below breakpoint for mobile navigation. */
	.home .fusion-header-wrapper {
		position: absolute !important; 
		width:100% !important;
	}
	.fusion-header-wrapper .fusion-header {
		background-color: transparent !important;
	}
}


/* ------------------------------------------------------------------------ */

/* XXMedium screens: 941px - 1024px (58.8124em - 64em)*/
@media only screen and (min-width: 58.8125em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Footer title headings. Larger again. */
	.fusion-footer-widget-area .widget-title {
		font-size: 19px !important;
	}
	
	/* Text inside footer. larger on mobile, smaller for tablet and then larger again. */
	.fusion-footer-widget-area .textwidget p {
		font-size: 15px;
	}
	
	/* Mobile first. Blog title on single blog page - apply font sizes close to what Avada re-sizes witrh similar heading. */
	.single.single-post .fusion-post-title, .search-page-search-form .search .fusion-post-title {
		font-size: 31px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */
	/* Mobile first INCLUDING FONT SIZE. Style injected tagline into header-1.php. Added after nav items etc and needs to be cleared. */
	.fusion-header .fusion-row .taglineESN {
		font-size: 34px;
		padding-top: 10px;
	}
	.fusion-header {
		padding-bottom: 10px !important;
	}
	/* ------------ END HEADER. ------------ */
}

/* Large screens: 1025px - 1200px (64.0625em - 75em)*/
@media only screen and (min-width: 64.0625em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Footer title headings. Larger again. */
	.fusion-footer-widget-area .widget-title {
		font-size: 20px !important;
	}
	
	/* Mobile first. Blog title on single blog page - apply font sizes close to what Avada re-sizes witrh similar heading. */
	.single.single-post .fusion-post-title, .search-page-search-form .search .fusion-post-title {
		font-size: 34px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */
	/* Mobile first INCLUDING FONT SIZE. Style injected tagline into header-1.php. Added after nav items etc and needs to be cleared. */
	.fusion-header .fusion-row .taglineESN {
		font-size: 40px;
		padding-top: 10px;
	}
	.fusion-header {
		padding-bottom: 7px !important;
	}
	/* ------------ END HEADER. ------------ */
}

/* Large screens: 1201px - 1440px (75.0625em - 90em)*/
@media only screen and (min-width: 75.0625em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Mobile first. Blog title on single blog page - apply font sizes close to what Avada re-sizes witrh similar heading. */
	.single.single-post .fusion-post-title, .search-page-search-form .search .fusion-post-title {
		font-size: 36px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */
	/* Mobile first INCLUDING FONT SIZE. Style injected tagline into header-1.php. Added after nav items etc and needs to be cleared. */
	.fusion-header .fusion-row .taglineESN {
		font-size: 45px;
		padding-top: 12px;
	}
	.fusion-header {
		padding-bottom: 0px !important;
	}
	/* ------------ END HEADER. ------------ */
}

/* XLarge screens: 1441px - 1920px (90.0625em - 120em) */
@media only screen and (min-width: 90.0625em) { 

}

/* XXLarge screens: 1921px (120.0625em) */
@media only screen and (min-width: 120.0625em) { 

}

/* Retine media query. */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	/* Subtle background behind container for all quick liks on Services page. */
	.servicesQuickLinks {
		background-image: url(images/light_grey_@2X.jpg);
		background-repeat: repeat !important;
	}
}


/* 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) { 
  	/* HOME Circles. */
  	/* Apply exactly the same we used for mobile first. */
	/* Now the things which change per circle - Blue circles hidden for mobile and portrait tablet -> no extra styling required for other devices (only for red circle). */
	.x2 {
		width: 180px;
	}
	.circle2 {
		background: rgb(186, 11, 26); /* RED. */
		box-shadow: 0 0 0 30px rgba(186, 11, 26, 0.7);
		padding: 40%; /* Size of the circle determined by padding. */
	}
	.circle2inner{
		margin-top: 27% !important;
	}
	.circle2inner p {
		font-size: 17px;
		line-height: normal !important;
		margin-top: 0;
	}
}

/* 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) { 

}