@font-face{font-family:'flamabold';src:url('../fonts/flama/flama-bold-webfont.eot');src:url('../fonts/flama/flama-bold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/flama/flama-bold-webfont.woff') format('woff'),url('../fonts/flama/flama-bold-webfont.ttf') format('truetype'),url('../fonts/flama/flama-bold-webfont.svg#@font-family') format('svg');font-weight:normal;font-style:normal}
@font-face{font-family:'flamamedium';src:url('../fonts/flama/flama-medium-webfont.eot');src:url('../fonts/flama/flama-medium-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/flama/flama-medium-webfont.woff') format('woff'),url('../fonts/flama/flama-medium-webfont.ttf') format('truetype'),url('../fonts/flama/flama-medium-webfont.svg#@font-family') format('svg');font-weight:normal;font-style:normal}
@font-face{font-family:'flamabook';src:url('../fonts/flama/flama-book-webfont.eot');src:url('../fonts/flama/flama-book-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/flama/flama-book-webfont.woff') format('woff'),url('../fonts/flama/flama-book-webfont.ttf') format('truetype'),url('../fonts/flama/flama-book-webfont.svg#@font-family') format('svg');font-weight:normal;font-style:normal}
@font-face{font-family:'flamalight';src:url('../fonts/flama/flama-light-webfont.eot');src:url('../fonts/flama/flama-light-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/flama/flama-light-webfont.woff') format('woff'),url('../fonts/flama/flama-light-webfont.ttf') format('truetype'),url('../fonts/flama/flama-light-webfont.svg#@font-family') format('svg');font-weight:normal;font-style:normal}

body {
	background-color: #202227;
}

a {
	color: #fff;
}

h3 {
	text-transform: uppercase;
	font-size: 14px;
	color: #000;
	opacity: 0.9;
	margin-top: 25px;
	font-family: 'flamamedium';
	line-height: 20px;
}

.title img {
	padding-top: 12px;
	padding-right: 40px;
}

#default {
	padding-top: 20px;
	text-align: center;
}

.selected {
	cursor: default !important;
}

.full-bg {
	height: 100vh;
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: -1;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	display: none;
}

.bg-selecionado{
	display: block
}

.title {
	font-family: 'flamabook';
	font-size: 28px;
	margin-left: 40px;
	text-transform: uppercase;
	opacity: 0.6;
}

#header {
	width: 100%;
	height: 56px;
	background-color: #35373b;
	background-color: #eaeaea;
	-webkit-box-shadow: 0px 10px 28px -5px rgba(0,0,0,0.32);
	-moz-box-shadow: 0px 10px 28px -5px rgba(0,0,0,0.32);
	box-shadow: 0px 10px 28px -5px rgba(0,0,0,0.32);
}

#menu-icon {
	margin-left: 10px;
	margin-top: 15px;
	float: left;
}

#menu-icon:hover {
	opacity: 0.6;
}

.menu-content-marvel {
	padding: 30px 50px 30px 20px;
	display: none;
}

.menu-content-dc {
	padding: 30px 50px 0px 20px;
	display: none;
}

#menu-editora-marvel {
	color: #eb3240;
	text-transform: uppercase;
	font-size: 28px;
	font-family: 'flamabold'
}

#menu-editora-dc {
	color: #0974ca;
	text-transform: uppercase;
	font-size: 24px;
	font-family: 'flamabold'
}

.menu-desc {
	margin-top: 25px;
	color: #000;
	opacity: 0.9;
	line-height: 1.2;
	letter-spacing: 1px;
	font-family: 'flamabook';
}

#site-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh; /* Temp: Simulando altura da página */
}

#site-canvas {
	width: 100%;
  	height: 100vh;
  	position: relative;
  	padding-top: 32px;
  	-webkit-transform: translateX(0);
  	-moz-transform: translateX(0);
  	-o-transform: translateX(0);
  	transform: translateX(0);
 	-webkit-transition: .3s ease all;
 	-moz-transition: .3s ease all;
 	-o-transition: .3s ease all;
  	transition: .3s ease all;
}

