/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16-sep-2015, 1:28:01
    Author     : it
*/

/* INICIO RULES */

#info-central{
    padding-top: 4px;
}

.marco-tablas{
    border: 1px solid #777;
    background-color: #f5f5f5;
    border-radius: 4px;
    height: 373px;
    background-image: url('../imgs/table-loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
}

.marco-tablas tbody tr{
    height: 27px;
}

.tit-arr-part{
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}

.marco-tablas table{
    width: 100%;
    text-align: center;
    //background-color: #eed3d7;
    perspective: 1200px;
    perspective-origin: center left;
}
.marco-tablas > table > tbody {
    transform-style: preserve-3d;
}
.marco-tablas > table > tbody > tr{
    transform-style: preserve-3d;
    transition: transform 0.5s linear;
    
    transform: rotateY(0deg);
    transform-origin: top left;
}
.marco-tablas > table > tbody > tr.oculto{
    transform: rotateY(-90deg);
}

.marco-tablas table thead{
    font-weight: bold;
    vertical-align: bottom;
    border-bottom: 1px solid #777;
    line-height: 1;
    background-color: hsl(225, 40%, 75%);
}
.marco-tablas .tbl-col-horario{
    width: 60px;
}
.marco-tablas .tbl-col-empresa{
    width: 42%;
}
.marco-tablas .tbl-col-ciudad{
    width: auto;
}
table#t_partidas > tbody > tr:nth-of-type(2n+1){
    background-color: hsl(99, 40%, 92%);
}
table#t_arribos > tbody > tr:nth-of-type(2n+1){
    background-color: hsl(225, 40%, 92%);
}
table#t_arribos > tbody > tr:nth-of-type(2n), table#t_partidas > tbody > tr:nth-of-type(2n){
    background-color: #f9f9f9;
}
#t_partidas thead{
    background-color: hsl(99, 40%, 62%);
}
#t_arribos thead{
    background-color: hsl(243, 39%, 66%);
}
#panel-servicios{
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #f7f7f7;
    text-align: center;
    padding-top: 0px; //66px; //con imagen de estructura de terminal
}

.btn-servicios{
    border-radius: 6px;
    border: 2px solid #777;
    background-color: #fafafa;
    width: 84px;
    height: 85px;
    display: inline-block;
    margin: 5px 4px;
    font-size: 10px;
    padding-top: 4px;
    line-height: 0.7; //antes 0.8
}
.btn-municipalidad{
    border-radius: 6px;
    border: 2px solid #777;
    display: inline-block;
    margin: 5px 4px;
    width:165px;
    height: 85px;
    font-size: 10px;
    padding-top: 4px;
    background: url('../imgs/munineuquen.png') center center no-repeat;
    background-size: 96% auto;
    line-height: 0.7; //antes 0.8
}

#panel-servicios a{
    color:hsl(243, 54%, 37%);
    text-decoration: none;
    //background-po
    
}
#panel-servicios a:hover, #panel-servicios i:hover{
    color: hsl(203, 87%, 48%);
}

.busca-viaje{
    //border: solid 1px #000;
    background-color: hsl(343, 100%, 46%);
    padding: 4px 8px;
    margin-top: 5px;
    margin-left: -7px;
    border-radius: 6px;
    text-align: center;
    color: #f7f7f7;
}

.busca-viaje span{
    font-size: 16px;
}

.busca-viaje table{ width: 100%;}
.busca-viaje img{max-width: 100%;display: inline-block;}

#fieldDestinoSearch{ width: 100%;}
#col-btn-busca{ width: 90px;
}
#banners-grupo{
    text-align: center;
}
#banners-grupo img{max-width: 100%;display: inline-block;}

.col-ostende,.col-liniers{
    margin:6px 0px;
    padding: 0px 4px;
    display: inline-block;
    width: 100%;
}

.grayedlayer{
    position: fixed;
    top:0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.85);
}

.popup-detail{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #f7f7f7;
    //border: 1px solid #555;
    border-radius: 6px;
    min-width: 250px;
    width: 90%;
    min-height: 200px;
    max-width: 800px;
    max-height: 600px;
    //padding: 10px;
    //width: 95%;
    //height: 95%;
    
}
#content-detail{
    margin: 10px;
}
#closepop{
    position: absolute;
    border-radius: 50%;
    padding: 3px;
    background-color: rgba(255,120,120,1);
    color: #fff;
    right: -12px;
    top: -12px;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 16px;
    
}
#closepop:hover{
    background-color: rgba(255,30,30,1);
}
.nooverflow{
    overflow: hidden;
}
#loading{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}


/* ICONOS RULES */
.icon-services{
    font-family: 'eton_iconsregular';
    font-size: 72px;
    font-style: normal;
}

/*.icon-services::after{
    content: '\A';
    white-space: pre;
}*/

