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

}

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

}

/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic,700italic); */

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: 0px solid #000000;         
    outline: 0 none;
}

html {-webkit-font-smoothing: antialiased}

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}

#contenu {
	padding-bottom:50px; /* Height of the footer element */
}
#footer {
	/*width:97%;*/
	height:auto;
	position:absolute;
	bottom:3%;
	/*left:0;
	left: 93%;*/
	right: 3%;
	z-index: 1;
	text-align: right;
}
#footer a{
	font-size: 1em;
	padding-left: 7px;
	padding-top: 10px;
	color: #999;
	float:left;
}

body{
	margin:0;
	font-family: "Roboto",sans-serif;
	/* font-weight:700; */
}

.right, 
.left
{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:200;
	font-size: 6em;
}

input, select, textarea{
	-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
input[type="submit"], input[type="reset"]{
	-webkit-appearance: none;
}

div.icheck{
	margin-left:-20px;
	margin-right:5px;
}

th.checkbox-column, td.md {
	text-align: center;
}

th.button-column select {
	width: auto;
}

.form-horizontal .form-actions {
	padding-left: 20px;
}

.radio input[type="radio"], .checkbox input[type="checkbox"]{
	width: 20px;
}

/* FROM CC */
#work {
    background-color: black;
    height: 100%;
    overflow-x: hidden;
    position: absolute;
    width: 100%;
}

#work .menu p{
	margin-bottom: 3%;
}

#about,
#contact{
	background-color: white;
    height: 100%;
    overflow-x: hidden;
    position: absolute;
    width: 100%;
    z-index: 1;
}

#about .menu{
	top: 70px;
}

#philo,
#partners {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	background-color:white;
	overflow-x:hidden;
}

#partners .menu{
	top: 70px;
}
#philo .menu{
	top: 30px;
}

#work .menu{
	top: 70px;
}

#philo h1,
#partners h1{
	font-size: 32px;
}

#philo h2,
#partners h2{
	font-size: 32px;
	line-height: 34px;
	margin-bottom:2%;
}

#philo p,
#partners p{
	font-size: 18px;
	line-height: 21px;
}

/* menu mobile */
#gropener {	display: none; }
#work.lovelife #menu-work-watches { display: none !important; }


.menu{
    height: 20px;
    left: 3%;
    position: absolute;
    top: 30px;
    /* width: 160px; */
    z-index: 2000;
}

.menu a:hover {
    border-bottom: 2px solid #fff;
}

.menu p{
	margin: 0;
}

.menu a {
	color: #000;
    font-size: 16px;
    line-height: 21px;
    margin-right: 14px;
	text-decoration: none;
    transition: all 0.3s ease 0s;
	/* font-family: "suisse_bp_intl_mediummedium",sans-serif; */
	font-family: "Roboto",sans-serif;
	display: inline-block;
	/* font-weight:700; */

	padding-bottom: 2px; 
}

.menu a:hover {
	text-decoration: none;
	/* text-decoration:underline; */
	border-bottom: 2px solid;

}

.menuTop a:hover{
	text-decoration:none;
}

.menu a.active {
    color: #fff;
	/* text-decoration:underline; */
}

#about .menu a,
#contact .menu a{
	color: #999;
}

#about .menu a:hover,
#contact .menu a:hover{
	color: #000;
	border-bottom: 0px solid #fff;
}

#work .menu a:hover{
	color: #fff;
	border-bottom: 0px solid #fff;
}

/* Menu Black */
.menu-black{
	font-family: "Roboto",sans-serif;
	color: #000;
    height: 20px;
    left: 3%;
    position: absolute;
    top: 30px;
    /*width: 160px;*/
    z-index: 1000;
}

.menu-black p{
	margin: 0;
}

.menu-black a {
	color: #000;
    font-size: 16px;
    line-height: 21px;
    margin-right: 14px;
	text-decoration: none;
    transition: all 0.3s ease 0s;
}

.menu-black a:hover {
	/*text-decoration:underline;*/
}

.menu-black a.active {
    color: #000;
	/*text-decoration:underline;*/
	border-bottom: 2px solid;
}

/* Menu White */

.menu-white{
	font-family: "Roboto",sans-serif;
	color: #fff;
    height: 20px;
    left: 3%;
    position: absolute;
    top: 30px;
   /*width: 160px;*/
    z-index: 1000;
}

.menu-white p{
	margin: 0;
}

.menu-white a {
	color: #fff;
    font-size: 16px;
    line-height: 21px;
    margin-right: 14px;
	text-decoration: none;
    transition: all 0.3s ease 0s;
}

.menu-white a:hover {
	/*text-decoration:underline;*/
}

.menu-white a.active {
    color: #fff;
	/*text-decoration:underline;*/
	border-bottom: 2px solid;
}


