/* 
** ALL CREDIT GOES TO 
** Craig Buckler
** http://www.sitepoint.com/css3-starwars-scrolling-text/
**
** Blame me for the music via embedded video bit
*/
@media only screen and (min-width:1200px){
	.desk2 {
	display:none;
}
.desk1 {
	
}
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* { padding: 0; margin: 0; }

body, html
{
  width: 100%;
  height: 100%;
  font-family: "Droid Sans", arial, verdana, sans-serif;
	font-weight: 700;
	color: #ff6;
	background-color: #000;
	overflow: hidden;
}

p#start
{
	position: relative;
	width: 16em;
	font-size: 200%;
	font-weight: 400;
	margin: 20% auto;
	color: #4ee;
	opacity: 0;
	z-index: 1;
	-webkit-animation: intro 2s ease-out;
	-moz-animation: intro 2s ease-out;
	-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;
	animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

h1
{
	position: absolute;
	width: 2.6em;
	left: 50%;
	top: 25%;
	font-size: 10em;
	text-align: center;
	margin-left: -1.3em;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color: #000;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index: 1;
	-webkit-animation: logo 5s ease-out 2.5s;
	-moz-animation: logo 5s ease-out 2.5s;
	-ms-animation: logo 5s ease-out 2.5s;
	-o-animation: logo 5s ease-out 2.5s;
	animation: logo 5s ease-out 2.5s;
}

h1 sub
{
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
}

@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
	/*position: absolute;  orginal
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	text-align: justify;*/
	
	
	position: absolute;
	width: 22em;
	/*height: 50em;*/ height:auto; /*min-height:50em;*/min-height:15em;
	bottom: 0;
	left: 0;
	right:0;
	margin:auto auto;
	font-size: 350%;
	text-align: justify;
	
	
	/*overflow: hidden;*/
	
	
	/*-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(30deg);
	-moz-transform: perspective(300px) rotateX(30deg);
	-ms-transform: perspective(300px) rotateX(30deg);
	-o-transform: perspective(300px) rotateX(30deg);
	transform: perspective(300px) rotateX(30deg);*/
	
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(230px) rotateX(22deg);
	-moz-transform: perspective(230px) rotateX(22deg);
	-ms-transform: perspective(230px) rotateX(22deg);
	-o-transform: perspective(230px) rotateX(22deg);
	transform: perspective(230px) rotateX(22deg);
}

/*#titles:after*/.k
{
	position: absolute;
	content: ' ';
	/*left: 0;*/    left: -156px;
	right: 0;
	/*top: 0;*/ /*top:-62%;*/ top:-100%;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
	    width: 164%;
}

#titles p
{
	text-align: justify;
	margin: 0.8em 0;
}

#titles p.center
{
	text-align: center;
}

#titles a
{
	color: #ff6;
	text-decoration: underline;
}

/*#titles a:after{
	 content: attr(data-title);
	 
    font-size: 10px;
    color: #fff;
    line-height: 0px;
    text-decoration: none;
    border: none;
    position: relative;
    top: -40px;
    left: 0px;
	text-transform:lowercase;
}*/
#titles a p {
	font-size:10px;
	color:#093;
	background:#666;
	display:none;}
	
 #gal1div {
		color:#fff;
	}
	

#titlecontent
{
	position: absolute;
	/*top: 120%;*/ /*top:-60%;*/
	/*-webkit-animation: scroll 100s linear 4s infinite;
	-moz-animation: scroll 100s linear 4s infinite;
	-ms-animation: scroll 100s linear 4s infinite;
	-o-animation: scroll 100s linear 4s infinite;
	animation: scroll 100s linear 4s infinite;*/
	/*-webkit-animation: scroll 100s linear 4s ;
	-moz-animation: scroll 100s linear 4s ;
	-ms-animation: scroll 100s linear 4s ;
	-o-animation: scroll 100s linear 4s ;
	animation: scroll 100s linear 4s ;*/
	
	transition: all 1.5s ease;
	-webkit-transition:all 1.5s ease;
       -moz-transition:all 1.5s ease;
        -ms-transition:all 1.5s ease;
         -o-transition:all 1.5s ease;
		 
           

}

/* animation */
@-webkit-keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}

@-moz-keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}

@-ms-keyframes scroll {
	0% { top: 120%; }
	100% { top: -190%; }
}

@-o-keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}

@keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}



.gal {
	min-height:210px;
	
	/*webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(772px) rotateX(-47deg);
    -moz-transform: perspective(772px) rotateX(-47deg);
    -ms-transform: perspective(772px) rotateX(-47deg);
    -o-transform: perspective(772px) rotateX(-47deg);
    transform: perspective(772px) rotateX(-47deg);*/
	
	/* margin-top:50px;*/
}

.gal ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
}
.gal ul li {
	float:left;
	width:14.28571428571429%;
	text-align:center;
	    transform: rotateX(0deg);
}
.gal ul li a img {
	width:80%;
	margin:auto auto;
	
	/*webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(772px) rotateX(-47deg);
    -moz-transform: perspective(772px) rotateX(-47deg);
    -ms-transform: perspective(772px) rotateX(-47deg);
    -o-transform: perspective(772px) rotateX(-47deg);
    transform: perspective(772px) rotateX(-47deg);*/
	
	
	
}



