/* Gradient Map Colors */
/* 4b0809 */
/* 931516 */

body {
		margin:0;
    font-family: 'Montserrat', sans-serif;
}

a {
		color:#dc2123;
		text-decoration:none;
}

a:hover {
		text-decoration:underline;
		color:#333;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.nowrap {
		white-space:nowrap;
}

.center {
		max-width:1280px;
		padding:0 40px;
		margin:auto;
}

.button {
		color:#333;
		background:transparent;
		border:2px solid #333;
		text-decoration:none;
		padding:7px 30px;
		border-radius:3px;
		display:inline-block;
		font-size:.8em;
		font-weight:700;
		letter-spacing:.1em;
		text-transform:uppercase;
		margin-top:20px;
		transition:all .25s ease-in;
}

.button:hover {
		background:#dc2123;
		border-color:#dc2123;
		color:#fff;
		text-decoration:none;
}

header {
		position:absolute;
		width:100%;
		text-align:center;
		color:#333;
		z-index:100;
		top:0;
}

#navigation-toggle,
#navigation-hamburger {
		display:none;
}

#primary-menu {
		padding:0 40px;
}

#primary-menu .hidden-menu {
		display:none;
}

#primary-menu .center {
		background:rgba(255,255,255,.8);
		padding:0;
}

.header-top-bar {
		background:rgba(0,0,0,.2);
		color:#eee;
		margin-bottom:20px;
}

#primary-menu ul {
		margin:0;
		padding:0;
		list-tyle-type:none;
		display:table;
		text-align:center;
		width:100%;
		font-family: 'Ubuntu Condensed', sans-serif;
}

#primary-menu li {
		display:table-cell;
		vertical-align:middle;
}

#primary-menu li a {
		padding:20px 10px;
		display:block;
		text-decoration:none;
		color:#333;
		text-transform:uppercase;
		font-weight:400;
		font-size:1.2em;
		position:relative;
}

#primary-menu li a:hover {
		color:#dc2123;
}

#primary-menu li a:hover:after {
		content:" ";
		width:100%;
		left:0;
		bottom:0;
		border-bottom:3px solid #dc2123;
		position:absolute;
}

#fonco-logo {
		width:500px;
		display:block;
		padding:0 20px;
		margin:auto;
		margin-bottom:20px;
}

#fonco-logo img {
		width:100%;
}

#fonco-logo:hover img {
		opacity:.5;
}

.header-address {
		float:left;
		font-size:.8em;
		font-weight:600;
		text-align:left;
		padding:10px 0;
}

.header-address .fas {
		margin-right:5px;
		margin-left:20px;
}

.header-address .header-email {
		margin-left:20px;
		float:right;
		margin-top:2px;
}

#secondary-menu ul {
		padding:0 10px 0;
		margin:0;
		list-style-type:none;
		text-align:right;
		text-transform:uppercase;
		font-weight:600;
		font-size:.8em;
		float:right;
}

#secondary-menu li {
		display:inline-block;
		padding:10px;
}

#secondary-menu li a {
		text-decoration:none;
		color:#fff;
}

#secondary-menu li a:hover {
		color:#fff;
}

#secondary-menu #menu-about {
		color:#ee1d23;
}

#secondary-menu #menu-facebook {
		color:#3a5794;
}

#secondary-menu #menu-instagram {
		color:#d62977;
}

#secondary-menu #menu-twitter {
		color:#1c9cea;
}

/* Footer */
#footer {
		background:#111;
		color:#eee;
		padding:100px 100px 20px;
		font-weight:600;
		font-size:.8em;

}

#footer .copyright {
		clear:both;
		text-align:center;
		font-weight:400;
		letter-spacing:.05em;
		padding-top:30px;
		color:#999;
}

.home-video-container {
		position:relative;
		padding-top:300px;
		padding-bottom:50px;
		background:#111;
		background-image:url('/img/home/dark_wall.png');
}


#home-video {
		width:100%;
		/*max-height:90vh;
		object-fit:cover;*/
		display:block;
		min-height:300px;
}

.footer-address {
		float:left;
		line-height:3;
		text-transform:uppercase;
}

.footer-address .fas {
		margin-right:10px;
}

#footer-menu {
		text-transform:uppercase;
		padding:0;
		margin:0;
		float:right;
		list-style-type:none;
		text-align:right;
}

#footer-menu li {
		margin-bottom:2em;
}

#footer-menu li a {
		color:#fff;
		text-decoration:none;
}

.social {
		padding:0;
		margin:20px 0 0;
		list-style-type:none;
		line-height:2;
}

.social li {
		display:inline-block;
}

.social li a {
		color:#333;
		background:#eee;
		text-align:center;
		width:2em;
		border-radius:3px;
		font-size:1.2em;
		display:block;
		margin-right:3px;
}

.social li a:hover {
		background:#999;
		color:#000;
}

/* Hero */
/*
header.inner #primary-menu .center {
		background:#eee;
}

header.inner {
		position:relative;
		background:#222;
}

header.inner .header-top-bar {
		background:none;
		margin-bottom:0;
}

header.inner #primary-menu {
		background:#262626;
}

header.inner #primary-menu .center {
		background:none;
}
*/
header.inner #primary-menu li a {
		padding:14px;
}