.clockbox {
	font-size: 14px;
	top: 30px; 
	text-align: right;
	right: 3%;
	color: #ffffff;
	font-family: 'suisse_bp_intl_regularregular', sans-serif;
	z-index: 1;
	position: absolute;
}

#clockbox-work {
	position: absolute;
	width: 80px;
	height: 18px;
	font-family: 'suisse_bp_intl_regularregular', sans-serif;
}

.animAbout{
	/*position: absolute;
	width: 30%;
	height: 10%;
	top: 45%;
	left: 35%;
	z-index: 2;*/
}

.animAbout
{
	position: relative;
    width: 100%;
    margin-top: 25%;
    margin-left: auto;
    z-index: 2;
    margin-right: auto;
}

#anim{
	/*position: absolute;
	width: 44%;
	height: 10%;
	top: 40%;
	left: 28%;
	z-index: 2;*/
	position: absolute;
	width: 30%;
	height: 10%;
	top: 45%;
	left: 35%;
	z-index: 2;
}

#content{
	position:absolute;
	width:47%;
	left:3%;
	top:25%;
	height:auto;
	
	-webkit-animation: fadein 2s; /* Safari and Chrome */
       -moz-animation: fadein 2s; /* Firefox */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera */
            animation: fadein 2s;
	}	
#leftCol{
	margin-top: 1.5%;
	width: 49%;
	float: left;
}

#rightCol{
	width: 49%;
	margin-top: 1.5%;
	float: right;
}

#menu-work-watches {
	position: absolute;
	width: 650px;
	height: 20px;
	left: 9%;
	top: 70px;
	z-index: 1000;
}

#menu-work-watches table td{
	/* padding-right:10%; */
}

#menu-work-watches a {
    font-size: 16px;
    line-height: 22px!important;
    margin-right: 10px;
	color: #999;
    font-family: "Roboto", sans-serif;
	/* font-weight:700; */
    text-decoration: none;
    transition: all 0.3s ease 0s;
	line-height: 25px;
}

#menu-work-watches a:hover{
	color: #fff;
}
	
#menu-work-watches a.active{
	color:#fff;
}

#menu-work-watches table td{
	vertical-align:top;
}

#work .brandTable{
	display:none;
}
/*****************************/
nav ul ul {
	display: none;
}
nav ul li:hover > ul {
	display: block;
	position:absolute;
	/*left: 100%;*/
	left:100%;
	top:0;
}
nav ul {
	list-style: none;
	position: relative;
	display: inline-table;
	margin:0;
	/*padding-right:35%;*/
}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}

nav ul li:hover a {
	color: #fff;
}

nav ul li a {
	display: block;
	color: #fff;
	text-decoration: none;
}
.menu.work { width: 100%; z-index: 1000}
nav ul { width: 80%; }
nav ul li.type { width: 80px; }
nav ul li.type:hover { width: 80px; }

/*nav ul li.type ul { margin-left: -65px; }
nav ul li.type ul li { 	width: 150px; float: left; }*/
nav ul li.type div.subs { width: 100%; display: none; position: absolute; top: 0; /*left: 114px; */}
nav ul li.type div div.brands { float: left; width: 150px; }
nav ul li.type:hover { color: #fff; }
@media only screen and (min-width: 700px) {
	nav ul li.type:hover div { display: block; }
}

/* page products / view */
#work.lovelife .menu nav.white ul li.type a { color: #fff; opacity: .6; }
#work.lovelife .menu nav.white ul li.type.active a,
#work.lovelife .menu nav.white ul li.type a:hover { color: #fff; opacity: 1; }
#work.lovelife .menu nav.white ul li.type div div.brands a { color: #fff; opacity: .6; }
#work.lovelife .menu nav.white ul li.type div div.brands a.active,
#work.lovelife .menu nav.white ul li.type div div.brands a:hover { color: #fff; opacity: 1; }

#work.lovelife .menu nav.black ul li.type a { color: #000; opacity: 1; }
#work.lovelife .menu nav.black ul li.type.active a,
#work.lovelife .menu nav.black ul li.type a:hover { color: #000; opacity: .6; }
#work.lovelife .menu nav.black ul li.type div div.brands a { color: #000; opacity: 1; }
#work.lovelife .menu nav.black ul li.type div div.brands a.active,
#work.lovelife .menu nav.black ul li.type div div.brands a:hover { color: #000; opacity: .6; }

nav ul ul {
	border-radius: 0px;
	padding: 0;
	position: absolute;
	top: 100%;
}
nav ul ul li {
	float: none; 
	position: relative;
}
nav ul ul li a {
	padding: 0;
	color: #fff;
}	

nav ul ul ul {
	position: absolute; 
	left: 100%; 
	top:0;
}


#menu-mobile { display: none; }



#mainMenu, #mainMenu ul{
	padding:0;
	margin:0;
	list-style:none;
	text-align:center;
}
#mainMenu li{
	display:inline-block;
	position:relative;
	border-radius:8px 8px 0 0;
}
#mainMenu ul li{
	display:inherit;
	border-radius:0;
}
#mainMenu ul li:hover{
	border-radius:0;
}
#mainMenu ul li:last-child{
	border-radius:0 0 8px 8px;
}
#mainMenu ul{
	width: 150px;
	margin-top: 15px;
	text-align: left;
	position:absolute;
	z-index: 2000;
	max-height:0;
	left: 0;
	right: 0;
	overflow:hidden;
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
}
#mainMenu li:hover ul{
	max-height:15em;
}



