/* Start MetroMe COLOR SCHEME */

/*

body { color: rgba(255,255,255,0.8);}
#tab-about, #tab-work { color: rgba(255,255,255,0.9);}
#menu-ul a span { color: rgba(255,255,255,0.8);}
#menu-ul a i { color: rgba(255,255,255,0.7);}
#social-ul a {
  color: #222;
  background-color: rgba(255,255,255,0.5);  
}
#social-ul a:hover { background-color: rgba(255,255,255,0.7); }

#menu-ul li:hover a span,
#menu-ul li.active a span { color: rgba(255,255,255,1);}
#menu-ul li:hover a i,
#menu-ul li.active a i { color: rgba(255,255,255,0.85);}

#about-li,
#about-li.active,
#about-li.active:hover,
#tab-about .text-box { background-color: #81AF24;}
#about-li:hover { background-color: #76A121;}

#resume-li,
#resume-li.active,
#resume-li.active:hover,
#tab-resume .text-box { background-color: #6E2D68;}
#tab-resume .progress { background-color: #582453;}
#tab-resume .progress .bar { background-color: #D5ABC3; color: #582453;}
#resume-li:hover { background-color: rgba(110,45,104,0.8);}

#work-li,
#work-li.active,
#work-li.active:hover,
#tab-work .text-box,
#tab-work .gallery-slide a { background-color: #F09609;}
#work-li:hover { background-color: rgba(240,150,9,0.8);}

#life-li,
#life-li.active,
#life-li.active:hover,
#tab-life .text-box,
#tab-life .tag:after,
#tab-life .gallery-slide a { background-color:  #C43725;}
#tab-life .tag,
#tab-life .progress { background-color: rgba(0,0,0,0.2);}
#tab-life .progress .bar { background-color: #F2CBC7; color: #9D2C1E;}
#life-li:hover { background-color: rgba(196,55,37,0.8);}

#contact-li,
#contact-li.active,
#contact-li.active:hover,
#tab-contact .text-box { background-color: #076496;}
#map-box {border: 4px solid #076496;}
#contact-li:hover { background-color: rgba(7,100,150,0.8);}
button[type="submit"] {
  width: 100%;
  border: 0;
  padding: 10px 15px;
  background-color: rgba(0,0,0,0.2);
  color: rgba(255,255,255,0.8);
}
button[type="submit"]:hover {
  background-color: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.9);
}
input[type="text"], textarea {
  border: 2px solid #3983AB;
  background-color: rgba(255,255,255,0.2);
  color: #eee;
}
input[type="text"]:focus, textarea:focus {
  background-color: transparent;
  color: #eee;
}
input[type="text"].error, textarea.error {
  border: 2px solid #A83C43;
  background-color: #A83C43;
}

*/


/* End MetroMe COLOR SCHEME */



body {
  background-color: #222;
  background-position: top center;
  background-size: 100% 100%;
	background-attachment: fixed;
  padding-top: 10px;
  padding-bottom: 40px;
}
h1, h2, h3, h4 { margin:0;}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
label {
  color:rgba(0,0,0,0.6);
  font-weight: 600;
  letter-spacing: -1px;
}

[class*="box-"] {
  box-sizing: border-box;
  -moz-box-sizing : border-box;
}

#to-top { text-align: right;}
#to-top a {
  display: none;
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
}

/* Fonts and related */
body {
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
}
h2, h3, h4 {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
}
h4 {
  font-size: 16px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.6);
}
.skill span { color: rgba(255,255,255,0.6);}
h4.interval {
  font-size: 12px;
  color: rgba(255,255,255,0.9);
}

/* Box inner margins and paddings */
[id^="tab-"] .text-box {
  padding: 20px 12px 20px 20px;
}
#about-me p:first-of-type { margin-top: 0;}
h2, h3 { margin-bottom: 16px;}
#tab-about h2 { margin-bottom: 8px; }
#my-experience h3 { margin-bottom: 8px;}
#my-experience p { margin: 10px 0 30px 0;}
#skills-box h3 { margin-bottom: 10px;}
#skills-box .skills-group { margin-bottom: 20px;}
#skills-box .skills-group:last-of-type { margin-bottom: 0;}
.progress.last { margin-bottom: 0;}
#tab-contact .text-box { padding-right: 20px;}
#contact-details .row-fluid { margin-bottom: 4px;}
#contact-details .row-fluid:last-of-type { margin-bottom: 0;}
#contact-details .span7 { margin-left: -15px;}
#tab-contact textarea { height: 116px;}