.gal ul li.l1 a img {
	
	    -webkit-transform-origin: 228% 100%;
    -moz-transform-origin: 228% 100%;
    -ms-transform-origin: 228% 100%;
    -o-transform-origin:228% 100%;
    transform-origin: 228% 100%;
    -webkit-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -moz-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -ms-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -o-transform:perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    transform:perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
}
.gal ul li.l2 a img {
	
	   -webkit-transform-origin: 103% 100%;
    -moz-transform-origin: 103% 100%;
    -ms-transform-origin: 103% 100%;
    -o-transform-origin:103% 100%;
    transform-origin: 103% 100%;
    -webkit-transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -moz-transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -ms-transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -o-transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
}
.gal ul li.l3 a img {
   
	   -webkit-transform-origin: -6% 100%;
    -moz-transform-origin: -6% 100%;
    -ms-transform-origin: -6% 100%;
    -o-transform-origin:-6% 100%;
    transform-origin: -6% 100%;
    -webkit-transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -moz-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -ms-transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -o-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
}



.gal ul li.l4 a img {
	/*  -webkit-transform-origin: -105% 100%;
    -moz-transform-origin: -105% 100%;
    -ms-transform-origin: -105% 100%;
    -o-transform-origin:-105% 100%;
    transform-origin: -105% 100%;
    -webkit-transform: perspective(173px) rotateX(-52deg) skewY(-1deg) skewX(38deg);
    -moz-transform: perspective(173px) rotateX(-52deg) skewY(-1deg) skewX(38deg);
    -ms-transform: perspective(173px) rotateX(-52deg) skewY(-1deg) skewX(38deg);
    -o-transform: perspective(173px) rotateX(-52deg) skewY(-1deg) skewX(38deg);
      transform: perspective(173px) rotateX(-52deg) skewY(-1deg) skewX(38deg);*/
	 /*   -webkit-transform-origin: -110% 99%;
    -moz-transform-origin: -110% 99%;
    -ms-transform-origin: -110% 99%;
    -o-transform-origin:-110% 99%;
    transform-origin:-110% 99%;
    -webkit-transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(15deg) rotateY(-3deg);
    -moz-transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(15deg) rotateY(-3deg);
    -ms-transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(15deg) rotateY(-3deg);
    -o-transform:perspective(171px) rotateX(-24deg) skewY(0deg) skewX(15deg) rotateY(-3deg);*/
	   -webkit-transform-origin: -105% 120%;
    -moz-transform-origin: -105% 120%;
    -ms-transform-origin: -105% 120%;
    -o-transform-origin:-105% 120%;
    transform-origin:-105% 120%;
    -webkit-transform: perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
    -moz-transform: perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
    -ms-transform:perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
    -o-transform:perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
      transform: perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
}

.gal ul li.l5 a img {
	      -webkit-transform-origin:-197% 109%;
    -moz-transform-origin:-197% 109%;
    -ms-transform-origin: -197% 109%;
    -o-transform-origin: -197% 109%;
    transform-origin:-197% 109%;
    -webkit-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -moz-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -ms-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -o-transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
}

.gal ul li.l6 a img {
	     -webkit-transform-origin:-263% 100%;
    -moz-transform-origin: -263% 100%;
    -ms-transform-origin: -263% 100%;
    -o-transform-origin:  -263% 100%;
    transform-origin: -263% 100%;
    -webkit-transform:perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -moz-transform:perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -ms-transform:perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -o-transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
}
.gal ul li.l7 a img {
 -webkit-transform-origin: -412% 100%;
    -moz-transform-origin: -412% 100%;
    -ms-transform-origin: -412% 100%;
    -o-transform-origin: -412% 100%;
    transform-origin: -412% 100%;
    -webkit-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -moz-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -ms-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -o-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
}












footer {
    margin: 50px 0;
}


/*.men1:before {
	    content: 'Menu';
    position: relative;
 
    color: rgba(238, 238, 238, 0.37);
    font-size: 13px;
}*/






