@charset "utf-8";

@font-face {
    font-family: 'Bebas Neue';
    src: url('../images/fonts/fontsBebasNeue.eot');
    src: url('../images/fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
        url('../images/fonts/BebasNeue.woff2') format('woff2'),
        url('../images/fonts/BebasNeue.woff') format('woff'),
        url('../images/fonts/BebasNeue.ttf') format('truetype'),
        url('../images/fonts/BebasNeue.svg#BebasNeue') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'univers59_ultra_condensed';
    src: url('../images/fonts/univers-ultracondensed-webfont.eot');
    src: url('../images/fonts/univers-ultracondensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../images/fonts/univers-ultracondensed-webfont.woff2') format('woff2'),
         url('../images/fonts/univers-ultracondensed-webfont.woff') format('woff'),
         url('../images/fonts/univers-ultracondensed-webfont.ttf') format('truetype'),
         url('../images/fonts/univers-ultracondensed-webfont.svg#univers59_ultra_condensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'univers57_condensed';
    src: url('../images/fonts/univers-condensed-webfont.eot');
    src: url('../images/fonts/univers-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../images/fonts/univers-condensed-webfont.woff2') format('woff2'),
         url('../images/fonts/univers-condensed-webfont.woff') format('woff'),
         url('../images/fonts/univers-condensed-webfont.ttf') format('truetype'),
         url('../images/fonts/univers-condensed-webfont.svg#univers57_condensed') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Univers-LT-Std-67-Bold-Condensed-Oblique';
    src: url('../images/fonts/Univers-LT-Std-67-Bold-Condensed-Oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*trace text box*/
#txt{
	position:fixed;
	top:2px;
	left:10px;
	color:yellow;
	z-index: 100;
}
/*prevent any object selection*/
body{
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
    -khtml-user-select: none;
    -o-user-select: none;
	user-select: none; /* Standard */
	margin: 0px;
	width: 100%;
	background-color: #dae3ea;
}
#index{
	background-color: black;
	overflow-y:auto;
}
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

div::selection{
	background-color: transparent;
}

html{
  -webkit-tap-highlight-color:transparent;
}

/*ABOUT section*/

#logomi{
	margin-top: 93px;
	margin-left: 0px;
	margin-bottom: 22px;
	height: 35px;
}
#lang{
	font-family: 'Univers-LT-Std-67-Bold-Condensed-Oblique';
	font-size: 15px;
	color: white;
	position: relative;
	top: -65px;
	left: 60px;
	
}

#lang span{
	cursor: pointer;
}

#lang span:hover{
	text-decoration: underline;
}
#trameabout{
	position: relative;
	top: -325px;
	left: 648px;
	
}
#trameabout2{
	position: relative;
	top: -650px;
	left: -890px;
	
}

#aboutcontent{
	margin: auto;
	border: solid 0px red;
	font-size:17px;
	font-family: 'univers57_condensed';
	font-weight: 300;
	color:black;
	letter-spacing: -1px;
	text-transform: uppercase;
}

.frabout{
	width: 825px;
}
.enabout{
	width: 835px;
}

#aboutcontent p{
	line-height: 150%;
	margin-bottom: 25px;
}
#aboutcontent h2{
	font-size:17px;
	font-family: 'univers57_condensed';
	font-weight: lighter;
	color:rgba(89,157,155,1);
	margin-bottom: -16px;	
}

#aboutcontent h1{
	margin-bottom: 25px;
	font-size:25.5px;
	font-family: 'univers59_ultra_condensed';
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 0.1px;
	
	color:white;/*
	text-rendering: geometricPrecision;
	text-rendering: optimizeSpeed;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;*/
}

/*contact*/
#contactcontent{
	
	width: 100%;
	border: solid 0px red;
	
}
#contactcontent img{
	display: block;
	margin: 0 auto;
}

#logocontact1{margin-top: 60px;}
#logocontact2{
	cursor: pointer;
	background-image:url('../images/logocontact2-sel.png?2');
	background-repeat: no-repeat;
	background-position: center;
}
#logocontact2 img:hover{
	opacity: 0;
}

#logocontact3{margin-bottom: -65px;}



