/**
*
* Contents
* 
* 01. General Styles
* 02. Buttons
* 03. Forms
* 04. Alerts
* 05. Progress Bar
* 06. Header
* 07. Footer
* 08. Social Icons
* 09. Sections
* 10. Widgets
* 11. Signature
* 12. Services
* 13. Experience
* 14. Testimonials
* 15. Education
* 16. Icon Box
* 17. Portfolio
* 18. Blog
* 19. Error Page
* 
**/

/* ==========================================================================
   01. General Styles
   ========================================================================== */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500);
@import url(http://fonts.googleapis.com/css?family=Lato:700);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
html,
body {
  overflow-x: hidden;
}
body {
  /*background: #00796b;*/
  background: #002233;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  /* font-family: "Roboto", sans-serif; */
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}
.web4every1{
    position: absolute;
    left: 200px;
    top: 8px;
}
p {
  margin-bottom: 24px;
}
blockquote {
  margin: 24px 0;
  margin-left: 72px;
  border-left: 4px solid #f1c40f;
  padding: 0;
  padding-left: 38px;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}
blockquote p {
  position: relative;
}
blockquote p:before {
  content: "“";
  font-family: "Lato", sans-serif;
  font-size: 24px;
  line-height: 28px;
  position: absolute;
  left: -12px;
  top: 0;
}
blockquote p:after {
  content: "”";
  font-family: "Lato", sans-serif;
  font-size: 24px;
  line-height: 28px;
}
blockquote footer {
  font-size: 13px;
  line-height: 28px;
  text-transform: uppercase;
  color: #7c4dff;
  margin-top: 12px;
}
blockquote footer:before {
  content: "";
}
a {
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
  outline: none !important;
  color: #f1c40f;
}
a:hover {
  color: #f1c40f;
}
a:focus {
  text-decoration: none;
}
a img {
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
a:hover img {
  opacity: 0.75;
}
.list-unstyled li {
  margin-bottom: 12px;
}
.list-icons {
  padding-left: 0;
  margin-left: 36px;
  list-style-type: none;
}
.list-icons > li {
  position: relative;
}
.list-icons > li > i {
  position: absolute;
  left: -36px;
  width: 36px;
  top: 2px;
  text-align: center;
  color: #232323;
  font-size: 18px;
  vertical-align: middle;
}
.list-icons.purple > li > i {
  color: #fff;
}
.bold-list {
  font-weight: 500;
  text-transform: uppercase;
}
.bold-list li {
  margin-bottom: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  /* font-weight: 700; */
  font-family: ;
  color: #fff;
}
h1 {
  font-size: 50px;
  line-height: 60px;
  margin-top: 0;
  margin-bottom: 24px;
}
h2 {
  font-size: 22px;
  line-height: 26px;
  margin-top: 0;
  margin-bottom: 36px;
}
h3 {
  font-size: 20px;
  line-height: 26px;
  margin-top: 0;
  margin-bottom: 36px;
  font-weight: 500;
}
h4 {
  font-size: 16px;
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 24px;
}
h5 {
  font-size: 15px;
  line-height: 32px;
  margin-top: 0;
  margin-bottom: 24px;
}
h6 {
  font-size: 14px;
  line-height: 32px;
  font-weight: 500;
}
h3.small-margin-bottom {
  margin-bottom: 6px;
}
.map {
  width: 100%;
  height: 426px;
  margin-top: 72px;
}

/* ==========================================================================
   02. Buttons
   ========================================================================== */
.button {
  font-weight: 500;
  text-transform: uppercase;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
  outline: none !important;
}
.button:hover {
  text-decoration: none;
}
.button i {
  font-size: 24px;
  vertical-align: middle;
}
.button.icon-left i {
  margin-right: 12px;
}
.button.icon-right i {
  margin-left: 12px;
}
.button-row {
  margin-top: 48px;
}
.button-row .button {
  margin-right: 32px;
  margin-bottom: 12px;
}
@media all and (max-width: 1024px) {
  .button-row .button {
    display: block;
    margin-right: 0;
  }
}
/*==========  Solid Button  ==========*/
.solid-button {
  font-size: 15px;
  line-height: 26px;
  padding: 11px 29px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.solid-button:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.solid-button.purple {
  background: #c0392b;
  color: #fff;
}
.solid-button.white {
  background: #fff;
  color: #232323;
}
.solid-button.dark {
  background: #232323;
  color: #fff;
}
.solid-button.white-purple {
  background: #fff;
  color: #232323;
}
.solid-button.white-purple:hover {
  background: #c0392b;
  color: #fff;
}
.solid-button.small {
  font-size: 12px;
  padding: 2px 20px;
}
/*==========  Link Button  ==========*/
.link-button {
  font-size: 13px;
  line-height: 32px;
}
.link-button:hover {
  opacity: 0.75;
}
.link-button.white {
  color: #fff;
}
/*==========  Action Button  ==========*/
.action-button {
  background: #f1c40f;
  color: #fff;
  font-size: 24px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 100%;
  display: inline-block;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13), 0 6px 10px rgba(0, 0, 0, 0.3);
}
.action-button:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13), 0 9px 15px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   03. Forms
   ========================================================================== */
input:not([type="submit"]):not([type="file"]),
select,
textarea {
  border: none;
  border-bottom: 1px solid #d7d7d7;
  background: none;
  width: 100%;
  padding: 2px 6px;
  outline: none !important;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}
input:not([type="submit"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: #7c4dff;
}
.input-group {
  margin-bottom: 28px;
}
.form-horizontal .control-label {
  text-align: left;
  color: #666;
}
.form-horizontal .control-label-contact {
  color: #fff;
}
/* ==========================================================================
   04. Alerts
   ========================================================================== */
.alert {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  border: none;
  margin-bottom: 0;
  margin-top: 24px;
  display: none;
  font-size: 15px;
  line-height: 26px;
  border-radius: 3px;
  font-weight: 500;
  text-transform: uppercase;
}
.alert-info {
  background: #2196f3;
  color: #fff;
}
.alert-success {
  background: #4caf50;
  color: #fff;
}
.alert-danger {
  background: #f44336;
  color: #fff;
}

/* ==========================================================================
   05. Progress Bar
   ========================================================================== */
.progress {
  height: 8px;
  margin-bottom: 36px;
  background-color: #e8e8e8;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.progress-bar {
  line-height: 8px;
  background-color: #c0392b;
  box-shadow: none;
  position: relative;
}
.progress-bar span {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #000;
  background: #fff;
  font-weight: 400;
  position: absolute;
  top: -16px;
  right: -20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.progress-bar-label {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 12px;
  color: #fff;
}
.circle-progress-wrapper {
  margin-bottom: 24px;
}
.circle-progress {
  display: inline-block;
  width: 200px;
  height: 200px;
  position: relative;
  float: left;
}
.circle-progress input {
  font-size: 20px !important;
  display: inline-block !important;
  width: 78px !important;
  height: 78px !important;
  line-height: 78px !important;
  border-radius: 100% !important;
  background: #fff !important;
  margin-top: 61px !important;
  margin-left: 61px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  top: 0;
  left: 0;
}
.circle-progress-label-wrapper {
  margin-left: 240px;
  height: 200px;
}
.circle-progress-label {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 0;
  color: #fff;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media all and (max-width: 768px) {
  .circle-progress {
    float: none;
  }
  .circle-progress-label-wrapper {
    margin-left: 0;
    height: auto;
    margin-top: 12px;
  }
  .circle-progress-label {
    top: auto;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ==========================================================================
   06. Header
   ========================================================================== */
.header {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
}
.header .top {
  background: #2c3e50;
  line-height: 50px;
  color: #fff;
  padding: 0 60px;
}
.header .top a {
  color: #fff;
}
.header .top a:hover {
  opacity: 0.75;
  text-decoration: none;
}
.header .top .available {
  float: left;
}
.header .top .available i {
  font-size: 36px;
  line-height: 50px;
  margin-right: 8px;
  vertical-align: middle;
}
.header .top .right-icons {
  float: right;
  font-size: 24px;
}
.header .top .right-icons a {
  margin-left: 12px;
}
.header .bottom {
  background: #c0392b;
  line-height: 70px;
  padding: 0 60px;
  color: #232323;
  font-weight: 500;
  position: relative;

  /* background-image: -webkit-linear-gradient(top, #c0392b 0, #f9f7f7 100%);
  background-image: linear-gradient(to bottom, #c0392b 0, #801010 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0392b', endColorstr='#801010', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); */
}
.header .bottom a {
  color: #fff;
}
.header .bottom .title {
  font-size: 28px;
  font-family: "Raleway", sans-serif;
  float: left;
}
.header .bottom .title a:hover {
  opacity: 0.75;
  text-decoration: none;
}
.main-nav {
  float: right;
}
.main-nav ul {
  margin-bottom: 0;
}
.main-nav ul > li {
  padding: 0;
  display: inline-block;
  margin-left: -4px;
  margin-bottom: 0;
}
.main-nav ul > li a {
  padding: 0 20px;
  display: inline-block;
  line-height: 70px;
  height: 70px;
  border-bottom: 5px solid transparent;
}
.main-nav ul > li a:hover {
  border-bottom: 5px solid #f1c40f;
  text-decoration: none;
}
.main-nav ul > li:hover a:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 100%;
  margin-top: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #f1c40f;
}
.main-nav ul > li.active a {
  border-bottom: 5px solid #f1c40f;
  text-decoration: none;
  position: relative;
}

.header-action-button-wrapper {
  float: right;
  width: 120px;
  height: 70px;
  display: inline-block;
}
.header-action-button {
  position: absolute;
  bottom: -30px;
  right: 60px;
  z-index: 99;
}
.header .bottom .action-button {
  color: #fff;
}
.responsive-menu-open {
  display: none;
  float: right;
  text-transform: uppercase;
  line-height: 70px;
  height: 70px;
  text-decoration: none;
}
.responsive-menu-open:hover {
  text-decoration: none;
}
.responsive-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 100%;
  min-width: 100%;
  background: #fff;
  z-index: 999;
  padding: 24px;
  overflow-y: scroll;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}
.responsive-menu.open {
  left: 0;
}
.responsive-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  text-transform: uppercase;
  text-decoration: none;
}
.responsive-menu-close:hover {
  text-decoration: none;
}
.responsive-nav ul > li a {
  color: #222;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}
.responsive-nav ul > li.active a {
  color: #7c4dff;
}
.no-scroll {
  overflow: hidden;
}
@media all and (max-width: 1024px) {
  .header .top {
    padding: 0 12px;
  }
  .header .top .available span {
    display: none;
  }
  .header .bottom {
    padding: 0 12px;
  }
  .main-nav {
    display: none;
  }
  .responsive-menu-open {
    display: inline-block;
  }
  .header-action-button-wrapper {
    width: 84px;
  }
  .header-action-button {
    right: 12px;
  }
}
/*==========  Popup  ==========*/
.popup,
.slide-out-popup {
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 47px;
  right: 35px;
  z-index: 999;
  min-width: 118px;
  display: none;
}
.slide-out-popup {
  top: 54px;
  right: 41px;
}
.popup:before,
.slide-out-popup:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -10px;
  right: 30px;
}
.popup .social-nav ul,
.slide-out-popup .social-nav ul {
  margin-bottom: 0;
}
.popup .social-nav ul li,
.slide-out-popup .social-nav ul li {
  line-height: 30px;
  margin-bottom: 0;
}
.popup .social-nav ul li a,
.slide-out-popup .social-nav ul li a {
  color: #232323;
  font-size: 12px;
  line-height: 30px;
  text-transform: uppercase;
  padding: 0 20px;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.popup .social-nav ul li a:hover,
.slide-out-popup .social-nav ul li a:hover {
  color: #fff;
  background: #7c4dff;
  font-weight: 700;
  text-decoration: none;
}
@media all and (max-width: 1024px) {
  .popup {
    right: 2px;
  }
  .popup:before {
    right: 15px;
  }
}
/*==========  Search  ==========*/
.search-overlay {
  background: #f1c40f;

  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  border-radius: 100%;
}
.search-overlay.scale {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  color: #fff;
  text-align: center;
  padding: 0 12px;
  padding-top: 144px;
  font-size: 24px;
}
.search.open {
  display: block;
}
.search-close {
  position: absolute;
  right: 48px;
  top: 48px;
  z-index: 999;
  font-size: 48px;
  color: #fff;
}
.search-close:hover {
  color: #fff;
  opacity: 0.75;
}
.search h4 {
  margin-bottom: 48px;
  color: #fff;
}
.search input:focus {
  border-color: #fff !important;
}
/*==========  Slide Out  ==========*/
.slide-out-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}
.slide-out {
  width: 380px;
  height: auto;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  bottom: 0;
  right: -400px;
  background: #fff;
  z-index: 100;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}
.slide-out.open {
  right: 0;
}
.slide-out-header {
  background: #c0392b;
  padding: 30px;
  padding-top: 20px;
  color: #fff;
}
.slide-out-header a {
  color: #fff;
}
.slide-out-header a:hover {
  opacity: 0.75;
}
.slide-out-close {
  font-size: 24px;
}
.slide-out-header .open-search,
.slide-out-header .slide-out-share {
  font-size: 24px;
  margin-left: 12px;
}
.slide-out-header .image {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  overflow: hidden;
  border: 5px solid #fff;
  background: #e2e2e2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  float: left;
  margin-top: 24px;
}
.slide-out-header .content {
  margin-left: 118px;
  padding-top: 18px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.slide-out-header .content h5 {
  margin-bottom: 0;
  color: #fff;
}
.slide-out-header .content span {
  line-height: 32px;
  font-weight: 500;
}
.slide-out-widgets {
  padding: 30px;
  padding-top: 50px;
}
.slide-out-widget {
  margin-bottom: 60px;
}
.slide-out-widget h4 {
  margin-bottom: 24px;
  color: #111;
}
@media all and (max-width: 768px) {
  .slide-out {
    width: 100%;
    right: -110%;
  }
}

/* ==========================================================================
   07. Footer
   ========================================================================== */
.footer {
  text-align: center;
  color: #fff;
  font-weight: 500;
}
.footer .top {
  background: #232323;
  padding: 48px 0;
}
.footer .bottom {
  background: #000;
  line-height: 50px;
}
.footer h4 {
  color: #fff;
}
.footer .social-icons {
  margin-bottom: 24px;
}

/* ==========================================================================
   08. Social Icons
   ========================================================================== */
.social-icon {
  display: inline-block;
  width: 42px;
  height: 42px;
  line-height: 42px;
  font-size: 16px;
  color: #232323;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13);
  margin: 0 4px;
  text-align: center;
}
.social-icon:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13), 0 6px 10px rgba(0, 0, 0, 0.3);
}
.footer .social-icon {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13), 0 6px 10px rgba(0, 0, 0, 0.3);
}
.social-icon:hover {
  background: #c0392b;
  color: #fff;
}

