/*
Theme Name: Provincetown Film Homepage
Theme URI: https://wordpress.org/themes/provincetown/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Provincetown Film brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Template: provincetown
Version: 1.0.3
Text Domain: provincetown
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* --------------------------------------------------------------
 * Homepage
 * --------------------------------------------------------------*/

.custom-header-carousel-container {
    max-width: 1440px;
    margin: auto;
}

#homepage-carousel {
	position: relative;
	background-color: #FFF;
}

#homepage-carousel .homepage-carousel-slide {
	position: relative;
}

#homepage-carousel .homepage-carousel-text {
    background-color: rgba(0, 0, 0, 1);
    overflow: hidden;
    clear: both;
    padding: 0 20px;
	-webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
		 -o-transform: translateZ(0);
		 	transform: translateZ(0);
}

#homepage-carousel .homepage-carousel-text::before {
	display: none;
}

#homepage-carousel .homepage-carousel-title,
#homepage-carousel .homepage-carousel-desc,
#homepage-carousel .homepage-carousel-title a {
    z-index: 3;
    color: #FFF;
}

#homepage-carousel .homepage-carousel-title {
    font-size: 22px;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08rem;
    margin: 15px auto 15px auto;
    text-transform:uppercase;
    font-family: 'Montserrat', arial, sans-serif;
}

#homepage-carousel .homepage-carousel-title a:hover,
#homepage-carousel .homepage-carousel-title a:focus {
	color: #FFF;
}

#homepage-carousel .homepage-carousel-desc {
    font-size: 15px;
    font-weight: 300;
    margin: -10px auto 5px auto;
}

#homepage-carousel .homepage-carousel-readmore {
	background-color: #ff6e2e;
	display: inline-block;
	padding: 2px 10px 5px 10px;
	margin: 10px 0 56px 0;
}

#homepage-carousel .homepage-carousel-readmore-link {
	color: #FFF;
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: 900;
}

#homepage-carousel .homepage-carousel-readmore-link:hover,
#homepage-carousel .homepage-carousel-readmore-link:focus {
	color: #FFF;
}

/*--------------------------------------------------------------
19.0 Media Queries
--------------------------------------------------------------*/
.homepage-content-panels-container {
    max-width: 1440px;
    margin: auto;
}

#homepage-content-panels {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 1.5em;
    margin-bottom: 5em;
    padding: 0 1.5em;
}

#homepage-content-panels .homepage-panel {
    flex-grow: 0;
    width: 100%;
    flex-basis: auto;
    position: relative;
    overflow: hidden;
    padding-bottom: 7px;
}

.homepage-panel:nth-child( 2n ) {
    margin-top: 1em;
}

#homepage-content-panels .homepage-panel-contents {
	background-color: transparent;
	color: #FFF;
	text-align: left;
	padding: 20px 20px 35px 20px;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

#homepage-content-panels .homepage-panel-contents:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 93, 156, 0.8);
    background-blend-mode: multiply;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 0% 0;
    -webkit-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg);
    z-index: -1;
}

#homepage-content-panels .panel-society .homepage-panel-contents:after {
	background-color: #3eb7a6;
}

#homepage-content-panels .panel-festival .homepage-panel-contents:after {
	background-color: #2575b1;
}

#homepage-content-panels .panel-institute .homepage-panel-contents:after {
	background-color: #3eaad7;
}

#homepage-content-panels .panel-cinema .homepage-panel-contents:after {
	background-color: #ffd566;
}


#homepage-content-panels .homepage-panel .homepage-panel-title {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #FFF;
}

#homepage-content-panels .homepage-panel .homepage-panel-description {
    font-size: 14px;
    font-size: 0.875rem;
    color: #FFF;
}

#homepage-content-panels .homepage-panel .homepage-panel-heading {
	display: block;
	width: 100%;
	font-size: 28px;
	font-size: 1.75rem;
	font-weight: 800;
	font-family: 'Montserrat', arial, sans-serif;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	-webkit-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
	margin-top: -5px;
}