/* setting up for scrollable content */
#about-me,
#my-experience,
#all-skills,
#feedback,
#project-single-txt p,
#project-gallery-txt p,
#project-gallery-img .gallery-slide,
#personality,
#interests,
#life-gallery-txt p,
#life-gallery-img .gallery-slide {
  overflow: auto;
}
#about-me { height: 470px;}
#my-experience { height: 500px;}
#all-skills { height: 210px;}
#feedback { height: 210px;}
#project-single-txt p { height: 210px;}
#project-gallery-txt p  { height: 210px;}
#project-gallery-img .gallery-slide { height: 286px;}
#personality { height: 210px;}
#interests { height: 210px;}
#life-gallery-txt p { height: 210px;}
#life-gallery-img .gallery-slide  { height: 286px;}

#tabs-container > div { display: none;}
#tabs-container > div.active { display: block;}
#gmap-container {
  width: 100%;
  height: 100%;
}

.menu-li a,
#social-ul a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
#social-ul a { text-align: center;}
.menu-li span {
  position: absolute;
  top: 4px;
  left: 4px;
}
.menu-li i {
  position: absolute;
  font-size: 400%;
}
.menu-li i.i-centered {
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 111px;
}
.menu-li i.i-right-bottom {
  bottom: 5px;
  right:  5px;
}

#social-ul i {
  display: inline-block;
  text-align: center;  
  font-size: 160%;
  line-height: 70px;
}
.menu-li a:visited,
.menu-li a:hover,
.menu-li a:active {text-decoration: none;}

.tag {
  display: inline-block;
  position: relative;
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
  margin: 5px 15px 5px 0;
  background-color: #666;
  color: rgba(255,255,255,0.8);
}
.tag:before {
  content: "";
  position: absolute;
  right: -12px;
  width: 12px;
  height: 100%;
  background-color: inherit;
}
.tag:after {
  content: "";
  position: absolute;
  right: -7px;
  top: 8px;
  width: 6px;
  height: 6px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}


.mm.container { width: 956px;}
#menu-container { width: 316px;}

#menu-ul li:nth-of-type(3),
#menu-ul li:nth-of-type(5),
#menu-ul li:nth-of-type(7),
#menu-ul li:nth-of-type(9) {
  margin-left:6px;
}
#about-li.menu-li { width: 100%;}
.menu-li {
  display: block;
  float: left;
  margin-bottom: 6px;
}
#tabs-container { margin-left: 6px;}

[id^="tab-"] [class*="span"],
#tab-about .image-slider-box,
#skills-box {
  margin-bottom: 6px;
}

.skill span {
  display: inline-block;
  width: 50%;
  float: left;
}
ul.skill-rate {
  display: inline-block;
  float: left;
  width: 50%;
}
ul.skill-rate li {
  display: inline-block;
  float: left;
  text-align: center;
  color: rgba(0,0,0,0.2);
}
ul.skill-rate.rated-1 li:first-of-type,
ul.skill-rate.rated-2 li:nth-of-type(1),
ul.skill-rate.rated-2 li:nth-of-type(2),
ul.skill-rate.rated-3 li:nth-of-type(1),
ul.skill-rate.rated-3 li:nth-of-type(2),
ul.skill-rate.rated-3 li:nth-of-type(3),
ul.skill-rate.rated-4 li:nth-of-type(1),
ul.skill-rate.rated-4 li:nth-of-type(2),
ul.skill-rate.rated-4 li:nth-of-type(3),
ul.skill-rate.rated-4 li:nth-of-type(4),
ul.skill-rate.rated-5 li:nth-of-type(1),
ul.skill-rate.rated-5 li:nth-of-type(2),
ul.skill-rate.rated-5 li:nth-of-type(3),
ul.skill-rate.rated-5 li:nth-of-type(4),
ul.skill-rate.rated-5 li:nth-of-type(5) { color: rgba(255,255,255,0.6); }


