/* CSS Document */

#ncil-banner {
background-color: #330033;
    color: #fff;
    font-weight: 700;
}

#ncil-banner > .container > .row   { text-align: center;}

#ncil-banner > .container > .row > div  {
float: none;
    margin: 0 auto;
}

/* Font Awesome Replacements */

.fa-file-image-o:before {
    content: "\f1c5"!important;
}

.fa-check-circle-o:before {
    content: "\f058"!important;
}

.fa-files-o:before {
content: "\f15b"!important;
}

.fa-play-circle-o:before {
content: "\f1c8"!important;
}

.front {
	text-align: center;
}

.btn-read:after {
    content: "\f02d"!important;
}

.btn-go:after {
    content: "\f04b"!important;
}

.btn-download:after {
    content: "\f019"!important;
}

.btn-read:after, .btn-go:after, .btn-download:after {
   font-size: 1rem!important;
}

/* KIDZONE FIXES */

#mainNav.navbar-kidz .container,
#mainNav.navbar-kidz .container:before,
#mainNav.navbar-kidz .container:after {
	content: none!important;
}

.comics-panel {
	background-color: #f5f5f5;
}

.comic-border {
	border: 1px solid #ddd;
}

.kid-theme {
	color: white;
    font-family: Arvo, sans-serif;
    text-transform: uppercase;
    display: inherit;
    vertical-align: middle;
    text-shadow: -3px -3px 0 #222, 3px -3px 0 #222, -3px 3px 0 #222, 3px 3px 0 #222, 4px 4px 0 #1799ad, 5px 5px 0 #1799ad, 6px 6px 0 #1799ad, 7px 7px 0 #1799ad;
	font-size: 3rem;
}

.kid-theme a {
	color: white;
}

.kid-theme a:hover {
	color: white;
	text-decoration: none;
	text-shadow: -3px -3px 0 #222, 3px -3px 0 #222, -3px 3px 0 #222, 3px 3px 0 #222, 4px 4px 0 orchid, 5px 5px 0 orchid, 6px 6px 0 orchid, 7px 7px 0 orchid;
}

.page-kid-zone img {
	max-width: 100%;
}

.kidzone-banner {
	position: static!important;
	padding: 1rem 0!important;
}

.kidzone-section a {color: white!important;}

.kidzone-section a:hover {color: orchid!important;}

#ncil-banner {
background-color: #330033;
    color: #fff;
    font-weight: 700;
	width: 100%;
    padding: 1rem 0!important;
}

#ncil-banner > .container > .row   { text-align: center;}

#ncil-banner > .container > .row > div  {
float: none;
    margin: 0 auto;
}

.nav-main>li {
	width: auto!important;
}

.dropdown-menu {
	background-color: #062848!important;
}

.nav>li>a:hover, .nav>li>a:focus {
	background-color: transparent!important;
}

.navbar-logo_image {
	max-width: 100px!important;
	height: auto!important;
}

.dropdown-menu>li {
	padding: .5rem;
}

.dropdown-menu>li>a {
	color: #ededed;
}

#kidzoneNav {
    background-color: #000;
}

.navbar-kidz-2::after {
	background: -webkit-gradient(linear, left top, right top, from(#330033), color-stop(purple), color-stop(#041b30), color-stop(#0a4377), color-stop(#0e5d69), to(#1799ad));
	background: linear-gradient(to right, #330033, purple, #041b30, #0a4377, #0e5d69, #1799ad);
	content: "";
	height: 5px;
	width: 100%;
	position: relative;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
}

#ncil-banner-kidzone {
    background-color: #330033;
    color: #fff;
    font-weight: 700;
    width: 100%;
    padding: 1rem 0!important;
	margin-top: 0!important;
}

.green {
    color: lime!important;
}

.purple {
    color: orchid!important;
}
.blue {
    color: aqua!important;
}

.white {
color: #ffffff!important;
}

.coh-date {
font-family: "Arvo", serif!important;
font-weight: 700!important;
font-style: normal;
color: white;
text-stroke-width: 3px;
-webkit-text-stroke-width: 3px;
text-stroke-color: black;
-webkit-text-stroke-color: black;
font-size: 2.5rem;
letter-spacing: 1px;
}

.coh-border::after {
background: -webkit-gradient(linear, left top, right top, from(#330033), color-stop(purple), color-stop(#041b30), color-stop(#0a4377), color-stop(#0e5d69), to(#1799ad));
background: linear-gradient(to right, #330033, purple, #041b30, #0a4377, #0e5d69, #1799ad);
content: "";
position: relative;
height: 1rem;
width: 100%;
left: 0;
right: 0;
bottom: 0;
}

#clash-of-heroes-banner h2 {
font-family: "Arvo", serif!important;
font-weight: 700!important;
font-style: normal;
text-transform: uppercase;
font-size: 2.5rem;
color: white;
text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
text-stroke-color: black;
-webkit-text-stroke-color: black;
text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000,4px 4px 0 teal, 5px 5px 0 teal, 6px 6px 0 teal, 7px 7px 0 teal;
}