@import url(../font-awesome.css);
@import url(../common.css);
@import url(../mCustomScrollbar.css);

body {
  font: normal 14px "arial", "Helvertica", sans-serif;
  background: #f2f2f2;
  padding: 0 16px;
  height: 100vh;
}

/* Main Menu for Medium Large */
.mainMenu {
  display: block;
  background: #fff;
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
  height: 48px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  border-bottom: 2px solid #A30000;
}

@media (min-width: 320px) and (max-width: 767px) {
  .mainMenu {
    display: none;
  }
}
/* Main Menu for Medium Large and Medium */

/* Logo */
.logoBlock img {width: 300px; margin: 0 auto; display: block;}
.container {max-width: 1024px; margin: 0 auto; background: #fff; padding: 0 16px; border: 1px solid #A30000;}

/* Menus */
.listItemBlock {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.listItemBlock .listItem {
  display: inline-block;
  width: 19%;
}

.listItemBlock .listItem a {
  padding: 16px 0;
  display: block;
  position: relative;
  color: #A30000;
}

.listItemBlock .listItem a:before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  transition: width 0.3s ease-in;
  bottom: 0;
  left: 0;
}

@media (min-width: 320px) and (max-width: 767px) {
  .listItemBlock .listItem {
    width: 24%;
  }

  .listItemBlock .listItem a:before {
    top: 0;
    bottom: inherit;
  }
}

.listItemBlock .listItem a.active:before {
  background: #A30000;
  width: 100%;
}

.listItemBlock .listItem.about a.active:before {
  background: transparent;
}
.listItemBlock .listItem.about img {
  width: 90px;
  position: relative;
  top: 20px;
}

.listItemBlock .listItem.about .logoLink {
  border: 2px solid #A30000;
  border-radius: 50%;
  width: 92px;
  height: 92px;
  padding: 0;
  display: block;
  margin: 0 auto;
  background: #fff;
  position: relative;
  top: -14px;
  box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.3);
}

/* Mobile Menu */
.mobMenu {
  display: none;
}

@media (min-width: 320px) and (max-width: 767px) {
  .mobMenu {
    display: block;
  }
}

.mobMenu .logoBlock {
  background: #fff;
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  z-index: 5;
  padding: 8px 0;
}
.mobMenu .menuBlock {
  background: #fff;
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
  height: 48px;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  z-index: 5;
}

/* Mobile Menu Ends */

/* Main Container */
  .container > section {
    padding-top: 100px;
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .container > section {
      padding-top: 120px;
    }
  }
/* Main Container Ends */

.mainTitle {
  text-align: center;
  font-size: 32px;
  color: #A30000;
  position: relative;
  display: block;
  margin-bottom: 50px;
}

@media (min-width: 320px) and (max-width: 767px) {
  .mainTitle {
    font-size: 24px;
    margin-bottom: 30px;
  }
}

.mainTitle span {
  background: #FFF;
  padding: 0 10px;
  position: relative;
}

.mainTitle:before {
  content: '';
  height: 2px;
  background: #A30000;
  top: 50%;
  margin-top: -1px;
  left: 0;
  width: 100%;
  position: absolute;
}

