@font-face
{
	font-family: 'Pistara';
	src: url('../fonts/pistara/pistara.otf') format('truetype');
}
h1,
h2,
a,
footer p
{
	font-family: 'Pistara', sans-serif;
}
p
{
	font-family: 'Quicksand', sans-serif;
}
p,
h1,
h2,
section .lien-demo,
.form-contact .envoi-form,
footer p a,
.demo-header,
.demo-header:hover,
section div.container > div:nth-child(4) .icon-media i
{
	color: #fff;
}
p
{
	font-size: 20px;
}
body
{
	background-image: url(../images/background-saveur360.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;
	background-size:cover;
	-webkit-background-size: cover;
}



.form-contact .envoi-form,
section .lien-demo,
footer p a,
.demo-header
{
	-webkit-transition: background 150ms ease-in-out;
	-moz-transition: 	background 150ms ease-in-out;
	-ms-transition: 	background 150ms ease-in-out;
	-o-transition: 		background 150ms ease-in-out;
	transition: 		background 150ms ease-in-out;
}

header,
header .logo-new,
header .baseline-new,
header .demo-header
{
	-webkit-transition: all 300ms ease-in;
	-moz-transition: 	all 300ms ease-in;
	-ms-transition: 	all 300ms ease-in;
	-o-transition: 		all 300ms ease-in;
	transition: 		all 300ms ease-in;
}
section .lien-demo:hover
{
	text-decoration: none;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
section .lien-demo:active
{
	-webkit-box-shadow:inset 0 0 5px 0 rgba(0,0,0,0.5);
	box-shadow:inset 0 0 5px 0 rgba(0,0,0,0.5);
}
.form-contact .envoi-form:hover,
.demo-header:hover
{
	text-decoration: none;
	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
}
.form-contact .envoi-form:active,
.demo-header:active
{
	-webkit-box-shadow:inset 0 0 2px 0 rgba(0,0,0,0.5);
	box-shadow:inset 0 0 2px 0 rgba(0,0,0,0.5);
}
header
{
	background-color: rgba(60, 60, 60, 1);
}
section .lien-demo,
.demo-header
{
	background-color: rgba(159, 129, 72, 1);
}
section .lien-demo:hover,
.demo-header:hover
{
	background-color: rgba(189, 159, 102, 1);
}
.petitpierre,
section.visuel
{
	background-color: #fff;
}
.contact
{
	background-color: rgba(200, 200, 200, 1);
}
footer
{
	background-color: rgba(150, 150, 150, 1);
}
.form-contact .envoi-form,
.contact-btn
{
	background-color: rgba(100, 100, 100, 1);
}
.contact-btn:hover
{
	background-color: rgba(130, 130, 130, 1);
}
section div.container > div:nth-child(2) h2,
section div.container > div:nth-child(3) h2
{
	background-color: rgba(255, 255, 255, 0.5);
	padding: 10px;
}
header,
section,
.contact,
.petitpierre,
.video,
.video h2
{
	padding-top: 15px;
	padding-bottom: 15px;
}
section.visuel
{
	padding-top: 15px;
	padding-bottom: 0;
}
header,
h1,
h2,
section p,
section div.container > div:nth-child(4),
.video,
section .lien-demo,
footer p
{
	text-align: center;
}
section.description div.container > div:nth-child(2) p,
section.description div.container > div:nth-child(2) h2
{
	direction: rtl;
    text-align: justify;
}
section.description div.container > div:nth-child(3) p,
section.description div.container > div:nth-child(3) h2
{
	text-align: justify;
}
.quote
{
	text-align: justify;
}
/*--------TEST LOGO--------*/
.logo-new,
.baseline-new
{
	display: block;
}
.logo-new	
{
	max-width: 100%;
	max-height: 80px;
	margin: 0 auto;
}
.baseline-new
{
	font-size: 18px;
    line-height: 25px;
    margin: 5px 0;
    text-align: center;
    letter-spacing: 0.03em;
}
/*--------FIN TEST LOGO--------*/
.demo-header
{
	font-size: 22px;
	line-height: 30px;
	padding: 10px 20px;
	margin-top: 15%;
	display: block;
}
.petitpierre p
{
	color: #000;
}
.baseline-petitpierre
{
	margin-bottom: 15px;
}
	.baseline-petitpierre > p
	{
		font-size: 22px;	
		letter-spacing: 1px;
	}
	.baseline-petitpierre .logo-petitpierre
	{
		max-width: 100%;
		max-height: 60px;
	}
.quote
{
	font-style: italic;
	margin-top: 20px;
	font-size: 17px;
}
.name
{
	display: block;
	float: right;
}
h1
{
	font-size: 38px;
	letter-spacing: 1px;
}
h2
{
	font-size: 30px;
	letter-spacing: 1px;
}
section.description div.container > div:nth-child(2)
{
	border-right: 1px solid #fff;
}
section.description div.container > div:nth-child(4) .icon-media
{
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0;
    position: relative;
    width: 220px;
}
	section.description .icon-media i
	{
		font-size: 50px;
		margin: 0 15px;	
	}
section .lien-demo
{
	font-size: 30px;
	letter-spacing: 2px;
	text-align: center;
	line-height: 45px;
	margin-top: 15px;
	margin-bottom: 15px;
}
.form-contact input,
.form-contact select,
.form-contact textarea
{
	font-family: "Pistara",sans-serif;
	background-color: rgba(255,255,255,0.1);
	border: none;
	border-radius: 5px;
	-webkit-box-shadow:inset 2px 3px 5px 0 rgba(0,0,0,0.2);
	box-shadow:inset 2px 3px 5px 0 rgba(0,0,0,0.2);
	font-size: 18px;		
	padding: 5px;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
}
	.form-contact input,
	.form-contact select,
	.form-contact textarea
	{
		background-color: rgba(255, 255, 255, 0.6);
	    border: 1px solid rgba(160, 160, 160, 0.3);
	    border-radius: 5px;
	    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1) inset;
	    font-family: "Pistara",sans-serif;
	    font-size: 18px;
	    margin-bottom: 5px;
	    margin-top: 5px;
	    padding: 5px;
	    width: 100%;
	}
	.form-contact input.envoi-form
	{
		-webkit-box-shadow: none;
		box-shadow: none;
	}
.form-contact input,
.form-contact select
{
	height: 30px;
}
.form-contact textarea
{
	resize: vertical;
}
footer p
{
	margin: 0;
	line-height: 25px;
	font-size: 14px;
	letter-spacing: 1px;
}
.video h2,
.contact h2
{
	margin-bottom: 10px;
}
header.affix
{
	background-color: rgba(60,60,60,0.8);
	z-index: 200;
	padding-top: 5px;
	padding-bottom:  5px;
}
header.affix .logo-new
{
	max-height: 40px;
	margin: 0 auto;

}
header.affix .baseline-new
{
	font-size: 12px;
	text-align: center;
}
header.affix .demo-header
{
    font-size: 18px;
    line-height: 26px;
    margin-top: 10%;
    padding: 5px 10px;
}
@media screen and (max-device-width: 991px),
@media screen and (max-width: 991px)
{
	.video iframe
	{
		width: 690px;
		height: 288px;
	}
}
@media screen and (max-device-width: 767px),
@media screen and (max-width: 767px)
{
	section div.container > div:nth-child(2) p,
	section div.container > div:nth-child(2) h2,
	section div.container > div:nth-child(3) p,
	section div.container > div:nth-child(3) h2,
	.baseline-new,
	section .lien-demo
	{
		text-align: center;
	}
	.demo-header
	{
		margin-top: 5%;
	}
	section div.container > div:nth-child(2) p,
	section div.container > div:nth-child(3) p
	{
		margin-bottom: 30px;
	}
	.baseline
	{
	    font-size: 20px;
    	line-height: 50px;
	}
	section div.container > div:nth-child(2)
	{
		border-right: none;
	}
	.logo-new
	{
		margin: 0 auto;
	}
	section .lien-demo
	{
		font-size: 20px;
    	line-height: 45px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	section.description div.container > div:nth-child(4) .icon-media
	{
	    border-radius: 10px;
	    display: block;
	    margin: 0 auto;
	    overflow: hidden;
	    padding: 10px 0;
	    position: relative;
	    width: 220px;
	    background: none;
	    border: 1px solid #fff;
	}
}