@charset "utf-8";
/*Class*/

/* HEADER > MENU */
#interne-menu{float:left; padding: 0 5%; width: 90%; text-align: center;  background: #20335d; position:fixed; bottom:0; z-index:998;-moz-box-shadow: 0px -2px 5px 0px rgba(255,255,255,0.25);
-webkit-box-shadow: 0px -2px 5px 0px rgba(255,255,255,0.25);
-o-box-shadow: 0px -2px 5px 0px rgba(255,255,255,0.25);
box-shadow: 0px -2px 5px 0px rgba(255,255,255,0.25);}
#interne-menu > li {display: inline-table; position: relative; vertical-align: top;}
#interne-menu > li > a{text-transform:uppercase; color: #ffffff; padding: 0.5em 0.5em 0.6em;display: inline-block;  font-size: 1.5em;}
#interne-menu > li > a:hover{color:#9ba8c4}

header #produit-menu{float:left; padding: 0 1%;}
header #produit-menu > li {display: inline-table; position: relative; vertical-align: top;}
header #produit-menu > li#minilogo{display:none}
header #produit-menu > li > a{text-transform:uppercase; color: #20335d; padding: 14px 0.30em 0.5em;display: inline-block;}
header #produit-menu > li#minilogo > a{padding: 0.4em 0.37em 0.3em;}
header #produit-menu > li > a:hover, header #produit-menu .sub-menu > li > a:hover{color:#c20e1a}
header #produit-menu > li > a:hover.mobipass{color:#796dab}
header #produit-menu > li > a:hover.cryptosmart, header #produit-menu > li.current-menu-item > a.cryptosmart{color:#5caeb1}
header #produit-menu > li > a:hover.cryptobox{color:#69ace2}

header #main-menu{float:right; padding: 0;}
header #main-menu > li {display: inline;}
header #main-menu > li:hover{border-left: none; border-right: none; z-index:2; }
header #main-menu > li.parent > a {display: inline-block;}
header #main-menu > li.parent > a > img.logo {}
header #main-menu > li.parent > span {padding-left: 1em;}
header #main-menu > li > a {color: #20335d; padding: 14px 0.37em 0.5em;text-decoration:none;text-transform:uppercase; display: block;}
nav > a{/*padding: 0.3em 3%;*/padding: 15px 3% 0 3%; float:left}
/*.scroll #menu-toggle{       padding: 24px 3% 0 3%;}*/
header #recherche{opacity: 0;    padding: 10px 12px 0 0;; float:right; cursor:pointer}
.scroll header #recherche{opacity: 1; }
header #main-menu > li > span {color: #20335d; padding: 0.53em 1em;text-decoration:none;font-size:1.2em;}
header #main-menu > li.current-menu-item > a {color:#c20e1a; display: block; z-index:9999; }
header #main-menu > li.current-menu-item > span {color: #66737a; z-index:9999}
header #main-menu > li:hover > a{color:#c20e1a}

/* HEADER > MENU > DROPDOWN */
header #main-menu li {position: relative; display: inline-table;}
header #main-menu ul.sub-menu{display: none; left: 0; position: absolute; width: 200%; z-index: 9998; background: #ffffff; margin-left:-50%; border-radius:0 0 0.2em 0.2em; -moz-box-shadow: 0px 2px 5px 0px rgba(32,51,93,0.25);
-webkit-box-shadow: 0px 2px 5px 0px rgba(32,51,93,0.25);
-o-box-shadow: 0px 2px 5px 0px rgba(32,51,93,0.25);
box-shadow: 0px 2px 5px 0px rgba(32,51,93,0.25);}
header #main-menu ul.sub-menu ul.sub-menu {margin-top: -0.08em; padding-top: 0; left: 100%; top: 0; width: 100%;}
header #main-menu ul.sub-menu > li {width:100%}
header #main-menu ul.sub-menu > li > a, aside #main-menu ul.sub-sub-menu > li > a {
	color: #20335d;
	display: block;
	font-size: 0.7em;
	line-height: 1em;
	padding: 0.5em 0;
	-webkit-transition: all .2s ease-in;
	-khtml-transition: all .2s ease-in;
	-moz-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	-ms-transition: all .2s ease-in;
	transition: all .2s ease-in;
	text-align:center;
	border-top: solid 1px #a6a6a6;
	/*background:url(../images/menu-fleche.png) no-repeat 8% 1.65em;*/
}
header #main-menu ul.sub-menu > li > span {
	background: #f7f7f9;
	color: #66737c;
	display: block;
	font-size: 0.75em;
	line-height: 1em;
	padding: 0.625em 1.6em;
	-webkit-transition: all .2s ease-in;
	-khtml-transition: all .2s ease-in;
	-moz-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	-ms-transition: all .2s ease-in;
	transition: all .2s ease-in;
}
header #main-menu ul.sub-menu > li > a:hover{color:#c20e1a}