header.inner #secondary-menu li a{

}

.hero {
		width:100%;
		background:no-repeat center center;
		background-size:cover;
		height:650px;
		display:table;
		box-sizing:border-box;
		padding-top:100px;
}

#fonco-hero {
		background-image:url('/img/home/fonco-hero.jpg');
}

.hero h1 {
		margin:0;
		font-weight:800;
		color:#fff;
		text-align:center;
		text-transform:uppercase;
		display:table-cell;
		vertical-align:middle;
		font-size:4em;
		color:#eee;
}

.hero h1 .subtitle {
		display:block;
		font-weight:300;
		letter-spacing:1em;
		font-size:.6em;
		margin-left:.6em;
}

/* Home Sections */
.home-intro {
		box-sizing:border-box;
		background:#111;
		color:#fff;
		position:relative;
		text-align:center;
		padding:50px;
}

.home-intro-text {
		box-sizing:border-box;
		margin:auto;
}

.home-intro .dont-see {
		font-family: 'Ubuntu Condensed', sans-serif;
		font-size:2em;
		color:#dc2123;
		line-height:1.5;
		font-weight:700;
}

.home-intro .learn-more {
		color:#dc2123;
		text-decoration:none;
}

.home-intro .learn-more:hover {
		text-decoration:underline;
}

.callout.impossible {
		background:#111;
		color:#eee;
		font-size:2em;
		font-family: 'Ubuntu Condensed', sans-serif;
		line-height:1.5;
		font-weight:700;
		padding:10px;
		text-align:center;
		letter-spacing:.2em;
		text-transform:uppercase;
}

.home-intro p {
		font-size:1.3em;
		line-height:1.8;
		font-style:italic;
		letter-spacing:.05em;
		max-width:1000px;
		margin:1em auto;
}

.home-section {
		position:relative;
}

.home-section:after {
		content:" ";
		background:no-repeat center center;
		background-size:cover;
		position:absolute;
		width:50%;
		height:100%;
		top:0;
		box-shadow:inset 0 0 200px #000;
}

.home-section.right:after {
		right:0;
}

.home-section-text {
		padding:150px 50px;
		width:50%;
		left:50%;
		position:relative;
		box-sizing:border-box;
		background:#eee;
		color:#333;
		text-align:center;
		box-shadow:inset 0 0 200px #fff;
		position:relative;
}

.home-section.right .home-section-text {
		left:auto;
		right:0;
}

.home-section.right .home-section-text .button {

}

.home-section-text h1 {
		color:#dc2123;
		margin:0;
		font-size:3em;
		line-height:1;
		text-transform:uppercase;
		font-weight:800;
		position:relative;
		padding-bottom:10px;
}

.home-section-text h1:after {
		content:" ";
		position:absolute;
		border-bottom:2px solid #e7e7e7;
		width:100%;
		left:0;
		bottom:-10px;
}

.home-section-text p {
		font-size:1.3em;
		line-height:1.8;
		font-style:italic;
		letter-spacing:.05em;
}

.home-section-text .button {
		color:#333;
		background:transparent;
		border:2px solid #333;
		text-decoration:none;
		padding:7px 30px;
		border-radius:3px;
		display:inline-block;
		font-size:.8em;
		font-weight:700;
		letter-spacing:.1em;
		text-transform:uppercase;
		margin-top:20px;
		transition:all .25s ease-in;
}

.home-section-text .button:hover {
		background:#dc2123;
		border-color:#dc2123;
		color:#fff;
}

#production:after {
		background-image:url("/img/home/production.jpg");
		background-position:top center;
}

#design:after {
		background-image:url("/img/home/design.jpg");
}

#fabrication:after {
		background-image:url("/img/home/fabrication.jpg");
}

#costumes:after {
		background-image:url("/img/home/costumes.jpg");
}

#stages:after {
		background-image:url("/img/home/stages.jpg");
		background-position:top center;
}

#cinematography:after {
		background-image:url("/img/home/cinematography.jpg");
}

#noitom:after {
		background-image:url("/img/home/noitom.jpg");
}

#post-production:after {
		background-image:url("/img/home/post-production.jpg");
}

/* .inner-content */
.studio-map {
		max-width:100%;
		padding:20px;
		background:#ccc;
		margin-top:50px;
}

.inner-content {
		padding:50px 0;
		line-height:1.8;
		color:#000;
		font-size:1.1em;

}

.inner-content h2 {
		margin:50px 0 0;
		font-family: 'Ubuntu Condensed', sans-serif;
		text-transform:uppercase;
		font-size:2.2em;
		line-height:1.2;
		position:relative;
		padding:0 0 10px;
}

.inner-content h2:first-child {
		margin-top:0;
}

.inner-content h2 + p {
		margin-top:5px;
}

.inner-content h3 {
		text-transform:uppercase;
		font-family: 'Ubuntu Condensed', sans-serif;
		margin-bottom:5px;
}