/*main page images*/

.main img {
	width: 100%;
	height: auto;
}


#mainImage{
	margin-bottom: 50vh;
}
#img-main-portrait{
	display: none;
	
}

#scroll{
	position: absolute;
	width: 1.4vw;
	margin-left: 49.4%;
	top: 53vw;
	cursor: pointer;
}
#portfolio{
	margin-bottom: 5vh;
}
/*top menu bar*/
.menu{
	position:relative;
	width:300px;
	margin: 0 auto;
	top:60px;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	border:solid 0px blue;
}
#mainmenu{
	position: fixed;
	width: 100%;
}
#menu{
	top:22px;
}
/*menu items*/
.menuitem{
	cursor: pointer;
	width:auto;
	font-size:20px;
	font-family: 'Bebas Neue';
	color:white;
	margin: 0px 20px 0px 20px;
	border:solid 0px red;
}

.menuitem:hover{
	color:lightgray;
	-webkit-transition: color 300ms linear;
    -ms-transition: color 300ms linear;
    transition: color 300ms linear;
}

.menuActive{
	text-decoration: underline;
}


/*vignettes background images*/
#thlife{
	background:url(../images/life2.png);
	background-size:cover;
}
#thhealth{
	background:url(../images/health2.png);
	background-size:cover;
}
#thwine{
	background:url(../images/wine2.png);
	background-size:cover;
}
#thlogo{
	background:url(../images/logo2.png);
	background-size:cover;
}
#thweb{
	background:url(../images/webdesign2.png);
	background-size:cover;
}

/*vignettes health background images*/
#health1{background:url(../images/thm/health1b.png);background-size:cover;}
#health2{background:url(../images/thm/health2b.png);background-size:cover;}
#health3{background:url(../images/thm/health3b.png);background-size:cover;}
#health4{background:url(../images/thm/health4b.png);background-size:cover;}
#health5{background:url(../images/thm/health5b.png);background-size:cover;}
#health6{background:url(../images/thm/health6b.png);background-size:cover;}
#health7{background:url(../images/thm/health7b.png);background-size:cover;}
#health8{background:url(../images/thm/health8b.png);background-size:cover;}
#health9{background:url(../images/thm/health9b.png);background-size:cover;}
#health10{background:url(../images/thm/health10b.png);background-size:cover;}
#health11{background:url(../images/thm/health11b.png);background-size:cover;}
#health12{background:url(../images/thm/health12b.png);background-size:cover;}
#health13{background:url(../images/thm/health13b.png);background-size:cover;}
#health14{background:url(../images/thm/health14b.png);background-size:cover;}
#health15{background:url(../images/thm/health8b.png);background-size:cover;}
#health16{background:url(../images/thm/health6b.png);background-size:cover;}

/*vignettes logo background images*/
#logo1{background:url(../images/thm/logo1b.png);background-size:cover;}
#logo2{background:url(../images/thm/logo2b.png);background-size:cover;}
#logo3{background:url(../images/thm/logo3b.png);background-size:cover;}
#logo4{background:url(../images/thm/logo4b.png);background-size:cover;}
#logo5{background:url(../images/thm/logo5b.png);background-size:cover;}
#logo6{background:url(../images/thm/logo6b.png);background-size:cover;}
#logo7{background:url(../images/thm/logo7b.png);background-size:cover;}
#logo8{background:url(../images/thm/logo8b.png);background-size:cover;}
#logo9{background:url(../images/thm/logo9b.png);background-size:cover;}
#logo10{background:url(../images/thm/logo10b.png);background-size:cover;}
#logo11{background:url(../images/thm/logo11b.png);background-size:cover;}
#logo12{background:url(../images/thm/logo12b.png);background-size:cover;}
#logo13{background:url(../images/thm/logo13b.png);background-size:cover;}
#logo14{background:url(../images/thm/logo14b.png);background-size:cover;}
#logo15{background:url(../images/thm/logo15b.png);background-size:cover;}
#logo16{background:url(../images/thm/logo16b.png);background-size:cover;}


/*vignettes*/
.vignettes{
	margin-bottom: 15vh;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	flex-wrap:nowrap;
	justify-content: center;
	cursor:pointer;
	border:solid 0px red;
}