/* Skills */
  /* Dot Line Graph */
  .dotLineBlock {
    border-bottom: 1px solid #000;
    position: relative;
    width: 665px;
    margin: 0 auto;
  }
  
  .dotLineValues {
    width: 99%;
    border-left: 1px solid #000;
    max-height: 500px;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  
  .dotLineValues li {
    height: 50px;
    position: relative;
    border-top: 1px dotted #b40000;
  }
  
  .dotLineValues li:before,
  .dotLineValues li:after {
    content:"";
    position: absolute;
    height: 2px;
    margin-top: -1px;
    color: #000;
    border-top: 1px solid #000;
  }
  
  .dotLineValues li:before {
    width: 20px;
    left: -10px;
    top: 0px;
  }
  
  .dotLineValues li:after {
    width: 10px;
    left: 0;
    top: 25px;
  }

  .graphBlock {
    width: calc(100% - 30px);
    display: inline-block;
    vertical-align: bottom;
    height: 500px;
    padding-left: 30px;
  }
  
  .graphBlock ul {
    height: 100%;
  }
  
  .graphBlock li {
    width: 25px;
    display: inline-block;
    position: relative;
    height: 100%;
  }

  .graphBlock li:before {
    content: '';
    width: 2px;
    height: 100%;
    border-left: 1px dotted #b40000;
    position: absolute;
    bottom: 0;
    left: 2px;
  }

  .graphBlock li span {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25px;
    height: 100%;
    margin-bottom: -6px;
  }

  .graphBlock li span.text {
    height: auto;
    bottom: inherit;
    top: 101%;
    font-size: 9px;
    left: 50%;
    margin-left: -80%;
    width: 100%;
    display: block;
    transform: rotate(45deg);
    font-weight: bold;
  }

  .graphBlock .knownWell:before,
  .graphBlock .knownWell:after,
  .graphBlock .known:before,
  .graphBlock .known:after {
    content: '';
    position: absolute;
  }

  .graphBlock .knownWell:before,
  .graphBlock .known:before {
    border:6px solid #b40000;
    left: 0;
    border-radius: 50%;
    bottom: 0;
    margin: 0 0 -2px -3px;
  }

  .graphBlock .knownWell:after,
  .graphBlock .known:after {
    border-left: 2px solid #b40000;
    height: 100%;
    width: 100%;
    left: 0;
    margin-left: 2px;
    bottom: 0;
  }

  .graphBlock .known:before {
    border-color:rgba(190,0,0,0.5);
  }

  .graphBlock .known:after {
    border-color:rgba(190,0,0,0.5);
  }

  .infoGraph li span.knownWell {
    background: #b40000;
  }

  .infoGraph li span.known {
    background: rgba(190,0,0,0.5);
  }

  .graphBlock li.html5 .knownWell {
    height: 20%;
    bottom: 80%;
  }
  .graphBlock li.html5 .known {
    height: 10%;
    bottom: 90%;
  }
  .html5 .knownWell:after {
    transform: skewX(-30deg);
    bottom: 5px;
    height: 50px;
    left: 14.5px;
  }
  .html5 .known:after {
    transform: skewX(-30deg);
    bottom: 5px;
    height: 50px;
    left: 14.5px;
  }

  .graphBlock li.css3 .knownWell {
    bottom: 90%;
    height: 10%;
  }
  .graphBlock li.css3 .known {
    bottom: 100%;
    height: 0;
  }
  .css3 .knownWell:after {
    transform: rotate(-15.5deg);
    bottom: -96px;
    height: 108px;
    left: 14px;
  }
  .css3 .known:after {
    transform: rotate(-15.5deg);
    bottom: -96px;
    height: 108px;
    left: 14px;
  }

  .graphBlock li.photoshop .knownWell {
    bottom: 70%;
    height: 30%;
  }
  .graphBlock li.photoshop .known {
    bottom: 80%;
    height: 20%;
  }
  .photoshop .knownWell:after {
    transform: rotate(15deg);
    bottom: 0px;
    height: 104px;
    left: 14px;
  }
  .photoshop .known:after {
    transform: rotate(15deg);
    bottom: 0px;
    height: 104px;
    left: 13px;
  }

  .graphBlock li.scss .knownWell {
    bottom: 90%;
    height: 10%;
  }
  .graphBlock li.scss .known {
    bottom: 100%;
    height: 0;
  }
  .scss .knownWell:after {
    transform: rotate(-28deg);
    bottom: -40px;
    height: 50px;
    left: 12px; 
  }
  .scss .known:after {
    transform: rotate(-90deg);
    bottom: 3px;
    height: 30px;
    left: 0;
  }

  .graphBlock li.emmet .knownWell {
    bottom: 80%;
    height: 20%;
  }
  .graphBlock li.emmet .known {
    bottom: 100%;
    height: 0;
  }
  .emmet .knownWell:after {
    transform: rotate(-90deg);
    bottom: 1px;
    height: 30px;
    left: 0;
  }
  .emmet .known:after {
    transform: rotate(-90deg);
    bottom: 3px;
    height: 30px;
    left: 1px;
  }

  .graphBlock li.purecss .knownWell {
    bottom: 80%;
    height: 20%;
  }
  .graphBlock li.purecss .known {
    bottom: 100%;
    height: 0;
  }
  .purecss .known:after {
    transform: rotate(-21deg);
    bottom: -70px;
    height: 82px;
    left: 13px;
  }
  .purecss .knownWell:after {
    transform: rotate(-48deg);
    bottom: -20px;
    height: 39px;
    left: 13px;
  }

  .graphBlock li.postcss .knownWell {
    bottom: 75%;
    height: 25%;
  }
  .graphBlock li.postcss .known {
    bottom: 85%;
    height: 15%;
  }
  .postcss .known:after {
    transform: rotate(-21deg);
    bottom: -70px;
    height: 82px;
    left: 13px;
  }
  .postcss .knownWell:after {
    transform: rotate(-20deg);
    bottom: -74px;
    height: 85px;
    left: 14px;
  }

  .graphBlock li.jquery .knownWell {
    bottom: 60%;
    height: 40%;
  }
  .graphBlock li.jquery .known {
    bottom: 70%;
    height: 30%;
  }
  .jquery .known:after {
    transform: rotate(-29deg);
    bottom: -45px;
    height: 58px;
    left: 13px;
  }
  .jquery .knownWell:after {
    transform: rotate(-16deg);
    bottom: -96px;
    height: 100px;
    left: 14px;
  }

  .graphBlock li.javascript .knownWell {
    bottom: 40%;
    height: 60%;
  }
  .graphBlock li.javascript .known {
    bottom: 60%;
    height: 40%;
  }
  .javascript .known:after {
    transform: rotate(7deg);
    bottom: 0px;
    height: 205px;
    left: 13px;
  }
  .javascript .knownWell:after {
    transform: rotate(6deg);
    bottom: 0;
    height: 260px;
    left: 14px;
  }

  .graphBlock li.responsive .knownWell {
    bottom: 90%;
    height: 10%;
  }
  .graphBlock li.responsive .known {
    bottom: 100%;
    height: 0;
  }
  .responsive .known:after {
    transform: rotate(-47deg);
    bottom: -22px;
    height: 37px;
    left: 14px;
  }
  .responsive .knownWell:after {
    transform: rotate(-47deg);
    bottom: -22px;
    height: 37px;
    left: 14px;
  }

  .graphBlock li.bootstrap .knownWell {
    bottom: 85%;
    height: 15%;
  }
  .graphBlock li.bootstrap .known {
    bottom: 95%;
    height: 5%;
  }
  .bootstrap .known:after {
    transform: rotate(-22deg);
    bottom: -69px;
    height: 80px;
    left: 13px;
  }
  .bootstrap .knownWell:after {
    transform: rotate(-20deg);
    bottom: -65px;
    height: 70px;
    left: 14px;
  }

  .graphBlock li.foundation .knownWell {
    bottom: 70%;
    height: 30%;
  }
  .graphBlock li.foundation .known {
    bottom: 80%;
    height: 20%;
  }
  .foundation .known:after {
    transform: rotate(-30deg);
    bottom: -40px;
    height: 54px;
    left: 11px;
  }
  .foundation .knownWell:after {
    transform: rotate(-29deg);
    bottom: -39px;
    height: 49px;
    left: 11px;
  }

  .graphBlock li.gumby .knownWell {
    bottom: 60%;
    height: 40%;
  }
  .graphBlock li.gumby .known {
    bottom: 70%;
    height: 30%;
  }
  .gumby .known:after {
    transform: rotate(-90deg);
    bottom: 0px;
    height: 30px;
    left: 0;
  }
  .gumby .knownWell:after {
    transform: rotate(-32deg);
    bottom: -45px;
    height: 56px;
    left: 14px;
  }

  .graphBlock li.angular .knownWell {
    bottom: 50%;
    height: 50%;
  }
  .graphBlock li.angular .known {
    bottom: 70%;
    height: 30%;
  }
  .angular .known:after {
    transform: skewX(-30deg);
    bottom: 5px;
    height: 50px;
    left: 14.5px;
  }
  .angular .knownWell:after {
    transform: skewX(-30deg);
    bottom: 5px;
    height: 50px;
    left: 14.5px;
  }

  .graphBlock li.react .knownWell {
    bottom: 60%;
    height: 40%;
  }
  .graphBlock li.react .known {
    bottom: 80%;
    height: 20%;
  }
  .react .known:after {
    transform: rotate(-90deg);
    bottom: 0px;
    height: 30px;
    left: 0;
  }
  .react .knownWell:after {
    transform: rotate(-90deg);
    bottom: 0px;
    height: 30px;
    left: 0;
  }

  .graphBlock li.dolphin .knownWell {
    bottom: 60%;
    height: 40%;
  }
  .graphBlock li.dolphin .known {
    bottom: 80%;
    height: 20%;
  }
  .dolphin .known:after {
    transform: skewX(-30deg);
    bottom: 5px;
    height: 50px;
    left: 14.5px;
  }
  .dolphin .knownWell:after {
    transform: rotate(15deg);
    bottom: 0px;
    height: 104px;
    left: 14px;
  }

  .graphBlock li.wordpress .knownWell {
    bottom: 80%;
    height: 20%;
  }
  .graphBlock li.wordpress .known {
    bottom: 90%;
    height: 10%;
  }
  .wordpress .known:after {
    transform: skewX(-30deg);
    bottom: 5px;
    height: 50px;
    left: 14.5px;
  }
  .wordpress .knownWell:after {
    transform: rotate(-90deg);
    bottom: 0px;
    height: 30px;
    left: 0;
  }

  .graphBlock li.phpmotion .knownWell {
    bottom: 80%;
    height: 20%;
  }
  .graphBlock li.phpmotion .known {
    bottom: 100%;
    height: 0;
  }
  .phpmotion .known:after {
    transform: rotate(-15.5deg);
    bottom: -96px;
    height: 108px;
    left: 14px;
  }
  .phpmotion .knownWell:after {
    transform: rotate(-29deg);
    bottom: -39px;
    height: 49px;
    left: 11px;
  }

  .graphBlock li.magento .knownWell {
    bottom: 70%;
    height: 30%;
  }
  .graphBlock li.magento .known {
    bottom: 80%;
    height: 20%;
  }
  .magento .known:after {
    transform: rotate(-29deg);
    bottom: -45px;
    height: 58px;
    left: 13px;
  }
  .magento .knownWell:after {
    transform: rotate(-15.5deg);
    bottom: -96px;
    height: 108px;
    left: 14px;
  }

  .graphBlock li.oscommerce .knownWell {
    bottom: 50%;
    height: 50%;
  }
  .graphBlock li.oscommerce .known {
    bottom: 70%;
    height: 30%;
  }
  .oscommerce .known:after {
    transform: rotate(-15.5deg);
    bottom: -96px;
    height: 108px;
    left: 14px;
  }
  .oscommerce .knownWell:after {
    transform: rotate(-15.5deg);
    bottom: -96px;
    height: 108px;
    left: 14px;
  }

  .graphBlock li.joomla .knownWell {
    bottom: 30%;
    height: 70%;
  }
  .graphBlock li.joomla .known {
    bottom: 50%;
    height: 50%;
  }
  .joomla .known:after {
    transform: rotate(-90deg);
    bottom: 0px;
    height: 30px;
    left: 0;
  }
  .joomla .knownWell:after {
    transform: rotate(-90deg);
    bottom: 0px;
    height: 30px;
    left: 0;
  }

  .graphBlock li.codeignitor .knownWell {
    bottom: 30%;
    height: 70%;
  }
  .graphBlock li.codeignitor .known {
    bottom: 50%;
    height: 50%;
  }
  .codeignitor .known:after, .codeignitor .knownWell:after {
    display: none;
  }

  .desktopGraph {
    display: block;
  }

  .mobileGraph {
    display: none;
  }

/* Skills Ends */



.downloadBlock {
  padding: 20px;
  background: rgba(163,0,0,0.1);
  margin: 20px -16px;
  border-top: 1px solid #A30000;
  border-bottom: 1px solid #A30000;
}

.downloadBlock li {
  margin-bottom: 8px;
}

.downloadBlock li label {
  font-weight: bold;
}

.downloadBlock li a {
  text-decoration: underline;
  color: #A30000;
}

.listContent {
  margin-bottom: 16px;
}

.iconInfoBlock a {
  color: #A30000;
}

.iconInfoBlock .iconBlock {
  display: inline-block;
  vertical-align: top;
  width: 24px;
}

.iconInfoBlock .iconBlock i {
  font-size: 24px;
}

.iconInfoBlock .infoBlock {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 50px);
  padding-left: 4px;
}

