* {
    margin: 0;
    padding: 0;
}
header {
    background-color:rgba(33, 33, 33, 0.9);
    color:#ffffff;
    display:block;
    font: 14px/1.3 Arial,sans-serif;
    height:50px;
    position:relative;
    z-index:5;
}
h2{
    margin-top: 30px;
    text-align: center;
}
header h2{
    font-size: 22px;
    margin: 0 auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
}
header a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(../img/stars.png) repeat top center;
  z-index:-1;
}

.twinkling{
  background:transparent url(../img/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}
       body {
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
				color:#ffffff;
				font-family: 'Poiret One', cursive;
			}

			a {
				color: #ffffff;
				text-decoration: none;
			}

			::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                color:    #d8d8d8;
            }
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color:    #d8d8d8;
                opacity:  1;
            }
            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color:    #d8d8d8;
                opacity:  1;
            }
            :-ms-input-placeholder { /* Internet Explorer 10-11 */
                color:    #d8d8d8;
            }
            ::-ms-input-placeholder { /* Microsoft Edge */
                color:    #d8d8d8;
            }

			.swiper-container-1, .swiper-wrapper, .swiper-slide {
             width: 100%; 
             height: 100%;
             position: absolute;
             color:#fff;
             background-color: #000;
            }

            .swiper-container-2, .swiper-wrapper, .swiper-slide {
             width: 100%;
             height: 100%;
             position: absolute;
             color:#000;
             background-color: #fff;
            }

			#canvas, #canvas2 {
				width: 100%;
				height: 100%;
				position: absolute;
			}


			.nav {
				font-size: 1.8vh;
				z-index: 999;
				position: absolute;
				top: 3%; 
				right: 8%; 
				width: 12%;
				text-align: right;
			}

		    .nav * {
				transition: all 1s ease;
                -moz-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                -o-transition: all 1s ease;
                -ms-transition: all 1s ease;
			}

			.nav>div:hover:not(:first-child) {
			    color: #ff5647;
				margin-right: 5%;
				transition: all 1s ease;
                -moz-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                -o-transition: all 1s ease;
                -ms-transition: all 1s ease;
			}

			#resume-link:hover {
				color: #ff5647;
				transition: all 1s ease;
                -moz-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                -o-transition: all 1s ease;
			}


			.logo {
				position: relative;
				margin-left: 70%;
				width: 50px;
				height: 50px;
				background-image: url("../img/mz.png");
				background-size: cover;
				transition: all 1s ease;
                -moz-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                -o-transition: all 1s ease;
                -ms-transition: all 1s ease;
			}

			.logo:hover {
				-webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                transform: rotate(180deg);
                transition: all 1s ease;
                -moz-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                -o-transition: all 1s ease;
                -ms-transition: all 1s ease;
			}

			.intro {
				position: absolute; 
				left: 0; 
				right: 0; 
				top: 0; 
				bottom: 0; 
				margin: auto;
				top: 30%;
				text-align: center;
			}

			.intro div {
				font-size: 5em;
				color: #fff;
			}

			.intro p {
				position: absolute; 
				left: 0; 
				right: 0; 
				top: 0; 
				bottom: 0; 
				margin: auto;
				top: 50%;
				font-size: 2em;
				color: #fff;
			}

			.nav div {
				margin-top: 8%;
			}

		    .dev {
				background-color: #fff;
			}

            .clearfix:after {
                content: "";
                display: table;
                clear: both;
            }

            .dev-project-container {
             width: 90%;
             height: 100%;
             position: absolute;
             background-color: #fff;
             align-content: center;
             color: black;
             left: 0; 
		     right: 0; 
		     top: 0; 
		     bottom: 0; 
		     margin: auto;
            }

            @media screen and (min-width: 300px) {
                .dev-project-container {
                  overflow: scroll;
                }
              }

              @media screen and (min-width: 768px) {
                .dev-project-container {
                  overflow: visible;
                }
              }


            .dev-box {
            	float: left;
            	height: 33%;
            	box-sizing: border-box;
            	text-align: center;
            	position: relative;
            }


			.dev .overlay {
				width: 100%;
				height: 100%;
				position: absolute;
				align-content: center;
				color: #fff;
				background-color: black;
				/*display: none;*/
			}
			/*rgba(153,249,255,0.9);*/

			.dev .overlay-container {
				width: 100%;
				height: 40%;
				position: absolute;
				align-content: center;
				left: 0; 
		        right: 0; 
		        top: 0; 
		        bottom: 0; 
		        margin: auto;
			}

			.overlay-container .name{
				width: 100%;
				font-size: 2em;
			}

			.overlay-container * {
				display: inline-block;
				align-content: center;
			}

			.github {
				width: 40px;
				height: 40px;
				background: url("../img/github.png") no-repeat center center;
				background-size: contain;
				margin: 0;
			}

			.link {
				width: 40px;
				height: 40px;
				background: url("../img/link.png") no-repeat center center;
				background-size: contain;
				margin: 0;
			}

			.appstore {
				width: 40px;
				height: 40px;
				background: url("../img/appleStore.png") no-repeat center center;
				background-size: contain;
				margin-right: 5px;
			}

			.dev-1 {
				width: 100%;
				height: 100%;
				background: url("../img/mockup2.png") no-repeat center center;
				background-size: contain;
			}

			.dev-2 {
				background: url("../img/gymX.png") no-repeat center center;
				background-size: contain;
			}

			.dev-3 {
				background: url("../img/roomX.png") no-repeat center center;
				background-size: contain;
			}

			.dev-4 {
				background: url("../img/lifeX.png") no-repeat center center;
				background-size: contain;
			}

			.dev-box:hover {
				z-index: 999;
			}

			@media screen and (min-width: 300px) {
                .dev-box, .overlay {
                  width: 100%;
                }
  
                .dev-box:nth-of-type(2n+1) {
                  clear: none;
                }
              }

              @media screen and (min-width: 768px) {
                .dev-box, .overlay {
                  width: 20%;
                  height: 60%;
                  margin-right: 3%;
                  margin-top: 10%;
                }
  
                .dev-box:nth-of-type(4n+1) {
                  clear: left;
                }
              }

			.design {
			    background-color: #fff;
			}

			.des-container {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.design .des-3 .mockup {
				background: url("../img/galaxy-mockup.png") no-repeat center center;
				background-size: contain;

			}

			.design .des-4 .mockup {
				background: url("../img/gym-mockup.png") no-repeat center center;
				background-size: contain;

			}

			  @media screen and (min-width: 300px) {
                .design .des-1 .mockup, .design .des-2 .mockup, .design .des-3 .mockup,
                .design .des-4 .mockup  {
                  width: 100%;
                  height: 70%;
                  position: absolute;
				  left: 0; 
		          right: 0; 
		          top: 0; 
		          bottom: 0; 
		          margin: auto;
		          margin-top: 5%;

                }

                .app-name {
			      font-size: 3.5em;
			      width: 70%;
			      height: 20%;
			      position: absolute;
				  left: 0; 
		          right: 0; 
		          top: 0; 
		          bottom: 0; 
		          margin: auto;
		          margin-bottom: 20%;
		          text-align: center;
			    }
              }

              @media screen and (min-width: 768px) {
                .design .des-1 .mockup, .design .des-2 .mockup, .design .des-3 .mockup,
                .design .des-4 .mockup  {
                  width: 70%;
                  height: 70%;
                  position: absolute;
				  left: 0; 
		          right: 0; 
		          top: 0; 
		          bottom: 0; 
		          margin: auto;
		          margin-left: 0;
                }


			    .app-name {
			      font-size: 5em;
			      width: 40%;
			      height: 10%;
			      position: absolute;
				  left: 0; 
		          right: 0; 
		          top: 0; 
		          bottom: 0; 
		          margin: auto;
		          margin-right: 5%;
			    }
              }

			.about {
				background-color: #fff;
			}

			.about span {
				color: #ff5647;
				background-color: #fff;
			}

			@media screen and (min-width: 300px) {
                .about .me {
                  position: absolute;
				  left: 0; 
				  right: 0; 
				  top: 0; 
				  bottom: 0; 
				  margin: auto;
				  background: url("../img/tengqi.png") no-repeat center center;
				  background-size: cover;
				  z-index: 10;
				  width: 100%;
				  height: 50%;
				  margin-top: 0;
				  margin-left: 0;
			    }

			   .about .me2 {
			   	  position: absolute;
				  left: 0; 
				  right: 0; 
				  top: 0; 
				  bottom: 0; 
				  margin: auto;
				  background: url("../img/me2.jpg") no-repeat center center;
				  background-size: cover;
				  opacity: 0;
				  z-index: 10;
				  width: 100%;
				  height: 50%;
				  margin-bottom: 0;
				  margin-left: 0;
			    }

			    .about .header {
				   width: 80%;
				   height: 30%;
				   position: absolute;
				   left: 0; 
				   right: 0; 
				   top: 55%; 
				   bottom: 0; 
				   margin: auto;
				   margin-top: 0;
				   font-size: 1.5em;
				   text-align: center;
			       color: #000;
			       line-height: 130%；
			     }

			    .about .header2 {
			    	width: 80%;
			    	height: 30%;
			    	position: absolute;
			    	left: 0; 
			    	right: 0; 
			    	top: 5%; 
			    	bottom: 0; 
			    	margin: auto;
			    	margin-top: 0;
			    	font-size: 1.5em;
			    	text-align: center;
			        color: #000;
			        line-height: 130%；
			      }
              }

              @media screen and (min-width: 768px) {
                .about .me {
                    position: absolute;
				    left: 0; 
				    right: 0; 
				    top: 0; 
				    bottom: 0; 
				    margin: auto;
				    background: url("../img/tengqi.png") no-repeat center center;
				    background-size: cover;
				    z-index: 10;
				    width: 50%;
				    height: 100%;
				    margin-top: 0;
				    margin-left: 0;
			    }

			   .about .me2 {
			   	    position: absolute;
				    left: 0; 
				    right: 0; 
				    top: 0; 
				    bottom: 0; 
				    margin: auto;
				    background: url("../img/me2.jpg") no-repeat center center;
				    background-size: cover;
				    opacity: 0;
				    z-index: 10;
				    width: 50%;
				    height: 100%;
				    margin-top: 0;
				    margin-right: 0;
			    }

			    .about .header {
				   width: 30%;
				   height: 80%;
				   position: absolute;
				   left: 55%; 
				   right: 0; 
				   top: 5%; 
				   bottom: 0; 
				   margin: auto;
				   margin-left: 0;
				   font-size: 2em;
				   text-align: left;
			       color: #000;
			       line-height: 160%;
			     }

			    .about .header2 {
			    	width: 30%;
			    	height: 80%;
			    	position: absolute;
			    	left: 15%; 
			    	right: 0; 
			    	top: 5%; 
			    	bottom: 0; 
			    	margin: auto;
			    	margin-left: 0;
			    	font-size: 2em;
			    	text-align: right;
			        color: #000;
			        line-height: 160%;
			      }
              }

			.contact-wrapper {
				width: 50%;
				height: 50%;
				position: absolute;
				left: 0; 
				right: 0; 
				top: 0; 
				bottom: 0; 
				margin: auto;
				display: block;
				text-align: center;
			}

			.bg {
				position: absolute;
				left: 0; 
				right: 0; 
				top: 0; 
				bottom: 0; 
				width: 100%;
				height: 100%;
				/* background: url("../img/waving-circle2.gif") no-repeat center center; */
				background-size: cover;
				z-index: -1;
				opacity: 0.8;

			}

			.contact {
				background-color: #fff;
			}


			.result {
				margin: 5%;
				margin-bottom: 0;
				font-size: 2vh;
             }

			.contact form  {
				display: block;
				text-align: center;
				font-size: 2.5vh;
             }

             .contact form * {
             	width: 100%;
             	margin: 1%;
             	text-align: center;
             }

             .contact form input {
             	border: none;
             	font-family: 'Poiret One', cursive;
             	font-size:2.5vh;
             	-webkit-box-shadow: 1px 10px 40px -6px rgba(0,0,0,0.72);
                -moz-box-shadow: 1px 10px 40px -6px rgba(0,0,0,0.72);
                box-shadow: 1px 10px 40px -6px rgba(0,0,0,0.72);
             }

             .contact form input:focus {
             	border: none;
             	outline: none;
             	border-bottom: 1px solid black;
             }

             .contact form textarea {
             	border: none;
             	font-family: 'Poiret One', cursive;
             	font-size: 2vh;
             	-webkit-box-shadow: 1px 10px 40px -6px rgba(0,0,0,0.72);
                -moz-box-shadow: 1px 10px 40px -6px rgba(0,0,0,0.72);
                box-shadow: 1px 10px 40px -6px rgba(0,0,0,0.72);

             }

             .contact form textarea:focus {
             	border: none;
             	outline: none;
             	border: 1px solid black;
             }

             .contact .send {
             	background-color: #000;
             	color: #fff;
             }

             .fail, .success {
             	display: none;
             }

             .contact .social {
             	width: 100%;
             	height: 30%;
             }

             .contact .social * {
             	display: inline-block;
             	transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -webkit-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
             }

             .contact .social .github {
             	width: 60px;
				height: 60px;
				background: url("../img/github-grey.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .github:hover {
             	width: 60px;
				height: 60px;
				background: url("../img/github-hover.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .linkedin {
             	width: 60px;
				height: 60px;
				background: url("../img/linkedin-grey.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .linkedin:hover {
             	width: 60px;
				height: 60px;
				background: url("../img/linkedin-hover.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .ig {
             	width: 60px;
				height: 60px;
				background: url("../img/ig-grey.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .ig:hover {
             	width: 60px;
				height: 60px;
				background: url("../img/ig-hover.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .dribble {
             	width: 70px;
				height: 60px;
				background: url("../img/dribble.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .dribble:hover {
             	width: 70px;
				height: 60px;
				background: url("../img/dribble-hover.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .pin {
             	width: 60px;
				height: 60px;
				background: url("../img/pin-grey.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }

             .contact .social .pin:hover {
             	width: 60px;
				height: 60px;
				background: url("../img/pin-hover.png") no-repeat center center;
				background-size: contain;
				margin: 0;
             }