@charset "UTF-8";
/* CSS Document */

html body {
	padding: 0px;
	margin: 0px;
	height: auto;
	width: 100%;
	background: url('../img/elements/bg1.jpg') 
}

h1, h2, h3, h4, h5 {
	font-family: 'Titillium Web', sans-serif; font-weight: 600;
}

ul li {
  list-style: none;
}

a:link {
	color: #f3f3f3;
}   /* unvisited link */


a:visited {
	color: #f3f3f3;
}  /* visited link */


#wrapper {
	height: auto;
	width: 100%;
	position: relative;
}

.main {
	overflow:auto;
    padding-bottom: 150px;
    position: relative;
    top: 0px;
} 

.main2 {
	margin-top: 150px;
}

@media all and (max-width: 920px) {
    .main2 {
    	margin-top: 125px;
   }
}


/* dropdown nav===================================================================*/

/* main menu styles */
.menuholder {
    position:relative;
    bottom: -40px;
    z-index: 100;
}

.menuholder li div.subs dl a img {
	-webkit-transition: all 0,1s ease;
    -moz-transition: all 0,1s ease;
    -o-transition: all 0,1s ease;
    -ms-transition: all 0,1s ease;
    transition: all 0,1s ease;
}

.menuholder li div.subs dl a img:hover {
	-webkit-filter: drop-shadow(10px 7px 1px #000)
}

ul.menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0 125px;
    position:relative;
}

ul.menu li {
    float:left;
    margin:0 5px 0 0;
}

/* main nav */
ul.menu li > a img {
    -webkit-transition-property: height, width;
    -o-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    display: block;
    padding: 0 10px;
    text-decoration: none; 
}

/* main nav hover */
ul.menu li > a img:hover {
    display: block;
    padding: 0 10px;
    text-decoration: none; 
}

.menu li div.subs {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 35px;
    width: 0;
}

.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    /*float:left;*/
    margin: 0 130px 0 0;
    overflow: hidden;
    padding: 10px 0 0 0;
    width: 0;
}

.menu dt {
    color: #f3f3f3;
    font-size:12px;
    height:40px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
    font-family: 'Titillium Web', sans-serif; font-weight: 600;
	font-size: 14px;
}

.menu dt a {
    color: #f3f3f3;
    font-size:12px;
    height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
    font-family: 'Titillium Web', sans-serif; font-weight: 600;
	font-size: 14px;
}

.menu li:hover div.subs dl {
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    margin-right: 2%;
    width: 21%;
}

.menu li:hover div.subs,.menu li a:hover div.subs {
    width:100%;
}

div.menuholder ul.menu.slide li div.subs {
	z-index: 100;
	position: absolute;
	top: 150px;
	left: 30px;
}

@media all and (max-width: 920px) {
    div.menuholder ul.menu.slide li div.subs {
    	z-index: 100;
		position: absolute;
		top: 60px;
		left: 2px;
   }
}

#headerBg {
	z-index: -10;
	position: relative;
	top: 10px;
}

#avengersHover:hover	{
	-webkit-transition: all 0,1s ease;
    -moz-transition: all 0,1s ease;
    -o-transition: all 0,1s ease;
    -ms-transition: all 0,1s ease;
    transition: all 0,1s ease;
}

#marvelPlanet {
	position: relative;
	right: 110px;
	bottom: -50px;
}

/*#marvelPlanet img {
	-webkit-transition: all 0,1s ease;
    -moz-transition: all 0,1s ease;
    -o-transition: all 0,1s ease;
    -ms-transition: all 0,1s ease;
    transition: all 0,1s ease;
}

#marvelPlanet img:hover {
	-webkit-filter: drop-shadow(10px 7px 1px #000)
}*/

#dcPlanet {
	position: relative;
	right: 100px;
	top: -20px;
}

#imagesPlanet {
	position: relative;
	left: 240px;
	top: 30px;
}

#darkhorsePlanet {
	position: relative;
	left: 380px;
}

#foreignPlanet {
	position: relative;
	top: 40px;
	right: 60px;
}

@media all and (max-width: 970px) {
    #marvelPlanet {
    	position: relative;
		right: 140px;
   }
}

@media all and (max-width: 970px) {
    #marvelPlanet img {
    	width: 75%;
   }
}

@media all and (max-width: 1010px) {
    #dcPlanet {
    	position: relative;
		right: 130px;
   }
}

@media all and (max-width: 1010px) {
    #dcPlanet img {
    	width: 75%;
   }
}

@media all and (max-width: 1040px) {
    #imagesPlanet {
    	position: relative;
		left: 100px;
		top: -20px;
   }
}

@media all and (max-width: 825px) {
    #imagesPlanet {
    	position: relative;
		left: 0px;
		top: -20px;
   }
}

@media all and (max-width: 825px) {
    #imagesPlanet img {
    	width: 75%;
   }
}

