@charset "UTF-8";

#homeVidShell {
	width: 100%;
	height:  300px;
	display:  block;
	background:  #000;
}

#homeVidShell video {
	width: 100% !important;
	height: 100% !important;
}
#homeMainLoading {
	width: 100%;
	height: 100%;
	display:  block;
	background:  #000 url(../images/loadloop.gif) center no-repeat;
	z-index: 3;
	opacity: 0;
	visibility:  hidden;
}

#charVidContent {
	text-align: center;
	width: 100%;
	height: 100%;
	display:  none;
	z-index: 2;
}

#charNextBtn {
	width: 52px;
	height: 40px;
	display:  block;
	margin-top: -20px;
	background: #01c4f5 url(../images/home/arrowRight2.png) top left no-repeat;
}

#charBackBtn {
	width: 52px;
	height: 40px;
	display:  block;
	margin-top: -20px;
	background: #01c4f5 url(../images/home/arrowLeft2.png) top left no-repeat;

}

#charCloseBtn {
	margin-right: -52px;
	width: 52px;
	height: 40px;
	display:  block;
	background: #01c4f5 url(../images/home/closeBtn2.png) top left no-repeat;
	-webkit-transition: margin-right 0.15s ease-out;
	-moz-transition: margin-right 0.15s ease-out;
	-o-transition: margin-right 0.15s ease-out;
	transition: margin-right 0.15s ease-out;

}
#charCloseBtn.show {
	margin-right: 0;
}

.no-mobile #charNextBtn:hover, .no-mobile #charBackBtn:hover, .no-mobile #charCloseBtn:hover {
	background-position: bottom left;
}

#homeMainContentShell {
	width: 100%;
	height:  702px;
	display:  block;
}
#homeMainContent {
	width: 1680px;
	height:  702px;
	display:  block;
}

.lineupBtn {
	display:  block;
}

.lineupBtn:hover {
	z-index: 1;
}

.lineupBtn .facebox {
	opacity: 0;
	margin-top: 10px;
	-webkit-transition: opacity 0.25s ease-out;
	-moz-transition: opacity 0.25s ease-out;
	-o-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
	-webkit-transition: margin-top 0.15s ease-out;
	-moz-transition: margin-top 0.15s ease-out;
	-o-transition: margin-top 0.15s ease-out;
	transition: margin-top 0.15s ease-out;
}

.lineupBtn.show .facebox, .no-mobile .lineupBtn:hover .facebox {
	opacity: 1;
	margin-top: 0;
}

.ie8 .lineupBtn .facebox {
	opacity: 1;
	display: none;
}

.ie8 .lineupBtn.show .facebox, .ie8 .lineupBtn:hover .facebox {
	opacity: 1;
	display: block;
}

.lineupBtn .label {
	opacity: 0;
	margin: 0 20px;
	font-size: 40px;
	color: rgb( 204, 204, 204 );
	text-shadow: 2.5px 4.33px 10px rgb( 0, 0, 0 );
	position: absolute;
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
	-webkit-transition: margin 0.3s ease-out;
	-moz-transition: margin 0.3s ease-out;
	-o-transition: margin 0.3s ease-out;
	transition: margin 0.3s ease-out;
	-webkit-font-smoothing: antialiased !important;
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
	-ms-transform: translatez(0);
	-o-transform: translatez(0);
	transform: translatez(0);
}

.lineupBtn.show  .label, .no-mobile .lineupBtn:hover .label {
	opacity: 1;
	margin: 0;
}

.lineupBtn .learn {
	opacity: 0;
	white-space:  nowrap;
	font-size:  21px;
	color: #000;
	background: url(../images/home/trailerBtn3.png) top center repeat-x;
	line-height: 27px;
	height: 26px;
	padding: 0 20px;
	position: absolute;
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
	-webkit-font-smoothing: antialiased !important;
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
	-ms-transform: translatez(0);
	-o-transform: translatez(0);
	transform: translatez(0);
}

.lineupBtn.show  .learn {
	opacity: 1;
}