.men1 {
	text-align:center;
}
.men1 a{
	      margin-right: 5px;
    text-decoration: none;
   /* color: #eee;*/color: rgba(9, 143, 207, 0.54);
    font-size: 13px;
    font-weight: 400;
	margin-left:5px;
}
.men1 a span {
	    /*padding: 3px 15px 32px 15px;
		height: 50px;*/
    background: #080808;
	
    
    border: solid 1px rgba(238, 238, 238, 0.3);
    border-bottom: none;
    /* border-top: none; */
    border-top: none;
	 -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.men1 a span:hover {
	   /* padding: 3px 15px 32px 15px;*/
    background: #eee;
   /* height: 50px;*/
    border: solid 1px rgba(238, 238, 238, 0.3);
    border-bottom: none;
     border-top: none; 
   
}

.men1 a#so1 span {
    background: url(../img/fb.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so2 span {
    background: url(../img/tw.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so3 span {
    background: url(../img/in.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so4 span {
    background: url(../img/lk.png) no-repeat center;
    background-size: 80% auto;
}






.men1 a font{
	width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	/*left: 50%;*/
	margin-left: -64px;
	font-family: 'Alegreya SC', Georgia, serif;
	font-weight: 400;	
	font-style: italic;
	font-size: 14px;
	    color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid #fff;
	/*background: rgba(255,255,255,0.3);*/    background: rgba(107, 98, 98, 0.94);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
	pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.men1 a font:before,
.men1 a font:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0,0,0,0.1);
}
.men1 a font:after{
	bottom: -14px;
	margin-left: -10px;
	border-top: 10px solid #fff;
}
.men1 a:hover font{
	opacity: 0.9;
	bottom: 70px;
}




.over {
	
	position:fixed;
	
background:#000 ;
	height:100%;
	width:100%;
	z-index:1000000000;
	
		transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;

/*	transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;*/
}
.over .col-xs-4 {
	position:relative;
	height:100%;
	padding:0;
	}
.over img {
	/*width:100%;*/
	margin:auto auto;
	position:relative;
	margin-top:30%;
}
.over .a_f {
	
}
.over .a_f img {
	opacity: 0.6;
    z-index: -1;
    position: relative;
    max-width:100%;
    /* margin-top: 144px; */
    left: -30%;
    transform: translateX(-90px) translateY(21px) translateZ(0px) rotateX(0deg) rotateY(0deg);
	
}
.over .a_s {
	overflow:hidden;
	min-width:450px;
	
}

.over .a_s img {
	/*position: absolute;*/
    float: left;
   /* width: 125%;*/
  /* max-width:100%;*/
   margin:0;
	
}
.over .a_s  span {
	    position: absolute;
    height: 342px;
    width: 40px;
    z-index: 111;
  background: rgba(21, 9, 9, 0.45);
    margin-top: 32%;
    padding-top: 133px;
	text-align: center;
	cursor:pointer;
	
	transition: all 1s ease;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
}
.over .a_s  span font {
color: #fff;
    font-size: 31px;
}
.over .a_s  span#pre {
}
.over .a_s  span#nex {
	    right: 0;
}
.over .a_s table {
	margin:0;
	padding:0;
	list-style:none;
	margin-top:32%;
	/*width:1800px;*/
	
	transition: all 1s ease;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
	position:relative;
	
	
}
/*.over .a_s:hover table {
	transform: translateX(-1365px);
}*/
.over .a_s table td {
	/*width:450px;*/ min-width:450px;
	height:342px;
	overflow:hidden;
	max-width:450px;
	
}

.over .a_s table td img {
	min-width:455px;
	max-width:455px;
	height:342px;
	
}
.over .a_s table td div {
	    padding: 10px 10px 10px 10px;
    background: #fff;
   height: 342px;
   overflow-y:auto;
   min-width:450px;
}
.over .a_s table td div h3 {
	    color: #444;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    border-bottom: solid 1px #eee;
    line-height: 34px;
}
.over .a_s table td div p {
	    color: #444;
    font-size: 12px;
    font-weight: 300;
    line-height: 23px;
}


.over .a_t {
	
}
.over .a_t img {
	opacity: 0.6;
    z-index: -1;
    position: relative;
    max-width:100%;
    /* margin-top: 144px; */
    right: -30%;
    transform: translateX(90px) translateY(21px) translateZ(0px) rotateX(0deg) rotateY(0deg);
	
}






.ov {
	position:absolute;
	    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.1;
	overflow:hidden;
}

.ov ul {
	margin:0;
	padding:0;
	list-style:none;
	    margin-top: 10%;
		width:2380px;
		}
.ov ul li {
	    float: left;
    width: 340px;
    padding: 0px 40px 0px 40px;
	
}
.ov ul li img {
	max-width:100%;
}






.men1 button {
	    background: none;
    border: none;
    position: relative;
    left: 0;
	    padding: 0;
   
	
}
.men1 button a {
	    color: rgba(238, 238, 238, 0.58);
	text-decoration:none;
}


@media (max-width:1350px){
	.over .col-xs-4 {
		width:30.333333%;
	}
}







.pro {
	    margin-left: 99px;
    margin-top: 12px;
    float: left;
}
.pro h3 {
	display: inline-block;
    color: rgba(255, 254, 248, 0.41);
    font-weight: 600;
    float: left;
        margin: 0px 10px 0px 0px;
}

.pro span {
	float: left;
    margin-right: 10px;
    font-size: 19px;
    font-weight: 400;
    color: #555;
}
.pro span:after {
	content:',';
}








/**********************************/

.over .a_s table {
	margin:0;
	padding:0;
	list-style:none;
	margin-top:32%;
	/*width:1800px;*/
	
	transition: all 1s ease;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
	position:relative;
	
	
}
/*.over .a_s:hover table {
	transform: translateX(-1365px);
}*/
.over .a_s table td {
	/*width:450px;*/ min-width:450px;
	height:342px;
	overflow:hidden;
	max-width:450px;
	
}

.over .a_s table td img {
	min-width:455px;
	max-width:455px;
	height:342px;
	
}


#makeMeScrollable
		{
			width:100%;
		/*	height: 330px;*/
			position: relative;
			
			margin:0;
	padding:0;
	list-style:none;
	margin-top:32%;
	
	min-width:450px;
	height:342px;
	overflow:hidden;
	max-width:450px;
		}
		
		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		#makeMeScrollable div.scrollableArea img  {
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			
			min-width:455px;
	max-width:455px;
	height:342px;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}


h5#alt {
    position: relative;
    z-index: 100;
    margin-top: -49px;
    bottom: 0;
    font-size: 15px;
    background: #000;
    color: #444;
    padding: 5px 5px 5px 5px;
    min-height: 40px;
}





.shelf { 
width:100%;
		/*	height: 330px;*/
			position: relative;
			
			margin:0;
	padding:0;
	list-style:none;
	margin-top:32%;
	
	min-width:450px;
	height:342px;
	overflow:hidden;
	max-width:450px;

/*height: 200px; width: 100%; background-color: #c7c7c7; margin-bottom: 15px; position: relative;*/}
.inside { position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px; white-space: nowrap; font-size: 0; line-height: 0; overflow-x: scroll;    overflow-y: hidden;}



.scroll-arrow { width: 30px; height: 100%;     background-color: rgba(241, 241, 241, 0.62);
 display: block; position: absolute; bottom: 0; z-index: 99;}
.left { left: 0;     background: url(../img/arol.png) no-repeat center rgba(255, 255, 255, 0.69);
    background-size: 15px auto;}
.right { right: 0;    background: url(../img/aror.png) no-repeat center rgba(255, 255, 255, 0.69);
    background-size: 15px auto;}

.content { display: inline-block; width: 450px; height: 342px; background-color: #797979; /*margin-right: 10px;*/}
.content img {
	height:342px;
	min-width:450px;
}



.inside::-webkit-scrollbar {
    width: 6px;
}
 
.inside::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	    background: #fff;
}
 
.inside::-webkit-scrollbar-thumb {
      background-color: #ccc;
  outline: 1px solid slategrey;
}










.gal ul li a font{
	width: 175px;
	height: auto;
	line-height: 20px;
	padding: 2px;
	/*left: 50%;*/
	margin-left: -64px;
	    font-family: sans-serif;
	font-weight: 300;	
	font-style: italic;
	font-size: 13px;
	    color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid #fff;
	/*background: rgba(255,255,255,0.3);*/    background: rgba(107, 98, 98, 0.94);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
	pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gal ul li a font:before,
.gal ul li  a font:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.gal ul li a font:after{
	bottom: -14px;
	margin-left: -10px;
	/*border-top: 1px solid #fff;*/
}
.gal ul li a font{
	/*opacity: 0.9;
	bottom: 70px;*/
	    opacity: 0.9;
    bottom: 108px;
    margin-left: -137px;
}
.gal ul li a font{	
	    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    -moz-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    -ms-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    -o-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
	
}



/*.gal ul li a:before {
	    background: #333;
    background: rgb(212, 204, 203);
    bottom: 0px;
    color: #000;
     content: attr(title); 
    content: 'arkind';
    left: 0;
    padding: 5px 15px;
    position: absolute;
    z-index: 100;
    width: 200px;
    height: auto;
    font-size: 12px;
    font-weight: 300;
}*/



.pop {
	    max-width: 350px;
    background: #333;
	/*margin-left:-350px;*/
	margin-top:162px;
    padding: 10px 10px 10px 10px;
	    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	
}

.pop p {
	    color: #777;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 300;
    line-height: 20px;
    border-bottom: solid 1px #444;
	   transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
}
.pop h5 {
    color: #777;
    font-size: 17px;
    font-family: sans-serif;
    font-weight: 300;
    line-height: 20px;
}



/*******************************/

.social {
	    position: fixed;
    z-index: 10000;
    right: 0;
    top: 22%;
}
.social ul {
	margin:0;
	padding:0;
	list-style:none;
	float:none;
}
.social ul li {
	 transition: 0.3s ease;
  background: #fff;
  color: #ffffff;
  position:relative;
 
  text-decoration: none;
 
  padding: 3px 3px 3px 3px;
  margin-bottom:2px;
      border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.social ul li a span {
	    transition: 0.3s ease;
    position: absolute;
    right: -241px;
    background: rgba(0, 0, 0, 0.65);
    padding: 10px 10px 3px 10px;
    line-height: 20px;
    font-size: 14px;
    height: 100%;
    margin-top: -3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    color: rgba(238, 238, 238, 0.62);
}
.social ul li:hover a span {
right: 40px;
	
}
.social ul li#so2:hover {

}
.social ul li#so3:hover {

}
.social ul li#so4:hover {
}
.social ul li a {
	 transition: 0.3s ease;
	 text-decoration:none;
	
}
.social ul li a img {
	width:35px;
	 -webkit-transition: all 1s ease 0s;
 -moz-transition: all 1s ease 0s;
 -o-transition: all 1s ease 0s;
 -ms-transition: all 1s ease 0s;
 transition: all 1s ease 0s;
 cursor:pointer;
}

