.social {
  padding: 0 2rem;
}
  .social ul {
    text-align: center
  }
    .social ul li {
      display: inline-block;
      margin: .7rem .5rem;
    }
      .social ul li a {
        display: block;
        position: relative;
        width: 3.6rem;
        height: 3.6rem;
      }
        .social ul li a .circle {
          height: 100%
        }
          .social ul li a .circle svg {
            stroke: #585858;
            fill: transparent;
            width: 100%;
            height: 100%;
          }
            .social.linear ul li a .circle svg {
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              transition: all 0.3s;
            }
            .social.elastic ul li a .circle svg {
              -webkit-transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
              -moz-transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
              transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
            }

        .social ul li a .icon {
          text-align: left
        }
          .social ul li a .icon svg {
            position: absolute;
            fill: #585858;
            width: 100%;
            height: 100%;
          }
            .social.linear ul li a .icon svg {
              -webkit-transition: all 0.2s;
              -moz-transition: all 0.2s;
              transition: all 0.2s;
            }
            .social.elastic ul li a .icon svg {
              -webkit-transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
              -moz-transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
              transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
            }

            .social ul li.facebook a .icon svg {
              height: 50%;
              margin: 25% 0 0 -1%;
            }
            .social ul li.twitter a .icon svg {
              height: 42%;
              margin: 29% 0 0 2%;
            }
            .social ul li.linkedin a .icon svg {
              height: 44%;
              margin: 28% 0 0 1%;
            }
            .social ul li.youtube a .icon svg {
              height: 36%;
              margin: 32% 0 0 0;
            }
            .social ul li.pinterest a .icon svg {
              height: 50%;
              margin: 25% 0 0 -1%;
            }
            .social ul li.instagram a .icon svg {
              height: 50%;
              margin: 25% 0 0 -2%;
            }
            .social ul li.googleplus a .icon svg {
              height: 46%;
              margin: 27% 0 0 2%;
            }
      .social ul li a:hover {
        cursor: pointer
      }
        .social.no-spin ul li a:hover .circle svg {
          -webkit-transform: scale(1.3);
          -moz-transform: scale(1.3);
          -ms-transform: scale(1.3);
          -o-transform: scale(1.3);
          transform: scale(1.3);
        }
        .social.x-spin ul li a:hover .circle svg {
          -webkit-transform: scale(1.3) rotateX(180deg);
          -moz-transform: scale(1.3) rotateX(180deg);
          -ms-transform: scale(1.3) rotateX(180deg);
          -o-transform: scale(1.3) rotateX(180deg);
          transform: scale(1.3) rotateX(180deg);
        }
        .social.y-spin ul li a:hover .circle svg {
          -webkit-transform: scale(1.3) rotateY(180deg);
          -moz-transform: scale(1.3) rotateY(180deg);
          -ms-transform: scale(1.3) rotateY(180deg);
          -o-transform: scale(1.3) rotateY(180deg);
          transform: scale(1.3) rotateY(180deg);
        }
        .social.xy-spin ul li a:hover .circle svg {
          -webkit-transform: scale(1.3) rotateX(180deg) rotateY(180deg);
          -moz-transform: scale(1.3) rotateX(180deg) rotateY(180deg);
          -ms-transform: scale(1.3) rotateX(180deg) rotateY(180deg);
          -o-transform: scale(1.3) rotateX(180deg) rotateY(180deg);
          transform: scale(1.3) rotateX(180deg) rotateY(180deg);
        }
          .social ul li.facebook a:hover .circle svg {
            stroke: #3b5998;
          }
          .social ul li.twitter a:hover .circle svg {
            stroke: #55acee;
          }
          .social ul li.vkontakte a:hover .circle svg {
            stroke: #0077b5;
          }
          .social ul li.linkedin a:hover .circle svg {
            stroke: #0077b5;
          }
          .social ul li.youtube a:hover .circle svg {
            stroke: #cd201f;
          }
          .social ul li.pinterest a:hover .circle svg {
            stroke: #cc2127;
          }
          .social ul li.instagram a:hover .circle svg {
            stroke: #3f729b;
          }
          .social ul li.googleplus a:hover .circle svg {
            stroke: #dd4b39;
          }
        .social ul li a:hover .icon svg {
          -webkit-transform: scale(1.3);
          -moz-transform: scale(1.3);
          -ms-transform: scale(1.3);
          -o-transform: scale(1.3);
          transform: scale(1.3);
        }
        .social.z-spin ul li a:hover .icon svg {
          -webkit-transform: scale(1.3) rotateZ(360deg);
          -moz-transform: scale(1.3) rotateZ(360deg);
          -ms-transform: scale(1.3) rotateZ(360deg);
          -o-transform: scale(1.3) rotateZ(360deg);
          transform: scale(1.3) rotateZ(360deg);
        }
          .social ul li.facebook a:hover .icon svg {
            fill: #3b5998;
          }
          .social ul li.twitter a:hover .icon svg {
            fill: #55acee;
          }
          .social ul li.linkedin a:hover .icon svg {
            fill: #0077b5;
          }
          .social ul li.vkontakte a:hover .icon svg {
            fill: #0077b5;
          }
          .social ul li.youtube a:hover .icon svg {
            fill: #cd201f;
          }
          .social ul li.pinterest a:hover .icon svg {
            fill: #cc2127;
          }
          .social ul li.instagram a:hover .icon svg {
            fill: #3f729b;
          }
          .social ul li.googleplus a:hover .icon svg {
            fill: #dd4b39;
          }



@media(max-width: 640px) {

  h1 {
    padding: 4.8rem 2rem 1rem 2rem;
    font-size: 2.4rem;
  }

  h2 {
    padding: 2.4rem 2rem 1rem 2rem;
    font-size: 1.2rem;
  }

  .social ul li {
    margin: .5rem .3rem;
  }
    .social ul li a {
      display: block;
      position: relative;
      width: 2.4rem;
      height: 2.4rem;
    }
}