/*telefono portrait*/
@media only screen and (max-width: 600px){
    

    .header{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
        
    }
    .headerRecorrido{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
    }

    .redes{
        width: 5vh;
        height: auto;
        
        
    }
    .face, .insta, .yutu{
        width: 3.5vh;
        transition: all 0.3s;
    }

    .face:hover, .insta:hover, .yutu:hover{
        width: 3.5vh;
        transition: all 0.3s;
    }



    .redes div a img{
        
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.3s;
    }

    .redes div a img:hover{
        /*filter: drop-shadow(5px 5px 10px #fff);*/
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .redes div{
        margin-bottom: 33px;
    }

    /*------------------------------------*/
    /*--MENU INICIO--*/
    .logoInicio{
        width: 54.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 47vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }

    .logoInicio:hover{
        width: 54.2vw;
        height: 100%;
        transition: all 0.5s;
    }
    /*--MENU RECORRIDO--*/
    .logoRecorrido {
        width: 25.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 12vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }


    /*------------------------------------*/
    /*--MENU INICIO--*/
    .ayudaInicio{
        width: 4vh;
        height: auto;
        transition: all 1s;
    }
    /*--MENU RECORRIDO--*/
    .ayudaRecorrido {
        width: 4vh;
        height: auto;
        margin-top: 0vh;
        transition: all 1s;
    }
    /*------------------------------------*/


    .inter, .info{
        width: 3vh;
        transition: all 0.3s;
    }

    .inter:hover, .info:hover{
        width: 3vh;
        transition: all 0.3s;
    }

    .ayudaInicio div{
        margin-bottom: 33px;
    }


    .ayudaInicio div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaInicio div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .ayudaRecorrido div{
        margin-bottom: 33px;
    }


    .ayudaRecorrido div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaRecorrido div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }

}

/*telefono landscape*/
@media only screen and (min-width: 600px){
    

    .header{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
        
    }
    .headerRecorrido{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
    }

    .redes{
        width: 5vh;
        height: auto;
        
        
    }
    .face, .insta, .yutu{
        width: 6vh;
        transition: all 0.3s;
    }

    .face:hover, .insta:hover, .yutu:hover{
        width: 6vh;
        transition: all 0.3s;
    }



    .redes div a img{
        
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.3s;
    }

    .redes div a img:hover{
        /*filter: drop-shadow(5px 5px 10px #fff);*/
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .redes div{
        margin-bottom: 15px;
    }

    /*------------------------------------*/
    /*--MENU INICIO--*/
    .logoInicio{
        width: 28.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 14vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }

    .logoInicio:hover{
        width: 28.2vw;
        height: 100%;
        transition: all 0.5s;
    }
    /*--MENU RECORRIDO--*/
    .logoRecorrido {
        width: 12.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 5vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }


    /*------------------------------------*/
    /*--MENU INICIO--*/
    .ayudaInicio{
        width: 4vh;
        height: auto;
        transition: all 1s;
    }
    /*--MENU RECORRIDO--*/
    .ayudaRecorrido {
        width: 4vh;
        height: auto;
        margin-top: 0vh;
        transition: all 1s;
    }
    /*------------------------------------*/


    .inter, .info{
        width: 5vh;
        transition: all 0.3s;
    }

    .inter:hover, .info:hover{
        width: 3vh;
        transition: all 0.3s;
    }

    .ayudaInicio div{
        margin-bottom: 15px;
    }


    .ayudaInicio div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaInicio div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .ayudaRecorrido div{
        margin-bottom: 10px;
    }


    .ayudaRecorrido div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaRecorrido div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }

}

/*tablet portrait*/
@media only screen and (min-width: 768px){
    
    .header{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
    }
    .headerRecorrido{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
    }
    .redes{
        width: 5vh;
        height: auto;
        
        
    }
    .face, .insta, .yutu{
        width: 3.5vh;
        transition: all 0.3s;
    }

    .face:hover, .insta:hover, .yutu:hover{
        width: 3.5vh;
        transition: all 0.3s;
    }



    .redes div a img{
        
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.3s;
    }

    .redes div a img:hover{
        /*filter: drop-shadow(5px 5px 10px #fff);*/
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .redes div{
        margin-bottom: 33px;
    }

    /*------------------------------------*/
    /*--MENU INICIO--*/
    .logoInicio{
        width: 54.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 34vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }

    .logoInicio:hover{
        width: 54.2vw;
        height: 100%;
        transition: all 0.5s;
    }
    /*--MENU RECORRIDO--*/
    .logoRecorrido {
        width: 16.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 8vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }


    /*------------------------------------*/
    /*--MENU INICIO--*/
    .ayudaInicio{
        width: 4vh;
        height: auto;
        transition: all 1s;
    }
    /*--MENU RECORRIDO--*/
    .ayudaRecorrido {
        width: 4vh;
        height: auto;
        margin-top: 0vh;
        transition: all 1s;
    }
    /*------------------------------------*/


    .inter, .info{
        width: 3vh;
        transition: all 0.3s;
    }

    .inter:hover, .info:hover{
        width: 3vh;
        transition: all 0.3s;
    }

    .ayudaInicio div{
        margin-bottom: 33px;
    }


    .ayudaInicio div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaInicio div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .ayudaRecorrido div{
        margin-bottom: 33px;
    }


    .ayudaRecorrido div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaRecorrido div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }
}