.vignettes div, .vignettes img {
	border:solid 0px red;
	height:15.2vw;
}

.vignettes img{
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

.vignettes img:hover {
  opacity:0;
}


.health, .logo, .web{
	flex-wrap: wrap;	
	border: solid 0px blue;
}


.health img, .health div{
	height: auto;
	float: left;
}/*164px;}*/


.logo img, .logo div{
	height: auto;/*148px;*/
	float: left;
}

.web img, .web div{
	height: auto;/*148px;*/
	float: left;
	
}
.web img{margin: 5px; margin-bottom: 27px;cursor: pointer;}

.web{
	justify-content: center;
}

#healthcont{
	width: 65.625vw;
	border:solid 0px red;
	height: auto;
	margin: auto;
	margin-top: -80px;
	margin-bottom: -100px;
	
}

#logocont{
	width: 480px;
	border:solid 0px red;
	height: auto;
	margin: auto;
	margin-top: 92px;
	margin-bottom: -100px;
	
}

#webcont{
	width: 720px;
	border:solid 0px red;
	height: auto;
	margin: auto;
	margin-top: 92px;
	margin-bottom: 150px;
	
}

/*format portrait*/
@media only screen and (orientation: portrait) {
	

	#mainImage{
		margin-bottom: 0px;
	}

	#img-main-portrait{
		display:block;
	}
	#img-main{
		display:none;
	}
	
	.vignettes{
		flex-wrap:wrap;
		border:solid 0px red;
		
	}
	#mainvignettes{
		margin-bottom: -250px;
	}
	#index{
		overflow-y:hidden;
	}
	
	.vignettes div, .vignettes img {
		/*height:38.4vw;*/
		
	}

	.health img, .health div{
		height: auto; /*164px;*/
	}
	
	.health{
		margin-bottom: auto;
	}
	
	.logo img, .logo div{
		height: 148px;
	}
	
	#scroll, #portfolio{
		
		height: 0px;
		margin-top: -25px;
		visibility: hidden;
	}
	


}



/********************************************/
/*portfolio*/
/********************************************/


.blackbanner{
	position: fixed;
	top:0px;
	background-color: black;
	width: 100%;
	height: 145px;
	z-index: 10;
}
.whitebanner{
	overflow: hidden;
	background-color: white;
	width: 100%;
	height: 84px;
	font-family: 'Bebas Neue';
	font-size: 78px;
	color:#dae3ea;	
}

#life{margin-top: 145px;}

.greybanner{
	width: 100%;
	overflow: hidden;
	background-color: #dae3ea;
	font-family: 'Bebas Neue';
	height: 135px;
	color: white;
	font-size: 33px;
	margin-bottom: 4.4vw;
}

.banner .menu{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	
}

.sideMenu{
	position: relative;
	width: 556px;
	margin: 0 auto;
	top: -4px;
	z-index: -1;
	border:solid 0px green;
}

.sideMenu div{
	
	font-size:16.3px;
	width: 80px;
	margin-left: 3px;
	/*margin-right: 20px;*/
	border:solid 0px red;
	
}

#fake{width:90px;}

.titlecont{
	width: 556px;
	margin: 0 auto;
	
}
.contacttitle{
	text-align: center;
	border: solid 0px red;
	width: auto;
}
.title{
	position: relative;
	top:14px;
	border:solid 0px blue;
}

.textcont{
	width: 250px;
	margin: 0 auto;
	padding-left: 165px;
	padding-top: 10px;
	border:solid 0px red;
}

.container{
	background-color: #dae3ea;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	flex-wrap:no-wrap;
	justify-content: center;
	border:solid 0px red;
	width: 100%;
}
.container img{
	width:100%;
	cursor: pointer;
	border:solid 0px red;
}

#half1, #half2{width: 50%;margin: -2px;}

