/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

@font-face {
  font-family: 'avenir';
  src: url('../fonts/Avenir-Medium-webfont.ttf') format('truetype'),
       url('../fonts/Avenir-Medium-webfont.svg') format('svg'),
       url('../fonts/Avenir-Medium-webfont.woff') format('woff');
}

html *
{
   font-family: avenir !important;
}

body {
  min-width: 960px;
 background-color: #000;
    background-repeat: no-repeat;
    color: #fff;
}

/* unvisited link */
a:link {
    text-decoration: none;
    color: white;
}

/* visited link */
a:visited {
    text-decoration: none;
    color: white;
}

/* mouse over link */
a:hover {
    text-decoration: none;
    color: white;
}

/* selected link */
a:active {
    text-decoration: none;
    color: white;
}

body li {
    list-style-type: none;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  letter-spacing: 3px;
    font-size: 11px;
    padding-left: 10px;
}
::-moz-placeholder { /* Firefox 19+ */
  letter-spacing: 3px;
    font-size: 11px;
    padding-left: 10px;
}
:-ms-input-placeholder { /* IE 10+ */
  letter-spacing: 3px;
    font-size: 11px;
    padding-left: 10px;
}
:-moz-placeholder { /* Firefox 18- */
  letter-spacing: 3px;
    font-size: 11px;
    padding-left: 10px;
}

input[type=text], select {
    background-color: #000;
    border: none;
    border-bottom: 1px solid white;
    color: #fff;
    
}

input[type="password"]
{
    background-color: #000;
    border: none;
    border-bottom: 1px solid white;
    color: #fff;
}

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_32,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
  position: relative;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 8%;
  min-width: 80px;
}

.container_12 .grid_2 {
  width: 16%;
  min-width: 160px;
}

.container_12 .grid_3 {
  width: 24%;
  min-width: 240px;
}
.container_12 .grid_32 {
  width: 30%;
  min-width: 310px;
}

.container_12 .grid_4 {
  width: 29%;
    min-width: 300px;
}

.container_12 .grid_5 {
  width: 40%;
    min-width: 400px;
}

.container_12 .grid_6 {
  width: 45%;
    min-width: 480px;
}

.container_12 .grid_7 {
  width: 56%;
    min-width: 560px;
}

.container_12 .grid_8 {
  width: 64%;
  min-width: 640
      px;
}

.container_12 .grid_9 {
  width: 72%;
}

.container_12 .grid_10 {
  width: 80%;
}

.container_12 .grid_11 {
  width: 88%;
}

.container_12 .grid_12 {
  width: 100%;
}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
  padding-left: 80px;
}

.container_12 .prefix_2 {
  padding-left: 160px;
}

.container_12 .prefix_3 {
  padding-left: 240px;
}

.container_12 .prefix_4 {
  padding-left: 320px;
}

.container_12 .prefix_5 {
  padding-left: 400px;
}

.container_12 .prefix_6 {
  padding-left: 480px;
}

.container_12 .prefix_7 {
  padding-left: 560px;
}

.container_12 .prefix_8 {
  padding-left: 640px;
}

.container_12 .prefix_9 {
  padding-left: 720px;
}

.container_12 .prefix_10 {
  padding-left: 800px;
}

.container_12 .prefix_11 {
  padding-left: 880px;
}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
  padding-right: 80px;
}

.container_12 .suffix_2 {
  padding-right: 160px;
}

.container_12 .suffix_3 {
  padding-right: 240px;
}

.container_12 .suffix_4 {
  padding-right: 320px;
}

.container_12 .suffix_5 {
  padding-right: 400px;
}

.container_12 .suffix_6 {
  padding-right: 480px;
}

.container_12 .suffix_7 {
  padding-right: 560px;
}

.container_12 .suffix_8 {
  padding-right: 640px;
}

.container_12 .suffix_9 {
  padding-right: 720px;
}

