/*
 * ******************************************************************************
 *  jquery.mb.components
 *  file: bgndGallery.css
 *
 *  Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi); 
 *  Open lab srl, Firenze - Italy
 *  email: matteo@open-lab.com
 *  site: 	http://pupunzi.com
 *  blog:	http://pupunzi.open-lab.com
 * 	http://open-lab.com
 *
 *  Licences: MIT, GPL
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 *
 *  last modified: 10/04/14 21.51
 *  *****************************************************************************
 */


/*******************************************************************************
 * 
 * jQuery.mb.components: bgndGallery
 * version: 1.0
 * Author: pupunzi
 * Creation date: 10/04/14
 * Licences: MIT, GPL
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 ******************************************************************************/

@charset "UTF-8";

.mbBgndGallery img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translateZ(0.1px);
    -moz-transform: translateZ(0.1px);
}
.ei-title{
	position: absolute;
	right: 50%;
	margin-right: 13%;
	top: 30%;
}
.ei-title h2, .ei-title h3{
	text-align: right;
}
.ei-title h2{
	font-size: 40px;
	line-height: 50px;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	color: #b5b5b5;
}
.ei-title h3{
	font-size: 70px;
	line-height: 70px;
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	color: #000;
}

.bgg_raster {
//    background: url('../img/raster.png');
}

        body{
            background: #190f0d;
            z-index:0;
            margin:0;
            padding:0;
	font:normal 76% arial,verdana,tahoma;
        }

.bx-overlay{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background: transparent url('../img/pattern.png') repeat top left;
	z-index:0;
	opacity: 0.4;
}

@font-face { 
	font-family: 'Cinzel-Regular'; 
	src: url('Cinzel-Regular.eot?#iefix') format('embedded-opentype'), 
	url('Cinzel-Regular.otf') format('opentype'), 
	url('Cinzel-Regular.woff') format('woff'), 
	url('Cinzel-Regular.ttf') format('truetype'),
	url('Cinzel-Regular.svg#Cinzel-Regular') format('svg'); 
	font-weight: normal; font-style: normal; }


        button{
            display:inline-block;
            padding:5px;
            margin:1px;
            color:#fff;
            border:1px solid #fff;
            border-radius:4px;
            background: rgba(0, 0, 0, 0.72);
            cursor: pointer;
        }

        button:hover{
            background:rgba(255,255,255,.9);
            color:#000;
        }


        #wrapper{
            position:absolute;
            padding:0px 0px;
            width:56px;
	    height: 120px;
            margin:0;
            top:0;
            background: rgba(232, 232, 232, .2);
            box-shadow: 0 0 10px rgba(0,0,0,0.4);
        }

	#getOut{
	   position: absolute;
	   z-index:30;
	   top:10px;
	   left:15px;
	   width:32px;
	   height:32px;
	   box-shadow: 1px 1px 3px rgba(10,10,40, 0.7);
	}

        .text{
            position: relative;
            top:40px;
            padding-right: 50px;
        }


        .controls div{
	    z-index:2;
            width:32px;
	    height:32px;
            padding:0px;
	    margin-top: 4px; 
	    margin-left:15px;
        }

	.controls div.pause {
	background:url('../img/pause.png') no-repeat;
        background-size: 32px 32px;
        box-shadow: 1px 1px 3px rgba(10,10,40, 0.7); 
	}
	.controls div.play {
	background:url('../img/play.png') no-repeat;
        background-size: 32px 32px;
        box-shadow: 1px 1px 3px rgba(10,10,40, 0.7);
	}
	.controls div.next {
	background:url('../img/next.png') no-repeat;
        background-size: 32px 32px;
	}
	.controls div.prev {
	background:url('../img/prev.png') no-repeat;
        background-size: 32px 32px;
        box-shadow: 1px 1px 3px rgba(10,10,40, 0.7);
	}
	.controls div.fullscreen{
	background:url('../img/fullscreen.png') no-repeat;
        background-size: 32px 32px;
        box-shadow: 1px 1px 3px rgba(10,10,40, 0.7);
	}
	.controls div.Back{
	margin-top: 10px;
	background:url('../img/back.png') no-repeat;padding:2px;
        box-shadow: 1px 1px 3px rgba(10,10,40, 0.7);
	}
	.controls div.counter{
	text-align: middle;
	}

        .controls div:hover:not(.counter){
          cursor:pointer;
        }

        .controls div:not(.counter){
        }

        .controls.fullScreen_controls div:hover:not(.counter){
        }

        .controls.fullScreen_controls div:not(.counter){
            cursor:pointer;
        }

        .controls div.sel{
            background:rgba(255,255,255,.9);
        }

        #thumbnails{
	   z-index:3;
	   position: fixed;
	   width: 100%;
           bottom: 0 ;
           background: rgba(255,255,255,.1);
	   text-align: center;
           font-size: 0;
           padding: 0px;
	   opacity:0.4;
	   -webkit-transition: opacity 0.8s ease-in-out;
	   -moz-transition: opacity 0.8s ease-in-out;
	   -ms-transition: opacity 0.8s ease-in-out;
        }

        #thumbnails:hover{
	   opacity:1;
	   -webkit-transition: opacity 0.4s ease-in-out;
	   -moz-transition: opacity 0.4s ease-in-out;
	   -ms-transition: opacity 0.4s ease-in-out;
        }

        #thumbnails img{
	   text-align: center;
           margin: 2px;
           width: 45px;
           height:auto;
           cursor: pointer;
           display: inline-block;
           border: 2px solid transparent;
	   margin-top:15px;
	   -webkit-transition: all 0.3s ease;
	   transition: all 0.3s ease;
        }

        #thumbnails img.sel{
           border: 2px solid white;
        }

        #thumbnails img:hover{
           width: 70px;
           height:auto;
	   margin-top: -6px;
	   -webkit-transform:scale(1.0);
	   transform:scale(1.0);
        }
        #thumbnails img.sel:hover{
           width: 70px;
           height:auto;
	   margin-top: -6px;
	   -webkit-transform:scale(1.0);
	   transform:scale(1.0);
        }

        #pageContent{
        }

        #pageContent h1{
	   position: absolute;
	   z-index:30;
	   top:-15px;
	   right: -430px;
	   font-family: Cinzel-Regular;
	   font-size: 46px;
	   font-weight: 100;
	   color: #ffffff;
	   text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.70);
	   opacity: 0.2;
	   float: left;
	   -webkit-transition: 2s ease-in-out;
	   -moz-transition: 2s ease-in-out;
	   -o-transition: 2s ease-in-out;
	   -ms-transition: 2s ease-in-out;
  	}

        #pageContent h4{
	   position: absolute;
	   z-index:30;
	   top:47px;
	   right: -147px;
	   font-family: Helvetica, Arial;
	   font-size: 18px;
	   color: #ffffff;
	   text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.70);
	   opacity: 0.2;
	   float: left;
	   -webkit-transition: 1s ease-in-out;
	   -moz-transition: 1s ease-in-out;
	   -o-transition: 1s ease-in-out;
	   -ms-transition: 1s ease-in-out;
	   transition-delay: 2s;
        }

	.slidein {
	   -webkit-transform: translate(-10em,0);
	   -moz-transform: translate(-10em,0);
	   -o-transform: translate(-10em,0);
	   -ms-transform: translate(-10em,0);
	   transform: translate(-10em,0);
	}

        #pageContent strong{
	   position:absolute;
	   z-index:3;
	   top: 15px;
	   left: 65px;
	   color: #ffffff;
	   opacity: 0.25;
	   font-size: 12px;
	}