.no-mobile .lineupBtn:hover .learn {
	opacity: 1;
	color: #c09761;
	background-position: bottom center;
}

.lineupBtn[rel='gamora'] {
	top: 0;
	left: 200px;
	width: 200px;
	height: 702px;
}


.lineupBtn[rel='gamora'] .facebox {
	top: 137px;
	left: 46px;
}
.lineupBtn[rel='gamora'] .label {
	top: -14px;
	left: 129px;
}
.lineupBtn[rel='gamora'] .learn {
	top: 32px;
	left: 109px;
}


.lineupBtn[rel='starlord'] {
	top: 0;
	left: 500px;
	width: 240px;
	height: 702px;
}
.lineupBtn[rel='starlord'] .facebox {
	top: 105px;
	left: 58px;
}
.lineupBtn[rel='starlord'] .label {
	top: 10px;
	right: 130px;
}
.lineupBtn[rel='starlord'] .learn {
	top: 56px;
	right: 106px;
}


.lineupBtn[rel='rocket'] {
	top: 360px;
	left: 805px;
	width: 190px;
	height: 342px;
}
.lineupBtn[rel='rocket'] .facebox {
	top: 14px;
	left: 41px;
}
.lineupBtn[rel='rocket'] .label {
	top: 30px;
	left: 128px;
}
.lineupBtn[rel='rocket'] .learn {
	top: 79px;
	left: 109px;
}


.lineupBtn[rel='drax'] {
	top: 0;
	left: 1030px;
	width: 260px;
	height: 702px;
}
.lineupBtn[rel='drax'] .facebox {
	top: 95px;
	left: 76px;
}
.lineupBtn[rel='drax'] .label {
	top: 18px;
	left: 128px;
}
.lineupBtn[rel='drax'] .learn {
	top: 65px;
	left: 109px;
}


.lineupBtn[rel='groot'] {
	top: 0;
	left: 1320px;
	width: 225px;
	height: 702px;
}
.lineupBtn[rel='groot'] .facebox {
	top: 28px;
	left: 38px;
}
.lineupBtn[rel='groot'] .label {
	top: 13px;
	left: 128px;
}
.lineupBtn[rel='groot'] .learn {
	top: 59px;
	left: 109px;
}



#homeGifBtn {
	top: 13px;
	left: 50%;
	margin-left:  -372px;
	width: 328px;
	height: 119px;
	text-align:  center;
	background: url(../images/home/gifMakerBtn2.png) top left;
	white-space:  nowrap;
	display:  block;
	line-height: 212px;
	color: #000;
	font-size: 23px;
	text-align:  center;
}

.no-mobile #homeGifBtn:hover {
	background-position: bottom left;
	color: #c09761;
}



#homeTrailerBtn {
	top: 15px;
	left: 50%;
	margin-left:  30px;
	width: 329px;
	height: 118px;
	line-height: 209px;
	color: #000;
	font-size: 23px;
	text-align:  center;
	background: url(../images/home/trailerBtn4.png) top left;
	white-space:  nowrap;
	display:  block;
}

.no-mobile #homeTrailerBtn:hover {
	background-position: bottom left;
	color: #c09761;
}

.charPanel {
	overflow: hidden;
	-webkit-transition: height 0.25s cubic-bezier(.05, .5, .29, 1.01);
	-moz-transition: height 0.25s cubic-bezier(.05, .5, .29, 1.01);
	-o-transition: height 0.25s cubic-bezier(.05, .5, .29, 1.01);
	transition: height 0.25s cubic-bezier(.05, .5, .29, 1.01);
}

#charBio {
	width: 342px;
	height: 296px;
	background: #ff0;
	display: block;
	margin-left: -455px;
	background: url(../images/home/charBioBg.png) top left no-repeat;
}
#charBio .mainContent {
	width: 340px;
	height: 320px;
	display: block;
}

