@text_rev_a_2 : rgba(0,0,0,0.2);
@text_rev_a_4 : rgba(0,0,0,0.4);
@text_rev_a_7 : rgba(0,0,0,0.7);
@text_a_01 : rgba(255,255,255,0.01);
@text_a_2 : rgba(255,255,255,0.2);
@text_a_5 : rgba(255,255,255,0.5);
@text_a_6 : rgba(255,255,255,0.6);
@text_a_7 : rgba(255,255,255,0.7);
@text_a_75 : rgba(255,255,255,0.75);
@text_a_8 : rgba(255,255,255,0.8);
@text_a_85 : rgba(255,255,255,0.85);
@text_a_9 : rgba(255,255,255,0.9);
@text_a_1 : rgba(255,255,255,1);

@themeBgClr: #ddd;
@themeBgURL: "../images/backgrounds/raindrops_1.jpg";

@aboutClr: #81AF24;
@aboutClrHov: rgba(129,175,36,0.8);
@aboutClr_a_5: rgba(129,175,36,0.5);
@resumeClr: #6E2D68;
@resumeClrHov: rgba(110,45,104,0.8);
@resumeBarBg: #9C6496;
@resumeBarTxt: rgb(33, 21, 32);
@workClr: #F09609;
@workClrHov: rgba(240,150,9,0.8);
@workArrow: #905A05;
@lifeClr: #C43725;
@lifeClrHov: rgba(196,55,37,0.8);
@lifeBarBg: #D1877D;
@lifeBarTxt: rgb(97, 41, 34);
@lifeArrow: #762116;
@contactClr: #076496;
@contactClrHov: rgba(7,100,150,0.8);
@formErrorClr: #A83C43;

@socialsTxt: #222;
@socialsBg: rgb(236,236,236);
@socialsBgHov: rgba(236,236,236,0.7);


body {
  color: @text_a_8;
  -moz-transition: background-color 2s ease-in;
  -webkit-transition: background-color 2s ease-in;
  -o-transition: background-color 2s ease-in;
  transition: background-color 2s ease-in;
}
/*body.colored { background-color: @themeBgClr;}*/

#mm-bg.opaque { opacity: 1;}

@media (min-width: 768px) {
  #mm-bg {
    opacity: 0;
    -moz-transition: opacity 2s ease-in;
    -webkit-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    background: url( @themeBgURL ) no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
}


h4 { color: @text_a_6;}
.skill span { color: @text_a_6;}
h4.interval { color: @text_a_9;}
a { color: @text_a_8;}
a:hover,
a:focus { color: @text_a_1;}
.mCSB_scrollTools .mCSB_draggerRail{ background: @text_rev_a_4;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background: @text_a_75;}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background: @text_a_85;}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background: @text_a_9;}

#menu-ul a span { color: @text_a_8;}
#menu-ul a i { color: @text_a_7;}
#social-ul a {
  color: @socialsTxt;
  background-color: @socialsBg;  
}
#social-ul a:hover { background-color: @socialsBgHov; }

#menu-ul li:hover a span,
#menu-ul li.active a span { color: @text_a_1;}
#menu-ul li:hover a i,
#menu-ul li.active a i { color: @text_a_85;}

 
#about-li,
#about-li.active,
#about-li.active:hover,
#tab-about .text-box { background-color: @aboutClr;}
#about-li:hover { background-color: @aboutClrHov;}
#about-single-img .flex-control-paging li a { background: @aboutClr_a_5;}
#about-single-img .flex-control-paging li a:hover { background: @aboutClrHov;}
#about-single-img .flex-control-paging li a.flex-active { background: @aboutClr;}


#resume-li,
#resume-li.active,
#resume-li.active:hover,
#tab-resume .text-box { background-color: @resumeClr;}
#tab-resume .progress { background-color: @text_rev_a_2;}
#tab-resume .progress .bar { background-color: @resumeBarBg; color: @resumeBarTxt;}
#resume-li:hover { background-color: @resumeClrHov;}
ul.skill-rate li { color: @text_rev_a_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: @text_a_6;}


