/*
Theme Name: Kollektion
Theme URI: http://320press.com/wpbs
Description: A simple responsive theme based on the Bootstrap framework. Includes multiple page templates, two different sidebars and a theme options panel.
Version: 3.3.1
Author: Chris Barnes
Author URI: http://cbarn.es
Tags: black, white, one-column, two-columns, flexible-width, custom-background, custom-colors, custom-menu, full-width-template, theme-options
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0
*/

@font-face {
    font-family: 'TiemposHeadlineBlack';
    src: url('fonts/TiemposHeadlineBlack.eot');
    src: url('fonts/TiemposHeadlineBlack.eot') format('embedded-opentype'),
         url('fonts/TiemposHeadlineBlack.woff2') format('woff2'),
         url('fonts/TiemposHeadlineBlack.woff') format('woff'),
         url('fonts/TiemposHeadlineBlack.ttf') format('truetype'),
         url('fonts/TiemposHeadlineBlack.svg#TiemposHeadlineBlack') format('svg');
}
@font-face {
    font-family: 'Quicksand_Book';
    src: url('fonts/Quicksand_Book.eot');
    src: url('fonts/Quicksand_Book.eot') format('embedded-opentype'),
         url('fonts/Quicksand_Book.woff2') format('woff2'),
         url('fonts/Quicksand_Book.woff') format('woff'),
         url('fonts/Quicksand_Book.ttf') format('truetype'),
         url('fonts/Quicksand_Book.svg#Quicksand_Book') format('svg');
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone{margin: 5px 20px 20px 0;}
.aligncenter,div.aligncenter{display:block;margin:5px auto 5px auto;}
.alignright{float:right;margin:5px 0 20px 20px;}
.alignleft{float:left;margin:5px 20px 20px 0;}
a img.alignright{float:right;margin:5px 0 20px 20px;}
a img.alignnone{margin: 5px 20px 20px 0;}
a img.alignleft{float:left;margin:5px 20px 20px 0;}
a img.aligncenter {display: block;margin-left:auto;margin-right:auto;}
.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center;}
.wp-caption.alignnone{margin:5px 20px 20px 0;}
.wp-caption.alignleft{margin:5px 20px 20px 0;}
.wp-caption.alignright{margin:5px 0 20px 20px;}
.wp-caption img{border: 0 none;height: auto;margin:0;max-width:98.5%;padding:0;width:auto;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px;}
/* Text meant only for screen readers. */
.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important;white-space:nowrap;height:1px;width:1px; 	overflow:hidden;}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.6);clip:auto !important;color:#21759b;display:block;font-size:14px;font-size:0.875rem;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000;}