.box-05 {
  height: 70px;
  display: block;
  float: left;
  width: 74px;
  margin-left: 6px;
}
.box-05:nth-of-type(odd) { width: 75px; }
.box-05:first-of-type {
  margin-left: 0;
}

.box-1x1 {
  width: 155px;
  height: 111px;
}
.box-2x1 { height: 111px;}
.box-2x2 { height: 286px;}
.box-2x3 { height: 432px;}
.box-2x4 { height: 578px;}
.box-4x2 { height: 286px;}
.flexslider .slides img { height: 286px;}

.gallery-slide {
  line-height: 0;
  font-size: 0;
}
.gallery-slide a[href="#"] { cursor: default;}
.gallery-slide img {
  -moz-transition: opacity 0.2s ease-in;
  -webkit-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
.gallery-slide img:hover { opacity: 0.5;}
.flexslider .slides img.thumb {
  vertical-align: baseline;
  width: 100%;
  height: 100%;
}
.gallery-slide a { display: inline-block;}



@media (max-width: 481px) {
  
  #about-short .span5 { margin-bottom: -8px;}
  #about-short .span7 { margin-bottom: 0;}
  #tab-resume h2 span { display: none;}
  #contact-details .span7 { margin-left: 0;}
  #contact-details .span5 { margin-bottom: -8px;}
  #contact-details .span7 { margin-bottom: 0;}
  
  #about-li.menu-li {
    width: 100%;
    *width: 99.93638676844783%;
  }
  .menu-li.box-1x1 {
    width: 49.61832061068702%;
    *width: 49.55470737913486%;
  }
  #menu-ul li:nth-of-type(3),
  #menu-ul li:nth-of-type(5),
  #menu-ul li:nth-of-type(7),
  #menu-ul li:nth-of-type(9) {
    margin-left: 0.7633587786259541%;
    *margin-left: 0.6997455470737913%;
  }
  #menu-ul li:nth-of-type(1),
  #menu-ul li:nth-of-type(2),
  #menu-ul li:nth-of-type(4),
  #menu-ul li:nth-of-type(6),
  #menu-ul li:nth-of-type(8) {
    margin-left: 0;
  }
  #social-ul i {
    font-size: 160%;
    line-height: 60px;
  }
  
  .box-05,
  .box-05:nth-of-type(odd) {
    width: 24.427480916030532%;
    *width: 24.363867684478368%;
    margin-left: 0.7633587786259541%;
    *margin-left: 0.6997455470737913%;
    height: 60px;
  }
  .box-05:first-of-type {
    margin-left: 0;
  }
  
  .skill span ,
  ul.skill-rate {
    width: 100%;
    float: none;
  }
  
}


@media (max-width: 767px) {
  
  .mm.container,
  #menu-container { width: 100%;}
  .menu-li {
    margin-bottom: 0.7633587786259541%;
    *margin-bottom: 0.6997455470737913%;
  }  
  #tabs-container { margin-left: 0;}
  
  #menu-container,
  [id^="tab-"] [class*="span"],
  #tab-about .image-slider-box,
  #skills-box {
    margin-bottom: 0.7633587786259541%;
    *margin-bottom: 0.6997455470737913%;
  }
  
  .box-2x2.image-slider-box,
  .flexslider .slides img { height: auto;}
  
  .gallery-slide a {
    width: 70px;
    height: 60px;
    margin: 3px 6px 3px 0;
  }
  
  #life-gallery-img .gallery-slide,
  #project-gallery-img .gallery-slide,
  .box-2x2.gallery-slider { height: auto;}
  
  #about-me { height: 470px;}
  #my-experience { height: 500px;}
  #all-skills { height: 210px;}
  #feedback { height: 210px;}
  #project-single-txt p { height: 210px;}
  #project-gallery-txt p  { height: 210px;}
  #personality { height: 210px;}
  #interests { height: 210px;}
  #life-gallery-txt p { height: 210px;}
  
  #to-top a { display: inline-block;}
    
}


