body{
  font-family: 'Quicksand', sans-serif;
  background-color: #e5e5e5
}
a:focus {
  outline:0px solid
}
img {
  max-width:100%;
  height:auto;
}
p {
  color:#666;
  margin:0 0 15px;
}

h1, h2, h3, h4, h5, h6 {
  margin:0 0 10px;
  font-family: 'Quicksand', sans-serif;;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
  color:inherit;
}
a {
  transition:all 0.3s ease 0s;
  text-decoration:none;
}
a:hover {
  color:#69DCD5;
  text-decoration:none;
}

a:active, a:hover {
  outline:0 none;
}

a:focus {
  text-decoration:none;
}
ul {
  list-style:outside none none;margin:0;padding:0;
}
ol{
  padding-left: 13px;
}
.container-custom {
  max-width:1170px!important;
  margin:0 auto!important;
}
.wrapper {
  position:relative;
  margin-left:250px;
}
.mecmua-post-outer {
  padding:60px 0;
}
/* --Preloader */

.page-loader {
	position: fixed;
	background: #fff;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: 9998;
}

.loader {
	position: absolute;
	border-left: 2px solid #b2b2b2;
	border-top: 2px solid rgba(245, 245, 245, 0.8);
	border-right: 2px solid rgba(245, 245, 245, 0.8);
	border-bottom: 2px solid rgba(245, 245, 245, 0.8);
	height: 46px;
	width: 46px;
	left: 50%;
	top: 50%;
	margin: -23px 0 0 -23px;
	text-indent: -9999em;
	font-size: 10px;
	z-index: 9999;
	-webkit-animation: load 0.8s infinite linear;
	   -moz-animation: load 0.8s infinite linear;
		 ms-animation: load 0.8s infinite linear;
		  o-animation: load 0.8s infinite linear;
			animation: load 0.8s infinite linear;
}

.loader,
.loader:after {
	border-radius: 50%;
	width: 46px;
	height: 46px;
}

@-webkit-keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*Sidebar*/
.sidebar {
  position:fixed;
  width:250px;
  background-color:#111;
  height:100%;
  top:0;
  left:0;
  padding:60px 0 0px 20px;
  z-index:999;
  color:#fff;
  border:0;
  border-radius:0;
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}
nav.navbar.navbar-default.sidebar a {
    color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
}
ul.social li {
  display:inline-block;
  padding:5px;
}

.sidebar-footer {
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
  padding:15px 30px;
  font-size:25px;
  text-align:center;
}
/*Siderbar Tips*/
.mecmua-tips{
	position:absolute;
	bottom:75px;
	width: 230px;
}

.menu .menu-item {
  padding:10px 0;
}
.menu .menu-item a {
  color:#fff;
}
.mecmua-posts article {
  margin-bottom:35px;
}
.post .post-thumbnail {
  margin-bottom:20px;
}
.post-entry {
  margin-top:20px;
}
h2.post-title.font-alt {
  font-size:19px;
  text-transform:uppercase;
}
a.btn.load-more {
  background:#111;
  color:#fff;
  padding:10px 25px;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.container-custom {
    max-width: 1170px!important;
    margin: 0 auto!important;
}
.mecmua-page-outer{
	padding:20px 0 ;
}
/*Sidebar*/
.sidebar{
  position:fixed;
  width:250px;
  background-color:#111;
  height:100%;
  top:0;
  left:0;
  padding:60px 0 0px 20px;
  z-index:999;
  color:#fff;
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}
.wrapper{
  position:relative;
  margin-left:250px;
}
ul.social li{
  display:inline-block;
  padding:5px;
}
.sidebar-footer{
   position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 15px 30px;
    font-size: 25px;
    text-align: center;
}
.menu-menu-1-container{
  padding-top: 85px;
}
a.logo{
  margin: 30px 0;
  color:#fff;
}
/*Sidebar Media*/
@media (max-width: 991px){

  .sidebar{
    position:relative;
    z-index:99999;
    height:auto;
    width:100%;
    padding:0;
  }
  .sidebar:after{
    content:normal;
  }
  .wrapper{
    margin-left:0;
  }
}
/*Menu*/
.menu .menu-item{
  padding: 10px 0;
}
.menu .menu-item a{
  color:#fff;
}

/*Post*/
.meta-tags a{
	position: relative;
    background: #111111;
    color: #fff;
    display: inline-block;
    padding: 6px 20px 5px 10px;
    margin: 0px 15px 10px 0;
    font-size: 11px;
    -webkit-transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
    -moz-transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
    -o-transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
    transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    -o-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
}
.meta-tags a:before{
    border-top: 13px solid rgba(0, 0, 0, 0);
    border-left: 9px solid #111111;
    border-bottom: 13px solid rgba(0, 0, 0, 0);
    position: absolute;
    content: "";
    right: -9px;
    top: 0px;
    height: 0;
    width: 0;
    -webkit-transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
    -moz-transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
    -o-transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
    transition: all 0.125s cubic-bezier( 0.3, 0.1, 0.58, 1 );
}
.meta-tags a:after{
	 background: #fff;
    position: absolute;
    display: block;
    content: "";
    right: 4px;
    top: 12px;
    height: 4px;
    width: 4px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.mecmua-posts article{
  margin-bottom: 35px;
}
.post .post-thumbnail{
  margin-bottom: 20px;
}
.post-entry {
  margin-top: 13px;
}
h2.post-title.font-alt {
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 600;
}
a.btn.load-more {
    background: transparent;
    color: #111;
    padding: 10px 25px;
    border: 1px solid #111;
    border-radius: 0;
}
a.more-link {
    background: #111;
    color: #fff;
    padding: 10px 25px;
    border: 1px solid #111;
    border-radius: 0;
}
a.more-link:hover{
    background: transparent;
    color: #111;
    padding: 10px 25px;
}
.post-meta span{
  font-weight: 600;
  color: #4e4e4e;
}

.post-meta span a{
  color: #111;
  text-transform: capitalize;
}
/*Comments*/
h3#reply-title{
	position:relative;
}
h3#reply-title:after {
    position: absolute;
    left: 0;
    right: 0;
    content: '';
    height: 1px;
    background: #d3d3d3;
    bottom: -5px;
}
li.comment{
  background: #111;
  padding: 20px 20px;
  margin-bottom: 20px;
  color: #fff;;

}
.comment p{
  color:#fff;
  margin-bottom: 0;
}
.comment-form textarea{
  width: 100%;
}
.comment-form .submit{
    background: #111;
    color: #fff;
    padding: 10px 25px;
    border: 1px solid #111;
    transition: .9s;
}
.comment-form .submit:hover{
    background: transparent;
    color: #111;
}
p[class^="comment-form-"] input{
  width: 100%;
  height: 40px;
}
/*Portfolio*/