.social ul li:hover a img {
	 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
}


}

 @media only screen and (max-width:1200px){
	 
	 
	 /* 
** ALL CREDIT GOES TO 
** Craig Buckler
** http://www.sitepoint.com/css3-starwars-scrolling-text/
**
** Blame me for the music via embedded video bit
*/


.desk1 {
	display:none;
}
.desk2 {
	
}
#pop {
	display:none;
}
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* { padding: 0; margin: 0; }

body, html
{
  width: 100%;
  height: 100%;
  font-family: "Droid Sans", arial, verdana, sans-serif;
	font-weight: 700;
	color: #ff6;
	background-color: #000;
	/*overflow: hidden;*/
	overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #61402D;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #61402D;
}

p#start
{
	position: relative;
	width: 16em;
	font-size: 200%;
	font-weight: 400;
	margin: 20% auto;
	color: #4ee;
	opacity: 0;
	z-index: 1;
	-webkit-animation: intro 2s ease-out;
	-moz-animation: intro 2s ease-out;
	-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;
	animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

h1
{
	position: absolute;
	width: 2.6em;
	left: 50%;
	top: 25%;
	font-size: 10em;
	text-align: center;
	margin-left: -1.3em;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color: #000;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index: 1;
	-webkit-animation: logo 5s ease-out 2.5s;
	-moz-animation: logo 5s ease-out 2.5s;
	-ms-animation: logo 5s ease-out 2.5s;
	-o-animation: logo 5s ease-out 2.5s;
	animation: logo 5s ease-out 2.5s;
}

h1 sub
{
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
}

@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	text-align: justify;
	/*overflow: hidden;*/
	
	
	/*-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(30deg);
	-moz-transform: perspective(300px) rotateX(30deg);
	-ms-transform: perspective(300px) rotateX(30deg);
	-o-transform: perspective(300px) rotateX(30deg);
	transform: perspective(300px) rotateX(30deg);*/
	
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(230px) rotateX(22deg);
	-moz-transform: perspective(230px) rotateX(22deg);
	-ms-transform: perspective(230px) rotateX(22deg);
	-o-transform: perspective(230px) rotateX(22deg);
	transform: perspective(230px) rotateX(22deg);
}

