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

/* TABLE OF CONTENT */

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



1  - General Base Styles

2  - Header Logo and Navigation Styles

3  - About Us Page Elements Styles

4  - Portfolio Page Styles

5  - Blog Page Styles

6  - Contact Us Styles

7  - Typography Styles

8  - Others



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



@import url('responsiveslides.css');

@import url('isotope.css');

@import url('magnific.css');





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

/* 1 - General

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

body {

    background: #222;
    font: 15px;
	font-family: 'Roboto',sans-serif;
    color: #6a7279;
    font-weight: 300;
    overflow-x: hidden;
    line-height: 26px;

}

body.padding {

    padding-top: 136px;

}

a{

    color: #222;

}

a:hover{

    color: #111;

}

.container-fluid {

    padding: 0 !important;

}

.cont-outer {

    background: #fff;

    padding: 30px;

}

.container-fluid .cont-outer{

    padding: 0;

}

.container-fluid.portfolio .cont-outer{

    margin: 0 0 30px;

}

.widget .cont-outer{

    padding-bottom: 0;

}

h1, h2, h3, h4, h5, h6 {

    font-weight: 500;

}

.tooltip.left{

    margin-left: -10px;

}

.page-title {

    position: relative;

    margin: 0 0 30px 0;

}

.widget .page-title{

    /*margin: 30px 0 60px;*/

}

.header-field h3 {

    display: inline-block;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    color: #fff;

    padding: 12px 45px;

    background: #ff5252;

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

    margin: 0;

    position: relative;

}

.default-icons {

    position: fixed;

    bottom: 20px;

    right: 45px;

    margin-top: 60px;

    width: 55px;

    z-index: 999;

}

.slider-nav li,

.social-media li {

    list-style: none;

    -webkit-transform: translateX(100px);

     -moz-transform: translateX(100px);

      -ms-transform: translateX(100px)

       -o-transform: translateX(100px);

          transform: translateX(100px);

    opacity: 0;

    transition: all 0.3s ease-out;

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

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

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

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

}



.slider-nav li.on,

.social-media li.on {

  opacity: 1;

  -webkit-transform: translateX(0px);

     -moz-transform: translateX(0px);

      -ms-transform: translateX(0px)

       -o-transform: translateX(0px);

          transform: translateX(0px);

}



.social-media li{

    display: inline-block;

}

.social-media li a {

    width: 55px;

    height: 55px;

    background: #f2f2f2;

    margin-bottom: 1px;

    line-height: 55px;

    cursor: pointer;

    text-decoration: none;

    color: #6a7279;

    font-size: 20px;

    display: block;

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

}

.social-media li a:hover {

    background: #ff5252;

    color: #fff;

}

.slider-nav {

    margin-bottom: 20px;
	padding-bottom: 20px;

}

.slider-nav li a {

    width: 55px;

    height: 55px;

    background: #000;

    margin-bottom: 1px;

    line-height: 55px;

    cursor: pointer;

    text-decoration: none;

    color: #fff;

    font-size: 28px;

    opacity: 0.6;

    transition: all 0.2s ease-out;

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

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

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

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

}

.slider-nav li a:hover {

    background: #000;

    color: #fff;

    opacity: 1;

}

ul.pagination li {

    list-style: none;

    display: inline;

}

ul.pagination li a {

    width: 55px;

    height: 55px;

    background: #f2f2f2;

    line-height: 55px;

    font-size: 14px;

    color: #888;

    text-decoration: none;

    transition: all 0.2s ease-out;

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

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

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

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

}

ul.pagination li a:hover {

    background: #ff5252;

    color: #fff;

    text-shadow: none;

}



.widget.widget_portfolio ul li a:hover{

    color: #4F5458;

}

.widget_portfolio ul.pagination li a:hover{

    color: #fff;

}

blockquote {

    border-left: 5px solid #aaa;

    background: #fff;

    padding: 15px;

    color: #a6a6a6;

    font-style: italic;

}



#bg_slide{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

}



#bg_slide ul, #bg_slide li{

    height: 100%;

    list-style-type: none;

    margin: 0;

    padding: 0

}



#bg_slide .pattern{

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 2;

    background: transparent url(../img/bg-pattern.png);

}



#bg_slide a{

    display: none;

}



#bg_slide img{

  min-width: 100%;

}



.container{

    z-index: 1;

    position: relative;

}



