* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}



body{
  color:#454545;
  width: 100%;
  font-size:100%;
}

.credenciales{
  position:absolute;
  top: 0;
  left: 0px;
  z-index:4;


}
#panel_grados{
  position:absolute;
  top: 0;
  right: 10px;
  z-index:4;
  max-width: 480px;
  min-width: 450px;
  padding:0 1px;
  margin:auto;
  background-color: white;
  border: 1px solid #ccc;
  border-top:0;
  border-radius: 0 0 10px 10px;
  text-align: center;
 

}



button#info_grados{
  position: fixed;
  top: 145px;
  right: -55px;
  z-index:3;
  height:40px;
  width: 140px;
  background-color:#214e8b;
  color: white;
  font-weight: 600;
  padding:10px 0;
  transform: rotate(90deg);


}

button#info_grados:hover{

  color:#214e8b;
  background-color: white;
  font-weight: 700;
  border: 2px solid #214e8b;
}
#contenedor{
  width: auto; 


}

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {
  margin: 0;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 10px 7px;
  text-align: center;
  background-color: #f1f1f1;
  opacity: 0.93;
  position:fixed;
  bottom:-3px;
  width: 23%;
}

.card a{
    color:#214e8b;
}

.image {    
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  text-align: center;
  background-position: 95% bottom;
}


#salli, #registrar, #login {
  height:55px; 
  width: 25%;
  max-width: 300px;
  min-width: 150px;
}

#registrar, #login {
  height:40px; 
  width: 25%;
}
button {  
  background:#009877;
  color: white; 
  vertical-align: middle;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: white;
  color: #454545;
  border: 2px solid #009877;
}

input[type=text], select {
  padding: 12px 20px;
  margin: 6px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.credenciales {
  max-width: 480px;
  min-width: 450px;
  padding:0 1px;
  margin:auto;
  background-color: white;
  border: 1px solid #ccc;

  border-top:0;
  border-radius: 0 0 10px 10px;
  text-align: center;
}
  
.topnav {
  overflow: hidden;
  position: relative;

 
}
  
.topnav #myLinks {
  display: none;
}

.topnav > a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.3em;
  display: block;
}

.topnav > a.icon {
  background: #454545;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.topnav > a.icon:hover {
  color: white;
}
.topnav > a:hover {
 
  color: white;
  text-decoration:none;

}

#subir.icon {
  color: #454545;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right:6px;
}


 #subir:hover {
 
  color: #dd9828;
  text-decoration:none;

}
#subir:hover::before {
 
  content:"Minimiza Panel";
  color: #454545;
  font-size:small;
}

.active {
  background-color: #dd9828;
  color: white;
  min-width: 410px;

}

#topten{
  background-color: rgba(205, 195, 161, 0.5);
  color:#333;
  
}    

.fa-info-circle, .fa-volume-up{
  font-size:14px;
}

@media only screen and (max-width: 1200px) {   
    
    #marcador, .credenciales, #panel_grados{
      position: static;
  
    }

    
    button#info_grados{
      position: fixed;
      top: 145px;
      right:-55px;
    }
    .image{
      
        background-position: 95% bottom;
    }

    #salli{ 
      width: 50vw;
      font-size: 1.1em;
      height:75px; 

    }

    button {
       /* background:rgba(6, 65, 24, 0.5); */
       background:#009877;
    }
    button:hover {
      background: white;
      color: #444;
      border: 2px solid #009877;
      
    }
    
    .credenciales {      
      margin:auto;
      min-width: 100%;
    }  

    /* Float four columns side by side */
  .column {
    float: left;
    width: 50%;
    padding: 0 10px;
  }



  .card {
   
    position:static;
    width: 100%;
    margin-bottom: 5px;
    

  }


    
}

/* Responsive columns */
@media screen and (max-width: 700px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }

  .card {
   
    position:static;
    width: 100%;

  }
}

@media screen and (max-width: 450px) {
  button#info_grados{
    position: absolute;
    top: 145px;
    left:-55px;
  }
}