@charset "utf-8";

img, object, embed, video {
  max-width: 100%;
  height:auto;

}
/* IE 6 ne prend pas en charge max-width ; la largeur par défaut est donc fixée à 100% */
.ie6 img { width:100%;}



/* Disposition mobile : 530px et moins. */
html {
  overflow:auto;
  overflow:scroll;
}
body {
    word-wrap: break-word;
}
.gridContainer {
  margin-left: auto;
  margin-right: auto;
  padding:0;
  width: 100%;
  background:#ffffff;
  box-shadow: 0.1em 0.1em 1em #4e4d4d
}

/* =================DEBUT du Header de base ==============*/
header.header-site {
  float: left;
  margin-left: 0;
  width: 100%;
}
.visually-hidden { 

    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
} 

#evitement {
  margin:0;
  padding:0;
  /* cf .visually-hidden */
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

#evitement a {
  color: #666;
  font-size:0.8em;
  opacity:0;
}
#evitement a:hover {
  color: #666;
  font-size:0.8em;
  opacity:100;
}
.discret ul {
  list-style-type: none;
  margin:0;
  padding:0;  
}
.discret li {
  display: inline;
  margin:0;
}

#cibles {
  width: 100%;
  height:auto;
  min-height:1.1em;
  margin-bottom : 0.5em;
  font-size: 0.7em;
  padding-top: 0.2em;
  padding-bottom: 0.1em;
}
#cibles span {
  display: block;
  width:auto;
  float:left;
  margin-left:1em;
}
#cibles span.cibles-a-droite {
  float: right;
  display: block;
  margin-right:1em;
}

#logo {
  clear: both;
  float: left;
  margin-left: 0;
  width: 30%;
}


#academie-la-reunion {
  clear: none;
  float: left;
  margin-left: 2%;
  display: block;
  /* alain*/
  text-align:center;
  /* fin alain */

}



/* =================DEBUT du slider de base =============== */
#slider {
display: block;
}
/*================ DEBUT colonne gauche de base ======*/
section.left-content {
  float: left;
  margin: 0;
  width: 100%;
  overflow:hidden;
}
#breadcrumb {
  display:none;
}

/* =============DEBUT de la colonne de droite de base =========== */
aside {
  clear: both;
  width: 100%;
  display: block;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  margin-top:1em;
}
/* ============= Menu droit =========== */
nav.right-menu {
  display:none;
}
/* =============DEBUT du fullwidth-content de base =========== */
#fullwidth-column {
  clear: both;
  /*float: left;*/
  margin: 0;
  width: 100%;
  height:auto;
}

/* =================DEBUT du Footer de base ==============*/
/* =================Reprise du travail ==============*/
footer {
  clear: both;
  float: left;
  margin: 0;
  width: 100%;
  display: block;
}
.footer-ligne {
  height: auto;
  padding-bottom: 0.7em;
  padding-top: 0.6em;
}
.footer-ligne-finale {
  height: auto;
  padding-left: 5%;
  padding-right: 5%;
}
.footer-ligne-finale p {
  font-size: 0.8em;
  padding-bottom:0.2em;
  padding-top:0.2em;
  margin: 0;
}
.footer-ligne td {
  font-size: 0.9em;
  margin: 0;
}
.footer-ligne td span {
   padding-right: 0.3em;
}
/*=============================================================
Eléments divers 
===============================================================*/
/*======== Liste d'actualités de base (Remontée de teasers du module News) ==============*/
span.no-media-element img {
  display:none;
}
div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
  margin-bottom: 0 !important;
}
figcaption.csc-textpic-caption {
  font-size:0.8em;
  font-weight:bold;
  padding:0.2em;
}
div.csc-textpic-intext-left .csc-textpic-imagewrap {
  margin-right:0 !important;
  margin-left:1em;
}


div.csc-textpic-intext-right .csc-textpic-imagewrap, div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
    margin: 1em;
}
/* =================DEBUT Sitemap personnalisé==============*/

.csc-sitemap {
  width:90%;
  margin-left:auto;
  margin-right:auto;
}
.csc-sitemap ul li {
  font-size:1.1em;
  font-weight:bold;
  margin-bottom: 0.5rem;
}
.csc-sitemap ul li ul li {
  margin-left:3em;
  font-size: 0.9em;
  font-weight:normal;
}
.csc-sitemap ul li ul li ul li {
  font-size: 1em;
}

