/*
 * FILo <> Facebook Image Loader jQuery Plugin v1.0
 * http://www.berlinpix.com/filo
 *
 * Copyright 2014, BerlinPix.com
 * licensed under the LGPL license.
 *
 * Date: 2014-01-22
 */
 
 /*
@font-face {font-family:'Squada One'; font-style:normal; font-weight:400; src:local('Squada One'), local(SquadaOne-Regular), url(http://themes.googleusercontent.com/static/fonts/squadaone/v2/DIbfqh10Zkwc_Qd08Y0saRsxEYwM7FgeyaSgU71cLG0.woff) format(woff)}
*/
.filo {position:relative;  width:100%; }
.filo a img {border:none}
.filo_loader {opacity:.7; left:50%; top:50%; position:fixed; z-index:4}
.clear {clear:both}

.filo_overlay {position:fixed; width:100%; height:100%; z-index:5; top:0; left:0}
.filo_overlay .filo_overlay_background {position:absolute; width:100%; height:100%; z-index:5; top:0; left:0; }
.filo_overlay_container {position:relative; left:48.5%; top:50%; background:#fff; box-shadow:5px 5px 15px #222; display:none; z-index:6; border:#fff solid 17px}
.filo_overlay img.filo_full_picture {z-index:1}
.filo_overlay_container_left {width:50%; height:100%; opacity:0.4; position:absolute; left:0; top:0; background-position:left center; background-repeat:no-repeat; cursor:pointer; z-index:2; background:url(img/blank.gif)}
.filo_overlay_container_right {width:50%; height:100%; opacity:0.4; position:absolute; right:0; top:0; background-position:right center; background-repeat:no-repeat; cursor:pointer; z-index:2; background:url(img/blank.gif)}
.filo_overlay_container_close {opacity:1; position:absolute; right:0; top:0; cursor:pointer; display:none; z-index:2}
.filo_overlay_container .picture_counter {bottom:-50px; width:100%; text-align:center; position:absolute; height:25px}
.filo_overlay_container .picture_counter span {text-align:center; border-radius:7px; font-weight:700; color:#FFF; background:#000; white-space:nowrap; padding:3px 12px}

.filo .thumbs .thumb .filoinner {width:100%; height:100%; overflow:hidden}
.filo .thumbs .thumb .filoinner a {display:block; height:100%}
.filo .thumbs .thumb .filoinner .picture {min-height:100%; min-width:100%; }

.filo .album  {float:left;  }
.filo .album .title {margin:10px 0 10px 0; padding:0; width:90%;  }

.template_1 .album {height:auto;  margin:0 1% 10px 0}
.template_1 .album .title {text-align:left;  margin:0;  }
.template_1 .thumbs .thumb {background:#ccc; float:left; margin-right:10px; margin-bottom:10px; width:87px; height:87px}
.template_1 .thumbs .filoinner {width:100%; height:100%; border:1px dashed #555; overflow:hidden; box-shadow:0 6px 4px #777}

.template_2 .album {max-width:500px;  width:47%; }
.template_2 .album .title {}
.template_2 .thumbs .thumb {background:none repeat scroll 0 0 #FFF; border:1px solid #BBB; box-shadow:0 8px 4px #CCC; height:87px; position:absolute; width:87px; padding:5px 5px 13px 0;  z-index:1; top:10px; }
.template_2 .thumbs .thumb_1 {left:-3%;  transform:rotate(-15deg); }
.template_2 .thumbs .thumb_2 {margin-left:23%;  z-index:2}
.template_2 .thumbs .thumb_3 {margin-left:50%;   transform:rotate(15deg); }
.template_2 .thumbs .thumb_4 {margin-left:30%;   transform:rotate(8deg); }
.template_2 .thumbs .thumb_5 {margin-left:60%;   transform:rotate(-12deg); }

.template_3 .album {height:250px;  max-width:500px;  width:48%; }
.template_3 .album .title {margin-bottom:20px; }
.template_3 .thumbs .thumb {background:#fff; position:absolute; width:87px; height:87px; box-shadow:4px 3px 3px #333; padding:5px 5px 13px;  z-index:1; }
.template_3 .thumbs .thumb_1 {left:23%;  transform:rotate(-43deg);  top:10px; }
.template_3 .thumbs .thumb_2 {margin-left:40%;  transform:rotate(13deg); }
.template_3 .thumbs .thumb_3 {margin-left:50%;  transform:rotate(23deg); }
.template_3 .thumbs .thumb_4 {left:12%;  transform:rotate(-5deg);  top:40px}
.template_3 .thumbs .thumb_5 {margin-left:40%; z-index:2; top:40px}
.template_3 .thumbs .thumb_6 {margin-left:30%;  transform:rotate(-176deg);  top:30px}
.template_3 .thumbs .thumb_7 {left:-5%;  transform:rotate(99deg);  top:20px; }
.template_3 .thumbs .thumb_8 {margin-left:2%;  transform:rotate(125deg); z-index:2; top:70px}
.template_3 .thumbs .thumb_9 {margin-left:36%;  transform:rotate(150deg);  top:70px}
.template_3 .thumbs .thumb_10 {margin-left:50%;  transform:rotate(-66deg);  top:70px}

.template_4 .album {min-width: 320px;  background:url(img/shadow_template_4.png) no-repeat scroll 0 95% transparent;  background-size: 100% auto, auto;  width:38%;  margin:0 1% 20px 0;  padding:25px 6% 28px 3%; }
.template_4 .album .title {}
.template_4 .thumbs .thumb {background:#ccc; float:left; margin-right:2%; margin-bottom:3px; width:22%;  max-width:80px; height:60px}
.template_4 .thumbs .filoinner {width:100%; height:100%; border:1px solid #333; overflow:hidden}

.template_1,.template_2,.template_3,.template_4 {}
.template_1 .thumbs {position:relative; margin-top:10px; height:130px}
.template_4 .thumbs {position:relative; margin-top:10px; }
.template_2 .thumbs,.template_3 .thumbs {position:relative; margin-left:35px;  width:100%;  height:130px}
.template_2 .thumbs .thumb:hover,.template_3 .thumbs .thumb:hover {z-index:3}
.template_2 .thumbs .filoinner,.template_3 .thumbs .filoinner {width:100%; height:100%; border:solid #eee 1px; overflow:hidden}


/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 540px)  {
	.filo_overlay_container {border-width:8px;  left:47%; } /*border and close*/
	.filo .album  { }
	
	.template_1 .album {height:auto;  width:101% ! important;  margin:0 0 20px 0}
	.template_1 .thumbs .thumb {margin-right:2%; max-width:87px;  width:22.8%; }
	
	.template_2 .album {width:90%;  margin:0 0 20px 0}
		
	.template_3 .album {height:260px;  width:105%; }
	.template_4 .album {margin-left:0%;  width:90% }


}