@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html { color: #222; font-size: 1em; line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio, canvas, img, svg, video { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/*  Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

.mobile { display: none; }

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */
.browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   Site styles
   ========================================================================== */
   
html { font-size: 14px; line-height: 100%; }
body { text-align: center; font-family: 'Open Sans', sans-serif; }

.container { width: 1200px; margin: 0 auto; text-align: left; }
a { color: #2f9acc; }
a:hover { color: #01557c; }
p, blockquote , h1, h2, h3, h4, h5 { line-height: 130%; }
h5 { margin: 0; font-size: 21px; }
h6 { font-size: 17px; margin: 20px 0 20px; }
.clearfix { display: block; height: 0; line-height: 0; clear: both; }

.main-area { float: left; width: 60%; }
.side-area { float: right; width: 35%; }
.main-area.large { width: 77.4%; margin-bottom: 30px; }
.side-area.small { width: 20%; margin-top: 30px; }
.main-area.large.flip { float: right; }
.side-area.small.flip { float: left; }

.open-quote, .closed-quote { position: absolute; display: block; width: 57px; height: 45px; background: transparent url(../images/open-quote.png) no-repeat top left; }
.open-quote { top: -20px; left: -62px; }
.closed-quote { background-image: url(../images/closed-quote.png); bottom: -10px; right: -57px; }

body#home #header h1 img { display: block; }
body#home #header h1 span { display: none; }

#header { padding: 18px 0; color: #fff; background-color: #2f9acc; }
#header h1 { margin: 2px 0 0; font-size: 24px; font-weight: normal; line-height: 120%; }
#header h1 a { float: left; display: block; width: 175px; margin-top: -3px; }
#header h1 img { width: 100%; }
#header h1 span { display: none; }
#header .welcome-logo { float: left; width: 50%; text-align: left; }
#responsive-menu-button { display: none; float: left; width: 48px; height: 49px; margin: 0 0 4px -3.25%; background: #333 url(../images/hamburger-menu.png) no-repeat center center; }
#responsive-menu-button span { display: none; }
#header .connections { float: right; width: 50%; text-align: right; }
#header .contact-info { display: inline-block; margin: 0 25px 0 0; padding: 10px 33px 10px 0; font-size: 15px; list-style-type: none; text-align: right; border-right: 1px solid #fff; }
#header .contact-info a { color: #fff; text-decoration: none; }
#header .contact-info a img { display: none; }
#header li { padding: 4px 0; }
#header .social-media { display: inline-block; }
.social-media a img { opacity: 0.85; filter: alpha(opacity=85); }
.social-media a:hover img { opacity: 1.0; filter: alpha(opacity=100); }
#header .social-media img { margin: -26px 0 0 5px; }

#navigation { background-color: #222; }
#navigation .container { text-align: center; }
#navigation ul { margin: 0; padding: 0; list-style-type: none; }
#navigation ul li { display: inline; }
#navigation ul li a { display: inline; display: inline-block; padding: 30px 73px; font-size: 15px; color: #fff; text-decoration: none; }
#navigation ul li a:hover { background-color: #141414; }
#navigation .director { display: none; }

#feature-section { background-color: #010609; }
#feature-section .container { height: 586px; text-align: center; background: transparent url(../images/movie-theater-seats-screen.jpg) no-repeat center top; background-size: contain; }
/* #feature-section img { margin-top: 61px; } <----- Styles for Sole Productions logo */
#feature-section img { margin-top: 26px; }

#promo-section { padding: 0 0 50px 0; background-color: #424242; }
#promo-section .container { text-align: center; }
#promo-section .movie-snippet { width: 27%; display: inline; display: inline-block; margin: -64px auto 0; background-color: #e98f07; }
#promo-section .h2b { margin-left: 3.5%; margin-right: 3.5%; }
#promo-section img { width: 100%; }
#promo-section h3 { margin: 0; padding: 18px 2%; font-size: 22px; color: #fff; line-height: 130%; }
#promo-section .blurb { height: 235px; padding: 10px 40px; font-size: 18px; line-height: 130%; text-align: left; background-color: #fff; }
#promo-section p { margin: 0; }
#promo-section .cta-section { display: table; width: 100%; }
#promo-section a { display: table-cell; width: 50%; height: 45px; vertical-align: middle; padding: 0 2% 0; font-size: 18px; text-decoration: none; color: #999; background-color: #fff; }
#promo-section a:hover { text-decoration: underline; }
#promo-section a.primary { text-transform: uppercase; color: #fff; background-color: #e98f07; }
#promo-section a.primary:hover { text-decoration: none; background-color: #db8400; }

#secondary-promo-section { padding: 30px 0; }
#secondary-promo-section .container { text-align: center; }
#secondary-promo-section .title { width: 600px; margin: -30px auto 0; padding: 20px 0 5px; background-color: #e3e3e3; }
#secondary-promo-section h2 { margin: 0; line-height: 130%; }
#secondary-promo-section .title:after { position: relative; bottom: -51px; content: " "; width: 0; height: 0; border-left: 300px solid transparent; border-right: 300px solid transparent; border-top: 30px solid #e3e3e3; }
#secondary-promo-section .movie { width: 22%; display: inline; display: inline-block; margin: 60px 1% 20px; }
#secondary-promo-section .movie.server, #secondary-promo-section .movie.dream { margin: 10px 1% 20px; }
#secondary-promo-section h4 { height: 35px; margin: 0 0 5px; padding-bottom: 5px; line-height: 130%; border-bottom: 1px solid #999; }
#secondary-promo-section .movie img { width: 79%; }
#secondary-promo-section .movie div { margin-top: 5px; border-top: 1px solid #999; }
#secondary-promo-section a { display: inline; display: inline-block; margin: 10px 0; padding: 10px 10px; text-decoration: none; }
#secondary-promo-section a:hover { color: #fff; background-color: #e98f07; }
#secondary-promo-section span { color: #000; }
#secondary-promo-section a:last-child { font-weight: bold; text-transform: uppercase; }

#highlight { padding: 60px 0; font-size: 16px; background-color: #2f9acc; }
#highlight a { float: left; display: block; padding: 10px 15px; color: #333; font-size: 16px; text-decoration: none; font-weight: bold; background-color: #fff; }
#highlight a:hover { background-color: #ededed; }
#highlight .director, #highlight .endorsement { width: 49%; display: inline; display: inline-block; color: #fff; box-sizing: border-box; }
.profile-pic { float: left; width: 175px; height: 175px; margin-right: 5%; overflow: hidden; -webkit-border-radius: 115px; border-radius: 115px; border: 4px solid #fff; }
.profile-pic img { width: 105%; }
.director .excerpt { float: left; width: 60%; }
.director .excerpt p { margin-top: 5px; }
#highlight .endorsement { float: right; padding: 31px 6%; border-left: 1px solid #fff; /* background: transparent url(../images/sole-productions-logo-light-tilt.png) no-repeat top left; */ }
#highlight .endorsement blockquote { position: relative; margin-top: 0; }

#content { padding: 30px 0;  }
#content .container { clear: both; }

#footer { padding: 30px 0; background-color: #111; }
.bottom-nav, #footer .logo, #footer .contact-info { float: left; width: 25%; display: block; }
#footer .logo { width: 50%; text-align: center; }
.bottom-nav ul { margin: 40px 0 0; padding: 0; list-style-type: none; }
.bottom-nav ul li { display: inline-block; width: 49%; }
.bottom-nav a { display: block; padding: 8px 0; color: #757575; font-size: 16px; text-decoration: none; text-align: right; }
.bottom-nav a:hover { color: #ccc; }
#footer .contact-info { margin-top: 32px; color: #fff; }
#footer .contact-info a { color: #fff; text-decoration: none; }
#footer .contact-info p img { display: none; }
#footer .contact-info p { margin: 0 0 5px; }
#footer .contact-info .social-media { margin-top: 25px; }

#credit { padding: 30px 0; color: #656565; background-color: #000; }
#credit p { margin: 0 0 5px; text-align: center; font-size: 12px; }

#filmography .movie { margin: 50px 0; padding: 50px; background-color: #e5e5e5; }
#filmography .movie img { float: left; border: 1px solid #bbb; }
#filmography .movie .side { float: left; width: 209px; }
#filmography .movie .main .purchase-section { float: left; width: 209px; display: block; margin: 15px 20px 0 0; background-color: #e98f07; }
#filmography .movie .main .purchase-section.not-available { width: auto; background-color: transparent; }
.popup-youtube { float: left; width: 209px; display: block; margin: 15px 0 0; line-height: 41.5px; text-transform: uppercase; text-decoration: none; text-align: center; font-size: 18px; font-weight: bold; color: #fff; background-color: #e98f07; }
.popup-youtube:hover { color: #fff; background-color: #db8400; }
#filmography .movie .main .purchase-section:hover { background-color: #db8400; }
#filmography .movie .main .purchase-section img:last-child { display: none; }
#filmography .movie .main { float: right; width:76%; }

#media #content .container { text-align: center; }

#staff #content ul { padding: 0; text-align: center; }
#staff #content ul li { display: inline-block; width: 200px; height: 250px; margin: 10px 18px; }
#staff #content ul li span { display: block; }
#staff #content ul li .profile-pic { float: none; margin: 0 auto; }

/* #director .side-area img { width: 83%; } */

#contact .side-area .phone-icon, #contact .side-area .email-address-icon, 
#thank-you .side-area .phone-icon, #thank-you .side-area .email-address-icon { display: none; }
#contact .side-area .sp-phone, #contact .side-area .sp-email, 
#thank-you .side-area .sp-phone, #thank-you .side-area .sp-email { display: block; margin: 10px 0; text-decoration: none; }
#contact .side-area .social-media, 
#thank-you .side-area .social-media { margin: 20px 0; }


.jotform-form .form-label { display: block !important; }
ul.form-section { padding-left: 0; list-style-type: none; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/* Hide visually and from screen readers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden;}

/* Hide only visually, but have it available for screen readers: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after { clear: both; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 1220px) {
    /*.container { width: 768px; }*/
    .container { width: 94%; padding-left: 3%; padding-right: 3%; }
    
    .side-area, .side-area.small { width: 100%; }
    .main-area, .main-area.large { width: 100%; }
    .main-area .form-all { max-width: inherit; }
        
    #header .contact-info { margin-right: 20px; padding-right: 28px; }
    
	#navigation ul li a { padding-left: 33px; padding-right: 33px; }
	
	#feature-section .container { height: 386px; }
	/* #feature-section img { width: 350px; margin-top: 42px; } <----- Styles for Sole Productions logo */
	#feature-section img { width: 545px; margin-top: 16px; }
	
	#promo-section .movie-snippet { width: 31%; }
	#promo-section .h2b { margin-left: 2.5%; margin-right: 2.5%; }
	#promo-section h3 { font-size: 18px; }
	#promo-section .blurb { padding: 15px 20px 20px; font-size: 14px; }
	#promo-section a { font-size: 15px; }
	#promo-section a.primary { font-size: 16px; }
	
	#secondary-promo-section .title { width: 450px; padding: 15px 0 2px; }
	#secondary-promo-section h2 { font-size: 18px; }
	#secondary-promo-section .title:after { bottom: -44px; border-left-width: 225px; border-right-width: 225px; border-top-width: 25px; }
	#secondary-promo-section a { display: block; padding-top: 8px; padding-bottom: 8px; }
	#secondary-promo-section span { display: none; }
	#secondary-promo-section a:first-child { margin-top: 10px; }
	
	.profile-pic { width: 145px; height: 145px; }
	
	#filmography #content .container { width: 900px; }
	#filmography .movie .main { width: 70.5%; }
	
	#footer .logo img { width: 80% }
	.bottom-nav a { padding: 5px 0; }
}

@media screen and (max-width: 992px) {
	.jotform-form .form-line-column, .jotform-form .form-line {
		width: 90% !important;
	}
}

@media only screen and (max-width: 979px) {
	.youtube-responsive { height: 0; position: relative; padding-bottom: 56.25%; }
	.youtube-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
	#highlight { padding: 30px 0; }
	#highlight .director, #highlight .endorsement { float: none; width: 100%; }
	.director .excerpt { width: 72%; }
	#highlight .endorsement { margin-top: 30px; padding-top: 50px; border-top: 1px solid #fff; border-left: none; }
	
	#filmography #content .container { width: 700px; }
	#filmography .movie .main { width: 57%; }
	
	#footer { padding-bottom: 48px; border-bottom: 1px solid #333; }
	#footer .container { text-align: center; }
	.bottom-nav { float: none; width: 100%; }
	.bottom-nav ul { margin: 0 0 30px; text-align: center; }
	.bottom-nav ul li { width: inherit; }
	.bottom-nav a { padding: 8px 15px; margin-bottom: 5px; }
	#footer .logo, #footer .contact-info { float: none; display: inline-block; width: 225px; text-align: left; }
	#footer .logo { margin-right: 8px; }
	#footer .logo img { width: 100%; margin-top: -47px; }
	#footer .contact-info { width: 178px; margin-top: 0; margin-left: 8px; }
	#footer .contact-info .social-media { margin-top: 10px; }
}

@media only screen and (max-width: 768px) {
	.mobile { display: block; }
	.desktop { display: none; }
    /*.container { width: 90%; padding: 0 5%; }
	.container { width: 320px; padding: 0 20px; }*/
	#header { position: fixed; width: 100%; z-index: 9; }
	#feature-section, #content { padding-top: 85px; }
	#home #content { padding-top: 30px; }
	
	#home #header h1 span { display: none; }
	#header .welcome-logo { float: none; width: 100%; margin: 6px 0 8px; text-align: center; }
	#header .welcome-logo br { display: none; }
	#header h1 { font-size: 22px; }
	#header h1 a { position: absolute; left: 0; top: 15px; width: 117px; }
	#home #header h1 a { left: 54px; }
	#header h1 img { text-align: center; }
	#header .connections { width: 212px; }
	#header { padding: 5px 0; }
	#header .contact-info { display: inline-block; margin: 0; padding: 0; text-align: center; border-right: none; }
	#header .contact-info li { display: inline-block; }
	#header .contact-info a span { display: none; }
	#header .contact-info a img { display: inline-block; }
	#header .social-media img { margin: 0; }
	
	#navigation ul li a { padding: 20px 10px; }
	#navigation { display: none; }
	#responsive-menu-button { display: block; }
	.sidr ul li a, .sidr ul li span { text-align: left; }
	
	#feature-section .container { height: 250px; }
	/* #feature-section img { width: 300px; margin-top: 2.5%; } <----- Styles for Sole Productions logo */
	#feature-section img { width: 350px; margin-top: 1.5%; }
	
	#promo-section { padding: 0 0 20px 0; }
	/*#promo-section .movie-snippet { width: 42%; margin: 10px 2%; }*/
	#promo-section .movie-snippet { margin-top: -34px; }
	#promo-section h3 { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
	#promo-section .blurb { padding: 15px 15px 20px; font-size: 13px; }
	#promo-section a { height: 35px; font-size: 13px; }
	#promo-section a.primary { font-size: 14px; }
	
	#secondary-promo-section .title { width: 260px; padding: 10px 0 0; }
	#secondary-promo-section h2 { font-size: 16px; }
	#secondary-promo-section .title:after { bottom: -37px; border-left-width: 130px; border-right-width: 130px; border-top-width: 20px; }
	#secondary-promo-section .movie { width: 46%; display: inline; display: inline-block; }
	#secondary-promo-section a { display: inline-block; }
	#secondary-promo-section span { display: inline; }
	#secondary-promo-section a:first-child { margin-top: 0; }
	
	.director .excerpt { width: 58%; }
	
	.bottom-nav ul { margin: 0 0 30px; text-align: left; }
	.bottom-nav a { padding: 8px 20px; }
	
	#filmography #content .container { width: 85%; margin-left: 5%; margin-right: 10%; }
	#filmography .movie img, #filmography .movie .side { float: none; margin-bottom: 20px; }
	#filmography .movie .side img { margin-bottom: 0; }
	#filmography .movie .main { float: none; width: 100%; }
}

@media only screen and (max-width: 480px) {
	#header h1 { margin: 8px 0 0; }
	#header h1 a { top: 10px; left: 54px; }
	#responsive-menu-button { margin-top: -5px; }
	#header .social-media img, #header .contact-info img { width: 30px; }
	
	/* #navigation ul li a { padding: 25px 3px; } */
	
	/* #feature-section img { width: 60%; margin-top: 3.5%; } <----- Styles for Sole Productions logo */
	#feature-section img { width: 72%; margin-top: 2.5%; }
	
	#promo-section .container { padding-bottom: 20px; }
	#promo-section .movie-snippet { width: 80%; margin-top: 30px; }
	#promo-section .movie-snippet.h2b2 { margin-top: -44px; }
	#promo-section h3 { padding-top: 15px; padding-bottom: 15px; font-size: 22px; }
	#promo-section .blurb { padding: 25px; font-size: 16px; }
	#promo-section a { height: 45px; font-size: 16px; }
	#promo-section a.primary { font-size: 18px; }
	
	#secondary-promo-section .movie { margin-top: 40px; }
	#secondary-promo-section a { display: block; padding-top: 8px; padding-bottom: 8px; }
	#secondary-promo-section span { display: none; }
	#secondary-promo-section a:first-child { margin-top: 10px; }
	
	#highlight .director { text-align: center; }
	.profile-pic { float: none; margin: 0 auto 10px; }
	.director .excerpt { width: 100%; }
	#highlight a { float: none; display: block; width: 65%; margin: 20px auto 0; }
	
	#footer .logo, #footer .contact-info { width: 100%; }
	#footer .logo { width: 88%; margin-right: 0; text-align: center; }
	#footer .logo img { margin-top: 0; }
	#footer .contact-info { margin-top: 30px; margin-left: 0; text-align: center; }
}

@media only screen and (max-width: 320px) {	
    #secondary-promo-section .title { width: 200px; padding: 10px 0 0; }
	#secondary-promo-section h2 { padding: 0 25px; }
	#secondary-promo-section .title:after { bottom: -37px; border-left-width: 100px; border-right-width: 100px; border-top-width: 20px; }
	#secondary-promo-section .movie { width: 100%; margin-top: 20px; margin-left: 0; margin-right: 0; }
	#secondary-promo-section .movie.vision { margin-top: 40px; }
	#secondary-promo-section a { display: inline-block; }
	#secondary-promo-section span { display: inline; }
	#secondary-promo-section a:first-child { margin-top: 0; }
	
	#filmography .movie { margin: 20px 0; padding: 32px; }
}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request: h5bp.com/r
   ========================================================================== */

@media print {
    * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; }

    a, a:visited { text-decoration: underline; }
	a[href]:after { content: " (" attr(href) ")"; }

    abbr[title]:after { content: " (" attr(title) ")"; }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }

    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; /* h5bp.com/t */ }
	tr, img { page-break-inside: avoid; }
	img { max-width: 100% !important; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
}