.csc-sitemap ul li:before {
  font-family: FontAwesome;
   content: "\f138 ";
   display: inline-block;
   padding-right: 0.5em;
}
.csc-sitemap ul li a {
  color:#4c4c4c;
}
.csc-sitemap ul li ul li:before {
  font-family: FontAwesome;
   content: "\f0da ";
   display: inline-block;
   padding-right: 0.5em;
}
/* =================Formulaire Powermail ==============*/
/*= page Formulaire ===*/

div.tx-powermail {
width:95%;
margin-left:auto;
margin-right:auto;
}
div.tx-powermail fieldset {
  margin-top:0.5em;
  border: none !important;
    color: inherit !important;
    float: none !important;
    font-size: inherit !important;
    margin: inherit !important;
    padding: inherit !important;
    width: auto !important;
}
/*================= surcharge CSSDemo ===================*/
.tx-powermail .powermail_fieldset .powermail_field {
    /*border: none !important;*/
    color: #4vc4c4c !important;
    float: none !important;
    font-size: inherit;
    /*margin: inherit !important;
    padding: inherit !important;*/
    width: auto !important;
        padding: .7em 0em;
    display: inline-block;
   /* border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;*/
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.tx-powermail .powermail_fieldset .powermail_field.powermail_submit, .tx-powermail .powermail_fieldset .powermail_field.powermail_reset {
  background-color: #3b8211;
  border: none !important;
  color: white;
  cursor: pointer;
  font-weight: bold;
  margin:auto !important;
  padding-right : 3em !important;
  padding-left : 3em !important;
}

.tx-powermail .powermail_fieldset .powermail_radio_outer, .tx-powermail .powermail_fieldset .powermail_captcha_outer, .tx-powermail .powermail_fieldset .powermail_check_outer, .tx-powermail .powermail_fieldset .powermail_fieldwrap_text, .tx-powermail .powermail_fieldset .powermail_fieldwrap_file_inner ul:not(.parsley-errors-list) {
    background-color: white;
    border: none !important;
    float: left !important;
    list-style: none outside none;
    margin: 0;
    padding: 0.5em !important;
    width: auto !important;
}
div.tx-powermail h3 {
font-weight: lighter;
font-size:1.3em;
margin-left:0;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding: inherit !important;
}
ul.powermail_tabmenu {
border-bottom:1px dotted #4c4c4c;
padding-bottom:1em;
-webkit-padding-start: 0px !important;
}
ul.powermail_tabmenu li {
  list-style-type: none;
  margin-left:0.5em;
}
ul.powermail_tabmenu li:before {
  font-family: FontAwesome;
   content: "\f0a9 ";
   display: inline-block;
   padding-right: 0.5em;
}
div.tx-powermail legend.powermail_legend {
  font-size: 1.1em !important;
  font-weight: bold;
  padding: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background-image: linear-gradient(to bottom,#e7e7e7,#bbbbbb);
  background-image: -webkit-linear-gradient(to bottom,#e7e7e7,#bbbbbb);
  border-radius: 0.5em;
  color: inherit !important;
  float: none !important;
  white-space: normal;
  margin-top: auto !important;
  margin-right: 0 !important;
  margin-bottom: 1em !important;
  margin-left: 0 !important;
}
div.tx-powermail label.powermail_label{
  font-weight: bold;
  float:none;
}
/*=== pastille i d'information =*/
.tx-powermail .powermail_fieldset .powermail_label[title]:after {
    display: none;
}
/*-------*/
div.tx-powermail legend.powermail_radio_legend, div.tx-powermail legend.powermail_check_legend {
  font-weight: bold;
}
div.tx-powermail .powermail_label span.mandatory {
  color: #e73950;
  padding-left:0.1em;
  font-size:1.3em;
}
div.tx-powermail input, div.tx-powermail select {
  min-width:100%;
  margin-bottom:0.5em;
}
div.tx-powermail input.powermail_radio, div.tx-powermail input.powermail_checkbox {
  min-width: 0%;
  vertical-align:text-top;
  margin-bottom:0.5em;
}
div.tx-powermail input.powermail_submit {
  min-width: 0%;
  font-size:1.1em;
  font-weight:bold;
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  cursor: pointer;
  padding: 0.3em 5em 0.4em;
  border-radius:0.5em;
  margin-bottom:1em;
}
div.tx-powermail input.powermail_submit:hover, div.tx-powermail input.powermail_confirmation_submit:hover, div.tx-powermail input.powermail_confirmation_form:hover {
  color: #4c4c4c;
  border: 1px solid #e7e7e7;
  background-color: #e7e7e7;
  background-image: linear-gradient(to bottom,#e7e7e7,#bbbbbb);
  background-image: -webkit-linear-gradient(to bottom,#e7e7e7,#bbbbbb);
}

div.tx-powermail textarea {
  min-width:100%;  
  margin-bottom:0.5em;
}

div.tx-powermail a.powermail_tab_navigation_next, div.tx-powermail a.powermail_tab_navigation_previous {
  font-size: 1.3em;
  font-weight: bold;
  border-radius: 0.5em;
  padding: 0.2em;
  text-decoration: none;
  float: right;
  margin-bottom: 1em;
}
/*-- bouton suivant/précédent---------*/
div.tx-powermail a.powermail_tab_navigation_next {
  float: right;
}
div.tx-powermail a.powermail_tab_navigation_previous {
  float: left;
}
div.tx-powermail a.powermail_tab_navigation_next:hover, div.tx-powermail a.powermail_tab_navigation_previous {
  /* les couleurs de "div.tx-powermail a.powermail_tab_navigation_next" et "div.tx-powermail a.powermail_tab_navigation_previous" sont dans academie.css-*/
  color: #4c4c4c;
  background-color: #e7e7e7;
  background-image: linear-gradient(to bottom,#e7e7e7,#bbbbbb);
  background-image: -webkit-linear-gradient(to bottom,#e7e7e7,#bbbbbb);
}

/*= page Confirmation ===*/
div.powermail_confirmation {
  border: 1px dotted #4c4c4c;
  border-radius:1em;
  padding:1em;
  margin-top:1em;
}

div.powermail_confirmation h4 {
  font-size:1.1em;
  font-weight:bold;
  margin:0;
  padding:0;
}

div.powermail_confirmation dt {
  font-weight:bold;
}
div.tx-powermail input.powermail_confirmation_submit {
  font-weight:bold;
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  cursor: pointer;
  padding: 0.3em 5em 0.4em;  
  border-radius:0.5em;  
  margin-bottom:1em;
}
div.tx-powermail input.powermail_confirmation_form {
  font-weight:bold;
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  cursor: pointer;
  padding: 0.3em 5em 0.4em;
  border-radius:0.5em;  
  margin-bottom:1em;  
}
/* surchage CSS module GKH RSS */

.tx-gkhrssimport-pi1 {
  padding-left:1em;
  padding-right:1em;
  
}
.tx-gkhrssimport-pi1-rss_title {
  font-size: inherit !important;
    font-family: inherit !important;
  padding:2% !important;
    color: #ffffff !important;
    width: 98% !important;
    background-color: #4c4c4c;
}
.tx-gkhrssimport-pi1-rss_title a, .tx-gkhrssimport-pi1-rss_title a:visited {
  color :#ffffff !important;
  text-decoration:none !important;
  
}
.tx-gkhrssimport-pi1-rss_title a:before {
    font-family: FontAwesome;
    content: "\f09e ";
  font-size: 1.2rem;
    display: inline-block;
    padding-right: 0.5rem;
    color: #ffffff;
}

.tx-gkhrssimport-pi1-description {
    font-weight: normal !important;
    padding-bottom: 0px !important;
    border-bottom-width: 1px !important;
    border-bottom-color: #4c4c4c !important;
    margin-bottom: 0px !important;
}
.tx-gkhrssimport-pi1-header a:before {
    font-family: FontAwesome;
    content: "\f101 ";
  /*font-size: 1.2rem;*/
    display: inline-block;
    padding-right: 0.5rem;  
}
/* ===================================================
Disposition tablette : 531px sur 921px. Hérite des styles de : Disposition mobile
====================================================== */

@media only screen and (min-width: 531px) {
	.gridContainer {
	  width: 100%;
	  margin-right:auto;
	  margin-left:auto;
	}
	/* =================DEBUT du Header tablette de base=================*/
	#cibles {
	  font-size: 1em;
	}
	#cibles span.cibles-a-droite a:before {
	  content:"► ";
	}

	#logo {
	  width: 25%;
	  height:150px;
	}
	#academie-la-reunion {
		line-height: 5em;
		vertical-align: middle;
		height: 10em;
		position: relative;
		top: 15px;
	}

	/* =================DEBUT du slider tablette=============== */
	#slider {
	  clear: both;
	  width: 100%;
	  height: auto;
	  display: block;
	}
	/*================ DEBUT colonne gauche tablette ======*/
	section.left-content {
	  width: 65%;
	}
	#left-content_left-column, #left-content_right-column {
	  width: 49%;
	  float: left;
	  clear:none;
	  margin-right: 1%;
	}

	#breadcrumb {
		padding: 1em 0.7em;
		font-size: 0.8em;
		display: inline-block;
		background: #f5f5f5;
		border-bottom: 1px solid #ddd;
		width:100%;
	}
	/* =============DEBUT de la colonne de droite Tablette =========== */
	aside {
	  clear: right;
	  width: 32%;
	  float:right;
	  padding:0.5em;
	  margin-top:0;
	  border-bottom:none;
	  border-top:none;
	}
	/* ============= Menu droit =========== */
	nav.right-menu {
	 /* padding-left:0.5em;
	  margin-bottom: 0.5em;*/
	  padding-bottom: 0.5em;
	  display:block;
	}
	nav.right-menu ul {
	  padding: 0px;
	  margin-top: 0.3em;
	  margin-right: 1em;
	  margin-bottom: 0.3em;
	  margin-left: 0.5em;
	  list-style-position:outside;
	}
	nav.right-menu ul li {
	  list-style-type: none;
	  margin-top: 0.3em;
	}

	nav.right-menu ul li ul li {
	  list-style-type: none;
	  margin-left: 1em;
	  margin-top: 0em;
	}
	nav.right-menu ul li ul li ul li {
	  list-style-type: none;
	}
	/* =================DEBUT du Footer tablette =================*/
	.footer-ligne-finale p {
	  font-size: 0.8em;
	  padding-bottom:0.2em;
	  padding-top:0.2em;
	  color: #fff;
	  margin: 0;
	  font-weight: normal;
	  text-align: center;
	}
	.footer-ligne-finale p a {
	  color: #fff;
	  display:block;
	  float:right;
	}
}

