/*
Theme Name: Lux
Author: Maxime Tolbecq
Author URI: http://www.climbthemountain.be;
Description: Theme for Lux
Version: 1.0
*/


/*

-----------------------------------------------
Author: Mountain
Author website: http://www.climbthemountain.be
-----------------------------------------------



Index
1.0 Global
2.0 Header
3.0 Pages
	3.1 Pages: Front
	3.2 Default page
	3.3 Contact
	3.4 Single Portfolio
4.0 Footer
5.0 Responsive

*/

/* RESET CSS */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML DISPLAY ROLE */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	color: #272223;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.floatleft{
	float: left;
}

/* 1.0 GLOBAL */

body{
    /* font-family: 'Lora', serif; */
    /* font-family: 'Poppins', sans-serif; */
	font-family: 'Open Sans Condensed', sans-serif;
	-webkit-font-smoothing: antialiased;
	color: #3B3B3B;
}

.clearboth{
	clear: both;
}

a, a:active, a:hover, a:visited{
	text-decoration: none;
	color: inherit;
}

h1{}

h2{}

h3{}

h4{}

h5{}

h6{}

strong{
	font-weight: 700;
}

.strong{
	font-weight: 700;
}

.autowrap{
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
}

/* loader animation */

.loader{
	position: absolute;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	width: 100px;
	height: 100px;
	background-image: url('img/icons/loader.gif');
	background-size: 100px 100px;
	top: 100px;
}

/* button animation */
 
.button{
	display: block;
	width: 300px;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	color: #F7F7F7 !important;
	text-align: center;
	position: relative;
	transition: all .35s;
	background-color: #3B3B3B;
}

.button span{
	position: relative;
	z-index: 2;
}

.button:after{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #5a5a5a;
	transition: all .35s;
}

.button:hover{
	color: #fff;
}

.button:hover:after{
	width: 100%;
}

.hr{
	border-top: 1px solid #c2c2c2;
	margin: 50px 0 25px 0;
}

/* 2.0 Header */

.header{
	margin-top: 60px;
	overflow: auto;
	margin-bottom: 110px;
	height: 33px;
}

.headerlogo{
	font-weight: 500;
	font-size: 26px;
	display: block;
	float: left;
}

.nav{
	font-size: 16px;
	float: right;
	font-weight: 300;
	padding-top: 8px;
}

.nav li{
	float: left;
	margin-left: 25px;
}

/* 3.0 Pages */

/* 3.1 Pages: Front */

.portfolio{
	width: 90%;
	max-width: 1140px;
	margin: 0 auto;
	opacity: 0;
}

.portgrid{
	width: calc(100% + 30px);
	margin-right: -15px;
	margin-left: -15px;
	margin-bottom: 50px;
}

.grid-item {
	width: calc((100% - 90px) / 3);
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 30px;
	float: left;
	height: auto;
}

.grid-item-wrap{
	position: relative;
	text-align: center;
}

.grid-item a{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	display: block;
}

.grid-item img{
	width: 100%;
	height: auto;
}

.grid-item-content{
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	color: white;
	z-index: 3;
	line-height: 30px;
	padding: 0 25px;
	box-sizing: border-box;
}

.grid-item-title{
	font-weight: 300;
	font-size: 20px;
	opacity: 0;
}

.grid-item-cat{
	font-size: 15px;
	font-weight: 400;
	opacity: 0;
}

.overlaybgr{
	position: absolute;
	z-index: 2;
	background-color: black;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.portgrid:after {
	content: '';
	display: block;
	clear: both;
  }

.h1{
	height: 300px;
	/* background-color: teal; */
}

.h2{
	height: 500px;
	/* background-color: red; */
}

.project{
	background: gray;
}

.work{
	/* background: teal; */
}

.filters{
	list-style: none;
	margin-bottom: 35px;
	font-size: 16px;
	font-weight: 500;
	color: #9D9D9D;
}

.filters li{
	display: inline;
	margin-right: 20px;
}

.activefilter{
	
}

.portfilter {
	position: relative;
	padding-bottom: 4px;
	color: #3B3B3B !important;
}

.portfilter:before, .portfilter:after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: black;
}