.navbar{

    z-index: 1000;
	position: absolute;
  right: 0px;
  bottom: 0px;
  width: auto;
  margin-top: -2.5em;

}



input, textarea{

  border-radius: 0 !important;

  -moz-border-radius: 0 !important;

  -webkit-border-radius: 0 !important;

}



input:focus, textarea:focus{

    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,82,82,0.6) !important;

    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,82,82,0.6) !important;

    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,82,82,0.6) !important;

    border-color: #ff5252 !important;

}



.index{

  text-align: left;

}



.index h1{

  color: #000;

  font-size: 32px;

  background: #fff;

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

  padding: 30px;

  display: block;

  max-width: 660px;

  font-weight: 300;

  position: relative;

  margin-bottom: 76px;

  top: -1000px;

  transition: all 0.4s ease-out;

  -webkit-transition: all 0.4s ease-out;

  -ms-transition: all 0.4s ease-out;

  -moz-transition: all 0.4s ease-out;

  -o-transition: all 0.4s ease-out;

}



.index h1 span{

  display: block;

  position: absolute;

  top: 110%;

  left: 0;

}



.index a{

  display: inline-block;

  padding: 20px 30px;

  background: #000;

  color: #fff;

  font: 14px 'Raleway' sans-serif;

  text-transform: uppercase;

  font-weight: 700;

  -webkit-transition: all 1s ease-out;

  -ms-transition: all 1s ease-out;

  -moz-transition: all 1s ease-out;

  -o-transition: all 1s ease-out;

  margin-bottom: 10px;

}



.index h1 span.op a{

  /*background: rgba(0,0,0,0.7);*/

}



.index h1 span a:hover{

  background: #000;

  text-decoration: none;

}



.index h1 mark{

  visibility: hidden;

  opacity: 0;

  -webkit-transition: all 0.5s ease-out;

  -ms-transition: all 0.5s ease-out;

  -moz-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  position: absolute;

  left: 30px;

  top: 30px;

  font: 36px 'Raleway' sans-serif;

  font-weight: 300;

  width: auto;

}



.index h1 mark.active{

  visibility: visible;

  opacity: 1;

}



mark{

  background: transparent;

}



.container{

  transition: all 0.3s ease-out;

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

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

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

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

}



#bg_timer{

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background: #000;

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

  z-index: 300;

}



#bg_timer > div{

  height: 100%;

  width: 0;

  background: #fff;

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

}



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

/* 2 - Header

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

/* nav style */

.navbar{

    position: absolute;
bottom: 0px;

}

.navbar .btn-navbar {

    text-shadow: none;

    line-height: 148px;

    margin-right: 20px;

}



.navbar-fixed-top .navbar-inner {

    box-shadow: none;

    border: none;

    background: #fff;

    padding: 0;

}

.navbar .brand {

    margin-left: 60px;

    padding: 0;

    line-height: 145px;

}

body.padding .navbar{

    position: fixed;

}

.navbar.small .brand {

    line-height: 55px;

}

.navbar.small{

    line-height: 0;

    transition: all 0.2s ease-out;

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

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

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

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

}

.navbar .nav>li a {

    padding-left: 30px;

    padding-right: 30px;

    padding-top: 70px;

    padding-bottom: 38px;

    border-left: 1px solid #eaeaea;

    font: 14px 'Raleway', sans-serif;

    font-weight: 700;

    text-transform: uppercase;;

    color: #4f5458;

    transition: all 0.2s ease-out;

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

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

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

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

}



.navbar.small .nav>li a{

    padding-top: 10px;

    padding-bottom: 10px;

}



.navbar .nav>li a span {

    color: #a6a6a6;

    display: block;

    font: 11px 'Droid sans', sans-serif;



    text-transform: none;

    margin-bottom: 5px;

}



.navbar .nav>li{

    background: #fff;

    transition: all 0.2s ease-out;

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

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

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

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

    outline: none;

    border-bottom: 4px solid #fff;

}



.navbar .nav>li a:hover,

.navbar .nav>li.active a{

    color: #222;

    box-shadow: none !important;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    background-color: #fff !important;

}



.navbar .nav>li.active,

.navbar .nav>li:hover {

    border-bottom: 4px solid #ff5252;

    background-color: #fff;

}

.navbar .nav li.dropdown.open,

.navbar .nav li.dropdown.active,

.navbar .nav li.dropdown.open.active {

    background: #fff !important;

    color: #222;

    border-bottom: 4px solid #ff5252;

}

