/*
Theme Name: Mexelina - Onepage Parallax Template

Table of contents in this css file:

*/




/*  Embed external font "chunkfiveroman"  */
@font-face {
    font-family: 'chunkfiveroman';
    src: url('font/chunkfive-webfont.eot');
    src: url('font/chunkfive-webfontd41d.eot?#iefix') format('embedded-opentype'),
        url('font/chunkfive-webfont.woff') format('woff'),
        url('font/chunkfive-webfont.ttf') format('truetype'),
        url('font/chunkfive-webfont.svg#chunkfiveroman') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*------ Embed external font "chunkfiveroman"--------*/

/*  General classes  */
.nav.dropdown{
    width:90%;
    margin: 0 auto;
    text-align: center;
}
.top-menu-area {
background-color: #000;
}

.top-menu-area.splited {
z-index: 500;
top:0px;
position: fixed;
background-color: #000;
width: 100%;
}
.typing-cursor{
    color:#FEDC00!important;
}
a:hover,a:focus,a:active{
    color:#FEDC00;
}
a{
    color:#fff;
}
body {
    background-color: #000;
    overflow-x: hidden;
    margin: 0;
    padding: 0;

}

::-moz-selection {
    background-color: #FEDC00;
    color: #fff;
    text-shadow: none;
    -webkit-text-shadow: none;
}
::selection {
    background-color: #FEDC00;
    color: #fff;
    text-shadow: none;
    -webkit-text-shadow: none;
}
ul{
    margin: 0;
}
a{
    outline: none!important;
}
a:hover,
a:active,
a:focus
{
    text-decoration: none;
}
h1,
h2,
h3,
h4,
h5{
    margin: 0;
    font-weight: bold;
}
.ie8 .nav.dropdown{
    display: none;
}
/* ------- General classes ------- */



/*  Transitions  */
.flex-caption .mx-button,
.box-holder .box:after,
.menu a
{
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 100ms ease;
    -o-transition: all 100ms ease;
    transition: all 100ms ease;

}
section{
    position: relative;
}
.scroll-indicator,
.flex-direction-nav a:after,
.top-socials a,
.service-icon-holder i,
.service-body p,
.service-body h2,
.service-icon-holder,
.section-portfolio .portfolio-item .details-holder:before,
.client-item,
.team-holder figure .hover,.resume-download .text,
.blog-img a:after,
.testi-item:before,
.testi-text,
.testi-item .testi-img:before,
.footer-image-item a,.footer-image-item a img,
.testi-info-holder,.testi-info-holder h5,.testi-info-holder h4,
.section-social ul li a
{
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease; 
}

/* ------ Transitions  ------  */



/*  Fonts  */
body,
p,
label,
.top-socials,
.top-info-bar .text-info,
ul li,
h1,
h2,
h3,
h4,
h5,
.service-body p,
.placeholder,
.flex-caption h1,
.menu a ,
.portfolio-item .details,
.tw-icon-title h5
{

    font-family: 'Lato', sans-serif;


}

.service-body h2,
.section-title h1,
.section-quote .quote,
.portfolio-item .details .title,
.more-info-holder h3,
.team-title h1,
.team-holder .hover h3,
.blog-title,.blog-date,.footer-column-holder h5,
.section-social ul li a,.section-social ul li,.section-social  h5,
.single-post-title h1,.comment-author,.comment-date-time,.comment-reply,
.single-post-date,.counter-holder,.comment-form-holder h4
{
     font-family: 'chunkfiveroman';
     font-weight: 100;
   
}
.service-body h2,
.section-title h1{
     text-transform: uppercase;
}
/* ------- Fonts ------------ */



/*Preloader*/





@-webkit-keyframes bubble {
 
  0% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }

  12% {
   -moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
transform: scale(1.5,1.5)
  }

  23% {
   -moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
transform: scale(0.5,0.5)
  }

  34% {
   -moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
transform: scale(1.2,1.2)
  }

  45% {
    -moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1)
  }

  85% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }
}
@-moz-keyframes bubble { 0% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }

  12% {
   -moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
transform: scale(1.5,1.5)
  }

  23% {
   -moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
transform: scale(0.5,0.5)
  }

  34% {
   -moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
transform: scale(1.2,1.2)
  }

  45% {
    -moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1)
  }

  85% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }

}
@-o-keyframes bubble { 0% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }

  12% {
   -moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
transform: scale(1.5,1.5)
  }

  23% {
   -moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
transform: scale(0.5,0.5)
  }

  34% {
   -moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
transform: scale(1.2,1.2)
  }

  45% {
    -moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1)
  }

  85% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }

}


