#page-header{ /*Header for all pages that aren't the home page*/
	width: 100%;
	height: 190px;
	background-image: url("images/900px/pageheader900.jpg");
	background-size: 360px 200px; /*CHANGED*/
	position: relative; /*CHANGED - Only for mobile styles*/
	padding-top: 20px;
	margin-bottom: 100px;
	top: 140px; /*Height of sticky Nav bar (mobile only)*/
}

#header{
	width: auto;
	height: 360px; /*CHANGED*/
	background-image: url("images/360px/cinemaheader360.jpg");
	background-size: 360px 360px; /*CHANGED*/
	position: relative; /*CHANGED - Only for mobile styles*/
	top: 140px; /*Height of sticky Nav bar (mobile only)*/
	z-index: 1; /*CHANGED - Only for mobile styles*/
}

#headertext{
	width: 150px; /*CHANGED*/
	height: 230px; /*CHANGED*/
	position: relative;
	top: 0px; /*CHANGED*/
	float: right;
	padding-right: 20px; /*CHANGED*/
}

#page-header-text{ /*Header text for all pages that aren't the home page*/
	position: relative;
	top: 15px;
	float: right;
	padding-right: 8px;
}

#header h1, #page-header h1{
	color: white;
	font-size: 2em; /*CHANGED*/
	
}

#header p{
	color: white;
	font-size: 0.9em; /*CHANGED*/
	position: relative;
	bottom: 28px; /*CHANGED*/
}
/*End header styling*/
				/*Start FAQ section styling*/

				#faq-section{
					width: auto;
					padding: 0px 10px; /*Text padding*/
					height: 512px;
					background-image: url("images/900px/faqbackground900.jpg");
					background-size: 360px 512px; /*CHANGED*/
				}

				#faq-section h1{
					color: #c10324;
					font-size: 0.9em;
				}

				#faq-section p{
					color: white;
					font-size: 0.6em;
				}

					#faq-section ul {
						color: #FFF;
						font-family: 'Open Sans', 'Century Gothic Regular', sans-serif;
						list-style: none;
						line-height: 20px;
						font-size: 0.6em;
					}

				/*End FAQ section styling*/
/*Start 'What's New?' background red box styling*/

#whatsnew{
	height: 380px; /*CHANGED*/
	width: 100%; /*CHANGED*/
	background-color: #c10324; /*set size and background colour*/
	/*position: absolute; CHANGED - Mobile Only*/
	text-align: center;
	margin-top: 140px; /*Has to have 210px added for sticky menu*/ /*CHANGED*/
	z-index: 4;
}

.whatsnewtop, .whatsnewbottom, #whatsnew h1, #whatsnew p{
	display: inline-block;
	padding: 8px; /*CHANGED*/
}

#whatsnew h1{
	color: white;
	font-size: 1.7em; /*CHANGED*/
	position: relative;
	bottom: 1.9px; /*CHANGED*/
	padding: 0px 7px;
}

#whatsnew p{
	color: white;
	width: 220px; /*CHANGED*/
	height: 50px; /*CHANGED*/
	font-size: 1em; /*CHANGED*/
	bottom: 0px;
	position: relative;
	top: 204px; /*CHANGED*/
}

.whatsnewtop{
	display: none;
}

.whatsnewbottom{
	display: none;
}

/*End 'What's New?' background red box styling*/

/*Start movie slider styling*/

#film_roll_container{
	width: 100%; /*CHANGED*/
	height: 190px; /*CHANGED*/
	position: absolute;
	margin-top: -305px; /*CHANGED - Mobile only*/
	z-index: 6;
}

#film_roll img{ /*image sizes for carousel - CHANGE FOR EACH RESOLUTION*/
	width: 120px; /*CHANGED*/
	height: 190px; /*CHANGED*/
}

#film_roll img:hover{ /*Make the images in the slider change opacity on hover*/
	opacity: 0.5;
}


