@charset "utf-8";
/* CSS Document */
html {
	height:100%;
}
body {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-family: 'Roboto', sans-serif;
	font-size:15px;
	font-weight:400;
	padding:0px;
	margin:0px;
	height:100%;
	color:#000;
}

header,
article,
footer,
nav {
	display:block;
}
.logo  {
	display:inline-block;
}
.logo a {
	display:block;
	height:29px;
	padding:13px 6px 0px 42px;
	font-size:12px;
	background:url(../images/logo_mythologie.png) no-repeat left top;
}
a.logo {
	height:32px;
	width:12px;
	background:url(../images/logo_mythologie.png) no-repeat center top;
}
.navMenu {
	display:inline-block;
	font-size:14px;
}
.navMenu2 {
	display:inline-block;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.site2 .main {
	max-width: 900px;
	margin:35px auto;
}
a {
	text-decoration:none;
	color:#069;
	transition:0.2s;
}
a img {
	border:0px;
}

.bleu a, .c_bleu {
	color:#0085B2;
}
.marine a, .c_marine {
	color:#3366CC;
}
.violet a, .c_violet {
	color:#664AE8;
}
.pourpre a, .c_pourpre {
	color:#8748BB;
}
.rose a, .c_rose {
	color:#E14088;
}
.rouge a, .c_rouge {
	color:#FF3300;
}
.orange a, .c_orange {
	color: #F60;
}
.marron a, .c_marron {
	color:#AA5C3C;
}
.beige a, .c_beige {
	color:#C17B3C;
}
.jaune a, .c_jaune {
	color:#CA8902;
}
.anis a, .c_anis {
	color:#809634;
}
.vert a, .c_vert {
	color:#189A4D;
}
.cyan a, .c_cyan {
	color:#159D9D;
}
.noir a, .c_noir {
	color:#000;
}
.red {
	color:#C33;
}

h1, h2, h3, h4 {
	margin:30px 0px;
	padding:0px;
}
h1 {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:200;
	font-size:40px;
	text-align:center;
	color:#FFF;
	padding:100px 0px 20px 0px;
	margin:0px;
}
h1 span {
	font-size:60%;
}
h2 {
	font-size:1.4em;
}
h3 {
	font-size:1.2em;
}
.clear {
	clear:both;
}

.diaporama {
	margin:0px;
	padding:0px;
}
.diaporama li {
	list-style-type:none;
	margin:0px;
	padding:0px;
} 
.persosB:after {
	display:block;
	content:'.';
	visibility:hidden;
	clear:both;
}

.main {
	width:1250px;
	min-height:500px;
	margin:auto;
}
.dieux-olympiens .main {
	min-height:600px;
}
.hauteur{
	background-repeat: no-repeat ;
	background-size:100% auto;
}
body {
	background:#688AB0 url(../images/fd.jpg) repeat-x left top;
	background-attachment:fixed;
}
body.home {
	background-image: url(../images/fd_home.jpg);
	background-color: #5B7896;
	background-attachment:scroll;
}
body.perso.perso {
	background:#FFF;
}
body.perso.mythes-epopees.noir,
body.doc.doc_images,
body.doc.doc_texte  {
	background:#192230;
}
.rub.dieux-olympiens .hauteur {
    background-image: url("../images/dieuxO_fd.png");
    background-position: center 380px;
}
body.bleu {
	background-image: url(../images/fd_bleu.jpg);
	background-color:#80C1E1;
}
body.violet {
	background-image: url(../images/fd_violet.jpg);
	background-color:#8F92D3;
}
body.rouge {
	background-image: url(../images/fd_rouge.jpg);
	background-color:#C96869;
}
body.marron {
	background-image:url(../images/fd_marron.jpg);
	background-color:#BD815F;
}
body.vert {
	background-image: url(../images/fd_vert.jpg);
	background-color:#519468;
}
body.noir {
	background:#000;
}
.navG,
.navD {
	display:table-cell;
	width:20%;
}
.navG {
	background: url("../images/bandeauG.png") no-repeat right bottom;
}
.navD {
	background: url("../images/bandeauD.png") no-repeat left bottom;
}
#google_translate_element {
	position:fixed;
	right:0px;
	top:0px;
	z-index:300;
	width: 30px;
}
#google_translate_element::before {
	display: block;
	content:"";
	background: url("../images/en.png") no-repeat center;
	background-size: 100% auto;
	width:20px;
	height:20px;
	position: absolute;
	left:-22px;
	top:6px;
	color:#FFF;
}
nav {
	display:table-cell;
	vertical-align:middle;
	width:60%;
	background-color:#1B232E;
}
.hauteur nav a {
	color:#FFF;
}
header {
	position:fixed;
	height:57px;
	width:100%;
	z-index:200;
}
header .int {
	display:table;
	height:57px;
	width:100%;
	text-align:center;
}
body .b_bleu {
	background-color:#20A1CB;
}
body .b_marine {
	background-color:#3366CC;
}
body .b_violet {
	background-color:#664AE8;
}
body .b_pourpre {
	background-color:#8748BB;
}
body .b_rose {
	background-color:#E14088;
}