@keyframes bubble { 0% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }

  12% {
   -moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
transform: scale(1.5,1.5)
  }

  23% {
   -moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
transform: scale(0.5,0.5)
  }

  34% {
   -moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
transform: scale(1.2,1.2)
  }

  45% {
    -moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1)
  }

  85% {
  -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0)
  }

}
.bubble-loader {
  display: inline-block;
  margin-top: 25px;
 
  text-align: center;
}
.bubble-loader div {
  animation: bubble 1100ms forwards infinite;
   -webkit-animation: bubble 1100ms forwards infinite;
  -moz-animation:    bubble 1100ms forwards infinite;
  -o-animation:     bubble 1100ms forwards infinite;

  background: #FFD62C;
  border-radius: 50%;
  box-shadow: 0 0 8px #FFD62C;
  display: inline-block;
  height: 10px;
  margin: 6px;
   -moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
  width: 10px;
}
/*.bubble-loader div:nth-child(3) {
   animation-delay:120ms;
 -webkit-animation-delay: 120ms;
 -moz-animation-delay: 120ms;
 -o-animation-delay: 120ms;
 
 
}*/
.bubble-loader div:nth-child(2), .bubble-loader div:nth-child(4) {
  animation-delay: 125ms;
 -webkit-animation-delay: 125ms;
 -moz-animation-delay: 125ms;
 -o-animation-delay: 125ms;
 
 
}

.bubble-loader div:nth-child(1), .bubble-loader div:nth-child(5) {
   animation-delay:250ms;
 -webkit-animation-delay: 250ms;
 -moz-animation-delay: 250ms;
 -o-animation-delay: 250ms;
}


.preloader {
position: absolute;
z-index: 100;
top: 30%;
display: none;
}
.preloader.loading {
display: block;
width: 100%;
}
/*   Home Slider    */
.flex-direction-nav a {

    display: block;
    width: 65px;
    top: 40%;
    height: 55px;
    position: absolute;
}
.flex-direction-nav a:after{
    display: block;

    position: absolute;
    width: 55px;
    height: 55px;
    left: 0;
    right: 0;
    bottom: 0;
    top:0;
    margin: auto;
    background-image: url(../images/navigation.png);
}
.flex-direction-nav .flex-prev:after{
    content:"";
    background-position: 0 0;
}
.flex-direction-nav .flex-prev:hover:after{

    background-position: 0px -58px;
}
.flex-direction-nav .flex-next:after{
    content:"";
    background-position: -63px 0;
}
.flex-direction-nav .flex-next:hover:after{

    background-position: -63px -58px;
}
.section-slider{
    position: relative;
}
.section-slider .logo{

    margin: 13px auto auto 15px;
    text-align: left;
    z-index: 100;
}


.flex-caption h1 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 39px;

}

.flex-caption div {
    padding: 11px 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    text-transform: uppercase;
}
.flex-caption .nav-holder{
    left: 0;
    margin: 30px auto;
    right: 0;
    padding: 0;
    width: 164px;
}
.flex-caption .nav-holder  a{
    outline: none;
    font-size: 12px;
    font-weight: bold;
    color:#000;
}
 .mx-button:hover{
    background-color: #fff!important;
    color:#000;
    border: 2px solid #000;
}
.flex-caption .mx-button{
     background-color: rgba(0,0,0,0.8);
      padding: 8px 0;
}
.mx-button{
   text-align: center;
text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    padding: 13px 0;
    margin-right: 30px;
    min-width: 160px;
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 5px;
    font-size: 13px;
}

.flex-caption .button-holder {
    margin: 49px -51px 0px 0;
}
.flex-caption a{
    display: inline-block;

}
.flex-caption h1{
    margin-top: 22px;   
}
.flex-caption .tagline {
    font-size: 27px;
    margin-top: 3px;
}
.flex-caption div,.flex-caption h1{
    color:#fff;
    position: absolute;
    top:130%;
    left: 0;
    right: 0;

    text-align: center;

}
.flex-caption{
    position: absolute;
    width: 80%;

    color:#fff;
    left: 0;
    right: 0;
    margin:  0 auto;
    height: 100%;
    top:145px;



}
.ie8 .scroll-indicator{
    display: none;
}
.scroll-indicator,.scroll-indicator.show,.scroll-indicator.hide{
    /*       opacity: 0;*/
}
.scroll-guide{
   position: absolute;
left: -28px;
right: 0;
top: -35px;
font-weight: bold;
width: 110px;
text-align: center;
font-size: 10px;
padding: 4px 10px;
margin: auto;
background-color: rgba(0,0,0,0.4);
color: #fff;
text-transform: uppercase;
}
.scroll-indicator i{
position: relative;
    color:#000;
    opacity: 0.8;
    font-size: 35px;
    display: block;
}
.scroll-indicator {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: 476px;
    width: 30px;
    margin: auto;
}
/*  --------- Home Slider -----------  */