.homepage-panel-arrow {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    position: absolute;
    right: 4px;
    top: 8px;
    text-indent: 9999px;
    border-top: 7px solid rgba(0, 0, 0, 0);
    border-bottom: 7px solid rgba(0, 0, 0, 0);
    border-left: 10px solid #ff6e2e;
    -webkit-transform: rotate(-2deg);
     	-ms-transform: rotate(-2deg);
	 		transform: rotate(-2deg);
}

#homepage-content-panels .panel-society .homepage-panel-heading {
	color: #3eb7a6;
}

#homepage-content-panels .panel-festival .homepage-panel-heading {
	color: #2575b1;
}

#homepage-content-panels .panel-institute .homepage-panel-heading {
	color: #3eaad7;
}

#homepage-content-panels .panel-cinema .homepage-panel-heading {
	color: #ffd566;
}

#homepage-content-panels .panel-society .homepage-panel-arrow {
	border-left-color: #3eb7a6;
}

#homepage-content-panels .panel-festival .homepage-panel-arrow {
	border-left-color: #2575b1;
}

#homepage-content-panels .panel-institute .homepage-panel-arrow {
	border-left-color: #3eaad7;
}

#homepage-content-panels .panel-cinema .homepage-panel-arrow {
	border-left-color: #ffd566;
}

/*--------------------------------------------------------------
Homepage Footer Widgets
--------------------------------------------------------------*/
.footer-widget-container .widget:nth-child(1n) {
    margin-top: 30px;
}

.footer-widget-container .widget:nth-child(2n) {
    margin-top: 20px;
}

.footer-widget-container .widget:nth-child(3n) {
    margin-top: 10px;
}

.footer-widget-container .widget:nth-child(4n) {
    margin-top: 0;
}

@media screen and ( max-width: 35em ) {
	#homepage-content-panels .panel-society {
		padding-bottom:1em;
	}
	#homepage-content-panels .panel-festival {
		padding-bottom:2em;
	}
	#homepage-content-panels .panel-institute {
		padding-bottom:1em;
	}
	#homepage-content-panels .panel-cinema {
		padding-bottom:1em;
	}
}

@media screen and ( min-width: 35em ) {
	#homepage-content-panels .homepage-panel,
	.provincetown-front-page .widget_provincetown_text {
	    width: 49%;
	}
}

@media screen and (min-width: 48em) {
	/* Front Page - Recent Posts */

	#homepage-carousel .homepage-carousel-text {
	    background-color: transparent;
	    position: absolute;
	    bottom: 0;
	    right: 0;
	    width: 50%;
	    padding-top: 50px;
	    overflow: hidden;
	    -webkit-transform: translateZ(0);
	    -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	    -o-transform: translateZ(0);
	    transform: translateZ(0);
	}

	#homepage-carousel .homepage-carousel-text::before {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		-webkit-transform-origin:100% 0;
		-ms-transform-origin:100% 0;
		transform-origin: 100% 0;
		-webkit-transform: skewY(-4deg);
		-ms-transform: skewY(-4deg);
		transform: skewY(-4deg);
		z-index: -1;
	}
}

@media screen and (min-width: 54em) {
	#homepage-content-panels .homepage-panel,
	.footer-widget-container .widget {
	    width: 24%;
	}

	#homepage-content-panels {
	    display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	    align-items: stretch;
	    margin-top: 2em;
	    margin-bottom: 5em;
	    padding:0;
	}
}

@media screen and ( min-width: 62em ) {
	#homepage-carousel .homepage-carousel-image {
		width: 70%;
	}

	.flex-control-nav {
	    top: 20px;
	    right: 0;
	    margin: 0;
	    width: calc(30% - 1.5em);
	}

	.flex-control-nav li {
		float:left;
	}

	#homepage-carousel .homepage-carousel-text {
		padding: 4em 10% 0 2.5em;
	}
}