.blue .content-left {
  background-color: #1b1c38; }
  .blue .content-left p {
    color: #2E9CCA; }
  .blue .content-left .color-picker {
    background: #474866; }
  .blue .content-left nav i {
    color: #bdbec4;
    border-bottom: solid 1px #ffffff14; }
    .blue .content-left nav i:hover {
      color: #2E9CCA; }
    .blue .content-left nav i.active {
      color: #2E9CCA; }
  .blue .content-left .logo {
    background: #2E9CCA; }
  .blue .content-left .toggle-picker {
    background: #1b1c38;
    color: #2E9CCA; }

.blue .content-right {
  background: #aaabb8; }
  .blue .content-right .section.home-l {
    background: #ffffff; }
    .blue .content-right .section.home-l .homel-content {
      background: #25274d; }
      .blue .content-right .section.home-l .homel-content > div .home-des {
        color: #2E9CCA; }
      .blue .content-right .section.home-l .homel-content > div .home-title {
        color: white; }
      .blue .content-right .section.home-l .homel-content > div .home-info {
        color: #2e9cca9c; }
    .blue .content-right .section.home-l .social {
      background: white; }
      .blue .content-right .section.home-l .social a {
        color: #25274d; }
        .blue .content-right .section.home-l .social a:hover {
          color: #2E9CCA; }
        .blue .content-right .section.home-l .social a:first-child i {
          border-right: solid 1px #474866; }
  .blue .content-right .section.skills-l .skills-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.skills-l .skills-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.skills-r {
    background-color: #252749; }
    @media (max-width: 1024px) {
      .blue .content-right .section.skills-r {
        background-color: #30325f; } }
    .blue .content-right .section.skills-r p {
      color: white; }
    .blue .content-right .section.skills-r .skill-list > div div {
      border: solid 1px #ffffff26;
      background: #0000002e; }
      .blue .content-right .section.skills-r .skill-list > div div i {
        color: #2e9ccac4; }
      .blue .content-right .section.skills-r .skill-list > div div:hover {
        background: #00000069; }
  .blue .content-right .section.experience-r .experience-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.experience-r .experience-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.experience-l {
    background-color: #252749; }
  .blue .content-right .section.playground-l .playground-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.playground-l .playground-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.playground-r {
    background-color: #252749; }
  .blue .content-right .section.contact-r .contact-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.contact-r .contact-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.contact-l {
    background-color: #252749; }
.green .content-left {
  background-color: #222629; }
  .green .content-left p {
    color: #86c232; }
  .green .content-left .color-picker {
    background: #474b4f; }
  .green .content-left nav i:hover {
    color: #86c232; }
  .green .content-left nav i.active {
    color: #86c232; }
  .green .content-left .logo {
    background: #86c232; }
  .green .content-left .toggle-picker {
    background: #222629;
    color: #86c232; }

.green .content-right .section.home-l .homel-content {
  background: #15181b; }
  .green .content-right .section.home-l .homel-content > div .home-des {
    color: #86c232; }
  .green .content-right .section.home-l .homel-content > div .home-title {
    color: white; }
  .green .content-right .section.home-l .homel-content > div .home-info {
    color: #86c23285; }

.green .content-right .section.home-l .social {
  background: white; }
  .green .content-right .section.home-l .social a {
    color: #15181b; }
    .green .content-right .section.home-l .social a:hover {
      color: #86c232; }
    .green .content-right .section.home-l .social a:first-child i {
      border-right: solid 1px #474b4f; }
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
.red .content-left {
  background-color: #222222; }
  .red .content-left p {
    color: #de3926; }
  .red .content-left .color-picker {
    background: #4c4b4b; }
  .red .content-left nav i:hover {
    color: #de3926; }
  .red .content-left nav i.active {
    color: #de3926; }
  .red .content-left .logo {
    background: #de3926; }
  .red .content-left .toggle-picker {
    background: #222222;
    color: #de3926; }

.red .content-right .section.home-l .homel-content {
  background: #f1f1f1; }
  .red .content-right .section.home-l .homel-content > div .home-des {
    color: #222222; }
  .red .content-right .section.home-l .homel-content > div .home-title {
    color: #de3926; }
  .red .content-right .section.home-l .homel-content > div .home-info {
    color: #2222228c; }

.red .content-right .section.home-l .social {
  background: #222222; }
  .red .content-right .section.home-l .social a {
    color: white; }
    .red .content-right .section.home-l .social a:hover {
      color: #de3926; }
    .red .content-right .section.home-l .social a:first-child i {
      border-right: solid 1px #4c4b4b; }
.blue .content-left {
  background-color: #1b1c38; }
  .blue .content-left p {
    color: #2E9CCA; }
  .blue .content-left .color-picker {
    background: #474866; }
  .blue .content-left nav i {
    color: #bdbec4;
    border-bottom: solid 1px #ffffff14; }
    .blue .content-left nav i:hover {
      color: #2E9CCA; }
    .blue .content-left nav i.active {
      color: #2E9CCA; }
  .blue .content-left .logo {
    background: #2E9CCA; }
  .blue .content-left .toggle-picker {
    background: #1b1c38;
    color: #2E9CCA; }

.blue .content-right {
  background: #aaabb8; }
  .blue .content-right .section.home-l {
    background: #ffffff; }
    .blue .content-right .section.home-l .homel-content {
      background: #25274d; }
      .blue .content-right .section.home-l .homel-content > div .home-des {
        color: #2E9CCA; }
      .blue .content-right .section.home-l .homel-content > div .home-title {
        color: white; }
      .blue .content-right .section.home-l .homel-content > div .home-info {
        color: #2e9cca9c; }
    .blue .content-right .section.home-l .social {
      background: white; }
      .blue .content-right .section.home-l .social a {
        color: #25274d; }
        .blue .content-right .section.home-l .social a:hover {
          color: #2E9CCA; }
        .blue .content-right .section.home-l .social a:first-child i {
          border-right: solid 1px #474866; }
  .blue .content-right .section.home-r {
    background-color: #0000; }
  .blue .content-right .section.skills-l .skills-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.skills-l .skills-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.skills-r {
    background-color: #252749; }
    @media (max-width: 1024px) {
      .blue .content-right .section.skills-r {
        background-color: #30325f; } }
    .blue .content-right .section.skills-r p {
      color: white; }
    .blue .content-right .section.skills-r .skill-list > div div {
      border: solid 1px #ffffff26;
      background: #0000002e; }
      .blue .content-right .section.skills-r .skill-list > div div i {
        color: #2e9ccac4; }
      .blue .content-right .section.skills-r .skill-list > div div:hover {
        background: #00000069; }
      .blue .content-right .section.skills-r .skill-list > div div.darker {
        -webkit-animation: darker-blue 1s;
        animation: darker-blue 1s; }
  .blue .content-right .section.experience-r .experience-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.experience-r .experience-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.experience-l {
    background-color: #252749; }
    .blue .content-right .section.experience-l .experience-content {
      border-left: solid 1px #ffffff2e; }
      .blue .content-right .section.experience-l .experience-content .date {
        background: #2751764a;
        border: solid 1px #ffffff0d;
        color: white; }
        .blue .content-right .section.experience-l .experience-content .date::before {
          background: #242749;
          border: solid 1px #ffffff80; }
        .blue .content-right .section.experience-l .experience-content .date p span {
          color: #2d9dca; }
      .blue .content-right .section.experience-l .experience-content .main-content {
        background: #2751764a;
        color: white;
        border: solid 1px #ffffff0d; }
        .blue .content-right .section.experience-l .experience-content .main-content .title {
          border-bottom: solid 1px #2e9cca47; }
          .blue .content-right .section.experience-l .experience-content .main-content .title span {
            background: #1f2c4a; }
            .blue .content-right .section.experience-l .experience-content .main-content .title span i {
              color: #2E9CCA; }
  .blue .content-right .section.playground-l .playground-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.playground-l .playground-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.playground-r {
    background-color: #252749; }
    .blue .content-right .section.playground-r .play-holder .project button {
      background: #2E9CCA;
      color: white; }
    @media (max-width: 1024px) {
      .blue .content-right .section.playground-r {
        background-color: #30325f; } }
  .blue .content-right .section.contact-r .contact-content {
    background-color: #F3FBFF; }
    .blue .content-right .section.contact-r .contact-content h3 {
      color: #1A1C44; }
  .blue .content-right .section.contact-l {
    background-color: #252749; }
    .blue .content-right .section.contact-l .form-holder .msg-holder#ty-message i {
      color: #42ab42; }
    .blue .content-right .section.contact-l .form-holder .msg-holder#err-message i {
      color: #ce0e31; }
    .blue .content-right .section.contact-l .form-holder .msg-holder p {
      color: white; }
    .blue .content-right .section.contact-l .form-holder .msg-holder button {
      background: #2E9CCA;
      color: white; }
      .blue .content-right .section.contact-l .form-holder .msg-holder button:hover {
        background: #f3fbff;
        color: #2E9CCA; }
    .blue .content-right .section.contact-l .form-holder form .error-message {
      color: #ce0e31; }
    .blue .content-right .section.contact-l .form-holder form div.user:before {
      color: #2E9CCA; }
    .blue .content-right .section.contact-l .form-holder form div.email:before {
      color: #2E9CCA; }
    .blue .content-right .section.contact-l .form-holder form button {
      background: #2E9CCA;
      color: white; }
      .blue .content-right .section.contact-l .form-holder form button:hover {
        background: #f3fbff;
        color: #2E9CCA; }

.blue .fixed-bg {
  background: rgba(0, 0, 0, 0.77); }
  .blue .fixed-bg .popup-box {
    background: white; }
    .blue .fixed-bg .popup-box .box-content .detail {
      background: #252749;
      color: #e2e2e2; }
      .blue .fixed-bg .popup-box .box-content .detail:before {
        background: #252749; }
      .blue .fixed-bg .popup-box .box-content .detail .project-link a {
        color: #2E9CCA; }
      .blue .fixed-bg .popup-box .box-content .detail .project-link i {
        color: #2E9CCA; }
      .blue .fixed-bg .popup-box .box-content .detail .techs .tech {
        background: #191b33;
        border: solid 1px #2E9CCA;
        color: #2E9CCA; }
    .blue .fixed-bg .popup-box .box-content .close {
      background: #d2d0d0;
      color: #2E9CCA; }
      .blue .fixed-bg .popup-box .box-content .close:hover {
        color: white;
        background: #2E9CCA; }

.blue .tmp-title {
  color: white; }

.blue .loading {
  background: #1b1c38db; }

@keyframes darker-blue {
  0% {
    background: #0000002e; }
  50% {
    background: #00000069; }
  100% {
    background: #0000002e; } }

.red .content-left {
  background-color: #222222; }
  .red .content-left p {
    color: #9b0626; }
  .red .content-left .color-picker {
    background: #4c4b4b; }
  .red .content-left nav i {
    color: #bdbec4;
    border-bottom: solid 1px #ffffff14; }
    .red .content-left nav i:hover {
      color: #9b0626; }
    .red .content-left nav i.active {
      color: #9b0626; }
  .red .content-left .logo {
    background: #9b0626; }
  .red .content-left .toggle-picker {
    background: #222222;
    color: #9b0626; }

.red .content-right {
  background: #aaabb8; }
  .red .content-right .section.home-l {
    background: #ffffff; }
    .red .content-right .section.home-l .homel-content {
      background: #1a1a1c; }
      .red .content-right .section.home-l .homel-content > div .home-des {
        color: #ffffff; }
      .red .content-right .section.home-l .homel-content > div .home-title {
        color: #9b0626; }
      .red .content-right .section.home-l .homel-content > div .home-info {
        color: #ffffff; }
    .red .content-right .section.home-l .social {
      background: white; }
      .red .content-right .section.home-l .social a {
        color: #1a1a1c; }
        .red .content-right .section.home-l .social a:hover {
          color: #9b0626; }
        .red .content-right .section.home-l .social a:first-child i {
          border-right: solid 1px #4c4b4b; }
  .red .content-right .section.home-r {
    background-color: #0000; }
  .red .content-right .section.skills-l .skills-content {
    background-color: #F3FBFF; }
    .red .content-right .section.skills-l .skills-content h3 {
      color: #1A1C44; }
  .red .content-right .section.skills-r {
    background-color: #1a1a1c; }
    @media (max-width: 1024px) {
      .red .content-right .section.skills-r {
        background-color: #0c0c0c; } }
    .red .content-right .section.skills-r p {
      color: white; }
    .red .content-right .section.skills-r .skill-list > div div {
      border: solid 1px #ffffff26;
      background: #0000002e; }
      .red .content-right .section.skills-r .skill-list > div div i {
        color: #9b0626; }
      .red .content-right .section.skills-r .skill-list > div div:hover {
        background: #00000069; }
      .red .content-right .section.skills-r .skill-list > div div.darker {
        -webkit-animation: darker-red 1s;
        animation: darker-red 1s; }
  .red .content-right .section.experience-r .experience-content {
    background-color: #F3FBFF; }
    .red .content-right .section.experience-r .experience-content h3 {
      color: #1A1C44; }
  .red .content-right .section.experience-l {
    background-color: #1a1a1c; }
    .red .content-right .section.experience-l .experience-content {
      border-left: solid 1px #ffffff2e; }
      .red .content-right .section.experience-l .experience-content .date {
        background: #272727;
        border: solid 1px #ffffff0d;
        color: #ffffff; }
        .red .content-right .section.experience-l .experience-content .date::before {
          background: #1a1a1c;
          border: solid 1px #ffffff80; }
        .red .content-right .section.experience-l .experience-content .date p span {
          color: #9b0626; }
      .red .content-right .section.experience-l .experience-content .main-content {
        background: #272727;
        color: #ffffff;
        border: solid 1px #ffffff0d; }
        .red .content-right .section.experience-l .experience-content .main-content .title {
          border-bottom: solid 1px #2e9cca47; }
          .red .content-right .section.experience-l .experience-content .main-content .title span {
            background: #1a1a1c; }
            .red .content-right .section.experience-l .experience-content .main-content .title span i {
              color: #9b0626; }
  .red .content-right .section.playground-l .playground-content {
    background-color: #F3FBFF; }
    .red .content-right .section.playground-l .playground-content h3 {
      color: #1A1C44; }
  .red .content-right .section.playground-r {
    background-color: #1a1a1c; }
    .red .content-right .section.playground-r .play-holder .project button {
      background: #9b0626;
      color: #ffffff; }
    @media (max-width: 1024px) {
      .red .content-right .section.playground-r {
        background-color: #0c0c0c; } }
  .red .content-right .section.contact-r .contact-content {
    background-color: #F3FBFF; }
    .red .content-right .section.contact-r .contact-content h3 {
      color: #1A1C44; }
  .red .content-right .section.contact-l {
    background-color: #1a1a1c; }
    .red .content-right .section.contact-l .form-holder .msg-holder#ty-message i {
      color: #42ab42; }
    .red .content-right .section.contact-l .form-holder .msg-holder#err-message i {
      color: #ce0e31; }
    .red .content-right .section.contact-l .form-holder .msg-holder p {
      color: #ffffff; }
    .red .content-right .section.contact-l .form-holder .msg-holder button {
      background: #9b0626;
      color: #ffffff; }
      .red .content-right .section.contact-l .form-holder .msg-holder button:hover {
        background: #f3fbff;
        color: #9b0626; }
    .red .content-right .section.contact-l .form-holder form .error-message {
      color: #ce0e31; }
    .red .content-right .section.contact-l .form-holder form div.user:before {
      color: #9b0626; }
    .red .content-right .section.contact-l .form-holder form div.email:before {
      color: #9b0626; }
    .red .content-right .section.contact-l .form-holder form button {
      background: #9b0626;
      color: #ffffff; }
      .red .content-right .section.contact-l .form-holder form button:hover {
        background: #f3fbff;
        color: #9b0626; }

.red .fixed-bg {
  background: rgba(0, 0, 0, 0.77); }
  .red .fixed-bg .popup-box {
    background: white; }
    .red .fixed-bg .popup-box .box-content .detail {
      background: #1a1a1c;
      color: #e2e2e2; }
      .red .fixed-bg .popup-box .box-content .detail:before {
        background: #1a1a1c; }
      .red .fixed-bg .popup-box .box-content .detail .project-link a {
        color: #9b0626; }
      .red .fixed-bg .popup-box .box-content .detail .project-link i {
        color: #9b0626; }
      .red .fixed-bg .popup-box .box-content .detail .techs .tech {
        background: #141415;
        border: solid 1px #9b0626;
        color: #9b0626; }
    .red .fixed-bg .popup-box .box-content .close {
      background: #d2d0d0;
      color: #9b0626; }
      .red .fixed-bg .popup-box .box-content .close:hover {
        color: #ffffff;
        background: #9b0626; }

.red .tmp-title {
  color: #ffffff; }

.red .loading {
  background: #1b1c38db; }

@keyframes darker-red {
  0% {
    background: #0000002e; }
  50% {
    background: #00000069; }
  100% {
    background: #0000002e; } }

.green .content-left {
  background-color: #389583; }
  .green .content-left p {
    color: #05396b; }
  .green .content-left .color-picker {
    background: #247364; }
  .green .content-left nav i {
    color: #edf5e0;
    border-bottom: solid 1px #6caf89; }
    .green .content-left nav i:hover {
      color: #05396b; }
    .green .content-left nav i.active {
      color: #05396b; }
  .green .content-left .logo {
    background: #05396b; }
  .green .content-left .toggle-picker {
    background: #389583;
    color: #05396b; }

.green .content-right {
  background: #aaabb8; }
  .green .content-right .section.home-l {
    background: #ffffff; }
    .green .content-right .section.home-l .homel-content {
      background: #5cdb94; }
      .green .content-right .section.home-l .homel-content > div .home-des {
        color: #05396b; }
      .green .content-right .section.home-l .homel-content > div .home-title {
        color: white; }
      .green .content-right .section.home-l .homel-content > div .home-info {
        color: #05396b; }
    .green .content-right .section.home-l .social {
      background: white; }
      .green .content-right .section.home-l .social a {
        color: #5cdb94; }
        .green .content-right .section.home-l .social a:hover {
          color: #05396b; }
        .green .content-right .section.home-l .social a:first-child i {
          border-right: solid 1px #247364; }
  .green .content-right .section.home-r {
    background-color: #0000; }
  .green .content-right .section.skills-l .skills-content {
    background-color: #edf5e0; }
    .green .content-right .section.skills-l .skills-content h3 {
      color: #1A1C44; }
  .green .content-right .section.skills-r {
    background-color: #5cdb94; }
    @media (max-width: 1024px) {
      .green .content-right .section.skills-r {
        background-color: #59c589; } }
    .green .content-right .section.skills-r p {
      color: #05396b; }
    .green .content-right .section.skills-r .skill-list > div div {
      border: solid 1px #05396b40;
      background: #3895835e; }
      .green .content-right .section.skills-r .skill-list > div div i {
        color: #05396b; }
      .green .content-right .section.skills-r .skill-list > div div:hover {
        background: #389583; }
      .green .content-right .section.skills-r .skill-list > div div.darker {
        -webkit-animation: darker-green 1s;
        animation: darker-green 1s; }
  .green .content-right .section.experience-r .experience-content {
    background-color: #edf5e0; }
    .green .content-right .section.experience-r .experience-content h3 {
      color: #1A1C44; }
  .green .content-right .section.experience-l {
    background-color: #5cdb94; }
    .green .content-right .section.experience-l .experience-content {
      border-left: solid 1px #05396b; }
      .green .content-right .section.experience-l .experience-content .date {
        background: #05396b5e;
        border: solid 1px #05396b69;
        color: #05396b; }
        .green .content-right .section.experience-l .experience-content .date::before {
          background: #5cdb94;
          border: solid 1px #05396b; }
        .green .content-right .section.experience-l .experience-content .date p {
          color: white; }
          .green .content-right .section.experience-l .experience-content .date p span {
            color: #05396b; }
      .green .content-right .section.experience-l .experience-content .main-content {
        background: #05396b5e;
        color: white;
        border: solid 1px #05396b69; }
        .green .content-right .section.experience-l .experience-content .main-content .title {
          border-bottom: solid 1px #05396b47; }
          .green .content-right .section.experience-l .experience-content .main-content .title span {
            background: #08447d40; }
            .green .content-right .section.experience-l .experience-content .main-content .title span i {
              color: #05396b; }
  .green .content-right .section.playground-l .playground-content {
    background-color: #edf5e0; }
    .green .content-right .section.playground-l .playground-content h3 {
      color: #1A1C44; }
  .green .content-right .section.playground-r {
    background-color: #5cdb94; }
    .green .content-right .section.playground-r .play-holder .project button {
      background: #05396b;
      color: white; }
    @media (max-width: 1024px) {
      .green .content-right .section.playground-r {
        background-color: #59c589; } }
  .green .content-right .section.contact-r .contact-content {
    background-color: #edf5e0; }
    .green .content-right .section.contact-r .contact-content h3 {
      color: #1A1C44; }
  .green .content-right .section.contact-l {
    background-color: #5cdb94; }
    .green .content-right .section.contact-l .form-holder .msg-holder#ty-message i {
      color: #42ab42; }
    .green .content-right .section.contact-l .form-holder .msg-holder#err-message i {
      color: #ce0e31; }
    .green .content-right .section.contact-l .form-holder .msg-holder p {
      color: #05396b; }
    .green .content-right .section.contact-l .form-holder .msg-holder button {
      background: #389583;
      color: white; }
      .green .content-right .section.contact-l .form-holder .msg-holder button:hover {
        background: #f3fbff;
        color: #05396b; }
    .green .content-right .section.contact-l .form-holder form .error-message {
      color: #ce0e31; }
    .green .content-right .section.contact-l .form-holder form div.user:before {
      color: #05396b; }
    .green .content-right .section.contact-l .form-holder form div.email:before {
      color: #05396b; }
    .green .content-right .section.contact-l .form-holder form button {
      background: #389583;
      color: white; }
      .green .content-right .section.contact-l .form-holder form button:hover {
        background: #f3fbff;
        color: #05396b; }

.green .fixed-bg {
  background: rgba(0, 0, 0, 0.77); }
  .green .fixed-bg .popup-box {
    background: white; }
    .green .fixed-bg .popup-box .box-content .detail {
      background: #5cdb94;
      color: #191b33; }
      .green .fixed-bg .popup-box .box-content .detail:before {
        background: #5cdb94; }
      .green .fixed-bg .popup-box .box-content .detail .project-link a {
        color: #05396b; }
      .green .fixed-bg .popup-box .box-content .detail .project-link i {
        color: #05396b; }
      .green .fixed-bg .popup-box .box-content .detail .techs .tech {
        background: #191b332b;
        border: solid 1px #05396b;
        color: #05396b; }
    .green .fixed-bg .popup-box .box-content .close {
      background: #48af76;
      color: #05396b; }
      .green .fixed-bg .popup-box .box-content .close:hover {
        color: white;
        background: #05396b; }

.green .tmp-title {
  color: #05396b; }

.green .loading {
  background: #1b1c38db; }

@keyframes darker-green {
  0% {
    background: #3895835e; }
  50% {
    background: #389583; }
  100% {
    background: #3895835e; } }

html {
  line-height: 1.15; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

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

.content-left {
  position: fixed;
  width: 100px;
  height: 100vh;
  display: flex; }
  .content-left p {
    margin: 0px; }
  .content-left nav {
    width: 100%; }
    .content-left nav i {
      -webkit-transition: color 0.5s;
      -moz-transition: color 0.5s;
      -o-transition: color 0.5s;
      transition: color 0.5s;
      cursor: pointer;
      text-align: center;
      display: block;
      font-size: 19px;
      padding: 15px 0px; }
      .content-left nav i.active {
        cursor: default; }
      .content-left nav i:hover {
        -webkit-transition: color 0.5s;
        -moz-transition: color 0.5s;
        -o-transition: color 0.5s;
        transition: color 0.5s; }
  .content-left .logo {
    width: 100%;
    margin: auto;
    padding-top: 13px;
    padding-bottom: 13px;
    border-top: solid 1px #ffffff1f; }
    .content-left .logo img {
      width: 70%;
      margin: auto;
      display: block; }
  .content-left .toggle-picker {
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-size: 11px;
    padding-top: 5px;
    padding-bottom: 5px; }
  .content-left .color-picker {
    width: 100px;
    height: 30px;
    padding-top: 10px;
    display: none; }
    .content-left .color-picker > div {
      display: flex;
      justify-content: space-evenly; }
      .content-left .color-picker > div > div {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: pointer; }
        .content-left .color-picker > div > div.active {
          cursor: default;
          opacity: 0.5; }
        .content-left .color-picker > div > div#blue {
          background: #25274d;
          background: -moz-linear-gradient(left, #25274d 0%, #25274d 50%, #2e9cca 50%, #2e9cca 100%);
          background: -webkit-linear-gradient(left, #25274d 0%, #25274d 50%, #2e9cca 50%, #2e9cca 100%);
          background: linear-gradient(to right, #25274d 0%, #25274d 50%, #2e9cca 50%, #2e9cca 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25274d', endColorstr='#2e9cca',GradientType=1 ); }
        .content-left .color-picker > div > div#red {
          background: #de3926;
          background: -moz-linear-gradient(left, #de3926 0%, #de3926 50%, #222222 50%, #222222 100%);
          background: -webkit-linear-gradient(left, #de3926 0%, #de3926 50%, #222222 50%, #222222 100%);
          background: linear-gradient(to right, #de3926 0%, #de3926 50%, #222222 50%, #222222 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de3926', endColorstr='#222222',GradientType=1 ); }
        .content-left .color-picker > div > div#green {
          background: #222629;
          background: -moz-linear-gradient(left, #222629 0%, #222629 50%, #86c232 50%, #86c232 100%);
          background: -webkit-linear-gradient(left, #222629 0%, #222629 50%, #86c232 50%, #86c232 100%);
          background: linear-gradient(to right, #222629 0%, #222629 50%, #86c232 50%, #86c232 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222629', endColorstr='#86c232',GradientType=1 ); }
  @media (max-width: 1024px) {
    .content-left {
      display: none; } }

.content-right {
  margin-left: 100px;
  width: calc(100% - 100px);
  height: 100vh;
  display: flex;
  overflow: hidden; }
  .content-right .slider {
    width: 50%; }
    @media (max-width: 1024px) {
      .content-right .slider {
        width: 100%; } }
    .content-right .slider.content-rigth-l {
      position: relative;
      margin-top: -400vh; }
      .content-right .slider.content-rigth-l.scroll-0-400 {
        -webkit-animation: v0-400 1s forwards;
        animation: v0-400 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-0-300 {
        -webkit-animation: v0-300 1s forwards;
        animation: v0-300 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-0-200 {
        -webkit-animation: v0-200 1s forwards;
        animation: v0-200 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-0-100 {
        -webkit-animation: v0-100 1s forwards;
        animation: v0-100 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-100-400 {
        -webkit-animation: v100-400 1s forwards;
        animation: v100-400 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-100-300 {
        -webkit-animation: v100-300 1s forwards;
        animation: v100-300 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-100-200 {
        -webkit-animation: v100-200 1s forwards;
        animation: v100-200 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-100-0 {
        -webkit-animation: v100-0 1s forwards;
        animation: v100-0 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-200-400 {
        -webkit-animation: v200-400 1s forwards;
        animation: v200-400 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-200-300 {
        -webkit-animation: v200-300 1s forwards;
        animation: v200-300 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-200-100 {
        -webkit-animation: v200-100 1s forwards;
        animation: v200-100 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-200-0 {
        -webkit-animation: v200-0 1s forwards;
        animation: v200-0 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-300-400 {
        -webkit-animation: v300-400 1s forwards;
        animation: v300-400 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-300-200 {
        -webkit-animation: v300-200 1s forwards;
        animation: v300-200 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-300-100 {
        -webkit-animation: v300-100 1s forwards;
        animation: v300-100 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-300-0 {
        -webkit-animation: v300-0 1s forwards;
        animation: v300-0 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-400-300 {
        -webkit-animation: v400-300 1s forwards;
        animation: v400-300 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-400-200 {
        -webkit-animation: v400-200 1s forwards;
        animation: v400-200 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-400-100 {
        -webkit-animation: v400-100 1s forwards;
        animation: v400-100 1s forwards; }
      .content-right .slider.content-rigth-l.scroll-400-0 {
        -webkit-animation: v400-0 1s forwards;
        animation: v400-0 1s forwards; }
      @media (max-width: 1024px) {
        .content-right .slider.content-rigth-l {
          display: flex;
          flex-wrap: wrap;
          margin-top: 0vh; } }
    .content-right .slider.content-rigth-r.scroll-0-400 {
      -webkit-animation: v0-400 1s forwards;
      animation: v0-400 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-0-300 {
      -webkit-animation: v0-300 1s forwards;
      animation: v0-300 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-0-200 {
      -webkit-animation: v0-200 1s forwards;
      animation: v0-200 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-0-100 {
      -webkit-animation: v0-100 1s forwards;
      animation: v0-100 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-100-400 {
      -webkit-animation: v100-400 1s forwards;
      animation: v100-400 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-100-300 {
      -webkit-animation: v100-300 1s forwards;
      animation: v100-300 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-100-200 {
      -webkit-animation: v100-200 1s forwards;
      animation: v100-200 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-100-0 {
      -webkit-animation: v100-0 1s forwards;
      animation: v100-0 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-200-400 {
      -webkit-animation: v200-400 1s forwards;
      animation: v200-400 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-200-300 {
      -webkit-animation: v200-300 1s forwards;
      animation: v200-300 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-200-100 {
      -webkit-animation: v200-100 1s forwards;
      animation: v200-100 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-200-0 {
      -webkit-animation: v200-0 1s forwards;
      animation: v200-0 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-300-400 {
      -webkit-animation: v300-400 1s forwards;
      animation: v300-400 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-300-200 {
      -webkit-animation: v300-200 1s forwards;
      animation: v300-200 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-300-100 {
      -webkit-animation: v300-100 1s forwards;
      animation: v300-100 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-300-0 {
      -webkit-animation: v300-0 1s forwards;
      animation: v300-0 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-400-300 {
      -webkit-animation: v400-300 1s forwards;
      animation: v400-300 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-400-200 {
      -webkit-animation: v400-200 1s forwards;
      animation: v400-200 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-400-100 {
      -webkit-animation: v400-100 1s forwards;
      animation: v400-100 1s forwards; }
    .content-right .slider.content-rigth-r.scroll-400-0 {
      -webkit-animation: v400-0 1s forwards;
      animation: v400-0 1s forwards; }
    @media (max-width: 1024px) {
      .content-right .slider.content-rigth-r {
        display: none; } }
    .content-right .slider .section {
      height: 100vh;
      overflow: auto; }
      @media (max-width: 1024px) {
        .content-right .slider .section {
          width: 100%;
          height: auto; } }
      .content-right .slider .section.home-l {
        position: relative;
        overflow: hidden; }
        .content-right .slider .section.home-l .homel-content {
          display: flex;
          flex-wrap: wrap;
          padding-left: 100px;
          padding-right: 50px;
          align-items: center;
          height: 100vh; }
          @media (max-width: 600px) {
            .content-right .slider .section.home-l .homel-content {
              padding-left: 20px;
              padding-right: 20px; } }
          .content-right .slider .section.home-l .homel-content > div {
            margin-top: -118px; }
            .content-right .slider .section.home-l .homel-content > div .home-des {
              width: 100%;
              font-size: 30px;
              font-weight: 400; }
            .content-right .slider .section.home-l .homel-content > div .home-title {
              font-size: 90px;
              line-height: 83px;
              width: 300px; }
              @media (max-width: 480px) {
                .content-right .slider .section.home-l .homel-content > div .home-title {
                  font-size: 60px;
                  line-height: 60px; } }
            .content-right .slider .section.home-l .homel-content > div .home-info {
              line-height: 30px;
              width: 400px;
              font-size: 20px;
              font-weight: 200; }
              @media (max-width: 480px) {
                .content-right .slider .section.home-l .homel-content > div .home-info {
                  width: 100%;
                  font-size: 17px;
                  line-height: 25px; } }
            @media (max-width: 1024px) {
              .content-right .slider .section.home-l .homel-content > div {
                margin-top: 0px;
                padding-top: 100px;
                padding-bottom: 100px; } }
            @media (max-width: 1024px) {
              .content-right .slider .section.home-l .homel-content > div.social {
                margin-top: 0px;
                padding-top: 5px;
                padding-bottom: 5px; } }
          @media (max-width: 1024px) {
            .content-right .slider .section.home-l .homel-content {
              height: auto; } }
        .content-right .slider .section.home-l .social {
          position: absolute;
          right: 0%;
          bottom: 20px;
          font-size: 32px;
          padding: 5px;
          display: flex; }
          .content-right .slider .section.home-l .social.slideLeft {
            -webkit-animation: scrollLeft 0.5 forwards;
            animation: scrollLeft 0.5s forwards; }
          .content-right .slider .section.home-l .social.slideLeft1 {
            -webkit-animation: scrollLeft 2s forwards;
            animation: scrollLeft 2s forwards; }
          .content-right .slider .section.home-l .social a {
            -webkit-transition: color 0.5s;
            -moz-transition: color 0.5s;
            -o-transition: color 0.5s;
            transition: color 0.5s; }
            .content-right .slider .section.home-l .social a:hover {
              -webkit-transition: color 0.5s;
              -moz-transition: color 0.5s;
              -o-transition: color 0.5s;
              transition: color 0.5s; }
            .content-right .slider .section.home-l .social a i {
              width: 50px;
              text-align: center; }
        @media (max-width: 1024px) {
          .content-right .slider .section.home-l {
            order: 1; } }
      .content-right .slider .section.skills-l .skills-content {
        background-image: url(../../assets/images/skillsf.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center 70%;
        height: 100vh; }
        .content-right .slider .section.skills-l .skills-content h3 {
          font-weight: 300;
          padding-top: 60px;
          width: 70%;
          text-align: center;
          margin: auto;
          font-size: 65px; }
      @media (max-width: 1024px) {
        .content-right .slider .section.skills-l {
          display: none; } }
      .content-right .slider .section.skills-r {
        display: flex; }
        .content-right .slider .section.skills-r > div {
          display: flex;
          flex-wrap: wrap; }
        .content-right .slider .section.skills-r .skill-list {
          display: flex;
          flex-wrap: wrap;
          padding: 25px;
          align-self: end; }
          .content-right .slider .section.skills-r .skill-list > div {
            padding: 10px;
            box-sizing: border-box;
            width: 25%;
            height: 142px; }
            @media (max-width: 1024px) {
              .content-right .slider .section.skills-r .skill-list > div {
                width: 50%; } }
            .content-right .slider .section.skills-r .skill-list > div div {
              border-radius: 3px;
              padding: 20px;
              -webkit-transition: all 0.5s;
              -moz-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
              .content-right .slider .section.skills-r .skill-list > div div i {
                font-size: 60px;
                display: flex;
                text-align: center;
                width: 80px;
                height: 80px;
                margin: auto;
                /* background: #ffffff8c; */
                border-radius: 50%;
                justify-content: center;
                align-items: center;
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -o-transition: all 0.5s;
                transition: all 0.5s; }
              .content-right .slider .section.skills-r .skill-list > div div:hover {
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -o-transition: all 0.5s;
                transition: all 0.5s; }
                .content-right .slider .section.skills-r .skill-list > div div:hover i {
                  -webkit-transition: all 0.5s;
                  -moz-transition: all 0.5s;
                  -o-transition: all 0.5s;
                  transition: all 0.5s;
                  font-size: 70px; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b1 {
                animation-delay: 0.7s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b1 i {
                  animation-delay: 0.7s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b2 {
                animation-delay: 0.8s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b2 i {
                  animation-delay: 0.8s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b3 {
                animation-delay: 0.9s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b3 i {
                  animation-delay: 0.9s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b4 {
                animation-delay: 1s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b4 i {
                  animation-delay: 1s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b5 {
                animation-delay: 1.1s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b5 i {
                  animation-delay: 1.1s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b6 {
                animation-delay: 1.2s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b6 i {
                  animation-delay: 1.2s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b7 {
                animation-delay: 1.3s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b7 i {
                  animation-delay: 1.3s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b8 {
                animation-delay: 1.4s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b8 i {
                  animation-delay: 1.4s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b9 {
                animation-delay: 1.5s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b9 i {
                  animation-delay: 1.5s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b10 {
                animation-delay: 1.6s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b10 i {
                  animation-delay: 1.6s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b11 {
                animation-delay: 1.7s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b11 i {
                  animation-delay: 1.7s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker.b12 {
                animation-delay: 1.8s; }
                .content-right .slider .section.skills-r .skill-list > div div.darker.b12 i {
                  animation-delay: 1.8s; }
              .content-right .slider .section.skills-r .skill-list > div div.darker i {
                -webkit-animation: larger 1s;
                animation: larger 1s; }
        .content-right .slider .section.skills-r p {
          height: 49px;
          font-size: 22px;
          font-size: 25px;
          text-align: center;
          width: 100%;
          /* margin: auto; */
          font-weight: 200;
          margin-bottom: 51px;
          line-height: 35px;
          padding-top: 60px; }
          @media (max-width: 1024px) {
            .content-right .slider .section.skills-r p {
              padding-left: 15px;
              padding-right: 15px; } }
        @media (max-width: 1024px) {
          .content-right .slider .section.skills-r {
            padding-bottom: 50px;
            order: 2; } }
      .content-right .slider .section.experience-r .experience-content {
        background-image: url(../../assets/images/experience.png);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center 60%;
        height: 100vh; }
        .content-right .slider .section.experience-r .experience-content h3 {
          font-weight: 300;
          padding-top: 60px;
          width: 70%;
          text-align: center;
          margin: auto;
          font-size: 65px; }
      .content-right .slider .section.experience-l .experience-content {
        width: 90%;
        margin: auto;
        margin-top: 55px;
        margin-bottom: 100px; }
      .content-right .slider .section.experience-l .item {
        margin: auto;
        padding: 20px 30px;
        box-sizing: border-box; }
        .content-right .slider .section.experience-l .item:first-child {
          padding-top: 0px; }
        .content-right .slider .section.experience-l .item .date {
          width: 149px;
          border-radius: 2px;
          text-align: center;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: left;
          font-size: 14px;
          font-weight: 300;
          position: relative;
          padding-left: 15px;
          box-sizing: border-box; }
          .content-right .slider .section.experience-l .item .date::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            top: 10px;
            left: -40px;
            border-radius: 50%; }
          .content-right .slider .section.experience-l .item .date p span {
            margin-right: 10px;
            font-size: 17px; }
        .content-right .slider .section.experience-l .item .main-content {
          margin-top: 10px;
          box-sizing: border-box;
          border-radius: 2px;
          font-weight: 100; }
          .content-right .slider .section.experience-l .item .main-content .title {
            padding: 10px 20px;
            display: flex;
            align-items: center; }
            .content-right .slider .section.experience-l .item .main-content .title span {
              width: 45px;
              height: 45px;
              align-items: center;
              display: flex;
              justify-content: center;
              font-size: 23px;
              margin-right: 15px; }
            .content-right .slider .section.experience-l .item .main-content .title > div .position {
              font-weight: 500;
              text-transform: uppercase;
              margin-top: 13px;
              margin-bottom: 9px; }
            .content-right .slider .section.experience-l .item .main-content .title > div .employer {
              margin-top: 0px;
              font-size: 14px; }
          .content-right .slider .section.experience-l .item .main-content .description {
            padding: 10px 20px;
            font-size: 15px;
            line-height: 21px;
            font-weight: 200; }
      @media (max-width: 1024px) {
        .content-right .slider .section.experience-l {
          order: 3; } }
      .content-right .slider .section.playground-l .playground-content {
        background-image: url(../../assets/images/play.png);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center 60%;
        height: 100vh; }
        .content-right .slider .section.playground-l .playground-content h3 {
          font-weight: 300;
          padding-top: 60px;
          width: 70%;
          text-align: center;
          margin: auto;
          font-size: 65px; }
      @media (max-width: 1024px) {
        .content-right .slider .section.playground-l {
          display: none; } }
      .content-right .slider .section.playground-r .play-holder {
        display: flex;
        flex-wrap: wrap; }
        .content-right .slider .section.playground-r .play-holder .project {
          width: 33.33%;
          position: relative; }
          @media (max-width: 600px) {
            .content-right .slider .section.playground-r .play-holder .project {
              width: 50%; } }
          @media (max-width: 480px) {
            .content-right .slider .section.playground-r .play-holder .project {
              width: 100%; } }
          .content-right .slider .section.playground-r .play-holder .project img {
            width: 100%;
            opacity: 1;
            display: block;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
          .content-right .slider .section.playground-r .play-holder .project button {
            position: absolute;
            width: 120px;
            top: 50%;
            left: 50%;
            height: 40px;
            border: none;
            border-radius: 20px;
            margin-left: -60px;
            margin-top: -20px;
            text-transform: uppercase;
            padding: 0;
            opacity: 0;
            cursor: pointer;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
            @media (max-width: 1024px) {
              .content-right .slider .section.playground-r .play-holder .project button {
                opacity: 1; } }
          .content-right .slider .section.playground-r .play-holder .project:hover button {
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
            opacity: 1; }
          .content-right .slider .section.playground-r .play-holder .project:hover img {
            opacity: 0.5;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
      @media (max-width: 1024px) {
        .content-right .slider .section.playground-r {
          order: 4;
          padding-bottom: 100px;
          padding-right: 30px;
          padding-left: 30px; } }
      .content-right .slider .section.contact-r .contact-content {
        background-image: url(../../assets/images/pr.png);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center 60%;
        height: 100vh; }
        .content-right .slider .section.contact-r .contact-content h3 {
          font-weight: 300;
          padding-top: 60px;
          width: 70%;
          text-align: center;
          margin: auto;
          font-size: 65px; }
      .content-right .slider .section.contact-l {
        position: relative; }
        .content-right .slider .section.contact-l .form-holder {
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center; }
          .content-right .slider .section.contact-l .form-holder .msg-holder {
            display: none; }
            .content-right .slider .section.contact-l .form-holder .msg-holder#err-message p {
              max-width: 100%; }
            .content-right .slider .section.contact-l .form-holder .msg-holder i {
              font-size: 50px;
              margin: auto;
              display: block;
              text-align: center;
              margin-bottom: 20px; }
            .content-right .slider .section.contact-l .form-holder .msg-holder p {
              font-size: 20px;
              margin: auto;
              max-width: 80%;
              text-align: center; }
            .content-right .slider .section.contact-l .form-holder .msg-holder button {
              border-radius: 40px;
              border: none;
              margin: auto;
              padding: 15px;
              margin-top: 30px;
              text-transform: uppercase;
              display: block;
              cursor: pointer;
              -webkit-transition: all 0.5s;
              -moz-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
              .content-right .slider .section.contact-l .form-holder .msg-holder button:hover {
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -o-transition: all 0.5s;
                transition: all 0.5s; }
              .content-right .slider .section.contact-l .form-holder .msg-holder button:focus {
                outline: none; }
          .content-right .slider .section.contact-l .form-holder form {
            width: 400px; }
            .content-right .slider .section.contact-l .form-holder form .error-message {
              margin-top: 0px;
              margin-bottom: 7px;
              font-size: 12px;
              padding-left: 20px;
              display: none; }
            .content-right .slider .section.contact-l .form-holder form div {
              position: relative; }
              .content-right .slider .section.contact-l .form-holder form div input {
                width: 100%;
                border: none;
                padding: 20px 16px 16px 55px;
                margin-bottom: 15px;
                box-sizing: border-box;
                border-radius: 40px; }
                .content-right .slider .section.contact-l .form-holder form div input:focus {
                  outline: none; }
              .content-right .slider .section.contact-l .form-holder form div textarea {
                width: 100%;
                border: none;
                border-radius: 20px;
                box-sizing: border-box;
                padding: 20px; }
                .content-right .slider .section.contact-l .form-holder form div textarea:focus {
                  outline: none; }
              .content-right .slider .section.contact-l .form-holder form div.user:before {
                content: "\f007";
                font-family: FontAwesome;
                left: 21px;
                position: absolute;
                top: 15px;
                font-size: 20px; }
              .content-right .slider .section.contact-l .form-holder form div.email:before {
                content: "\f0e0";
                font-family: FontAwesome;
                left: 21px;
                position: absolute;
                top: 17px;
                font-size: 20px; }
            .content-right .slider .section.contact-l .form-holder form button {
              width: 100%;
              border-radius: 40px;
              border: none;
              padding: 20px 20px 20px 50px;
              margin-top: 30px;
              text-transform: uppercase;
              cursor: pointer;
              -webkit-transition: all 0.5s;
              -moz-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
              .content-right .slider .section.contact-l .form-holder form button:hover {
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -o-transition: all 0.5s;
                transition: all 0.5s; }
              .content-right .slider .section.contact-l .form-holder form button:focus {
                outline: none; }
          @media (max-width: 1024px) {
            .content-right .slider .section.contact-l .form-holder {
              height: auto;
              padding: 30px 20px 50px 20px; } }
        @media (max-width: 1024px) {
          .content-right .slider .section.contact-l {
            order: 5; } }
      .content-right .slider .section.home-r {
        background: #f3fbff;
        background-image: url(../../assets/images/1.jpg);
        background-size: 100%;
        background-repeat: no-repeat; }
        @media (max-width: 1024px) {
          .content-right .slider .section.home-r {
            display: none; } }
  @media (max-width: 1024px) {
    .content-right {
      width: 100%;
      height: auto;
      margin-left: 0px;
      display: block; } }

.fixed-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0; }
  .fixed-bg .popup-box {
    display: none;
    width: 1000px;
    max-width: 100%; }
    @media (max-width: 600px) {
      .fixed-bg .popup-box {
        max-width: 60%; } }
    @media (max-width: 480px) {
      .fixed-bg .popup-box {
        max-width: 80%; } }
    .fixed-bg .popup-box .box-content {
      display: flex;
      position: relative; }
      @media (max-width: 600px) {
        .fixed-bg .popup-box .box-content {
          display: block; } }
      .fixed-bg .popup-box .box-content .box-img {
        width: 50%; }
        @media (max-width: 600px) {
          .fixed-bg .popup-box .box-content .box-img {
            width: 100%; } }
        .fixed-bg .popup-box .box-content .box-img img {
          width: 100%;
          display: block; }
      .fixed-bg .popup-box .box-content .detail {
        position: relative;
        width: 50%;
        padding-left: 50px;
        box-sizing: border-box;
        padding-top: 50px; }
        @media (max-width: 600px) {
          .fixed-bg .popup-box .box-content .detail {
            width: 100%;
            padding-top: 5px;
            padding-left: 30px;
            padding-bottom: 20px; }
            .fixed-bg .popup-box .box-content .detail:before {
              display: none; } }
        @media (max-width: 480px) {
          .fixed-bg .popup-box .box-content .detail {
            padding-left: 15px;
            padding-right: 15px; } }
        .fixed-bg .popup-box .box-content .detail:before {
          content: '';
          width: 50px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: -18px;
          transform: rotate(45deg);
          margin-top: -28px; }
        .fixed-bg .popup-box .box-content .detail h2 {
          font-size: 22px;
          font-weight: 600;
          margin-bottom: 30px; }
          @media (max-width: 480px) {
            .fixed-bg .popup-box .box-content .detail h2 {
              font-size: 20px;
              margin-bottom: 12px; } }
        .fixed-bg .popup-box .box-content .detail h3 {
          font-weight: 600;
          margin-top: 25px; }
          @media (max-width: 480px) {
            .fixed-bg .popup-box .box-content .detail h3 {
              display: none; } }
        .fixed-bg .popup-box .box-content .detail p {
          font-size: 15px; }
        @media (max-width: 480px) {
          .fixed-bg .popup-box .box-content .detail #description {
            display: none; } }
        .fixed-bg .popup-box .box-content .detail .project-link a {
          text-decoration: none;
          font-size: 16px; }
          @media (max-width: 480px) {
            .fixed-bg .popup-box .box-content .detail .project-link a {
              font-size: 13px; } }
        .fixed-bg .popup-box .box-content .detail .project-link i {
          margin-right: 12px; }
        .fixed-bg .popup-box .box-content .detail .techs {
          display: flex; }
          @media (max-width: 480px) {
            .fixed-bg .popup-box .box-content .detail .techs {
              flex-wrap: wrap; } }
          .fixed-bg .popup-box .box-content .detail .techs .tech {
            padding: 3px 10px;
            border-radius: 5px;
            margin-right: 5px;
            font-size: 15px;
            text-transform: uppercase; }
            @media (max-width: 480px) {
              .fixed-bg .popup-box .box-content .detail .techs .tech {
                margin-bottom: 5px; } }
      .fixed-bg .popup-box .box-content .close {
        position: absolute;
        top: 0;
        right: 0;
        height: 35px;
        width: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer; }

.just-phone {
  display: none; }
  @media (max-width: 1024px) {
    .just-phone {
      display: block; } }

.tmp-title {
  text-align: center;
  font-weight: 200;
  font-size: 34px;
  padding-top: 30px;
  padding-bottom: 30px; }

.loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 9;
  display: none;
  justify-content: center;
  align-items: center; }

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px; }

.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s; }

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1; }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0; } }

/*  Animations  */
@keyframes v0-400 {
  0% {
    margin-top: -0vh; }
  100% {
    margin-top: -400vh; } }

@keyframes v0-300 {
  0% {
    margin-top: -0vh; }
  100% {
    margin-top: -300vh; } }

@keyframes v0-200 {
  0% {
    margin-top: -0vh; }
  100% {
    margin-top: -200vh; } }

@keyframes v0-100 {
  0% {
    margin-top: -0vh; }
  100% {
    margin-top: -100vh; } }

@keyframes v100-400 {
  0% {
    margin-top: -100vh; }
  100% {
    margin-top: -400vh; } }

@keyframes v100-300 {
  0% {
    margin-top: -100vh; }
  100% {
    margin-top: -300vh; } }

@keyframes v100-200 {
  0% {
    margin-top: -100vh; }
  100% {
    margin-top: -200vh; } }

@keyframes v100-0 {
  0% {
    margin-top: -100vh; }
  100% {
    margin-top: -0vh; } }

@keyframes v200-400 {
  0% {
    margin-top: -200vh; }
  100% {
    margin-top: -400vh; } }

@keyframes v200-300 {
  0% {
    margin-top: -200vh; }
  100% {
    margin-top: -300vh; } }

@keyframes v200-100 {
  0% {
    margin-top: -200vh; }
  100% {
    margin-top: -100vh; } }

@keyframes v200-0 {
  0% {
    margin-top: -200vh; }
  100% {
    margin-top: -0vh; } }

@keyframes v300-400 {
  0% {
    margin-top: -300vh; }
  100% {
    margin-top: -400vh; } }

@keyframes v300-200 {
  0% {
    margin-top: -300vh; }
  100% {
    margin-top: -200vh; } }

@keyframes v300-100 {
  0% {
    margin-top: -300vh; }
  100% {
    margin-top: -100vh; } }

@keyframes v300-0 {
  0% {
    margin-top: -300vh; }
  100% {
    margin-top: -0vh; } }

@keyframes v400-300 {
  0% {
    margin-top: -400vh; }
  100% {
    margin-top: -300vh; } }

@keyframes v400-200 {
  0% {
    margin-top: -400vh; }
  100% {
    margin-top: -200vh; } }

@keyframes v400-100 {
  0% {
    margin-top: -400vh; }
  100% {
    margin-top: -100vh; } }

@keyframes v400-0 {
  0% {
    margin-top: -400vh; }
  100% {
    margin-top: -0vh; } }

@keyframes scrollLeft {
  0% {
    width: 0px; }
  100% {
    width: 100px; } }

@keyframes darker {
  0% {
    background: #0000002e; }
  50% {
    background: #00000069; }
  100% {
    background: #0000002e; } }

@keyframes larger {
  0% {
    font-size: 60px; }
  50% {
    font-size: 70px; }
  100% {
    font-size: 60px; } }