/*
	--------------------------
	Global Styles
	--------------------------
*/

/*#region  Typography 
--------------------------  */
h1 {
    font-size: 1.75em;
    font-weight: 400;
    margin: 0 0 0.5em 0;
}

p {
    margin: 0 0 1em 0;
    line-height: 1.5em;
}

strong {
    font-weight: 600;
}

a {
    color: #000;
    text-decoration: none;
}

header a span {
    border-bottom: solid 1px transparent;
    -moz-transition: all linear .3s;
    -o-transition: all linear .3s;
    -webkit-transition: all linear .3s;
    transition: all linear .3s;
}
header a:hover span {
    border-bottom: solid 1px #83377f;
}
main a, footer a {
    border-bottom: solid 1px transparent;
    -moz-transition: all linear .3s;
    -o-transition: all linear .3s;
    -webkit-transition: all linear .3s;
    transition: all linear .3s;
}
    main a:hover, footer a:hover {
        border-bottom: solid 1px #000;
    }

img {
    max-width: 100%;
}

/*#endregion */

/*#region  Header 
--------------------------  */

header {
    text-align: left;
    position: relative;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 50em;
    margin: 0 auto;
}

    header div p {
        margin: 0 auto;
        padding: 1em 0;
        font-size: 0.75em;
        font-weight: 400;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        header div p a {
            color: #83377f;
        }

            header div p a:not(:last-child) {
                margin-right: 1em;
            }

                header div p a:not(:last-child):after {
                    content: "|";
                    margin-left: 1em;
                }

    header h1 {
        max-width: 42.85em;
        margin: 0 auto;
        margin-bottom: 0;
        padding: 1.142em 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

/*#region  Responsive 
--------------------------  */
@media screen and (max-width: 75em) {
    header div p {
        padding: 1em;
    }

    header h1 {
        padding: 1.142em;
    }
}

@media screen and (max-width: 37em) {
    header h1 {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 35em) {
    header div p {
        text-align: center;
    }
    header div p a {
        white-space: nowrap;
    }
    header div p a:not(:last-child) {
        margin-right: 0.15em;
    }
    header div p a:not(:last-child):after {
        margin-left: 0.5em;
    }
}
/*#endregion */

/*#endregion */

/*#region  Main 
--------------------------  */

main {
    padding: 0;
    width: 100%;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    main > div {
        max-width: 75em;
        min-height: calc(100vh - 5.5em);
        padding: 2em 0;
        margin: 0 auto;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    main section:first-child {
        margin-bottom: 2em;
    }

    main section h1 {
        font-weight: 500;
        font-size: 3em;
        line-height: 0.75em;
    }


        main section.contact {
            font-size: 0.75em;
            padding: 0;
        }

            main section.contact h2 {
                margin-bottom: 0.5em;
            }

/*#region  Responsive 
--------------------------  */
@media screen and (max-width: 35em) {
    main section div {
        width: 100%;
        padding: 1em;
    }
}

@media screen and (min-height: 28.5em) {
    main > div {
        position: relative;
    }
        main > div > div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
}

/*#endregion */

/*#endregion */

/*#region  Footer 
--------------------------  */

footer {
    width: 100%;
    text-align: center;
    min-width: 18.75em;
    padding: 0 2em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: opacity linear .2s;
    -o-transition: opacity linear .2s;
    -webkit-transition: opacity linear .2s;
    transition: opacity linear .2s;
}

    footer > div {
        max-width: 50em;
        margin: 0 auto;
        text-align: center;
    }

    footer div.copyright {
        padding-top: 1em;
    }

        footer div.copyright p {
            font-size: 0.75em;
            color: #83377f;
        }

/*#endregion */


/*#region  body 
--------------------------  */

html, body {
    height: 100%;
}

body.loaded {
    opacity: 1;
}

body > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*#endregion */