body .b_rouge {
	background-color:#FF3300;
}
body .b_orange {
	background-color:#F60;
}
body .b_marron {
	background-color:#AA5C3C;
}
body .b_beige {
	background-color:#C17B3C;
}
body .b_jaune {
	background-color:#CA8902;
}
body .b_anis {
	background-color:#809634;
}
body .b_vert {
	background-color:#189A4D;
}
body .b_cyan {
	background-color:#159D9D;
}
body .b_noir {
	background-color:#999;
}
/*.vaguesG, .vaguesD {
	background: url(../images/vaguesG.png) repeat-x right bottom;
	display:table-cell;
}
.vaguesD {
	background: url(../images/vaguesD.png) repeat-x left bottom;
} */
.intro {
	font-family: 'Source Sans Pro', sans-serif;
	width:51%;
	color:#FFF;	
	float:left;
}
.intro p {
	line-height:1.4em;
	font-style:italic;
	text-align:justify;
}
.intro a.lien {
	color:#FFF;
}
.contenu .main {
	padding:19px 28px;
}
.navMenu a {
	display:inline-block;
	padding:2px 16px;
}
.home .logo a,
nav a:hover, .menu_bas a:hover, nav a.on {
	color:#20A1CB;
}
.marine nav a:hover, .marine .menu_bas a:hover, .marine nav a.on {
	color:#3366CC;
}
.violet nav a:hover, .violet .menu_bas a:hover, .violet nav a.on {
	color:#664AE8;
}
.pourpre nav a:hover, .pourpre .menu_bas a:hover, .pourpre nav a.on {
	color:#8748BB;
}
.rose nav a:hover, .rose .menu_bas a:hover, .rose nav a.on {
	color:#E14088;
}
.rouge nav a:hover, .rouge .menu_bas a:hover, .rouge nav a.on {
	color:#FF3300;
}
.orange nav a:hover, .orange .menu_bas a:hover, .orange nav a.on {
	color: #F60;
}
.marron nav a:hover, .marron .menu_bas a:hover, .marron nav a.on {
	color:#AA5C3C;
}
.beige nav a:hover, .beige .menu_bas a:hover, .beige nav a.on {
	color:#C17B3C;
}
.jaune nav a:hover, .jaune .menu_bas a:hover, .jaune nav a.on {
	color:#CA8902;
}
.anis nav a:hover, .anis .menu_bas a:hover, .anis nav a.on {
	color:#809634;
}
.vert nav a:hover, .vert .menu_bas a:hover, .vert nav a.on {
	color:#189A4D;
}
.cyan nav a:hover, .cyan .menu_bas a:hover, .cyan nav a.on {
	color:#159D9D;
}
.noir nav a:hover, .noir .menu_bas a:hover, .noir nav a.on {
	color:#999;
}
nav a span {
	color:#4C5460;
}
.navMenu2 .bRoll {
	margin:0px;
}
.navMenu2 .cartes span,
.navMenu2 a {
	color:#FFF;
	display:inline-block;
	padding:3px 10px;
	font-size:13px;
	position: relative;
}
.navMenu2 a.lexique {
	background:url(../images/ic_lexique.png) no-repeat left 7px;
	padding-left:18px;
}
.navMenu2 .cartes span {
	background:url(../images/ic_cartes.png) no-repeat left 7px;
	padding-left:18px;
}
a.lien {
	display:block;
	text-decoration:underline;
	font-size:1.2em;
	color:#000;	
}
.cartes .zone {
	position: absolute;
	background:#353E4D;
	padding:10px 18px;
	top:20px;
	width:170px;
}
.cartes .zone a {
	display: block;
	padding:8px 0px;
	text-align: left;
}
a.lien:hover {
	font-size:1.3em;
}
footer  {
	font-size:12px;
	text-align: center;
	padding:25px 0px;
}
footer a  {
	color:rgba(255,255,255,0.6) !important;
	display:inline-block;
	padding:5px 15px;
}
.perso.perso footer a {
	color:rgba(0,50,90,0.6) !important;
}
.perso.perso footer a:hover {
	color:#000 !important;
}
.doc.perso footer a,
.perso.mythes-epopees.noir footer a {
	color:rgba(255,255,255,0.8) !important;
}
.doc.perso footer a:hover,
.perso.mythes-epopees.noir footer a:hover,
footer a:hover  {
	color:#FFF !important;
}
.lire {
	display:block;
	margin:4px 0px;
	cursor:pointer;
	text-decoration:underline;
}

.submit {
	background:#22A1CB;
	border:0px;
	padding:5px 10px;
	color:#FFF !important;
	font-weight:bold;
	display:inline-block;
	margin:4px 5px 4px 0px;
	border-radius:3px;
	cursor:pointer;
	transition:0.2s;
	text-align:center;
	font-size:1em;
}
.submit:hover, .logo .submit {
	background:#1B232E;
}
input:not([type="submit"]),
textarea,
select {
	font-family: 'Roboto', sans-serif;
	width:96%;
	background-color:#C0D0DF;
	border:0px;
	padding:13px 2%;
	margin:10px 0px;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; /* 5 */
}
input:not([type="submit"]):hover,
textarea:hover,
select:hover {
	background-color:#BBD3DF;
}
input:not([type="submit"]):focus,
textarea:focus,
select:focus {
	background-color:#A0D0DF;
}
.contact_form {
	max-width:900px;
	margin:auto;
}
.contact_form input:not([type="submit"]),
.contact_form textarea {
	display:block;
	font-size:1.3em;
}
.pt {
	font-size:50%;
}
.footer .logo {
	display: none;
}
.home .footer .logo {
	display:block;
}
footer .liens_sites  {
	padding-top:13px;
}
footer .liens_sites a {
	font-size:11px;
}
.retour {
	float:right;
}
.page .main {
	background-color:#FFFFFF;
	width:90%;
	padding:20px 5%;
}
.close {
	background:#ccc;
	width:12px;
	height:12px;
	float:right;
}
.pop {
	background: #FFF;
	padding:2px 15px;
	position: absolute;
	width: 250px;
	top:40px;
	left:-70px;
}
.error {
	color:red;
}