#titles:after
{
	position: absolute;
	content: ' ';
	/*left: 0;*/    left: -156px;
	right: 0;
	/*top: 0;*/ /*top:-62%;*/ top:-100%;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
	    width: 164%;
}

#titles p
{
	text-align: justify;
	margin: 0.8em 0;
}

#titles p.center
{
	text-align: center;
}

#titles a
{
	color: #ff6;
	text-decoration: underline;
}

/*#titles a:after{
	 content: attr(data-title);
	 
    font-size: 10px;
    color: #fff;
    line-height: 0px;
    text-decoration: none;
    border: none;
    position: relative;
    top: -40px;
    left: 0px;
	text-transform:lowercase;
}*/
#titles a p {
	font-size:10px;
	color:#093;
	background:#666;
	display:none;}
	
 #gal1div {
		color:#fff;
	}
	

#titlecontent
{
	position: absolute;
	/*top: 120%;*/ /*top:-60%;*/
	/*-webkit-animation: scroll 100s linear 4s infinite;
	-moz-animation: scroll 100s linear 4s infinite;
	-ms-animation: scroll 100s linear 4s infinite;
	-o-animation: scroll 100s linear 4s infinite;
	animation: scroll 100s linear 4s infinite;*/
	/*-webkit-animation: scroll 100s linear 4s ;
	-moz-animation: scroll 100s linear 4s ;
	-ms-animation: scroll 100s linear 4s ;
	-o-animation: scroll 100s linear 4s ;
	animation: scroll 100s linear 4s ;*/
	
	transition: all 1.5s ease;
	-webkit-transition:all 1.5s ease;
       -moz-transition:all 1.5s ease;
        -ms-transition:all 1.5s ease;
         -o-transition:all 1.5s ease;
		 
           

}

/* animation */
@-webkit-keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}

@-moz-keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}

@-ms-keyframes scroll {
	0% { top: 120%; }
	100% { top: -190%; }
}

@-o-keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}

@keyframes scroll {
	0% { top: -190%; }
	100% { top: 120%; }
}



.gal {
	/*min-height:210px;*/
	margin-bottom:15px;
	float:left;
	
	/*webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(772px) rotateX(-47deg);
    -moz-transform: perspective(772px) rotateX(-47deg);
    -ms-transform: perspective(772px) rotateX(-47deg);
    -o-transform: perspective(772px) rotateX(-47deg);
    transform: perspective(772px) rotateX(-47deg);*/
	
	/* margin-top:50px;*/
}

.gal ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
}
.gal ul li {
	float:left;
	width:14.28571428571429%;
	text-align:center;
	   /* transform: rotateX(0deg);*/
}
.gal ul li a img {
	width:80%;
	margin:auto auto;
	
	/*webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(772px) rotateX(-47deg);
    -moz-transform: perspective(772px) rotateX(-47deg);
    -ms-transform: perspective(772px) rotateX(-47deg);
    -o-transform: perspective(772px) rotateX(-47deg);
    transform: perspective(772px) rotateX(-47deg);*/
	
	
	
}



/*.gal ul li.l1 a img {
	
	    -webkit-transform-origin: 228% 100%;
    -moz-transform-origin: 228% 100%;
    -ms-transform-origin: 228% 100%;
    -o-transform-origin:228% 100%;
    transform-origin: 228% 100%;
    -webkit-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -moz-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -ms-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -o-transform:perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    transform:perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
}
.gal ul li.l2 a img {
	
	   -webkit-transform-origin: 103% 100%;
    -moz-transform-origin: 103% 100%;
    -ms-transform-origin: 103% 100%;
    -o-transform-origin:103% 100%;
    transform-origin: 103% 100%;
    -webkit-transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -moz-transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -ms-transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -o-transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    transform:  perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
}
.gal ul li.l3 a img {
   
	   -webkit-transform-origin: -6% 100%;
    -moz-transform-origin: -6% 100%;
    -ms-transform-origin: -6% 100%;
    -o-transform-origin:-6% 100%;
    transform-origin: -6% 100%;
    -webkit-transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -moz-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -ms-transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -o-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
}
.gal ul li.l4 a img {

	   -webkit-transform-origin: -105% 120%;
    -moz-transform-origin: -105% 120%;
    -ms-transform-origin: -105% 120%;
    -o-transform-origin:-105% 120%;
    transform-origin:-105% 120%;
    -webkit-transform: perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
    -moz-transform: perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
    -ms-transform:perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
    -o-transform:perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
      transform: perspective(171px) rotateX(-18deg) skewY(0deg) skewX(14deg);
}

.gal ul li.l5 a img {
	      -webkit-transform-origin:-197% 109%;
    -moz-transform-origin:-197% 109%;
    -ms-transform-origin: -197% 109%;
    -o-transform-origin: -197% 109%;
    transform-origin:-197% 109%;
    -webkit-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -moz-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -ms-transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    -o-transform: perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
    transform:perspective(171px) rotateX(-21deg) skewY(0deg) skewX(17deg);
}

.gal ul li.l6 a img {
	     -webkit-transform-origin:-263% 100%;
    -moz-transform-origin: -263% 100%;
    -ms-transform-origin: -263% 100%;
    -o-transform-origin:  -263% 100%;
    transform-origin: -263% 100%;
    -webkit-transform:perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -moz-transform:perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -ms-transform:perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    -o-transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
    transform: perspective(171px) rotateX(-24deg) skewY(0deg) skewX(17deg);
}
.gal ul li.l7 a img {
 -webkit-transform-origin: -412% 100%;
    -moz-transform-origin: -412% 100%;
    -ms-transform-origin: -412% 100%;
    -o-transform-origin: -412% 100%;
    transform-origin: -412% 100%;
    -webkit-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -moz-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -ms-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    -o-transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
    transform: perspective(171px) rotateX(-22deg) skewY(0deg) skewX(17deg);
}*/












