/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#main-content h2, #main-content h3 { line-height: 1em;}
#main-content h2 ~ h2 { margin-top: 15px;}
#main-content h3 { font-size: 1.5rem; }
.page-template-page-asthma-health-center .container { padding-top: 0 !important; }

.hc_lists {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    display: inline-block;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label-default {
    background-color: #777;
}

.label_red {
    background-color: #fd7567;
}

.label_yellow {
    background-color: #fdf569;
    color: #424141;
}

.label_light_blue {
    background-color: #67dddd;
    color: #424141;
}

input[type="submit"].form-submit {
    margin: 0;
    padding: .715em;
    border: none;
    color: #4BABF8;
    font-size: 18px;
    line-height: normal !important;
    cursor: pointer;
    border: 1px solid #4BABF8;
    background-color: #fff;

}

input[type="submit"].form-submit:hover {
    background-color: #4BABF8;
    color: #fff;
}

a.form-submit {
    background-color: #4BABF8;
    margin: 0;
    padding: .715em;
    border: none;
    font-size: 14px;
    line-height: normal !important;

}

input[type="email"].form-control,
input[type="text"].form-control,
input[type="url"].form-control,
textarea.form-control {

    padding-top: 0.715em !important;
    padding-right: 0.715em !important;
    padding-bottom: 0.715em !important;
    padding-left: 0.715em !important;
    height: auto;
    min-height: 0;


    border-width: 0;
    color: #999;
    /* background-color: #eee; */
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 18px;
    line-height: 1em;
    -webkit-appearance: none;
}

.flex-container label {
	flex-grow: 4;
	display: block;
	flex: 'flex-basis';
}

/*** THIS CHANGES THE BUTTON STYLE ***/
.form-control input[type=submit] {
    padding: 10px 20px;
    border-radius: 2px;
    background: transparent;
    color: #2ea3f2;
    font-size: 20px;
    border: 2px solid #2ea3f2;
    float: right;
    transition: all 0.3s ease-in-out;
}

/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.form-control input[type=submit]:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: transparent;
    color: #2ea3f2;
}

.btn-donate-now {

    color: #ffffff !important;
    border-width: 0px !important;
    border-color: rgba(0, 0, 0, 0);
    border-radius: 0px;
    letter-spacing: 0px;
    font-size: 20px;
    font-family: 'Roboto Condensed', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700 !important;
    padding-right: 2em;
    padding-left: 0.7em;
    background-color: #e76a2d;
    box-shadow: 0px 4px 0px 0px #de6124;
    bordeR: 2px solid transparent;
    line-height: 1.7em !important;
    height: 1.7em;
    display: inline-block;
}


.health_centres_form .views-submit-button .btn {
    margin-top: 25px;
}

.centerinfo_guide {
    float: left;
}

/** Clinic Map **/
#gme-health_centre_map {
    width: 100%;
    height: 400px;
    margin-bottom: 25px;
}

.alert {
    margin-top: 1em;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}


header .et_pb_menu__search,
.home .et-search-field {
    border-bottom: 1px solid #ccc;
}

header .et_pb_menu__search .et_pb_menu__search-input,
.home .et-search-form input {
    font-size: 2em !important;
    color: #fff;
}

header #et_top_search #et_search_icon,
header .et_close_search_field {
    color: #fff;
}

.footer-subscribe .et_bloom_popup_input {
    width: 100% !important;
    padding-right: 0 !important;
}

.footer-subscribe .et_bloom_popup_input:first-of-type {
    margin-bottom: 10px;
}

/** Something is setting the top-padding of the home page slider section to 76px. We don't want that, because when you switch slides,
it creates this white background behind the top nav while the slides are changing. **/
#asthma-home-slider {
    padding-top: 0 !important;
}

/** Overriding custom Theme settings for their home page slider **/
.header-slider .et_pb_slide_content {
    width: 100% !important;
}

.header-slider .et_pb_slide_1 .et_pb_slide_content,
.header-slider .et_pb_slide_2 .et_pb_slide_content {
    margin: 0 !important;
}

#main-header.et-fixed-header,
.et-fixed-header#main-header {
    border-bottom: 1px solid #009ddc;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(69, 151, 197, 0.35) !important;
    -moz-box-shadow: 0px 2px 5px 0px rgba(69, 151, 197, 0.35) !important;
    box-shadow: 0px 2px 5px 0px rgba(69, 151, 197, 0.35) !important;

}

body.admin-bar.et_fixed_nav #main-header {
    top: 0 !important;
}

body.admin-bar.et_fixed_nav #main-header.et-fixed-header {
    top: 32px !important;
}


#main-header.et-fixed-header {
    background-color: #fff !important;
}

#main-header.et-fixed-header #top-menu a {
    color: rgba(0, 0, 0, 0.66) !important;
}

#main-header.et-fixed-header #top-menu a:hover {
    color: rgba(0, 0, 0, 0.66) !important;
}

#top-menu li li a:hover,
#menu-main-menu li li a:hover,
#main-header.et-fixed-header #top-menu li li a:hover,
.et_pb_fullwidth_menu_0_tb_header.et_pb_fullwidth_menu .et_mobile_menu a:hover {
    background-color: #009ddc;
    color: #fff !important;
}

.languages {
    top: 50px;
    z-index: 1;
    right: 0;
    width: 100%;
    max-width: 1220px;
    margin: auto;
    position: relative;
    text-align: right;
}


/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
/* .sticky + .content {
    padding-top: 100px;
  }  */


