.page-content {
  width: 100%;
  margin: 0 auto;
  float: left;
}

.page-content.colored {
  background: #232323;

    border-top: 1px solid #4f4f4f;

    border-bottom: 1px solid #4f4f4f;

    padding-top: 80px;

    margin-bottom: 80px;

}



.page-content.colored:last-of-type{

    margin-bottom: 0;

}



/* ==========================================================================

    2. TYPOGRAPHY

============================================================================= */

p {

  text-align: justify;

}

.haunt_details {

    color: #ededed;

  text-align: left;

  font-weight: bold;

}



a.read-more{

    float: right;

    font-family: 'Oswald', Arial, sans-serif;

    text-transform: uppercase;

    padding-top: 5px;

}



a{

  -webkit-transition: all 0.2s ease 0s;

  -moz-transition: all 0.2s ease 0s;

  -o-transition: all 0.2s ease 0s;

  -ms-transition: all 0.2s ease 0s;

  transition: all 0.2s ease 0s;

  color: #FF9E00;

}





/* ========================================================================== 

    4.1. PAGE TITLE 

============================================================================= */

#page-title{

    font-size: 11px;

    color: #ededed;

    width: 100%;

    padding: 8px 0;

    margin-bottom: 0;

    border-top: 1px solid #000;

    border-bottom: 1px solid #000;

}

#page-title.empty-title {

    padding: 3px 0;

}

#page-title.page-title-1{

  background-color: #FF9600;



  background-repeat: no-repeat;

  background-position: center 0;

}



#page-title.page-title-2{    

    background-color: #FF9600;



    background-repeat: repeat-x;

}



#page-title.page-title-3{

  background-color: #002235;

  background-repeat: repeat-x;

}



#page-title.page-title-4{    

    background-color: #444;



    background-repeat: repeat-x;

    border-top: 1px solid #4f4f4f;

    border-bottom: 1px solid #4f4f4f;

}



#page-title .title{

    width: 100%;

    margin-bottom: 3px;

}



#page-title h1{

  display: inline;

  font-size: 15px;

  letter-spacing:1px;

  font-weight: bold;

  color: #FFFFFF;

  /* [disabled]background-color: #FF9600; */

  padding: 0 3px;

  text-transform: none;

}



#page-title .subtitle{

    width: 100%;

    margin-top: 10px;

}



#page-title .subtitle span{

  font: 14px 'Open Sans', Arial, sans-serif;

  padding: 5px 8px;

  color: #000000;

}



/* ==========================================================================

    4.2. DIVIDERS

============================================================================= */

.divider-blank{

    margin-bottom: 40px;

    width: 100%;

    float: left;

}



.divider{

    width: 100%;

    height: 1px;

    background: url('../img/divider.png') repeat-x;

}



/* ==========================================================================

    4.3. ACCORDION

============================================================================= */

.accordion .title a{

    font-size: 14px;

  width: 100%;

  display: block;

  

  box-sizing: border-box;

}



.accordion .title span{

    padding-right: 10px;

    font-size: 16px;

}



.accordion .title, 

