/* ============================================================== */
/* Template Name : Metronal - Personal Portfolio Page             */
/* Author        : Rietts Andreas Ruff                            */
/* Author URI    : https://themeforest.net/user/riettsruff        */
/* Version       : 1.3                                            */
/* ============================================================== */

/*================================================================*/
/* [ SKIN 1 ]                                                     */
/*================================================================*/

.project-popup {
  background: #fff;
}

.project-popup .project-name {
  border-bottom-color: #eee;
  color: #474f7e;
}

.project-popup .project-source {
  background: #474f7e;
  color: #fff;
}

.project-popup .project-source > .back {
  background: rgb(54, 59, 95);
}

.project-popup .project-source > .front > .value > span,
.project-popup .project-source > .back > .value > span {
  color: #00f7ef;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content .mfp-close {
  background: #474f7e;
  color: #fff;
}

#pre-load {
  background: rgb(44, 48, 81);
}

#pre-load .load-circle:before {
  background: #f6d365;
  -webkit-box-shadow: 30px 0 0 #06fff7;
  -moz-box-shadow: 30px 0 0 #06fff7;
  box-shadow: 30px 0 0 #06fff7;
}

#pre-load .load-circle:after {
  background: #fa709a;
  -webkit-box-shadow: 30px 0 0 #474f7e;
  -moz-box-shadow: 30px 0 0 #474f7e;
  box-shadow: 30px 0 0 #474f7e;
}

@-webkit-keyframes ball1 {
  0% {
    -webkit-box-shadow: 30px 0 0 #6991c7;
    box-shadow: 30px 0 0 #6991c7;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #6991c7;
    box-shadow: 0 0 0 #6991c7;
    margin-bottom: 0;
    -webkit-transform: translate(15px, 15px);
    -o-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
  100% {
    -webkit-box-shadow: 30px 0 0 #6991c7;
    box-shadow: 30px 0 0 #6991c7;
    margin-bottom: 10px;
  }
}

@-moz-keyframes ball1 {
  0% {
    -moz-box-shadow: 30px 0 0 #6991c7;
    box-shadow: 30px 0 0 #6991c7;
  }
  50% {
    -moz-box-shadow: 0 0 0 #6991c7;
    box-shadow: 0 0 0 #6991c7;
    margin-bottom: 0;
    -moz-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
  100% {
    -moz-box-shadow: 30px 0 0 #6991c7;
    box-shadow: 30px 0 0 #6991c7;
    margin-bottom: 10px;
  }
}

@keyframes ball1 {
  0% {
    -webkit-box-shadow: 30px 0 0 #6991c7;
    -moz-box-shadow: 30px 0 0 #6991c7;
    box-shadow: 30px 0 0 #6991c7;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #6991c7;
    -moz-box-shadow: 0 0 0 #6991c7;
    box-shadow: 0 0 0 #6991c7;
    margin-bottom: 0;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
    -ms-transform: translate(15px, 15px);
    -o-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
  100% {
    -webkit-box-shadow: 30px 0 0 #6991c7;
    -moz-box-shadow: 30px 0 0 #6991c7;
    box-shadow: 30px 0 0 #6991c7;
    margin-bottom: 10px;
  }
}

@-webkit-keyframes ball2 {
  0% {
    -webkit-box-shadow: 30px 0 0 #43e97b;
    box-shadow: 30px 0 0 #43e97b;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #43e97b;
    box-shadow: 0 0 0 #43e97b;
    margin-top: -20px;
    -webkit-transform: translate(15px, 15px);
    -o-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
  100% {
    -webkit-box-shadow: 30px 0 0 #43e97b;
    box-shadow: 30px 0 0 #43e97b;
    margin-top: 0;
  }
}

@-moz-keyframes ball2 {
  0% {
    -moz-box-shadow: 30px 0 0 #43e97b;
    box-shadow: 30px 0 0 #43e97b;
  }
  50% {
    -moz-box-shadow: 0 0 0 #43e97b;
    box-shadow: 0 0 0 #43e97b;
    margin-top: -20px;
    -moz-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
  100% {
    -moz-box-shadow: 30px 0 0 #43e97b;
    box-shadow: 30px 0 0 #43e97b;
    margin-top: 0;
  }
}

@keyframes ball2 {
  0% {
    -webkit-box-shadow: 30px 0 0 #43e97b;
    -moz-box-shadow: 30px 0 0 #43e97b;
    box-shadow: 30px 0 0 #43e97b;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #43e97b;
    -moz-box-shadow: 0 0 0 #43e97b;
    box-shadow: 0 0 0 #43e97b;
    margin-top: -20px;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
    -ms-transform: translate(15px, 15px);
    -o-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
  100% {
    -webkit-box-shadow: 30px 0 0 #43e97b;
    -moz-box-shadow: 30px 0 0 #43e97b;
    box-shadow: 30px 0 0 #43e97b;
    margin-top: 0;
  }
}

#wrapper { 
  background: rgb(118,48,233);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzYzMGU5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYmY4ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(45deg, rgb(118,48,233) 0%, rgb(255,191,141) 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(118,48,233)), color-stop(100%,rgb(255,191,141)));
  background: -webkit-linear-gradient(45deg, rgb(118,48,233) 0%,rgb(255,191,141) 100%);
  background: -o-linear-gradient(45deg, rgb(118,48,233) 0%,rgb(255,191,141) 100%);
  background: -ms-linear-gradient(45deg, rgb(118,48,233) 0%,rgb(255,191,141) 100%);
  background: linear-gradient(45deg, rgb(118,48,233) 0%,rgb(255,191,141) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7630e9', endColorstr='#ffbf8d',GradientType=1 );
  color: #fff;
}

.main-content {
  background: rgb(44, 48, 81);
}

.main-content .close-menu-link {
  color: #a8a8a8;
}

.main-content .close-menu-link:hover {
  color: #fff;
}

.main-content .hanging {
  background: rgb(54, 59, 95);
}

.main-content .hanging .logo-hanging {
  background: rgb(44, 48, 81);
}

.main-content .text-hanging .word {
  color: #fff;
}

.main-content .inner-content .head-content h3 {
  text-shadow: 0 3px 9px hsla(0, 0%, 0%, 0.2);
}

.main-content .inner-content .head-content h5 {
  text-shadow: 0 3px 9px hsla(0, 0%, 0%, 0.2);
}

.main-content .inner-content .head-content span,
.main-content .inner-content .head-content .name,
.main-content .inner-content .head-content .passion {
  color: #06fff7;
}

.main-content#home .hanging .logo-hanging i,
.main-content#home .hanging .text-hanging .word h6 > span {
  color: #ffbf8d;
}

.main-content#home .hanging .text-hanging .word {
  color: #fff;
}

.main-content#home .inner-content .content .box-wrapper .inner-box-wrapper {
  background: rgb(54, 59, 95);
}

.main-content#home .inner-content .content .box-wrapper .inner-box-wrapper:after {
  -webkit-box-shadow: 0 2px 130px 0 rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 2px 130px 0 rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 130px 0 rgba(0, 0, 0, 0.6);
}

.main-content#home .inner-content .content .box-wrapper .inner-box-wrapper:hover {
  background: #474f7e;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(1) .inner-box-wrapper .menu-link .valign-center i {
  color: #fa709a;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(2) .inner-box-wrapper .menu-link .valign-center i {
  color: #f6d365;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(3) .inner-box-wrapper .menu-link .valign-center i {
  color: #43e97b;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(4) .inner-box-wrapper .menu-link .valign-center i {
  color: #6991c7;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(1) .inner-box-wrapper .menu-link .valign-center h5 > span {
  color: #fa709a;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(2) .inner-box-wrapper .menu-link .valign-center h5 > span {
  color: #f6d365;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(3) .inner-box-wrapper .menu-link .valign-center h5 > span {
  color: #43e97b;
}

.main-content#home .inner-content .content .box-wrapper:nth-of-type(4) .inner-box-wrapper .menu-link .valign-center h5 > span {
  color: #6991c7;
}

.main-content#about .hanging .logo-hanging i,
.main-content#about .hanging .text-hanging .word h6 > span {
  color: #fa709a;
}

.main-content#about .inner-content .content #personal-info .row,
.main-content#about .inner-content .content #services .row {
  background: rgb(54, 59, 95);
}

.main-content#about .inner-content .content #personal-info h5:after,
.main-content#about .inner-content .content #services h5:after {
  background: #fa709a;
}

.main-content#about .inner-content .content #personal-info .summary {
  color: #a8a8a8;
}