/* global ==================================================================================== */
body{margin:0;padding:0;background-color:#101013;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#8e8e90;font-family:'Lora', serif;}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat', sans-serif;}
.no-margin{margin:0 !important;}
.no-padding{padding:0 !important;}
a{transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;}
a:hover, a:focus{text-decoration:none;}
.text-justify{text-align:justify !important;}
label{font-family:'Montserrat', sans-serif;}

a{color:#FFF;text-decoration:none;-webkit-transition:color .3s;transition:color .3s;}
a:hover{color:#67676a;}
img{height:auto;max-width:100%;border-style:none;}
.row{max-width:998px;margin:0 auto;}
p{line-height:1.8;font-size:0.75em;}
#loader__overlay{width:100%;height:100%;background-color:#101013;position:fixed;z-index:999;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

/* buttons =================================================================================== */
a.btn{font-family:'Montserrat', sans-serif;font-size:0.688em;letter-spacing:3px;text-transform:uppercase;padding:1.125rem 1.35rem;font-weight:500;display:inline-block;overflow:hidden;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;-webkit-transition-delay:.125s;transition-delay:.125s;}
a.btn:hover{-webkit-transform:translateY(-10px);transform:translateY(-10px);}
a.btn-alt{color:#212226;background:#FFF;}
a.btn span{position:relative;display:inline-block;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}
a.btn:hover span{-webkit-transform:translateY(-350%);transform:translateY(-350%);}
a.btn span::before{position:absolute;white-space:nowrap;top:350%;left:0;content:attr(data-hover);}

/* forms ====================================================================================== */
.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;background-color:#fff;background-image:none;border:1px solid #d3d5d5;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;box-sizing:border-box;}
.form-control:focus{border-color:#67676a;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(103,103,106,.6);}
textarea.form-control{height:auto;}
.btn-submit{font-family:'Montserrat', sans-serif;letter-spacing:3px;text-transform:uppercase;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;-webkit-transition-delay:.125s;transition-delay:.125s;border:1px solid #d3d5d5;border-radius:2px;font-size:16px;white-space:nowrap;touch-action:manipulation;cursor:pointer;user-select:none;background-image:none;color:#67676a;padding:12px 24px;}
div.wpcf7-response-output{font-size:14px;}

/* header ==================================================================================== */
#header{padding:2rem 1rem;}
#header .row{z-index:4;position:relative;}
.logo{transition:opacity .3s linear;-webkit-transition:opacity .3s linear;will-change:opacity;}
body.js-menu__toggle #header .logo{opacity:0;}
#header .menu{cursor:pointer;width:23px;margin-left:auto;z-index:99;position:relative;top:-4px;}
#header .menu span{width:100%;height:2px;background:#FFF;display:block;margin-bottom:5px;transition:all .3s;-webkit-transition:all .3s;}
#header .menu span:nth-child(1){width:60%;}
#header ul.nav{display:none;}
#header ul.nav li a{font-family:'Montserrat', sans-serif;font-size:0.813em;letter-spacing:3px;text-transform:uppercase;}
.slideUp{display:inline-block;overflow:hidden;}
.slideUp span{position:relative;display:inline-block;-webkit-transition:-webkit-transform 0.33s;transition:-webkit-transform 0.33s;transition:transform 0.33s;transition:transform 0.33s, -webkit-transform 0.33s;padding:6px 0;}
.slideUp span::before{position:absolute;white-space:nowrap;top:100%;content:attr(data-hover);padding:6px 0;}
#header ul.nav li:hover a span{-webkit-transform:translateY(-100%);transform:translateY(-100%);}

#nav-mobile{position:fixed;width:100%;height:100%;top:0;left:0;background-color:#101013;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:3;}
#nav-mobile ul{margin:0;padding:0;list-style-type:none;text-align:center;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;}
#nav-mobile ul li{padding:5px;opacity:0;-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0);-webkit-transition: all .6s;transition: all .6s;}
#nav-mobile .js-menu__open{opacity:1;}
#nav-mobile .js-menu__open li{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
#nav-mobile ul li:nth-of-type(1){-webkit-transition-delay:0.6s;}
#nav-mobile ul li:nth-of-type(2){-webkit-transition-delay:0.7s;}
#nav-mobile ul li:nth-of-type(3){-webkit-transition-delay:0.8s;}
#nav-mobile ul li a{position:relative;color:#FFF;font-family:'TiemposHeadlineBlack';font-weight:800;line-height:1.4;font-size:1.875rem;}

#header .menu.menu-open span{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;}
#header .menu span:nth-child(1){width:60%;}
#header .menu:hover span:nth-child(1){width:23px;}
#header .menu.menu-open span:nth-child(1){width:23px;-webkit-transform:rotate(45deg) translate(5px, 5px);transform:rotate(45deg) translate(5px, 5px);}
#header .menu.menu-open span:nth-child(2){opacity:0;}
#header .menu.menu-open span:nth-child(3){-webkit-transform:rotate(-45deg) translate(5px, -5px);transform:rotate(-45deg) translate(5px, -5px);}
/* end menu ================================================================================== */

/* content =================================================================================== */
#main-content{background-color:#fff;position:relative;background-image:linear-gradient(-1deg, #F4F7F6 15%, #fff 100%);padding:6rem 1rem 5rem;}
#main-content:before{content:"";position:absolute;top:0;width:100%;left:0;background:url('./img/kollektion_wave01.svg') no-repeat;background-size:100% 125%;padding-bottom:4%;-webkit-transform:translateY(-98%);transform:translateY(-98%);}
.wow{visibility:hidden;}
.grid{position:fixed;top:0;right:0;bottom:0;left:0;mix-blend-mode:difference;opacity:.04;width:100%;height:100%;max-width:1190px;margin:0 auto;}
.grid .line{position:relative;display:block;height:100%;width:1px;float:left;margin:0 -2px 0 50%;background:#FFF;}
.bounce{-webkit-animation:bounce 4s infinite ease-out;animation:bounce 4s infinite ease-out;}
.page-header h1{font-family:'Alex Brush', cursive;line-height:1;color:#67676a;display:inline-block;}
#scroll_down{display:none;}
#hero_container{position:relative;overflow:hidden;}
#hero_element, #hero_element .row, #scroll_down, #brand__section .row, #view_projects, #resume__section .row, #footer_container .row, #footer_container #footer_element, #copyright,.post_content .row{z-index:3;position:relative;}
canvas, #waterify01 img, #waterify02 img, #swirl03 img, #waterify04 img{width:100%;height:100%;}
#hero_container #waterify01{position:absolute;left:50%;top:0;width:100%;height:107%;}
#hero_element{padding:3rem 1rem 6.5rem;}
#hero_element h1{visibility:hidden;font-family:'TiemposHeadlineBlack';}
#hero_element h1.block-revealer{display:inline-block;visibility:visible;font-family:'Alex Brush', cursive;line-height:1;color:#fff;}
.block-revealer__element{position:absolute;top:0;left:0;width:100%;height:100%;background:#101013;pointer-events:none;opacity:0;}
#hero_element h4{color:#67676a;}
#hero_element p{color:#8e8e90;display:inline-block;font-size:0.99em;}

#brand_container .row>div{padding-right:0.9375em;padding-left:0.9375em;}
#brand__section{position:relative;background:#FFF;margin:0 auto;background-image:linear-gradient(-1deg, #F4F7F6 15%, #fff 100%);}
#brand_container{overflow:hidden;}
#waterify_element{position:absolute;left:-1rem;top:24%;width:calc(50% + 1rem);height:75%;overflow:hidden;}
#waterify02{width:200%;height:100%;max-height:700px;}
#brand__section h3,.title_hr h3{color:#67676a;font-size:0.75em;font-family:'Montserrat', sans-serif;font-weight:700;text-transform:uppercase;}
#brand__section h4{color:#101013;}
.brand_info p{color:#8e8e90;font-size:0.75em;line-height:1.75;text-align:justify;}
.brand_info .website a{color:#101013;font-size:0.75em;}
#brand__section .title_hr hr,.title_hr hr{width:80%;display:inline-block;background:#d3d5d5;height:2px;border:0;}
.title_hr{margin-bottom:25px;}

#footer_container{position:relative;padding:6rem 1rem;}
#footer_container::before{content:"";position:absolute;top:0;width:100%;left:0;background:url('./img/kollektion_wave02.svg') no-repeat;background-size:100% 125%;padding-bottom:4%;-webkit-transform:translateY(-95%);transform:translateY(-95%);}
#footer_container #waterify_element{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;}
#footer_container #waterify04{position:absolute;left:50%;top:0;width:200%;height:110%;}
#footer_container h4{color:#67676a;text-transform:uppercase;font-size:0.875em;}
#footer_container h1{margin-top:-15px;font-family:'Alex Brush', cursive;font-size:3.375em;line-height:1;color:#fff;}
#footer_container p{color:#8e8e90;font-size:0.875em;}
#footer_container #say_hello{margin:2rem 0 2.5rem;}
#footer_container #contact_details h4{margin-bottom:0.5rem;}
#footer_container #contact_details p{margin-bottom:2rem;font-size:0.875em;}
#footer_container #contact_details ul{margin-left:0;padding-left:0;margin-bottom:0;}
#footer_container #contact_details ul li:first-of-type{margin-top:-7px;}
#footer_container #contact_details ul li{list-style-type:none;line-height:1.7;font-size:1em;}
#contact_details ul li a{font-size:0.875em;}
#say_hello hr{border-color:#212226;border-style:solid;}

.page-about .post_content p{font-size:0.9375em;color:#2a2a2d;}

/* footer ==================================================================================== */
#copyright{padding:1.25rem 1rem;background-color:#17181c;}
#copyright p{color:#67676a;font-size:0.875em;margin:0;}
p.developer a{color:#67676a;}
p.developer a:hover{color:#a9a9a9;}

/* ==================================== Media Queries ======================================== */

@media (min-width: 48em) {
	.grid .line{margin:0 -2px 0 25%;}
	#header{padding:2rem 2rem;}
	#header .menu{display:none;}
	#header ul.nav{text-align:right;display:block;margin:0;}
	#header ul.nav li{display:inline-block;padding:0 20px;}
	.logo{max-width:75%;}
	#hero_element{padding:7rem 1rem 10rem;}
	#hero_element h1{margin-top:0;margin-bottom:5px;}
	#hero_element h1:first-of-type{margin-right:0;margin-bottom:0;}
	#hero_element h1.block-revealer{visibility:visible;}
	h1{font-size:2.35rem;margin-bottom:0.875rem;margin-top:1rem;}
	h4{font-size:0.813em;}
	#footer_container{padding:9rem 1rem 7rem;}
	#footer_container #say_hello{margin:2.5rem 0 3.5rem;}	
	#footer_container #contact_details ul{margin-top:20px;}
	#footer_container #contact_details ul li{font-size:1.063em;}
	#copyright p{font-size:0.875em;}
	p.developer{text-align:right;}
	#hero_element .row.top-xs{width:998px;}
	.page-header h1{margin-bottom:40px;}
}

@media (min-width: 64em) {
	#header{padding:2.750em 2rem;}
	#header ul.nav li{padding:0 30px;}
	#hero_container #waterify01{width:55%;}
	#hero_element{padding:8rem 1rem 12rem;}
	#hero_element h4{margin-top:2px;}
	h1{font-size:2.5rem}
	#waterify02{width:110%;}
	#footer_container{padding:10rem 1rem 8rem;}
	#footer_container #waterify04{width:55%;}
	#footer_container h4{margin-top:2px;}
	#footer_container #contact_details .col-sm-3{-ms-flex-preferred-size:20%;flex-basis:20%;max-width:20%;}	
	#footer_container #contact_details #phone{margin-left:1.125rem;}
	a.btn{padding:1.25rem 1.5rem;}	
}

@media (min-width: 80em) {
	.grid{border-left:1px solid #fff;}
	#scroll_down{display:block;margin-top:auto;}
	#scroll_down .fa{font-size:2.5em;}
	#main-content{padding:4rem 1rem 8rem;}
	#hero_element{height:calc(100vh - 220px);padding:0 1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:70px;position:relative;}
	#hero_element .row.top-xs{margin-top:auto;margin-bottom:0;}
	#hero_element h4{margin-top:2px;}
	#hero_element h1{font-size:3.875em;margin:0rem 0 1rem;}
	h1{font-size:3.5625em;margin:1rem 0;}
	#footer_container{padding:11rem 1rem 9rem;}
	#footer_container #waterify04{height:120%;}
	#footer_container #say_hello{margin:3.5rem 0 4rem;}	
	#footer_container #contact_details ul li{font-size:1.125em;margin-bottom:.125rem;}
	a.btn{padding:1.875em 2.500em;font-size:0.750em;}
	#phone{padding-left:30px;}
}

@media (max-width: 48em) { /* < 768px */
	.hidden-xs{display:none !important;}
	#loader__overlay .loader_container{max-width:200px;}
	#hero_element h1.block-revealer{margin-bottom:5px;}
	.brand_item{margin-bottom:25px;}
	#rev-2{margin-top:0;}
	#copyright p{font-size:0.75em;}	
}

@media (max-width: 29.25em) { /* < 468px */
	#brand_container .col-xs-6{width:auto;max-width:100%;flex-basis:auto;}
}