.container_12 .suffix_10 {
  padding-right: 800px;
}

.container_12 .suffix_11 {
  padding-right: 880px;
}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
  left: 80px;
}

.container_12 .push_2 {
  left: 160px;
}

.container_12 .push_3 {
  left: 240px;
}

.container_12 .push_4 {
  left: 320px;
}

.container_12 .push_5 {
  left: 400px;
}

.container_12 .push_6 {
  left: 480px;
}

.container_12 .push_7 {
  left: 560px;
}

.container_12 .push_8 {
  left: 640px;
}

.container_12 .push_9 {
  left: 720px;
}

.container_12 .push_10 {
  left: 800px;
}

.container_12 .push_11 {
  left: 880px;
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
  left: -80px;
}

.container_12 .pull_2 {
  left: -160px;
}

.container_12 .pull_3 {
  left: -240px;
}

.container_12 .pull_4 {
  left: -320px;
}

.container_12 .pull_5 {
  left: -400px;
}

.container_12 .pull_6 {
  left: -480px;
}

.container_12 .pull_7 {
  left: -560px;
}

.container_12 .pull_8 {
  left: -640px;
}

.container_12 .pull_9 {
  left: -720px;
}

.container_12 .pull_10 {
  left: -800px;
}

.container_12 .pull_11 {
  left: -880px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12 {
  zoom: 1;
}

h1, h2, h3, h4 {

  font-family: 'avenir';
  color: #fff;

}

h1 {
    font-size: 14px;
    letter-spacing: 0.2em;
}

h2 {
    font-size: 12px;
    letter-spacing: 0.05em;
}

h3 {
    font-size: 10px;
    letter-spacing: 0.025em;
    color:#eee;
}

#thumbs {
  overflow: auto;
  width: 100%;
  padding-left: 5px;
  height: 170px;
  text-align: center;
     text-shadow: 2px 2px 8px #000000;
}

#thumbs img {
    border-radius: 48%;

}

#thumbs li {
  padding-left: 0px;
  padding-right: 0px;
}

#thumbs2 li {
  padding-left: 15px;
  padding-right: 15px;
     background-color: #111;
}

#thumbs3 li {
  padding-left: 15px;
  padding-right: 15px;
    background-color: #111;
}

#thumbs3 li:hover {
  padding-left: 15px;
  padding-right: 15px;
    background-color: #222;
}
#thumbs5 li:hover {
  padding-left: 15px;
  padding-right: 15px;
    background-color: #222;
}

#thumbs2 li:hover {
  padding-left: 15px;
  padding-right: 15px;
    background-color: #222;
}

#thumbs li:hover {
  padding-left: 0px;
  padding-right: 0px;
}

#thumbs2 {
  overflow: auto;
  width: 100%;
  padding-left: 5px;
  height: 240px;
}

#thumbs3 {
  overflow: auto;
  width: 100%;
  padding-left: 5px;
  height: 240px;
}

#thumbs5 {
  overflow: auto;
  width: 100%;
  height: 240px;
}

#thumbs6 {
  overflow: auto;
  width: 100%;
  padding-left: 5px;
  height: 450px;
  margin-bottom: 10px;
}


#thumbs6 li {
    padding-left:20px;
}

#thumbs3 li {
  padding-left: 15px;
  padding-right: 15px;
    background-color: #111;
}

#thumbs5 li {
  padding-left: 15px;
  padding-right: 15px;
    background-color: #111;
}

#thumbs4 li {
  padding-left: 20px;
}

#thumbs4 {
  overflow: auto;
  width: 100%;
  padding-left: 5px;
  height: 300px;
    text-align: center;
}

#vidThumbs {
  overflow: auto;
  width: 100%;
  height: 300px;
}

#thumbs8 li {
  padding-left: 20px;
}

#thumbs8 {
  overflow: auto;
  width: 100%;
  height: 300px;
}

