@import url('http://fonts.googleapis.com/css?family=Helvetica');


html {
    font-size: 62.5%;
    background-color: black;
    color: lightgray;
}

body {
    box-sizing: border-box;
    font-family: 'Helvetica', serif;
}

* {
    margin: 0;
    padding: 0;
}

/* social media */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: .5fr 1fr auto .5fr;
    grid-row-gap: 1.6rem;
    margin-top: 1.6rem;
    /*background-color: ;*/
}

.social-icons {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    list-style: none;
    display: grid;
    grid-template-columns: 2fr 2fr;
  
    align-items: center;
    justify-items: center;
}

.social-icon {
    font-size: 3rem;
    color: gray;
    transition: all .2s;
    align-items: center;
}

.social-icon:hover {
    color: rgb(136, 208, 250);
    transform: rotateZ(360deg);
}

/* banner */

.logo {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    text-align: center;
}

.logo img{
    width: 70%;
    
}



.telefonos {
    grid-column: 2/3;
    grid-row: 3/3;
    display: grid;
    grid-template-columns: .7fr 1fr;
    grid-template-rows: .5fr .5fr .5fr;
    padding-top: 20px;
    text-align: right;
    font-size: 5px;
    color: gray;
    align-items: center;
    }

    
.mex_img{
    grid-column: 1/2;
    grid-row: 1/2;
    padding: 3px;
}

.tel_link  {
    grid-column: 2/3;
    grid-row: 1/2;
    text-align: left;
    font-size:small;

}
.whats_img{
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 3px;
}

.whats_link {
    grid-column: 2/3;
    grid-row: 2/3;
    text-align: left;
}

.usa_img{
    grid-column: 1/2;
    grid-row: 3/4;
    padding: 3px;
}
.usa_link {
    grid-column: 2/3;
    grid-row: 3/3;
    text-align: left;
} 

.telefonos a {
    text-decoration: none;
    color: gray;
    font-size: large;
}

.direccion {
    grid-column: 2/3;
    grid-row: 4/5;
    font-size: 1.5rem;
    text-align: center;
    color: gray;
    
}


/* end of banner */