#info { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#fcf8e3; border:1px solid #fbeed5; width:95%; max-width:900px; margin:0 auto 40px auto; font-family:arial; font-size:12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } #info .info-wrapper { padding:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } #info a { color:#c09853; text-decoration:none; } #info p { margin:5px 0 0 0; } .container { position: relative; //width: 960px; margin: 0 auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #filters { margin:1%; padding:0; list-style:none; } #filters li { float:left; } #filters li span { display: block; padding:5px 20px; text-decoration:none; color:#666; cursor: pointer; } #filters li span.active { background: #e95a44; color:#fff; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:31.2%; margin:1%; display:none; float:left; overflow:hidden; } .portfolio-wrapper { overflow:hidden; position: relative !important; background: #666; cursor:pointer; } .portfolio img { max-width:100%; position: relative; top:0; -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); } .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; left:0px; -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .portfolio .label-bg { background: #e95a44; width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; } .portfolio:hover .label { bottom:0; } .portfolio:hover img { top:-30px; } /* #Tablet (Portrait) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { //width: 768px; } #portfoliolist .portfolio { width:48%; margin:1%; } } /* #Mobile (Portrait) - Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { //width: 95%; } #portfoliolist .portfolio { width:100%; margin:1%; } #ads { display:none; } } /* #Mobile (Landscape) - Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { //width: 70%; } #ads { display:none; } } /* #Clearing */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }