.content-wrap {
    width: 50%;
    margin: 0 auto;
    position: relative;
    font-size: 12px;
    line-height: 2em;
    padding: 30px 0 30px;
}

.col {
    width: 105%;
}

.mix img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0 ;
    height: 100%;
}

#skill {
    list-style: none;
    padding-top: 30px;
}

#skill li {
    margin-bottom: 70px;
    background: #000;
    height: 5px;
    border-radius: 3px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

#skill li em {
    position: relative;
    top: -30px;
}

.expand {
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
}

.php {
    width: 100%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.javascript {
    width: 100%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.mysql {
    width: 70%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.html5 {
    width: 70%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.css3 {
    width: 90%;
    -moz-animation: css3 2s ease-out;
    -webkit-animation: css3 2s ease-out;
}

.jquery {
    width: 50%;
    -moz-animation: jquery 2s ease-out;
    -webkit-animation: jquery 2s ease-out;
}

.photoshop {
    width: 50%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
}

.coding, .sys-admin {
    width: 100%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}

.cyberSecurity {
    width: 80%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
}

.python {
    width: 80%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
}

#Grid {
    text-align: justify;
    font-size: 0.1px;
    width: 70% ;
    margin: auto ;
}
#Grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}

button.active{
    background: #68b8c4;
}
#Grid .mix {
    display: none;
    position: relative ;
    width: 304px;
    height: 304px;
    vertical-align: top;
    margin-bottom: 20px;
    background: #ccc;
    color: #000;
    font-size: 30px;
    text-align: center;
    overflow: hidden ;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    background-position: 100% 100%; background-size: cover ;
    line-height: normal ;
}
#Grid .gap {
    display: inline-block;
    width: 200px;
}

span.descrizione {
    font-size: 8pt ;
    line-height: normal ;
    display: block ;
    text-transform: none ;
    text-decoration: none ;
    color: #FFF ;
    padding: 0 24px ;
}

.controls {
    display: inline-block;
    margin: 0 0 30px;
    vertical-align: top;
}
.controls li {
    margin-left: 20px;
    cursor: pointer;
    list-style-type: square;
}
.controls li.active {
    font-weight: 700;
}

@media screen and (max-width: 949px) {
    #Grid .mix {
        width: 100%;
        z-index: 1;
        display: block;
        padding-top: 100%;
        height: inherit ;
    }

    .content-wrap {
        width: 90%;
    }

    .mix-wrap img {

        max-height: 90px !important;
    }
}

@-moz-keyframes php {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-moz-keyframes javascript {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-moz-keyframes mysql {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-moz-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-moz-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    };
}

@-moz-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-moz-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-moz-keyframes coding {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-moz-keyframes sys-admin {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-moz-keyframes cyberSecurity {
    0% {
        width: 0px;
    }

    80% {
        width: 100%;
    };
}

@-moz-keyframes python {
    0% {
        width: 0px;
    }

    80% {
        width: 100%;
    };
}



@-webkit-keyframes php {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes javascript {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes mysql {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    }
}

@-webkit-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    }
}

@-webkit-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    }
}

@-webkit-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    }
}

@-webkit-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    }
}

@-webkit-keyframes coding {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    }
}

.foto-ascii {
    position: relative ;
    width: 50% ;
    height: 775px;
    overflow: hidden;
    margin: 0 auto ;
}

.foto-ascii pre {
    font-size: 6px;
    line-height: 4px;
    position: absolute;
    width: 50%;
    overflow: hidden;
}

.foto {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    width: 50%;
    /*background: url('/sites/default/themes/turboweb/images/foto-profilo.JPG') ;*/
}

.foto img {
    width: 682px;
    margin-left: -343px;
}
/*
#acquistodiretto {
    background: url('/sites/default/files/acquistodiretto.png') !important;
    background-size: 100% !important;
}
*/

.mix:hover > .mix-wrap {
    opacity: 1 ;
}

.mix-wrap p {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
    text-transform: uppercase ;
    font-weight: bold ;
}

.mix-wrap p a, .mix-wrap p a:hover {
    color: #000 !important ;
}

.mix-wrap {
    display: block;
    position: absolute ;
    top: 0 ;
    left: 0 ;
    right: 0 ;
    bottom: 0 ;
    background: #FF8707 ;
    width: 100%;
    height: 100%;
    opacity: 0 ;
    vertical-align: middle ;
    
}

.mix-wrap img {
    max-width: 100% ;
    max-height: 275px ;
    vertical-align: middle ;
}