body {
  background: #ffd215;
  margin: 0;
}
.main-page {
  display: grid;
  height: 100vh;
  grid-template-areas: "logo" "social";
  grid-template-columns: auto;
  grid-template-rows: auto 80px;
  justify-items: center;
  align-items: center;
}

.logo {
  grid-area: logo;
  max-width: 280px;
}
.contact-social {
  grid-area: social;
  text-align: center;
}

a{
  text-decoration: none;
  color: #393939;
  position: relative;
  transition: all .1s linear;
}
a:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 2px;
    border-width: 0 0 1px;
    border-style: solid;
}

.social-icons{
  font-family: social; 
  font-size: 1.4em;
  text-decoration: none;
  text-align: center;
  vertical-align: bottom;
  display: block;
  margin: 0;
  line-height: 50px;  
}
.social-icons:hover{
  font-size: 2.3em;
}
.social-icons:after{
  border: none;
  border-width: 0;
}
.social-link{
  text-align: center;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  display: inline-block;
}


@media only screen and (max-width:736px){
  .main-page {
    height: calc(100vh + 80 * 3px);
    grid-template-rows: auto 240px;
  }
    .social-link{
      font-size: 1.5rem;
      width: 80px;
      height: 80px;
    }
    .social-icons{
      line-height: 80px; 
    }
}

@media only screen and (max-width:319px){
  .main-page {
    height: calc(100vh + 80 * 4px);
    grid-template-rows: auto 320px;
  }
}

@font-face{font-family:'social';src:url("font/social.eot?97871327");src:url("font/social.eot?97871327#iefix") format("embedded-opentype"),url("font/social.woff?97871327") format("woff"),url("font/social.ttf?97871327") format("truetype"),url("font/social.svg?97871327#social") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"social";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}
.icon-skype:before{content:'\e800'}
.icon-ello:before{content:'\e801'}
.icon-linkedin:before{content:'\e802'}
.icon-xing:before{content:'\e803'}
.icon-behance:before{content:'\e804'}
.icon-dribbble:before{content:'\e805'}
.icon-star:before{content:'\e806'}
.icon-airplane:before{content:'\e807'}
.icon-adn:before{content:'\e80a'}
.icon-facebook:before{content:'\e80b'}
.icon-instagram:before{content:'\e80c'}
.icon-spotify:before{content:'\e80d'}
.icon-twitter:before{content:'\e80e'}
.icon-stackoverflow:before{content:'\e80f'}
.icon-flickr:before{content:'\e810'}
.icon-gplus:before{content:'\e811'}
.icon-lastfm:before{content:'\e812'}
.icon-mail:before{content:'\e813'}
.icon-phone:before{content:'\e814'}