/* TWITTER =========================================== */
#twitter1         { background:transparent; position:fixed; left: 30px; bottom: 30px; z-index: 999}

    /* twitter rectangles =================================================== */
    #twitter-rectangle .tw-outside         { background:#0081b7; display:block; height:55px; position:relative; }
    
    #twitter-rectangle .tw-text, #twitter-rectangle .tw-click { display:block; height:100%; padding-top:15px; position:absolute; width:100%; 
        transition:0.3s ease all; -moz-transition:0.3s ease all; -webkit-transition:0.3s ease all;
    }
    #twitter-rectangle .tw-text            { font-size:20px; font-weight:700; z-index:9999; }
    #twitter-rectangle .tw-click           { z-index:8888; }
    
    /* twitter 1 ------------------------------------- */
    #tw-1                   { overflow:hidden;  }
    #tw-1 .tw-click         { margin-top:-100px; }
    
    #tw-1:hover .tw-text      { margin-top:100px; }
    #tw-1:hover .tw-click     { margin-top:0; }

    /* twitter 2 ------------------------------------ */
    #tw-2                     {  }
    #tw-2 .tw-text            { background:#42e7ff; height:100%; width:100%; }
    #tw-2 .tw-click           {  }
    
    #tw-2:hover .tw-text      { margin-top:-55px; }
    #tw-2:hover .tw-click     {  }
    
    /* twitter circles ====================================================== */
    #twitter-circle .tw-outside         { display:block; margin:0 auto; position:relative; }
    
    #twitter-circle .tw-text, #twitter-circle .tw-click { cursor:pointer; display:block; position:absolute; width:100%; 
        transition:0.3s ease all; -moz-transition:0.3s ease all; -webkit-transition:0.3s ease all;
    }
    #twitter-circle .tw-text            { font-size:20px; font-weight:700; z-index:9999; }
    #twitter-circle .tw-click           { z-index:8888; }
    
    /* twitter 3 ------------------------------------ */
    #tw-3                     {height: 60px;width: 60px;}
    #tw-3 .tw-text            {
        background: #63c465;
        color: #fff;
        font-size: 40px;
        height:100%;
        padding-top: 10px;
        border-radius:50%;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        text-align: center;
    }


    #tw-3 .tw-click           {
        background:#000000bf;
        color: #fff;
        opacity:0;
        padding: 5px 4px 3px;
        margin-top: 17px;
        margin-left:200px;
        padding-left: 20px;
        width:180px;
        font-size: 10px;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        left:0px
    }
    
    #tw-3:hover .tw-text      { background:#458d47; margin-left:0px; 
        transform:rotate(-360deg); -moz-transform:rotate(-360deg); -webkit-transform:rotate(-360deg); 
    }
    #tw-3:hover .tw-click     { opacity:1; margin-left:50px; }