footer {
    margin: 50px 0;
}


/*.men1:before {
	    content: 'Menu';
    position: relative;
 
    color: rgba(238, 238, 238, 0.37);
    font-size: 13px;
}*/


@media only screen and (min-width:970px){
	
	/*.men1:before {
	 
    top: 15px;
    bottom: 15px;
   
}*/


	.men1 a span {
	    padding: 3px 15px 32px 15px;
    height: 50px;
	}
	.men1 a span:hover {
	    padding: 3px 15px 32px 15px;
    height: 50px;

	}
}
@media only screen and (max-width:970px){
	/*.men1:before {
	 
    top: -2px;
    bottom: 15px;
   
}*/
	.men1 a span {
	      padding: 2px 2px 2px 6px;
    height: auto;
	}
	.men1 a span:hover {
	       padding: 2px 2px 2px 6px;
    height: auto;

	}
}


.men1 {
	text-align:center;
}
.men1 a{
	      margin-right: 5px;
    text-decoration: none;
   /* color: #eee;*/color: rgba(9, 143, 207, 0.54);
    font-size: 13px;
    font-weight: 400;
	margin-left:5px;
}
.men1 a span {
	    /*padding: 3px 15px 32px 15px;
		height: 50px;*/
    background: #080808;
	
    
    border: solid 1px rgba(238, 238, 238, 0.3);
    border-bottom: none;
    /* border-top: none; */
    border-top: none;
	 -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.men1 a span:hover {
	   /* padding: 3px 15px 32px 15px;*/
    background: #eee;
   /* height: 50px;*/
    border: solid 1px rgba(238, 238, 238, 0.3);
    border-bottom: none;
     border-top: none; 
   
}



.men1 a#so1 span {
    background: url(../img/fb.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so2 span {
    background: url(../img/tw.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so3 span {
    background: url(../img/in.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so4 span {
    background: url(../img/lk.png) no-repeat center;
    background-size: 80% auto;
}






.men1 a font{
	width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	/*left: 50%;*/
	margin-left: -64px;
	font-family: 'Alegreya SC', Georgia, serif;
	font-weight: 400;	
	font-style: italic;
	font-size: 14px;
	    color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid #fff;
	/*background: rgba(255,255,255,0.3);*/    background: rgba(107, 98, 98, 0.94);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
	pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.men1 a font:before,
.men1 a font:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0,0,0,0.1);
}
.men1 a font:after{
	bottom: -14px;
	margin-left: -10px;
	border-top: 10px solid #fff;
}
.men1 a:hover font{
	opacity: 0.9;
	bottom: 70px;
}




.over {
	position:absolute;
	
background:#000 ;
	height:100%;
	width:100%;
	z-index:10000000000;
	
	

	transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}
.over .col-xs-4 {
	/*position:relative;*/ position:absolute;
	height:100%;
	padding:0;
	}
.over img {
	/*width:100%;*/
	margin:auto auto;
	position:relative;
	margin-top:30%;
}
.over .a_f {
	
}
.over .a_f img {
	opacity: 0.6;
    z-index: -1;
    position: relative;
    max-width:100%;
    /* margin-top: 144px; */
    left: -30%;
    transform: translateX(-90px) translateY(21px) translateZ(0px) rotateX(0deg) rotateY(0deg);
	
}
.over .a_s {
	overflow:hidden;
	/*padding-top:100px;
	padding-bottom:100px;*/
	width:100%;
	
}

.over .a_s img {
	/*position: absolute;*/
    float: left;
   /* width: 125%;*/
  /* max-width:100%;*/
   margin:0;
	
}
.over .a_s  span {
	    position: absolute;
    height: 342px;
    width: 40px;
    z-index: 111;
  background: rgba(21, 9, 9, 0.45);
    margin-top: 32%;
    padding-top: 133px;
	text-align: center;
	cursor:pointer;
	
	transition: all 1s ease;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
}
.over .a_s  span font {
color: #fff;
    font-size: 31px;
}
.over .a_s  span#pre {
}
.over .a_s  span#nex {
	    right: 0;
}
.over .a_s table {
	margin:0;
	padding:0;
	list-style:none;
	margin-top:32%;
	/*width:1800px;*/
	
	transition: all 1s ease;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
	position:relative;
	
	
}
/*.over .a_s:hover table {
	transform: translateX(-1365px);
}*/
.over .a_s table td {
	/*width:450px;*/ min-width:450px;
	height:342px;
	overflow:hidden;
	max-width:450px;
	
}

.over .a_s table td img {
	min-width:455px;
	max-width:455px;
	height:342px;
	
}
.over .a_s table td div {
	    padding: 10px 10px 10px 10px;
    background: #fff;
   height: 342px;
   overflow-y:auto;
   min-width:450px;
}
.over .a_s table td div h3 {
	    color: #444;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    border-bottom: solid 1px #eee;
    line-height: 34px;
}
.over .a_s table td div p {
	    color: #444;
    font-size: 12px;
    font-weight: 300;
    line-height: 23px;
}


.over .a_t {
	
}
.over .a_t img {
	opacity: 0.6;
    z-index: -1;
    position: relative;
    max-width:100%;
    /* margin-top: 144px; */
    right: -30%;
    transform: translateX(90px) translateY(21px) translateZ(0px) rotateX(0deg) rotateY(0deg);
	
}






.ov {
	position:absolute;
	    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.1;
	overflow:hidden;
}

.ov ul {
	margin:0;
	padding:0;
	list-style:none;
	    margin-top: 10%;
		width:2380px;
		}
.ov ul li {
	    float: left;
    width: 340px;
    padding: 0px 40px 0px 40px;
	
}
.ov ul li img {
	max-width:100%;
}






.men1 button {
	    background: none;
    border: none;
    position: relative;
    left: 0;
	    padding: 0;
   
	
}
.men1 button a {
	    color: rgba(238, 238, 238, 0.58);
	text-decoration:none;
}

@media only screen and (min-width:970px){
	.men1 button {
		 top: 12px;
	}
}
@media only screen and (max-width:970px){
	.men1 button {
		 top: 0px;
	}
}


@media only screen and (max-width:1165px){
	.over .a_f img,.over .a_t img {
		display:none;
	}
}
@media only screen and (max-width:780px){
	.over .a_f ,.over .a_t  {
		display:none;
	}
	.hed .col-xs-9 .col-xs-12 .ark1 {
		    margin-left: -65px;
	}
	
}

@media only screen and (max-width:500px){
	.shelf {
		max-height:230px;
	}
	.content {
		max-height:230px;
	}
	.content img {
		max-height:230px;
	}
}




.pro {
	    margin-left: 25px;
    margin-top: 12px;
    float: left;
	margin-bottom:15px;
}
.pro h3 {
	display: inline-block;
    color: rgba(255, 254, 248, 0.41);
    font-weight: 600;
    float: left;
        margin: 0px 10px 0px 0px;
}

.pro span {
	float: left;
    margin-right: 10px;
    font-size: 19px;
    font-weight: 400;
    color: #555;
}
.pro span:after {
	content:',';
}








/**********************************/

.over .a_s table {
	margin:0;
	padding:0;
	list-style:none;
	margin-top:32%;
	/*width:1800px;*/
	
	transition: all 1s ease;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
	position:relative;
	
	
}
/*.over .a_s:hover table {
	transform: translateX(-1365px);
}*/
.over .a_s table td {
	/*width:450px;*/ min-width:450px;
	height:342px;
	overflow:hidden;
	max-width:450px;
	
}

.over .a_s table td img {
	min-width:455px;
	max-width:455px;
	height:342px;
	
}


#makeMeScrollable
		{
			width:100%;
		/*	height: 330px;*/
			position: relative;
			
			margin:0;
	padding:0;
	list-style:none;
	margin-top:32%;
	
	min-width:450px;
	height:342px;
	overflow:hidden;
	max-width:450px;
		}
		
		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		#makeMeScrollable div.scrollableArea img  {
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			
			min-width:455px;
	max-width:455px;
	height:342px;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}


h5#alt {
    position: relative;
    z-index: 100;
    margin-top: -49px;
    bottom: 0;
    font-size: 15px;
    background: #000;
    color: #444;
    padding: 5px 5px 5px 5px;
    /*min-height: 40px;*/
	    max-width: 450px;
    margin: auto auto;
}





.shelf { 
width:100%;
		/*	height: 330px;*/
			position: relative;
	padding:0;
	list-style:none;
	margin-top:100px;
	
	/*min-width:450px;*/
	height:342px;
	overflow:hidden;
	max-width:450px; 
	width:100%; margin:auto auto;
	margin-top:25px;

/*height: 200px; width: 100%; background-color: #c7c7c7; margin-bottom: 15px; position: relative;*/}
.inside { position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px; white-space: nowrap; font-size: 0; line-height: 0; overflow-x: scroll;    overflow-y: hidden;}



.scroll-arrow { width: 30px; height: 100%;     background-color: rgba(241, 241, 241, 0.62);
 display: block; position: absolute; bottom: 0; z-index: 99;}
.left { left: 0;     background: url(../img/arol.png) no-repeat center rgba(255, 255, 255, 0.69);
    background-size: 15px auto;}
.right { right: 0;    background: url(../img/aror.png) no-repeat center rgba(255, 255, 255, 0.69);
    background-size: 15px auto;}

.content { display: inline-block; width: 450px; height: 342px; background-color: #797979; /*margin-right: 10px;*/}
.content img {
	height:342px;
	min-width:450px;
}



.inside::-webkit-scrollbar {
    width: 6px;
}
 
.inside::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	    background: #fff;
}
 
.inside::-webkit-scrollbar-thumb {
      background-color: #ccc;
  outline: 1px solid slategrey;
}










.gal ul li a font{
	width: 175px;
	height: auto;
	line-height: 20px;
	padding: 2px;
	/*left: 50%;*/
	margin-left: -64px;
	    font-family: sans-serif;
	font-weight: 300;	
	font-style: italic;
	font-size: 13px;
	    color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid #fff;
	/*background: rgba(255,255,255,0.3);*/    background: rgba(107, 98, 98, 0.94);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
	pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gal ul li a font:before,
.gal ul li  a font:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.gal ul li a font:after{
	bottom: -14px;
	margin-left: -10px;
	/*border-top: 1px solid #fff;*/
}
.gal ul li a font{
	/*opacity: 0.9;
	bottom: 70px;*/
	    opacity: 0.9;
    bottom: 108px;
    margin-left: -137px;
}
.gal ul li a font{	
	    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    -moz-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    -ms-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    -o-transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
    transform: perspective(0px) rotateX(0deg) skewY(0deg) skewX(0deg);
	
}



/*.gal ul li a:before {
	    background: #333;
    background: rgb(212, 204, 203);
    bottom: 0px;
    color: #000;
     content: attr(title); 
    
    left: 0;
    padding: 5px 15px;
    position: absolute;
    z-index: 100;
    width: 200px;
    height: auto;
    font-size: 12px;
    font-weight: 300;
}*/



.pop {
	    max-width: 350px;
    background: #333;
	/*margin-left:-350px;*/
    padding: 10px 10px 10px 10px;
	    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	
}

.pop p {
	    color: #777;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 300;
    line-height: 20px;
    border-bottom: solid 1px #444;
	   transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
}
.pop h5 {
    color: #777;
    font-size: 17px;
    font-family: sans-serif;
    font-weight: 300;
    line-height: 20px;
}



/*****************************/


.social {
	    position: fixed;
    z-index: 10000;
    right: 0;
    top: 22%;
}
.social ul {
	margin:0;
	padding:0;
	list-style:none;
	float:none;
}
.social ul li {
	 transition: 0.3s ease;
  background: #fff;
  color: #ffffff;
  position:relative;
 
  text-decoration: none;
 
  padding: 3px 3px 3px 3px;
  margin-bottom:2px;
      border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.social ul li a span {
	    transition: 0.3s ease;
    position: absolute;
    right: -241px;
    background: rgba(0, 0, 0, 0.65);
    padding: 10px 10px 3px 10px;
    line-height: 20px;
    font-size: 14px;
    height: 100%;
    margin-top: -3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    color: rgba(238, 238, 238, 0.62);
}
.social ul li:hover a span {
right: 40px;
	
}
.social ul li#so2:hover {

}
.social ul li#so3:hover {

}
.social ul li#so4:hover {
}
.social ul li a {
	 transition: 0.3s ease;
	 text-decoration:none;
	
}
.social ul li a img {
	width:35px;
	 -webkit-transition: all 1s ease 0s;
 -moz-transition: all 1s ease 0s;
 -o-transition: all 1s ease 0s;
 -ms-transition: all 1s ease 0s;
 transition: all 1s ease 0s;
 cursor:pointer;
}