.dropdown-menu {

    border-radius: 0;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    padding: 0;

    border: none;

    margin-top: 10px;

}

.navbar .pull-right>li>.dropdown-menu {

    left: auto;

    right: 0;

}

.navbar .nav>li ul li a {

    padding: 15px 20px;

    font-size: 14px;

    color: #4f5458;

    font-weight: 500;

    text-transform: capitalize;

    border-left: 0;

}



.dropdown-menu>li>a {

    padding: 0;

    margin: 0;

}

.navbar .nav>li ul li a:hover {

    background: #f2f2f2;

    border: none;

}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{

    background: transparent;

}



/* right-icons style */

.navbar .right-icons {

    border-left: 1px solid #eaeaea;

    line-height: 0;

    transition: all 0.2s ease-out;

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

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

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

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

}

.navbar .right-icons ul{

    padding: 0;

    margin: 0;

    font-size: 0;

    width: 72px;

    transition: all 0.2s ease-out;

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

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

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

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

}

.navbar .right-icons ul li {

    list-style: none;

    width: 72px;

    height: 72px;

    background: #f2f2f2;

    margin: 0;

    position: relative;

    display: inline-block;

    transition: all 0.2s ease-out;

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

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

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

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

}



.navbar.small .right-icons ul li {

    width: 36px;

    height: 58px;

    line-height: 55px;

}



.navbar .right-icons ul li a {

    width: 100%;

    height: 100%;

    margin: 0 auto;

    line-height: 72px;

    position: absolute;

    color: #adadad;

    font-size: 22px;

    text-decoration: none;

    cursor: pointer;

    display: block;

    transition: all 0.2s ease-out;

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

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

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

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

}



.navbar.small .right-icons ul li a{

    line-height: 55px;

    margin: 0;

}



.navbar .right-icons ul li a:hover, .navbar .right-icons ul li a.active {

    background: #ff5252;

    color: #fff;

}

.navbar .right-icons ul li.search {

    border-top: 1px solid #eaeaea;

}



#search_form{

    position: absolute;

    top: 100%;

    right: -500px;

    transition: all 0.2s ease-out;

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

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

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

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

    background: #ff5252;

    padding: 20px;

}



#search_form.show{

    right: 0;

}



#search_form input{

    margin: 0;

    padding: 0;

    border-radius: 0;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    padding: 10px;

}





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

/* 3 - About Us

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



.member{

  opacity: 0;

  transition: all 0.2s ease-out;

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

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

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

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

  margin-bottom: 30px;

}



.member.on{

  opacity: 1;

}





.member .thumb {

    height: 200px;

    background: #ddd;

    position: relative;

}

.member .thumb img{

    min-width: 100%;

    height: 100%;

}

.member .thumb .links{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: transparent;

    text-align: center;

    line-height: 200px;

    overflow: hidden;

    transition: all 0.2s ease-out;

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

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

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

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

}



.member:hover .thumb .links{

    background: #000;

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

}



.member .thumb .links a{

    display: inline-block;

    position: relative;

    width: 34px;

    height: 34px;

    background: #ddd;

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

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    line-height: 34px;

    color: #f2f2f2;

    font-size: 20px;

    text-shadow: 1px 1px #000;

    top: 100%;

    transition: all 0.2s ease-out;

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

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

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

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

}



.member .thumb .links a:hover{

    background: #fff;

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

    text-decoration: none;

}



.member-infos {

    padding: 20px;

    background: #f2f2f2;

}

.member-infos h4 {

    margin: 0 0 7px 0;

    font-weight: 500;

    color: #4f5458;

    text-shadow: 0 1px 0 #fff;

}

.member-infos small {

    font-size: 14px;

    color: #a0a0a0;

}

.services {

    margin-bottom: 60px;

}

.service span {

    float: left;

    width: 100%;

    text-align: center;

    font-size: 100px;

    color: #a0a0a0;

    margin-bottom: 20px;

    transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transition: all 0.5s ease-out;

    -webkit-transition: all 0.5s ease-out;

    -ms-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -o-transition: all 0.5s ease-out;

}

.service:hover span{

    /*color: #fff;*/

    transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

}

.service h4 {

    color: #4f5458;

    margin: 0 0 15px 0;

    text-align: center;

}

.service p {

    overflow: hidden;

    margin-bottom: 0px;

    padding-right: 20px; /* this is just for better demo REMOVE THAT*/

}

