.ribbon{
  position:relative;
  top:20px;
  padding: 0 0.10em;  
  margin: 0 0 0 -10px;
  line-height: 50px;
  color: blue;  
  background: rgb(63,165,235);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);

}

.ribbon:before, .ribbon:after{
  position:absolute;
  content: '';
  display: block;
}

.ribbon:before{
  width:10px;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -10px;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.ribbon:after{
  width: 4px;
  height: 10px;
  background: rgba(0,0,0,0.35);
  bottom: -10px;
  left: -6px;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  
  body{
    font-size:0.875em;
  }
  
  .ribbon{
    line-height: 1.143em;
    padding: 0.5em;

  }
  
  .ribbon:before, .ribbon:after{
    font-size: 0.714em;
  }
  
}


/* ribbon vert */


.greenribbon{
  position:relative;
   top:20px;


  padding: 0 0.10em;  
  margin: 0 0 0 -0.4em;
  line-height: 50px;
  color: blue;  
  background: rgb(163,201,25);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);

}

.greenribbon:before, .greenribbon:after{
  position:absolute;
  content: '';
  display: block;
}

.greenribbon:before{
  width:10px;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -10px;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.greenribbon:after{
  width: 4px;
  height: 10px;
  background: rgba(0,0,0,0.35);
  bottom: -10px;
  left: -6px;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  
  body{
    font-size:0.875em;
  }
  
  .greenribbon{
    line-height: 1.143em;
    padding: 0.5em;
  }
  
  .greenribbon:before, .greenribbon:after{
    font-size: 0.714em;
  }
  
}



/* ribbon orange */


.orangeribbon{
  position:relative;
  top:20px;



  padding: 0 0.10em;  
  margin: 0 0 0 -0.625em;
  line-height: 50px;
  color: blue;  
  background: rgb(249,134,7);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);

}

.orangeribbon:before, .orangeribbon:after{
  position:absolute;
  content: '';
  display: block;
}

.orangeribbon:before{
  width:10px;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -10px;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.orangeribbon:after{
  width: 4px;
  height: 10px;
  background: rgba(0,0,0,0.35);
  bottom: -10px;
  left: -6px;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  
  body{
    font-size:0.875em;
  }
  
  .orangeribbon{
    line-height: 1.143em;
    padding: 0.5em;
  }
  
  .orangeribbon:before, .orangeribbon:after{
    font-size: 0.714em;
  }
  
}






/* Ribbon avec scroll */



.ribbon2{
  position:absolute;
  top:70px;
  left:210px;
  width:893px;


  padding: 0 0.10em;  
  margin: 0 0 0 -0.625em;
  line-height: 50px;
  color: blue;  
  background: rgb(63,165,235);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);
  margin-bottom:50px;
}



.ribbon2:before, .ribbon2:after{
  position:absolute;
  z-index:1000;
  content: '';
  display: block;
}

.ribbon2:before{
  width:10px;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -10px;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.ribbon2:after{
  width: 4px;
  height: 10px;
  background: rgba(0,0,0,0.35);
  bottom: -10px;
  left: -6px;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  
  body{
    font-size:0.875em;
  }
  
  .ribbon2{
    line-height: 1.143em;
    padding: 0.5em;
  }
  
  .ribbon2:before, .ribbon2:after{
    font-size: 0.714em;
  }
  
}








/* Ribbon page structures */




.ribbon5{
  position:relative;
  top:15px;
  padding: 0 0.10em;  
  margin: 0 0 0 -10px;
  line-height: 35px;
  color: blue;  
  background: rgb(249,134,7);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);

}



.ribbon5:before, .ribbon5:after{
  position:absolute;
  content: '';
  display: block;
}

.ribbon5:before{
  width:10px;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -10px;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.ribbon5:after{
  width: 4px;
  height: 10px;
  background: rgba(0,0,0,0.35);
  bottom: -10px;
  left: -6px;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  
  body{
    font-size:0.875em;
  }
  
  .ribbon5{
    line-height: 1.143em;
    padding: 0.5em;
  }
  
  .ribbon5:before, .ribbon5:after{
    font-size: 0.714em;
  }
  
}




/* Ribbon page themes */



.ribbon6{
  position:absolute;
  width:895px;
  top:70px;
  left:200px;
  z-index:100;
  padding: 0 0.10em;  
  margin: 0 0 0 -10px;
  line-height: 50px;
  color: blue;  
  background: rgb(249,134,7);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);

}

.ribbon6:before, .ribbon6:after{
  position:absolute;
 
  content: '';
  display: block;
}

.ribbon6:before{
  width:10px;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -10px;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.ribbon6:after{
  width: 4px;
  height: 10px;
  background: rgba(0,0,0,0.35);
  bottom: -10px;
  left: -6px;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  
  body{
    font-size:0.875em;
  }
  
  .ribbon6{
    line-height: 1.143em;
    padding: 0.5em;
  }
  
  .ribbon6:before, .ribbon6:after{
    font-size: 0.714em;
  }
  
}


/* Ribbon page plan d'accés */



.ribbon8{
  position:relative;
  top:30px;
  padding: 0 0.10em;  
  margin: 0 0 0 -10px;
  line-height: 30px;
  color: orange;  
  background: rgb(63,165,235);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);
 
}

.ribbon8:before, .ribbon8:after{
  position:absolute;
  content: '';
  display: block;
}

.ribbon8:before{
  width:10px;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -10px;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.ribbon8:after{
  width: 4px;
  height: 10px;
  background: rgba(0,0,0,0.35);
  bottom: -10px;
  left: -6px;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}


@media (max-width: 600px) {
  
  body{
    font-size:0.875em;
  }
  
  .ribbon8{
    line-height: 1.143em;
    padding: 0.5em;
  }
  
  .ribbon8:before, .ribbon8:after{
    font-size: 0.714em;
  }
  
}


/* Ribbon page structures */