@font-face
{
   font-family: BankGothicBold;
   src: url('/inc/fonts/BankGothicBold.woff') format('woff'),
      url('/inc/fonts/BankGothicBold.ttf') format('truetype');
}

body 
{
   font-family: BankGothicBold,Arial;
   margin: 0;
}

* 
{
   box-sizing: border-box;
}

img 
{
   vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container 
{
   position: relative;
}

/* Hide the images by default */
.main_image_div
{
   display: none;
   width:580px;
   margin:0 auto;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor 
{
   cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next 
{
   cursor: pointer;
   position: absolute;
   top: 40%;
   width: auto;
   height: 107px;
   padding: 16px;
   margin-top: -30px;
   user-select: none;
   -webkit-user-select: none;  
}

.prev
{
   left: 160px;
   background-image:url("/img/venom/blackbook/arrows/previous.jpg");
}

.prev:hover
{
   background-image:url("/img/venom/blackbook/arrows/previous_over.jpg");
}

/* Position the "next button" to the right */
.next 
{
   right: 160px;
   background-image:url("/img/venom/blackbook/arrows/next.jpg"); 
}

.next:hover
{ 
   background-image:url("/img/venom/blackbook/arrows/next_over.jpg");
}

/* Number text (1/3 etc) */
.numbertext 
{
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
}

/* Container for image text */
.caption-container 
{ 
   margin-top:20px;
   text-align: center;
   background-color: #000000;
   padding: 2px 16px;
   color: white;
}

.header_row
{
   padding-top:20px;
   padding-bottom: 60px;
   width:459px;  /* (148+5) x number of images */
   margin: 0 auto;
   
}

.header_row:after 
{
  content: "";
  display: table;
  clear: both;
}

.header_column {
  float: left;
  padding-right:5px;

}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.5;
}
.active,
.demo:hover {
  opacity: 1;
}

.main_image
{
   width:580px;
}

.header_image
{
   width:148px;
}