/* ==========================================================================
   09. Sections
   ========================================================================== */
.sections {
  display: block;
  height: auto;
  overflow: hidden;
  position: static;
  word-wrap: break-word;
}
.sections-wrapper {
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
.sections-wrapper > section {
  width: 1600px;
  height: auto;
  float: left;
  padding: 72px 12px;
}
.sections-wrapper > section.no-padding-bottom {
  padding-bottom: 0;
}
.sections-wrapper > section.no-padding-bottom .padding-fix {
  padding-bottom: 72px;
}
.section-img {
  max-height: 650px;
  margin: 0 auto;
}
.vertical-center {
  display: table-cell;
  vertical-align: middle;
  float: none;
}
.section-nav {
  position: fixed;
  bottom: 80px;
  right: 60px;
  z-index: 9;
}
.section-nav a {
  display: block;
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  font-size: 36px;
  border-radius: 100%;
  background: #000;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13), 0 6px 10px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
}
.section-nav a:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13), 0 9px 15px rgba(0, 0, 0, 0.3);
}
.section-nav a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.75;
}
.spacer {
  margin-bottom: 48px;
}
@media all and (max-width: 1024px) {
  .vertical-center {
    display: block;
  }
  .section-img {
    max-height: 256px;
  }
  .section-nav {
    bottom: 12px;
    right: 12px;
  }
  .section-nav a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 24px;
    margin-top: 12px;
  }
}