.boleterias::before{
    content: 'b';
}
.encomiendas::before{
    content: 'e';
}.taxi::before{
    content: 't';
}.cajero::before{
    content: 'c';
}.regalos::before{
    content: 'r';
}
.servicios::before{
    content: 's';
}
.ubicacion::before{
    content: 'u';
}

/* SIZE RULES */

@media (max-width: 767px){ /* Modificaciones para tamaño xs */
    #panel-servicios a{
        font-size: 1.4vw;
    }
    .icon-services{
        font-size: 10vw;
    }
    .eton-col-central{
        top:0px !important;
        transform: translateY(-100%);
    }
    .menu{
        //margin-bottom: 64px !important;
    }
    .btn-servicios{
        width: 12vw;
        height: 12vw;
        max-height: 85px;
        margin: 0.7vw 0.1vw;
        box-sizing: border-box;
    }
    .btn-municipalidad{
        width: 18vw;
        max-height: 85px;
        height: 12vw;
        margin: 0.7vw 0.1vw;
        box-sizing: border-box;
    }
    .eton-col-lateral:first-child{
        margin-bottom: 10px;
    }
    .busca-viaje{
        margin-left: 0px;
        margin-right: 0px;
        
    }
}



@media (max-width: 991px){
    .eton-col-central{
        position: absolute;
        left: -15px;
        right: -15px;
        top: -95px;
        //transform: translateY(-100%);
    }
    #terminal{
        display: none;
    }
    #panel-servicios{
        padding-top: 0px;
        border: none;
        border-radius: 0px;
    }
    .row.header{
        margin-bottom: 100px;
    }
}
@media (max-width: 699px){ /* Fix margen para servicios desde el menu */
    .row.header{
        margin-bottom: 14.5vw;
    }
}
@media (max-width: 450px){
    .row.header{
        margin-bottom: 45vw;
    }
    .btn-servicios{
        width: 20vw;
        height: 20vw;
        max-height: 85px;
        margin: 0.7vw 0.5vw;
        box-sizing: border-box;
    }
    .btn-municipalidad{
        width: 42vw;
        max-height: 85px;
        height: 20vw;
        margin: 0.7vw 0.5vw;
        box-sizing: border-box;
    }
    #panel-servicios a{
        font-size: 2.2vw;
    }
    .icon-services{
        font-size: 17vw;
    }
    .marco-tablas tbody tr{
        font-size: 11px;
    }
}

@media (max-width: 355px){
    .marco-tablas tbody tr{
        font-size: 9px;
    }
    
}

@media (min-width: 768px){ /* Modificaciones para tamaño sm */
    .marco-tablas tbody tr{
        font-size: 11px;
    }
}

@media (min-width: 992px){ /* Modificaciones para tamaño md */
    .eton-col-central{
        width: 24% !important;
    }
    .eton-col-lateral{
        width: 38% !important;
    }
    .eton-col-central, .eton-col-lateral{
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .btn-servicios{
        width: 90px;
    }
    .btn-municipalidad{
        width: 191px;
    }
}

@media (min-width: 1200px){ /* Modificaciones para tamaño lg */
    .btn-servicios{
        width: 110px;
        height: 85px;
        margin: 5px 4px;
        font-size: 12px;
    }
    .btn-municipalidad{
        width: 230px;
    }
    .icon-services{
        font-size: 72px;
    }
    .marco-tablas tbody tr{
        font-size: 14px;
    }
    #destinosearch{
        margin-top: 30px;
    }
}

/* SACADO POR DECISION DEL CLIENTE ANIMACION DE MONTAÑAS DE FONDO CON COLECTIVO
.cielo{
    background-color: #a5cbd9;
    height: 120px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.nubes-back, .montanas-back, .nubes-1, nubes-2, #camino{
    height: 120px;
    width: 100%;
    //background: url('../imgs/camino.png') bottom repeat-x #9acfea;
}
.nubes-back{
    background: url('../imgs/back_nubes_fondo.png') repeat-x;
    animation: aniClouds 1364s linear infinite;
}
.montanas-back{
    background: url('../imgs/back_montanias.png') repeat-x;
    animation: aniMountains 753s linear infinite;
}
.nubes-1{
    background: url('../imgs/back_nubes_frente1.png') repeat-x;
    animation: aniClouds 500s linear infinite;
}
.nubes-2{
    background: url('../imgs/back_nubes_frente2.png') repeat-x;
    animation: aniClouds 300s linear infinite;
}
#camino{
    background: url('../imgs/camino.png') repeat-x;
    animation: aniRoad 1s linear infinite;
}

#colectivo{
    position: absolute;
    left: 5px;
    bottom:5px;
}

#bandera{
    position: absolute;
    right:15px;
    bottom: 1px;
}

#terminal{
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateY(-60%) translateX(-50%);
}*/