/*description*/
 @media (max-width: 600px)
 {
  
 .ribbon:before{
  width: 0.469em;
  height: 3.0em;
  padding: 0 0 0.438em;
  top: 0;
  left: -0.469em;
  background: inherit;
  border-radius: 0.313em 0 0 0.313em;
 }

}

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

 
}
 .ribbon {
     position: relative;
     padding: 0 0.5em;
     font-size: 2.000em;
     margin: 0 0 0 -0.625em;
     line-height: 1.875em;
     color: white;
     border-radius: 0 0.156em 0.156em 0;
     background:#245993;
     box-shadow: -1px 2px 3px rgba(0,0,0,0.5);
 }
 @media(min-width:600px)
 {
 .ribbon:before {
    width: 0.469em;
    height: 2.250em;
    padding: 0 0 0.438em;
    top: 0;
    left: -0.469em;
    background:  #245993;
    border-radius: 0.313em 0 0 0.313em;
}
 }
.ribbon:before, .ribbon:after {
    position: absolute;
    content: '';
    display: block;
}

 h1 {
     display: block;
     font-size: 2em;
     margin-block-start: 0.67em;
     margin-block-end: 0.67em;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     font-weight: bold;
 }
 
 .ribbon:after {
     width: 0.313em;
     height: 0.350em;
     background: rgba(0,0,0,0.35);
     bottom: -0.313em;
     left: -0.313em;
     border-radius: 0.313em 0 0 0.313em;
     box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
 }
 
  .content {
    background: white;
     width: 90%;
     min-height: 3.750em;
    margin: 2em auto;
    padding: 1.250em;
    border-radius: 0.313em;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
    line-height: 1.5em;
    color: #775f5f;
  }
.ribbon:before {
  width: 0.469em;
  height: 2.250em;
  padding: 0 0 0.438em;
  top: 0;
  left: -0.469em;
  background:  #245993;
  border-radius: 0.313em 0 0 0.313em;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  color: black;
}
/*description*/
@media (max-width: 425px) 
  { 
   
  #ribbonsize1.ribbon:before,#ribbonsize2.ribbon:before
    {
      height:4.10em;
  }
  
 
}

@media (max-width:320px) 
  { 
   
    #ribbonsize1.ribbon:before
    {
      height:4.10em;
  }
  #ribbonsize2.ribbon:before
    {
      height:5.95em;
  }
  #ribbonsize3.ribbon:before
    {
      height:4.05em;
  }
 
  
 
}