@media (min-width: 481px) and (max-width: 767px) {
  
  #about-short .span5,
  #about-short .span7 { margin-bottom: 0;}
  #contact-details .row-fluid { margin-bottom: 6px;}
  #contact-details .row-fluid:last-of-type { margin-bottom: 0;}
  
  #about-li.menu-li {
    width: 66.41221374045801%;
    *width: 66.34860050890585%;
  }
  .menu-li.box-1x1 {
    width: 32.82442748091603%;
    *width: 32.76081424936387%;
  }
  #menu-ul li:nth-of-type(2),
  #menu-ul li:nth-of-type(4),
  #menu-ul li:nth-of-type(5),
  #menu-ul li:nth-of-type(7),
  #menu-ul li:nth-of-type(8) {
    margin-left: 0.7633587786259541%;
    *margin-left: 0.6997455470737913%;
  }
  #menu-ul li:nth-of-type(1),
  #menu-ul li:nth-of-type(3),
  #menu-ul li:nth-of-type(6),
  #menu-ul li:nth-of-type(9) {
    margin-left: 0;
  }
  .box-05,
  .box-05:nth-of-type(odd) {
    width: 24.427480916030532%;
    *width: 24.363867684478368%;
    margin-left: 0.7633587786259541%;
    *margin-left: 0.6997455470737913%;
  }
  .box-05:first-of-type {
    margin-left: 0;
  }
  
  #about-short .span5, #about-short .span7,
  #contact-details .span5, #contact-details .span7 {
    float: left;
    width: 50%;
    margin-left: 0;
  }
  
  .skill span {
    text-align: right;
    width: 49%;
  }
  ul.skill-rate {
    width: 49%;
    margin-left: 2%;
  }
  
}


@media (min-width: 768px) and (max-width: 979px) {
  
  body {
    font-size: 14px;
    line-height: 18px;
    background: #222 url('../images/blurred_bg_hd.png') no-repeat;
  }
  #menu-ul { font-size: 12px;}
  h4 {font-size: 14px;}
  #about-short .span5 { margin-bottom: -8px;}
  #about-short .span7 { margin-bottom: 0;}
  #tab-resume h2 span { display: none;}
  .progress {
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .progress .bar { font-size: 14px;}
  #contact-details .span5 { margin-bottom: -8px;}
  #contact-details .span7 { margin-bottom: 0;}
  #tab-contact textarea { height: 74px;}
  #tab-contact input[type="text"],
  #tab-contact textarea {
    padding: 6px 10px;
    margin-bottom: 6px;
  }
  button[type="submit"] { padding: 6px 10px;}
  
  .mm.container { width: 716px;}
  #menu-container { width: 236px;}
  .menu-li span {
    top: 2px;
    left: 4px;
  }
  .menu-li i { font-size: 250%;}
  .menu-li i.i-centered { line-height: 100px;}
  #social-ul i {
    line-height: 50px;
    font-size: 120%;
  }
  .box-05 {
    height: 50px;
    width: 54px;
  }
  .box-05:nth-of-type(odd) { width: 55px; }
  .box-1x1 {
    width: 115px;
    height: 79px;
  }
  .box-2x1 { height: 79px;}
  .box-2x2 { height: 206px;}
  .box-2x3 { height: 312px;}
  .box-2x4 { height: 418px;}
  .box-4x2 { height: 206px;}
  .flexslider .slides img { height: 206px;}
  
  #about-me { height: 332px;}
  #my-experience { height: 354px;}
  #all-skills { height: 144px;}
  #feedback { height: 144px;}
  #project-single-txt p { height: 144px;}
  #project-gallery-txt p  { height: 144px;}
  #project-gallery-img .gallery-slide { height: 206px;}
  #personality { height: 144px;}
  #interests { height: 144px;}
  #life-gallery-txt p { height: 144px;}
  #life-gallery-img .gallery-slide  { height: 206px;}
  
  #about-short .span5, #about-short .span7,
  #contact-details .span5, #contact-details .span7 {width: 100%; margin-left:0;}
  
  [id^="tab-"] .text-box {
    padding: 12px 6px 12px 14px;
  }
  #tab-contact .text-box { padding-right: 14px;}
  #tab-contact #contact-details.text-box { padding-right: 6px;}
  .flex-direction-nav a {
    width: 26px;
    height: 26px;
    line-height: 26px;
    top: -2px;    
  }
  .flex-direction-nav .flex-next {right: 8px;}
  .flex-direction-nav .flex-prev {right: 42px;}  
  .flex-direction-nav .flex-next i,
  .flex-direction-nav .flex-prev i {
    width: 26px;
    height: 26px;
    font-size: 110%;
  }
  
  .skill span ,
  ul.skill-rate {
    width: 100%;
    float: none;
  }
  
  .gallery-slide a {
    width: 74px;
    height: 64px;
    margin: 6px 6px 0 0;
  }
  .gallery-slide a:nth-of-type(1),
  .gallery-slide a:nth-of-type(2),
  .gallery-slide a:nth-of-type(3) { margin-top: 0;}
  .gallery-slide a:nth-of-type(3n) { width: 73px; margin-right: 0;}
  .gallery-slide a:last-of-type { margin-bottom: 1px;}  

}