#charName {
	color: #fff;
	font-size: 50px;
	top: 36px;
	left: 13px;
	text-align: left;
}
#charDesc {
	color: #fff;
	font-size: 18px;
	line-height: 20px;
	top: 92px;
	left: 13px;
	width: 310px;
	text-align: left;
}
#charVid {
	width: 223px;
	height: 38px;
	background: #ff0;
	display: block;
	margin-left: -111px;
	background: url(../images/home/charVidBg.png);
}
#charDownload {
	width: 342px;
	height: 320px;
	background: #ff0;
	display: block;
	margin-left: 116px;
	background: url(../images/home/charBioBg.png) top left no-repeat;
}

.charPanel.active .label {
	margin-left: 7px;

}
.charPanel .label {
	margin-left: 15px;
	margin-top: 7px;
	color: #fff;
	text-align: left;
	font-size: 25px;
	-webkit-transition: margin-left 0.25s cubic-bezier(.05, .5, .29, 1.01);
	-moz-transition: margin-left 0.25s cubic-bezier(.05, .5, .29, 1.01);
	-o-transition: margin-left 0.25s cubic-bezier(.05, .5, .29, 1.01);
	transition: margin-left 0.25s cubic-bezier(.05, .5, .29, 1.01);
}
.charPanel .mainContent {
	opacity: 1;
	visibility: visible;
}

.charPanel .closeBtn {
	width: 23px;
	height: 26px;
	background: url(../images/home/panelCloseBtn.png) top left;
	display: block;
	top: 6px;
	right: 14px;
}

.no-mobile .charPanel .closeBtn:hover {
	background-position: bottom left;
}

.charPanel.active {
	height: 38px !important;
	cursor: pointer;
	background-position: top left;
}
.charPanel.active .mainContent {
	opacity: 0;
	visibility: hidden;
}

.charPanel.active:hover .label {
	color: #dd6311;
}

#charVid {
	cursor: pointer;
}
#charVid:hover .label {
	color: #000 !important;
}
#charVid.active:hover .label {
	color: #dd6311 !important;
}
#charDownload .mainContent {
	width: 340px;
	height: 320px;
	display: block;
}

#charDownload .thumb {
	width: 322px;
	height: 215px;
	display: block;
	background: #000;
	top: 45px;
	left: 9px;
}

#charDownload .btns {
	width: 100%;
	height: 43px;
	top: 267px;
	text-align: center;
}
#charDownload .dlBtn {
	background: url(../images/home/dlIcons.png);
	display: inline-block;
	position: relative;
	height: 40px;
}
#charDownload #fb.dlBtn {
	background-position: top left;
	width: 31px;
}
.no-mobile #charDownload #fb.dlBtn:hover {
	background-position: bottom left;
}
#charDownload #twitter.dlBtn {
	width: 49px;
	background-position: -31px top;
}
.no-mobile #charDownload #twitter.dlBtn:hover {
	background-position: -31px bottom;
}
#charDownload #google.dlBtn {
	width: 43px;
	background-position: -80px top;
}
.no-mobile #charDownload #google.dlBtn:hover {
	background-position: -80px bottom;
}
#charDownload #wpw.dlBtn {
	width: 52px;
	background-position: -123px top;
}
.no-mobile #charDownload #wpw.dlBtn:hover {
	background-position: -123px bottom;
}
#charDownload #wps.dlBtn {
	width: 50px;
	background-position: -175px top;
}
.no-mobile #charDownload #wps.dlBtn:hover {
	background-position: -175px bottom;
}
#charDownload #ipad.dlBtn {
	width: 50px;
	background-position: -225px top;
}
.no-mobile #charDownload #ipad.dlBtn:hover {
	background-position: -225px bottom;
}
#charDownload #iphone.dlBtn {
	width: 36px;
	background-position: right top;
}
.no-mobile #charDownload #iphone.dlBtn:hover {
	background-position: right bottom;
}


#charVid {
	background-position: top right;
}
#charVid.active {
	background-position: top left !important;
}
#charVid .label {
	color: #dd6311;
	margin-left: 7px;
}
#charVid.active .label{
	color: #fff;
}