header:not(.sticking){
    background-color: rgba(255, 112, 4, 0);
}

#dashboard{
    height:calc(var(--fvh)*100); 
    background-image:url('https://ventasradioramaoccidente.com/assets/static/def_background.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    padding-top:calc(var(--fvh)*10);
}

#marquee{
    height:calc(var(--fvh)*10);
    margin:0 5vw;
    margin-top:calc(var(--fvh)*8);
    font-family: Qmedium;
    font-size: calc(var(--fvh)*6);
    color: #fff;
    border-radius:calc(var(--fvh)*7);
    background-color: rgba(255, 112, 4, .8);
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
#marquee p {
    height:100%;
    padding-top: calc(var(--fvh)*2);
    padding-bottom: calc(var(--fvh)*2);
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite;
}
#home-video-box{
    margin:calc(var(--fvh)*3) auto;
    height:calc(var(--fvh)*66);
    background-color:rgba(0, 0, 0, .5);
    border-radius: calc(var(--fvh)*5);
    padding: calc(var(--fvh)*2);
    width: max-content;
}
#home-video{
    height:100%;
    border-radius: calc(var(--fvh)*3);
}
@media only screen and (max-width: 1200px) {
    #dashboard{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    #home-video-box{
        margin:calc(var(--fvh)*5) 5vw;
        height:min-content;
        width: calc(90vw - var(--fvh));
    }
    #home-video{
        height:100%;
        width:calc(90vw - var(--fvh)*5);
    }
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

#promos{
    height: calc(var(--fvh)*70);
    width:100%;
}
#promos a{
    display: block;
    width:100%;
    height:100%;
    background-image: url("https://ventasradioramaoccidente.com/assets/uploads/promos/1/promo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

#stationSrch{
    overflow:visible;
    padding-bottom: calc(var(--fvh)*11);
    position:relative;
}

#srchForm{
    /*height:30vh;*/
    height:max-content;
    background-color: #fff;
    padding: 0 6vw;
    display:flex;
    flex-wrap: wrap;
    overflow:visible;
}

#srchForm .field{
    width:50%;
    padding:  calc(var(--fvh)*3) 2vw;
    height: calc(var(--fvh)*15);
    display:flex;
    font-size: calc(var(--fvh)*4);
    font-size: 2vw;
    overflow:visible;
}

@media only screen and (max-width: 1300px){
    #srchForm .field{
        font-size: 2vw;
    }
}

#srchForm input{
    font-size: inherit;
    background:transparent;
    color:#000;
    font-family: Qmedium;
    width: 70%;
    padding: .5em .6em;
    border: 2px solid #000;
    border-right: 0;
    border-radius:  10vh 0vh 0vh 10vh;
    height:calc(var(--fvh)*9);
}

#srchForm .cusSel{
    background:transparent;
    color:#000;
    font-family: Qmedium;
    height:calc(var(--fvh)*9);
    width: 70%;
    border-radius:  10vh 0vh 0vh 10vh;
}

#srchForm input::placeholder{
    color: rgba(0, 0, 0, 1);
    transition: color .5s;
}
#srchForm input:focus::placeholder{
    color: rgba(0, 0, 0, 0);
}

#srchForm .field .tag{
    width: 30%;
    font-family: Qmedium;
    background-color:#065fe7;
    color:#fff;
    border-radius:  0vh 10vh 10vh 0vh;
    height:calc(var(--fvh)*9);
    user-select:none;
    pointer-events:none;

}

#stationSrch button{
    /*width: calc(var(--fvh)*24);*/
    width: calc((((100% - 12vw) / 2) - 4vw) * .3);
    height:calc(var(--fvh)*8);
    border-radius: calc(var(--fvh)*5);
    background-color: #00CC44;
    transition: background-color .3s ;
    background-image:url('https://ventasradioramaoccidente.com/assets/static/search.svg');
    background-position:center;
    background-repeat: no-repeat;
    background-size: calc(var(--fvh)*6);
    position:absolute;
    right: 8vw;
    bottom:0;
    cursor:pointer;
}

#stationSrch button:hover{
    background-color: #00AA00;
}


#dashEven{
    background-color:rgba(0, 0, 0, .5);
    border-radius: calc(var(--fvh)*5);
    padding: 1.5vw;
    height:calc(var(--fvh)*60);
    margin: 0vh 10vw;
}


