body {
    font-size: 21px;
}

body .wrapper {
    width: 90%;
}
#attendance .v-flex{
    display: block;
}

#attendance .toggle input + label {
    flex: 0 1 50%;
}

#header nav{
    background: #000;
    width: 100%;
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

#header #logo{
    float: none;
    padding: 0;
    margin: 2rem auto;
}

#header #logo a{
    display: inline-block;
}

#header #logo svg, #header #logo .svg{
    /*width: 60%;
    height: calc(60% * 0.3448);*/
    padding: 0;
}

#menu-trigger{
    display: block;
    position: absolute;
    top: 2rem;
    left: 2rem;
    cursor: pointer;
    z-index: 2;
    -webkit-touch-callout: none;
    color: #fff;
    font-size: 3rem;
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#menu-trigger i.rotate{
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -moz-transform: translate(1rem) rotate(90deg);
    -webkit-transform: translate(1rem) rotate(90deg);
    transform: translate(1rem) rotate(90deg);
    -webkit-transform-origin: 50% 25%;
    transform-origin: 30% 20%;
}

#mobile-menu{
    left: -100%;
    position: absolute;
    width: 100%;
    /*margin: -100px 0 0 -50px;*/
    padding: 50px;

    background: #000;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    /*transform: translate(-100%, 0);*/
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

#mobile-menu li{
    width: 100%;
}

#mobile-menu li a{
    width: 100%;
    font-size: 1.75rem;
}

#mobile-menu.closed{
    left: 100%;
}

#mobile-menu.open{
    left: 0;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
    transform: none;
}



.container {
    padding: 10rem 0 4rem;
}

#home #head{
    height: auto;
    padding: 3rem 0;
}

#home #head h1 {
    font-size: 4rem;
}

#home #steps .step{
    border-width: .5rem;
}

@media all and (orientation: portrait) {
    #event-list .info h1 {
        margin: 4rem 0 1.5rem;
    }

    #home #demo, #home #process{
        width: 100%;
        float: none;
        padding: 2rem;
    }

    #home #demo h2, #home #process h2 {
        left: 2rem;
    }

    #home #steps{
        display: block;
    }

    #home #steps .step {
        width: 100%;
    }

    #workflow #steps h2 {
        font-size: 3rem;
    }

    #workflow #steps #scan {
        background: url(../images/how/01.png) right 3rem center no-repeat;
        background-size: 25%;
    }

    #workflow #steps #design {
        background: url(../images/how/02.png) left 3rem center no-repeat;
        background-size: 25%;
    }

    #workflow #steps #print {
        background: url(../images/how/03.png) right 3rem center no-repeat;
        background-size: 25%;
    }

    #workflow #steps .row {
        padding:  0;
    }

    #workflow #steps hr {
        margin: 3rem 0 2.5rem;
    }

    #workflow #demo, #apply {
        height: auto;
    }

    #responsability .v-flex{
        display: block;
    }

    #apply .row.v-flex{
        display: block;
    }

    #demo-sign .flexbox{
        display: block;
    }

    #demo-sign #contact-form{
        margin: 3rem 0 6rem;
    }
    
    .row .col.zero{
        display: none;
    }
}


@media all and (orientation: landscape) {
    #attendance h1{
        font-size: 4rem;
    }

    #about #team figure.m3 {
        width: 50%;
    }

    #action .col.m4, #action .col.m6{
        width: 100%;
        margin: 0;
    }
}

#workflow {
    overflow: hidden;
}

#workflow h1,  #beta h1{
    font-size: 3rem;
}

#demo .row.v-flex {
    display: block;
}


#footer #highlight {
    margin: 2rem 0 0;
}

#about, #beta {
    background-position: center top 10rem;
}

#about #head, #beta #head{
    height: auto;
}

#about #why {
    background: #04243B;
}

#responsability h3 {
    margin: 3rem 0 2rem;
}

#responsability img:nth-of-type(1) {
    padding: 5rem 2rem 2rem;
}

#beta #advantages ul{
    max-width: 100%;
}

#beta #advantages {
    padding: 3rem 2rem;
}

#beta #head h1{
    max-width: 40%;
}

#beta h1 {
    max-width: 100%;
}

#beta #apply{
    height: auto;
    padding: 2rem;
}

#contact #head{
    height: 30rem;
}

#action .row.v-flex{
    display: block;
}

#demo-sign h1{
    max-width: 100%;
}



/* PATIENTS */
#patients #head {
    height: auto;
    padding: 4rem 0 0;
}

#patients #why .v-flex{
    display: block;
}

#patients #why .call-to-action {
    margin-top: 4rem;
}

#apply {
    padding: 2rem 8rem;
}

#contact-buttons > div{
    width: 50%;
    float: left;
}

#patients-flag p{
    font-size: 1.25rem;
    font-weight: 700;
}

#patients h1.small{
    font-size: 2.5rem;
    line-height: 2rem;
}