*{box-sizing:border-box;}body{}
#viewport{width:100%;margin-top: -50px;min-height:600px;-webkit-perspective:1000;-moz-perspective:1000;-o-perspective:1000;position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;
			background:url("../images/fd_accueil.jpg") no-repeat scroll 0 0 #4584b4;}
			#world{position:absolute;left:50%;top:50%;margin-left:-256px;margin-top:-256px;height:512px;width:512px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d}#world div{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d}.cloudBase{position:absolute;left:256px;top:256px;width:20px;height:20px;margin-left:-10px;margin-top:-10px}.cloudBaseFixe{position:absolute;left:256px;top:256px;width:20px;height:20px;margin-left:-10px;margin-top:-10px}.cloudLayer{position:absolute;left:50%;top:50%;width:256px;height:256px;margin-left:-128px;margin-top:-128px;-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out}</style>
	
.cportrait{   cursor: pointer;}
.container > header h1,
.container > header h2 {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.cs-text {
	width: 674px;
	margin-left: 50%;
	cursor: default;
}

.cs-text > span {
	display: block;
	-webkit-backface-visibility: hidden;
}

.cs-text-cut {
	width: 100%;
	height: 90px;
	overflow: hidden;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
#messok {
    color: red;
    font-family: "Pacifico",Cambria,Georgia,serif;
    font-size: 23px;
    left: 28%;
 
    position: absolute;
    top: 276px;
}
.cs-text-cut:first-child {
	border-top: 1px solid rgba(255,255,255,0.5);
}

.cs-text-cut:last-child {
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

.cs-text-cut span {
	display: block;
	line-height: 180px;
	color: rgba(255,255,255,1);
	font-size: 180px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	margin-top: 6px;
	font-family: 'Sancreek', cursive;
	text-shadow: 7px 2px 0 rgba(0,0,0,0.3);
}

.cs-text-cut:last-child span {
	margin-top: -84px;
}

.cs-text-mid {
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 22px;
	letter-spacing: 14px;
	line-height: 50px;
	text-indent: 20px;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	color: rgba(255,255,255,0.3);
	text-shadow: 0 0 0 rgba(255,255,255,0.9);
	opacity: 0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}

.cs-text:hover .cs-text-cut:first-child {
	-webkit-transform: translateY(-25px);
	-moz-transform: translateY(-25px);
	-o-transform: translateY(-25px);
	-ms-transform: translateY(-25px);
	transform: translateY(-25px);
	opacity: 0.5;
}

.cs-text:hover .cs-text-cut:last-child {
	-webkit-transform: translateY(25px);
	-moz-transform: translateY(25px);
	-o-transform: translateY(25px);
	-ms-transform: translateY(25px);
	transform: translateY(25px);
	opacity: 0.5;
}

.cs-text:hover .cs-text-mid {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
/* Filterable Portfolio Stylesheet */


/* Simple Reset
------------------------------------------------------------ */
html, body, div, h1, h2, ul, li, dl, dd, dt, p { margin: 0; padding: 0; }
ul { list-style: none; }


/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Quattrocento);


/* Custom Classes
------------------------------------------------------------ */
.group:after { font-family: 'Audiowide',cursive;visibility: hidden; display: block; content: ""; clear: both; height: 0; }
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */


/* General Styles
------------------------------------------------------------ */

#wrap { max-width: 940px; min-height: 900px; margin: 0 auto; padding: 1.5em 20px; overflow: hidden; background-color: #fff; border: 1px solid #ddd; -moz-box-shadow: 0 0 5px #ddd; -webkit-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd; }

a { color: #444; text-decoration: none; -moz-transition: 0.4s all linear; -webkit-transition: 0.4s all linear; -o-transition: 0.4s all linear; transition: 0.4s all linear; outline-color: #aaa; }
a:hover { color: #4f0d4d; }

.demo-top { margin-bottom: 0.35714em; padding-bottom: 0.5em; border-bottom: 3px solid #000; }
.credits { font-family: 'Quattrocento', serif; font-size: 1.28571em; line-height: 1.16667em; text-align: center; color: #444; margin-bottom: 2.66667em; }
.back-to-post { border-top: 1px solid #000; margin-bottom: 3em; }


/* Filter */
dl {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #777777;
    margin-bottom: 3em;
    margin-left: -5%;
    padding: 0 5%;
    width: 100%;
}
dt, dd { float: left; }
dt { margin-right: 5px; }
.filter li { float: left; }
.filter li:after { content: "/"; }
.filter li:last-child:after { content: ""; }
.filter a { padding: 0 10px; color: #777; text-decoration: none; }
.filter a:hover, .current a { color: #4f0d4d; }

/* Portfolio Items */
.portfolio li { float: left; margin-right: 20px; margin-bottom: 2em; border: 1px solid #ccc; -moz-box-shadow: 0 5px 5px -3px #222; -webkit-box-shadow: 0 5px 5px -3px #222; box-shadow: 0 5px 5px -3px #222; }

.portfolio a { display: block; border: 3px solid #fff;  text-decoration: none; }
.portfolio img { width: 210px; height: 130px; display: block; border: 1px solid #ccc; }
.content_accueil {
position:relative;}
#reference {
position:relative;
    display: none;
    
    padding: 0 5%;
}
#contact {
position:relative;
    display: none;
    
   
	width:100%;
	margin:0 auto;
}


#form_contact input[type="submit"] {
    border: 3px solid #444444;
    border-radius: 5px 5px 5px 5px;
    color: #000000;
    cursor: pointer;
    font-family: 'Fredericka the Great',cursive;
    font-size: 24px;
    margin-left: 130px;
    margin-top: 14px;
    padding: 5px 10px;
    text-transform: uppercase;
    width: 127px;
}
#form_contact input[type="submit"]:hover{
color: red;
 border: 3px solid #b36762;
}
		

#form_contact {
    background: url("../images/calepin.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 616px;
    margin: 0 auto 0 22%;
    width: 482px;
}

.stylo {
    float: left;
    left: 3%;
    position: absolute;
    top: 65%;
}
.souri {
    float: right;
    position: absolute;
    right: 5%;
    top: 14%;
}

form {
    margin-left: 74px;
    position: relative;
    top: 88px;
}
.retour_contact {
    left: 5%;
    position: absolute;
    top: 3%;
}

textarea {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #26609C;
   font-family: 'Pacifico', Cambria, Georgia, serif;
    font-size: 21px;
    height: 230px;
    line-height: 19px;
    margin-bottom: 17px;
    width: 371px;
}

label {
    display: block;
    margin-bottom: 3px;
	font-family: 'Fredericka the Great', cursive;
	 font-size: 24px;
}

input { padding:0;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    width: 371px;font-size: 21px;
	font-family: 'Pacifico', Cambria, Georgia, serif;color: #26609C;
}

.pb-wrapper {
	position: fixed;
	background: #fff url(../images/paper.jpg) repeat center bottom;
	width: 170px;
	margin-top: 10px;
	padding: 20px 10px 100px;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	box-shadow:
		inset 1px 0 0 3px rgba(255,255,255,0.6),
		0 1px 4px rgba(0,0,0,0.3), 
		inset 0 0 20px rgba(0,0,0,0.05),
		inset 0 -25px 40px rgba(0,0,0,0.08);
}

.pb-wrapper:before {
	content: '';
    position: absolute;
	width: 2px;
	left: 0;
	top: 3px;
	bottom: 3px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.pb-wrapper:after{
	position: absolute;
	content: '';
	background: rgba(192,227,232, 0.8) url(../images/scroll.png) no-repeat center center;
	width: 80px;
	height: 80px;
	top: 50%;
	left: 50%;
	margin: -75px 0 0 -35px;
	border-radius: 50%;
	z-index: 1000;
}

.touch .pb-wrapper:after,
.pb-wrapper:hover:after {
	display: none;
}

h3.pb-title {
	padding: 5px;
	font-family: 'Pacifico', Cambria, Georgia, serif;
	color: #374571;
	font-size: 14px;
	font-weight: 300;
	margin: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pb-scroll {
	position: relative;
	height: 100%;
	width: 150px;
	padding-right: 30px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.touch .pb-scroll {
	padding-right: 0px;
}

ul.pb-strip {
	padding: 0;
	list-style: none;
	position: relative; 
	margin: 0 auto;
	width: inherit;
	opacity: 0.8;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.pb-wrapper:hover ul.pb-strip,
.touch .pb-wrapper ul.pb-strip{
	opacity: 1;
}

ul.pb-strip li {
	display: block;
	width: 150px;
	position: relative;
	margin-bottom: 7px;
}

ul.pb-strip li a {
	display: block;
}



ul.pb-strip li img {
	display: block;
	box-shadow: 0 0 1px 1px #fff;
}

/* Positions */
.pb-wrapper-1 {
	height: 89%;
	left: 20%;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	/* -ms-transform: rotate(3deg);*/
	transform: rotate(3deg);
}

.pb-wrapper-2 {
	height: 85%;
	left: 40%;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	/* -ms-transform: rotate(-2deg);*/
	transform: rotate(-2deg);
}

.pb-wrapper-3 {

      height: 63%;
    right: 4%;
    top: 10%;


	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	/* -ms-transform: rotate(1deg);*/
	transform: rotate(1deg);
}

.pb-wrapper-4 {
	height: 75%;
	left: 80%;
}


/* Lightbox custom styles */

#lightbox {
	font-family: inherit;
	padding: 0 85px;
}

.lb-outerContainer {
	overflow: visible !important;
	background: #fff url(../images/paper.jpg) fixed repeat top left;
	border-radius: 0px;
	max-width: 100%;
	height: auto !important;
}

.lb-container {
	padding: 0;
}

#lightbox img.lb-image {
	padding: 10px;
	max-width: 100%;
}

.lb-nav {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	padding: 0 80px;
	left: -80px;
}

.lb-dataContainer {
	position: relative;
	max-width: 100%;
}

.lb-data .lb-close {
	bottom: 10px;
	position: absolute;
	width: 73px;
	height: 73px;
	right: 5px;
}

.lb-prev, .lb-next {
	position: absolute;
	cursor: pointer;
	width: 60px;
	height: 60px;
	top: 50%;
	margin-top: -30px;
}

.lb-prev,
.lb-prev:hover{
	background: url(../images/prev.png) no-repeat 50% 50%;
}

.lb-next,
.lb-next:hover{
	background: url(../images/next.png) no-repeat 50% 50%;
}

.lb-data .lb-caption {
	font-family: 'Pacifico', Cambria, Georgia, serif;
	font-weight: 300;
	font-size: 30px;
	color: #fff;
	line-height: 32px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.lb-data .lb-number {
	text-indent: 4px;
	color: #c0e3e8;
}

@media screen and (max-width: 650px) {
	div.pb-wrapper {
		position: relative;
		margin: 20px auto;
		height: 500px;
		left: auto;
	}
}

@media screen and (max-width: 350px) {
	#lightbox {
		padding: 0 20px;
	}
	.lb-nav {
		padding: 0;
		left: 0;
	}
}
#portrait{ display:none;}
.ordi {
    background: url("../images/ordi.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 428px;
    margin: 3% auto 0;
    width: 779px;
}

.appphoto {
    left: 14%;
    position: absolute;
    top: 54%;
}
.tel {
    position: absolute;
    right: 15%;
    top: 88%;
}
.decoupage {
    bottom: 10%;
    position: fixed; width:24%
}

.texte {
       font-family: helvetica;
    font-size: 14px;
    margin: 0 auto 0 25%;
    padding-bottom: 100px;
    padding-top: 6px;
    width: 50%;
}
h1{font-family: 'Audiowide',cursive; font-size: 43px;
 transform: translateZ(1px);
    position: absolute;
    text-align: center;
    top: 47px;
    width: 100%;
    z-index: 9999;
    color: #fff;
    text-shadow: 0 0 10px #000;}
h1 span{font-size: 29px; color: rgb(40, 126, 181);    text-shadow: 0 0 5px #fff;}

#opencv span {
    border-radius: 34px;
    box-shadow: 0 0 41px 0 #000000;
    color: #000000;
    display: block;
    font-family: helvetica;
    font-weight: bold;
    margin-left: 61px;
    margin-top: 9px;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    width: 118px;
}

#opencontact span {
    border-radius: 34px;
    box-shadow: 0 0 41px 0 #000000;
    color: #000000;
    display: block;
    font-family: helvetica;
    font-weight: bold;
    margin-left: 38px;
    margin-top: 9px;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    width: 129px;
}
#openref span {
     background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 34px;
    box-shadow: 0 0 13px 6px #FFFFFF;
    color: #000000;
    display: block;
    font-family: helvetica;
    font-weight: bold;
    margin-left: 335px;
    padding: 5px 10px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    top: 131px;
    width: 151px;
}

.bt_retour_portrait{ bottom: 12%;
  
    position: fixed;}
	
@media screen and (max-width: 936px) {
  .pb-wrapper {
    display:none !important;
   
  }
  .texte {

    width: 71%;
}
}

#menup {
    position: absolute;
    z-index: 999999;
    transform: translateZ(1px);
       top: -1599px;
	font-family: 'Pacifico',cursive;	 color:#000;
 
}

#menur {
    position: absolute;
    z-index: 9999999;
      transform: translateZ(1px);
      top: -1599px;font-family: 'Pacifico',cursive; color:#000 ;
   
}

#menuc {
   transform: translateZ(1px);
    position: absolute;
    z-index: 999999;
top: -1599px;font-family: 'Pacifico',cursive; color: #000;
    
}