#dashEven #evenBox{
    height: 100%;
    width: 100%;
    padding-bottom: calc(var(--fvh)*5);
    display:flex;
    position:relative;
}

#dashEven #evenBox div.but{
    position:absolute;
    width: 25%;
    height:100%;
    opacity: 0;
    z-index:5;
    cursor:pointer;
}
#dashEven #evenBox div.but:first-child{
    left: 0;
}
#dashEven #evenBox div.but:last-child{
    right: 0;
}

#dashEven #evenBox .event-card{
    width:50%;
    top: 0;
    position:absolute;
    border-radius: calc(var(--fvh)*3);
    background-color:rgba(255,255,255,.7);
    margin-right: calc(var(--fvh)*3);
    transition: background-color 1s, left 1s, top 1s, height 1s, opacity 1s;
}
#dashEven #evenBox .event-card:last-child{
    margin:0;
}

#dashEven #evenBox .event-card.step-0{
    opacity: 0;
    left: -50%;
    top: 10%;
    height:70%;
    z-index:0;
}
#dashEven #evenBox .event-card.step-1{
    opacity: 1;
    left: 0%;
    top: 5%;
    height:85%;
    z-index:1;
}
#dashEven #evenBox .event-card.step-2{
    opacity: 1;
    left: 25%;
    background-color:rgba(255,255,255,1);
    height:100%;
    z-index:3;
}

/*#dashEven #evenBox .event-card.step-2 div.img span.fech{*/
    /*height:1em !important;*/
/*}*/


#dashEven #evenBox .event-card.step-3{
    opacity: 1;
    left: 50%;
    top: 5%;
    height:85%;
    z-index:1;
}
#dashEven #evenBox .event-card.step-4{
    opacity: 0;
    left: 100%;
    top: 10%;
    height:70%;
    z-index:0;
}

#dashEven #evenBox .event-card div.img{
    height:100%;
    width:100%;
    background-size: cover;
    background-position: center;
}
#dashEven #evenBox .event-card div.img *{
    overflow:visible;
    padding: .3em 0;
}
#dashEven #evenBox .event-card div.img div.info{
    font-family: Qmedium;
    font-size: calc(var(--fvh)*5);
    color: #FFF;
    text-align: center;
    text-shadow: -4px 4px 1px #000;
    height:100%;
    width:100%;
    padding: calc(var(--fvh)*2);
    flex-direction: column;
    /*word-break: break-all;*/
    overflow:visible;
    display:flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}
#dashEven #evenBox .event-card div.img p{
    background: rgba(0,0,0,.5);
    padding:calc(var(--fvh)*2);
    border-radius:calc(var(--fvh)*2);
}

#dashEven #evenBox .event-card div.img p.fech, #dashEven #evenBox .event-card div.img p.loc{
    font-size: .7em;
    /*height: 1em;*/
    /*transition: height .8s;*/
    /*height: max-content;*/
}

@media only screen and (max-width: 1300px){
    #dashEven #evenBox .event-card div.img p.loc{
        display:none;
    }
}

#dashEven #evenBox .event-card div.img p:not(:last-child){
    /*border-bottom: 2px dashed rgba(255, 255, 255, .3);*/
    margin-bottom:calc(var(--fvh)*2);
}
#dashEven #evenBox .event-card a.goEv{
    height:0%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 1s, opacity 1s;
    cursor:pointer;
    background-color: rgb(255, 124, 26);
    opacity:0;
    font-size:calc(var(--fvh)*4);
    width: 100%;
    position:absolute;
    bottom:0;
}


#dashEven #evenBox .event-card.step-2 a.goEv{
    height:15%;
    opacity:1;
}
#dashEven #evenBox .event-card a.goEv p{
    padding:  .4em .6em .4em .6em;
    font-family:Qbold;
    border-radius: 2em;
    color: #fff;
    position:relative;
    overflow:visible;
    line-height:1em;
}

#dashEven #evenBox .event-card a.goEv p span{
    background-image:url('https://ventasradioramaoccidente.com/assets/static/rigArr.svg');
    width:1em;
    height:1em;
    position:absolute;
    right:-1.55em;
    background-size:1em;
    background-repeat:no-repeat;
    transition: transform .5s;
    animation: gogogo .5s linear infinite alternate;
    transform: rotate(0deg);
}

