/*
Author: Raphaël Auger
*/




/*--------------------*/
/* BASICS */
/*--------------------*/


@font-face {
    font-family: 'sassoon_infant_stdregular';
    src: url('font/sassooninfantstd-webfont.woff2') format('woff2'),
         url('font/sassooninfantstd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* VARIABLES */
:root {
	--default-mw: 1280px;

	--xxxs: 6px;
	--xxs: 10px;
	--xs: 14px;
	--s: 18px;
	--m: 24px;
	--l: 32px;
	--xl: 42px;
	--xxl: 54px;
	--xxxl: 70px;

	--extralight: 200;
	--light: 300;
	--regular: 400;
	--semibold: 600;
	--bold: 700;
	
	--coeff20: .2;
	--coeff25: .25;
	--coeff33: .33.33;
	--coeff50: .5;
	--coeff75: .75;
	--coeff100: 1;

	--white: #fff;
	--black: #000;
	--light-grey: #e8e8e8;
	--grey: #4f6767;
	--dark: #283434;
	--item-hover: #283434ee;
	--green: #96c11f;
}

body {
	background: var(--light-grey);
}

* {
    box-sizing: border-box;
	margin: 0;
	padding:0;
	border-radius: 0;
	border: none;
	box-sizing: border-box;
	font-family: 'Titillium Web', sans-serif;
	color: var(--dark);
	font-size: var(--s);
	font-weight: var(--regular);
	letter-spacing: 0;
	text-align: left;
	list-style: none;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	transition: all .25s ease-in-out;
}

img {
	display: block;
	border: none;
	max-width: 100%;
	object-fit: contain;
}



/* FONTS */

.f-xxl {
	font-size: calc(var(--xxl) * var(--coeff100));
}

.f-xl {
	font-size: calc(var(--xl) * var(--coeff100));
}

.f-l {
	font-size: calc(var(--l) * var(--coeff100));
}

.f-m {
	font-size: calc(var(--m) * var(--coeff100));
}

.f-s {
	font-size: calc(var(--s) * var(--coeff100));
}

.f-xs {
	font-size: calc(var(--xs) * var(--coeff100));
}

.f-xxs {
	font-size: calc(var(--xxs) * var(--coeff100));
}

.extralight {
	font-weight: var(--extralight);
}

.light {
	font-weight: var(--light);
}

.regular {
	font-weight: var(--regular);
}

.semibold {
	font-weight: var(--semibold);
}

.bold {
	font-weight: var(--bold);
}

a {
	text-decoration: none;
}

.tdu {
	text-decoration: underline;
	text-decoration-color: var(--green);
}



/* COLORS */

.white {
	color: var(--white);
}

.black {
	color: var(--black);
}

.light-grey {
	color: var(--light-grey);
}

.grey {
	color: var(--grey);
}

.dark {
	color: var(--dark);
}

.green {
	color: var(--green);
}

.bg-white {
	background: #fff;
}

.bg-black {
	background: #000;
}

.bg-grey {
	background: var(--grey);
}

.bg-dark {
	background: var(--dark);
}

.bg-green {
	background: var(--green);
}

.bg-gradient {
	background: radial-gradient(#ffffffff, #ccccccff 100%), 
	linear-gradient( #cccccc00 70%,  #ccccccff 100%);
	background-blend-mode: multiply;
}

.bg-texture {
	background-image: url("images/texture.gif");
	background-repeat: repeat;
}

a:hover {
	color: var(--green);
}



/* COMMONS */


.dash {
	height: 2px;
	width: calc(var(--xl) * 2 * var(--coeff100));
	display: block;
}

.btn,
input[type="submit"] {
	display: inline-block;
	font-size: var(--s);
	font-weight: var(--regular);
	border-radius: var(--xxs);
	padding: var(--xxxs) var(--xs);
}

.btn:hover,
input[type="submit"]:hover {
	color: var(--green);
}

.fl {
	float: left;
}

.fadeIn {
	-webkit-animation: fadeIn .25s;
	-moz-animation: fadeIn .25s;
	animation: fadeIn .25s;
}





/*--------------------*/
/* STRUCTURE */
/*--------------------*/


main {
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 100vh;
}

.container {
	max-width: var(--default-mw);
	margin: 0 auto;
	padding: 0 var(--l);
}


/* MARGIN / PADDING */

/* MARGIN TOP */

.mt-xxs { margin-top: var(--xxs); }

.mt-xs { margin-top: var(--xs); }

.mt-s { margin-top: var(--s); }

.mt-m { margin-top: var(--m); }

.mt-l { margin-top: var(--l); }

.mt-xl { margin-top: var(--xl); }

.mt-xxl { margin-top: var(--xxxl); }

.mt-xxxl { margin-top: var(--xxxl); }

/* PADDING TOP */

.pt-xxs { padding-top: var(--xxs); }

.pt-xs { padding-top: var(--xs); }

.pt-s { padding-top: var(--s); }

.pt-m { padding-top: var(--m); }

.pt-l {	padding-top: var(--l); }

.pt-xl { padding-top: var(--xl); }

.pt-xxl { padding-top: var(--xxxl); }

.pt-xxxl { padding-top: var(--xxxl); }

/* MARGIN BOTTOM */

.mb-xxs { margin-bottom: var(--xxs); }

.mb-xs { margin-bottom: var(--xs); }

.mb-s { margin-bottom: var(--s); }

.mb-m { margin-bottom: var(--m); }

.mb-l { margin-bottom: var(--l); }

.mb-xl { margin-bottom: var(--xl); }

.mb-xxl { margin-bottom: var(--xxxl); }

.mb-xxxl { margin-bottom: var(--xxxl); }

/* PADDING BOTTOM */

.pb-xxs { padding-bottom: var(--xxs); }

.pb-xs { padding-bottom: var(--xs); }

.pb-s { padding-bottom: var(--s); }

.pb-m { padding-bottom: var(--m); }

.pb-l {	padding-bottom: var(--l); }

.pb-xl { padding-bottom: var(--xl); }

.pb-xxl { padding-bottom: var(--xxxl); }

.pb-xxxl { padding-bottom: var(--xxxl); }

/* MARGIN LEFT */

.ml-xxs { margin-left: var(--xxs); }

.ml-xs { margin-left: var(--xs); }

.ml-s { margin-left: var(--s); }

.ml-m { margin-left: var(--m); }

.ml-l { margin-left: var(--l); }

.ml-xl { margin-left: var(--xl); }

.ml-xxl { margin-left: var(--xxxl); }

.ml-xxxl { margin-left: var(--xxxl); }

/* PADDING LEFT */

.pl-xxs { padding-left: var(--xxs); }

.pl-xs { padding-left: var(--xs); }

.pl-s { padding-left: var(--s); }

.pl-m { padding-left: var(--m); }

.pl-l {	padding-left: var(--l); }

.pl-xl { padding-left: var(--xl); }

.pl-xxl { padding-left: var(--xxxl); }

.pl-xxxl { padding-left: var(--xxxl); }

/* MARGIN RIGHT */

.mr-xxs { margin-right: var(--xxs); }

.mr-xs { margin-right: var(--xs); }

.mr-s { margin-right: var(--s); }

.mr-m { margin-right: var(--m); }

.mr-l { margin-right: var(--l); }

.mr-xl { margin-right: var(--xl); }

.mr-xxl { margin-right: var(--xxxl); }

.mr-xxxl { margin-right: var(--xxxl); }

/* PADDING RIGHT */

.pr-xxs { padding-right: var(--xxs); }

.pr-xs { padding-right: var(--xs); }

.pr-s { padding-right: var(--s); }

.pr-m { padding-right: var(--m); }

.pr-l {	padding-right: var(--l); }

.pr-xl { padding-right: var(--xl); }

.pr-xxl { padding-right: var(--xxxl); }

.pr-xxxl { padding-right: var(--xxxl); }



/* GRID */

.grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 calc(var(--xs) * -1);
}

.ais {
	align-items: start;
}

.db {
	display: block;
}

.dn {
	display: none;
}

.col25 {
	--col: 25%;
}

.col33 {
	--col: 33.33%;
}

.col40 {
	--col: 40%;
}

.col50 {
	--col: 50%;
}

.col60 {
	--col: 60%;
}

.col100 {
	--col: 100%;
}

.w50 {
	width: 50%;
}

.w75 {
	width: 75%;
}

.w100 {
	width: 100%;
}

.item {
	flex: 0 calc(var(--col) - (var(--xs) * 2));
	margin: var(--xs);
	overflow: hidden;
}

/*.shadow {
	border-radius: var(--xs);
	box-shadow: 0 0 5px #00000066;
}*/

.contact-item {
	flex: 100%;
	margin: 0 auto var(--s) auto;
	flex-direction: column;
}





/*--------------------*/
/* MENU */
/*--------------------*/


nav {
    position: fixed;
    width: 100%;
	top: 0;
	left: 0;
	right: 0;
	z-index: 8;
}

nav .nav-container {
    display: flex;
    max-width:  var(--default-mw);
    height: 45px;
    margin: auto;
	padding: 0 var(--l);
    justify-content: space-between;
    align-items: center;
}

.logo {
	float: left;
	height: 25px;
	object-fit: contain;
}

.nav-container h4 {
	display: inline-block;
}

.nav-container a, .nav-container h4,.nav-container h4 span, .menu a, .menu p {
	font-size: var(--xs);
	height: 25px;
	color: var(--white);
}

.nav-container img{
	margin-right: var(--xs);
}

nav input[type="checkbox"],
nav .hamburger-lines {
    display: none;
}

.menu {
	display: flex;
}

.menu a,
.menu p {
	margin-left: 25px;
}

.menu a:hover {
	color: var(--green);
}

.menu p {
	color: var(--green);
}



/*--------------------*/
/* HOME */
/*--------------------*/


.overflow-hidden {
	overflow: hidden;
}

.slideshow {
	display: flex;
	margin: 0 calc(var(--l) * -1);
	-webkit-animation: translate infinite 16s;
	-moz-animation: translate infinite 16s;
	animation: translate infinite 16s;
}

.slide {
	flex: 0 0 100%;
	padding: 0 var(--l);
	-webkit-animation: fadeInOut ease-in-out infinite 4s;
	-moz-animation: fadeInOut ease-in-out infinite 4s;
	animation: fadeInOut ease-in-out infinite 4s;
}

.slide p {
	font-size: clamp(1.5rem, 0.15rem + 4.5vw, 3.75rem);
	line-height: clamp(1.85rem, 5.75vw, 4.75rem);
	color: #000;
}




/*--------------------*/
/* SERVICES */
/*--------------------*/


.lpv h1 span {
    font-family: 'sassoon_infant_stdregular';
	font-size: var(--xl);
}

.lpv h1 {
	font-size: var(--s);
}

#services h2 {
    font-family: 'sassoon_infant_stdregular';
	margin-bottom: var(--xs);
}





/*--------------------*/
/* WORK */
/*--------------------*/



/** LIGHTBOX **/


#work .item:hover {
	box-shadow: 0 0 var(--xs) #00000066;
}

.a-img-txt {
	display:grid; 
  }

.a-img-txt>* {
	grid-area:1/1/-1/-1; 
}  

.a-txt {
	display:flex;
	justify-content: center;
	align-items:center;
	text-align: center;
	padding: calc(var(--xs) * 2);
	color: var(--white);
	opacity: 0;
}

.a-txt:hover {
	background-color: var(--item-hover);
	opacity: 1;
}

 .lightbox {
	display: none;
}

.lightbox:target {
	position: fixed;
	display: flex;
	z-index: 10;
	background: #000000e4;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.box {
	margin: auto;
	position:relative;
	max-width:90%;
}

.box .shadow {
	/* border-radius: calc(var(--xs) * 2); */
	box-shadow: 0 0 var(--s) #00000066;
}
	
.box .image {
	margin:auto;
	max-height: 80vh;
	max-width: 100%;
}

.lightbox p {
	color: var(--white);
	text-align: center;
	margin-top: var(--xs);
}

.lightbox a {
	display: block;
	background: #000000aa;
	border: var(--light-grey) 3px solid;
	width: 46px;
	height: 46px;
	border-radius: 23px;
	}

.lightbox .icon {
	color: var(--light-grey);
	font-size: 40px;
}

.lightbox a:hover .icon {
	color: var(--white);
}

.lightbox a:hover {
	background: var(--grey);
}

.close {
	position: absolute;
	top: var(--xxs);
	right: var(--xxs);
}

.prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: var(--xxs);
}


