/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 280px) {
    .button {
        background-color: white; 
        border: none;
        color: black;
        padding: 0px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        margin: 2px 2px 2px 2px;
        cursor: pointer;
        width: 30px;
        height:30px;
        border-radius: 50%;
    }
    .paso {
        background-color: white;
        border: 4px solid red;
        color: black;
        padding: 0px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        margin: 2px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    #logo_s{
        width:80px;
        height:80px;
    }
}

@media only screen and (min-width: 350px) {
    .button {
        background-color: white; 
        border: none;
        color: black;
        padding: 0px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        margin: 2px 2px 2px 2px;
        cursor: pointer;
        width: 30px;
        height:30px;
        border-radius: 50%;
    }
    #logo_s{
        width:120px;
        height:120px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .button {
        background-color: white; 
        border: none;
        color: black;
        padding: 0px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 40px;
        font-weight: bold;
        margin: 4px 4px 4px 4px;
        cursor: pointer;
        width: 70px;
        height:70px;
        border-radius: 50%;
    }
    .paso {
        background-color: white;
        border: 4px solid red;
        color: black;
        padding: 0px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 40px;
        font-weight: bold;
        margin: 4px;
        cursor: pointer;
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }
    #logo_s{
        width:200px;
        height:200px;
    }
}

hr.new2 {
    border-top: 4px dashed red;
}

.instr{
    font-size: 15px;
    font-weight: bold;
    padding: 1px;
}

.images-container {
    float: right;
    padding-right: 5%;
}



.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.logolateral {
  background-image: url('../img/fondo22.jpg');
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}