/*
    this is not main stylesheet, main stylesheet is "/modules/landing/commonassets/css/main.css"
    you can override main stylesheet below
*/


/*override*/
.quoteNotation {
    padding-left: 8%;
    text-align: right;
    font-size: .9em;
    line-height: 1.2em;
}

.container-HPP-NF {
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-HPP-NF {
    height: 375px;
    width: 450px;
}

.div-Tile-HPP-NF {
    height: 100%;
    width: 100%;
    padding: 25px;
    text-align: left;
}

.container-HPP-AW {
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-HPP-AW {
    height: 550px;
    width: 450px;
}

.div-Tile-HPP-AW {
    height: 100%;
    width: 100%;
    padding: 25px;
    text-align: left;
}

.div-RSP {
    height: 515px;
}

.HPP-Intro-Panel {
    padding: 50% 0 0 0;
    position: relative;
}

.HPP-iFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-section {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    min-height: 48vh;
    overflow: hidden;
}


.hero-section-bee {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    min-height: 60vh;
    overflow: hidden;
    background-color: black;
}

.vimeo-bg-wrapper {
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

    .vimeo-bg-wrapper iframe {
        width: 100vw;
        height: 26.25vh;
        min-height: 90vh;
        min-width: 185.77vw;
        position: absolute;
        top: 20%;
        left: 9%;
        transform: translate(-28%,-25%);
    }

.vimeo-bg-wrapper-HPP {
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

    .vimeo-bg-wrapper-HPP iframe {
        width: 100vw;
        height: 26.25vh;
        min-height: 60vh;
        min-width: 85.77vw;
        position: absolute;
        top: 12%;
        left: 28%;
        transform: translate(-28%,-25%);
    }


.card-beehive {
    border: solid;
    border-radius: 8px;
    border-width: 2px;
    color: white;
    border-color: #333;
    padding: 15px 25px 15px 25px;
    height: 600px;
    margin: 10px;
    /* border-image: linear-gradient(to bottom, #f7a691, #f74420) 1;*/
}

    .card-beehive h3 {
        font-weight: 600;
    }

    .card-beehive img {
        position: absolute;
        /*   top: 20px;*/
        right: 15px;
    }

.card-beehive-1 {
    background-image: url(/modules/landing/hotpinkpad/assets/img/Technology_Icons_Carbon.png);
    background-repeat: no-repeat;
    background-size: 70%;
    /*      background-position-y: 105px;*/
    background-position-x: center;
    height: 280px;
}

.card-beehive-2 {
    background-image: url(/modules/landing/hotpinkpad/assets/img/Technology_Icons_Software.png);
    background-repeat: no-repeat;
    background-size: 70%;
    /*   background-position-y: 115px;*/
    background-position-x: center;
    height: 280px;
}

.card-beehive-3 {
    background-image: url(/modules/landing/hotpinkpad/assets/img/Technology_Icons_Temperature.png);
    background-repeat: no-repeat;
    background-size: 70%;
    /*  background-position-y: 105px;*/
    background-position-x: center;
    height: 280px;
}

@media (max-width: 1199px) {
    .mobile-center {
        text-align: center;
    }
}

/* phone / Extra Small (XS) */
@media (max-width: 768px) {

    .quoteNotation {
        padding-left: 2%;
    }

    .HPP-Intro-Panel {
        padding: 0 0 0 0;
        position: relative;
    }

    .HPP-iFrame {
        position: absolute;
        top: -100px;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .below-vimeo-HPP {
        margin-top: 140%;
    }

    .card-beehive {
        height: auto;
        margin: 10px;
        padding-bottom: 50px;
    }

    .card-beehive-1 {
        height: 180px;
    }

    .card-beehive-2 {
        height: 180px;
    }

    .card-beehive-3 {
        height: 180px;
    }

    .div-RSP {
        height: auto;
    }

    .div-HPP-NF {
        height: auto;
    }

    .div-HPP-AW {
        height: auto;
    }
}

/* iPad size */
@media (min-width: 769px) and (max-width: 834px) {
    .below-vimeo-HPP {
        margin-top: 215%;
    }
}

/* Mac Book size */
@media (min-width: 835px) and (max-width: 1281px) {

    .div-HPP-NF {
        height: 420px;
        width: 350px;
    }

    .div-HPP-AW {
        height: 580px;
        width: 400px;
    }

    .div-Tile-HPP-AW {
        padding: 10px;
    }
}