body{        
    font-family: "Hanken Grotesk";    
  }
  
  .container{
    display: flex;    
    flex-direction: column; 
    overflow: auto;  
    width: 98vw; 
    height: 100vh;   
    overflow-y: hidden;
  }

  .vcontainer{
    display: flex;
    flex-direction: column;
    background-color: #E8E8E8;
  }

  .foto1{
    display: flex;
    justify-content: center;        
  }

  .foto2 { 
    border-top-left-radius: 50% 50%; 
    border-top-right-radius: 50% 50%; 
    border-bottom-right-radius: 50% 50%; 
    border-bottom-left-radius: 50% 50%;     
  }

  .arriba {
    background-color: #4d4d4d;
    position: fixed;
    height: 80px;
    top: 0;
    left: 0;
    right: 0;    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .arriba .bandaverde{
    background-color: #C7FF94;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    height: 10px;
  }

  .arriba .logoarriba{
    margin-left: 90px;
    margin-top: 10px;
  }

  .arriba .mailarriba{
    color: white;
    padding-top: 20px;
    margin-right: 20px;
  }

  .abajomob{
    background-color: white;
    height: 11vh;
    display: none;    
    flex-direction: column;    
    justify-content: space-between;
    margin-top: 80vh;
    position: absolute;
    left: 0;
    width: 100%;    
  }

  .abajomob .bandaverde{
    background-color: #C7FF94;
    height: 10px;
    width: 100%;
  }

  .abajomob .disclamer{    
    color: black;       
    font-size: smaller; 
    padding: 20px;
    width: 100%;    
    display: flex;    
  }

  .abajomob .slogan{
    display: flex;    
    justify-content: space-around;
    background-color: #4d4d4d;
    color: white;    
    line-height: 40px;
    padding-top: 10px;    
  }

  .abajo {
    background-color: white;
    height: 7vh;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;   
    margin-top: 87vh;
    position: fixed;
    width: 98vw;
    overflow-y: hidden;
    margin-bottom: 10px;
  }

  .abajo .disclamer{    
    color: black;   
    font-size: small; 
    padding-left: 80px;  
    width: 40%;
    margin-top: 10px;    
  }
  
  .abajo .slogan{
    flex:auto;
    color: black;
    width: 30%;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
  }

  .abajo .logopie{            
    padding-right: 100px;
    width: 30px;    
  }

  .bannerheader{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;    
    height:96px;
    display: flex;
    flex-direction: row;        
    justify-content: flex-end;
    width: 100vw;
  }

  .mitimiticontainer{
    display:flex; 
    flex-direction: column; 
    justify-content: space-between;    
    height: 100vh;
    width: 100vw;
  } 

  .mitimitidel{
    width: 100%;
    display: flex;
    flex-direction: row;
    color: white;    
    margin-top: 73px;              
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;            
    }

  .slider{
    z-index:-1;
    position: fixed;    
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center; 
    background-clip: border-box;       
  }

  .mitimiti{
    width: 100%;
    display: flex;
    flex-direction: row;
    color: white;    
    margin-top: 73px;     
    }
        
    #mitimitibg{
        height: 80vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;            
        left: 0;              
    }

    #mitimitibgdel{      
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      left: 0;        
      height: 100vh;  
    }

  .mitiizquierda{      
      width: 50%;      
      display: flex;
      flex-direction: column;                  
    }

  .mitiderecha{      
      width: 50%;      
      display: flex;
      flex-direction: column; 
      align-items: center;           
    }

    .botoneraderadelegcontainer{
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 60px;
      margin-right: auto;                
      margin-left: auto;                
      width: 450px; 
      border-radius: 10px;     
    }
  
    .botoneradelegtop{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: white;
      color: black;
      border-radius: 10px;
      margin-right: 10px;
    }


  .botoneradertopcontainer{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 35px;
    margin-right: auto;                
    margin-left: auto;                
    width: 450px;
  }

  .botoneradertop{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: black;    
    border-radius: 10px;
    margin-right: 10px;
    color: black;
  }

  .bblanco{
    background-color: white;
    color: black;
    width: 100px;
    text-align: center;
    height: 48px;    
    line-height: 48px;
    border-radius: 10px;
    font-weight: 600;
  }

  .bblanco a{
    text-decoration: none;    
    color: black;
  }

  .bblanco hover{
    text-decoration: none;    
    cursor: pointer;
  }

  .bnegro{
    background-color: black;
    color: white;
    width: 100px;
    text-align: center;
    height: 48px;
    border-radius: 20px;
    line-height: 48px;
  }

  .bnegro a{
    text-decoration: none;    
    color: white;
  }

  .bnegro hover{
    text-decoration: none;    
    cursor: pointer;
  }

  .bnegromsg{
    background-color: black;
    color: white;
    width: 130px;
    text-align: center;
    height: 32px;
    border-radius: 20px;
    line-height: 32px;
  }

  .bnegromsg a{
    text-decoration: none;    
    color: white;
  }

  .bnegromsg hover{
    text-decoration: none;    
    cursor: pointer;
  }

  .bblancomsg{
    background-color: white;
    border: 1px solid #000;
    color: black;
    width: 130px;
    text-align: center;
    height: 32px;
    border-radius: 20px;
    line-height: 32px;
  }

  .bblancomsg a{
    text-decoration: none;    
    color: black;
  }

  .bblancomsg hover{
    text-decoration: none;    
    cursor: pointer;
  }

  .bverde{
    background-color: #C7FF94;
    color: black;
    width: 150px;
    text-align: center;
    height: 48px;
    border-radius: 10px;
    line-height: 48px;
    font-weight: 600;
    padding-left: 10px;
    padding-right: 10px;
  }

  .bverde a{
    text-decoration: none;    
    color: black;
  }

  .bverde hover{
    text-decoration: none;    
    cursor: pointer;
  }

  .login{
    background-color: white;
    color: black;
    font-weight: 500;
    font-size: larger;   
    width: 450px;
    height: 400px;
    display: flex;
    flex-direction: column;               
    border-radius: 20px;    
    margin-right: auto;                
    margin-left: auto;                
    align-items: center;  
    text-align: center;  
    margin-top: 10px;        
}

