/* ! WORSHIP 2017
   DEVELOPMENT: Maximilian Herbst & Marcin Benedek
*/

@font-face {
  font-family: 'AkzidenzGrotesk-Medium';
  src:  url('fonts/AkzidenzGrotesk-Medium.woff') format('woff');
}

@font-face {
  font-family: 'AkzidenzGrotesk-Regular';
  src:  url('fonts/akzidenz-grotesk-bq-regular.woff') format('woff');
}


/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight: normal;font-family: 'AkzidenzGrotesk-Medium';}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}::-moz-selection{background:#d0d3d6;text-shadow:none}::selection{background:#d0d3d6;text-shadow:none}img{vertical-align:middle;max-width: 100%;height: auto;}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}/*!
 *
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @simplygoodwork
 */.col{min-height: 1px;border:0 solid transparent;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;}@media screen and (min-width:0px){.row{margin-left:-10px}.col{border-left-width:10px;padding:0}.span_1{width:3.125%}.span_2{width:6.25%}.span_3{width:9.375%}.span_4{width:12.5%}.span_5{width:15.625%}.span_6{width:18.75%}.span_7{width:21.875%}.span_8{width:25%}.span_9{width:28.125%}.span_10{width:31.25%}.span_11{width:34.375%}.span_12{width:37.5%}.span_13{width:40.625%}.span_14{width:43.75%}.span_15{width:46.875%}.span_16{width:50%}.span_17{width:53.125%}.span_18{width:56.25%}.span_19{width:59.375%}.span_20{width:62.5%}.span_21{width:65.625%}.span_22{width:68.75%}.span_23{width:71.875%}.span_24{width:75%}.span_25{width:78.125%}.span_26{width:81.25%}.span_27{width:84.375%}.span_28{width:87.5%}.span_29{width:90.625%}.span_30{width:93.75%}.span_31{width:96.875%}.span_32{margin-left:0;width:100%}}

/* GLOBAL */
body{font-family:'AkzidenzGrotesk-Regular';font-weight: 400 !important;color:#000;font-size:14px;line-height: 1.45;padding: 0 10px;overflow-y: scroll;overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-family: 'AkzidenzGrotesk-Medium';}
a{color:#000;text-decoration:none;outline: none !important;}
.clear{clear:both;}
.separator{margin:0 0.4em;width: 0;height: 1px;display: inline-block;}
.underline{border-bottom:2px solid #000;}
.lazy,.video_box{opacity:0;}
.vertical_center > *{padding: 47px 0;display: inline-block;}
section{position:relative;overflow: hidden;}
.one_third{width:33.333333%;}
.half{width:50%;}
[data-src]{cursor:pointer;}

/* HEADER */
header{padding-bottom: 106px;}
header p{margin:0;}
header .logo{margin-left:-7px;}
header .menu ul{position: relative;padding:0;margin:0;padding-top:9px;float: left;}
header .menu li{margin-right: 56px;display: inline-block;}
header .menu li:nth-child(3){display:none;}
header .menu li a{border-bottom: 2px solid transparent;padding-bottom: 10px;font-size: 16px;font-family: 'AkzidenzGrotesk-Regular';}
header .menu li.current:first-child a:hover ~ hr,
header .menu li:first-child:hover ~ hr{left:0}
header .menu li:first-child:hover ~ hr{left:0 !important;width: 162px !important;}
header .menu ul li:nth-child(2):hover ~ hr,
header .menu ul li.current:nth-child(2) ~ hr{left: 222px;width: 26px;}
header .menu ul li:nth-child(3):hover ~ hr,
header .menu li.current:nth-child(3) ~ hr{left: 307px;width: 35px;}
header ul hr{position: absolute;bottom: 36px;left: 0;display: block !important;padding:0 !important;height: 2px;width: 162px;margin: 0;background:#000;border: none;transition: .3s ease-in-out;}

header .worship_info a{border-bottom:1px solid #000;}
header .worship_info{font-size:24px;display:none;opacity:0;-webkit-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out;margin-top: 291px;margin-bottom: -202px;}
header .worship_info.visible{opacity:1;}

/* HOME */
.home_page{margin-top: 235px;}
.home_page .projects > .col{height: 27.5vw;}
.home_page .projects > .four_units{height: 55vw;}
.home_page .video_box{position: relative;opacity:0;width: 100%;height: 100%;}
.home_page .projects .one_unit .video-js,
.home_page .projects .one_unit video,
.home_page .projects .four_units .video-js,
.home_page .projects .four_units video{height:100%;width:auto;}
.home_page .projects .three_units .video-js{position: absolute;left: 0;top: 50%;height: 100%;}
.home_page .projects .three_units .video_box{height:auto;}
.home_page .projects .video-js{position: relative;}
.home_page .projects .four_units .video-js,
.home_page .projects .one_unit .video-js{position: absolute;left: 50%;}
.projects a{position:relative;color: white;}
.projects .project_image{background-color:#f0f0f0;position: relative;display: none;z-index: 1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-transition:opacity 0.3s ease-out, transform 0.5s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.5s ease-out;height: 100%;width: 100%;background-size:cover;background-position:50%;background-repeat:no-repeat;background-color: white;}
.projects .project_title{position: relative;width:100%;}
.projects .project_title h2{font-family: 'AkzidenzGrotesk-Regular';font-size: 16px;position:absolute;max-width: calc(100% - 30px);z-index:2;color:white;padding-left: 6.25%;box-sizing: border-box;margin-top: 20px;}
.projects .one_unit figure{padding-bottom: calc(112.5% + 5px);}
.projects figure{position:relative;overflow: hidden;height:0;padding-bottom: 56.25%;}
.projects > .col{position: relative;margin-bottom: 10px;overflow: hidden;background-color: #f0f0f0;}
.projects .video-js,.projects video{width:100%;height: auto;}
.projects .video-js{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.projects .animate .video-js{-webkit-transition: 0.5s ease-in-out;transition: 0.5s ease-in-out;}
.projects a:hover .project_image,
.projects a:hover .animate .video-js{opacity:0.95}
.projects .four_units figure{padding-bottom: calc(112.5% + 10px);overflow:hidden;}
.projects img{width:100%;height: 100%;position:absolute;z-index:-1;top:0;left:0;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);-webkit-transition: 0.5s ease-in-out;transition: 0.5s ease-in-out;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.projects a:hover .project_image,
.projects a:hover .video-js,
.projects a:hover img{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);transform:scale(1.05);}


/* SINGLE */
.single:not(.more) header ul hr{background-color:transparent;}
.single header ul li:hover ~ hr{background-color:#000}
.single_page{font-size:21px;}
.single_page .project_name{font-size:24px;font-weight:normal;margin-bottom: 20px;margin-top: 182px;}

.project_description{padding-top:68px;position:relative;z-index:2;background:white;padding-bottom: 135px;}
.project_description .client,
.project_description .year{margin:0;font-family: 'AkzidenzGrotesk-Medium';}
.project_description .description p:first-child{margin-top:0;}
.project_cats{font-family:'AkzidenzGrotesk-Medium';}

.no-parallax{position:relative;}
.first_image{background-color: #f0f0f0;}
.first_image .video-js video{height:calc(56.125vw - 12px);}
.video{padding-bottom:140px;}
.video .span_22{position:relative;}
.video .video-js,
.video-js video,
.video-js,
.video video{position: relative;width:100%;height:auto;outline: none;vertical-align: top;}
.video .vimeo{position:relative;height:100%;width:100%;outline:none;vertical-align:top;}
.vjs-control-bar,
.vjs-error-display,
.vjs-fullscreen-control,
.vjs-caption-settings,
.vjs-playing .vjs-big-play-button{display:none !important;}
.vjs-big-play-button{-webkit-transition:opacity 0.2s ease-out;cursor:pointer;width:101px;height:107px;opacity:0.7;outline:none;text-indent:-999999px;position:absolute;z-index:10;top:50%;left:50%;margin-top:-50px;margin-left:-53px;display:block;-webkit-appearance:none;border:0;background-color:transparent;background-image:url(../../images/play.svg);}
.video .span_22:hover .vjs-big-play-button{opacity:1;}

.quotation{font-family: 'AkzidenzGrotesk-Medium';padding-bottom: 280px;text-align:center;}
.quotation .short_line{display:block;margin:0.5em 0;}
.quotation_text{font-size:36px;margin:0;margin-top: -5px;}
.quotation_author{font-size:21px;margin: 0;}

.parallax{position:relative;padding-bottom: 66.67%;overflow: hidden;/* background-color: #f0f0f0; */}
.single_page .parallax_item{position:absolute;cursor: pointer;opacity: 0;top:0;width:100%;height:100%;-webkit-transition: transform 0.3s linear;transition: transform 0.3s linear;}
.single_page .parallax_item.video-js,
.single_page .parallax_item.vimeo{-webkit-transition:none;transition:none;outline: none !important;}
.single_page .parallax > div:first-child{position:absolute;z-index: 0;top:0;width:100%;height:100%;}
.single_page .parallax video{width:100%;background-position: initial !important;}
.two_parallaxes{position:relative;padding-bottom: 200px;overflow: hidden;}
.parallax_container{position:relative;}

.single_page .video_box{position: relative;width: 100%;height: 100%;background-color: #f0f0f0;}
.single_page .video_box.loaded{background-color:transparent;}
.single_page .video_box .poster_image{position:absolute;width: 100%;height: 100%;top:0;left:0;z-index:2;}
.play.vimeo_play{-webkit-transition:opacity 0.2s ease-out;cursor:pointer;width:101px;height:107px;opacity: 0.7 !important;outline:none;text-indent:-999999px;position:absolute;z-index:10;top:50%;left:50%;margin-top:-50px;margin-left:-53px;display:block;-webkit-appearance:none;border:0;background-color:transparent;background-image:url(../../images/play.svg);background-repeat: no-repeat;}
.play.vimeo_play:hover{opacity: 1 !important;}
.single_page .video_box > div,
.single_page .video_box > iframe{opacity:0;height:100%}

#fullscreen_preview{display:none;z-index: 10001;position:fixed;padding: 60px 30px;box-sizing: border-box;-webkit-box-sizing: border-box;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.9);}
.preview{width:100%;height:100%;}
.preview_object{position: relative;width: 100%;height: 100%;}
.preview_object img{display:table-cell;vertical-align: middle;}
.preview_img{width: 100%;height: 100%;background-size: contain;background-repeat:no-repeat;background-position:50%;}
.close_preview{-webkit-transform:rotate(45deg);transform:rotate(45deg);display:block;cursor: pointer;position:absolute;top: -38px;right: -5px;width:37px;height:37px;}
.close_preview:before{position:absolute;content:'';width:2px;height:100%;left:50%;margin-left:-1px;background-color: white;}
.close_preview:after{position:absolute;left:0;top:50%;margin-top:-1px;margin-left:1px;content:'';height:2px;width:100%;background-color: white;}

/* LAYOUTS */
.single_page .layout p:first-child{margin-top:-3px;}
.single_page .layout p:last-child{margin-bottom:-3px;}


.layout1 .left_text{position:relative;z-index:3;margin-top: -1px;}
.layout1 .right_image{position:absolute;z-index: 4;width: calc(56.25% - 5px);top:-1px;right: 0;margin: 0;}



.layout2 .left_text .span_15{background: white;width: 100%;padding-bottom: 140px;margin-top: -1px;padding-right: calc(6.9% + 8px);}
.layout2 .left_text{width: calc(46.875% + 4px);position:absolute;z-index: 2;left: 3.125%;top:-1px;}


.layout3 .left_image{position:absolute;width: calc(100% + 10px);top:-1px;left: 0;margin: 0;}
.layout3 .right_image{padding-top: 17vw;}


.layout4 .text{position:absolute;z-index:2;width:calc(100% + 10px);top:-1px;left: 0;}
.layout4 .right_text{background:white;padding-bottom:140px;padding-left:calc(3.125% + 10px);padding-right:calc(3.125% + 10px);}

.layout1{padding-bottom:140px}
.layout2{padding-bottom:140px}
.layout3{padding-bottom:140px}
.layout4{padding-bottom:140px}
.layout5{padding-bottom:140px}
.layout6{padding-bottom: 20px;}
.layout7{padding-bottom:140px}
.layout8{margin-bottom: 140px;background-color: #f0f0f0;}
.layout8.isvideo{background-color:transparent;}

.layout8 img,.layout8 iframe{width:100%;}

.layout9{margin:140px 0;}
.layout9 + .layout9{margin:-130px 0 140px;}

section:last-child{padding-bottom:0;}

#loader{position:fixed;display: table;top: 0;height: 100%;width:100%;left:0;background-color:white;z-index:10000;}
.loader{display:table-cell;vertical-align:middle;height:100vh;width:100%;text-align:center;}
.loader_image{display:inline-block;background-repeat:no-repeat;background-position: 50%;width: 194px;height: 128px;background-image: url(../../images/Worship_Loader_x2.gif);background-size: 196px 130px;}

/* FOOTER */
footer{position: relative;padding: 136px 0 136px;font-size:21px;}
footer .span_9 a{border-bottom:1px solid black;}
.credits{position:absolute;left:3.125%;}
.credits_content{display:none;padding-bottom: 74px;}
.credits_content + .row{margin-top:60px;}
.credit,.credit a{color:#bbbdc0;}



@media all and (max-width:1024px){
    body{clear:left;}
    .col{width:100%;border: 0;}
    .row{margin:0;}
    .parallax{width:100%;}
    .vertical_center{text-align:center;}
    .menu{text-align:center;}
    .menu .vertical_center{;display:inline-block;float:none;}
    header .logo{margin:0;}
    header{padding-bottom:20px;}
    .home_page{margin-top:60px;}
    header .worship_info{margin:0;text-align: center;}
    header .menu li{padding-top:0;}
    header .menu li:nth-child(2),
    header .menu li:nth-child(3){margin-right:0 !important;}
    .projects figure{padding-bottom:56.25% !important;}
    .single_page .project_name{margin-top: 30px;display: none;}
    .project_description{padding-top:10px;float: left;padding-bottom: 60px;}
    footer{padding:60px 0;clear: left;text-align: center;}
    .single header .worship_info{margin-bottom:30px;}
    section{float:left;width: 100%;margin: 0 !important;}
    section .col{border:0;}
    .layout2 .left_text,
    .layout1 .right_image,
    .layout3 .left_image,
    .layout4 .text,
    .layout4 .right_text{position:relative;width:100%;padding:0;margin: 0;}
    .layout3 .right_image,
    .layout1 .right_image{padding-top: 10px;}
    .layout1,
    .layout2,
    .layout3,
    .layout4,
    .layout5,
    .layout6,
    .layout7{padding-bottom:10px;min-height: 0 !important;}
    .layout8{margin-bottom: 10px !important;}
    .layout9 img,
    .layout9 .video_box{margin-top: 10px;}
    .layout9 .col:last-child{margin-bottom:10px;}
    .video{padding-bottom: 5px;padding-top: 0;}
    .layout2 .left_text .span_15{padding-bottom:10px;}
    .home_page .projects > .col{height: calc(56.125vw - 12px);}
    .home_page .projects > .four_units{height: calc(112.5vw - 14px);}
    /* .single_page .video_box > div,
    .home_page .projects .video_box{opacity:1;} */
    .projects .video-js{-webkit-transition: 0.5s ease-in-out;transition: 0.5s ease-in-out;}
    .single_page .parallax_item{background-position:50% !important;}
    .single_page .parallax_item.vimeo{position:relative;}
    .projects a:hover .project_image, .projects a:hover .video-js, .projects a:hover img{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
    .credits{position:relative;left:0;}
    .vjs-big-play-button{width:60px;height:63px;background-size:100%;margin-top: -33px;margin-left: -30px;}
    /*
    .video{padding-bottom:60px;}
    .quotation{padding-bottom:120px;}
    .layout1{padding-bottom:60px}
    .layout2{padding-bottom:60px}
    .layout3{padding-bottom:60px}
    .layout4{padding-bottom:60px}
    .layout5{padding-bottom:60px}
    .layout6{padding-bottom: 20px;}
    .layout7{padding-bottom:60px}
    .layout8{margin-bottom:60px}
    */
    .single_page .layout p:last-child{margin-bottom:1em;}

    .project_cats a{display: inline-block;margin-right:1em;}
    .separator{display:none;}
    .credit_holder{display:none;}
    .single_page img{max-height: calc(56.25vw - 11px);max-height: none;}
    .single_page .portrait img{max-height:none;}
}

@media all and (max-width:450px){
    header .menu ul li{margin-right:21px;}
    header .menu ul li.current:first-child a:hover ~ hr,
    header .menu ul li:first-child:hover ~ hr{left:0}
    header .menu ul li:first-child:hover ~ hr{left:0 !important;}
    header .menu ul li:nth-child(2):hover ~ hr,
    header .menu ul li.current:nth-child(2)~ hr{left:187px;}
    header .menu ul li:nth-child(3):hover ~ hr{left: 225px;}
    header .menu ul li:nth-child(3):hover ~ hr, header .menu li.current:nth-child(3) ~ hr{left:237px;}
    #fullscreen_preview{padding: 39px 10px;}
}