/* ==========================================================================
   10. Widgets
   ========================================================================== */
.instagram {
  text-align: center;
}
.instagram img {
  width: 93px;
  display: inline-block;
  padding: 6px;
}

/* ==========================================================================
   11. Signature
   ========================================================================== */
.signature {
  border-bottom: 2px dashed #232323;
  position: relative;
  margin: 0 18px;
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.signature:before {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  background: #fff;
  border: 4px solid #c0392b;
  border-radius: 100%;
  position: absolute;
  left: -18px;
  bottom: -7px;
}
.signature:after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  background: #fff;
  border: 4px solid #c0392b;
  border-radius: 100%;
  position: absolute;
  right: -18px;
  bottom: -7px;
}

/* ==========================================================================
   12. Services
   ========================================================================== */
.service {
  background: #fff;
  text-align: center;
  padding: 48px 0;
  color: #232323;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
  margin-bottom: 24px;
  border-radius: 15px;
}
.service:hover {
  background: #c0392b;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.service .icon {
  font-size: 72px;
  line-height: 72px;
  margin-bottom: 24px;
}
.service h5 {
  margin-bottom: 0;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}
.service:hover h5 {
  color: #fff;
}

/* ==========================================================================
   13. Experience
   ========================================================================== */
.experience-block {
  position: relative;
  padding-bottom: 30px;
}
.experience-block .icon {
  display: block;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
  background: #fff;
  border: 5px solid #e5e5e5;
  border-radius: 100%;
  font-size: 36px;
  color: #000;
  position: absolute;
  top: 0;
  left: 30%;
  margin-left: -39px;
  z-index: 2;
}
.experience-block .line {
  display: block;
  height: 100%;
  width: 2px;
  border-left: 2px dashed #4d4d4d;
  position: absolute;
  top: 0;
  left: 30%;
}
.experience-block .meta {
  width: 20%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  float: left;
  margin-top: 39px;
}
.experience-block .meta:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 10px 0 0;
  border-color: #c0392b transparent transparent transparent;
  position: absolute;
  top: 0;
  right: -10px;
}
.experience-block .meta .year {
  display: block;
  background: #c0392b;
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 36px;
  text-transform: uppercase;
  font-weight: 700;
}
.experience-block .meta .company {
  display: block;
  background: #fff;
  color: #232323;
  text-align: center;
  font-size: 15px;
  line-height: 50px;
  text-transform: uppercase;
  font-weight: 500;
}
.experience-block .content {
  width: 60%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: #fff;
  position: relative;
  padding: 20px 30px;
  float: right;
  margin-top: 39px;
  color: #666 !important;
}
.experience-block .content h5 {
  color: #666 !important;
}
.experience-block .content:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 13px 0;
  border-color: transparent #fff transparent transparent;
  position: absolute;
  top: 0;
  left: -10px;
}
.experience-block .content h5 {
  margin-bottom: 6px;
}
.experience-block .content p:last-of-type {
  margin-bottom: 0;
}
@media all and (max-width: 768px) {
  .experience-block .icon {
    left: 0;
    margin-left: 0;
  }
  .experience-block .line {
    left: 38px;
  }
  .experience-block .meta {
    width: 60%;
    float: right;
    margin-top: 12px;
  }
  .experience-block .meta:after {
    border-width: 0 10px 13px 0;
    border-color: transparent #c0392b transparent transparent;
    right: auto;
    left: -10px;
  }
  .experience-block .content {
    margin-top: 12px;
    width: 80%;
    padding: 10px 20px;
  }
  .experience-block .content:after {
    border-width: 10px 0 0 13px;
    border-color: transparent transparent transparent #fff;
    top: -10px;
    left: 0;
  }
}

/* ==========================================================================
   14. Testimonials
   ========================================================================== */
.testimonial-slider {
  text-align: center;
  font-weight: 500;
  color: #232323;
  margin-top: 24px;
}
.testimonial-slider .image {
  width: 115px;
  height: 115px;
  display: block;
  border: 5px solid #fff;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  margin-top: 2px;
  margin-bottom: 20px;
}
.testimonial-slider .image img {
  transform-style: inherit;
}
.testimonial-slider .sep {
  width: 65px;
  height: 3px;
  margin: 0 auto;
  background: #fff;
  margin-bottom: 30px;
  position: relative;
}
.testimonial-slider .sep:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -6px;
}
.testimonial-slider p {
  font-size: 18px;
  line-height: 28px;
  font-style: italic;
  color: #fff;
}
.testimonial-slider .author {
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 32px;
  display: inline-block;
  color: #fff;
}
.owl-theme .owl-dots .owl-dot span {
  width: 30px;
  height: 6px;
  margin: 5px 7px;
  background: #fff;
  display: block;
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #c0392b;
}
.owl-theme .owl-nav {
  margin-top: 0;
}

/* ==========================================================================
   15. Education
   ========================================================================== */
