///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.facebook-page {
    background: url('../img/layout/bg-facebook-page.jpg') no-repeat center center;
    background-size: cover;
    height: 21vw;
    padding: 40px;
}

.facebook-page-wrapper {
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 30px 20px 20px 20px;
    position: relative;

    &:before, &:after {
        content: '';
        height: 1px;
        width: 38%;
        position: absolute;
        top: 0;
        background-color: white;
    }

    &:before {
        left: 0;
    }
    &:after {
        right: 0;
    }

    p {
        color: white;
        text-transform: uppercase;
        font-family: "lucien-book";
        font-size: 1vw;
    }

    img {
        margin: 8px 0 14px 0;
        width: 100%;
        max-width: 167px;
    }

    .button-white {
        padding: 1vw 2.4vw;
        font-size: 1vw;
    }
}

.icon-fb-like {
    $iconwidth: 76px;
    width: $iconwidth;
    height: 31px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: - $iconwidth / 2;
}

///////////////////////////////////////////////////////////////
// Device: Desktop XL
///////////////////////////////////////////////////////////////
@include desktop-xl {
    .facebook-page-wrapper {
        padding: 40px;
        p {
            font-size: 1rem;
        }
        .button-white {
            font-size: 1rem;
        }
    }

    .facebook-page {
        height: 280px;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .facebook-page {
        height: 340px;
    }

    .facebook-page-wrapper {
        padding: 40px;
        p {
            font-size: 1rem;
        }
        .button-white {
            font-size: 1rem;
            padding: 20px 40px;
        }
        &:before, &:after {
            width: 45%;
        }
    }
}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .facebook-page-wrapper {
        &:before, &:after {
            width: 38%;
        }
    }
}

