@charset "utf-8";
/* CSS Document */

  <!-- Example CSS -->
        <style>
        img { border:0; }
        #final-tg {
	        max-width: 100%;
	        margin: auto;
			margin-left: 7px;
        }
        li { display: inline-block; margin-right: 10px; }
        li a { color: #a6d1ff; text-decoration: none; }
        li a:hover, li a.selected { color: #fff; }
        
        /* social icons */
        .tile .ftg-social {
            position: absolute;
            bottom: 33px;
            right: 33px;
            background:url(images/opaque.png);
            background: rgba(0,0,0, .7);
            padding: 3px;
            border-radius: 4px;
            text-align: right;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            -moz-transition: opacity .5s;
            -o-transition: opacity .5s;
            -webkit-transition: opacity .5s;
            transition: opacity .5s;
            height: 24px;    
        }
        .tile .ftg-social a {
            float: left;
            width:24px;
            height:24px;
            margin-left:5px;            
            font-size:0;
            color:transparent;
            line-height: 24px;
            margin: 0;
        }
        .tile:hover .ftg-social { 
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1; 
        }
        .tile .ftg-social a:first-child { margin-left: 0; }
        /* icons from http://www.iconarchive.com/show/round-social-icons-by-brainleaf.html*/
        .tile .ftg-social .tw-icon { background: url(images/twitter-icon.png); }
        .tile .ftg-social .fb-icon { background: url(images/facebook-icon.png); }
        .tile .ftg-social .gp-icon { background: url(images/google-plus-icon.png); }
        .tile .ftg-social .pi-icon { background: url(images/pinterest-icon.png); }
        /* --------------------- */

        
        /* style 1 */
        .style-1 #final-tg .tile .caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 102, 192, .5);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            -moz-transition: all .3s;
            -o-transition: all .3s;
            -webkit-transition: all .3s;
            transition: all .3s;
            height: 100%;
            text-align:center;
        }
        .style-1 #final-tg .tile .tile-inner {
            border-radius: 4px;
            border: 1px solid #666;
            -webkit-box-shadow: #333 0px 0px 10px;
            box-shadow: #333 0px 0px 10px;
        }
        .style-1 #final-tg .tile a:hover .caption {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity:1;
        }
        .style-1 #final-tg .tile a img {
            -moz-transition: -moz-transform .3s;
            -o-transition: -o-transform .3s;
            -webkit-transition: -webkit-transform .3s;
            transition: transform .3s;
        }
        .style-1 #final-tg .tile-inner:hover img {
            -moz-transform: rotate(5deg) scale(1.2);
            -ms-transform: rotate(5deg) scale(1.2);
            -o-transform: rotate(5deg) scale(1.2);
            -webkit-transform: rotate(5deg) scale(1.2);
            transform: rotate(5deg) scale(1.2);
        }

        .style-1 #final-tg .tile .caption:hover p {
            margin-top:10px;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity:1;
        }
        /* --------------------- */


        
        h1 { color: #fff; }
        h2 { color: #999; }
        
        </style>