.half-list,
.third-list {
		margin:0;
		font-style:italic;
		line-height:1.4;
		padding:20px 50px;
		box-sizing:border-box;
		color:#333;
		vertical-align:top;
		width:100%;
		column-gap:50px;
		column-count:2;
}

.half-list li,
.third-list li {
		margin-bottom:1em;
		-webkit-column-break-inside:avoid;
		page-break-inside:avoid;
		break-inside:avoid;
}

.third-list {
		column-count:3;
}

/* portfolio */
.mfp-img {
		max-height:90vh !important;
}

.mfp-title {
		padding-right:60px !important;
}

.portfolio {
		padding:75px 0;
		background:#f7f7f7;
}

.portfolio h2 {
		margin:0;
		font-family: 'Ubuntu Condensed', sans-serif;
		font-weight:normal;
		text-transform:uppercase;
		font-size:4em;
		line-height:1.2;
		position:relative;
		padding:0;
		text-align:center;
}

.portfolio h3 {
		font-family: 'Ubuntu Condensed', sans-serif;
		font-size:1.4em;
		margin:50px 0 -20px;
		padding:0;
		text-align:center;
		text-transform:uppercase;
}

.portfolio p {
		font-family: 'Ubuntu Condensed', sans-serif;
		text-align:center;
		font-size:1.5em;
		font-style:italic;
		letter-spacing:.05em;
		color:#666;
}

.portfolio-menu {
		text-align:center;
		padding:0;
}

.portfolio-menu li {
		display:inline;
		margin:0 10px;		
}

.portfolio-menu li a {

}

.portfolio-entries {
		padding-top:50px;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;		
}

.portfolio-entries a {
		margin:3px;
		max-width:45%;
}

.portfolio-entries img {
		width:100%;
		display:block;
}

.portfolio-entry {
		width:calc(20% - 10px);
		height:300px;
		background:#ddd;
		float:left;
		margin:5px;
}

/* Post production gallery */
.post-production-gallery {
		display:flex;
		margin:-1em;
		padding:0;
}

.post-production-gallery a {
		margin:1em;
		width:calc(33.33333% - 2em);
}

.post-production-gallery a img {
		width:100%;
}

.post-production-gallery a:hover img {
		opacity:.8;
}

@media screen and (max-width:1200px) {
		.home-section-text h1 {
				font-size:2em;
		}

		.home-section-text p {
				font-size:1em;
		}
}

@media screen and (max-width:1024px) {
		body {
				font-size:.8em;
		}

		.post-production-gallery a {
				width:100%;
				max-width:100%;
		}
}

@media screen and (max-width:800px) {
		.third-list {
				column-count:2;
		}

		.hero h1 .subtitle {
				display:block;
				font-weight:300;
				letter-spacing:.5em;
		}
		
		/* Responsive Menu */
		#fonco-logo {
				float:left;
				width:150px;
				max-width:40%;
		}

		#primary-menu .hidden-menu {
				display:block;
		}

		.mobile-hide {
				display:none !important;
		}

		.home-video-container {
				padding-top:150px;
		}
		
		#navigation-hamburger {
				display:block;
				padding:10px 20px;
				background:#fff;
				color:#333;
				font-family: 'Ubuntu Condensed', sans-serif;
				text-transform:uppercase;
				font-weight:bold;
		}

		#navigation-hamburger:hover {
				background:#111;
				color:#fff;
				cursor:pointer;
		}

		#primary-menu ul {
				display:none;
				position:absolute;
				background:#f7f7f7;
				right:20px;
				width:auto;
				padding:20px;
		}

		#primary-menu ul li {
				display:block;
		}

		#primary-menu ul li a {
				padding:10px;
				width:200px;
		}
		
		#primary-menu ul li a:hover {
				background:#111;
				color:#fff;
		}
		
		#primary-menu ul li a:hover:after {
				border:0;
		}
		
		#primary-menu {
				float:right;
				position:relative;
				padding:0 20px;
		}

		#navigation-toggle:checked + ul {
				display:block;
		}
}

@media screen and (max-width:640px) {	
		body {
				font-size:.8em;
		}
		.home-section-text {
				width:100%;
				left:0;
				padding:225px 50px 100px;
		}
		.home-section:after {
				width:100%;
				height:200px;
				position:absolute;
		}

		#footer {
				text-align:center;
		}
		
		#footer-menu,
		.footer-address {
				float:none;
				text-align:center;
		}

		.header-address {
				float:none;
				text-align:center;
		}
		#secondary-menu ul {
				text-align:center;
				display:block;
				width:100%;
		}		
		.hero {
				height:500px;
		}
}

@media screen and (max-width:480px) {
		.third-list {
				column-count:1;
		}

		.home-intro {
				padding:50px 0;
		}
		.center {
				padding:0 20px;
		}
		.hero {
				height:400px;
		}
		.hero h1 {
				font-size:3em;
		}

		.portfolio h2 {
				font-size:3em;
		}
}

@media screen and (max-width:300px) {
		#navigation-hamburger .menu-text {
				display:none;
		}

}