/*GENERAL*/
html, body {
	font-family: 'PT Sans', sans-serif;
	width: 100%;
	height: 100%;
	background-image: url('../img/background.png');
}
.divider {
	margin-left: 20%;
}
a:hover {
    color: #087208;
}

/*NAV BAR*/
.navbar {
	padding: 0 1rem;
}
.navbar-toggler {
	font-size: 45px;
	text-align: right;
}
.navbar-side {
	height: 100%;
	width: 25%;
	position: fixed;
	top: 0;
	right: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid #ccc;
	background: linear-gradient(black, grey);
	overflow-y: scroll;
	z-index: 1000;
}
.navbar-side-item {
	padding: 1.5rem 0;
	margin: 0;
	border-bottom: 2px solid #ccc;
	height: 5rem;
}
.navbar-side-item a:hover {
	color: #087208;
}
.side-link {
	padding-left: 2rem;
	font-size: 30px;
	font-weight: 800;
	color: white;
}
.navbar-side {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: 300ms ease;
	transition: 300ms ease;
}
 .reveal {
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
	-webkit-transition: 300ms ease;
	transition: 300ms ease;
}
.overlay {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	background-color: #ccc;
	opacity: 0.6;
	z-index: 990;
}
.navbar-side {
	@include media-breakpoint-up(xs) { width: 85%; } // Small
	@include media-breakpoint-up(sm) { width: 50%; } // Medium
	@include media-breakpoint-up(md) { width: 25%; } // Large
}
nav {
	background-color: grey;
}
.margin-a {
	margin: auto;
}
.logo {
	width: 200px;
	height: auto;
}
#banner {
	position: relative;
}
#banner img {
	width: 100%;
	height: 125px;
}
#banner p {
    position: absolute;
    bottom: -15px;
    left: 20px;
    font-weight: 900;
    font-size: 60px;
    color: white;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
/*NAV BAR END*/

/*LANDING*/
#landing a {
	padding: 0;
	display: block;
}
#landing a:hover {
	border-color: black;
}
#landing .row {
	margin-right: 0;
	margin-left: 0;
}
#landing .landing-selector {
	height: 90vh;
	width: 100%;
	position: relative;
}
.tint {
	background: rgba(0,0,0,.7);
}
.select1 {
	background-image: url(../img/plot.png),linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7));
	background-blend-mode: overlay;
	background-size: 100% 100%;
}
.select2 {
	background-image: url(../img/characters.png),linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7));
    background-blend-mode: overlay;
    background-size: 100% 100%;
}
.select3 {
	background-image: url(../img/influences.png), linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7));
    background-blend-mode: overlay;
    background-size: 100% 100%;
}
.select4 {
	background-image: url(../img/adaptation.png), linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7));
    background-blend-mode: overlay;
    background-size: 100% 100%;
}
.select5 {
	background-image: url(../img/reception.png), linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7));
    background-blend-mode: overlay;
    background-size: 100% 100%;
}
.select6 {
	background-image: url(../img/sequel.png), linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7));
    background-blend-mode: overlay;
    background-size: 100% 100%;
}
.select1:hover {
	background-image: url(../img/plot.png), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
}
.select2:hover {
	background-image: url(../img/characters.png),linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
}
.select3:hover {
	background-image: url(../img/influences.png), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
}
.select4:hover {
	background-image: url(../img/adaptation.png), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
}
.select5:hover {
	background-image: url(../img/reception.png), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
}
.select6:hover {
	background-image: url(../img/sequel.png), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
}
.cover span{
	transform: rotate(-90deg);
	font-weight: 900;
	font-size: 60px;
    color: white;
    position: absolute;
    bottom: 12%;
    right: 0;
    width: 90%;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
.cover {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	text-decoration: none;
	z-index: 20;
}
.cover:hover span {
	color: #087208;
	text-decoration: underline;
}
/*LANDING END*/

/*PLOT*/
#plot_main {
	margin-top: 50px;
	margin-left: 10%;
    margin-right: 10%;
}
.head_nav a {
	color: black;
}
.head_nav ul li {
	display: inline;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: underline;
}
.plot_img {
	margin-right: 15px;
}
/*PLOT END*/

/*CHARACTERS*/
.characters {
	padding-left: 10%;
	padding-right: 10%;
}
#characters_main {
	margin-top: 50px;
}
/*CHARACTERS END*/


/*INFLUENCES*/
#influences_main {
	margin-top: 50px;
}
.influences img {
	width: 100%;
}
.influences .row {
	margin-top: 25px;
}
.influences_modal img {
	width: 250px;
	height: 250px;
}
.influences .row div {
	padding: 10px;
}
.content {
	position: relative;
}
.bottom-center {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 30px;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
/*INFLUENCES END*/

/*ADAPTATION*/
#adaptation_main {
	margin-top: 50px;
	margin-left: 10%;
	margin-right: 10%;
}
/*ADAPTATION END*/
/*RECEPTION*/
#reception_main {
	margin-top: 50px;
	margin-left: 10%;
	margin-right: 10%;
}
/*RECEPTION END*/
/*SEQUEL*/
#sequel_main {
	margin-top: 50px;
	margin-left: 10%;
	margin-right: 10%;
}
/*SEQUEL END*/
/* FOOTER */
.footer {
  width: 100%;
  height: 80px; 
  line-height: 80px; 
  background-color: grey;
  margin-top: 50px;
}

@media (min-width: 576px) {
	.modal-dialog {
	    max-width: 700px;
	    margin: 10% auto;
	}
}