/*End movie slider styling*/

/*Start 'How It Works' styling 1920px wide*/

#how-it-works, #how-it-works-condensed, #how-it-works-condensed-2{
	width: auto;
	display: block;
	text-align: center; /*CHANGED - Mobile Only*/
	position: relative;
	top: -25px; /*Relative position mobile only*/
	height: 590px; /*CHANGED*/
	background-image: url("images/768px/cinemareel768.jpg");
	background-size: 360px 590px; /*CHANGED*/
}

#how-it-works .section-text{ /*refers to all text and clickable icons*/
	position: relative;
	top: 360px; /*CHANGED*/
	float: right;
	padding-right: 80px; /*CHANGED*/
}

#howitworksman{ /*refers to the 'How does it work?' image of the guy with the thought bubble*/
	/*position: relative;
	top: 300px; CHANGED
	left: 55px; CHANGED
	float: left;
	width: 327px; CHANGED
	height: 474px; CHANGED
	background-image: url("images/1024px/howitworks1024.png");
	background-size: 327px 474px; CHANGED
	background-position: center;
	background-repeat: no-repeat;*/
	visibility: hidden;
}

#how-it-works-title{ /*Mobile only - hidden on desktop*/
	padding-top: 20px;
	font-size: 1.9em;
	color: black;
}

.how-it-works-section, .how-it-works-section-condensed{ /*refers to each individual text/icon image combination*/
	width: 303px; /*CHANGED*/
	clear: right;
	display: flex;
	align-items: center; /*center the icon and text divs vertically*/
	position: relative; /*CHANGED/ADDED*/
	bottom: 340px; /*CHANGED/ADDED*/
	left: 55px; /*resolutions lower than 479px*/
	padding: 3px; /*CHANGED - Mobile Only*/
}

#clickable-icon-1, #clickable-icon-2, #clickable-icon-3, #clickable-icon-4, #clickable-icon-5{ /*refers to just the icon image in each individual text/icon combination*/
	height: 117px; /*CHANGED*/
	width: 117px; /*CHANGED*/
	float: right;
	background-size: 117px 117px; /*CHANGED*/
	background-repeat: no-repeat;
}

.how-it-works-section-title, .how-it-works-section-title-condensed{ /*refers to just the text (header and p tags) in each individual text/icon combination*/
	width: 180px; /*CHANGED*/
	padding-right: 10px; /*CHANGED*/
	float: left;
}

.how-it-works-section-title h1, .how-it-works-section-title-condensed h1{ /*refers to just the header in each individual text/icon combination*/
	float: right;
	color: black;
	font-size: 1.1em; /*CHANGED*/
}

.how-it-works-section-title p, .how-it-works-section-title-condensed p{ /*refers to just the p tag in each individual text/icon combination*/
	position: relative;
	bottom: 31px; /*CHANGED*/
	float: right;
	font-weight: 600;
	text-align: right;
	color: black;
	font-size: 1em; /*CHANGED*/
}

/*code to make icons change when hovered*/

#clickable-icon-1{
	background-image: url("images/1920x1080/norestrictions.png");
}

#clickable-icon-2{
	background-image: url("images/1920x1080/ticketsforall.png");
}

#clickable-icon-3{
	background-image: url("images/1920x1080/howaccess.png");
}

#clickable-icon-4{
	background-image: url("images/1920x1080/redeemcode.png");
}

#clickable-icon-5{
	background-image: url("images/1920x1080/employeebenefit.png");
}

#clickable-icon-1:hover{
  	animation: fadein ease 0.6s forwards;
	background-image: url("images/1920x1080/norestrictionsselect.png");
}

#clickable-icon-2:hover{
	animation: fadein ease 0.6s forwards;
	background-image: url("images/1920x1080/ticketsforallselect.png");
}

#clickable-icon-3:hover{
	animation: fadein ease 0.6s forwards;
	background-image: url("images/1920x1080/howaccessselect.png");
}