/* Disposition bureau : 922px à max. 960px.  Hérite des styles de : Disposition mobile et disposition tablette */

@media only screen and (min-width: 922px) {

.gridContainer {
  max-width: 960px;
  margin: auto;
}
/* =================DEBUT du Header de bureau ==============*/

#academie-la-reunion {
}

/* =================DEBUT du Footer de bureau ==============*/
.footer-ligne-finale span.texte-a-droite {
  float:right;
  padding:0;
}
/* =================Formulaire Powermail ==============*/
/*= page Formulaire ===*/
div.tx-powermail {
width:90%;
}


div.tx-powermail .powermail_fieldwrap_input{
  margin-bottom:15px;
  }

div.tx-powermail label.powermail_label{
  min-width: 20%;
  width:20%;
  float:left;
  text-align:right;
  margin-right: 10px;
}

.tx-powermail .powermail_fieldset .powermail_label[title]:after {
    background-color: #aaa;
    border-radius: 100px;
    color: white;
    content: "i";
    display: inline-block;
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 0 0 0 2px;
    text-align: center;
    width: 16px;
}
div.tx-powermail legend.powermail_radio_legend, div.tx-powermail legend.powermail_check_legend {
  min-width:20%;
}

div.tx-powermail input, div.tx-powermail select {
  min-width:400px;
}

div.tx-powermail textarea {
  min-width:400px;  
}
/*= page Confirmation ===*/
div.powermail_confirmation {
  border: 1px dotted #4c4c4c;
  border-radius:1em;
  padding:1em;
  margin-top:1em;
}

div.powermail_confirmation h4 {
  font-size:1.1em;
  font-weight:bold;
  margin:0;
  padding:0;
}

div.powermail_confirmation dt {
  font-weight:bold;
}
div.tx-powermail input.powermail_confirmation_submit {
  font-weight:bold;
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  cursor: pointer;
  padding: 0.3em 5em 0.4em;  
  border-radius:0.5em;  
  margin-bottom:1em;
}
div.tx-powermail input.powermail_confirmation_form {
  font-weight:bold;
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  cursor: pointer;
  padding: 0.3em 5em 0.4em;
  border-radius:0.5em;  
  margin-bottom:1em;  
}

.powermail_message_error, parsley-custom-error-message{
	color: #ff4e4e;
	font-size: 1.2em;
}


}