/******************** sorting ******************/



 @media only screen  and (min-width: 1200px) {

.box,

.box-team{width:270px !important}

.box-1{width:570px !important}	 

	 

	 }









#options {

float:right;



}





.box-work{margin-left:30px}

#work_container{margin-left:-30px;

margin-bottom:12px}



.works li {margin:0 0 30px 30px }

.works li figure {margin:0}

.works  ul{margin:0}









#options .filter-open

{

background:url(../images/img-filter.png) no-repeat 0 0 #a63343;

height:50px;

width:50px;

display:block;

z-index:10

}





#options .filter-open:hover,

#options .filter-open:focus{

background-color:#000}



.filter{overflow:hidden;

z-index:5}

#options .filter-close

{

background:url(../images/img-filter.png) no-repeat 0 0 #000;

height:50px;

width:50px;

display:block;

}

#options .filter-close:hover,

#options .filter-close:focus

{background-color:#a63343}







#filters,

#portfolio-filter { 

	overflow:hidden;	

	margin:5px 0 0

}



#portfolio-filter{margin-bottom:18px}

#filters li,

#portfolio-filter li {

	float: left; 

	list-style:none;margin:5px 0 0 5px

}

#portfolio-filter li{margin: 0 5px 5px 0}





#filters li a,

#portfolio-filter li a{

font-size:13px;

line-height:18px;

color: #1b1b1b;

display:block;

padding:7px 22px;

text-decoration:none;

background:#f0f0f0;

  -webkit-border-radius:4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);

-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);

box-shadow: inset 0 0 4px rgba(0,0,0,0.15);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



#filters li a.selected,#filters li a:hover,

#filters li.activeFilter a,

#portfolio-filter li.activeFilter a ,

#portfolio-filter li a:hover



{

	color: #fff;

	background:#262626;

	text-decoration:none;

	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5);

-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.5);

box-shadow: inset 0 0 4px rgba(0,0,0,0.5);

}









 @media only screen and (min-width: 980px) and (max-width: 1199px){

	.box{width:290px !important}

    .box-1{width:613px !important} 

	 

	 

	 }





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

	.box{width:224px !important}

    .box-1{width:473px !important} 

	 #work_container{margin-left:-20px;

    }



 .works li {margin:0 0 20px 20px }

	 

	 }





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

#work_container{margin-left:-20px}	

 

	#work_container .box-work {

    margin:0 0 20px 20px;

} 

	 

	 }

	 

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

#options{float:none}

#filters{margin-bottom:20px}	 

#filters li{margin:5px 5px 0 0}	 

.works li {

    margin: 0 5px 10px;

}

#work_container.works{width:480px;margin:0 auto }

	.box{width:228px }

    .box-1{width:228px } 	 

	 }

	 

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

	#work_container.works{width:280px; }

	.box,

	 .box-1{width:100% } 

	#work_container.works li {

    margin: 0 0 10px;

}		  

}