body, html{
  background-color: #eee;
}
.container{
  width: 100%;
}

/*header*/
.header{
  width: 100%;
}
.header a{
  text-decoration: none;
  color: #fff;
}

.header__bar{
  width: 980px;
  margin: 0 auto;
  background-color: #333;
  display: block;
  padding: 5px 15px;
}

.header__logo{
  float: left;

  padding: 0;
  margin: 0;
}
.header__menu{
  padding:0;
  margin: 0;
  float: right;
  list-style: none;
}
.header__menu__item{
  display: inline-block;
  line-height: 50px;

}
.header__menu__item a{
  padding: 5px 10px;
  color: #fff;

}

.hamburger-menu{
  float:right;
  padding: 15px;
  display: none;
}



.header__slider{
  height: 350px;
  background-color: red;
  display: none;
}
/*fine header*/
/*content*/
.content__container{
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  margin-top: 0;
}

.content{
  float: left;
  width: 70%;
}
.sidebar{
  float: left;
  width: 30%;
}
/*fine content*/



/*sidebar*/
/*fine sidebar*/

/*footer*/
/*fine footer*/

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*media queris*/
/*tablet*/
@media (max-width:998px) {

}
/*smartphone*/
@media (max-width:767px) {
  .content,
  .sidebar{
    width:100%;
  }
  .header__menu{
    height: 0;
    overflow: hidden;
    width: 100%;
  }
  /*menu smartphone*/
  .header__menu__item{
    display: block;
  }
  .header__menu__item a{
      display: block;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
  .hamburger-menu{
  display: block;
  }
  .show-menu{
    height: auto;
  }
  .header__logo{
    margin-bottom: 20px;
  }
  .header__slider{
    display: none;
  }
}