.soft-list {
    
}



/**
*   Primary soft items
*/
.main-soft-items {
    clear: both;
    display: inline-block;
    padding-bottom: 20px;
    padding-top: 30px;
}

.main-soft-items .item {
    padding: 8px;
}

.main-soft-items .title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
}

.main-soft-items a {
    overflow: hidden;
    position: relative;
    color: initial;
    display: inline-block;
    padding: 2rem;
    text-align: center;
    background-color: #f7f7f7;
}

.main-soft-items a:hover {
    /*box-shadow: 1px 1px 5px #ddd;*/
    background-color: #fafafa;
}

.main-soft-items .thumb {
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0 auto;
    width: 80px;
    border-radius: 50%;
}

.main-soft-items .thumb .curtain{
    background-color: #fff;
    width: 200%;
    height: 200%;
    position: absolute;
    opacity: .3;
    transform: rotate(30deg);
    top: -120%;
    left: -160%;
    border-radius: 50%;
    transition: all 0.3s linear;
}

.main-soft-items a:hover .curtain{
    left: -40%;
    top: -30%;
}

.main-soft-items .line {
    border-bottom: 1px solid #3868fd;
    margin-bottom: 1rem;  
    position: relative;
    /*transition: all 0.3s linear;*/
}

.main-soft-items .line .shadow{
    width: 100%;
    box-shadow: 0 0 2px #3868fd;
    height: 1px;
    position: absolute;
    top: 0;
    left: -101%;
    transition: all 0.3s ease;
}

.main-soft-items a:hover .line .shadow{
    /*box-shadow: 0 0 2px #3868fd;*/
    left: 0;
}

.main-soft-items .text {
    height: 28rem;
    overflow: hidden;
}

.main-soft-items .name {
    height: 7rem;
    position: relative;
}

.main-soft-items .name h2 {
    margin: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate(0, -50%);

    transition: all 0.3s linear;
}

.main-soft-items a:hover .name h2{
    color: #2252e6;
}

.main-soft-items .description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
}


/**
*   Additional soft items
*/
.additional-soft-items {
    clear: both;
    margin-top: 30px;
    margin-bottom: 30px;
    /*display: inline-block;*/
    overflow: hidden;
    width: 100%
}

.additional-soft-items .frame {
    margin-top: -9px; /*Hide ".main-container" "border-top" via ".additional-soft-items" "overflow: hidden;"*/
}

.additional-soft-items .frame::after {
    content: "";
    display: block;
    clear: both;
}

.additional-soft-items .item{
    padding: 8px;
}

.additional-soft-items .title {
    font-size: 2.2rem;
    /*text-align: center;*/
    margin-bottom: 1rem;
}

.additional-soft-items .main-container{
    display: inline-block;
    border-top: 1px solid #eee;
    width: 100%;
    padding: 15px;
    padding-bottom: 15px;
    padding-top: 40px;
}

.additional-soft-items .main-container::after{
    content: '';                            
    display: block;
    clear: both;
}

.additional-soft-items .main-container:hover {

}

.additional-soft-items .thumb {
    display: none;
    overflow: hidden;
    position: relative;
    padding: 0;
    width: 4rem;
    float: left;
    border-radius: 6px;
}

.additional-soft-items .thumb .curtain{
    background-color: #fff;
    width: 200%;
    height: 200%;
    position: absolute;
    opacity: .3;
    transform: rotate(30deg);
    top: -140%;
    left: -160%;
    border-radius: 50%;
    transition: all 0.3s linear;
}

.additional-soft-items .main-container:hover .curtain{
    left: -40%;
    top: -30%;
}

.additional-soft-items .name {
    /*margin-left: 5.5rem;*/
    height: 4rem;
    position: relative;
}

.additional-soft-items .name h2{
    margin: 0;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate(0, -50%);

    transition: all 0.3s linear;
}

.additional-soft-items .main-container:hover .name h2{
    /*color: #2252e6;*/
}

.additional-soft-items .scheme {
    /*margin: 0 1rem;*/
    /*width: 100%;*/
    /*height: 70px;*/
    overflow: hidden;
    /*margin: 0 auto;*/
    margin-bottom: 1rem;
    /*float: left;*/
}

.additional-soft-items img {
    margin: 0 auto;
    width: 100%;
}

.additional-soft-items .description {
    margin-bottom: 1rem;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 11rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.additional-soft-items .description::before {
    content: '';
    display: inline;
    margin-right: 3rem;
}

.additional-soft-items .button {
    /*margin-top: 1rem;*/
    float: right;
}

.additional-soft-items .button .fa{
    margin-left: 0.5rem;
}