.A4 {
height:1200px;
width:850px;	
	
}

.cnib {
	
height:230px;
width:420px;	
	
}


.groupe   
{
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox;      /* TWEENER - IE 10 */
 display: -webkit-flex;     /* NEW - Chrome */
 display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-wrap: wrap;
padding:0 4px;
	
}

h2{
	font-family:Baskerville Old Face;
	text-align:center;
	text-decoration:underline;
}


.publi {
	flex:55%;
	max-width:55%;	
	margin:auto;
	padding:5px;
	margin:2px;
	word-wrap:break-word;
}

.publi2 {
	flex:40%;
	max-width:40%;	
	margin:auto;
	padding:5px;
	margin:2px;
}

.form_box{
    margin:auto;
    background-color:  rgb(221, 221, 221);
    box-shadow: -7px -7px 17px rgb(243, 243, 243), 7px 7px 17px rgb(128, 128, 128);
    padding:30px;
    border-radius: 10px; 
}

.clic_box{
    margin:auto;
    box-shadow: -7px -7px 17px rgb(243, 243, 243), 7px 7px 17px rgb(128, 128, 128);
    padding:30px;
    border-radius: 10px; 
}
 
 .create a{
text-align: center;
font-size: 18px;
text-decoration: none;
color:red;
font-weight: bolder;
margin-left: 100px;
	  }

.line-break{
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px auto;
    display: flex;
}
.line-break::before{
content:'';
background-color: rgb(129, 129, 129);
position: absolute;
left:0;
width: 100%;
    height: 1px;
}
.line-break::after{
    width: 24px;
    height: 24px;
    margin: auto;
    background-color: rgb(221, 221, 221);
    z-index: 4;
}
 .form_box  input, .form_box textarea, .form_box select {
width:100%;
height: 50px;
font-size: 20px;
font-weight: bold;
padding:5px;
border-radius: 8px;
border:none;
outline:none;
background-color: transparent;
box-shadow: -7px -7px 17px rgb(243, 243, 243), 7px 7px 17px rgb(128, 128, 128);
font-family:Baskerville Old Face;
}
 .form_box input:focus, .form_box textarea:focus,.form_box select:focus, .clic_box:hover{
    box-shadow: inset 7px 7px 17px rgb(128, 128, 128);
}

.form_box button{
    width:80%;
    margin-left: 30px;
    height: 50px;
    outline: none;
    border:none;
    font-weight:bolder;
    font-size:18px;
    border-radius: 5px;
    color:rgb(100, 100, 100);
    background-color: transparent;
    box-shadow: -7px -7px 17px rgb(243, 243, 243), 7px 7px 17px rgb(128, 128, 128);
}
.form_box button:active{
    box-shadow: inset 7px 7px 17px rgb(128, 128, 128);
}

.rentrer_form{
    margin:auto;
    background-color:rgb(221, 221, 221);
    padding:30px;
	border: solid rgb(204,182,168);
   
}


