/*-------------------------
|        PORTFOLIO        |
-------------------------*/

/* 4 КНОПКИ */

.port-butt {
    display: inline-block;
    padding: 8px 20px;
    margin: 70px 10px 50px 0;
    border: 1px solid #00897b;
}

.portfolio .active {
    background-color: #00897b;
    color: white;
}

.port-butt:hover {
    background-color: #00897b;
    color: white;
    transition: all 0.3s;
}

/* КОНЕЦ КНОПОК */

/* Оформление контента*/

.bock /*  bock - типа блок :)  */ {
    width: 370px;
    height: 350px;
    margin: 10px;
}


.bock:hover .act /* Ховер блока (bock), с появлением нового контента */ {
    transition: all 0.6s;
    opacity: 1;
}

/* Оформление появляющегося контента */

.act {
    opacity: 0;
    width: 370px;
    height: 350px;
    margin: 0;
    background-color: rgba( 0, 0, 0, 0.623);
    transition: all 1s;
    color: white;
    font-weight: 800;
}

.act h4 {
    padding-top: 145px;
    margin: 0;
}

.act p {
    margin: 0;
    padding-top: 5px;
}

/* конец появляющегося контента*/


/* CSS GRID для блока portfolio*/
.block-photo {
    display: grid;
    grid-template-areas: "rig rig1 rig2" "rig3 rig4 rig5"
}

.block-whatch {
    background-color: aqua;
    grid-area: rig;
}

.block-whatch1 {
    background-color: aqua;
    grid-area: rig1;
}

.block-whatch2 {
    background-color: aqua;
    grid-area: rig2;
}

.block-whatch3 {
    background-color: aqua;
    grid-area: rig3;
}

.block-whatch4 {
    background-color: aqua;
    grid-area: rig4;
}

.block-whatch5 {
    background-color: aqua;
    grid-area: rig5;
}

/* Конец css grid*/

/*Конец оформления контента*/

/* END PORTFOLIO*/