#nav {
    position: relative;
    height: 60px;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 100;
    padding-left: 25px;
    padding-right: 25px;
    
}

#carousel {
    width: 100%;
    background-image: url()
}

#bgvid {
    z-index: -1;
    background: url(images/testbg.jpg) no-repeat;
    position: relative;
    width:100%;
}

#overvid {
    z-index: 2;
    position: absolute;
    top: 300px;
    text-align: center;
    color: #FFF;
    width:100%;
    min-width: 960px;
    
}

#vidcenter {
    font-family: 'avenir';
    font-size: 24px;
    text-align: center;
    min-width: 960px;
}

.circle {
	border-radius: 50%;
	width: 10px;
	height: 10px; 
	background-color: #ccc;
    float:left;
    margin-right: 3px;
}

#loginbutton {
    text-align: right;
    padding-right: 30px;
}

.row {
    background-color: #000;
}

.row:hover {
    background-color: #333;
    
}

#contentElement {
    width: 100%;
    height: auto;
}

#downarrow {
    text-align:center;
}

#thumbTable {
  height: 90px;
  width: 960px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: table;
  vertical-align: middle;
}

#thumbTable img {
    padding-right: 10px;
    padding-left: 10px;
}

#thumbTable li {
    list-style-type: none;
    padding-bottom: 10px;
}

#thumbSpan {
    line-height: 80px;
    vertical-align: middle;
    height: 80px;
    display: table-cell;
}

#table2 div {
    padding: 10px;
    background-color: #000;
}
#table2 div:hover {
    padding: 10px;
    background-color: #222;
}

#table3 div {
    padding: 10px;
    background-color: #000;
}
#table3 div:hover {
    padding: 10px;
    background-color: #222;
}

#trackList2 li {
    height: 220px;
    text-align:center;
}
#trackList3 li {
    height: 220px;
    text-align:center;
}
#trackList4 li {
    height: 220px;
    text-align:center;
}
#trackList2 li:hover {
    background-color: #222;
}
#trackList3 li:hover {
    background-color: #222;
}
#trackList4 li:hover {
    background-color: #222;
}

#thumbslist li:hover {
    background-color: #222;
}

#comics {
  display: inline-block;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.carousel-caption {
    top: 65%;
    bottom: auto;
}

#logo {
    display: inline-block;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.nametext {
     background-image: url('../images/gradient1.png');'
     background-color: #333;
}

.nametext: hover{
     background-image: url("../images/gradient2.png");
    background-color: #222;
}

#fscaption {
    display: none;
    padding: 10px;
    position: fixed;
    background-color: transparent;
    border-radius: 6px;
    color: #fff; 
    width: 130px;
    height: 200px;
    left: 35px;
    top: 200px;
    pointer-events: none;
}
.gradientover {
    pointer-events: none;
    height:500;
    width:100%;
    background-image: url("images/tilegradient.png");
    background-repeat: repeat-x;
}

#bottomhalf {
    display: none;
}
#middlehalf {
    display: none;
    position: absolute;
    top: 92%;
    left: 42%;
    width: 250px;
    height: 150px
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,0.3);
    
}

/* Dropdown Button */
.dropbtn {
    color: white;
    font-size: 16px;
    border: none;
    cursor: grab;
    z-index: 1;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    float: left;
    width: 40px;
    padding-top: 5px;
    z-index: 1;
    cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    left: 0px;
    background-color: rgba(0,0,0,0.4);
    width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: white;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(0,0,0,0.8)}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.carousel-control > img{        
    position: absolute;
    /*set position of image from top to be 50%...*/
    top: 50%;
    /*and then shift it down to make it perfectly center.*/
    transform: translate(-50%, -50%);

    z-index: 5;
    display: inline-block;
}

video::-webkit-media-controls-panel {
    background-color: transparent;
}

video::-webkit-media-controls-volume-slider-container {
    background-color: #444444;
}

