/*__________________________________________________________
|                                                           |
|                     GENERAL STYLES                        |
|                                                           |
|___________________________________________________________*/

.faculte {margin : auto;  width : 80%;}
/*.fac {background-color : #DFEFF5 ;  width:250px; height:150px; margin-right:20px;  margin-bottom:20px; padding : 10px 5px 5px 5px; text-align : center;} 

.facg1 {margin : 0 auto; display : flex;}
.facg2 {margin : 0 auto;   display : flex;}
.facg3 {margin : 0 auto;   display : flex;}
*/

table.facult, table.facult tr td {border : 2px solid white;}
table.facult tr td {width:250px;}

.fac {background-color : #DFEFF5 ;  width:50%; height:20%; margin-right:2%;  margin-bottom:2%; padding : 10px 5px 5px 5px; text-align : center;} 

.facg1 { display : flex;}
.facg2 { display : flex;}
.facg3 { display : flex;}

a.titre {font-size : 18px;}

#entete {width: 100%;    height:300px;  margin : 0 auto; }
.rouge {color:red; font-weight:bold;}  

table.domaine {  width:98%;}
table.domaine td {line-height:1.6em; border : #fff 1px solid; text-align:center; font-weight:bold; font-size:18px; font-family: Calibri; padding:5px 5px 5px 5px;}
table.domaine th {border : #fff 1px solid; text-align:center; font-weight:bold; font-size:18px; font-family: Calibri; padding:5px 5px 5px 5px; color:white;}
.rectangle {
	width:220px;
	height:150px;
	background:#DFEFF5;

}

.rectangleM{
        padding-top:10px;
	width:70%; font-family: Calibri;	
        font-size:40px; color:white; font-weight:bold; text-align:center;  margin : 0 auto;  margin-bottom:30px;

}


.hexagon {
    width: 200px;
    height: 110px;
    position: relative;
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    left: 44px;
    width: 114px;
    height: 114px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
    top: -58px;
}
.hexagon:after {
    top: 54px;
}
.hexagon, .hexagon:before, .hexagon:after {
    background: red;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.hexagon span {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 110px;
    background:red;
    z-index: 1;
}
/*************************************************************************/

.hexagon1 {
    width: 200px;
    height: 110px;
    position: relative;
}
.hexagon1:before, .hexagon1:after {
    content: "";
    position: absolute;
    left: 44px;
    width: 114px;
    height: 114px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon1:before {
    top: -58px;
}
.hexagon1:after {
    top: 54px;
}
.hexagon1, .hexagon1:before, .hexagon1:after {
    background: #4472C4;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.hexagon1 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 110px;
    background:#4472C4;
    z-index: 1;
}
/****************************************************************************/
.hexagon2 {
    width: 200px;
    height: 110px;
    position: relative;
}
.hexagon2:before, .hexagon2:after {
    content: "";
    position: absolute;
    left: 44px;
    width: 114px;
    height: 114px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon2:before {
    top: -58px;
}
.hexagon2:after {
    top: 54px;
}
.hexagon2, .hexagon2:before, .hexagon2:after {
    background: red;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.hexagon2 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 110px;
    background:red;
    z-index: 1;
}
/**********************************************************************************/
.hexagon3 {
    width: 200px;
    height: 110px;
    position: relative;
}
.hexagon3:before, .hexagon3:after {
    content: "";
    position: absolute;
    left: 44px;
    width: 114px;
    height: 114px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon3:before {
    top: -58px;
}
.hexagon3:after {
    top: 54px;
}
.hexagon3, .hexagon3:before, .hexagon3:after {
    background: #7030A0;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.hexagon3 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 110px;
    background:#7030A0;
    z-index: 1;
}

/**********************************************************************************/
.hexagon4 {
    width: 200px;
    height: 110px;
    position: relative;
}
.hexagon4:before, .hexagon4:after {
    content: "";
    position: absolute;
    left: 44px;
    width: 114px;
    height: 114px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon4:before {
    top: -58px;
}
.hexagon4:after {
    top: 54px;
}
.hexagon4, .hexagon4:before, .hexagon4:after {
    background:  #88B74B;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.hexagon4 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 110px;
    background: #88B74B;
    z-index: 1;
}
/**********************************************************************************/
.hexagon5 {
    width: 200px;
    height: 110px;
    position: relative;
}
.hexagon5:before, .hexagon5:after {
    content: "";
    position: absolute;
    left: 44px;
    width: 114px;
    height: 114px;
    -moz-transform: rotate(145deg) skew(22.5deg);
Portes ouvertes, en mode virtuel, sur les établissements d'enseignement supérieur	Du 15 au 25 octobre 2020
Période 1: du 24 octobre au 05 novembre 2020
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon5:before {
    top: -58px;
}
.hexagon5:after {
    top: 54px;
}
.hexagon5, .hexagon5:before, .hexagon5:after {
    background:  #F8A125;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.hexagon5 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 110px;
    background: #F8A125;
    z-index: 1;
}


a .titre-fac {font-size : 16px; text-align:center;}

.logo {width: 25%; float:right; text-align:center;}

.title {width: 75%; float:left; text-align:center;}

h1.titre {color : rgb(16, 95, 127); font-size:22px; text-align:center; font-weight : bold;}
h2.soustitre {/*color : #4285f4;*/ color : #F8A125; font-size:18px;  font-weight : bold; margin-bottom:15px;  }

 span a h1 {color:white; font-weight : bold; text-align : center; font-size:16px;}

 span a:hover {
    color:white;
    background: transparent; 
}

#chemin {margin : 0 auto; width: 100%; font-size : 15px; background-color:#F7F9F9;} 

#porte
{
margin : 0 auto;
width: 80%;
background-color: #FDFFFF color: black; /*box-shadow: 5px 5px 5px 5px #aaa;*/
position: relative; height : auto; font-size : 14px; margin-top:5px; margin-bottom:20px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

#contenu
{
margin : 0 auto;
min-height:400px;
width: 100%;
background-color: #FDFFFF 
color: black; 
position: relative; 
height : auto; 
padding-right : 10px; 
padding: 10px 10px 30px 10px;
}
table.forme {border: #99a7b1 1px solid; width:90%;}
table.forme th {font-weight:bold; background :#DFEFF5; }
table.forme td {padding: 8px 5px 8px 5px;}
table.fac {width : 90%;}
table.fac td {padding-right : 10px; width : 25%;
                text-align:center;             
                                          

 
                 }


table.calendrier td {padding : 10px 5px 10px 5px; border:#99a7b1 1px solid; }
td.periode {background-color:#CADDE8; font-weight:bold; text-align : center;}
td.clair {background-color:#F7F9F9; }
table.formation  {
                      border: #99a7b1 1px solid;
                      width:90%;
                      font-size:0.9em;
                      margin-top:15px;
                      

 
                 }

table.formation tr.first td   {    text-align:center;
                                   background-color : #CADDE8;
                               }

table.formation tr.unite td   {    
                                   background-color : #CADDE8;
                               }
table.formation tr {
                      background-color:#CADDE8;

                    }
table.formation tr td {padding:10px 10px 10px 10px; border: #99a7b1 1px solid; font-weight : bold;}

.section61 {background-color: #FFEEFF; width: 50%; float:right; height:183px;  }
.forum {width: 50%; float:right; text-align:center; height:183px;}
#section1 {
            font-family: "Open Sans";
            
            width: 100%;
            height : auto; position: relative;
            border-bottom:1px dashed rgb(16, 95, 127);
            padding: 0px 10px 20px 10px;  display: flex; 
}


.section11 { width: 50%; float:left; height:auto; position: relative; padding-top:45px;}
.section12 { width: 50%; float:right; height:auto; position: relative; }	

#section2 {
    height:auto; position: relative;
     display: flex; 
    font-family: "Open Sans";
    
    
    width: 100%;  border-bottom:1px dashed rgb(16, 95, 127);
   padding: 10px 10px 20px 10px;
       
}

.section21 { width: 40%; float:right; height:auto; position: relative;}
.section22 { width: 60%; float:left; height:auto; position: relative; padding: 10px 10px 0px 10px;}		

#section3 {    
    
    font-family: "Open Sans";
    height : 550px;
    
    width: 100%;
      border-bottom:1px dashed rgb(16, 95, 127);
padding: 10px 10px 20px 10px;
    }	
#section10 {    
   
    font-family: "Open Sans";
    width: 100%;
    border-bottom:1px dashed rgb(16, 95, 127);
    padding: 10px 10px 30px 10px;
    }
#sectionlien {
    text-align : center;
    font-family: "Open Sans";
    width: 100%;
    border-bottom:1px dashed rgb(16, 95, 127);
    padding: 0px 10px 30px 10px;
    }   

#section4 {    
   
    font-family: "Open Sans";
    padding: 10px 10px 40px 10px;   
    width: 100%;
      border-bottom:1px dashed rgb(16, 95, 127);
    }
#section5 {
   
   
    font-family: "Open Sans";
    /*text-align:center;*/
    width: 100%;
    border-bottom:1px dashed rgb(16, 95, 127);
    padding: 10px 10px 20px 10px;
    }
#section6 {
   
    
    font-family: "Open Sans";
    padding: 10px 10px 0px 10px;
    width: 100%;
      border-bottom:1px dashed rgb(16, 95, 127);
    }
#section7 {
   
    
    font-family: "Open Sans";
    text-align:center;
    padding: 10px 10px 30px 10px;
    width: 100%;
      border-bottom:1px dashed rgb(16, 95, 127);
    }
#section8 {
    border-top:2px solid #ccc;
    padding: 10px 10px 20px 10px;
    font-family: "Open Sans";
    text-align:center;
    background-color:#F7F9F9;
    width: 100%;
      
    
    }
table.cantact  { width:100%;}
table.cantact td  {text-align : center;}
#section11 {
   padding: 10px 10px 20px 10px;
    /*background-color: #FAEDCA;*/
    font-family: "Open Sans";
    /*text-align:center;*/
   
    width: 100%;
    border-bottom:1px dashed rgb(16, 95, 127);
    }
#section12 {
    padding: 10px 10px 30px 10px;
    height: 450px;
    border-bottom:1px dashed rgb(16, 95, 127);
    }
#section13 {
    padding: 10px 10px 20px 10px;
    font-family: "Open Sans";
    width: 100%;
    }

.section122 { width:40%; float:right; height:auto; position: relative; padding: 70px 20px 90px 10px; }

.section121 { width: 60%; float:left; height:auto; position: relative; padding: 0px 10px 0px 10px; }

#section9 {
    padding: 10px 10px 20px 10px;
    /*background-color: #FAEDCA;*/
    font-family: "Open Sans";
    /*text-align:center;*/
    width: 100%;
    border-bottom:1px dashed rgb(16, 95, 127);
     }

table
{
margin : 0 auto;
}
/**** font***/

  

@media (max-width: 670px) {
    .btn-primary-style {
        margin-top: 20px !important;
        margin-right: 25px !important;
    }
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
  #hexGrid{
    padding-bottom: 4.4%;
     
  }
  .hex {
    width: 20%; /* = 100 / 5 */
  }
  .hex:nth-child(9n+6){ /* first hexagon of even rows */
    margin-left:10%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
  #hexGrid{
    padding-bottom: 5.5%;
    
  }
  .hex {
    width: 25%; /* = 100 / 4 */
  }
  .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
  #hexGrid{
    padding-bottom: 7.4%;
    
  }
  .hex {
    width: 33.333%; /* = 100 / 3 */
  }
  .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 600px) { /* <- 2-1  hexagons per row */
  #hexGrid{
    padding-bottom: 11.2%;
     margin: 0;
  }
  .hex {
    width: 50%; /* = 100 / 3 */
  }
  
  .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
    
}

#fullpage{
       
    /*width: 98%;/**modifier la largeur*/
    /* background: url('../images/sky.jpg') fixed; */
    background:#CCC ;
    -webkit-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 800px) {
    .mySidenav a {
    	display:none;
    }
}

