/* Description: Portfolio Framework Author: InsideLab Version: 1.0 */ /* -------------------------------------------------- :: Portfolio Widget Blue -------------------------------------------------- */ .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input:checked + .portfolio-widget-label:before, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input:checked + .portfolio-widget-label:after { border-bottom:4px solid #6bbef8; } .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input:checked + .portfolio-widget-label { color:#6bbef8; } .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-caption { background-color:rgba(107,190,248,0.9); } .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:before{ border-bottom:3px solid #6bbef8; } .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:after{ border-bottom:3px solid #6bbef8; } .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-blue .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description a:hover i{ color:#6bbef8; } /* -------------------------------------------------- :: Portfolio Widget Green -------------------------------------------------- */ .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input:checked + .portfolio-widget-label:before, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input:checked + .portfolio-widget-label:after { border-bottom:4px solid #6ed790; } .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input:checked + .portfolio-widget-label { color:#6ed790; } .portfolio-widget-default.portfolio-widget-green .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-caption { background-color:rgba(110,215,144,0.8); } .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:before{ border-bottom:3px solid #6ed790; } .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:after{ border-bottom:3px solid #6ed790; } .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-green .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description a:hover i{ color:#6ed790; } /* -------------------------------------------------- :: Portfolio Widget Red -------------------------------------------------- */ .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input:checked + .portfolio-widget-label:before, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input:checked + .portfolio-widget-label:after { border-bottom:4px solid #ed7066; } .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input:checked + .portfolio-widget-label { color:#ed7066; } .portfolio-widget-default.portfolio-widget-red .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-caption { background-color:rgba(237,112,102,0.8); } .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:before{ border-bottom:3px solid #ed7066; } .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:after{ border-bottom:3px solid #ed7066; } .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-red .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description a:hover i{ color:#ed7066; } /* -------------------------------------------------- :: Portfolio Widget Orange -------------------------------------------------- */ .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input:checked + .portfolio-widget-label:before, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input:checked + .portfolio-widget-label:after { border-bottom:4px solid #f6a258; } .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input:checked + .portfolio-widget-label { color:#f6a258; } .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-caption { background-color:rgba(246,162,88,0.8); } .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:before{ border-bottom:3px solid #f6a258; } .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:after{ border-bottom:3px solid #f6a258; } .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-orange .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description a:hover i{ color:#f6a258; } /* -------------------------------------------------- :: Portfolio Widget Purple -------------------------------------------------- */ .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input:checked + .portfolio-widget-label:before, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input:checked + .portfolio-widget-label:after { border-bottom:4px solid #f36e93; } .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input:checked + .portfolio-widget-label { color:#f36e93; } .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-caption { background-color:rgba(243,110,147,0.8); } .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:before{ border-bottom:3px solid #f36e93; } .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:after{ border-bottom:3px solid #f36e93; } .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="all"]:checked ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="design"]:checked ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="development"]:checked ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-purple .portfolio-widget-input[data-filter="photography"]:checked ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description a:hover i{ color:#f36e93; } /* -------------------------------------------------- :: Portfolio Widget Light -------------------------------------------------- */ .portfolio-widget-default.portfolio-widget-light .portfolio-widget-label, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-label:before, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-label:after { border-bottom:4px solid #c2d3e1; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-label { color:#92a3b0; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-description h4, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-description span, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-description p, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-description i{ color:#fdfdfd; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-description a:hover i{ color:#e0e5e5; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-caption { background-color: rgba(99,99,99,0.99); } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-media-holder .portfolio-widget-media-description .portfolio-widget-border:before { border-bottom:3px solid #fdfdfd; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-description .portfolio-widget-description-border:after { border-bottom:3px solid #e0e5e5; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-description{ background-color:#fdfdfd; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-description h4, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-description span{ color:#70828f; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-description p, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-media .portfolio-widget-item .portfolio-widget-description i{ color:#92a3b0; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="all"] ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="design"] ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="development"] ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:before, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="photography"] ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:before{ border-bottom:3px solid #e0e5e5; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="all"] ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="design"] ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="development"] ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description .portfolio-widget-description-border:after, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="photography"] ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description .portfolio-widget-description-border:after{ border-bottom:3px solid #e0e5e5; } .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="all"] ~ .portfolio-widget-media .portfolio-widget-item.all:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="design"] ~ .portfolio-widget-media .portfolio-widget-item.design:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="development"] ~ .portfolio-widget-media .portfolio-widget-item.development:hover .portfolio-widget-description a:hover i, .portfolio-widget-default.portfolio-widget-light .portfolio-widget-input[data-filter="photography"] ~ .portfolio-widget-media .portfolio-widget-item.photography:hover .portfolio-widget-description a:hover i{ color:#92a3b0; }