video::-webkit-media-controls-volume-slider {
    background-color: #cccccc;
}

video::-webkit-media-controls-timeline {
    background-color: #cccccc;
}

video::-webkit-media-controls-play-button {
    
}

video::-webkit-media-controls-fullscreen-button {
    
}

/* Dropdown Button */
.dropbtn2 {
    color: white;
    font-size: 16px;
    border: none;
    cursor: grab;
    z-index: 1;
}

/* Dropdown button on hover & focus */
.dropbtn2:hover, .dropbtn2:focus {
    
}

/* The container <div> - needed to position the dropdown content */
.dropdown2 {
    float: left;
    width: 40px;
    padding-top: 5px;
    z-index: 1;
    cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
    display: none;
    position: absolute;
    right: 100px;
    background-color: rgba(0,0,0,0.4);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: white;
}

/* Links inside the dropdown */
.dropdown-content2 span {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    
}

/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {background-color: rgba(0,0,0,0.8)}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show2 {display:block;}

.vidad {

    height: 70px;
    margin-right: auto;
    margin-left: auto;
}

#closead {
    position: relative;
    top: -15px;
    width: 40px;
    height: 15px;
    float:right;
    font-size: 9px;
}

#adContainer {
  position: absolute;
  top: 60px;
  width: 1400px;
  height: auto;
}

video::-internal-media-controls-download-button {
    display:none;
}

.topname {
    padding-top: 20px;
   position: relative;
    top: 40px;
    left: 5px;
    font-size: 14px;
}

.bottomtitle {
    padding-bottom: 20px;
    position: relative;
    top: -20px;
    left: 5px;
    font-size: 11px;
    color: #666;
}

#fixed {
    position: relative;
    height: 100vh;
    z-index: 0;
}
#fixed video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

#holding {
    height: 200px;
    background-color: #333;
    color: #fff;
}
#bars1 {
    height: 165px;
    overflow-y: hidden;
}

#topthumbs {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: hidden;
    background-color: #111111;
}

#topthumbs li {
    float: left;
}

#topthumbs li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 0px;
    text-decoration: none;
}

#topthumbs li a:hover {
    background-color: #333333;
}

/* SPACING
*/

#bars3 {
    height: 260px;
    overflow-y: hidden;
}

#thumbs3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: hidden;
    background-color: #111111;
}

#thumbs3 li {
    float: left;
}

#thumbs3 li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 0px;
    text-decoration: none;
}

#thumbs3 li a:hover {
    background-color: #333333;
}

/* SPACING 
*/

#bars2 {
    height: 260px;
    overflow-y: hidden;
}

#thumbs2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: hidden;
    background-color: #111111;
}

#thumbs2 li {
    float: left;
}

#thumbs2 li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 0px;
    text-decoration: none;
}

#thumbs2 li a:hover {
    background-color: #333333;
}

/* SPACING 
*/

#bars5 {
    height: 160px;
    overflow-y: hidden;
}

#thumbs6 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: hidden;
    background-color: #111111;
}

#thumbs6 li {
    float: left;
}

#thumbs6 li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 0px;
    text-decoration: none;
}

#thumbs6 li a:hover {
    background-color: #333333;
}

/* SPACING 
*/


#fullUl {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: hidden;
    background-color: #111111;
}
#fullUl hover {
     background-color: #222;
}

#fullUl li {
    float: left;
    padding: 10px;
}
/*
#fullUl li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

#fullUl li a:hover {
    background-color: #333333;
}

/* SPACING 
*/

.parent div {
    display:none;
    position: relative;rgba(255, 0, 0, 0.3);
    top: -100px;
    width: inherit;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.3);

}

.parent:hover #child {
    display: block;
}


/*
== jquery thumbnail/image scroller ==
Plugin URI: http://manos.malihu.gr/jquery-thumbnail-scroller/
*/



