full responsive

css/all.css

@@ -43,6 +43,7 @@ a:focus {
     margin-bottom: 40px;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
     height: 57px;
+    display: block;
 }
 .navbar-btn {
     box-shadow: none;
@@ -76,6 +77,10 @@ a:focus {
     color: #ec1c24;
     transition: all 0.3s;
 }
+#dropdownNotificaciones{
+    color: #fff!important;
+    background: #bcbcbc2e;
+}
 #sidebar.active {
     margin-left: -250px;
 }
@@ -86,10 +91,10 @@ a:focus {
     border-bottom: 1px solid #ec5e69;
 }
 .width_img {
-    width: 120px;
+    width: 190px;
     float: none;
     margin: auto;
-    padding: 14px;
+    padding: 11px;
 }
 #sidebar ul.components {
     padding: 20px 0;
@@ -2136,13 +2141,13 @@ label {
     background: transparent;
     transition: all 0.3s;
 }
-.body_prueba {
+.body_prueba_nueva {
     padding: 40px 50px;
     background: #fff;
     margin-bottom: 40px;
     margin: 0 15px 40px 15px;
 }
-.body_prueba .contenedor_pruebas h1 {
+.body_prueba_nueva .contenedor_pruebas h1 {
     font-size: 18px;
     padding: 0;
     color: #949494;
@@ -2151,13 +2156,13 @@ label {
 .titulo_pregunta {
     padding: 10px 0;
 }
-.body_prueba .contenedor_pruebas .numero_pregunta p {
+.body_prueba_nueva .contenedor_pruebas .numero_pregunta p {
     color: #fd4b4b;
     padding: 0 15px;
     margin-bottom: 0;
     font-weight: bold;
 }
-.body_prueba .contenedor_pruebas .titulo_pregunta span {
+.body_prueba_nueva .contenedor_pruebas .titulo_pregunta span {
     color: #878787;
     padding: 0 15px 0 0;
     margin-bottom: 0;
@@ -2297,4 +2302,1530 @@ input.input_pregunta:focus {
 }
 .form-group-guardar-prueba {
     text-align: right;
+}
+.header_mobile {
+    display: none;
+}
+.dl-menuwrapper {
+    width: 100%;
+    max-width: 100%;
+    float: left;
+    position: relative;
+    -webkit-perspective: 1000px;
+    -moz-perspective: 1000px;
+    perspective: 1000px;
+    z-index: 9;
+    -webkit-perspective-origin: 50% 200%;
+    -moz-perspective-origin: 50% 200%;
+    perspective-origin: 50% 200%;
+}
+
+.dl-menuwrapper:first-child {
+    margin-right: 0px;
+}
+.dl-menuwrapper button {
+    background: #fd4b4b;
+    border: none;
+    width: 50px;
+    height: 45px;
+    color: #fff;
+    text-indent: 0;
+    padding: 11px;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+}
+.dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul {
+    background: #fff;
+    transition: all 0.3s;
+}
+/*.dl-menuwrapper button:after {
+    content: '';
+    position: absolute;
+    width: 68%;
+    height: 5px;
+    background: #fff;
+    top: 10px;
+    left: 16%;
+    box-shadow:
+        0 10px 0 #fff,
+        0 20px 0 #fff;
+}
+*/
+.dl-menuwrapper ul {
+    padding: 0;
+    list-style: none;
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+.dl-menuwrapper li {
+    position: relative;
+}
+
+.dl-menuwrapper li a {
+    display: block;
+    position: relative;
+    padding: 15px 20px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 300;
+    color: #fff;
+    outline: none;
+    font-family: 'montserrat';
+}
+
+.no-touch .dl-menuwrapper li a:hover {
+    background: rgba(253, 75, 75, 0.1);
+}
+
+.dl-menuwrapper li.dl-back > a {
+    padding-left: 30px;
+    background: rgba(0,0,0,0.1);
+}
+
+.dl-menuwrapper li.dl-back:after,
+.dl-menuwrapper li > a:not(:only-child):after {
+    position: absolute;
+    top: 0;
+    line-height: 50px;
+    font-family: 'gotham';
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+}
+
+.dl-menuwrapper li.dl-back:after {
+    left: 10px;
+    color: rgba(212,204,198,0.3);
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.dl-menuwrapper li > a:after {
+    right: 10px;
+    color: rgba(0,0,0,0.15);
+}
+
+.dl-menuwrapper .dl-menu {
+    margin: 5px 0 0 0;
+    position: absolute;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+    -webkit-transform: translateY(10px);
+    -moz-transform: translateY(10px);
+    transform: translateY(10px);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.dl-menuwrapper .dl-menu.dl-menu-toggle {
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+.dl-menuwrapper .dl-menu.dl-menuopen {
+    opacity: 1;
+    pointer-events: auto;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    transform: translateY(0px);
+}
+
+/* Hide the inner submenus */
+.dl-menuwrapper li .dl-submenu {
+    display: none;
+}
+i.fa.fa-angle-right {
+    position: relative;
+    left: 30px;
+}
+i.fa.fa-angle-left {
+    position: relative;
+    padding-right: 20px;
+}
+
+/*
+When a submenu is openend, we will hide all li siblings.
+For that we give a class to the parent menu called "dl-subview".
+We also hide the submenu link.
+The opened submenu will get the class "dl-subviewopen".
+All this is done for any sub-level being entered.
+*/
+.dl-menu.dl-subview li,
+.dl-menu.dl-subview li.dl-subviewopen > a,
+.dl-menu.dl-subview li.dl-subview > a {
+    display: none;
+}
+
+.dl-menu.dl-subview li.dl-subview,
+.dl-menu.dl-subview li.dl-subview .dl-submenu,
+.dl-menu.dl-subview li.dl-subviewopen,
+.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
+.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
+    display: block;
+}
+
+/* Dynamically added submenu outside of the menu context */
+.dl-menuwrapper > .dl-submenu {
+    position: absolute;
+    width: 100%;
+    top: 50px;
+    left: 0;
+    margin: 0;
+}
+
+/* Animation classes for moving out and in */
+
+.dl-menu.dl-animate-out-1 {
+    -webkit-animation: MenuAnimOut1 0.4s;
+    -moz-animation: MenuAnimOut1 0.4s;
+    animation: MenuAnimOut1 0.4s;
+}
+
+.dl-menu.dl-animate-out-2 {
+    -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
+    -moz-animation: MenuAnimOut2 0.3s ease-in-out;
+    animation: MenuAnimOut2 0.3s ease-in-out;
+}
+
+.dl-menu.dl-animate-out-3 {
+    -webkit-animation: MenuAnimOut3 0.4s ease;
+    -moz-animation: MenuAnimOut3 0.4s ease;
+    animation: MenuAnimOut3 0.4s ease;
+}
+
+.dl-menu.dl-animate-out-4 {
+    -webkit-animation: MenuAnimOut4 0.4s ease;
+    -moz-animation: MenuAnimOut4 0.4s ease;
+    animation: MenuAnimOut4 0.4s ease;
+}
+
+.dl-menu.dl-animate-out-5 {
+    -webkit-animation: MenuAnimOut5 0.4s ease;
+    -moz-animation: MenuAnimOut5 0.4s ease;
+    animation: MenuAnimOut5 0.4s ease;
+}
+
+@-webkit-keyframes MenuAnimOut1 {
+    50% {
+        -webkit-transform: translateZ(-250px) rotateY(30deg);
+    }
+    75% {
+        -webkit-transform: translateZ(-372.5px) rotateY(15deg);
+        opacity: .5;
+    }
+    100% {
+        -webkit-transform: translateZ(-500px) rotateY(0deg);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes MenuAnimOut2 {
+    100% {
+        -webkit-transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes MenuAnimOut3 {
+    100% {
+        -webkit-transform: translateZ(300px);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes MenuAnimOut4 {
+    100% {
+        -webkit-transform: translateZ(-300px);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes MenuAnimOut5 {
+    100% {
+        -webkit-transform: translateY(40%);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes MenuAnimOut1 {
+    50% {
+        -moz-transform: translateZ(-250px) rotateY(30deg);
+    }
+    75% {
+        -moz-transform: translateZ(-372.5px) rotateY(15deg);
+        opacity: .5;
+    }
+    100% {
+        -moz-transform: translateZ(-500px) rotateY(0deg);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes MenuAnimOut2 {
+    100% {
+        -moz-transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes MenuAnimOut3 {
+    100% {
+        -moz-transform: translateZ(300px);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes MenuAnimOut4 {
+    100% {
+        -moz-transform: translateZ(-300px);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes MenuAnimOut5 {
+    100% {
+        -moz-transform: translateY(40%);
+        opacity: 0;
+    }
+}
+
+@keyframes MenuAnimOut1 {
+    50% {
+        transform: translateZ(-250px) rotateY(30deg);
+    }
+    75% {
+        transform: translateZ(-372.5px) rotateY(15deg);
+        opacity: .5;
+    }
+    100% {
+        transform: translateZ(-500px) rotateY(0deg);
+        opacity: 0;
+    }
+}
+
+@keyframes MenuAnimOut2 {
+    100% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes MenuAnimOut3 {
+    100% {
+        transform: translateZ(300px);
+        opacity: 0;
+    }
+}
+
+@keyframes MenuAnimOut4 {
+    100% {
+        transform: translateZ(-300px);
+        opacity: 0;
+    }
+}
+
+@keyframes MenuAnimOut5 {
+    100% {
+        transform: translateY(40%);
+        opacity: 0;
+    }
+}
+
+.dl-menu.dl-animate-in-1 {
+    -webkit-animation: MenuAnimIn1 0.3s;
+    -moz-animation: MenuAnimIn1 0.3s;
+    animation: MenuAnimIn1 0.3s;
+}
+
+.dl-menu.dl-animate-in-2 {
+    -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
+    -moz-animation: MenuAnimIn2 0.3s ease-in-out;
+    animation: MenuAnimIn2 0.3s ease-in-out;
+}
+
+.dl-menu.dl-animate-in-3 {
+    -webkit-animation: MenuAnimIn3 0.4s ease;
+    -moz-animation: MenuAnimIn3 0.4s ease;
+    animation: MenuAnimIn3 0.4s ease;
+}
+
+.dl-menu.dl-animate-in-4 {
+    -webkit-animation: MenuAnimIn4 0.4s ease;
+    -moz-animation: MenuAnimIn4 0.4s ease;
+    animation: MenuAnimIn4 0.4s ease;
+}
+
+.dl-menu.dl-animate-in-5 {
+    -webkit-animation: MenuAnimIn5 0.4s ease;
+    -moz-animation: MenuAnimIn5 0.4s ease;
+    animation: MenuAnimIn5 0.4s ease;
+}
+
+@-webkit-keyframes MenuAnimIn1 {
+    0% {
+        -webkit-transform: translateZ(-500px) rotateY(0deg);
+        opacity: 0;
+    }
+    20% {
+        -webkit-transform: translateZ(-250px) rotateY(30deg);
+        opacity: 0.5;
+    }
+    100% {
+        -webkit-transform: translateZ(0px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes MenuAnimIn2 {
+    0% {
+        -webkit-transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes MenuAnimIn3 {
+    0% {
+        -webkit-transform: translateZ(300px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes MenuAnimIn4 {
+    0% {
+        -webkit-transform: translateZ(-300px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes MenuAnimIn5 {
+    0% {
+        -webkit-transform: translateY(40%);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes MenuAnimIn1 {
+    0% {
+        -moz-transform: translateZ(-500px) rotateY(0deg);
+        opacity: 0;
+    }
+    20% {
+        -moz-transform: translateZ(-250px) rotateY(30deg);
+        opacity: 0.5;
+    }
+    100% {
+        -moz-transform: translateZ(0px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes MenuAnimIn2 {
+    0% {
+        -moz-transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes MenuAnimIn3 {
+    0% {
+        -moz-transform: translateZ(300px);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes MenuAnimIn4 {
+    0% {
+        -moz-transform: translateZ(-300px);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes MenuAnimIn5 {
+    0% {
+        -moz-transform: translateY(40%);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes MenuAnimIn1 {
+    0% {
+        transform: translateZ(-500px) rotateY(0deg);
+        opacity: 0;
+    }
+    20% {
+        transform: translateZ(-250px) rotateY(30deg);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translateZ(0px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+@keyframes MenuAnimIn2 {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes MenuAnimIn3 {
+    0% {
+        transform: translateZ(300px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes MenuAnimIn4 {
+    0% {
+        transform: translateZ(-300px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes MenuAnimIn5 {
+    0% {
+        transform: translateY(40%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
+    -webkit-animation: SubMenuAnimIn1 0.4s ease;
+    -moz-animation: SubMenuAnimIn1 0.4s ease;
+    animation: SubMenuAnimIn1 0.4s ease;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
+    -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
+    -moz-animation: SubMenuAnimIn2 0.3s ease-in-out;
+    animation: SubMenuAnimIn2 0.3s ease-in-out;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
+    -webkit-animation: SubMenuAnimIn3 0.4s ease;
+    -moz-animation: SubMenuAnimIn3 0.4s ease;
+    animation: SubMenuAnimIn3 0.4s ease;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
+    -webkit-animation: SubMenuAnimIn4 0.4s ease;
+    -moz-animation: SubMenuAnimIn4 0.4s ease;
+    animation: SubMenuAnimIn4 0.4s ease;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
+    -webkit-animation: SubMenuAnimIn5 0.4s ease;
+    -moz-animation: SubMenuAnimIn5 0.4s ease;
+    animation: SubMenuAnimIn5 0.4s ease;
+}
+
+@-webkit-keyframes SubMenuAnimIn1 {
+    0% {
+        -webkit-transform: translateX(50%);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimIn2 {
+    0% {
+        -webkit-transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimIn3 {
+    0% {
+        -webkit-transform: translateZ(-300px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimIn4 {
+    0% {
+        -webkit-transform: translateZ(300px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimIn5 {
+    0% {
+        -webkit-transform: translateZ(-200px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes SubMenuAnimIn1 {
+    0% {
+        -moz-transform: translateX(50%);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes SubMenuAnimIn2 {
+    0% {
+        -moz-transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes SubMenuAnimIn3 {
+    0% {
+        -moz-transform: translateZ(-300px);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes SubMenuAnimIn4 {
+    0% {
+        -moz-transform: translateZ(300px);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes SubMenuAnimIn5 {
+    0% {
+        -moz-transform: translateZ(-200px);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+@keyframes SubMenuAnimIn1 {
+    0% {
+        transform: translateX(50%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes SubMenuAnimIn2 {
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes SubMenuAnimIn3 {
+    0% {
+        transform: translateZ(-300px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes SubMenuAnimIn4 {
+    0% {
+        transform: translateZ(300px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateZ(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes SubMenuAnimIn5 {
+    0% {
+        transform: translateZ(-200px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
+    -webkit-animation: SubMenuAnimOut1 0.4s ease;
+    -moz-animation: SubMenuAnimOut1 0.4s ease;
+    animation: SubMenuAnimOut1 0.4s ease;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
+    -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
+    -moz-animation: SubMenuAnimOut2 0.3s ease-in-out;
+    animation: SubMenuAnimOut2 0.3s ease-in-out;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
+    -webkit-animation: SubMenuAnimOut3 0.4s ease;
+    -moz-animation: SubMenuAnimOut3 0.4s ease;
+    animation: SubMenuAnimOut3 0.4s ease;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
+    -webkit-animation: SubMenuAnimOut4 0.4s ease;
+    -moz-animation: SubMenuAnimOut4 0.4s ease;
+    animation: SubMenuAnimOut4 0.4s ease;
+}
+
+.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
+    -webkit-animation: SubMenuAnimOut5 0.4s ease;
+    -moz-animation: SubMenuAnimOut5 0.4s ease;
+    animation: SubMenuAnimOut5 0.4s ease;
+}
+
+@-webkit-keyframes SubMenuAnimOut1 {
+    0% {
+        -webkit-transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateX(50%);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimOut2 {
+    0% {
+        -webkit-transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimOut3 {
+    0% {
+        -webkit-transform: translateZ(0px);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateZ(-300px);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimOut4 {
+    0% {
+        -webkit-transform: translateZ(0px);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateZ(300px);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes SubMenuAnimOut5 {
+    0% {
+        -webkit-transform: translateZ(0);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateZ(-200px);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes SubMenuAnimOut1 {
+    0% {
+        -moz-transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        -moz-transform: translateX(50%);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes SubMenuAnimOut2 {
+    0% {
+        -moz-transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        -moz-transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes SubMenuAnimOut3 {
+    0% {
+        -moz-transform: translateZ(0px);
+        opacity: 1;
+    }
+    100% {
+        -moz-transform: translateZ(-300px);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes SubMenuAnimOut4 {
+    0% {
+        -moz-transform: translateZ(0px);
+        opacity: 1;
+    }
+    100% {
+        -moz-transform: translateZ(300px);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes SubMenuAnimOut5 {
+    0% {
+        -moz-transform: translateZ(0);
+        opacity: 1;
+    }
+    100% {
+        -moz-transform: translateZ(-200px);
+        opacity: 0;
+    }
+}
+
+@keyframes SubMenuAnimOut1 {
+    0% {
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(50%);
+        opacity: 0;
+    }
+}
+
+@keyframes SubMenuAnimOut2 {
+    0% {
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes SubMenuAnimOut3 {
+    0% {
+        transform: translateZ(0px);
+        opacity: 1;
+    }
+    100% {
+        transform: translateZ(-300px);
+        opacity: 0;
+    }
+}
+
+@keyframes SubMenuAnimOut4 {
+    0% {
+        transform: translateZ(0px);
+        opacity: 1;
+    }
+    100% {
+        transform: translateZ(300px);
+        opacity: 0;
+    }
+}
+
+@keyframes SubMenuAnimOut5 {
+    0% {
+        transform: translateZ(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateZ(-200px);
+        opacity: 0;
+    }
+}
+
+/* No JS Fallback */
+.no-js .dl-menuwrapper .dl-menu {
+    position: relative;
+    opacity: 1;
+    -webkit-transform: none;
+    -moz-transform: none;
+    transform: none;
+}
+
+.no-js .dl-menuwrapper li .dl-submenu {
+    display: block;
+}
+
+.no-js .dl-menuwrapper li.dl-back {
+    display: none;
+}
+
+.no-js .dl-menuwrapper li > a:not(:only-child) {
+    background: rgba(0,0,0,0.1);
+}
+
+.no-js .dl-menuwrapper li > a:not(:only-child):after {
+    content: '';
+}
+
+/* Colors for demos */
+
+/* Demo 1 */
+.demo-1 .dl-menuwrapper button {
+    background: #26ae62;
+}
+
+.demo-1 .dl-menuwrapper button:hover,
+.demo-1 .dl-menuwrapper button.dl-active,
+.demo-1 .dl-menuwrapper ul {
+    background: #108242;
+}
+
+/* Demo 2 */
+.demo-2 .dl-menuwrapper button {
+    background: #e86814;
+}
+
+.demo-2 .dl-menuwrapper button:hover,
+.demo-2 .dl-menuwrapper button.dl-active,
+.demo-2 .dl-menuwrapper ul {
+    background: #D35400;
+}
+
+/* Demo 3 */
+.demo-3 .dl-menuwrapper button {
+    background: #08cbc4;
+}
+
+.demo-3 .dl-menuwrapper button:hover,
+.demo-3 .dl-menuwrapper button.dl-active,
+.demo-3 .dl-menuwrapper ul {
+    background: #00b4ae;
+}
+
+/* Demo 4 */
+.demo-4 .dl-menuwrapper button {
+    background: #90b912;
+}
+
+.demo-4 .dl-menuwrapper button:hover,
+.demo-4 .dl-menuwrapper button.dl-active,
+.demo-4 .dl-menuwrapper ul {
+    background: #79a002;
+}
+
+/* Demo 5 */
+.demo-5 .dl-menuwrapper button {
+    background: #744783;
+}
+
+.demo-5 .dl-menuwrapper button:hover,
+.demo-5 .dl-menuwrapper button.dl-active,
+.demo-5 .dl-menuwrapper ul {
+    background: #643771;
+}
+.filtros_resp{
+    display: none;
+}
+.dl-menuwrapper button:after {
+    content: '';
+    position: absolute;
+    width: 68%;
+    height: 5px;
+    background: #fff;
+    top: 10px;
+    left: 16%;
+    box-shadow: 0 10px 0 #fff, 0 20px 0 #fff;
+}
+.dl-menuwrapper button:hover:after {
+    content: '';
+    position: absolute;
+    width: 68%;
+    height: 5px;
+    background: #fd4b4b;
+    top: 10px;
+    left: 16%;
+    box-shadow: 0 10px 0 #fd4b4b, 0 20px 0 #fd4b4b;
+    transition: all 0.3s;
+}
+.demo-1 .dl-menuwrapper button {
+    background: #26ae62;
+}
+.logo-responsive {
+    display: none;
+}
+@media (min-width: 320px) and (max-width: 484px){
+.navbar {
+    display: none;
+}
+.logo-responsive {
+    width: 60%;
+    float: right;
+    position: relative;
+    top: -55px;
+    display: block;
+}
+.logo-responsive img {
+    width: 100%;
+}
+.header_mobile {
+    display: block;
+    height: 55px;
+    background: #fff;
+}
+.logo-section img {
+    width: 100%;
+}
+.content-section {
+    padding: 40px 0px;
+}
+.cabeceras {
+    background: #f1f1f1;
+    padding: 10px;
+    display: none;
+}
+.cabeceras_actividad {
+    background: #f1f1f1;
+    padding: 10px;
+    display: none;
+}
+.col20 {
+    width: 100%;
+    float: left;
+    -ms-flex: 0 0 20%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.col25 {
+    width: 100%;
+    float: left;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.footerinfo {
+    padding: 40px;
+    width: 100%;
+    bottom: 0;
+    margin: 0;
+    text-align: center;
+}
+.header_mobile .logo-section {
+    width: 148px;
+    float: left;
+    display: none;
+}
+.dl-menuwrapper .dl-active:after {
+    content: '';
+    position: absolute;
+    width: 68%;
+    height: 5px;
+    background: #fd4b4b;
+    top: 10px;
+    left: 16%;
+    box-shadow: 0 10px 0 #fd4b4b, 0 20px 0 #fd4b4b;
+    transition: all 0.3s;
+}
+.dl-menuwrapper .dl-menuopen li a {
+    display: block;
+    position: relative;
+    padding: 15px 20px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 300;
+    color: #fd4b4b;
+    outline: none;
+    font-family: 'montserrat';
+    background: #fff;
+}
+.btn_agregar_pregunta {
+    border: 1px solid #fd4b4b;
+    color: #fff;
+    background: #fd4b4b;
+    padding: 10px 55px;
+    font-size: 14px;
+    position: relative;
+    cursor: pointer;
+    transition: all 0.3s;
+    margin-bottom: 20px;
+}
+.body_prueba_nueva {
+    padding: 40px 20px;
+    background: #fff;
+    margin-bottom: 40px;
+    margin: 0 15px 40px 15px;
+}
+.img_relaciones {
+    margin: 30px 0;
+    width: 55%;
+    margin-right: 40px;
+    transition: all 0.3s;
+}
+.contenedor_restore {
+    width: 100%;
+    float: none;
+    margin: auto;
+}
+}
+@media (min-width: 568px) and (max-width: 736px){
+.navbar {
+    display: none;
+}
+.logo-responsive {
+    width: 33%;
+    float: right;
+    position: relative;
+    top: -55px;
+    display: block;
+}
+.logo-responsive img {
+    width: 100%;
+}
+.header_mobile {
+    display: block;
+    height: 55px;
+    background: #fff;
+}
+.logo-section img {
+    width: 100%;
+}
+.content-section {
+    padding: 40px 0px;
+}
+.cabeceras {
+    background: #f1f1f1;
+    padding: 10px;
+    display: none;
+}
+.cabeceras_actividad {
+    background: #f1f1f1;
+    padding: 10px;
+    display: none;
+}
+.col20 {
+    width: 100%;
+    float: left;
+    -ms-flex: 0 0 20%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.col25 {
+    width: 100%;
+    float: left;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.footerinfo {
+    padding: 40px;
+    width: 100%;
+    bottom: 0;
+    margin: 0;
+    text-align: center;
+}
+.header_mobile .logo-section {
+    width: 148px;
+    float: left;
+    display: none;
+}
+.dl-menuwrapper .dl-active:after {
+    content: '';
+    position: absolute;
+    width: 68%;
+    height: 5px;
+    background: #fd4b4b;
+    top: 10px;
+    left: 16%;
+    box-shadow: 0 10px 0 #fd4b4b, 0 20px 0 #fd4b4b;
+    transition: all 0.3s;
+}
+.dl-menuwrapper .dl-menuopen li a {
+    display: block;
+    position: relative;
+    padding: 15px 20px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 300;
+    color: #fd4b4b;
+    outline: none;
+    font-family: 'montserrat';
+    background: #fff;
+}
+.btn_agregar_pregunta {
+    border: 1px solid #fd4b4b;
+    color: #fff;
+    background: #fd4b4b;
+    padding: 10px 55px;
+    font-size: 14px;
+    position: relative;
+    cursor: pointer;
+    transition: all 0.3s;
+    margin-bottom: 40px;
+}
+.img_relaciones {
+    margin: 30px 0;
+    width: 40%;
+    margin-right: 40px;
+    transition: all 0.3s;
+}
+.body_prueba_nueva {
+    padding: 40px 20px;
+    background: #fff;
+    margin-bottom: 40px;
+    margin: 0 15px 40px 15px;
+}
+.contenedor_restore {
+    width: 100%;
+    float: none;
+    margin: auto;
+}
+}
+@media (min-width: 768px) and (max-width: 800px){
+.navbar {
+    display: none;
+}
+.logo-responsive {
+    width: 33%;
+    float: right;
+    position: relative;
+    top: -55px;
+    display: block;
+}
+.logo-responsive img {
+    width: 100%;
+}
+.header_mobile {
+    display: block;
+    height: 55px;
+    background: #fff;
+}
+.logo-section img {
+    width: 100%;
+}
+.content-section {
+    padding: 40px 0px;
+}
+.cabeceras {
+    background: #f1f1f1;
+    padding: 10px;
+    display: none;
+}
+.cabeceras_actividad {
+    background: #f1f1f1;
+    padding: 10px;
+    display: none;
+}
+.col20 {
+    width: 100%;
+    float: left;
+    -ms-flex: 0 0 20%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.col25 {
+    width: 100%;
+    float: left;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.footerinfo {
+    padding: 40px;
+    width: 100%;
+    bottom: 0;
+    margin: 0;
+    text-align: center;
+}
+.header_mobile .logo-section {
+    width: 148px;
+    float: left;
+    display: none;
+}
+.dl-menuwrapper .dl-active:after {
+    content: '';
+    position: absolute;
+    width: 68%;
+    height: 5px;
+    background: #fd4b4b;
+    top: 10px;
+    left: 16%;
+    box-shadow: 0 10px 0 #fd4b4b, 0 20px 0 #fd4b4b;
+    transition: all 0.3s;
+}
+.dl-menuwrapper .dl-menuopen li a {
+    display: block;
+    position: relative;
+    padding: 15px 20px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 300;
+    color: #fd4b4b;
+    outline: none;
+    font-family: 'montserrat';
+    background: #fff;
+}
+.panel_options .col-md-4 {
+    width: 100%;
+    flex: 100%;
+    max-width: 100%;
+}
+.historial_candidatos .col-md-8 {
+    width: 100%;
+    flex: 100%;
+    max-width: 100%;
+}
+.historial_candidatos .col-md-4 {
+    width: 100%;
+    flex: 100%;
+    max-width: 100%;
+}
+.img_relaciones {
+    margin: 30px 0;
+    width: 40%;
+    margin-right: 40px;
+    transition: all 0.3s;
+}
+.body_prueba_nueva {
+    padding: 40px 30px;
+    background: #fff;
+    margin-bottom: 40px;
+    margin: 0 15px 40px 15px;
+}
+.tabs_pruebas .test_tab.active p {
+    margin: 0;
+    letter-spacing: 0px;
+    color: #fff;
+}
+.tabs_pruebas .test_tab p {
+    margin: 0!important;
+    letter-spacing: 0px;
+    color: #fff!important;
+}
+.body_prueba_list .modern-Checkbox label {
+    color: #363636;
+    background-color: #ffffff;
+    border-color: #fd4b4b;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: 35px;
+    font-size: 14px;
+    border-radius: 0;
+    transition: all 144ms ease-in-out;
+    width: 100%;
+    letter-spacing: 0;
+}
+.contenedor_restore {
+    width: 100%;
+    float: none;
+    margin: auto;
+}
+}
+@media (min-width:800px) and (max-width: 1050px){
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 3%;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 30rem;
+    padding: .5rem 0;
+    margin: 0.125rem 0 0;
+    font-size: 14px;
+    color: #1b2235;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.15);
+    width: 60%;
+}
+#sidebarCollapse {
+    display: none;
+}
+#dashboardfull{
+    display: none;
+}
+.body_tabs .col-md-6 {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.main .panel h1 {
+    font-size: 17px!important;
+    color: #959595!important;
+    text-transform: uppercase;
+    font-family: 'gudea';
+    letter-spacing: 2px;
+    padding: 0!important;
+    margin: 0!important;
+    position: relative;
+    top: 10px;
+}
+.panel .content_info p {
+    font-size: 28px;
+    color: #25344f;
+    margin: 0;
+    text-align: right;
+    width: 50%;
+    float: left;
+    position: relative;
+    top: 0px;
+}
+.historial_candidatos .col-md-8 {
+    width: 100%;
+    flex: 100%;
+    max-width: 100%;
+}
+.historial_candidatos .col-md-4 {
+    width: 100%;
+    flex: 100%;
+    max-width: 100%;
+}
+.filtros_history .col-md-4 {
+    padding: 0!important;
+}
+.img_relaciones {
+    margin: 30px 0;
+    width: 40%;
+    margin-right: 40px;
+    transition: all 0.3s;
+}
+.body_prueba_nueva {
+    padding: 40px 30px;
+    background: #fff;
+    margin-bottom: 40px;
+    margin: 0 15px 40px 15px;
+}
+.tabs_pruebas .test_tab.active p {
+    margin: 0;
+    letter-spacing: 0px;
+    color: #fff;
+}
+.tabs_pruebas .test_tab p {
+    margin: 0!important;
+    letter-spacing: 0px;
+    color: #fff!important;
+}
+.body_prueba_list .modern-Checkbox label {
+    color: #363636;
+    background-color: #ffffff;
+    border-color: #fd4b4b;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: 35px;
+    font-size: 14px;
+    border-radius: 0;
+    transition: all 144ms ease-in-out;
+    width: 100%;
+    letter-spacing: 0;
+}
+.contenedor_restore {
+    width: 100%;
+    float: none;
+    margin: auto;
+}
 }

header.php

@@ -115,6 +115,110 @@
                 </div>
             </nav>
 
+            <div class="header_mobile">
+                <div class="logo-section">
+                   <a href="index.php"><img src="images/logo.png"></a>
+                </div>
+                <div class="column">
+                    <div id="dl-menu" class="dl-menuwrapper">
+                        <button class="dl-trigger"></button>
+                        <ul class="dl-menu">
+                            <li>
+                                <a href="index.php">Inicio</a>
+                            </li>
+                            <li>
+                               <a href="puestos.php">Puestos</a>
+                            </li>
+                            <li>
+                                <a href="contraseñas.php">Contraseñas</a>
+                            </li>
+                            <li>
+                               <a href="expedientes.php">Expedientes</a>
+                            </li>
+                            <li>
+                               <a href="resultados.php">Resultados</a>
+                            </li>
+                            <li>
+                               <a href="contraseñas.php">Contraseñas</a>
+                            </li>
+                            <li>
+                                <a href="#">Pruebas<i class="fa fa-angle-right" aria-hidden="true"></i></a>
+                                <ul class="dl-submenu">
+                                    <li>
+                                        <a href="#">Crear prueba</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Listado de pruebas</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Aplicar</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Respuestas</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Calificaciones</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                               <a href="#">Configuraciones</a>
+                            </li>
+                            <li>
+                               <a href="#">Historial</a>
+                            </li>
+                            <li>
+                                <a href="#">Tutoriales<i class="fa fa-angle-right" aria-hidden="true"></i></a>
+                                <ul class="dl-submenu">
+                                    <li>
+                                        <a href="#">Manual de Uso Básico</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">¿Qué evalúa cada test?</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Ayuda General</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                                <a href="#">Asistencia Técnica<i class="fa fa-angle-right" aria-hidden="true"></i></a>
+                                <ul class="dl-submenu">
+                                    <li>
+                                        <a href="#">Soporte En Línea</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Soporte Por Ticket</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                               <a href="#">Notificaciones</a>
+                            </li>
+                            <li>
+                                <a href="#">Cuenta<i class="fa fa-angle-right" aria-hidden="true"></i></a>
+                                <ul class="dl-submenu">
+                                    <li>
+                                        <a href="#">Perfil</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Configuraciones</a>
+                                    </li>
+                                    <li>
+                                        <a href="#">Cerrar sesión</a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div><!-- /dl-menuwrapper -->
+                </div>    
+                    </ul>
+                </div>
+            </div>
+    <div class="logo-responsive">
+        <a href="index.php"><img src="images/logo.png"></a>
+    </div>
+
   <!-- Modal ver notificaciones-->
 <div class="modal fade" id="verNotificacion" role="dialog">
     <div class="modal-dialog">
@@ -133,4 +237,265 @@
         </div>
       </div>
     </div>
-</div>
+</div>
+        <script>
+            $(function() {
+                $( '#dl-menu' ).dlmenu();
+            });
+        </script>
+
+
+        <script>
+            /**
+ * jquery.dlmenu.js v1.0.1
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * https://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2013, Codrops
+ * http://www.codrops.com
+ */
+;( function( $, window, undefined ) {
+
+    'use strict';
+
+    // global
+    var Modernizr = window.Modernizr, $body = $( 'body' );
+
+    $.DLMenu = function( options, element ) {
+        this.$el = $( element );
+        this._init( options );
+    };
+
+    // the options
+    $.DLMenu.defaults = {
+        // classes for the animation effects
+        animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
+        // callback: click a link that has a sub menu
+        // el is the link element (li); name is the level name
+        onLevelClick : function( el, name ) { return false; },
+        // callback: click a link that does not have a sub menu
+        // el is the link element (li); ev is the event obj
+        onLinkClick : function( el, ev ) { return false; }
+    };
+
+    $.DLMenu.prototype = {
+        _init : function( options ) {
+
+            // options
+            this.options = $.extend( true, {}, $.DLMenu.defaults, options );
+            // cache some elements and initialize some variables
+            this._config();
+            
+            var animEndEventNames = {
+                    'WebkitAnimation' : 'webkitAnimationEnd',
+                    'OAnimation' : 'oAnimationEnd',
+                    'msAnimation' : 'MSAnimationEnd',
+                    'animation' : 'animationend'
+                },
+                transEndEventNames = {
+                    'WebkitTransition' : 'webkitTransitionEnd',
+                    'MozTransition' : 'transitionend',
+                    'OTransition' : 'oTransitionEnd',
+                    'msTransition' : 'MSTransitionEnd',
+                    'transition' : 'transitionend'
+                };
+            // animation end event name
+            this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
+            // transition end event name
+            this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
+            // support for css animations and css transitions
+            this.supportAnimations = Modernizr.cssanimations,
+            this.supportTransitions = Modernizr.csstransitions;
+
+            this._initEvents();
+
+        },
+        _config : function() {
+            this.open = false;
+            this.$trigger = this.$el.children( '.dl-trigger' );
+            this.$menu = this.$el.children( 'ul.dl-menu' );
+            this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
+            this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#"><i class="fa fa-angle-left" aria-hidden="true"></i>Atrás</a></li>' );
+            this.$back = this.$menu.find( 'li.dl-back' );
+        },
+        _initEvents : function() {
+
+            var self = this;
+
+            this.$trigger.on( 'click.dlmenu', function() {
+                
+                if( self.open ) {
+                    self._closeMenu();
+                } 
+                else {
+                    self._openMenu();
+                }
+                return false;
+
+            } );
+
+            this.$menuitems.on( 'click.dlmenu', function( event ) {
+                
+                event.stopPropagation();
+
+                var $item = $(this),
+                    $submenu = $item.children( 'ul.dl-submenu' );
+
+                if( $submenu.length > 0 ) {
+
+                    var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
+                        onAnimationEndFn = function() {
+                            self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
+                            $item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
+                            $flyin.remove();
+                        };
+
+                    setTimeout( function() {
+                        $flyin.addClass( self.options.animationClasses.classin );
+                        self.$menu.addClass( self.options.animationClasses.classout );
+                        if( self.supportAnimations ) {
+                            self.$menu.on( self.animEndEventName, onAnimationEndFn );
+                        }
+                        else {
+                            onAnimationEndFn.call();
+                        }
+
+                        self.options.onLevelClick( $item, $item.children( 'a:first' ).text() );
+                    } );
+
+                    return false;
+
+                }
+                else {
+                    self.options.onLinkClick( $item, event );
+                }
+
+            } );
+
+            this.$back.on( 'click.dlmenu', function( event ) {
+                
+                var $this = $( this ),
+                    $submenu = $this.parents( 'ul.dl-submenu:first' ),
+                    $item = $submenu.parent(),
+
+                    $flyin = $submenu.clone().insertAfter( self.$menu );
+
+                var onAnimationEndFn = function() {
+                    self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
+                    $flyin.remove();
+                };
+
+                setTimeout( function() {
+                    $flyin.addClass( self.options.animationClasses.classout );
+                    self.$menu.addClass( self.options.animationClasses.classin );
+                    if( self.supportAnimations ) {
+                        self.$menu.on( self.animEndEventName, onAnimationEndFn );
+                    }
+                    else {
+                        onAnimationEndFn.call();
+                    }
+
+                    $item.removeClass( 'dl-subviewopen' );
+                    
+                    var $subview = $this.parents( '.dl-subview:first' );
+                    if( $subview.is( 'li' ) ) {
+                        $subview.addClass( 'dl-subviewopen' );
+                    }
+                    $subview.removeClass( 'dl-subview' );
+                } );
+
+                return false;
+
+            } );
+            
+        },
+        closeMenu : function() {
+            if( this.open ) {
+                this._closeMenu();
+            }
+        },
+        _closeMenu : function() {
+            var self = this,
+                onTransitionEndFn = function() {
+                    self.$menu.off( self.transEndEventName );
+                    self._resetMenu();
+                };
+            
+            this.$menu.removeClass( 'dl-menuopen' );
+            this.$menu.addClass( 'dl-menu-toggle' );
+            this.$trigger.removeClass( 'dl-active' );
+            
+            if( this.supportTransitions ) {
+                this.$menu.on( this.transEndEventName, onTransitionEndFn );
+            }
+            else {
+                onTransitionEndFn.call();
+            }
+
+            this.open = false;
+        },
+        openMenu : function() {
+            if( !this.open ) {
+                this._openMenu();
+            }
+        },
+        _openMenu : function() {
+            var self = this;
+            // clicking somewhere else makes the menu close
+            $body.off( 'click' ).on( 'click.dlmenu', function() {
+                self._closeMenu() ;
+            } );
+            this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
+                $( this ).removeClass( 'dl-menu-toggle' );
+            } );
+            this.$trigger.addClass( 'dl-active' );
+            this.open = true;
+        },
+        // resets the menu to its original state (first level of options)
+        _resetMenu : function() {
+            this.$menu.removeClass( 'dl-subview' );
+            this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
+        }
+    };
+
+    var logError = function( message ) {
+        if ( window.console ) {
+            window.console.error( message );
+        }
+    };
+
+    $.fn.dlmenu = function( options ) {
+        if ( typeof options === 'string' ) {
+            var args = Array.prototype.slice.call( arguments, 1 );
+            this.each(function() {
+                var instance = $.data( this, 'dlmenu' );
+                if ( !instance ) {
+                    logError( "cannot call methods on dlmenu prior to initialization; " +
+                    "attempted to call method '" + options + "'" );
+                    return;
+                }
+                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
+                    logError( "no such method '" + options + "' for dlmenu instance" );
+                    return;
+                }
+                instance[ options ].apply( instance, args );
+            });
+        } 
+        else {
+            this.each(function() {  
+                var instance = $.data( this, 'dlmenu' );
+                if ( instance ) {
+                    instance._init();
+                }
+                else {
+                    instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
+                }
+            });
+        }
+        return this;
+    };
+
+} )( jQuery, window );
+        </script>

nueva-prueba.php

@@ -78,7 +78,7 @@
                     </div>
                 </div>
             </div>
-            <div class="body_prueba">
+            <div class="body_prueba_nueva">
                 <div class="contenedor_pruebas">
                     <h1>Preguntas</h1>
                     <div class="body_preg_indi">

sidebar.php

@@ -10,15 +10,17 @@
     <link rel="stylesheet" href="css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
     <script src="js/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
     <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
-    <link rel="stylesheet" href="css/all.css">
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
     <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <link rel="stylesheet" href="css/all.css">
 
 </head>