@media screen and (min-width: 400px){
body {
	background-color: rgba(248, 132, 46, 0.8);
}
}

@media screen and (min-width: 780px){
body {
	background-color: rgba(107,142,35, 0.8);
}
} 

@media screen and (min-width: 400px){
	#ribbon1{
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 12%;
		width: 50%;
		margin-top: 1%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	}
	#ribbon1:hover{
		width: 52%;
	}
}

@media screen and (min-width: 780px){
	#ribbon1{ 
		display: inline-block;
		background-color: white;
		height: 50%;
		width: 14%;
		margin-top: -10%;
		margin-left: -2%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
		position: absolute;
	 }
	 #ribbon1:hover{
	 	height: 55%;
	 	width: 14%;
	 }
}

@media screen and (min-width: 400px){
	#fact1{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-top: 2%;
		line-height: 10px;
		margin-left: 24%;
	}
	#fact1:hover{
		margin-left: 26%; 
	}
}

@media screen and (min-width: 780px){
	#fact1{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 10px;
		margin-top: 135%;
		line-height: 14px;
		margin-left: 12%;
	}
	#fact1:hover{
		margin-top: 155%;
		margin-left: 12%;
	}
}

@media screen and (min-width: 400px){
	#ribbon2{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 99%;
		margin-top: 13%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	} 
	#ribbon2:hover{
		width: 101%;
	}
}

@media screen and (min-width: 780px){
	#ribbon2{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 60%;
		width: 14%;
		margin-top: -5%;
		margin-left: 13%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	 #ribbon2:hover{
	 	height:65%;
	 	width: 14%;
	 }
} 

@media screen and (min-width: 400px){
	#fact2{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		padding-bottom: 5px;
		margin-left: 55%;
		line-height: 10px;
		margin-top: 1%;
	} 
	#fact2:hover{
		margin-left: 57%;
	}
}

@media screen and (min-width: 780px){
	#fact2{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 10px;
		margin-top: 135%;
		margin-left: 12%;
		line-height: 14px;
	}
	#fact2:hover{
		margin-top: 155%;
		margin-left: 12%;
	}
} 

@media screen and (min-width: 400px){
	#ribbon3{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 50%;
		margin-top: 22%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	}
	#ribbon3:hover{
		width: 52%;
	}
}

@media screen and (min-width: 780px){
	#ribbon3{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 35%;
		width: 14%;
		margin-top: -5%;
		margin-left: 29%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	 #ribbon3:hover{
	 	height:40%;
	 	width: 14%;
	 }
}

@media screen and (min-width: 400px){
	#fact3{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		margin-top: 1px;
		padding-bottom: 5px;
		padding-right: 1px;
		margin-left: 11%;
		line-height: 10px;
	}
	#fact3:hover{
		margin-left: 13%;
	}
}

@media screen and (min-width: 780px){
	#fact3{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 15px;
		padding-right: 15px;
		margin-top: 40%;
		line-height: 12px;
	}
	#fact3:hover{
		margin-top:60%;
		margin-left: 12%;
	}
} 

@media screen and (min-width: 400px){
	#ribbon4{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 70%;
		margin-top: 38%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	}
	#ribbon4:hover{
		width: 72%;
	}
} 

@media screen and (min-width: 780px){
	#ribbon4{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 70%;
		width: 14%;
		margin-top: -5%;
		margin-left: 31%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	 #ribbon4:hover{
	 	height:75%;
	 	width: 14%;
	 }
}

@media screen and (min-width: 400px){
	#fact4{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		margin-top: 2px;
		padding-bottom: 5px;
		padding-right: 5px;
		margin-left: 25%;
		line-height: 10px;
	}
	#fact4:hover{
		margin-left: 27%;
	}
}

@media screen and (min-width: 780px){
	#fact4{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 15px;
		padding-right: 15px;
		margin-top: 170%;
		line-height: 14px;
		margin-left: 12%;
	}
	#fact4:hover{
		margin-top: 180%;
		margin-left: 12%;
	}
}  

@media screen and (min-width: 400px){
	#ribbon5{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 45%;
		margin-top: 52%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	}
	#ribbon5:hover{
		width: 47%;
	}
} 

@media screen and (min-width: 780px){
	#ribbon5{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 45%;
		width: 14%;
		margin-top: -5%;
		margin-left: 46%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	 #ribbon5:hover{
	 	height:50%;
	 	width: 14%;
	 }
}

@media screen and (min-width: 400px){
	#fact5{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		margin-top: 1px;
		padding-bottom: 5px;
		padding-right: 5px;
		margin-left: 10%;
		line-height: 10px;
	}
	#fact5:hover{
		margin-left: 12%;
	}
}

