.actor-thumb { border-radius: 30px; }

.wrapper {
   position: relative;
}

.wrapper .glyphicon {
   position: absolute;
   bottom: 8px;
   right: 8px;
}

.top-buffer { margin-top:20px; }

.base-top-buffer {margin-top: 80px}

.float-right-nav{
    float:right;
}

.divider {
    height: 1px;
    width:100%;
    display:block; /* for use on default inline elements like span */
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

ul.enlarge {
    list-style-type: none; /*remove the bullet point*/
}

ul.enlarge li {
    display: inline-block; /*places the images in a line*/
    position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
    z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
    margin: 10px 40px 0 20px; /*space between the images*/
}

/***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
ul.enlarge span {
    position: absolute; /*see support section for more info on positioning*/
    left: -9999px; /*moves the span off the page, effectively hidding it from view*/
}

/***Note: This styling will apply to both the thumbnail and popup image, unless you override these styles in step five***/
ul.enlarge img {
    /*give the thumbnails a frame*/
    background-color: #333337; /*frame colour*/
    padding: 6px; /*frame size*/
    /*add a drop shadow to the frame*/
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    /*and give the corners a small curve*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

ul.enlarge li:hover {
    z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
    cursor: pointer; /*changes the cursor to a hand*/
}

/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
/*ul.enlarge li:hover span{ !*positions the <span> when the <li> (which contains the thumbnail) is hovered*!*/
/*top: 0%; !*the distance from the bottom of the thumbnail to the top of the popup image*!*/
/*left: 50%; !*distance from the left of the thumbnail to the left of the popup image*!*/
/*}*/
/*!***To make it look neater we used :nth-child to set a different left distance for each image***!*/
/*ul.enlarge li:hover:nth-child(2) span{*/
/*left: -100px;*/
/*}*/
/*ul.enlarge li:hover:nth-child(3) span{*/
/*left: -200px;*/
/*}*/

/***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
ul.enlarge span img {
    padding: 2px; /*size of the frame*/
    background: #333337; /*colour of the frame*/
}

/***Style the <span> containing the framed images and the caption***/
ul.enlarge span {
    /**Style the frame**/
    padding: 10px; /*size of the frame*/
    background: #333337; /*colour of the frame*/
    /*add a drop shadow to the frame*/
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    /*give the corners a curve*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /**Style the caption**/
    font-family: 'Droid Sans', sans-serif; /*Droid Sans is available from Google fonts*/
    font-size: .9em;
    text-align: center;
    color: #495a62;
}

.thumbnail-div {
    width: 50%;
    /*/ / or you could use percentage value for responsive layout height: 50 %;*/
    overflow: hidden;
}

.thumb1 {
    /*background: url(http://i.stack.imgur.com/jGlzr.png) 50% 50% no-repeat; !* 50% 50% centers image in div *!*/
    width: 250px;
    height: 250px;
}

.thumb a {
    display: block;
    width: 250px;
    height: 250px;
}

.thumb a:hover {

}

