html {
overflow-y: scroll;
}
body {
background-color: #222;
font-family: Helvetica, Arial, Verdana;
/*background: #efefef url('../img/ticks.png') repeat 0 0;*/
margin: 15px 0 0 0;
font-size: 12px;
}
.title a {
text-decoration: none;
display: block;
text-align: center;
font-size: 2em;
color: orange;
}
#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;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
padding-bottom: 50px;
}
#filters {
margin: 1%;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#filters li {
float: left;
}
#filters li span {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #ffab00;
cursor: pointer;
border: 1px solid orange;
margin: 2px;
width: 96px;
text-align: center;
text-transform: uppercase;
}
#filters li span.active {
/*background: #e95a44;*/
background: #ff9000;
/*color: #fff;*/
color: #111;
}
/*TEST ADDED BY ME to center the thumbnail layout in normal and large screen mode*/
#portfoliolist {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}
#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
/*width:23%;*/
margin: 5px;
display: none;
float: left;
overflow: hidden;
}
.portfolio-wrapper {
overflow: hidden;
position: relative !important;
background: #555;
cursor: pointer;
/*added by me - PASQ*/
/* max-width: 100%; */
/* not good for large screen size */
max-width: 192px;
border: 1px solid orange;
}
.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;
-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;*/
background: #ff9000;
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;
} */
@media only screen and (min-width: 320px) and (max-width: 480px) {
.portfolio-wrapper {
/*max-width: 142px;*/
max-width: 160px;
}
.portfolio .label-text {
color: #111;
font-size: 9px;
position: relative;
z-index: 500;
padding: 5px 8px;
}
.title a {
font-size: 1.3em;
}
#filters li span {
padding: 1px 7px;
font-size: 12px;
}
}
/* #Tablet (Portrait) */
/*@media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
width: 768px;
}
}*/
/* #Mobile (Portrait) - Note: Design for a width of 320px */
/*@media only screen and (max-width: 360px) {
.container {
width: 360px;
}
#portfoliolist .portfolio {*/
/*width:48%;*/
/* margin:1%;
}
#ads {
display:none;
}
}*/
/*@media only screen and (max-width: 480px) {
.container {
width: 100%;
}*/
/* #Mobile (Landscape) - Note: Design for a width of 480px */
/*@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {*/
/*width: 100%;*/
/*}
#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;
}
/* Self Clearing Goodness End */
.footer {
display: block;
width: 100%;
position: fixed;
bottom: 0;
background-color: #1119;
border-top: 1px solid orange;
font-size: 12px;
color: orange;
text-align: center;
}
.contactform {
background-color: orange;
max-width: 850px;
margin: 0 auto;
padding-bottom: 55px;
width: 400px;
}
@media only screen and (max-width: 320px) {
.contactform {
width: 300px;
}