* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    font-family: 'Readex Pro', sans-serif;
    background: #E5E5E5;
    margin: 0;
    color: #2C1E39;
}

a {
    color: #2C1E39;
}

input {
    font-family: 'Readex Pro', sans-serif;
}

#wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: auto;
}
#wrapper > .screen {
    flex: 1 0 auto;
    width: 100%;
}
#wrapper > .screen-footer {
    flex: 0 0 auto;
    background: #2C1E39;
}
.margin {
    width: 1216px;
    margin: auto;
}
.clear {
    clear: both;
}
.header {
    padding: 32px 0;
}
.header > .logo {
    float: left;
    width: 166px;
    height: 32px;
    background: url("logo.svg") left top no-repeat;
}

.header > .menu {
    float: left;
    margin-left: 40px;
}
.header > .menu .menu-burger {
    display: none;
    width: 32px;
    height: 32px;
    background: url('burger.svg') left top no-repeat;
    cursor: pointer;
}
.header > .menu .menu-h {
    display: none;
}
.header > .menu .menu-el {
    float: left;
    margin-left: 40px;
    line-height: 32px;
}
.header > .menu .menu-el > a {
    font-weight: 600;
    font-size: 15px;
    color: #2C1E39;
    text-decoration: none;
}
.header > .menu .menu-el > a:hover {
    color: #E16036;
}
.header > .search {
    float: right;
    width: 194px;
    height: 36px;
    padding: 0px 16px 0px 40px;
    border: 1px solid #A3A0A7;
    box-sizing: border-box;
    border-radius: 40px;
    background: url("search.svg") 17px 11px no-repeat;
}
.header > .search .search-input {
    box-sizing: border-box;
    width: 138px;
    padding: 7px;
    background: transparent;
    outline: none;
    border: none;
    outline-offset: none;
    font-size: 14px;
    line-height: 20px;
    color: #594C65;
}
.header > .search .search-input:active,
.header > .search .search-input:hover,
.header > .search .search-input:focus {
    outline: none;
    border: none;
    outline-offset: none;
}
.footer {
    padding-top: 16px;
}
.footer .footer-row {
    margin-bottom: 16px;
}
.footer .footer-logo {
    float: left;
    width: 166px;
    height: 32px;
    background: url("logow.svg") left top no-repeat;
}
.footer .copyright {
    float: left;
    font-weight: normal;
    font-size: 12px;
    line-height: 32px;
    color: #DCD1EA;
}
.footer .menus {
    float: left;
}
.footer .menul {
    float: left;
}
.footer .menul > a {
    display: block;
    float: left;
    font-weight: 600;
    font-size: 15px;
    line-height: 32px;
    color: #F7F7F8;
    text-decoration: none;
    margin-left: 40px;
}
.footer .menu {
    float: right;
}
.footer .menu > a {
    display: block;
    font-weight: normal;
    font-size: 12px;
    line-height: 32px;
    color: #DCD1EA;
    text-decoration: none;
}

@media (max-width: 1300px) {
    .margin {
        width: 940px;
    }
    .header {
        padding: 18px 0;
    }
    .header > .menu {
        float: right;
        margin-left: 20px;
        margin-top: 2px;
    }
    .header > .menu .menu-burger {
        display: block;
    }
    .header > .menu .menu-panel {
        position: fixed;
        top: 0;
        right: 0;
        min-width: 480px;
        height: 100%;
        z-index: 10;
        display: none;
        background: #F7F7F8;
    }
    .header > .menu.open .menu-panel {
        display: block;
    }
    .header > .menu .menu-h {
        display: block;
        box-sizing: border-box;
        height: 68px;
        padding: 18px 16px;
        border-bottom: 1px solid #E8E4EC;
    }
    .header > .menu .menu-logo {
        float: left;
        width: 166px;
        height: 32px;
        background: url("mlogo.svg") left top no-repeat;
    }
    .header > .menu .menu-close {
        float: right;
        width: 32px;
        height: 32px;
        background: url("mclose.svg") left top no-repeat;
        cursor: pointer;
    }
    .header > .menu .menu-el {
        float: none;
        margin-left: 40px;
        margin-top: 24px;
    }
}
@media (max-width: 1024px) {
    .margin {
        width: 706px;
    }
}
@media (max-width: 768px) {
    .margin {
        width: 432px;
    }
    .header > .search {
        width: 32px;
        height: 36px;
        padding: 0;
        border: none !important;
        background-size: 26px auto !important;
        background-position: center center !important;
    }
    .header > .search > form {
        display: none;
        position: absolute;
        box-sizing: border-box;
        top: 68px;
        left: 0;
        width: 100%;
        height: 68px;
        padding: 0;
        background-color: #FFF;
    }
    .header > .search .search-input {
        display: block;
        width: 432px;
        margin: auto;
        margin-top: 16px;
        /*background-image: url('search2.svg');*/
        background-position: right center;
        background-repeat: no-repeat;
        color: #2C1E39 !important;
        font-size: 20px;
    }
    .header > .search.open {
        margin-bottom: 86px;
    }
    .header > .search.open > form {
        display: block;
    }
    .footer .menul {
        float: right;
    }
    .footer .menul > a {
        float: none;
    }
}
@media (max-width: 480px) {
    html, body {
        min-width: 320px;
    }
    .margin {
        width: 280px;
    }
    .header > .menu .menu-panel {
        min-width: 280px;
        width: 100%;
    }
    .header > .search > form {
        min-width: 320px;
    }
    .header > .search .search-input {
        width: 280px;
    }
    .footer {
        text-align: center;
    }
    .footer .footer-logo {
        float: none;
        margin: auto;
    }
    .footer .menul {
        float: none;
    }
    .footer .menul > a {
        margin: 0;
    }
    .footer .menu {
        float: none;
    }
    .footer .copyright {
        float: none;
    }
}