.social ul li:hover a img {
	 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
}







}





@media only screen and (max-width:1100px){
	.men1 a span,.men1 a span:hover {
   /* padding: 2px 2px 2px 6px;*/padding: 2px 2px 22px 10px;
    height: auto;
}
}

@media only screen and (min-width:1100px){
.men1 a span,.men1 a span:hover {
  padding: 3px 15px 32px 15px;
		height: 50px;

}
}

.men1 {
	text-align:center;
}
.men1 a{
	      margin-right: 5px;
    text-decoration: none;
   /* color: #eee;*/color: rgba(9, 143, 207, 0.54);
    font-size: 13px;
    font-weight: 400;
	margin-left:5px;
}
.men1 a span {
	  /*  padding: 3px 15px 32px 15px;
		height: 50px;*/
    background: #080808;
	
    
    border: solid 1px rgba(238, 238, 238, 0.3);
    border-bottom: none;
    /* border-top: none; */
    border-top: none;
	 -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.men1 a span:hover {
	  /*  padding: 3px 15px 32px 15px;*/
    background: #eee;
   /* height: 50px;*/
    border: solid 1px rgba(238, 238, 238, 0.3);
    border-bottom: none;
     border-top: none; 
   
}

.men1 a#so1 span {
    background: url(../img/fb.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so2 span {
    background: url(../img/tw.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so3 span {
    background: url(../img/in.png) no-repeat center;
    background-size: 80% auto;
}
.men1 a#so4 span {
    background: url(../img/lk.png) no-repeat center;
    background-size: 80% auto;
}






.men1 a font{
	width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	/*left: 50%;*/
	margin-left: -64px;
	font-family: 'Alegreya SC', Georgia, serif;
	font-weight: 400;	
	font-style: italic;
	font-size: 14px;
	    color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid #fff;
	/*background: rgba(255,255,255,0.3);*/    background: rgba(107, 98, 98, 0.94);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
	pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.men1 a font:before,
.men1 a font:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0,0,0,0.1);
}
.men1 a font:after{
	bottom: -14px;
	margin-left: -10px;
	border-top: 10px solid #fff;
}
.men1 a:hover font{
	opacity: 0.9;
	bottom: 70px;
}




.men1 button {
	    background: none;
    border: none;
    position: relative;
    left: 0;
	    padding: 0;
   
	
}
.men1 button a {
	    color: rgba(238, 238, 238, 0.58);
	text-decoration:none;
}





@media (min-width:970px){
	.men1 button {
		 top: 12px;
	}
}
@media (max-width:970px){
	.men1 button {
		 top: 0px;
	}
}


.gal li a span {
	display:none;
}






.scroll-arrow{
	display:none;
}
.inside{
}
.inside::-webkit-scrollbar {
    width: 1em;
}
 
.inside::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.inside::-webkit-scrollbar-thumb {
    background-color: #1460bb;
  outline: 1px solid slategrey;
}



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