@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'ComfortaaThin';
    src: url('../font/Comfortaa_Thin-webfont.eot');
    src: url('../font/Comfortaa_Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Comfortaa_Thin-webfont.woff') format('woff'),
         url('../font/Comfortaa_Thin-webfont.ttf') format('truetype'),
         url('../font/Comfortaa_Thin-webfont.svg#ComfortaaThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ComfortaaRegular';
    src: url('../font/Comfortaa_Regular-webfont.eot');
    src: url('../font/Comfortaa_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Comfortaa_Regular-webfont.woff') format('woff'),
         url('../font/Comfortaa_Regular-webfont.ttf') format('truetype'),
         url('../font/Comfortaa_Regular-webfont.svg#ComfortaaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ComfortaaBold';
    src: url('../font/Comfortaa_Bold-webfont.eot');
    src: url('../font/Comfortaa_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Comfortaa_Bold-webfont.woff') format('woff'),
         url('../font/Comfortaa_Bold-webfont.ttf') format('truetype'),
         url('../font/Comfortaa_Bold-webfont.svg#ComfortaaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

html{
	height:100%;
}

body{
	background:#f5f8f2;
	margin:0;
	padding:0;
	font-family:'ComfortaaRegular', Arial, sans-serif;
	height:100%;
}

p{
	margin:0;
	padding:0;
}

#home{
	display:block;
	height:1px;
	width:1px;
	margin:0 auto;
}

#top{
	margin:0 auto 20px;
	width:900px;
	text-align:center;
}

#welcome{
	margin:0 auto 40px;
	width:900px;
	height:50px;
	text-align:center;
}

#choose{
	margin:8px auto 10px;
	color:#777777;
	font-size:22px;
	text-align:center;
	width:900px;
	position:relative;
}

a#btnCVtop{
	width: 183px;
	height: 191px;
	display:block;
	background: url(../images/btnCVtop.png) top left no-repeat;
	position: absolute;
	top: 0;
	right: 0;
}

a#btnCVtop:hover{
	background-position:bottom left;
}

a#deco{
	width:509px;
	height:200px;
	display:none;
	background:url(../images/noel.png) top left no-repeat;
	position:absolute;
	top:-151px;
	left:210px;
}

a#deco:hover{
	background-position:bottom left;
}

#content{
	width:950px;
	padding:0;
	margin:0 auto;
}



/*----------------- Menu --------------------*/


#menu{
	margin:0 auto;
	width:921px;
	height:453px;
	background:url(../images/menuBack.png) top left no-repeat;
}

#btnmenu{
	margin:0 auto;
	width:834px;
	height:325px;
	background:url(../images/btnMenu.png) top left no-repeat;
}

#btnblog{
	float:left;
	margin:0 auto;
}

#btnblog a{
	display:block;
	padding-top:123px;
	margin:0 35px;
	height:202px;
	width:208px;
	background:url(../images/btnBlogBack.png) no-repeat;
	background-position:0px -325px;
}

#btnfolio{
	float:left;
	margin:0 auto;
}

#btnfolio a{
	display:block;
	padding-top:123px;
	margin:0 35px;
	height:202px;
	width:208px;
	background:url(../images/btnFolioBack.png) no-repeat;
	background-position:0px -325px;
}

#btnshop{
	float:left;
	margin:0 auto;
}

#btnshop a{
	display:block;
	padding-top:123px;
	margin:0 35px;
	height:202px;
	width:208px;
	background:url(../images/btnShopBack.png) no-repeat;
	background-position:0px -325px;
}



/*----------------- Portfolio --------------------*/


#portfolio{
	position:relative;
	margin:0 auto;
	width:921px;
	height:709px;
	background:url(../images/folioBack.png) top left no-repeat;
}

#btnmenufolio{
	margin:75px 0 0 125px;
	width:750px;
}

#btnproject{
	float:left;
	margin:0 auto;
}

#btnproject a{
	display:block;
	padding-left:40px;
	font-family:'ComfortaaThin', Arial, sans-serif;
	font-size:24px;
	color:#999999;
	text-decoration:none;
	line-height:35px;
	margin:0 45px;
	height:35px;
	width:140px;
	background:url(../images/btnProject.png) top left no-repeat;

}

#btnproject a:hover{
	background-position:bottom left;
}

#btnbook{
	float:left;
	margin:0 auto;
}

#btnbook a{
	display:block;
	padding-left:40px;
	font-family:'ComfortaaThin', Arial, sans-serif;
	font-size:24px;
	color:#999999;
	text-decoration:none;
	line-height:35px;
	margin:0 3px 0 15px;
	height:35px;
	width:140px;
	background:url(../images/btnBook.png) top left no-repeat;
}

