/* Website Thumbnails - Used on Home & Websites Stream */

#homepageWebsiteThumbs {border-top: 10px solid #fff;background: #0086C2;}
.projectThumbList {margin: 0;padding: 0;list-style: none;background-color: #0086C3;position: static;}
.projectThumbList li {display: block;width: 20%;float: left;border: 1px solid #FFF;}
.projectThumbList .owl-item li {width:100%;float:none;}
.projectThumbList--stream li { width: 14.2857%; }
.projectThumbList .projectThumbFillerLI { display: none; }
.projectThumbFillerLI .projectThumbLink { text-decoration: none; }
.projectThumbFillerLI .projectThumbLink span { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; text-align: center; font-family: "Caviar Dreams" , sans-serif; font-size: 3vw; line-height: 1.3; height: 2.6em; }
.projectThumbList a { display: block; position: relative; width: 100%; height: 100%; top: 0; left: 0; color: white; padding-bottom: 100%; overflow: hidden; }
.projectImgWrap { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
.projectImgOverlay { position: absolute; height: 100%; width: 100%; background: rgba(0, 134, 194, 0.75); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block; z-index: 1; }
img.websiteThumb { width: 100%; display: block; }
.projectThumbList a:hover .projectImgOverlay, .projectThumbList a:focus .projectImgOverlay { background: rgba(0, 134, 194, 0); }
.projBlackFade { position: absolute; bottom: 0; width: 100%; height: 75%; left: 0; opacity: 0; display: block; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 17%,rgba(0,0,0,0.25) 42%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.9) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 17%,rgba(0,0,0,0.25) 42%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); }
.projectThumbList a:hover .projBlackFade, .projectThumbList a:focus .projBlackFade { opacity: 1; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.websiteLogoWrap { display: block; width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); z-index: 1; }
.websiteLogo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; max-width: 80%; max-height: 80%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block; }
.projectThumbList a:hover .websiteLogoWrap, .projectThumbList a:focus .websiteLogoWrap { -webkit-transform: translateY(5%); -ms-transform: translateY(5%); transform: translateY(5%); }

#homepageWebsitesMobile { display:none;float:left; width:100%; position:relative; height:auto;}
#homepageWebsitesMobile img { width:100%; float:left;}
img#mobwebsiteLinkH { position:absolute; top:0; left:0;z-index:1; opacity:0;-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#homepageWebsitesMobile:hover img#mobwebsiteLinkH{ opacity:1;}

@media only screen and (max-width: 1700px) {
	.projectThumbList--stream li { width: 16.666%; }
}
@media only screen and (max-width: 1200px) {
	.projectThumbList li { width: 25%; }
	.projectThumbList--stream li { width: 20%; }
	.projectThumbList .projectThumbFillerLI { display: block; }
}
@media only screen and (max-width: 1000px) {
	.projectThumbList--stream li { width: 25%; }
}
@media only screen and (max-width: 640px) {
	.projectThumbList li { width: 33.333%; }
	.projectThumbList .projectThumbFillerLI { display: none; }
}

@media only screen and (max-width: 500px) {
    #homepageWebsitesMobile { display:block;}
    .Home .projectThumbList.group { display:none;}
}

@media only screen and (max-width: 480px) {
	.projectThumbList--stream li { width: 50%; }
}