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

:root{
	--white : #f1f1f1;
	--black : #444;
	--gray : #f7f7f7;
	--yellow : #ffdc7e;
	--pink : #c87f93;
}

/****************************************** Framework */
*{
	box-sizing: border-box;
	font-family: sans-serif;
	/* scroll-behavior: smooth; */
}

html{
	font-size: 16px;
	letter-spacing: 1px;
}	
body{}

/*********************** Layout */

section{
	padding : 4em 0;
}

section:nth-child(odd){
	background: var(--gray);
}

.container{
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
}

.flex{
	display: flex;
}

/*********************** Content */
iframe,
img{width:100%; max-width:100%;}
input{width:100%; padding:10px;}

a{
	text-decoration: none;
	font-family: sans-serif;
	color: #444;
}
button{cursor: pointer;}
button.btn {
	border: none;
	padding: 1em 2em;
	max-width: 100%;
	min-width: 180px;
	background: var(--yellow);
	color: #000;
}	

p a{color: var(--pink);}
p a:hover{text-decoration:underline;}

h1,h2,h3,h4{
	margin: 20px 0 40px;
	font-weight: bold;
	position: relative;
}

h1 {
	font-size: 4em;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-weight: inherit;
	letter-spacing: 1px;
}

h2{font-size: 3em;}

h2 span{ position: relative; }
h2 span.before::before {
	content: "";
	height: 5px;
	width: 100%;
	background: var(--pink);
	position: absolute;
	left: 0;
	bottom: -10px;
}

h3{font-size: 2em; margin-bottom:20px;}

p{
	margin-bottom: 10px;
	line-height: 1.3em;
}

b, strong {
	font-weight: bold;
	/* color: var(--pink); */
}

.text-right{text-align:right;}
.text-center{text-align:center;}

/****************************************** GLOBAL CSS */
/****************************************** Header */
header {
	padding: 10px 0;
	position: fixed;
	width: 100%;
	height: 52px;
	background: #fff;
	z-index: 100;
	box-shadow: 0px -1px 5px 0px #44444452;
}

header .container.flex {
	justify-content: space-between;
	align-items: center;
}

header div#logo span {
	font-size: 2em;
	font-family: sans-serif;
	text-transform: uppercase;
	color: #3b3838;
}

/***************************** #nav */
header nav#main ul li {
	display: inline;
}

header nav#main ul li a{
	text-transform: uppercase;
	padding: 0 10px;
	font-weight: 500;
}

header nav#main ul li a:hover{
	text-decoration: underline;
}

div#mobile-menu {
	display: none;
}

/****************************************** Main */
main {
	overflow-y: hidden;
}
/***************************** #landing */
section#landing {
	background-color: #000;
	background: url("../img/background_home.jpg?v2");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left 50px;
	height: calc(100vh - 50px);
	color: var(--white);
	/* background-attachment: fixed; */
}

section#landing.flex {
	display: flex;
	align-items: flex-end;
	text-align: right;
	flex-direction: row;
}

section#landing .container {
	width: 100%;
}

/***************************** #bio */
section#bio{}
section#bio .container.flex{
	justify-content: space-between;
}
section#bio .container.flex > div{
	width: 45%;
}
section#bio > div > div:nth-child(2) > h3 {
	color: var(--pink);
}

/***************************** #galerie */
section#galerie {
	display: none;
}
.grid-masonry {
	column-count: 3;
	column-gap: .5em;
	margin: auto;
	width: 100%;
}

/***************************** #spectacles */
#spectacles{
	display: inline-block;
	width: 100%;
}
#spectacles #carousel > div b{
	margin-bottom: 10px;
	color: var(--pink);
}

/***************************** #content */
section#content div.container div {
	padding: 1em;
}

/***************************** #slick */
section#spectacles #carousel .slick-track {
	display: flex!important;
	align-items: center!important;
	padding: 8em 0;
}

section#spectacles #carousel img {
	margin-bottom: 1em;
}

section#spectacles #carousel .slick-list{
	/* overflow: visible; */
}

section#spectacles #carousel .slick-slide{
	padding: 20px;
	margin: 0 10px;
	border: 1px solid var(--pink);
	transition: .4s;
	opacity: .4;
}

