Update to Ribbon

css.css

/* Update to Ribbon *****************************************************************/


#page-content header.affix {
  position: fixed;
  top: 0px;
}

#page-content header > .panelContainer{
	width: 100%;
	overflow: hidden;
	-webkit-transition: height 1s ease-in-out;
	height: auto;
}

#page-content header > .panelContainer > .panelCarousel{
	position: relative;
	width: 200%;
	width: 300%;
	-webkit-transition: left 1s ease-in-out;
	-webkit-transition-delay: .25s;
}

#page-content header > .panelContainer > .panelCarousel [class*="panel"]{
	width: 33.3333333%;
	float: left;
	position: relative;
	box-sizing: border-box;
	-webkit-transition: max-height 1.5s ease-out;
}

/* Animation */

#page-content header > .panelContainer > .panelCarousel.p1{ left:    0%; }
#page-content header > .panelContainer > .panelCarousel.p2{ left: -100%; }
#page-content header > .panelContainer > .panelCarousel.p3{ left: -200%; }

#page-content header > .panelContainer > .panelCarousel.p1 > div::not(.panel1),
#page-content header > .panelContainer > .panelCarousel.p2 > div::not(.panel2),
#page-content header > .panelContainer > .panelCarousel.p3 > div::not(.panel3){
	max-height: 120px;	
}

#page-content header > .panelContainer > .panelCarousel.p2 .panel2,
#page-content header > .panelContainer > .panelCarousel.p1 .panel1,
#page-content header > .panelContainer > .panelCarousel.p3 .panel3{ max-height: 800px; }

@media (max-width: 767px) {
	#page-content header,
	#page-content header.affix {
	  position: relative;	  
	}
}