.service{

    margin-bottom: 30px;

}

.services .service:nth-child(3n+4),.staff-members .member:nth-child(3n+4){

  margin-left: 0;

  clear: both;

}





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

/* 4 - Portfolio

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



#portfolio_pages{

    display: none;

}



.portfolio {

    margin-bottom: 60px;

    background: #fff;

    padding-bottom: 30px;

    overflow: hidden;

}

.page-template-default .widget_portfolio

.widget .portfolio{

    margin-bottom: 0;

}

.typo-grid .portfolio p{

    margin-bottom: 10px;

}

.portfolio .pagination{

    margin-left: 30px;

    margin-top: -30px;

}

.portfolio .cont-outer{

    padding: 0;

    margin: 30px;

    width: auto !important;

    overflow: hidden;

}

.portfolio .cont-outer .page{

    width: 103%;

}

.portfolio_header{

    z-index: 2;

}

.project-item {

    margin-bottom: 30px;

    margin-left: 0 !important;

    margin-right: 1.4%;

    cursor: pointer;

    opacity: 0;

}

.project-item.on{

  opacity: 1;

}

.project-item:hover img{

    /*-webkit-transform: scale(1.1);

     -moz-transform: scale(1.1);

      -ms-transform: scale(1.1);

       -o-transform: scale(1.1);

          transform: scale(1.1);*/

}

.inner-project {

    background: #f2f2f2;

    padding: 20px;

}

.inner-project h4 {

    margin: 0 0 10px 0;

}

.inner-project h4 a {

    color: #4f5458;

    text-decoration: none;

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

    text-shadow: 0 1px 0 #fff;

}

.inner-project h4 a:hover {

    color: #ff5252;

}

.inner-project .category {

    font-size: 14px;

    color: #b5b8b9;

}

.inner-project span {

    margin-right: 7px;

    color: #b5b8b9;

}

.thumb-project {

    height: 230px;

    background: #ddd;

    overflow: hidden;

    position: relative;

}

.thumb-project img{

    min-height: 100%;

    max-width: 3000px;

    min-width: 100%;

    transition: all 0.2s ease-out;

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

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

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

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

}

.thumb-project div {

	position: absolute;

	background: #eee;

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

	width: 100%;

	height: 100%;

}

.thumb-project div span{

    display: block;

    width: 100px;

    height: 100px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -50px 0 0 -50px;

    background: #ff5252;

    border-radius: 200px;

    -moz-border-radius: 200px;

    -webkit-border-radius: 200px;

    color: #fff;

    text-align: center;

    font-size: 40px;

    line-height: 100px;

}

.filter-portfolio {

    margin: 60px 0;

    z-index:10100;

    z-index: 3;

    height: 45px;

}

.filter-portfolio .always-visible {

    height: 63px;

    width: 170px;

    background: #f9f9f9;

    position: relative;

    display: block;

}

.filter-portfolio .always-visible a {

    width: 100%;

    height: 100%;

    position: absolute;

    font-size: 16px;

    line-height: 63px;

    text-align: center;

    text-decoration: none;

    color: #4f5458;

    font-weight: 500;

    margin: 0;

}

.filter-portfolio ul {

    margin: 0;

    list-style: none;

    position: relative;

    box-shadow: 0 0 2px rgba(0,0,0,0.6);

    z-index: 999;

}

.filter-portfolio span {

    margin-top: 3px;

    margin-left: 10px;

}

.filter-portfolio li {

    background: #f2f2f2;

    height: 45px;

    position: relative;

    display: none;

    width: 100%;

}



.filter-portfolio li.show{

    display: block;

}



.filter-portfolio li a {

    width: 100%;

    height: 100%;

    line-height: 45px;

    margin-left: 25px;

    position: absolute;

    color: #4f5458;

    text-decoration: none;

    display: block;

}

.filter-portfolio li:hover {

    background: #fff;

}

.filter-portfolio li:not(:last-child) {

    border-bottom: 1px solid #eaeaea;

}



.portfolio-single{

    position: realtive;

    left: -9px;

    background: #fff;

}



.portfolio-single h1{

    font-weight: normal;

    color: #000;

    font-size: 24px;

    margin-top: 30px;

}



.portfolio-single p{

    padding-right: 30px;

}



.portfolio-single p:last-of-type{

    padding-bottom: 100px;

}



