@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Caveat);


html, body {
              font-family     : "Roboto";
              margin          : 0;
              padding         : 0;
              border          : 0;
              position        : absolute;
              height          : 100%;
              min-width       : 100%;
              font-size       : 13px;
              color           : #ffffff;
              direction       : ltr;
              font            : 14px/1.3 Arial,sans-serif;
              background      : url("../imagenes/fondoinicio.jpg") no-repeat center center fixed;
              /*background: #17202A;   */
      -webkit-background-size : cover;
         -moz-background-size : cover;
           -o-background-size : cover;
              background-size : cover;
            }


A {      
             text-decoration          : none;
}



.contenedor-1 {
            
            background: transparent;
  height: 100vh;
  display: flex;
  align-items: top;
  justify-content: center;
  /*border : 2px solid yellow;*/
}

.contenedor-2 {
  display: flex;
  flex-direction: column;
   width              :80%;
   
  text-align: center;
  align-items: center;
  /*border : 2px solid green;*/
  
  
}

.wrap {
  width              : 50%;
  max-width          : 500px;
  padding            : 20px 20px; 
  margin             : auto;
  background         : rgba(255,255,255, 0.7);  
   /*border : 2px solid red;*/
  
  
}
.firma-ruben{
  font-family     : "Caveat";
  font-weight     : 700; 
  font-size       : 1.5rem; 


}

/*CONTENEDOR PADRE PARA FORMULARIO*/

.contenedor-formulario { 
  width              : 560px;
  color              : #f2f2f2;
  /*padding            : 20px; */
 
}
  
  .contenedor-formulario .formulario {
    width            : 100%;
    margin           : auto; 
    /*padding           : 10px; */
 
  }
  
    .contenedor-formulario .formulario .input-group {
      position       : relative;
      margin-bottom  : 32px; 
    }

       .contenedor-formulario .formulario .input-group input[type="text"],
       .contenedor-formulario .formulario .input-group input[type="email"],
       .contenedor-formulario .formulario .input-group input[type="password"] {
         font-family   : "Roboto";
         font-size     : 20px;
         color         : #17212b;
         width         : 90%;
         outline       : none;
         padding       : 15px;
         background    : none;
         border        : none;
         border-bottom : 2px solid #17212b; 

       }

       .contenedor-formulario .formulario .input-group input[type="text"]:focus, 
       .contenedor-formulario .formulario .input-group input[type="text"]:active,
       .contenedor-formulario .formulario .input-group input[type="email"]:focus,
       .contenedor-formulario .formulario .input-group input[type="email"]:active,
       .contenedor-formulario .formulario .input-group input[type="password"]:focus,
       .contenedor-formulario .formulario .input-group input[type="password"]:active {
         outline       : none ;                        
         border-bottom : 2px solid #000000; 
       }

       .contenedor-formulario .formulario .input-group input[type="text"].error,
       .contenedor-formulario .formulario .input-group input[type="email"].error,
       .contenedor-formulario .formulario .input-group input[type="password"].error {
         border-bottom: 2px solid #D32F2F; 
       }

       .contenedor-formulario .formulario .input-group input[type="text"].error + label,
       .contenedor-formulario .formulario .input-group input[type="email"].error + label,
       .contenedor-formulario .formulario .input-group input[type="password"].error + label {
         color        : #D32F2F; 
       }

      .contenedor-formulario .formulario .input-group label {
        color         : #17212b; 
      }

      .contenedor-formulario .formulario .input-group label.label {
        -webkit-transition : all 0.3s ease;
        -o-transition      : all 0.3s ease;
        transition         : all 0.3s ease;
        margin-left        : 15px;
        font-size          : 16px;
        line-height        : 16px;
        position           : absolute;
        top                : 16px;
        left               : 0; 
      }

        .contenedor-formulario .formulario .input-group label.label.active {
          top              : -12px;
          font-size        : 12px;
          line-height      : 12px;
          color            : #000000;
        }


      

      .contenedor-formulario .formulario .input-group.error label {
        color              : #D32F2F; 
      }

        .contenedor-formulario .formulario .input-group.error label:hover {
          background       : rgba(211, 47, 47, 0.2); 
        }

        .contenedor-formulario .formulario .input-group.error label:before {
          border           : 2px solid #D32F2F; 
        }

      .contenedor-formulario .formulario .input-group.radio input[type="radio"] {
        display            : none; 
      }

      .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label:before {
        display            : none; 
      }

      .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label {
        padding            : 5px 15px;
        background         : #303F9F;
        border-radius      : 2px;
        color              : #f2f2f2; 
      }

      .contenedor-formulario .formulario .input-group.checkbox label:before {
        border-radius      : 3px; 
      }

      .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"] {
        display            : none; 
      }

        .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked + label:before {
          display          : none; 
        }

        .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked + label {
          background       : #303F9F;
          color            : #f2f2f2;
          padding          : 5px 15px;
        }

    .contenedor-formulario .formulario input[type="submit"] {
      background           : #17212b;
      border-radius        : 2px;
      border               : 1px solid #17212b;
      color                : #fff;
      cursor               : pointer;
      display              : inline-block;
      font-family          : "Roboto";
      font-size            : 18px;
      padding              : 10px;
      width                : 100%;
      -webkit-transition   : all 0.3s ease;
      -o-transition        : all 0.3s ease;
      transition           : all 0.3s ease; 
    }

      .contenedor-formulario .formulario input[type="submit"]:hover {
        background         : #466685; 
         color                : #17212b;
         border            : 1px solid #466685;
      }





