* {
	box-sizing: border-box;
}

@font-face {
	font-family: "Edo";
	src: url("fonts/edo-sz.regular.woff") format("woff");
}

@font-face {
	font-family: "PEPSI";
	src: url("fonts/pepsi.ttf") format("truetype");
}

@font-face {
	font-family: "Bad Suabia Swing";
	src: url("fonts/bad-suabia-swing.regular.woff") format("woff");
}

@font-face {
	font-family: "Proggy Clean";
	src: url("fonts/ProggyClean.ttf") format("truetype");
}

body {
	font-family: "Proggy Clean", "Times New Roman";
	font-size: 21px;
	color: white;
	background-image: url("images/jurassic/texture_tile.png"), url("images/jurassic/back_top.png"), url("images/jurassic/back_foot.png");
	background-attachment: fixed, scroll, scroll;
	background-repeat: repeat, repeat-x, repeat-x;
	background-position-y: center, top, bottom;
	background-color: #1C1C29;
	/*original background-color without background-image is: #292938;*/
	/*edited background-color with background-image is: #1C1C29;*/
}

.main {
	width: 800px;
	height: auto;
	margin-top: 84px;
	margin-left: 510px;
}

.text {
	text-align: center;
	width: 760px;
	height: auto;
	margin-top: 53px;
	margin-left: 20px;
}

#side_bar{
	float: left;
	position: sticky;
	top: 40px;
	left: 40px;
	padding: 5px;
	margin: 70px auto 0;
	clear: left;
}

#side_bar_2{
	float: left;
	position: sticky;
	top: 23.45rem;
	left: 40px;
	padding-left: 5px;
	clear: left;
}

#contents {
	position: relative;
	top: 0;
	width: 360px;
}

#contents_head {
	margin: 4%;
}

ul {
	margin: 0;
}

li {
	line-height: 35px;
}

.divider {
	border: 1px solid dimgray;
	border-bottom: none;
	width: 500px;
	margin: 30px auto;
}

p {
	text-align: left;
}

a {
	color: #FFF;
}

a:hover {
	color: #AFFFFF;
}

h1 {
	font-family: "Arial Black", "Arial";
	font-size: 32px;
	font-style: italic;
	margin-bottom: -17px;
}

h2 {
	font-family: "Arial Black", "Arial";
	font-size: 21px;
}

h3 {
	margin-bottom: -20px;
}

h4 {
	font-size: 25px;
	margin-top: 40px;
}

h5 {
	text-align: left;
	font-size: 25px;
	font-weight: normal;
	font-style: italic;
	margin: 15px 0;
}

#email {
	text-decoration: underline;
	color: #AFFFFF;
}

.year {
	margin-bottom: 30px;
	text-align: center;
	color: #C3C3C3;
}

img {
	border-width: 4px;
	border-style: solid;
}

.da {
	border: none;
	margin: auto 7px;
}

.footer {
	display: inline;
	border: 2px dashed #FFF;
	height: 108px;
	margin-right: 10px;
}

::selection {
	color: #FFF;
	background-color: rgba(200,10,10,0.7);
}

/* --------------- figures --------------- */

figure {
	margin: auto 0 20px;
}

.figure_flowl {
	float: left;
	margin: 0 15px 15px;
	clear: left;
}

.figure_flowr {
	float: right;
	margin: 0 15px 15px;
	clear: right;
}

figcaption {
	padding: 0.5% 5% 0;
	font-size: 15.5px;
	color: #C3C3C3;
}

#cap_more_pad {
	padding: 0.5% 5%;
}

.cap_flow {
	padding: 0.5% 0;
}

/* -------------- R A N K S -------------- */

.rating_OP {
	font-size: 34px;
	margin-top: 34px;
	margin-bottom: 0;
}

.rank {
	font-family: "Times New Roman";
	font-weight: bold;
	font-style: italic;
	font-size: 34px;
	margin: 30px 55px 0;
}

