@import "elements.less";

@desktop:   ~"only screen and (min-width: 769px)";
@tablet:    ~"only screen and (min-width: 481px) and (max-width: 768px)";
@mobile: 	~"only screen and (max-width: 480px)";

@color1: #fbb42b; // Oranje
@color2: #323232; // Black
@color3: #ffffff; // Wit
@color4: #9b8a61; // Brown 

@font-family-header: 'PT Serif', serif; 
@font-family-text: 'Lato', sans-serif;

@default-line-height: 24px; 
@default-font-size: 16px; 

@font-size-h1: 38px;
@font-size-h2: 27px;
@font-size-h3: 19px;

body { height: 100%; width: 100%; background: #fff; }

/* -- TYPOGRAPHY -- */
h1, h2, h3, h4, h5, h6 { font-family: @font-family-text; color: @color2; }
h1 { 
	@media @desktop { 	font-size: @font-size-h1;  			}
	@media @tablet { 	font-size: @font-size-h1 - 4px; 	}
	@media @mobile { 	font-size: @font-size-h1 - 8px; 	} 
}
h2 { 
	@media @desktop { 	font-size: @font-size-h2;  			}
	@media @tablet { 	font-size: @font-size-h2 - 4px; 	}
	@media @mobile { 	font-size: @font-size-h2 - 8px; 	} 
}
h3 { font-size: @font-size-h3; }

p, a, span { font-family: @font-family-text; line-height: @default-line-height; color: @color2; font-size: @default-font-size; }

a { outline: 0 !important; 
	&:link {color: @color2 !important; }
}

/* -- BUTTONS -- */
.btn-default { font-family: @font-family-text !important; background: transparent; border: 1px solid #fff; color: #fff !important; border-radius: 0; padding: 10px 30px; text-transform: uppercase; .transition(.3s, ease); 
	&:hover { background: @color1; border: 1px solid transparent; }
}
.btn-action { background: @color1; border: none; color: @color2 !important; border: 1px solid transparent; 
	&:hover { color: @color3 !important; }
}
.btn-sub-action { background: transparent; border: 1px solid @color1; color: @color2 !important; 
	&:hover { color: @color3 !important;  }
}

.btn-ghost { 
	&:hover { background: @color2; opacity: 0.8; color: @color2; }
}


/* -- NAVBAR -- */
.navbar-inverse { background: @color3; border: none;  }
.navbar-brand { margin-top: 15px; }
.navbar-nav { 
	@media @desktop { float: right; }
	@media @tablet { float: none; }
	@media @mobile { float: none; } 

	li > a { color: @color2; margin-top: 15px; font-weight: bold; 
		&:hover { color: @color1 !important; }
	}
}

.navbar-brand > img { height: 40px; margin-top: -10px; 
	@media @tablet { margin-top: -16px; } 	
	@media @mobile { margin-top: -16px; } 	
}
.navbar-shadow { box-shadow: 0px 0px 2px 0px #888888; }
.active > a { color: @color1 !important;  
	@media @desktop { border-bottom: 4px solid @color1; }
	@media @tablet { border-bottom: none; }
	@media @mobile { border-bottom: none; } 
}

.navbar-toggle { margin-top: 17px !important; 
	&:focus, &:hover { background-color: transparent !important; }
	.icon-bar { background-color: @color2 !important; }
}

/* -- BANNER -- */
.banner-trilex { background: url(../images/3.jpg) center center; background-repeat: no-repeat; background-size: cover; height: 700px; width: 100%; margin-top: 69px; 
@media @desktop { }
@media @tablet { height: 600px !important; }
@media @mobile { height: 500px !important; } 	
	.banner-content { margin-top: 75px;
	@media @mobile { margin-top: 45px; } 
		h2 { font-family: @font-family-header; background-color: #323232; opacity: 0.8; color: @color3; padding: 10px 15px; display: inline;  
		@media @desktop { line-height: 62px; 	}
		@media @tablet { line-height: 55px;	}
		@media @mobile { line-height: 50px; padding: 10px 0;	/* font-size: 12px; */	} 
		}
		
		.btn-default { margin-top: 30px; }
	}
}


/* -- ABOUT -- */ 
.about-trilex { 
	.about-trilex-image { background: url(../images/8.jpg) center center; background-size: cover; background-repeat: no-repeat; height: 500px; 
	@media @desktop { }
	@media @tablet { }
	@media @mobile { display: none;} 	
	}
	
	.about-trilex-content { display: flex; align-items: center; justify-content: center; 
		@media @desktop { 	height: 500px;}
		@media @tablet { 	height: 100%; padding: 30px 0;}
		@media @mobile { 	height: 100%; padding: 30px 0;} 
	 
		.about-trilex-container { 
			@media @desktop { margin: 0 30px; }
			@media @tablet { margin: 0 15px; }
			@media @mobile { margin: 0 15px; } 
			
			p { margin-bottom: 30px; }
			h1 { margin-top: 0; }
			h3 { color: @color4; margin-bottom: 0; }
		}
	}	
}


/* -- PROJECTEN -- */
.project-trilex { background: url(../images/project-trilex-image.jpg) @color2 center center; background-repeat: no-repeat; background-size: cover; width: 100%; 
	@media @desktop { padding: 75px 0 90px;}
	@media @tablet { padding: 75px 0 45px;}
	@media @mobile { padding: 75px 0 45px;} 
	
	.padding-div { 
		@media @desktop { 	padding: 0 0 75px; }
		@media @tablet { 	padding: 0 0 30px; }
		@media @mobile { 	padding: 0 0 30px; } 
		
		.project-title { color: @color3;
			@media @desktop { }
			@media @tablet { padding: 0px 15px 30px; }
			@media @mobile { padding: 0px 15px 30px; }
		  
			span { color: @color3; }
			.thin { font-size: 34px; font-weight: 200; text-transform: uppercase; }
			.regular { font-size: 44px; font-weight: 400; }
			.bold { font-size: 44px; font-weight: 700; }
		}
		
		.project-text { 
			p { color: @color3; }
		}
	}
	
	.three-projects-trilex { box-sizing: border-box; 
		.project { height: 450px;  
			@media @desktop {  	width: 30%; margin: 0 1.665%; }
			@media @tablet {  	width: 100%; margin: 0 0 60px; }
			@media @mobile {  	width: 100%; margin: 0 0 60px; } 
		
			.image-trilex { height: 250px; width: 100%; min-height: 250px; 
				.plus-icon { right: 0; margin: 200px 15px 0 0; 
					&:before { padding: 4px 10px; border-radius: 50%; background-color: @color1; content: "\f067"; font-family: FontAwesome; right: 30px; position: absolute; bottom: 215px; color: #fff; }
				}
				img { height: 100%; width: 100%; }
			}
			.text { height: 200px; background-color: #fff; padding: 0 15px; margin-top: -20px;
				h3 { font-size: 24px; font-family: @font-family-header; padding: 15px 0; 
					&:after { content: ""; position: absolute; border-bottom: dotted 2px @color1; width: 50%; left: 15px; margin-top: 40px; }
				}
			}
		}		
	}	
}


/* -- FOOTER -- */
footer { padding: 45px 0 15px; 
	h3 { text-transform: uppercase; font-weight: 600; }
	
	.trilex-menu { 
		ul { margin: 0 !important; padding: 0 !important; 
			li { list-style: none; 
				a { color: @color2; }
			}
		}
	}
	
	.trilex-subscription { 
		@media @desktop { display: inherit; }
		@media @tablet { display: none; }
		@media @mobile { display: none; } 
	}
	
	.trilex-contact { 
		ul { margin: 0 !important; padding: 0 !important; 
			li { list-style: none; color: @color1; 
				a { color: @color2; 
					&:hover { text-decoration: none; }
				}
			}
		}
	}
	
	.hr-footer { margin: 45px 0 15px; }
	.copyright-trilex { 
		p { font-size: @default-font-size - 3px; }
	}
	
	.arrow-up { height: 25px; width: 25px; padding: 0; background-color: #a39fa7; float: right; 
		&:before { content: "\f077"; font-family: FontAwesome; right: 19px; position: absolute; top: -1px; color: #fff; }
	}
}

.mail-trilex { text-decoration: underline; 
	&:hover { text-decoration: underline !important; }
}


/* -- BEDRIJFSPROFIEL -- */ 
.bedrijfsprofiel-trilex { 
	.bedrijfsprofiel-trilex-image { background: url(../images/8.jpg) center center; background-size: cover; background-repeat: no-repeat; height: 600px; }
	
	.bedrijfsprofiel-trilex-content { background: #f5f5f5; display: flex; align-items: center; justify-content: center; height: 600px;
	@media @mobile { height: 700px; }  
		.bedrijfsprofiel-trilex-container { 
			@media @desktop { margin: 0 30px; }
			@media @tablet { margin: 0 15px; }
			@media @mobile { margin: 0 15px; }  
			
			h1 { margin-top: 0; }
			h3 { color: @color4; margin-bottom: 0; }
		}
	}	
}


/* -- PLAFONDS -- */ 
.plafonds-trilex { 
	.plafonds-trilex-image { background: url(../images/11.jpg) center center; background-size: cover; background-repeat: no-repeat; height: 700px; 
// 	@media @mobile { display: none !important;   } 
	}
	
	.plafonds-trilex-content { background: #f5f5f5; display: flex; align-items: center; justify-content: center; height: 700px; 
	@media @mobile { height: 1130px; } 	
		.plafonds-trilex-container { 
			@media @desktop { margin: 60px 30px 0; }
			@media @tablet { margin: 0 15px; }
			@media @mobile { margin: 0 15px; height: 100%; padding: 50px 0; position: relative; display: block; } 
			
			h1 { margin-top: 0; }
			h3 { color: @color4; margin-bottom: 0; }
		}
	}
	
	.background-none { background: #fff !important; }	
}

.trilex-image-2 { background: url(../images/103.jpg) center center !important; background-size: cover !important; background-repeat: no-repeat !important; }

.plafonds-trilex-content-2 { 
@media @mobile { height: 1430px !important; } 
}


/* -- CONTACT MODAL -- */ 
.modal-body { 
	p { font-weight: bold; }
	
	ul { margin: 0 !important; padding: 0 !important; 
		li { list-style: none; color: @color1; 
			a { color: @color2; 
				&:hover { text-decoration: none; }
			}
		}
	}
}