@charset "utf-8";
/* CSS Document */

@font-face {
font-family: "Elephant";
src: url("Elephant.ttf") format("truetype");
}

body {
	margin:0;
	padding:0;
	margin-top:20px;
	color:#1a270c;
}

#nav {
	width: 100%;
	text-align:center;
	margin:12px 0px;
}

ul {
/*	list-style-type:none;
	text-align:center;
		overflow:hidden;
	background-color:;*/
	
	margin:0;
	padding:0;
}

ul.title-image {	
	background-color: black;
}


li {
	display: inline;
	text-align: center;
}

li a {
	font-family: "Elephant";
	font-size:1.65em;
	display:inline-block;
	color:#82c341;
	text-align: center;
	padding: 16px;
	text-decoration: none;	
	transition: 0.5s;	
}

li a:hover {
	text-decoration:underline;	
	color:#1a270c;	
	color:#202020;	
}

a.footer-link {
	color:white;	
}

button {
	width:100%;
}

a.button , button { 
/*	font-family: "Elephant";*/
	font-family: 'Montserrat', sans-serif;
	font-size:1.35em;
	font-size:1.15em;
	font-weight:;
	color:#FFF;
	text-decoration:none;
	display:block;
	border-radius: 4px;
	background-color:#000;
	padding:24px;
	padding:18px;			
	text-align:center;

	/* backup style */
	color:#1a270c;
	background-color:#a1a1a1;
	border: 2px solid #a1a1a1;
	
	color:white;
	transition: 0.5s;	
}

a.button {
	background-color:#77bd32;
	border: 2px solid #77bd32;
}

a.button:hover, button:hover {
	cursor:pointer;
	text-decoration:none;
	color:#1a270c;
	color:white;

	background-color:black;
	border: 2px solid black;
}

.title-image {
	position: relative;
	text-align: center;
	color: white;
}

.title-image img {
	width:100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px; /* height of container */
    object-fit: cover;
	opacity: 1;
}

.title-image-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.project-thumbnail {
	height:280px;
	margin:0px 0px 48px 0px;
	display:inline-block;
	float:left;
	overflow:hidden;
	position:relative;
}

.project-thumbnail img {
	width:100%;	
	transition: 0.5s all ease-in-out;
}

img.project-thumbnail {
	background:gray;
	height:140px;
	min-width:220px;
	margin:0px 12px 12px 0px;
	display:
	inline-block;
}

.project-thumbnail:hover img {
	transform:scale(1.2);
}

.images-box {
	max-width: 100%;
	padding:0% 3.5%;
    margin: 0 auto;
	font-size:1.4em;	
}

.project-detail {
	float:left;
	width:26%;
	display:inline-block;
	margin:0 auto;
	padding:7% 3.5%;
}

.project-image img{
	width:100%;
}

img.project-image {
	background:gray;
	height:440px;
	min-width:100%;
	max-width:720px;
	margin:0px 12px 12px 0px;
	display:inline-block;
}




/* TEXT */

h1 {
	font-family: "Elephant";
	font-size:5em;
	text-align:center;
}

h2 {
	font-family: "Elephant";
	font-size:2em;		
	color:#1a270c;	
	color:#202020;
/*	text-align:center;*/
	margin:0px 0px 24px 0px;
	padding:0;
	margin-top:24px;
}

.text-box {
	max-width: 750px;
/*    padding: 12px;*/
	padding:48px;
    margin: 0 auto;
	font-size:1.4em;
}

p {
	margin:0;
	padding:0;
}

p, p.tagline {
	font-size:1em;
	font-family: 'Neucha', cursive;
	font-family: 'Montserrat', sans-serif;
	color:#1a270c;	
	line-height:1.45;

/* margin fix */
/*	margin:0;*/
	margin:32px 0px;
	padding:0;
}

p.tagline {
	font-size:1.4em;	
	text-align:center;
/*	    padding: 24px;	*/
}

p.detail {
	margin:32px 0px 0px 0px;	
}

p.contact {
	margin:0;
	margin-top:24px;
}

p.label-categorie{
/*	font-weight:600;*/	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width:100%;
}

p.label-categorie, p.label-detail {
	padding:4px 12px;
	color:white;
	position: absolute;
	bottom: -32px;
	left: 0px;
	background:#77bd32;
	font-size:1.1em;
}

p.label-detail {
	background:#202020;
/*	width:14px;
	text-align:center;	*/
	font-size:.9em;
}

.image-number {
	display:inline-block;
	background:#77bd32;
	background:#202020;
	color:white;
	padding:4px 12px;
	margin:0;
	width:14px;
	font-size:1.1em;
	text-align:center;
}



/* FORMS */

form {
	margin:24px 0px 0px 0px;	
}

label {
	font-family: 'Montserrat', sans-serif;		
}

input[type=text], input, textarea {
	width:100%;		
    padding: 16px 20px;
    margin: 8px 0px 32px 0px;
    box-sizing: border-box;
	background-color:#F9F9F9;
	border:2px solid #ebebeb;
	font-size:1.1em;
	font-family: 'Montserrat', sans-serif;	
	color:#82c341;
	-webkit-transition: 0.5s;	
	transition: 0.5s;
	outline: none;
	border-radius: 4px;	
	line-height:1.45;
}

input[type=text]:focus, input:focus, textarea:focus {
	border:2px solid #82c341;
}

input[type=checkbox] {
	margin-left:8px;
}

input[type=checkbox]:hover {
	cursor:pointer;
}

input[type=submit] {
	font-size:1.0em;
	line-height:1em;
    padding: 16px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border:none;
}

.button button-primary {
	font-size:1.em;
	line-height:1.6em;
	}

input[type=submit]:hover {
	text-decoration:none;
	background-color:#82c341;
	cursor:pointer;
}



/* Footer */



footer {
	background-color:#202020;
	margin:0;
	padding:0;
	clear:both;
}

footer p, p.footer {
	color:white;
	font-size:.75em;
	text-align:center;
	margin:0;
}

footer a, a.footer, a.footer:visited {
	color:white;	
}

img {
	max-width:100%;	
}

img.title-image {
	opacity: 0.75;	
}


.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:130px;
}


@media only screen and (max-width: 960px) and (min-width:751px) {

.text-box {
	padding:48px;
}

h1 {
	font-size:3.5em;	
}
	

.title-image img {
	height:400px;
}
}

@media only screen and (max-width: 750px) and (min-width:601px) {

.text-box {
	padding:48px;
}

h1 {
	font-size:2.5em;
}
	

.title-image img {
	height:300px;

}
}

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

.title-image-text {
	position: absolute;
	top: 50%;
	left: 30%;
	transform: translate(-20%, -50%);
}

h1 {
	font-size:2.4em;
}

h2 {
	font-size:1.5em;
/*	margin:0;*/
}

p.line {
	font-size:1.15em;	
}

p.line, p {
	margin:;
	padding:0;
}

p.detail {
	margin:16px 0px;	
}

.text-box {
}

.title-image img {
	max-height:300px;
}

.project-thumbnail {
	min-width:100%;
	width:100%;
	height:180px;
}
	
.project-thumbnail img {
	min-width:500px;
	width:500px;
	margin:0;
}

.project-thumbnail:hover img {
	transform:scale(1);
}

p.label-categorie {bottom: 0px;margin:0;}

.images-box {
	padding:3.5% 3.5%;
}

.project-detail {
	float:left;
	width:93%;
	display:inline-block;
	margin:0 auto;
	padding:7% 3.5%;
}

}