.iconInfoBlock label {
  font-weight: bold;
}

.iconInfoBlock h5 {
  font-size: 11px;
  font-style: italic;
  margin: 0;
  color: #A08585;
}

.block {
  margin-bottom: 32px;
}

.block ul {
  margin-top: 8px;
}

.block .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  border-bottom: 1px solid #2B3F04;
  padding-bottom: 8px;
}

/* Profile block */
.personalBlock .mobileBlock, .personalBlock .emailBlock, .personalBlock .webBlock {
  display: inline-block;
}

.personalBlock .mobileBlock {
  width: 150px;
}

.personalBlock .webBlock {
  width: 180px;
}

.personalBlock .emailBlock {
  width: 205px;
}

/* Social Block */

.socialBlock .listContent, .otherBlock .listContent {
  width: 24%;
  display: inline-block;
  white-space: nowrap;
}

.hobbies a {
  text-decoration: underline;
  color: #A30000;
}

/* Experience Block */
.experience li {
  border-bottom: 1px dotted #C00;
  padding-bottom: 8px;
}
.experience li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.experience h4 {
  font-size: 14px;
  padding-bottom: 8px;
}
.experience h5 {
  font-size: 12px;
  margin-bottom: 4px;
}
.experience p {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 8px;
}
.experience .workProcess {
  margin-top: 8px;
}

@media (min-width: 320px) and (max-width: 767px) {
  .desktopGraph, .jquery .known:after, .jquery .knownWell:after, .dolphin .known:after, .dolphin .knownWell:after {
    display: none;
  }

  .mobileGraph {
    display: block;
    width: 260px;
    margin: 0 auto 50px;
  }

  .moreBlock {
    padding-bottom: 100px;
  }

  .downloadBlock li strong, .personalBlock li.listContent, .socialBlock li.listContent, .otherBlock li.listContent {
    display: block;
  }

  .downloadBlock li {
    margin-bottom: 10px;
  }
}

.portfolioBlock {
  padding: 16px 0;
}