/*    nav-menu section classes    */
.menu-holder{
    background-color: #000;
    border-bottom: 5px solid #FEDC00;

}
.menu a span {
    display: block;
    text-align: center;
}
.menu a {
    display: block;
    color: #fff;
    font-size: 11px;
    margin: 21px 0 0;
}
.menu a:hover{
    color:#FEDC00;
}
.menu li.active:before{
    content: "";
    display: block;
    width: 100%;
    background-color: #FFD62C;
    height: 3px;
}
.menu ul {
    float: right;
    margin-right: 16px;
}
.menu li {
    min-width: 110px;
}
.menu li.active a{
    color:#FFD62C;
}
.menu-label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
}
.top-info-bar .text-info{
    text-align: left;
    padding: 9px 0 0px 26px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
}
.top-info-bar label{
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
    margin: 9px 8px 0 0;
}
.top-socials li {
    margin-right: -7px;
}
.top-socials a {
    font-size: 19px;
    color: #fff;
}
.top-socials a:hover {
color: #FFD62C;
}
.top-socials ul {
    display: inline-block;
    float: right;
    margin: 2px 0 0 0;
}
.top-socials{
    text-align: right;
    padding-bottom: 4px;
}

.top-info-bar {
    margin: 14px 0 0 0;
    background-color: #242424;
}

/*  services section    */


.section-title h1{
    text-align: center;
    color:#FEDC00;
    font-size: 50px;
line-height: 40px;
}
.section-title .tagline {
text-align: center;
color: #fff;
text-transform: capitalize;
font-size: 22px;
}
.section-services {
padding: 43px 0 0 0;
}

.service-icon-holder {
text-align: center;
border: 2px solid #fff;
border-radius: 200px;
width: 130px;
height: 130px;
position: relative;
margin: 0 0 0 17px;
}
.service-icon-holder i {
font-size: 75px;
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
}
.service-body h2{
    font-weight: normal;
}
.service-icon-holder i,
.service-body p,
.service-body h2{
    color:#fff;
}
.service-item:hover 
.service-icon-holder i,
.service-item:hover  .service-body p,
.service-item:hover  .service-body h2{
    color:#FEDC00;
}
.service-item:hover .service-icon-holder{
    border: 2px solid #FEDC00;
}
.service-body p {

text-transform: capitalize;
font-size: 17px;
line-height: 26px;
margin: 12px 0 0 0;
}
.services-holder {
margin: 70px auto 0 auto;
max-width: 950px;
position: relative;
}
.services-holder:after {
content: "";
display: block;
width: 1px;
right: 0;
margin: auto;
position: absolute;
left: 20px;
top:0;
background-color: #fff;
height: 80%;

}
.service-icon-holder i:after,.service-icon-holder i:before{
    margin: 0;
}
.service-icon-holder i {
font-size: 75px;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 75px;
width: 75px;
line-height: 0;
padding: 0;
bottom: 0;
margin: auto;
}
.service-item {
margin-bottom: 62px;
}
.service-item.right .service-body {
text-align: right;
margin-right: -23px;
}

/*Section Quoto*/
.section-quote{
    background-image: url(../images/quote-bg.jpg);
  background-size: cover;
    background-attachment: scroll;
}
.section-quote .quote{
    color: #fff;
font-size: 30px;
padding: 94px 0;
margin: auto;
max-width: 950px;
text-align: center;
}

/*Section Quoto*/
.section-quoto{
    background-image: url(../images/quoto-bg.jpg);
  background-size: cover;
    background-attachment: scroll;
}
.section-quoto .quoto{
    color: #fff;
font-size: 30px;
padding: 94px 0;
margin: auto;
max-width: 950px;
text-align: center;
}


/*portfolio items*/
/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}
#portfolio-grid{
  min-height: 500px;
max-width: 960px;
overflow:visible!important;
margin: 0 auto;
}


.section-portfolio .section-title {
margin: 44px 0 0 0;
}
.section-portfolio .section-title h1{
    color:#fff;
}
.section-portfolio #filters {
margin: 84px 0 31px 0;
text-align: center;
}
.section-portfolio #filters a {
text-transform: uppercase;
color: #000;
display: inline-block;
margin-bottom: 10px;
background-color: #fff;
padding: 2px 8px;
 border:1px solid #fff;
}
.section-portfolio #filters a:hover,.section-portfolio #filters a.active{
    background-color:#FEDC00;
  
}

.tooltip-inner{
background-color: #FEDC00;
color: #000;

}

.tooltip.top .tooltip-arrow{
    border-top-color: #FEDC00;
}

.section-portfolio .portfolio-item{

width: 220px;
height: 213px;
margin: 0 10px 10px 0;
padding: 0;

}
.section-portfolio .portfolio-item img {
height: 100%;
width: 100%;
}
.portfolio-item .details-holder{
    overflow: hidden;
width: 100%;
height: 213px;
position: absolute;
top:0;
left: 0;
}
.section-portfolio .details {
  
position: absolute;
top: 0;
left: 0;
right: 0;
width: 160px;
height: 140px;
text-align: center;
bottom: 0;

margin: auto;
}
.section-portfolio .portfolio-item .details  .open-project{
    color:#FEDC00;
    font-size: 11px;
    font-weight: bold;
    display: block;
     top: -200%;
  position: relative;
  
    text-transform: uppercase;
    text-decoration: underline;
}
.section-portfolio .portfolio-item.not-opened .details  .open-project:hover,
.section-portfolio .portfolio-item.opened .details  .open-project{
    color:#fff;
}
.section-portfolio .portfolio-item .details .title{
   top: -200%;
  position: relative;
   color: #fff;
text-transform: uppercase;
font-size: 18px;
line-height: 21px;
margin: 40px 0 0 0;
}
.section-portfolio .portfolio-item .details .date{
    float: left;
}
.section-portfolio .portfolio-item .details .visits{
    float: right;
}
.section-portfolio .portfolio-item .details .date,
.section-portfolio .portfolio-item .details .visits
{
color: #fff;
font-size: 11px;
position: relative;
bottom: -200%;
margin: 36px 0 0 0;
}