.accordion .content{

    padding-bottom: 10px;

    float: left;

    cursor: pointer;

    width: 100%;

  

  box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



.accordion .content{

    padding-left: 26px;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



.accordion .title.active a{

    color: #ddd;

    font-weight: 600;

}



.accordion .title a:hover{

    color: #ddd;

}



/* ========================================================================== 

    4.4. ACCORDION FAQ PAGE (ICONS PLUS AND MINUS FOR ACCORDION TITLES)

============================================================================= */

.accordion.faq .title{

    background: url('../img/accordion.png') no-repeat 0 0;

    padding-left: 50px;

    float: left;

}



.accordion.faq .title a, 

.accordion.faq .title.active a{

    position: relative;

    top: 4px;

}



.accordion.faq .content{

    padding-left: 50px;

    float: left;

}



.accordion.faq .content, 

.accordion.faq .title{

    padding-bottom: 30px;

}



/* ==========================================================================

    4.5. BLOCKQUOTE

============================================================================= */

blockquote{

    background: #333;

    width: 100%;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;



    font: 14px 'Open Sans', Arial, sans-serif;

    line-height: 22px;

    font-style: italic;

    font-weight: 300;



    float: left;

}



blockquote p{ 

    padding-top: 20px;

    padding-left: 20px;

    padding-right: 20px;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;



}



cite{

    font-size: 12px;

    padding: 10px 0 20px;

    display: block;

    width: 100%;

    font-weight: 400;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



p + blockquote, 

blockquote + p{

    display: block;

    margin-top: 14px;

    float: left;

}



blockquote.style-2{

    width: 100%;

    background: none;

    padding-left: 40px;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;



    font: 14px 'Open Sans', Arial, sans-serif;

    line-height: 22px;

    font-style: italic;

    font-weight: 300;



    float: left;  

}



/* ==========================================================================

    4.6. BUTTONS

============================================================================= */

.btn-big{

    padding: 10px 17px;

    font: 14px 'Open Sans', Arial, sans-serif;

    text-transform: uppercase;

    background: #222;

    color: #fff;



    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;

}



.btn-big:hover{

    color: #fff;

}



.btn-medium{

    padding: 9px 15px;

    font: 13px 'Open Sans', Arial, sans-serif;

    text-transform: uppercase;

    background: #222;

    color: #fff;



    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;

}



.btn-medium:hover{

    color: #fff;

}



.btn-big{

    padding: 8px 13px;

    font: 12px 'Open Sans', Arial, sans-serif;

    text-transform: uppercase;

    background: #222;

    color: #fff;



    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;

}



.btn-medium:hover{

    color: #fff;

}



/* ==========================================================================

    4.7. CENTERED HEADINGS (LIKE INTRO NOTE BUT SMALLER BOTTOM MARGIN)

============================================================================= */

.heading-centered{

    width: 100%;

    margin-bottom: 50px;

}



.heading-centered h1, 

.heading-centered h2, 

.heading-centered h3, 

.heading-centered h4, 

.heading-centered h5, 

.heading-centered h6{

    width: 100%;

    text-align: center;

    margin-bottom: 15px;

}



.heading-centered p{

    width: 100%;

    text-align: center;

    margin-bottom: 15px;

}



/* ==========================================================================

    4.8. LIST CLASSIC

============================================================================= */

.list-classic li{

    padding-bottom: 5px;

}



/* ===========================================================================

    4.9. ICONS LIST 

============================================================================= */

.icons-list li a, 

.icons-list li p{

    padding-left: 10px;

    display: inline;

}



.icons-list li{

    padding-bottom: 3px;

}



/* ==========================================================================

    4.10. INTRO NOTE

============================================================================= */

.intro-note h2{

    width: 100%;

    text-align: center;

    margin-bottom: 15px;

}



.intro-note p{

    text-align: center;

    width: 100%;

    font-size: 15px;

    font-weight: 300;

}



/* ==========================================================================

    4.11. TABS HORIZONTAL

============================================================================= */

.tabs{

    overflow: hidden;

    float: left;

}



.tabs i{

    padding-right: 5px; 

    font-size: 13px;

}



.tabs li{

    float: left;

    border-left: 1px solid #4f4f4f;

    overflow: hidden;

    position: relative;

    padding: 0;

    line-height: 32px;

}



.tabs li a{    

    color: #aaa;    

    padding: 0px 16px;

    font: 12px 'Open Sans', Arial, sans-serif;

    line-height: 33px;

    padding-top: 2px;

}



.tabs li.active{

    border-bottom: 1px solid #4f4f4f;    

    background: #333;

}



.tabs li:first-child{

    border-left: none;

}



.tabs li.active:first-child{

    border-left: 1px solid #4f4f4f;

}



.tabs li.active:last-child{

    border-right: 1px solid #4f4f4f;

}



.tab-content-wrap{

    border-top: 1px solid #4f4f4f;    

    margin-top: -1px;

    overflow: hidden;

    float: left;

}



.tab-content{

    padding-top: 15px;

}



/* ========================================================================== 

    4.12. TABS VERTICAL 

============================================================================= */

*[class*="grid_"].tabs.vertical, 

*[class*="grid_"].tabs.vertical li.active{

    overflow: visible;

}



.tabs.vertical{

    overflow: hidden;

    float: left;

}



.tabs.vertical li{

    float: left;

    background: #333;

    border-bottom: 1px solid #4f4f4f;

    border-right: 1px solid #4f4f4f;

    border-left: 1px solid #4f4f4f;

    border-top: none;

    overflow: hidden;

    padding: 0;

    line-height: 42px;

    width: 100%;



    box-sizing: border-box;

    -moz-box-sizing: border-box;

}



.tabs.vertical li:first-child{

    border-top: 1px solid #4f4f4f !important;

}



.tabs.vertical li a{    

    color: #aaa;    

    padding: 15px;

    font: 13px 'Open Sans', Arial, sans-serif;

    float: left;

    width: 100%;

    box-sizing: border-box;

}



.tabs.vertical li a i{

    font-size: 16px;

    padding-right: 15px;

    position: relative;

    top: 2px;

}



.tabs.vertical li.active{

    border-bottom: 1px solid #4f4f4f;

    border-right: none;

    border-top: none;

    background: #fff;

    position: relative;

}



.tabs.vertical li.active:after{

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    right: -10px;

    top: 50%;

    margin-top: -10px;

}



.tabs.vertical li.active a{

    color: #fff;

}



.tab-content-wrap.vertical{  

    margin-top: 0;

    overflow: hidden;

    float: left;

    border: none;

}



.tab-content-wrap.vertical .tab-content{

    padding: 0;

}



/* ==========================================================================

    4.13. NOTE & NOTE WITH BUTTON STYLES

============================================================================= */

.note{

    width: 100%;

    background: #333;

    border-left: 3px solid #4f4f4f;

    padding: 30px;

    position: relative;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: boder-box;

}



.note .icon{

    width: 60px;

    height: 60px;

    float: left;

    background: #555;

    margin-right: 30px;



    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

}



.note i{

    width: 60px;

    height: 60px;

    color: #fff;

    font-size: 24px;

    text-align: center;

    display: table-cell;

    vertical-align: middle;

}



.note .text{

    float: left;

    position: relative;

    padding-top: 3px;

}



.note .text h3{

    margin-bottom: 10px;

}



.note a.btn-big{

    float: right;

    position: absolute;

    right: 45px;

    top: 50%;

    margin-top: -20px;

    display: block;

}



/* NOTE STYLE 1 VARIOUS COLUMN WIDTH STYLES */

.grid_3 .note.style-1 .text{width: 100%; text-align:center;}

.grid_3 .note.style-1 a.btn-big{position: relative; margin-top: 20px; float: left; left:0px;}



.grid_4 .note.style-1 .text{width: 100%}

.grid_4 .note.style-1 a.btn-big{position: relative; margin-top: 20px; float: left; left:0px;}



.grid_5 .note.style-1 .text{width: 240px;}

.grid_6 .note.style-1 .text{max-width: 340px;}

.grid_7 .note.style-1 .text{max-width: 440px;}

.grid_8 .note.style-1 .text{max-width: 540px;}

.grid_9 .note.style-1 .text{max-width: 640px;}

.grid_12 .note.style-1 .text{max-width: 940px;}



/* NOTE STYLE 2 VARIOUS COLUMN WIDTH STYLES */

.grid_3 .note.style-2 .text{width: 100%;}

.grid_3 .note.style-2 .icon{margin: 0 auto 20px; float: none; display: table;}

.grid_3 .note.style-2 a.btn-big{position: relative; margin-top: 20px; float: left; left:0;}



.grid_4 .note.style-2 .text{width: 217px;}

.grid_4 .note.style-2 a.btn-big{position: relative; margin-top: 20px; float: left; left:90px;}



.grid_5 .note.style-2 .text{width: 317px;}

.grid_5 .note.style-2 a.btn-big{position: relative; margin-top: 20px; float: left; left:90px;}



.grid_6 .note.style-2 .text{max-width: 250px;}

.grid_7 .note.style-2 .text{max-width: 350px;}

.grid_8 .note.style-2 .text{max-width: 450px;}

.grid_9 .note.style-2 .text{max-width: 550px;}

.grid_12 .note.style-2 .text{max-width: 850px;}



/* ==========================================================================

    4.14. IMAGE BOXES (ENLARGE ON HOVER EFFECT)

============================================================================= */

.image-box{

    width: 100%;

}



.image-box h1, 

.image-box h2,

.image-box h3,

.image-box h4, 

.image-box h5,

.image-box h6{

    margin-bottom: 15px;

}



.image-box .img-container{

    overflow: hidden;

    margin-bottom: 20px;

    width: 100%;

}

.image-box img{

    cursor: pointer;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.image-box img:hover{

    transform: scale(1.3) rotate(10deg);

    -webkit-transform: scale(1.3) rotate(10deg);

    -moz-transform: scale(1.3) rotate(10deg);

    -o-transform: scale(1.3) rotate(10deg);

    -ms-transform: scale(1.3) rotate(10deg);

}





/* ==========================================================================

    4.15. NUMBERS COUNTER

============================================================================= */

.numbers-counter li{

    float: left;

    margin-right: 30px;

}



.numbers-counter .timer{

    font: 36px 'Oswald', Arial, sans-serif;

}



/* ==========================================================================

    4.16. TESTIMONIAL CAROUSEL STYLE 1

============================================================================= */

.testimonial-carousel{

    float: left;

    width: 100%;

}



.testimonial-carousel .caroufredsel_wrapper{

    width: 100% !important;

}



.testimonial-carousel .carousel-li{

    width: 100% !important;

}



.testimonial-carousel li{

    border: none;

    background: none;

    padding: 0;

    float: left;

    margin-right: 10px;

}



.testimonial-carousel .carousel-li > li{

    width: 100% !important;

}



.testimonial-carousel .content{

    background: #333;

    padding: 15px;

    position: relative;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

    margin-bottom: 25px;

}



.testimonial-carousel .content:after{

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    width: 0; 

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;



    border-top: 10px solid #333;

    left: 20px;

    bottom: 0;

    margin-bottom: -10px;

}



.testimonial-carousel .author img{

    width: 71px;

    height: 71px;

    margin-right: 15px;

    float: left;

}



.testimonial-carousel .author .name{

    font-size: 15px;

    color: #aaa;

    padding-top: 10px;

}



.testimonial-carousel .author .company{

    font-style: italic;

    font-weight: 300;

}



/* ==========================================================================

    4.17. TESTIMONIAL CAROUSEL STYLE 2

============================================================================= */

.testimonial-carousel.style-2 .author{

    background: url('../img/testimon.png') no-repeat 0 0;

    padding-left: 40px;

}



.testimonial-carousel.style-2 .author .name{

    padding-top: 0px;

}



/* ==========================================================================

    4.18. TEAM CAROUSEL

============================================================================= */

.team-carousel .caroufredsel_wrapper{

    width: 1170px !important;

    float: left !important;

}



#team-carousel > li{

    width: 270px !important;

    margin-right: 30px;

    float: left;

}



.team-img-container{

    width: 270px;

    height: 310px;

    margin-bottom: 20px;

    overflow: hidden;

}



.team-img-container img{

    width: 270px;

    height: 310px;

    opacity: 0.7;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    cursor: pointer;

}



.team-img-container img:hover{

    opacity: 1;

    transform: scale(1.2) rotate(10deg);

    -webkit-transform: scale(1.2) rotate(10deg);

    -moz-transform: scale(1.2) rotate(10deg);

    -o-transform: scale(1.2) rotate(10deg);

    -ms-transform: scale(1.2) rotate(10deg);

    width: 270px;

    height: 310px;

}



.team h1, 

.team h2, 

.team h3, 

.team h4, 

.team h5, 

.team h6{

    margin-bottom: 5px;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.team span.position{

    width: 100%;

    margin-bottom: 15px;

    display: block;

}



.team-social-links{

    width: 100%;

    margin-top: 15px;

    float: left;

}



.team-social-links li{

    float: left;

    margin-right: 20px;

}



.team-social-links li a{

    font-size: 16px;

    color: #aaa;

}





/* ==========================================================================

    4.19. CAROUSELS NAVIGATION ARROWS AND TITLE

============================================================================= */

.carousel-title{

    float: left;

    width: 100%;

}



.carousel-title h3{

    display: inline;

    float: left;

}



.carousel-nav-container{

    float: left;

    margin-left: 30px;

}

.carousel-nav{

    position: relative;

    width: 100%;

}



.carousel-nav li{

    float: left;

    width: 22px;

    height: 22px;

    background-color: #555;

    margin-right: 5px;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.carousel-nav li a.c_next{

    background-image: url('../img/carousel-right-hover.png');

    background-repeat: no-repeat;

    background-position: center;

    float: left;

    width: 100%;

    height: 100%;

} 



.carousel-nav li a.c_prev{

    background-image: url('../img/carousel-left-hover.png');

    background-repeat: no-repeat;

    background-position: center;

    display: block;

    float: left;

    width: 100%;

    height: 100%;

}



.carousel-nav li a.c_next:hover{

    background-image: url('../img/carousel-right-hover.png');

}



.carousel-nav li a.c_prev:hover{

    background-image: url('../img/carousel-left-hover.png');

}





/* ========================================================================== 

    4.20. SERVICE BOXES

============================================================================= */

.service-box{

    cursor: pointer;

    float: left;

}



.service-box .content a h3{

    margin-bottom: 3px;

    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;

}



.service-box .content span{

    text-transform: uppercase;

    width: 100%;

    display: block;

}



/* SERVICE BOX STYLE 1 (RECTANGLE WITH AROOW)

----------------------------------------------------------------------------- */



.service-box.style-1 .icon{

    float: left;

    font-size: 28px;

    color: #fff;

    padding: 15px;

    float: left;

    position: relative;

    margin-right: 30px;

    background-color: #333;

    width: 58px;

    height: 58px;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



.service-box.style-1 .icon:after{

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    right: -10px;

    top: 50%;

    margin-top: -10px;

    border-left: 10px solid #333;

}



.service-box.style-1 .content, 

.service-box.style-1 .description{

    padding-left: 90px;

}



.service-box.style-1 .content{

    padding-top: 3px;

    margin-bottom: 20px;

    float: none;

}



.service-box .content a{

    float: left;

    width: 100%;

}



/* SERVICE BOX STYLE 2 (ROUNDED SERVICES ICONS)

----------------------------------------------------------------------------- */

.service-box.style-2 .icon{

    float: left;

    font-size: 28px;

    color: #fff;

    padding: 15px;

    position: relative;

    margin-right: 30px;

    background-color: #333;



    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;



    width: 58px;

    height: 58px;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;



    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;

}



.service-box.style-2 .content{

    padding-left: 90px;

    padding-top: 3px;

    margin-bottom: 20px;

    float: none;

}



.service-box.style-2 .description{

    width: 100%;

    float: left;

}



.service-box.style-2:hover .icon{

    animation: serviceanimation linear 2s infinite;

    -webkit-animation: serviceanimation linear 2s infinite;

    -moz-animation: serviceanimation linear 2s infinite;



}



@keyframes serviceanimation{

    from {

    transform: rotate(0deg);}



to {

    transform: rotate(360deg);}

}



@-webkit-keyframes serviceanimation{

    from {

    -webkit-transform: rotate(0deg);}



to {

    -webkit-transform: rotate(360deg);}

}



@-moz-keyframes serviceanimation{

    from {

    -moz-transform: rotate(0deg);}



to {

    -moz-transform: rotate(360deg);}

}



/* SERVICE BOX STYLE 3 (ICONS WITHOUT ANY BACKGROUND)

----------------------------------------------------------------------------- */

.service-box.style-3 .icon{

    font-size: 28px;

    color: #ddd;

    float: left;

    position: relative;

    margin-right: 10px;

    width: 40px;

    height: 48px;

    padding-top: 5px;

}



.service-box.style-3 .content{

    padding-left: 50px;

}



.service-box.style-3 .description{

    margin-top: 20px;

}



/* ==========================================================================

    4.21. CLIENTS LIST

============================================================================= */

.clients-list li{

    width: 170px;

    height: 60px;

    margin-right: 15px;

    margin-left: 15px;

    float: left;

}



*[class*="grid_"] .clients-list li:first-child{

    margin-left: 0;

}



*[class*="grid_"] .clients-list li:last-child{

    margin-right: 0;

}



.clients-list li img{

    opacity: 0.8;

    max-width: 100%;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.clients-list li:hover img{

    opacity: 1;

}



/* ==========================================================================

    4.22. SKILLS BAR

============================================================================= */

.skills-bar{

    width: 100%;

    position: relative;

    float: left;

}



.skills{

    padding-top: 20px;

    display: block;

}



.skills li em{

    position: relative;

    top: -23px;

    font: 11px Arial, sans-serif;

    font-style: normal;

}



.skills li{

    display: block;

    height: 15px;

    margin-bottom: 35px;



    background: #444;



    border: 1px solid #4f4f4f;



    box-sizing: border-box;

    -moz-box-sizing: border-box;

}



.expand{

    height: 13px;

    position: absolute;

    margin-top: -1px;

}



.skills .percentage-10      { width:10%;  -moz-animation:percentage-10 2s ease-out;       -webkit-animation:percentage-10 2s ease-out;}

.skills .percentage-20      { width:20%;  -moz-animation:percentage-20 2s ease-out;       -webkit-animation:percentage-20 2s ease-out;}

.skills .percentage-30      { width:30%;  -moz-animation:percentage-30 2s ease-out;       -webkit-animation:percentage-30 2s ease-out;}

.skills .percentage-40      { width:40%;  -moz-animation:percentage-40 2s ease-out;       -webkit-animation:percentage-40 2s ease-out;}

.skills .percentage-50      { width:50%;  -moz-animation:percentage-50 2s ease-out;       -webkit-animation:percentage-50 2s ease-out;}

.skills .percentage-60      { width:60%;  -moz-animation:percentage-60 2s ease-out;       -webkit-animation:percentage-60 2s ease-out;}

.skills .percentage-70      { width:70%;  -moz-animation:percentage-70 2s ease-out;       -webkit-animation:percentage-70 2s ease-out;}

.skills .percentage-80      { width:80%;  -moz-animation:percentage-80 2s ease-out;       -webkit-animation:percentage-80 2s ease-out;}

.skills .percentage-90      { width:90%;  -moz-animation:percentage-90 2s ease-out;       -webkit-animation:percentage-90 2s ease-out;}

.skills .percentage-100      { width:100%;  -moz-animation:percentage-100 2s ease-out;       -webkit-animation:percentage-100 2s ease-out;}



@-moz-keyframes percentage-10       { 0%  { width:0px;} 100%{ width:10%;}  }

@-moz-keyframes percentage-20        { 0%  { width:0px;} 100%{ width:20%;}  }

@-moz-keyframes percentage-30       { 0%  { width:0px;} 100%{ width:30%;}  }

@-moz-keyframes percentage-40  { 0%  { width:0px;} 100%{ width:40%;}  }

@-moz-keyframes percentage-50 { 0%  { width:0px;} 100%{ width:50%;} }

@-moz-keyframes percentage-60 { 0%  { width:0px;} 100%{ width:60%;} }

@-moz-keyframes percentage-70 { 0%  { width:0px;} 100%{ width:70%;} }

@-moz-keyframes percentage-80 { 0%  { width:0px;} 100%{ width:80%;} }

@-moz-keyframes percentage-90 { 0%  { width:0px;} 100%{ width:90%;} }

@-moz-keyframes percentage-100 { 0%  { width:0px;} 100%{ width:100%;} }



@-webkit-keyframes percentage-10       { 0%  { width:0px;} 100%{ width:10%;}  }

@-webkit-keyframes percentage-20        { 0%  { width:0px;} 100%{ width:20%;}  }

@-webkit-keyframes percentage-30       { 0%  { width:0px;} 100%{ width:30%;}  }

@-webkit-keyframes percentage-40  { 0%  { width:0px;} 100%{ width:40%;}  }

@-webkit-keyframes percentage-50 { 0%  { width:0px;} 100%{ width:50%;} }

@-webkit-keyframes percentage-60 { 0%  { width:0px;} 100%{ width:60%;} }

@-webkit-keyframes percentage-70 { 0%  { width:0px;} 100%{ width:70%;} }

@-webkit-keyframes percentage-80 { 0%  { width:0px;} 100%{ width:80%;} }

@-webkit-keyframes percentage-90 { 0%  { width:0px;} 100%{ width:90%;} }

@-webkit-keyframes percentage-100 { 0%  { width:0px;} 100%{ width:100%;} }



/* ==========================================================================

    4.23. LATEST BLOG POSTS 

============================================================================= */

.latest-posts{

    width: 100%;

}



.latest-posts .grid_4 .nivoSlider{

    min-height: 168px;

}



.latest-posts .grid_4 iframe{

    min-height: 168px;

}



.latest-posts .post-content-container{

    padding-left: 10px;

}



.latest-posts-2 .blog-post{

    float: left;

    width: 100%;

    margin-bottom: 20px;

}



.latest-posts-2 .blog-post:last-of-type{

    margin-bottom: 0;

}



.latest-posts-3{

    width: 100%;

    float: left;

}



.latest-posts-3  li{

    position: relative;

    display: inline-block;

    float: left;

    cursor: pointer;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;  

}



.latest-posts-3 .blog-post-item-active{

    padding-right: 260px;

}



.latest-posts-3 .blog-post-item-active .blog-post-item-desc{

    opacity: 1;

}



.latest-posts-3 li .blog-post-item-img{

    width: 265px;

    position: relative;

    z-index: 100;

    overflow: hidden;

    height: 140px;

    padding-right: 15px;

    overflow: hidden;

}



.latest-posts-3 .blog-post-item-desc{

    position: absolute;

    left: 250px;

    z-index: 50;

    overflow: hidden;

    padding-left: 15px;

    width: 250px;

    opacity: 0;

    top: 0;

}



.latest-posts-3 .blog-post-item-desc a h5{

    margin-bottom: 3px;

}



.latest-posts-3 .blog-post-item-desc span.date{

    font-style: italic;

    margin-bottom: 10px;

    width: 100%;

    display: block;

}



/* ==========================================================================

    4.24. DROPCAPS

============================================================================= */

span.dropcap-color{

    color: #fff;

    float: left;

    margin-right: 10px;

    font: 18px 'Open Sans', Arial,sans-serif;

    line-height: 18px;

    padding: 8px 10px;

    position: relative;

    top: 3px;

}



span.dropcap{

    color: #fff;

    background: #555;

    float: left;

    margin-right: 10px;

    font: 18px 'Open Sans', Arial,sans-serif;

    line-height: 18px;

    padding: 8px 10px;

    position: relative;

    top: 3px;

}



/* ==========================================================================

    4.24. INFORMATIN BOXES

============================================================================= */

/* INFORMATION BOXES - INFO BOX

----------------------------------------------------------------------------- */

.infobox{

    background: #e0f2ff;

    border: 1px solid #c1def2;

    width: 100%;

    float: left;

    margin-bottom: 10px;

}



.infobox p{

    background: url('../img/info-box.png') no-repeat 0 center;

    margin: 10px;

    padding-left: 25px;

    color: #61adb0;

    text-shadow: 0 1px 0 #fff;

}





/* Infromation boxes - WARNING BOX

----------------------------------------------------------------------------- */

.warning-box{

    background: #f8f6bc;

    border: 1px solid #e7e48b;

    width: 100%;

    float: left;

    margin-bottom: 10px;

}



.warning-box p{

    background: url('../img/warning-box.png') no-repeat 0 center;

    margin: 10px;

    padding-left: 27px;

    color: #989426;

    text-shadow: 0 1px 0 #fff;

}



/* Infromation boxes - SUCCES BOX 

----------------------------------------------------------------------------- */

.success-box{

    background: #ebfdd7;

    border: 1px solid #cef4a4;

    border-radius: 3px;

    width: 100%;

    float: left;

    margin-bottom: 10px;

}



.success-box p{

    background: url('../img/success-box.png') no-repeat 0 center;

    margin: 10px;

    padding-left: 25px;

    color: #7eb244;

    text-shadow: 0 1px 0 #fff;

}



/* Infromation boxes - ERROR BOX

----------------------------------------------------------------------------- */

.error-box{

    background: #fadddd;

    border: 1px solid #fcc1c1;

    border-radius: 3px;

    width: 100%;

    float: left;

    margin-bottom: 10px;

}



.error-box p{

    background: url('../img/error-box.png') no-repeat 0 center;

    margin: 10px;

    padding-left: 25px;

    color: #d86d6d;

    text-shadow: 0 1px 0 #fff;

}



/* =============================================================================

    4.25. PRICING TABLES

============================================================================ */

.pricing-table-col{

    border: 1px solid #4f4f4f;

    float: left;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

}



.pricing-table-col .head{

    width: 100%;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    padding: 0;

}



.pricing-table-col .head h2{

    padding: 20px 0;

    text-align: center;

    margin-bottom: 0;

    font-size: 19px;

}



.pricing-table-col .head .price{

    background: #555;

    width: 100%;

    padding: 10px 0;

    text-align: center;

    border-top: 1px solid #4f4f4f;

    border-bottom: 1px solid #4f4f4f;

    display: block;

    font: 12px Arial, sans-serif;

    color: #aaa;

}



.head .price .text-color{

    font: 30px Arial, sans-serif;

}



.pricing-table-col.selected .head .price .text-color, 

.pricing-table-col.selected .head .price{

    color: #fff !important;

}



.pricing-table-col li{

    color: #aaa;

    padding: 8px;

    border-bottom: 1px solid #4f4f4f;

    border-top: 1px solid #4f4f4f;

    background: #444;

    text-align: center;

    width: 100%;

    float: left;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

}



.pricing-table-col li:first-child{

    border: none;

    float: none;

}



li.pricing-footer{

    height: auto !important;

    background: #555;

    width: 100%;

    float: left;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    border-top: none;

}



.pricing-footer .btn-small,

.pricing-footer .btn-medium,

.pricing-footer .btn-big{

    margin: 5px auto;

    display: table;

    float: none;

}



/* PRICING TABELS SECOND STYLE */

.pricing-table-col.labels{

    margin-top: 72px;

}



.pricing-table-col.labels .head{

    width: 100%;

    background: #f6f6f6;

    padding: 15px 20px;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    border-bottom: 1px solid #eee;

    text-align: left;

}



.pricing-table-col.labels .head i{

    font-size: 15px;

}



.pricing-table-col.labels .head h5{

    margin-bottom: 0;

    display: inline;

    padding-left: 10px;

}



.pricing-table-col.labels li{

    text-align: left;

    padding-left: 20px;

}

.pricing-table-col span.label{

    display: none;

}



/* ========================================================================== 

    5. PAGE SPECIFIC STYLES

============================================================================= */



/* ========================================================================== 

    5.1. 404 PAGE

============================================================================= */

#error-page02 .page-content{

    background: url('../img/404.jpg') no-repeat;

    background-size: 100%;

}

#error-page02 #page-title{

    margin-bottom: 0;

}



#error-page02 .row{

    margin-bottom: 0;

}

.error-page02-content{

    padding-top: 100px;

    padding-right: 490px;

    padding-bottom: 90px;

}



.error-page02-content h1, .error-page02-content p, 

.error-page-content h1, .error-page-content p{

    text-align: center;

}



.error-page02-content h1{

    color: #333;

}



.error-page02-content p{

    font-size: 17px;

    color: #666;

}



.error-page02-content .icons-list li a{

    color: #666;

}



.error-page02-content .icon-checkmark-circle-list li:before{

    color: #666;

}



#error-page-search form{

    position: relative;

    width: 250px;

    margin: 0 auto;

}



#error-page-search #search{

    background: #555;

    border: 1px solid #444 !important;

    width: 100%;

    display: block;

    font-size: 11px;

    font-family: 'Open Sans', Arial, sans-serif;

    color: #777;

    font-style: italic;

    left:0;

    top: 0;



    padding: 10px;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



#error-page02 #error-page-search #search{

    background: #fff;

    border: 1px solid #ddd !important;

}



.error-page02-content h4{

    color: #333;

}



#error-page-search .search-submit{

    background: url('../img/aside-search.png') center center no-repeat;

    width: 20px;

    height: 100%;

    border: none;

    text-indent: -9999px;

    position: absolute;

    float: left;

    cursor: pointer;

    right: 6px;

    top: 1px;

}



.error-page-big{

    font: 280px 'Oswald', Arial, sans-serif;

    font-weight: 300;

    line-height: 340px;

    text-align: center;

    display: block;

}



/* ==========================================================================
    5.2. PORTFOLIO ITEMS
============================================================================= */
.row.portfolioitems-holder{
    margin-bottom: 30px;
}

.page-content.colored .isotope-item figcaption{
    background: #333;
}

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

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

.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;
}

