/*
@font-face {font-family: "Ginga";    src: url('styles/fonts/ginga.ttf'); }
@font-face {font-family: "Grandesign serif bold";    src: url('styles/fonts/grandesign_neue_serif_bold.ttf'); }
@font-face {font-family: "Grandesign serif regular";    src: url('styles/fonts/grandesign_neue_serif_regular.ttf'); }
*/

body{
 background:#fff;
}



  html, body{ margin:0px; padding:0px; }
  .bodytt{ display:block; width:100%; height:100%; }
   
    .backgorund_default{
      position:relative;
      width:100% ;
      height: 100% ;
      padding:0px;
      background-color: #fff !important;
      background: url("../images/v3.png") no-repeat;  background-size: 100%;
    border: .5px solid #fff;
    } 

    #main{
      position:relative;
     /*  display:block;width:80%;
      padding:50px 10%;
      height:300px;*/
     /* top: 60px;*/
      margin: 0 auto;
      width:100% auto;
      min-height: 745px;
     /* max-height: 660px;*/
      min-width: 1200px;
     /* max-width: 1400px;
      max-height: 1200px;*/
      height: auto;
      padding:0px;
      background-color: #fff !important;
    
      background: url("../images/v3.png") no-repeat;  background-size: 100%;

    } 

        #main2{
      position:relative;
     /*  display:block;width:80%;
      padding:50px 10%;
      height:300px;*/
     /* top: 60px;*/
      margin: 0 auto;
      width:100% auto;
      min-height: 700px;
      /*min-height: 800px;*/
     /* max-height: 660px;*/
      min-width: 1200px;
     /* max-width: 1400px;
      max-height: 1200px;*/
      height: auto;
      padding:0px;
      background-color: #fff !important;
    
      background: url("../images/v3.png") no-repeat;  background-size: 100%;

    } 


#respondCanvas, .can_lineas{
 width:100%;
 height:100%; 

 color:none;
 border: 5px solid green;
}

#canvas-wrap { position:relative } /* Make this a positioned parent */

#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }

.box_fases{   
position:absolute;  
box-shadow: 2px 5px rgba(50,200,20,1); 
width: 50px;
min-width: 70px;
text-align: center; cursor: pointer;
transition: .5s;
    padding: 0px 6px 0px 6px;
    background-color: rgb(255,255,255);
 z-index: 10;
color: rgba(50,200,20,1);
}

.box_fases:hover{
  width: 120px;
  /*box-shadow: 2px 5px rgba(133,200,30,.1); */
  box-shadow: none;
  background-color: rgba(50,200,20,1); 
  -webkit-user-select: none; /* Chrome all / Safari all */ 
                 -moz-user-select: none; /* Firefox all */ 
                 -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */
                  -o-user-select: none; 
                 user-select: none; 
border: transparent !important;
 color: #fff;
}

.box_fases_informacion{
  position:absolute;
  /*top: -200px;/*100*/
  
  max-width: 220px;
  width: auto;
  height: auto;
  /*background-color: rgba(0,100,100,.5);*/
  background-color: #000;
  padding: 1px 3px 1px 3px;
  text-align: left;
  -webkit-user-select: none; /* Chrome all / Safari all */ 
                 -moz-user-select: none; /* Firefox all */ 
                 -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */
                  -o-user-select: none; 
                 user-select: none; 
                 cursor: default;
                 display: none;

  font-size: 12px;
  color:#fff;
  border-radius: 5px;
}

/*Enlaces de las box_fases */

.box_fases a:visited, .box_fases a:active, .box_fases a,
.a_box_f:visited, .a_box_f:active, .a_box_f,{
    font-family: Arial, Verdana;
    font-weight: normal;
    text-decoration: none;
    color: rgba(0,100,100,.5);
    transition:.3s;
     font-size: 16px;
  }

  .box_fases a:hover,
  .a_box_f:hover{
    font-weight: bold;
    text-decoration: none;
   color: rgba(0,100,100,.5);
    font-size: 20px;
  }