.vdleft{
	margin-left: 12.5vw;
	margin-right: 9.15vw;
	border:solid 0px blue;
}
.vdleft img{margin-bottom: 25px;}
.vdmid{margin-right: 5.6vw;border:solid 0px blue;}
.vdmid img{
	margin-bottom: 25px;
	-moz-box-shadow: 1px 1px 1px 1px #6f7477;
	-webkit-box-shadow: 1px 1px 1px 1px #6f7477;
	box-shadow: 1px 1px 1px 1px #6f7477;
}
.vdright{
	margin-right: 12.5vw;
	margin-top: 14.1vw;
	border:solid 0px blue;
}

.vdright img{
	margin-bottom: 30px;
	-moz-box-shadow: 1px 1px 1px 1px #6f7477;
	-webkit-box-shadow: 1px 1px 1px 1px #6f7477;
	box-shadow: 1px 1px 1px 1px #6f7477;
}

#vd13 img{margin-top: 6.5vw;}

#bottom div{margin: 3.2vw 3.5vw 0px 3.5vw;}

.af img{
	-moz-box-shadow: 1px 1px 1px 1px #6f7477;
	-webkit-box-shadow: 1px 1px 1px 1px #6f7477;
	box-shadow: 1px 1px 1px 1px #6f7477;
}

.afleft{margin-left: 14vw;}
.afright{margin-right: 14vw;}

.container div{border:solid 0px green;}

.twleft{margin-left: 14vw;}
.twright{margin-right: 10vw;margin-left: 40px;}

#tw1 img{margin-top: -2.5vw;}
#tw2 img {margin-top: 8.8vw;}
#tw3 img{margin-top: 1.6vw;}
#tw4 img{margin-top: 7.1vw;}
#tw5 img{margin-top: 5.1vw;}
#tw6 img{margin-top: 1.1vw;}
#tw7 img{margin-top: 1.1vw;}	
.vj{
	width:54.15vw;
	border: solid 0px red;
	margin: 0 auto;
	margin-top: -10.8vw;
}
.vj img{
	width: 31.74vw;
	border: solid 0px red;
}
.vj div{margin-bottom: 0.82vw;}
.vjright{float: right;}
#vj0{
	position: relative;
	width: 0px;
	left: -13vw;
	top: 14.4vw;
	border: solid 0px blue;
}

.sic {
	margin-left: 14vw;
	margin-right: 14vw;
	margin-top: 2.416vw;
}

#wi{margin-top: 1.08vw;}
#wi2{margin-top: 0.9vw;margin-bottom: 3.25vw;}
#wi3{margin-bottom: 4.16vw;}
#wi4{margin-top: -0.41vw;margin-bottom: 6.91vw;}
#wi5{margin-bottom: -0.41vw;}
#wi6{margin-bottom: 3.41vw;}

#wi0{
	margin: 0 auto;
	margin-top: 5px;
	width: 320px;
	border: solid 0px red;
}

#w0, #wfake{margin-left: 1.7vw;}
#w4, #w9{margin-right: 1.7vw;}
#w5{margin-top: -1.95vw;}

#w10{margin-left: -0.39vw; z-index: 9;}
#w11{margin-left: -7.94vw;}
	


.separator{
	width: 100%;
	height: 32px;
	background-image: url(../images/separator.png);
	margin-bottom: 7.5vw;
	margin-top: 3vw;
}
.trame{
	width: 100%;
	height: 375px;
	background-image: url(../images/trame.png);
	margin-top: 3vw;
}


.notimg img{cursor: default;}

/*format avant shrink du vin*/
@media only screen and (min-width: 768px) {
	
	#w5{margin-top: -15px;}
	#wi2{margin-top: 7px; margin-bottom: 25px;}
	#w10{margin-left: -3px;}
	#w11{margin-left: -61px;}
	
	
}

@media only screen and (max-width: 720px) {
	#webcont{
		width: 100vw;
	}
	.web img, .web div{
		
		float: none;
		display: block;
		margin: 0 auto;
	
	}

}

