/* Portfolio CSS
========================================================================== */
.gridder { overflow: hidden; margin: 0px; padding: 0px; list-style-type: none; font-size: 0; text-align: left; text-align: center; }
.gridder .gridder-list { display: inline-block; vertical-align: top; cursor: pointer; position: relative; width: 350px; margin-bottom: 0.5%; margin-right: 0.5%; }
.gridder .imageWidthProp { width: 450px; opacity: 1; }
.gridder .imageWidthProp:hover { opacity: 0.5;  transition: all 0.3s ease 0s; }
.gridder .gridder-list .image { background-color: #313131; background-size: cover; background-position: center; width: 350px; height: 250px; position: relative; }
.gridder .overlay { position: absolute; left: 10%; top: 10%; color: #FFF; line-height: 130%; text-align: left; }
.gridder .overlay .title { font-weight: 800; font-size: 16px; color: #FFF; }
.gridder .overlay .description { font-weight: 300; font-size: 14px; color: #FFF; }

.gridder .gridder-list, .gridder .gridder-show { }
.gridder .selectedItem:after { content: ' '; display: block; border-bottom: 10px solid #222; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0%; position: absolute; top: 101%; width: 0; left: 43%; margin-bottom: -4px; }
.gridder.hasSelectedItem .gridder-list:not(.selectedItem) { opacity: .2; }
.gridder-show { padding: 20px 35px; background: #f1f1f1; position: relative; display: block; float: left; width: 100%; margin-bottom: 0.5%; text-align: left; }
.gridder-show.loading{background:#EEE url("./images/loading-spin.svg") no-repeat center}
.gridder-content { display: none; }
.gridder-navigation .gridder-nav { height: 77px; padding: 0; position: absolute; width: 32px; z-index: 1; background-color: #454545; background-image: linear-gradient(top, #3e3e3e, #333); border: 1px solid #141414; border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 1px 1px 0 rgba(255, 255, 255, 0.03), -1px -1px 0 rgba(0, 0, 0, 0.02), inset 1px 1px 0 rgba(255, 255, 255, 0.05); color: #aaa !important; cursor: pointer !important; display: inline-block; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#303030',EndColorStr='#262626'); font-size: 11px; font-weight: bold; margin: 0 5px; outline: 0; text-align: center; text-decoration: none !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); -webkit-user-select: none; user-select: none; vertical-align: middle; white-space: normal; word-wrap: normal; top: 50%; margin-top: -40px; overflow: hidden; }
.gridder-navigation .gridder-nav span { display: block; bottom: 0; height: 23px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 14px; }
.gridder-navigation .gridder-nav.prev { left: -6px; }
.gridder-navigation .gridder-nav.prev span { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAXBAMAAADJv2OxAAAAMFBMVEX///+ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZnHHh8xAAAAD3RSTlMAESIzRFVmd4iZqrvM3e5GKvWZAAAAdElEQVQI12NgAAH2v2CKsf83mJb8vxBEMe3/KQCitf83gLn3n4Flff8FgCjW90/A3Pw/BiBK4v0lMHf+bwUw/R/CZVj/SwBq5kaIQD1UAfv7yxCBuH8OYJrl/VWIgM3/AjDNdP45REDq/0SI+9b/gghw/AUAn68l+4HFkZUAAAAASUVORK5CYII=) center no-repeat; }
.gridder-navigation .gridder-nav.next { right: -6px; -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.gridder-navigation .gridder-nav.next span { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAXBAMAAADJv2OxAAAAMFBMVEX///+ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZnHHh8xAAAAD3RSTlMAESIzRFVmd4iZqrvM3e5GKvWZAAAAdElEQVQI12NgAAH2v2CKsf83mJb8vxBEMe3/KQCitf83gLn3n4Flff8FgCjW90/A3Pw/BiBK4v0lMHf+bwUw/R/CZVj/SwBq5kaIQD1UAfv7yxCBuH8OYJrl/VWIgM3/AjDNdP45REDq/0SI+9b/gghw/AUAn68l+4HFkZUAAAAASUVORK5CYII=) center no-repeat; }
.gridder-navigation .gridder-nav:hover { background: #3d3d3d; }
.gridder-navigation .gridder-close { background: url(data:image/gif;base64,R0lGODlhFAAUAJEAAE1NTf///////wAAACH5BAEHAAIALAAAAAAUABQAAAIzBISpK+YMm5Enpodw1HlCfnkKOIqU1VXk55goVb2hi7Y0q95lfG70uurNaqLgTviyyUoFADs=) no-repeat center center; cursor: pointer; height: 30px; padding: 7px; position: absolute; right: 10px; top: 10px; width: 30px; z-index: 2; }
.gridder-navigation .gridder-close:hover { color: #3d3d3d; }
.site-footer { position: static; }
.site-footer { clear: both; }
.textBlock { position: absolute; bottom: 20px; left: 20px; padding: 10px; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); color: #fff; -webkit-transition: all 0.15s; -o-transition: all 0.15s; transition: all 0.15s; max-width: 80%; }
.textBlock h2 { color: #fff; margin: 0; font-weight: 700; text-transform: uppercase; text-align: left; }
.textBlock h3 { color: #fff; margin: 0; font-weight: 500; text-transform: capitalize;  text-align: left; }


@media all and (min-width: 768px) {
    .row { display: flex; flex-flow: row wrap; padding: 2%; }
    .staff .photo {  order: 1; width: 25%; text-align: center; }
    .portfolio .photo { order: 1; width: 65%; text-align: center; }
    .staff .content { order: 2; width: 75%; padding-left: 35px; padding-top: 50px; }
    .portfolio .content { order: 2; width: 35%; padding-left: 35px; padding-top: 50px; }
}

@media all and (max-width: 768px) {
    .row { display: flex; flex-flow: column wrap; }
    .photo { display: none; order: 1; width: 100%; text-align: center; }
    .content { order: 2; width: 100% ; }
    .content h2 { text-align: center; }
    .content h3 { text-align: center; }
}

.img-fluid { padding: 10px; opacity: 1; width: 350px; height: 350px; max-width: 100%; object-fit: cover }
.img-fluidProp { padding: 10px; opacity: 1; width: 450px; height: 350px; }
.img-fluid:hover { opacity: 0.5;  transition: all 0.3s ease 0s; } 
.imgcol-fluid { padding: 2%; }
.imgSpacer { padding-right: 20px; padding-top: 10px; }

@media screen and (min-width: 700px){
    /*
    .gridder-list{width:15.8333333333%}
    .gridder-list:nth-child(n){margin-bottom:1%;margin-right:1%}
    .gridder-list:nth-of-type(6n){margin-right:0;margin-bottom:0}
    */
}
/* Media Queries
========================================================================== */


@media handheld, only screen and (max-width: 1440px) {

}

@media handheld, only screen and (max-width: 1280px) {


}

@media handheld, only screen and (max-width: 1024px) {

}



@media handheld, only screen and (max-width: 768px) {

}

@media handheld, only screen and (max-width: 420px) {

}