@-webkit-keyframes portfolio-hover {
  0%   { top: -200%; }
  100% { top: 0; }
}
@-moz-keyframes portfolio-hover {
  0%   { top: -200%; }
  100% { top: 0; }
}
@-o-keyframes portfolio-hover {
  0%   { top: -200%; }
  100% { top: 0; }
}
@keyframes portfolio-hover {
   0%   { top: -200%; }
  100% { top: 0; }
}


@-webkit-keyframes portfolio-hover-bottom {
  0%   { bottom: -200%; }
  100% { bottom: 0; }
}
@-moz-keyframes portfolio-hover-bottom {
  0%   { bottom: -200%; }
  100% { bottom: 0; }
}
@-o-keyframes portfolio-hover-bottom {
  0%   { bottom: -200%; }
  100% { bottom: 0; }
}
@keyframes portfolio-hover-bottom {
   0%   { bottom: -200%; }
  100% { bottom: 0; }
}


.section-portfolio .portfolio-item .details .date:before,
.section-portfolio .portfolio-item .details .visits:before
{
font-family: "fontello";
display: inline-block;
font-size: 18px;
color: #FEDC00;
margin-right: 4px;
vertical-align: middle;
font-weight: 100;
}
.section-portfolio .portfolio-item .details .date:before {
content: '\e819';

}
.section-portfolio .portfolio-item .details .visits:before {
content: '\e802';

}
.section-portfolio .portfolio-item.not-opened .details-holder:hover:before,
.section-portfolio .portfolio-item.opened .details-holder:before
{
    opacity: 1;
        
}
.section-portfolio .portfolio-item .details-holder:before{
    content:"";
      opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
   background-color: rgba(0,0,0,0.5); 
}

.section-portfolio .portfolio-item.opened .details-holder .details .open-project,
.section-portfolio .portfolio-item.opened .details-holder .details .title
{
    top:0;
}
.section-portfolio .portfolio-item.opened .details-holder .details .date,
.section-portfolio .portfolio-item.opened .details-holder .details .visits{
 bottom:0;   
}

.section-portfolio .portfolio-item.not-opened .details-holder:hover .details .open-project{
 
   -webkit-animation: portfolio-hover 0.3s 0.1s ease-in-out forwards;  
  -moz-animation:    portfolio-hover 0.3s 0.1s ease-in-out forwards; 
  -o-animation:      portfolio-hover 0.3s 0.1s ease-in-out forwards;   
  animation:         portfolio-hover 0.3s 0.1s ease-in-out forwards;  
}

.section-portfolio .portfolio-item.not-opened .details-holder:hover .details .title{
 
   -webkit-animation: portfolio-hover 0.3s 0.2s ease-in-out forwards;  
  -moz-animation:    portfolio-hover 0.3s 0.2s ease-in-out forwards; 
  -o-animation:      portfolio-hover 0.3s 0.2s ease-in-out forwards;   
  animation:         portfolio-hover 0.3s 0.2s ease-in-out forwards;  
}

.section-portfolio .portfolio-item.not-opened .details-holder:hover .details .date,
.section-portfolio .portfolio-item.not-opened .details-holder:hover .details .visits{
 
   -webkit-animation: portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards;  
  -moz-animation:    portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards; 
  -o-animation:      portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards;   
  animation:         portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards;  
}

.portfolio-item .more-info{
    display: none;
}

.portfolio-item .more-info{
    position: absolute;
    background-color: #101014;
    padding: 40px;
   
  
    z-index: 1000;
    margin-top: 18px;
}



.portfolio-item .more-info .triangle{
    
    width: 0px;
height: 0px;
border-style: solid;
border-width: 0 25px 25px 25px;
border-color: transparent transparent #101014 transparent;
position: absolute;
top:-25px;

}
.portfolio-item .more-info .not-opened-btn{
    position: absolute;
    z-index: 100;
    right: 0;
    top:0;
    font-size: 30px;
    color:#FEDC00;
    background-color: #000;
    padding: 10px 20px;
    display: block;
}
.more-info-holder {
color: #ccc;

}


.more-info-holder .content {
font-size: 18px;
line-height: 24px;
margin-top: 27px;
}
.more-info-holder h3 {
font-weight: normal;
line-height: 31px;
text-transform: uppercase;
font-size:31px;
}