#site-menu {
	width: 300px;
  	height: 100%;
  	overflow: auto;
  	position: absolute;
  	top: 0;
  	left: -300px;
  	background: #eaeaea;
  	z-index: 1;
  	-webkit-box-shadow: inset 0px 10px 4px -6px rgba(0,0,0,0.12);
	-moz-box-shadow: inset 0px 10px 4px -6px rgba(0,0,0,0.12);
	box-shadow: inset 0px 10px 4px -6px rgba(0,0,0,0.12);
}

#site-wrapper.show-nav #site-canvas {
	width: calc(100% - 300px);
  	-webkit-transform: translateX(300px);
  	-mos-transform: translateX(300px);
  	-o-transform: translateX(300px);
 	transform: translateX(300px);.
}

.responsiveMenu {
	left: -500px;
    width: 500px;
    z-index: 100;
}

/* VINICIUS */
/*
#select {
	max-width: 240px;
	height: 50px;
	margin: 0 auto;
	bottom: 30px;
	position:absolute;
} */
/* /VINICIUS */
#select-marvel {
	width: 110px;
	height: 50px;
	float: left;
	margin-right: 20px;
	opacity: 0.3;
	cursor: pointer;
}

.selected {
	opacity: 1 !important;
}


#select-dc {
	width: 110px;
	height: 50px;
	float: left;
	opacity: 0.3;
	cursor: pointer;	
}

#teste {
	margin: 0 auto;
}


/* VINICIUS */
#filmes {
	overflow-y: hidden;
	border-top: 2px solid transparent;
	padding-top: 20px;
	display: inline-block;
	width: auto;
	left: 50%;
	position: relative;
	min-height:260px;
	max-width: 4000px;
	-webkit-transform: translateX(-50%); 
	-moz-transform: translateX(-50%); 
        -ms-transform: translateX(-50%);  
			transform: translateX(-50%);
}


#filmes section {
	overflow-y: hidden !important;
}

#filmes.completo {
	border-top: 2px solid #777777;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.6s;
}
#filmes li {
	opacity: 0;
	display: none;
	float: left;
	position:relative;
	width: 100px;
	margin: 0 auto;
	margin-right: 10px;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.6s;
}
#filmes li.ativo.entrance {
	-webkit-transform: translateY(0px) !important;  
		-ms-transform: translateY(0px) !important;  
		-moz-transform: translateY(0px) !important; 
    		transform: translateY(0px) !important;  
	opacity: 1 !important;
	display:inline-block !important;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
#filmes li:last-child {
    margin-right: 0px;
}
#filmes li.ativo:last-child {
    margin-right: 0px;
}
#filmes li:hover {
   margin-top: 10px;
}
#filmes #default {
	cursor: pointer;
	display:inline-block;
	height: 212px;
	width:200px;
	text-align: center;
	opacity: 1;
	-moz-transition-property: none;
	-webkit-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
}

#filmes #default:hover {
	opacity: 0.6;
}
/* /VINICIUS */


#filmes-jumbotron {
	clear: both;
	width: 100%;
	margin: 0 auto;
	margin-top: 40px;
	/*background-color: #1b1d21;*/
	text-align: center;
}

/*#filmes-wrapper {
	border-top: 2px solid #777777;
	padding-top: 20px;
	display: inline-block;
}*/

/*#filmes {
	border-top: 2px solid #777777;
	padding-top: 20px;
	display: inline-block;
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

#filmes li {
	display: block;
	float: left;
	width: 100px;
	margin: 0 auto;
	margin-right: 10px;
	cursor: pointer;
}

#filmes li:last-child {
    margin-right: 0px;
}

#filmes li.ativo:last-child {
    margin-right: 0px;
}

#filmes li:hover {
    opacity: 0.6;
}

*/

.filme-thumb {
	/* VINICIUS 
	height: 150px;
	/ VINICIUS */
	opacity: 1;

}
.nome-filme {
	font-family: 'flamamedium';
	padding-top: 10px;
	color: #fff;
	opacity: 0.5;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.2;
	/*text-align: center;*/
}

.nome-filme:hover {
	opacity: 1;
}

.nome-filme p {
	font-size: 10px;
	font-family: 'flamabook';
	margin-top: 3px;
}

/* VINICIUS */ 
.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	background: rgba(22, 24, 28, 0.9);
}
/* /VINICIUS */ 