/*TOOL*/

.tool {
   display: inline-block;
   position: relative;
   
  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
   border-radius:10px;
  text-decoration: none;
  padding: 10px;
}
.tooltip{
   position: absolute;
   background: rgb(0,153,51);;
   color: #fff;
   border-radius:10px;
  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
  padding: 10px;
   z-index: 3;
   display: none;
  background-color: rgb(0,153,51);;
}



.tooltip-seg{
   position: absolute;
   background: rgb(0,153,51);
   color: #fff;
   border-radius:10px;
  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
  padding: 10px;
  margin-top: -10px;
  margin-left: 30px;
   z-index: 3;
   display: none;
  background-color: rgb(0,153,51);;
}


/* CONTENEDOR DE LOS PDFS */

    #labpdf1{ /*left*/
      transition: .5s;
      /*display: none;*/
      position: absolute;
      top: 25%;
      left: 1%;
      width:340px;
      height:400px;
      display: none;
    }

     #labpdf2{ /*right*/
      transition: .5s;
      position: absolute;
      top: 25%;
      right: 8.5%;
      width:340px;
      height:400px;
      display: none;
    }

    #labpdf_pb{ /*planteamiento del problema*/
      transition: .5s;
      position: absolute;
      top: 43%;
      left: 0%;
      width:340px;
      height:400px;
    }

    #labpdf_pc{ /*preguntas claves*/
      transition: .5s;
      position: absolute;
      top: 48%;
      left: 0%;
      width:340px;
      height:400px;
    }


    #labpdf_ra,#labpdf_sd{
      transition: .5s;
      position: relative;
      display: block;
      margin: 0 auto;
      width:300px;
     height:90%!important;
    }



/*
    #contenedor_flotante{
      position:absolute;
  
      
      margin: 0 auto;
      width:100% auto;
      height: 100% auto;
      background-color: none;
      border: 5px solid green;
      top:0px;
      left:0px;
    } 
    */



    /*Animar carga de archivos*/
    #progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    opacity: 1.0;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }


  /*Reglas del menú estático*/

/*  header {
            position:fixed;
     
           border: 1px solid red;
            width:100%;
            z-index:60;
            height:70px;
        }
       

        nav {
            background-color:#ccc;
        }
        nav ul {
            list-style:none;
            padding:0px;
            margin:0px;
            height:30px;
            overflow:hidden;
        }
        nav ul li {
            float:left;
            padding:5px 10px;
            font-weight:bold;
        }
        nav ul li a {
            text-decoration:none;
            color:#00f;
        }

*/


  
  /*nuevos*/
#contendedor_barras_lateral_principal {
 /* clear: both;*/
  position:absolute;
 /* top: 120px;*/
 
  top: 15%!important;
  left: -160px!important;
  width: 200px!important;
  height: auto;
  overflow: hidden;
  transition:.4s all;
  z-index: 9999999;

}
#contendedor_barras_lateral_principal span{
  color: #fff;
  

}

#contendedor_barras_lateral_principal:hover {
  left: 2px!important;

}

.box_lateral_menu{
  width: 130px;
  position:absolute;
  display: block
  height: 30px;
  margin: 0 auto;
  margin-left: 55%;
  margin-top: 40%;
  font-family: 'sans-serif', 'Arial';
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-color: rgba(50,50,200,1);
  color: #fff;
 
  -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
    border-radius: 0px 0px 10px 10px;
}


.box_lateral{
   display: block;
    
    width: 160px;
    /*margin: 4px 0*/
    float: left; 
    
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
       -webkit-user-select: none;

      -webkit-transition: font-size .4s ;
    -moz-transition: font-size .4s ;
    -o-transition: font-size .4s ;

  transition:all 1s;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
 cursor: pointer;
 background-color: rgba(50,50,200,1);
 font-size: 14px;
 border-radius: 5px;
 text-align: center;
 vertical-align: middle;

padding: 5px 5px 5px 5px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
   height: auto;
}