#work-li,
#work-li.active,
#work-li.active:hover,
#tab-work .text-box,
#tab-work .gallery-slide a { background-color: @workClr;}
#work-li:hover { background-color: @workClrHov;}
#tab-work .flex-direction-nav a { background-color: @text_a_6;}
#tab-work .flex-direction-nav .flex-next i,
#tab-work .flex-direction-nav .flex-prev i { color: @workArrow;}

  div.pp_metro_me.pp_work .pp_nav,
  div.pp_metro_me.pp_work .pp_content,
  div.pp_metro_me.pp_work .pp_facebook,
  div.pp_metro_me.pp_work .pp_twitter,
  div.pp_metro_me.pp_work .pp_expand,
  div.pp_metro_me.pp_work .pp_contract,
	div.pp_metro_me.pp_work .pp_close {
    background-color: @workClr;
  }
  .pp_work div#pp_full_res img,
  .pp_work div#pp_full_res iframe {
    border: 4px solid  @workClr;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  div.pp_metro_me.pp_work .pp_facebook,
  div.pp_metro_me.pp_work .pp_twitter,
	div.pp_metro_me.pp_work .pp_expand,
  div.pp_metro_me.pp_work .pp_contract,
	div.pp_metro_me.pp_work .pp_close,
  div.pp_metro_me.pp_work .pp_arrow_previous,
  div.pp_metro_me.pp_work .pp_arrow_next,
  div.pp_metro_me.pp_work .currentTextHolder {
    color: rgba(0,0,0,0.7);
  }
  div.pp_metro_me.pp_work .ppt {
    color: rgba(255,255,255,0.9);
  }
  
  div.pp_metro_me.pp_work .pp_facebook:hover,
  div.pp_metro_me.pp_work .pp_twitter:hover,
	div.pp_metro_me.pp_work .pp_expand:hover,
  div.pp_metro_me.pp_work .pp_contract:hover,
	div.pp_metro_me.pp_work .pp_close:hover,
  div.pp_metro_me.pp_work .pp_arrow_previous:hover,
  div.pp_metro_me.pp_work .pp_arrow_next:hover {
    color: @text_a_1;
  }
  
  div.pp_metro_me.pp_work .pp_previous,
  div.pp_metro_me.pp_work .pp_next {
    color: rgba(255,255,255,0.1);
  }
  div.pp_metro_me.pp_work .pp_previous:hover,
  div.pp_metro_me.pp_work .pp_next:hover {
    color: rgba(255,255,255,0.5);
  }


