I would like to get my Simple Portfolio the same as on this site: http://fitconmiguel.com/index.php
I have installed the component and Module but it looks totally different :-(
Thanks in advance
Dean
.sp-simpleportfolio.sp-simpleportfolio-view-item {
padding: 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap h2 {
font-size: 30px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info h3 {
font-size: 20px;
margin: 35px 0 0;
}
.home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items {
position: relative;
}
.home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a {
color: #fff;
border-bottom: 1px solid transparent;
line-height: 1.8;
}
.home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a:hover,
.home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li.active a {
border-color: #fff;
color: #fff;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li {
margin: 0 20px 20px 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item {
padding: 0 30px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-title {
font-size: 20px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-title {
font-size: 20px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item {
padding: 0 70px;
}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a {
background: #2D2D2D;
border-radius: 2px;
color: #fff;
-webkit-transition: 300ms;
transition: 300ms;
}
.com-spsimpleportfolio .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item {
padding-bottom: 35px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item {
padding: 0 170px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-image {
margin-bottom: 40px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-image img {
border-radius: 2px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description {
width: 100%;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap {
position: relative;
color: #001E00;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap:before {
content: '\e910';
font-family: 'floox-icon';
display: inline-block;
font-size: 10px;
line-height: 1;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap h2 {
color: #43484D;
margin: 8px 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info h3 {
font-weight: 400 !important;
font-size: 24px;
color: #666D70;
letter-spacing: -0.44px;
line-height: 1.45;
margin: 56px 0 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info h4 {
font-weight: 400 !important;
font-size: 22px;
color: #3B3D40;
}
.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info p {
font-size: 18px;
color: #666D70;
line-height: 1.5;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter {
text-align: left;
margin-bottom: 22px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li {
margin: 0 20px 0 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a {
padding: 0;
border: 0;
background: transparent;
border-radius: 0;
font-size: 14px;
color: #43484D;
font-weight: 400 !important;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a:hover {
background: transparent;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li.active a {
background: transparent;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item {
padding: 15px 15px 45px;
text-align: center;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper {
border-radius: 4px;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay {
opacity: 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay .sp-simpleportfolio-btns a {
padding: 0;
margin: 0;
font-size: 78px;
border: 0;
border-radius: 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay .sp-simpleportfolio-btns a:hover {
background: transparent;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap {
padding-top: 5px;
margin-top: 35px;
background: transparent;
position: relative;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info:before,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap:before {
content: '\e910';
font-family: 'floox-icon';
display: inline-block;
font-size: 10px;
line-height: 1;
color: #d7dbdd;
position: absolute;
left: 0;
top: 0;
right: 0;
margin: auto;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info:after,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap:after {
content: '\e910';
font-family: 'floox-icon';
display: inline-block;
font-size: 10px;
line-height: 1;
position: absolute;
left: 0;
top: 0;
right: 0;
margin: auto;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
opacity: 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-title,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-title {
font-size: 24px;
font-weight: 400 !important;
margin-top: 20px;
margin-bottom: 10px;
line-height: 1.1;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-title a,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-title a {
color: #43484D;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-tags,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-tags {
font-size: 14px;
color: #43484D;
font-weight: 400 !important;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-overlay {
opacity: .97;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info:before,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info-wrap:before {
opacity: 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info:after,
.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info-wrap:after {
opacity: 1;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items.layout-gallery-nospace .sp-simpleportfolio-items .sp-simpleportfolio-item {
padding-left: 0;
padding-right: 0;
}
.sp-simpleportfolio.sp-simpleportfolio-view-items.layout-gallery-nospace .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper {
border-radius: 0;
}