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

	design for 768px

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

@media only screen and (min-width: 768px) and (max-width: 959px) {

body{overflow-x:hidden;}

.header{margin-top:0px;}

#portfolio{margin:0; padding:0;}

#portfolio li,  #portfolio li .square, #portfolio li img, #portfolio li .frame, #portfolio li .square, #portfolio li .clickarea, #portfolio li .bginfo{width:450px; height:338px;}

#portfolio li .corner{margin-top:161px;}

#portfolio li .title {margin-top:159px;}

.shadow{ display:none;}

#portfolio li .info{ padding:40px; width:390px; height:228px; overflow:auto;}

.main{width:512px;}

#content{width:450px;}

.grid_8{width:512px;}

#tagline, #social-icons{width:225px;}

.container_12 .grid_4{width:215px; }

.container_12 .one_third{width:135px;}

.container_12 .two_third{width:290px;}

#bloglist li .date,#bloglist li .by, #bloglist li .cat,

#blogread .date,#blogread .by, #blogread .cat { display:block; text-align:left; margin:0;}

#bloglist li .comment-count, #blogread .comment-count{display:none;}

}



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

	design for 480px

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

@media only screen and (min-width: 480px) and (max-width: 767px) {

body{overflow-x:hidden;}

.header{margin-top:0px;}

#canvas{position:relative;}

#mainlogo{text-align:center;}

.sidebar{ display:block; padding-left:0;position:inherit; margin:0; width:420px;}

#slide-list{display:none;}

#wrapper{margin:0 auto; position:absolute; width:100%;}

#content, #footer{width:420px;}

.container_12 .grid_4, .container_12 .one_third, .container_12 .two_third{width:420px; margin-bottom:20px;}

.container_12{ width:420px; margin:0 auto;}

.main{width:420px; position:inherit; margin:0 auto; padding:0; border-left:none;}

.grid_8{width:420px;}

.header{margin-top:20px; margin-bottom:20px; padding:0; width:420px;}

#tagline{ display:none;}

#social-icons{ margin:10px 0 0 0; display:block; width:420px; text-align:center;}

#twitter{display:none;}

.selectnav{ display:block; width:100%; margin-bottom:60px; margin-top:20px;}

.mainmenu ul{display:none;}

.mainmenu select{padding:10px; border:solid 1px #eaeaea; margin:0 auto; width:100%;}

#bloglist li .date,#bloglist li .by, #bloglist li .cat,

#blogread .date,#blogread .by, #blogread .cat { display:block; text-align:left; margin:0;}

#bloglist li .comment-count, #blogread .comment-count{display:none;}

#widget-area{display:none;}

.category li a:hover,.category li.active a{color:#000; padding:0px 10px 0px 10px; margin:0;}	

.separator-b{background:none; visibility:hidden;}

}







		

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

	design for 320px

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

@media only screen and (max-width: 479px) {

body{overflow-x:hidden;}

#canvas{position:relative;}

#mainlogo{text-align:center;}

.sidebar{ display:block; padding-left:0;position:inherit; margin:0; width:280px;}

#slide-list{display:none;}

#wrapper{margin:0 auto; position:absolute; width:100%;}

#content, #footer{width:280px;}

.container_12 .grid_4, .container_12 .one_third, .container_12 .two_third{width:280px; margin-bottom:20px;}

.container_12{ width:280px; margin:0 auto;}

.main{width:280px; position:inherit; margin:0 auto; padding:0; border-left:none;}

.grid_8{width:280px;}

.header{margin-top:20px; margin-bottom:20px; padding:0; width:280px;}

#tagline{ display:none;}

#social-icons{ margin:10px 0 0 0; display:block; width:280px; text-align:center;}

#twitter{display:none;}

.selectnav{ display:block; width:100%; margin-bottom:60px; margin-top:20px;}

.mainmenu ul{display:none;}

.mainmenu select{padding:10px; border:solid 1px #eaeaea; margin:0 auto; width:100%;}

#bloglist li .date,#bloglist li .by, #bloglist li .cat,

#blogread .date,#blogread .by, #blogread .cat { display:block; text-align:left; margin:0;}

#bloglist li .comment-count, #blogread .comment-count{display:none;}

#widget-area{display:none;}

.category li a:hover,.category li.active a{color:#000; padding:0px 10px 0px 10px; margin:0;}	

.separator-b{background:none; visibility:hidden;}

.header{margin-top:20px;}



.pf_gallery.three-cols li{ width:280px;}

.pf_gallery.three-cols li img{width:280px;}

#blog-masonry .box{float:left; width:100%;}

}