@media screen and (max-width: 959px){
    #membershipsContainer{
        width: 100%;
        min-width: 480px;
        max-width: 959px;
        margin: 0 auto;
    }
    .membership{
        display: block;
        box-sizing: border-box;
        overflow: hidden;
        width: 95%;
        max-width: 910px;
        min-width: 480px;
        margin: 15px auto;
        border-radius: 30px;
        border: solid 1px rgba(0, 0, 0, 0.2);
    }
    .membership{
        direction: ltr;
    }
    .membership .benefits{
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 5px;
        direction: ltr !important;
    }
    .membership .benefits.two .benefitVal{
        width: calc(50% - 13px);
        margin: 25px 5px;
    }
    .membership .benefits.three .benefitVal{
        width: calc(33% - 56px);
        margin: 5px 25px;
    }
    .membership .benefits.four .benefitVal{
        width: calc(33% - 56px);
        margin: 5px 25px;
    }
    .membership .benefits.five .benefitVal{
        width: calc(33.1% - 6px);
        margin: 5px 2px;
    }
    .membership .benefits .benefitVal > figcaption > span.title{
        font-size: 14px;
    }
    .membership .benefits .benefitVal > figcaption > span.value{
        font-size: 14px;
    }
    .membership .details{
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        width: 100%;
        padding: 10px;
        background-color: #fff;
        direction: ltr !important;
    }
    .membership .name{
        padding-right: 15px;
        text-align: left;
    }
    .membership .details .description{
        min-height: 0;
    }
    .joinButton{
        margin: 0 auto 5px;
    }
    .membership .details .comments{
        position: initial;
    }
    .membership .details .comments span{
        display: block;
        margin: 3px 0;
    }
}
@media screen and (min-width: 960px){
    #membershipsContainer{
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
    .membership{
        display: block;
        box-sizing: border-box;
        overflow: hidden;
        width: 95%;
        max-width: 1000px;
        min-width: 962px;
        margin: 25px auto;
        border-radius: 30px;
    }
    .membership:nth-child(2n + 1){
        direction: ltr;
    }
    .membership:nth-child(2n + 2){
        direction: rtl;
    }
    .membership .benefits{
        display: inline-block;
        box-sizing: border-box;
        width: calc(50% - 2px);
        padding: 10px 10px 25px;
        direction: ltr !important;
    }
    .membership .benefits.two .benefitVal{
        width: calc(50% - 13px);
        margin: 25px 2px;
    }
    .membership .benefits.three .benefitVal{
        width: calc(25% - 15px);
        margin: 5px 25px;
    }
    .membership .benefits.four .benefitVal{
        width: calc(25% - 8px);
        margin: 25px 2px;
    }
    .membership .benefits.five .benefitVal{
        width: calc(21.3% - 14px);
        margin: 25px 2px;
    }
    .membership .benefits .benefitVal > figcaption > span.title{
        font-size: 13px;
    }
    .membership .benefits .benefitVal > figcaption > span.value{
        font-size: 12px;
    }
    .membership .details{
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        width: calc(50% + 1px);
        padding: 10px 10px 10px 20px;
        background-color: #fff;
        direction: ltr !important;
    }
    .membership:nth-child(2n + 1)  .details{
        margin-left: -3px;
    }
    .membership:nth-child(2n + 2)  .details{
        margin-right: -3px
    }
    .membership:nth-child(2n + 1) .benefits .name{
        text-align: right;
        margin-right: 10px;
    }
    .membership:nth-child(2n + 2) .benefits .name{
        text-align: left;
        margin-left: 10px;
    }
    .membership:nth-child(2n + 2) .details .name{
        padding-right: 20px;
        text-align: right;
    }
    .membership:nth-child(2n + 1) .details .name{
        padding-left: 10px;
        text-align: left;
    }
    .membership .details .description{
        min-height: 95px;
    }
    .joinButton{
        margin: 0 auto 20px;
    }
    .membership .details .comments{
        position: absolute;
    }
    .membership .details .comments span.vat{
        float: right;
        margin-right: 10px;
    }
}