#life-li,
#life-li.active,
#life-li.active:hover,
#tab-life .text-box,
#tab-life .tag:after,
#tab-life .gallery-slide a { background-color: @lifeClr;}
#tab-life .tag,
#tab-life .progress { background-color: @text_rev_a_2;}
#tab-life .progress .bar { background-color: @lifeBarBg; color: @lifeBarTxt;}
#life-li:hover { background-color: @lifeClrHov;}
#tab-life .flex-direction-nav a { background-color: @text_a_6;}
#tab-life .flex-direction-nav .flex-next i,
#tab-life .flex-direction-nav .flex-prev i { color: @lifeArrow;}
.tag { color: @text_a_8;}

  div.pp_metro_me.pp_life .pp_nav,
  div.pp_metro_me.pp_life .pp_content,
  div.pp_metro_me.pp_life .pp_facebook,
  div.pp_metro_me.pp_life .pp_twitter,
  div.pp_metro_me.pp_life .pp_expand,
  div.pp_metro_me.pp_life .pp_contract,
	div.pp_metro_me.pp_life .pp_close {
    background-color: @lifeClr;
  }
  .pp_life div#pp_full_res img,
  .pp_life div#pp_full_res iframe {
    border: 4px solid  @lifeClr;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  div.pp_metro_me.pp_life .pp_facebook,
  div.pp_metro_me.pp_life .pp_twitter,
	div.pp_metro_me.pp_life .pp_expand,
  div.pp_metro_me.pp_life .pp_contract,
	div.pp_metro_me.pp_life .pp_close,
  div.pp_metro_me.pp_life .pp_arrow_previous,
  div.pp_metro_me.pp_life .pp_arrow_next,
  div.pp_metro_me.pp_life .currentTextHolder {
    color: rgba(0,0,0,0.7);
  }
  div.pp_metro_me.pp_life .ppt {
    color: rgba(255,255,255,0.9);
  }
  
  div.pp_metro_me.pp_life .pp_facebook:hover,
  div.pp_metro_me.pp_life .pp_twitter:hover,
	div.pp_metro_me.pp_life .pp_expand:hover,
  div.pp_metro_me.pp_life .pp_contract:hover,
	div.pp_metro_me.pp_life .pp_close:hover,
  div.pp_metro_me.pp_life .pp_arrow_previous:hover,
  div.pp_metro_me.pp_life .pp_arrow_next:hover {
    color: @text_a_1;
  }
  
  div.pp_metro_me.pp_life .pp_previous,
  div.pp_metro_me.pp_life .pp_next {
    color: rgba(255,255,255,0.1);
  }
  div.pp_metro_me.pp_life .pp_previous:hover,
  div.pp_metro_me.pp_life .pp_next:hover {
    color: rgba(255,255,255,0.5);
  }


#contact-li,
#contact-li.active,
#contact-li.active:hover,
#tab-contact .text-box { background-color: @contactClr;}
#map-box {border: 4px solid @contactClr;}
#contact-li:hover { background-color: @contactClrHov;}
button[type="submit"] {
  width: 100%;
  border: 0;
  padding: 10px 15px;
  background-color: @text_rev_a_2;
  color: @text_a_8;
}
button[type="submit"]:hover {
  background-color: @text_rev_a_4;
  color: @text_a_9;
}
#tab-contact input[type="text"],#tab-contact textarea {
  border: 2px solid transparent;
  background-color: rgba(255,255,255,0.2);
  color: @text_a_85;
}
#tab-contact input[type="text"]:focus, #tab-contact textarea:focus {
  border-color: rgba(255,255,255,0.2);
  background-color: transparent;
  color: @text_a_85;
}
#tab-contact input[type="text"].error, #tab-contact textarea.error {
  border: 2px solid @formErrorClr;
  background-color: @formErrorClr;
}

#tab-about .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px @aboutClr;
  box-shadow: inset 0px 10px 10px -5px @aboutClr;
}
#tab-about .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px @aboutClr;
  box-shadow: inset 0px -10px 10px -5px @aboutClr;
}
#tab-resume .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px @resumeClr;
  box-shadow: inset 0px 10px 10px -5px @resumeClr;
}
#tab-resume .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px @resumeClr;
  box-shadow: inset 0px -10px 10px -5px @resumeClr;
}
#tab-work .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px @workClr;
  box-shadow: inset 0px 10px 10px -5px @workClr;
}
#tab-work .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px @workClr;
  box-shadow: inset 0px -10px 10px -5px @workClr;
}
#tab-life .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px @lifeClr;
  box-shadow: inset 0px 10px 10px -5px @lifeClr;
}
#tab-life .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px @lifeClr;
  box-shadow: inset 0px -10px 10px -5px @lifeClr;
}
#tab-contact .text-box .mCustomScrollBox:before {
  -webkit-box-shadow: inset 0px 10px 10px -5px @contactClr;
  box-shadow: inset 0px 10px 10px -5px @contactClr;
}
#tab-contact .text-box .mCustomScrollBox:after {
  -webkit-box-shadow: inset 0px -10px 10px -5px @contactClr;
  box-shadow: inset 0px -10px 10px -5px @contactClr;
}

.gallery-slide a > i { color: @text_a_01;}
.gallery-slide a:hover > i { color: @text_a_7;}