@media (min-width: 980px) and (max-width: 1199px) {
  
  body { background: #222 url('../images/blurred_bg_hd.png') no-repeat;}
  
  .gallery-slide a {
    width: 100px;
    height: 91px;
    margin: 6px 6px 0 0;
  }
  .gallery-slide a:nth-of-type(1),
  .gallery-slide a:nth-of-type(2),
  .gallery-slide a:nth-of-type(3) { margin-top: 0;}
  .gallery-slide a:nth-of-type(3n) { width: 101px; margin-right: 0;}
  .gallery-slide a:last-of-type { margin-bottom: 1px;}

}


@media (min-width: 1200px) {
  
  body { background: #222 url('../images/blurred_bg_hd.png') no-repeat;}
  
  #about-short .span5 { margin-bottom: -5px;}
  #about-short .span7 { margin-bottom: 4px;}
  #contact-details .span7 { margin-left: 0;}
  #contact-details .span5,
  #contact-details .span7 { margin-bottom: 14px;}
  #contact-details .row-fluid.last .span5,
  #contact-details .row-fluid.last .span7 { margin-bottom: 0;}
  #tab-contact textarea { height: 156px;}
  
  .mm.container { width: 1076px;}
  #menu-container { width: 354px;}
  .menu-li i.i-centered { line-height: 160px;}
  #social-ul i { line-height: 80px;}
  .box-05,
  .box-05:nth-of-type(odd) {
    width: 84px;
    height: 80px;    
  }
  .box-1x1 {
    width: 174px;
    height: 127px;
  }
  .box-2x1 { height: 127px;}
  .box-2x2 { height: 326px;}
  .box-2x3 { height: 492px;}
  .box-2x4 { height: 658px;}
  .box-4x2 { height: 326px;}
  .flexslider .slides img { height: 326px;}
  
  #about-me { height: 550px;}
  #my-experience { height: 578px;}
  #all-skills { height: 250px;}
  #feedback { height: 250px;}
  #project-single-txt p { height: 250px;}
  #project-gallery-txt p  { height: 250px;}
  #project-gallery-img .gallery-slide { height: 326px;}
  #personality { height: 250px;}
  #interests { height: 250px;}
  #life-gallery-txt p { height: 250px;}
  #life-gallery-img .gallery-slide  { height: 326px;}
  
  .gallery-slide a {
    width: 114px;
    height: 104px;
    margin: 6px 6px 0 0;
  }
  .gallery-slide a:nth-of-type(1),
  .gallery-slide a:nth-of-type(2),
  .gallery-slide a:nth-of-type(3) { margin-top: 0;}
  .gallery-slide a:nth-of-type(3n) { width: 113px; margin-right: 0;}
  .gallery-slide a:last-of-type { margin-bottom: 1px;} 
  
}


/* Transitions */
#tab-contact input,
#tab-contact textarea,
#tab-contact button {
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#menu-ul li,
#social-ul a {
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* for page load */
#menu-container.load-fade-menu {
  opacity: 0;
  position: relative;
  top: -40px;
  -webkit-transition: opacity 0.6s ease;
  -moz-transition: opacity 0.6s ease;
  -o-transition: opacity 0.6s ease;
  transition: all 0.6s ease;
}
#tabs-container.load-fade-tabs {
  opacity: 0;
  position: relative;
  bottom: -40px;
  -webkit-transition: opacity 0.4s ease 1s;
  -moz-transition: opacity 0.4s ease 1s;
  -o-transition: opacity 0.4s ease 1s;
  transition: all 0.6s ease 0.7s;
}
#menu-container.load-fade-menu.in { opacity: 1; top: 0;}
#tabs-container.load-fade-tabs.in { opacity: 1; bottom:0;}

