// variables
$text-bg:        #EEEEEE;
$text-padding:   2rem;
$image-margin:      2rem;


// styling
.callout {
    background: $text-bg;
    padding: $text-padding $content-padding;
    padding-top: $text-padding;
    padding-bottom: 0;
    text-align: center;
    overflow: hidden;
    clear: both;
    position: relative;
    @include breakpoint(desktop-only) {
        text-align: center;
    }
    .callout-line {
        background: $page-bg;
        width: 100%;
        height: 7rem;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
    }

    // macbook
    .notebook{
        display: inline-block;
        text-align: left;
        min-width: 33%;
        position: relative;
        z-index: 10;

        @include breakpoint(desktop-range) {
            width: 100%;
            float: none;
        }
        @include breakpoint(tablet-range) {
            width: 100%;
            float: none;
        }
        @include breakpoint(mobile-only) {
            width: 100%;
            float: none;
        }
        @include breakpoint(small-mobile-range) {
            width: 150%;
            margin-left: -3.8rem;
            float: none;
        }

    }
    .notebook .screen:before {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: #E5EBED;
        height: 0.25rem;
        width: 0.25rem;
        margin: 0.3125rem 0 0 8.625rem;
    }
    .notebook .screen{
        background:#464C51;
        border-radius: 0.5rem 0.5rem 0 0;
        height: 11.72rem;
        width: 18.28rem;
        margin: 0 auto;

        .screen-content {
            height: 10.1rem;
            width: 16.73rem;
            position: absolute;
            z-index: 1;
            margin-top: 0.8rem;
            margin-left: 0.8rem;
            background-size: cover;
            background-repeat: no-repeat
        }
        .screen-content-hover {
            @extend .default-animation;
            height: 10.1rem;
            width: 16.73rem;
            position: absolute;
            z-index: 2;
            opacity: 0;
            margin-top: 0.8rem;
            margin-left: 0.8rem;
            background-color: $core-accent;
            .fa-plus-square {
                font-size: 5rem;
                color: #464C51;
                margin-top: 2.5rem;
                margin-left: 5.9rem;
            }
            &:hover {
                opacity: 0.8;
            }
        }
    }
    .notebook .screen:after{
        content: "";
        position: absolute;
        background: #161B21;
        height: 10rem;
        width: 16.63rem;
        border-radius: 0.125rem;
        margin: 0.875rem 0 0 0.8125rem;
        transition: background 1s ease-in-out;
    }

    .notebook .keyboard {
        background: #DFDCDC;
        border-radius: 0 0 0.3125rem 0.3125rem;
        height: 1.25rem;
        width: 21.88rem;
        margin: 0 auto;
    }
    .notebook .keyboard:after {
        content: "";
        position: absolute;
        background: #757979;
        height: 0.375rem;
        width: 3.125rem;
        margin: 0 0 0 9.375rem;
        border-radius: 0 0 0.5rem 0.5rem;
    }
    .keyboard:before {
        content: "";
        position: absolute;
        height: 0.5rem;
        width: 23.13rem;
        margin: 0.4375rem 0 0 -0.625rem;
        z-index: -1;
        border-radius: 100%;
    }
    .pricing-container {
        position: relative;
        z-index: 10;
        @include clearfix;
        margin-top: 2rem;
        min-height: 33rem;
        .pricing-item {
            @extend .default-animation;
            display: block;
            float: left;
            width: 24.5%;
            margin-right: 0.3rem;
            margin-bottom: 2rem;
            vertical-align: middle;
            position: relative;
            &:hover {
                margin-top: -1rem;
                .name {
                    padding: 1rem 0;
                }
                .foot {
                    padding: 1.5rem 0;
                }
            }
            div {
                background: $main-bg;
            }
            .name {
                @extend .default-animation;
                background: $core-accent;
                @extend h4;
                color: $white;
                padding: 0.5rem 0;
            }
            .info {
                line-height: 3rem;
                border-bottom: $border-color 1px solid;
            }
            .price {
                font-weight: bold;
                color: $light-gray;
                font-size: 3.5rem;
                font-family: $font-family-header;
                font-weight: normal;
                border-bottom: $border-color 1px solid;
                line-height: 5rem;
            }
            .foot {
                @extend .default-animation;
                background: $core-accent;
                color: $white;
                text-align: center;
                padding: 1rem 0;
                .button {
                    @extend h4;
                    @extend .default-animation;
                    margin: 0;
                    padding: 0;
                    width: 9rem;
                    font-size: 1rem;
                    line-height: 2.5rem;
                    color: $white;
                    display: inline-block;
                    background: transparentize($white, 0.75);
                    &:hover {
                        background: transparentize($white, 0.85);
                    }
                }
            }
            sup {
                font-size: 2rem;
            }
        }
    }
}