sp4ke.github.com/less/theme.less

body {
    overflow-x: hidden;
    font: 18px/27px 'junctionregularRegular', Arial, sans-serif;
    color: @textColor;
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: @headingFont;
        @media (max-width: 767px) { 
            text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
        }
    }

    h2 {
        font-size: 40px;
        font-weight: 400;
        line-height: 40px;
    }





}

.btc-address {
    border-bottom: 1px dashed;
    cursor: pointer;
}

.container.bitcoin {
    margin-top: 5rem;


    .row > div img {
        opacity: .7;
        width: 40px;
        padding-right: 30px;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        .transition(all 500ms ease-in-out);

        &:hover {
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
        }
    }

}

.main {
    height: 70%;
    text-align: center;
    padding-top: 3%;
    padding-left: 0;
    padding-right: 0;



    .profil {
       [class*="span"] {
            margin-left: 0px;
        }

    .dl-portfolio {
            margin-top: 2em;

            a {
                color: #B5BFC3;

                &:hover {
                    color: #4098C2;
                }
            }
        }

        .qrcode {
            display: block;
            position: absolute;
            left: 65%;
            top: 25%;
            opacity: 0;
            .transition(all 500ms ease);

            img {
                width: 70%;
            }
        }

        &:hover .qrcode {
            opacity: 1;
        }
        padding-top: 8%;

        h2 {
            padding-bottom: 3%;
        }
    }

    .hero {
        padding-bottom: 2%;
    }

    .freelance {

        a, h2 {
            color: darken(@profilColor, 20%);
        }

        @media (max-width: 767px) {
            padding-bottom: 16%;
        }
        .row-fluid {
            div {
                padding: 10px;
            }
        }
    }


    .contact {
        padding-top: 5%;


        a {
            text-decoration: none !important;
            color: @textColor;
            .transition(all 200ms ease);
            padding-left: .5em;
            padding-right: .5em;

            &.contact-qrcode {
                width: 100%;
                display: inline-block;
                position: relative;

                img {
                    width: 15%;
                }
            }

            &:hover {
                color: @contactColor;
                .transition(all 50ms ease);
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

            }
        }
    }

    .projects {

        a:hover {
            text-decoration: none !important;
        }

        .details.selected {
            display: block !important;
        }

        img, video {
            width: 100% !important;
            height: auto !important;
        }

        .left-panel {
            top: 0px;
            height: auto;
            overflow: hidden;
            position: fixed;

            hr {
                margin-top: 0px;
            }

            h5 a {
                .transition(500ms letter-spacing ease-out);

                &:hover {
                    .transition(100ms letter-spacing ease-in);
                    letter-spacing: 2px;
                    text-decoration: none !important;
                }

                
            }

            h5 {
                padding-right: 1em;
            }

            h5.selected {
                background: @projectsColor;
                a {
                    letter-spacing: 2px
                }

                * {
                    color: white;
                    font-weight: bold;
                }
            }

            h5:active {
                background-color: @projectsColor;
                * {
                    color: white;
                    font-weight: bold;
                }
            }

            h4 {
                color: desaturate(darken(@projectsColor, 10%), 20%);
                margin-top: 1.5em;
            }
        }


        .details {
            /*position: fixed;*/
            /*right: 2%;*/
            /*top: 20%;*/
            &.github {
                padding-top: 5%;
            }

            &.morrisby {
                .demo {
                    margin-top: 20px;
                    width: 80%;
                    margin-left: auto;
                    margin-right: auto;
                }

                video {
                    width: 74% !important;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -moz-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    top: 47%;
                }
            }

            img {
                width: 100%
            }

            &.simplifield {
                .text-left {
                    font-size: .9em;
                }

                .demo {
                    width: 80%;
                    margin-left: auto;
                    margin-right: auto;

                    img {
                        z-index: 10;
                        position: relative;
                    }

                    video {
                        position: absolute;
                        top: 0;
                        left: 50%;
                        z-index: 1;
                        top: 0%;
                        width: 93% !important;
                        .translateX(-50%);
                    }
                }
            }

            &.uman {
                .carousel {
                    width: 80%;
                    margin-left: auto;
                    margin-right: auto;

                    img:first-child {
                        z-index: 10;
                        position: relative;
                    }

                    img:nth-child(2) {
                        position: absolute;
                        top: 0px;
                        left: 50%;
                        width: 92% !important;
                        .translate(-50%, 0%);
                        z-index: 1;
                    }
                }
            }

            &.zapawa {
                .demo {
                    width: 80%;
                    margin-left: auto;
                    margin-right: auto;
                }

                img:first-child {
                    z-index: 10;
                }

                img:nth-child(2) {
                    position: absolute;
                    z-index: 1;
                    width: 91.5% !important;
                    left: 50%;
                    .translate(-50%, 0%);
                    top: 4%;
                }
            }

            .demo {
                position: relative;

                video {
                    position: absolute;
                }
            }
        }

        a {
            
            &.nolink {
                cursor: default
            }

            text-decoration: none;
            color: @textColor;

            &:hover {
                color: @projectsColor;
            }

        }
        .title {
            text-align: right;
            .transition(all 200ms ease-out);
            // border-right: 5px solid @textColor;

            h2 {
                padding-bottom: .6em;
            }
        }
    }
}

.dock {
    .animation-delay(1s);
    // .transition(all 200ms ease-in);
    position: fixed;
    right: 0px;
    top: 10px;
    width: 60px;

    // &.isProjects {
    //     text-align: left;

    //     a {
    //         font-size: .5em;
    //     }
    // }


    .hoverText {
        top: -5%;
        display: none;

        &.hovered {
            display: block;
        }
    }

    
    a {
        color: @dockIconColor;
        .transition(all 100ms ease);
        float: left;
        position: relative;
        width: 100%;
        text-align: center;
        font-size: .5em;


        &:hover, &.active {
            text-decoration: none;

            .contact {
                color: @contactColor;

            }

            .profil {
                color: @profilColor;
            }

            .projects {
                color: @projectsColor;
            }

            .blog {
                color: @blogColor;
            }
        }

        i {
            font-size: 3.5em;
            .transition(all 200ms ease);

            &.contact {
                font-size: 3.5em;
            }

            @media (max-width: 767px) {
                font-size: 1em;

                &.contact {
                    font-size: 0.5em;
                }
            }
        }
    }
}