html {
    font-size:62,5%;
    }
    
body {
    font-weight:normal;
    font-family: calibri,sans-serif;
    font-size:1.1rem;
    line-height:1.6rem;
    color:#817676;
    padding:0;
	margin:0 auto;
}

* {
    box-sizing:border-box;
}


.flexrow > * {
 	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}


a {
    text-decoration: none;
}

a:hover {
    opacity:0.7;
}

header h1 {
    font-size:2rem;
    padding: 0;
    animation:bounceInRight 1s ease-in-out;
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    line-height:2.6rem;
    color:white;
    text-align:center;
    margin:20px 0 5px 0;
}

.italic {
    font-style:italic;
}

.center {
	text-align:center;
}

h1, h2, h3 {
    text-align: center;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.6rem;
	    font-size: 2.6rem !important;
    margin: 4rem !important
}

h3 {
    font-size: 1.4rem;
    margin:2px auto 8px;
}

section.top {
	background:black;
	display:block;
	margin:0;
	padding: 0.5rem;
	font-size:2rem;
}

nav  {
    display: none;
    flex-direction:column;
    background: darkslateblue;
    align-items:center;
    z-index:20;
    padding:1rem;
	justify-content:space-around;
}

ul.flex-column {
	align-items:center;
}
nav a{
    font-size: 1.4rem;
    color:rgb(118, 167, 231);
    text-align: center;
    text-decoration: none;
        -webkit-transition: ease 0.7s, -webkit-transform 0.7s; /* Safari */
        transition: ease 0.7s;
	padding:8px;
	font-weight: normal;
}

nav a:hover, nav li > .fa {
    color:white;
}

/*empêcher le style hover sur mobile*/
nav a:hover > i {
    transform: none;
}

header > p {
    width:100%;
    text-align:center;
    color:white;
    margin:0px;
}

header > section {
    width:100%;
    padding:2%;	
    margin:0;
    display:block;
    z-index:25;
}

.mobileMenu {
		display:block;
}
header > p.mobileMenu {
	background:#3c3c3c;
	font-size:3rem;
	padding:2rem;
}

strong {
    font-weight:500;
}

section h2,.home h2, .extraits h2.fa-window-close, p.sepa{
    flex-basis:100%;
    font-size:1.4rem;
    padding: 1rem;
    margin: 0;
}

section a article {
    font-weight:normal;
    color:#353535;
}

nav > p  {
    color:white;
    text-align:center;
    flex-basis:100%;    
    margin:10px;
}
 nav ul {
	 text-align:center;
 }
nav ul a{
	text-transform:uppercase;
	font-size:2rem
}
img.logo {
    display:inline;
    float:left;
    width:100px;
    height:auto;
}
 img.logo:hover {
    animation : rotate 0.5s ease-in-out;
 }

img.fleche {
	width:1px;
	height:auto;
}

hr {
    width: 100%;
    border-bottom:1px solid  #ddd
}

img {
    width:90%;
    max-width:400px;
    margin:2% auto;
}

main {
    display:flex;
    flex-flow: row wrap;
    width:100%;
    margin:auto;
}

 section, article, form {
    display:block;
    clear:both;
    padding:1% auto;
    margin:2% 0;
}

section.primary {
    display: block;
    width: 100%;
	padding:2%;
	font-size:2rem;
}

section.secondary {
    width:70%;
    display:flex;
    flex-direction:row;
}

select.button_form {
	padding:1%;
	margin:1%;
	font-size:2rem;
}
p.bicolor {
	border-left:1px solid #817676;
	border-right:1px solid #817676;
	margin:0 auto;
	width:90%;
	text-align:center;
	padding:1rem;
}

td {
	font-size:2rem;
	
}
p.bicolor:nth-child(even) {
	background: white;
	border:1px solid #817676;
}

p.bicolor:first-child {
		border-top:1px solid #817676;
}

p.bicolor:nth-of-type(5) {
		border-bottom:1px solid #817676;
}

section.sectionOne {
	background:rgb(190, 196, 250);
      	border-radius:10px;
		margin:1rem;
		padding:1rem
}

