/* CSS Stylesheet */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* \/\/\/\/   My style sheet starts here   \/\/\/\/ */
/* --- --- || GENERAL STYLE || --- --- */
body {
	min-width: 350px;
	max-width: 1050px;
	font-family: 'Heebo', Arial, Verdana, sans-serif;
  font-weight: 300;
  font-size: 1.2em;
	line-height: 1.3;
	color: #e8e8e8;
	background: #000;
}
main {
	padding: 1em;
	background-color: #111112;
}
footer {
	padding: 2em 1em 1.5em 1em;
	font-size: .8em;
	text-align: center;
	background-color: #111112;
}

/* --- --- || TYPOGRAPHY || --- --- */
h1, h2, h3 {
	text-transform: uppercase;
}
h1 {
	font-family: 'Bungee Inline', 'Bradley Hand', 'Brush Script MT', cursive;
	font-size: 1.6em;
	padding-top: .5em;
	padding-bottom: 1em;
	text-align: center;
	color: #ffff14;
}
h2 {
	font-weight: 500;
	font-size: 1.4em;
	line-height: 1;
	margin-top: 1em;
	margin-bottom: .4em;
}
dt {
	font-weight: 500;
	margin-top: .5em;
}
b {
	font-weight: 500;
}

/* --- --- || HEADER|| --- --- */
header {
	margin-top:.3em;
	padding: .7em 0 0 0;
	text-align: center;
	background: #000;
}
header h1 {
	color: #DB5E00;
}
/* NAV */
header nav {
	margin: 1em 0 0 0;
}
/* MENU TOGGLE */
nav strong {
	padding: .2em 10%;
	font-size: .9em;
	font-weight: 500;
	color: #000;
	background-color: #ffff14;
	cursor: pointer;
}
nav strong:before,
nav strong.active:before {
	content: ' \25B2 ';
	margin: .4em .6em 0 0;
	font-size: 1.1em;
	line-height: 1.3;
}
nav strong:before {
	content: ' \25BC ';
}
nav strong:hover,
nav strong:active,
nav strong:focus,
nav strong.active:hover,
nav strong.active:active,
nav strong.active:focus {
	background-color: #eb0005;
	color: #fff;
}
nav strong.active {
	background-color: #ffff14;
	color: #000;
}
nav ul {
	padding-top: .2em;
	font-weight: 500;
}
nav ul li a {
	text-decoration: none;
	font-size: 1.1em;
	display: block;
	padding: .2em;
	text-decoration: none;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
nav ul li a:link,
nav ul li a:visited {
	color: #fff;
	background: none;
	text-decoration: none;
}
nav ul li a:hover,
nav ul li a:active,
nav ul li a:focus {
	background-color: #ffff14;
	color: #000;
	text-decoration: none;
}

/* --- --- || IMAGES || --- --- */
/*logo jurassic*/
img {
	height: 186px;
	width: 300px;
	display: block;
	margin: 0 auto;
}
/*Image T-REX*/
header ul + img {
	margin-top: -.4em;
	margin-bottom: 0em;
}
section img {
	width: 120%;
  height: auto;
	margin: 1.5em 0 2em -100px;
  animation: fadeIn 7s;
  -webkit-animation: fadeIn 7s;
  -moz-animation: fadeIn 7s;
  -o-animation: fadeIn 7s;
  -ms-animation: fadeIn 7s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
/*Image of Reviews*/
#attacking {
	margin-top: 1.5em;
	width: 100%;
	height:auto
}
/* car and its animation */
#car {
  position: relative;
  height: 200px;
}

#car img{
	display: block;
  bottom: 0;
	position: absolute;
	-webkit-animation:linear infinite alternate;
	-webkit-animation-name: run;
	-webkit-animation-duration: 10s;
}
@-webkit-keyframes run {
	0% { left: 0;}
  100%{ left : 60%;}
}

/* --- --- || HOMEPAGE || --- --- */
section {
	margin-bottom: 1em;
}
figcaption {
	margin-left: 1.5em;
}
section + p {
	margin-bottom: 1em;
}
dl {
	margin-bottom: 1em;
}
#trailer {
	margin-top: 1.5em;
	margin-bottom: 1em;
	width: 100%;
}

/* --- --- || FILM TIMES PAGE || --- --- */
address {
	margin-bottom: 1em;
}
div iframe {
	margin: 0;
	padding-bottom: 1em;
	width: 100%;
}
div dd {
	float: left;
}
div dd a:link, div dd a:visited {
	color: #000;
	background-color: #ffff14;
	margin: 1em 2em 1em 1em;
	padding: .7em;
	display:block;
	width: 50px;
	height: 20px;
	text-align: center;
	text-decoration: none;
}
div dd a:hover, div dd a:active {
	color: #fff;
	background-color: #000;
}
div dt {
	content: "";
  clear: both;
  display: table;
}
div dl::after {
	content: "";
  clear: both;
  display: table;
}

/* --- --- || ERROR PAGE || --- --- */

#error-page img {
	width: 100%;
	height: auto;
	margin-top: 1.5em;
}
#error-page p {
	text-align:center;
}


/* --- --- // LINKS // --- --- */
a, a:link, a:visited {
 	color: #fff;
 	text-decoration: underline;
}
a:hover, a:active, a:focus {
	color: #ffff14;
}
header a:link, nav a:link, footer a:link, h1 a:link, h2 a:link, h3 a:link {
	border: 0;
}/* remove border on menu / headings / footer */

/* --- --- // DOWNLOAD Button // --- --- */
button {
  background-color: #ffff14; /* Green */
  border: none;
  color: #fff;
	margin-top: 1em;
  padding: .6em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
}
button a,
button a:link,
button a:visited {
 	color: #000;
 	text-decoration: none;
}
button a:hover,
button a:active,
button a:focus {
	color: #eb0005;
}

/* --- --- // FIGURES - BLOCKQUOTES // --- --- */
figure {
	margin-left: 1.5em;
}
blockquote {
	padding: .8em 1.5em 1.5em 1.5em;
	margin: 0 0 0 -1em;
}
section blockquote {
	padding: .8em 1.5em 1.5em 1.5em;
	margin: 0 0 0 -1em;
}
figcaption {
	margin-top: -20px;
	margin-bottom: 1em;
}
section figcaption {
	margin-bottom: 0;
}
blockquote:before {
	content: '\201C';
	font-family: serif;
	float: left;
  margin: -.3em 0 0 -.5em;
	font-size: 2em;
}

/* --- --- // MEDIA QUERIES // --- --- */

@media (min-width : 562px) {
	body {
		margin: 0 auto;
		font-size: 1.3em;
	}
	nav {
		font-size: 1.1em;
		padding: 1em 0;
		margin: 0 0 3em 0;
		text-align: center;
	}
	nav ul {
		overflow: hidden;
		margin: 0 auto;
	}
	nav ul li {
		display: inline;
		margin: 0;
		padding: 0 .6em;
		border-right: 1px solid #e8e8e8;
  }
	nav ul li:last-child {
		border: none;
	}
	nav ul li a {
		display: inline-block;
		margin: 0;
		padding: .4em /*.2em .4em*/;
	}
	/* TREX IMAGE */
	section img {
		width: 100%;
	}
	dl {
		margin-bottom: 2em;
	}
	#trailer {
		max-width: 800px;
		margin-right: auto;
		margin-left: auto;
	}
}