#clickable-icon-4:hover{
	animation: fadein ease 0.6s forwards;
	background-image: url("images/1920x1080/redeemcodeselect.png");
}

#clickable-icon-5:hover{
	animation: fadein ease 0.6s forwards;
	background-image: url("images/1920x1080/employeebenefitselect.png");
}

@keyframes fadein { /*Fade in transition animation for clickable icons*/
	0% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}

#how-it-works-condensed{ /*container height for FAQ section*/
	height: 520px; /*CHANGED*/
}

#how-it-works-condensed-2{ /*container height for How It Works section*/
	height: 400px;
}

.how-it-works-section-condensed{
	top: 50px;
	left: 20px;
}

/*End 'How Does It Work?' styling*/

				/*Start 'Did You Know?' section*/
				#did-you-know{
					padding: 0 30px; /*Text padding*/
					padding-top: 75px;
					height: 200px;
					width: auto;
					margin-bottom: -10px;
					margin-top: -25px;
					background-image: url("images/900px/didbackground900.jpg");
					background-size: 360px 181px;
					background-repeat: no-repeat;
				}

				#did-you-know h1{
					color: #c10324;
					text-align: center;
					font-size: 1.5em;
				}

				#did-you-know p{
					color: white;
					text-align: center;
					font-size: 0.9em;
				}

				/*End 'Did You Know?' section*/

/*Start the disclaimer "7 Days a week..." styling*/

#disclaimer{
	width:auto;
	display: block;
	text-align: center;
	position: relative;
	bottom: 35px;
	height: 140px; /*CHANGED*/
	z-index: 2;
	background-color: #c10324
}

.disclaimer-lines, #disclaimer h1{
	display: inline-block;
	padding: 15px; /*CHANGED*/
}

.disclaimer-lines{
	width:37px; /*CHANGED*/
	height:42px; /*CHANGED*/
	background-image:url("images/768px/disclaimerlines768.png");
	background-size: 37px 42px; /*CHANGED*/
	background-position: center;
	background-repeat: no-repeat;
}

#disclaimer h1{
	color: white;
	width: 190px; /*CHANGED*/
	height: 193px; /*CHANGED*/
	font-size: 1.4em; /*CHANGED*/
	position: relative;
	bottom: 0px; /*CHANGED*/
}
/*End disclaimer div styling*/
/*Start of 'What Members Are Saying' section*/

#members-say{
	width: 100%;
	display: block;
	height: 380px; /*CHANGED*/
	position: relative;
	bottom: 37px; /*CHANGED*/
	z-index: 1;
	background-image: url("images/768px/cinemaseats768.jpg"); /*CHANGED*/
	background-size: 360px 380px; /*CHANGED*/
	background-position: center;
	background-repeat: no-repeat;
}

#members-say-lady{
	/*width: 350px; 
	height: 545px; 
	background-image:url("images/1024px/whatcustomers1024.png");
	background-size: 350px 545px; 
	background-position: center;
	background-repeat: no-repeat;
	float: right;
	position: relative;
	right: 46px; 
	top: 70px;*/
	visibility: hidden; /*Mobile only*/
}


/*End of 'What Members Are Saying' section*/
/*Start of What Members Are Saying quotes carousel - This CSS is mostly not written by myself. It has just been modified. Source: http://bestjquery.com/tutorial/testimonial/demo69/*/

#quotes_container{ /*container for slider and controls*/
	float: left;
	position: relative;
	top: 0px; /*CHANGED*/
	left: 23px; /*CHANGED*/
	width: 100%; /*CHANGED*/
	height: 380px; /*CHANGED*/
}

.testimonial{
    margin: 0 50px 10px 0; /*CHANGED*/
    text-align: center;
    position: relative;
}

.testimonial:before{ /*don't show touch screen box*/
    visibility: hidden;
}

