/* Contains all content */
.main-container {
 	width: 708px;
  	height: 200px;
	position: absolute;
	top: -15%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/* Hexagon Zoom animation */
@keyframes zoom {
  0%    { transform: scale(.25);}
  50%   { transform: scale(2);}
  100%  { transform: scale(1);}
}

@-webkit-keyframes zoom {
  0%    { -webkit-transform: scale(.25);}
  50%   { -webkit-transform: scale(2);}
  100%  { -webkit-transform: scale(1);}
}

@-moz-keyframes zoom {
  0%    { -moz-transform: scale(.25);}
  50%   { -moz-transform: scale(2);}
  100%  { -moz-transform: scale(1);}
}

@-ms-keyframes zoom {
  0%    { -ms-transform: scale(.25);}
  50%   { -ms-transform: scale(2);}
  100%  { -ms-transform: scale(1);}
}

@-o-keyframes zoom {
  0%    { -o-transform: scale(.25);}
  50%   { -o-transform: scale(2);}
  100%  { -o-transform: scale(1);}
}

/* Hexagon Zoom opacity Animation*/
@keyframes opaczoom {
  0%    {opacity:0; }
  50%   {opacity:1; }
  100%  {opacity:1; }
}

@-webkit-keyframes opaczoom {
  0%    {opacity:0; }
  50%   {opacity:1; }
  100%  {opacity:1; }
}

@-moz-keyframes opaczoom {
  0%    {opacity:0; }
  50%   {opacity:1; }
  100%  {opacity:1; }
}

@-ms-keyframes opaczoom {
  0%    {opacity:0; }
  50%   {opacity:1; }
  100%  {opacity:1; }
}

@-o-keyframes opaczoom {
  0%    {opacity:0; }
  50%   {opacity:1; }
  100%  {opacity:1; }
}


/* Text Header */
.hello-text {
  font-family: courier;
  color: #000000;
  font-weight: 100;
  font-size: 30px;
  text-align: center;
}

/* Work/Resume Link */
.work-link {
  color: #FE2E64; 
}


/* Draw Hexagon Container*/
/*.social {
  width: 708px;
  height: 100%;
}*/

/* Animate SVG hexagons */
.svg-hexagon {
  fill: #000000;
  animation-name: zoom;
  animation-duration: 2.3s;
  animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  animation-fill-mode: forwards;
  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 2.3s;
  -webkit-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: zoom;
  -moz-animation-duration: 2.3s;
  -moz-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -moz-animation-fill-mode: forwards;

  -ms-animation-name: zoom;
  -ms-animation-duration: 2.3s;
  -ms-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -ms-animation-fill-mode: forwards;

  -o-animation-name: zoom;
  -o-animation-duration: 2.3s;
  -o-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -o-animation-fill-mode: forwards;
}

.opacanimation {
  opacity: 0;
  
  animation-name: opaczoom;
  animation-duration: 2.3s;
  animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  animation-fill-mode: forwards;
  
  -webkit-animation-name: opaczoom;
  -webkit-animation-duration: 2.3s;
  -webkit-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -webkit-animation-fill-mode: forwards;
  
  -moz-animation-name: opaczoom;
  -moz-animation-duration: 2.3s;
  -moz-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -moz-animation-fill-mode: forwards;

  -ms-animation-name: opaczoom;
  -ms-animation-duration: 2.3s;
  -ms-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -ms-animation-fill-mode: forwards;

  -o-animation-name: opaczoom;
  -o-animation-duration: 2.3s;
  -o-animation-timing-function: cubic-bezier(.1,.52,.38,1.55);
  -o-animation-fill-mode: forwards;
}

/* Delays Hexagon Zoom for accordion effect */
.hex1 {  animation-delay: .7s;}
.hex2 {  animation-delay: .8s;}
.hex3 {  animation-delay: .9s;}
.hex4 {  animation-delay: 1s;}
.hex5 {  animation-delay: 1.2s;}
.hex6 {  animation-delay: 1.4s;}
.hex7 {  animation-delay: 1.7s;}
.hex8 {  animation-delay: 1.9s;}

.hex1 {  -webkit-animation-delay: .7s;}
.hex2 {  -webkit-animation-delay: .8s;}
.hex3 {  -webkit-animation-delay: .9s;}
.hex4 {  -webkit-animation-delay: 1s;}
.hex5 {  -webkit-animation-delay: 1.2s;}
.hex6 {  -webkit-animation-delay: 1.4s;}
.hex7 {  -webkit-animation-delay: 1.7s;}
.hex8 {  -webkit-animation-delay: 1.9s;}

.hex1 {  -moz-animation-delay: .7s;}
.hex2 {  -moz-animation-delay: .8s;}
.hex3 {  -moz-animation-delay: .9s;}
.hex4 {  -moz-animation-delay: 1s;}
.hex5 {  -moz-animation-delay: 1.2s;}
.hex6 {  -moz-animation-delay: 1.4s;}
.hex7 {  -moz-animation-delay: 1.7s;}
.hex8 {  -moz-animation-delay: 1.9s;}

.hex1 {  -ms-animation-delay: .7s;}
.hex2 {  -ms-animation-delay: .8s;}
.hex3 {  -ms-animation-delay: .9s;}
.hex4 {  -ms-animation-delay: 1s;}
.hex5 {  -ms-animation-delay: 1.2s;}
.hex6 {  -ms-animation-delay: 1.4s;}
.hex7 {  -ms-animation-delay: 1.7s;}
.hex8 {  -ms-animation-delay: 1.9s;}

.hex1 {  -o-animation-delay: .7s;}
.hex2 {  -o-animation-delay: .8s;}
.hex3 {  -o-animation-delay: .9s;}
.hex4 {  -o-animation-delay: 1s;}
.hex5 {  -o-animation-delay: 1.2s;}
.hex6 {  -o-animation-delay: 1.4s;}
.hex7 {  -o-animation-delay: 1.7s;}
.hex8 {  -o-animation-delay: 1.9s;}


.hexagon {
  display: inline-block;
  position: relative;
  height: 85px;
  width: 85px;
  }

/* Logo Fade in Animation */
@keyframes fadeIn { 
  0% {opacity:0;}
  57% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn { 
  0% {opacity:0;}
  57% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn { 
  0% {opacity:0;}
  57% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn { 
  0% {opacity:0;}
  57% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn { 
  0% {opacity:0;}
  57% {opacity:0;}
  100% {opacity:1;}
}

/* Logo Color Change Hover Effect */
.logo {
  -webkit-backface-visibility: hidden; 
  text-align: center;
  position: absolute;
  top: 29%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-duration: 5.7s;
  -webkit-animation-duration: 5.7s;
  -moz-animation-duration: 5.7s;
  -ms-animation-duration: 5.7s;
  -o-animation-duration: 5.7s;
}

.svg-hexagon {
  transition:1.1s;
  -webkit-transition:1.1s;
  -moz-transition:1.1s;
  -ms-transition:1.1s;
  -o-transition:1.1s;
}

.logo-hoverbox1:hover > .svg-hexagon { 
  fill: #2E2EFE; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;
}

.logo-hoverbox2:hover > .svg-hexagon { 
  fill: #642EFE; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;
}
.logo-hoverbox3:hover > .svg-hexagon { 
  fill: #9A2EFE; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;
}
.logo-hoverbox4:hover > .svg-hexagon { 
  fill: #CC2EFA; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;
}
.logo-hoverbox5:hover > .svg-hexagon { 
  fill: #FE2EF7; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;
}
.logo-hoverbox6:hover > .svg-hexagon { 
  fill: #FE2EC8; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;  
}
.logo-hoverbox7:hover > .svg-hexagon { 
  fill: #FE2E9A; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;  
}

.logo-hoverbox8:hover > .svg-hexagon { 
  fill: #FE2E64; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s;
  -o-transition:.03s;  
}

a {
text-decoration: none;
}

/* Pulsate color on email icon */
.pulsate {
  -animation: pulsate 1.5s linear infinite;
  -webkit-animation: pulsate 1.5s linear infinite;
  -moz-animation: pulsate 1.5s linear infinite;
  -ms-animation: pulsate 1.5s linear infinite;
  -o-animation: pulsate 1.5s linear infinite;
}

@-keyframes pulsate {
  0%    {color:#FFFFFF; -webkit-transform: scale3d(1.12,1.12,1.12);}
  10%   {color:#FE2E64; -webkit-transform: scale3d(1.12,1.12,1.12);}
  100%  {color:#FFFFFF; -webkit-transform: scale3d(1,1,1);}
}

@-webkit-keyframes pulsate {
  0%    {color:#FFFFFF; -webkit-transform: scale3d(1.12,1.12,1.12);}
  10%   {color:#FE2E64; -webkit-transform: scale3d(1.12,1.12,1.12);}
  100%  {color:#FFFFFF; -webkit-transform: scale3d(1,1,1);}
}

@-moz-keyframes pulsate {
  0%    {color:#FFFFFF; -webkit-transform: scale3d(1.12,1.12,1.12);}
  10%   {color:#FE2E64; -webkit-transform: scale3d(1.12,1.12,1.12);}
  100%  {color:#FFFFFF; -webkit-transform: scale3d(1,1,1);}
}

@-ms-keyframes pulsate {
  0%    {color:#FFFFFF; -webkit-transform: scale3d(1.12,1.12,1.12);}
  10%   {color:#FE2E64; -webkit-transform: scale3d(1.12,1.12,1.12);}
  100%  {color:#FFFFFF; -webkit-transform: scale3d(1,1,1);}
}

@-o-keyframes pulsate {
  0%    {color:#FFFFFF; -webkit-transform: scale3d(1.12,1.12,1.12);}
  10%   {color:#FE2E64; -webkit-transform: scale3d(1.12,1.12,1.12);}
  100%  {color:#FFFFFF; -webkit-transform: scale3d(1,1,1);}
}


.logo-hoverbox8:hover .pulsate { 
  color: #FE2E64; 
  transition:.03s; 
  -webkit-transition:.03s; 
  -moz-transition:.03s; 
  -ms-transition:.03s; 
  -o-transition:.03s; 
  -animation: 0;
  -webkit-animation: 0;
  -moz-animation: 0;
  -ms-animation: 0;
  -o-animation: 0;
  -transform: scale3d(1.12,1.12,1.12);
  -webkit-transform: scale3d(1.12,1.12,1.12);
  -moz-transform: scale3d(1.12,1.12,1.12);
  -ms-transform: scale3d(1.12,1.12,1.12);
  -o-transform: scale3d(1.12,1.12,1.12);
}

/* when transition pauses, reverts to assigned color for a moment */
/* This prevents a weird flicker on hover */
.envelope-color {
  color: #FFFFFF;
}

.logo-hoverbox8:hover .envelope-color {
  color: #FFFFFF;

}