.prod-box{margin: auto;}
.titles{ text-align:center; padding:20px 0px;position: relative; display:flex; flex-direction: column;align-items: center; margin-top: 2rem;}
.titles h3{    font-size: 40px;
    color:#000000;
    line-height: 1;
    margin-bottom: 1rem;
    font-family: "OB";
    text-transform: uppercase;}
.titles h5{    font-size: 1rem;
    color: #282828;
    line-height: 1.65;
    margin-bottom: 2rem;
    font-weight: 300;
    text-transform: uppercase;}
.titles:after {content: "";width: 125px;height: 5px;display: block;background: var(--color6);}
.photo-list{padding:10px 0px 10px 0px; max-width:1400px; width:100%; margin: auto;}
.photo-list ul{width:100%; display:flex;flex-wrap: wrap;}
.photo-list ul li{width: calc(((100% / 3) - 20px));flex-shrink: 0; margin:10px 10px;    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;}
.photo-list ul li .image{width:100%;flex: 1;overflow: hidden;padding:10px;display: flex;/*border: 1px solid #e5e5e5;*/justify-content: center;flex-wrap: wrap;flex-direction: row;align-items: center; position: relative;padding-top: 65.6%;}
.photo-list ul li:hover .image a{overflow: hidden;transition: 0.3s;}
.photo-list ul li .image img{/*max-width:100%;width:100%; */position: absolute; top: 0;left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;}
.photo-list ul li:hover .image img{transform: scale(1.065);transition: 0.3s;}

/*.photo-list ul li:last-child:nth-child(3n - 1){margin-right: calc(((100% / 3) + 2.5px));}*/
/*.photo-list li .inner-box {
    position: relative;
    margin-bottom: 0px;width: 100%;
    height: 100%;
}

.photo-list li .inner-box:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: -moz-linear-gradient( -90deg, rgba(0,0,0,0) 60%, rgb(0,0,0,0.6) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgba(0,0,0,0) 60%, rgb(0,0,0,0.6) 100%);
    background-image: -ms-linear-gradient( -90deg, rgba(0,0,0,0) 60%, rgb(0,0,0,0.6) 100%);
    opacity: .8;
}
.photo-list li .inner-box:hover:before {
        position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: -moz-linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
    background-image: -webkit-linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
    background-image: -ms-linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
	 background-image: linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
    opacity: .8;
    z-index: 1;
}*/
.photo-list ul li .text{height: 50px;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #f0f0f0; display: none;}
.photo-list ul li .text a{text-transform: capitalize;font-size:1rem;color: #4b4a4a;}
.photo-list ul li:hover .text{background: var(--color6);color: #FFFFFF;transition: 0.3s;}
.photo-list ul li:hover .text a{color: #FFFFFF;transition: 0.3s;}
@media screen and (width: 1024px)
{
	aside{display:none;}
	main{padding:2rem 0rem;}
	.prod-box{padding:15px;max-width:100%;}
}
@media screen and (max-width: 1023px)
{
	aside{display:none;}
	main{padding:2rem 0rem;}
	.prod-box{padding:15px;max-width:100%;}
}


@media screen and (max-width: 767px){
	.photo-list ul li{width:100%;}
}
@media screen and (max-width: 425px)
{
	
}
@media screen and (max-width: 414px)
{

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




.main-navigation {
    /*position: relative;*/
    background: none;
}

@media screen and (max-width: 1023px)
{
	.photo .titles{margin-top:0px;}
}

@media screen and (max-width: 767px)
{
	
}
@media screen and (max-width: 425px)
{
	
}
@media screen and (max-width: 414px)
{
		
}


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

@media screen and (max-width: 360px)
{
	
}

@media screen and (max-width: 320px)
{
	
}