@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Teko:wght@500&display=swap');

@media only screen {
    body { background-color: #373737; color: #ccc; min-height: 100vh; padding-bottom: 2rem; }
    h1,h2,h3 { font-family: 'Teko', sans-serif; text-transform: uppercase; font-stretch: condensed; margin-top: 1rem; }
    h1 { font-size: 2rem; line-height: 2rem; }
    h2 { font-size: 1.8rem; line-height: 1.8rem; }
    h3 {font-size: 1.6rem; line-height: 1.6rem; }
    a { color: #27c214; }
    a:hover { color: #24591e; }
    button:not(.menu-icon,.close-button), .button { background-color: #27c214; border-radius: 3px; }
    button:not(.menu-icon,.close-button):hover, .button:hover { background-color: #24591e; }
    .button.disabled, .button[disabled] { opacity: 0.6; }
    .button.disabled, .button.disabled:focus, .button.disabled:hover, .button[disabled], .button[disabled]:focus, .button[disabled]:hover { background-color: #65b85a; }
    /* .button.round { line-height: inherit; } */
    div.buttons { text-align: center; margin-top: 1em; }
    fieldset { margin-top: 1em; }
    fieldset legend { font-weight: bold; }
    label { color: #ccc; }
    textarea { min-height: 6rem; }
    iframe { border: none; width: 100%; }

    ul.grid-x { margin-left: 0; }

    .navigation-container { background-color: #fff; border-bottom: 6px solid #000; box-shadow: 0 5px 10px rgba(0,0,0,0.3); }
    .title-bar { background-color: #fff; padding: 0; }
    .title-bar .menu-icon { background-color: #7b7b7b; border-radius: 50%; min-width: 30px; height: 30px; padding: 0; color: #fff; margin-left: 1rem; }
    .title-bar .menu-icon::after { display: none; }

    .joyride p { padding: 0 1rem; }
    .joyride p:last-of-type { margin-bottom: 0; }


    .content-container { background-color: #444; padding-top: 1.6rem; padding-bottom: 1.6rem; box-shadow: 0 0 20px rgba(0,0,0,0.2); }

    .home .panel { background-color: #fff; margin-top: 0; position: relative; /*box-shadow: 0 5px 10px rgba(0,0,0,0.3);*/ }
    .home .panel h1 { position: absolute; top: 0; z-index: 10; margin-left: 1rem; margin-top: 1rem; color: #333; }
    .home .panel img { width: 100%; }

    a.star.empty { color: #fff; text-shadow: 0 0 1px #999; }
    
    .no_top_margin { margin-top: 0; }
    .mhh-primary-wrapper { background-color: #e6e6e6; }

    .spacer { height: 1.6rem; width: 100%; clear: both; }
    .hidden { display: none; }
    .reveal { border-radius: 5px; }

    .cookie_monster_wrapper { position: fixed; top: 0; left: 0; right: 0; width: 90%; margin: 20% auto; background-color: rgba(255,255,255,0.9); color: #333; padding: 1rem; display: none; line-height: calc(1rem + .85em * 2); border: 1px solid #333; border-radius: 5px; box-shadow: 2px 5px 8px rgba(0,0,0,0.2); }
    .cookie_monster_wrapper button { margin-bottom: 0; }

    .category_search .strapline, .kc_search .strapline { font-weight: bold; text-align: center; color: #fff; margin-bottom: 0.6rem; }
    .category_search input[type="search"], .kc_search input[type="search"] { border-radius: 20px 0 0 20px; background-color: #000; color: #27c214; border: 1px solid #27c214; border-right: 0; padding-left: 20px; }
    .category_search input[type="search"]:not(.input-group-field), .kc_search input[type="search"]:not(.input-group-field) { border-radius: 20px; border-right: 1px solid #27c214; }
    .category_search input[type="search"]::placeholder, .kc_search input[type="search"]::placeholder { color: #65b85a; }
    .category_search .input-group .input-group-button .button, .kc_search .input-group .input-group-button .button { border-radius: 0 20px 20px 0; background-color: #000; color: #27c214; border: 1px solid #27c214; border-left: 0; }

    .reveal { background-color: #333; }

    .socials li { margin-right: 1rem; }

    .ui-widget.ui-widget-content { background-color: #333; color: #27c214; }
    .ui-state-active { background-color: #65b85a; color: #fff; }

    .dropzone { height: 80px; border: 3px dashed #aaa; border-radius: 10px; line-height: 80px; color: #aaa; text-align: center; }
    .dropzone.over { border-color: #27c214; }
    .upload_progress { height: 5px; background-color: #27c214; width: 0; margin-top: 1em; }
	#blackout { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.6); z-index: 1010; }
	#blackout .loading { margin: 20% auto 0 auto; width: 200px; z-index: 1020; }

    .article-abstract:not(:last-child) { border-bottom: 1px solid #777; padding-bottom: 1rem; }
    .article-abstract { margin-bottom: 1rem; }
    /* .article-abstract img { float: left; max-width: 40%; margin: 0 1rem 1rem 0; } */
    .latest-article { background-color: #e6e6e6; padding: 1em; color: #333; }
    .published { float: right; }

    .thumb_medium { max-width: 150px; }

    .tabs-title>a { text-transform: uppercase; font-size: 0.9rem; }

	.element_loading_parent { position: relative; }
	.element_loading_wrapper { background: rgba(255,255,255,0.7); position: absolute; top: 0; left: 0; height: 100%; width: 100%; max-width: 100%; }
	.element_loading_wrapper .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; }

    .bulletless { list-style: none; margin-left: 0; }
    .inline li { display: inline; }
    .thumbnail { border: none; box-shadow: none; }
    .videos_wrapper li { position: relative; }
    .videos_wrapper .play { position: absolute; top: calc(50% - 1rem); left: 0; margin: 0 auto; display: block; text-align: center; width: 100%; }
    .videos_wrapper .play::before { color: #fff; text-shadow: 0 0 1px rgba(0,0,0,1); font-size: 2rem; }

    .experts_list li { margin-bottom: 1em; }
    .experts_list h3 { font-size: 1.2rem; font-weight: bold; margin-bottom: 0; }

    #gmap { height: 300px; }

    footer { text-align: center; padding: 0.6rem 0; background-color: #222; bottom: 0; position: fixed; width: 100%; }
	
}
/* Small only */
@media screen and (max-width: 39.9375em) {
    .text-center { text-align: center; }
}

/* Medium and up */
@media screen and (min-width: 40em) {
    .home .panel h1 { font-size: 2.5rem; line-height: 2rem; display: block; width: 50%; left: 5%; }
    .top-bar, .top-bar ul { background-color: #fff; }
    .top-bar ul { font-family: 'Teko', sans-serif; text-transform: uppercase; font-size: 1.2rem; }
    .top-bar .mhh-logo { max-width: 250px; }
    .home .panel { max-width: 75rem; margin: 0 auto 0 auto; }
    .medium-text-right { text-align: right; }
    /* .columns_medium-2 { columns: 2; } */
    .cookie_monster_wrapper { width: 50%; }
    .knowledge_centre_article img { max-width: 50%; float: left; margin-right: 1em; margin-bottom: 1em; }
    /* .article-abstract img { max-width: 20%; } */
    #gmap { height: 350px; }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {
    .home .panel h1 { font-size: 3rem; line-height: 2.5rem; top: 8%; }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}