html {
   background-color: #f13b44;
}

body {
   margin: 0;
   font-family: 'Montserrat', sans-serif;
}

#nav {
   position: fixed;
}

#circle1 {
   position: absolute;
   top: 4%;
   left: 5%;
   transform: translateX(-40%);
}

#circle2 {
   position: absolute;
   top: 37%;
   left: 5%;
   transform: translateX(-40%);
}

#circle3 {
   position: absolute;
   top: 71%;
   left: 5%;
   transform: translateX(-40%);
}

#innercircle1 {
   border-radius: 50%;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 5%;
   left: 5%;
   transform: translateX(-35%);
   background-color: #f13b44;
}

#innercircle2 {
   border-radius: 50%;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 38%;
   left: 5%;
   transform: translateX(-35%);
   background-color: #1cd29e;
}

#innercircle3 {
   border-radius: 50%;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 72%;
   left: 5%;
   transform: translateX(-35%);
   background-color: #ffc505;
}

#navline {
   position: fixed;
   z-index: 100;
   height: 100%;
   background-color: white;
   left: 5%;
   width: 10px;
}

.navtxt {
   position: fixed;
   display: none;
   color: white;
   left: 5%;
   transform: rotate(270deg);
}

#navtxt1 {
   top: 15%;
}

#navtxt2 {
   top: 48%;
}

#navtxt3 {
   top: 82%;
}

#catcat {
   height: 60%;
   top: 40%;
   z-index: 10;
   position: relative;
   left: 10%;
}

#welcome {
   background-color: #f13b44;
   height: 100%;
   font-family: 'Montserrat', sans-serif;
   color: white;
   font-size: 5em;
   overflow: hidden;
}

#welcometext {
   display: none;
   top: 50%;
   left: 45%;
   z-index: 20;
   margin-top: 0;
   margin-bottom: 0;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform:translateY(-50%);
   position: absolute;
}


/*hobbies*/

#hobbies {
   background-color: #1cd29e;
   height: 150%;
   overflow: hidden;
   font-size: 50px;
   color: black;
   margin: 0;
}

/* design */
#webdesignicon {
   width: 15%;
   z-index: 20;
}

#design {
   width: 100%;
   background-color: #1cd29e;
   height: 34%;
   text-align: center;
}

.behindcircles {
   display:none;
}
/*
#behindcircle1 {
   border-radius: 50%;
   border-style:double;
   opacity:50%;
   background-color: none;
   border-width: 5px;
   border-color: white;
   width: 100px;
   height: 100px;
   position: absolute;
   left: 20%;
   transform: translate(-50%, -50%);
}

#behindcircle2 {
   border-radius: 50%;
   border-style: dotted;
   background-color: none;
   border-width: 5px;
   border-color: white;
   width: 200px;
   height: 200px;
   position: absolute;
   left: 20%;
   transform: translate(-50%, -50%);
}

#behindcircle3 {
   border-radius: 50%;
   border-style: double;
   background-color: none;
   border-width: 5px;
   border-color: white;
   width: 300px;
   height: 300px;
   position: absolute;
   top: 15%;
   left: 50%;
   transform: translateX(-50%);
}

#behindcircle4 {
   border-radius: 50%;
   border-style: dotted;
   background-color: none;
   border-width: 5px;
   border-color: white;
   width: 400px;
   height: 400px;
   position: absolute;
   top: 15%;
   left: 50%;
   transform: translateX(-50%);
}
*/

#designtextbox {
   width: 60%;
   background-color: #68f4bb;
   height: 100%;
   float:right;
}

.icon {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

.icontext1 {
   margin-top: 0;
   margin-bottom: 0;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
 
}
.icontext2 {
   display: none;
   font-size: 24px;
   top: 50%;
   position: relative;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   margin-top: 0;
   margin-bottom: 0;
}


/*dance*/
#dance {
   width: 100%;
   background-color:#1cd29e;
   height: 34%;
   text-align: center;
}

#danceicon {
   width: 15%;
   position: relative;
}

#dancetextbox {
   width: 60%;
   float: left;
   height: 100%;
   background-color: #1cd29e;
}

/*write*/

#write {
   background-color:#1cd29e;
   height: 34%;
   width: 100%;
   text-align: center;
}

#writeicon {
   width: 18%;
   position: relative;
}

#writetextbox {
   width: 60%;
   height: 100%;
   background-color: #68f4bb;
   float: right;
}

/*animation*/
.animate {
   animation: pulse3 2.4s infinite;
   -webkit-animation: pulse3 2.4s infinite;
}

@keyframes pulse3 {
   0% {
      background-color: #30ebb6;
      background-color: #30ebb6;
   }
   100% {
      background-color:#1cd29e;
   }
}

@-webkit-keyframes pulse3 {
   0% {
      background-color: #30ebb6;
      background-color: #30ebb6;
   }
   100% {
      background-color:#1cd29e;
   }
}

@-moz-keyframes pulse3 {
   0% {
      background-color: #30ebb6;
      background-color: #30ebb6;
   }
   100% {
      background-color:#1cd29e;
   }
}


.animate3 {
   animation: pulse1 2.3s infinite;
   -webkit-animation: pulse1 2.3s infinite;
}

@keyframes pulse1 {
   0% {
      background-color: #68f4bb;
   }
   100% {
      background-color:#2edcaa;
   }
}

@-webkit-keyframes pulse1 {
   0% {
      background-color: #68f4bb;
   }
   100% {
      background-color:#2edcaa;
   }
}

@-moz-keyframes pulse1 {
   0% {
      background-color: #68f4bb;
   }
   100% {
      background-color:#2edcaa;
   }
}


.animate2 {
   animation: pulse 2.8s infinite;
   -webkit-animation: pulse 2.8s infinite;
}

@keyframes pulse {
   0% {
      background-color: #1cd29e;
   }
   100% {
      background-color: #30ebb6;
   }
}

@-webkit-keyframes pulse {
   0% {
      background-color: #1cd29e;
   }
   100% {
      background-color: #30ebb6;
   }
}

@-moz-keyframes pulse {
   0% {
      background-color: #1cd29e;
   }
   100% {
      background-color: #30ebb6;
   }
}

/*about me*/
#aboutmesec {
   background-color:#ffc505;
   height: 100%;
   overflow: hidden;
}

#abouttext {
   display: none;
   background-color: #ffe88c;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   padding: 100px;
   float: left;
   position: absolute;
   top: 60%;
   margin-top: -200px;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   font-weight: 200;
   font-size: 1.25em;
   height: 1000;
   text-align: center;
}

#resumeicon {
   position: absolute;
   width: 10%;
   margin: 0 auto;
   transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
}

#resumetext {
   margin-top: 100px;
   margin-bottom: 0;
   display: none;
   position: relative;
}

#aboutmecontainer {
   position: relative;
   margin: 0 auto;
   width: 1200px;
   height: 100%;
}
#me {
   left: 50%;
   top: 15%;
   width: 15%;
   transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   position: relative;
   z-index: 20;
}

#goodbyetext {
   display:none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   font-size: 4em;
   color: white;
   text-align: center;
}

form {
   font-family: 'Montserrat','sans-serif';
}

input, textarea {
   padding: 10px;
   border: 1px solid #E5E5E5;
   color: #999999;
   width: 200px;
}

/* jquery manipulation */

.navactive {
}

.catmove {
}

.move2 {
 
   transition: 1s;
   transition-timing-function:ease;
}

.iconactive {
}
.resumeactive {
}