/*format grand écran*/
@media only screen and (min-width: 1200px) {
	

	.container img{width:auto;}
	.greybanner{margin-bottom: 53px;}
	.vdleft{
		margin-left: 166px;
		margin-right: 110px;
	}
	
	.vdleft img{margin-bottom: 25px;}
	.vdmid{margin-right: 66px;}
	.vdmid img{
		margin-bottom: 25px;
		-moz-box-shadow: 1px 1px 1px 1px #6f7477;
		-webkit-box-shadow: 1px 1px 1px 1px #6f7477;
		box-shadow: 1px 1px 1px 1px #6f7477;
	}
	.vdright{
		margin-right: 166px;
		margin-top: 168px;
	}
	.vdright img{
		margin-bottom: 30px;
		-moz-box-shadow: 1px 1px 1px 1px #6f7477;
		-webkit-box-shadow: 1px 1px 1px 1px #6f7477;
		box-shadow: 1px 1px 1px 1px #6f7477;
	}
	#vd13 img{margin-top: 76px;}
	#bottom div{margin: 38px 43px 0px 43px;}
	.twleft{margin-left: 185px;}
	.twright{margin-right: 145px;margin-left: 40px;}
	
	#tw1 img{margin-top: -30px;}
	#tw2 img {margin-top: 105px;}
	#tw3 img{margin-top: 19px;}
	#tw4 img{margin-top: 85px;}
	#tw5 img{margin-top: 60px;}
	#tw6 img{margin-top: 13px;}
	#tw7 img{margin-top: 13px;}
	.vj{width: 650px;margin-top: -130px;}
	.vj div{margin-bottom: 10px;}
	.vj img{width: 382px;}
	#vj0{left: -156px;top: 173px;}
	
	.sic{width:530px;margin-top: 29px;}

	#wi0{
		margin-top: 5px;
		width: 320px;
		border: solid 0px red;
	}

	#w5{margin-top: -15px;}
	#wi2{margin-top: 7px; margin-bottom: 25px;}
	#wi3{margin-bottom: 50px;}
	#wi4{margin-top: -5px;margin-bottom: 83px;}
	#wi5{margin-bottom: -5px;}
	#wi6{margin-bottom: 41px;}
	#w10{margin-left: -3px;}
	#w11{margin-left: -61px;}
	
	
	
	#healthcont{width: 672px;}
	
	#logocont{width: 480px;}
		
	
	.separator{
		margin-bottom: 90px;
		margin-top: 35px;
	}


}

@media only screen and (orientation: portrait)and (max-width: 768px){
	
	.health img, .health div{
		height: 109px;
		width: 112px;
	}
	#healthcont{
		margin-bottom: auto;
	}
	.logo img, .logo div{
		height: 123px;
		width: 126px;
	}
	#logocont{
		width: 70%;
	}
	#webcont{
		
		width: 350px;
		margin-top: 92px;
		
	}
		

}

@media only screen and (orientation: portrait){
	/*reduce portfolio menu height*/
	.blackbanner{height: 110px;}
	.menu{margin-top: -18px;}
	.sideMenu{padding-top: 4px;}
	#life{margin-top: 100px;}
}

@media only screen and (orientation: portrait) and (max-width: 425px) {
	
	#webcont{		
		width: 100%;
	}
	.web div img{
		width: 80%;
	}
	
	.sideMenu{
		display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
		display: -ms-flexbox;  /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
		display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		margin-top: 68px;
		width: auto;
	}
	.sideMenu div{
		margin: 0 auto;
		width: auto;
	}
	/*reduce portfolio menu height*/
	.blackbanner{height: 90px;}
	.menu{margin-top: -38px;}
	.sideMenu{padding-top: 6px;}
	#life{margin-top: 80px;}
	#portraitmi{margin-left: -20vw;}
	#trameabout{margin-left: -20vw;}
	#trameabout2{margin-left: -20vw;}
	#blackbannerabout{height: 65px;}
	#whitebannerabout{margin-top: 55px;}
}


@media only screen and (max-width: 1000px) {

	#aboutcontent{
		
		width:82.5vw;
		padding: 0px -30px 0px -30px;
	}
	.titleaboute{
		border: solid 0px blue;
		width: 250px;
		text-align: center;
	}
}

@media only screen and (orientation: landscape) and (max-height: 400px) {

	.blackbanner{height: 110px;}
	.menu{margin-top: -18px;}
	.sideMenu{padding-top: 6px;}
	#life{margin-top: 100px;}

}