/*
****************************
 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;}