section.sectionTwo {

display: flex;

flex-flow:row wrap;

justify-content:space-around;

align-items: center;

padding: 0;
}

section.sectionOne h3 a {
	color : green;
}

section.sectionThree {

display: flex;
flex-flow:row wrap;
justify-content:space-around;
}

section.sectionThree h3 a {
	color : #817676;;
}


section.sectionFour h3 a {
	color:black;
}

.basis {
    flex-basis: 100%;
}

.basis.left, .left {
    text-align:left;
}

p.basis {
    font-size: 0.8rem;
    margin:0 0 1%;
}

img.banner {
    display:block;
    margin:0 auto;
    width:100%;
    max-width:100%;
    flex-basis: 100%;
}

main h1{
    color:rgb(190, 196, 250);
    text-transform:uppercase;
    padding:2%;
}


span#TBox_ContentHTML {
	font-size:1.5rem
}
.flex-row {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-around;
    align-items:flex-start;
}

.flex-row p {
    margin:2px;
}

.flex-column {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    color:#353535;
    min-height:320px;
}


section h2 {
    color:#353535;
    font-family: Calibri, Geneva, Tahoma, sans-serif;
}

section a {
    color:#483D8B;
}


article.inlineArticle {
    display:block;
}


article.coursesArticle {
   
    margin:1%;
    background:rgb(190, 196, 250);
    padding:1%;
    border-radius: 10px;
    min-width: 100%;
    text-align: center;
}


article h3 {
    font-size:1.4rem;
    color:#353535;
} 

article h2 {
    color: #817676;;
}

.button  {
    border: none;
    outline: none;
    position: relative;
    display:block;
    clear:both;
    padding:1%;
    color:#fff;
    font-size:1rem;
    margin:2% auto;
    background-color: #353535;
    border-radius:10px;

}


.button:hover {
    cursor:pointer;
    opacity:0.7;
}


button#valid {
    margin: 4% auto;
    text-align: center;
    padding: 2%;
    border-radius: 30px;
    transition:1.2s;
    width:55%;
    background:#817676;;
    color:#fff;
    border:none;
}

button#valid:hover {
    width:75%;
}

.alinea {
    margin-left:50px;
}

.alineadouble {
    margin-left:60px;
}

.alaligne {
    clear:left;
    padding-top:10px;
    display:block;
}

input, textarea, input.item, input#email, input#message, input#captcha {
   width: 90% !important;
    font-size: 2rem !important;
    font-family: Calibri, Geneva, Tahoma, sans-serif;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: white;
    padding: inherit;
    margin: 1rem;
    text-align: center;
    line-height: 4rem;
}


textarea {
    border-radius: 10px;
    width:100%;
    height: 500px;
} 

form {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    color:#353535;
	margin:2rem !important
}


form p {
    margin:5px;
} 

fieldset {
    border:1px solid #817676;
}

#valid  .fa, form .fa{
    display:inline;
    margin:10px;
}

table,th,td {
    border:1px solid darkslateblue;
    border-collapse:collapse;
   
    padding:5px;
    }

table {
 width:90%;
 }
img.chevron  {
    width:40px;
    position:fixed;
    top:90%;
    right:5%;
    z-index:20;
}

aside.left {
    width:100%;
    
    background:rgb(190, 196, 250);
    text-align:center;
    font-size:1.9rem;
}


aside ul li {
    list-style-type: none;
}

aside > * {
    margin:0 auto;
    padding:1%;
}



aside a {
    font-size: 2.2rem;
    color: white;

}


aside.left > .two {
    background:grey;
    color: white;
}

aside a {
    color: white;
	line-height:5rem;
	margin-bottom:1rem;
}

aside.left > .three {
    background:white;
    color: #3c3c3c;
}

aside.left .three a {
    color: #3c3c3c;
}

aside.right > .one {
    background:green;
}

aside.right .one a, aside.right .one h3 {
    color: white;
}