section#spectacles #carousel .slick-slide.slick-current {
	transform: scale(1.2);
	opacity: 1;
	background: #fff;
	position: relative;
	z-index: 100;
}

section#spectacles #carousel .slick-prev::before, 
section#spectacles #carousel .slick-next::before {
	color: var(--pink);
}

.slick-prev::before, .slick-next::before {
	font-size: 40px!important;
}

.slick-prev {
	left: -45px;
}

/***************************** #Contact */
#contact{
	background: url('../img/background_contact_claire_isirdi.jpg');
	background-position: top center;
	background-size: cover;
	display: inline-block;
	width: 100%;
	text-align: right;
}

#contact .container.flex {
	display: flex;
	flex-direction: row-reverse;
}

#contact .align-right{
	width: 50%;
}

#contact form{}
#contact form img{
	width: inherit;
}
#contact form label{
	display: inline-block;
	width: 100%;
	margin-bottom:1em;
	cursor: pointer;
	text-align: left;
}

#contact form textarea {
	width: 100%;
	min-height: 300px;
	resize: none;
	padding: 1em;
}

#contact form button.btn{max-width:100%;}
div#success {
	background: green;
	padding: 1em 10px;
	color: #fff;
	text-align: center;
}

label#ot p span {
	background: aliceblue;
	padding: 5px;
}

/****************************************** #INSTAGRAM */
section#instagram {}
section#instagram h3{
	color: var(--pink);
}

#instagram img {
	max-width: 500px;
}

#instagram img.icon {
	max-width: inherit;
	width: 100px;
	transform: rotate(75deg);
	margin-bottom: -40px;
	margin-left: 10px;
}

/****************************************** Footer */
footer {
	padding: 2em 0;
	font-family: sans-serif;
}

#legals{display:none; background: var(--gray); font-family: sans-serif;}
#legals .container{max-width:600px;}
#viewLegals{cursor: pointer; }

/******************************menu mobile**/

/****************************************** Responsive */
@media screen and (min-width: 980px){
	div#burger{display:none;}
}
@media screen and (max-width: 980px){
	section#landing .container{
		text-align: center;
	}
	h1 {
		font-size: 2em;
	}

	header div#logo span {
		font-size: 20px;
		display: inline-block;
		margin-top: 5px;
	}

	h2{
		max-width: 600px;
		margin: 20px auto 40px;
	}

	#bio .flex {
		display: block;
	}

	section#bio .container.flex > div {
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}


	#bio > div > div:nth-child(2){
		margin-top: 4em!important;
	}
}
/*max-width: 980px*/
@media screen and (max-width: 700px){
	.grid-masonry {
		column-count: 2;
		column-gap: 0.5em;
		margin: auto;
		width: 100%;
	}
	.flex:not(#landing){
		display: block;
	}

	header nav#main ul{display:none;}
	header nav#main{background: #fff; text-align: center;}
	header .container{padding:0;}
	header nav#main ul{padding-top:2em;}
	header nav#main ul li a{
		width: 100%;
		display: block;
		margin: 0;
		padding: 2em 0;
	}
	header nav#main ul li a:hover{background: var(--white);}
	header #logo{padding-left: 10px;}
	header div#mobile-menu {
		display: inherit;
		position: absolute;
		top: -10px;
		right: 0;
		padding: 10px 10px 40px 40px;
		cursor: pointer;
	}
	section#landing {
		background: url("../img/background_home_mobile.jpg?v2");
		background-size: cover;
		background-position: center 50px;
	}
	section#landing.flex {
		align-items: flex-end;
		text-align: right;
	}

	#bio > div > div:nth-child(1) > p:nth-child(9),
	#bio > div > div:nth-child(1) > p:nth-child(9) a{
		display: block;
		text-align: center;
	}

	#bio > div > div:nth-child(2) > h2{font-size: 2em;}
	#contact {
		background: url("../img/background_contact_claire_isirdi_mobile.jpg") no-repeat;
		background-position: center;
		background-size: cover;
	}
	#contact .container.flex{display: inherit;}
	#contact .align-right{width:100%; text-align:center;}
	section#instagram h3 span {
		width: 100%;
		display: block;
	}
	section#instagram h3{text-align:left;}
	#instagram img:not(.icon) {
		max-width: 100%;
		margin-top: 20px;
	}
}
/*max-width: 600px*/