/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 14/06/2016, 4:50:31 PM
    Author     : duncanc
*/

/*
* ----------------------------------------------------------
*
* Float Fix - Canvas
*
* ----------------------------------------------------------
*/

.feature-tile-canvas {
    font-size: 0;    
    position: relative;
    z-index: 0;
    background-color: transparent;
    margin:  0;
    height: 100%;

}

.feature-tile-canvas.row::before {
    display: inline-block;
}

.feature-tile-container::before,
.module-canvas::before {
    display: inline-block !important;
}


.feature-tile-canvas > * {
    font-size: 16px;
    font-size: 1rem;
    float: none;
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

.feature-tile-canvas > .feature-tile-item {
    float: none;
}

.sidebar .feature-tile-canvas {
    margin: 0;
    white-space: nowrap;
}

/*
* -----------------------------------------------------------------------------
* 
* Background Wrapper
* 
* -----------------------------------------------------------------------------
*/


.id-feature-thumbnail-wrapper {    
    display: block;
    position: relative;
}

.id-feature-thumbnail-wrapper::before {
    padding-bottom: 60%;
    content: '';
    display: block;
}


@media screen and (min-width: 768px) {
    [data-count="2"] .id-feature-thumbnail-wrapper::before {
        padding-bottom: 60%;
    }
}

/*
* -----------------------------------------------------------------------------
* 
* Background
* 
* -----------------------------------------------------------------------------
*/

.feature-tile-background {
    background-position: center center;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



/*
* -----------------------------------------------------------------------------
* 
* _Feature Tile Default
* 
* -----------------------------------------------------------------------------
*/

.feature-tile--default.feature-tile-item {
    padding: 0;
}


.feature-tile--default .feature-tile-background,   
.feature-tile--thumbnail .feature-tile-background {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    padding: 15px;
}


/*
* ----------------------------------------------------------
*
* feature-tile--thumbnail
*
* ----------------------------------------------------------
*/



.feature-tile--thumbnail .feature-tile-background {
    background-position: center center;
    -webkit-transition: all 250ms ease-out .1s;
    -moz-transition: all 250ms ease-out .1s;
    -o-transition: all 250ms ease-out .1s;
    transition: all 250ms ease-out .1s;
}

.feature-tile--thumbnail:hover .feature-tile-background,
.feature-tile--thumbnail:focus .feature-tile-background,
.feature-tile--thumbnail:active .feature-tile-background {
    /*opacity: 0.75;*/
    -webkit-transition: all 250ms ease-out .1s;
    -moz-transition: all 250ms ease-out .1s;
    -o-transition: all 250ms ease-out .1s;
    transition: all 250ms ease-out .1s;
}


.no-flexbox .feature-tile--thumbnail .feature-tile-background::after {
    padding-top: 20%;
}                                                               

.feature-tile--thumbnail .feature-tile-background::after {
    content: '\f054';
    font-size: 1em;
    font-family: fontAwesome;
    color: transparent;
    background-color: rgba(0,0,0,0);
    width: 100%;
    display: table-cell;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-align: center;
    -o-align-content: center;
    -ms-align-content: center;
    -moz-align-content: center;
    -webkit-align-content: center;
    align-content: center;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all 500ms ease-in-out .1s;
    -moz-transition: all 500ms ease-in-out .1s;
    -o-transition: all 500ms ease-in-out .1s;
    transition: all 500ms ease-in-out .1s;
}

.feature-tile--thumbnail:hover .feature-tile-background::after,
.feature-tile--thumbnail:focus .feature-tile-background::after,
.feature-tile--thumbnail:active .feature-tile-background::after {
    background-color: rgba(14, 7, 60,0.6);
    color: #fff;
    -webkit-transition: all 500ms ease-in-out .1s;
    -moz-transition: all 500ms ease-in-out .1s;
    -o-transition: all 500ms ease-in-out .1s;
    transition: all 500ms ease-in-out .1s;
    text-decoration: none;
}


.feature-tile-content h4 {
    color: inherit;
    text-transform: uppercase;
}

.feature-tile--thumbnail .feature-tile--excerpt {
    font-size: 0.8em;
    -webkit-box-flex: 1;    
    -moz-box-flex: 1;  
    -ms-box-flex: 1;  
    -moz-flex:1 1 100%;
    -webkit-flex:1 1 100%;
    -ms-flex:1 1 auto;
    flex: 1 1 100%;
}

.feature-tile--thumbnail > a {
    text-decoration: none;
    width: 100%;
    /*min-height: 100px;*/
    /*height: 50%;*/
}

/*
* -----------------------------------------------------------------------------
* 
* _Content
* 
* -----------------------------------------------------------------------------
*/


.feature-tile-content>* {
    width: 100%;
}

.feature-tile--default .feature-tile-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    padding: 15px;
    text-align: center;
}

.feature-tile--fa-icon .feature-tile-content,
.feature-tile--default .feature-tile-content,
.feature-tile-thumbnail-overlay .feature-tile-content {

    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;



    -ms-flex-wrap: wrap;
    -ms-flex-direction: row;

    -ms-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;


    -ms-flex-align: center;
    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    -ms-flex-align: center;
    -o-align-content: center;
    -ms-align-content: center;
    -moz-align-content: center;
    -webkit-align-content: center;
    align-content: center;

    -ms-flex-pack: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.feature-tile-thumbnail .feature-tile-content {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;

    -ms-flex-wrap: wrap;
    -ms-flex-direction: row;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;


    -ms-flex-align: center;
    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    -ms-flex-align: center;
    -o-align-content: center;
    -ms-align-content: center;
    -moz-align-content: center;
    -webkit-align-content: center;
    align-content: center;

    -ms-flex-pack: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-box-flex: 1;    
    -moz-box-flex: 1;  
    -ms-box-flex: 1;  
    -moz-flex:1 1 100%;
    -webkit-flex:1 1 100%;
    -ms-flex:1 1 auto;
    flex: 1 1 100%;
}



.feature-tile--default .feature-tile-background .feature-tile-content {
    background-color: rgba(0,0,0,0.15);
    background-image: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.5) 80%);
    background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.5) 80%);
    background-image: radial-gradient(ellipse at center, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.5) 80%);
    -webkit-transition: all 250ms ease-out .1s;
    -moz-transition: all 250ms ease-out .1s;
    -o-transition: all 250ms ease-out .1s;
    transition: all 250ms ease-out .1s;
}