.overlay-data {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.3s;
	-moz-transition: opacity 0.5s, visibility 0s 0.3s;
	-o-transition: opacity 0.5s, visibility 0s 0.3s;
	transition: opacity 0.5s, visibility 0s 0.3s;
}

.overlay-open {
	z-index: 11;
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.overlay-close {
	position: absolute;
	float: right;
	margin-top: 10px;
	margin-right: 10px;
	right: 10px;
	top: 10px;
}

#overlay-content {
	max-width: 650px;
	margin: 0 auto;
	margin-top: 80px;
}

#overlay-filme-poster {
	width: 300px;
	height: 400px;
	background-color: #1f2328;
	right: 30px;
	position: relative;
	clear: both;
	float: left;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
#overlay-filme-data {
	width: 300px;
	margin-left: 60px;
	opacity: 0;
	display: inline-block;
	vertical-align: top;
	color: #eb3240;
	position:absolute;
	text-transform: uppercase;
	font-size: 24px;
	float: left;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.overlay-open #overlay-filme-poster {
	right: 0px;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
}
.overlay-open #overlay-filme-data {
	opacity: 1;
	margin-left: 30px;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
}

#filme-nome {
	font-family: 'flamabold';
	letter-spacing: 2px;
}

#filme-desc {
	font-family: 'flamalight';
	font-size: 16px;
	text-transform: none;
	letter-spacing: 1px;
	line-height: 1.2;
	color: #fff;
	margin-top: 25px;
	opacity: 0.8;
}

#filme-data {
	font-size: 14px;
	color: #fff;
	margin-top: 8px;
	opacity: 0.8;
}

/* VINICIUS */
#filmes li {
	display: none;
	opacity: 0;
}
#personagens li.ativo {
    opacity: 1;
}
#filmes li.ativo {
	opacity: 0 !important;
	display: inline-block;
	-webkit-transform: translateY(10px) !important;  
	-moz-transform: translateY(10px) !important;  
    	-ms-transform: translateY(10px) !important;  
        	transform: translateY(10px) !important;  
	-moz-transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
}
/* /VINICIUS */

#diretor-title {
	font-family: 'flamamedium';
	font-size: 16px;
	color: #fff;
	opacity: 0.6;
	margin-top: 20px;
	float: left;
}

#diretor {
	font-family: 'flamalight';
	font-size: 16px;
	color: #fff;
	opacity: 0.8;
	margin-top: 20px;
	float: left;
}

#bilheteria-title {
	clear: both;
	font-family: 'flamamedium';
	font-size: 16px;
	color: #fff;
	opacity: 0.6;
	margin-top: 20px;
	float: left;
}

#bilheteria {
	font-family: 'flamalight';
	font-size: 16px;
	color: #fff;
	opacity: 0.8;
	margin-top: 20px;
	float: left;
}

#orcamento-title {
	clear: both;
	font-family: 'flamamedium';
	font-size: 16px;
	color: #fff;
	opacity: 0.6;
	margin-top: 20px;
	float: left;
}

#orcamento {
	font-family: 'flamalight';
	font-size: 16px;
	color: #fff;
	opacity: 0.8;
	margin-top: 20px;
	float: left;
}

.arrow {
	float: left;
	margin: 20px 10px 0px 10px;
}

.poster {
	-webkit-box-shadow: 0px 10px 12px 0px rgba(0,0,0,0.22);
	-moz-box-shadow: 0px 10px 12px 0px rgba(0,0,0,0.22);
	box-shadow: 0px 10px 12px 0px rgba(0,0,0,0.22);
}

.poster:hover .nome{
	opacity: 1;
}

#line {
	width: 48px;
	height: 2px;
	background-color: #222222;
	opacity: 0.5;
	margin-top: 20px;
	margin-bottom: 20px;
}

.year {
	color: #eb3240;
	font-family: 'flamabold';
	margin-top: 20px;
}

.year-dc {
	color: #0974ca;
	font-family: 'flamabold';
	margin-top: 20px;
}

.timeline {
	font-size: 14px;
	color: #000;
	opacity: 0.9;
	text-transform: uppercase;
	margin-top: 20px;
	padding-left: 20px;
	border-left: 2px solid #5b5b5b;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'flamabook';	
	margin-left: 12px;
}

