historia-de-zainab/css/home.less

// out: css/home.css, sourcemap: true, compress: true
@media (min-width: 900px) {
    p {
        font-size: 12px;
    }

    #portada{
        width: 100%;
        height:100%;

    }
    .cd-horizontal-timeline .events-content {
        position: relative;
    }

    .cd-horizontal-timeline .events-content li {
        position: absolute;
        z-index: 1;
        width: 100%;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        opacity: 0;
        animation-duration: 0.4s;
        animation-timing-function: ease-in-out;
    }

    .cd-horizontal-timeline .events-content li.selected {
        /* visible event content */
        position: relative;
        z-index: 2;
        opacity: 1;
        transform: translateX(0);
    }

    div.section-container {
        background: white;
    }
    .cd-timeline-navigation{
        padding:0px;
        margin:0px;
        text-align: left;
        align:left;
    }
    #timeline {
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 0;
        /*height: 100px;*/
        width: 100%;
        text-align: left;
        background-color: white;
        display: none;
        li {
            display: inline-block;
            width: 13.9%;
            margin: 0px;
            padding: 0px;
            text-align: left;
            line-height: auto;
        }

        a {
            background-color: transparent;
            text-align: left;
            line-height: auto;
        }
        /*a.active{
            background-color:orange;
        }*/
        img {
            width:103%;
            opacity: 0.2;
            transition: all 1s;
        }

        a.active img.img-menu {
            opacity: 1;
        }
    }

    div.menu-content {
        height: 100vh;
        background-color: white;
        font-size: 14px;
        line-height: 1.3em;
        /*padding-left: 50px;
        padding-right: 70px;*/
    }

    div.extra-btn-container {
        position: absolute;
        left: -35px;
        top: 20px;
        width: 100px;
        height: 100px;
    }
    div.extra-btn-container a{
        font-family:  'Londrina Solid', cursive;
        color:black;
        margin-bottom: 20px;
        display: block;
    }

    div.extra-btn-container2 {
        position: absolute;
        left: -50px;
        top: 120px;
        width: 100px;
        height: 100px;
    }

    div.extra-btn-container3 {
        position: absolute;
        left: -50px;
        top: 220px;
        width: 100px;
        height: 100px;
    }

    .carousel-btn{
        padding: 0px;
        li{
            list-style: none;
        }
        a{
            font-family: 'Londrina Solid', cursive;

        }
        a.active{
            background-color:#da222b;
            color:white;
        }
        a.active:hover,a.active:active, a.active:visited {
            background-color:#da222b;
            color:white;
        }

    }
    a.btn-circle {
        border-radius: 40px;
    }

    .map-popover {
        display: none;
    }
    .referencias-popover{
        width:90%;
        height:80%;
    }
    div.section-left{
        background-color: #ededed;
        min-height: 100vh;
    }

    a.switchMode{
        display: block;
        max-height: 150px;
    }

    div.section-inner-content {
        text-align:right;
        div.story-content {
            background-size: contain;
            background-position: center 5px;
            background-repeat: no-repeat;
        }
        div.data-content {
            background-size: contain;
            background-position: center 5px;
            background-repeat: no-repeat;
        }
    }
    a.referencias{
        text-decoration: none;
        border-bottom: dotted 1px ;
        color: #da222b;
        &:hover{
            color:#fa222b
        }
        display: inline-block;
        margin-bottom: 3em;
    }

    .menu-story-inner, .menu-data-inner{
        padding-top:2em;
        padding-bottom:2em;
    }

}