#header {
  position: relative;
}

.container {
  width: 1080px;
}

.area-menu {
	width: 120px;
  float:left;
}

.area-menu.mobile {
  display: none;
}

.area-menu h2 {
	border-bottom: 1px solid #DFDFDF;
	/*border-top: 5px solid #303436;*/
  color: #686868;
  padding-top: 13px;
  font-size: 14px;
  height: 27px;
  margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
}

.area-menu ul{
  padding: 0px 0;
}

.areanav > .cat-item {
  padding: 0 0 6px;
}

.areanav li {
  display: block;
}

.areanav > .cat-item > a {
  border-bottom: 1px dotted #ccc;
  width: 100%;
  font-weight: bold;
  padding: 2px 0;
  display: block;
}

.area-menu ul ul {
  padding: 2px 0;
}

.area-menu ul ul{
  margin: 0;
}

.area-menu li{
  list-style-type: none;
  margin-left:4px;
  font-size: 1em;
  padding-bottom: 4px;
}

.area-menus .children > li:first-child {
  padding-top: 4px;
}

.area-menu a {
  color: #164C72;
}

.area-menu a:hover {
  color: rgb(255, 207, 29);
}

#wrapper {
  padding: 4px;
}

#footer {padding: 5px;}


#blocks-wrapper {
  width: 960px;
  float: right;
}

#blocks-left {
  width: 640px;
  margin-left:10px;
  float: left;
}

#sidebar {
  width:300px;
  margin: 8px 0 0;
  float:right;
}


#catmenu{display:block;}
#catnav select{display:none;}

.list-block-slide h3{font: 1.2rem/1.2"";}

@media only screen and (max-width: 1090px) {
  .list-block-slide { margin: 10px;}
  .magbig-thumb {width: 100%; overflow:hidden;}
  .container {width: 100%;}

  .area-menu {
    margin-left: 10px;;
  }

  #wrapper {
    width: 100%;
  }

  #wrapper{
    padding: 0;
  }

  #footer {padding: 5px 0;}

  #blocks-wrapper {
    width: 85%;
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px);
    margin: 0;
  }

  #blocks-left {
    width: 65%;
    width: -webkit-calc(100% - 330px);
    width: calc(100% - 330px);
  }

  #sidebar {
  margin-right: 10px;
}


}

@media only screen and (max-width: 1070px) {
  .magbig-thumb {width: 100%;}
    #blocks-wrapper {
    width: 83%;
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px);
  }
    #blocks-left {
    width: 59%;
    width: -webkit-calc(100% - 330px);
    width:calc(100% - 330px);
  }
}

@media only screen and (max-width: 1070px) {
  .magbig-thumb {width: 100%;}
}

@media only screen and (max-width: 1024px) {
  .magbig-thumb {width: 100%;}
  #blocks-wrapper {
    width: 83%;
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px);
  }
  #blocks-left {
    width: 58%;
    width: -webkit-calc(100% - 330px);
    width: calc(100% - 330px);
  }
}





/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (max-width: 959px) {
  #catmenu{display:block;}
  #catnav select{display:none;}
  /*.list-block{width:60%;}*/
  .sb-post-list-title{width:58%;}
  .blog-lists-title {width:45%;}


  #blocks-wrapper {width:100%;}
  .area-menu {
    display: block;;
	  width: 100%;
    margin: 0;
    padding: 0 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float:none;
    border-top:1px solid #6a6d6e;
 }

  .area-menu h2 {
    float:left;
    border: none;
    display: block;
  	padding : 16px 0;
  	margin-botom: 4px;
  	font-size: 120%;
  }

  .area-menu ul {
    float:left;
    padding: 0;
    margin: 14px 20px;
    display: block;
  }

  .area-menu li{
    float: left;
    list-style-type: none;
    padding: 0px 16px;
  }

  #blocks-left {
    width: 64%;
    width: -webkit-calc(100% - 330px);
    width: calc(100% - 330px);
    margin-left: 10px;
  }
  #sidebar {
    margin-right: 10px;
  }
  .area-menu {
    border-top:none;
  }
}

@media only screen and (max-width: 900px) {
  #blocks-left {
    width: 61%;
    width: -webkit-calc(100% - 330px);
    width: calc(100% - 330px);
  }
}

@media only screen and (max-width: 832px) {
  #blocks-left {
    width: 59%;
    width: -webkit-calc(100% - 330px);
    width: calc(100% - 330px);
  }
}

@media only screen and (max-width: 800px) {
  #blocks-left {
    width: 58%;
    width: -webkit-calc(100% - 330px);
    width: calc(100% - 330px);
  }

  .area-menu.mobile {
    display: block;
    float: none;
  }

  .area-menu.mobile .areanav > .cat-item {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 0;
  }
  .area-menu.desktop { display: none;}

  .area-menu.mobile h2 {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #DFDFDF;
  }

  .area-menu.mobile .areanav {
    margin-bottom: 20px;
  }

  .area-menu.mobile ul { margin: 2px 0; }

  .area-menu.mobile .children {
    margin-top: 8px;
  }

  .area-menu.mobile .children li {
    padding: 4px;
    background-color: #f49917;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
    margin: 0 8px 8px 0;
    border-radius: 4px;
  }

  .area-menu.mobile .children li a {
    color: #fff;
  }

}

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
  #catmenu {display:none;}

  #blocks-wrapper { padding:0;}
  #blocks-left {
    float: none;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*padding: 10px;*/
    margin: 0;
  }
    #sidebar {
    float:none;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
  }
  #catnav select{display:block;}

  .camera_wrap img {max-width: none!important;width:auto!important;}

  .post-content{padding: 10px 0;}
  #catnav_2.secondary {
    width: 100%;
    border-top-right-radius: 2px;
    margin-bottom: 0px;
    border-top-left-radius: 2px;
    position: absolute;
    top: 48px;
    background-color: #F6F5F2;
    z-index: 16;
  }
}


/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */

@media only screen and (max-width: 580px) {
  #catnav_2.secondary {
    position: absolute;
    top: 48px;
    background-color: #F6F5F2;
    z-index: 16;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #blocks-wrapper { padding: 0;}
  #catmenu {display:none;}
  #catnav select{display:block;}

  .camera_wrap img {max-width: none!important;width:auto!important;}

  .list-block-slide {margin: 4px;}
  .list-block-slide h3{font: 1rem/1.2"";}
}


/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {clear: both; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}