.white{
color:#fff;
}
.text-center{
text-align: center;
}     .scp-portfolio{
position:relative;
width:100%;
}     .scp-category{
position:relative;
margin-top:20px;
padding:0!important;
}
.scp-category-title{
position:relative;
width:100%;
font-weight: 800;
font-size: 32px;
color:rgb(47, 139, 184);
text-transform: uppercase !important;
padding-left: 18px;
}     .scp-project{
position:relative;
height:17vw;
cursor:pointer;
float:left;
padding:2px!important;
}
.scp-project-content{
display:block;
position:relative;
width:100%;
height:100%;
background-size: cover;
background-position: center;
}
.scp-project-content::after{
content: " ";
position:absolute;
display:block;
top:0;
left:0;
background-color: #2F8BB8;
opacity: 0;
width:100%;
height:100%;
z-index:10;
}
.scp-project-content:hover::after{
opacity:.5;
}
.scp-project-title{
position:absolute;
display:block;
width:100%;
top: 45%;
left:0;
z-index:20;
font-size: 1.3em !important;
text-transform: uppercase !important;
text-shadow: 2px 2px 8px #000 !important;
position: absolute !important;
transition: all 250ms linear !important;
}
.scp-project:hover .scp-project-title{
top: 35%;
}
.scp-project-subtitle{
z-index:20;
position:absolute;
display:block;
opacity:0;
width:100%;
top: 45%;
left:0;
font-size: 1.0em !important;
text-shadow: 2px 2px 8px #000 !important;
transition: all 250ms linear !important;
}
.scp-project:hover .scp-project-subtitle{
opacity:1;
top: 55%;
}     .scp-portfolio{
margin-right: 0!important;
margin-left: 0!important;
}
.scp-category-short{
position:relative;
height:17vw;
cursor:pointer;
float:left;
padding:2px!important;
}
.scp-category-short-content{
display:block;
position:relative;
width:100%;
height:100%;
background-size: cover;
background-position: center;
}
.scp-category-short-content::after{
content: " ";
position:absolute;
display:block;
top:0;
left:0;
background-color: #2F8BB8;
opacity: 0;
width:100%;
height:100%;
z-index:10;
}
.scp-category-short-content:hover::after{
opacity:.5;
}
.scp-category-short-title{
position:absolute;
display:block;
width:100%;
top: 45%;
left:0;
z-index:20;
font-size: 1.3em !important;
text-transform: uppercase !important;
text-shadow: 2px 2px 8px #000 !important;
position: absolute !important;
transition: all 250ms linear !important;
}
.scp-category-short:hover .scp-category-short-title{
top: 35%;
}
.scp-category-short-subtitle{
z-index:20;
position:absolute;
display:block;
opacity:0;
width:100%;
top: 45%;
left:0;
font-size: 1.0em !important;
text-shadow: 2px 2px 8px #000 !important;
transition: all 250ms linear !important;
}
.scp-category-short:hover .scp-category-short-subtitle{
opacity:1;
top: 55%;
}
@media only screen and (max-width: 600px) {
.scp-category-short {
height: 50vw;
}
.scp-project{
height: 50vw;
}
}
@media only screen and (min-width: 600px) and (max-width:800px) {
.scp-category-short {
height: 35vw;
}
.scp-project{
height: 35vw;
}
}