@import url(https://fonts.googleapis.com/css?family=Lato);
  @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: black;
  }

  .social-icon {
    color: #fff;
}

.social-icons li {
    display: inline;
}

#soonmore:hover{
    transform: scale(1.05);
}  

body{
    display: grid;
    grid-template-columns: auto 350px auto ;
    grid-template-rows: auto 400px 80px 50px auto;
  }

  #soonmore{
    grid-column: 2 / 3; 
    grid-row: 2 / 4;
    transition: .5s;
  }

@media only screen and (min-width: 320px) {

  body{
    display: grid;
    grid-template-columns: auto 300px auto ;
    grid-template-rows: auto 400px 80px 50px auto;
  }

  #soonmore{
    grid-column: 2 / 3; 
    grid-row: 2 / 4;
    transition: .5s;
  }

  .footer-social-icons {
    grid-column: 2 / 3; 
    grid-row: 4 / 5;
    display: block;
}

.fa-instagram {
    padding-right: 50px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    position: absolute;
    left: 29%;
    right: 29%;
}
.fa-facebook {
    padding-right: 50px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    transition: .5s;
    position: absolute;
    left: 43%;
    right: 43%;
}

.fa-youtube {
    padding-right: 50px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    position: absolute;
    left: 57%;
    right: 57%;
}

.fa-twitter {
    padding-right: 50px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    position: absolute;
    left: 71%;
    right: 71%;
}

}




@media screen and (min-width: 680px) {

    body{
        display: grid;
        grid-template-columns: auto 650px auto;
        grid-template-rows: auto 500px 80px 50px auto;
    }

    #soonmore{
        grid-column: 2 / 3; 
        grid-row: 2 / 3;
      }

      .footer-social-icons {
        grid-column: 2 / 3; 
        grid-row: 4 / 5;
        display: block;
    }


    .fa-instagram {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 45%;
        right: 45%;
    }
    .fa-facebook {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 49%;
        right: 49%;
    }
    
    .fa-youtube {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 53%;
        right: 53%;
    }
    
    .fa-twitter {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 57%;
        right: 57%;
    }
    
}



@media screen and (min-width : 1024px) {

    body{
        display: grid;
        grid-template-columns: auto 800px auto;
        grid-template-rows: auto 600px 80px 50px auto;
    }

    .footer-social-icons {
        grid-column: 2 / 3; 
        grid-row: 5/ 6;
        display: block;
    }

    #soonmore{
        grid-column: 2 / 3; 
        grid-row: 2 / 3;
      }

      .fa-instagram {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 44%;
        right: 44%;
    }
    .fa-facebook {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 48%;
        right: 48%;
    }
    
    .fa-youtube {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 52%;
        right: 52%;
    }
    
    .fa-twitter {
        padding-right: 50px;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition: .5s;
        position: absolute;
        left: 56%;
        right: 56%;
    }
    
    .footer-social-icons {
        grid-column: 3 / 4; 
        grid-row: 3/ 4;
        display:block;
    }
    
}