/*
font-family: 'Cormorant Garamond', serif;
font-family: 'Open Sans', sans-serif;
*/
/* SCROLL 
----------------------------------------------
*/
html, 
body, 
.scroll-conteneur { 
    height: 100%; 
}
.scroll-conteneur section {
    position: relative;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
}
#section1 {
	height: 100%;
	/*background-color: #f8dfde;*/
	background-color: #1e2445;
	color: #f8dfde;
}
#titre-section-accueil {
	position: absolute;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	z-index: 3
}
#titre-section-accueil span {
	font-weight: 300;
	font-style: italic;
}
#conteneur-logo {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 31.79%;
	/*background-color: red;*/
	max-width: 1280px;
	margin: 0 auto;
}

#home-logo,
#home-logo-blue {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat; 
	height: 100%;
	width: 45%;
	margin-left: 27.5%;
}
#home-logo {
	background-image: url(../images/home-logo.svg);
}
#home-logo-blue {
	background-image: url(../images/home-logo-blue.svg);
}
#froufrou-left {
	position: absolute;
	background-image: url(../images/froufrouleft.svg);
	width: 10.93%;
	height: 100%;
	left: 3rem; 
}
#froufrou-right {
	position: absolute;
	background-image: url(../images/froufrouright.svg);
	width: 10.93%;
	height: 100%;
	right: 3rem;
}

#btn-scroll {
	position: absolute;
	width: 40px;
	padding: 5px;
	border-radius: 100%;
	transition: all .75s;
}
#btn-scroll-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	background-color: rgba(39,49,91,0);
	border-radius: 100%;
	transition: all .75s;
}
#btn-scroll-hover:hover {
	-webkit-transform: scale(6);
        -ms-transform: scale(6);
            transform: scale(6);
            background-color: rgba(39,49,91,1);
            /*background-color: green;*/
            opacity: 0;
}
.point-scroll {
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background-color: #f8dfde;
	margin: 0 auto;
	margin-bottom: 5px;
}
#pt1 {
    -webkit-animation: animptun 3s linear 0s infinite;
            animation: animptun 3s linear 0s infinite;        
}
@-webkit-keyframes animptun
{
    0%      {   opacity: 0; }
        
    10%    {   opacity: 1; }
}

#pt2 {
    -webkit-animation: animptdeux 3s linear 0s infinite;
            animation: animptdeux 3s linear 0s infinite;        
}
@-webkit-keyframes animptdeux
{
    0%      {   opacity: 0; }
        
    10%    {   opacity:  0; }

    20%    {   opacity:  1; }
}

#pt3 {
    -webkit-animation: animpttrois 3s linear 0s infinite;
            animation: animpttrois 3s linear 0s infinite;        
}
@-webkit-keyframes animpttrois
{
    0%      {   opacity: 0; }
        
    20%    {   opacity: 0; }
    30%    {   opacity: 1; }

}

#section2 {
	height: 100%;
	background-image: url(../images/hero1mobile.jpg);
}
#section3 {
	height: 100%;
	background-image: url(../images/hero2mobile.jpg);
}
#section4 {
	height: 100%;
	background-image: url(../images/hero3mobile.jpg);
}
#section5 {
	height: 100%;
	background-image: url(../images/hero4mobile.jpg);
}
#section1-apropos {
	height: 100%;
	background-image: url(../images/heroaproposmobile.jpg);
}
.triangle {
	position: absolute;
	width: 100%;
	bottom: 0;
	right: 0;
}
#nav-site {
	position: fixed;
	left: -50px;
	z-index: 9;
	background-color: #fff;
	width: 50px;
	transition: all .5s;
}
#nav-site ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#nav-site li {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 10px;
	transition: all .4s;
}
#nav-site li:hover {
	opacity: .5;
}
#li-icon1 {
	background: #f09433; 
	background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
	background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
