.image {
    display: flex;
    align-items: center;
    flex-direction: column;

    margin: 25px 0;

    background-color: #191932;
    height: 60vh;

    position: relative;
}
.image--small {
    height: 40vh;
}
    .image__elem {
        min-width: 200px;
        min-height: 100px;
        max-width: 100%;
        max-height: 100%;

        margin: auto;
    }
    .image__descr {
        position: absolute;
        color: #fff;
        top: 100%;
        display: block;
        left: 0;
        width: 60vh;
        transform: rotate(-90deg);
        transform-origin: left top 0;
        word-wrap: break-word;
        padding: 10px 16px;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 300;
        background-color: rgba(25, 25, 50, 0.5);
    }
    .image--small > .image__descr {
        width: 40vh;
    }


.contacts {
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
}
.contact-group {
    display: flex;
    width: 100%;
}
.contact {
    position: relative;

    margin: 0 10px 20px 10px;
    width: 100%;

    background-color: #fbfbfb;
    border-radius: 5px;
    border-top: 5px solid #298cff;

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: height ease-in-out .2s;
}
.contact--secondary {
    border-top-color: #191932;
}
.contact--accent {
    border-top-color: #FFA516;
}
    .contact__img {
        display: block;
        width: 100%;
        height: 100%;

        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .contact__name {
        margin-top: -6px;
        transition: margin-top ease-in-out .2s;
    }
    .contact:hover > .contact__descr > .contact__name {
        margin-top: 0px;
    }

    .contact__descr {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        position: absolute;
        bottom: 0;
        width: 100%;
        height: 64px;
        padding: 2px 6px;
        text-align: center;
        font-size: 1.6rem;
        color: #fff;
        font-weight: 300;
        background-color: rgba(25, 25, 50, 0.85);

        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom: 0px solid #298cff;

        transition: height ease-in-out .2s, border-bottom ease-in-out .2s;
    }
    .contact:hover > .contact__descr {
        height: 100%;
        border-bottom: 5px solid #298cff;
    }

    .contact__info {
        opacity: 0;
        max-height: 0px;
        font-size: 1.2rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        transition: opacity ease-in-out .2s, margin-top ease-in-out .2s, max-height ease-in-out .2s;
    }
    .contact:hover > .contact__descr > .contact__info {
        opacity: 1;
        height: auto;
        margin-top: 10px;
        max-height: 100px;
    }


.file {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    
    border-top: 5px solid #298cff;
    margin-bottom: 16px;
    overflow: hidden;
}
    .file__info {
        display: flex;
        flex-direction: column;
        flex: 1;
        
        padding: 8px 15px;
        
        overflow: hidden;
    }
    .file__title {
        font-size: 1.35rem;
        line-height: 1.8rem;
        letter-spacing: 0.5px;
        font-weight: 300;

        margin-bottom: 2px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .file__versions {
    
    }
        .file__versions > a {
            margin-right: 8px;
        }
    .file__view-cb {
        display: none;
    }
    .file__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 65px;
        font-size: 1.8rem;

        color: #298cff;
        cursor: pointer;
        border-bottom: none !important;
    }
        .file__view-cb:not(:checked) + .file__button::before {
            content: "\f06e";
            font-family: FontAwesome;
        }
        .file__view-cb:checked + .file__button::before {
            content: "\f070";
            font-family: FontAwesome;
        }
        .file__button--last {
            margin-right: 10px;
        }
        .file__button:hover, .file__button:focus {
            background-color: rgba(42,140,255,0.1);
        }
    .file__viewer {
        height: 0;
        flex-basis: 100%;
        border-top: 0px solid #DFDFDF;
        transition: height ease-in-out .2s,
                    padding ease-in-out .2s,
                    border ease-in-out .2s;
    }
        .file__view-cb:checked ~ .file__viewer {
            border-top-width: 1px;
            height: 65vh;
            padding: 8px;
        }
    .file__iframe {
        width: 100%;
        height: 100%;
    }


.post {
    background-color: #fff;
    
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    
    border-top: 5px solid #298cff;
}
    .post__head {
        display: flex;
        align-items: center;

        padding: 8px 15px;
    }
    .post__title {
        font-size: 1.5rem;
        line-height: 2.25rem;
        letter-spacing: 0.5px;
        font-weight: 300;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1;
    }
    .post__info {
        font-style: italic;
        font-size: 1rem;
        padding: 5px;
    }
    .post__body {
        border-top: 1px solid #DFDFDF;
        padding: 15px;
    }


.software {
    display: flex;
    background-color: #fff;
    
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    
    border-top: 5px solid #298cff;
    overflow: hidden;
}
    .software__logo {
        flex: 0 0 100px;
        height: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 10px;
        border-right: 1px solid #DFDFDF;
    }
    .software__logo > img {
        max-width: 100%;
        max-height: 100%;
    }
    .software__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px 15px;
        overflow: hidden;
    }
    .software__title {
        font-size: 1.5rem;
        line-height: 2.25rem;
        letter-spacing: 0.5px;
        font-weight: 300;

        margin-top: -4px;
        margin-bottom: 2px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .software__descr {
        line-height: 1.4rem;
    }


.image {
    display: flex;
    align-items: center;
    flex-direction: column;

    margin: 25px 0;

    background-color: #191932;
    height: 60vh;

    position: relative;
}
.image--small {
    height: 40vh;
}
    .image__elem {
        min-width: 200px;
        min-height: 100px;
        max-width: 100%;
        max-height: 100%;

        margin: auto;
    }


.videos {
    padding-right: 300px;
    position: relative;

    background-color: #191932;
    border-radius: 5px;
    border-top: 5px solid #298cff;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
    .videos__player {
        position: relative;
        display: block;
        width: 100%;
        padding: 5px;
        z-index: 1;
    }
    .videos__sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        overflow-y: auto;
        height: 100%;
        background-color: #fff;
        border-bottom-right-radius: 5px;
    }
    .videos__sidebar > .videos__link {
        display: block;
        padding: 10px 14px;
        border-bottom: 1px solid #DFDFDF;
        cursor: pointer;
    }
    .videos__link-title {
        background: #298cff;
        color: #fff;
        padding: 10px 14px;
        text-align: center;
        font-weight: 300;
        font-size: 1.25rem;
        margin-top: -1px;
    }
    .videos__link:last-child {
        border-bottom-color: transparent;
    }
    .videos__link--selected {
        background-color: rgba(42,140,255,0.1);
    }



@media (max-width: 769px) {

    .image {
        height: auto;
        overflow: hidden;
    }
        .image__descr {
            position: relative;
            transform: none;
            width: auto !important;
        }


    .contacts {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }


    .videos {
        padding-right: 0;
    }
        .videos__sidebar {
            max-height: 268px;
            position: relative;
            width: 100%;
            border-bottom-left-radius: 5px;
        }
}


@media (max-width: 577px) {
    
    .contact-group {
        flex-direction: column;
    }
    .contact {
        margin-left: 0;
        margin-right: 0;
    }


    .file__button {
        width: 55px;
    }

}