#filters {
	padding-top: 0%;
	padding-right: 0%;
	padding-left: 0%;
	padding-bottom: 3%;
	list-style: none;
}
	#filters li {
		display: -webkit-inline-box;
	}
	#filters li span {
	display: block;
	padding: 4px 15px;
	text-decoration: none;
	color: #4F4F77;
	cursor: pointer;
	font-size: 22px;
	text-transform: uppercase;
	font-weight: 500;
	}
	#filters li span.active {
	border: 2px solid #729AB1;
	color: #FFFFFF;
	background-color: #729AB1;
	}
 	#portfoliolist .portfolio {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		width: 40%;
		display:none;
		float:left;
		overflow:hidden;
		margin: 2% 5% 2% 5%;
	}		
	.portfolio-wrapper {
		overflow:hidden;
		position: relative !important;
		cursor:pointer;
	}
	.portfolio img {
		max-width:100%;
		/*--position: relative;--*/
		transition: all 300ms!important;
		-webkit-transition: all 300ms!important;
		-moz-transition: all 300ms!important;
		display: block;
	}
	

	
@media only screen and (max-height: 1920px) and (orientation: portrait) {
.coll_middle {height: 820px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.4em; line-height: 1.8em;}
.edu li {font-size: 1.4em; line-height: 1.8em;}
.edu p {font-size: 1.4em; line-height: 1.8em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 2em; padding-top: 12px; padding-bottom: 8px; margin-top: 8px; margin-bottom: 8px;}
.coll_header h3 {font-size: 1.8em; padding-top: 0px; padding-bottom: 6px; margin-top: 6px; margin-bottom: 6px; }
}	

@media only screen and (max-height: 1366px) and (orientation: portrait) {
.coll_middle {height: 620px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.3em; line-height: 1.8em;}
.edu li {font-size: 1.3em; line-height: 1.8em;}
.edu p {font-size: 1.3em; line-height: 1.8em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 1.8em; padding-top: 10px; padding-bottom: 6px; margin-top: 6px; margin-bottom: 6px;}
.coll_header h3 {font-size: 1.6em; padding-top: 0px; padding-bottom: 4px; margin-top: 4px; margin-bottom: 4px; }
}

@media only screen and (max-height: 1080px) and (orientation: portrait) {
.coll_middle {height: 580px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.2em; line-height: 1.7em;}
.edu li {font-size: 1.2em; line-height: 1.7em;}
.edu p {font-size: 1.2em; line-height: 1.7em;}	
.coll_img {width: 100%;}
.coll_header h2 {font-size: 1.8em; padding-top: 10px; padding-bottom: 6px; margin-top: 6px; margin-bottom: 6px;}
.coll_header h3 {font-size: 1.6em; padding-top: 0px; padding-bottom: 4px; margin-top: 4px; margin-bottom: 4px; }
}

@media only screen and (max-height: 960px) and (orientation: portrait) {
.coll_middle {height: 350px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.2em; line-height: 1.6em;}
.edu li {font-size: 1.2em; line-height: 1.6em;}
.edu p {font-size: 1.2em; line-height: 1.6em;}
.coll_img {width: 30%; margin: 0 auto;}
.coll_header h2 {font-size: 1.7em; padding-top: 8px; padding-bottom: 4px; margin-top: 4px; margin-bottom: 4px; text-align: center;}
.coll_header h3 {font-size: 1.5em; padding-top: 0px; padding-bottom: 4px; margin-top: 4px; margin-bottom: 4px; text-align: center;}
}

@media only screen and (max-height: 768px) and (orientation: portrait) {
.coll_middle {height: 230px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.1em; line-height: 1.5em;}
.edu li {font-size: 1.1em; line-height: 1.5em;}
.edu p {font-size: 1.1em; line-height: 1.5em;}
.coll_img {width: 60%;}
.coll_header h2 {font-size: 1.6em; padding-top: 6px; padding-bottom: 6px; margin-top: 6px; margin-bottom: 6px; text-align: center;}
.coll_header h3 {font-size: 1.4em; padding-top: 0px; padding-bottom: 6px; margin-top: 6px; margin-bottom: 6px; text-align: center;}
}

@media only screen and (max-height: 600px) and (orientation: portrait) {
.coll_middle {height: 200px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.1em; line-height: 1.4em;}
.edu li {font-size: 1.1em; line-height: 1.4em;}
.edu p {font-size: 1.1em; line-height: 1.4em;}
.coll_img {width: 90%;}
.coll_header h2 {font-size: 1.5em; padding-top: 4px; padding-bottom: 4px; margin-top: 4px; margin-bottom: 4px;}
.coll_header h3 {font-size: 1.3em; padding-top: 0px; padding-bottom: 4px; margin-top: 4px; margin-bottom: 4px; }
}

@media only screen and (max-height: 480px) and (orientation: portrait) {
.coll_middle {height: 180px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1em; line-height: 1.3em;}
.edu li {font-size: 1em; line-height: 1.3em;}
.edu p {font-size: 1em; line-height: 1.3em;}
.coll_img {width: 80%;}
.coll_header h2 {font-size: 1.3em; padding-top: 2px; padding-bottom: 2px; margin-top: 2px; margin-bottom: 2px;}
.coll_header h3 {font-size: 1.2em; padding-top: 0px; padding-bottom: 2px; margin-top: 2px; margin-bottom: 2px; }
}