footer {
    color:#353535;
    background:darkslateblue;
    padding:1%;
    width:100%;
    color:white;
}

footer h2 {
    font-size:1.4rem;
}


footer a{
    color:#353535;
}

footer ul li a {
    color:#353535;
    font-size:1.1rem;

}

footer ul li {
    text-align:center;
    margin:4% auto;
}

#copyright {
    font-size:0.7rem;
    padding:2%;
    display:block;
	margin:0 auto;
}

input {
    font-size:0.9rem;
}

#footer1,#footer2,#footer3 {
    width:90%;
    display:flex;
    flex-direction:column;
    text-align:center;
    padding:2% auto;
    margin : 0 auto;
}


/* ----------------------DESKTOP-----------------------------------*/
@media screen and (min-width: 1040px) {	

section.top {
	font-size:1.1rem;
}
.mobileMenu {
	display:none;
}

h1, h2 {
	line-height:2.5rem;
	
}
nav {
    display: flex;
	flex-flow:row wrap;
    justify-content:space-around;
    background: darkslateblue;
    align-items:center;
    z-index:20;
    padding:1rem;
}

    img {
        width:100%;
    }

    img.full {
        width:60%;
	margin: 0 auto;

    }

    .alignleft {
        display:inline;
        float:left;
    }
    
    img.imgalignleft {
        display:inline;
        float:left;
        width:250px;
        height:auto;
        margin:10px;
    }
    .centre {
        margin-left:35%;
        margin-top:-20px
    }

    header > section > p, .fa-navicon {
        display:none;

    }

    .box-shadow {
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
    }

     header > section {
        
        z-index:9;
        padding:0;
        margin:0;
    }
    
    header > section.flex-row {
        background:#817676;
        width:100%;
    }

    header > section#navigation {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        align-items:center;
    
    }
    nav a{
        font-size: 1.1rem;
        text-align: center;
        text-decoration: none;
            -webkit-transition: ease 0.7s, -webkit-transform 0.7s; /* Safari */
            transition: ease 0.7s;
        padding:%;
    }
 
    nav#navigation > p {
        margin:0;
    }

    nav a:hover {
        opacity:0.7;
    }

    nav > ul li, li.subnav1, li.subnav2, li.subnav3  {
        width:200px;
        display:flex;
        flex-direction: column;
        display: block;
        text-align: center;
      }
      
aside.left {
    width:21%;
    height: 100%;
   
}

aside.left a, nav ul a {
	font-size:1.1rem;

}

section.primary {
    display: inline;
    width: 70%;
	padding:2%;
    float: right;
	font-size:1.4rem;
}

    section > *, .home >* {
        flex:1;
        }
    
        section{
            margin:0 auto;
            padding: 1% 3%;
        }
    
        main section p {
            padding:0.2rem;
            margin:0;
			font-size:1.5rem
        }
        
       
        article.flex-column.box-shadow {
            padding:5px;
            min-width:350px;
        }
       
        article.inlineArticle {
            width: 49%;
            display: inline-block;
        }
    
      article.articleOne {
      	width:100%;
      	background:rgb(190, 196, 250);
      	border-radius:10px;
      }

       article.articleTwo {
      	    background:rgb(190, 196, 250);
      	    border-radius:10px;
      	    margin: 2%;
      }

       article.articleSeven {
      	    background:rgb(190, 196, 250);
      	    border-radius:10px;
      	    margin: 2%;
      }
      
      article.coursesArticle {
        min-width: 200px;
      }
      
        .not-flex {
            display:block;
            padding:3%;
        }
    
        .hideNav {
            display:none;
        }

        form, input {
            width:300px;
             border-radius:0px;
         }

         form {
            margin:0 auto;
            width:90%;
        }
		
		input {
			            width:100%;

		}
		input.button_form, select.button_form, em, article.coursesArticle, p, td {
			font-size:1rem !important;
		}
		
		
		input {
			line-height: 3rem;
    width: 500px !important;
    margin: 2% auto;
		}
		
    p.bicolor {
		width:60%;
		font-size:0.8rem;
	}
	}