/*
CONTENTS: 
	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
	2. SCROLLING BUTTONS STYLE - buttons size, background, color, positioning etc. 
	3. THUMBNAILS STYLE - basic thumbnails CSS.
	4. THEMES - Scroller colors, dimensions, backgrounds etc. via ready-to-use themes. 
*/



/* 
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	.mThumbnailScroller{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ }
	.mThumbnailScroller.mTS_no_scroll, .mThumbnailScroller.mTS_touch_action{ -ms-touch-action: auto; touch-action: auto; }

	.mTSWrapper{
		position: relative;
		overflow: hidden;
		height: 100%;
		max-width: 100%;
		outline: none;
		direction: ltr;
	}

	.mTSContainer{
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	ul.mTSContainer, ol.mTSContainer{ list-style: none; }

	.mTSThumb, 
	ul.mTSContainer > li img{ vertical-align: bottom; }

	.mTS_vertical .mTSContainer{
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.mTS_horizontal .mTSContainer{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}



/* 
------------------------------------------------------------------------------------------------------------------------
2. SCROLLING BUTTONS STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	.mTSButton{
		/* button size (if changed, also change the buttons top and left margins below) */
		width: 20px;
		height: 20px;
		line-height: 20px;
		padding: 0px;
		/* ---------- */
		overflow: hidden;
		text-align: center;
		background-color: #000; /* button background */
		color: #fff; /* non-svg button icon color */
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		/* show button effect (fades-in button from zero size) */
		opacity: 1;
		-webkit-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
		-moz-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
		-o-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
		-ms-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
		transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
		/* ---------- */
	}

	/* buttons positioning */
	
	.mTSButtonDown{
		top: auto;
		bottom: 0;
	}

	.mTSButtonRight{
		left: auto;
		right: 0;
	}

	.mTSButtonUp, 
	.mTSButtonDown{ /* margin is half the button size */
		left: 50%;
		margin-left: -24px;
	}

	.mTSButtonLeft, 
	.mTSButtonRight{ /* margin is half the button size */
		top: 50%;
		margin-top: -24px;
	}

	.mTSButtonIconContainer{
		display: inline-block;
		position: relative;
		width: 100%;
		padding-bottom: 100%;
		overflow: hidden;
	}

	.mTSButtonIcon{ /* SVG icon */
		display: inline-block;
		fill: #fff; /* button icon color */
		position: absolute;
	    top: 0;
	    left: 0;
	}

	.mTSButton.mTS-hidden, 
	.mThumbnailScroller.mTS_no_scroll .mTSButton{
		/* hide button effect (fades-out button to zero size) */
		opacity: 0;
		height: 0;
		width: 0;
		padding: 0;
		-webkit-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
		-moz-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
		-o-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
		-ms-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
		transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
		/* ---------- */
	}



/* 
------------------------------------------------------------------------------------------------------------------------
3. THUMBNAILS STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	/* thumbnail container (default: li) */
	
	.mTS_horizontal .mTSThumbContainer, 
	.mTS_horizontal ul.mTSContainer > li{ float: left; }



