@charset "UTF-8";

#loading {
	background: url(/img/loading.gif) center center no-repeat;
	
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
}
#top_container_bg {
	width:260px;
	height:100%;
	position:fixed;
	right:0;
	top:0;
	z-index:1;
	background: url(../img/bg.gif) left top;
}
#top_container {
	width:260px;
	position:absolute;
	right:0;
	top:0;
	z-index:3;
}

.section {
	border-radius: 6px;
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px;
	background:#FFF;
	width:210px;
	margin:23px auto 0;
}
.section:last-child {
	margin-bottom:23px;
}
.article {
	padding:16px;	
}

.insta h3 {
	line-height:0;
	margin-bottom:15px;	
}
.insta p {
	font-size:10px;
	color:#6f6f6f;
	line-height:1.7;
}

.insta_photo {
	margin-bottom:15px;	
	height:178px;
}
.insta_photo img {
	width:100%;
}
.calender {
	height:120px;
	position:relative;
	margin-bottom:13px;	
}
.calender .s0 {
	position:absolute;
	width:47px;
	height:110px;
	top:0;
	left:0;
	overflow:hidden;
}

.calender .s1 {
	position:absolute;
	top:20px;
	left:44px;
	
}
.calender .s1 .cale1 {
	width:50px;
	height:80px;
	top:0;
	left:0;
	position:absolute;
	overflow:hidden;
}
.calender .s1 .cale2 {
	width:50px;
	height:80px;
	top:0;
	left:50px;
	position:absolute;
	overflow:hidden;
}
.calender .s2 {
	position:absolute;
	top:0px;
	right:0;
	width:100px;
	font-size:8px;
	text-align:right;
	line-height:1;
	font-family: 'Roboto', sans-serif;
	color:#000;
}
.calender .s3 {
	position:absolute;
	top:16px;
	right:5px;
}
.calender .s4 {
	position:absolute;
	top:58px;
	right:-5px;
	width:20px;
	height:53px;
	overflow:hidden;
}
.calender .s5 {
	position:absolute;
	top:95px;
	left:64px;
	width:67px;
	height:20px;
	overflow:hidden;
}
.calender .s6 {
	position:absolute;
	top:94px;
	left:7px;
	width:25px;
	height:20px;
	overflow:hidden;
}
#facebook {
	
}
#facebook li {
	font-size:10px;
	margin-bottom:15px;
	padding-bottom:15px;
	border-bottom:#999 dotted 1px;
	line-height:1.7;
	white-space: pre;           /* CSS 2.0 */
  white-space: pre-wrap;      /* CSS 2.1 */
  white-space: pre-line;      /* CSS 3.0 */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap;  /* HP Printers */
  word-wrap: break-word;      /* IE 5+ */
}
#facebook li:last-child {
	
	border-bottom:none;
}
#facebook li img {
	width:100%;	
}
#facebook li span {
	font-size:10px;
	display:block;
	font-family: 'Roboto', sans-serif;
	line-height:1;
	margin-bottom:12px;
	
}
.fb h3 {
	line-height:0;
	margin-bottom:15px;
	text-align:center;
	
}

#container {
	margin-top:186px;
	margin-left:100px;
	margin-right:240px;
	overflow:visible !important;
	z-index:1;
}

div.element{
	width: 186px;
	height: 186px;
	margin: 0 28px 28px 0;
 float: left;
 cursor:pointer;

}
.variable-sizes .element.big { 
width: 400px;
height: 400px;


}
div.element .article_thum {
	 background: url(../img/icon/icon_bg.png) 5px 39px no-repeat;
	 position:relative;
	 z-index:1;
}
div.element.big .article_thum {
	 background: url(../img/icon/icon_bg.png) 60px 39px no-repeat;
	  position:relative;
	 z-index:1;
	 width: 400px;
height: 400px;

}
div.element .hover {
	width:246px;
	height:286px;
	position:absolute;
	left:-31px;
	top:-35px;
	z-index:0;
	background: url(../img/top/hover2.png) left top no-repeat;
	display:none;
}
div.element.big .hover {
	width:461px;
	height:493px;
	position:absolute;
	left:-31px;
	top:-35px;
	z-index:0;
	background: url(../img/top/hover.png) left top no-repeat;
}

.hover p {
	position:absolute;
	width:100%;
	bottom:37px;
	font-size:12px;
	text-align:center;
	line-height:1;
}
.hover p span {
	font-size:10px;
	display:block;
	margin-bottom:5px;
	color:#666;	
}
.variable-sizes .element.news { 
width: 397px;
height: 397px;
 background: url(../img/top/news_bg.png) no-repeat;
 cursor:inherit !important;
}
.variable-sizes .element.news h2 {
margin-top:33px;
line-height:0;
margin-bottom:20px;	
}

.variable-sizes .element.news li {
	display:block;
	margin-bottom:10px;
	font-size:12px;
	cursor:pointer;
}
.variable-sizes .element.news li dt {
	display:block;
	color:#999;	
	font-family: 'Roboto', sans-serif;
}
div.element .a {
	 z-index:5;
	 position:relative;
}
div.element strong {
	position:absolute;
	top:15px;
	left:5px;
	 z-index:10;
	 width:136px;
	 height:27px;
}
div.element.big strong {
	position:absolute;
	top:15px;
	left:60px;	
	 width:136px;
	 height:27px;
}
div.element strong.blanding {
	background: url(../img/icon/b1.png) no-repeat;
}
div.element strong.recipe {
	background: url(../img/icon/b2.png) no-repeat;
}
div.element strong.development {
	background: url(../img/icon/b3.png) no-repeat;
}
div.element strong.communication {
	background: url(../img/icon/b4.png) no-repeat;
}
div.element strong.other {
	background: url(../img/icon/b5.png) no-repeat;
}
div.element strong.shopping {
	background: url(../img/icon/b6.png) no-repeat;
}


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

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

/**** Isotope CSS3 transitions ****/

.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;
          transition-duration: 0s;
}
@media only screen and (max-width:1204px){
#container {
    margin-top: 226px;
}
#nav {
    left: 64px;
    top: 127px;
}
.navselect {
   	top: 185px;
}
}
@media only screen and (max-width:738px){
	
	#top_container {
		display:none;	
	}
	#top_container_bg {
		display:none;	
	}
	#container {
	margin-top: 159px;
	margin-left:20px;
	margin-right:0;
	overflow:visible !important;
	z-index:1;
		width: 688px;
		transform-origin: 0 0;
	}

.hover p {
	position:absolute;
	width:100%;
	bottom:30px;
	font-size:8px;
	text-align:center;
	line-height:1;
}
.hover p span {
	font-size:8px;
	display:block;
	margin-bottom:5px;
	color:#666;	
}
.variable-sizes .element.news li {
	display:block;
	margin-bottom:10px;
	font-size:10px;
	cursor:pointer;
}
.variable-sizes .element.news li dt {
	display:block;
	color:#999;
	font-size:7px;
	font-family: 'Roboto', sans-serif;
}
.variable-sizes .element.news li dd {
	font-size:10px;
	line-height:1.4;
}

}