*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration-line: none;

}
@font-face 
{
    font-family: 'Astronomus';
    src: url('fuentes/astronomus/Astronomus.ttf');
}
/*------------------------------------------------------------------------------------------------------*/
/*HEADER*/

video
{
    height: auto;
    width: 100%;
}

/*------------------------------------------------------------------------------------------------------
   BODY*/

body
{
    background-color: #abc3f5;
}
h1
{
    font-family: Astronomus;
    padding: 20px;
    color: white;
    background-color: #4076E7;
    width: 90%;
    max-width: 90%;
    margin-left: 5%;
    grid-gap: 10px;
    border-radius: 30px;
    letter-spacing: 3px ;

}
h3
{
    text-decoration: underline #4076E7;
}
.p1
{   
    font-family: Astronomus; 
    padding: 40px;
    color: #266BF6;
    background-color: #F5F5F5;
    text-align: start;
    width: 100%;
    max-width: 90%;
    margin: auto;
    grid-gap: 5px;
    border-radius: 30px;

}
.p2
{
    font-family: Astronomus; 
    padding: 40px;
    color: #266BF6;
    background-color: #F5F5F5;
    text-align: start;
    width: 100%;
    max-width: 90%;
    margin: auto;
    grid-gap: 5px;
    border-radius: 30px;
}
.p3
{   
    font-family: Astronomus;  
    padding: 40px;
    color: #266BF6;
    background-color: #F5F5F5;
    text-align: start;
    width: 100%;
    max-width: 90%;
    margin: auto;
    grid-gap: 5px;
    border-radius: 30px;
}
.p4
{   
    font-family: Astronomus;  
    padding: 40px;
    color: #266BF6;
    background-color: #F5F5F5;
    text-align: start;
    width: 100%;
    max-width: 90%;
    margin: auto;
    grid-gap: 5px;
    border-radius: 30px;
}
.fotoprimaria{
    width: 60%;
    border: solid #266BF6;
    border-radius: 20px;
}
.fotosecundaria{
    width: 60%;
    border: solid #266BF6;
    border-radius: 20px;
}
.p5
{   
    font-family: Astronomus;  
    padding: 40px;
    color: #266BF6;
    background-color: #F5F5F5;
    text-align: start;
    width: 100%;
    max-width: 90%;
    margin: auto;
    grid-gap: 5px;
    border-radius: 30px;
}
.enviar{   
    font-family: Astronomus;  
    padding: 40px;
    color: #266BF6;
    background-color: #F5F5F5;
    text-align: start;
    width: 100%;
    max-width: 90%;
    margin: auto;
    grid-gap: 5px;
    border-radius: 30px;
}
.fotoenviar{
    width: 60%;
    border: solid #266BF6;
    border-radius: 20px;
}
/*------------------------------------------------------------------------------------------------------
 FOOTER */

footer 
{
    width: 100%;
    background-color: #224c8d;
}

footer .grupo1
{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    padding: 25px 0px;
}

footer .grupo1 .box figure 
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

footer .grupo1 .box figure img 
{
    width: 150px;
}


footer .grupo1 .box h4 
{
    color: #fff;
    margin-bottom: 5px;
    margin-top: 5px;
}

footer .grupo1 .box a 
{
    color: #a8a8a3;
}

footer .grupo1 .box a:hover
{
    color: #ffffff;
}

#facebook, #instagram, #twitter, #youtube
{
    height: 48px;
    width: 48px;
}

#facebook
{
    background-image: url("img/facebook.png");
}

#facebook:hover
{
    background-image: url("img/facebook-color.png");
}

#instagram
{
    background-image: url("img/instagram.png");
}

#instagram:hover
{
    background-image: url("img/instagram-color.png");
}

#twitter
{
    background-image: url("img/twitter.png");
}

#twitter:hover
{
    background-image: url("img/twitter-color.png");
}

#youtube
{
    background-image: url("img/youtube.png");
}

#youtube:hover
{
    background-image: url("img/youtube-color.png");
}

#facebook, #instagram, #twitter, #youtube
{
    display: inline-block;
}

.red-social a
{
    display: inline-block;
    margin: 10px 15px 0 0;
}

footer .grupo2 
{
    padding: 15px 10px;
    text-align: center;
    color: #224C8D;
}

/*------------------------------------------------------------------------------------------------------
 RESPONSIVE */

/*------------------------------------------------------------------------------------------------------
  footer*/
@media (max-width: 850px) 
{ 
    footer .grupo1
        {
            width: 90%;
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 5px;
            padding: 35px 0px;
        }
    /*----------------------------------------------------------------------------------------------------------
    Pasos*/
    h1
        {
            font-size: 20px;
            color: white;
            padding: 20px;
            background-color: #266BF6;
            text-align: center;
            width: 100%;
            max-width: 60%;
            margin: auto;
            grid-gap: 10px;
            border-radius: 30px;
        }
    .fotoprimaria{
        width: 100%;
    }
    .fotosecundaria{
        width: 100%;
    }
    .fotoenviar{
        width: 100%;
    }
}