@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
 @import url('https://fonts.googleapis.com/css?family=Roboto:100');
 * {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
}
 .header {
	 text-align: center;
	 font-family: 'Roboto', sans-serif;
	 font-size: 34px;
	 margin-top: 12vh;
}
 .footer {
	 text-align: center;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 font-size: 20px;
	 margin-top: 15vh;
}
 .button-container-1 {
	 position: relative;
	 width: 100px;
	 height: 50px;
	 margin-left: auto;
	 margin-right: auto;
	 margin-top: 6vh;
	 overflow: hidden;
	 border: 1px solid;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 font-size: 20px;
	 transition: 0.5s;
	 letter-spacing: 1px;
	 border-radius: 8px;
}
 .button-container-1 button {
	 width: 101%;
	 height: 100%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 font-size: 11px;
	 letter-spacing: 1px;
	 font-weight: bold;
	 background: #000;
	 -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
	 mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
	 -webkit-mask-size: 2300% 100%;
	 mask-size: 2300% 100%;
	 border: none;
	 color: #fff;
	 cursor: pointer;
	 -webkit-animation: ani2 0.7s steps(22) forwards;
	 animation: ani2 0.7s steps(22) forwards;
}
 .button-container-1 button:hover {
	 -webkit-animation: ani 0.7s steps(22) forwards;
	 animation: ani 0.7s steps(22) forwards;
}
 .button-container-2 {
	 position: relative;
	 width: 100px;
	 height: 50px;
	 margin-left: auto;
	 margin-right: auto;
	 margin-top: 7vh;
	 overflow: hidden;
	 border: 1px solid #000;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 transition: 0.5s;
	 letter-spacing: 1px;
	 border-radius: 8px;
}
 .button-container-2 button {
	 width: 101%;
	 height: 100%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 font-size: 11px;
	 letter-spacing: 1px;
	 font-weight: bold;
	 background: #000;
	 -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
	 mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
	 -webkit-mask-size: 3000% 100%;
	 mask-size: 3000% 100%;
	 border: none;
	 color: #fff;
	 cursor: pointer;
	 -webkit-animation: ani2 0.7s steps(29) forwards;
	 animation: ani2 0.7s steps(29) forwards;
}
 .button-container-2 button:hover {
	 -webkit-animation: ani 0.7s steps(29) forwards;
	 animation: ani 0.7s steps(29) forwards;
}
.header-area .main-nav .nav li span{
    display: inline-block;
    font-weight: 300px;
    font-size: 20px;
    color: #D4AC6E;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    height: 40px;
    line-height: 40px;
    border: transparent;
    letter-spacing: 1.4px;
    -webkit-mask: url(https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png);
    mask: url(https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png);
    -webkit-mask-size: 7100% 100%;
    mask-size: 7100% 100%;
    -webkit-animation: ani2 0.7s steps(70) forwards;
    animation: ani2 0.7s steps(70) forwards;
    font-weight: bold;
    z-index: -1;
}
.header-area .main-nav .nav li:last-child span{
    font-family: 'Lato', sans-serif;
    display: block;
    position: relative;
    top: -2px;
    left: 1.1px;
      font-size: 18px;
      padding: 11px 18px;
      color: #D4AC6E;
      text-transform: uppercase;    
      height: auto;
      line-height: 20px;
    -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
    mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
	 -webkit-mask-size: 7100% 100%;
	 mask-size: 7100% 100%;
    -webkit-animation: ani2 0.7s steps(70) forwards;
	 animation: ani2 0.7s steps(70) forwards;
}
/*
 .mas-contact {
	 position: absolute;
     left: px;
	 color: #000;
	 text-align: center;
	 width: 15%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 position: absolute;
	 font-size: 17px;
	 margin-top: 9px;
	 overflow: hidden;
	 font-weight: bold;
}                                                                                                    IM WORKING HERE
*/
/*
.mas-experience {
	 position: relative;
     right:155px;
     letter-spacing: 1.8px;
	 text-align: center;
	 width: 21%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 position: absolute;
	 font-size: 19px;
	 padding-left: 3.px;
	 overflow: hidden;
	 font-weight: bold;
     color: #7a7a7a;
     text-transform: uppercase;
     padding-top: 6.6px;
     font-weight: bold;
    display: block;
  font-weight: 500;
  font-size: 20px;
  color: #7a7a7a;
  text-transform: uppercase;
  height: 40px;
  line-height: 40px;
  border: transparent;
  font-weight: bold;

}
*/
                                                                                                        /*TILL HERE*/
/*
.mas-myprojects{
     position: relative;
     right:333.6px;
     letter-spacing: 1.8px;
	 text-align: center;
	 width: 21%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 position: absolute;
	 font-size: 19px;
	 padding-left: 3.px;
	 overflow: hidden;
	 font-weight: bold;
     color: #7a7a7a;
     text-transform: uppercase;
     padding-top: 6.6px;
     font-weight: bold;
}
*/

/*
.mas-aboutme{
     position: relative;
     right:504.7px;
     letter-spacing: 1.8px;
	 text-align: center;
	 width: 21%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 position: absolute;
	 font-size: 19px;
	 padding-left: 3.px;
	 overflow: hidden;
	 font-weight: bold;
     color: #7a7a7a;
     text-transform: uppercase;
     padding-top: 6.6px;
     font-weight: bold;
}
.mas-home{
     position: relative;
     right:635.7px;
     letter-spacing: 1.8px;
	 text-align: center;
	 width: 21%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 300;
	 position: absolute;
	 font-size: 19px;
	 padding-left: 3.px;
	 overflow: hidden;
	 font-weight: bold;
     color: #7a7a7a;
     text-transform: uppercase;
     padding-top: 6.6px;
     font-weight: bold;
}
*/
.textanimation{
    stroke:#FFFFFF;
}
.blackink{
    stroke: #000 !important;;
}
.jennaclarkee{
    font-family: 'Rochester', cursive;

}
 @-webkit-keyframes ani {
	 from {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
	 to {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
}
 @keyframes ani {
	 from {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
	 to {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
}
 @-webkit-keyframes ani2 {
	 from {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
	 to {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
}
 @keyframes ani2 {
	 from {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
	 to {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
}
 a {
	 color: #00ff95;
}
 .button-container-3 {
	 position: relative;
	 width: 100px;
	 height: 50px;
	 margin-left: ;
	 margin-right:;
	 margin-top: ;
	 overflow: ;
	 border: 1px solid #000;
	 font-family: 'Lato', sans-serif;
	 font-weight: 800;
	 transition: 0.5s;
	 letter-spacing: 1px;
	 border-radius: 8px;
}
 .button-container-3 button {
	 width: 101%;
	 height: 100%;
	 font-family: 'Lato', sans-serif;
	 font-weight: 800;
	 font-size: 11px;
	 letter-spacing: 1px;
	 font-weight: bold;
	 background: #000;
	 -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
	 mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
	 -webkit-mask-size: 7100% 100%;
	 mask-size: 7100% 100%;
	 border: none;
	 color: #fff;
	 cursor: pointer;
	 -webkit-animation: ani2 0.7s steps(70) forwards;
	 animation: ani2 0.7s steps(70) forwards;
}
 .button-container-3 button:hover {
	 -webkit-animation: ani 0.7s steps(70) forwards;
	 animation: ani 0.7s steps(70) forwards;
}