/*****************************/

table td, table th{
	padding: 0;
}

.logo{
	/* background: url("../images/logo-white.png") no-repeat scroll left center / 50% auto rgba(0, 0, 0, 0); */
    height: 15%;
    left: 3%;
    position: absolute;
    top: 40%;
    width: 25%;
    z-index: 2;
}

.texteBrand,
#texteBrand{
	position:absolute;
	width:20%;
	left:3%;
	/* height:10%; */
	top:51%;
	z-index:2;
	color:white;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 1.1vw;
    line-height: 1.35vw;
	
	opacity:1;
	
	animation: texte-anim 3s ease forwards;
	-moz-animation: texte-anim 3s ease forwards;
	-webkit-animation: texte-anim 3s ease forwards;
	-ms-animation: texte-anim 3s ease forwards;
	-o-animation: texte-anim 3s ease forwards;
	
	animation-delay: 2s;
	-moz-animation-delay: 2s;
	-webkit-animation-delay: 2s;
	-o-animation-delay: 2s;
}

@media only screen and (min-width: 700px) {
	#texteBrand img { 
		margin-top: 16px;
	}
}

.work-center {
    animation: 3s ease 0s normal forwards 1 running texte-anim;
    background-color: #000;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.divHome{
	position:absolute;
	width:100%;
	height:100%;
	/* z-index:1; */
	/*overflow-x:hidden;*/
	overflow:hidden;
	display:none;
}

.reddot{
	margin-top: 16px;
	width:30%;
}

.center{
    height: 85%;
    left: 28%;
    position: absolute;
    width: 45%;
	top: 18%;
	
	/*height: 85%;
	left: 18%;
	position: absolute;
	width: 64%;
	top: 18%;*/
}

.brand{
	font-size: 1.1vw;
    line-height: 1.35vw;
}

.work-center{
	top: 30%;
}

#ligne{
	width: 100%;
	float:left;
	margin-bottom:3%;
}

#ligne-left{
	float:left;
	width: 18%;
}

#ligne-right{
	float:left;
	width: 80%;
	margin-left:2%;
}

.partners{
	margin-top: 2%;
}

.work-center {
	position:absolute;
    width: 70%;
    height: 85%;
	left:15%;
	background-size:66%;
	text-align: center;
}

#contact-centre {
	position: relative;
	width: 80%;
	height: 80%;
	z-index: 2;
	top:10%;
	left:10%;
	text-align:center;
}
#contact-centre img{
	height: 100%!important;
}
#coord {
	position:absolute;
	width:25%;
	left:3%;
	height:20%;
	top:40%;
	color:black;
	z-index:2;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size:1.1vw;
	line-height: 1.35vw;
}

#coord a{
	color: #000;
}


/* MOBILE */

@media screen and (max-width: 1400px) {
  .clockbox{
	/*font-size:16px;
	top:20px;*/
	}
}
@media screen and (max-width: 1024px) {
  .clockbox{
	/*font-size:14px;
	top:12px;*/
	}
}

@media screen and (max-width: 1400px) {
	#menu-black{
		top:20px;
	}
	#menu-black a{
		font-size:18px;
		margin-right:12px;
		line-height:16px;
		border-bottom: #fff 2px solid;
	}
	#menu-black a:hover{
		border-bottom: #000 2px solid;
	}
	#menu-black a.active{
		border-bottom: #000 2px solid;
	}
}
@media screen and (max-width: 1024px) {
	#menu-black{
		top:12px;
	}
	#menu-black a{
		font-size:16px;
		margin-right:10px;
		line-height:15px;
		border-bottom: #fff 1px solid;
	}
	#menu-black a:hover{
		border-bottom: #000 1px solid;
	}
	#menu-black a.active{
		border-bottom: #000 1px solid;
	}
}

@media screen and (max-width: 1400px) {
	#coord {
		font-size:1.1vw;
	}
}
@media screen and (max-width: 1024px) {
	#coord {
		font-size:1.2vw;
	}
}