@media screen and (min-width: 19.375em) {
    .promises-list .headline {
        position:relative
    }

    .promises-list .headline h1 {
        /* font-family: "PT Sans Narrow",sans-serif; */
        font-weight: 700;
        line-height: 1.2;
        font-size: 1.5625rem;
        margin-bottom: 1rem
    }

    .promises-list .headline h1 .page {
        color: #999;
        text-transform: none;
        font-size: .7rem
    }

    .promises-list .headline h1 a {
        text-decoration: none;
        color: #22243a
    }

    .promises-list .headline h1 a:hover {
        text-decoration: underline
    }

    .promises-list .info {
        overflow: hidden;
        position: relative;
        border-top: .0625rem solid #e3e3e3;
        border-bottom: .0625rem solid #e3e3e3;
        min-height: 2.5rem;
        margin-bottom: 1.3rem;
        line-height: 1.1
    }

    .promises-list .info .current {
        display: block;
        float: left;
        text-transform: uppercase;
        /* font-family: "PT Sans",sans-serif; */
        font-size: .75rem;
        font-weight: 700;
        line-height: 3.4;
        margin-right: .7rem
    }

    .promises-list .info .arrow,.promises-list .info .arrow-m {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        margin: .25rem 0 0;
        cursor: pointer;
        background: url('/user/img/slovo/m-arr-d.svg') 50% 50% no-repeat;
        background-size: .6875rem .375rem;
        transition-duration: .3s
    }

    .promises-list .info .arrow {
        display: none
    }

    .promises-list .info .submenu {
        float: left;
        min-height: 2.5rem;
        transition: min-height .3s ease-in-out
    }

    .promises-list .info .submenu .body {
        display: inline-block
    }

    .promises-list .info .submenu .body ul {
        display: block;
        position: absolute;
        top: 2.5rem;
        left: 0;
        width: 100%;
        /* font-family: "PT Sans",sans-serif; */
        font-size: .75rem;
        font-weight: 700;
        line-height: 2.8;
        text-transform: uppercase;
        text-align: center
    }

    .promises-list .info .submenu .body ul li {
        border-top: .0625rem dashed #e3e3e3
    }

    .promises-list .info .submenu .body ul li.sm-succeed span {
        background-color: #4caf50
    }

    .promises-list .info .submenu .body ul li.sm-failed span {
        background-color: #f44336
    }

    .promises-list .info .submenu .body ul li.sm-performed span {
        background-color: #ffb300
    }

    .promises-list .info .submenu .body ul li.sm-all span,.promises-list .info .submenu .body ul li.sm-archived span {
        background-color: #576377
    }

    .promises-list .info .submenu .body ul a {
        text-decoration: none;
        color: #576377
    }

    .promises-list .info .submenu .body ul a:hover {
        text-decoration: underline
    }

    .promises-list .info .submenu .body ul span {
        color: #fff;
        padding: .075rem .5rem;
        border-radius: .6rem
    }

    .promises-list .info .submenu.ropen {
        min-height: 13.15rem
    }

    .promises-list .info .submenu.ropen .arrow-m {
        transform: rotate(180deg)
    }

    .promises-list .info .social-shares {
        float: right
    }

    .promises-list .item {
        position: relative;
        /* overflow: hidden; */
        /* font-family: 'PT Sans Narrow',sans-serif; */
        margin: 1rem 0
    }

    .promises-list .item .image {
        position: absolute;
        width: 3.75rem;
        height: 3.75rem;
        background-position: 50% 50%;
        background-size: cover;
        border-radius: 50%;
        top: 0;
        left: 0;
        transition: opacity .3s ease-in-out
    }

    .promises-list .item .story-heading {
        display: table;
        border-bottom: .0625rem solid #e3e3e3;
        position: relative;
        padding: .0625rem 0 2rem 4.375rem;
        width: 100%;
        box-sizing: border-box
    }

    .promises-list .item .story-heading .person-info {
        display: table-header-group
    }

    .promises-list .item .story-heading .person-info .name {
        /* font-family: 'PT Serif',times,serif; */
        font-weight: 700;
        font-size: .875rem;
        color: #22243a;
        text-decoration: none;
        line-height: 1.3;
        position: relative;
        top: -0.2rem
    }

    .promises-list .item .story-heading .person-info .name .surname {
        display: block;
        text-transform: uppercase
    }

    .promises-list .item .story-heading .person-info .name:hover {
        text-decoration: underline
    }

    .promises-list .item .story-heading .person-info .position {
        /* font-family: 'PT Serif',times,serif; */
        font-size: .875rem;
        color: #576377;
        line-height: 1.3
    }

    .promises-list .item .story-heading .promise-info {
        display: table-footer-group
    }

    .promises-list .item .story-heading .promise-info .title {
        margin-top: .5rem;
        display: inline-block;
        /* font-family: "PT Serif",times,serif; */
        font-size: .9375rem;
        line-height: 1.2;
        color: #3b4270
    }

    .promises-list .item .story-heading .state-info {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden
    }

    .promises-list .item .story-heading .state-info .date {
        display: inline-block;
        font-size: .9rem;
        color: #999;
        margin: .7rem 0 .7rem 4.375rem
    }

    .promises-list .item .story-heading .state-info .state {
        float: right;
        margin: .7rem 0
    }

    .promises-list .item .story-heading a {
        text-decoration: none;
        color: #22243a
    }

    .promises-list .item .story-heading a:hover {
        text-decoration: underline
    }

    .promises-list .item .story-heading .state {
        display: inline-block;
        background-color: #666;
        color: #fff;
        text-transform: uppercase;
        /* font-family: 'PT Sans',sans-serif; */
        font-size: .7rem;
        padding: 0 .15rem;
        margin-right: .5rem;
        line-height: 1.3
    }

    .promises-list .item .story-heading .state.performed {
        background-color: #ffb300
    }

    .promises-list .item .story-heading .state.succeed {
        background-color: #4caf50
    }

    .promises-list .item .story-heading .state.failed {
        background-color: #f44336
    }

    .promises-list .item:hover .image {
        opacity: .8
    }

    .promises-list .item:last-child .story-heading {
        border-top: 0;
        padding-top: 0
    }

     .promises-list .headline h1 {
        font-size: 1.3rem;
        text-transform: uppercase;
    }
}