.membership .benefits .name{
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    margin: 5px 0;
}
.membership .benefits .name .word, .membership .benefits .name .last{
    display: inline-block;
    position: relative;
    font-size: 20px;
}
.membership .benefits .name .word:before{
    content : "";
    position: absolute;
    left    : 0;
    bottom  : 0;
    height  : 2px;
    width   : 90%;
    border-bottom: 2px solid #fff;
}
.membership .benefits .name .last:before{
    content : "";
    position: absolute;
    left    : 0;
    bottom  : 0;
    height  : 2px;
    width   : 100%;
    border-bottom: 2px solid #fff;
}
.membership .benefits .benefitVal{
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}
.membership .benefits .benefitVal > img{
    width: 100%;
}
.membership .benefits .benefitVal > figcaption{
    width: 100%;
    padding: 5px 0;
    background-color: #fff;
}
.membership .benefits .benefitVal > figcaption > span{
    display: block;
    width: 100%;
    text-align: center;
    color: #60050e;
}
.membership .benefits .benefitVal > figcaption > span.title{
    font-weight: 700;
    margin-bottom: 5px;
}
.membership .benefits .benefitVal > figcaption > span.value{
    font-weight: 400;
}
.membership .details .name{
    display: block;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.membership .details .name .word, .membership .details .name .last{
    display: inline-block;
    position: relative;
    font-size: 36px;
    font-weight: 700;
}
.membership .details .name .word:before{
    content : "";
    position: absolute;
    left    : 0;
    bottom  : 0;
    height  : 3px;
    width   : 95%;
    border-bottom: 3px solid #39065c;
}
.membership .details .name .last:before{
    content : "";
    position: absolute;
    left    : 0;
    bottom  : 0;
    height  : 3px;
    width   : 100%;
    border-bottom: 3px solid #f38e3b;
}
.membership .details .description{
    color: #39065c;
    font-size: 20px;
}
.membership .details .onePrice, .membership .details .towPrice{
    display: block;
    width: 100%;
    padding: 5px 0 0;
}
.membership .details .onePrice{
    margin-top: 35px;
    margin-bottom: 15px;
}
.membership .details .onePrice .duration, .membership .details .towPrice .duration{
    display: block;
    width: 100%;
    font-size: 30px;
    font-weight: 700;
}
.membership .details .onePrice .duration{
    margin-bottom: 10px;
}
.membership .details .onePrice .price, .membership .details .towPrice .price{
    display: block;
    width: 100%;
    font-size: 48px;
    font-weight: 700;
    color: #39065c;
}
.membership .details .towPrice{
    position: relative;
}
.membership .details .onePrice .yearPrice, .membership .details .towPrice .yearPrice{
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
}
.membership .details .onePrice .monthPrice, .membership .details .towPrice .monthPrice{
    margin-bottom: 10px;
}
.membership .details .towPrice .yearPrice:before{
    content : "";
    position: absolute;
    left    : 0;
    bottom  : -5px;
    height  : 3px;
    width   : 88%;
    margin-left: 2px;
    border-bottom: 3px solid #f38e3b;
}
.membership .details .onePrice .oldPrice, .membership .details .towPrice .oldPrice{
    display: inline-block;
    position: relative;
    font-size: 20px;
    line-height: 36px;
    margin-right: 20px;
    color: #39065c;
}
.membership .details .onePrice .newPrice, .membership .details .towPrice .newPrice{
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    color: #ca0813;
}
.membership .details .onePrice .oldPrice:before, .membership .details .towPrice .oldPrice:before{
    content : "";
    position: absolute;
    left    : 0;
    bottom  : 18px;
    height  : 2px;
    width   : 95%;
    border-bottom: 2px solid #f38e3b;
    transform: rotate(-15deg);
}
.joinButton{
    display: block;
    box-sizing: border-box;
    width: 200px;
    height: 50px;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    line-height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: center;
    justify-content: center;
    cursor: pointer;
}
.membership .details .comments{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-right: 20px;
}
.membership .details .comments span{
    display: inline-block;
    font-size: 12px;
}