/* HTML 5 reset by http://html5reset.org/ */
a,hr{padding:0}a,button,input,select,textarea{margin:0}article,aside,details,figure,footer,header,hr,main,nav,section,summary{display:block}abbr,address,article,aside,audio,b,blockquote,body,body div,caption,cite,code,dd,del,details,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:0 0}input[type=checkbox],th{vertical-align:bottom}html{box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}embed,img,object{max-width:100%}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{font-size:100%;vertical-align:baseline;background:0 0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}th{font-weight:700}td{font-weight:400;vertical-align:top}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type=radio]{vertical-align:text-bottom}.ie7 input[type=checkbox]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}input,select,textarea{font:99% sans-serif}table{border-collapse:separate;border-spacing:0;font:100%}small{font-size:85%}strong{font-weight:700}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=file],input[type=submit],label{cursor:pointer}button,input[type=button]{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:after{content:" ";display:block;clear:both}

* {
    margin: 0;
    padding: 0;

    font-family: source-sans-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    background: #fff;
}

/*
 *  HEADER
 */
header div.gradient {
    height: 88px;

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    opacity: 0;
    z-index: 1000;

    background: #fff;
    -webkit-transition: height .5s ease, opacity .5s ease;
    -moz-transition: height .5s ease, opacity .5s ease;
    -o-transition: height .5s ease, opacity .5s ease;
    transition: height .5s ease, opacity .5s ease;
}

header.scroll div.gradient {
    opacity: .7;
    height: 60px;
}

/* Logo */
header h1 {
    width: 80px;
    height: 40px;

    position: fixed;
    top: 24px;
    left: 1.5em;
    z-index: 1002;
    -webkit-transition: top .5s ease;
    -moz-transition: top .5s ease;
    -o-transition: top .5s ease;
    transition: top .5s ease;
}

header.scroll h1 {
    top: 10px;
}

header h1 a {
    width: 80px;
    height: 40px;

    display: block;

    background: url("../image/logo/myfit-logo-simple-grey.png") no-repeat;
    -webkit-background-size: 80px 40px;
    background-size: 80px 40px;
}

header h1 a span {
    display: none;
}


/* NAV */
header nav button {
    padding: 24px 1.5em 0 0;
    position: fixed;
    top: 9px;
    right: 0;
    z-index: 1002;
}

header.scroll nav button {
    padding-top: 10px;
}

header nav .hamburger {
    display: inline-block;
    cursor: pointer;
    transition-property: padding, opacity, filter;
    transition-duration: .5s, 0.3s;
    transition-timing-function: ease, linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

header nav .hamburger:hover {
    opacity: 0.7;
}
header nav .hamburger.is-active:hover {
    opacity: 1;
}

header nav .hamburger.is-active .hamburger-inner,
header nav .hamburger.is-active .hamburger-inner::before,
header nav .hamburger.is-active .hamburger-inner::after {
    background-color: #292929;
}

header nav .hamburger-box {
    width: 30px;
    height: 22px;
    display: inline-block;
    position: relative;
}

header nav .hamburger-inner {
    display: block;
    top: 50%;
}

header nav .hamburger-inner,
header nav .hamburger-inner::before,
header nav .hamburger-inner::after {
    width: 30px;
    height: 1px;
    background-color: #292929;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

header nav .hamburger-inner::before,
header nav .hamburger-inner::after {
    content: "";
    display: block;
}

header nav .hamburger-inner::before {
    top: -10px;
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

header nav .hamburger-inner::after {
    bottom: -10px;
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

header nav .hamburger.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

header nav .hamburger.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

header nav .hamburger.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


header nav ul {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    display: none;

    background: rgba(255,255,255,.9);
}

header nav ul li {
    position: relative;
    z-index: 1002;
}

header nav ul li:first-child {
    padding-top: 80px;
}

header nav ul li.logo {
    display: none;
}

header nav ul li a {
    padding: .5em 1.5em;
    display: block;

    text-align: right;
    text-decoration: none;

    font-weight: 400;
    font-style: italic;
    font-size: 120%;
    text-transform: uppercase;
    color: #111;
}

header nav ul li a:hover {
    background: rgba(255,255,255,.4);
}



/*
 *  CONTACT
 */
#contact {
    padding: 1.5em 1em;

    background: #fff;
}

#contact h1 {
    width: 58px;
    height: 25px;

    margin: 0 auto;

    background: url("../image/logo/myfit-logo-simple-footer-grey.png") no-repeat;
    background-size: 58px 25px;
}

#contact h1 span {
    display: none;
}

#contact p {
    font-size: 80%;
    color: #111;
    text-align: center;
}

#contact p.phone {
    margin: 1em 0 .5em;
}