.more-info .close-btn{
    display: inline-block;
    z-index: 100;
  position: absolute;
top: 15px;
right: 20px;
    background-image: url(../images/close-btn.png);
    width: 25px;
    height: 32px;
    background-position: 0px 0px;
}
.more-info .close-btn:hover{
   background-position: -25px 0px;
}



/*Clients Section*/
.section-clients .section-title h1{
    color:#fff;
     margin: 40px 0 41px 0;
}
.section-clients{
    background-image: url(../images/clientsbg.jpg);
    min-height: 377px;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 40px;
   
}

.client-item {
border: 1px solid #fff;
text-align: center;
margin: 0px auto 17px;
max-width: 220px;
position: relative;
height: 83px;
}
.client-item:hover{
    border: 1px solid #FEDC00;
    background-color: rgba(0,0,0,0.2);
}
.client-item img {
position: absolute;
max-width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.clients-holder {
width: 83%;
margin: auto;
}

/*Team members Section*/


.team-title {
position: absolute;
left: 0;
right: 0;
z-index: 100;
text-align: center;
width: 80%;
bottom:0;
margin: auto;
}

.team-title h1 {
color: #fff;
padding: 0px 6px;
text-transform: uppercase;
font-size: 48px;
line-height: 47px;
display: inline-block;
background-color: #000;
}
.team-holder figure img{
    width: 100%;
}
.team-holder figure {
    position: relative;
    overflow: hidden;
display: inline-block;
width: 19%;
}
.team-holder {
text-align: center;
}
.team-title .tag-line {
color: #fff;
font-size: 20px;
line-height: 28px;
}
.team-holder .hover h3{
text-transform: uppercase;
color: #fff;
line-height: 25px;
position: absolute;
font-weight: 100;
font-size: 23px;

display: block;
top: -200%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 30px;

width: 90%;

   
}
.team-holder .hover h3:after{
    content:"";
    width: 90%;
    height: 2px;
    bottom:0px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    background-color: #FEDC00;
}
.team-holder .hover .social-holder{
    display: block;
    position: absolute;
bottom: -200%;
left: 0;
top: 70px;
right: 0;
margin: auto;
height: 34px;
width: 90%;
}
.team-holder .hover .social-holder a{
    color:#fff;
    font-size: 18px;
}
.team-holder .hover .social-holder a:hover{
    color:#FEDC00;
}
.team-holder .hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
}


.team-holder figure:hover .hover{
    background-color: rgba(0,0,0,0.7);
}

.team-holder figure:hover .hover h3 {
 
   -webkit-animation: portfolio-hover 0.3s 0.2s ease-in-out forwards;  
  -moz-animation:    portfolio-hover 0.3s 0.2s ease-in-out forwards; 
  -o-animation:      portfolio-hover 0.3s 0.2s ease-in-out forwards;   
  animation:         portfolio-hover 0.3s 0.2s ease-in-out forwards;  
}

.team-holder figure:hover .social-holder{
 
   -webkit-animation: portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards;  
  -moz-animation:    portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards; 
  -o-animation:      portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards;   
  animation:         portfolio-hover-bottom 0.3s 0.2s ease-in-out forwards;  
}

/* Tweet Section */
.tweet-item {
display: inline-block;
max-width: 900px;
color: #fff;
top:0;
font-size: 33px;
height: 110px;
text-align: center;
line-height: 37px;
vertical-align: top;
font-weight: bold;
}

.section-twitter .caroufredsel_wrapper {
min-height: 150px!important;
width: 100%!important;
margin: 17px 0 0 0!important;
}

.loading-twitter {
text-align: center;
margin-top: 60px;
}
.tweet-date {
font-size: 13px;
color:#FFD62C;
}
.twitter-holder {
max-width: 900px;
margin: 0 auto;
}
.section-twitter {
background-image: url(../images/twitterbg.jpg);
background-repeat: no-repeat;
min-height: 360px;
background-position: top center;
background-size: cover;
}
.tw-icon-title {
text-align: center;
padding: 77px 0 0px;
}
.tw-icon-title h5 {
color: #fff;
text-transform: capitalize;
margin: 6px 0 0;
font-size: 17px;
line-height: 17px;
}



/*  Skills Section  */