.testimonial .description:before{ /*Don't show icons above logo 1*/
    visibility: hidden;
}
.testimonial .description:after{ /*Don't show icons above logo 2*/
    visibility: hidden;
}

.testimonial .description{ /*comments styling*/
    padding: 10px; /*CHANGED*/
    margin-bottom: 10px; /*CHANGED*/
	color: white;
	font-family: 'Century Schoolbook', sans-serif; /*'Century Schoolbook' same as PSD design*/
	font-weight: bold;
	font-style: italic;
	font-size: 1.3em; /*CHANGED*/
    position: relative;
}

.pic-title{ /*container for pic and title*/
	display: flex;
	align-items: center;
	position: relative;
	left: 65px; /*CHANGED*/
}

.testimonial .pic{ /*custom image, no border*/
    width: 50px; /*CHANGED*/
	height: 50px; /*CHANGED*/
	background-image:url("images/1920x1080/logocomments1920.png");
	background-size: 50px 50px; /*CHANGED*/
    margin-bottom: 40px; /*CHANGED*/
}

.testimonial .title{
	font-size: 1.3em; /*CHANGED*/
	width: 158px; /*CHANGED*/
	height: 96px; /*CHANGED*/
	text-align: left;
	padding-left: 15px; /*CHANGED*/
	color: white;
	font-family: 'Open Sans', 'Century Gothic Regular', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 7px 0;
}


.testimonial .post{
    display: block;
	font-size: 3em;
	font-family: 'Open Sans', 'Century Gothic Regular', sans-serif;
    color: white;
    text-transform: capitalize;
}
.owl-theme .owl-controls{ /*container for slider controls*/
	/*margin-top: 0;
	position: relative;
	right: 50px; CHANGED*/
	visibility: hidden; /*Mobile Only*/
}
.owl-theme .owl-controls .owl-page span{ /*slider controls styles and sizes*/
    width: 20px; /*CHANGED*/
    height: 15px; /*CHANGED*/
    background: #553e4e;
    border-radius: 0;
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
    transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span{ /*slider controls styles and sizes part 2*/
    width: 15px; /*CHANGED*/
    height: 15px; /*CHANGED*/
    border-radius: 50%;
    background: white;
}

/*End of What Members Are Saying Quotes Carousel*/
/*Start of second divider*/

#second-divider{
	width: 100%; /*CHANGED*/
	height: 20px; /*CHANGED*/
	background-image:url("images/768px/dividersecond768.jpg");
	background-size: 360px 20px; /*CHANGED*/
	position: relative;
	bottom: 38px; /*CHANGED*/
	z-index: 5;
}

/*End of second divider*/
/*Start of footer section*/

#footer-container{ /*Overall dimensions and positioning of the footer*/
	width: 100%; /*CHANGED*/
	height: 670px; /*CHANGED*/
	position: relative;
	left: 0px; /*CHANGED*/
	bottom: 5px; /*CHANGED*/
}

#popcorn-pic{ /*Popcorn picture floating left in the footer*/
	/*float: left;
	width: 420px; CHANGED
	height: 500px; CHANGED
	background-image:url("images/1920x1080/popcornfooter1920.png");
	background-size: 420px 500px; CHANGED
	position: relative;
	top: 71px; CHANGED*/
	visibility: hidden; /*Mobile only*/
}

#signoff-footer{ /*All text centered in footer, float right*/
	width:100%; /*CHANGED*/
	display: block;/*Mobile only*/
	margin: 0 auto; /*Mobile only*/
	text-align: center;
	/*float: right; No float on mobile*/
}

#third-divider{ /*Third divider above social media icons*/
	display: block;
	clear: left;
	float: left;
	width: 100%; /*CHANGED*/
	height: 2px; /*CHANGED*/
	background-image:url("images/1920x1080/dividerthird1920.png");
	background-size: 360px 2px; /*CHANGED*/
	margin-top: 35px; /*CHANGED*/
}