.feature-tile--default .current-page-tile .feature-tile-background .feature-tile-content,
.feature-tile--default .feature-tile-background:hover .feature-tile-content,
.feature-tile--default .feature-tile-background:active .feature-tile-content,
.feature-tile--default .feature-tile-background:focus .feature-tile-content {
    background-color: rgba(0, 150, 200, 0.5);
    background-image: none;
    -webkit-transition: all 250ms ease-out .1s;
    -moz-transition: all 250ms ease-out .1s;
    -o-transition: all 250ms ease-out .1s;
    transition: all 250ms ease-out .1s;
}

.feature-tile-content h4 {
    color: #fff;
    text-transform: uppercase;
}


/*
* ----------------------------------------------------------
*
* feature-tile--Icon
*
* ----------------------------------------------------------
*/


.feature-tile-fa-icon-container .feature-tile-content {
    border-radius: 4px;
    position: static;
    box-shadow: none;
    width: 100%;
    padding: 0;
}

.feature-tile-fa-icon-container .fa {
    font-size: 72px;
}


/*
* ----------------------------------------------------------
*
* feature-tile--SVG
*
* ----------------------------------------------------------
*/

.feature-tile-wrapper.svg-icon > .feature-tile-container > *, 
.feature-tile-wrapper.svg-icon > .feature-tile-container { 
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: nowrap;
    -ms-flex-direction: row;

    -ms-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.feature-tile-wrapper.svg-icon > .feature-tile-container > *, .feature-tile-wrapper.svg-icon > .feature-tile-container {
    -ms-flex-wrap: wrap;
    -ms-flex-direction: row;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}


@media screen and (min-width: 992px) {

}


.feature-tile--svg-icon  {
    text-align: center;
}


.feature-tile--svg-icon .feature-tile-title {
    width: 100%;
}

.feature-tile--title,
.feature-tile--excerpt,
.feature-tile--read-more {
    width: 100%;
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .feature-tile-thumbnail .feature-tile-content {
        position: relative;
        padding-bottom: 50px;
    }

    .feature-tile-thumbnail .feature-tile-content > .feature-tile--read-more {
        position: absolute;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 0;
    }
}

.feature-tile--svg-icon .feature-tile-background > .feature-tile-content {
    width: 100%;
    /*display: block;*/
    -webkit-box-flex: 1;    
    -moz-box-flex: 1;  
    -ms-box-flex: 1;  
    -moz-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 auto;
    flex: 1 1 100%;
}

.feature-tile-canvas  {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -ms-flex-direction: row;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;



    -o-align-items: stretch;
    -ms-align-items: center;
    -moz-align-items: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;

    -o-align-content: stretch;
    -ms-align-content: stretch;
    -moz-align-content: stretch;
    -webkit-align-content: stretch;
    align-content: stretch;

    -o-justify-content: stretch;
    -ms-justify-content: stretch;
    -moz-justify-content: stretch;
    -webkit-justify-content: stretch;
    justify-content: stretch;
}

.feature-tile-canvas > .feature-tile-item  {
    display: inline-block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -ms-flex-direction: row;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-flex: 1;    
    -moz-box-flex: 1;  
    -ms-box-flex: 1;  
    -moz-flex:1 1 100%;
    -webkit-flex:1 1 100%;
    -ms-flex:1 1 auto;
    flex: 1 1 100%;
    width: 100%;
    margin: 15px 0;
}


@media screen and (min-width: 768px) {
    .feature-tile-canvas > .feature-tile-item  {
        -webkit-box-flex: 1;    
        -moz-box-flex: 1;  
        -ms-box-flex: 1;  
        -moz-flex:1 1 50%;
        -webkit-flex:1 1 50%;
        -ms-flex: 1 1 auto;
        flex: 1 1 50%;
        width: 50%;
    }
}


@media screen and (min-width: 992px) {
    .feature-tile-canvas > .feature-tile-item  {
        -webkit-box-flex: 1;    
        -moz-box-flex: 1;  
        -ms-box-flex: 1;  
        -moz-flex: 1 1 25%;
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 auto;
        flex: 1 1 25%;
        width: 25%;
    }

}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .feature-tile-canvas > .feature-tile-item  {
        flex: 1 1 auto !important;
        flex-flow: row wrap !important;
    }
}