#close:hover {
	cursor: pointer;
	opacity: 0.6;
}

#menutest {
	margin: 0 auto;
}

#personagens {
	color: #fff;
}

#personagens li, #filmes li {
    opacity: 1;
    cursor: pointer;
    color: #fff;
}

#filmes li {
	display: none;
}

#personagens li.ativo {
    opacity: 1;
}

#personagens section.marvel li.ativo .img-container:after {
    content:'';
    top: 50px;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: #e72227;
    opacity: 0.5;
}

#personagens section.dc li.ativo .img-container:after {
    content:'';
    top: 50px;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: #0974ca;
    opacity: 0.5;
}


#personagens li.ativo .nome {
    opacity: 1;
}

#personagens li:hover .nome{
    opacity: 1;
}

#personagens li.ativo {
    opacity: 1;
}

#filmes li.ativo {
	display: block;
	opacity: 1;
}

section.marvel, section.dc {
}

section.marvel li {
    /*background: #992222;*/
}
section.dc li {
    /*background: #222299;*/
}

#personagens section.marvel {
	display: none;
}

#personagens section.dc {
	display: none;
}

#selecionado {
	display: block !important;
}

.nome {
	height: 30px;
	width: 100%;
	text-transform: uppercase;
	font-family: 'flamamedium';
	text-align: center;
	padding-top: 8px;
	padding-bottom: 12px;
    font-size: 14px;
    opacity: 0.5;
}

.nome p {
	font-family: 'flamabook';
	font-size: 10px;
	margin-top: 3px;
	opacity: 0.8;
	opacity: 1;
}

.owl-carousel .owl-item img {
	transform-style: preserve-3d;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.75);
}

#filme-data:before { content: '('; }
#filme-data:after { content: ')'; }

#filmes li.ativo:hover {
	margin-top: 20px;
	-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
  	-o-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
}

#filmes li.ativo {
	-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
  	-o-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
}




.animate {
-webkit-animation: cssAnimation 0.5s 16 ease;
-moz-animation: cssAnimation 0.5s 16 ease;
-o-animation: cssAnimation 0.5s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(45deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(45deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(45deg) scale(1) skew(1deg) translate(0px); }
}

.animate-return {
-webkit-animation: cssAnimationReturn 0.5s 16 ease;
-moz-animation: cssAnimationReturn 0.5s 16 ease;
-o-animation: cssAnimationReturn 0.5s 16 ease;
}
@-webkit-keyframes cssAnimationReturn {
from { -webkit-transform: rotate(45deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimationReturn {
from { -moz-transform: rotate(45deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimationReturn {
from { -o-transform: rotate(45deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}

.rotate {
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}


/* VINICIUS */ 

#capa {
	width: 100%;
	height: 100%;
	position: absolute;
	top:-100%;
	left:0%;
	background: #000 url('../img/capa-bg.jpg') no-repeat center center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	z-index: 9;
  	text-align: center;
  	-webkit-transition: all 2s ease-in-out;
 	-moz-transition: all 2s ease-in-out;
  	-o-transition: all 2s ease-in-out;
  	transition: all 2s ease-in-out;
  	overflow: auto;
}

.capaOpen #capa {
	top:0%;
  	-webkit-transition: all 2s ease-in-out;
 	-moz-transition: all 2s ease-in-out;
  	-o-transition: all 2s ease-in-out;
  	transition: all 2s ease-in-out;
}

#capa-content {
	margin-top: 56px;
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%) !important;  
		-ms-transform: translateY(-50%) !important;  
		-moz-transform: translateY(-50%)!important;
    		transform: translateY(-50%) !important;  
}

#select {
	max-width: 240px;
	height: 50px;
	margin: 0 auto 40px -120px;
	left: 50%;
	top: 0px;
	z-index: 10;
	position: relative;
	 -webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
  	-o-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
}

#select h5 {
	color: #fff;
	font-family: 'flamalight';
	text-transform: uppercase;
	font-size: 10px;
	text-align: center;
	position: relative;
	top: -15px;
}

#select img {
	position: relative;
	opacity:0.5;
	-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
  	-o-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
}

#select img:hover {
	opacity:1;
	3-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
  	-o-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
}
.capaOpen .selected {
	cursor: pointer !important;
}

#select .selected img {
  opacity: 1;
  animation: animaSeletor cubic-bezier(0.420, 0.000, 0.580, 1.000) 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animaSeletor cubic-bezier(0.420, 0.000, 0.580, 1.000) 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animaSeletor cubic-bezier(0.420, 0.000, 0.580, 1.000) 2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animaSeletor cubic-bezier(0.420, 0.000, 0.580, 1.000) 2s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animaSeletor cubic-bezier(0.420, 0.000, 0.580, 1.000) 2s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animaSeletor{
  0% 	{ transform:  scale(1); 	}
  50% 	{ transform:  scale(0.9); 	}
  100%  { transform:  scale(1); 	}
}
@-moz-keyframes animaSeletor{
  0% 	{ transform:  scale(1); 	}
  50% 	{ transform:  scale(0.9); 	}
  100%  { transform:  scale(1); 	}
}
@-webkit-keyframes animaSeletor{
  0% 	{ transform:  scale(1); 	}
  50% 	{ transform:  scale(0.9); 	}
  100%  { transform:  scale(1); 	}
}
@-o-keyframes animaSeletor{
  0% 	{ transform:  scale(1); 	}
  50% 	{ transform:  scale(0.9); 	}
  100%  { transform:  scale(1); 	}
}
@-ms-keyframes animaSeletor{
  0% 	{ transform:  scale(1); 	}
  50% 	{ transform:  scale(0.9); 	}
  100%  { transform:  scale(1); 	}
}

.capaOpen #select {
	top: 0;
	-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
  	-o-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
}

