body,html {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Georgia,'Times New Roman',Times,serif
}

.container {
    max-width: 1024px;
    box-sizing: border-box;
    margin: 50px auto
}

.container>.side {
    height: calc(100vh - 50px);
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    align-items: center
}

.container>.side {
    margin: 0 auto;
    border-bottom: 5px solid #db8e71;
    border-right: none
}

.container>.main {
    padding: 1rem 3rem;
    line-height: 1.5;
    color: #333
}

@media screen and (min-width: 1024px) {
    .container>.side {
        height:unset;
        width: 216px;
        box-sizing: content-box;
        float: left;
        margin: 0;
        border-right: 5px solid #db8e71;
        border-bottom: none
    }

    .container>.main {
        width: 784px;
        box-sizing: content-box;
        float: right;
        padding: 0
    }

    .container::after {
        display: block;
        clear: both;
        content: ''
    }
}

@media not print {
    .show-on-print {
        display: none!important
    }
}

@media print {
    body,html {
        font-size: 12px
    }

    .hide-on-print {
        display: none!important
    }

    .container {
        max-width: unset;
        margin: 0
    }

    .container>.side {
        height: unset;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        border-bottom: 2px dotted #ccc;
        padding: 0 2rem 1rem
    }

    .container>.side>:first-child {
        padding-left: 5rem
    }

    .container>.side>:last-child {
        padding-right: 5rem
    }

    .container>.main {
        padding: 1rem 2rem;
        line-height: 1.4
    }
}

h1 {
    font-size: 1.85rem
}

h2 {
    font-size: 1.6rem
}

h3 {
    font-size: 1.35rem
}

h4 {
    font-size: 1.1rem
}

h5 {
    font-size: 1rem
}

h6 {
    font-size: .875rem
}

h1,h2,h3,h4,h5,h6,p,ul {
    margin: .8em 0
}

h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,p:first-child,ul:first-child,ul>li:first-child {
    margin-top: 0;
    padding-top: 0
}

h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p:last-child,ul:last-child,ul>li:last-child {
    margin-bottom: 0;
    padding-bottom: 0
}

.main>h2 {
    border-bottom: #ddd solid 2px;
    margin-bottom: 0
}

.main>dl {
    margin-top: .75em;
    margin-bottom: 6px
}

a {
    color: inherit;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.contacts {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 1.2rem 0;
    font-size: .875rem
}

.contacts>* {
    padding: 4px 0
}

.avatar {
    padding: .375rem;
    height: 6rem;
    width: 6rem;
    border-radius: 50%
}

.name {
    padding: 0;
    margin: 0
}

.name-alt {
    padding: 0;
    margin: 0;
    font-size: 1.2rem
}

ul {
    margin-left: .5em;
    padding-left: 1em
}

li {
    margin: .125em 0
}

dl {
    padding: 0 1rem
}

dl>dt {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.25em;
    font-weight: 700
}

dt>small {
    font-weight: 400
}

dl>dd {
    margin-left: 1.25em
}

dd+dd {
    margin-top: .3em
}

dt+dd {
    margin-top: .2em;
    margin-left: 0;
    color: #777
}

dd+dt {
    margin-top: 1em
}

dt+dd::after {
    display: block;
    content: '';
    clear: both
}

dt>.pull-right {
    line-height: 1.875rem
}

dd>.pull-right {
    line-height: 1.5rem
}

.pull-right {
    float: right;
    vertical-align: bottom
}

.pull-right::after {
    display: inline-block;
    content: '';
    vertical-align: bottom;
    height: 100%
}

.fab,.fas {
    color: #333;
    margin-right: .15em
}

.more-link {
    display: flex;
    justify-content: space-between;
    font-size: .75rem
}

@media print {
    h1,h2,h3,h4,h5,h6 {
        margin: .3em 0
    }

    p {
        margin: .375em 0
    }

    li {
        margin: .1em 0
    }

    .contacts {
        margin: 0;
        font-size: 1rem
    }

    .contacts>* {
        padding-top: 0
    }

    .avatar,.more-link {
        display: none!important
    }
}
