/*============STANDARD================*/
 
 h2,
 h3 {
	color:#fff;
	text-shadow:0 0 20px #eddd3f;
}

 p strong, 
 a {
	color: #7fccdc;
}

/*============HEADER================*/

 section.header {
	background: linear-gradient(180deg, rgba(0,0,0,0), rgb(13, 8, 8));
}
 section.header:before { 
	background: url("../img/section-header/background.jpg")center 0px;

}

.carousel-gallery .slick-arrow {
	background: url(/webcommon/resources/img/white/arrow.png) 0 center no-repeat;
	background-size: auto 40%;
	background-position: 40% center;
}

/*============INTRO ================*/
 
section#intro {
	background: linear-gradient(180deg, rgb(13, 8, 8) 5%, rgba(0,0,0,0) 100%), url("../img/section-intro/background.jpg") no-repeat;
	background-position:center bottom;	
	position: relative;
}

/*============SECTION HEADER================*/
/* 
 section.header {
	transform-style: preserve-3d;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
	transform-style: inherit;
}*/
 section.header:before { 
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left:0;
	right:0;
	/*transform: translateZ(-2px) scale(3);*/
	z-index:-1;
}

 section.header h1 {
	width: 30%;
    padding: 5% 0 0 0;
    margin: 0 auto;
    min-width: 280px;
}

 section.header .logo {
	width: 100%;
    height: auto;
}

 section.header h2 {
	font-size:3em;
    text-align: center;
}

 section.header div.carrousel {
    width: 100%;
	height: 546px;
}

 section.header div.carrousel-container {
    width: 100%;
	height: 546px;
	position: absolute;
	overflow: hidden;
}

 section.header div.carrousel-container img{
    width: 1920px;
	height: 546px;
	position: absolute;
    left: -960px;
    margin-left: 50%;
}

/*============SECTION INFORMATION================*/

section.information  div.text-block {
	width:40%;
	padding-top: 12%;
	padding-bottom: 12%;
	padding-left: 5%;
}

section.information  img.feat{
	width:40%;
	max-height:100%;
	position:absolute;
	right:0;
	bottom: 0;
}

/*=================RESPONSIVE====================*/

@media (max-width: 1120px) {

 section.information div.text-block {
	width:100%;
	padding-bottom: 100%;
	padding-left: 0%;
}

 section.information img.feat {
	width: 100%;
    bottom: 0;
}
}

/*============RACAS================*/

section#racas {
	background: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)), url("../img/section-racas/background.jpg") no-repeat;
	background-position:center center;
	background-size: 100% auto;	
	position: relative;
}

section#racas .character-description p.sexos img{
	margin-right: 5px;
	vertical-align: middle;
}

section.characters-list ul.array-characters li {
    color: #e9e5ae;
    font-family: 'exolight';
    font-size: 2em;
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 10px;
    cursor: pointer;
	list-style: none;
}
section.characters-list .summon.character-active {
    text-shadow: 0 0 20px #e9e5ae;
	color: #fff;
}

/*============CLASSES================*/

section#classes {
	background: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)), url("../img/section-classes/background.jpg") no-repeat;
	background-position:center center;
	background-size: 100% auto;	
	position: relative;
}

section#classes .carousel-characters .slick-arrow {
	background: url(/webcommon/resources/img/white/arrow.png) 0 center no-repeat;
	background-size: 100% auto;
}

section#classes  .character-description img.star{
	width: 20px;
	height:auto;
	vertical-align: middle;
}

section#classes  .character-description p.play{
	cursor: pointer;
}

section#classes  .character-description p.play img{
	width: 60px;
	height:auto;
	margin-right: 5px;
	vertical-align: middle;
}

section#classes .summon.character-active:after{
	box-shadow:inset 0 0 0 4px #fff;
}

/*============SECTION FEATURES=============*/