/* for tabs */
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  -moz-transition: opacity 0.6s ease;
  -o-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.fade.in {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease 1s;
  -moz-transition: opacity 0.4s ease 1s;
  -o-transition: opacity 0.4s ease 1s;
  transition: opacity 0.4s ease 1s;
}

/* for text slides */
.slide-fade {
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.slide-fade.in {
  opacity: 1;
  -webkit-transition: opacity 0.4s linear 0.3s;
  -moz-transition: opacity 0.4s linear 0.3s;
  -o-transition: opacity 0.4s linear 0.3s;
  transition: opacity 0.4s linear 0.3s;
}


/* Shadows for scrollboxes */
.text-box .mCSB_container { padding: 10px 0;}
.text-box .mCustomScrollBox:before,
.text-box .mCustomScrollBox:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 8;
  width: 100%;
  margin-left: -16px;
  height: 10px;
  background-color: transparent;
}
.text-box .mCustomScrollBox:before { top: 0;}
.text-box .mCustomScrollBox:after { bottom: 0;}

#tab-about .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px rgb(129, 175, 36);
  box-shadow: inset 0px 10px 10px -5px rgb(129, 175, 36);
}
#tab-about .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px rgb(129, 175, 36);
  box-shadow: inset 0px -10px 10px -5px rgb(129, 175, 36);
}
#tab-resume .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px rgb(110, 45, 104);
  box-shadow: inset 0px 10px 10px -5px rgb(110, 45, 104);
}
#tab-resume .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px rgb(110, 45, 104);
  box-shadow: inset 0px -10px 10px -5px rgb(110, 45, 104);
}
#tab-work .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px rgb(240, 150, 9);
  box-shadow: inset 0px 10px 10px -5px rgb(240, 150, 9);
}
#tab-work .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px rgb(240, 150, 9);
  box-shadow: inset 0px -10px 10px -5px rgb(240, 150, 9);
}
#tab-life .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px #C43725;
  box-shadow: inset 0px 10px 10px -5px #C43725;
}
#tab-life .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px #C43725;
  box-shadow: inset 0px -10px 10px -5px #C43725;
}
#tab-contact .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px #076496;
  box-shadow: inset 0px 10px 10px -5px #076496;
}
#tab-contact .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px #076496;
  box-shadow: inset 0px -10px 10px -5px #076496;
}
/* overwrites for some paddings - to be used with the scrollbox shadows*/
@media (min-width: 481px) and (max-width: 767px) {
  #about-short.text-box .mCSB_container,
  #contact-details.text-box .mCSB_container { padding:0;}
  #about-short.text-box .mCustomScrollBox:before,
  #about-short.text-box .mCustomScrollBox:after,  
  #contact-details.text-box .mCustomScrollBox:before,
  #contact-details.text-box .mCustomScrollBox:after { display: none;}
}
@media (min-width: 980px) {
  #contact-details.text-box .mCSB_container { padding:0;}
  #contact-details.text-box .mCustomScrollBox:before,
  #contact-details.text-box .mCustomScrollBox:after { display: none;}
}
@media (min-width: 1200px) {
  #about-short.text-box .mCSB_container { padding:0;}
  #about-short.text-box .mCustomScrollBox:before,
  #about-short.text-box .mCustomScrollBox:after { display: none;}
}