.portfolio-single .details{

    position: absolute;

    right: 0;

    bottom: 0;

    background: #f2f2f2;

    height: 70px;

    padding-left: 30px;

    width: 51%;

    line-height: 70px;

    color: #808080;

    font-size: 14px;

}



.portfolio-single .details .category i{

    color: #adadad;

    font-size: 30px;

    line-height: 6px;

    margin-right: 10px;

}



.portfolio-single .details .share{

    display: inline-block;

    margin-right: 30px;

    float: right;

}



.portfolio-single .details .share a{

    font-size: 14px;

    color: #808080;

    transition: all 0.2s ease-out;

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

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

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

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

}



.portfolio-single .details .share a:hover{

    text-decoration: none;

}



.portfolio-single .details .share a i{

    display: inline-block;

    text-align: center;

    width: 10px;

    height: 10px;

    padding: 10px;

    color: #f2f2f2;

    font-size: 20px;

    background: #adadad;

    line-height: 6px;

    margin-right: 10px;

    transition: all 0.2s ease-out;

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

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

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

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

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

}



.portfolio-single .details .share a i.icon-twitter{

    /*font-size: 13px;*/

    text-indent: -2px;

}



.portfolio-single .details .share.twitter a:hover{

    color: #1BB5AD;

}



.portfolio-single .details .share.twitter a:hover i{

    background: #1BB5AD;

}



.portfolio-single .details .share.facebook a:hover, .portfolio-single .details .share.facebook a:hover i{

    color: #335795;

}



.portfolio-single .details .share.facebook a:hover i{

    background: #335795;

    color: #f2f2f2;

}



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

/* 5 - Blog

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

.blog {

    margin-bottom: 60px;

}

.post-item {

    margin-bottom: 30px;

}

.post-item .post-image {

    /*height: 300px;*/

    background: #ddd;

    position: relative;

    overflow: hidden;

}

.post-item .post-image a.more {

    position: absolute;

    left: 0;

    bottom: -40px;

    color: #fff;

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

    text-decoration: none;

    transition: all 0.3s ease-out;

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

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

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

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

    opacity: 0;

    -webkit-transform: scale(0);

    width: 100%;

    display: block;

    height: 40px;

    line-height: 40px;

    text-align: center;

}

.post-item:hover .post-image a.more{

    opacity: 1;

    -webkit-transform: scale(1);

    bottom: 0;

}

.post-item .post-image a.more:hover {

    background: rgba(0,0,0,.8);

}

.post-details {

    background: #f2f2f2;

    padding: 20px;

}

.post-details a {

    color: #4f5458;

    text-decoration: none;

}

.post-details h2 {

    color: #4f5458;

    margin-top: 0;

    font-size: 22px;

    text-shadow: 0 1px 0 #fff;

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

}

.post-details a:hover h2 {

    color: #ff5252;

}

.post-details p {

    margin-bottom: 0;

}

.post-info {

    position: absolute;

    top: 0;

    left: 0;

    padding: 20px;

    opacity: 0;

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

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

}

.post-item:hover .post-info{

    opacity: 1;

}

.post-info ul {

    margin: 0;

    padding: 0;

}

.post-info ul li {

    list-style: none;

    display: inline;

    margin-right: 30px;

    position: relative;

    top: -60px;

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

}

.post-info ul li.on{

    top: 0;

}

.post-info ul li,

.post-info ul li a {

    font-size: 14px;

    color: #fff;

    text-decoration: none;

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

}

.post-info ul li a:hover {

    color: #ff5252;

}

.post-info ul li span {

    margin-right: 10px;

}

.pagination {

    margin: 0;

    padding: 0;

}

.pagination ul {

    background: #fff;

}

.blog .pagination ul li span.current {

    background: #ff5252;

    color: #fff;

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

}

.blog .pagination ul li span.current:hover {

    background: #ff5252;

    color: #fff;

}

.blog .pagination ul li a,.blog .pagination ul li span {

    background: #f2f2f2;

    padding: 15px 15px;

    color: #6a7279;

    margin-right: 2px;

    border: 0;

    border-radius: 0;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

}

.blog .pagination ul li a:hover {

    background: #e7e7e7;

    color: #4f5458;

}

.single-post .post-image {

    /*height: 370px;*/

    position: relative;

}

.single-post .post-details p {

    margin-bottom: 1.5em;

}

#comments a{

    color: #4F5458;

}