#btnbook a:hover{
	background-position:bottom left;
}

#btnteatime{
	float:left;
	margin:0 auto;
}

#btnteatime a{
	display:block;
	padding-left:40px;
	font-family:'ComfortaaThin', Arial, sans-serif;
	font-size:24px;
	color:#999999;
	text-decoration:none;
	line-height:35px;
	margin:0 15px;
	height:35px;
	width:140px;
	background:url(../images/btnTeatime.png) top left no-repeat;
}

#btnteatime a:hover{
	background-position:bottom left;
}

#up1{
	display:block;
	position:absolute;
	width:53px;
	height:48px;
	bottom:60px;
	right:-40px;
}


/*----------------- Blog --------------------*/


#blog{
	position:relative;
	margin:0 auto;
	width:921px;
	height:683px;
	background:url(../images/blogBack.png) top left no-repeat;
}

#contentblog{
	display:block;
	margin:0 auto;
	width:820px;
}

#contleft{
	width:410px;
	float:left;
	margin-top:90px;
}

#article{
	margin:0 auto;
}

#article a{
	text-decoration:none;
	color:#444444;
}

.date{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#222222;
	margin-bottom:1px;
}

.nom{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#444444;
	margin-bottom:1px;
}

.description{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#444444;
}

.fonce{
	margin:0;
	padding-top:6px;
	padding-left:6px;
	display:block;
	width:364px;
	height:44px;
	background-color:#cdcdca;
}

.clair{
	margin:0;
	padding-top:6px;
	padding-left:6px;
	display:block;
	width:364px;
	height:44px;
	background-color:#e3e2de;
}

#contright{
	width:370px;
	float:left;
	margin-top:60px;
	padding-left:40px;
	font-size:17px;
	color:#777777;
}

#linkshop{
	margin:20px auto 35px;
	height:127px;
	width:327px;
	display:block;
	background-color:#d4d1d1;
}

#linkshop a{
	display:block;
	height:127px;
	width:327px;
	border:solid 3px #dddddd;
}

#linkshop a:hover{
	border:solid 3px #f5a63a;
}

#player{
	width:335px;
	margin:25px auto;
}

#links{
	margin:10px auto;
}

a#vimeo{
	display:block;
	height:91px;
	width:91px;
	background:url(../images/btnVimeo.png) bottom left no-repeat;
	float:left;
}

a#vimeo:hover{
	background-position:top left;
}

a#twitter{
	display:block;
	height:91px;
	width:91px;
	background:url(../images/btnTwitter.png) bottom left no-repeat;
	float:left;
}

a#twitter:hover{
	background-position:top left;
}

a#rss{
	display:block;
	height:91px;
	width:91px;
	background:url(../images/btnRss.png) bottom left no-repeat;
	float:left;
}

a#rss:hover{
	background-position:top left;
}

a#mail{
	display:block;
	height:91px;
	width:91px;
	background:url(../images/btnMail.png) bottom left no-repeat;
	float:left;
}

a#mail:hover{
	background-position:top left;
}

a#facebook{
	display:block;
	height:91px;
	width:91px;
	background:url(../images/btnFacebook.png) bottom left no-repeat;
	float:left;
}

a#facebook:hover{
	background-position:top left;
}

#up2{
	display:block;
	position:absolute;
	width:53px;
	height:48px;
	bottom:35px;
	right:-40px;
}

.separ{
	display:block;
	margin:0 auto;
	height:2px;
	width:760px;
}

.titre{
	display:block;
	font-family:'ComfortaaThin', Arial, sans-serif;
	font-size:40px;
	text-align:center;
	color:#777777;
	margin:30px auto;
}

#foot{
	margin:0 auto;
	width:921px;
	height:280;
	padding:0;
	display: none;     /********* Enlever pour remettre le footer *********/
}

#contentfoot{
	width:855px;
	margin:45px auto 0;
	font-size:15px;
	text-align:center;
	color:#777777;
}

#lasttweet{
	position:relative;
	display:block;
	width:280px;
	height:250px;
	float:left;
}

#tweettextback{
	position:relative;
	margin:7px auto;
	display:block;
	height:138px;
	width:260px;
	background:url(../images/lastTweetBack.png) top left no-repeat;
}

#tweettext{
	position:absolute;
	top:25%;
	left:20%;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#222222;
	width:60%;
	height:50%;
	overflow: hidden;
}

#tweetty{
	position:absolute;
	width:49px;
	height:57px;
	bottom:25px;
	left:5px;
}

