nav .cf {width:99.25%; margin-left: 5px;}

#container {padding-left:0; padding-right:0;}
.rufportfolio-grid-wrapper {
	margin: 5px auto 0 auto;
	width: 100%;
}
.rufportfolio-grid-wrapper .controls {
 vertical-align: top;
 background: none repeat scroll 0 0 #333;
 
}
.rufportfolio-grid-wrapper .controls ul {
	list-style: none;
}
.rufportfolio-grid-wrapper .controls li {
	margin-left: 20px;
	cursor: pointer;
	list-style-type: none;
	font-size: 12px;
	text-align: left;
}
.rufportfolio-grid-wrapper .controls li.active {
	font-weight: 700;
}
#rufportfolio-grid {
	width: 100%;
	text-align: justify;
	font-size: 0.1px;
}
#rufportfolio-grid:after {
	content: '';
	display: inline-block;
	width: 100%;
}
#rufportfolio-grid .mix {
	display: none;
	opacity: 0;
	vertical-align: top;
	color: #fff;
	font-size: 30px;
	text-align: center;
}
#rufportfolio-grid .col {
	width:32.55%;
	vertical-align: top;
	color: #fff;
	overflow: hidden;
	position: relative;
	font-size: 30px;
	text-align: center;
	float: left;
    padding: 0 0 0.75% 0.75%;        
}

#rufportfolio-grid .col.categories { }
#rufportfolio-grid .gap {
	display: inline-block;
	width: 200px;
}
#rufportfolio-grid .images .picture {
	
}
#rufportfolio-grid .images img {
	max-width: 100%;
}
#rufportfolio-grid .images .overview {
	position: absolute;
	bottom: 5px;
	width: 100%;
	height: 50px;
	background-color: rgba(240,240,240, 0.8);
	display: none;
	transition: height 2s;
	-webkit-transition: height 2s;
}
#rufportfolio-grid .images .overview span {
	display: inline-block;
	font-size: 12px;
}
#rufportfolio-grid .images .overview h3 {
	display: inline-block;
	color:#000;
	font-size: 12px;
}
#rufportfolio-grid .images .overview div {
	font-size: 12px;
}
#rufportfolio-grid .images:hover .overview {
	display: block
}


/* details view */
#rufportfolio-grid-details {
	width: 100%;
}

.rufportfolio-title{
	margin-left:10px;
	}

.rufportfolio-grid-wrapper .info {
    background: none repeat scroll 0 0 #333;
    vertical-align: top;
    height: 100%;
    
}

.rufportfolio-grid-wrapper .info .jspContainer{
	height: 100% !important;
}

.rufportfolio-grid-wrapper .info-details {
  /*height:200px;*/
   height:85%;
   overflow:scroll;
   padding: 0 15px;
}

.rufportfolio-grid-wrapper .back-link {
   padding: 0 15px;
}

#rufportfolio-grid-details .rufportfolio-project .info {
	vertical-align: top;
	background: none repeat scroll 0 0 #DDDDDD;
	color: #000;
	overflow: hidden;
	position: relative;
	font-size: 12px;
	text-align: left;
	margin:10px;
}
#rufportfolio-grid-details .rufportfolio-project .info p{}
#rufportfolio-grid-details .rufportfolio-project .info div,
#rufportfolio-grid-details .rufportfolio-project .info h2 {
	margin:10px;
}

.item img{
	max-width:inherit;
	width: auto;
	height: auto;
	}

.item {

    color: #FFFFFF;
    float: left;
    overflow: hidden;
    padding: 0 0.75% 0.75% 0;
    position: relative;
    text-align: left;
    vertical-align: top;
    width: 32.55%;
}

/* IMAGE SIZES 33 66 99 */

.item.img-height33 .picture { height:227px; overflow:hidden;}
.item.img-height66 .picture{ height:460px; overflow:hidden;}
.item.img-height99 .picture{ height:694px; overflow:hidden;}
.item.img-width33 { width:32.75%;}
/*.item.img-width66 { width:65.5%;}*/
.item.img-width66 { width:65.25%;}
.item.img-width99 { width:98.9%;}


#container { padding:0}


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

}


@media screen and (max-width: 1024px){
	
#rufportfolio-grid .col {
	width:49.20%;
}
#rufportfolio-grid .images .overview {display:block}
.item{width:49.20%;}

.item.img-height33 .picture { height:auto !important; overflow:hidden;}
.item.img-height66 .picture{ height:auto !important; overflow:hidden;}
.item.img-width33 { width:49.20%;}
.item.img-width66 { width:49.20%;}
.item.img-width99 { width:49.20%;}	
}
	
@media screen and (max-width: 640px){
.item {
	overflow:hidden;
	margin: 10px 0;
	float:none;
	width:100%;
	height:100%px;
}

#rufportfolio-grid .col {width:100%; max-height:auto; padding:0 0 10px}
#rufportfolio-grid .images .overview {display:block}

#rufportfolio-grid .images img {
	width: 100%;
}

#rufportfolio-grid-details .picture img {
	width: 100%;
}

#rufportfolio-grid .images .overview {bottom:10px;}

.item.img-height33 {}
.item.img-height66 { height:auto;}
.item.img-width33 {width:100%;}
.item.img-width66 { width:100%;}
.item.img-width99 { width:100%;}
}


/* for audio */
.audio_section .item.img-height33 .picture{position: relative;}
.audio_section .item.img-height33 .picture img{
max-width: inherit;
width: 100%;
height: 100%;
}

.audio_section .item.img-height33 .picture .audio-activity{
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: url(../Icons/play.png) no-repeat center center;
background-size: 100px;
cursor: pointer;
}

.audio_section .item.img-height33 .picture .audio-activity.pause-audio{
	background: url(../Icons/pause.png) no-repeat center center;
	background-size: 100px;
}

/* .audio_section .info-details, .video .info-details{
	min-height: 208px;
} */

.video .item.img-width33.img-height33.mix_all{
	display: none !important;
}

.audio_box .item{position: relative;}

#myTune{
	position: absolute;
	z-index: -1;
}

.audio_box .picture img{
	display:inline-block!important;
}

.audio_box .item.img-width33.img-height33.mix_all{
	display:inline-block !important;
}