.comment-list {

    margin-top: 30px;

}

.comment {

    padding: 20px;

    background: #f2f2f2;

}



#commentform input{

    line-height: 40px;

    height: 40px;

    box-shadow: none;

    outline: none;

    border-color: #ddd;

}

#commentform textarea {

    box-shadow: none;

    outline: none;

    border-color: #ddd;

}

#commentform #submit{

    background: #ff5252;

    text-transform: uppercase;

    font-weight: bold;

    color: #fff;

    padding: 2px 25px 40px 25px;

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

    border: 0;

    position: relative;

}



#commentform #submit:active{

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

    top: 2px;

}



h2.comments-title,h3#reply-title{

    background: #e7e7e7;

    padding: 10px 20px;

    margin: 0;

    color: #4f5458;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    text-shadow: 0 1px 0 #fff;

}

.comment-list{

    list-style-type: none;

    margin: 0 0 40px 0;

}

.comment-list .comment{

    background: #f2f2f2;

    border-bottom: 1px solid #fff;

}



.comment-list .comment:nth-child(even){

    background: #e7e7e7;

}



.comment-list .comment p, .comment-list .comment span{

    /*padding-left: 120px !important;*/

    display: block;

}

.comment-list .comment span.says{

    float: left;

}

.comment-list .comment img{

    float:left;

    border: 6px solid #fff;

    margin: 0 20px 10px 0;

}



.comment-list .comment cite.fn{

    font-size: 18px;

    color: #4f5458;

    text-shadow: 1px 1px #fff;

    margin-bottom: 5px;

    float: left;

    margin-right: 5px;

}



.comment-list .comment .comment-meta{

    color: #999;

    margin-bottom: 10px;

    text-align: right;

}



.comment-list .comment .comment-meta a,a.comment-reply-link {

    color: #4f5458;

    text-decoration: none;

}

.comment-list .comment div.reply{

        clear:both;

    overflow: hidden;

}

a.comment-reply-link{

    float: right;

}

.comment-list .comment .comment{

    margin-left: 100px;

}



.comment-list .comment .comment img{

    width: 75px;

    margin: 0 30px 30px 0;

}



.comment-list .comment .comment p, .comment-list .comment .comment span{

    /*padding-left: 70px !important;*/

}



.comment-list .comment .comment .author{

    font-size: 18px;

}



.comment-list .comment .comment:last-of-type{

    border-bottom: 0;

}

.comment-list .comment ul.children{

    list-style-type: none;

    margin-left: 0;

}

/* sidebar style */

#sidebar .widget {

    margin-bottom: 30px;

}

.blog .widget-title {

    background: #e7e7e7;

    padding: 10px 20px;

    margin: 0;

    color: #4f5458;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    text-shadow: 0 1px 0 #fff;

}

.widget .widget-cnt {

    background: #f2f2f2;

    padding: 20px;

}

.widget .tagcloud a {

    color: #fff;

    background: #ff5252;

    padding: 5px;

    line-height: 36px;

    margin-right: 5px;

    border-radius: 3px;

    font-size: 12px;

    text-decoration: none;

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

}

.widget .tagcloud a:hover {

    background: #4f5458;

}

.widget .widget-cnt >ul {

    margin: 0;

}

.widget .widget-cnt >ul >li {

    display: inline-block;

    min-width: 49%;

    list-style-type: none;

    margin-bottom: 7px;

    background: url(../img/menu-arrow.png) left 8px no-repeat;

}

.widget .widget-cnt >ul >li a {

    color: #4f5458;

    font-size: 14px;

    width: 49%;

    margin-left: 20px;

    text-decoration: none;

    transition: all 0.1s ease-out;

    -webkit-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

}

.widget ul li a:hover {

    color: #ff5252;

}

#twitter .tweet:not(:last-child) {

    margin-bottom: 20px;

}

#twitter .tweet a {

    color: #ff5252;

    text-decoration: none;

}

#twitter .tweet a:hover {

    color: #4f5458;

}

#twitter .tweet p {

    margin-bottom: 0;

}

#twitter .tweet .time {

    font-size: 12px;

    color: #a6a6a6;

}

#flickr ul {

    margin: 0;

    padding: 0;

}

#flickr ul li {

    list-style: none;

    display: inline-block;

    margin: 0 10px 10px 0;

    background: red;

    display: block;

}

#flickr ul li a,

#flickr ul li img{

    display: block;

}



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

