/* mise en forme du bloc page */

#bloc_page {
  width:1100px; 
  margin:auto;
  margin-top:15px;    
  display:flex;
  position:relative;
  font-family:"Comic Sans MS" ,sans-serif;
  
}

/* Couleur des elements orange */

#boxorange ,#orangevertleft,#orangevertmiddle,#orangevertmiddle2,#orangevertright {
  background-color: rgb(249,134,7);
}

/* Couleur des elements verts */

#greenhortop,#greenhortop1,#greenhormiddle ,#greenhormiddle1,#greenhormiddle2, #greenhorbottom {
  background-color: rgb(163,201,25);
}


#boxorange {
  width: 170px;
  height: 710px;
  left:0;
  position:relative;  
}


#boxorange h2 {
  transform-origin: right bottom 0;
  transform: rotate(270deg);
  letter-spacing: 20px;
  margin-top:450px;
  position:relative;
  right:50px;
  font-size:45px; 
  color:white;
  text-transform:UPPERCASE;
  font-family:"Comic Sans Ms", serif;
}

#boxorange p {
  transform-origin: right bottom 0;
  transform: rotate(270deg);
  letter-spacing: 20px;
  margin-top:450px;
  position:relative;
  right:50px;
  font-size:45px;
  font-weight:bold; 
  color:white;
  text-transform:UPPERCASE;
  font-family:"Comic Sans Ms", serif;
}


#boxorange .item1 {
  margin-top:470px;
}

#orangevertleft{
  width:14px; 
  height:710px;
  position:absolute;
  left:187px; 
}

#orangevertmiddle {
  width:14px;
  
  height:710px;
  position:absolute;
  left:590px; 
}

#orangevertmiddle2 {
  width:14px; 
  height:330px;
  position:absolute;
  left:850px; 
  top:380px;
}



#orangevertright {
  width:14px; 
  height:710px;
  position:absolute;
  left:1090px;  
}

#greenhortop {
  height:14px;  
  width:890px;
  position:absolute;
  top:40px;
  left:200px;
}


#greenhortop1 {
  height:14px;  
  width:389px;
  position:absolute;
  top:213px;
  left:201px;
}

#greenhormiddle {
  height:14px;  
  width:487px;
  position:absolute;
  top:371px;
  left:603px;
}


#greenhormiddle1 {
  height:14px;  
  width:247px;
  position:absolute;
  top:520px;
  left:604px;
}

#greenhormiddle2 {
  height:14px;  
  width:226px;
  position:absolute;
  top:590px;
  right:10px;
}


#greenhorbottom {
  height:14px;  
  width:890px;
  position:absolute;
  top:646px;
  left:200px;
}




/* contenu du texte central (index...) */


#texte {  
  width: 950px;
  height:650px;
  font-family:"Comic Sans Ms" , verdana , sans-serif;

}


/* Mise en forme du cadre central */

#container {
  display:flex;
  flex-direction:row;
  width:auto;
  height:auto;
  flex-wrap:wrap;
}


#subcontainer1 {  
  margin-top:45px;
  margin-left:20px; 
  display:flex;
  
}


.presentation {
  background: rgb(200,201,25);
  height:175px;
  width:405px;
}

.presentation h3 {
  text-align:center;
  padding-top:50px; 
  font-size:22px;
  padding: 35px 25px;

}

.presentation a ,.cadredroit a, .cadremilieu a, .plan a{
  color:white;
  text-decoration:none;
  text-align:center;
  }

.presentation a:hover, .cadremilieu a:hover{
  text-decoration:underline;
  color:rgb(63,165,235);
}


.presentation img {
  margin-top:-50px;
  height:160px;
  width:200px;
}

.cadredroit a:hover, .plan a:hover {
  text-decoration:underline;
  color:rgb(200,201,25);
}

.cadredroit  {
  background: rgb(63,165,235);  
  width:503px;
  height:328px; 
}

.cadredroit h3 {
  text-align:center;
  margin-top:140px;
  font-size:22px;
}

#hidden  {
  text-align:center;
  color:white;
  margin-top:120px;

}

.cadredroit .show {
  text-align:center;
  margin-top: 60px;
  font-size:22px;
}

#subcontainer2 {  
  
  
  margin-left:20px;
  display:flex;


}


.image {
  background: rgb(63,165,235);
  width:407px;
  height:430px;
  margin-top:-150px;
}

.image h3 {
  text-align:center;
  margin-top:160px;
  font-size:22px;
  padding:0px 20px;

}

.image a {
  text-decoration:none;
  color:white;
}

.image a:hover {
  text-decoration:underline;
  color:rgb(200,201,25);
}

.cadremilieu {

  background: rgb(200,201,25);
  
  height:150px;
  width:260px;

}

.cadremilieu h3 {
  text-align:center;
  padding-top:30px;
  color:white;
}

.cadretelechargement {
  background: rgb(63,165,235);
  width:239px;
  height:225px;
  margin-top:-5px;
}


#subcontainer3 {  
  display:flex;  
  margin-left:20px;
}


.videgauche {
  background-color:none;
  width:407px;
}

.plan {
  background-color:rgb(63,165,235);
  width:260px;
  height:125px;
  margin-top:-125px;
}

.plan h3 {
  text-align:center;
  padding-top:30px;

}

.videdroit {
  background-color:rgb(200,201,25);
  width:239px;
  height:55px;
  margin-top:-55px;
}

/* Boutons offres , stages , benevoles */
/*
button {
  font-size:17px;
  padding:10px 2px;
  width:120px;
  height:100px;
  text-align:center;
  margin:65px 25px;
  border-radius:20px;
  box-shadow: none;
  background:rgb(63,165,235);
  border:none;
  color:white;
  cursor:pointer;
  
}

button a {
  text-decoration:none;
  color:white;
}

button:hover {
  background: #8dc7eb;
  background-image: -webkit-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: -moz-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: -ms-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: -o-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: linear-gradient(to bottom, #8dc7eb, #5aafe8);
 -webkit-box-shadow: 5px 5px 3px #666666;
  -moz-box-shadow: 5px 5px 3px #666666;
  box-shadow: 5px 5px 3px #666666;
}

*/


.emploi {
  margin-top:150px;
  text-align:center;
  font-size:18px;
  width:120px;
  height:80px;
  margin-left:25px;
  background-color:rgb(63,165,235);
  padding-top:14px;
  border-radius:20px;
   animation: animation  1s;
  animation-iteration-count: 2;
}


/*

@keyframes animation { 

  0% {
        transform: scale(1.00);


    }

    50% {
         transform: scale(0.90);
    }

   

    100% {
        transform: scale(1.00);
        color:white;
        


    }
}

*/









.benevolat {
  margin-top:250px;
  text-align:center;
  font-size:18px;
  width:120px;
  height:80px;
  margin-left:25px; 
  background-color:rgb(63,165,235);
  padding-top:14px;
  border-radius:20px;

  

}
.emploi a , .benevolat a{
  text-decoration:none;
    color:white;

}


.emploi:hover, .benevolat:hover {
  background: #8dc7eb;
  background-image: -webkit-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: -moz-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: -ms-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: -o-linear-gradient(top, #8dc7eb, #5aafe8);
  background-image: linear-gradient(to bottom, #8dc7eb, #5aafe8);
 -webkit-box-shadow: 5px 5px 3px #666666;
  -moz-box-shadow: 5px 5px 3px #666666;
  box-shadow: 5px 5px 3px #666666;
}