@media (max-width: 790px){
  .content {
	padding: 40% 0 0;
	}

   
    .megamenu {
        background-color: #ffffff00;
        padding: 4px;
        border-radius: 5px;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 790px){
    .megamenu li a {
        display: block;
        padding: 9px 9px 9px 16px;
        clear: both;
        line-height: 1.42857143;
        color: rgb(0, 0, 0);
        white-space: nowrap;
        font-weight: 600;
    }
}

@media (max-width: 750px){
    .megamenu li a {
        display: block;
        padding: 9px 9px 9px 16px;
        clear: both;
        line-height: 1.42857143;
        color: #fff;
        white-space: nowrap;
        font-weight: 600;
    }
}

@media (max-width: 603px){
#tf-menu.navbar-default {
	background-color: rgba(0, 0, 0, 0.79);
	}
#tf-works li.pull-right, #tf-works li.pull-left {
    margin-top: 10px;
    float: none !important;
    text-align: center;
    display: block;
}
label{
    float: none !important
}
.pull-left.fnav,
.pull-right.fnav {
    float: none !important;
    text-align: center;
}

.hover-bg .hover-text {
    padding: 12% 10%;
}
}
@media (max-width: 360px){
.hover-bg .hover-text {
    padding: 22% 10%;
}
}

@media (max-width: 420px){

.portfolio-item .hover-bgs {
    width: 332px;
    height: 260px;
    margin-left: 7px;
    overflow: hidden;
    position: relative;
    box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px 0px;
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

}

@media (max-width: 350px){
.portfolio-item .hover-bgs {
    width: 271px;
    height: 260px;
    margin-left: 7px;
    overflow: hidden;
    position: relative;
    box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px 0px;
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}
}