/*
Theme Name: Morpheus
Theme URI: https://melbournesleep.solutions/
Author: Gary Whittle
Author URI: https://form.ul.ae/
Description: Morpheus Theme for Melbourne Sleep Solutions
Version: 1.0
Text Domain: morpheus
*/

/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/

html
{
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body
{
    margin: 0;
    -webkit-font-smoothing: subpixel-antialiased;
}

img
{
    display: block;
    border: 0;
    width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea
{
    color: #404040;
    font-family: 'Lato','Helvetica', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    margin: 0;
    padding: 0;

    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: 400;
}

h1
{
    color: #0a7486;
    font-size: 1.5em;
    letter-spacing: 0.02em;
}

h2
{
    color: #2e90a8;
    font-size: 1.25em;
    letter-spacing: 0.02em;
}

h3
{
    color: #4699c3;
    font-size: 1.1em;
    letter-spacing: 0.02em;
}

/*h4*/
/*{*/
    /*color: #469ec3;*/
    /*font-size: 0.9em;*/
    /*letter-spacing: 0.02em;*/
    /*background-color: #e9f7fb;*/
    /*border: 4px solid #e9f7fb;*/
    /*border-top-width: 2px;*/
    /*border-bottom-width: 2px;*/
    /*border-left-width: 6px;*/
    /*border-right-width: 6px;*/
    /*border-radius: 3px;*/
    /*margin-left: -6px;*/
    /*margin-right: -6px;*/
/*}*/
h4
{
	color: #368aad;
	font-size: 1.05em;
	letter-spacing: 0.02em;
	background-color: #e9f7fb;
	border: 4px solid #e9f7fb;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 6px;
	border-right-width: 6px;
	border-radius: 3px;
	margin-left: -6px;
	margin-right: -6px;
	font-weight: 500;
	padding: 0.5em 0.25em;
}


h5
{
	font-size: 1.0em;
	font-weight: normal;
	color: #eefdff;
	line-height: 1.35em;
	letter-spacing: 0.02em;
	background: #3FB5CA;
	border: 0px solid #3FB5CA;
	padding: 16px 16px 16px 110px;
	margin: 0.5em 0 1.5em 0;
	border-radius: 6px;
	background-position-x: left;
	background-position-y: bottom;
	background-size: 91px 108px;
	background-repeat: no-repeat;
	background-image: url(../images/h5bg.png);
}

h5 strong
{
	color: white !important;
	font-weight: 600 !important;
}

h5.old
{
    font-size: 1.0em;
    font-weight: normal;
    color: #247a84;
    line-height: 1.35em;
    letter-spacing: 0.02em;
    background: #d7e9ec;
    border: 6px solid #d7e9ec;
    padding: 8px 12px 8px 12px;
    margin: 0.5em -20px 1.5em -20px;
    border-radius: 6px;
}

h5.older
{
    font-size: 1.0em;
    font-weight: normal;
    margin: 0;
    padding: 1em 0;
    color: #247a84;
    line-height: 1.35em;
    letter-spacing: 0.02em;
    margin-bottom: 0.75em;
}

h6
{
    font-size: 1.1em;
    font-weight: normal;
}

p
{
    margin: 0;
    padding: 1em 0;
}

a
{
    text-decoration: none;
}

a:hover,
a:active
{
    text-decoration: underline;
}

/* Makes it so a p followed by a h* adds a top-padding to the h* */
p + h1,
p + h2,
p + h3,
p + h4
{
    margin-top: 0.75em;
}

/* Makes it so a p followed a p only has padding on the bottom */
p + p
{
    padding: 0 0 1em 0;
}

/* Makes it so a p followed by a p ignores the first line break */
/* as it can make for massive line-breaks otherwise */
p + p > br:first-child
{
    display: none;
}

.debug-alert
{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10000;
    background: wheat;
    border: 4px solid wheat;
    padding: 0 4px;
}

@font-face
{
    font-family: "IconsOutline";
    font-weight: 400;
    font-display: auto;
    font-style: normal;
    src: url("../fonts/fa-regular-400.woff2") format("woff2");
}

@font-face
{
    font-family: "IconsSolid";
    font-weight: 900;
    font-display: auto;
    font-style: normal;
    src: url("../fonts/fa-solid-900.woff2") format("woff2");
}

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/

.mobile-hidden
{
    display: none !important;
}

.desktop-hidden
{
    display: block !important;
}

.site
{
    background: #fff;
    min-height: 100vh;
}

.main
{
    background: #fff;
}

.site main
{
    /*transition-timing-function: cubic-bezier(0.63, 0.2, 0, 0.99);*/
    transition: 0.5s;
    transition-timing-function: cubic-bezier(0.38, 0.08, 0, 1);
}

#desktop-view-indicator
{
    display: none;
}

/*--------------------------------------------------------------
General Layout
--------------------------------------------------------------*/

.space
{
    flex-grow: 1;
}

span.avoid-wrap
{
    display:inline-block;
}

/*--------------------------------------------------------------
MOBILE OR NO-GRID
--------------------------------------------------------------*/

@media screen and ( max-width: 1023px )
{
    main.home
    {
        position: relative;
        min-height: 210px;
    }
}

@supports not ( display: grid )
{
    main.home
    {
        position: relative;
        min-height: 210px;
    }
}


/*--------------------------------------------------------------
MAIN SIZE
--------------------------------------------------------------*/

@media screen and ( min-width: 1024px )
{
    @supports (display: grid)
    {
        .mobile-hidden
        {
            display: block !important;
        }

        .desktop-hidden
        {
            display: none !important;
        }

        #desktop-view-indicator
        {
            display: block;
        }

        .site
        {
            grid-template-rows:
                    minmax(1em, auto)
                    auto
                    1fr
                    minmax(1em, auto);
        }

        .primary-grid
        {
            display: grid;
            grid-template-columns: 1fr 1fr repeat(12, minmax(auto, 5em)) 1fr 1fr;
        }

        .primary-grid > *
        {
            grid-column: 3/15;
            min-height: 0;
        }

        /*--------------------------------------------------------------
        Grid-Column shortcuts: Whole
        --------------------------------------------------------------*/

        .gc-whole
        {
            grid-column: 1/16;
        }

        .gc-usable
        {
            grid-column: 3/15;
        }

        /*--------------------------------------------------------------
        Grid-Column shortcuts: Halves
        --------------------------------------------------------------*/

        .gc-left-half
        {
            grid-column: 3/9;
        }

        .gc-right-half
        {
            grid-column: 9/15;
        }

        /*--------------------------------------------------------------
        Grid-Column shortcuts: Thirds
        --------------------------------------------------------------*/

        .gc-left-third
        {
            grid-column: 3/7;
        }

        .gc-right-third
        {
            grid-column: 11/15;
        }

        .gc-middle-third
        {
            grid-column: 7/11;
        }

        .gc-left-two-thirds
        {
            grid-column: 3/11;
        }

        .gc-right-two-thirds
        {
            grid-column: 7/16;
        }

        /*--------------------------------------------------------------
        Grid-Column shortcuts: Quarters
        --------------------------------------------------------------*/

        .gc-first-quarter
        {
            grid-column: 3/6;
        }

        .gc-second-quarter
        {
            grid-column: 6/9;
        }

        .gc-third-quarter
        {
            grid-column: 9/12;
        }

        .gc-fourth-quarter
        {
            grid-column: 12/15;
        }

        .gc-left-three-quarters
        {
            grid-column: 3/12;
        }

        .gc-right-three-quarters
        {
            grid-column: 6/15;
        }

        /*--------------------------------------------------------------
        Grid-Row shortcuts
        --------------------------------------------------------------*/

        .gr-1
        {
            grid-row: 1/1;
        }

        .gr-2
        {
            grid-row: 2/2;
        }

        .gr-3
        {
            grid-row: 3/3;
        }

        .gr-4
        {
            grid-row: 4/4;
        }

        .gr-5
        {
            grid-row: 5/5;
        }

        .gr-first-2
        {
            grid-row: 1/2;
        }

        .gr-first-3
        {
            grid-row: 1/3;
        }

        .gr-first-4
        {
            grid-row: 1/4;
        }
    }
}

/*--------------------------------------------------------------
Wide-screen
--------------------------------------------------------------*/

@media screen and (min-width: 1216px)
{
    @supports (display: grid)
    {
        .primary-grid
        {
            display: grid;
            grid-template-columns: 1fr 1fr repeat(12, minmax(auto, 6em)) 1fr 1fr;
        }
    }
}