@font-face { font-family: 'aaux'; src: url('fonts/font_3-webfont.eot'); src: url('fonts/font_3-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/font_3-webfont.woff') format('woff'),
         url('fonts/font_3-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal;  }
@font-face { font-family: 'aaux'; src: url('fonts/font_4-webfont.eot'); src: url('fonts/font_4-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/font_4-webfont.woff') format('woff'),
         url('fonts/font_4-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal;  }
html {height: 100%;}
body {width:100%; height:100%; min-width: 1000px; color: #fff; overflow: hidden; background: #1e4753; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjMWU0NzUzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBiMmEzMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-radial-gradient(center, ellipse cover,  #1e4753 30%, #0b2a31 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(30%,#1e4753), color-stop(100%,#0b2a31)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #1e4753 30%,#0b2a31 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #1e4753 30%,#0b2a31 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #1e4753 30%,#0b2a31 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #1e4753 30%,#0b2a31 100%); /* W3C */ }
body, input, select, textarea {font:14px/20px 'aaux', Arial, Helvetica, sans-serif;}
h1 {font-size: 30px; line-height: 36px; font-weight: normal; padding-bottom: 50px;}
p {padding-bottom: 16px;}
a {font-weight: normal; text-decoration: underline; color: #fff;}
a:hover {text-decoration: underline;}

img#logo { position: relative; right:1px; }
#container {width: 100%; height: 100%;}
header {width:100%; min-width: 1060px; position: fixed; bottom: 35px; left: 0; z-index: 100; transition:all 0.75s;}
.navoff {left: -100%; margin-left: 210px;}
.navoff h1 .nav-back { 			transform:rotate(180deg); 			-ms-transform:rotate(180deg); 			-webkit-transform:rotate(180deg); 		}
header :before, header :after {content: ''; font-size: 0; line-height: 0; display: block; position: absolute; overflow: hidden;}
header > div {padding: 0 316px 0 120px; position: relative;}
header > div:before {width:180px; height: 55px; background-color: #fff; top: 0; left: 0;}
header h1 {width:146px; margin: 0; padding: 0; overflow: hidden; position: absolute; top: 0; right: 64px; z-index: 2;}
header h1 img {display: block; float: right;}
header h1 .nav-back {font-size:0; line-height: 0; width:30px; height: 55px; text-align: center; color: #0b2a31; background: #fff url(../images/btn_back.png) no-repeat 50% 50%; float: left;}
header h1 .nav-back:hover {background-color: #efefef;}
header nav {width: 100%; height: 42px; padding: 7px 0; position: relative; overflow: hidden;}
header nav:before {width:2000px; height: 55px; background-color: #fff; top: 0; left: -2000px;}
header nav ul {text-align: center; width:720px; height: auto;/*41px;*/ margin: auto; background-color: #fff; position: relative;}
header nav ul:before, header nav ul:after {width:2000px; height: 55px; background-color: #fff; top: -7px; left: -2000px;}
header nav ul:after {left: 100%;}
header nav li {padding: 12px 10px 10px 10px; display: inline-block;}
header .selected {position: relative;}
header .selected:before, header .selected:after, header .selected a:before, header .selected a:after {width: 900px; height: 0; border:7px solid transparent; left: 50%;}
header .selected:before, header .selected:after {border-top: 0 none; border-bottom-color: #fff; top: -7px;}
header .selected:after, header .selected a:after {margin-left: -914px;}
header .selected a:before, header .selected a:after {border-bottom: 0 none; border-top-color: #fff; bottom: -6px;}
header nav a {font-weight: bold; line-height: 20px; text-decoration: none; color: #364b65;}
header nav a:hover {text-decoration: none; color: #000;}

header .company-social {font-size: 0; line-height: 0; border-right: 10px solid #fff; position: absolute; top: 0; right: 210px;}
header .company-social li {border-width: 15px 5px 16px 5px; border-style: solid; border-color: #fff; display: inline-block; vertical-align: top;}
header .company-social a {text-decoration: none; width: 24px; height: 24px; display: block; background-color: transparent; background-repeat: no-repeat;}
header .company-facebook {background-image: url(../images/icon_facebook.png);}
header .company-twitter {background-image: url(../images/icon_twitter.png);}
header .company-linkedin {background-image: url(../images/icon_linkedin.png);}

	/* home canvas */
#canv {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1;}

	/* homepage main layer */
#skillsLayer {overflow: visible; margin: 910px 0 0 1665px; position: fixed; top: 50%; left: 50%;}
#container .competences #skillsTitle:before {display: block;}
#skillsLayer h1 {display: none;}
#skillsLayer h3 {font-size: 30px; line-height: 36px; color: #fff; width: 435px; position: absolute;}
#skillsLayer li > span, #skillsTitle:before {font-size: 0; line-height: 0; height: 0; border-top: 1px solid #fff; position: absolute; display: block; 			transform-origin: 0 100%; 			-ms-transform-origin: 0 100%; /* IE 9 */
	-webkit-transform-origin: 0 100%; /* Chrome, Safari, Opera */
}
#skillsLayer li > a {font-weight: normal; text-decoration: none; color: #fff; position: absolute;}
#skillsLayer li > b, #skillsLayer li > a:before {font-size: 0; line-height: 0; width: 26px; height: 26px; border: 6px solid #fff; -webkit-border-radius: 100%; border-radius: 100%; display: none; position: absolute;}
#skillsLayer li > a span {font-size: 16px; line-height: 20px;  font-weight: bold; white-space: nowrap; position: absolute; display: block;}
#container #skillsLayer li > a:hover:before {padding:4px; border-width: 1px; border-style:solid;}
#skillsLayer li > a:before {content: ''; display: block;}
#skillsLayer li > div {font-size:13px; line-height: 15px; width: 280px; height: 280px; padding: 80px; color: #000; background: #fff; -webkit-border-radius: 100%; border-radius: 100%; display: none; position: absolute; z-index: 1;}
#skillsLayer li > .medium-content {width: 240px; height: 240px;}
#skillsLayer li > .short-content {width: 200px; height: 200px;}
#skillsLayer li > div h4 {text-transform: uppercase; padding-bottom: 10px;}
#skillsLayer li > div p {padding-bottom: 10px;}
#skillsLayer li > div a {font-weight: normal; text-decoration: underline; color: #000;}
#skillsLayer li > div a:hover {text-decoration: underline;}

#skillsLayer > div {display: none; overflow: visible; position: absolute; z-index: 1;}
#skillsLayer > div:before {content: ''; font-size: 0; line-height: 0;  width: 88px; height: 88px; margin: -58px 0 0 -58px;  border: 14px solid #fff; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; display: block; position: absolute; top: 0; left: 0; z-index: 1;}
#skillsLayer > div > p a, #skillsLayer > p a {font-size:0; line-height: 0; text-decoration: none; width: 30px; height: 30px; background: #fff url(../images/btn_back.png) no-repeat 50% 50%; -webkit-border-radius: 100%; border-radius: 100%; position: absolute; display: block;z-index: 1;}

/* center node */
#skillsTitle {position: absolute; top: -960px; left: -1665px; z-index: 1;}
#skillsTitle a {font-size: 0; line-height: 0; width: 64px; height: 64px; margin: -44px 0 0 -44px; background: url(../images/btn_start.png) no-repeat 50% 50%; border: 12px solid #fff; -webkit-border-radius: 100%; border-radius: 100%; display: none; }
#skillsTitle:before {content: ''; width: 1835px; top: 20px; left: 36px; display: none; transform:rotate(30deg); -ms-transform:rotate(30deg); -webkit-transform:rotate(30deg); }
#skillsTitle a:hover {width: 85px; height: 85px; border-width: 2px; border-style: solid;}
#skillsLayer > p a {top: -179px; left: -300px; 			transform:rotate(26deg); 			-ms-transform:rotate(26deg); 			-webkit-transform:rotate(26deg); 		}
		
		/* branches */
#skillsLinks:before {content: ''; width: 88px; height: 88px; border: 14px solid #fff; margin: -59px 0 0 -59px;  -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; display: block; position: absolute; top: 0; left: 0; z-index: 1;}
#skillsLinks li a span {font-size: 20px; line-height: 26px;}

#technologiesLink a, #technologiesLink b {top: -197px; left: 159px;}
#technologiesLink > span {width: 178px; top: -41px; left: 41px; transform:rotate(315deg); -ms-transform:rotate(315deg); -webkit-transform:rotate(315deg); }
#technologiesLink a span {top: -40px; left: -85px;}
#mediaLink a, #mediaLink b {top: -225px; left: -94px;}
#mediaLink > span {width: 156px; top: -45px; left: -16px; transform:rotate(250deg); -ms-transform:rotate(250deg); -webkit-transform:rotate(250deg); }
#mediaLink a span {top: -30px; right: 0px;}
#propertyLink a, #propertyLink b {top: 31px; left: 260px;}
#propertyLink > span {width: 215px; top: 9px; left: 50px; transform:rotate(10deg); -ms-transform:rotate(10deg); -webkit-transform:rotate(10deg); }
#propertyLink a span {top: -65px; left: -100px;}
#lawLink a, #lawLink b {top: 151px; left: -260px;}
#lawLink > span {width: 229px; top: 28px; left: -40px; transform:rotate(145deg); -ms-transform:rotate(145deg); -webkit-transform:rotate(145deg); }
#lawLink a span {top: 20px; left: 60px;}

		/* technologies node */
#technologies h3 {top: -270px; left: 160px;}
#technologies li > div {top: -220px; left: -190px;}
#technologies li > .short-content {top: -180px; left: -150px;}
#technologies > p a {top: 210px; left: -239px; transform:rotate(-50deg); -ms-transform:rotate(-50deg); -webkit-transform:rotate(-50deg); }

#computer > a {top: -102px; left: 455px;}
#computer > span {width: 412px; top: -9px; left: 51px; transform:rotate(-10deg); -ms-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); }
#computer > a span {top: 50px; left: -20px;}
#privacy > a {top: 95px; left: 396px;}
#skillsLayer #privacy > a:before {line-height: 40px; width: 40px; height: 40px;}
#privacy > span {width: 87px; top: 90px; left: 314px; transform:rotate(16deg); -ms-transform:rotate(16deg); -webkit-transform:rotate(16deg); }
#privacy > a span {top: 60px; left: 0;}
#internet > a {top: 241px; left: -51px;}
#skillsLayer #internet > a:before {line-height: 40px; width: 40px; height: 40px;}
#internet > span {width: 192px; top: 52px; left: -12px; transform:rotate(100deg); -ms-transform:rotate(100deg); -webkit-transform:rotate(100deg); }
#internet > a span {top: 20px; left: 61px;}
#database > a {top: 68px; left: 280px;}
#skillsLayer #database > a:before {padding: 3px; border-width: 2px;}
#database > span {width: 246px; top: 13px; left: 45px; transform:rotate(16deg); -ms-transform:rotate(16deg); -webkit-transform:rotate(16deg); }
#database > a span {top: 45px; left: -10px;}
#domain > a {top: -80px; left: -270px;}
#skillsLayer #domain > a:before {padding: 3px; border-width: 2px;}
#domain > span {width: 192px; top: -24px; left: -47px; transform:rotate(191deg); -ms-transform:rotate(191deg); -webkit-transform:rotate(191deg); }
#domain > a span {top: -30px; left: -45px;}
#counterfeit > a {top: -217px; left: 179px;}
#skillsLayer #counterfeit > a:before {padding: 3px; border-width: 2px;}
#counterfeit > span {width: 219px; top: -32px; left: 32px; transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }
#counterfeit > a span {top: 35px; left: 40px;}
#software > a {top: -272px; left: -139px;}
#skillsLayer #software > a:before {line-height: 40px; width: 40px; height: 40px;}
#software > span {width: 201px; top: -43px; left: -20px; transform:rotate(245deg); -ms-transform:rotate(245deg); -webkit-transform:rotate(245deg); }
#software > a span {text-align: right; top: 20px; right: 20px;}
#ia > a {top:40px; left: -287px;}
#skillsLayer #domain > a:before {padding: 3px; border-width: 2px;}
#ia > span { width: 210px; top: 10px; left: -47px; transform: rotate(168deg); -ms-transform: rotate(168deg); -webkit-transform: rotate(168deg);}
#ia > a span {top: 42px; left: -82px;}
#nft > a {top: 207px; left: 132px;}
#nft > span {width: 196px; top: 48px; left: 30px; transform:rotate(56deg); -ms-transform:rotate(56deg); -webkit-transform:rotate(56deg); }
#nft > a span {top: 39px; left: 55px;}

		/* media node */
#media h3 {top: -275px; left: 260px;}
#media li > div {top: -210px; left: -190px;}
#media li > .short-content {top: -170px; left: -150px;}
#media > p a {top: 240px; left: 78px; transform:rotate(-110deg); -ms-transform:rotate(-110deg); -webkit-transform:rotate(-110deg); }
#cinema > a { top: 151px; left: 376px;}
#cinema > span {width: 96px; top: 124px; left: 289px; transform: rotate(23deg); -ms-transform: rotate(23deg); -webkit-transform: rotate(23deg); }
#cinema > a span {text-align: right; top: 27px; right: 7px;}
#tv > a { top: 100px; left: 255px;}
#skillsLayer #tv > a:before {padding: 3px; border-width: 2px;}
#tv > span {width: 224px; top: 22px; left: 52px; transform:rotate(23deg);-ms-transform:rotate(23deg);-webkit-transform:rotate(23deg);}
#tv > a span {top: -20px; left: 46px;}
#music > a {top: 33px; left: -301px;}
#music > span {width: 224px; top: 8px; left: -46px;transform:rotate(170deg);-ms-transform:rotate(170deg);-webkit-transform:rotate(170deg);}
#music > a span {top: -30px; left: -13px;}
#advertising > a {top: -255px; left: -301px;}
#skillsLayer #advertising > a:before {line-height: 40px; width: 40px; height: 40px; padding: 3px; border-width: 2px;}
#advertising > span {width: 64px; top: -174px; left: -208px;transform:rotate(220deg);-ms-transform:rotate(220deg);-webkit-transform:rotate(220deg);}
#advertising > a span {top: 25px; left: 65px;}
#art > a {top: 230px; left: -69px;}
#skillsLayer #art > a:before {line-height: 40px; width: 40px; height: 40px;}
#art > span {width: 187px; top: 46px; left: -8px;transform:rotate(100deg);-ms-transform:rotate(100deg);-webkit-transform:rotate(100deg);}
#art > a span {top: 35px; right: 10px;}
#graphics > a {top: 149px; left: -230px;}
#skillsLayer #graphics > a:before {padding: 3px; border-width: 2px;}
#graphics > span {width: 203px; top: 30px; left: -38px;transform:rotate(142deg);-ms-transform:rotate(142deg);-webkit-transform:rotate(142deg);}
#graphics > a span {top: 45px; left: -40px;}
#literature > a {top: -230px; left: 130px;}
#skillsLayer #literature > a:before {padding: 3px; border-width: 2px;}
#literature > span {width: 195px; top: -39px; left: 27px;transform:rotate(-55deg);-ms-transform:rotate(-55deg);-webkit-transform:rotate(-55deg);}
#literature > a span {top: 35px; left: 40px;}
#fashion > a {top: -180px; left: -213px;}
#fashion > span {width: 190px; top: -30px; left: -36px;transform:rotate(220deg);-ms-transform:rotate(220deg);-webkit-transform:rotate(220deg);}
#fashion > a span {top: 30px; right: 10px;}
#forgery > a {top: -135px; left: 281px;}
#skillsLayer #forgery > a:before {line-height: 40px; width: 40px; height: 40px; padding: 3px; border-width: 2px;}
#forgery > span {width: 258px; top: -15px; left: 41px; transform:rotate(-20deg); -ms-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); }
#forgery > a span {top: 15px; left: 65px;}
#press > a {top: -285px; left: 166px;}
#press > span {width: 32px; top: -226px; left: 158px; transform:rotate(-55deg); -ms-transform:rotate(-55deg); -webkit-transform:rotate(-55deg); }
#press > a span {top: 20px; right: 20px;}
#videogames > a {top: -260px; left: -39px;}
#skillsLayer #videogames > a:before {padding: 3px; border-width: 2px;}
#videogames > span {width: 177px; top: -49px; left: -4px; transform:rotate(265deg); -ms-transform:rotate(265deg); -webkit-transform:rotate(265deg); }
#videogames > a span {top: -25px; left: -20px;}
#social > a {top: -36px; left: 290px;}
#skillsLayer #social > a:before {padding: 3px; border-width: 2px;}
#social > span {width: 244px; top: -9px; left: 48px; transform:rotate(-2deg); -ms-transform:rotate(-2deg); -webkit-transform:rotate(-2deg); }
#social > a span {top: 45px; left: -25px;}
#copyright > a {top: -42px; left: 470px;}
#copyright > span {width: 148px; top: -19px; left: 324px; transform:rotate(-2deg); -ms-transform:rotate(-2deg); -webkit-transform:rotate(-2deg); }
#copyright > a span {top: 50px; left: -35px;}
#crossover > a { top: 182px; left: 182px;}
#crossover > span {width: 208px; top: 40px; left: 40px; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); }
#crossover > a span { top: 38px; left: 34px;}
		
		/* property node */
#property h3 {top: -280px; left: 200px;}
#property li > div {width: 220px; height: 220px; top: -160px; left: -170px;}
#property li > .short-content {top: -150px; left: -160px;}
#property > p a {top: -64px; left: -300px; transform:rotate(10deg); -ms-transform:rotate(10deg); -webkit-transform:rotate(10deg); }

#trademark > a {top: -220px; left: 111px;}
#skillsLayer #trademark > a:before {line-height: 40px; width: 40px; height: 40px;}
#trademark > span {width: 167px; top: -39px; left: 27px; transform:rotate(-55deg); -ms-transform:rotate(-55deg); -webkit-transform:rotate(-55deg); }
#trademark > a span {top: 45px; left: 60px;}
#taxation > a {top: -115px; left: 250px;}
#skillsLayer #taxation > a:before {padding: 3px; border-width: 2px;}
#taxation > span {width: 221px; top: -16px; left: 44px; transform:rotate(-20deg); -ms-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); }
#taxation > a span {top: 0; left: 50px;}
#domainname > a {top: -275px; left: -87px;}
#skillsLayer #domainname > a:before {padding: 3px; border-width: 2px;}
#domainname > span {width: 44px; top: -199px; left: -54px; transform:rotate(-105deg); -ms-transform:rotate(-105deg); -webkit-transform:rotate(-105deg); }
#domainname > a span {top: 10px; right: 15px;}
#sign > a {top: -200px; left: -68px;}
#skillsLayer #sign > a:before {padding: 3px; border-width: 2px;}
#sign > span {width: 123px; top: -48px; left: -13px; transform:rotate(-105deg); -ms-transform:rotate(-105deg); -webkit-transform:rotate(-105deg); }
#sign > a span {top: 8px; right: 10px;}
#leases > a {top: 48px; left: -267px;}
#leases > span {width: 193px; top: 12px; left: -46px; transform:rotate(165deg); -ms-transform:rotate(165deg); -webkit-transform:rotate(165deg); }
#leases > a span {top: -55px; left: -130px;}
#data > a {top: 200px; left: -142px;}
#data > span {width: 187px; top: 40px; left: -23px; transform:rotate(120deg); -ms-transform:rotate(120deg); -webkit-transform:rotate(120deg); }
#data > a span {top: -45px; right: 0px;}
#designs > a {top: -44px; left: 280px;}
#skillsLayer #designs > a:before {padding: 3px; border-width: 2px;}
#designs > span {width: 238px; top: -4px; left: 45px; transform:rotate(-5deg); -ms-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); }
#designs > a span {top: 5px; left: 50px;}
#infringement > a {top: 158px; left: 361px;}
#skillsLayer #infringement > a:before {padding: 3px; border-width: 2px;}
#infringement > span {width: 74px; top: 138px; left: 296px; transform:rotate(25deg); -ms-transform:rotate(25deg); -webkit-transform:rotate(25deg); }
#infringement > a span {top: 50px; left: -30px;}
#unfair > a {top: 103px; left: 250px;}
#skillsLayer #unfair > a:before {line-height: 40px; width: 40px; height: 40px;}
#unfair > span {width: 232px; top: 20px; left: 43px; transform:rotate(25deg); -ms-transform:rotate(25deg); -webkit-transform:rotate(25deg); }
#unfair > a span {top: -20px; left: 65px;}

		/* law node */
#law h3 {top: 80px; left: 270px;}
#law li > div {top: -210px; left: -190px;}
#law > p a {top: -199px; left: 250px; transform:rotate(145deg); -ms-transform:rotate(145deg); -webkit-transform:rotate(145deg); }

#employment > a {top: 180px; left: -213px;}
#skillsLayer #employment > a:before {padding: 3px; border-width: 2px;}
#employment > span {width: 214px; top: 33px; left: -33px; transform:rotate(135deg); -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); }
#employment > a span {top: -50px; right: -20px; text-align: right;}
#layoffs > a {top: 205px; left: 137px;}
#skillsLayer #layoffs > a:before {line-height: 40px; width: 40px; height: 40px;}
#layoffs > span {width: 209px; top: 38px; left: 27px; transform:rotate(55deg); -ms-transform:rotate(55deg); -webkit-transform:rotate(55deg); }
#layoffs > a span {top: 10px; left: 65px;}
#crisis > a {top: -101px; left: -250px;}
#skillsLayer #crisis > a:before {padding: 3px; border-width: 2px;}
#crisis > span {width: 184px; top: -16px; left: -44px; transform:rotate(200deg); -ms-transform:rotate(200deg); -webkit-transform:rotate(200deg); }
#crisis > a span {text-align: right; top: 50px; right: -50px;}
#rules > a {top: -260px; left: -67px;}
#skillsLayer #rules > a:before {line-height: 40px; width: 40px; height: 40px;}
#rules > span {width: 167px; top: -48px; left: -8px; transform:rotate(260deg); -ms-transform:rotate(260deg); -webkit-transform:rotate(260deg); }
#rules > a span {top: 5px; left: 65px;}
#representation > a {top: -144px; left: -370px;}
#skillsLayer #representation > a:before {padding: 3px; border-width: 2px;}
#representation > span {width: 94px; top: -90px; left: -248px; transform:rotate(200deg); -ms-transform:rotate(200deg); -webkit-transform:rotate(200deg); }
#representation > a span {top: -25px; left: 50px;}
#share > a {top: -76px; left: 260px;}
#skillsLayer #share > a:before {line-height: 40px; width: 40px; height: 40px;}
#share > span {width: 218px; top: -8px; left: 46px; transform:rotate(-10deg); -ms-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); }
#share > a span {top: 15px; left: 65px;}

		/* sub page */
.static {text-align: justify; width: 600px; margin: auto; padding-top: 60px;}
#recrutement {padding-top: 185px;}
#recruit-contact {width: 100%; padding-top: 10px; overflow: hidden;}
#recruit-contact li {font-size:18px; line-height: 34px; width: 180px; float: left;}
#recruit-contact li:first-child {margin-left: 30px;}
#recruit-contact li a {font-size: 18px; font-weight: normal;text-decoration: none;}
#recruit-contact li a:before {content: '»'; font-size: 24px; line-height: 30px; text-align: center; width: 34px; height: 34px; margin-right: 10px; color:#0b2a31; background-color: #fff; -webkit-border-radius: 100%; border-radius: 100%; float: left; display: block;}
#contact {width: 855px; padding-top: 30px; margin: auto; overflow: hidden;}
#map {width: 500px; height: 535px; background: url(../images/map.png) 0 0 no-repeat; float: left; position: relative;}
#map h4 {font-size: 0; line-height: 0;}
#map h4 a {width: 11px; height: 11px; background: #ff0000 url(../images/icon_contact.png) 100px 100px no-repeat; -webkit-border-radius: 100%; border-radius: 100%; display: block; overflow: hidden; position: absolute; top: 355px; left: 177px;}
#map h4 a:hover {width: 35px; height: 19px; background-color: transparent; background-position: -209px -116px; -webkit-border-radius: 0; border-radius: 0; top: 352px; left: 170px;}
#map li {position: absolute;}
#map li a {font-size:16px; line-height: 18px; font-weight: normal; text-decoration: none; color: #1d4551; position: relative;}
#map li em, #map li i {display: block; overflow: hidden; position: absolute;}
#map li em {width: 34px; height: 34px; background-image: url(../images/icon_contact.png); background-repeat: no-repeat; border: 6px solid #fff; -webkit-border-radius: 100%; border-radius: 100%; bottom: 12px; left: -23px; transition: all 0.3s;}
#map li i {font-size: 0; line-height: 0; width: 0; height: 0; border-width: 22px 0 0 22px; border-style: solid; border-color:transparent transparent transparent #fff; bottom: 7px; left: -11px; 	transform:rotate(-45deg); 	-ms-transform:rotate(-45deg); /* IE 9 */ -webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */ transition: all 0.3s; }
#map li a:hover {}
#map li a:hover span {font-size: 18px; line-height: 20px;  width: 74px; padding: 16px 14px 0 14px; display: block; left: -52px;}
#map li a:hover em {width: 0; height: 0; border-width: 52px; background-position: 100px 100px; background-color: #fff; bottom: 24.2px; left: -52px;}
#map li a:hover i {border-width: 50px 0 0 50px; left: -25px; bottom: 13px; 	-moz-border-radius: 0 0 0 3px; 	-webkit-border-radius: 0 0 0 3px; 	border-radius: 0 0 0 3px; }
#map li a:hover b {display: block;}
#map li a:hover small {font-size: 11px;}

#map li span {font-size: 0;  line-height: 0; text-align: center; width: 0; padding: 0; -webkit-border-radius: 100%; border-radius: 100%; display: block; overflow: hidden; position: absolute; bottom: 26px; left: 0; transition: all 0.3s;}
#map li b {width: 50px; height: 50px; margin: auto; background: url(../images/icon_contact.png) 0 0 no-repeat; display: none; overflow: hidden;}
#map li small {font-size: 0; line-height: 14px;}
#taxi {top: 220px; left: 125px;}
#taxi em {background-position: -8px -7px;}
#map #taxi b {background-position: 0 -50px;}
#metro {top: 320px; left: 75px;}
#metro em {background-position: -58px -8px;}
#map #metro span {bottom: 16px;}
#map #metro b {height: 45px; background-position: -50px -55px;}
#bike {top: 350px; left: 160px;}
#bike em {background-position: -108px -10px;}
#map #bike b {height: 45px; background-position: -100px -55px;}
#noparking {top: 350px; left: 220px;}
#map #noparking span {bottom: 36px;}
#map #noparking b {background-position: -150px -50px;}

/* parking_vendome */
#parking_vendome {top: 454px;left: 452px;}
#parking_vendome em {background-position: -208px -8px;}
#map #parking_vendome span {bottom: 36px;}
#map #parking_vendome b {height: 38px; background-position: -200px -55px;}

#parking {top: 130px; left: 55px;}
#parking em {background-position: -208px -8px;}
#map #parking b {height: 45px; background-position: -200px -55px;}
#address {width: 350px; padding-top: 40px; float: right;}
#address h1 {font-size: 14px; line-height: 18px; padding: 0;}
#address a {font-weight: normal;text-decoration: none;}
#addresssmall {position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 210px; height: 300px; line-height: 16px;}
#addresssmall h1 {font-size: 14px; line-height: 16px; padding: 0;}
#addresssmall a {font-weight: normal;text-decoration: none; line-height: 16px; }
.route {font-size: 12px; color:#1d4551; background: #fff; padding: 7px 25px 7px 35px; display: inline-block; position: relative;}
.route:before {content: ''; width: 18px; height: 15px; background: url(../images/icon_contact.png) -166px -118px no-repeat; display: block; position: absolute; top: 9px; left: 9px;}

#socialLink {font-size: 12px; padding-top: 30px;}
#socialLink p {padding-bottom: 10px;}
#socialLink li {padding: 0 15px 0 0; display: inline-block;}

.social a {font-size: 0; line-height: 0; width: 22px; height: 22px; background-image: url(../images/icon_contact.png); background-repeat: no-repeat; display: block;}
.twitter {background-position: -15px -114px;}
.facebook {background-position: -65px -113px;}
.linkedin {background-position: -115px -115px;}
#credits {padding-top: 30px;font-size: 10px;}

#equipe {width: 100%; height: 100%;}
#equipe map{z-index:10;}
#equipe:after {content:''; width: 100%; height: 580px; position: absolute; bottom: 0; left:0; z-index: 3; /* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top,  rgba(0,0,0,0) 33%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(33%,rgba(0,0,0,0)), color-stop(75%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 33%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 33%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 33%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 33%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ }
#equipe h1 {text-align: center; width: 100%; position: absolute; bottom: 550px; left: 0;}
#equipe .info {text-align: left; width: 242px; margin-left: -120px; display: none; position: absolute; bottom: 580px; left: 50%; z-index: 3; 			height: 126px; }
#equipe .info h4 {font-size: 18px;}
#equipe .info h5 {font-weight: normal;}
#equipe .info ul {padding-bottom: 10px;}
#equipe .info ul a {font-weight: normal; text-decoration: none;}
#equipe .info ul a:hover {text-decoration: underline;}
#equipe .info .retour {padding-right: 25px; background: url(../images/btn_back2.png) 100% 50% no-repeat;}
#equipe .social a {margin-right: 10px; display: inline-block;}
#equipe img {display: block;}
#equipe figcaption {display: none;}
#equipe > ul {width: 960px; margin-left: -552px; position: absolute; bottom: 0; left: 50%;}
#equipe > ul > li {display: block; position: absolute; }

#alexandre{top: -2px;left: -165px;}
#antoine { left: 930px; bottom: 96px; scale: 1.1;}
#benjamin { left: 844px; bottom: 36px; }
#calypso {  top: -119px; left: 785px; scale: 0.85;}
#christina {top: 2px;right: -140px;}
#clemence{top: -19px;left: -98px;}
#fabienne { left: 282px; bottom: 148px; }
#fanny {top: -85px;left: 143px;scale: 0.88;}
#gauthier { left: 672px; bottom: 181px; }
#glenn {top: -36px;right: -100px;}
#hadrien{top: -88px;left: 671px;scale: 0.88;}
#jean { left: 455px; bottom: 36px; }
#karl { left: 432px; bottom: 100px; }
#mina { left: 980px; bottom: 33px; }
#nicolas { left: 728px; bottom: 36px; }
#noemie{top: -41px;left: 69px;}
#pauline{  top: -48px; left: -25px; scale: 0.85;}
#sarah {  left: 329px; bottom: 16px; scale: 1.05;}
#sophie { left: 198px; bottom: 36px; z-index: 3;}	
#thibaut { left: -1px; top: 52px; scale: 1.1;}		
#tiphaine { left: 630px; bottom: 37px; }	
#virginie { left: 539px; bottom: 100px; }	

#equipe figure > div {position: absolute; bottom: 0 ; left: 0;}
#equipe .active {}
#equipe .svg {display: none;}
#equipe .static {padding: 10px;}
.team-map { width: 1420px; height: 580px; margin-left: -696px; display: block; position: absolute; bottom: 0; left: 50%; z-index: 50; /* background-color: rgba(255,0,0,0.5); */}
#equipe .blur {display: none;}
#equipe .show-blur {}
#equipe .show-blur img {display: none;}
#equipe .show-blur .blur {display: block;}

#news {width: 850px; padding-top: 70px; margin: auto;}
#news li {font-size: 30px; line-height: 36px; width: 700px; margin: 0; position: relative; transform-origin: 100% 100%; transition: all 2s; cursor: default;}
#news li:before {content: ''; width: 40px; height: 40px; border : 2px solid #16c3d8; /* background: #16c3d8; */ display: block; -webkit-border-radius: 100%; border-radius: 100%; position: absolute; top: 0; left: -54px;}
#news li h5 {font-size: 36px; font-weight: bold; line-height: 40px; color: #16c3d8;}
#news h5 .social {margin-top: 12px; display: inline-block; vertical-align: top;}
#news li p {padding: 0;}

#news li:nth-child(1n+1) h5 {color: #d8090c;}
#news li:nth-child(1n+1):before {border : 6px solid #d8090c; /* background: #d8090c; */}

#news li:nth-child(2n+2) h5 {color: #f79b16;}
#news li:nth-child(2n+2):before {border : 6px solid #f79b16;/* background: #f79b16; */}

#news li:nth-child(3n+3) h5 {color: #b820e9;}
#news li:nth-child(3n+3):before {border : 6px solid #b820e9;/* background: #b820e9; */}

#news li:nth-child(4n+4) h5 {color: #3fb82e;}
#news li:nth-child(4n+4):before {border : 6px solid #3fb82e;/* background: #3fb82e; */}

#news li:nth-child(5n+5) h5 {color: #d9008f;}
#news li:nth-child(5n+5):before {border : 6px solid #d9008f;/* background: #d9008f; */}

#news li:nth-child(6n+6) h5 {color: #ffea00;}
#news li:nth-child(6n+6):before {border : 6px solid #ffea00;/* background: #ffea00; */}

#news li:nth-child(7n+7) h5 {color: #16c3d8;}
#news li:nth-child(7n+7):before {border : 6px solid #16c3d8;/* background: #16c3d8; */}
				/*
				.technologies h5 {color: #d8090c;}
				.technologies:before {background: #d8090c;}
				.media h5 {color: #f79b16;}
				.media:before {background: #f79b16;}
				.property h5 {color: #b820e9;}
				.property:before {background: #b820e9;}
				.law h5 {color: #3fb82e;}
				.law:before {background: #3fb82e;}
				border : 2px solid color
				
				*/

/* fix old browsers */
.ie8 body {background: #1e4753;}
.ie8 #skillsLayer li > span {display: none !important;}
.ie8 #map li i {border-style: solid; border-width: 11px 10px 0 10px; border-color: #ffffff transparent transparent transparent;}
.ie8 #map li a:hover i {border-style: solid; border-width: 11px 10px 0 10px; border-color: #ffffff transparent transparent transparent; left:-10px;}


/* mobile responsive rules */
/*@media  (min-width: 0px) and (max-width: 480px) {*/
@media (orientation: portrait) { 
	.mobile {height: 100%; min-width: 0; overflow: auto;}
	.mobile h1 {padding-bottom: 20px;}
	.mobile #container {height: 100%;}
		
	.mobile #start-screen {text-align: center; width: 100%; height: 100%; position: relative;}
	.mobile #start-screen h4 {font-size: 0; line-height: 0; width: 105px; height: 62px; margin-left: -42px; background: url(../images/logo.png) 0 0 no-repeat; display: inline-block; position: absolute; top: 30%; left: 50%;}
	.mobile #start-screen h4:before {content: ''; width: 20px; height: 55px; background: #fff; position: absolute; right: 100%;}
	.mobile #start-screen p {width: 60px; height: 60px;  margin: -35px 0 0 -35px; position: absolute; top: 70%; left: 50%;}
	.mobile #start-screen p a {font-size: 0; line-height: 0; width: 100%; height: 100%; background: url(../images/btn_start.png) no-repeat 50% 50%; border: 5px solid #fff; -webkit-border-radius: 100%; border-radius: 100%; display: block;}
	.mobile .mobile-rotate {display: none;}
	.mobile .static {width: auto; margin: 0; padding: 0; text-align: left;}
	.mobile .mobile-content {min-height: 100%; padding: 30px 10px 0 10px;}
	.mobile section {display: none; height: 100%;}
	.mobile header {width: auto; min-width: 0; background: #fff; padding: 0; position: fixed; top: 0; bottom: auto; left: 0; right: 0;}
	.mobile header h1 {width: auto; height: auto; line-height: 16px; padding: 10px 10px; position: static;}
	.mobile header h1 a {font-size: 16px; line-height: 16px; text-decoration: none; color: #364b65;}
	.mobile header h1 img {display: none;}
	.mobile header > div {padding: 0;}
	.mobile header :before, header :after {display: none;}
	.mobile header nav {padding: 10px; height: auto; border-top: 3px solid #364b65; display: none;}
	.mobile header nav ul {width: auto; margin: 0;}
	.mobile header nav li {padding: 3px 0 0 0; display: block; text-align: left;}
	.mobile header nav a {font-weight: normal;}
	.mobile header .company-social {display: none;}
	.mobile #property li > div {width: auto; height: auto;}
	.mobile #skillsLayer h1 {display: block;}
	.mobile #address {width: auto; padding: 0; float: none;}
	.mobile #address h1 {font-size: 30px; line-height: 36px;}
	.mobile #address #socialLink li {padding-right: 5px;}
	.mobile #recruit-contact li:first-child {margin-left: 0;}
	.mobile #index_hotspot {background: #d8090c;}
	.mobile #index_hotspot h3 {font-size: 20px; line-height: 1; font-weight: normal; margin-bottom: 10px;}
	.mobile #technologies, .mobile #media, .mobile #property, .mobile #law {margin: 0 -10px; padding: 10px;}
	.mobile #technologies {background: #d8090c;}
	.mobile #media {background: #f79b16;}
	.mobile #property {background: #b820e9;}
	.mobile #law {background: #3fb82e;}
	.mobile #equipe_hotspot img {width: auto; height: auto; display: block; margin: 0 auto 5px auto;}
	.mobile #equipe_hotspot figcaption {text-align: center;}
	.mobile #equipe_hotspot > ul > li {margin-bottom: 20px;}
	.mobile #equipe_hotspot .social a {margin: 0 3px; display: inline-block;}
	.mobile #news-content .social {display: inline-block; vertical-align: top;}
	.mobile #recruit-contact li {margin-bottom: 10px; float: none;}
	.menu-toggle {width: 18px; padding-bottom: 3px; position: absolute; top: 10px; right: 10px; display: block;}
	.menu-toggle i {width: 100%; height: 3px; margin-top: 3px; background: #364b65; display: block; -webkit-border-radius: 3px; border-radius: 3px;} }
@media (orientation: landscape) { 	.mobile {min-width: 0;}
	
.mobile header {display: none;}
.mobile section {display: none !important;}
.mobile .mobile-rotate {text-align: center; padding-top: 20%; display: block;}
.mobile .mobile-rotate h4 {font-size: 0; line-height: 0; width: 105px; height: 62px; margin-left: 20px; background: url(../images/logo.png) 0 0 no-repeat; display: inline-block; position: relative;}
.mobile .mobile-rotate h4:before {content: ''; width: 20px; height: 55px; background: #fff; position: absolute; right: 100%;}
.mobile .mobile-rotate p {font-size: 20px; line-height: 1; margin: 0; padding: 10px;} }

.active-video { height: 100%; }
.active-video .overlay { width: 100%; height: 100%; text-align: center; }
.active-video .overlay video { width: 100%; height: 100%; max-height: 400px; max-width: 100%; }

.overlay { text-align: center; }
.overlay video { max-height: 169px; max-width: 300px; padding: 5px; border-radius: 5px; color: #000; background-color: #000; position:relative; top:10%; }
.overlay .play, .overlay .pause { width:50%; height:50%; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; z-index: 1000; }
.overlay .pause {display: none;}
.overlay .play { background: url(../images/play.png) no-repeat center; }
.overlay .pause { background: url(../images/pause.png) no-repeat center; }
.overlay .skip { position: fixed; z-index: 2000; right: 10%; top: 4%; }

#videos {width: 850px; padding-top: 40px; margin: auto;}
#videos li {font-size: 20px; line-height: 20px; width: 700px; margin: 0; position: relative; transition: all 2s; cursor: default;}
#videos li p { text-align: center; padding-bottom: 2px; }
#news li.media p .short-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 400px; }
#news li.media.active-news p .short-text { -webkit-line-clamp: 3; max-width: none; }

#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-color: #000; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; }
#overlay video { width: 40%; padding: 5px; border-radius: 5px; color: #000; background-color: #fff; position:relative; top:5%; }
#overlay .play, #overlay .pause { display: none; width:50%; height:50%; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; z-index: 1000; }
#overlay .play { background: url(../images/play-button.png) no-repeat center; }
#overlay .pause { background: url(../images/pause-button.png) no-repeat center; }
#overlay .skip { position: fixed; z-index: 2000; right: 10%; top: 4%; }

.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }

.modalDialog:target { opacity:1; pointer-events: auto; }

.modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: transparent; 	border-color:#CCC; 	border-style:solid; 	border-width:thin;  }

.close { background: #606061; color: #FFFFFF; line-height: 25px; text-align: center; float: right; width: 112px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; }
.close:hover { background: #00d9ff; }