@media only screen and (max-height: 320px) and (orientation: portrait) {
.coll_middle {height: 100px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 0.8em; line-height: 1em;}
.edu li {font-size: 0.8em; line-height: 1em;}
.edu p {font-size: 0.8em; line-height: 1em;}
.coll_img {width: 80%;}
.coll_header h2 {font-size: 1.1em; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;}
.coll_header h3 {font-size: 1em; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; }
}

/*landscape*/

@media only screen and (max-height: 1920px) and (orientation: landscape) {
.coll_middle {height: 750px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.5em; line-height: 1.6em;}
.edu li {font-size: 1.5em; line-height: 1.6em;}
.edu p {font-size: 1.5em; line-height: 1.6em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 2.2em; padding-top: 7px; padding-bottom: 2px; margin-top: 7px; margin-bottom: 2px;}
.coll_header h3 {font-size: 2em; padding-top: 0px; padding-bottom: 7px; margin-top: 5px; margin-bottom: 7px; }
}

@media only screen and (max-height: 1366px) and (orientation: landscape) {
.coll_middle {height: 680px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.4em; line-height: 1.5em;}
.edu li {font-size: 1.4em; line-height: 1.5em;}
.edu p {font-size: 1.4em; line-height: 1.5em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 2.1em; padding-top: 7px; padding-bottom: 0px; margin-top: 30px; margin-bottom: 0px;}
.coll_header h3 {font-size: 1.9em; padding-top: 0px; padding-bottom: 5px; margin-top: 4px; margin-bottom: 5px; }
}

@media only screen and (max-height: 1080px) and (orientation: landscape) {
.coll_middle {height: 520px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.2em; line-height: 1.3em;}
.edu li {font-size: 1.2em; line-height: 1.3em;}
.edu p {font-size: 1.2em; line-height: 1.3em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 1.9em; padding-top: 5px; padding-bottom: 0px; margin-top: 40px; margin-bottom: 0px;}
.coll_header h3 {font-size: 1.7em; padding-top: 0px; padding-bottom: 4px; margin-top: 3px; margin-bottom: 5px; }
}

@media only screen and (max-height: 960px) and (orientation: landscape) {
.coll_middle {height: 450px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1.1em; line-height: 1.2em;}
.edu li {font-size: 1.1em; line-height: 1.2em;}
.edu p {font-size: 1.1em; line-height: 1.2em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 1.6em; padding-top: 5px; padding-bottom: 0px; margin-top: 25px; margin-bottom: 0px;}
.coll_header h3 {font-size: 1.4em; padding-top: 0px; padding-bottom: 4px; margin-top: 3px; margin-bottom: 5px; }
}

@media only screen and (max-height: 768px) and (orientation: landscape) {
.coll_middle {height: 410px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 1em; line-height: 1.3em;}
.edu li {font-size: 1em; line-height: 1.3em;}
.edu p {font-size: 1em; line-height: 1.3em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 1.4em; padding-top: 5px; padding-bottom: 0px; margin-top: 5px; margin-bottom: 0px;}
.coll_header h3 {font-size: 1.2em; padding-top: 0px; padding-bottom: 4px; margin-top: 3px; margin-bottom: 5px; }
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
.coll_middle {height: 240px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 0.8em; line-height: 1em;}
.edu li {font-size: 0.8em; line-height: 1em;}
.edu p {font-size: 0.8em; line-height: 1em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 1.2em; padding-top: 5px; padding-bottom: 0px; margin-top: 5px; margin-bottom: 0px;}
.coll_header h3 {font-size: 1em; padding-top: 0px; padding-bottom: 4px; margin-top: 3px; margin-bottom: 5px; }
}

@media only screen and (max-height: 480px) and (orientation: landscape) {
.coll_middle {height: 190px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 0.6em; line-height: 0.8em;}
.edu li {font-size: 0.6em; line-height: 0.8em;}
.edu p {font-size: 0.6em; line-height: 0.8em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 1em; padding-top: 5px; padding-bottom: 0px; margin-top: 5px; margin-bottom: 0px;}
.coll_header h3 {font-size: 0.9em; padding-top: 0px; padding-bottom: 4px; margin-top: 3px; margin-bottom: 5px; }
}

@media only screen and (max-height: 320px) and (orientation: landscape) {
.coll_middle {height: 120px; }
.coll_footer {padding-top: 10px;}
.coll_middle p {font-size: 0.4em; line-height: 0.6em;}
.edu li {font-size: 0.4em; line-height: 0.6em;}
.edu p {font-size: 0.4em; line-height: 0.6em;}
.coll_img {width: 100%;}
.coll_header h2 {font-size: 0.8em; padding-top: 5px; padding-bottom: 0px; margin-top: 5px; margin-bottom: 0px;}
.coll_header h3 {font-size: 0.7em; padding-top: 0px; padding-bottom: 4px; margin-top: 3px; margin-bottom: 5px; }
}


@media screen and (max-width:1024px){
#portfoliolist .portfolio {width: 40%; margin: 2% 5% 2% 5%;}
}
@media screen and (max-width:800px){
#portfoliolist .portfolio {width: 40%; margin: 2% 5% 2% 5%;}
}
@media screen and (max-width:768px){
#portfoliolist .portfolio {width: 40%; margin: 2% 5% 2% 5%;}
}
@media screen and (max-width:640px){
#portfoliolist .portfolio {width: 40%; margin: 2% 5% 2% 5%;}
}
@media screen and (max-width:480px){
#portfoliolist .portfolio {width: 46%; margin: 1% 2% 1% 2%;}
}
@media screen and (max-width:320px){
#portfoliolist .portfolio {width: 46%; margin: 1% 2% 1% 2%;}
}