A.olvido  {
  color: #293A4A;
} 

.modalExterno {
             position                 : fixed;
             font-family              : Arial, Helvetica, sans-serif;
             top                      : 0;
             right                    : 0;
             bottom                   : 0;
             left                     : 0;
             background               : rgba(0,0,0,0.8);
             z-index                  : 99999;
     -webkit-transition               : opacity 400ms ease-in;
        -moz-transition               : opacity 400ms ease-in;
             transition               : opacity 400ms ease-in;
             display                  : none;
             pointer-events           : none;
}

.modalExterno:target {
             display                  : block;
             pointer-events           : auto;
}


.modalExterno > div {
             width                    : 600px;
             position                 : relative;
             margin                   : 8% auto;
             padding                  : 25px 20px 13px 20px;
             border-radius            : 10px;
             background               : #17202A;
             background               : -moz-linear-gradient(#17202A, #262729);
             background               : -webkit-linear-gradient(#17202A, #262729);
             background               : -o-linear-gradient(#17202A, #262729);
}

.entradadedatos {
             padding                  : 10px 40px;
             position                 : relative;         
             border-radius            : 5px;
             border                   : solid 1px rgba(158,172,185,0.8);
             background               : transparent;
             font-family              : "Roboto", Verdana, Arial, Helvetica;
}

.entradadedatos #Texto, #Date #Email{
             direction                : ltr;
             height                   : 30px;
             font-size                : 1rem;
}


.entradadedatos input[type=email],
.entradadedatos input[type=text],
.entradadedatos input[type=date], 
.entradadedatos input[type=password], 
.entradadedatos input[type=number] {
        -moz-appearance               : none;
     -webkit-appearance               : none;
             appearance               : none;
             display                  : inline-block;
             height                   : 40px;
             padding                  : 0 10px;
             margin                   : 0;
             background               : white;
             border                   : 1px solid #d9d9d9;
             border-top               : 1px solid #c0c0c0;
        -moz-box-sizing               : border-box;
     -webkit-box-sizing               : border-box;
             box-sizing               : border-box;
        -moz-border-radius            : 1px;
     -webkit-border-radius            : 1px;
             border-radius            : 2px;
             font-size                : 2.1rem;
             color                    : rgb(58,69,89);
}

.entradadedatos input[type=email]:hover, 
.entradadedatos input[type=text]:hover, 
.entradadedatos input[type=date]:hover, 
.entradadedatos input[type=password]:hover, 
.entradadedatos input[type=number]:hover {
             border                   : 1px solid #b9b9b9;
             border-top               : 1px solid #a0a0a0;
        -moz-box-shadow               : inset 0 1px 2px rgba(0,0,0,0.1);
     -webkit-box-shadow               : inset 0 1px 2px rgba(0,0,0,0.1);
             box-shadow               : inset 0 1px 2px rgba(0,0,0,0.1);
}

.entradadedatos input[type=text]:focus,
.entradadedatos input[type=date]:focus, 
.entradadedatos input[type=password]:focus, 
.entradadedatos input[type=number]:focus {
             outline                  : none;
             color                    : #4285F4;
             border                   : 1px solid rgb(66,133,244);
        -moz-box-shadow               : inset 0 1px 2px rgba(0,0,0,0.3);
     -webkit-box-shadow               : inset 0 1px 2px rgba(0,0,0,0.3);
             box-shadow               : inset 0 1px 2px rgba(0,0,0,0.3);

  }

.entradadedatos input[type=text]:disabled, 
.entradadedatos input[type=date]:disabled, 
.entradadedatos input[type=number]:disabled {            
             border                   : 1px solid rgb(121,145,157);
             background               : rgba(0,0,0,0.3);
             height                   : 30px;
             font-size                : 1.1rem;
             color                    : #ffffff;
}


.entradadedatos input[type=email] .recupera {
    font-size                : 2.1rem;
}
/*
.entradadedatos input[type="password"] {
  background-image: url('../imagenes/ojo.png');
  background-position: left;
  background-position-x: 10px;
  padding-left: 35px;
  background-repeat: no-repeat;
}
*/

.ver_pase {
  display: block;
  position: relative;
  float: right;
  margin-top: -25px;
  margin-right: px;

}

.boton_url1 {
      background           : transparent;
      border-radius        : 3px;
      border               : 1px solid white;
      color                : white;
      cursor               : pointer;
      display              : inline-block;
      font-family          : "Roboto";
      font-size            : 18px;
      padding              : 12px;
      width                : 100%;
      -webkit-transition   : all 0.3s ease;
      -o-transition        : all 0.3s ease;
      transition           : all 0.3s ease; 
    }

.boton_url1:hover {
        background        : green; 
        color             : #FFFFFF;
        border            : 1px solid green;
        text-decoration   : none;     
      }

.boton_ejecutar {
      background           : transparent;
      border-radius        : 3px;
      border               : 1px solid white;
      color                : white;
      cursor               : pointer;
      display              : inline-block;
      font-family          : "Roboto", Helvetica, Arial;              
      -webkit-transition   : all 0.3s ease;
      -o-transition        : all 0.3s ease;
      transition           : all 0.3s ease; 
    }

.en_verde .en_rojo {             
      text-decoration      : none;     
}

.en_verde:hover  {
     background            : green; 
     color                 : white;
     border                : 1px solid green;        
     text-decoration       : none;      
}

.en_rojo:hover  {
     background            : red; 
     color                 : white;
     border                : 1px solid red;   
     text-decoration       : none;      
}

.tamano_M {
      font-size            : 1rem;          
      padding              : .4em .6em .4em .6em;
}

.font-effect-3d-float {
             color                   : black;
             font-family: 'Roboto', serif;
             font-size: 28px;
             font-weight:900;
             text-shadow: 0 3px rgba(0,0,0,0.3);
             float                    : center;             
             padding                  : 5px 5px 10px 5px;
             position         : relative;
}

.font-effect-2da {
             color                   : rgb(255,255,0);
             font-family: 'Seymour One', serif;
             font-size: 26px;
             text-shadow: 0 2px rgba(255,255,255,0.4);             
}


a,

  a:hover,

  a:visited {


  cursor: pointer;

  text-decoration: none;

  }

  a:hover {

  text-decoration: underline;

  }

.uso_nav_sup_der { 
                  vertical-align   : center;
                  color            : rgb(70,127,64);
                  width            : 335px;
                  background-color : rgba(39,71,36,0.3);
                  text-align       : center;
                  font-family      : Verdana, Arial, Helvetica, sans-serif;
                  border           : rgb(39,71,36) 0px solid;
                  font-size        : 11px;                          
                  padding          : 3px 3px 3px 3px;
                  top              : 22px;
                  right            : 0;
                  position         : fixed;
                  cursor           : pointer;
                }


.uso_nav_sup_izq { 
                  vertical-align   : center;
                  color            : rgb(70,127,64);
                  width            : 335px;
                  background-color : rgba(39,71,36,0.3);
                  text-align       : center;
                  font-family      : Verdana, Arial, Helvetica, sans-serif;
                  border           : rgb(39,71,36) 0px solid;
                  font-size        : 11px;                          
                  padding          : 3px 3px 3px 3px;
                  top              : 22px;
                  left            : 0;
                  position         : fixed;
                  cursor           : pointer;
                }


.boton_ejecutar {
      display              : inline-block;      
      line-height              : 1rem; 
      margin-top           : 10px;
      background           : white;
      border-radius        : 4px;
      border               : 1px solid  #be273a;
      color                : #be273a;
      cursor               : pointer;
      font-family          : "Roboto", Helvetica, Arial;              
      -webkit-transition   : all 0.3s ease;
      -o-transition        : all 0.3s ease;
      transition           : all 0.3s ease; 
    }



.en_verde .en_rojo .en_gris {             
      text-decoration      : none;     
}

.en_verde:hover  {

     background            : green; 
     color                 : white;
     border                : 1px solid green;        
}

.en_rojo:hover  {
     background            : red; 
     color                 : white;
     border                : 1px solid red;        
}

.en_azul:hover  {
     background            : blue; 
     color                 : yellow;
     border                : 1px solid blue;        
}

.en_amarillo:hover  {
     background            : yellow; 
     color                 : white;
     border                : 1px solid yellow;        
}


.en_gris:hover {
     text-decoration      : none;     
     background            : #212F3C; 
     color                 : white;
     border                : 1px solid white;        
}

.tamano_M {
      font-size            : 1rem;          
      padding              : .4em .6em .4em .6em;
}

.tamano_G {
             cursor                   : pointer;
             font-size                : 2rem;
             height                   : 10rem;
             min-width                : 24.3rem;
             max-width                : 24.3rem;
             font-family              : "Roboto", Arial, Helvetica, cursive; 
             padding                  : .5em .5em .42em;
             margin                   : 1rem 1.5rem;
}

.tamano_G2 {
             cursor                   : pointer;
             font-size                : 1rem;
             height                   : 7.5rem;
             line-height              : 1.3rem; 
             min-width                : 10rem;
             max-width                : 10rem;
             font-family              : "Roboto", Arial, Helvetica, cursive; 
             padding                  : .4em .5em .8em;
}

.label-claro1 {
  display: block;
             cursor                   : pointer;
             
             font-size                : 1.3rem;
             border-width             : 1px;
             padding-top              : 0.3rem;
             font-weight              : normal;
             text-shadow              : 1px 1px 1px black;
             text-align               : center;
}


.nombre_menu {
            display                   : block;
            margin                    : 1.1rem 1rem;  
}

.label-menu {
             color                    : rgb(255,255,255);
             font-size                : 1.8rem;
             border-width             : 2px;
             text-shadow              : 1px 1px 1px #E9E9E9;
             font-weight              : bold;
             text-align               : center;
}

.label-menu2 {
             color                    : rgb(255,255,255);
             font-size                : 1.2rem;
             border-width             : 2px;
             text-shadow              : 1px 1px 1px #E9E9E9;
             font-weight              : normal;
             text-align               : center;
}

@media screen and (max-width: 450px) {
  body {
    padding-top: 80px
  }

   .contenedor-1 {
            
            background: transparent;
  height: 100vh;
  display: flex;
  align-items: top;
  justify-content: center;
 
}

  .contenedor-2 {
  display: flex;
  flex-direction: column;
   width              :90%;
   
  text-align: center;
  align-items: center;
 
  
  

}

.wrap {
  width              : 85%;
  max-width          : 300px;
  padding            : 10px 10px; 
  margin             : auto;
  background         : rgba(255,255,255, 0.9);  
}

  .contenedor-formulario { 
      margin: 0;
      width: 100%;
      /*position: fixed;*/
      top:0;
      z-index: 1000;
  }    

  .font-effect-3d-float {
             color                   : white;
             font-family: 'Roboto', serif;
             font-size: 24px;
             font-weight:900;
             text-shadow: 0 3px rgba(0,0,0,0.3);
             float                    : center;             
             padding                  : 5px 5px 10px 5px;
             position         : relative;
  }

 
}