/*

****************************

 PVII Flex Grid Magic

 by Project Seven Development

 www.projectseven.com

 CSS Styles

*****************************

*/



.p7FGM {

	-webkit-flex-flow: row wrap;

	flex-flow: row wrap;

	display: -webkit-box;

	display: flex;

}



.p7FGM .fgm-section {

	list-style-type: none;

	-webkit-flex-grow: 1;

	flex-grow: 1;

	margin: 5px;

	padding: 10px;

	position: relative;

}



/*

******************************

           Colors

******************************

*/

.p7FGM .fgm-section {

	background-color: rgb(180,180,160);

	color: #000;

}

.p7FGM.fgm-black .fgm-section {

	background-color: #151515;

	color: #FFF;

}

.p7FGM.fgm-wine .fgm-section {

	background-color: #C16162;

	color: #000;

}

.p7FGM.fgm-white .fgm-section {

	background-color: #FFF;

	color: #000;

}

.p7FGM.fgm-blue .fgm-section {

	background-color: #699EBB;

	color: #000;

}

.p7FGM.fgm-teal .fgm-section {

	background-color: #6FA4A8;

	color: #000;

}

/*

********************************

     Section Text Styles

********************************

*/

.p7FGM .fgm-section a {

	border-bottom: 1px dotted;

	transition: all linear .5s;

	color: #FFF;

	text-decoration: none;

}

.p7FGM .fgm-section a:hover {

	border-bottom: 1px solid;

}

.p7FGM.fgm-black .fgm-section a {

	color: #FFF;

}

.p7FGM.fgm-white .fgm-section a {

	color: #000;

}

.p7FGM.fgm-blue .fgm-section a {

	color: #000;

}

.p7FGM.fgm-teal .fgm-section a {

	color: #000;

}

.fgm-section .fgm-img a,

.fgm-section .fgm-img a:hover {

	border: none;

	display: block;

}

.fgm-section h1,

.fgm-section h2,

.fgm-section h3,

.fgm-section h4,

.fgm-section h5 {

	margin: 0px;

}



/*

********************************

      Fit Image To Box

********************************

*/

.fgm-section.fgm-fit-image {

	background-repeat: no-repeat;

	background-position: 50%;

	background-size: cover;

}



/*

********************************

      Vertical Center

********************************

*/

.fgm-section.fgm-vertical-center {

	display: inline-flex;

	justify-content: center;

	flex-direction: column;

}





/*

********************************

       CONTENT AREAS

********************************

*/

.p7FGM .fgm-content {

	font-size: 85%;

	padding: 10px;

}



.fgm-center {

	text-align: center;

}

.fgm-right {

	text-align: right;

}



.p7FGM .fgm-content p {

	margin: 6px 0px 0px 0px;

}



.fgm-img {

	text-align: center;

}



.p7FGM img {

	width: auto;

	height: auto;

	max-width: 100%;

	vertical-align: bottom;

	position: relative;

}

.p7FGM img:hover {}





.p7FGM.fgm-rounded img {

	border-radius: 4px;

}



.p7FGM li img:hover {

	z-index: 10;

	opacity: 1;

}



/*

**********************************

        Content Overlay

**********************************

*/

.fgm-content.fgm-overlay {

	position: absolute;

	left: 0px;

	z-index: 10;

	width: 100%;

	box-sizing: border-box;

	background-color: #181818;

	background: rgba(0,0,0,0.8);

	color: #FFF;

}

.fgm-content.fgm-overlay.fgm-cnt-bottom {

	bottom: 0px;

}

.fgm-content.fgm-overlay.fgm-cnt-top {

	top: 0px;

}

.fgm-rounded .fgm-content.fgm-overlay.fgm-cnt-bottom {

	border-radius: 0px 0px 4px 4px;

}

.fgm-rounded .fgm-content.fgm-overlay.fgm-cnt-top {

	border-radius: 4px 4px 0px 0px;

}





/*

No Script Rules. None seem to be necessary now.

*/

.p7FGM.fgm-noscript {}



/*

**********************************

     Legacy Browser Rules

**********************************

*/

.p7FGM.fgm-legacy {

	text-align: center;

}

.p7FGM.fgm-legacy .fgm-section {

	display: inline-block;

	vertical-align: middle;

	box-sizing: border-box;

}



/*

***********************************

        Style Options 

***********************************

*/

.fgm-rounded .fgm-section {

	border-radius: 5px;

}

.fgm-borders .fgm-section {

	border: 1px solid;

}

.fgm-borders .fgm-img img {

	border: 1px solid;

}

.fgm-shadow .fgm-section {

	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.6);

}

.fgm-no-pad .fgm-section {

	padding: 0px;

}

/*

***********************************

Use .no-pad rule in the User Class 

box to create exceptions for 

specific boxes, images, 

or content areas

***********************************

*/

.no-pad {

	padding: 0px !important;

}