/* CSS Specific to the Program Pages */
.program-list-container {
    border: #A9A9A9 1px solid;
    background-image: url(../img/patterns/linen.html);
    background-color: #F5F5F5;
    width: 100%;
    height: auto;
    min-height: 250px;
    padding: 5px 10px;
}

.program-list-container dt {
    display: list-item;
    list-style-type: square;
    list-style-position: inside;
    font-weight: normal;
    color: #777;
}

.program-list-container .required-courses-list dd {
    padding-left: 0;
    margin-left: 0;
    max-height: 5px;
}

/* Program List Box */
.thumb-info .thumb-info-wrapper:after {
	background-color:rgba(242, 242, 242, 0.2)
}

.portfolio-item a:hover {
    text-decoration: none;
}

/* Shipping Fee Disclaimer */
.program-list-disclaimer {
    font-size: smaller;
    line-height: 1.3em;
}

/* Dropcaps for Program Categories */


.thumb-info .top-right {
    position: absolute;
    right: 0;
    top: 10px;
}

/*Program Fee Full*/

.program_fee_full {
    color: #E7350D;
    font-weight: bolder;
    font-size: 1.2em;
    text-decoration: line-through;
}

/* Corner Ribbon */
.ribbon-wrapper {
      width: 120px;
      height: 120px;
      overflow: hidden;
      position: absolute;
      top: -3px;
      right: -3px;
}

