.container {
    max-width: 960px;
}
/*
 * Custom translucent site header
 */

.site-header {
    background-color: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
.site-header .container {
    max-width: 480px;
}
.site-header a {
    color: #999;
    transition: ease-in-out color .15s;
    font-size: 1.5rem;
}
.site-header a:hover {
    color: #fff;
    text-decoration: none;
}
.site-category {
    background-color: rgb(111 111 111 / 85%);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
.site-category a {
    color: #000;
    transition: ease-in-out color .15s;
}
.site-category a:hover {
    color: #fff;
    text-decoration: none;
}
/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}
.product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}

.bg-dark {
    background-color: #1a1c1e!important;
}
.bg-light3 {
    background-color: #686a6c!important;
}
.bg-light2 {
    background-color: #a6a8a9!important;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
    color: #FFF;
}
.navbar-light .navbar-nav .nav-link {
    color: rgb(255 255 255 / 53%);
    font-size: 1.5rem;
}
/*
 * Extra utilities
 */

.flex-equal>* {
    -ms-flex: 1;
    flex: 1;
}
@media (min-width: 768px) {
    .flex-md-equal>* {
        -ms-flex: 1;
        flex: 1;
    }
}
.overflow-hidden {
    overflow: hidden;
}
.head-box {
    height: 0;
    overflow: hidden;
    padding-top: calc(500 / 1400 * 100%);
    background: white;
    position: relative;
}
.head-box-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 0.5;
}

.cat-box {
    height: 0;
    overflow: hidden;
    padding-top: calc(480 / 640 * 100%);
    background: white;
    position: relative;
}
.cat-box-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    transition: all .5s ease-in-out;
}
a:hover .cat-box-bg{
    width: 120%;
}
.headline {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.headline h1,.headline p{
    text-shadow: 5px 2px 4px rgba(216, 216, 216, 1);
}
.block-holder{
    width: 80%; height: auto; border-radius: 21px 21px 0 0;
}
a,a:hover{
    color: inherit;
    text-decoration: none;
}
.cat-head-img{
    max-width: 100%;
    margin: 0px auto;
    display: block;
}
@media only screen and (max-width: 1024px) {
    .head-box {
        height: 0;
        overflow: hidden;
        padding-top: calc(500 / 1000 * 100%);
        background: white;
        position: relative;
    }
}

@media only screen and (max-width: 768px) {
    .head-box {
        height: 0;
        overflow: hidden;
        padding-top: calc(500 / 800 * 100%);
        background: white;
        position: relative;
    }
}

@media only screen and (max-width: 780px) {
    .display-4{
        font-size: 2.5rem;
    }
    .lead{
        font-size: 1rem;
    }
}