#li-icon2 {
	background-color: #4266b2;
}
#li-icon-profile {
	background-color: #f8dfde;
}
#li-icon-boutique {
	background-color: #F56400;
}
#nav-site img {
	width: 30px;
	height: 30px;
}
#nav-site a {
	display: block;
}
#home-icon-box {
	position: absolute;
	height: 30px;
	right: 3rem;
	top: 3rem;
}
.size-icon {
	width: 30px;
	height: 30px;
}
#iconaccueil {
	padding-left: 1em;
}
.section {
	text-align: center;
	height: 100%;
}
.section h1 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 900;
	color: #1e2445;
}
.txt-accueil {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-style: italic;
	font-size: 2rem;
	max-width: 20rem;
	color: #1e2445;
	margin: 0 auto;
	text-align: justify;
}
.bouton-titre {
	position: relative;
	left: -10rem;
	text-align: center;
	margin: 0 auto;
	padding-top: 6rem;
	width: 20rem;
}
.bouton-titre a {
	position: absolute;
	text-decoration: none;
	color: #1e2445;
	/*background-color: #1e2445;*/
	border: solid 2px #1e2445;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	letter-spacing: .2rem;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	padding-top: .8rem;
	padding-bottom: .8rem;
	transition: all .3s ease;
	width: 100%;
}
.bouton-titre a:hover {
	border: solid 2px #f8dfde;
	color: #f8dfde;
	transform: scale(1.1);
}
.footer-site {
	position: relative;
	z-index: -3;
	height: 100%;
	background-color: #1e2445;
	text-align: center;
}
.footer-site h2 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 900;
	font-size: 3rem;
	color: #fff;
	padding-bottom: 0;
	margin-top: 6rem;
	margin-bottom: 6rem

}
.footer-site h2 span {
	font-weight: 300;
	font-style: italic;
}
.footer-site h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	color: #fff;
	margin-top: 0;
	letter-spacing: .08rem;
}
.txt-footer {
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;

}
.txt-footer span {
	margin-bottom: 3rem;
	letter-spacing: .3rem;
	font-weight: 700;
	font-size: 1.5rem;
}
.footer-site .size-icon {
	margin: 3rem;
}
.footer-site .logo-footer {
	width: 85px;
	height: 70px;
}
.footer-icon-box .icon-accueil img{
	margin: 1em;
}
#signature {
	position: absolute;
	bottom: 3rem;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 1rem;
	font-weight: 300;
}
#signature a {
	color: #fff;
	text-decoration: none;
}
#signature a span {
	color: #e95c24;
}
#section2-apropos {
	padding-top: 9em;
	padding-bottom: 9em;
}
.h1-apropos {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-style: italic;
	font-size: 6rem;
	text-align: center;
	padding-bottom: 12rem;
}


/*
PAGE
*/
#header-site {
	position: fixed;
	z-index: 3;
	width: 20%;
	background-color: #fff;
	padding: 1em;
}
#header-site h1 {
	position: absolute;
	left: 15px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 3rem;
	font-weight: 700;
	transform-origin: top left;
	-webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
			transform: rotate(-90deg);
}
#page-recevoir #header-site h1 {
	top: 330px;
	width: 320px;
}
#page-offrir #header-site h1 {
	top: 310px;
	width: 295px;
}
#page-evenements #header-site h1 {
	top: 360px;
	width: 343px;
}
#page-deco #header-site h1 {
	top: 300px;
	width: 285px;
}
#page-apropos #header-site h1 {
	top: 285px;
	width: 265px;
}
#header-site h1 .sous-titre-bleudefour {
	font-weight: 300;
	font-style: italic;
}
.sous-titre-page {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	transform-origin: top left;
	font-size: 1.5rem;
	letter-spacing: .1rem;
}
.page .galerie{
	width: 80%;
	margin-left: 20%;
}
#recevoirimg1 {
	padding-top: 1em;
}
.page .galerie figure a img {
	display: block;
	width: 100%;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}
