@font-face {
    font-family: 'Raleway';
    src: url('Raleway-VariableFont_wght.ttf');
}
.html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Raleway;
    background-color: rgb(228, 236, 245);
}

input::placeholder {

    font-family: Raleway;
}

input[type=submit]{

    font-family: Raleway;
}

.header {
    box-sizing: border-box;
    margin: auto;
    border: 0;
    background-color: white;
    height: 80px;
    width: 100%;
    position: relative;
}

.mostrador-1 {
    box-sizing: border-box;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px; 
    padding-right: 15px;
    border: 0;
    background-color:transparent;
    height: 80px;
    display: flex;
}

.ventana-1 {
    box-sizing: border-box;
    margin: auto;
    padding: auto;
    border: 0;
    background-color: transparent;
    width: 25%;
    position: relative;
    text-align: center;
}

.ventana-2 {
    box-sizing: border-box;
    margin: auto;
    border: 0;
    background-color: transparent;
    width: 75%;
    position: relative;
    text-align: left;
}

.nav {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgb(87, 106, 125);
    height: 48px;
    width: 100%;
}

.grid {
    background-color: transparent;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px,1fr));
}

.grid > div {
    background-color: transparent;
    color: white;
    border: 5px solid transparent;
    height: 655px;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 30px;
    align-items: center;
}

.ViewSDK_hideOverflowk {
    background-color: transparent;
    color: white;
    border: 5px solid transparent;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 30px;
    align-items: center;
}

@media only screen and (max-width: 450px) {
    .grid {
        background-color: transparent;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    }

    .grid > div {
        background-color: transparent;
        color: white;
        border: 5px solid transparent;
        height: 360px;
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 30px;
        align-items: center;
    }

    .ViewSDK_hideOverflowk {
        background-color: transparent;
        color: white;
        border: 5px solid transparent;
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 30px;
        align-items: center;
    }
  }

.barra{

    font-size: 20px;
    text-align: center;
    border: 1px solid rgb(87, 106, 125);
    border-radius: 6px;
    width: 200px;
    padding: 5px 5px;
}

.boton{

    font-size: 20px;
    text-align: center;
    padding: 5px 50px;
    color: white;
    border-radius: 6px;
    border: 3px rgb(87, 106, 125);
    background-color: rgb(87, 106, 125);
}

.boton:hover{

    font-size: 20px;
    text-align: center;
    padding: 5px 50px;
    color: white;
    border-radius: 6px;
    border: 3px rgb(71, 98, 125);
    background-color: rgb(71, 98, 125);
}

.boton:active{

    font-size: 20px;
    text-align: center;
    padding: 5px 50px;
    color: white;
    border-radius: 6px;
    border: 3px rgb(101, 139, 177);
    background-color: rgb(101, 139, 177);

}

.footer {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgb(87, 106, 125);
    height: 60px;
    width: 100%;
 }

 .footer2 {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgb(255, 255, 255);
    height: 5px;
    width: 100%;
 }

 .footer3 {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgb(3, 3, 3);
    height: 41px;
    width: 100%;
 }

 .fondopdf {
    max-width: 100%;
    min-height: 100%;
 }