.feature-tile--svg-icon .feature-tile-background {
    width: 100%;
    display: block;
    text-align: center;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
    -ms-flex-direction: row;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    -ms-flex-flow: row wrap;
    -moz-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;

    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    -o-align-content: center;
    -ms-align-content: center;
    -moz-align-content: center;
    -webkit-align-content: center;
    align-content: center;

    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.feature-tile-background > .feature-tile-content {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: nowrap;
    -ms-flex-direction: row wrap;
    -ms-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;

    -ms-flex-align: space-between;
    -o-align-content: space-between;
    -ms-align-content: space-between;
    -moz-align-content: space-between;
    -webkit-align-content: space-between;
    align-content: space-between;
}

.feature-tile-background > .feature-tile-content>img[src*=".svg"] {
    width: 50%;
    margin: 0 auto;
}

.feature-tile-background > .feature-tile-content>.feature-tile--excerpt {
    -webkit-box-flex: 1;    
    -moz-box-flex: 1;  
    -ms-box-flex: 1;  
    -moz-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
}

.feature-tile--read-more {
    margin: 10px 0 0;
}

.feature-tile-background svg path {
    fill: #3f70b7;
}

.current-page-tilex .feature-tile-background svg path,
.feature-tile-background:hover svg path,
.feature-tile-background:active svg path,
.feature-tile-background:focus svg path {
    fill: #8BC441;
}

svg, img[src*=".svg"] {
    width: 100%;
    height: auto;
}

/*
* -----------------------------------------------------------------------------
* 
* _
* 
* -----------------------------------------------------------------------------
*/

.feature-tile--image-svg-icon::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.feature-tile-background,
feature-tile--image-svg-icon,
.feature-tile-background svg,
.feature-tile-background svg path {
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.feature-tile--image-svg-icon {
    position: relative;
    border: 2px solid #fff;
    display: block;
    width: 100%;
    border-radius: 50% 50%;
}

.feature-tile-background:hover .feature-tile--image-svg-icon ,
.feature-tile-background:focus .feature-tile--image-svg-icon ,
.feature-tile-background:active .feature-tile--image-svg-icon {
    border: 4px solid #fff;
    display: block;
    border-radius: 50% 50%;
    background-color: #fff;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.feature-tile--image-svg-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 66%;
    margin: auto;
}