.nav-item a {
 color: black;	
 font-size:20px;
} 

  .bg-gradient-primary {
  background: -webkit-gradient(linear, left top, right top, from(#da8cff), to(#9a55ff)) !important;
  background: linear-gradient(to right, #da8cff, #9a55ff) !important; }

.bg-gradient-secondary {
  background: -webkit-gradient(linear, left top, right top, from(#e7ebf0), to(#868e96)) !important;
  background: linear-gradient(to right, #e7ebf0, #868e96) !important; }

.bg-gradient-success {
  background: -webkit-gradient(linear, left top, right top, from(#84d9d2), to(#07cdae)) !important;
  background: linear-gradient(to right, #84d9d2, #07cdae) !important; }

.bg-gradient-info {
  background: -webkit-gradient(linear, left top, right top, from(#90caf9), color-stop(99%, #047edf)) !important;
  background: linear-gradient(to right, #90caf9, #047edf 99%) !important; }

.bg-gradient-warning {
  background: -webkit-gradient(linear, left top, right top, from(#f6e384), to(#ffd500)) !important;
  background: linear-gradient(to right, #f6e384, #ffd500) !important; }

.bg-gradient-danger {
  background: -webkit-gradient(linear, left top, right top, from(#ffbf96), to(#fe7096)) !important;
  background: linear-gradient(to right, #ffbf96, #fe7096) !important; }

.bg-gradient-light {
  background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e4e4e9)) !important;
  background: linear-gradient(to bottom, #f4f4f4, #e4e4e9) !important; }

.bg-gradient-dark {
  background: linear-gradient(89deg, #5e7188, #3e4b5b) !important; }


.card-inverse-info {
  background: rgba(25, 138, 227, 0.2);
  border: 1px solid #177fd1;
  color: #1369ad; }

.card-inverse-warning {
  background: rgba(254, 215, 19, 0.2);
  border: 1px solid #eac611;
  color: #c1a30e; }

.card-inverse-danger {
  background: rgba(254, 124, 150, 0.2);
  border: 1px solid #ea728a;
  color: #c15e72; }

.card-inverse-light {
  background: rgba(248, 249, 250, 0.2);
  border: 1px solid #e4e5e6;
  color: #bcbdbe; }

.card-inverse-dark {
  background: rgba(62, 75, 91, 0.2);
  border: 1px solid #394554;
  color: #2f3945; }
  
  
.couverture 
{
	
	background:url("photos/couver2.jpg") no-repeat;
	background-size:cover;
}

.favori{
font-family:Edwardian Script ITC;
font-size:60px;	
}
.slogan {
	position:relative;
	margin-top:100px;
	margin-right:80px;
}
.bold
{
font-family:Broadway;
font-size:15px;	
}
 .moyennes,.statis 
 {
display:inline-block;
vertical-align:top;
 }
 
 .stat td,.stat th
{ width: 200px;
border:solid black 1px;
}

table th {
border:solid black 2px;	
	
}
.bulletin td,.bulletin th
{ width: 150px;
border:solid black 2px;
}
 .entete
 {
	 margin-bottom:100px;
 }
 
 #login
 {
background:url("photos/drapeau.jpg") no-repeat;
background-size:cover;
	
 }
 
 .login {
position:relative;
margin-top:100px;
margin-left:100px;
border:1px solid white;
padding:10px;
height:auto;
border-radius:10px; 
 }
 .gris {
background-color:  rgb(221, 221, 221);
 }
 
 .well {
background-color:rgba(255,255,236,0.5);	 
 }
 
 .rouge {
background-color:rgba(255,193,193,0.5);	 
 }
 
 .traitement input {
	 border:none;
 }
 
 .essai {
	border:solid black 1px; 
 }
 
 .bas {
margin-top:250px;
border-top:black 2px solid;
 }
 
 .scroll {
  overflow: auto;
  white-space: nowrap;
}

.box, .scroll_elem
{display:inline-block; 
margin:5px;
}

.dropdown-item:hover,.nav-item:hover
{	background-color:rgba(209,209,209,0.5);
}

.dropdown:focus .dropdown-menu 
{
	display:block;
}

.comportement
{ margin:50px; text-align: left; 
}

.comportement h1,h2,h3
{text-decoration:underline;
}

.comportement:not(h2)
{font-family:Bookman Old Style; font-size:1.5em;
	
}
fieldset 
{ border: solid black;
	
}

.pagination a:hover{
	background-color:yellow;	
}

.milieu img {
	box-shadow:-7px -7px 20px 0 rgba(255,255,255,0.9),7px 7px 20px 0px rgba(255,255,255,0.9) ;
	clip: rect(0px,60px,200px,0px);
}

.grille
{
min-width:250px;
}
 .photo_ecole{
width:100%;
height:auto;	 
	 
 }
 .ecole {
	 
	background:url("photos/ecole.jpg") no-repeat;
background-size:cover; 
 }



#contact_haut {
position:absolute;
right:35px;
top:30px;
font-family:Baskerville Old Face;
}

#contact_haut a {
text-decoration:none;
color:rgb(147,147,147);
}

#contact_haut a:hover {
color: black;
font-size:20px;
}



.contenu {
	
position:absolute;
background-color:inherit;
  z-index: 2;
  display:none;
  font-size:20px;
}
.box:hover .contenu{
	display:block;
}

.product a {
  font-size: 20px;
  color: red;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family:Baskerville Old Face;
	
}

.contenu a:hover {
 background-color: #eee;
  color: black;	
}



.nav-link {
	
color:white;	
}

.item2,.item1 {
	height:200px;
	
}
.item2 {
	background:radial-gradient(rgb(0,255,255),white)
}
.item1 {
	background:radial-gradient(white,red)
}

.pellicule {
	max-width:160px;
	height:auto;	
}
.pellicule2 {
	max-width:80px;
	height:auto;	
}
.pellicule_bull {
float: left; margin-left:5px; border-radius:70px; 
margin-top : 10px	;
max-width:150px;
height:auto;	
}
#eleves{
width:35%;
height:auto;	 
overflow:auto;
padding:5px;
font-family:Baskerville Old Face;

}
 #eleves a {
	text-decoration:none; 
    color:black;
	font-size:20px;	
 }
 #eleves a:hover {
background-color: rgba(255,163,70,1);
	 	 
 }
 
#detail{
width:60%;
height:auto;	
overflow:auto;
font-family:Baskerville Old Face;
font-size:20px;
}
#eleves,#detail {
	display:inline-block;
	vertical-align:top; 
	
}

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border-radius:5px;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;    
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  display: none;
  padding: 100px 20px;
  height: 100%;
}





/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width:650px) {
 
.publi {
	flex:100%;
	max-width:100%;	
	margin:auto;
	padding:3px;
	margin:2px;
}

.publi2 {
	flex:100%;
	max-width:100%;	
	margin:auto;
	padding:3px;
	margin:2px;
}
	
.tablink {
  
  width: 45%;
}

	
}