@media screen and (max-width:960px) {
    body{width: 100vw; position: relative;}
    .wrapper{width: 90%; margin: auto;}
    .hidden{display: none;}
    .mobile{display: block;}
    .desktop{display: none;}
    main{ display: block; margin-bottom: -10%;}    
    h1{position: absolute; top: 0; left: 50px; }
    #logo1{position: absolute; top: 0; left: 10vw; z-index: 10; display: block;width: 30vw; height: 30vw;}
    footer{}
    main div{width: 80%; margin: 10%;}
    iframe{width:100%; height: 40vw; margin-top: 100px;}
    #agendaCA{position: relative; margin: auto; width: 90%; transform: translateY(-55vw);}
    #servicios ol{display: block; }
    #servicios ol li {width: 50vw; margin: 0vw 4vw; padding-top: 3vw; font-size:3.5vw; position: relative; padding-left: 14vw;  height: 12.5vw;  align-items: center;}
    #servicios ol li img {width: 12vw; position: absolute; top: 0vw; left: 0;}    
    #servicios ol li:nth-child(7), #servicios ol li:nth-child(8) {padding-top: 5vw;}
    #servicios ol li:nth-child(even){transform: translateX(25vw);}
    #metodo{display: block; column-count: 1; column-width: 90%;}
    #metodo div{width: 90%; padding: 2.5%;}
    #metodo img{width: 100%; height: auto;}
    #metodo p{ margin: 25px auto;}
    h3#slogan{ width: 65vw; height: 10vw;margin: 25px auto;}
    a#contactanos{ width: 250px; margin: auto;}
    #efecto article{ width: 100vw; clear: both; }
    #efecto article div{ width: 30vw; }
    img.fxto{ width: 100vw; height: auto;}
    img.loguito{ width: 30vw; margin: 50px 2vw; float: left;}
    #efecto article div{ width: 60vw; float: left;}
    #respaldo p{ width: 80%; margin: auto; font-size: 1.25em; text-align: center;}
    footer{display: block; }
    footer > div{ display: flex; flex-wrap: wrap-reverse;  }
    #fot1{ width: 80%; margin: auto;}
    #fot2{ width: 100%;}
    
    /*-- - nav -  --*/
    nav{width: 100%; z-index: 1; position: relative; top: 0;}
    header{ margin-top: 0px; z-index: 0; position: relative; padding-top: 15vw;}
    nav *{text-align: center; }
    nav ol{display: none; z-index: 1; padding-top: 30vw; }
    @keyframes menuanima{
        0%{padding-top: 0; opacity: 0;}
        100%{padding-top: 30vw; opacity: 1;}
    }
    nav:target ol{display: block; animation: menuanima 1s 0s 1; }
    nav ol li{ width: 100%; height: 80px; margin-right: 0; display: block;}
    nav{width: 100%; z-index: 1; position: relative;}
    
    nav li{ width: 80%;}
    nav li:nth-child(4){ width: 0px; position: absolute; top: 0; left: 0;}
    nav a#close{display: block; z-index: 3;}
    nav ol a{ height: auto; background-color: rgba(0,0,00, .85) ; padding: 30px 0; color: white; text-transform: uppercase; font-size: 1.3em; text-align: center; display: block; color: white; margin: 0 0 0 0; text-decoration: none; font-weight: 200; text-align: right; width: 90%; padding-right: 10%;}
    #menuicon{font-size: 12.5vw; padding: 0px; position: absolute; top: 0px; right: 20px; z-index: 1; margin: 0;}
    li#close{font-size: 5vw; padding: 0px; position: absolute; top: 0px; right: 20px; z-index: 2; margin: 0; width: 10vw;}
    
    #redes{ width: 85%;}
    #redes a{ width: 9vw; height: 9vw; display: block; overflow: hidden; margin: 0 3vw; text-indent: -1000px;}
    #logoTactic{width: 80vw; height: 5vw; overflow: hidden; text-indent: -10000px; background: url(images/logotacticext.png) center / cover no-repeat; text-align: center; margin: 20px auto;    
}




}