@media screen and (min-width: 780px){
	#fact5{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 15px;
		margin-top: 85%;
		line-height: 14px;
		margin-left: 12px;
	}
	#fact5:hover{
		margin-top: 100%;
		margin-left: 12%;
	}
} 

@media screen and (min-width: 400px){
	#ribbon6{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 90%;
		margin-top: 58%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	}
	#ribbon6:hover{
		width: 92%;
	}
} 

@media screen and (min-width: 780px){
	#ribbon6{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 90%;
		width: 14%;
		margin-top: -5%;
		margin-left: 49%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	 #ribbon6:hover{
	 	height:95%;
	 	width: 14%;
	 }
} 

@media screen and (min-width: 400px){
	#fact6{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		margin-top: 1px;
		padding-bottom: 5px;
		padding-right: 5px;
		margin-left: 60%;
		line-height: 10px; 
	}
	#fact6:hover{
		margin-left: 62%;
	}
}

@media screen and (min-width: 780px){
	#fact6{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 5px;
		margin-top: 280%;
		line-height: 14px;
		margin-left: 12%;
	}
	#fact6:hover{
		margin-top:295%;
		margin-left: 12%;
	}
}  

@media screen and (min-width: 400px){
	#ribbon7{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 65%;
		margin-top: 74%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	} 
	#ribbon7:hover{
		width: 67%;
	}
} 

@media screen and (min-width: 780px){
	#ribbon7{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 65%;
		width: 14%;
		margin-top: -5%;
		margin-left: 58%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	 #ribbon7:hover{
	 	height:70%;
	 	width: 14%;
	 }
} 

@media screen and (min-width: 400px){
	#fact7{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		margin-top: 1px;
		padding-bottom: 5px;
		padding-right: 5px;
		margin-left: 22%;
		line-height: 10px;
	}
	#fact7:hover{
		margin-left: 24%;
	}
}

@media screen and (min-width: 780px){
	#fact7{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 15px;
		margin-top: 170%;
		line-height: 14px;
		margin-left: 12%;
	}
	#fact7:hover{
		margin-top:185%;
		margin-left: 12%;
	}
} 

@media screen and (min-width: 400px){
	#ribbon8{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 80%;
		margin-top: 86%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	}
	#ribbon8:hover{
		width: 82%;
	}
} 

@media screen and (min-width: 780px){
	#ribbon8{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 80%;
		width: 14%;
		margin-top: -5%;
		margin-left: 75%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	 #ribbon8:hover{
	 	height:85%;
	 	width: 14%;
	 }
}  

@media screen and (min-width: 400px){
	#fact8{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		margin-top: 1px;
		padding-bottom: 5px;
		padding-right: 5px;
		margin-left: 32%;
		line-height: 10px;
	}
	#fact8:hover{
		margin-left: 34%;
	}
}

@media screen and (min-width: 780px){
	#fact8{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 15px;
		margin-top: 195%;
		line-height: 14px;
		margin-left: 12%;
	}
	#fact8:hover{
		margin-top: 210%;
		margin-left: 12%;
	}
} 

@media screen and (min-width: 400px){
	#ribbon9{
		display: inline-block;
		position: absolute;
		background-color: white;
		height: 12%;
		width: 34%;
		margin-top: 99%;
		margin-left: -15%;
		opacity: 0.9;
		box-shadow: 2px 2px grey;
	}
	#ribbon9:hover{
		width: 36%;
	}
} 

@media screen and (min-width: 780px){
	#ribbon9{ 
		position: absolute;
		display: inline-block;
		background-color: white;
		height: 26%;
		width: 14%;
		margin-top: -5%;
		margin-left: 79%;
		opacity: 0.9;
		box-shadow: 5px 5px grey;
	 }
	#ribbon9:hover{
		height:31%;
		width: 14%;
	}
} 

@media screen and (min-width: 400px){
	#fact9{
		display: inline-block;
		color: #F8842E;
		font-family: helvetica;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
		margin-top: 2px;
		padding-bottom: 5px;
		margin-left: 12%;
		line-height: 10px;
		padding-right: 5px;
	}
	#fact9:hover{
		margin-left: 12%;
	}
}

@media screen and (min-width: 780px){
	#fact9{
		display: inline-block;
		color: #6B8E23;
		font-family: helvetica;
		font-weight: bold;
		font-size: 15px;
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 15px;
		margin-top: 50%;
		line-height: 14px;
		margin-left: 12%;
	}
	#fact9:hover{
		margin-top: 70%;
		margin-left: 12%;
	}

}