.portfolio {
width:98%;
max-width:1200px;
margin-top:50px;
margin-bottom:50px;
margin-right:auto;
margin-left:auto;
background-color: #ffffff;
}
    


.portfolio25 {
display: grid;
grid-template-columns: auto auto auto auto;
background-color: #ffffff;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.portfolio33 {
display: grid;
grid-template-columns: auto auto auto;
background-color: #ffffff;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.portfolio50 {
display: grid;
grid-template-columns: auto auto;
background-color: #ffffff;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.portfolio4060 {
display: grid;
grid-template-columns: 40% auto;
background-color: #ffffff;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 0px;
}   


.portfolio_100-1 {
display: grid;
grid-template-columns: 100%;
background-color: #ffffff;
padding-top:5px;
grid-column-gap: 0px;
grid-row-gap:10px;
}

.portfolio_100-2 {
display: grid;
grid-template-columns: 100%;
background-color: #ffffff;
padding-top:5px;
grid-column-gap: 0px;
grid-row-gap: 10px;
}





/* ROLLOVER */

.portfolioimage2 {
position: relative;
display:block;
}


.portfolioimage {
position: relative;
}

.portfolioimage :hover .portfoliohover1 {
opacity: 0.35;
}

.portfoliohover1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 550ms ease;
background-color: #ffffff;
}

.portfoliohovertext {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

.portfoliofont1 {
font-family : arial, helvetica, sans-serif;
font-weight : normal;
font-size: 20px;
}

.portfoliofont2 {
font-family : arial, helvetica, sans-serif;
font-weight : normal;
font-size: 14px;
}














@media only screen and (max-width: 1600px) {



}






@media only screen and (max-width: 1400px) {




}






@media only screen and (max-width: 1300px) {



}




@media only screen and (max-width: 1200px) {




}






/* Tablet */



@media only screen and (max-width: 1050px) {




}





@media only screen and (max-width: 900px) {



}





@media only screen and (max-width: 800px) {



}





@media only screen and (max-width: 725px) {



}





/* Phone */



@media only screen and (max-width: 650px) {

.portfolio {
width:96%;
margin-top:40px;
margin-bottom:40px;
margin-right:auto;
margin-left:auto;
}

.portfolio25 {
display: grid;
grid-template-columns: auto auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 5px;
}

.portfolio33 {
display: grid;
grid-template-columns: auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 5px;
}

.portfolio50 {
display: grid;
grid-template-columns: auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 5px;
}

.portfolio4060 {
display: grid;
grid-template-columns: 40% auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.portfolioimage2 {
position: relative;
display:none;
}


}



@media only screen and (max-width: 600px) {



}







@media only screen and (max-width: 500px) {

.portfolio {
width:95%;
margin-top:40px;
margin-bottom:40px;
margin-right:auto;
margin-left:auto;
}

.portfolio25 {
display: grid;
grid-template-columns: auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 5px;
}

.portfolio33 {
display: grid;
grid-template-columns: auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 5px;
}

.portfolio50 {
display: grid;
grid-template-columns: auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 5px;
}

.portfolio4060 {
display: grid;
grid-template-columns: 40% auto;
padding-top:5px;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

}







@media only screen and (max-width: 425px) {



}





@media only screen and (max-width: 375px) {



}





@media only screen and (max-width: 325px) {                                                    



}