@charset "UTF-8";
/* EGK CSS Document vert*/
*{margin: 0; padding: 0;}

body {
	font-family: Trebuchet MS, Verdana, Geneva, sans-serif;
	font-size: 14px;
	letter-spacing: 0.5px;
	color: #333;
	background-color: #222;
}

h1 {
	font-size: 18px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	margin: 0;
	width: 100%;
}
h2 {
	font-size: 17px;
	color: #FFF;
	line-height: 24px;
	font-weight: normal;
	text-align: center;
}
h3 {
	font-size: 16px;
	color: #FFF;
	line-height: 24px;
	text-align: center;
}

a:focus, a:hover {color: #fff; outline: none;}
a.link {
	color: #FFF;
	font-size: 12px;
	text-decoration: none;
	padding: 5px 15px;
	background-color: #555;
	border-radius: 5px;
}
a.link_g {background-color: #555;}
a.link:hover, a.link_g:hover {background-color: #3C7;}

p {line-height: 1.5em;}

img {border: none;}

.grey3 {color: #333;}
.white {color: #fff;}

.w100 {width: 100%;}
.h160 {height: 160px;}
.h220 {height: 220px;}

.m0 {margin: 0;}
.mt0 {margin-top: 0;}	.mt5 {margin-top: 5px;}	.mt10 {margin-top: 10px;} .mt20 {margin-top: 20px;}	.mt30 {margin-top: 30px;}	.mt50 {margin-top: 50px;}
.ml20 {margin-left: 20px;}
.mb0 {margin-bottom: 0;}	.mb10 {margin-bottom: 10px;}	.mb20 {margin-bottom: 20px;}	.mb30 {margin-bottom: 30px;}	.mb50 {margin-bottom: 50px;}
.mcenter {margin: 0 auto;}
.malH5 {margin-left: 5px; margin-right: 5px;}
.malV20 {margin-top: 20px; margin-bottom: 20px;}
.malV30 {margin-top: 30px; margin-bottom: 30px;}
.malV50 {margin-top: 50px; margin-bottom: 50px;}

.p0 {padding: 0;} 			.p10 {padding: 10px;} 	
.pt10 {padding-top: 10px;} 	.pt20 {padding-top: 20px;}
.pl0 {padding-left: 0;}
.pb20 {padding-bottom: 20px;}
.palH5 {padding-left: 5px; padding-right: 5px;}
.palH10 {padding-left: 10px; padding-right: 10px;}
.palH30 {padding-left: 30px; padding-right: 30px;}
.palV10 {padding-top: 10px; padding-bottom: 10px;}
.palV20 {padding-top: 20px; padding-bottom: 20px;}
.palV30 {padding-top: 30px; padding-bottom: 30px;}
.palV50 {padding-top: 50px; padding-bottom: 50px;}

.fs13 {font-size: 13px;}
.fs14 {font-size: 14px;}
.fs16 {font-size: 16px;}
.fs20 {font-size: 20px;}


.bgGrey-5 {background-color: #555;}
.bgGrey2 {background-color: rgba(34, 34, 34, 0.2);}
.bgGrey75 {background-color: rgba(34, 34, 34, 0.75);}
.bgColor1 {background-color: rgba(51, 204, 119, 0.1);}
.bgColor5 {background-color: rgba(51, 204, 119, 0.5);}
.bgColor75 {background-color: rgba(51, 204, 119, 0.75);}

.edgT {border-top: 1px solid rgba(34, 34, 34, 0.25);}
.edgL {border-left: 1px solid rgba(34, 34, 34, 0.25);}
.edgR {border-right: 1px solid rgba(0, 0, 0, 0.25);}
.edgB {border-bottom: 1px solid rgba(34, 34, 34, 0.25);}

.hand {cursor: pointer;}

.anim {
	-webkit-transition: all 0.4s ease-in-out 0.1s;
    -moz-transition: all 0.4s ease-in-out 0.1s;
    -o-transition: all 0.4s ease-in-out 0.1s;
    transition: all 0.4s ease-in-out 0.1s;
}

.flL {float: left;}		.flR {float: right;}



/* --Header-- */

.logo img {width: 220px;}

.designed_colors {margin-top: 45px; cursor: pointer;}	

.green, .red, .blue, .yellow {
	width: 15px;
	height: 15px;
	margin: 0 3px;
	color: transparent;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	float: left;
}
.green {background: #3C7;}
.red {background: #F33;}
.blue {background: #38F;}
.yellow {background: #FC0;}
.couleurs input[value] {color: rgba(255,255,255,0);}
.green:hover, .red:hover, .blue:hover, .yellow:hover {border: 1px solid #FFF;}

.white-line {height: 3px; background-color: #FFF;}
.other-color-line {height: 3px; background-color: #3C7;}


/* --Navigation-- */

.navbar-default {background-color: transparent; border: 0 none;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {background-color: #3C7;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #3C7;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {background-color: #3C7;}

.mainnav a:link, .mainnav a:visited, .nav_gv a:link, .nav_gv a:visited {
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	padding: 20px;
	display: inline-block;
	
	-webkit-transition: all 0.5s ease-in-out 0.1s;
    -moz-transition: all 0.5s ease-in-out 0.1s;
    -o-transition: all 0.5s ease-in-out 0.1s;
    transition: all 0.5s ease-in-out 0.1s;
}

.dropdown-toggle, .z85 {z-index: 85;}
.dropdown-menu {top: 0; opacity: 0; z-index: 82;}
.open > .dropdown-menu {top: 100%; opacity: 1;}

.dropdown-menu li a {
	font-size: 13px !important;
	padding: 10px 20px !important;
	width: 100%;
	
	-webkit-transition: all 0.5s ease-in-out 0.1s;
    -moz-transition: all 0.5s ease-in-out 0.1s;
    -o-transition: all 0.5s ease-in-out 0.1s;
    transition: all 0.5s ease-in-out 0.1s;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {background-color: #3C7;}

.mainnav a:active, .mainnav a.active {color: #3C7;}
.mainnav a:hover, .mainnav a:focus {color: #FFF; background-color: #3C7;}

.nav_gv a:link, .nav_gv a:visited {padding: 30px 0;}
.nav_gv a:active, .nav_gv a.active {color: #FFF; font-weight: bold; background-color: #3C7;}
.nav_gv a:hover, .nav_gv a:focus {background-color: #3C7 !important;}
.nav_gv .navbar-toggle {border-color: #FFF;}
.nav_gv .navbar-toggle .icon-bar {background-color: #FFF;}
.nav_gv .navbar-collapse {border-color: #FFF;}

.nav-galerie {float: none;}
.n-gal-images li {width: 16.6667%;}/*14.2857%*/
.n-gal-videos li {width: 50%;}


.link_ctt {margin-left: 12px;}


/* --Content-- */

#main {background-color: #FDFDFD;}

.visites {display: none;}

.content_title {padding: 10px 0; background-color: rgba(34, 34, 34, 0.75);}
.content_title_secondary {padding: 10px 0; color: #222; background-color: rgba(34, 34, 34, 0.2);}

.minigames {width: 100%; float: left;}


.compt li {padding: 5px 0; list-style: inside square;}

.logiciels img {width: 100%;}
.lgc {margin-bottom: 15px; padding: 0; border: none; background-color: transparent;}
.lgc:hover {background-color: transparent;}
.tooltip-inner {background-color: #222;}
.tooltip.bottom .tooltip-arrow {border-bottom-color: #222;}

.services {margin-bottom: 10px; padding-bottom: 10px;	float: left;}
.services h2 {
	margin: 0;
	padding: 5px 0;
	font-size: 14px;
	text-transform: uppercase;
	background-color: rgba(255, 255, 255, 0.2);
}

.services ul {margin-top: 10px; margin-left: 20px; float: left;}
.services li {width: 100%; padding: 3px 0; list-style: square;}

.cv-bar {padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.75);}
.cv {width: 100px; margin: 0 auto;}
.cv a {
	text-decoration: none;
	position: relative;
	left: 22%;
	float: left;
}
.cv a img {position: absolute;}
.cv img.gris:hover {opacity: 0;}
.cv p {padding-top: 75px;}


.box_logo {height: 150px; background-color: #E6E6E6; overflow: hidden;}
.box img {width: 150px; margin: 0 auto; cursor: pointer;}
.box img.gris:hover {opacity: 0;}
.box img.color {position: relative; top: -150px; opacity: 0;}
.box img.color:hover {opacity: 1;}

#kravybz, #n-go, #oser, #obotama, #parakian, #fplus, #fotolia, #actsnd, #novas, #flco, #sme, #rafi, #scpd {overflow: hidden;}
.mskd {height: 0;}
.shwd {height: auto; margin-bottom: 40px;}

.up_close {max-width: 100%; max-height: 40px; border-radius: 25px; cursor: pointer;}
.up_close:hover {background-color: #FFF;}
.responsive {max-width: 100%;}

.link_eac {
	padding: 10px 30px;
	color: #FFF;
	background-color: #555;
	float: left;
}
.link_eac:hover {background-color: #3C7;}


.gal {padding: 0; width: 960px;}
.galvid {padding: 0; width: 900px;}

.more {font-size: 14px;}
.link_more {color: #555;}
.link_more :hover {color: #3C7;}

.cell, .celvid {overflow: hidden; float: left;}

.cell a, .celvid a {
	width: 100%;
	height: 100%;
	text-decoration: none;
	float: left;
}
.cell a .overlay, .celvid a .overlay {
	width: 100%;
	height: 101%;
	position: relative;
	opacity: 0;
	float: left;
	
	-webkit-transition: all 0.4s ease-out 0.1s;
    -moz-transition: all 0.4s ease-out 0.1s;
    -o-transition: all 0.4s ease-out 0.1s;
    transition: all 0.4s ease-out 0.1s;
}
.cell a .overlay:hover, .celvid a .overlay:hover {opacity: 1;}
.obgc:hover {background-color: rgba(51, 204, 119, 0.9);}
.obgb:hover {background-color: rgba(0, 0, 0, 0.8);}

.cell img, .celvid img {width: 100%;}
.overlay p {color: #fff; font-size: 14px; text-align: center; margin-top: 2px;}
.overlay i {font-size: 14px;}

.dsc span {color: #3C7;}

.e700 {display: none;}


p.form {margin: 10px auto;}
.contact label {font-size: 14px; color: #555;}
.contact input, .contact textarea {
	width: 100%;
	height: 30px;
	padding: 2px 5px;
	font-size: 14px;
	border: 1px solid rgba(34, 34, 34, 0.25);
}
.contact textarea {height: 120px; font-family: Verdana, Geneva, sans-serif;}
.contact input[type=submit], .contact input[type=reset] {
	width: 90px; 
	height: 35px;
	color: #FFF;
	font-size: 13px;
	border: 0;
	background-color: rgba(34, 34, 34, 0.5);
}
.contact input[type=submit]:hover, .contact input[type=reset]:hover {background-color: #3C7;}
.mapC {height: 200px;border: 1px solid rgba(34, 34, 34, 0.25);}


p.cvalide {
	width: 100%;
	margin-top: 20px;
	font-size: 12px;
	text-align: center;
	float: left;
}
#mail {margin-top: 30px; text-align: center; width: 100%; float: left;}


.scrollup {position: fixed; right: 20px; bottom: 50px; z-index: 20; opacity: 0; display: none;}
.scrollup span {padding: 12px; color: rgba(51, 204, 119, 0.5); background-color: rgba(0, 0, 0, 0.5); border-radius: 2px;}
.scrollup span:hover {color: rgba(255, 255, 255, 0.8); background-color: rgba(51, 204, 119, 0.8);}


/* --Footer-- */

.copyright {height: 35px; display: flex; align-items: center;}
.rs {height: 35px;}
.rs li {
	padding: 0 5px;
	list-style: none; 
	display: inline-block;
}

.rd {margin: 0 auto 20px; width: 150px;}
.l-vo {margin: 0 auto 10px; width: 135px;}

.lnk a, .vd a, .fb a, .yt a {
	width: 35px; 
	height: 35px; 
	text-decoration: none;
	display: inline-block; 
	position: relative; 
}
.lnk img, .vd img, .fb img, .yt img {
	border: 0;
	position: absolute;
	left: 0;
	
	-webkit-transition: opacity 0.5s ease-in-out 0.1s;
    -moz-transition: opacity 0.5s ease-in-out 0.1s;
    -o-transition: opacity 0.5s ease-in-out 0.1s;
    transition: opacity 0.5s ease-in-ou 0.1s;
}
img.out:hover {opacity: 0;}
img.on {opacity: 0;}
img.on:hover {opacity: 1;}



/* --Lightbox-- */

#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.9;
  display: none;
}

#lightbox {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-family: verdana, tahoma, "lucida grande", arial, sans-serif;
  font-weight: normal;
}
#lightbox img {
  width: auto;
  height: auto;
}
#lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: #222;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}
.lb-outerContainer: after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 3px;
}

.lb-loader {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10010;
  display: block;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  cursor: pointer;
}

.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  background-image: url("data: image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  /* Trick IE into showing hover */
  display: block;
}

.lb-prev {
  left: 0;
  float: left;
}

.lb-next {
  right: 0;
  float: right;
}

.lb-prev:hover {
  background: url(../images/slideshow/prev-green.png) left 48% no-repeat;
}

.lb-next:hover {
  background: url(../images/slideshow/next-green.png) right 48% no-repeat;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -ms-border-bottom-left-radius: 4px;
  -o-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -ms-border-bottom-right-radius: 4px;
  -o-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.lb-dataContainer: after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  /*padding: 0 10px;*/
  color: #bbbbbb;
}
.lb-data .lb-details {
  /*width: 85%;*/
  float: left;
  text-align: left;
  line-height: 1.1em;
}
strong {color: #3C7; font-size: 14px; font-weight: normal; text-transform: uppercase;}

.lb-data .lb-caption {
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4em;
  color: white;
}
.lb-data .lb-number {		/* nombres d'images*/
  display: block;
  visibility: hidden;
  clear: left;
  padding-bottom: 1em;
  font-size: 0px;
}
.lb-data .lb-close {
  width: 30px;
  height: 30px;
  opacity: 0.8;
  padding-bottom: 0.7em;
  outline: none;
  background: url(../images/slideshow/close.png) right top 48% no-repeat;
  float: right;
}

.lb-data .lb-close:hover {cursor: pointer;}


/* --Media--*/

	@media screen and (max-width: 479px) {
.shwd, .lilshwd {height: auto; margin-bottom: 20px;}

.cell, .celvid {width: 90%; margin: 0 5% 5px;}
.cell a, .celvid a {width: 100%;}

.contact label {font-size: 12px;}
p.form {padding: 0 10px;}
	}

	@media screen and (max-device-width: 480px) and (orientation: landscape) {}		
	
	@media screen and (min-width : 480px) {
.cell, .celvid {width: 50%;}
	}
	
	@media screen and (max-width : 767px) {
h3 {font-size: 16px;}

.logo {padding-top: 10px; padding-bottom: 10px;}
.logo a {width: 100%; float: left;}
.logo img {margin: 0 auto;}

.navbar-default {padding: 10px 0;}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {margin: 0;}
.navbar-toggle {margin: 8px 2px; float: none;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color: #3C7;}
.navbar-nav {text-align: center; margin: 0;}
.navbar-nav > li > a {width: 100%;}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {text-align: center;}

.compt {padding: 0 10%;}

.ic {width: 150px;}
.eac_works p {text-align: center;}
.link_eac {width: 100%; text-align: center;}

.n-gal-images li, .n-gal-videos li {width: 100%;}

.xsl, .e600 {display: block;}
.mdm, .sml, .e768, .cell a .overlay, .celvid a .overlay {display: none;}
	}

	@media screen and (min-width : 768px) {	
.logo {padding-left: 0; padding-right: 0;}
.mainnav .navbar-nav {float: right;}

.cell {width: 50%; height: 375px;}
.celvid {width: 50%; height: 211px;}

.mdm, .xsl, .e600{display: none;}
.sml {display: block;}

p.form {width: 500px;}
.lbl {text-align: right; padding: 0;}
	}

	@media screen and (max-width : 969px) {	
.e700 {display: block;}
.designed_colors, .e900, .more, .link_vo, .cell .overlay, .celvid .overlay {display: none;}
.minigames img {width: 260px;}
	}

	@media screen and (min-width : 970px) {	
.navbar {margin-top: 5px;}

.cell {width: 25%; height: 242px; margin: 0;}
.cell .overlay {top: -243px;}
.cell h2 {margin-top: 70px;}

.celvid {width: 33.33%; height: 182px;}
.celvid .overlay {top: -182px}
.celvid h2 {padding-top: 30px;}

.mdm {display: block;}
.sml, .xsl, .smxs {display: none;}
	}

	@media screen and (min-width : 992px) {	
.list_logos .category {
	height: 160px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}
	
	@media screen and (min-width : 1170px) {	
.cell {height: 292px;}
.cell .overlay {top: -293px;}
.cell h2 {margin-top: 90px;}

.celvid {height: 219px;}
.celvid .overlay {top: -219px;}
.celvid h2 {padding-top: 50px;}
	}
	
/* #3C7, rgba(51, 204, 119, 1) */