a, a:visited { 
    color: black;
    text-decoration: none;
    transition: color 1s ease;
}

a:hover {
    color: orangered;
    transition: color 0.5s ease;
}

section { 
    width: 100%;
    height: 700px;
}

section.stage1 {
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #efefef 0%, #efefef 50%, #f9f2ed 50%, #f9f2ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efefef), color-stop(50%,#efefef), color-stop(50%,#f9f2ed), color-stop(100%,#f9f2ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* IE10+ */
    background: linear-gradient(135deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f9f2ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

section.stage2 {
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(45deg, #efefef 0%, #efefef 50%, #f9f2ed 50%, #f9f2ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#efefef), color-stop(50%,#efefef), color-stop(50%,#f9f2ed), color-stop(100%,#f9f2ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* IE10+ */
    background: linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f9f2ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

section.stage3 {
   background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #efefef 0%, #efefef 50%, #f9f2ed 50%, #f9f2ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efefef), color-stop(50%,#efefef), color-stop(50%,#f9f2ed), color-stop(100%,#f9f2ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* IE10+ */
    background: linear-gradient(135deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f9f2ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#top, #bottom {
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: 48%;
    z-index:500;
    border: 1px solid #ccc;
}

#bottom {
    top: 1950px;
    padding: 20px 21px 18px;
}

#top {
    padding: 22px 21px 18px;
    top: 150px;
}

#top i, #bottom i {
    font-size: 30px;
}

.person {
    width: 500px;
    height: 513px;
    position:absolute;
    left: 30%;
    transform: translate3d(0,0,0);
}

.person img, .shapes svg {
    position: absolute;
    transform: translate3d(0,0,0);
}

.shapes {
    width: 650px;
    height: 670px;
    left: 23.5%;
    top: 630px;
    position: absolute;
    transform: translate3d(0,0,0);
}

@media screen and (max-width: 600px) {
  .person img, .shapes svg {
    width: 100% !important;
  }
  .person, .shapes {
    width: 90% !important;
    left: 5% !important;
    margin: 0 auto;
  }
  #top, #bottom {
    left: 45% !important;
  }
  .top-ft .ft1, .top-ft .ft3 {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 431px) {
  .top-ft .ft1-mob, .top-ft .ft3-mob {
    display: none;
  }
}

@media screen and (max-width: 430px) {
  .top-ft .ft1, .top-ft .ft3 {
    display: none;
  }
  .top-ft .ft1-mob a, .top-ft .ft3-mob a {
    color: white;
    font-size: 30px;
    width: 20%;
    float: left;
  }
  #top, #bottom {
    left: 39% !important;
  }
}

/* font stuff */

@font-face {
	font-family: 'icomoon';
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.eot_copy?-8bldvn');
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.eot_copy?#iefix-8bldvn') format('embedded-opentype'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon_copy.woff?-8bldvn') format('woff'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.ttf?-8bldvn') format('truetype'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.dev.svg?-8bldvn#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-facebook-square:before {
	content: "\f082";
}
.icon-twitter:before {
	content: "\f099";
}
.icon-github:before {
	content: "\f09b";
}
.icon-codepen:before {
	content: "\f1cb";
}
.icon-arrow-down:before {
	content: "\e600";
}
.icon-arrow-up:before {
	content: "\e601";
}

body {
    transform: translate3d(0,0,0);
}