@keyframes gogogo {
    0%   { right: -.5em; }
    100% { right: -.8em; }
}

#states-bann, #eve-bann, #bus-bann{
    padding:calc(var(--fvh)*5);
    font-size:calc(var(--fvh)*7);
    font-family:Qbold;
}

#states-grid, #netw-grid{
    margin: 0 10.5vw;
    margin-bottom: calc(var(--fvh)*10);
    display: grid;
    grid-template-columns: repeat(4, 19.2vw);
    grid-gap: .5vw;
    height:auto;
}
#netw-grid{
    margin-bottom: calc(var(--fvh)*10);
}

#states-grid a.sqr, #netw-grid a.sqr{
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat no-repeat;
    transition:  background-size 1s;
    /*position: inherit; */
    width:19.2vw;
    height:19.2vw;
    /*background-color: red;*/
    color: #fff;
    grid-column: span 1;
    /*background-color: #00ff00;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    line-height: 1em;
    transition: box-shadow 500ms, text-shadow .5s, background-size 1s;
    box-shadow: inset 0px 0px 30vw 30vw rgba(0,0,0,0.4);
    cursor: pointer;
    text-shadow: 0px 0px 0px #000000;
    position: relative;
    font-family: Qbold;
}

#states-grid a.sqr p, #netw-grid a.sqr p{
    overflow:visible;
}

@media only screen and (max-width: 900px){
    #states-grid, #netw-grid{
        margin: 4vw;
        display: grid;
        grid-template-columns: repeat(3, 29.3vw);
        grid-gap: 1vw;
    }
    #states-grid a.sqr, #netw-grid a.sqr{
        width:29.3vw;
        height:29.3vw;
        font-size: 3vw;
    }
    
    #states-bann{
        padding:5vw;
        font-size:10vw;
    }

}

#states-grid a.sqr:not(.vue), #netw-grid a.sqr:not(.vue){
    background-image:none !important;
}

#states-grid a.sqr:hover, #netw-grid a.sqr:hover{
    background-size: 110%;
}

#states-grid a.sqr:after, #netw-grid a.sqr:after{
    content: "";
    display: block;
    /*height: 0;*/
    padding-bottom:100%;
}
#states-grid a.sqr p:not(.photo-cc){
    overflow: visible;
}

#states-grid a.sqr p.photo-cc{
    margin: 0;
    bottom:0;
    position: absolute;
    font-family: 'Qmedium';
    font-size: .3em;
    opacity: 0;
    transition: opacity 1s;
    overflow: visible;
}

#states-grid a.sqr:hover, #netw-grid a.sqr:hover{
    box-shadow:inset 0px 0px 30vw 30vw rgba(0,0,0,0.6);
    text-shadow: -3px 3px 1px #000000;      
}
#states-grid a.sqr:hover p.photo-cc{
    opacity: .7;
}

#netw-bann{
    padding:calc(var(--fvh)*7);
    font-size:calc(var(--fvh)*8);
    font-family:Qbold;
}

 p.photo-cc::after{
        /*background-color:#f00;*/
        content:"-.-";
        color:rgba(0,0,0,0);
        background-image: url('https://ventasradioramaoccidente.com/assets/static/cc.png');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
}



/*@media only screen and ((orientation:portrait) or (max-width: 1000px)) {*/
@media only screen and (max-width: 1100px){
    #dashBusq h1{
        font-size: 4.5vw;
        margin-bottom: calc(var(--fvh)*1);
    }
    #srchForm{
        height:max-content;
    }
    #srchForm .field{
        width:100%;
        padding: calc(var(--fvh)*1) 2vw;
        height: calc(var(--fvh)*11);
        font-size: 4vw;
    }
    #stationSrch button{
        width: calc(((100% - 12vw) - 4vw) * .3);
    }
    #states-bann, #eve-bann, #bus-bann {
        padding: 4vw;
        font-size: 6vw;
    }
    #dashEven{
        padding: calc(var(--fvh)*2);
        margin: 0vh 2vw;
        height:50vw;
    }
    #dashEven #evenBox .event-card div.img p{
        font-size: 4vw !important;
    }
    #dashEven #evenBox .event-card .goEv{
        font-size:3.5vw !important;
    }
}