/*
Theme Name: NineZeroSeven Oxendon
Theme URI: http://www.webcreations907.com
Author: webcreations907
Author URI: http://themeforest.net/user/webcreations907
Template: ninezeroseven
Description: One Page Parallax Theme ~ If you need support please use the <a href="http://support.webcreations907.com/">Theme's Support Forum</a>
Version: 1.4
License: GNU General Public License
License URI: license.txt
Tags: black,white,orange,flexible-width,custom-background,custom-colors,featured-images,full-width-template,theme-options,translation-ready,left-sidebar,right-sidebar
*/

/* Commented out - the parent stylesheet is empty!
@import url("../ninezeroseven/style.css");
*/

/************************************************************************
* Custom CSS code below
*************************************************************************/

/* Miscellaneous styles */

/* After following a link to a URL with a hashtag, position the target element
 * (the one with the anchor) further down the screen so it's not hidden by the
 * sticky header.
 * See https://css-tricks.com/hash-tag-links-padding/
 */
 /* After upgrading the 907 theme to version 5.1.3 it appears that this is now
  * done by the parent theme. However if these styles are removed it seems that
  * it doesn't move the page down enough, so these styles are retained with the
  * offset changed from 145px to 15px. This seems about right by trial and
  * error.
  */
:target::before {
    content: "";
    display: block;
    height: 15px;
    margin-top: -15px;
    pointer-events: none;
    visibility: hidden;
}

/* Contact Form 7 plugin */
.wpcf7 label
{
    color: black;
}

div.wpcf7-response-output {
    text-align: center;
}

div.wpcf7-mail-sent-ok {
    border: 2px solid #84bd9c;
}

.transparent-forms input[type="tel"] {
    border:1px solid rgba(255,255,255,0.19);
    background-color: rgba(0,0,0,0.1);
}

.transparent-forms:after {
	content: "";
	display: table;
	clear: both;
}

/* Custom list bullets for Jasmine Healthcare */
ul.jasminebullet1 li {
list-style-image:url('images/BulletPoint1-16.png');
padding-left:5px;
}

ul.jasminebullet2 li {
list-style-image:url('images/BulletPoint2-16.png');
padding-left:5px;
}

li { 
vertical-align:middle;
}

/* Page headings */
.page-content h2 {
    text-align: center;
}

/* custom "underline" below page headings
 * Apply class wbc-hr to a separator block in the block editor.
 */
.wbc-hr {
    background-color: #808080;
    color: #808080;
    height: 5px;
    width: 85px;
}

.main-content-area {
    padding: 20px 0;
}

/* Tables */
table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid #404040;
    padding: 0.1667em;
    text-align: left;
}

th {
    color: #84bd9c;
}

/* Bottom Band (Copyright Bar and Footer Menu) */
.bottom-band {
    font-size: 14px;
}

.footer-menu ul,
.copy-info {
    padding: 0 14px;
    text-align: center;
}

.footer-menu li:last-child {
    padding-right: 8px;
}

/* Style the copyright bar links to match the footer menu
 * The links in the copyright bar should be enclosed in their own div with
 * class="copy-links"
 */
.copy-info {
    margin-top: 0.5em;
}

.copy-info .copy-links {
    margin-bottom: 0.5em;
}

.copy-info .copy-links a {
    border-right: 1px solid #666;
    display: inline-block;
    padding: 0 8px 0 5px;
}

.copy-info .copy-links a:first-child {
    padding-left: 0;
}

.copy-info .copy-links a:last-child {
    border-right: none;
    padding-right: 0;
}

.footer-menu li {
    border-color: #666;
}

/* Brochure contact forms and job application form */
.appl-form,
.brochure-contact,
.brochure-post,
.callback {
    margin: 0 auto;
    max-width: 572px;
    width: 100%;
}

.appl-form {
    max-width: 768px;
}

/* Open Street Map
 * To add the class to the map, add
 *   setup_map_name="osm-jhc"
 * to the osm_map_v3 shortcode.
 */
.osm-jhc {
    margin-left: auto;
    margin-right: auto;
}

/* Reusable Contact section */
.reusable-contact{
    padding-bottom: 30px;
}

.reusable-contact .reusable-contact-col1,
.reusable-contact .reusable-contact-col2 {
    overflow-wrap: break-word;
}

@media only screen and (min-width: 767px) {
    .reusable-contact .reusable-contact-col1,
    .reusable-contact .reusable-contact-col2 {
        float: left;
    }

    .reusable-contact .reusable-contact-col1 {
        max-width: 44.26%;
        overflow-x: hidden;
        padding-right: 20px;
        width: 416px;
    }

    .reusable-contact .reusable-contact-col2 {
     /* max-width: 60%;
        width: 524px; */
        width: 55.74%;
    }
}

@media only screen and (min-width: 1200px) {
    .reusable-contact .reusable-contact-col2 {
        width: 56%;
    }
}