#nav-site-page {
	position: fixed;
	z-index: 0;
	width: 100%;
	background-color: #fff;
	text-align: center;
	transition: all .4s;
}
#nav-site-page ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#nav-site-page li img {
	width: 30px;
	height: 30px;
}
#li-icon-basket,
#li-icon-insta,
#li-icon-fb {
	display: inline-block;
	padding: .5em;
}
#nav-site-page #li-icon-profile {
	background-color: rgba(255,255,255,0);
}
#icon-box-nav-site-page {
	position: absolute;
	bottom: 1em;
}
#nav-site-page a {
	font-family: 'Cormorant Garamond', serif;
	color: #1e2445;
	text-decoration: none;
	font-size: 3rem;
}
#burger {
	position: fixed;
	cursor: pointer;
	z-index: 9;
	width: 30px;
	height: 30px;
	bottom: 2.2em;
	left: 20px;
	transform-origin: center;
	transition: all .2s;
}
#burger .bar {
	position: relative;
	top: 15px;
	width: 30px;
	height: 1px;
	background-color: #1e2445;
}
#bar2 {
	transform-origin: center;
	-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
			transform: rotate(90deg);
}
.hero-wrapper {
	width: 80%;
	margin-left: 20%;
	padding-bottom: 6em;
}
.hero-apropos {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background-image: url(../images/heroaproposmobile.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin-bottom: 3em;
}
.txt-apropos {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-style: italic;
	font-size: 2rem;
	max-width: 90%;
	color: #1e2445;
	text-align: justify;
	padding-top: 2em;
}
.txt-page {
	display: none;
	position: relative;
	left: -4.2em;
	top: .2em;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-style: italic;
	font-size: 2rem;
	max-width: 15rem;
	color: #1e2445;
	margin: 0 auto;
	text-align: left;
	transform-origin: top left;
	-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
			transform: rotate(90deg);
}

/*-----------------------------------------
-------------------------------------------              
                700 PX                   
-------------------------------------------
-------------------------------------------*/
@media screen and (min-width: 700px) {
	#section2 {
		background-image: url(../images/hero1tablet.jpg);
	}
	#section3 {
		background-image: url(../images/hero2tablet.jpg);
	}
	#section4 {
		background-image: url(../images/hero3tablet.jpg);
	}
	#section5 {
		background-image: url(../images/hero4tablet.jpg);
	}
	#section1-apropos {
		height: 100%;
		background-image: url(../images/heroapropostablet.jpg);
	}
	.posicon {
		width: 40px;
		height: 40px;
	}
	#iconaccueil1 {
		right: 80px;
	}
	#iconaccueil2 {
		right: 15px;
	}
	.txt-accueil {
		max-width: 50rem;
	}
	.h1-apropos {
		font-size: 9rem;
	}
	/*
	PAGES
	*/
	.page .galerie figure {
		display: inline-block;
		width: 50%;
		vertical-align: top;
	}
	.page .galerie figure a img {
		padding: 1em;
	}
	#header-site h1 {
		font-size: 3.5em;
		left: 25px;
	}
	#page-recevoir #header-site h1 {
		top: 560px;
		width: 540px;
	}
	#page-offrir #header-site h1 {
		top: 530px;
		width: 505px;
	}
	#page-evenements #header-site h1 {
		top: 590px;
		width: 570px;
	}
	#page-deco #header-site h1 {
		top: 510px;
		width: 490px;
	}
	#page-apropos #header-site h1 {
		top: 490px;
		width: 465px;
	}
	.sous-titre-page {
		font-size: 2rem;
	}
	#burger {
		left: 50px;
	}
	.hero-apropos {
		background-image: url(../images/heroapropostablet.jpg);
	}
	.txt-apropos {
		max-width: 80%;
	}
	.txt-page {
		display: block;
		position: relative;
		left: -12em;
		top: -3.5em;
		font-family: 'Cormorant Garamond', serif;
		font-weight: 300;
		font-style: italic;
		font-size: 2rem;
		max-width: 15rem;
		color: #1e2445;
		margin: 0 auto;
		text-align: left;
		transform-origin: top left;
		-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
				transform: rotate(90deg);
	}
}

/*-----------------------------------------
-------------------------------------------              
                1080 PX                   
-------------------------------------------
-------------------------------------------*/
@media screen and (min-width: 1080px) {
	#section2 {
		background-image: url(../images/hero1desk.jpg);
	}
	#section3 {
		background-image: url(../images/hero2desk.jpg);
	}
	#section4 {
		background-image: url(../images/hero3desk.jpg);
	}
	#section5 {
		background-image: url(../images/hero4desk.jpg);
	}
	#section1-apropos {
		height: 100%;
		background-image: url(../images/heroaproposdesk.jpg);
	}
	.txt-accueil {
		max-width: 60rem;
	}
	/*
	GALLERIES
	*/
	.page .galerie {
		/*max-width: 1080px;
		margin: 0 auto;*/
	}
	.page .galerie figure {
		display: inline-block;
		width: 33.333333%;
	}
	.page .galerie figure a img {
		width: 100%;
		padding: 1em;
	}
	.hero-apropos {
		padding-bottom: 56.25%;
	}
	.hero-apropos {
		background-image: url(../images/heroaproposdesk.jpg);
	}
	.txt-page {
		display: block;
		position: relative;
		top: .2em;
		font-family: 'Cormorant Garamond', serif;
		font-weight: 300;
		font-style: italic;
		font-size: 2rem;
		max-width: 15rem;
		color: #1e2445;
		margin: 0 auto;
		text-align: left;
		transform-origin: top left;
		-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
				transform: rotate(90deg);
	}
	#txt-recevoir {
		left: -4.2em;
	}
	#txt-offrir {
		left: -4.8em;
	}
	#txt-evenements {
		left: -3.4em;
	}
	#txt-deco {
		left: -5.3em;
	}
}

/*-----------------------------------------
-------------------------------------------              
                1280 PX                   
-------------------------------------------
-------------------------------------------*/
@media screen and (min-width: 1280px) {
	#conteneur-logo {
		padding-bottom: 407px;
	}
	.size-icon {
		width: 25px;
		height: 25px;
	}
	#froufrou-left {
		width: 140px;
		height: 407px;
		left: 0; 
	}
	#froufrou-right {
		width: 140px;
		height: 407px;
		right: 0;
	}
	#home-icon-box {
		width: 1280px;
		text-align: right;
	}
}