/* Portfolio filter */

.filter {
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.filter > li {
  display: inline-block;
  padding: 5px 0;
  margin: 0 25px;
}

.filter > li a {
  color: rgba(102, 102, 102, 0.5);
  font-size: 14px;
  position: relative;
  text-transform: uppercase;
  transition: all 0.2s ease 0s;
}
.filter > li a::after {
  background: #999 none repeat scroll 0 0;
  content: "";
  height: 1px;
  left: 50%;
  margin-left: -18px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(43deg);
  width: 33px;
}
.filter > li a:hover::after ,
.filter > li a.current::after {
  background: #000 none repeat scroll 0 0;
  opacity: 1;
}
.filter > li a:hover,
.filter > li a.current {
  color: #000;
}

/* Portfolio grid */

.works-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

.works-grid.works-grid-gut {
}

.works-grid.works-grid-gut .work-item {
}

.work-item {
  width: 50%;
  float: left;
  margin: 0;
  position: relative;
}

.works-grid-3 .work-item {
  width: 32.70%;
}

.container > .works-grid-3 .work-item {
  width: 33.2%;
}

.works-grid-4 .work-item {
  width: 25%;
}

/* Portfolio item */

.work-item > a {
  position: relative;
  display: block;
  overflow: hidden;
}

.work-image {
  position: relative;
  overflow: hidden;
}

.work-image img {
  display: block;
  overflow: hidden;
  width: 100%;
  transition: .9s;
}

.work-image:after {
  position: absolute;
  display: block;
  content: "";
  height: 100%;
  width: 50%;
  top: 0;
  left: 0;
  transition: .9s;
}

.work-image:before {
  position: absolute;
  display: block;
  z-index: 1;
  content: "";
  height: 100%;
  width: 50%;
  top: 0;
  left: 50%;
  transition: .9s;
}

.work-caption {
  width: 100%;
  padding: 0 20px;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
  transition: .9s;
}

.work-title {
  font-size: 18px;
  color: #fff;
  margin: 0 0 6px;
}

.work-descr {
  text-transform: uppercase;
  font-size: 14px;
  color: #999;
}

/* */
.works-grid-4 .work-title {
  font-size: 14px;
}

.works-grid-4 .work-descr {
  font-size: 12px;
}

/* Portfolio item hover */

.work-item:hover .work-image:after {
  background: rgba(0, 0, 0, .7);
}
.work-item:hover .work-image:before {
  background: rgba(30, 62, 59, 0.78);
}
.work-item:hover a.sales-url,
.work-item:hover a.demo-url{
  display: block;
}
a.demo-url{
  display: none;
  position: absolute;
  z-index: 999;
  height: 100%;
  width: 50%;
  padding-top:115px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  transition: .9s;
}
a.sales-url{
  display: none;
  position: absolute;
  z-index: 999;
  height: 100%;
  width: 50%;
  padding-top:115px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  transition: .9s;
  top: 0;
  right: 0;
}
.work-item:hover .work-image > 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);
}

.work-item:hover .work-caption {
  bottom: 50%;
  opacity: 1;
  z-index: 3;
  -webkit-transform: translateY(50%);
     -moz-transform: translateY(50%);
          transform: translateY(50%);
}

/* Work item white background */

.works-grid.works-hover-w .work-title {
  color: #000;
}

.works-grid.works-hover-w .work-descr {
  color: #666;
}

.works-grid.works-hover-w .work-item:hover .work-image:after {
  background: rgba(255, 255, 255, .8);
}

.works-grid.works-hover-g .work-image:after {
  opacity: 0;
}
.works-grid.works-hover-g .work-title,
.works-grid.works-hover-g .work-descr {
  color: #000;
}

.works-grid.works-hover-g .work-item:hover .work-image:after {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmRmIiBzdG9wLW9wYWNpdHk9IjAuOSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZGYiIHN0b3Atb3BhY2l0eT0iMC45Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2YwYjMiIHN0b3Atb3BhY2l0eT0iMC45Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%, rgba(255,255,223,0.8) 25%, rgba(252,240,179,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,223,0.8)), color-stop(25%,rgba(255,255,223,0.8)), color-stop(100%,rgba(252,240,179,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffdf', endColorstr='#e6fcf0b3',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
opacity: 1;
}