.rank_SS {
	font-size: 135px;
	color: transparent;
	background-image: linear-gradient(319deg, #D9E0FF 32%, #FFF 40%, #D9E0FF 49%, #D9E0FF 57%, #FFF 65%, #D9E0FF 71%);
	-webkit-background-clip: text;
	padding: 0 5px;
	margin-right: 55px;
}

.rank_S {
	font-size: 135px;
	color: transparent;
	background-image: linear-gradient(319deg, #FFC90E 35%, #FFFDBD, #FFC90E 75%);
	-webkit-background-clip: text;
	padding: 0 5px;
	margin-right: 55px;
}

.rank_A {
	font-size: 135px;
	color: transparent;
	background-image: linear-gradient(319deg, #FF7F27 30%, #FFC90E, #FF7F27 60%);
	-webkit-background-clip: text;
	padding: 0 5px;
	margin-right: 55px;
}

.rank_B {
	font-size: 135px;
	color: transparent;
	background-image: linear-gradient(319deg, #96ED4A 30%, #DBFF4A, #96ED4A 60%);
	-webkit-background-clip: text;
	padding: 0 5px;
	margin-right: 55px;
}

.rank_D {
	font-size: 135px;
	color: transparent;
	background-image: linear-gradient(319deg, #5B2270, #AC55C2 50%);
	-webkit-background-clip: text;
	padding: 0 5px;
	margin-right: 55px;
}

.rank_F {
	font-size: 135px;
	color: gray;
	padding: 0 5px;
	margin-right: 55px;
}

.stars {
	margin-top: -50px;
	margin-left: -20px;
}

.star {
	border: none;
	height: 50px;
}

.star_alone {
	border: none;
}

.star_half {
	display: inline-block;
	width: 50px;
	height: 90px;
	overflow: hidden;
}

#star_shenanigan {
	display: inline-block;
	width: 25px;
	height: 90px;
	overflow: hidden;
}

.EP_rank_box {
	text-align: left;
	margin-top: 15px;
}

.EP_rank {
	display: inline-block;
	font-size: 25px;
	margin: 0 0 0 25px;
}
.EP_rank_letter {
	font-weight: bold;
	margin: 0 15px 0 20px;
}

.EP_star {
	border: none;
	height: 15px;
	margin: 0;
}

.EP_star_half {
	display: inline-block;
	padding: 0;
	width: 8px;
	height: 15px;
	overflow: hidden;
}

.JP_Heading_ROP {
	font-family: "Edo";
}

.JW_Heading_ROP {
	font-family: "PEPSI";
}

.JC_Heading_ROP {
	font-family: "Bad Suabia Swing";
}


/* ---------- movies -- specific ---------- */

/* ---- Jurassic PARK ---- */

#JP_1 {
	font-family: "Edo";
	font-size: 60px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(red, goldenrod);
	-webkit-background-clip: text;
	margin-top: 120px;
}

#JP_1_img {
	border-color: red;
	width: 700px;
}

.JP_1_mulimg {
	border-color: red;
	width: 450px;
}

.JP_1_mulimg2 {
	border-color: red;
	height: 433px;
}

#JP_2 {
	font-family: "Edo";
	font-size: 50px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(goldenrod, green);
	-webkit-background-clip: text;
	margin-top: 120px;
}

#JP_3 {
	font-family: "Edo";
	font-size: 60px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(white, maroon, red);
	-webkit-background-clip: text;
	margin-top: 120px;
}

/* ---- Jurassic WORLD ---- */

#JW_1 {
	font-family: "PEPSI";
	font-size: 50px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(CornflowerBlue, white, DarkCyan, white);
	-webkit-background-clip: text;
	margin-top: 120px;
}

#JW_1_img {
	border-color: darkcyan;
	width: 700px;
}

.JW_1_mulimg {
	border-color: darkcyan;
	width: 350px;
}

.JW_1_mulimg2 {
	border-color: darkcyan;
	height: 300px;
}

#JW_1_txtgif {
	border-color: darkcyan;
	width: 400px;
}

#JW_2 {
	font-family: "PEPSI";
	font-size: 38px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(black, white, gray, white);
	-webkit-background-clip: text;
	margin-top: 120px;
}

#JW_2_img {
	border-color: #B0B5B0;
	width: 700px;
}

.JW_2_mulimg {
	border-color: #B0B5B0;
	height: 270px;
}

#JW_3 {
	font-family: "PEPSI";
	font-size: 50px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(red, yellow);
	-webkit-background-clip: text;
	margin-top: 120px;
}

#JW_3_img {
	border-color: #FF7F27;
	width: 700px;
}

.JW_3_mulimg {
	border-color: #FF7F27;
	width: 350px;
}

#JW_3_txtimg {
	border-color: #FF7F27;
	height: 350px;
}

#JW_A {
	font-family: "PEPSI";
	font-size: 50px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(dimgray, darkseagreen, dimgray, gray);
	-webkit-background-clip: text;
	margin-top: 120px;
}

/* ---- Jurassic World CAMP SERIES ---- */

#JWCC {
	font-family: "Bad Suabia Swing";
	font-size: 55px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(goldenrod, sandybrown, maroon);
	-webkit-background-clip: text;
	margin-top: 120px;
}

#JWCC_img {
	border-color: peru;
	width: 700px;
}

.JWCC_txtimg {
	border-color: peru;
	height: 350px;
}

.JWCC_mulimg {
	border-color: peru;
	width: 350px;
}

.JWCC_mulimg2 {
	border-color: peru;
	width: 300px;
}

#JWCT {
	font-family: "Bad Suabia Swing";
	font-size: 55px;
	font-weight: normal;
	color: transparent;
	background-image: linear-gradient(black, goldenrod, maroon);
	-webkit-background-clip: text;
	margin-top: 120px;
}

#JWCT_img {
	border-color: goldenrod;
	width: 700px;
}

#JWCT_txtimg {
	border-color: goldenrod;
	height: 250px;
}

.JWCT_mulimg {
	border-color: goldenrod;
	width: 350px;
}

.JWCT_mulimg_block {
	display: block;
	border-color: goldenrod;
	width: 500px;
	margin: auto auto 5px;
}

.JWCT_mulimg_block:first-child {
	border-bottom: none;
	margin: auto;
}

/* ---------- anyting -- tables ---------- */

table {
	border: 2px solid #4D4947;
	font-size: 80%;
	min-width: 60%;
	margin: 10px auto 25px auto;
}

td {
	text-align: left;
	padding: 11px 8px;
}

th {
	padding: 8px;
}

tr:nth-child(even) {
	background-color: #2E2C2B;
}

.empt {
	background-image: url("images/jurassic/texture_tile.png");
	background-color: #1C1C29;
}