.loginform{
  display: flex;
}

.loginmsg{
  display: none;
  flex-direction: column;
  font-size: small;
  padding-left: 30px;
  padding-right: 30px;
}

.psswdrecover{
  display: none;
  flex-direction: column;
  font-size: small;
  padding-left: 30px;
  padding-right: 30px;
}

.logindel{
  background-color: rgb(231, 243, 201);
  color: black;
  font-weight: 500;
  font-size: larger;   
  width: 450px;
  height: 430px;
  display: flex;
  flex-direction: column;               
  border-radius: 20px;    
  margin-right: auto;                
  margin-left: auto;                
  align-items: center;  
  text-align: center;  
  margin-top: 10px;        
}

.btnlogin{
  border-radius: 10px; 
  height: 32px;
  line-height: 32px;
  max-height: 32px;
  width: 250px;
  color:  white;
  padding: 5px;
  padding-left: 50px;
  padding-right: 50px;
  flex: auto;
  background-color: black;
  font-size: 20px;
  text-decoration: none;            
  margin-bottom: 30px;
}

.btnlogin hover{
  cursor: pointer;      
  border:1px solid #4d4d4d;
  background-color: #4d4d4d;  
  color: black;
}

.btnlogin a{        
  text-decoration: none;  
}

.logininput{
  border-radius: 10px; 
  height: 24px;
  max-height: 24px;
  color:  #4d4d4d;
  padding: 5px;
  flex: auto;
  border:1px solid #4d4d4d;
  width: 250px;
  margin-top: 10px;
}

.logincombobox{
  border-radius: 10px; 
  height: 36px;
  max-height: 36px;
  color:  #4d4d4d;
  padding: 5px;
  flex: auto;
  border:1px solid #4d4d4d;
  width: 250px;
  margin-top: 10px;
  background-color: white;
  font-family: "Verdana";
}

.loginlabel1{
  color: #4d4d4d;
  font-size: 15px;
  font-style: italic;
  text-decoration: underline;        
}

.loginlabel2{
  color: #4d4d4d;
  font-size: 15px;   
  margin-bottom: 20px;     
}

.loginlabel2 a{
  text-decoration: underline;
  color: #4d4d4d;
}

.loginlabel2 hover{
  cursor: pointer;
  text-decoration: underline;
  color: #4d4d4d;        
}

.loginlabel2b{
  color: white;
  font-size: 15px;   
  margin-bottom: 20px;     
  text-decoration: none;
}

.loginlabel2b a{
  text-decoration: none;
  color: #cccccc;
}

.loginlabel2b hover{
  cursor: pointer;
  text-decoration: none;
  color: #cccccc;        
}

