@font-face {
    font-family: 'latomedium';
    src: url('../fonts/Lato-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoheavy';
    src: url('../fonts/Lato-Heavy.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DMSerifDisplay';
    src: url('../fonts/DMSerifDisplay-Italic.ttf');
    font-weight: normal;
    font-style: normal;
}

body
{
    background-color: #f2f2f4;
    margin: 0px;
}
label
{
    color: #474747;
    display: flex;
    align-items: center;
    font-family: 'latomedium';
    font-size: 1.5rem;
    padding: 15px;
    text-align: center;
}

@media (max-width: 800px)
{
    label
    {
        height: 2rem;
        font-size: smaller;
    }
    img.caritas
    {
        width:50px;
        height:50px;
    }
}

#dni
{
    display: flex;
    align-items: center;
}
section
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

@media (max-width:800px){
    section
    {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
  }

img.caritas
{
    cursor: pointer;
    color: #FFFFFF;
    border-radius: 100%; 
    box-shadow: 5px 5px 5px #9b9999; 
    position: relative;
    top: 0px;
    transition: all ease 0.1s;
}

img.caritas:active {
    box-shadow: 5px 5px 5px #646464;
    top: 5px;
  }

  button
  {
    padding: 15px 50px 15px 50px;
    border-radius: 30px;
    border: none;
    margin: 30px;
    background-color: #56c400;
    color: #FFFFFF;
    cursor: pointer;
    
  }

  input
  {
      padding-left: 40px;
      padding-right: 40px;
      padding-top: 15px;
      padding-bottom: 15px;
      border-radius: 30px;
      text-align: center;
           
    }

div.cuadros
{
    border-radius: 100px;
    background-color: #FFFFFF;
    padding: 40px;
    margin: 0% 10%;
    box-shadow: 0px 0px 14px 1px rgba(51,51,51,0.48);
    -webkit-box-shadow: 0px 0px 14px 1px rgba(51,51,51,0.48);
    -moz-box-shadow: 0px 0px 14px 1px rgba(51,51,51,0.48);
}

@media (max-width:800px)
{
    div.cuadros
    {
        border-radius: 40px;
        padding: 20px;
        padding: 0px 30px 0px 30px;
        margin: 0% 10% 0% 10%;
    }
}
div.logo
{
    background-color: white;
    padding: 5%;
    width: 100%;
    text-align: center;
    box-shadow: 0px 0px 14px 1px rgba(51,51,51,0.48);
    -webkit-box-shadow: 0px 0px 14px 1px rgba(51,51,51,0.48);
    -moz-box-shadow: 0px 0px 14px 1px rgba(51,51,51,0.48);
}
div.sucursal
{
    padding: 10% 50% 0% 50%;

}

@media (max-width:800px)
{
    img.sucursalimg
    {
        width:100px;
        height:80px;
    }
}

label.sucursaltext
{
    color: #56c400;
    font-family: 'latoheavy';
    text-align: center;
    font-size: 25px;
    margin-bottom: -2%;
    
}
label.sucursaltext2
{
    font-family: 'latomedium';
    text-align: center;
    font-size: 20px;
    margin-bottom: 5%;
}
@media (max-width:800px)
{
    label.sucursaltext
    {
        font-size: 15px;
        padding: 0px;
    }
    label.sucursaltext2
    {
        font-size: 13px;
        padding: 0px;
    }
}

div.titulo
{
    margin: 0% 0% 5% 0%;

}

section.ordencaritas
{
    display: flex;
    flex-direction:column;
    
}
label.titlotext2
    {
        font-family: 'latoheavy';
        font-style: italic;
        color: #545454;
    }
@media (max-width:800px){
label.titlotext2
    {
        font-family: 'latoheavy';
        font-style: italic;
        color: #545454;
        font-size: 12px;
        padding-bottom: 0px;
    }
}
label.fintext
{
    font-family: 'DMSerifDisplay';
    color: #5BC500;
    font-size: xx-large;
    padding-top: 35px;
}
img.sucursalimg2
{
    padding-top: 40%;
}

div.pregunta
{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center
}