@charset "utf-8";
/* CSS Document */

/* Google Fonts */

/* FONT FAMILY:
	font-family: 'Raleway', sans-serif;
	font-family: 'Montserrat', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Oswald', sans-serif;
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Oswald|Hind|Raleway&display=swap');



html, body
{
	margin: 0;
	padding: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	background: #ccc;
}




/* HEADER OPEN */

/* HeaderBar */

header
{
	position: relative;
	top: 0;
	left: 0;
	padding: 20px 100px;
	width: 100%;
	align-items: center;
	box-sizing: border-box;
	background: rgba(0,0,0,.8);
	box-shadow: 0 5px 15px rgba(9,9,9,.5);
	display: flex;
	justify-content: center;	
}

/* Header Logo */

header .logo
{
	transform: scale(1);
	border: 1px solid grey;
	width: 60px;
	height: 60px;
	padding: 5px;
	line-height: 60px;
	float: left;
}

/* Header NavBar */

header nav
{
	float: none;
	background: rgba(9,9,9,.5);
	box-shadow: 0 5px 15px rgba(0,0,0,.2);	
}

header nav ul
{
	margin: 0;
	padding: 0;
	display: flex;
}

header nav ul li
{
	list-style: none;
}

header nav ul li a
{
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	color: #fff;
	text-decoration: none;
	display: block;
}

header nav ul li a:hover,
header nav ul li a.active,
/*added this */
header nav #currentpage a
{
	color: #333;
	background: rgba(255,204,51,0.5);
}


/* Header Mobile Menu */

.menu-toggle
{
	transform: scale(0.8);
	border: 1px solid grey;
	width: 60px;
	height: 60px;
	padding: 5px;
	line-height: 60px;
	float: left;
	display: none;	
}

/*HEADER CLOSE*/



/* PAGE WRAPPER */


.content-footer-gap-parent 

{
  display: flex;
  min-height: 100vh;
  flex-direction: column;

  
}

.content-footer-gap-child 
{
	flex: 1;

}




section
{
	
}

.section-header
{
max-width: 1400px;
	margin: 0 auto 0 auto;
	background: rgba(255,204,51,0.4);
	color: #000;
	border: 1px solid white;	
}

.section-header span
{
	display: block;
	font-size: 1.1em;
	margin: 8px;
}

.section-header button {
    background: rgba(0,0,0,.5);
    color: #efefef;
    border: 1px solid grey;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
	width: 150px;
	margin: 3px;
}


.section-header button:hover {
     background: rgba(255,255,255,.3);
	 color: #333;
    border: 1px solid #999;
}

.callout
{

	color: #fefefe;
	font-family: 
	font-size: 36px;
	letter-spacing: 1px;
	text-shadow: 1px 1px #000;

}

.section-parent
{
	max-width: 1400px;
	margin: 0 auto 0 auto;
	background: rgba(0,0,0,.5);
	color: #d3d3d3;
	border: 1px solid white;	
	
/* Could use JUSTIFY-CONTENT:'center', 'space-end' or 'space-start */
}


.imgBorder
{
	border: 1px solid grey;	
	
}

	.section-child
	{
		border: 1px solid grey;
		padding: 20px;
		background: rgba(9,9,9,.5);
		box-sizing: border-box;
		margin: 10px 10px 10px 10px;
		flex-basis: 33.3333%;
		
		
	}
	
		.section-child:nth-child(1) 
		{
		}

		.section-child:nth-child(2) 
		{
		}

		.section-child:nth-child(3) 
		{
		}
		

.twin-section-parent
{
	max-width: 1400px;
	margin: 0 auto 0 auto;
	background: rgba(0,0,0,.5);
	color: #d3d3d3;
	border: 1px solid white;	
	
/* Could use JUSTIFY-CONTENT:'center', 'space-end' or 'space-start */
}