.section-skill{
    background-image: url(../images/skillsbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    min-height: 512px;
}

.section-skill .section-title h1 {
color: #fff;
}

.section-skill .section-title {
margin: 40px 0 0 0;
}

.skill-item {
display: inline-block;
margin-right: 10px;
}

.skills-holder {
text-align: center;
margin: 30px 0 0 0;
}
.skill-icon {
background-color: #fff;
min-height: 120px;
position: relative;
min-width: 100px;
margin: 2px 0 0 0;
}

.skill-icon img {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
}

.skill-item {
display: inline-block;
margin-right: 10px;
position: relative;
}

.skill-item .empty,
.skill-item .fill
{

width: 100%;
height: 10px;
margin: 2px 0 0 0;
}

.skill-item .empty {
background-color: #fff;

}

.resume-download{
    text-transform: uppercase;
  
    position: relative;
    text-align: center;
    top:54px;
}
.resume-download .text{
    display: inline-block;
    background-color: rgba(0,0,0,0.5);
    border-radius: 5px;
    font-size: 12px;
padding: 13px 25px;
    color:#fff;
}
.resume-download .text:hover{
     background-color: rgba(254,220,0,0.4);
    
}
.resume-download:before,
.resume-download:after{
content: "";
position: absolute;
width: 40%;
top: 50%;
height: 1px;
background-color: #fff;
}

.resume-download:before{
   
    left: 0;
}

.resume-download:after{
   
    right: 0;
}


/*skills hover effect*/


.skill-item:hover{cursor:pointer;}

.skill-item:hover .skill-icon{
    background-color: #FEDC00;
}
.skill-item div
{
	
	
	position:relative;
	-webkit-transition:all 2s ease;
	-moz-transition:all 2s ease;
	transition:all 2s ease;
}

.skill-item div:last-child{position:relative;}


.skill-item div:last-child:after
{
	position:absolute;
    display:block;
    left:22px;
	bottom:-0px;
	color:#31333F;
	z-index:-1;
	font-weight:bold;
	
	font-size:14px;
    -webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	transition:all 1s ease;	
}
.skill-item:nth-child(1) div:nth-child(11):after{content:"HTML5";}

.skill-item:hover div:last-child:after
{
	bottom:15px;
	z-index:1;
    -webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	transition:all 1s ease;
}

.skill-item:hover div.fill:nth-child(11) {
	background:#FFD62C!important;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	transition:all 0.5s ease;
	
}
.skill-item:hover div.fill:nth-child(10) {
	background:#FFD62C!important;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	transition:all 1s ease;
}
.skill-item:hover div.fill:nth-child(9) {
	background:#FFD62C!important;;
	-webkit-transition:all 1.5s ease;
	-moz-transition:all 1.5s ease;
	transition:all 1.5s ease;
}
.skill-item:hover div.fill:nth-child(8) {
	background:#FFD62C!important;;
	-webkit-transition:all 2s ease;
	-moz-transition:all 2s ease;
	transition:all 2s ease;
}
.skill-item:hover div.fill:nth-child(7) {
	background:#FFD62C!important;;
	-webkit-transition:all 2.5s ease;
	-moz-transition:all 2.5s ease;
	transition:all 2.5s ease;
}
.skill-item:hover div.fill:nth-child(6) {
	background:#FFD62C!important;;
	-webkit-transition:all 3s ease;
	-moz-transition:all 3s ease;
	transition:all 3s ease;
}
.skill-item:hover div.fill:nth-child(5) {
	background:#FFD62C!important;;
	-webkit-transition:all 3.5s ease;
	-moz-transition:all 3.5s ease;
	transition:all 3.5s ease;
}
.skill-item:hover div.fill:nth-child(4) {
	background:#FFD62C!important;;
	-webkit-transition:all 4s ease;
	-moz-transition:all 4s ease;
	transition:all 4s ease;
}
.skill-item:hover div.fill:nth-child(3) {
	background:#FFD62C!important;
	-webkit-transition:all 4.5s ease;
	-moz-transition:all 4.5s ease;
	transition:all 4.5s ease;
	
}
.skill-item:hover div.fill:nth-child(2) {
	background:#FFD62C!important;
	-webkit-transition:all 5s ease;
	-moz-transition:all 5s ease;
	transition:all 5s ease;
	
}
.skill-item:hover div.fill:nth-child(1) {
	background:#FFD62C!important;
	-webkit-transition:all 5.5s ease;
	-moz-transition:all 5.5s ease;
	transition:all 5.5s ease;
	
}

/*blog section*/

.section-blog .section-title h1 {
color: #fff;
margin: 46px 0 0 0;
}
.blog-item {
display: inline-block;
width: 480px;
margin: 00 20px 0 0;
vertical-align: top;
}
.blog-item .blog-img img{
    width: 100%;
}

.section-blog .caroufredsel_wrapper {
min-height: 650px!important;
width: 100%!important;
max-width: 1000px;
margin: 60px auto 0 auto!important;
}
.next-prev-holder .next-btn,.next-prev-holder .prev-btn{
    display: block;
width: 65px;
  background-image: url(../images/navigation.png);
height: 55px;

}

.next-prev-holder .next-btn{
  float: right;
   background-position: -63px 0;
}

.next-prev-holder .prev-btn{
  float: left;
    background-position: 0 0;
}

.blog-img {
height: 330px;
overflow: hidden;
position: relative;
}

.blog-title,.blog-title a{
    color: #FEDC00;
}
.blog-title {
     text-transform: capitalize;

display: inline-block;
font-size: 30px;
margin: 16px 0 0 16px;
}
.blog-date {
color: #fff;
display: inline-block;
float: left;
margin: 35px 0 0 0;
position: relative;
}
.blog-excertp {
color: #fff;
font-size: 15px;
width: 340px;
margin: 0 0px 0 18%;
}

.blog-date:before {
content: "";
position: absolute;
width: 80%;
height: 2px;
top: -14px;
background-color: #fff;
}
.blog-img a{
    display: block;
    width: 100%;
    height: 100%;
}
.blog-img a:after{
    content: "";
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    top:0;
    position: absolute;
    opacity: 0;
}
.blog-img a:hover:after{
    opacity: 1;
}


/*section-testimonial*/

.section-testimonial {
background-image: url(../images/referencebg.jpg);
background-position: top center;
background-size: cover;
min-height: 300px;
background-repeat: no-repeat;
}

.testi-item {
display: inline-block;
width: 240px;
margin: 67px 30px 0 0;
position: relative;
}

.testimonial-holder {
max-width: 940px;
margin: auto;
text-align: center;
min-height: 565px;
}
.testi-info-holder{
    background-color: #FEDC00;
    color:#000;
    padding: 10px 0;
}
.testi-info-holder h4 {
text-transform: capitalize;
font-size: 22px;
line-height: 25px;
}
.testi-item:hover h4{
    color:#FEDC00;
}
.testi-item:hover h5{
    color:#fff;
}
.testi-item:hover .testi-info-holder{
    background-color: #000000;
}
.testi-info-holder h5{
    font-style: italic;
     text-transform: capitalize;
    font-weight: normal;
    line-height: 25px;
font-size: 17px;
}

.testi-img {
overflow: hidden;
height: 365px;
position: relative;
}

.testi-text {
position: absolute;
top: 0;
bottom: 0;
color: #fff;
right: 0;
width: 90%;
height: 50%;
margin: auto;
left: 0;
opacity: 0;
}
.testi-item:hover .testi-text{
    opacity: 1;
}
.testi-img:before{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    opacity: 0;
    background-color: rgba(0,0,0,0.6);
}
.testi-item:hover .testi-img:before{
    opacity: 1;
        
}


/*Purchase section*/

.section-purchase h5{
 color: #fff;
text-transform: capitalize;
font-size: 18px;
font-weight: normal;
line-height: 23px;
}

.section-purchase h4{
    color:#fff;
    text-transform: uppercase;
    font-size: 30px;
line-height: 30px;
}
.mx-button-yellow{
text-transform: uppercase;
display: inline-block;
background-color: #FEDC00;
font-size: 17px;
font-weight: bold;
padding: 11px 30px;
line-height: 23px;
border-radius: 5px;
color: #000;

}


.mx-button-yellow:hover{
    color:#000;
    background-color: #ddd;
}


.purchase-btn-holder{
    text-align: center;
    margin: 5px 0 0 0;
}

.purchase-holder {
    min-height: 100px;

margin: 40px auto auto;
}


/*contact section*/

.section-contact{
    background-image: url(../images/contactbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    min-height: 575px;
}



.map-holder img {
  max-width: none;
}
.map-holder label {
  width: auto;
  display: inline;
}
.map-holder {
  padding: 5px;
  background-color: #fff;
}
.map-holder {
  width: 100%;
  margin-bottom: 35px;
  height: 270px;
}
.map{
    width: 100%;
    height: 100%;
}


.contact-form input:not(.submit),
.contact-form textarea {
 background-color: transparent;
border: 1px solid #ccc;
color: #fff;
outline: none;
padding: 0 5px;
 -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  -webkit-transition: all 100ms ease-out;
}
.contact-form input:not(.submit):focus,
.contact-form textarea:focus {
background-color: rgba(255,255,255,0.1);
border: 1px solid #ddd;
outline: none;
 
}
#loading {
  visibility: hidden;
  float: right;
}
.controls {
    margin: 0 0 17px 0;
  position: relative;
}
.controls label {
    text-transform: capitalize;
 font-size: 14px;
color: #7D7D7D;
display: block;
line-height: 18px;
}
.controls i {
  font-size: 17px;
  left: 7px;
  text-shadow: none;
  position: absolute;
  top: 30px;
  color: #676767;
}
label.error {
  color: #ED3723;
  font-size: 13px;
  text-shadow: none;
}

.contact-section-holder {

margin: 57px auto auto auto;
}

.contact-info-holder {
color: #fff;
}

.contact-info-holder h5 {
text-transform: uppercase;
font-size: 18px;
line-height: 20px;
margin-bottom: 18px;
}

.info-item {
font-size: 14px;
line-height: 15px;
font-weight: bold;
}
.adress-field{
    margin-bottom:14px;
}

.info-item label {
text-transform: capitalize;
margin-right: 10px;
}


input.submit {
background-color: transparent;
border: 1px solid #ccc;
border-radius: 3px;
color: #7D7D7D;
text-transform: uppercase;
font-size: 13px;
padding: 3px 0px;
font-weight: 800;
}

input.submit:focus,input.submit:hover {
background-color: rgba(255,255,255,0.1);
border: 1px solid #ddd;
outline: none;
color: #fff;

}




/*Footer section*/

.section-footer{
    min-height: 380px;
}
 .footer-column-holder{
        margin-bottom: 20px;
       
    }
.footer-column-holder h5{
    color:#fff;
    position: relative;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 19px;
    line-height: 20px;
}
.footer-column-holder h5:after{
    content: "";
    display: block;
    width: 20%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom:-4px;
}

.footer-holder {
max-width: 970px;
margin: 57px auto auto auto;
}

.footer-image-item {
width: 100px;
display: inline-block;
margin: 10px 5px -8px 0;
overflow: hidden;
height: 100px;
}
.footer-image-item img{
    width: 100%;
}
.footer-image-item a:hover{
    border:4px solid #FEDC00;
}
.footer-image-item a{
   display: inline-block;
    
    
}

.mx-link-list {
padding: 18px 0 0 0;
text-transform: capitalize;
list-style: none;
}

.mx-link-list li {
border-bottom: 1px solid #ccc;
padding: 5px 0;
font-size: 15px;
}



/*Social secion*/
.section-social{
    background-color: #292929;
text-align: center;
min-height: 128px;
}

.section-social ul{
    list-style: none;
    padding: 0;
    display: inline-block;
}
.section-social ul li{
    display: inline-block;
  
}
.section-social ul li a{
      color:#393939;
}
.section-social ul li a:hover{
    color:#FEFEFE;
}
.section-social ul li a,.section-social ul li,.section-social  h5{
    text-transform: uppercase;
}

.section-social ul li a {
font-size: 15px;
}
.social-holder ul li {
margin-right: 10px;
}
.section-social ul li a:before {
font-size: 22px;
width: 22px;

}
.section-social h5 {
font-size: 17px;
line-height: 17px;
font-weight: 100;
color:#3D3D3D;
}
.section-social h5, .social-holder ul li {
    display: inline-block;
}
.section-social .social-holder {
margin: 50px 0 0;
}


/*section copyright*/
.section-copyright{
     background-image: url(../images/contactbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
   min-height: 275px;
    text-align: center;
}
.logo-holder{
   text-align: center;
margin: 40px 0 38px;
}
.logo-holder .logo-item{
    display: inline-block;
    margin-right: 10px;
}
.copyright-text a{
    color:#FEDC00;
}
.copyright-text a:hover{
    color:#fff;
}
.copyright-links a{
    text-transform: uppercase;
    color:#fff;
    font-size: 12px;
    font-weight: bold;
}
.copyright-links a:hover{
    color:#FEDC00;
}
.copyright-links {
margin: 10px 0 0;
}
.copyright-text {
color: #fff;
font-weight: bold;
font-size: 15px;
}




/* ---- Single Post styles ---- */



.single-post-title {
text-align: center;
text-transform: uppercase;
margin: 47px 0 0;
}
.single-post-title h1 {
color: #FEDC00;
font-size: 50px;
line-height: 50px;
}

.single-post-date{
    text-align: center;
    color:#FEDC00;
}
.single-post-date:before {
position: absolute;
width: 70px;
height: 2px;
left: 0;
right: 0;
margin: auto;
top: -11px;
content: "";
background-color: #fff;
}

.single-post-date {
text-align: center;

color: #fff;
font-weight: 100;
font-size: 18px;
margin: 20px 0px 0px;
position: relative;

}
.section-post .container{
    max-width: 900px;
margin: auto;
}
.single-post-slider-holder {
max-width: 900px;

margin: 7px auto auto auto;
position: relative;
}
.single-post-slider-holder .next-prev-holder {
position: absolute;
z-index: 200;
width: 100%;
top: 50%;
}
.single-post-slide-item{
    max-width: 900px;
    display: inline-block;
}
  .section-post .caroufredsel_wrapper{
margin-right: auto!important;
margin-left: auto!important;
    }
.single-post-img img{
    width: 100%;
}
.single-post-content {
margin: 31px 0 0 0;
color: #fff;
}

.single-post-social-buttons {
margin: 40px 0 0;
}

.counter-holder,.comment-form-holder h4 {
background-color: #424147;
display: inline-block;
text-transform: uppercase;
margin: 0 0 31px;
padding:5px 16px;
color:#FEDC00;
font-size: 20px;
}

.single-post-comments-holder {
margin: 77px 0 0;
}

.comment-item .avatar {
width: 55px;
}
.comment-item .avatar img {
width: 100%;
}
.comment-details div  a{
    
}
.comment-details div,.comment-details div  a {
display: inline-block;
color: #FEDC00;
font-size: 18px;
font-weight: 100;
}

.comment-details div {
margin-right: 15px;
}
.comment-details div:after {
content: "/";
margin-left: 10px;
}
.comment-details div:last-child:after{
    display: none;
}

.comment-body {
color: #fff;
margin: 10px 0 0;
text-transform: capitalize;
}

.comment-item {
margin: 0 0 56px 0;
}

.comment-item.thread {
margin: 0 0 0 80px;
}
.comment-form-holder h4 {
margin: 8px 0 18px 0;
}
#popular {
margin: 110px 0 0 0;
}