.box_lateral_mostrado{
  display: inline;
    
   width: 200px;
    margin: 4px 0;
    float: right; 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
       -webkit-user-select: none;

      -webkit-transition: font-size .4s ;
    -moz-transition: font-size .4s ;
    -o-transition: font-size .4s ;


 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
 cursor: pointer;
 background-color: rgba(50,50,200,.5);
 font-size: 14px;
 border-radius: 5px;
 text-align: center;
 vertical-align: middle;

padding: 5px 5px 5px 5px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
   min-height: 400px !important;
}


.box_lateral:hover {
  width: 165px;
  font-size: 14px;
  /*margin-left: -100px;*/

      -webkit-transition: all .5s ;
    -moz-transition: all .5s ;
    -o-transition: all .5s ;
    transition: all .5s ;
 
}



/*box dinamicas*/
.box_dinamicas{
  position: absolute;
  
  /*border: 5px solid #ccc;*/
  top: 0px;
  left: 0px;
  width: 0px;
  height: 50px;
  margin-left:1%;

/*-khtml-text-shadow:;
-moz-text-shadow:;
-ms-text-shadow:;


/*
font-family: "Ginga"; 
font-family: "Grandesign serif bold";  
font-family: "Grandesign serif regular";
border:1px solid red;*/
overflow: hidden;
   -webkit-transition: all .4s ;
    -moz-transition: all .4s ;
    -o-transition: all .4s ;
    transition: all .4s ;
}

.box_situacion_problema_hov:hover{
 font-weight: bolder;
 transform:scaleX(1.1);
    color: rgba(0, 154 ,205,1);
}


.title_box_dinamica{
  font-family: Arial; 
  font-size: 20px;
  color: rgba(0, 154 ,205,1);
  -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
 text-align: center;
 vertical-align: 20px; 
 /*text-shadow:1px 2px rgba(0,0,0,1);*/

}




.box_lineas{
  position: absolute;
  color: #03f;
  border: 5px solid rgba(255,0,0,1);
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  display:none;

}

/* opcion de ver y/o ocultar flechas*/
#guiasdereferencia2{
   height: auto;
    width: 90px;
   margin: 0 auto;
   float: right; 
   padding: 5px;
   background-color: rgba(50,50,200,.5);
   font-size: 18px;
   border-radius: 20px;
   text-align: center;
    -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
 cursor: default;
}

#box_marco_teorico{
  position: absolute;
  top: 9.8%;
  left: 15.4%;
  text-transform: uppercase;

}

#box_marco_metodologico{
 position: absolute;
  top: 9.8%;
  left: 64.3%;
  text-transform: uppercase;
}

#box_situacion_problema{
  width: 335px;
  position: absolute;
  top: 10%;
  left: 37.5%;
  background-color: transparent;
  border: transparent;

}

#box_preguntas_claves{
  width:20%;
  position: absolute;
  top: 24%;
  left: 39%;
  overflow: hidden;
  height: auto;
  max-height: 900px;

}

#box_preguntas_claves2{
width: 335px;
  position: absolute;
  top: 19%;
  left: 37.5%;
  background-color: transparent;
  border: transparent;
}


#box_marco_teorico, 
#box_marco_metodologico,
#box_concepcion_realidad,
#box_campo_conceptual,
#box_diseno_experimental,
#box_datos,
#box_procesamiento,
#box_analisis,
#box_conclusiones{
  width: 250px;
  /*border: 1px solid red;*/

}

#box_campo_conceptual{
  position: absolute;
  top: 44%;
left: 14.5%;
 
}

#box_campo_conceptual:hover,#box_diseno_experimental:hover,#box_datos:hover{
 font-weight: bolder;
 transform:scaleX(1.1);
    color: rgba(0, 154 ,205,1);
}

#box_concepcion_realidad{
  position: absolute;
  top: 26%;
left: 10.5%;
}

#box_datos{
  position: absolute;
 
  top: 68%;
  /*left: 61%;*/
  left: 65.2%;
}

#box_procesamiento{
  position: absolute;
  
  top: 54%;
  left: 68%;
}