@media all and (max-width: 1010px) {
    #foreignPlanet {
    	position: relative;
		left: -150px;
   }
}

@media all and (max-width: 970px) {
    #foreignPlanet img {
    	width: 75%;
   }
}

@media all and (max-width: 1070px) {
    #darkhorsePlanet {
    	position: relative;
		left: 230px;
		top: 0px;
   }
}

@media all and (max-width: 920px) {
    #darkhorsePlanet {
    	position: relative;
		left: 100px;
		top: 0px;
   }
}

@media all and (max-width: 825px) {
    #darkhorsePlanet {
    	position: relative;
		left: 500px;
		top: -100px;
   }
}

@media all and (max-width: 825px) {
    #darkhorsePlanet img {
    	width: 75%;
   }
}

.nav {
	top: -15px;
	position: absolute;
}

/*======= breadcrumbs ===================================================================*/
.breadcrumbs {
	font-family: 'Titillium Web', sans-serif; font-weight: 400;
	position: relative;
	top: -50px;
	padding-left: 15px;
	z-index: 100;
}

@media all and (max-width: 768px) {
    .breadcrumbs {
    	font-family: 'Titillium Web', sans-serif; font-weight: 400;
    	position: relative;
		top: -35px;
		padding-left: 15px;
		z-index: 100;
   }
}

.breadcrumbs li {
	display: inline;
	text-align: middle;
	font-family: 'Titillium Web', sans-serif; font-weight: 300;
	font-size: 14px;
}

.breadcrumbs li a {
	padding-right: 15px;
	font-family: 'Titillium Web', sans-serif; font-weight: 400;
	-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;
    z-index: 20;
}

.breadcrumbs ul li img {
	position: relative;
	top: 10px;
}

.breadcrumbs ul li a {
	font-family: 'Titillium Web', sans-serif; font-weight: 400;
	font-size: 12px;
	position: relative;
	top: 3px;
}

.breadcrumbs ul li a:hover {
	font-family: 'Titillium Web', sans-serif; font-weight: 400;
	color: #f89b23;
}

/*======= secondNav to right ===================================================================*/

.secondNav {
	position: relative;
	float: right;
	top: 12px;
	right: 15px;
	padding: 0px 10px;
	-webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    font-family: 'Titillium Web', sans-serif; font-weight: 400;
	font-size: 14px;
    color: #f3f3f3;
}

#secondNavHover.secondNav {
	color: #f3f3f3;
	font-size: 12px;
}

#search {
	position: relative;
	float: right;
	top: 5px;
}

div#rightNav {
	position: absolute;
	top: 5px;
	right: 0px;
}

/*======= logo ===================================================================*/
.logo {
	position: relative;
	top: -180px;
	right: 5px;
	z-index: 10;
}

/* current page image media querry*/
@media all and (max-width: 768px) {
    .logo {
    	position: relative;
		left: 92px !important;
		top: -130px !important;
		z-index: 10 !important;
    	width: 75% !important;
   }
}

/*======= thumbnails ===================================================================*/

.thumbnail span img {
  	-webkit-transition: all 0,1s ease;
    -moz-transition: all 0,1s ease;
    -o-transition: all 0,1s ease;
    -ms-transition: all 0,1s ease;
    transition: all 0,1s ease; 
}

.thumbnail span img:hover {
  	-webkit-filter: drop-shadow(10px 7px 1px #000)
}

#comics {
	position: relative;
	margin-bottom: -100px;
}

#comics li.four.columns p.text {
	color: #f3f3f3;
	font-family: 'Titillium Web', sans-serif; font-weight: 600;
	font-size: 18px;	
	position: relative;
	top: -10px;
	right: -22px;
}

#comics li.four.columns p.comicInfo {
	color: #f3f3f3;
	position: relative;
	top: -25px;
	right: -22px;
	font-family: 'Titillium Web', sans-serif; font-weight: 300;
	font-size: 12px;
}

.liquid ul li a img {
	opacity: .85;
  	-webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out; 
}

.liquid ul li a img:hover {
	opacity: 1;
    /*box-shadow: 0 3px 25px #000;*/
}
/*======= footer =========*/

footer {
	width: 100%;
	height: 100px;
	text-align: center;
	font-family: 'Titillium Web', sans-serif; font-weight: 400;
	margin-top: -150px; /* negative value of footer height */
}

footer li {
	color: #f3f3f3;
}

footer ul li {
	display: inline;
	padding: 20px 20px 0 20px;
	position: relative;
	top: 40px;
	z-index: 10;
	font-family: 'Titillium Web', sans-serif; font-weight: 600;
	font-size: 14px;
}

@media all and (max-width: 768px) {
    footer ul li {
    	display: inline;
		padding: 0px 20px 10px 20px;
		position: relative;
		top: 50px;
		z-index: 10;
		font-family: 'Titillium Web', sans-serif; font-weight: 600;
		font-size: 14px;
   }
}