#other{
	display:block;
	width:250px;
	height:250px;
	float:left;
}

#otherlinks a{
	display:block;
	width:200px;
	height:180px;
	margin:10px auto;
	border:solid 3px #dddddd;
}

#otherlinks a:hover{
	border:solid 3px #c8d768;
}

#about{
	display:block;
	width:280px;
	height:250px;
	float:left;
}

a#cv{
	display:block;
	width:280px;
	height:127px;
	background:url(../images/btnAbout.png) top left no-repeat;
	margin:30px;
}

a#cv:hover{
	background-position:bottom left;
}

.separfoot{
	float:left;
	height:156px;
	width:2px;
	margin:15px 10px;
}


/*----------------- Rain Boo --------------------*/

#rainBoo{
	margin: 30px auto 0;
	width: 950px;
	height: 180px;
	display: block;
}

#rainBoo a{
	width: 950px;
	height: 180px;
	display: block;
}


/*-- Design Tablette --*/
/*--
@media (orientation:landscape) and (max-width:1024px) {
	#btnblog a{background-position:0px 0px;}
	#btnfolio a{background-position:0px 0px;}
	#btnshop a{background-position:0px 0px;}
	a#vimeo{background-position:top left;}
	a#twitter{background-position:top left;}
	a#facebook{background-position:top left;}
	a#rss{background-position:top left;}
	a#mail{background-position:top left;}
	#up1{display:none;}
	#up2{display:none;}
	body{overflow-y:auto;}
	
}

@media (orientation:portrait) and (max-width:1024px) {
	#btnblog a{background-position:0px 0px;}
	#btnfolio a{background-position:0px 0px;}
	#btnshop a{background-position:0px 0px;}
	a#vimeo{background-position:top left;}
	a#twitter{background-position:top left;}
	a#facebook{background-position:top left;}
	a#rss{background-position:top left;}
	a#mail{background-position:top left;}
	#up1{display:none;}
	#up2{display:none;}
	body{overflow-y:auto;}
	
}
--*/

/*-- Design Iphone--*/

@media (orientation:portrait) and (max-width:750px){
	body{width:100%;margin:0 auto;}
	#menu{display:none;}
	#choose{display:none;}
	#contleft{display:none;}
	#player{display:none;}
	.phone{display:none;}
	#up1{display:none;}
	#up2{display:none;}
	.separfoot{display:none;}
	#other{display:none;}
	#top{width:100%; background:none; text-align:center;}
	#top img{width:60%;}
	#welcome{width:50%; text-align:center; margin-bottom:20px;}
	#welcome img{width:75%;}
	.separ{width:100%;}
	.titre{margin:15px auto; font-size:2em;}
	.flexslider{width:80%;}
	#content{width:70%; background:none;}
	#portfolio{width:100%; background:none; height:100%;}
	#btnmenufolio{width:250px; margin:0 auto; height:35px; display:block;}
	#btnproject{widthh:33%; margin:0 5px;}
	#btnproject a{margin:0 auto; font-size:1.1em; padding-left:0; margin:0; width:100%; text-align:center; font-family:'ComfortaaRegular', Arial, sans-serif; width:75px; background:none;}
	#btnproject a:hover{color:#c8d768;}
	#btnbook{widthh:33%; margin:0 5px;}
	#btnbook a{margin:0 auto; font-size:1.1em; padding-left:0; margin:0; width:100%; text-align:center; font-family:'ComfortaaRegular', Arial, sans-serif; width:55px; background:none;}
	#btnbook a:hover{color:#74c3b7;}
	#btnteatime{widthh:33%; margin:0 5px;}
	#btnteatime a{margin:0 auto; font-size:1.1em; padding-left:0; margin:0; width:100%; text-align:center; font-family:'ComfortaaRegular', Arial, sans-serif; width:80px; background:none;}
	#btnteatime a:hover{color:#f5a63a;}
	#blog{width:100%; background:none; height:100%; margin-top:50px;}
	#blog.titre{display:block;}
	#contentblog{width:100%;}
	#contentright{float:none;}
	#linkshop{display:none;}
	#links{width:182px; height:182px; display:block; padding:0; margin:50px auto;}
	a#facebook{background-position:top left;}
	a#twitter{background-position:top left;}
	a#vimeo{background-position:top left;}
	a#rss{background-position:top left;}
	a#mail{background-position:top left;}
	#contright{width:100%; margin:0 auto; padding:0;}
	#foot{display:none;}
	body{overflow-y:auto;overflow-x:hidden;}
	#rainBoo{display:none;}
}