.container {
    max-width: 960px;
}

.rabo {
    border-radius: 8px;
}

/*
 * 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 a {
        color: #999;
        transition: ease-in-out color .15s;
    }

        .site-header a:hover {
            color: #fff;
            text-decoration: none;
        }

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-deviceq {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

    .product-deviceq::before {
        position: absolute;
        top: 10%;
        right: 10px;
        bottom: 10%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer1.jpg');
        background-repeat: no-repeat;
        background-size: 280px 540px;
        border-radius: 5px;
    }

.product-deviceq-2::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-image: url('../images/questionizer2.jpg');
    background-repeat: no-repeat;
    background-size: 280px 540px;
    border-radius: 5px;
}

.product-deviceq-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}


/*
 * 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;
}

.product-questionizer1 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer1::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer3.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer2 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer2::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer4.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer3 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer3::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer5.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer4 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer4::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer6.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer5 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer5::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer7.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer6 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer6::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer8.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer7 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer7::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer9.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer8 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .product-questionizer8::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer10.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.product-questionizer9 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

    .product-questionizer9::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/questionizer11.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

/*
        * MILITARY FORCE
    */

.mf1 {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

    .mf1::before {
        position: absolute;
        top: 10%;
        right: 10px;
        bottom: 10%;
        left: 10px;
        content: "";
        background-image: url('../images/mf1.jpg');
        background-repeat: no-repeat;
        background-size: 280px 540px;
        border-radius: 5px;
    }

.mf2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}

    .mf2::before {
        position: absolute;
        top: 10%;
        right: 10px;
        bottom: 10%;
        left: 10px;
        content: "";
        background-image: url('../images/mf2.jpg');
        background-repeat: no-repeat;
        background-size: 280px 540px;
        border-radius: 5px;
    }

.mf3 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .mf3::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/mf3.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.mf4 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .mf4::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/mf1.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.mf5 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .mf5::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/mf4.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.mf6 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .mf6::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/mf5.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.mf7 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .mf7::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/mf6.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.mf8 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .mf8::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/mf7.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.mf9 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

    .mf9::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/mf8.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

/*
 * ANIME y DORAMA
 */
.ad1 {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

    .ad1::before {
        position: absolute;
        top: 10%;
        right: 10px;
        bottom: 10%;
        left: 10px;
        content: "";
        background-image: url('../images/anime1.jpg');
        background-repeat: no-repeat;
        background-size: 280px 540px;
        border-radius: 5px;
    }

.ad2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}

    .ad2::before {
        position: absolute;
        top: 10%;
        right: 10px;
        bottom: 10%;
        left: 10px;
        content: "";
        background-image: url('../images/anime2.jpg');
        background-repeat: no-repeat;
        background-size: 280px 500px;
        border-radius: 5px;
    }

.ad3 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .ad3::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime1.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }


.ad4 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .ad4::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime3.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.ad5 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .ad5::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime4.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.ad6 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .ad6::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime5.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.ad7 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .ad7::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime6.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.ad8 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .ad8::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime7.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.ad9 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
}

    .ad9::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime8.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }

.anime1 {
    position: relative;
    width: 290px;
    height: 550px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

    .anime1::before {
        position: absolute;
        top: 4%;
        right: 10px;
        bottom: 5%;
        left: 10px;
        content: "";
        background-image: url('../images/anime9.jpg');
        background-repeat: no-repeat;
        background-size: 270px 530px;
        border-radius: 5px;
    }


.daem1 {
    position: absolute;
    right: 1px;
    bottom: -20px;
    width: 50px;
    height: 70px;
}

    .daem1::before {
        position: absolute;
        top: 1px;
        right: 0px;
        bottom: 1px;
        left: 0px;
        content: "";
        background-image: url('../images/ignis.png');
        background-repeat: no-repeat;
        background-size: 50px 70px;
    }

.daem2 {
    position: absolute;
    left: 1px;
    bottom: -20px;
    width: 50px;
    height: 70px;
}

    .daem2::before {
        position: absolute;
        top: 1px;
        left: 0px;
        bottom: 1px;
        right: 0px;
        content: "";
        background-image: url('../images/daen.png');
        background-repeat: no-repeat;
        background-size: 50px 70px;
    }

.even1 {
    position: absolute;
    right: 1px;
    bottom: -20px;
    width: 50px;
    height: 70px;
}

    .even1::before {
        position: absolute;
        top: 1px;
        right: 0px;
        bottom: 1px;
        left: 0px;
        content: "";
        background-image: url('../images/syrtis.png');
        background-repeat: no-repeat;
        background-size: 50px 70px;
    }

.even2 {
    position: absolute;
    left: 1px;
    bottom: -20px;
    width: 50px;
    height: 70px;
}

    .even2::before {
        position: absolute;
        top: 1px;
        left: 0px;
        bottom: 1px;
        right: 0px;
        content: "";
        background-image: url('../images/even.png');
        background-repeat: no-repeat;
        background-size: 50px 70px;
    }

.thor1 {
    position: absolute;
    right: 1px;
    bottom: -20px;
    width: 50px;
    height: 70px;
}

    .thor1::before {
        position: absolute;
        top: 1px;
        right: 0px;
        bottom: 1px;
        left: 0px;
        content: "";
        background-image: url('../images/alsius.png');
        background-repeat: no-repeat;
        background-size: 50px 70px;
    }

.thor2 {
    position: absolute;
    left: 1px;
    bottom: -20px;
    width: 50px;
    height: 70px;
}

    .thor2::before {
        position: absolute;
        top: 1px;
        left: 0px;
        bottom: 1px;
        right: 0px;
        content: "";
        background-image: url('../images/thor.png');
        background-repeat: no-repeat;
        background-size: 50px 70px;
    }