﻿/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
    .mainArea {
        display: block;
        flex-direction: row;
        width: 100%;
    }

    .leftdiv {
        float: left;
        /*flex:0 1 content;*/
        margin: .2em;
        width: 100%;
        height: contain;
    }

    .rightdiv {
        float: left;
        margin: .2em;
        width: 100%;
     }

    .centerdiv {
        float: left;
        flex: 0 1 auto;
    }
}
@media (min-width: 991.98px) {
    .mainArea {
        display: block;
        width: 100%;
    }

    .leftdiv {
        float: left;
        flex:0 1 60%;
        margin: .2em;
        width: 62%;
        min-width: 450px;
        height:contain;
    }

    .rightdiv {
        float: left;
        flex: 0 1 35%; /*content;*/
        margin: .2em;
        width: 35%;
        min-width: 250px;
        max-width: max-content;
    }

    .centerdiv {
        float: left;
        flex: 0 0 auto;
    }
}
    .list-wrpaaer {
        direction: ltr;
        position: relative !important;
        overflow: hidden;
        font-size: 1.3rem !important;
        z-index: 1;
        background-color: white;
        text-align: justify;
        padding: 0px;
        width: 100%;
    }

    .SourceFixedPart {
        position: relative !important;
        z-index: 3;
        background-color: white;
        font-family: Calibri, "Times New Roman", Tahoma, Times, serif;
    }

    .DestinationFixedPart {
        position: absolute !important;
        z-index: 2;
        background-color: white;
    }

        .DestinationFixedPart h3 {
            background-color: orangered;
        }

    .list-wrpaaer span {
        margin: 0px 2px;
    }

    .list-wrpaaer h3 {
        padding: 2px 10px !important;
        margin: 0px 0px !important;
        text-shadow: 0px 0px 2px #000 !important;
        font-size: 1.2em;
    }

    .detailPart {
        position: relative !important;
        padding: 2px 10px !important;
        font-family: Calibri, "Times New Roman", Tahoma, Times, serif;
    }

    .containerRSS {
        direction: ltr;
        text-align: center;
        width: 99%;
        height: 100%;
        /*  margin: .2em;*/
        overflow: hidden;
        background: white;
        position: relative;
        box-sizing: border-box;
        font-family: Calibri, "Times New Roman", Tahoma, Times, serif;
    }

    .marquee {
        position: relative;
        box-sizing: border-box;
        animation: marquee 100s linear infinite;
        page-break-before: always;
        text-space-collapse: collapse;
        margin: 0px;
        padding: 0px;
    }

        .marquee p {
            white-space: nowrap;
        }

        .marquee li {
            margin: 0px !important;
            padding: 0px !important;
        }

        .marquee:hover {
            animation-play-state: paused;
        }

    /* Make it move! 
@keyframes marquee {
    0%   { top:  18em }
    100% { top:  -125em }
}*/
    @keyframes marquee {
        0% {
            top: 100%;
        }

        100% {
            top: 0;
            transform: translateY(-100%);
        }
    }

    /* Make it look pretty */
    .containerRSS .marquee {
        margin: 0px;
        line-height: 1.5em;
        font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    }

    .list-aggregate {
        position: relative !important;
        padding: 0px !important;
        margin: 0px !important;
        width: 100%;
        text-align: justify;
    }

    .containerRSS:before, .containerRSS::before,
    .containerRSS:after, .containerRSS::after {
        left: 0;
        z-index: auto;
        content: '';
        position: relative;
        pointer-events: none;
        width: 100%;
        height: 2em;
        /*background-image: linear-gradient(top, #FFF, rgba(255,255,255,0));*/
    }

    .containerRSS:after, .containerRSS::after {
        bottom: 0;
        transform: rotate(180deg);
    }

    .containerRSS:before, .containerRSS::before {
        top: 0;
    }

    /* Style the links */
    .vanity {
        text-align: center;
        font: .95em 'Callibri', 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    }

        .vanity a, .containerRSS a, a .vanity {
            color: #959595;
            transition: color .5s;
            text-decoration: none;
        }

            .vanity a:hover, .containerRSS a:hover, a .vanity :hover {
                transition: color .5s;
                color: #F65314 ;
                text-shadow: 0px 0px 1px #ff0000;
            }

    /* Style toggle button */
    .toggle {
        display: block;
        margin: 2em auto;
    }