.main-content#about .inner-content .content #personal-info .profile ul li .label i {
  color: #00f7ef;
}

.main-content#about .inner-content .content #personal-info .profile ul li .value {
  color: #a8a8a8;
}

.main-content#about .inner-content .content #personal-info .social-media ul li a {
  background: #fff;
  color: rgb(54, 59, 95);
  border-color: transparent;
}

.main-content#about .inner-content .content #personal-info .social-media ul li a > .back {
  background: rgb(44, 48, 81);
  color: #fff;
  border-color: #fff;
}

.main-content#about .inner-content .content #personal-info .button-wrapper .single-button a {
  background: #474f7e;
  border-color: #fff;
  color: #fff;
}

.main-content#about .inner-content .content .button-wrapper a > .back {
  background: rgb(44, 48, 81);
}

.main-content#about .inner-content .content .button-wrapper a > .front > .value > span,
.main-content#about .inner-content .content .button-wrapper a > .back > .value > span {
  color: #00f7ef;
}

.main-content#about .inner-content .content #services .single-service ul .service-number {
  color: #00f7ef;
  background: rgb(44, 48, 81);
}

.main-content#about .inner-content .content #services .single-service > ul {
  border-color: rgb(44, 48, 81);
}

.main-content#about .inner-content .content #services .single-service ul ul .service-name i {
  color: #00f7ef;
}

.main-content#about .inner-content .content #services .single-service ul ul .service-body {
  color: #a8a8a8;
}

.main-content#resume .hanging .logo-hanging i,
.main-content#resume .hanging .text-hanging .word h6 > span {
  color: #f6d365;
}

.main-content#resume .inner-content .content .skills .row,
.main-content#resume .inner-content .content .education .row,
.main-content#resume .inner-content .content .experience .row,
.main-content#resume .inner-content .content .fun-facts .row {
   background: rgb(54, 59, 95);
}

.main-content#resume .inner-content .content .skills h5:after,
.main-content#resume .inner-content .content .education h5:after,
.main-content#resume .inner-content .content .experience h5:after,
.main-content#resume .inner-content .content .fun-facts h5:after {
  background: #f6d365;
}

.main-content#resume .inner-content .content .skills .single-skills-wrapper .skills-heading,
.main-content#resume .inner-content .content .education .single-education .education-when-where,
.main-content#resume .inner-content .content .experience .single-experience .experience-when-where {
  color: #00f7ef;
  background: rgb(44, 48, 81);
}

.main-content#resume .inner-content .content .skills .single-skills-wrapper > ul,
.main-content#resume .inner-content .content .education .single-education > ul,
.main-content#resume .inner-content .content .experience .single-experience > ul {
  border-color: rgb(44, 48, 81);
}

.main-content#resume .inner-content .content .education .single-education ul ul .education-body,
.main-content#resume .inner-content .content .experience .single-experience ul ul .experience-body {
  color: #a8a8a8;
}

.main-content#resume .inner-content .content .skills .single-skills-wrapper ul .single-skill .skill-name i,
.main-content#resume .inner-content .content .education .single-education ul ul .education-name i,
.main-content#resume .inner-content .content .experience .single-experience ul ul .experience-name i,
.main-content#resume .inner-content .content .fun-facts .single-fun-fact .fun-fact-body i {
  color: #00f7ef;
}

.main-content#resume .inner-content .content .skills .single-skills-wrapper ul .single-skill ul .percentage {
  color: #a8a8a8;
}

.main-content#resume .inner-content .content .skills .single-skills-wrapper ul .single-skill ul .progress-wrapper {
  border-color: #fff;
}