.ribbon-general {
      font-size: 8pt;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 1.0em;
      color: #FFF;
      text-align: center;
      text-shadow: rgba(161, 161, 161, 0.5) 1px 1px 0px;
      -webkit-transform: perspective(1px) rotate(45deg); /* perspective(1px) helps fix and issue in some browsers with text displayed after rotating. */
      -moz-transform:    perspective(1px) rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      transform: perspective(1px) rotate(45deg);
      position: relative;
      padding: 10px 0;
      left: -5px;
      top: 20px;
      width: 170px;
      background-color: #00CC00;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#00CC00), to(#009900));
      background-image: -webkit-linear-gradient(top, #00CC00, #009900);
      background-image:    -moz-linear-gradient(top, #00CC00, #009900);
      background-image:     -ms-linear-gradient(top, #00CC00, #009900);
      background-image:      -o-linear-gradient(top, #00CC00, #009900);
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-construction {
      font-size: 8pt;
      font-weight: 700;
      line-height: 2.0em;
      color: #FFF;
      text-align: center;
      text-shadow: rgba(161, 161, 161, 0.5) 1px 1px 0px;
      -webkit-transform: perspective(1px) rotate(45deg); /* perspective(1px) helps fix and issue in some browsers with text displayed after rotating. */
      -moz-transform:    perspective(1px) rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      transform: perspective(1px) rotate(45deg);
      position: relative;
      padding: 10px 0;
      left: -5px;
      top: 20px;
      width: 170px;
      background-color: #FFC800;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#FFC800), to(#CCA000));
      background-image: -webkit-linear-gradient(top, #FFC800, #CCA000);
      background-image:    -moz-linear-gradient(top, #FFC800, #CCA000);
      background-image:     -ms-linear-gradient(top, #FFC800, #CCA000);
      background-image:      -o-linear-gradient(top, #FFC800, #CCA000);
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-oilgas {
      font-size: 8pt;
      font-weight: 700;
      line-height: 2.0em;
      color: #FFF;
      text-align: center;
      text-shadow: rgba(71, 71, 71, 0.5) 1px 1px 0px;
      -webkit-transform: perspective(1px) rotate(45deg); /* perspective(1px) helps fix and issue in some browsers with text displayed after rotating. */
      -moz-transform:    perspective(1px) rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      transform: perspective(1px) rotate(45deg);
      position: relative;
      padding: 10px 0;
      left: -5px;
      top: 20px;
      width: 170px;
      background-color: #808080;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#666666));
      background-image: -webkit-linear-gradient(top, #808080, #666666);
      background-image:    -moz-linear-gradient(top, #808080, #666666);
      background-image:     -ms-linear-gradient(top, #808080, #666666);
      background-image:      -o-linear-gradient(top, #808080, #666666);
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-publicsector {
      font-size: 8pt;
      font-weight: 700;
      line-height: 2.0em;
      color: #FFF;
      text-align: center;
      text-shadow: rgba(161, 161, 161, 0.5) 1px 1px 0px;
      -webkit-transform: perspective(1px) rotate(45deg); /* perspective(1px) helps fix and issue in some browsers with text displayed after rotating. */
      -moz-transform:    perspective(1px) rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      transform: perspective(1px) rotate(45deg);
      position: relative;
      padding: 10px 0;
      left: -5px;
      top: 20px;
      width: 170px;
      background-color: #007FFF;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#007FFF), to(#0066CC));
      background-image: -webkit-linear-gradient(top, #007FFF, #0066CC);
      background-image:    -moz-linear-gradient(top, #007FFF, #0066CC);
      background-image:     -ms-linear-gradient(top, #007FFF, #0066CC);
      background-image:      -o-linear-gradient(top, #007FFF, #0066CC);
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-specialty {
      font-size: 8pt;
      font-weight: 700;
      line-height: 2.0em;
      color: #FFF;
      text-align: center;
      text-shadow: rgba(161, 161, 161, 0.5) 1px 1px 0px;
      -webkit-transform: perspective(1px) rotate(45deg); /* perspective(1px) helps fix and issue in some browsers with text displayed after rotating. */
      -moz-transform:    perspective(1px) rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      transform: perspective(1px) rotate(45deg);
      position: relative;
      padding: 10px 0;
      left: -5px;
      top: 20px;
      width: 170px;
      background-color: #CB34C6;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#CB34C6), to(#A22A9E));
      background-image: -webkit-linear-gradient(top, #CB34C6, #A22A9E);
      background-image:    -moz-linear-gradient(top, #CB34C6, #A22A9E);
      background-image:     -ms-linear-gradient(top, #CB34C6, #A22A9E);
      background-image:      -o-linear-gradient(top, #CB34C6, #A22A9E);
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-hazwoper {
      font-size: 8pt;
      font-weight: 700;
      line-height: 2.0em;
      color: #FFF;
      text-align: center;
      text-shadow: rgba(161, 161, 161, 0.5) 1px 1px 0px;
      -webkit-transform: perspective(1px) rotate(45deg); /* perspective(1px) helps fix and issue in some browsers with text displayed after rotating. */
      -moz-transform:    perspective(1px) rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      transform: perspective(1px) rotate(45deg);
      position: relative;
      padding: 10px 0;
      left: -5px;
      top: 20px;
      width: 170px;
      background-color: #FF5A36;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#FF5A36), to(#FF4A1D));
      background-image: -webkit-linear-gradient(top, #FF5A36, #FF4A1D);
      background-image:    -moz-linear-gradient(top, #FF5A36, #FF4A1D);
      background-image:     -ms-linear-gradient(top, #FF5A36, #FF4A1D);
      background-image:      -o-linear-gradient(top, #FF5A36, #FF4A1D);
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-healthcare {
      font-size: 8pt;
      font-weight: 700;
      line-height: 2.0em;
      color: #FFF;
      text-align: center;
      text-shadow: rgba(161, 161, 161, 0.5) 1px 1px 0px;
      -webkit-transform: perspective(1px) rotate(45deg); /* perspective(1px) helps fix and issue in some browsers with text displayed after rotating. */
      -moz-transform:    perspective(1px) rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      transform: perspective(1px) rotate(45deg);
      position: relative;
      padding: 10px 0;
      left: -5px;
      top: 20px;
      width: 170px;
      background-color: #00FEFF;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#00FEFF), to( #00E6E6));
      background-image: -webkit-linear-gradient(top, #00FEFF, #00E6E6);
      background-image:    -moz-linear-gradient(top, #00FEFF, #00E6E6);
      background-image:     -ms-linear-gradient(top, #00FEFF, #00E6E6);
      background-image:      -o-linear-gradient(top, #00FEFF, #00E6E6);
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

/* Background Image */
.req-bus-acct-bg-img {
    background-image: url("../img/contact-us/request-business-account-bg-fade-b.jpg");
    background-color: #FFFFFF;
    margin-top:-35px;

    /* Additional CSS for background image behavior */
    background-position: center; /* Keep the image centered */
    background-size: cover; /* Cover the entire area of the element */
    background-attachment: fixed; /* Keep the background fixed in place */
    transition: background-size 0.3s ease; /* Smooth transition for background size */

}