/* common */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}


.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
    opacity: 0.8;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 12px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

.ribbonindex {
  width: 130px;
  height: 86px;
  overflow: hidden;
  position: absolute;
}
.ribbonindex::before,
.ribbonindex::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbonindex span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
    opacity: 0.8;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 12px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

.ribbonindex-top-left {
  top: -5px;
  left: -5px;
}

.ribbonindex-top-left span {
  right: -20px;
  top: 25px;
  transform: rotate(-45deg);
}

.ribbonindex-top-left::before,
.ribbonindex-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}


#colorblind {background-color: #27A0AF;padding: 8px 0;font: 700 10px/1 'Lato', sans-serif;}
#colorpro {background-color: #7ac6c9;padding: 8px 0;font: 700 10px/1 'Lato', sans-serif;}
#colorcushion {background-color: #e09f3e;background-color: #7ac6c9;padding: 8px 0;font: 700 10px/1 'Lato', sans-serif;}
#colorstarterproject {background-color: #f2adbf;padding: 8px 0;font: 700 10px/1 'Lato', sans-serif;}
/* top left*/
.ribbon-top-left {
  top: -20px;
  left: -20px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -20px;
  top: 25px;
  transform: rotate(-45deg);
}


.link0 a#link0,
.link0 a#link0,
.link1 a#link1,
.link2 a#link2,
.link3 a#link3,
.link4 a#link4,
.link5 a#link5,
.link6 a#link6,
.link7 a#link7,
.link8 a#link8,
.link9 a#link9,
.link10 a#link10,
.link11 a#link11,
.link12 a#link12,
.link13 a#link13,
.link14 a#link14,
.link15 a#link15 {
background-color: rgb(255,255,255,0.5);
color:#44a3a7;
      }

/* Smartphones (portrait and landscape) --------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    #bannertutorialbox { padding-left: 15%; width:85%; }
    
    
    
        }