#box_analisis{
  position: absolute;
  
  top: 40%;
  left: 69%;
}

#box_conclusiones{
  position: absolute;
  
  top: 20%;
left: 72%;
}

#box_diseno_experimental{
  position: absolute;

  top: 89%!important;
  left:40.5%;
  height: auto;
   
}


#box_fase1{
  position: absolute;
  top: 35%;
  left: 30%;
}

#box_fase2{
  position: absolute;
  
  /*top: 70%;*/
  left:48%;
  bottom: 12.5%;
}




#box_fase3{
  position: absolute;
  /*top: 70%;
  left: 53%;*/
  top: 68%;
  left: 59%;
}

.textleft{ 
  text-align: left;

 }

#box_fase4{
  position: absolute;
  
  top: 46%;
  left: 63%;
}

#box_fase5{
  position: absolute;
  top: 20%;
  left: 66%;
}

#box_fase_informacion1{
  position: absolute;
   top: 39%;
  left: 24%;
}

#box_fase_informacion2
{
  position: absolute;
  bottom: 1%;
  left: 43.5%;
}

#box_fase_informacion5{
  position: absolute;
  top: 25%;
  left: 59%;
}

#box_fase_informacion4{
  position: absolute;
  top: 51%;
  left: 57%;
}


#box_fase_informacion3{
  position: absolute;
  top: 73%;
  left: 54%;
}

.centrar_box{
  width: 90%;
 margin: 0 auto;
}

.ancho_90{ width: 90%; }
.ancho_80{ width: 80%; }
.ancho_70{ width: 70%; }
.ancho_60{ width: 60%; }
.ancho_50{ width: 50%; }
.ancho_40{ width: 40%; }
.ancho_30{ width: 30%; }


.show_box{
  border:1px solid red;
}

.ancho_max_25{ max-width: 25%; }

.margen_left5p{margin-left: 5px; }
.margen_left10p{margin-left: 10px; }
.margen_left15p{margin-left: 15px; }
.margen_left205p{margin-left: 20px; }
.margen_left25p{margin-left: 25px; }


.img_tl_central{
  position: absolute;
  top: 31%;
  left: 45%;

}

.handover{
  cursor: pointer;
}

.link_hide:visited, .link_hide:active, .link_hide{

    text-decoration: none;
      font-family: Arial; 
  font-size: 20px;
  color: rgba(0, 154 ,205,1);
  -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
 text-align: center;
 vertical-align: 20px; 
 text-shadow:1px 2px rgba(0,0,0,1);
    /*    font-family: Arial, Verdana;
    font-weight: normal;
    color: rgba(50,50,200,1);
    transition:.3s;
     font-size: 16px;*/
  }

  .box_video{
    margin-top: 20px;
    margin-left: 25%;
    display: block;
    width: 50%;
    height:auto;
  }

.elemento_input_tl {
  display: relative;
  margin: 10px 0px 0px 0px;
  color: #000000;
  padding-bottom: 4px 6px 4px 6px;
  width: 800px;
  margin-top: 9px;
}

.font18{  font-size: 18px;}
.font19{  font-size: 19px;}
.font20{  font-size: 20px;}
.font21{  font-size: 21px;}
.font22{  font-size: 22px;}
.font23{  font-size: 23px;}

.c_verde_claro{  color:#36e232;}
.c_verde_oscuro{  color:#1baa17 ;}

.c_azul_claro{  color:#67d6de ;}
.c_azul_oscuro{  color:#290cb6  ;}

.c_naranja_oscuro{  color:#e6a428 ;}
.c_naranja_claro{  color:#f0bf64  ;}

.c_violeta_oscuro{  color:#B32FCE  ;}

.nobold{
  font-weight: normal;
}
.modal_pdf{
  width: 90%;
  height: 60%;
  margin-left: 5%;
  border: none;
}

.textarea_pa{
  width: 300px; 
}

.ul_inf_recorre_v{
margin-left: 15px;
list-style-type: circle;
}

 img {display: block; margin: 0 auto;}