.education {
  padding: 132px 0;
  margin: 72px 0;
}
.education .line {
  /*border-bottom: 1px dashed #232323;*/
  border-bottom: 1px dashed #fff;
  position: relative;
  margin: 0 18px;
  padding-bottom: 12px;
  margin-bottom: 24px;
  position: relative;
  top: -1px;
}
.education .line:before {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  background: #fff;
  border: 4px solid #c0392b;
  border-radius: 100%;
  position: absolute;
  left: -18px;
  bottom: -7px;
}
.education .line:after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  background: #fff;
  border: 4px solid #c0392b;
  border-radius: 100%;
  position: absolute;
  right: -18px;
  bottom: -7px;
}
.education .item {
  width: 25%;
  float: left;
  position: relative;
  text-align: center;
  color: #fff;
}
.education .item .marker {
  width: 22px;
  height: 22px;
  background: #fff;
  border: 6px solid #c0392b;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.education .item .content {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 24px;
  position: absolute;
  top: -132px;
  left: 0;
  right: 0;
  color: #666;
  margin: 0 12px;
}
.education .item:nth-child(even) .content {
  top: auto;
  bottom: -132px;
}
.education .item .content:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 0 18px;
  border-color: transparent transparent transparent #fff;
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.education .item:nth-child(even) .content:after {
  border-width: 0 18px 18px 0;
  border-color: transparent #fff transparent transparent;
  box-shadow: none;
  position: absolute;
  top: -9px;
  bottom: auto;
}
.education .item .content span {
  font-size: 13px;
  line-height: 26px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.education .item .content h4 {
  line-height: 26px;
  margin-bottom: 0;
  color: #666;
}
.education .item .year {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  position: relative;
  bottom: -44px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.education .item:nth-child(even) .year {
  top: -44px;
  bottom: auto;
}
@media all and (max-width: 768px) {
  .education {
    position: relative;
    padding: 0;
    margin: 18px 0;
    margin-bottom: 42px;
  }
  .education .item {
    width: 100%;
    float: none;
    margin-bottom: 24px;
  }
  .education .item:last-of-type {
    margin-bottom: 0;
  }
  .education .item .content {
    position: static;
  }
  .education .line {
    border-bottom: none;
    border-left: 1px dashed #232323;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    margin: 0;
    padding: 0;
  }
  .education .line:before {
    top: -18px;
    bottom: -7px;
    left: -7px;
  }
  .education .line:after {
    right: auto;
    bottom: -18px;
    left: -7px;
  }
  .education .item .content {
    padding: 24px;
    position: static;
    margin: 0;
    margin-left: 36px;
  }
  .education .item .marker {
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: -11px;
    margin-top: -27px;
  }
  .education .item .content:after {
    border-width: 18px 0 0 18px;
    border-color: transparent transparent transparent #fff;
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.15);
    bottom: auto;
    left: 36px;
    top: 50%;
    margin-top: -25px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .education .item:nth-child(even) .content:after {
    border-width: 18px 0 0 18px;
    border-color: transparent transparent transparent #fff;
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.15);
    bottom: auto;
    left: 36px;
    top: 50%;
    margin-top: -25px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .education .item .year {
    position: static;
    margin: 0 auto;
    padding-left: 36px;
    margin-top: 6px;
  }
}

/* ==========================================================================
   16. Icon Box
   ========================================================================== */
.icon-box {
  text-align: center;
  margin: 12px 0;
}
.icon-box .icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 48px;
  color: #232323;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  margin-bottom: 24px;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}
.icon-box:hover .icon {
  background: #c0392b;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.icon-box h6 {
  line-height: 12px;
  margin-bottom: 0;
}

/* ==========================================================================
   17. Portfolio
   ========================================================================== */
.portfolio-wrapper {
  position: relative;
}
.portfolio-wrapper li {
  margin: 10px 0;
  font-size: 1.1em;
}
.portfolio-filters {
  position: absolute;
  top: -86px;
  right: 0;
}
.portfolio-filters .button {
  margin-left: 20px;
}
.portfolio {
  margin: 0 -20px;
  margin-top: 60px;
}
.portfolio .item {
  width: 25%;
  padding: 20px;
}
.portfolio .item img {
  width: 100%;
  height: auto;
}
.portfolio .item .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
}
.portfolio .item:hover .overlay {
  opacity: 1;
  visibility: visible;
}
.portfolio .item .overlay .background {
  background: #c0392b;
  background: rgba(192, 57, 43, 0.9);
  width: 100%;
  height: 100%;
  cursor: url("../images/cursor.png") 43 43, crosshair;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.portfolio .item .overlay .meta {
  background: #fff;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 8px 0;
}
.portfolio .item .overlay .meta .title {
  font-size: 14px;
  line-height: 26px;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  color: #232323;
}
.portfolio .item .overlay .meta .category {
  font-size: 14px;
  line-height: 26px;
  font-style: italic;
  font-weight: 500;
  color: #666;
}
.portfolio-load-more {
  text-align: center;
  margin-top: 48px;
}
@media all and (max-width: 1024px) {
  .portfolio .item {
    width: 50%;
    padding: 20px;
  }
  .portfolio-filters {
    position: static;
    text-align: center;
  }
  .portfolio-filters .button {
    margin-left: 12px;
    margin-bottom: 12px;
  }
  .portfolio {
    margin-top: 12px;
  }
}
@media all and (max-width: 768px) {
  .portfolio .item {
    width: 100%;
    padding: 20px;
  }
}
/* Single
   ========================================================================== */
.portfolio-button-row {
  margin-top: 7px;
  margin-bottom: 36px;
  display: block;
}
.portfolio-details {
  padding: 32px 24px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #666;
}
.portfolio-details h4 {
  color: #666;
}
.portfolio-details p:last-of-type {
  margin-bottom: 0;
}
.portfolio-meta {
  margin-bottom: 24px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
}
.portfolio-meta span {
  display: block;
  color: #232323;
}
.portfolio-slider {
  margin-bottom: 24px;
}
.portfolio-slider.owl-theme .owl-nav [class*="owl-"] {
  padding: 0;
  margin: 0;
  background: rgba(35, 35, 35, 0.3);
  font-size: 26px;
  display: inline-block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}
.portfolio-slider.owl-theme .owl-nav [class*="owl-"]:hover {
  background: rgba(35, 35, 35, 0.75);
}
.portfolio-slider.owl-carousel .owl-controls .owl-nav .owl-prev {
  left: 0;
}
.portfolio-slider.owl-carousel .owl-controls .owl-nav .owl-next {
  right: 0;
}
@media all and (max-width: 768px) {
  .portfolio-button-row {
    margin-top: 12px;
  }
  .related-images img {
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   18. Blog
   ========================================================================== */
.blog-posts.masonry {
  margin: 0 -15px;
}
.blog-posts.masonry .blog-grid-sizer {
  width: 25%;
}
.blog-posts.masonry .blog-post {
  width: 25%;
  position: relative;
  padding: 15px;
}
.blog-posts.masonry .blog-post.image-left {
  width: 50%;
}
.blog-posts.masonry .blog-post.image-right {
  width: 50%;
}
.blog-posts.masonry .blog-post .inner {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.blog-posts.masonry .blog-post .image {
  width: 50%;
  height: 120px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}
.blog-posts.masonry .blog-post .image:hover {
  opacity: 0.75;
}
.blog-posts.masonry .blog-post.image-left .image {
  float: left;
}
.blog-posts.masonry .blog-post.image-right .image {
  float: right;
}
.blog-posts.masonry .blog-post.image-top .image {
  width: 100%;
  height: 306px;
}
.blog-posts.masonry .blog-post .content {
  background: #fff;
  padding: 36px 24px;
  position: relative;
  height: 120px;
  border-radius: 10px;
}
.blog-posts.masonry .blog-post.image-left .content {
  margin-left: 50%;
}
.blog-posts.masonry .blog-post.image-right .content {
  margin-right: 50%;
}
.blog-posts.masonry .blog-post a {
  color: #232323;
}
.blog-posts.masonry .blog-post a:hover {
  text-decoration: none;
  opacity: 0.75;
}
.blog-posts.masonry .blog-post .date {
  color: #777;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 6px;
  display: inline-block;
}
.blog-posts.masonry .blog-post h4 {
  font-weight: 700;
  margin: 0;
}
.blog-posts.masonry .blog-post footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding-left: 28px;
  line-height: 50px;
  height: 50px;
}
.blog-posts.masonry .blog-post footer .comments-link {
  height: 50px;
  display: inline-block;
}
.blog-posts.masonry .blog-post footer .share-link {
  float: right;
  border-left: 1px solid #e8e8e8;
}
.blog-posts.masonry .blog-post footer .share-link a {
  padding: 0 18px;
  height: 50px;
  display: inline-block;
  color: #777;
}
.blog-load-more {
  text-align: center;
  margin-top: 48px;
}
@media all and (max-width: 1024px) {
  .blog-posts.masonry .blog-grid-sizer {
    width: 50%;
  }
  .blog-posts.masonry .blog-post {
    width: 50%;
  }
  .blog-posts.masonry .blog-post.image-left {
    width: 50%;
  }
  .blog-posts.masonry .blog-post.image-right {
    width: 50%;
  }
}
@media all and (max-width: 768px) {
  .blog-posts.masonry .blog-grid-sizer {
    width: 100%;
  }
  .blog-posts.masonry .blog-post {
    width: 100%;
  }
  .blog-posts.masonry .blog-post.image-left {
    width: 100%;
  }
  .blog-posts.masonry .blog-post.image-right {
    width: 100%;
  }
  .blog-posts.masonry .blog-post .image {
    width: 100%;
    height: 306px;
  }
  .blog-posts.masonry .blog-post.image-left .image {
    float: none;
  }
  .blog-posts.masonry .blog-post.image-right .image {
    float: none;
  }
  .blog-posts.masonry .blog-post.image-left .content {
    margin-left: 0;
  }
  .blog-posts.masonry .blog-post.image-right .content {
    margin-right: 0;
  }
}
/* Single Post
   ========================================================================== */
.single-blog-post .blog-header .content {
  background: #fff;
  padding: 40px;
  position: relative;
  height: 390px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  float: left;
  width: 33.33%;
}
.single-blog-post .blog-header .image {
  width: 66.66%;
  height: 390px;
  float: right;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.single-blog-post .blog-header .content .date {
  color: #7c4dff;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 12px;
  display: inline-block;
  font-weight: 500;
}
.single-blog-post .blog-header .content h4 {
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 26px;
}
.single-blog-post .blog-header .content .meta {
  color: #666;
  font-size: 13px;
  line-height: 26px;
  text-transform: uppercase;
}
.single-blog-post .blog-header .content .meta a {
  color: #666;
}
.single-blog-post .blog-header .content .meta a:hover {
  text-decoration: none;
}
.single-blog-post .blog-header .content .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 40px;
  padding-bottom: 24px;
}
.single-blog-post .blog-details {
  float: left;
  width: 33.33%;
  padding-right: 52px;
}
.single-blog-post .blog-details .section {
  padding: 36px 0;
  border-bottom: 1px dashed #232323;
}
.single-blog-post .blog-details .section:last-of-type {
  border-bottom: none;
}
.single-blog-post .blog-details h5 {
  margin-bottom: 0;
}
.single-blog-post .blog-details .author {
  margin-top: 24px;
}
.single-blog-post .blog-details .author .image {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  margin-bottom: 18px;
}
.single-blog-post .blog-details .author .title {
  font-size: 13px;
  line-height: 24px;
  font-weight: 500;
  color: #232323;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}
.single-blog-post .blog-details .social-icons {
  margin-top: 24px;
}
.single-blog-post .blog-details .tags {
  margin-top: 6px;
}
.single-blog-post .blog-details .tags a {
  color: #666;
}
.single-blog-post .blog-details .tags a:hover {
  color: #7c4dff;
  text-decoration: none;
}
.single-blog-post .blog-details .tags span {
  margin: 0 10px;
}
.single-blog-post .blog-post {
  float: right;
  width: 66.66%;
}
.single-blog-post .blog-post .blog-post-content {
  background: #fff;
  padding: 48px 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.single-blog-post .blog-post .blog-post-content p:last-of-type {
  margin-bottom: 0;
}
@media all and (max-width: 1024px) {
  .single-blog-post .blog-header .content {
    height: auto;
    float: none;
    width: 100%;
  }
  .single-blog-post .blog-header .image {
    width: 100%;
    float: none;
  }
  .single-blog-post .blog-header .content .footer {
    position: static;
    padding: 0;
  }
  .single-blog-post .blog-details,
  .single-blog-post .blog-post {
    float: none;
    width: 100%;
  }
}
/* Comments
   ========================================================================== */
.blog-post-comments {
  margin-top: 64px;
}
.blog-post-comments > h4 {
  margin-bottom: 48px;
}
.comment {
  margin-bottom: 50px;
}
.comment:last-of-type {
  margin-bottom: 0;
}
.comment .comment {
  margin-left: 58px;
  margin-top: 50px;
}
.comment .inner {
  background: #fff;
  padding: 30px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  position: relative;
}
.comment .inner .image {
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.comment .inner .content {
  margin-left: 130px;
}
.comment .inner .content h5 {
  margin-bottom: 6px;
}
.comment .inner .content p {
  margin-bottom: 6px;
}
.comment .inner .content .meta {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
  color: #232323;
  letter-spacing: 1px;
}
.comment .reply {
  position: absolute;
  top: 30px;
  right: 32px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  color: #232323;
}
.comment .reply i {
  color: #7c4dff;
  margin-left: 6px;
}
.comment .reply:hover {
  text-decoration: none;
}
.leave-comment {
  margin-top: 65px;
}
.leave-comment > h4 {
  margin-bottom: 48px;
}
.leave-comment .inner {
  background: #fff;
  padding: 38px 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.leave-comment .inner label {
  color: #232323;
}

/* ==========================================================================
   19. Error Page
   ========================================================================== */
.error-page {
  text-align: center;
  padding: 72px 0;
}
.error-page .error {
  font-size: 250px;
  line-height: 250px;
  font-weight: 700;
  margin-bottom: 12px;
}
.error-page .details {
  font-size: 16px;
  line-height: 32px;
  color: #232323;
  margin-bottom: 36px;
}
@media all and (max-width: 768px) {
  .error-page .error {
    font-size: 120px;
    line-height: 120px;
  }
  .brucelee-img {
    height: 70vh !important;
    width: 70vh !important;
  }
}
#section1 h1,
.header .bottom .title a,
.main-nav ul > li.active a {
  color: #ffffff;

  /*text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1),
    1px 1px 1px rgba(0, 0, 0, 0.5);*/
  text-shadow: 1px 3px 0 #2d2d2d, 1px 10px 5px #000000;
}
#profilesvgimg {
  height: auto;
  position: absolute;
  top: -100px;
  width: 90%;
  right: 0;
  z-index: -1111;
}
#profilesvgimg path {
  fill: #000;
}
#profilesvgimg:hover path {
  fill: #000;
}

.skillsGrid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(50px, 1fr)) [auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-left: -40px;
}
.skillsGrid li {
  padding: 10px;
  border-radius: 10px;
  width: 80px;

  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-box-shadow: -1px -1px 1px rgb(255 255 255 / 10%),
    1px 1px 1px rgb(0 0 0 / 50%);

  list-style: none;
  text-align: center;
  height: 90px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;

  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  cursor: pointer;
}
.skillsGrid li img {
  width: 35px;
  height: 35px;
}
.skillsGrid li p {
  margin-top: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}
.skillsGrid li a {
  color: #3d3d44;
}
.skillsGrid li:hover {
  transform: scale(3);
  background: #fff;
  z-index: 111111111111;
  margin-top: -50px;
}
.skillsGrid li:hover p {
  color: #c0392b;
}

.skillsGrid.projects li img {
  width: 27px !important;
  height: auto !important;
}
.skillsGrid.projects li p {
  line-height: 16px;
}
.skillsGrid.indexp li {
  width: 160px;
  height: 136px;
}
.skillsGrid.indexp {
  -ms-grid-columns: (minmax(100px, 1fr)) [auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.skillsGrid.indexp li img {
  width: 100% !important;
  height: 85px !important;
}
.skillsGrid.indexp li p {
  line-height: 16px;
}

.skillsGrid li.w-big{
    width: 200px;
    height: 100px;
    line-height: 75px;
}
.skillsGrid li.w-big a{
  color: white;
}
.skillsGrid li.w-big:hover{
  background: transparent;
}
.animcircle {
  /* -webkit-animation: bounce-in-top 1.1s infinite;
  animation: bounce-in-top 1.1s infinite; */

  -webkit-animation: bounce-top 0.9s infinite;
  animation: bounce-top 0.9s infinite;
}
@media all and (max-width: 768px) {
  #profilesvgimg {
    width: 100%;
    top: -245px;
  }
  #section1 h1 {
    width: 100%;
  }
  .skillsGrid.indexp li {
    width: 112px;
    height: 120px;
  }
  .skillsGrid.indexp li img {
    width: 100% !important;
    height: 56px !important;
  }
  .circle-progress-wrapper {
    text-align: center;
  }
}
.h2orbit {
  position: relative;
  color: #fff;

  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1),
    1px 1px 1px rgba(0, 0, 0, 0.5);
}
#orbit {
  position: absolute;
  left: -32px;
  top: -72px;
}

@keyframes typingE {
  20.1%,
  80% {
    fill: transparent;
  }
  20%,
  80.1% {
    fill: #fff;
  }
}
@keyframes typingD {
  30.1%,
  70% {
    fill: transparent;
  }
  30%,
  70.1% {
    fill: #fff;
  }
}
@keyframes typingO {
  40.1%,
  60% {
    fill: transparent;
  }
  40%,
  60.1% {
    fill: #fff;
  }
}

.icon-develop .gear-b {
  animation: rotate-reverse 6s;
}
.icon-develop .gear-s {
  animation: rotate 12s linear infinite;
}
.icon-develop #XMLID_87_,
.icon-develop #XMLID_85_,
.icon-develop #XMLID_83_ {
  animation: twinkle 3s ease-in-out infinite;
}
.icon-develop #XMLID_85_ {
  animation-delay: 0.4s;
}
.icon-develop #XMLID_83_ {
  animation-delay: 0.6s;
}