header #main-menu ul.sub-menu > li > a.parent {
	/*background-image: url(../images/arrow.png);*/
	background-size: 5px 9px; background-repeat: no-repeat; background-position: 95% center;}
header #main-menu ul.sub-menu > li > span.parent {
	/*background-image: url(../images/arrow.png);*/
	background-size: 5px 9px; background-repeat: no-repeat; background-position: 95% center;}

	header #main-menu li:hover > ul.sub-menu, #main-menu ul.sub-menu li:hover > ul.sub-sub-menu {display: block;}
	header #menu-toggle {display: none;}

#navigation li {
    font-family: 'Source Sans Pro';
    font-weight: 300;
}
#navigation a {
    font-size: 17.5px;
}
.sub-menu li {
    background: white;
    border-top: solid 1px #a6a6a6;
    padding: 0px 10px;
    white-space: nowrap;
}
.sub-menu li a{
	display: block;
    font-size: 16px !important;
    line-height: 1em;
    padding: 0.5em 30px;
    text-align: left;
    font-weight: 400;
}




/*------------------------------------------RESPONSIVE-----------------------------------RESPONSIVE-----------------------------------*/
@media print, screen and (max-width:1120px){
	header #menu-toggle {display: block; float:right;}
	header #main-menu {display: none; width:98%; padding:1%}
	header #main-menu li {display: initial; margin: 0; padding: 0;}
	header #main-menu > li{ width: 100%; float: none; border:none; margin:0; padding:0}
	header #main-menu > .submenu li{ background-color: #eee;margin:0; padding:0}
	header #main-menu > li:hover > a{/* margin:0*/}
	header #main-menu > li:hover > span{ margin:0}
	/*header #main-menu > li.parent > a{ padding: 0.2em 0.5em;}*/
	header #main-menu > li > a {display: block; padding: 0.4em 0.5em; text-align:center; border-radius: 0.2em; border:solid 1px #e6e8ef; background: #f7f8fa;}
	header #main-menu > li > a:hover{ background:#ffffff}
	header #main-menu > li.parent > a,header #main-menu > li > a{display:block; margin:1%}
	header #main-menu > li > span {display: block; padding: 0.2em 0.5em;}
	/*header #main-menu > li > a:hover {border-left:none; border-right:none;}
	header #main-menu > li > span:hover {border-left:none; border-right:none;}*/
	header #main-menu > li:hover{ margin: 0; }
	header #main-menu > li.parent {background: none !important; width: 33.33%; float: left; padding: 0;}
	header #main-menu > li:last-child.parent{border-right: none;}
	header #main-menu > li:last-child:hover.parent{border-right: none;}
	header #main-menu ul.sub-menu { position: static; padding: 0; width: inherit; width: 98%; margin:0 1%; -moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;}
	header #main-menu .submenu ul.sub-menu{margin-left: 1em;}
	header #main-menu ul.sub-menu > li > a{border-radius: 0.2em; border:solid 1px #e6e8ef; padding: 0.8em 0.5em; margin: 2.05% 0;}
	header #main-menu ul.sub-menu > li > a:hover{}
	header #main-menu .sub-menu ul.sub-menu > li > a{padding-left: 2.4em;background-color: #dddddd;}
	header #main-menu .sub-menu .sub-menu ul.sub-menu > li > a{padding-left: 3.3em;background-color: #cccccc;}
	header #main-menu .sub-menu ul.sub-menu > li > a:hover {background-color: #2a2a2a; }
	header #main-menu .sub-menu .sub-menu ul.sub-menu > li > a:hover {background-color: #2a2a2a; }
	header #main-menu > li:last-child.parent > ul.sub-menu {margin-left:0;}
	}

@media all and (max-width: 768px) {
	#interne-menu{position:relative;padding: 0;
  width: 100%;}
	}

@media all and (max-width: 640px) {
	/*header #menu-toggle {clear: both;}*/
	header #main-menu > li.parent {width: 100%;}
	header #produit-menu{width: 98%; display: none;}
	header #produit-menu > li{display: block; width: 33.33%; float: left;}
	header #produit-menu > li > a{display: block; text-align: center; border-radius: 0.2em; border:solid 1px #e6e8ef; width:92%; margin:2%; padding:0.4em 2%; background: #f7f8fa;}
	header #produit-menu > li > a:hover{background:#ffffff}

}

@media print, screen and (max-width:640px){
	section #main-menu, section nav{width:96%; font-size:110%; padding: 0 2%}
	header #main-menu-top ul.sub-menu{right:0; left:auto}
}

@media all and (max-width: 480px) {
	header #produit-menu > li > a{font-size: 0.7em;}
}

@media all and (max-width: 360px) {
	header #produit-menu > li > a{font-size: 0.6em;}
}