/* 6 - Contact Us Styles

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

#map {

    border: 1px solid #eaeaea;

    padding: 5px;

    background: #f2f2f2;

    padding-bottom: 0;

    height: 400px;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: url(grayscale.svg); /* Firefox 4+ */

    filter: gray; /* IE 6-9 */

}

.widget_googlemap #map{

    margin-bottom: 30px;

}

.contact-us{

    margin-bottom: 30px;

}



.contact-us form input{

    line-height: 40px;

    height: 40px;

    border-color: #ddd;

    box-shadow: none;

    outline: none;

}

.contact-us form textarea{

    border-color: #ddd;

    box-shadow: none;

    outline: none;

}

.contact-us form button{

    background: #ff5252;

    text-transform: uppercase;

    font-weight: bold;

    color: #fff;

    padding: 15px 25px;

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

    border: 0;

    position: relative;

}



.contact-us form button:active{

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

    top: 2px;

}



.contact-us .contacts > div{

    float: left;

}



.contact-us .contacts div div{

    width: 100%;

    margin-bottom: 20px;

    float: left;

}



.contact-us .contacts div div:last-of-type{

    margin-bottom: 0;

}



.contact-us .contacts span{

    display: block;

    height: 60px;

    line-height: 60px;

    float: left;

    margin-left: 15px;

    font-weight: bold;

}



.contact-us .contacts i{

    width: 60px;

    height: 60px;

    text-align: center;

    background: #ff5252;

    font-size: 30px;

    color: #fff;

    display: block;

    line-height: 60px;

    float: left;

}





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

/* 7 - Typography Styles

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

.typo-grid {

    margin-bottom: 60px;

}

.typo-grid p {

    margin-bottom: 30px;

}



.typo-grid blockquote p {

    margin-bottom: 0;

}





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

/* 8 - Others

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



.error404-title{

    font-size: 200px;

    color: #ff5252;

    font-weight: bold;

    line-height: 200px;

    text-align: center;

}



.error404-text{

    color: #adadad;

    font-size: 32px;

    line-height: 60px;

}



#music_toggle.play{

    -webkit-animation: music 2s infinite; /* Chrome, Safari 5+ */

     -moz-animation: music 2s infinite; /* Firefox 5-15 */

       -o-animation: music 2s infinite; /* Opera 12.00 */

          animation: music 2s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */

}



@-webkit-keyframes music {

    0% {color: #adadad;}

    50% {color: #f2f2f2;}

    100% {color: #adadad;}

}

@-moz-keyframes music {

    0% {color: #adadad;}

    50% {color: #f2f2f2;}

    100% {color: #adadad;}

}

@-o-keyframes music {

    0% {color: #adadad;}

    50% {color: #f2f2f2;}

    100% {color: #adadad;}

}

@keyframes music {

    0% {color: #adadad;}

    50% {color: #f2f2f2;}

    100% {color: #adadad;}

}



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

/* 9 - Wordpress Specific

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

.wp-caption{}

.wp-caption-text{}

.sticky{}

.gallery-caption {}

.bypostauthor{}

.alignright{float: right;}

.alignleft{float: left;}

.aligncenter{text-align: center;}
/* ====== Professional / kiosk overhaul fixes ====== */
/* NextGEN gallery: render thumbnails as a proper grid, not a single left column */
.ngg-galleryoverview { overflow: hidden; text-align: left; }
.ngg-gallery-thumbnail-box { float: left !important; margin: 0 12px 12px 0 !important; width: auto !important; }
.ngg-gallery-thumbnail { width: auto !important; margin: 0 !important; }
.ngg-gallery-thumbnail img { width: 150px !important; height: 113px !important; object-fit: cover; display: block; padding: 0 !important; }

/* Keep the full horizontal menu down to tablet widths. Kiosk monitors with Windows display
   scaling were rendering below Bootstrap's 979px breakpoint and showing the mobile hamburger. */
@media (min-width: 600px) {
  .nav-collapse, .nav-collapse.collapse { height: auto !important; overflow: visible !important; display: block !important; clear: none !important; }
  .btn-navbar { display: none !important; }
  .nav-collapse .nav { float: none; }
  .nav-collapse .nav > li { float: left; }
}

/* Serviceman table photo thumbnails: crop to square (object-fit) instead of stretching
   non-square source images into the 32x32 box. */
.tablepress img { object-fit: cover; }