.icon-develop .line-m {
  animation-delay: 0.3s;
}
.icon-develop .line-b {
  animation-delay: 0.6s;
}
.icon-develop .code-letter_o {
  animation: typingO 3s linear infinite;
}
.icon-develop .code-letter_d {
  animation: typingD 3s linear infinite;
}
.icon-develop .code-letter_e {
  animation: typingE 3s linear infinite;
}

.icon-develop .hover {
  animation-play-state: running !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.icon-develop .line-t,
.icon-develop .line-m,
.icon-develop .line-b {
  /* animation: shrink 1.8s ease-in-out infinite; */
}

.star {
  animation: twinkle 4s ease-in-out infinite;
}
.star-2 {
  animation-delay: 1s;
}
@keyframes twinkle {
  0%,
  50%,
  100% {
    transform: scale(1);
  }
  25%,
  75% {
    transform: scale(1.6);
  }
}
@keyframes twinkle2 {
  0%,
  50%,
  100% {
    transform: scale(1);
  }
  25%,
  75% {
    transform: scale(1.07);
  }
}
@keyframes twinkle3 {
  0%,
  50%,
  100% {
    transform: scale(1);
  }
  25%,
  75% {
    transform: scale(1.14);
  }
}
@keyframes bubble-t {
  26%,
  80% {
    transform: scale(0);
  }
  20%,
  86% {
    transform: scale(1);
  }
}
@keyframes bubble-m {
  36%,
  70% {
    transform: scale(0);
  }
  30%,
  76% {
    transform: scale(1);
  }
}
@keyframes bubble-b {
  46%,
  60% {
    transform: scale(0);
  }
  40%,
  66% {
    transform: scale(1);
  }
}
@keyframes bounce {
  50% {
    transform: rotate(-6deg);
  }
}
@keyframes bounce2 {
  50% {
    transform: rotate(6deg);
  }
}
@keyframes bounce3 {
  50% {
    transform: rotate(3deg);
  }
}
@keyframes bounceBF {
  0%,
  100% {
    transform: rotate(1.6deg);
  }
  50% {
    transform: rotate(-1.6deg);
  }
}
@keyframes bounceBFt2 {
  0%,
  100% {
    transform: rotate(4.6deg);
  }
  50% {
    transform: rotate(-4.6deg);
  }
}
@keyframes shrink {
  50% {
    transform: scaleX(0.3);
  }
}
@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
@keyframes rotate-reverse {
  to {
    transform: rotate(-1turn);
  }
}

@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
circle {
  fill: #f1c40f;
  stroke: #f1c40f;
  stroke-width: 2px;
}

/** KEYFRAME **/
@keyframes wave-flag-front {
  from {
    width: 90px;
  }
  to {
    width: 160px;
  }
}

@keyframes wave-flag-back {
  from {
    left: 42px;
    width: 140px;
  }
  to {
    left: 112px;
    width: 70px;
  }
}

/** BASIC **/
.center {
  height: 230px;
  width: 245px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -115px;
  margin-left: -122px;
}

/** FLAG **/
.flag-container {
  height: 64px;
  position: relative;
}

.pole {
  background: brown;
  display: block;
  height: 322px;
  position: relative;
  transform: skew(9deg, 0deg);
  width: 10px;
}

.knob {
  background: brown;
  border-radius: 50%;
  display: block;
  height: 18px;
  left: -36px;
  position: absolute;
  top: -17px;
  width: 18px;
}

.flag {
  background: rgb(242, 242, 242);
  display: block;
  position: absolute;
  transform: skew(10deg, 0deg);
  margin-left: -5px;
}

.orange {
  height: 33%;
  width: 100%;
  background: orange;
}
.white {
  height: 33%;
  width: 100%;
  background: white;
}
.white .bluecircle::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  background: blue;
  border-radius: 50%;
  top: 17%;
  left: 21%;
}
.white .bluecircle {
  background: white;
  border: 2px solid blue;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 80%;
  position: absolute;
  top: 38%;
}
.green {
  height: 33%;
  width: 100%;
  background: green;
}
.back .orange,
.back .white,
.back .green {
  opacity: 0.6;
}
.flag.front {
  left: -17px;
  height: 80px;
  overflow: hidden;
  top: 0;
  width: 90px;
  z-index: 10;
  animation: wave-flag-front 0.7s ease-in-out infinite alternate;
}
.flag.front .circle {
  background: rgb(250, 145, 30);
  border-radius: 50%;
  display: block;
  height: 60px;
  left: 55px;
  position: absolute;
  top: 30px;
  transform: skew(-20deg, 0deg);
  width: 60px;
  z-index: 100;
}
.flag.back {
  background: rgb(224, 224, 224);
  left: 42px;
  height: 77px;
  top: 24px;
  width: 140px;
  z-index: 5;
  animation: wave-flag-back 0.7s ease-in-out infinite alternate;
}