.next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: var(--xxs);
}



/*--------------------*/
/* ABOUT */
/*--------------------*/



.portrait {
	--mw-p: 180px;
	max-width: var(--mw-p);
}

.col-portrait {
	--col: calc(100% - var(--mw-p) - (var(--xs) * 2));
}




/*--------------------*/
/* CONTACT */
/*--------------------*/


.form-group input {
	border: 1px solid var(--green);
	border-radius: 4px;
	text-align: left;
	padding: 10px;
	width: 100%;
	height: 45px;
	margin-bottom: 24px;
}

.form-group textarea {
	border: 1px solid var(--green);
	border-radius: 4px;
	text-align: left;
	padding: 10px;
	width: 100%;
	height: 270px;
}

.form-control:focus {
    outline: 0;
    box-shadow: none;    
}

.form-control::-webkit-input-placeholder {
	color: var(--grey);
}

.form-control:-moz-placeholder { /* Firefox 18- */
	color: var(--grey);
}

.form-control::-moz-placeholder {  /* Firefox 19+ */
	color: var(--grey);
}

.form-control:-ms-input-placeholder {  
	color: var(--grey);
}

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

.echo {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items:center;
	z-index: 10;
	background: #000000e4;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.echo-content {
	position: fixed;
	display: flex;
	flex-direction: column;
}

