.datos{
    display: flex;
    background: #070E17;
    color: white;
}

.logo{
    width:22%;
    height: auto;
    margin: 3rem;
    margin-left: 6rem;
}

.sn{
    margin-left: 6rem;
    margin-right: 6rem;
    width: 100rem;
    margin-top: 1rem;
    padding-top:1rem;
}

.sn p{
    margin-top: 1%;
}

.s{
    margin-left: 6rem;
    margin-top: 2%;
}

.redes{
    width: 10%;
    height: auto;
    margin-top: 1%;
}

#ig{
    margin-left: 1rem;
}

.d-inline-block{
    height: auto;
    display: inline-block;
    text-align: center;
    margin-left: 1rem;
}

#gmail{
    width: 12%;
    height: auto;
}

section{
    color: white;
    background-color: #16407D;
    height: auto;
    width: auto;
    padding: .3%;
 }
 
 section p{
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
 }

 /*--------------------------------- Responsive Media Quaries -----------------------------*/

 @media only screen and (min-width: 1200px) {
	.redes{
        width: 14%;
        height: auto;
        margin-top: 1%;
    }
    
    #gmail{
        margin-left: 1rem;
        width: 15%;
        height: auto;
    }
 }
 
 /* Medium Device = 1200px */
 
 @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .logo{
        width:20%;
        height: auto;
        margin-left: 3rem;
        margin-right: auto;
    }
    
    .sn p{
        font-size: .8rem;
    }

    .s{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }
    
    .redes{
        width: 12%;
        height: auto;
    }
    
    #gmail{
        margin-left: .9rem;
        width: 13%;
        height: auto;
    }
 }
 
  /* Tablet Device = 768px */
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
    .datos{
        flex-direction: column;
        text-align: center;
    }
    
    .logo{
        width:30%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: .1rem;
        margin-top: .8rem;
    }
    
    .sn{
        margin-left: auto;
        margin-right: auto;
        width: 20rem;
    }
    
    .sn p{
        font-size: .7rem;
        margin-bottom: 1.2rem;
    }
    
    .s{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }
    
    .redes{
        width: 6%;
        height: auto;
    }
    
    #ig{
        margin-left: 1rem;
    }
    
    #gmail{
        margin-left: 1rem;
        width: 8%;
        height: auto;
    }

    section p{
        font-size: .8rem;
     }
 }
 
 /* Wide Mobile = 480px */
 
 @media only screen and (max-width: 767px) {
    .datos{
        flex-direction: column;
        text-align: center;
    }
    
    .logo{
        width:30%;
        height: auto;
        margin-left: 11.5rem;
        margin-right: auto;
        margin-bottom: .1rem;
        margin-top: .8rem;
    }
    
    .sn{
        text-align: center;
        width: 20rem;
    }
    
    .sn p{
        font-size: .7rem;
        margin-bottom: 1.2rem;
    }
    
    .s{
        margin-left: 2rem;
        margin-right: auto;
        margin-bottom: 2rem;
    }
    
    .redes{
        width: 6%;
        height: auto;
    }
    
    #ig{
        margin-left: 1rem;
    }
    
    #gmail{
        margin-left: 1rem;
        width: 8%;
        height: auto;
    }

    section p{
        font-size: .8rem;
     }
  }

  @media only screen and (min-width: 310px) and (max-width: 616px) {
    .datos{
        flex-direction: column;
        text-align: center;
    }
    
    .logo{
        margin-left: auto;
        margin-right: auto;
    }
    
    .sn{
        text-align: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .sn p{
        font-size: .7rem;
        margin-bottom: 1.2rem;
        margin-left: auto;
        margin-right: auto;
    }
    
    .s{
        margin-left: auto;
        margin-right: auto;
    }

    section p{
        font-size: .6rem;
     }
  }