@charset 'UTF-8';
@import '../PatternBolt/scss/patternbolt.scss';

// svg for the github button transition
$cross-light: url("data:image/svg+xml,%3Csvg%20version%3D%271.1%27%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20xmlns%3Axlink%3D%27http%3A//www.w3.org/1999/xlink%27%20x%3D%270px%27%20y%3D%270px%27%0A%20%20%20%20%20width%3D%2722px%27%20height%3D%2722px%27%20viewBox%3D%270%200%2022%2022%27%20enable-background%3D%27new%200%200%2022%2022%27%20xml%3Aspace%3D%27preserve%27%3E%0A%3Cpath%20fill%3D%27#ffffff%27%20d%3D%27M12%2C7H7v5H5V7H0V5h5V0h2v5h5V7z%20M22%2C16h-4v-5h-2v5h-5v2h5v4h2v-4h4V16z%20M16%2C1h2V0h-2V1z%20M0%2C18h1v-2H0V18z%27/%3E%0A%3C/svg%3E");


// demo page style.
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
body {
    background-color: #eee;
    font-family: 'Volkhov', arial;
    .demo.pb-pattern {
        background-color: gold;
        padding: 40px 0;
        &:after {
            opacity: 0.75;
        }
        &.iniziale {
            &:after {
                opacity: 0.4;
                -webkit-transition: background-size 0.1s ease-in-out;
                -moz-transition: background-size 0.1s ease-in-out;
                -ms-transition: background-size 0.1s ease-in-out;
                -o-transition: background-size 0.1s ease-in-out;
                transition: background-size 0.1s ease-in-out;
            }
            &.over {
                @extend .tre;
            }
        }
        &.pb-size-10:after {background-size: 10px;}
        &.pb-size-20:after {background-size: 20px;}
        &.pb-size-30:after {background-size: 30px;}
        &.pb-size-40:after {background-size: 40px;}
        &.pb-size-50:after {background-size: 50px;}
        &.pb-size-60:after {background-size: 60px;}
        &.pb-size-70:after {background-size: 70px;}
        &.pb-size-80:after {background-size: 80px;}
        &.pb-size-90:after {background-size: 90px;}
        &.pb-size-100:after {background-size: 100px;}
    }
    h1 {
        font-family: 'Rye', arial;
        font-weight: normal;
        font-size: 100px;
        text-align: center;
        margin-top: 0;
    }
    h2 {
        font-size: 28px;
        text-align: center;
        line-height: 42px;
    }

    nav {
        margin-top: 100px;
        margin-bottom: 20px;
        text-align: center;
        button.pb-pattern {
            display: inline-block;
            padding: 12px 25px;
            font-size: 21px;
            width: auto;
            margin-right: 30px;
            border: none;
            box-shadow: 0 0 0px 8px rgba(0,0,0,0.2);
            background-color: deepskyblue;
            outline-color: 0px solid transparent !important;
            &:after {
                background-size: 6px;
                opacity: 0.3
            }
            &:hover {
                outline-color: 0px solid transparent !important;
                &:after {
                    -webkit-transition: background-size 0.1s ease-in-out;
                    -moz-transition: background-size 0.1s ease-in-out;
                    -ms-transition: background-size 0.1s ease-in-out;
                    -o-transition: background-size 0.1s ease-in-out;
                    transition: background-size 0.1s ease-in-out;
                    background-size: 12px;
                    box-shadow: 0 0 0px 8px rgba(0,0,0,0.25);
                }
            }
            &:focus, &:active {
                outline-color: 0px solid transparent !important;
            }
            &.dwnld {
                background-color: white;
            }
            a{
                text-decoration: none;
                color: inherit;
            }
        }
        a{
            color: #222222;
            &:hover {
                text-decoration: none;
            }
        }
    }
    .controls {
        padding: 20px 0;
        background-color: #343434;
        color: #eeeeee;
        code {
            font-size: 14px;
            display: block;
            padding:7px;
            color: #bbbbbb;
            margin: 8px 0;
            -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0.8) 0 1px 7px 0px inset;
            -moz-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0.8) 0 1px 7px 0px inset;
            box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0.8) 0 1px 7px 0px inset;
            background: #202020;
            background-color: rgba(0, 0, 0, 0.3);
            margin-top: 15px;
        }
    }
    .tasto {
        width: 20%;
        height: 64px;
        margin: 2%!important;
        display: inline-block;
        border: 1px solid #222;
        border-radius: 5px;
        -moz-border-radius: 5px;
        cursor: pointer;
        &.pb-pattern {
            background-color: #fff;
            &:hover {
                background-color: deepskyblue;
            }
            &.active {
                background-color: deepskyblue;
            }
        }
        &:after {
            background-size: 20px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            box-shadow: inset 0 0 8px 2px rgba(0,0,0,0.5);
        }
    }
    #size-pattern {
        width: 100%;
        height: 80px;
    }
    #color-pattern {
        width: 100%;
        height: 63px;
        margin: 10px 0;
    }
    
    h2 {
        margin: 0;
        padding: 0px 0 20px 0 ;
    }

    h3 {
        text-align: center;
        margin-top: 0;
        padding-top: 20px;
    }
    .sub {
        display: block;
        text-align: center;
        margin-bottom: 20px;
        font-size: 14px;
    }

    .over-picture {
        padding: 40px 0 60px 0;
        border-bottom: 4px solid #343434;
        &:after {
            background-size: 5px;
        }
        .pb-pattern {
            text-align: center;
            margin: 0 20px;
        }
        .over-img.box-img.pb-pattern {
            &:after {
                background-size: 6px;
                opacity: 0.2;
            }
        }
    }

    #showcase {
        padding: 40px 0;
        background-color: #eee;
    }
    .pb-pattern {
        margin: 8px 0;
        background-color: deepskyblue;
        &:after {
            opacity: 0.5;
        }
        span {
            text-align: center;
            display: block;
            padding: 35px 0;
            font-size: 14px;
            font-style: italic;
            -webkit-transition: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            -ms-transition: all 0.1s ease-in-out;
            -o-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }
        &.uno { @include pb('o-lines-light', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.due { @include pb('o-lines-medium', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.tre { @include pb('o-lines-bold', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.quattro { @include pb('h-lines-light', 5px, #cccccc, #444444, 0.5, 'none'); }
        &.cinque { @include pb('h-lines-medium', 5px, #cccccc, #444444, 0.5, 'none'); }
        &.sei { @include pb('h-lines-bold', 5px, #cccccc, #444444, 0.5, 'none'); }
        &.sette { @include pb('cross-light', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.otto { @include pb('cross-medium', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.nove { @include pb('cross-bold', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.dieci { @include pb('cross-light-thin', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.undici { @include pb('cross-medium-thin', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.dodici { @include pb('cross-bold-thin', 15px, #cccccc, #444444, 0.5, 'none'); }
        &.tredici { @include pb('buseca-1', 25px, #cccccc, #444444, 0.5, 'none'); }
        &.quattordici { @include pb('candy-light', 50px, #cccccc, #444444, 0.5, 'none'); }
        &.quindici { @include pb('candy-medium', 50px, #cccccc, #444444, 0.5, 'none'); }
        &.sedici { @include pb('feather', 80px, #cccccc, #444444, 0.5, 'none'); }

        &.tredici {
            &:after {
                background-size: 30px;
            }
        }
        &.active {
            span {
                padding: 65px 0;
                font-size: 18px;
                font-weight: bold;
            }
        }
    }
}

.intro {
    padding: 40px 0;
    border-bottom: 4px solid #343434;
    &:after {
        opacity: 0.6;
    }
    &:hover {
        &:after{
            opacity: 0.6;
        }
    }
    .inner-intro {
        width: 90%;
        margin: 0 auto;
        max-width: 960px;
        line-height: 24px;
        p {
            font-size: 18px;
            line-height: 28px;
        }
    }
}






