section#features {
	background: url("../img/section-features/background.jpg") no-repeat;
	background-position:center center;
	overflow:hidden;
	position: relative;
}
section.features {
	overflow:hidden;
	padding: 5% 0;
}

 section.features  .container{
	display:-webkit-flex;
	display:flex;
}
 section.features  article{
	width: 46%;
	margin: 3% auto 6% auto;
}

 section.features  article img, section.features  article video{
	width:100%;
	margin:auto;
}

 section.features  article h3{
	padding-top: 8%;
}

/*=================RESPONSIVE====================*/

@media (max-width: 1120px) {

 section.features{
	background-size: auto 100%;
}
 section.features .container{
	display:block;
}
 section.features article {
	width:100%;
	margin-left:0;
	margin-right:0
}
}

/*============SECTION LOJA=============*/

section#loja {
	background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0)), url("../img/section-loja/background.jpg") no-repeat;
	background-position:center center;
	background-size: cover;
	position: relative;
}

/*============SHADOWBOX================*/
 
#shadow-box #shadow-content button {
	background: url('/webcommon/resources/img/white/close.png');
	background-size: 100%;
}


@media (max-width: 1120px) {
	
	section#racas {
	background-position:center center;
	background-size: auto 100%;	
}
	
	section#classes {
		background-position:center center;
		background-size: auto 100%;	
	}
}

/*============SECTION HYPE=============*/

section#hype {
	background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0)), url("../img/section-hype/background.jpg") no-repeat;
	background-position:center center;
	background-size: cover;
	position: relative;
}


section#hype h2 {
    font-size: 2.5em;
	font-family: 'exolight';
}

section#hype h2  strong{
    font-weight: normal;
	color: #17fe58;
	font-family: 'exolight';
}

section.hype  div.text-block {
	width:40%;
	padding-top: 12%;
	padding-bottom: 12%;
	padding-left: 5%;
}

section.hype  img.feat{
	max-height:100%;
	position:absolute;
	right:0;
	bottom: 0;
}

/*=================RESPONSIVE HYPE====================*/

@media (max-width: 1120px) {

 section.hype div.text-block {
	width:100%;
	padding-bottom: 100%;
	padding-left: 0%;
}

 section.hype img.feat {
	width: 100%;
    bottom: 0;
}
}

/*============SECTION BOTÃO================*/

section.compre {
	padding:0;
}
section.compre div.text{
	margin:0;
	text-align: center;
}
section.compre div.text p{
	text-align: center;
}

 section.compre ul{
	width: 100%;
	margin: 4% 0;
	text-align: center;
}
 section.compre ul li{
	display:inline-block;
	text-align:center;
	width:17%;
	margin:20px 1%;
	vertical-align:top;
}

 section.compre ul li img{
	width:40%;
	margin-bottom: 6px;
}
 section.compre ul li h3{
	font-size:1.2em;
	margin:0 0 7px 0;
}
 section.compre ul li p{
	font-size:1em;
	text-align:center;
	margin-top:7px;
}

section.compre a.bt-jogue{
    display: block;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    font-family: exolight;
	color: #17fe58;
	/*background: linear-gradient(0deg, #17fe58 0%, #03ffb3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
	padding: 20px 60px;
    margin: 0 auto;
    font-weight: normal;
    border: 1px solid #17fe58;
	border-radius: 10px;
}

section.compre a.bt-jogue:hover{
	color: #03ffb3;
	/*background: linear-gradient(0deg, #17fe58 0%, #03ffb3 0%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
	padding: 20px 60px;
    margin: 0 auto;
    font-weight: normal;
    border: 1px solid #03ffb3;
	border-radius: 10px;
}

/*=================RESPONSIVE HYPE E BT====================*/

@media (max-width: 1600px) {

section.compre div.text{
	margin:0;
}
}

@media (max-width: 1120px) {

 section.compre ul li {
	width:30%;
}
}

 @media (min-width:1120px){    
section.hype img.feat {
	max-width: 59%;
    top: 50%;
    transform: translateY(-50%);
     bottom: auto;
   }
}
@media (max-width: 680px) {

 section.compre ul li {
    width: 46%;
}
}