.main-content#resume .inner-content .content .skills .single-skills-wrapper ul .single-skill ul .progress-wrapper .progress {
  background: #474f7e;
  background: -webkit-linear-gradient(45deg, #474f7e 25%, transparent 25%, transparent 50%, #474f7e 50%, #474f7e 75%, transparent 75%, transparent);
  background: -moz-linear-gradient(45deg, #474f7e 25%, transparent 25%, transparent 50%, #474f7e 50%, #474f7e 75%, transparent 75%, transparent);
  background: -ms-linear-gradient(45deg, #474f7e 25%, transparent 25%, transparent 50%, #474f7e 50%, #474f7e 75%, transparent 75%, transparent);
  background: -o-linear-gradient(45deg, #474f7e 25%, transparent 25%, transparent 50%, #474f7e 50%, #474f7e 75%, transparent 75%, transparent);
  background: linear-gradient(45deg, #474f7e 25%, transparent 25%, transparent 50%, #474f7e 50%, #474f7e 75%, transparent 75%, transparent);
  border-right-color: #fff;
}

.main-content#resume .inner-content .content .fun-facts .single-fun-fact .fun-fact-value {
  color: #a8a8a8;
}

.main-content#resume .inner-content .content .button-wrapper a {
  background: #474f7e;
  border-color: #fff;
  color: #fff;
}

.main-content#resume .inner-content .content .button-wrapper a > .back {
  background: rgb(44, 48, 81);
}

.main-content#resume .inner-content .content .button-wrapper a > .front > .value > span,
.main-content#resume .inner-content .content .button-wrapper a > .back > .value > span {
  color: #00f7ef;
} 

.main-content#portfolio .hanging .logo-hanging i,
.main-content#portfolio .hanging .text-hanging .word h6 > span {
  color: #43e97b;
}

.main-content#portfolio .inner-content .content #projects > .row {
  background: rgb(54, 59, 95);
}

.main-content#portfolio .inner-content .content #projects h5:after {
  background: #43e97b;
}

.main-content#portfolio .inner-content .content #projects .portfolio-filter ul li a {
  color: #a8a8a8;
}

.main-content#portfolio .inner-content .content #projects .portfolio-filter ul li a.current {
  background: rgb(54, 59, 95);
  border-color: #fff;
  color: #fff;
}

.main-content#portfolio .inner-content .content #projects .portfolio-item .item-wrapper .item .overlay {
  background: rgba(44, 48, 81, 0.9);
  border-color: #fff;
}

.main-content#portfolio .inner-content .content #projects .portfolio-item .item-wrapper .item .overlay .view-more {
  background: #474f7e;
  border-color: #fff;
  color: #fff;
}

.main-content#portfolio .inner-content .content #projects .portfolio-item .item-wrapper .item .overlay .view-more > .back {
  background: rgb(44, 48, 81);
}

.main-content#portfolio .inner-content .content #projects .portfolio-item .item-wrapper .item .overlay .view-more > .front > .value > span,
.main-content#portfolio .inner-content .content #projects .portfolio-item .item-wrapper .item .overlay .view-more > .back > .value > span {
  color: #00f7ef;
}

.main-content#portfolio .inner-content .content #projects .portfolio-item .item-wrapper .item .overlay .image-info .project-name {
  color: #00f7ef;
}

.main-content#contact .hanging .logo-hanging i,
.main-content#contact .hanging .text-hanging .word h6 > span {
  color: #6991c7;
}

.main-content#contact .inner-content .content #contact-info > .row,
.main-content#contact .inner-content .content #contact-form > .row {
  background: rgb(54, 59, 95);
}

.main-content#contact .inner-content .content #contact-info h5:after,
.main-content#contact .inner-content .content #contact-form h5:after {
  background: #6991c7;
}

.main-content#contact .inner-content .content #contact-info .list-contact-info > ul > li .contact-info-name {
  color: #00f7ef;
}

.main-content#contact .inner-content .content #contact-info .list-contact-info > ul > li .value {
  color: #a8a8a8;
}

.main-content#contact .inner-content .content #contact-info .list-contact-info > ul > li .social-media li a {
  background: #fff;
  color: rgb(54, 59, 95);
  border-color: transparent;
}

.main-content#contact .inner-content .content #contact-info .list-contact-info > ul > li .social-media li a > .back {
  background: #474f7e;
  color: #fff;
  border-color: #fff;
}

.main-content#contact .inner-content .content #contact-form .note p {
  color: #a8a8a8;
}

.main-content#contact .inner-content .content #contact-form .form-wrapper .form-group button[type="submit"] {
  background: #474f7e;
  border-color: #fff;
  color: #fff;
}

.main-content#contact .inner-content .content #contact-form .form-wrapper .form-group button[type="submit"] > .front > .value > span,
.main-content#contact .inner-content .content #contact-form .form-wrapper .form-group button[type="submit"] > .back > .value > span {
  color: #00f7ef;
}

.main-content#contact .inner-content .content #contact-form .form-wrapper .form-group button[type="submit"] > .back {
  background: rgb(44, 48, 81);
}

#right-wrapper {
  background: #fff;
}