.portfilter:before {
	opacity: 0;
	transform: translateY(-8px);
	transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}

.portfilter:after {
	opacity: 0;
	transform: translateY(4px);
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.portfilter.activefilter:before, .portfilter.activefilter:after {
	opacity: 1;
	transform: translateY(0);
}

.portfilter.activefilter:before{
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.portfilter.activefilter:after{
	transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}

.grid-item-text a{
	width: unset;
	height: unset;
	position: unset;
	z-index: unset;
	display: block;
	padding: 25px 25px 25px 25px;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 30px;
	line-height: 77px;
}

/* 3.2 Default page */

.defaultwrap{
	margin-bottom: 50px;
	color: black;
}

.defaultwrap h1{
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 25px;
}

.defaultwrap img{
	max-width: 100%;
	height: auto;
	padding-right: 25px;
}

.defaultwrap .wp-block-image {
    margin-bottom: 1em;
    max-width: 50%;
    margin-right: 2em;
	height: auto;
}

.defaultwrap p{
	font-size: 16px;
	font-weight: 400;
	color: #3B3B3B;
	line-height: 29px;
	margin-bottom: 25px;
	text-align: justify;
}

/* 3.3 News */

.newslist{
	max-width: 745px;
	float: left;
}

.newsmeta{
	float: left;
	margin-left: 65px;
	width: 330px;
}

.newsmetatitle{
	display: block;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 30px;
}

.newsmeta li{
	font-size: 16px;
	color: #808080;
	margin-bottom: 20px;
	width: 100%;
	line-height: 22px;
}

.newswrap .button{
	width: 165px;
	margin-bottom: 75px;
}

.newsitem:last-child .hr{
	display: none;
}

.newsitem img{
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 30px;
	border: none;
}

.newsitem h2{
	font-size: 21px;
	font-weight: 500;
	margin-bottom: 15px;
	line-height: 25px;
}

.newsitem .hr{
	opacity: 0.3;
	margin: 50px 0;
}

.newsdate{
	font-size: 15px;
	font-weight: 400;
	color: #868686;
	display: block;
	margin-bottom: 20px;
}

.newscontent{
	font-size: 15px;
	font-weight: 400;
	/* color: #868686; */
	line-height: 25px;
	margin-bottom: 10px;
}

.newscontent p{
	margin-bottom: 25px;
}

.newscontent figure img{
	margin-bottom: 0 !important;
}

.downloadfile a{
	display: inline-block;
	margin-bottom: 25px;
	line-height: 33px;
}

.downloadfile a img{
	height: 16px;
	vertical-align: middle;
	margin-right: 10px;
	width: auto;
	display: inline;
	margin-bottom: 0px;
	border: none;
	padding-right: 0;
}

/* 3.3 Contact */

.contactwrap h1{
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 25px;
}

.contactwrap p{
	margin-bottom: 30px;
	line-height: 24px;
	color: #868686;
}

.sentmessage{
  width: 100%;
  background-color: #f6f6f6;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 75px;
}
.validate-error{
  width: 100%;
  background-color: #f4c8c8;
  padding: 15px;
  text-align: center;
  font-weight: 700;
  color: #2d2d2d;
  box-sizing: border-box;
  margin-bottom: 25px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: none;
}

.contact-text {
  display: block;
  border: none;
  float: left;
  width: 100%;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #f6f6f6;
  padding: 11px 20px;
  box-sizing: border-box;
  font-size: 13px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #808284;
  font-family: 'Poppins', sans-serif;
}

.contactform{
	max-width: 700px;
}

.contact-textarea {
  width: 100%;
  height: 200px;
  border: none;
  margin-bottom: 40px;
  background-color: #f6f6f6;
  padding: 11px 20px;
  box-sizing: border-box;
  font-size: 13px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  resize: none;
  color: #808284;
  font-family: 'Poppins', sans-serif;
}

.formbutton{
	display: block;
	width: 300px;
	height: 40px;
	line-height: 40px;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	color: #F7F7F7 !important;
	text-align: center;
	position: relative;
	transition: all .35s;
	background-color: #3B3B3B;
	border: none;
    cursor: pointer;
}



.needsfilled{
	border: 1px solid red;
}

/* .contact-left{
	max-width: 745px;
	float: left;
	margin-bottom: 75px;
} */

.contact-meta{
	float: left;
}

.contactmetatitle{
	display: block;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 20px;
}

.contact-meta ul{
	margin-bottom: 40px;
}

.contact-meta li{
	font-size: 16px;
	/* color: #808080; */
	margin-bottom: 10px;
}

.contactsocial{
	float: left;
}

.contactsocial li{
	float: left;
	margin-right: 15px;
}

.contactsocial img{
	display: block;
	width: 15px;
	height: auto;
}

.presentedbycol{
	display: block;
	float: left;
	margin-right: 207px;
}

.presentedbycol:last-child{
	margin-right: 0;
}

/* 3.4 Single Portfolio */


.portfoliowrap{}

.portfolio-left{
	width: 655px;
	float: left;
	margin-bottom: 75px;
	margin-right: 65px;
}

.portfolio-left h1{
	display: none;
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 25px;
	line-height: 40px;
}

.portfolio-project-left h1{
	display: block;
}

.portfolio-left img{
	margin-bottom: 25px;
}

.portfolio-meta{
	float: left;
	width: 420px;
	overflow: auto;
	margin-bottom: 100px;
}


.portfolio-meta h1{
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 25px;
	line-height: 40px;
}

.portfolio-metatitle{
	display: block;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 20px;
}

.portfolio-metatitle-date{
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 20px;
}

.metadate{
	font-size: 16px;	
	font-weight: 400;
	margin-bottom: 20px;
	padding-left: 20px;
}

.portfolio-meta p{
	margin-bottom: 30px;
	line-height: 30px;
	text-align: justify;
	/* color: #868686; */
}

.worksnumbered{
	list-style-type: decimal !important;
	padding-left: 20px;
	margin-bottom: 30px;
	list-style-position:outside;
}

.worksnumbered li{
	margin-bottom: 15px !important;
	padding-left: 15px;
	line-height: 21px;
}

/* .worksnumbered li::before {
	content: "";
	width: 20px;
	display: inline-block;
  } */


.bx-wrapper {
    position: relative;
    margin-bottom: 60px;
    padding: 0;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0px solid #fff !important;
    background: #fff;
}

.portfolio-meta ul{
	margin-bottom: 40px;
}

.portfolio-meta li{
	font-size: 14px;
	/* color: #808080; */
	margin-bottom: 10px;
}

.portfoliosocial li{
	float: left;
	margin-right: 15px;
}

.portfoliosocial img{
	display: block;
	width: 15px;
	height: auto;
}

.portfolio-project-left{
	width: 100%;
	margin-right: 0;
	margin-bottom: 25px;
}
.portfolio-project-left h1{
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 50px;
}

.project-gallery{
	width: 100%;
	/* width: calc(100% + 20px); */
	margin-right: -10px;
	margin-left: -10px;
}

.project-gallery a{
	width: calc((100% - 100px) / 5);
	height: auto;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	display: block;
	float: left;
}

.project-meta{
	width: 100%;
}

.project-gallery a img{
	width: 100%;
	height: auto;
	margin-bottom: 0 !important;
}

figure {
	float: left;
}
  
figcaption {
	display: none;
}


/* Texts */

.portfoliotextwrap h1{
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 25px;
	line-height: 40px;	
}

.portfoliotextwrap p{
	margin-bottom: 30px;
	line-height: 30px;
	text-align: justify;
	/* color: #868686; */
}

.linkedproject a{
	display: inline-block;
	margin-bottom: 25px;
	line-height: 33px;
}

.linkedproject a img{
	height: 16px;
	vertical-align: middle;
	margin-right: 5px;
}

/* 4.0 Footer */

.footer{
	/* background-color: #F3F3F3; */
	width: 100%;
	height: 380px;
	padding-top: 70px;
}

.footertitle{
	display: block;
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 25px;
}

.footer .hr:first-child{
	margin: 0 0 45px 0;
}

.footercol{
	width: calc(100% / 3);
	float: left;
}

.footercol ul, .footercol p{
	color: #4E4E4E;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
}

.footercol p{
	margin-bottom: 20px;
}

.footercol li{
	margin-bottom: 8px;
	line-height: 20px;
}

.footercol-subscribe{
	/* display: none; */
}

.copyright{
	font-size: 14px;
	font-weight: 300;
	color: #9E9E9E;
}

.footersocial{
	float: right;
}

.footersocial li{
	float: left;
	margin-left: 15px;
}

.footersocial img{
	display: block;
	width: 15px;
	height: auto;
}

.footernewslist li{
	text-overflow: ellipsis;
	overflow: hidden; 
	width: 80%; 
	white-space: nowrap;
}

.footer .button{
	width: 100%;
	max-width: 300px;
}

/* Responsive */

.togglenav{
    display: none;
    float: right;
    background-image: url('img/icons/icon-menu.svg');
    background-repeat: no-repeat;
    text-indent: 25px;
	margin-top: 7px;
    background-size: 18px;
    background-position: left center;
}

.respnav{
    display: none;
    text-align: center;
    padding-bottom: 17 px;
	margin-top: 50px;
}

.respnav li{
    border-bottom: 1px solid #e8e8e8;
    padding: 17px 0 17px 0;
}

.respnav li:last-child{
    border-bottom: none!important;
}

@media screen and (max-width: 1400px) {
	.autowrap, .portfolio{
		width: 60%;
	}
	.newsmeta{
		display: none;
	}
	.newslist{
		width: 100%;
		max-width: 100%;
	}
	.newsitem{
		width: 100%;
	}

	.portfolio-left{
		width: 50%;
		margin-right: 10%;
	}

	.portfolio-meta{
		width: 40%;
		float: right;
	}

	.portfolioSlider img{
		width: 100%;
	}

	.portfolio-project-left, .project-meta{
		width: 100%;
	}

	.project-gallery a{
		width: calc((100% - 80px) / 4);
	}
	
	.contactform{
		max-width: 100%;
	}

}



@media screen and (max-width: 1150px) {
	.contact-left, .contact-meta{
		max-width: 100%;
	}
	.contact-meta{
		margin-left: 0;
	}

	.project-gallery a{
		width: calc((100% - 60px) / 3);
	}
}


@media screen and (max-width: 900px) {
	.footercol-subscribe{
		display: none;
	}
	.footercol{
		width: 50%;
	}

	.portfolio-left, .portfolio-meta{
		width: 100%;
		margin-right: 0;
	}

	.portfolio-left{
		margin-bottom: 0;
	}

	.portfolio-left h1{
		display: block;
	}

	.portfolio-meta h1{
		display: none;
	}

	.project-gallery a{
		width: calc((100% - 40px) / 2);
	}

	


}

@media screen and (max-width: 1000px) {

	.nav{
		display: none;
	}

	.togglenav{
		display: block;
	}
}


@media screen and (max-width: 666px) {
	
	.portfolio, .autowrap{
		width: 80%;
	}
	.grid-item {
		width: 100%;
	}

	.portgrid {
		width: 100%;
	}
	.footercol{
		width: 100%;
		padding-bottom: 50px;
	}
	.footer{
		height: auto;
		overflow: auto;
	}
	.footer .hr{
		margin: 0 0 25px 0;
	}
	.copyright{
		width: 100%;
		float: none;
	}
	.footersocial{
		width: 100%;
		float: none;
		margin: 25px 0;
		padding-bottom: 75px;
	}
	.footersocial li{
		margin-left: 0;
		margin-right: 15px;
	}
	.formbutton{
		width: 100%;
	}
	.presentedbycol{
		margin-right: 30px;
	}
}

@media screen and (max-width: 666px) {
	.togglenav{
		position: absolute;
		top: 22px;
	}
	.header{
		margin-top: 100px;
		overflow: auto;
		margin-bottom: 60px;
	}
}