#capa #linhafina {
	width: 100%;
	max-width:640px;
	min-width: 300px;
	margin: 20px auto;
}

#capa p, #capa h4 {
	font-family: 'flamalight';
	letter-spacing: 2px;
	line-height: 1.5;
	padding:20px;
}

#voltar {
	color: #000;
	font-family: 'flamamedium';
	text-transform: uppercase;
	letter-spacing: 2px;
	position: absolute;
	right: 12px;
	top: 20px;
	font-size: 14px;
	opacity: 0.6;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#voltar:hover {
	opacity: 1;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.capaOpen #voltar {
	opacity: 0;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
/*@media screen and ( max-height: 580px ){
    .capaOpen  #capa-content {
		top: 250px;
	}
}

@media screen and ( min-height: 768px ){
    #filmes li {
    	width: 125px;
    }
}

@media screen and ( min-height: 800px ){
    #filmes li {
    	width: 150px;
    }
}
@media screen and ( min-height: 860px ){
    #filmes li {
    	width: 175px;
    }
}

@media screen and ( min-height: 960px ){
    #filmes li {
    	width: 200px;
    }
}*/

/* /VINICIUS */ 

.horizontalMobile {
	overflow-x: scroll;
   	width: 100%;
}

.smallScreen {
	overflow: auto;
	width: 2000px;
}

ul#filmes {

}


@media screen and ( max-width: 960px ){
    ul#filmes {
    	overflow-x: scroll;
    	/*width: 100%;*/
    }

    section.thumbs-marvel {
    	/*width: 2000px;*/
    	overflow: auto;
    }
}

@media screen and ( max-width: 780px ){
	.overlay-open {
		overflow-y: scroll;
	}
	#overlay-filme-poster {
		float: none;
		width: 250px;
		height: auto;
		background-color: #1f2328;
		right: 30px;
		position: relative;
		margin: 0 auto;
	}
	#overlay-filme-data {
		padding-top: 20px;
		padding-bottom: 40px;
		overflow: auto;
		float: none;
		clear: both;
		width: auto;
		position: relative;
		display: block;
		width: 250px;
	}
	.overlay-open #overlay-filme-data {
		margin: 0 auto;
	}
}

.fundacao {
	text-transform: uppercase;
	font-size: 14px;
	color: #000;
	opacity: 0.9;
	margin-top: 25px;
	font-family: 'flamamedium';
}

.fund-year {
	padding-top: 5px;
	font-size: 30px;
	color: #eb3240;
	font-family: 'flamabold';
}