/* Custom Header styles
 * The way the menu is styled by the 907 theme seems to assume that the desktop
 * version of the top level menu will never wrap, but will be replaced by the
 * mobile menu when the screen is narrow enough that it would wrap. These styles
 * allow the menu to wrap onto a second line.
 *
 * NOTE: Some of the height sizes below are calculated based on the values of
 * H and L, where H = the height of the logo (in pixels) and L is the menu
 * line-height, which is set in the WordPress Admin in
 * '907 Theme'/'Theme Options'/'Main Header'/'Menu Bar Height'
 */
.menu-bar-wrapper .site-logo-title.has-logo {
    height: 125px;              /* must equal H (height of the logo image) */
}

.header-bar {
    background-color: #fff;
    min-height: 125px;          /* = H */
}

.menu-bar-wrapper .header-inner {
    min-height: 125px;          /* = H */
}

@media only screen and (max-width: 767px) {
    .menu-icon {
        padding-top: 44px;      /* (H - L) / 2 */
        padding-bottom: 45px;   /* (H - L) / 2 */
        top: 18px;              /* L / 2 */
    }
}

@media only screen and (min-width: 768px) {
    .primary-menu {
        /* margin-left must be at least the width of the logo image.
         * Add a little to balance the space between the logo and the menu
         * with the space between menu items.
         */
        margin-left: 230px;
        padding-top: 34px;      /* (H - L) / 2 */
    }

    .wpcf7 .col-sm-6,
    .wpcf7 .col-sm-12 {
        padding: 0 0 0 30px;
    }
}

@media only screen and (min-width: 1000px) {
	.primary-menu .wbc_menu ul.sub-menu li a {
	    text-align: left !important;
	}

	.primary-menu .wbc_menu ul.sub-menu {
            left: 0px !important;
	}
}

@media only screen and (max-width: 1000px) {
	.mobile-menu ul.sub-menu li a{
		padding-left:40px !important;
	}
	
	ul#scb-socialicons {
		float: right;
		padding-top: 5px !important;
		padding-left: 10px !important;
		padding-right: 5px !important;
	}
}

/* Slider Revolution: hide navigation buttons and arrows on narrow screens */
@media only screen and (max-width: 703px) {
    .hesperiden.tparrows,
    .gyges.tparrows,
    .hades.tparrows,
    .ares.tparrows,
    .hebe.tparrows,
    .hermes.tparrows,
    .custom.tparrows,
    .hephaistos.tparrows,
    .persephone.tparrows,
    .erinyen.tparrows,
    .tparrows,
    .tp-bullets {
        display: none;
    }
}

/* Styles for a block with two unequal columns.
 * This modifes a standard WordPress block editor 'columns' block (which must
 * contain just 2 columns) to contain two flex items of different widths which,
 * on narrow screens, wrap so one goes down below the other.
 * To use, simply insert a Columns block with 2 columns and add 'columns-25-75'
 * as an Additional CSS Class (Under 'Advanced' in the settings on the right).
 */
.columns-25-75 {
	flex-wrap: wrap;
}
.columns-25-75 > .wp-block-column {
	flex-basis: 75%;
	margin-left: 0;
	margin-right: 0;
	min-width: 320px;
	flex: 3;
}
.columns-25-75 > div:first-child
{
	margin-left: 0;
	margin-right: 2%;
	min-width: 150px;
	flex: 1;
}

/* Speed Contact Bar plugin */

/* Rule to truncate the email address if it overflows at certain widths,
 * rather than having the browser show a horizontal scroll bar.
 */
#scb-wrapper {
    overflow-x: hidden;
}

/* force the Speed Contact Bar to clear the content below it */
#scb-wrapper:after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (max-width: 480px) {
        /* hide the email address on narrow screens */
        .scb-email {
            display: none !important;
        }
}

@media screen and (min-width: 1201px) {
        /* constrain the width of the Speed Contact Bar on wide screens */
	#scb-wrapper {
		width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}

        /* consolidate space between items into left margin only */
        #scb-wrapper ul > li {
            margin: 0 0 0 1em;
        }
}

/* Easy Testimonials plugin */
.easy-t-cycle-pager span {
    color: #a0a0a0;
}

.easy-t-cycle-pager span.cycle-pager-active,
.style-light_style .easy-t-cycle-pager span.cycle-pager-active,
.style-dark_style .easy-t-cycle-pager span.cycle-pager-active,
.style-clean_style .easy-t-cycle-pager span.cycle-pager-active {
    color: #84bd9c;
}

/* Back to Top button */
#back-to-top {
	width: 40px;
	height: 40px;
        font-size: 1.5em;
	background: rgba(132,189,156,0.5);
	display: block;
	text-align: center;
	line-height: 40px;
	color: #fff;
	border-radius: 100%;
	position: fixed;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transition: all ease 0.35s;
	-webkit-transition: all ease 0.35s;
	-moz-transition: all ease 0.35s;
}
#back-to-top.show {
	opacity: 1;
	filter: alpha(opacity=100);
	visibility: visible;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	animation-name: control-pulse;
	-webkit-animation-name: control-pulse;
	-moz-animation-name: control-pulse;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
}
#back-to-top:hover {
	background: rgba(80, 135, 156, 0.85);
}
#back-to-top .fa {
        position: relative;
        bottom: 3px;
        vertical-align: baseline;
}