@font-face {
  font-family: 'cc_black';
  src: url('font/claritycity-black-webfont.woff2') format('woff2'), url('font/claritycity-black-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_bold';
  src: url('font/claritycity-bold-webfont.woff2') format('woff2'),url('font/claritycity-bold-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
    font-family: 'cc_light';
    src: url('font/claritycity-light-webfont.woff2') format('woff2'),
         url('font/claritycity-light-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_light_italic';
  src: url('font/claritycity-lightitalic-webfont.woff2') format('woff2'),
       url('font/claritycity-lightitalic-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_regular';
  src: url('font/claritycity-regular-webfont.woff2') format('woff2'),
       url('font/claritycity-regular-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_regular_italic';
  src: url('font/claritycity-regularitalic-webfont.woff2') format('woff2'),
       url('font/claritycity-regularitalic-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_thin';
  src: url('font/claritycity-thin-webfont.woff2') format('woff2'),
       url('font/claritycity-thin-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_thin_italic';
  src: url('font/claritycity-thinitalic-webfont.woff2') format('woff2'),
       url('font/claritycity-thinitalic-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_bold_italic';
  src: url('font/claritycity-bolditalic-webfont.woff2') format('woff2'),
       url('font/claritycity-bolditalic-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}
@font-face {
  font-family: 'cc_black_italic';
  src: url('font/claritycity-blackitalic-webfont.woff2') format('woff2'),
       url('font/claritycity-blackitalic-webfont.woff') format('woff');
  font-weight: normal;font-style: normal;
}

body {margin:0;padding:0;font-size:16px; font-family: 'cc_regular', sans-serif;}
/*h1,h2,h3,h4,h5,h6 {font-family: 'Work Sans', sans-serif; line-height:100%;width:100%; margin:0; padding:0;font-size:2rem;}*/
h1,h2,h3,h4,h5,h6 {font-family: 'cc_light', sans-serif; font-weight: normal; line-height:100%;width:100%; margin:0; padding:0;font-size:2rem;}

div#close {display: none; position:fixed; top:10px; right:30px; z-index:2; color:#fff; font-size:4em; font-family: 'cc_black'; cursor: pointer; margin:0; padding:0; line-height:1em;}

.swiper {width: 100%; min-height: 100vh; height: auto;}
div.swiper-pagination {position:fixed; box-sizing:border-box; background:#000; height:80px; padding-top:25px; bottom:0 !important;  /*background-image: url(../images/icon-touch.svg); background-repeat:no-repeat; background-position: 95% 50%;*/}
div.swiper-pagination span.swiper-pagination-bullet {background:#fff;width:30px; height:30px; border-radius:5px; opacity:1; margin:0 8px !important;}
div.swiper-pagination span.swiper-pagination-bullet-active {background:#00ff00;}

div.swiper-slide article {min-height:100vh; height:auto; width:100%; display: flex; flex-wrap:wrap;}
div.swiper-slide article.wrap {width:90%; max-width:960px; margin: 0 auto;}
div.swiper-slide article.wrap.wide {width:90%; max-width:1440px; margin: 0 auto;}
div.swiper-slide article.wrap.wide ul.festivals {display:grid; grid-template-columns:50% 50%; column-gap: 60px; width: calc(100% - 60px);}
div.swiper-slide article footer {width:100%; height:80px;}
div.swiper-slide article div.container {box-sizing:border-box;margin:0;display:flex;flex-wrap:wrap; align-items:flex-start;}
div.swiper-slide article div.v-100 {width:100%; height:calc(100vh - 80px);}
div.swiper-slide article div.v-90 {width:100%; height:calc(90vh - 72px);}
div.swiper-slide article div.v-80 {width:100%; height:calc(80vh - 64px);}
div.swiper-slide article div.v-70 {width:100%; height:calc(70vh - 56px);}
div.swiper-slide article div.v-60 {width:100%; height:calc(60vh - 48px);}
div.swiper-slide article div.v-50 {width:100%; height:calc(50vh - 40px);}
div.swiper-slide article div.v-33 {width:100%; height:calc(33vh - 26px);}
div.swiper-slide article div.v-30 {width:100%; height:calc(30vh - 24px);}
div.swiper-slide article div.v-25 {width:100%; height:calc(25vh - 20px);}
div.swiper-slide article div.v-20 {width:100%; height:calc(20vh - 16px);}
div.swiper-slide article div.v-10 {width:100%; height:calc(10vh - 8px);}
div.swiper-slide article div.h-50 {width:50%; height:calc(100vh - 80px);}
div.swiper-slide article div.v-50-h-50 {width:50%; height:calc(50% - 40px);}
div.swiper-slide article div.bottom {align-items: flex-end;}
div.swiper-slide article div.center {align-items: center; }

div.isDark {color:#fff;}
div.isDark a {color:#fff;}

/**/
.red {color:#ed1c24;}
/*
body.landscape div.featured div div { display:flex; justify-content: space-between; flex-wrap: wrap; align-items:flex-end; height:50vh;}
body.landscape div.featured div div img { width:66%; height:auto; margin:0;}
body.landscape div.featured div div div { width:31%; height:auto;}
*/


div.cover {background-size: cover; background-repeat: no-repeat;}
div.cover img.logo {margin-top:60px;}
div.cover h1 {margin:0 0 60px 0;}
div.cover h6.link, div.cover h6.next {width:auto; display: inline-block; cursor:pointer;}

div.isDark.cover h6.link:after,
div.isDark.cover h6.next:after {
  content: "";
  background: url(../images/arrow-white.svg) no-repeat right center;
  width: 40px;
  height: 18px;
  display: inline-block;
}

div.cover h6.link:after,
div.cover h6.next:after {
  content: "";
  background: url(../images/arrow-black.svg) no-repeat right center;
  width: 40px;
  height: 18px;
  display: inline-block;
}

div.cover h6.link:after {content:""; background:url(../images/arrow-black.svg) no-repeat right center;width:40px; height:18px; display: inline-block;}
div.cover h6.next {margin-bottom:60px;}
div.cover h6.next.compact {margin-bottom:20px;}
div.cover a.linked {width:auto; display: inline-block; cursor:pointer; font-family: 'Work Sans', sans-serif; margin:0 60px 0 0; padding:0;font-size:2rem; text-decoration:none;}
div.isDark.cover a.linked:after {content:""; background:url(../images/arrow-white.svg) no-repeat right center;width:40px; height:18px; display: inline-block;}
div.cover a.linked:after {content:""; background:url(../images/arrow-black.svg) no-repeat right center;width:40px; height:18px; display: inline-block;}

div.cover ul.people {border-top: 8px solid #fff; margin:60px 0 0 0; padding:0; display: flex; flex-wrap:wrap; justify-content: space-between; width:100%;}
div.cover ul.people li {list-style: none; padding:20px 0 60px 0; margin:0; width:40%;}
div.cover ul.people.three li {list-style: none; padding:20px 0 60px 0; margin:0; width:20%;}
div.cover ul.people li img {width:100%; height:auto;}
div.cover ul.people li span {width:100%;display: inline-block; margin:0; color:#fff; margin:10px 0;}
div.cover ul.people li span:first-of-type {font-family: 'cc_bold';font-size:1.3em; padding-bottom:10px; border-bottom:3px solid #fff;}
div.cover .info-title {margin-bottom:30px}
div.cover .info-text {display: block; font-size:1.25em;}
@media screen and (max-width: 640px){
  div.cover img.logo {margin-top:30px;}
  div.cover ul.people li {padding:20px 0 60px 0; width:100%;}
  div.cover .info-title {margin-top:30px}
}

div.cover div.homeSlide {
  background-color: #FFFFFF; background-position: 23% 20%;background-size: 50%; background-repeat: no-repeat; width:100%;
}

div.cover div.homeSlide img { opacity: 0; }
div.swiper-slide-active.cover div.homeSlide img {opacity: 1;}

@media screen and (max-width: 1030px) {
  div.cover div.homeSlide img {max-width:200% !important; transform: translateX(-15%);}
  div.cover h6.next {text-align:center !important; transform: translateX(0px) !important;}
  div.swiper-slide article.wrap.wide ul.festivals {display:block; width: 100%;}
}

ul.festivals {margin:30px 0 60px 0; padding:0;}
ul.festivals li {margin:0 0 60px 0; padding:0; list-style: none;}
ul.festivals li a {background:#00ff00; padding:3px 6px; color:#000; font-weight: bold;}

div.featured {background:#1F4672;background-size: cover; background-repeat: no-repeat;}
div.featured h2 {padding-top:60px;}
div.featured h2.head {padding:0 0 20px 0; border-bottom:8px solid #fff; margin-bottom:20px;}
div.featured div {display:flex; justify-content: space-between; flex-wrap: wrap; align-items:flex-end;}
div.featured div div.image {width:66%;align-items:flex-end; position:relative;}
div.featured div div.image img {width:100%; height:auto;}
div.featured div div.image span {position:absolute; top:50%; left:50%; width:130px; height:130px; transform: translate(-50%,-50%); background: url(../images/icon-play.svg) no-repeat; background-size:cover; cursor:pointer;}
div.featured div div.image span:hover {opacity:0.8;}
div.featured div div.content {width:31%;align-items:flex-end;}
div.featured div div .title {padding-top:0; font-family: 'cc_black'; font-size:2.5em; line-height:1em;}
div.featured div div .credit {font-family: 'cc_bold'; font-size:1em; line-height:1.1875em; margin:1em 0 0 0;}
div.featured div div .data {font-family: 'cc_thin'; font-size:1em; line-height:1.125em; margin:1em 0 0 0;}
div.featured ul {margin:20px 0 0 0; padding:0; border-top:3px solid #fff; width:100%;}
div.featured ul li {list-style: none; margin:0; padding:7px 0 10px 0; border-bottom:1px dashed #fff;display: flex;justify-content: space-between;flex-wrap: wrap;}
div.featured ul li span {font-family: 'cc_bold';}
div.featured div.movies-two {width:46%; align-items: flex-start;align-content: flex-start;}
div.featured div.movies-two div.image {width:100%;align-items: flex-start;align-content: flex-start;}
div.featured div.movies-two div.content {width:100%; padding-top:20px;align-items: flex-start;align-content: flex-start;}
div.featured div.movies-two div.image span {width:90px; height:90px;}
div.featured div.movies-three {width:31%; align-items: flex-start;align-content: flex-start; padding-bottom:10px; border-bottom:3px solid #fff; margin-bottom:40px;}
div.featured div.movies-three div.image {width:100%;align-items: flex-start;align-content: flex-start;}
div.featured div.movies-three div.content {width:100%; padding-top:20px;align-items: flex-start;align-content: flex-start;}
div.featured div.movies-three div.image span {width:75px; height:75px;}
@media screen and (max-width: 640px){
  div.featured div div.image {width:100%;}
  div.featured div.movies-one {margin-bottom:60px;}
  div.featured div div.content {width:100%;}
  div.featured div div .title {padding-top:20px; font-size:1.5em;}
  div.featured ul li span {width:100%;}
  div.featured h2.head {padding-top:30px;}
  div.featured div div.image span, div.featured div.movies-two div.image span {width:75px; height:75px;}
  div.featured div.movies-two {width:100%; margin-bottom:30px;}
  div.featured div.movies-two:last-of-type {margin-bottom:60px;}
  div.featured div.movies-two div.image {width:66%;}
  div.featured div.movies-two div.content {padding-top:0px;}
  div.featured div.movies-three {width:100%; margin-bottom:30px;}
  div.featured div.movies-three:last-of-type {margin-bottom:60px;}
  div.featured div.movies-three div.image {width:66%;}
  div.featured div.movies-three div.content {padding-top:0px;}
}


div.production {background-size: cover; background-image: url('../images/back_3.jpg');background-repeat: no-repeat;background-position: 85% 50%;}
div.production h2 {padding-top:60px;}
div.production div .info {font-family: 'cc_light'; font-size:1.25em; line-height:1.625em; max-width:760px; }
div.production div form {display: flex; flex-wrap: wrap; align-items: flex-start; width:100%; justify-content: space-between;}
div.production div form fieldset {box-sizing:border-box; border:0; width:48%; padding:0; margin:0 0 40px 0;}
div.production div form fieldset label {width:100%;display: block; margin:0 0 10px 0; font-family: 'cc_light'; font-size: 1.25em;}
div.production div form input[type=button] {cursor:pointer; font-family: 'cc_black'; font-size: 1.25em; background: #000; color:#fff; border:0;text-transform: uppercase; padding: 16px 32px; margin:0 auto;}
div.production select {width:100%; background-color: white; border: none; border-radius: 0; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, #000, #000); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; }
div.production select:focus {background-image:linear-gradient(45deg, white 50%, transparent 50%),linear-gradient(135deg, transparent 50%, white 50%),linear-gradient(to right, gray, gray); background-position:calc(100% - 15px) 1em,calc(100% - 20px) 1em,100% 0; background-size:5px 5px,5px 5px,2.5em 2.5em; background-repeat: no-repeat; border-color: grey;outline: 0;}

div.production h2.head {padding:60px 0 20px 0; border-bottom:20px solid #FFF; margin-bottom:40px;}
div.production div {display:flex; justify-content: space-between; flex-wrap: wrap;}

div.production img.mobile, div.production img.desktop {width: 100%; height: auto;}
div.production img.mobile {display: none; }

@media screen and (max-width: 640px) {
  div.production img.mobile {display: block; }
  div.production img.desktop {display: none; }
}

div.production div.movies {width:100%; align-items: flex-start;align-content: flex-start; padding-bottom:60px; margin-bottom:40px; border-bottom:8px solid #FFF;}
div.production div.movies:last-of-type {border-bottom:none;}
div.production div.movies.item {position:relative;}
div.production div.movies.item.hidden {display: none;}
div.production div.movies.item.message h6 {text-decoration:underline;margin:40px 0; cursor: pointer;}
div.production div.movies.item.message h4, div.production div.movies.item.message h2 {line-height:1.2;}
div.production div.movies.item div.half {width: 48%; margin-bottom:30px; position:relative;}
div.production div.movies.item div.half p {width:100%;}
div.production div.movies.item div.image {position:relative;}
div.production div.movies.item div.image img {width:100%; height:auto;}
div.production div.movies.item div.image span.play {position:absolute; top:50%; left:50%; width:90px; height:90px; transform: translate(-50%,-50%); background: url(../images/icon-play.svg) no-repeat; background-size:cover; cursor:pointer;}
div.production div.movies.item div.image span.play:hover {opacity:0.8;}
div.production div.movies.item span.status {background: #5C234A; width:100%; display: inline-block; padding:6px 12px; text-align: right; margin:10px 0 20px 0; font-size:0.875em; text-transform: uppercase;}
div.production div.movies.item span.status.green {background: #000;color:#fff;}
/*div.production div.movies.item span.status,green {background: rgb(64,101,73);}*/
div.production div.movies.item .title {padding-top:0; font-family: 'cc_black'; font-size:2.5em; line-height:1em;}
div.production div.movies.item .title-original {padding-top:0; font-family: 'cc_thin'; font-size:1.5em; line-height:1em; margin-top:15px;}
div.production div.movies.item .credit {font-family: 'cc_bold'; font-size:1em; line-height:1.1875em; margin:0;}
div.production div.movies.item .data {font-family: 'cc_thin'; font-size:1em; line-height:1.125em; margin:0.75em 0 0 0;}
div.production div.movies.item .artists {font-family: 'cc_thin'; font-size:0.825em; line-height:1.25em; margin:0.75em 0 0 0;}
div.production div.movies.item .synopsis {font-family: 'cc_thin'; font-size:1em; line-height:1.375em;}
div.production ul {margin:20px 0 0 0; padding:0; width:100%;}
div.production ul li {list-style: none; margin:0; padding:7px 0 10px 0; display: flex;justify-content: space-between;flex-wrap: wrap;}
div.production ul.icons li.icon {width: 100%; margin:0 0 0 0; padding: 5px 0 5px 30px; font-family:'cc_thin'; filter: invert(100%);color:#fff;}
div.production ul.icons li.icon.debut {background:url(../images/icon-debut.svg) no-repeat center left; background-size:20px 20px;}
div.production ul.icons li.icon.women {background:url(../images/icon-women.svg) no-repeat center left; background-size:20px 20px;}
div.production ul.icons li.icon.funded {background:url(../images/icon-funded.svg) no-repeat center left; background-size:20px 20px;}
div.production ul.icons li.icon.lgbt {background:url(../images/icon-lgbt.svg) no-repeat center left; background-size:20px 20px;}
div.production ul.icons li.icon.kids {background:url(../images/icon-kids.svg) no-repeat center left; background-size:20px 20px;}
div.production ul.icons li.icon.minority {background:url(../images/icon-minority.svg) no-repeat center left; background-size:20px 20px;}
div.production ul.icons li.icon.school {background:url(../images/icon-school.svg) no-repeat center left; background-size:20px 20px;}
div.production ul.icons li.icon.social {background:url(../images/icon-social.svg) no-repeat center left; background-size:20px 20px;}
/*div.production ul.actions {border-top:6px solid #FFF202;}*/
div.production ul.actions li {padding:0; margin: 30px 0 0 0;}
div.production ul.actions li span {cursor:pointer; display: inline-block; background: #000; padding: 15px 30px; color:#fff; font-family: 'cc_thin';}
div.production ul.actions li span:hover {opacity:0.8;}
div.production div.videoPlayer {position: absolute; width:100%; height:100%; background:#000; display: none;}
div.production div.videoPlayer.show {display: block;}
div.production div.requestForm {position:absolute; width:100%; min-height:100%; height:auto; background: #000;display: none;}
div.production div.requestForm.show {display: flex;}
div.production div.requestForm div {width:40%; padding:20px; display: block;}
div.production div.requestForm div:last-of-type {padding-top:80px;}
div.production div.requestForm span.close {position: absolute; top:0px; right:20px; font-size: 3em;cursor: pointer;}
div.production div.requestForm span.close:hover {opacity:0.8;}
@media screen and (max-width: 640px){
  div.production div.movies.item div.half {width: 100%; margin-bottom:30px;}
  div.production h2.head {padding-top:30px;}
  div.production ul.actions {border-top:0; margin-top:0;}
  div.production h2 {padding-top:30px;}
  div.production div .info {font-size:1em; line-height:1.4em;}
  div.production div form fieldset label {font-size:1em; margin:0 0 6px 0;}
  div.production div form input[type=submit] {font-size: 1em; padding: 12px 24px;}
  div.production div form fieldset {margin:0 0 20px 0;}
  div.production select {line-height: 1em;}
  div.production div.movies.item {margin-bottom:90px;}
  div.production div.requestForm.show {display: block; box-sizing:border-box;}
  div.production div.requestForm div {width:100%;box-sizing:border-box;}
  div.production div.requestForm div:first-of-type {padding-top:80px;}
  div.production div.requestForm div:last-of-type {padding-top:20px;}
}


div.filming {background:#fff;}
div.filming h2 {padding:60px; max-width:1200px;}
div.filming div.container:first-of-type {height: calc(100vh - 80px); }
div.filming img#ficlogo {position:absolute; top:60px; left: 60px; max-width:200px;}
div.filming video {width:100%; height:100%; margin:0; object-fit: cover;}
div.filming div#poster {width:100%; margin: 0; height:auto;}
div.filming div#poster img {width:100%; height:100%; object-fit:contain;}
div.filming img.tmp {width:100%; height:100%; object-fit:cover;}
@media screen and (max-width: 1279px){
  div.filming h2 {padding:30px;}
}
@media screen and (max-width: 1024px){
  div.filming article div:nth-of-type(1) {width:100% !important; height:calc(33vh - 24px) !important;}
  div.filming article div:nth-of-type(2) {width:100% !important; height:calc(66vh - 48px) !important;}
  div.filming article div:nth-of-type(2) div#poster {height:auto !important; width:100%;order: 1;}
  div.filming article div:nth-of-type(2) h2 {order:2;}
  div.filming article div:nth-of-type(2) div#poster img {height:auto; width:100%; max-width:1024px;}
  div.filming h2 {padding:20px;}
  div.filming img#ficlogo {display: none;}
}
@media screen and (max-width: 640px){}