@import url('profile_responsive.css');


.container {
    display              : grid;
    justify-content      : start;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas  :
        "left-1 right-1"
        "left-2 right-2";
    column-gap    : 10px;
    margin-top    : -15px;
    margin-left   : 245px;
    padding-left  : 1.5em;
    padding-right : 1.0em;
    padding-bottom: 2em;
    max-width     : 1280px;
    min-height    : 600px;
}





.nav-menu h1>span {
    /* display: inline-block; */
    display     : none;
    color       : rgb(199, 56, 56);
    padding-left: 3em;
    font-size   : 0.8em;
}



.container>.profile {
    display         : inline-block;
    min-width       : 450px;
    /* width        : 450px; */
    min-height      : 400px;
    background-color: white;
    box-shadow      : 5px 5px 5px -5px rgba(34, 60, 80, 0.6);
    padding         : 1em 2em;
    grid-area       : left-2;
}

.container>h1 {
    font-size    : 1.3em;
    padding-top  : 0.7em;
    margin-bottom: 2em;
    grid-area    : left-1;
}

.container .profile>.head {
    background-color: rgb(199, 56, 56);
    display         : block;
    position        : relative;
    width           : 100%;
    height          : 80px;
    margin-top      : -40px;
    margin-left     : auto;
    margin-right    : auto;
    padding-left    : 1em;
    padding-top     : 1em;
    box-shadow      : 4px 2px 15px 0px rgba(34, 60, 80, 0.6);
    color           : white;
}

.container .profile .head>.title {

    font-size: 1.2em;
}

.container .profile .head>.descr {
    display   : inline-block;
    font-size : 1em;
    margin-top: 0.2em;
}

.container .profile>form {
    margin-top: 1em;
}

label {
    font-size: 0.8em;
}

input,
textarea {
    border       : none;
    border-bottom: 1px solid gray;
    width        : 100%;
}

.container .profile form>.line-1 {
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap           : 10px;
    margin-bottom        : 1em;
}

.container .profile form>.line-2 {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    column-gap           : 10px;
    margin-bottom        : 1em;
}

.container .profile form>.line-3 {
    display              : grid;
    grid-template-columns: 1fr;
    column-gap           : 10px;
    margin-bottom        : 1em;
}

.container .profile form>.line-4 {
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap           : 10px;
    margin-bottom        : 1em;
}

.container .profile form>.line-5 {
    display              : grid;
    grid-template-columns: 1fr;
    column-gap           : 10px;
    margin-bottom        : 1em;
}

.container .profile form>.line-6 {
    display              : flex;
    grid-template-columns: 1fr;
    column-gap           : 10px;
    margin-bottom        : 1em;
    justify-content      : flex-end;
}

input[type="submit"] {
    display         : inline-block;
    width           : 220px;
    height          : 36px;
    background-color: rgb(199, 56, 56);
    color           : white;
    text-transform  : uppercase;
    font-weight     : 700;
}

.container>.bio {
    grid-area       : right-2;
    width           : 100%;
    height          : 330px;
    min-width       : 260px;
    background-color: white;
    box-shadow      : 5px 5px 5px -5px rgba(34, 60, 80, 0.6);
    padding         : 0 1em;
}

.container .bio>.portrait {
    display         : block;
    position        : relative;
    top             : -30px;
    width           : 120px;
    height          : 120px;
    background-color: yellow;
    margin          : 0 auto;
    border-radius   : 50%;
    overflow        : hidden;
}

.container .bio .portrait>img {
    display : block;
    position: relative;
    left    : -15px;
    width   : 130%;
    height  : auto;
}

.container .bio>.work-position {
    text-align    : center;
    text-transform: uppercase;
    font-weight   : 100;
    /* font-size  : 1em; */
}

.container .bio>.worker-name {
    text-align : center;
    font-weight: 700;
    font-size  : 1.2em;
    margin-top : 0.5em;
}

.container .bio>.bio-text {
    margin-top: 0.5em;
}