@charset "ISO-8859-1";
body {
	font-size:90%;
}

* {
  box-sizing: border-box;
}

.col-20 {
  float: left;
  width: 20%;
  margin-top: 6px;
}


.col-30 {
  float: left;
  width: 30%;
  margin-top: 6px;
}

.col-40 {
  float: left;
  width: 40%;
  margin-top: 6px;
}

.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}

.col-60 {
  float: left;
  width: 60%;
  margin-top: 6px;
}

.col-80 {
  float: left;
  width: 80%;
  margin-top: 6px;
}

.col-100 {
  float: left;
  width: 100%;
  margin-top: 6px;
}

.leftmargin5{
	margin-left: 5px;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width:823px) and (min-width:412px){
  .col-20, .col-80, .col-30, .col-40, .col-50, .col-60  {
    width: 100%;
    margin-top: 5px;
  }
  
  .leftmargin5{
  	margin-left: 0px;
  }
}

/* Si la pantalla es menor a 412 */
@media screen and (max-width:412px){
  .col-20, .col-80, .col-30, .col-40, .col-50, .col-60  {
    width: 100%;
    margin-top: 5px;
  }
  
  .leftmargin5{
  	margin-left: 0px;
  }
}

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