footer ul li img#copyright {
	position: relative;
	top: 8px;
	margin-right: 5px;
}

div.row.socialIcons {
	position: relative;
	bottom: -10px;
}

#footerBg {
	width: 100%; 
	margin: 0px;
	position: relative;
	padding: 0;
	z-index: -10;
}

img#konamiCode {
	opacity: 0;
	position: absolute;
	left: 300px;
}

img#konamiCode:hover {
	opacity: .5;
	-moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

/*======= misc ===================================================================*/
.recommended {
	text-align: center;
	border-bottom-style: solid;
	border-color: #f3f3f3;
	position: relative;
	top: 65px;
	padding: 5px;
	color: #f3f3f3;
	font-size: 28px;
	font-family: 'Titillium Web', sans-serif; font-weight: 600;
}

#myDiv {
	position: relative;
	top: -100px;
}

.avengers {
	position: relative;
	top: -30px;
}

@media all and (max-width: 768px) {
    .avengers {
    	position: relative;
		top: -30px;
   }
}

/*======= subscribe =========*/
.subscribe {
	font-family: 'Titillium Web', sans-serif; font-weight: 600;
	font-size: 14px;
	position: relative;
	left: 30px;
	top: 15px;
}

.subscribe a {
	color: #000;
	-webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.subscribe a:hover {
	color: #f89b23;
}

 ul.subscribe li {
	display: inline;
	padding: 10px 10px 0px 10px;
}

p.mediaDescriptionText img {
	float: right;
	margin-right: 12px;
	font-family: 'Titillium Web', sans-serif; font-weight: 400;
	font-size: 12px;
}

/*======= newsBlock =========*/
.newsBlock { 
    background: -moz-linear-gradient(#d3d3d3, white); /* FF 3.6+ */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3d3d3), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#d3d3d3, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#d3d3d3, white); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(#d3d3d3, white); /* the standard */  
	/*border-radius: 5px;*/
	border: 2px solid #000;
	position: relative;
	top: 35px;
}

.newsBlock div.seven.columns img {
	float: left;
	padding: 23px 10px 2px 0px;
}

.newsBlock div.seven.columns h2 {
	margin: 20px 0 0 20px; 
	font-family: 'Titillium Web', sans-serif; font-weight: 700;
	font-size: 24px;
}

.newsBlock div.seven.columns h4 {
	padding-top: 20px;
	font-family: 'Titillium Web', sans-serif; font-weight: 700;
	font-size: 18px;
}

.newsBlock div.seven.columns p {
	font-size: 14px;
	font-family: 'Titillium Web', sans-serif; font-weight: 300;
}

.sideContent {
	margin: 20px 0 10px 0;
	font-family: 'Titillium Web', sans-serif; font-weight: 300;
}

.sideContent img {
	float: left;
	padding: 0 10px 4px 0;
}

#middleContent {
	margin: -10px 0 -10px 0;
}

.sideContent h5 {
	padding-bottom: 5px;
	font-family: 'Titillium Web', sans-serif; font-weight: 700;
	font-size: 16px;
}


/*======= bubbles =========*/

#newsBubble {
	opacity: 0;
	position: absolute;
	top: -170px;
	left: 600px;
	-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;
    z-index: 100;

}

.newsBlock:hover #newsBubble {
	display: block;
	opacity: 1;
}

#headerBubble {
	opacity: 0;
	position: absolute;
	top: 60px;
	left: 600px;
	-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;
    z-index: 500;
}

header:hover #headerBubble {
	display: block;
	opacity: 1;
}

#direction1 {
	opacity: 0;
	z-index: 30;
	width: 35%;
	position: absolute;
	left: 70px;
	top: 50px;
	-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;
}

#direction1:hover {
	display: block;
	opacity: 1;
}

#direction2 {
	opacity: 0;
	z-index: 30;
	width: 22%;
	position: absolute;
	left: 200px;
	top: 100px;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#comics:hover:hover #direction2 {
	display: block;
	opacity: 1;
}


#seriesBubble {
	opacity: 0;
	position: absolute;
	top: 200px;
	left: 540px;
	-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;
    z-index: 100;
    width: 35%;
}

#comics:hover #seriesBubble {
	display: block;
	opacity: 1;
}


#lightboxBubble {
	opacity: 0;
	position: absolute;
	top: 200px;
	left: 600px;
	-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;
    z-index: 100;
    width: 30%;
}

html.js.no-touch.svg.inlinesvg.svgclippaths.no-ie8compat div:hover #lightboxBubble {
	display: block;
	opacity: 1;
}


.direction3 {
	position: absolute;
	top: 0px;
	left: 200px;
	opacity: 0;
	width: 35%;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.direction3:hover {
	display: block;
	opacity: 1;
}