.flag.back .shadow {
  border-color: rgb(204, 204, 204) transparent transparent transparent;
  border-style: solid;
  border-width: 35px 45px 0 0;
  bottom: 0;
  height: 0;
  position: absolute;
  width: 0;
  z-index: 15;
}
.flagbase {
  background: brown;
  border: 1px solid #0000;
  width: 182px;
  text-align: center;
  font-size: 15px;
}

.brucelee-img {
  background: white;
  clip-path: polygon(
    43.795% 72.321%,
    45.491% 72.433%,
    53.929% 74.531%,
    55.714% 75.2%,
    56.964% 75.87%,
    57.567% 76.428%,
    58.036% 77.12%,
    58.504% 77.41%,
    58.906% 77.544%,
    59.665% 78.883%,
    59.888% 79.955%,
    59.71% 80.803%,
    59.509% 81.651%,
    59.42% 82.276%,
    59.777% 82.946%,
    60.268% 83.66%,
    60.29% 84.33%,
    59.978% 84.933%,
    59.263% 85.223%,
    58.973% 84.933%,
    58.862% 84.218%,
    58.393% 83.705%,
    57.701% 82.834%,
    57.567% 81.964%,
    57.076% 81.049%,
    56.272% 80.066%,
    55.156% 79.218%,
    53.705% 78.303%,
    52.411% 77.633%,
    51.049% 77.165%,
    49.487% 76.741%,
    48.326% 76.562%,
    48.013% 76.718%,
    47.835% 77.209%,
    47.79% 77.745%,
    47.902% 77.901%,
    48.393% 78.08%,
    50.112% 78.281%,
    52.054% 78.638%,
    53.75% 79.151%,
    55.067% 79.575%,
    56.049% 80.178%,
    56.674% 80.625%,
    57.545% 81.897%,
    57.567% 82.388%,
    57.188% 82.7%,
    56.964% 83.504%,
    56.987% 84.151%,
    56.652% 84.866%,
    56.027% 85.446%,
    55.491% 85.803%,
    55.223% 85.401%,
    54.576% 84.553%,
    53.638% 83.883%,
    53.147% 83.683%,
    52.254% 83.482%,
    51.384% 82.879%,
    50.848% 82.7%,
    49.955% 81.852%,
    49.129% 81.517%,
    48.237% 81.495%,
    47.589% 81.161%,
    47.031% 80.848%,
    46.183% 80.848%,
    45.871% 81.004%,
    45.826% 81.317%,
    46.25% 82.031%,
    46.719% 82.723%,
    47.612% 83.058%,
    48.504% 83.415%,
    50.067% 83.638%,
    51.205% 83.906%,
    52.522% 84.33%,
    53.705% 84.732%,
    54.442% 85.201%,
    55.156% 85.937%,
    55.625% 86.852%,
    55.603% 87.455%,
    55.402% 88.125%,
    55.246% 88.817%,
    54.665% 89.799%,
    54.107% 90.402%,
    53.571% 91.294%,
    53.147% 91.83%,
    52.879% 91.83%,
    52.768% 91.585%,
    52.768% 91.094%,
    53.125% 90.602%,
    53.415% 90.446%,
    53.594% 90.044%,
    53.304% 89.62%,
    52.589% 89.286%,
    52.121% 89.197%,
    51.83% 89.04%,
    51.406% 88.527%,
    50.692% 88.125%,
    49.888% 87.835%,
    49.33% 87.433%,
    48.17% 86.339%,
    47.433% 86.027%,
    46.25% 86.027%,
    45.402% 86.406%,
    44.576% 86.719%,
    43.973% 86.92%,
    43.75% 87.277%,
    43.75% 87.679%,
    44.174% 88.058%,
    45.223% 88.393%,
    47.589% 88.884%,
    49.442% 89.308%,
    51.094% 89.777%,
    51.674% 90.089%,
    52.121% 90.647%,
    52.299% 91.272%,
    52.232% 92.165%,
    51.897% 93.08%,
    51.362% 93.839%,
    50.737% 94.442%,
    50.313% 94.643%,
    50% 94.576%,
    49.777% 94.018%,
    49.241% 93.616%,
    48.482% 93.594%,
    47.857% 93.639%,
    46.942% 93.103%,
    45.379% 92.478%,
    42.946% 92.032%,
    41.942% 91.429%,
    41.25% 91.005%,
    40.491% 90.135%,
    39.71% 88.594%,
    39.308% 87.523%,
    39.375% 86.094%,
    40.134% 85.135%,
    40.647% 84.51%,
    40.379% 83.438%,
    39.911% 82.389%,
    39.911% 80.804%,
    40.112% 80.068%,
    41.183% 80.001%,
    41.317% 79.643%,
    41.183% 79.018%,
    40.67% 77.813%,
    40.7% 76.499%,
    49.58% 61.5%,
    49.621% 60.983%,
    50.089% 60.291%,
    50.67% 59.42%,
    51.183% 58.617%,
    52.098% 57.768%,
    53.013% 56.942%,
    53.683% 56.563%,
    54.152% 56.496%,
    54.821% 55.893%,
    55.379% 55.447%,
    55.759% 54.956%,
    55.938% 54.666%,
    55.491% 54.644%,
    54.799% 54.867%,
    53.906% 55.269%,
    52.991% 55.782%,
    52.076% 56.563%,
    51.116% 57.501%,
    50.357% 58.148%,
    49.375% 58.885%,
    48.46% 59.666%,
    48.036% 59.845%,
    47.679% 59.688%,
    47.344% 59.153%,
    47.277% 58.528%,
    47.433% 57.791%,
    48.058% 57.077%,
    48.839% 56.452%,
    49.866% 55.827%,
    51.138% 54.889%,
    52.143% 54.22%,
    52.924% 53.795%,
    53.482% 53.394%,
    54.464% 53.305%,
    55.201% 53.439%,
    55.781% 53.751%,
    56.205% 54.064%,
    56.384% 54.309%,
    57.143% 54.331%,
    57.9% 54.359%,
    49.931% 45.159%,
    47.545% 45.38%,
    47.121% 44.598%,
    46.362% 43.393%,
    45.804% 42.656%,
    45.446% 42.322%,
    45.446% 42.009%,
    46.205% 42.031%,
    47.076% 42.366%,
    47.522% 42.679%,
    47.991% 42.679%,
    48.281% 42.456%,
    48.371% 41.875%,
    48.237% 41.339%,
    48.147% 41.072%,
    47.857% 41.206%,
    47.522% 41.451%,
    46.875% 41.585%,
    46.272% 41.272%,
    45.871% 40.893%,
    45.625% 40.536%,
    45.558% 39.844%,
    45.357% 39.331%,
    44.933% 39.13%,
    44.531% 39.107%,
    44.241% 38.661%,
    44.196% 38.014%,
    44.42% 37.679%,
    44.799% 37.612%,
    45.402% 37.835%,
    46.674% 38.014%,
    47.21% 37.79%,
    47.344% 37.411%,
    47.478% 37.054%,
    47.277% 36.697%,
    46.406% 36.54%,
    45.625% 36.072%,
    44.844% 35.893%,
    44.688% 35.647%,
    44.688% 35.223%,
    45% 34.933%,
    45.223% 35.112%,
    45.826% 35.402%,
    46.116% 35.38%,
    46.25% 35.223%,
    46.429% 34.956%,
    46.696% 34.911%,
    47.388% 34.911%,
    48.147% 35%,
    48.571% 35.023%,
    48.817% 34.933%,
    49.353% 34.933%,
    49.598% 35.089%,
    49.888% 35.268%,
    50.223% 35.29%,
    50.58% 35.313%,
    50.692% 35.201%,
    50.714% 34.978%,
    50.58% 34.822%,
    50.424% 34.777%,
    50.29% 34.598%,
    49.978% 34.554%,
    49.687% 34.554%,
    49.487% 34.621%,
    49.308% 34.71%,
    48.571% 34.732%,
    48.192% 34.598%,
    47.879% 34.286%,
    47.545% 34.04%,
    47.187% 34.04%,
    46.763% 34.04%,
    46.451% 34.13%,
    46.183% 34.308%,
    45.737% 34.308%,
    45.357% 33.973%,
    44.933% 33.929%,
    44.687% 33.661%,
    44.576% 33.237%,
    44.732% 32.768%,
    45.022% 32.59%,
    45.112% 32.121%,
    45.357% 31.987%,
    45.67% 31.786%,
    45.781% 31.92%,
    45.804% 32.121%,
    45.714% 32.433%,
    45.647% 32.768%,
    45.737% 32.991%,
    46.049% 33.237%,
    46.429% 33.326%,
    46.741% 33.282%,
    46.83% 32.947%,
    46.875% 32.634%,
    46.696% 32.255%,
    46.652% 31.92%,
    46.295% 31.808%,
    46.339% 31.518%,
    46.629% 31.295%,
    46.786% 31.139%,
    46.674% 30.871%,
    46.362% 30.759%,
    46.094% 30.648%,
    45.938% 30.045%,
    45.692% 29.799%,
    45.692% 28.907%,
    45.759% 28.661%,
    45.759% 28.058%,
    45.692% 26.853%,
    45.826% 26.607%,
    45.871% 24.643%,
    45.67% 24.398%,
    45.737% 22.634%,
    45.982% 22.21%,
    46.295% 21.652%,
    46.674% 21.474%,
    46.92% 21.25%,
    47.165% 21.049%,
    47.366% 21.317%,
    47.679% 21.451%,
    47.924% 21.451%,
    48.393% 21.116%,
    48.728% 20.96%,
    49.129% 20.982%,
    49.286% 21.094%,
    48.996% 21.384%,
    48.996% 21.674%,
    48.996% 21.987%,
    48.906% 22.166%,
    48.527% 22.344%,
    48.259% 22.523%,
    48.527% 22.679%,
    48.839% 22.791%,
    49.33% 22.924%,
    49.42% 23.125%,
    49.308% 23.527%,
    49.174% 23.728%,
    49.063% 23.862%,
    49.085% 24.041%,
    49.353% 24.241%,
    49.621% 24.398%,
    49.911% 24.398%,
    50.112% 24.107%,
    50.357% 24.286%,
    50.558% 24.353%,
    50.938% 24.286%,
    51.027% 24.041%,
    51.138% 23.639%,
    51.696% 23.572%,
    51.138% 23.304%,
    50.67% 23.17%,
    50.67% 23.058%,
    51.049% 23.036%,
    51.652% 23.014%,
    51.763% 22.679%,
    51.987% 22.634%,
    52.031% 22.366%,
    52.187% 22.099%,
    52.411% 21.875%,
    52.723% 21.92%,
    53.125% 22.21%,
    53.304% 22.5%,
    53.75% 22.545%,
    54.085% 22.567%,
    54.219% 22.277%,
    54.353% 22.054%,
    54.353% 21.697%,
    53.996% 21.518%,
    53.705% 21.407%,
    53.304% 21.34%,
    52.746% 21.295%,
    52.21% 21.161%,
    52.232% 20.96%,
    51.719% 20.96%,
    51.362% 20.982%,
    51.205% 21.005%,
    50.893% 20.96%,
    50.893% 20.648%,
    51.094% 20.424%,
    51.362% 20.29%,
    52.254% 20.246%,
    52.567% 20.067%,
    53.036% 20.023%,
    54.196% 20.023%,
    54.42% 19.822%,
    55.112% 19.621%,
    55.201% 19.799%,
    55.491% 19.688%,
    55.67% 19.576%,
    55.67% 19.308%,
    55.67% 19.018%,
    55.29% 18.84%,
    54.978% 18.639%,
    54.643% 18.639%,
    54.375% 18.683%,
    54.33% 18.929%,
    54.464% 19.219%,
    55.1% 19.61%,
    54.364% 19.811%,
    54.107% 19.621%,
    53.761% 19.599%,
    53.259% 19.599%,
    53.047% 19.688%,
    52.991% 19.833%,
    52.969% 20.012%,
    52.522% 20.023%,
    52.556% 19.822%,
    52.623% 19.543%,
    52.746% 19.453%,
    52.991% 19.342%,
    53.237% 19.241%,
    53.326% 19.108%,
    52.969% 18.962%,
    52.533% 18.873%,
    52.299% 18.806%,
    52.065% 18.683%,
    51.741% 18.974%,
    51.484% 18.985%,
    51.172% 18.717%,
    50.794% 19.07%,
    50.35% 19.314%,
    49.64% 19.441%,
    48.835% 19.409%,
    48.077% 19.346%,
    47.493% 19.299%,
    47.335% 18.999%,
    47.335% 18.573%,
    46.846% 18.478%,
    46.656% 18.746%,
    46.672% 19.614%,
    46.767% 20.435%,
    46.467% 20.782%,
    46.041% 20.893%,
    45.662% 20.609%,
    45.662% 20.056%,
    45.331% 19.867%,
    44.826% 19.851%,
    44.51% 19.662%,
    44.174% 18.929%,
    43.46% 18.349%,
    43.192% 18.058%,
    42.991% 17.634%,
    43.281% 17.3%,
    43.393% 16.965%,
    43.259% 16.518%,
    42.969% 16.384%,
    43.036% 15.96%,
    43.571% 15.581%,
    44.42% 15.469%,
    44.978% 15.335%,
    45.357% 15.581%,
    45.692% 15.648%,
    46.094% 15.179%,
    46.629% 14.777%,
    46.83% 14.666%,
    47.634% 14.643%,
    47.835% 14.375%,
    48.058% 14.353%,
    48.058% 14.844%,
    48.17% 14.911%,
    48.75% 14.755%,
    49.308% 14.353%,
    50.223% 14.242%,
    51.049% 13.996%,
    52.545% 13.215%,
    53.17% 13.148%,
    53.594% 12.679%,
    54.174% 12.255%,
    54.576% 12.255%,
    54.621% 12.3%,
    54.531% 12.545%,
    54.107% 12.88%,
    53.594% 13.125%,
    53.594% 13.326%,
    53.906% 13.416%,
    54.263% 13.393%,
    54.643% 13.081%,
    55% 12.947%,
    55.201% 12.679%,
    55.759% 12.657%,
    56.161% 12.5%,
    56.563% 12.277%,
    56.808% 12.768%,
    57.054% 15.67%,
    57.589% 19.822%,
    57.612% 22.009%,
    57.411% 22.813%,
    57.188% 23.393%,
    57.188% 23.974%,
    56.897% 24.8%,
    56.964% 24.956%,
    57.277% 25%,
    57.522% 24.867%,
    57.723% 24.465%,
    58.103% 22.768%,
    58.259% 22.099%,
    59.196% 19.867%,
    59.464% 19.175%,
    59.821% 18.527%,
    60.067% 18.393%,
    60.268% 18.371%,
    60.357% 18.527%,
    60.045% 19.331%,
    59.732% 21.228%,
    59.308% 22.724%,
    58.951% 24.264%,
    58.371% 25.425%,
    58.013% 26.027%,
    57.589% 26.384%,
    57.143% 26.541%,
    56.674% 26.742%,
    56.049% 29.286%,
    55.826% 30.759%,
    55.603% 32.3%,
    55.268% 32.969%,
    54.665% 33.974%,
    53.862% 35.134%,
    53.237% 36.139%,
    52.924% 36.875%,
    52.679% 37.969%,
    52.411% 40.291%,
    51.719% 42.166%,
    50.982% 44.554%,
    50.737% 44.978%,
    50.246% 45.246%,
    49.93% 45.16%,
    57.9% 54.358%,
    59.375% 55.804%,
    62.366% 60.045%,
    64.129% 62.791%,
    69.688% 64.487%,
    74.085% 65.737%,
    75.737% 66.719%,
    76.563% 67.456%,
    77.478% 68.683%,
    78.036% 70.268%,
    78.348% 71.808%,
    78.304% 75.268%,
    77.969% 76.786%,
    77.634% 77.902%,
    77.254% 78.549%,
    76.853% 78.996%,
    76.518% 78.996%,
    76.406% 78.773%,
    76.004% 78.148%,
    74.911% 77.567%,
    74.688% 76.987%,
    74.33% 76.496%,
    73.929% 76.049%,
    73.348% 76.004%,
    72.679% 76.161%,
    72.433% 76.228%,
    70.536% 74.487%,
    68.772% 73.058%,
    67.054% 72.031%,
    66.027% 71.406%,
    65.179% 71.183%,
    65.156% 70.871%,
    65.469% 70.759%,
    65.714% 70.58%,
    65.826% 69.955%,
    65.536% 69.665%,
    64.754% 69.933%,
    63.75% 70.603%,
    63.549% 70.514%,
    63.304% 70.291%,
    62.969% 69.554%,
    63.036% 68.862%,
    62.969% 68.416%,
    62.277% 67.255%,
    61.875% 66.496%,
    61.629% 65.759%,
    61.629% 65.38%,
    61.54% 64.956%,
    61.161% 64.844%,
    60.759% 64.621%,
    60.357% 64.755%,
    60.089% 64.956%,
    59.487% 64.621%,
    59.107% 64.688%,
    58.661% 65.09%,
    58.036% 65.335%,
    57.612% 65.938%,
    57.098% 66.541%,
    56.629% 66.898%,
    56.138% 67.054%,
    55.759% 66.875%,
    55.848% 66.496%,
    56.161% 66.25%,
    56.183% 65.938%,
    55.804% 65.648%,
    55.469% 65.179%,
    55.045% 64.576%,
    54.643% 64.018%,
    54.665% 63.326%,
    54.888% 63.081%,
    55.58% 62.701%,
    57.076% 61.831%,
    58.772% 61.072%,
    59.487% 60.715%,
    59.978% 60.357%,
    60.201% 59.978%,
    60.134% 59.666%,
    59.665% 59.532%,
    59.129% 59.777%,
    58.393% 60.357%,
    56.518% 61.607%,
    55.268% 62.433%,
    53.705% 63.438%,
    53.17% 63.639%,
    52.79% 63.55%,
    52.5% 63.081%,
    52.009% 62.121%,
    52.098% 61.652%,
    52.411% 61.184%,
    53.125% 60.648%,
    55.067% 59.13%,
    55.982% 58.728%,
    56.741% 58.728%,
    57.522% 58.126%,
    58.125% 57.612%,
    58.415% 57.233%,
    58.415% 57.032%,
    58.281% 56.965%,
    57.902% 57.143%,
    56.741% 57.925%,
    56.094% 58.036%,
    55% 58.929%,
    52.991% 60.09%,
    51.228% 61.206%,
    49.955% 61.809%,
    49.581% 61.498%,
    40.701% 76.499%,
    41.496% 75.804%,
    42.299% 75.224%,
    42.545% 74.353%,
    42.946% 73.237%,
    43.46% 72.523%
  );
  height: 100vh;
  position: relative;
  width: 100vh;
}