.twin-section-parent img
{
	border: 1px solid grey;	
	
}

	.twin-section-child
	{
		border: 1px solid grey;
		padding: 20px;
		background: rgba(9,9,9,.5);
		box-sizing: border-box;
		margin: 10px 10px 10px 10px;
		flex-basis: 50%;
		
		
	}
	
		.twin-section-child:nth-child(1) 
		{
		}

		.twin-section-child:nth-child(2) 
		{
		}


		


/* PAGE BG */


.home-bgcover
{
	width:100%;
	height: 100vh;
	background: url(img/homeCoverLg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.films-bgcover
{
	width:100%;
	height: 100vh;
	background: url(img/filmsCoverLg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.tv-bgcover
{
	width: 100%;
	height: 100vh;
	background: url(img/tvCoverLg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}


.theatre-bgcover
{
	width: 100%;
	height: 100vh;
	background: url(img/theatreCoverLg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}


.services-bgcover
{
	width: 100%;
	height: 100vh;
	background: url(img/servicesCoverLg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/* filter: blur(5px); */
}


.connect-bgcover
{
	width: 100%;
	height: 100vh;
	background: url(img/connectCoverLg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/* filter: blur(5px); */
}



/* //PAGE BG */


.content-container
{
	width: 80%;
	height: calc(100vh-150px);
	margin: 0;
	display: table;
	box-sizing: border-box;
}
	
.row::after {
  	content: "";
  	clear: both;
  	display: table;
}
	
[class*="col-"] {
  	float: left;
	text-align: center;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, img{
	max-width: 100%; 
	height: auto;	
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


/* SPACE CSS START */

.space100
{
	height: 100vh;
}


.space90
{
	height: 90vh;
}

.space80
{
	height: 80vh;
}

.space70
{
	height: 70vh;
}

.space60
{
	height: 60vh;
}

.space50
{
	height: 50vh;
}

.space40
{
	height: 40vh;
}

.space30
{
	height: 30vh;
}

.space25
{
	height: 25vh;
}

.space20
{
	height: 20vh;
}

.space10
{
	height: 10vh;
}

/* SPACE CSS END */



p, h1, h2, h3, h4
{
	padding: 0 20px 20px 20px;
}





.btn{
	padding: 5px 5px;
	}
	

.btn-button {
    background: rgba(242,38,19,.3);
    color: white;
    border: 1px solid grey;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
	width:200px;
	margin: 3px;
}


.btn-button:hover {
     background: rgba(255,255,255,.3);
    border: 1px solid #999;
}

/*
.btn{
	padding: 20px 20px;
	}
*/	




/*FORM PAGE OPEN*/

.blank{
	height: 30px;
}

.contact-form{
	background: rgba(255,204,51,0.3);
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.3);
	margin: 0 auto;
	width: 350px;
	text-align: center;
}

/* Removed h2 from form...
.contact-form h2{
	background: #efefef;
	margin-top: 0;
	padding: 10px;
}
...*/

.contact-form input{
	display: block;
	width: 90%;
	margin: 10px auto;
	padding: 10px;

}

.contact-form textarea{
	width: 90%;
	margin: 5px auto;
	padding: 10px;
	height: 80px;
	
}

.g-recaptcha{
	margin: 10px 20px;
	
}

.submit-btn{
	cursor: pointer;
	width: 150px !important;
	margin-left: 18px !important;

   
}


.submit-btn:hover{
	background: rgba(255,233,233,0.6);
   
}

.status{
	font-size: 15px;
	color: #efefef;
	padding: 15px;
}

.status span{
	color: white;
}


/* MODAL CSS OPEN */


/* MODAL LINK BUTTON */
.modal-open
{
	background: rgba(242,38,19,.3);
    color: white;
    border: 1px solid grey;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
	width: 200px;
	margin: 3px;
}

.modal-open:hover
{
    background: rgba(255,255,255,.3);
    border: 1px solid #999;
}

/*//*/


.modal
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 2;
	display: none;
	animation: modal-open .5s;
}

.modal-content
{
	background: #fff;
	margin-top: 100px;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	padding: 8px 24px;
	border-radius: 4px;
	z-index: 4;
	
}

.modal-header
{
	font-weight: 500;
	padding: 10px 0;
	font-size: 26px;
}


.modal-header .modal-close
{
	float: right;
	font-size: 30px;
	color: rgba(242,38,19,.8);
	padding: 5px 8px;
	border: none;
	cursor: pointer;
}


.modal-header .modal-close:hover
{

		color: rgba(242,38,19,.3);

}

.modal-body
{
	color: #7b7b7b;
	padding: 15px 0;
	text-align: justify;
}

.modal-footer .modal-close
{
	
	background: rgba(242,38,19,.6);
	font-size: 14px;
    color: white;
    border: 1px solid grey;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
	width: 150px;
	margin: 3px;
	/*padding: 8px 16px;
	font-size: 14px;
	border: none;
	outline: none;
	border-radius: 4px;
	color: #1a73e8;*/
}


.modal-footer .modal-close:hover
{
    background: rgba(242,38,19,.3);
    border: 1px solid #999;
}


@keyframes modal-open
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}



/* MODAL CSS CLOSED */




/*SOCIAL MEDIA CLOSE*/

/*FORM PAGE CLOSE*/



	


/* //PAGE WRAPPER */



/* FOOTER OPEN */

footer
{
	
}

.footer-top-parent
{
	max-width: 1400px;
	margin: 40px auto 0 auto;
	background: rgba(0,0,0,.6);
	color: #d3d3d3;
	border: 1px solid white;	
	
/* Could use JUSTIFY-CONTENT:'center', 'space-end' or 'space-start */
}

	.footer-top-child
	{
		border: 1px solid grey;
		padding: 20px;
		background: rgba(9,9,9,.5);
		box-sizing: border-box;
		margin: 10px 10px 10px 10px;
		flex-basis: 30%;
		
		
	}
	
		.footer-top-child:nth-child(1) 
		{
		}

		.footer-top-child:nth-child(2) 
		{
		}

		.footer-top-child:nth-child(3) 
		{
		}
		


/* FOOTER-LINKS */

.footer-links ul a
{
	display: block;
	margin-bottom: 10px;
	font-size: 1em;
	transition: all .3s;
	text-decoration: none;
	color: #ccc;
}

.footer-links ul a:hover
{
	color: white;
	margin-left: 15px;
	transition: all .3s;

}

/* FOOTER-CONNECT */

.footer-connect span
{
	display: block;
	font-size: 1.1em;
	margin: 8px;
}

.socials a 
{
	border: 1px solid grey;
	width: 45px;
	height: 41px;
	padding-top: 5px;
	margin-right: 5px;
	text-align: center;
	display: inline-block;
	font-size: 1.3em;
	border-radius: 5px;
	transition: all .3s;
	transform: scale(0.7);
}

.socials a:hover 
{
	border: 1px solid white;
	transform: scale(0.8);
	transition: all .3s;
}


.footer-bottom
{
	background: #303036;
	color: #686868;
	height: 50px;
	width: 100%;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* FOOTER CLOSE */

	
	
/*RESPONSIVE QUERY OPEN*/
	
/* 

Extra small devices (phones, 600px and down)

When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the 'MENU' link to open and close the topnav (.icon)
...
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally)

*/

/* Small devices (portrait tablets and large phones, 600px and up) */


@media screen and (max-width: 600px)

{
	
html, body
{
	font-size: 14px;
}	


header
	{
		padding: 0 20px;
	}
	
	
	header .logo
	{
	
	transform: scale(0.8);
	border: 1px solid grey;
	width: 60px;
	height: 60px;
	padding: 5px;
	line-height: 60px;
	float: left;
	}
	
	.menu-toggle
	{
	display: block;
	}
	
	
	header nav
	{
		position: absolute;
		width: 100%;
		height: 100vh;
		background: #333;
		top: 70px;
		left: -100%;
		transition: 0.5s;
		z-index: 1;
	}
	
	header nav.active
	{
		left: 0;
	}
	
	header nav ul
	{
		display: block;
		text-align: center;
	}
	
	header nav ul li a
	{
		border-bottom: 1px solid rgba(0,0,0,.2);
	
}

/* Responsive layout - makes columns stack on top of each other instead of next to each other */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 
{
    width: 100%;

}

section
{
	height: auto;
}


.home-bgcover
{
	width: 100%;
	background: url(img/homeCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.films-bgcover
{
	width:100%;
	height: 100%;
	background: url(img/filmsCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

.tv-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/tvCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


.theatre-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/theatreCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


.services-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/servicesCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	/* filter: blur(5px); */
}

.connect-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/connectCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	/* filter: blur(5px); */
}




.modal-content
{
	
	height: 400px;
	width: 80%;
	overflow-y: auto;
	
}



/* Responsive layout - makes columns stack on top of each other instead of next to each other */


/*FORM PAGE OPEN*/


.contact-form{
	
	width: 100%;
	text-align: center;
}



/*FORM PAGE CLOSE*/




/*FOOTER*/

footer
{
	height: auto;
}

footer .footer-content
{
	height: auto;
	flex-direction: column;	
}

footer .footer-content .contact-form
{
	padding-bottom: 90px;
}

footer .footer-bottom
{
	font-size: 12px;
}

/* Responsive layout - makes columns stack on top of each other instead of next to each other */



/*FOOTER*/

 
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width: 768px)
{
	

html, body
{
	font-size: 14px;
}	

header
	{
		padding: 0 20px;
	}
	
	
	header .logo
	{
	
	transform: scale(0.8);
	border: 1px solid grey;
	width: 60px;
	height: 60px;
	padding: 5px;
	line-height: 60px;
	float: left;
	}


.home-bgcover
{
	width: 100%;
	background: url(img/homeCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.films-bgcover
{
	width:100%;
	height: 100%;
	background: url(img/filmsCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

.tv-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/tvCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


.theatre-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/theatreCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


.services-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/servicesCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	/* filter: blur(5px); */
}

.connect-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/connectCoverSm.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	/* filter: blur(5px); */
}





/*FORM PAGE OPEN*/


.contact-form{

	width: 100%;
	text-align: center;
}


/*FORM PAGE CLOSE*/



}
		


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) and (max-width: 1199px)

{

	
	
	
.home-bgcover
{
	width: 100%;
	background: url(img/homeCoverMd.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}	

.films-bgcover
{
	width:100%;
	height: 100%;
	background: url(img/filmsCoverMd.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

.tv-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/tvCoverMd.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


.theatre-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/theatreCoverMd.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


.services-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/servicesCoverMd.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	/* filter: blur(5px); */
}

.connect-bgcover
{
	width: 100%;
	height: 100%;
	background: url(img/connectCoverMd.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	/* filter: blur(5px); */
}


	.footer-top-parent
	{
		display: flex;
		justify-content: space-between;
	}
	
	.contact-form{

	width: 100%;
	text-align: center;
}

.footer-links ul a
{
	display: block;
	margin-bottom: 10px;
	font-size: 1.2em;
	transition: all .3s;
	text-decoration: none;
	color: #ccc;
}

}


@media (min-width: 1200px)
{
		.section-parent
	{
		display: flex;
		justify-content: space-between;
	}
	
		.twin-section-parent
	{
		display: flex;
		justify-content: space-between;
	}
	
	.footer-top-parent
	{
		display: flex;
		justify-content: space-between;
	}
	




	

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px)

{


}


	
	
		
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
{
	
	
}


/*RESPONSIVE QUERY CLOSE*/


@media only screen and (max-width: 767px) {
 /* body {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections 
    background-image: url(images/background-photo-mobile-devices.jpg);
  }*/
}