/* Style sheet for kolomna-trams.ru v.3 (paper) */
/* by Dmitry Balabanov */

.trams-v3-paper-content {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #fff;
    padding-bottom: 0px;
    flex: 1 0 auto;
}

.trams-v3-paper-preview {
    height: 100vh;
    background-image: url(https://kolomna-trams.ru/assets/images/home/paper-ktm-23.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.trams-v3-paper-container {
    width: 100%;
}

.trams-v3-paper-preview-subscription {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-bottom: 70px;
}

.trams-v3-paper-preview-subscription h1 {
    color: white;
    font-size: 32px;
    text-align: center;
    font-weight: 400;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 1.25;
}

.trams-v3-paper-section {
    position: relative;
    padding-bottom: 25px;
}

.trams-v3-paper-section h2 {
    text-align: center;
    font-size: 28px;
    padding-top: 1.5em;
    margin-bottom: 1em;
    margin-top: 0;
}

.trams-v3-paper-section h2::before, .trams-v3-paper-section h2::after {
    content: "";
    width: 70px;
    height: 8px;
    vertical-align: middle;
    display: inline-block;
    background: transparent url(../images/icons/white-monogram.svg?010324) 100% 50% no-repeat;
}

#step-by-step.trams-v3-paper-section h2::before, #step-by-step.trams-v3-paper-section h2::after {
    background: transparent url(../images/icons/black-monogram.svg?010324) 100% 50% no-repeat;
}

.trams-v3-paper-section h2::before {
    margin-right: 23px;
}

.trams-v3-paper-section h2::after {
    margin-left: 23px;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}

.trams-v3-paper-section-block p, li {
    font-size: 18px;
}

@media only screen and (max-width: 615px) {
    .trams-v3-paper-section h2 {
        font-size: 22px;
    }
    .trams-v3-paper-section h2::before {
        width: 50px;
    }
    .trams-v3-paper-section h2::after {
        width: 50px;
    }
    .trams-v3-paper-section-block p, li {
        font-size: 16px;
    }
}

@media only screen and (max-width: 450px) {
    .trams-v3-paper-section h2::before {
        width: 30px;
    }
    .trams-v3-paper-section h2::after {
        width: 30px;
    }
}

@media only screen and (max-width: 400px) {
    .trams-v3-paper-section h2::before {
        display: none;
    }
    .trams-v3-paper-section h2::after {
        display: none;
    }
}

.trams-v3-paper-section-block {
    font-family: var(--trams-sans-font-family);
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto;
    padding-left: 14px;
    padding-right: 14px;
}

.trams-v3-paper-section-block menu {
    padding-inline-start: 20px;
}

.trams-v3-paper-section-links p {
    text-align: center;
}

.trams-v3-paper-section-links a {
    text-decoration: none;
    color: whitesmoke;
    
    border-bottom: 1px solid rgba(255,255,255,.4);
    cursor: pointer;

    transition: all .15s ease-out;
}

.trams-v3-paper-section-links a:hover {
    color: rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
}

.trams-v3-paper-section-links .download-icon {
    height: .85em; 
    vertical-align: middle;
    margin-right: .4em;
}


.trams-v3-paper-tv {
    width: 560px;
    margin: 0 auto;
    max-width: 90%;
}


.trams-v3-paper-videoframe {
    width: 100%;
}

.trams-v3-paper-step {
    position: relative;
}

.trams-v3-paper-step-number {
    position: absolute;
    color: #888;
    left: -2em;
}

@media only screen and (max-width: 790px) {
    .trams-v3-paper-step-number {
        position: relative;
        left: auto;
        margin-bottom: 0;
    }
}

.trams-v3-paper-step-body {
    margin-bottom: 30px;
}

.trams-v3-paper-step-body p {
    margin-top: 0;
    margin-bottom: .5em;
}

.trams-v3-paper-step-body p a {
    color: rgb(28, 119, 255);
    text-decoration: none;
    border-bottom: 1px solid rgb(28, 119, 255, .4);
    white-space: nowrap;
}

.trams-v3-paper-step-body p a:hover {
    color: rgb(255, 119, 28);
    border-bottom: 1px solid rgb(255, 119, 28, .4);
}

.trams-v3-paper-step-body-illustration {
    display: block;
    margin: 0 auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

.trams-v3-paper-step-body-illustration[data-size="L"] {
    width: 70%;
}

.trams-v3-paper-step-body-illustration[data-size="M"] {
    width: 50%;
}

.trams-v3-paper-step-body-illustration[data-size="S"] {
    width: 30%;
}

.trams-v3-paper-step-body-gallery {
    display: flex;
    flex-direction: row;
}

.trams-v3-paper-step-body .detail-box {
    border: 1px solid #666;
    border-radius: 25%;
    padding-left: .4em;
    padding-right: .4em;
}

.trams-v3-paper-step-body .fragment-box {
    color: #666;
    /* letter-spacing: .15em; */
}
.trams-v3-paper-step-body .fragment-box::before {
    content: "[";
    padding-right: .15em;
}
.trams-v3-paper-step-body .fragment-box::after {
    content: "]";
    padding-left: .15em;
}

.trams-v3-paper-step-body .cut-icon {
    height: 1em;
    margin-left: .25em;
    margin-right: .25em;
}


.trams-v3-paper-section::before {
    content: "";
    width: 100%;
    height: 9px;
    top: -7px;
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    z-index: 2;
}

#description {
    background-color: #f1e9d6;
    color: rgb(0, 0, 0);
}

#description::before {
    background: url(../images/icons/wave-yellow.svg?010324) 50% 50% repeat-x;
}

#you-need {
    background-color: #403443;
    color: whitesmoke;
}

#you-need::before {
    background: url(../images/icons/wave-purple.svg?010324) 50% 50% repeat-x;
}


#downloads {
    background-color: #383f3a;
    color: whitesmoke;
}

#downloads::before {
    background: url(../images/icons/wave-green.svg?010324) 50% 50% repeat-x;
}

#video {
    background-color: #4f3131;
    color: whitesmoke;
}

#video::before {
    background: url(../images/icons/wave-red.svg?010324) 50% 50% repeat-x;
}

#step-by-step {
    background-color: #fff;
    color: #333;
}

#step-by-step::before {
    background: url(../images/icons/wave-white.svg?010324) 50% 50% repeat-x;
}