.row.portfolio-filters{
    margin-bottom: 30px;
}

#filters li{
    float: left;
    margin-right: 20px;
}

#filters li a{
    font: 14px 'Oswald', Arial, sans-serif;
    text-transform: uppercase;
}

.isotope-item{
    float: left;
    margin-bottom: 30px;
}

.isotope-item figcaption{
    width: 100%;
    padding: 15px 0;
    background: #333;
    border-bottom: 1px solid #444;
}

.isotope-item figcaption a, 
.isotope-item figcaption span{
    width: 100%;
    display: block;
    text-align: center;
}

.isotope-item figcaption a{
    font: 15px 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #ddd;
}

.masonry li{
    margin-right: 15px;
    margin-left: 15px;
}

.masonry .isotope-item.wh1, 
.masonry .isotope-item.wh4{
    width: 570px;
}

.masonry .isotope-item.wh2, 
.masonry .isotope-item.wh3{
    width: 270px;
}

.masonry.gallery li, 
.isotope.gallery li{
    margin-right: 1px !important;
    margin-left: 1px !important;
    margin-bottom: 2px;
}

.isotope.gallery.threecols > li{
    width: 388px;
    height: 283px;
}

.isotope.gallery.fourcols > li{
    width: 290px;
    height: 212px;
}