.loginlabel2r{
  color: red;
  font-size: 15px;   
  margin-bottom: 20px;     
}

.loginlabel2r a{
  text-decoration: underline;
  color: red;
}

.loginlabel2r hover{
  cursor: pointer;
  text-decoration: underline;
  color: red;        
}

.login .btnlogin{
  border-radius: 10px; 
  height: 32px;
  max-height: 32px;
  width: 250px;
  color:  white;
  padding: 5px;
  padding-left: 50px;
  padding-right: 50px;
  flex: auto;
  background-color: black;
  font-size: 20px;
  text-decoration: none;            
  margin-bottom: 30px;
}

.btnlogin hover{
  cursor: pointer;      
  border:1px solid #4d4d4d;
  background-color: #4d4d4d;  
  color: black;
}

.btnlogin a{        
  text-decoration: none;  
}

.msglogin{        
  color: black;
  font-size: 80%;
  font-style: oblique;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 32px;
}

.delbox{    
  background-color: white;
  color: black;
  font-weight: 500;
  font-size: larger;   
  width: 350px;
  height: 36px;
  padding-top: 5px;   
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;    
  margin-right: auto;                
  margin-left: auto;                
  align-items: center;  
  text-align: center;  
  margin-top: 30px;    
  display: none;
  flex-direction: row;     
  justify-content: space-between;
}

.delboxizq{    
  background-color: white;
  color: black;
  font-weight: 500;
  font-size: larger;   
  width: 350px;
  height: 36px;
  padding-top: 5px; 
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;      
  align-items: center;  
  text-align: center;  
  margin-top: 105px;    
  margin-left: 80px;
  display: flex;
  flex-direction: row;     
  justify-content: space-between;
}

.toautogestionbox{    
  background-color: black;
  color: white;
  font-weight: 500;
  font-size: larger;   
  width: 350px;
  height: 36px;
  padding-top: 5px; 
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;      
  align-items: center;  
  text-align: center;  
  margin-top: 110px;    
  display: flex;
  flex-direction: row;     
  justify-content: space-between;
}

.toautogestionboxunderlogin{    
  background-color: black;
  color: white;
  font-weight: 500;
  font-size: larger;   
  width: 350px;
  height: 36px;
  padding-top: 5px; 
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;    
  margin-right: auto;                
  margin-left: auto;                
  align-items: center;  
  text-align: center;  
  margin-top: 30px;      
  display: none;
  flex-direction: row;     
  justify-content: space-between;
}

.btntrans{        
  border-radius: 20px; 
  border: 1px solid #000;
  font-size: 15px;
  color: black;
  width: 120px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-weight: 100;             
  text-decoration: none;
}

.btntrans link{        
  text-decoration: none;           
  cursor: pointer;
  color: black;
}

.btntrans a{        
  text-decoration: none;           
  cursor: pointer;
  color: black;
}

.btntrans hover{        
  text-decoration: none;           
  cursor: pointer;
  color: black;
}

.btnblanco{        
  border-radius: 20px; 
  border: 1px solid white;
  font-size: 15px;
  color: white;
  width: 120px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-weight: 100;             
  text-decoration: none;
}

.btnblanco link{        
  text-decoration: none;           
  cursor: pointer;
  color: white;
}

.btnblanco a{        
  text-decoration: none;           
  cursor: pointer;
  color: white;
}

