/* -< font >- */

@font-face {
	font-family:"Adobe Devanagari";
	src:url(fonts/AdobeDevanagari-Regular.otf), url(fonts/AdobeDevanagari-Bold.otf), url(fonts/AdobeDevanagari-Italic.otf), url(fonts/AdobeDevanagari-BoldItalic.otf);}
	
.shadowed {
    -webkit-filter: drop-shadow(8px 8px 7px rgba(0,0,0,0.4));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";}

body { 
  background-image:url(images/all/bg1.png);
  overflow-x: hidden; 
  padding:0px; }
  
/* -< CHARACTERS PAGE >- */

#charLeft {
  margin-left:35px;
  margin-right:35px;
  display:block;
  position:relative;
  width:240px;
  height:540px;
  background-color:rgba(91,49,30,0.75);
  -webkit-transform:skewX(-10deg);
  transform:skewX(-10deg);
  float:left;}

#charRightContain {
  display:block;
  position:relative;
  width:500px;
  height:700px;
  background-color:rgba(53,74,18,0.75);
  -webkit-transform:skewX(-10deg);
  transform:skewX(-10deg);
  padding-left:15px;
  top:50px;
  float:left;}
 

#charRight1 { /* same as above */
  display:block;
  position:relative;
  width:240px;
  float:left;}
  
 #charRight2 { /* same as above */
  display:block;
  position:relative;
  width:240px;
  float:left;}

.chargrpName { /* see if we can use this style elsewhere and consolidate */
  position:relative;
  padding-left:90px;
  padding-top:10px;
  width:100%;
  -webkit-transform:skewX(10deg);
  transform:skewX(10deg);}

.char { /* ULmenu class */
  position:relative;
  left:-30px;
  display:inline-block;
  list-style-type:none;}


.char li { /* list item class css for above */
  display:list-item;
  position:relative;}

.char li img { 
  max-width:100%;
  max-height:100%;
  -webkit-transform:skewX(10deg);
  transform:skewX(10deg);
}


/* -< HOME PAGE >- */

#containmid {
  position:relative;
  text-align:center; 
  width:1080px;
  margin-left:auto; 
  margin-right:auto;}

#biglogo { /* looking good */
  z-index:50;
  position:relative;
  float:left;
  top:50px;
  left:10px;
  display:table-cell;
  height:auto;}

#biglogo img {
  width:100%;} 

.menu { /* nav menu */
  z-index:99;
  display: inline-block;
    vertical-align: middle;
  -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position:relative;
  max-width:220px;
  float:right;
  height:auto;}