#signoff-footer h1{ /*The styles for the "Contact" footer*/
	color: white;
	font-size: 2.2em; /*CHANGED*/
}

#signoff-footer p{ /*Sign off footer in same font style as header, smaller text*/
	font-family: 'Staatliches';
	color: white;
	font-size: 1.1em; /*CHANGED*/
}

#signoff-footer a{ /*Force links in footer to be white*/
	color: white;
	text-decoration: none;
}

#signoff-footer a:hover{ /*Link hover in footer red*/
	color: #c10324;
}

#footer-logo{ /*The footer logo, inline-block to float center*/
	display: inline-block;
	width: 100px; /*CHANGED*/
	height: 100px; /*CHANGED*/
	background-image:url("images/1920x1080/logocomments1920.png");
	background-size: 100px 100px; /*CHANGED*/
}

#social-media-icons{ /*container for all social media icons in footer*/
	display: block;
	text-align: center;
	width: 140px; /*CHANGED*/
	height: 200px; /*CHANGED*/
	margin: 25px auto; /*CHANGED*/
	position: relative;
	top: 40px; /*CHANGED*/
}

#facebook-pic, #twitter-pic{ /*display the icons as inline-block to center them*/
	display: inline-block;
}

#facebook-pic{ /*Facebook icon*/
	float: left;
	width: 60px; /*CHANGED*/
	height: 60px; /*CHANGED*/
	background-image:url("images/1920x1080/facebookwhite.png");
	background-size: 60px 60px; /*CHANGED*/
}

#twitter-pic{ /*Twitter icon*/
    float: right;
    width: 108px;
    height: 50px;
    font-family: 'Staatliches';
    font-size: 0.9em;
    text-align: center;
    position: relative;
    left: 20px;
    bottom: 40px;
    color: white;
}


#facebook-pic:hover{ /*Facebook icon hover*/
	background-image:url("images/1920x1080/facebookred.png");
}

#twitter-pic:hover{ /*Twitter icon hover*/
	background-image:url("images/1920x1080/twitterred.png");
}

/*End of footer section*/
/*Start Of forms styling*/
#formdiv, #contact_formdiv{
	width: 75% !important;
	display: block !important;
	position: relative;
	z-index: 4;
}

#contact_formdiv{
	margin: 0px auto !important;
	margin-bottom: -50px !important;
	font-family: 'Open Sans', 'Century Gothic Regular', sans-serif !important;
}

input, #contact_formdiv label, #formdiv label, #formdiv h4, #errormsg, #ddlDepartments{
	height: 25px !important;
	font-size: 0.9em !important;
	font-family: 'Open Sans', 'Century Gothic Regular', sans-serif !important;
}

#ddlDepartments{
	width: auto !important;
	margin-bottom: 10px !important;
}

#errormsg{
	width: 85% !important;
	height: 50px !important;
}

label a, h4 a{
	color: #c10324 !important;
}

input, textarea{
	width: 100% !important;
	margin-bottom: 10px !important;
}

textarea {
	height: 180px !important;
	font-size: 0.9em !important;
	font-family: 'Open Sans', 'Century Gothic Regular', sans-serif !important;
}

button{
	font-size: 0.9em !important;
	background-color: #c10324 !important;
	font-family: 'Open Sans', 'Century Gothic Regular', sans-serif !important;
	width: 180px !important;
}

/*Center form images*/

.dt-sc-portfolio-container{
	margin-left: auto !important;
	margin-right: auto !important;
    display: none;
}


/*Redeem form styles*/

#redeemform{
	width: 80% !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
    margin-bottom: 110px;
	font-family: 'Open Sans', 'Century Gothic Regular', sans-serif !important;
    padding: 50px;
}

.formleft{
    margin-top: 20px;
    padding-left: 5px;
    padding-right: 5px;
	width: auto !important;
}

.formright{
    margin-top: 20px;
    padding-left: 5px;
    padding-right: 5px;
	width: auto !important;
}

}
/*End of forms styling*/