.masonry.gallery .isotope-item.wh1, 
.masonry.gallery .isotope-item.wh4{
    width: 582px;
}

.masonry.gallery .isotope-item.wh2, 
.masonry.gallery .isotope-item.wh3{
    width: 290px;
}

/* PORTFOLIO STYLES GLOBAL
============================================================================= */
.portfolio-style-1 .portfolio-img, 
.portfolio-style-2 .portfolio-img{
    position: relative;
    overflow: hidden;
    width: 100%;
}

.portfolio-style-1 .portfolio-img-hover .mask, 
.portfolio-style-2 .portfolio-img-hover .mask{
    background-color: #222;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

.portfolio-style-1 .portfolio-img-hover li, 
.portfolio-style-2 .portfolio-img-hover li{
    background: #222;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -22px;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.portfolio-style-1 .portfolio-img-hover li.portfolio-zoom, 
.portfolio-style-2 .portfolio-img-hover li.portfolio-zoom{   
    margin-left: -26px !important;
}

.portfolio-style-1 .portfolio-img-hover li.portfolio-single, 
.portfolio-style-2 .portfolio-img-hover li.portfolio-single{   
    margin-left: 5px !important;
}

.portfolio-style-1 .portfolio-img-hover li a, 
.portfolio-style-2 .portfolio-img-hover li a{
    width: 45px;
    height: 45px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: #eee;
}

/* PORTFOLIO STYLE 1 ANIMATION ON HOVER 
============================================================================= */

.portfolio-style-1 .portfolio-img-hover{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.isotope-item:hover .portfolio-style-1 .portfolio-img-hover{
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    opacity: 1;
}

/* PORTFOLIO STYLE 2 ANIMATION ON HOVER 
============================================================================= */
.portfolio-style-2 .portfolio-img-hover{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
    transform: scale(0,0);
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.isotope-item:hover .portfolio-style-2 .portfolio-img-hover{
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    opacity: 1;
}

.isotope-item .portfolio-style-2 .portfolio-img{
    width: 100%;
    overflow: hidden;
}

.isotope-item .portfolio-style-2 .portfolio-img img{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.isotope-item:hover .portfolio-style-2 .portfolio-img img{
    transform: scale(1.5) rotate(10deg);
    -webkit-transform: scale(1.5) rotate(10deg);
    -moz-transform: scale(1.5) rotate(10deg);
    -o-transform: scale(1.5) rotate(10deg);
    -ms-transform: scale(1.5) rotate(10deg);
}

/* GALLERY STYLE 2  AND STYLE 1 ANIMATION ON HOVER FOR 3 COLUMNS AND 4 COLUMNS
============================================================================= */
.isotope.gallery.threecols .portfolio-img,
.isotope.gallery.threecols .portfolio-img img{
    width: 388px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.isotope.gallery.fourcols .portfolio-img,
.isotope.gallery.fourcols .portfolio-img img{
    width: 290px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/* MASONRY HOVER FOR ALL PORTFOLIO THUMB TYPES
============================================================================= */
.masonry .isotope-item.wh1 .portfolio-img, 
.masonry .isotope-item.wh1 .portfolio-img img,
.masonry .isotope-item.wh1 .portfolio-style-2 .portfolio-img,
.masonry .isotope-item.wh1 .portfolio-style-2 .portfolio-img img{
    width: 570px;
    height: 495px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.masonry .isotope-item.wh2 .portfolio-img, 
.masonry .isotope-item.wh2 .portfolio-img img,
.masonry .isotope-item.wh2 .portfolio-style-2 .portfolio-img,
.masonry .isotope-item.wh2 .portfolio-style-2 .portfolio-img img{
    width: 270px;
    height: 197px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.masonry .isotope-item.wh3 .portfolio-img, 
.masonry .isotope-item.wh3 .portfolio-img img,
.masonry .isotope-item.wh3 .portfolio-style-2 .portfolio-img,
.masonry .isotope-item.wh3 .portfolio-style-2 .portfolio-img img{
    width: 270px;
    height: 495px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.masonry .isotope-item.wh4 .portfolio-img, 
.masonry .isotope-item.wh4 .portfolio-img img,
.masonry .isotope-item.wh4 .portfolio-style-2 .portfolio-img,
.masonry .isotope-item.wh4 .portfolio-style-2 .portfolio-img img{
    width: 570px;
    height: 197px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/* MASONRY HOVER FOR ALL GALLERY THUMB TYPES
============================================================================= */
.gallery .portfolio-style-1 .portfolio-img-hover li.portfolio-zoom, 
.gallery .portfolio-style-2 .portfolio-img-hover li.portfolio-zoom{   
    margin-left: -22px !important;
}

.masonry.gallery .isotope-item.wh1 .portfolio-img, 
.masonry.gallery .isotope-item.wh1 .portfolio-img img,
.masonry.gallery .isotope-item.wh1 .portfolio-style-2 .portfolio-img,
.masonry.gallery .isotope-item.wh1 .portfolio-style-2 .portfolio-img img{
    width: 582px;
    height: 426px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.masonry.gallery .isotope-item.wh2 .portfolio-img, 
.masonry.gallery .isotope-item.wh2 .portfolio-img img,
.masonry.gallery .isotope-item.wh2 .portfolio-style-2 .portfolio-img,
.masonry.gallery .isotope-item.wh2 .portfolio-style-2 .portfolio-img img{
    width: 290px;
    height: 212px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.masonry.gallery .isotope-item.wh3 .portfolio-img,
.masonry.gallery .isotope-item.wh3 .portfolio-img img,
.masonry.gallery .isotope-item.wh3 .portfolio-style-2 .portfolio-img,
.masonry.gallery .isotope-item.wh3 .portfolio-style-2 .portfolio-img img{
    width: 290px;
    height: 426px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.masonry.gallery .isotope-item.wh4 .portfolio-img, 
.masonry.gallery .isotope-item.wh4 .portfolio-img img,
.masonry.gallery .isotope-item.wh4 .portfolio-style-2 .portfolio-img,
.masonry.gallery .isotope-item.wh4 .portfolio-style-2 .portfolio-img img{
    width: 582px;
    height: 212px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/* ==========================================================================
    5.3. PORTFOLIO CAROUSEL
============================================================================= */
.isotope-item.carousel-four-cols .portfolio-style-2 .portfolio-img, 
.isotope-item.carousel-four-cols .portfolio-style-2 .portfolio-img img{
    width: 270px;
    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;  
}

#portfolio-carousel .isotope-item{
    margin-right: 30px;
    margin-bottom: 0;
}

#portfolio-carousel{
    height: 268px !important;
}

.social-feed .img-overlay:hover{
    opacity: 0.8;
}

/* ==========================================================================
    5.5. BLOG POSTS
============================================================================= */
.blog-posts li.blog-post{
    float: left;
    margin-bottom: 80px;
    width: 100%;
    position: relative;
}

/* STICKY BLOG POST */
.blog-posts li.blog-post.sticky .post-content{
    padding: 20px;
    background: #f6f6f6;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.post-info{
    width: 46px;
    height: 92px;
    float: left;
    position: absolute;
    z-index: 200;
}

.post-info .post-category{
    width: 46px;
    height: 46px;
    background-color: #333;
}

.post-info .post-category i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 22px;
    width: 46px;
    height: 46px;
}
.page-content.colored .post-info .post-date{
    background: #555;
}

.post-info .post-date{
    width: 46px;
    height: 46px;
    background-color: #555;
}

.post-info .post-date span{
    text-align: center;
    width: 100%;
    display: block;
}

.post-info .post-date .day{
    font: 18px 'Oswald', Arial, sans-serif;
    padding-top: 7px;
    line-height: 18px;
    color: #ddd;
}

.post-info .post-date .month{
    text-transform: uppercase;
    font-size: 12px;
}

.post-content-container{
    float: left;
    width: 100%;
    height:300px;
    padding-left: 5px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-bok;
}

.post-regular-container{
    float: left;
    width: 100%;
    height:150px;
    padding-left: 5px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-bok;
}

.post-image-container{
    overflow: hidden;
    width: 100%;
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    opacity: 1;
    margin-bottom: 5px;
}

.post-image-container img{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.post-image-container:hover img{
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    opacity: 0.7;
}

.post-content a h1,
.post-content a h2,
.post-content a h3, 
.post-content a h4, 
.post-content a h5,
.post-content a h6{
    margin-bottom: 10px;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.post-content-container .slider-wrapper{
    margin-bottom: 10px;
    float: left;
    width: 100%;
}

/* BLOG META */
.blog-meta{
    width: 100%;
    float: left;
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid #4f4f4f;
    border-bottom: 1px solid #4f4f4f;
    margin-bottom: 3px;
}

.blog-meta li{
    float: left;
    margin-right: 10px;
}

.blog-meta li.post-tags a:first-child{
    padding-left: 3px;
}

/* ==========================================================================
    BLOG MASONRY LAYOUT
============================================================================= */
.blog-posts.isotope.threecols li.blog-post.isotope-item{
    width: 100%;
    height:480px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.blog-posts.isotope.threecols li.blog-post.isotope-item:nth-child(2n){
    margin-right: 0;
}

.blog-posts li.blog-post.isotope-item img{
    width: 100%;
    height:auto;
}

.blog-posts li.blog-post.format-video.isotope-item iframe{
    width: 100%;
    min-height: 100px;
    margin-bottom: 20px;
}

.blog-posts.isotope.full li.blog-post.isotope-item {
    width: 384px;
    height:130px;
    margin-right: 0;
    margin-bottom: 20px;
}
.blog-posts.isotope.full li.blog-post.isotope-item.premium {
    height:340px;
}

.blog-posts.isotope.full li.blog-post.isotope-item:nth-child(3n){
    margin-right: 0;
}

.blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{
    min-height: 153px !important;
}
/* ==========================================================================

    5.5. BLOG POSTS

============================================================================= */

.blog-posts li.blog-post{

    float: left;

    margin-bottom: 80px;

    width: 100%;

    position: relative;

}



/* STICKY BLOG POST */

.blog-posts li.blog-post.sticky .post-content{

    padding: 20px;

    background: #f6f6f6;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



.post-info{

    width: 46px;

    height: 92px;

    float: left;

    position: absolute;

    z-index: 200;

}



.post-info .post-category{

    width: 46px;

    height: 46px;

    background-color: #333;

}



.post-info .post-category i{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    color: #fff;

    font-size: 22px;

    width: 46px;

    height: 46px;

}

.page-content.colored .post-info .post-date{

    background: #555;

}



.post-info .post-date{

    width: 46px;

    height: 46px;

    background-color: #555;

}



.post-info .post-date span{

    text-align: center;

    width: 100%;

    display: block;

}



.post-info .post-date .day{

    font: 18px 'Oswald', Arial, sans-serif;

    padding-top: 7px;

    line-height: 18px;

    color: #ddd;

}



.post-info .post-date .month{

    text-transform: uppercase;

    font-size: 12px;

}



.post-content-container{

    float: left;

    width: 100%;

  height:150px;

}



.post-regular-container{

    float: left;

    width: 100%;

  height:150px;

    padding-left: 5px;

}



.post-image-container{

  overflow: hidden;

  width: 100%;

  transform: scale(1,1);

  -webkit-transform: scale(1,1);

  -moz-transform: scale(1,1);

  -o-transform: scale(1,1);

  -ms-transform: scale(1,1);

  opacity: 1;

  margin-bottom: 5px;

}



.post-image-container img{

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: 100%;

}



.post-image-container:hover img{

    transform: scale(1.3);

    -webkit-transform: scale(1.3);

    -moz-transform: scale(1.3);

    -o-transform: scale(1.3);

    -ms-transform: scale(1.3);

    opacity: 0.7;

}



.post-content a h1,

.post-content a h2,

.post-content a h3, 

.post-content a h4, 

.post-content a h5,

.post-content a h6{

    margin-bottom: 10px;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.post-content-container .slider-wrapper{

    margin-bottom: 10px;

    float: left;

    width: 100%;

}



/* BLOG META */

.blog-meta{

  width: 100%;

  float: left;

  padding-right: 0;

  padding-left: 0;

  color: #727272;

  border-top: 1px solid #4f4f4f;

  border-bottom: 1px solid #4f4f4f;

  margin-bottom: 5px;

  font-size: 13px;

}



.blog-meta li{

    float: left;

    margin-right: 10px;

}



.blog-meta li.post-tags a:first-child{

    padding-left: 3px;

}



/* ==========================================================================

    BLOG MASONRY LAYOUT

============================================================================= */

.blog-posts.isotope.threecols .blog-post.isotope-item{

    width: 100%;

  height:480px;

    margin-right: 10px;

    margin-bottom: 20px;

}



.blog-posts.isotope.threecols .blog-post.isotope-item:nth-child(2n){

    margin-right: 0;

}



.blog-posts .blog-post.isotope-item img{

    width: 100%;

}



.blog-posts .blog-post.format-video.isotope-item iframe{

    width: 100%;

    min-height: 100px;

    margin-bottom: 20px;

}



.blog-posts.isotope.full .blog-post.isotope-item{

    width: 33.33333333%;


    margin-bottom: 20px;

    padding-left: 10px;

    padding-right: 10px;

    font-size: 11px;

line-height: 14px;

text-align: justify;

color: #ededed;

}

.blog-posts.isotope.full .blog-post.isotope-item.premium {
    height:340px;
}
.blog-post.isotope-item.premium .post-content-container {
    height: 300px;
}
.blog-posts.isotope.full .blog-post.isotope-item:nth-child(3n){

    margin-right: 0;

}



.blog-posts.isotope.full .blog-post.isotope-item .nivoSlider{

    min-height: 153px !important;

}

.isotope-item.listing-images {

    width: 33.33333333%;

    margin-bottom: 20px;

    padding-left: 10px;

    padding-right: 10px;

}

@media (min-width: 480px) and (max-width: 991px) {

    .blog-posts.isotope.full li.blog-post.isotope-item {

        width: 50%;

    }

    .isotope-item.listing-images {

        width: 50%;

    }

}



@media (max-width: 479px) {

    .blog-posts.isotope.full li.blog-post.isotope-item {

        width: 100%;

    }

    .isotope-item.listing-images {

        width: 100%;

    }

}

/* ==========================================================================

    AUDIO BLOG POST

============================================================================= */

.jp-jplayer, .jp-audio{

    float: left;

    width: 100% !important;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



.jp-audio{

    margin-bottom: 20px !important;

}



.format-audio.soundcloud iframe{

    width: 100%;

    height: auto;

    margin-bottom: 10px;

}



/* ==========================================================================

    VIDEO BLOG POST FORMAT

============================================================================= */

.format-video iframe{

    width: 100%;

    min-height: 440px;

    margin-bottom: 20px;

}



/* ==========================================================================

    LINK BLOG POST FORMAT

============================================================================= */

.blog-post .post-content a.link{

    background: #333;

    padding: 5px 10px;

    width: 100%;

    display: block;

}



/* ==========================================================================

    BLOG SINGLE POST

============================================================================= */

.post-author{

    float: left;

    margin-bottom: 80px;

    width: 100%;

}



.post-author img{

    width: 70px;

    height: 70px;

    float: left;

    margin-right: 30px;

}



.post-author .info{

    float: left;

    width: 695px;

    margin-left: 0;

}



.post-author .info h6{

    margin-bottom: 3px;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.post-author .info span.member{

    font-style: italic;

    margin-bottom: 10px;

    display: block;

}



/* ==========================================================================

    POST COMMENTS

============================================================================= */

.post-comments{

    width: 100%;

    float: left;

}



.comments-li{

    float: left;

    margin-bottom: 30px;

}



.comments-li > li{

    float: left;

    width: 100%;

    margin-bottom: 30px;

}



.comment{

    float: left;

    min-height: 60px;

    border-bottom: 1px solid #4f4f4f;

    padding-bottom: 30px;

}



.post-comments .comment + .children{

    margin-top: 30px;

}



.post-comments .children + .children{

    margin-top: 30px;

}



.comment .avatar{

    width: 70px;

    height: 70px;

    margin-right: 30px;

    float: left;

}



.comment-meta li{

    font-style: italic;

}



.comment-meta .author{

    font: 15px 'Oswald', Arial, sans-serif;

    text-transform: uppercase;

}



.comment .comment-body{

    margin-left: 100px;

    margin-top: 15px;

}



.comment .comment-reply-link{

    display: block;

    margin-top: 15px;

    background: url('../img/reply.png') no-repeat 0 center;

    padding-left: 22px;

    cursor: pointer;

    font-family: 'Oswald', Arial, sans-serif;

    text-transform: uppercase;

}



.post-comments .children{

    margin-left: 20px;

    float: left;

    padding: 0 0 0 20px;

}



/* COMMENT FORM */

.comment-form, #respond{

    float: left;

    width: 100%;

}



#respond form{

    margin-top: 20px;

}



#respond fieldset{

    margin-bottom: 10px;

}



#respond label{

    width: 100%;

    color: #ccc;

    display: block;

    margin-bottom: 7px;

}



#respond .name-container{

    margin-right: 20px;

    float: left;

}



#respond .email-container{

    float: left;

}



#respond .name-container input, 

#respond .email-container input{

    background: #444;

    border: 1px solid #444;

    border-radius: 2px;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    -o-border-radius: 2px;

    height: 30px;

    width: 308px;

    font: 12px 'Open Sans', Arial, sans-serif;

    padding-left: 10px;

    padding-right: 10px;

    float: left;

    color: #a9a9a9;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



#respond .message{

    float: left;

    margin-top: 5px;

    width: 100%;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

}



#respond .message textarea{

    background: #444;

    border: 1px solid #444;

    border-radius: 2px;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    -o-border-radius: 2px;



    width: 100%;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;



    font: 11px Arial, sans-serif;

    line-height: 22px;

    padding: 10px;

    color: #a9a9a9;

}



#respond #comment-reply{

    color: #fff;

    font: 12px 'Open Sans', Arial,sans-serif;

    background-color: #333;

    cursor: pointer;

    padding: 8px 15px;

    border: none;

    float: right;

    margin-top: 10px;



    border-radius: 2px;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    -o-border-radius: 2px;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    text-transform: uppercase;

}



#respond .name-container input:focus, 

#respond .email-container input:focus, 

#respond .message textarea:focus{

    border-color: #aaa;

}





/* ==========================================================================

    5.6. SHARRE BLOG POSTS AND PORTFOLIO POSTS

============================================================================= */

.share-post{

    float: left;

    background: #555;

    margin-top: 30px;

    padding: 10px 15px;

    width: 100%;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



.share-post span{

    float: left;

    display: block;

    margin-right: 20px;

    color: #aaa;

    position: relative;

    top: 2px;

}



.share-post #shareme{

    float: left;

}



.sharrre .box{

    background:#333;



    -webkit-box-shadow:0 1px 1px #444;

    -moz-box-shadow:0 1px 1px #444;

    box-shadow:0 1px 1px #444;



    height:22px;

    display:inline-block;

    position:relative;



    padding:0px 55px 0 8px;



    -webkit-border-radius:3px;

    -moz-border-radius:3px;

    border-radius:3px;



    font-size:12px;

    float:left;

    clear:both;

    overflow:hidden;



    -webkit-transition:all 0.3s linear;

    -moz-transition:all 0.3s linear;

    -o-transition:all 0.3s linear;

    transition:all 0.3s linear;

    cursor: pointer;

}



.sharrre .left{

    line-height:22px;

    display:block;

    white-space:nowrap;



    text-shadow:0px 1px 1px rgba(255,255,255,0.3);

    color:#ffffff;



    -webkit-transition:all 0.2s linear;

    -moz-transition:all 0.2s linear;

    -o-transition:all 0.2s linear;

    transition:all 0.2s linear;

}

.sharrre .middle{

    position:absolute;

    height:22px;

    top:0px;

    right:30px;

    width:0px;

    background:#555;

    text-shadow:0px -1px 1px #363f49;

    color:#fff;

    white-space:nowrap;

    text-align:left;

    overflow:hidden;



    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;



    -webkit-transition:width 0.3s linear;

    -moz-transition:width 0.3s linear;

    -o-transition:width 0.3s linear;

    transition:width 0.3s linear;

}

.sharrre .middle a{

    color:#ccc;

    font-weight:bold;

    padding:0 9px 0 9px;

    text-align:center;

    float:left;

    line-height:22px;



    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

}

.sharrre .right{

    position:absolute;

    right:0px;

    top:0px;

    height:100%;

    width:45px;

    text-align:center;

    line-height:22px;

    color:#fff;

}



.sharrre .box:hover{

    padding-right:130px;

}

.sharrre .middle a:hover{

    text-decoration:none;

    color: #fff !important;

}

.sharrre .box:hover .middle{

    width:90px;

}



.blog-post .share-post{

    margin-bottom: 80px;

}





/* ========================================================================== 

    5.8. CONTACT PAGE

============================================================================= */

.map_canvas{

    width: 100%;

    height: 550px;

}



.contact-information{

    margin-bottom: 50px;

}



/* CONTACT PAGE MAP FULL WIDTH */

body.contact02 #page-title{

    margin-bottom: 0;

}



.map_canvas.map_full{

    margin-bottom: 80px;

}



/* CONTACT FORM

============================================================================= */

.wpcf7 fieldset{

    max-width: 100%;

    margin-bottom: 10px;

}



.wpcf7 label{

    color: #ccc;

    font: 13px Arial,sans-serif;

    line-height: 18px;

    margin-bottom: 5px;

    display: block;

    width: 100%;

    float: left;

}



.wpcf7-text{

    max-width: 100%;

    background: #444;

    border: 1px solid #4f4f4f;

    padding: 8px 10px;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



.wpcf7-textarea{

    width: 100%;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    background: #444;

    border: 1px solid #4f4f4f;

    padding: 10px;

}



.wpcf7-text:focus, 

.wpcf7-textarea:focus{

    border-color: #555;

}



.wpcf7-submit{

    border: 0px solid;

    font: 12px 'Open Sans', Arial, sans-serif;

    text-transform: uppercase;

    line-height: 11px;

    color: #fff;

    background-color: #222;

    padding: 10px 17px;

    cursor: pointer;



    float: left;



    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;

}



/* ==========================================================================

    7. WIDGETS

============================================================================= */



li.widget{

    float: left;

    margin-bottom: 80px;

    width: 100%;

}



/* 7.1. SIDEBAR WIDGETS AND FOOTER WIDGETS GLOBAL STYLES

----------------------------------------------------------------------------- */

.aside_widgets h5{

    margin-bottom: 20px;

}



.aside-left{

    margin-bottom: 0;

    float: left;

}



.aside-right{

    margin-bottom: 0;

    float: right;

}



.widget{

    display: block;

    margin-bottom: 50px;

    float: left;

    width: 100%;

}



.widget li{

    background: url('../img/aside-arrow.png') no-repeat 0 12px;

    border-bottom: 1px dotted #4f4f4f;

    padding-left: 28px;

    padding-bottom: 5px;

    padding-top: 5px;

}



.widget li:last-child{

    border-bottom: none;

    padding-bottom: 0;

}



.footer-widget-container .widget li{

    border-bottom: 1px dotted #555;

}



/* 7.2. NEWSLETTER SUBSCRIBE BIG SECTION

============================================================================= */

.newsletter-big .row{

    margin-bottom: 0;

}



.newsletter-big{

    background: #333;

    padding: 30px 0;

    border-top: 1px solid #4f4f4f;

    border-bottom: 1px solid #4f4f4f;

}



.newsletter-big .icon{

    font-size: 30px;

    color: #fff;

    padding: 15px;

    float: left;

    position: relative;

    margin-right: 40px;

    background-color: #222;

}



.newsletter-big .icon:after{

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    right: -10px;

    top: 50%;

    margin-top: -10px;

    border-left: 10px solid #222;

}



.newsletter-big .subscribe-text{

    float: left;

    max-width: 840px;

    margin-right: 20px;

    padding-top: 8px;

}



.newsletter-big .subscribe-text h3{

    margin-bottom: 3px;

}



.newsletter-big .subscribe-text span{

    text-transform: uppercase;

}



.newsletter-big .newsletter{

    float: right;

    margin-top: 14px;

}



.newsletter-big .newsletter .email{

    background: #555;

    border: 1px solid #333;

    float: left;



    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -o-border-radius: 2px;



    width: 148px;

    height: 28px;

    padding: 0 10px;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

    font-size: 11px;

}



.newsletter-big .newsletter .submit{

    border: 0px solid;

    font: 12px 'Open Sans', Arial, sans-serif;

    text-transform: uppercase;

    line-height: 11px;

    color: #fff;

    background-color: #222;

    padding: 8px 13px;

    cursor: pointer;

    position: relative;

    top: -2px;



    float: left;



    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;



    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -o-border-radius: 2px;

}



/* 7.3. NEWSLETTER SUBSCRIBE SMALL 

----------------------------------------------------------------------------- */

.aside_widgets .newsletter .email{

    background: #fff;

    border: 1px solid #ddd; 

}



.aside_widgets .newsletter .submit{

    background: #fff;

    border: 1px solid #ddd;

    color: #777;

}



.aside_widgets .newsletter .submit:hover{

    color: #fff;

}



.widget .newsletter .email{

    background: #fff;

    border: 1px solid #ddd;



    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -o-border-radius: 2px;



    width: 148px;

    height: 28px;

    padding: 0 10px;



    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

    font-size: 11px;

}



.widget .newsletter .submit{

    height: 28px;

    color: #eee;

    font-size: 11px;

    position: relative;

    top: 0;

    padding: 0 15px;

    cursor: pointer;



    border: 1px solid #222;

    background: #333;



    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -o-border-radius: 2px;



    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

    -ms-transition: all 0.2s ease 0s;

    transition: all 0.2s ease 0s;

}



.widget .newsletter .submit:hover{

    background: #f6f6f6;



    border: 1px solid #ddd;



    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -o-border-radius: 2px;

}





/* 7.4. TWITTER WIDGET

============================================================================= */

#tweet-sroll-wrapper.widget li{

    border: none;

    background: url('../img/tweet.png') no-repeat 0 5px;

    padding-left: 43px;

    margin-bottom: 8px;

}



.footer-widget-container #tweet-sroll-wrapper.widget li a{

    color: #ccc;

}



#tweet-sroll-wrapper.widget .tweets-list-container{

    overflow: hidden;

    width: 100%;

}



#tweet-sroll-wrapper.widget .tweet-list{

    position: relative;

}



/* 7.5. LATEST PORTFOLIO PROJECTS WIDGET

============================================================================= */

.widget-portfolio ul{

    float: left;

    width: 100%;

}



li.widget.widget-portfolio li{

    background: none;

    border-bottom: none;

    padding: 0;

}



.widget-portfolio li, 

.widget-portfolio li img{

    width: 64px;

    margin-right: 1px;

    margin-bottom: 1px;

    float: left;

}



.widget-portfolio li img, 

.widget-portfolio li{

    overflow: hidden;

    height: 64px;

    width: 64px;

}



.widget-portfolio li:nth-child(4n){

    margin-right: 0;

}



.widget-portfolio li a img{

    opacity: 0.6;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.widget-portfolio li a img:hover{

    opacity:1;

    transform: scale(1.2) rotate(10deg);

    -webkit-transform: scale(1.2) rotate(10deg);

    -moz-transform: scale(1.2) rotate(10deg);

    -o-transform: scale(1.2) rotate(10deg);

    -ms-transform: scale(1.2) rotate(10deg);

}



/* 7.6. CONTACT INFO WIDGET

============================================================================= */

.widget .contact-info li{

    padding-bottom: 10px;

    background: none;

    padding-left: 0;

    padding-top: 0;

    border-bottom: none !important;

}



.widget .contact-info .icon{

    padding-right: 5px;

}



/* 7.7. WIDGET SEARCH

----------------------------------------------------------------------------- */

.widget_search form{

    position: relative;

}



.widget_search #a_search{

  background: #555;

  border: 1px solid #222222 !important;

  width: 100%;

  display: block;

  font-size: 10px;

  font-family: 'Open Sans', Arial, sans-serif;

  color: #777;

  font-style: italic;

  left: 0;

  top: 0;

  padding: 3px;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -o-box-sizing: border-box;

}



.widget_search .search-submit{

    background: url('../img/aside-search.png') center center no-repeat;

    width: 20px;

    height: 100%;

    border: none;

    text-indent: -9999px;

    position: absolute;

    float: left;

    cursor: pointer;

    right: 6px;

    top: 1px;

}



/* 7.8. BLOG RECENT POSTS WIDGET

============================================================================= */

.pi_recent_posts .post-info{

    position: relative;

    margin-right: 20px;

    height: 46px;

    float: left;

}



.pi_recent_posts li{

    float: left;

    border-bottom: none;

    background: none;

    margin-bottom: 15px;

    padding-bottom: 0;

    padding-left: 0;

}



.pi_recent_posts .post .comments-number{

    font-style: italic;

    font-size: 12px;

}



.footer-widget-container .pi_recent_posts li{

    border-bottom: none;

}





/* 7.9. SOCIAL PHOTO STREAM WIDGETS

============================================================================= */

.widget.social-feed li{

    background: none;

    border: none;

    padding: 0;

    float: left;

    width: 66px;

    height: 66px;

    margin-right: 1px;

    margin-bottom: 1px;

    overflow: hidden;

}



.widget.social-feed li a img{

    width: 66px;

    height: 66px;

    opacity: 0.6;



    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.widget.social-feed li a img:hover{

    opacity:1;

    transform: scale(1.2) rotate(10deg);

    -webkit-transform: scale(1.2) rotate(10deg);

    -moz-transform: scale(1.2) rotate(10deg);

    -o-transform: scale(1.2) rotate(10deg);

    -ms-transform: scale(1.2) rotate(10deg);

}



.widget.social-feed li:nth-child(4n){

    margin-right: 0;

}



/* 7.10. TESTIMONIAL WIDGET

============================================================================= */

.widget.pi_testimonial li{

    border: none;

    background: none;

    padding: 0;

}



/* 7.11. WIDGET TAG CLOUD

=============================================================================  */

.widget_tag_cloud a{

    background: #333;

    color: #777;

    display: inline-block;

    padding: 5px 10px;

    margin-bottom: 5px;

    margin-right: 2px;

}



.widget_tag_cloud a:hover{

    color: #fff !important;

}





/* 7.12. WIDGET RECENT COMMENTS

=============================================================================  */

.widget_recent_comments li{

    background: url('../img/comment.png') no-repeat 0 10px;

    padding-left: 26px;

    color: #777;

}



.widget_recent_comments li:hover{

    background: url('../img/comment.png') no-repeat 0 10px;

}



.widget_recent_comments li a{

    text-decoration: underline;

    font-style: italic;

    color: #888;

}



/* 8. SCROLL TO TOP

============================================================================= */

.scroll-up{

    width:40px;

    height:40px;

    opacity:0.3;

    position:fixed;

    bottom:50px;

    right:100px;

    display:none;

    text-indent:-9999px;

    background: url('../img/icon_top.png') no-repeat;

}



/* ========================================================================== 

    9. COMMING SOON

============================================================================= */

body#commingsoon #header{

    padding-bottom: 40px;

}



#commingsoon #logo{

    width: 162px;

    margin: 0 auto;

    float: none;

}



/* BACKGROUND SLIDESHOW

============================================================================= */

.cb-slideshow{

    background: #333;

}



.cb-slideshow,

.cb-slideshow:after {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 127px;

    left: 0px;

    z-index: 0;

    overflow: hidden;

}

.cb-slideshow:after {

    content: '';

    background: transparent url(../img/commingsoon/pattern.png) repeat top left;

}

.cb-slideshow li span {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0px;

    left: 0px;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0;

    z-index: 0;

    -webkit-backface-visibility: hidden;

    -webkit-animation: imageAnimation 36s linear infinite 0s;

    -moz-animation: imageAnimation 36s linear infinite 0s;

    -o-animation: imageAnimation 36s linear infinite 0s;

    -ms-animation: imageAnimation 36s linear infinite 0s;

    animation: imageAnimation 36s linear infinite 0s;

}



.cb-slideshow li:nth-child(1) span { background-image: url(../img/commingsoon/image-1.jpg); }

.cb-slideshow li:nth-child(2) span {

    background-image: url(../img/commingsoon/image-2.jpg);

    -webkit-animation-delay: 6s;

    -moz-animation-delay: 6s;

    -o-animation-delay: 6s;

    -ms-animation-delay: 6s;

    animation-delay: 6s;

}

.cb-slideshow li:nth-child(3) span {

    background-image: url(../img/commingsoon/image-3.jpg);

    -webkit-animation-delay: 12s;

    -moz-animation-delay: 12s;

    -o-animation-delay: 12s;

    -ms-animation-delay: 12s;

    animation-delay: 12s;

}



.cb-slideshow li:nth-child(4) span {

    background-image: url(../img/commingsoon/image-4.jpg);

    -webkit-animation-delay: 18s;

    -moz-animation-delay: 18s;

    -o-animation-delay: 18s;

    -ms-animation-delay: 18s;

    animation-delay: 18s;

}

.cb-slideshow li:nth-child(5) span {

    background-image: url(../img/commingsoon/image-5.jpg);

    -webkit-animation-delay: 24s;

    -moz-animation-delay: 24s;

    -o-animation-delay: 24s;

    -ms-animation-delay: 24s;

    animation-delay: 24s;

}

.cb-slideshow li:nth-child(6) span {

    background-image: url(../img/commingsoon/image-6.jpg);

    -webkit-animation-delay: 30s;

    -moz-animation-delay: 30s;

    -o-animation-delay: 30s;

    -ms-animation-delay: 30s;

    animation-delay: 30s;

}



@-webkit-keyframes imageAnimation { 

    0% {

    opacity: 0;

    -webkit-animation-timing-function: ease-in;

}

8% {

    opacity: 1;

    -webkit-transform: scale(1.05);

    -webkit-animation-timing-function: ease-out;

}

17% {

    opacity: 1;

    -webkit-transform: scale(1.1);

}

22% {

    opacity: 0;

    -webkit-transform: scale(1.1) translateY(-20%);

}

25% {

    opacity: 0;

    -webkit-transform: scale(1.1) translateY(-100%);

}

100% { opacity: 0 }

}

@-moz-keyframes imageAnimation { 

    0% {

    opacity: 0;

    -moz-animation-timing-function: ease-in;

}

8% {

    opacity: 1;

    -moz-transform: scale(1.05);

    -moz-animation-timing-function: ease-out;

}

17% {

    opacity: 1;

    -moz-transform: scale(1.1);

}

22% {

    opacity: 0;

    -webkit-transform: scale(1.1) translateY(-20%);

}

25% {

    opacity: 0;

    -moz-transform: scale(1.1) translateY(-100%);

}

100% { opacity: 0 }

}

@-o-keyframes imageAnimation { 

    0% {

    opacity: 0;

    -o-animation-timing-function: ease-in;

}

8% {

    opacity: 1;

    -o-transform: scale(1.05);

    -o-animation-timing-function: ease-out;

}

17% {

    opacity: 1;

    -o-transform: scale(1.1);

}

22% {

    opacity: 0;

    -webkit-transform: scale(1.1) translateY(-20%);

}

25% {

    opacity: 0;

    -o-transform: scale(1.1) translateY(-100%);

}

100% { opacity: 0 }

}

@-ms-keyframes imageAnimation { 

    0% {

    opacity: 0;

    -ms-animation-timing-function: ease-in;

}

8% {

    opacity: 1;

    -ms-transform: scale(1.05);

    -ms-animation-timing-function: ease-out;

}

17% {

    opacity: 1;

    -ms-transform: scale(1.1);

}

22% {

    opacity: 0;

    -webkit-transform: scale(1.1) translateY(-20%);

}

25% {

    opacity: 0;

    -ms-transform: scale(1.1) translateY(-100%);

}

100% { opacity: 0 }

}

@keyframes imageAnimation { 

    0% {

    opacity: 0;

    animation-timing-function: ease-in;

}

8% {

    opacity: 1;

    transform: scale(1.05);

    animation-timing-function: ease-out;

}

17% {

    opacity: 1;

    transform: scale(1.1);

}

22% {

    opacity: 0;

    -webkit-transform: scale(1.1) translateY(-20%);

}

25% {

    opacity: 0;

    -transform: scale(1.1) translateY(-100%);

}

100% { opacity: 0 }

}



/* Show at least something when animations not supported */

.no-cssanimations .cb-slideshow li:first-child span{

    opacity: 1;

}



/* COMMING SOON PAGE CONTENT */

#commingsoon .page-content{

    z-index: 100;

    position: relative;

}



#commingsoon .title h1{

    font-size: 36px;

    padding: 15px 15px;

    background: rgba(0, 0, 0, 0.3);

    color: #fff;

    display: table;

    margin: 80px auto 0;

}



#commingsoon .subtitle h5{

    font-size: 24px;

    padding: 15px 15px;

    background: rgba(255, 255, 255, 0.7);

    color: #333;

    display: table;

    margin: 0 auto;

}



#commingsoon .newsletter{

    display: table;

    margin: 0 auto;

}

#commingsoon .newsletter input.email{

    padding: 10px;

    background: #333;

    border: 1px solid #000;

    color: #aaa;

    font-size: 13px;

}



#commingsoon .newsletter input.submit{

    font-size: 13px;

    padding: 11px;

    border: none;

    background: #222;

    color: #ddd;

    cursor: pointer;

    

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



#commingsoon p#note{

    color: #fff;

    margin: 0 auto;

    text-align: center;

}