.product-flexbox {
  display: flex;
  justify-content: space-around;
  align-items: center;
}


.input-list {
    list-style: none;
    font-family: 'proxima-nova',sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-align: right;
    color: #fff;
    position: relative;
    font-weight: 400;
    padding: 0px;
  
}

.output-list {
    list-style: none;
    font-family: 'proxima-nova',sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-align: left;
    color: #fff;
    position: relative;
    font-weight: 400;
  color: #FBB400;
  padding: 0px;
}

.input-list li {
  margin: 15px 0px;
}

.output-list li {
  margin: 15px 0px;
}

.slideRightOne{
	animation-name: slideRightOne;
	-webkit-animation-name: slideRightOne;	

	animation-duration: 0.25s;	
	-webkit-animation-duration: 0.25s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRightOne {
	0% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideRightOne {
	0% {
		-webkit-transform: translateX(-100%);
	}
}

.slideRightTwo{
	animation-name: slideRightTwo;
	-webkit-animation-name: slideRightTwo;	

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRightTwo {
	0% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideRightTwo {
	0% {
		-webkit-transform: translateX(-100%);
	}
}

.slideRightThree{
	animation-name: slideRightThree;
	-webkit-animation-name: slideRightThree;	

	animation-duration: 0.75s;	
	-webkit-animation-duration: 0.75s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRightThree {
	0% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideRightThree {
	0% {
		-webkit-transform: translateX(-100%);
	}
}
.slideRightFour{
	animation-name: slideRightFour;
	-webkit-animation-name: slideRightFour;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRightFour {
	0% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideRightFour {
	0% {
		-webkit-transform: translateX(-100%);
	}
}

.slideRightFive {
	animation-name: slideRightFive;
	-webkit-animation-name: slideRightFive;	

	animation-duration: 1.25s;	
	-webkit-animation-duration: 1.25s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRightFive {
	0% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideRightFive {
	0% {
		-webkit-transform: translateX(-100%);
	}
}

.slideRightSix {
	animation-name: slideRightSix;
	-webkit-animation-name: slideRightSix;	

	animation-duration: 1.50s;	
	-webkit-animation-duration: 1.50s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRightSix {
	0% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideRightSix {
	0% {
		-webkit-transform: translateX(-100%);
	}
}

.slideRightSeven {
	animation-name: slideRightSeven;
	-webkit-animation-name: slideRightSeven;	

	animation-duration: 1.75s;	
	-webkit-animation-duration: 1.75s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRightSeven {
	0% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideRightSix {
	0% {
		-webkit-transform: translateX(-100%);
	}
}

.slideLeftOne{
	animation-name: slideLeftOne;
	-webkit-animation-name: slideLeftOne;	

	animation-duration: 0.25s;	
	-webkit-animation-duration: 0.25s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeftOne {
	0% {
		transform: translateX(100%);
	}
}

@-webkit-keyframes slideLeftOne {
	0% {
		-webkit-transform: translateX(100%);
	}
}

.slideLeftTwo{
	animation-name: slideLeftTwo;
	-webkit-animation-name: slideLeftTwo;	

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeftTwo {
	0% {
		transform: translateX(100%);
	}
}

@-webkit-keyframes slideLeftTwo {
	0% {
		-webkit-transform: translateX(100%);
	}
}

.slideLeftThree{
	animation-name: slideLeftThree;
	-webkit-animation-name: slideLeftThree;	

	animation-duration: 0.75s;	
	-webkit-animation-duration: 0.75s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeftThree {
	0% {
		transform: translateX(100%);
	}
}

@-webkit-keyframes slideLeftThree {
	0% {
		-webkit-transform: translateX(100%);
	}
}

.slideLeftFour{
	animation-name: slideleftFour;
	-webkit-animation-name: slideLeftFour;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeftFour {
	0% {
		transform: translateX(100%);
	}
}

@-webkit-keyframes slideLeftFour {
	0% {
		-webkit-transform: translateX(100%);
	}
}

@media screen and (max-width: 500px) {
  .input-list {
    display: none;
  }
  .output-list {
    display: none; 
  }
}