a {
  text-decoration:none;
  color:#fff;}

ul li.menu, .closebutton, .closebuttonb {
  top:50px;
  position:relative;
  float:right;
  background-color:#5b311e;
  font-family:"Adobe Devanagari";
  font-style:oblique;
  font-size:14px;
  color:#fff;
  text-align:center;
  padding:5px;
  display:inline-block;
  animation-duration:1s;
  margin-bottom:10px;
  box-shadow: 5px 5px 5px rgba(78,22,14,0.25);
  -webkit-transform:skewX(-10deg);
  transform:skewX(-10deg);}
  
ul li.menu::first-letter {
	font-size:17px;
}

li.menu:active {
  background-color:rgba(231,26,58,1.00);}

li.menu:hover {
  -webkit-animation-name: hvr-wobble-horizontal;
     animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
     animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
     animation-iteration-count: 1;}

.imageonemain1 { /* carousel div - currently not infinite. needs to be infinite. */
  z-index:10;
  position:absolute;
  overflow:hidden;
  height:450px;
  top:350px;
  animation: moveSlideshow1 18s linear infinite;
  -moz-animation: moveSlideshow1 18s linear infinite;
  -webkit-animation: moveSlideshow1 18s linear infinite;
}

@-webkit-keyframes moveSlideshow1 {
    0%   { 
        -webkit-transform: translateX(300%);  
    }    
    100% { 
        -webkit-transform: translateX(-500%);  
    }
}
@-moz-keyframes moveSlideshow1 {
    0%   { 
        -moz-transform:    translateX(300%); 
    }    
    100% { 
        -moz-transform:    translateX(-500%); 
    }
}
@keyframes moveSlideshow1 {
    0%   { 
        transform:    translateX(300%); 
    }    
    100% { 
        transform:    translateX(-500%); 
    }
}

.imageonemain2 { /* carousel div - currently not infinite. needs to be infinite. */
  z-index:10;
  position:absolute;
  overflow:hidden;
  height:450px;
  top:280px;
  animation: moveSlideshow2 36s linear infinite;
  -moz-animation: moveSlideshow2 36s linear infinite;
  -webkit-animation: moveSlideshow2 36s linear infinite;
}

@-webkit-keyframes moveSlideshow2 {
    0%   { 
        -webkit-transform: translateX(300%);  
    }    
    100% { 
        -webkit-transform: translateX(-450%);  
    }
}
@-moz-keyframes moveSlideshow2 {
    0%   { 
        -moz-transform:    translateX(300%); 
    }    
    100% { 
        -moz-transform:    translateX(-450%); 
    }
}
@keyframes moveSlideshow2 {
    0%   { 
        transform:    translateX(300%); 
    }    
    100% { 
        transform:    translateX(-450%); 
    }
}

.imageonemain3 { /* carousel div - currently not infinite. needs to be infinite. */
  z-index:10;
  position:absolute;
  overflow:hidden;
  height:450px;
  top:250px;
  animation: moveSlideshow3 15s linear infinite;
  -moz-animation: moveSlideshow3 15s linear infinite;
  -webkit-animation: moveSlideshow3 15s linear infinite;
}

@-webkit-keyframes moveSlideshow3 {
    0%   { 
        -webkit-transform: translateX(350%);  
    }    
    100% { 
        -webkit-transform: translateX(-400%);  
    }
}
@-moz-keyframes moveSlideshow3 {
    0%   { 
        -moz-transform:    translateX(350%); 
    }    
    100% { 
        -moz-transform:    translateX(-400%); 
    }
}
@keyframes moveSlideshow3 {
    0%   { 
        transform:    translateX(350%); 
    }    
    100% { 
        transform:    translateX(-400%); 
    }
}

.imageonemain4 { /* carousel div - currently not infinite. needs to be infinite. */
  z-index:10;
  position:absolute;
  overflow:hidden;
  height:450px;
  top:230px;
  animation: moveSlideshow4 21s linear infinite;
  -moz-animation: moveSlideshow4 21s linear infinite;
  -webkit-animation: moveSlideshow4 21s linear infinite;
}

@-webkit-keyframes moveSlideshow4 {
    0%   { 
        -webkit-transform: translateX(400%);  
    }    
    100% { 
        -webkit-transform: translateX(-350%);  
    }
}
@-moz-keyframes moveSlideshow4 {
    0%   { 
        -moz-transform:    translateX(400%); 
    }    
    100% { 
        -moz-transform:    translateX(-350%); 
    }
}
@keyframes moveSlideshow4 {
    0%   { 
        transform:    translateX(400%); 
    }    
    100% { 
        transform:    translateX(-350%); 
    }
}

.imageonemain5 { /* carousel div - currently not infinite. needs to be infinite. */
  z-index:10;
  position:absolute;
  overflow:hidden;
  height:450px;
  top:190px;
  animation: moveSlideshow5 16s linear infinite;
  -moz-animation: moveSlideshow5 16s linear infinite;
  -webkit-animation: moveSlideshow5 16s linear infinite;
}

@-webkit-keyframes moveSlideshow5 {
    0%   { 
        -webkit-transform: translateX(450%);  
    }    
    100% { 
        -webkit-transform: translateX(-300%);  
    }
}
@-moz-keyframes moveSlideshow5 {
    0%   { 
        -moz-transform:    translateX(450%); 
    }    
    100% { 
        -moz-transform:    translateX(-300%); 
    }
}
@keyframes moveSlideshow5 {
    0%   { 
        transform:    translateX(450%); 
    }    
    100% { 
        transform:    translateX(-300%); 
    }
}


.imageonemain6 { /* carousel div - currently not infinite. needs to be infinite. */
  z-index:10;
  position:absolute;
  overflow:hidden;
  height:450px;
  top:370px;
  animation: moveSlideshow6 15s linear infinite;
  -moz-animation: moveSlideshow6 15s linear infinite;
  -webkit-animation: moveSlideshow6 15s linear infinite;
}

@-webkit-keyframes moveSlideshow6 {
    0%   { 
        -webkit-transform: translateX(500%);  
    }    
    100% { 
        -webkit-transform: translateX(-250%);  
    }
}
@-moz-keyframes moveSlideshow6 {
    0%   { 
        -moz-transform:    translateX(500%); 
    }    
    100% { 
        -moz-transform:    translateX(-250%); 
    }
}

@keyframes moveSlideshow6 {
    0%   { 
        transform:    translateX(500%); 
    }    
    100% { 
        transform:    translateX(-250%); 
    }
}

.imageonemain7 { /* carousel div - currently not infinite. needs to be infinite. */
  z-index:10;
  position:absolute;
  overflow:hidden;
  height:450px;
  top:370px;
  animation: moveSlideshow7 34s linear infinite;
  -moz-animation: moveSlideshow7 34s linear infinite;
  -webkit-animation: moveSlideshow7 34s linear infinite;
}

@-webkit-keyframes moveSlideshow7 {
    0%   { 
        -webkit-transform: translateX(550%);  
    }    
    100% { 
        -webkit-transform: translateX(-200%);  
    }
}
@-moz-keyframes moveSlideshow7 {
    0%   { 
        -moz-transform:    translateX(550%); 
    }    
    100% { 
        -moz-transform:    translateX(-200%); 
    }
}
@keyframes moveSlideshow7 {
    0%   { 
        transform:    translateX(550%); 
    }    
    100% { 
        transform:    translateX(-200%); 
    }
}

#logoSMALL {position:relative; z-index:100; width:204px; height:60px; float:left;}

#mainContain {position:relative; width:100%; margin:0;}

#scrollImages {width:430px; position:relative; display:block; z-index:30; float:left;}

.scrollImages {padding-bottom:30px; position:relative;}

#featuresART, #kickingbuttimages {width:500px; position:relative; display:block; z-index:30; float:left; top:50px; left:0px;}

#story, #features, #kickingbutt, #dontgetit, #bananasplit, #multimedia {width:380px; position:relative; top:50px; padding-left:40px; z-index:40;}

.story, .features, .kickingbutt, .dontgetit, .bananasplit, .multimedia {font-size:16px; font-family:"Adobe Devanagari"; position:relative; color:rgba(255,255,255,1.00); z-index:20; text-shadow:2px 2px 2px rgba(92,31,11,0.80);}

.storyHEADER, .featuresHEADER, .kickingbuttHEADER, .dontgetitHEADER , .bananasplitHEADER, .multimediaHEADER {font-family:"Adobe Devanagari"; position:relative;color:#fff; z-index:36;}

#storyBG, #featuresBG, #kickingbuttBG, #dontgetitBG, #bananasplitBG, #multimediaBG {background-color:rgba(91,49,30,0.75); transform:skewX(-10deg); height:800px; position:absolute; z-index:1; display:block; width:560px; left:-40px; margin:0;}
/*
#storyBG, #featuresBG, #kickingbuttBG, #dontgetitBG, #bananasplitBG, #multimediaBG {background-color:rgba(91,49,30,0.75); transform:skewX(-10deg); -webkit-transform:skewX(-10deg);height:auto; position:relative; z-index:1; display:block; width:800px; left:70px;} */

/* CSS brought in from dossiertemplate */

.characterBIGimg {position:relative; float:left; width:350px;z-index:10;}

.characterBIGimg img {position:relative; text-align:center; z-index:15;}

.charName {position:relative; color:rgba(223,164,124,1.00); font-family:"Adobe Devanagari"; font-size:90px; padding-left:120px;-webkit-text-stroke: 1px #C31A34; text-shadow:10px 10px 10px rgba(82,28,10,0.86); z-index:50; top:-10px; transform:skewX(-20deg);}

#descripcontainer { width:540px; position:relative; float:left; height:1000px; top:100px; }

#descripBG {background-color:rgba(90,50,37,0.80); position:absolute; display:inline-block; width:540px; height:85%; transform:skewX(-10deg); -webkit-transform:skewX(-10deg); z-index:1; left:-50px;}

#weaponsBG {background-color:rgba(90,50,37,0.80); position:absolute; display:inline-block; width:700px; height:250px; margin-top:30px; transform:skewX(-10deg); -webkit-transform:skewX(-10deg); z-index:8;}

#charDescrip {position:absolute; z-index:100; padding-left:50px; top:100px; width:400px;}

.charDescrip {font-family:"Adobe Devanagari"; font-size:16px; color:#fff; text-shadow:2px 2px 4px rgba(35,7,3,0.94); text-align:center; margin:auto;}

#Weapons {position:absolute; z-index:50; padding-top:35px;}
/* CSS brought in from dossiertemplate */

.character-info {
  display: none;
}

#screenshots-section, #wallpapers-section {
  display: none;
  padding-top: 150px;
  margin-left:66px;
  width: 60%;
  height: auto;
  z-index: 80;
  text-align:center;
  position:relative;
}

.single-item img {
  width: 100%;
  height: 100%;
}

.single-item {
  z-index: 20;
}

.img-size-txt {
  color: white;
  font-size: 20px;
}

.single-item div {
  text-align: center;
}

#story-menu, #character-menu, .character-info, #features-menu, #kickingbutt-menu, #dontgetit-menu, #bananasplit-menu , #multimedia-menu {
  display: none; position:relative; width:100%x; margin:0;
}

.nameonHover {
	font-family:"Adobe Devanagari";
	color:#fff;
	font-size:17px;
	transform:skewX(-10deg);
	-webkit-transform:skewX(-10deg);
	text-shadow:
   -2px -2px 0 #E71A3A,  
    2px -2px 0 #E71A3A,
    -2px 2px 0 #E71A3A,
     2px 2px 0 #E71A3A;
  display: none;
  position: relative;
  float: right;
  clear: right;
  margin-top: -50px;
  z-index: 1000;
}

.nameonHover::first-letter {
	font-size:22px;
}

#main {
	width:600px;
	}