/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
@mixin gradient() {
    @include respond-to(medium-large) {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        text-indent: -99999px;

        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+60,ffffff+60,ffffff+95&1+0,0.8+60,0+100 */
        background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0.13) 95%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.8) 60%,rgba(255,255,255,0.13) 95%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.8) 60%,rgba(255,255,255,0.13) 95%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
    }

    @include respond-to(medium) {
        height: 90px;
    }

    @include respond-to(large) {
        height: 100px;
    }
}

//Separación de .contenido
@mixin content-padding($padding: padding) {
    @include content-padding-top($padding);
    @include content-padding-bottom($padding);
}

@mixin content-padding-top($padding: padding) {
    @include respond-to(xsmall) {
        #{$padding}: {
            top: 20px;
        }
    }

    @include respond-to(small-medium-large) {
        #{$padding}: {
            top: 40px;
        }
    }
}

@mixin content-padding-bottom($padding: padding) {
    @include respond-to(xsmall-small-medium) {
        #{$padding}: {
            bottom: 40px;
        }
    }

    @include respond-to(large) {
        #{$padding}: {
            bottom: 50px;
        }
    }
}

@mixin blur($blur: 6) {
    filter: blur($blur + px); -webkit-filter: blur($blur + px);
    -o-filter: blur($blur + px);
    -ms-filter: blur($blur + px);
    filter: url(/css/blur.svg#svgBlur);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur}');
}