/* PAGE HEADER */

.page-header {
    background-color: #131A13;
    min-height: 50vh;
    background-image: url('../../images/kiosk_bg.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

    .page-header .card {
        background-color: transparent;
        border: none;
    }

        .page-header .card h1 {
            font-family: 'Rubik', sans-serif;
            font-size: 3rem;
            font-weight: 600;
            color: #fff;
        }

        .page-header .card p {
            font-family: 'Rubik', sans-serif;
            font-size: 1.5rem;
            color: #fff;
        }

/* PRODUCT DETAIL */

.pr-detail-container .product-detail {
    padding: 30px 60px;
}

    .pr-detail-container .product-detail h2 {
        font-family: 'Rubik', sans-serif;
        font-size: 3rem;
    }

    .pr-detail-container .product-detail p {
        font-family: 'Rubik', sans-serif;
    }

    .pr-detail-container .product-detail ul {
        padding-left: 0;
        margin-top: 30px;
    }

        .pr-detail-container .product-detail ul li {
            font-family: 'Rubik', sans-serif;
            list-style: none;
        }

            .pr-detail-container .product-detail ul li span {
                float: left;
                font-size: 1.5rem;
            }

            .pr-detail-container .product-detail ul li p {
                padding-left: 30px;
            }

.pr-detail-container .grey-column {
    background-color: #efefef;
}

.pr-detail-container .pi1 {
    background: url('../../images/products/pk2.png');
    background-size: auto;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.pr-detail-container .pi2 {
    background: url('../../images/products/pk3.jpg');
    background-size: auto;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}


/* CONTROLS */

.controls {
    text-align: left;
    position: relative;
    margin: 15px 0px;
}

    .controls input[type="text"],
    .controls input[type="email"],
    .controls input[type="tel"],
    .controls textarea,
    .controls button,
    .controls select {
        padding: 12px;
        font-size: 14px;
        border: 1px solid #d1d1d1;
        width: 100%;
        color: #0f1923;
        font-family: 'Rubik', sans-serif;
        font-size: 0.9rem;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

        .controls input[type="text"]:focus,
        .controls input[type="text"]:hover,
        .controls input[type="email"]:focus,
        .controls input[type="email"]:hover,
        .controls input[type="tel"]:focus,
        .controls input[type="tel"]:hover,
        .controls textarea:focus,
        .controls textarea:hover,
        .controls button:focus,
        .controls button:hover,
        .controls select:focus,
        .controls select:hover {
            outline: none;
            border-color: #0f1923;
        }

            .controls input[type="text"]:focus + label,
            .controls input[type="text"]:hover + label,
            .controls input[type="email"]:focus + label,
            .controls input[type="email"]:hover + label,
            .controls input[type="tel"]:focus + label,
            .controls input[type="tel"]:hover + label,
            .controls textarea:focus + label,
            .controls textarea:hover + label,
            .controls button:focus + label,
            .controls button:hover + label,
            .controls select:focus + label,
            .controls select:hover + label {
                color: #0f1923;
                cursor: text;
            }

    .controls select {
        -moz-appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    .controls label {
        font-family: 'Rubik', sans-serif;
        position: absolute;
        left: 15px;
        top: 10px;
        color: #999;
        font-size: 0.9rem;
        display: inline-block;
        padding: 4px 0px;
        font-weight: 400;
        transition: top 0.3s, left 0.3s;
    }

        .controls label.active {
            top: -25px;
            left: 10px;
            color: #999;
            font-size: 1rem;
            font-weight: 400;
        }

    .controls textarea {
        resize: none;
        height: 130px;
    }

    .controls button {
        font-family: 'Rubik', sans-serif;
        font-size: 0.9rem;
        cursor: pointer;
        background-color: rgba(15, 25, 35, 0.9);
        border: none;
        color: #fff;
        padding: 13px 0;
    }

        .controls button:hover {
            background-color: rgba(15, 25, 35, 1);
        }