/* 
------------------------------------------------------------------------------------------------------------------------
4. THEMES 
------------------------------------------------------------------------------------------------------------------------
*/

	/* theme: "buttons-in" */

	.mTS-buttons-in{
		padding: 7px;
		background-color: #000; 
	}

	.mTS-buttons-in .mTSButtonIcon{ fill: #fff; }

	.mTS-buttons-in .mTSWrapper, 
	.mTS-buttons-in .mTSButton{ background-color: inherit; }

	.mTS-buttons-in .mTSButtonLeft, 
	.mTS-buttons-in .mTSButtonRight{ 
		width: 30px;
		height: 50px;
		margin-top: -48px;
        padding-top: 8px;
        padding-bottom: 8px;
	}

	.mTS-buttons-in .mTSButtonUp, 
	.mTS-buttons-in .mTSButtonDown{ 
		width: 24px;
		height: 24px;
		padding: 4px 24px;
		margin-left: -36px; 
	}
	
	.mTS-buttons-in .mTSButton.mTS-hidden{
		height: 0;
		width: 0;
		padding: 0;
	}

	.mTS-buttons-in .mTSButton:not(.mTS-hidden){ opacity: .4; }

	.mTS-buttons-in:hover .mTSButton:not(.mTS-hidden){ opacity: 1; }

	.mTS-buttons-in .mTS_vertical .mTSThumbContainer{ margin: 14px 0; }

	.mTS-buttons-in .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 0; }

	.mTS-buttons-in .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 0; }

	.mTS-buttons-in .mTS_horizontal .mTSThumbContainer{ margin: 0 7px; }

	.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:first-child{ margin-left: 0; }

	.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:last-child{ margin-right: 0; }

	/* ---------------------------------------- */



	/* theme: "buttons-out" */

	.mTS-buttons-out{
		padding: 6px;
		background: #000;
	}

	.mTS-buttons-out .mTSButtonIcon{ fill: #000; }

	.mTS-buttons-out .mTSButton{
		background-color: transparent;
		width: 36px;
		height: 36px;
		line-height: 42px;
		padding: 6px;
	}
	
	.mTS-buttons-out .mTSButton.mTS-hidden{
		height: 0;
		width: 0;
		padding: 0;
	}

	.mTS-buttons-out .mTS_vertical .mTSThumbContainer{ margin: 6px 0; }

	.mTS-buttons-out .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 0; }

	.mTS-buttons-out .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 0; }

	.mTS-buttons-out .mTS_horizontal .mTSThumbContainer{ margin: 0 3px; }

	.mTS-buttons-out .mTS_horizontal .mTSThumbContainer:first-child{ margin-left: 0; }

	.mTS-buttons-out .mTS_horizontal .mTSThumbContainer:last-child{ margin-right: 0; }

	/* ---------------------------------------- */



	/* theme: "hover-full" */

	.mTS-hover-full{
		padding: 8px;
		background: rgba(0,0,0,.2);
	}

	.mTS-hover-full .mTS_vertical .mTSThumbContainer{ margin: 8px 0; }

	.mTS-hover-full .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 40px; }

	.mTS-hover-full .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 40px; }

	.mTS-hover-full .mTS_horizontal .mTSThumbContainer{ margin: 0 4px; }

	.mTS-hover-full .mTS_horizontal .mTSThumbContainer:first-child{ margin-left: 40px; }

	.mTS-hover-full .mTS_horizontal .mTSThumbContainer:last-child{ margin-right: 40px; }

	/* ---------------------------------------- */


/* Dropdown Button */
.dropbtn3 {
    color: white;
    font-size: 16px;
    border: none;
    cursor: grab;
    z-index: 1;
}

/* Dropdown button on hover & focus */
.dropbtn3:hover, .dropbtn2:focus {
    
}

/* The container <div> - needed to position the dropdown content */
.dropdown3 {
    float: left;
    width: 40px;
    padding-top: 5px;
    z-index: 1;
    cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
    display: none;
    position: absolute;
    right: 550px;
    background-color: rgba(0,0,0,0.4);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    color: white;
}

/* Links inside the dropdown */
.dropdown-content3 span {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    
}

/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {background-color: rgba(0,0,0,0.8)}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show3 {display:block;}

.fullCaption {
    position: absolute;
    width: 200px;
    height: 260px;
    overflow: hidden;
    float: left;
    top: 15px;
    left: 50px;
    padding: 20px;
    padding-left: 40px;
    background-image:url(../images/hoverbox.png);
    z-index: 100;
    font-size: 10px;
    
}
.overcaption {
    position: absolute;
    width: 270px;
    height: 310px;
    top: 0px;
    left: 0px;
    opacity: 0.0;
    
}

.overcaption:hover {
    opacity: 1.0;
}