#contact p.company,
#contact p.ids {
    margin-top: 1em;
}

#contact p a {
    color: #111;
    font-weight: 400;
    text-decoration: none;
}

#contact p a:hover {
    text-decoration: underline;
}

#contact div.map {
    min-height: 350px;

    margin-top: 1em;

    background: rgba(0,0,0,.2);
}



@media only screen and (-webkit-min-device-pixel-ratio: 1.1),
only screen and (min-device-pixel-ratio: 1.1) {
    header h1 a { background-image: url("../image/logo/myfit-logo-simple-grey@2x.png"); }

    #contact h1 { background-image: url("../image/logo/myfit-logo-simple-footer-grey@2x.png"); }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.1),
only screen and (min-device-pixel-ratio: 2.1) {
    header h1 a { background-image: url("../image/logo/myfit-logo-simple-grey@3x.png"); }

    #contact h1 { background-image: url("../image/logo/myfit-logo-simple-footer-grey@3x.png"); }
}

@media only screen and (min-width: 37em) {
    header h1 {
        display: none;
    }

    header nav .hamburger {
        display: none;
    }

    header nav ul {
        width: 335px;
        height: 40px;

        margin-left: -167px;
        top: 10px;
        right: auto;
        bottom: auto;
        left: 50%;
        display: block;

        background: none;
    }



    header nav ul li {
        height: 40px;

        float: left;
    }

    header nav ul li:first-child {
        padding-top: 0;
    }

    header nav ul li a {
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 1em;

        text-align: center;
        font-size: 100%;
        background: none;
    }

    header nav ul li.classes a { width: 110px; }
    header nav ul li.contact a { width: 115px; }

    header nav ul li.logo {
        display: block;
    }

    header nav ul li.logo a,
    header nav ul li.logo a:hover {
        width: 80px;
        height: 40px;

        margin: 0 15px;
        display: block;

        background: url("../image/logo/myfit-logo-simple-grey.png") no-repeat;
        -webkit-background-size: 80px 40px;
        background-size: 80px 40px;
    }

    header nav ul li.logo a span {
        display: none;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 1.1),
    only screen and (min-device-pixel-ratio: 1.1) {
        header nav ul li.logo a,
        header nav ul li.logo a:hover {
            background-image: url("../image/logo/myfit-logo-simple-grey@2x.png");
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2.1),
    only screen and (min-device-pixel-ratio: 2.1) {
        header nav ul li.logo a,
        header nav ul li.logo a:hover {
            background-image: url("../image/logo/myfit-logo-simple-grey@3x.png");
        }
    }
}

@media only screen and (min-width: 44em) {
    #contact:after {
        content: " ";
        display: block;
        clear:both;
    }

    #contact .wrap {
        max-width: 900px;
        margin: 0 auto;
    }

    #contact div.contact {
        width: 250px;

        margin: 1.5em 0 0 1.5em;
        padding: 1em;
        position: absolute;
        z-index: 2;

        background: rgba(255,255,255,.9);
    }

    #contact div.map {
        width: 100%;

        margin-top: 0;
        position: relative;
        float: left;
        z-index: 1;
    }
}