@charset "utf-8";
/* CSS Document */
.content a:link, .content a:visited{
	text-decoration: none;
}
.opm-panel-content::before{
  content: "";
  background: -webkit-linear-gradient(left top, rgba(28,38,116,0.8) 0% ,transparent 60%);
  background: -ms-linear-gradient(left top, rgba(28,38,116,0.8) 0% ,transparent 60%);
  background: linear-gradient(left top,rgba(28,38,116,0.8) 0%,transparent 60%);
  position: absolute;
  display: block;	
  width: 100%;
  top: 0;
  bottom: 0;
}
.opm-panel-content.no-grad::before{
  background: -webkit-linear-gradient(left top, rgba(28,38,116,0.8) 0% ,transparent 0%);
  background: -ms-linear-gradient(left top, rgba(28,38,116,0.8) 0% ,transparent 0%);
  background: linear-gradient(left top,rgba(28,38,116,0.8) 0%,transparent 0%);
}

.opm-panel-content .imageTitle{
	position: absolute;
	color: white;
	font-size: 1.5em;
    top:20px; /* in conjunction with left property, decides the text position */
    left:20px;
    width:80%; /* optional, though better have one */
	line-height: 80%;
}

.opm-panel-content .imageSubTitle{
	position: absolute;
	color: white;
	font-size: 1em;
	font-style: italic;	
    top:60px; /* in conjunction with left property, decides the text position */
    left:60px;
    width:80%; /* optional, though better have one */
}
.opm-panel-content a.imageButton{
	position: absolute;	
    bottom:15px; /* in conjunction with left property, decides the text position */
    right:15px;	
	padding: 5px 20px;
	background: rgba(153,0,51,1);
	border-radius: 5px;
	transition: all 2s ease;
	font-size: 1.1em;
	color: white;	
	text-decoration: none;	
}	
.opm-panel-content a.imageButton:hover{	
	background: rgba(0,0,0,0); /*makes transparent*/
	background: rgba(28,38,116,1);
	box-shadow: inset 0 0 0 3px grey;		
}

	@media (min-width: 680px) {
		.opm-panel-content .imageTitle{
			font-size: 2em;
			top:50px; /* in conjunction with left property, decides the text position */
			left:50px;
			width:80%; /* optional, though better have one */
		}
		.opm-panel-content .imageSubTitle{
			font-size: 1.2em;
			top:100px; /* in conjunction with left property, decides the text position */
			left:100px;
			width:80%; /* optional, though better have one */
		}
		.opm-panel-content a.imageButton{
			bottom: auto;
			right: auto;
			top: 140px; 
			left: 100px;	
			padding: 5px 20px;	
		}	
    }
	@media (min-width: 780px) {	
	
		.opm-panel-content .imageTitle{
			font-size: 2em;
			top:50px; /* in conjunction with left property, decides the text position */
			left:50px;
			width:80%; /* optional, though better have one */
		}
		.opm-panel-content .imageSubTitle{
			font-size: 1.2em;
			top:100px; /* in conjunction with left property, decides the text position */
			left:120px;
			width:80%; /* optional, though better have one */
		}
		.opm-panel-content a.imageButton{
			bottom: auto;
			right: auto;
			top: 140px; 
			left: 120px;	
			padding: 5px 20px;	
		}	
    }
.opm-panel-content .no-grad{
  background: aliceblue;
}