#asthma-header {
    background-color: rgba(0,0,0,0);
}
#asthma-header.default ul#menu-main-menu li a { color: #000 !important; }

/* The sticky class is added to the header with JS when it reaches its scroll position */
#asthma-header.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
    background-color: #333333 !important;
}

/** Custom Stickey menu **/
#asthma-header.sticky nav ul li a, 
#asthma-header.sticky ul.sub-menu a:hover {
    color: #fff !important;
}
#asthma-header.sticky ul.sub-menu a {
    color: #000000 !important;
}

/** Hide the breadcrumbs by default **/
#crumbs {
	display: none;
}


/** Space Page title from the fixed top nav **/
header h1 {
	margin-top: 100px !important;
}

#asthma-header ul li.menu_cta { padding: 0 !important; }

#asthma-header ul li.menu_cta a {
	background-color: #009ddc;	
	color: #fff !important;
	padding: 15px 15px 15px 15px !important;
	height: 35px;
	margin-top: 20px;
	border-radius: 3px;
}
#asthma-header .et_mobile_nav_menu ul li.menu_cta a { margin-top: 0; margin-bottom: 5px; height: auto; padding: 0;}

.home #asthma-header .et_pb_menu__search-button, .home header .et_pb_menu__search .et_pb_menu__search-input  { color: #000; }
#asthma-header.sticky .et_pb_menu__search-button, .home header #asthma-header.sticky .et_pb_menu__search .et_pb_menu__search-input { color: #fff; }

/** Hiding post meta on the search results page **/
.search.search-results .post-meta { display: none; }

.centre_listing { margin-bottom: 0; display: flex; }

/** Recent Post links shown on the sidebar **/
.et_pb_bg_layout_light .et_pb_widget li a { color: #009ddc !important; font-weight: bold;}

@media screen and (min-width: 981px) {

    /** Top nav search icon **/
    .et_pb_menu__search-button::after { padding-left: 10px; }

    /** Clinic Listing **/
    .centre_listing {
        border-bottom: 1px solid #eee;
        padding: 20px 0;
    }

    .hc_lists {
        width: 50%;
        border:none;
        padding: 0;
        display: inline-block;
    }

    header h1 {
        margin-top: 0 !important;
    }

    /** Show the breadcrumbs on larger displays **/
	#crumbs {
		display: block;
    }
    
    body.error404 #top-menu>li>a {
        color: #fff !important;
    }

    #top-menu .sub-menu,
    #menu-main-menu .sub-menu {
        min-width: 344px;
        padding: 15px 0 !important;
    }

    #top-menu a,
    #menu-main-menu a {
        transition: none;
    }

    #top-menu li li,
    #menu-main-menu li li {
        border-bottom: 1px solid #eee;
    }

    #top-menu li li:not(:first-of-type),
    #menu-main-menu li li:not(:first-of-type) {
        padding-top: 5px;
    }

    #top-menu li li:not(:last-of-type),
    #menu-main-menu li li:not(:last-of-type) {
        padding-bottom: 5px;
    }

    #top-menu li li:last-of-type,
    #menu-main-menu li li:last-of-type {
        border: none;
    }

    #top-menu li li:first-of-type,
    #menu-main-menu li li:first-of-type {
        padding-top: 0;
    }

    #top-menu li li a,
    #menu-main-menu li li a {
        width: 300px;
        /* Extra - Reduce padding on list items */
        padding: 4px 12px;
    }

    #top-menu li li a:hover,
    #menu-main-menu li li a:hover,
    #main-header.et-fixed-header #top-menu li li a:hover,
    .et_mobile_nav_menu a:hover {
        background-color: #009ddc;
        color: #fff !important;
    }

    #top-menu li.menu_cta a {
        padding-top: 10px !important;
        margin-top: 0;
        color: #fff !important;
    }

    #asthma-header.default ul#menu-main-menu li.menu_cta a {
        color: #fff !important;
    }

    #main-header.et-fixed-header #top-menu .menu_cta a {
        padding-bottom: 25px !important;
        color: #fff !important;
    }

    .flex-container {
		display: flex;
		align-items: center;
	}
	
	.flex-container label {
		flex-grow: 0;
		width: 100px;  /* Or whatever */
	}
	.flex-container input[type=text] {
		width: 250px;  /* Or whatever */
		margin-right: 10px;
	}
	.flex-container input[type=submit] {
		width: 100px;  /* Or whatever */
	}
}


/* 
.menu_cta { padding: 0 !important; }

.menu_cta a {
	background-color: #009ddc;	
	color: #fff !important;
	padding: 15px 15px 15px 15px !important;
	height: 35px;
	margin-top: 20px;
	border-radius: 3px;
} */

.wp-pagenavi {
clear: both;
  margin-bottom: 20px;
  float: right;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #009ddc !important;;
	padding: 5px 15px !important;;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
  color: #fff !important;
  background-color: #009ddc;
}

.wp-pagenavi span.current {
	font-weight: bold;
  background-color: #009ddc;
  border-color: #009ddc !important;
}

.wp-block-file:not(.wp-element-button) { 
    font-size: 1em;
    color: #009ddc !important;
}

body.page-resources .post-content a.wp-block-file__button { background-color: #009ddc; color: #fff; margin-left: 10px; padding: 2px 10px; border-radius: 25px; }
body.page-resources .entry-featured-image-url img { padding-bottom: 15px; }
body.page-resources .wp-block-file { display: block; margin: 15px 0;}

@media screen and (min-width: 981px) {
    body.page-resources .post-content { width: 75%; float: left; padding-bottom: 25px;}
    
}