/*tablet landscape*/
@media only screen and (min-width: 992px){
    
    .header{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
    }
    .headerRecorrido{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 20px 0;
        z-index: 9999;
    }

    .redes{
        width: 5vh;
        height: auto;
        
        
    }
    .face, .insta, .yutu{
        width: 3.5vh;
        transition: all 0.3s;
    }

    .face:hover, .insta:hover, .yutu:hover{
        width: 3.5vh;
        transition: all 0.3s;
    }



    .redes div a img{
        
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.3s;
    }

    .redes div a img:hover{
        /*filter: drop-shadow(5px 5px 10px #fff);*/
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .redes div{
        margin-bottom: 33px;
    }

    /*------------------------------------*/
    /*--MENU INICIO--*/
    .logoInicio{
        width: 33.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 21vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }

    .logoInicio:hover{
        width: 10.2vw;
        height: 100%;
        transition: all 0.5s;
    }
    /*--MENU RECORRIDO--*/
    .logoRecorrido {
        width: 10.2vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 5vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite;
    }


    /*------------------------------------*/
    /*--MENU INICIO--*/
    .ayudaInicio{
        width: 4vh;
        height: auto;
        transition: all 1s;
    }
    /*--MENU RECORRIDO--*/
    .ayudaRecorrido {
        width: 4vh;
        height: auto;
        margin-top: 0vh;
        transition: all 1s;
    }
    /*------------------------------------*/


    .inter, .info{
        width: 3vh;
        transition: all 0.3s;
    }

    .inter:hover, .info:hover{
        width: 3vh;
        transition: all 0.3s;
    }

    .ayudaInicio div{
        margin-bottom: 33px;
    }


    .ayudaInicio div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaInicio div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .ayudaRecorrido div{
        margin-bottom: 33px;
    }


    .ayudaRecorrido div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaRecorrido div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }
}


/*escritorio grande*/
@media only screen and (min-width: 1400px){
    

    .header{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 1.2vw 1.2vw 0;
        z-index: 9999;
        
    }
    .headerRecorrido{
        width: 100vw;
        height: 2vh;
        position: fixed;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 1.2vw 1.2vw 0;
        z-index: 9999;
        
    }

    .redes{
        width: 5vh;
        height: auto;
        
        
    }
    .face, .insta, .yutu{
        width: 4vh;
        transition: all 0.3s;
    }

    .face:hover, .insta:hover, .yutu:hover{
        width: 5vh;
        transition: all 0.3s;
    }



    .redes div a img{
        
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.3s;
    }

    .redes div a img:hover{
        /*filter: drop-shadow(5px 5px 10px #fff);*/
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .redes div{
        margin-bottom: 2vw;
    }

    /*------------------------------------*/
    /*--MENU INICIO--*/
    .logoInicio{
        width: 23vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 14vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite, fadeIn 2.5s;
        

    }

    .logoInicio:hover{
        width: 23.2vw;
        height: 100%;
        transition: all 0.5s;
    }
    /*--MENU RECORRIDO--*/
    .logoRecorrido {
        width: 7vw;
        height: 100%;
        position: relative;
        display: flex;
        right: 0vw;
        top: 4vw;
        align-items: center;
        transition: all 1s;
        animation: levitateAnimation 2.5s infinite, fadeIn 2.5s;
        
    }


    /*------------------------------------*/
    /*--MENU INICIO--*/
    .ayudaInicio{
        width: 4vh;
        height: auto;
        transition: all 1s;
    }
    /*--MENU RECORRIDO--*/
    .ayudaRecorrido {
        width: 4vh;
        height: auto;
        margin-top: 0vw;
        transition: all 1s;
    }
    /*------------------------------------*/


    .inter, .info{
        width: 3vh;
        transition: all 0.3s;
    }

    .inter:hover, .info:hover{
        width: 4vh;
        transition: all 0.3s;
    }

    .ayudaInicio div{
        margin-bottom: 2vw;
    }


    .ayudaInicio div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaInicio div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }



    .ayudaRecorrido div{
        margin-bottom: 2vw;
    }


    .ayudaRecorrido div img{
        filter: drop-shadow(0px 0px 10px #fff);
        transition: all 0.2s;
    }

    .ayudaRecorrido div img:hover{
        filter: drop-shadow(0px 0px 0px #fff);
    }

}