.echo-content p, .echo-content a {
	text-align: center;
}

.number {
	background: var(--green);
	color: var(--white);
	display: inline-block;
	font-weight: 600;
	width: 30px;
	height: 30px;
	line-height: 10px;
	padding: 10px;
	margin-top: 20px;
	border-radius: 20px;
}





/*--------------------*/
/* FOOTER */
/*--------------------*/


footer p, footer a {
	color: #888;
	font-size: 14px;
	margin-bottom: 10px;
	line-height: 1;
}

footer span {
	color: #888;
	font-size: 12px;
}



/*--------------------*/
/* RESPONSIVE STYLE */
/*--------------------*/


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

	.container {
		max-width: 100vw;
	}
}


@media screen and (max-width: 840px) {
	
	:root {
		--l: 28px;
		--xl: 40px;
		--xxl: 50px;
		--xxxl: 60px;
	}	

	.nav-container input[type="checkbox"],
    .nav-container .hamburger-lines {
        display: block;
    }

    .nav-container {
        display: block;
        position: relative;
    }
	
	input[type="checkbox"] {
        position: absolute;
        display: block;
        height: 25px;
        width: 36px;
        top: 10px;
        right: 30px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }
	
	.nav-container .hamburger-lines {
		display: block;
		height: 15px;
		width: 16px;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.hamburger-lines .line {
		display: block;
		height: 1px;
		width: 100%;
		background: var(--white);
	}
    
	.hamburger-lines .line1 {
        transform-origin: 50% 0%;
    }

	.hamburger-lines .line3 {
        transform-origin: 50% 100%;
    }


    nav input[type="checkbox"]:checked ~ .menu {
        display: block;
    }

    nav input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
		width: 21px;
		transform: translatey(7px) rotate(45deg);
    }

    nav input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
    }

    nav input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
		width: 21px;
		transform: translatey(-7px) rotate(-45deg);
    }

	
	.menu {
		display: none;
		flex-direction: column;
		flex: 1;
		position: absolute;
		top: 45px;
		right: 0px;
		background: #283434;
		padding: 15px 20px;
		/*box-shadow: 0 0 2px #00000088;*/
    }
 
    .menu a,
	.menu p {
		display: block;
		text-align: right;
		margin: 15px;
	}
	
	.col-portrait {
		--col: 100%;
	}
	
	.col33 {
		--col: 50%;
	}

	.col40, .col50, .col60 {
		--col: 100%;
	}

	.w75 {
		width: 100%;
	}

	.db {
		display: none;
	}

	.dn {
		display: block;
	}

}


@media screen and (max-width: 480px)
{
	:root {
		--xl: 30px;
		--xxl: 32px;
	}	
	
	.db-logo, .a-txt {
		display: none;
	}
}


/*--------------------*/
/* ANIMATIONS */
/*--------------------*/


@keyframes fadeIn {
	from {
	  opacity: 0; }
	to {
	  opacity: 1; }
}

@keyframes translate {
	0%, 25% {transform:translateX(0);}
	25.01%, 50% {transform:translateX(-100%);}
	50.01%, 75% {transform:translateX(-200%);}
	75.01%, 100% {transform:translateX(-300%);}
 }


@keyframes fadeInOut {
	10%, 90% {
		opacity:1; }
	0%, 100% {
		opacity:0; }
}