.fund-year-dc {
	padding-top: 5px;
	font-size: 30px;
	color: #0974ca;;
	font-family: 'flamabold';
}

.fund-desc {
	padding-top: 5px;
	font-family: 'flamabook';
	opacity: 0.5;
}

.proprietaria {
	padding-top: 20px;
	clear: both;
	text-transform: uppercase;
	font-size: 14px;
	color: #000;
	opacity: 0.9;
	margin-top: 15px;
	font-family: 'flamamedium';
}

.proprietaria-desc {
	padding-top: 10px;
	font-family: 'flamabook';

}

#atacado-title {
	text-transform: uppercase;
	font-size: 14px;
	color: #000;
	opacity: 0.9;
	margin-top: 15px;
	font-family: 'flamamedium';
}

#atacado-desc {
	margin-top: 25px;
	font-family: 'flamabook';
	line-height: 1.2;
	letter-spacing: 1px;
}

.menu-desc span {
	font-family: 'flamamedium';
}

#obs {
	opacity: 0.5;
	font-size: 12px;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid green;
}

#img-marvel {
	width: 80px;
	margin: 0 auto;
	background-color: #eb3240;
	padding: 20px;

}

#img-dc {
	background-color: #0974ca;
	width: 30px;
	padding: 10px 45px 9px 45px;
}

@media screen and ( max-width: 780px ){
	#select-marvel {
		background-color: #eb3240;
		margin-right: 0px;
		width: 50%;
	}
	#select-dc {
		background-color: #0974ca;
		width: 50%;
	}
	#select h5 {
		display: none;
	}
	#select {
		margin: 0;
		left: 0;
		margin-top: -32px;
		width: 100%;
		max-width: none;
	}
	#select .selected img {
		opacity: 1;
		animation: none;
		animation-iteration-count: none;
		transform-origin: none;
		-webkit-animation: none;
		-webkit-animation-iteration-count: none;
		-webkit-transform-origin: none;
		-moz-animation: none;
		-moz-animation-iteration-count: none;
		-moz-transform-origin: none;
		-o-animation: none;
		-o-animation-iteration-count: none;
		-o-transform-origin: none;
		-ms-animation: none;
		-ms-animation-iteration-count: none ;
		-ms-transform-origin: none;
	}
	#img-marvel {
		display: block;
		background-color: transparent;
		padding: 10px 0px 10px 0px;
	}
	#img-dc {
		display: block;
		margin: 0 auto;
		background-color: transparent;
		width: 25px;
		padding: 5px 0px 9px 0px;
	}
	#filmes.completo {
		border-top: none;
	}
	.nome-filme p {
		color: transparent;
	}
	.nome-filme {
		font-size: 10px;
	}
	.nome p {
		color: transparent;
	}
	.nome {
		font-size: 11px;
	}
	#filmes li.ativo:hover {
		margin-top: 0px;
		-webkit-transition: none;
	 	-moz-transition: none;
	  	-o-transition: none;
	  	transition: none;
	}

#filmes li.ativo {
	-webkit-transition: none;
 	-moz-transition: none;
  	-o-transition: none;
  	transition: none;
	}
	.nome {
		padding-bottom: 0px;
	}
	#personagens section.marvel li.ativo .img-container:after {
	top: 38px;
	}
}

@media screen and ( max-height: 680px ){
	#capa-content {
		margin-top: 130px;
	}
}

@media screen and ( max-height: 520px ){
	#capa-content {
		margin-top: 130px;
	}
}

@media screen and ( max-height: 400px ){
	#capa-content {
		margin-top: 200px;
	}
}

#OAS_Position1 {
	overflow: hidden;
	max-width: 100%;
}

#banner {
	background-color: rgba(0, 0, 0, 0.6);
}

#obs-2 {
	clear: both;
	font-family: 'flamabook';
	text-transform: none;
	color: #fff;
	opacity: 0.5;
	padding-top: 20px;
	font-size: 12px;
}

#creditos{
	clear: both;
	font-family: 'flamabook';
	text-transform: uppercase;
	color: #fff;
	opacity: 0.5;
	padding-top: 5px;
	float: right;
	font-size: 12px;
}

.title img:hover {
	opacity: 0.6;
}