@media screen and (min-width: 800px) {
.mySidenav a {
    position: absolute;
    right: 10px;
    transition: 0.4s;
    padding: 15px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    animation-name: example;
    animation-duration: 1s;
    animation-direction: normal;
    z-index: 1000;
    text-transform:uppercase;
}}

@keyframes example {
    0%   {right:-100px;}
    100%  {right:0;}
}

.mySidenav a:hover {
    right: 30px;
}

.inscription {
    width: 250px;
    top: 350px;
    background-color: #4CAF50;
    text-align:center;
}

.evenements {
    width: 200px;
    top: 420px;
    background-color: #2196F3;
    text-align:center;
}

.contact {
    width: 150px;
    top: 490px;
    background-color: #f44336;
    text-align:center;
}


@font-face {
    font-family: "MankSans";
    src: url("MankSans/MankSans.ttf") format("truetype");
}

.roundedImageleft{
    display:inline;
    float: right;
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50%;
    border-radius:50%;
    border-style:solid;
    border-width: 10px;
    width:260px;
    height:260px;
    margin-top:-20px;
    /* vertical-align: middle; */
}

.roundedImageright{
    display:inline;
    float: left;
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50%;
    border-radius:50%;
    border-style:solid;
    border-width: 10px;
    width:260px;
    height:260px;
    margin-top:-20px;
    /* vertical-align: middle; */
}

.AvisIdentif {
    float: left;
    display:inline;
    float: left;
    height: 220px;
    margin: 20px;
    margin-left: 270px;
    width:80%;
    /*margin-left:10%;*/
    vertical-align: middle;
}

.identif {
   font-family: Arial ;
   font-size: large ;
   text-align: right;	
   margin:40px;
}

.Avis {
    font-family: Arial ;/* "MankSans" ; */
    font-size: large ;
    margin:20px;
    
    color: #FFF;
	/* background-color: #DDD;*/
	padding: 10px;
	height: 300px;
	display: table-cell;
	vertical-align: middle;
}

.slider-news p {
font-family: "Open Sans";
color: #818181;

}
.slider-news a {
text-decoration:none;

}
/*.wrapper-inner .slider .slider-elements .details h3{
    color:#337ab7;
 }*/
.wrapper-inner .slider .slider-elements .details a h3{
font-size:3em;
font-family:'Barlow';
color:rgb(16, 95, 127); 
 /*color:#818181;*/
 }
 @media only screen and (max-width: 320px) {
.wrapper-inner .slider .slider-elements .details a h3{
font-size:1.5em;
}
}
 .wrapper-inner .slider .slider-elements .details a:hover{
   text-decoration:none;
 }