.btnblanco hover{        
  text-decoration: none;           
  cursor: pointer;
  color: white;
}

  .cajaizq{
    margin-left: 85px;
    display: flex;
    flex-direction: column;    
  }  

  .botoneraizq{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 90px;
    width: 400px;    
  }

  .botongris{      
    background-color: #dcdcdc;
    border-radius: 10px; 
    font-size: 15px;
    color: black;
    width: 400px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-weight: 100;           
    margin-right: 10px;         
    padding-left: 10px;
    padding-right: 10px;
}

  .agppal{
    position: fixed;    
    width: 100vmax;
    height: 100vh;
    display: flex;
    flex-direction: column;    
    }

    #agppallogin{
        background-image: url(/html/capbang/autogestion.jpg);         
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        color: white;
        font-size: larger;
        top: 80px;        
        left: 0;
        overflow: scroll;
    }
        
    .agppal .banda2{      
        background-color: #C7FF94;  
        color: black;
        display: flex;
        flex-direction: row;        
        justify-content: space-between;    
    }

    .agppal .banda2 .logo{       
        width: 20%;
        height: 100px;
        margin: 10px;
        padding-left: 25px; 
        display: block;
    }

    .agppal .botonera{
        background-color: aliceblue;
        display: flex;          
        margin-right: 50px;  
        color: white;
        min-width: 40vw;   
        align-items: center;  
        text-align: center;          
    }

    .agppal .banda2 .botonesnegros{
        background-color: black;
        color: white;
        font-weight: 500;
        font-size: large;
        width: 80%;
        height: 50px;
        line-height: 50px;
        
        display: flex;
        flex-direction: row;        
        justify-content: space-between;
        margin-top: 50px;
        border-radius: 20px;           
    }

    .agppal .banda2 .bnegro{
        text-align: center;
        line-height: 32px;
        padding: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .agppal .banda2 .botoncs{
        background-color: #C7FF94;
        line-height: 32px;
        width: 200px;
        height: 50px;
        line-height: 53px;        
        text-align: center;    
        margin-left: 10px;
        margin-top: 50px;
        border-radius: 20px;
        color: black;
        font-weight: 800;    
        font-size: large;
    }

    .agppal .banda3{                
        color: black;
        display: flex;
        flex-direction: row;        
        justify-content: space-between;
        margin-left: 60px;   
    }

    .agppal .divsaludo{                      
        width: auto;
        height: 400px;       
        display: flex;
        flex-direction: column;
        align-items: center;        
        font-weight: 600;
        font-size:50px;
        display: block;
        color: white;        
    }

    .agppal .saludo{
        color: white;                        
    }

    .agppal .divsaludo .botoneragris{      
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10px;              
      color: black;
      width: 400px;
      margin-top: 30px;
    }

    .agppal .divsaludo .botoneragris .botongris{      
        background-color: #dcdcdc;
        border-radius: 20px; 
        font-size: 30%;
        width: 400px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-weight: 100;           
        margin-right: 10px;         
        padding-left: 10px;
        padding-right: 10px;
    }

    .agppal .divsaludo .botoneragris .botongrissel{
        flex: auto;
        background-color: #dcdcdc;
        border-radius: 20px; 
        font-size: 30%;
        width: 100px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-weight: 700;             
        margin-right: 10px;  
        padding-left: 10px;
        padding-right: 10px;
    }

    .agppal .login{
        background-color: white;
        color: white;
        font-weight: 500;
        font-size: larger;   
        min-width: 40vw;   
        height: 350px;       
        display: flex;
        flex-direction: column;               
        border-radius: 30px;    
        margin-right: 50px;                
        align-items: center;  
        text-align: center;  
        margin-top: 10px;    
    }

    .agppal .login .logininput{
        border-radius: 10px; 
        height: 24px;
        max-height: 24px;
        color:  #4d4d4d;
        padding: 5px;
        flex: auto;
        border:1px solid #4d4d4d;
        width: 250px;
        margin-top: 10px;
    }

    .agppal .login .loginlabel1{
        color: #4d4d4d;
        font-size: 15px;
        font-style: italic;
        text-decoration: underline;        
    }

    .agppal .login .loginlabel2{
        color: #4d4d4d;
        font-size: 15px;   
        margin-bottom: 20px;     
    }

    .agppal .login .loginlabel2 a{
        text-decoration: underline;
        color: #4d4d4d;
    }

    .agppal .login .loginlabel2 hover{
        cursor: pointer;
        text-decoration: underline;
        color: #4d4d4d;        
    }

    .agppal .login .btnlogin{
        border-radius: 10px; 
        height: 32px;
        max-height: 32px;
        width: 250px;
        color:  white;
        padding: 5px;
        flex: auto;
        border:1px solid black;
        background-color: black;
        font-size: 20px;
        text-decoration: none;            
    }

    .agppal .login .btnlogin hover{
        cursor: pointer;      
        border:1px solid #4d4d4d;
        background-color: #4d4d4d;  
        color: black;
    }

    .agppal .login .btnlogin a{        
        text-decoration: none;  
    }

    .agppal .login .msglogin{        
        color: black;
        font-size: 80%;
        font-style: oblique;
        font-weight: 600;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .agppal .todelegaciones{
        flex: auto;
        background-color: #dcdcdc;
        border-radius: 20px; 
        font-size: 30%;
        width: 100px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-weight: 100;
        color: black;
        margin-right: 10px;
    }

  /* Media query */
@media(max-width:768px) {

    .arriba .logoarriba{
        padding-left: 10px;
        padding-top: 5px;
      }
    
      .arriba .mailarriba{
        color: white;
        padding-top: 20px;
        padding-right: 5px;
      }

      .abajo .disclamer{    
        color: black;   
        font: size 8px;
        padding-left: 10px;  
        margin-top: 5px;
      }

      .abajo .logopie{        
        padding-right: 80px;
      }

      #agppallogin{
        background-image: url(/html/capbang/autogestionchico.jpg); 
        width: 768px;
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .agppal .banda2 .logo{             
      display: none;
  }

  .agppal .divsaludo{              
    display: none;
}

.agppal .banda2{        
  color: #414141;
  display:flex;
  flex-direction: row;  
}

.agppal .botonera{
  display: flex;          
  align-items: center;
  color: white;
  min-width: 100vw;  
  align-items: center;  
  text-align: center; 
}

.agppal .banda2 .botonesnegros{
  background-color: black;
  color: white;
  font-weight: 500;
  font-size: 70%;
  width: 65vw;
  height: 50px;  
  display: flex;
  flex-direction: row;        
  justify-content: space-between;
  margin-top: 5px;
  border-radius: 20px;           
  margin-left: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.agppal .banda2 .botoncs{
  background-color: #C7FF94;
  color: black;
  font-weight: 700;
  font-size: 70%;
  width: 12vw;
  height: 50px;  
  display: flex;
  flex-direction: row;        
  justify-content: center;
  margin-top: 5px;
  border-radius: 30px;           
  margin-left: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  width: 120px;
}

.agppal .banda3{                
  margin-left: 5px;  
}

.agppal .login{
  background-color: white;
  color: white;
  font-weight: 500;
  font-size: larger;   
  min-width: 77vw;   
  height: 360px;       
  display: flex;
  flex-direction: column;               
  border-radius: 30px;    
  align-items: center;  
  text-align: center;
}

.mitimiti{
  width: 100%;  
  display: flex;
  flex-direction: row;
  color: white;    
  margin-top: 60px;
  position: fixed;
}

#mitimitibg{
  background-image: url(/html/capbang/autogestionchico.jpg);  
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center; 
  top: 0px;
  height: 100vh;    
}

#mitimitibgdel{
  background-image: url(/html/capbang/capbadelbkgmob.jpg);  
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;  
  top: 0px; 
  height: 100vh;           
}

.mitiizquierda{
  display: none;
}

.mitiderecha{
  width: 100%;
  display: flex;
  flex-direction: column;   
  align-items: center;  
  height: 100vh;
}

.botoneradertopcontainer{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;  
  width: 350px;
  margin-left: auto;
  margin-right: auto;
}

.botoneradertop{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.botoneraderadelegcontainer{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;  
  width: 350px;
  margin-left: auto;
  margin-right: auto;    
}

.botoneradelegtop{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bnegro{
  background-color: black;
  color: white;
  width: 80px;
  text-align: center;
  height: 48px;
  border-radius: 20px;
  line-height: 48px;
}

.bblanco{
  background-color: white;
  color: black;
  width: 80px;
  text-align: center;
  height: 48px;
  border-radius: 20px;
  line-height: 48px;
}

.bverde{
  background-color: #C7FF94;
  color: black;
  width: 80px;
  text-align: center;
  height: 48px;
  border-radius: 10px;
  line-height: 48px;
  font-weight: 600;
  padding-left: 10px;
  padding-right: 10px;
}

.login{
  width: 350px;  
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.logindel{
  width: 350px;  
  height: 430px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.delbox{    
  background-color: white;
  color: black;
  font-weight: 500;
  font-size: medium;   
  width: 300px;
  height: 36px;  
  border-radius: 30px;    
  margin-left: auto;
  margin-right: auto;
  align-items: center;  
  text-align: center;  
  margin-top: 20px;     
  padding-top: 5px; 
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.delboxizq{
  display: none;
}

.toautogestionbox{    
  display: flex;
  flex-direction: row;
  background-color: #000;    
  border-radius: 10px;
  margin-right: 10px;
  width: 250px;
  height: 32px;
  margin-left: 85px;
}

.disclamer{
  display:none;
}

.arriba .logoarriba{
  margin-left: 30px;
  margin-top: 10px;
}

.abajo {
  display: none;
}

.abajomob{
    display: flex;
}

.toautogestionboxunderlogin{    
  display: flex;
  flex-direction: row;     
  justify-content: space-between;
  width: 320px
}

.slider{
  display: none;
}

} /* media query */