@media screen and (min-width: 29.375em) {
    .promises-list .item .story-heading .person-info .name .surname {
        display:inline
    }

    .promises-list .item .story-heading .state-info .date {
        float: right;
        margin-right: .5rem;
        margin-left: 0
    }
}

@media screen and (min-width: 34.875em) {
    .promises-list .item .story-heading {
        padding-bottom:.6rem
    }

    .promises-list .item .story-heading .person-info {
        display: table-footer-group
    }

    .promises-list .item .story-heading .person-info .name {
        top: 0
    }

    .promises-list .item .story-heading .person-info .position {
        width: 50%
    }

    .promises-list .item .story-heading .promise-info {
        display: table-header-group
    }

    .promises-list .item .story-heading .promise-info .title {
        position: relative;
        top: -0.2rem;
        margin: 0 0 .4rem
    }

    .promises-list .item .story-heading .state-info {
        width: 45%
    }
}

@media screen and (max-width: 9999em) and (min-width:76.25em) {
    .promises-list .info .submenu {
        min-height:2.5rem
    }

    .promises-list .info .submenu .current {
        display: none
    }

    .promises-list .info .submenu .body {
        min-height: 2.5rem
    }

    .promises-list .info .submenu .body ul {
        position: relative;
        top: .0625rem;
        font-size: .65rem;
        text-align: left;
        line-height: 3.5
    }

    .promises-list .info .submenu .body ul li {
        display: inline-block;
        border: 0;
        margin-left: 1.21rem
    }

    .promises-list .info .submenu .body ul li:first-child {
        margin-left: 0
    }

    .promises-list .info .submenu .body .arrow-m {
        display: none
    }

    .promises-list .info .submenu .body .arrow {
        display: none
    }

    .promises-list .item .story-heading .person-info .name {
        font-size: .8125rem
    }

    .promises-list .item .story-heading .person-info .position {
        width: 59%;
        font-size: .8125rem
    }

    .promises-list .item .story-heading .promise-info .title {
        font-size: 1rem
    }

    .promises-list .item .story-heading .state-info {
        width: 38%
    }

    .promises-list .item .story-heading .state-info .date {
        font-size: .8125rem
    }

    .promises-list .info .submenu .body ul {
        font-size: .55rem;
        top: .4rem;
    }
}

.archive_section {
    margin-bottom:25px
}

.archive_section span {
    font-size:12px;
    font-style: italic;
    width:98.7%;
    display:inline-block;
    padding:5px;
    margin-top:10px;
    margin-bottom:10px;
    background-color:#303f9f;
    color:white
}

.story-heading {
  min-height: 72px;
}
.submenu .current {
  cursor: pointer;
}

@media (max-width: 1219px) {
  .promises-list .item .story-heading {
    padding-bottom: 2rem;
  }
  .promises-list .item .story-heading .state-info {
    width: 100%;
  }
}

@media (max-width: 469px) {
  .promises-list .item .story-heading .state-info {
    width: 120%;
  }
}
@media (max-width: 364px) {
  .promises-list .item .story-heading .state-info {
    width: 125%;
  }
}