/* 
  ------------------------------------------------
  PVII CSS Image Gallery Magic 2
  Copyright (c) 2013 Project Seven Development
  www.projectseven.com
  Style Theme: 04
  ------------------------------------------------
*/

/*Root IGM Container*/
.p7IGM04 {
	margin: 0 auto;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
}
.p7IGM04 a:focus {
	outline: none;
}
/*IGM Wrappers Line Height Reset for Stability*/
.p7IGM04_layout, .p7IGM04_layout div {
	line-height: 1;	
}
/*The Main Layout Container. Mozilla shadows reset to small spread to work around known bugs up to Firefox 13.*/
.p7IGM04_layout {
	overflow: hidden;
	position: relative;
	z-index: 2;
}
/*Thumbnail Scrolling List*/
.p7IGM04_thumbswrapper {
	position: relative;
	border: 1px solid;
	border-color: #111;
	padding: 0px;
	background-color: #111;
	border-radius: 6px 6px 6px 6px;
	box-shadow: 0px 0px 20px #000;
	z-index: 1;
	margin: 0px 10%;
}
.p7IGM04_thumbswrapper.IGM-thumbs-top {
	margin: 0px 0px 12px 0px;
	border-radius: 6px;
}
.p7IGM04_thumbsviewport {
	padding: 0px;
	overflow: hidden;
	position: relative;
	z-index: 10;
}
.p7IGM04_thumbsglidewrapper {
	position: relative;
	overflow: hidden;
	z-index: 9;
}
.p7IGM04_thumbslist {
	margin: 0px;
	padding: 0px;
}
.p7IGM04_thumbslist li {
	list-style-type: none;
	margin: 6px 0px;
	word-spacing: normal;
	display: inline;
}
.p7IGM04_thumbslist img {
	border: none;
	vertical-align: middle;
}
.p7IGM04_thumbslist a {
	padding: 3px;
	border: 1px solid;
	border-color: #444;
	display: inline-block;
}
.p7IGM04_thumbslist a:hover {
	border-color: #4FB9FF;
}
.p7IGM04_thumbslist a.thumb_down {
	border-color: #40D7AA;
	border-style: solid;
}
.p7IGM04_thumbslist li:first-child a {
	margin-left: 6px;
}
.p7IGM04_thumbslist li:last-child a {
	margin-right: 6px;
}
/*Thumbnail Presentation when set to No Scrolling*/
.p7IGM04_thumbswrapper.IGM-no-scroll {
	padding: 6px 0px;
	margin: 0px;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0px;
	border: none;
	text-align: center;
}
.IGM-no-scroll .IGM-thumbs  {
	white-space: normal !important;
}
.p7IGM04_thumbswrapper.IGM-no-scroll.IGM-thumbs-top {
	text-align: center;
}
.p7IGM04_thumbswrapper.IGM-no-scroll .p7IGM04_thumbslist a {
	margin: 3px 0px !important;
	border: 1px solid;
	border-color: #444;
}
.p7IGM04_thumbswrapper.IGM-no-scroll .p7IGM04_thumbslist a:hover {
	border-color: #000000;
	background-color: #000;
}
.p7IGM04_thumbswrapper.IGM-no-scroll .p7IGM04_thumbslist a:hover {
	border-color: #000000;
}
.p7IGM04_thumbswrapper.IGM-no-scroll .p7IGM04_thumbslist a.thumb_down, 
.p7IGM04_thumbswrapper.IGM-no-scroll .p7IGM04_thumbslist a.thumb_down:hover {
	border-color: #CC3300 !important;
	background-color: transparent !important;
}

.p7IGM-no-thumbs, .IGMno-display {
	display:none;
}
/*Thumbnail Scroller Left and Right Arrows*/
.p7IGM04_arrows {
	font-family: Georgia, "Times New Roman", Times, serif;
}
.IGM-arrows {
	display: none;
}
.p7IGM04_arrows .arrow-left, .p7IGM04_arrows .arrow-right {
	width: 50px;
	text-align: center;
	display: table;
	z-index: 2;
	background-color: #333;
	box-shadow: inset 0px 0px 30px #000000;
}
.p7IGM04_arrows .arrow-left {
	float: left;
	position: relative;
	border-right: 1px solid #000;
	z-index: 60;
	border-radius: 0px 0px 0px 5px;
}
.p7IGM04_arrows .arrow-right {
	float: right;
	position: relative;
	border-left: 1px solid #000;
	z-index: 60;
	border-radius: 0px 0px 5px 0px;
}
.p7IGM04_arrows .arrow-left a, .p7IGM04_arrows .arrow-right a {
	color: #666;
	text-decoration: none;
	font-size: 3em;
	display: table-cell;
	vertical-align: middle;
	padding: 3px;
}
.p7IGM04_arrows a:hover {
	color: #999;
}
.p7IGM04 a.arrow-off {
	color: #444;
	cursor: default;
}
/*Full Size Image Strutures*/
.p7IGM04_FSwrapper {
	position: relative;
	padding: 0px;
	overflow: hidden;
	border: 1px solid;
}

.p7IGM04_image {
	zoom: 1;
}
.p7IGM04_FSimage {}
.p7IGM04_FSimage, .p7IGM04_FSimage img {

}
.p7IGM04_FSimage img {
	display: block;
	border: none;
	max-width: 100%;
}
/*Caption and Description*/
.IGM-cap-overlay-top {
	position: absolute;
	z-index: 9;
	background-color: #111;
	background: rgba(0,0,0,.75);
	color: #CCC;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 0px 0px 30px #000;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	top: 0px;
}
.IGM-cap-overlay-bottom {
	position: absolute;
	z-index: 9;
	background-color: #111;
	background: rgba(0,0,0,.75);
	color: #CCC;
	text-align: center;
	border-radius: 5px 5px 0px 0px;
	box-shadow: 0px 0px 30px #000;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	top: auto;
	bottom: 0px;
}
.p7IGM04_caption {
	font-size: 14px;
	line-height: 1.35;
	position: relative;
	padding: 20px;
	color: #CCC;
	text-align: center;
}
.p7IGM04_desc {
	font-size: 1em;
	padding: 18px 0px;
	color: #999;
	line-height: 1.5;
	position: relative;
}
.p7IGM04_desc a, .p7IGM04_desc a:visited {
	color: #66CCCC;
}
.p7IGM04_desc a:hover {
	color: #FFF;
}
.p7IGMdescription-wrapper.IGM-desc-overlay-top {
	position: absolute;
	top: 0;
	z-index: 8;
}
.p7IGMdescription-wrapper.IGM-desc-overlay-top .p7IGM04_desc {
	background-color: #111;
	background: rgba(0,0,0,.75);
	border-radius: 5px 5px 0px 0px;
	box-shadow: 0px 0px 30px #000;
	padding: 10px 20px;
	line-height: 1.5;
	text-align: left;
	display: inline-block;
}
.p7IGMdescription-wrapper.IGM-desc-overlay-bottom {
	position: absolute;
	top: auto;
	bottom: 0px;
	z-index: 8;
	width: 100%;
}
.p7IGMdescription-wrapper.IGM-desc-overlay-bottom .p7IGM04_desc {
	background-color: #111;
	background: rgba(0,0,0,.75);
	padding: 20px 36px;
	width: 80%;
	line-height: 1.5;
	border-radius: 5px 5px 0px 0px;
	box-shadow: 0px 0px 30px #000;
	border-radius: 5px 5px 0px 0px;
	margin: 0px auto;
}
/* Toolbar Styles */
.p7IGM04-toolbar-wrapper {
	text-align: center;
	position: relative;
	z-index: 9;
}
.p7IGM04-toolbar, .p7IGM04-paginator {
	font-family: Georgia, "Times New Roman", Times, serif;
}
.p7IGM04-toolbar-wrapper.IGM-toolbar-top {
	padding: 0px 0px 10px 0px;
}
.p7IGM04-toolbar-wrapper.IGM-toolbar-bottom {
	padding: 10px 0px 0px 0px;
}
.p7IGM04-toolbar {
	margin: 0px;
	overflow: hidden;
	padding: 6px 0px;
	display: inline-block;
}
.p7IGM04-toolbar li {
	list-style-type: none;
	float: left;
	vertical-align: top;
}
.p7IGM04-toolbar a, .p7IGM04-paginator a {
	background-color: #999999;
	color: #999999;
}
.p7IGM04-toolbar a:hover, .p7IGM04-paginator a:hover, .p7IGM04-paginator a.pags-down {
	background-color: #FFF;
	color: #FFF;
}
.p7IGM04-toolbar a   {
	background-color: transparent !important;
	padding: 0px 4px;
	text-decoration: none;
	display: block;
	font-size: 0px;
	font-weight: bold;
}

.p7IGM04-toolbar a:hover {
	outline: none;
	color: #FFF;
}
.p7IGM04-paginator a.pags-down {
	cursor: default;
}
.p7IGM04-toolbar a:after {
	font-size: 18px !important;
}
.p7IGM04-first:after {
	content: "\007c \25c4";
}
.p7IGM04-prev:after {
	content: "\25c4";
}
.p7IGM04-pause-play.tb-play:before, .p7IGM04-pause-play:before {
	font-size: 28px !important;
	position: relative;
	top: -4px;
	
}

.p7IGM04-pause-play.tb-play:before {
	content: "\25ba";
}
.p7IGM04-pause-play:before {
	content: "\007c \007c";
}
.p7IGM04-next:after {
	content: "\25ba";
}
.p7IGM04-last:after {
	content: "\25ba \007c";
}
.p7IGM04-fullscreen.max, .p7IGM04-fullscreen.min {
	background-repeat: no-repeat;
	position: absolute;
	left: auto;
	right: 6px;
	z-index: 9;
}

/*Prev-Next Arrows*/
.p7IGM04-prev-arrow, .p7IGM04-next-arrow {
	position: absolute;
	z-index: 100;
	top: 42%;
	font-size: 40px;
	color: #FFF;
}
.p7IGM04-prev-arrow {
	left: 10px;
}
.p7IGM04-next-arrow {
	left: auto;
	right: 10px;
}
.p7IGM04-prev-arrow a, .p7IGM04-next-arrow a {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000;
	color: rgba(0,0,0,.5);
	text-decoration: none;
	padding: 0;
	font-size: 100px;
	line-height: 60px;
	display: block;
	text-shadow: 0px 0px 30px #FFF;
}
.p7IGM04-prev-arrow a:hover, .p7IGM04-next-arrow a:hover {
	color: rgba(0,0,0,1);
}
.p7IGM04-prev-arrow a.off, .p7IGM04-next-arrow a.off {
	opacity: 0;
	cursor:default;
	font-size: 3px;
}
/*END PREV-NEXT ARROWS*/

.p7IGM04 .p7IGM-canvas {
	background-color: transparent;

}
/*DO NOT EDIT - Loading Image, Link and hidden description elements*/
.p7IGM04_IGMloading {
	position:absolute;
	height:50px;
	width:50px;
	background-image: url(img/p7igm_loading.gif);
	left:50%;
	margin-left:-25px;
	top: 50%;
	margin-top:-4px;
	z-index:99;
	display: none;
	border-radius: 8px;
	box-shadow: 0px 0px 30px #000;
	opacity: .6;
	background-color: #FFF;
}
.p7igm_image_link, .p7igm_description {
	display:none;
}

/*PAGINATOR*/
.p7IGM04-paginator {
	position: relative;
	z-index: 9;
	text-align: center;
	font-size: 18px;
}
.p7IGM04-paginator.IGMpaginator-pags-top {
	padding: 10px 0px;
}
.p7IGM04-paginator.IGMpaginator-pags-bottom {
	padding: 10px 0px;
}
.p7IGM04-paginator ul {
	margin: 0px;
	z-index: 20;
	padding: 0px;
	display: inline-block;
}
.p7IGM04-paginator li {
	list-style-type: none;
	float: left;
}
.p7IGM04-paginator a {
	padding: 8px;
	text-decoration: none;
	display: block;
	border-radius: 100%;
	margin: 0 4px;
	font-size: 0px;
}
.p7IGM04-pags-pause {
	font-size: 0px;
	background: none !important;
	padding: 0px !important;
	width: 22px;
}
.p7IGM04-pags-pause:after,
.p7IGM04-pags-pause.pag-play:after {
	font-size: 22px !important;
	font-weight: bold;
	content: "\007c \007c";
	text-shadow: 1px 1px #000;
	position: relative;
	top: -.1em;
}
.p7IGM04-pags-pause.pag-play:after {
	content: "\25ba";
}
.p7IGM04-pags-fullscreen.max, .p7IGM04-pags-fullscreen.min,
.p7IGM04-fullscreen.max, .p7IGM04-fullscreen.min {
	position: absolute;
	left: auto;
	right: 6px;
	z-index: 9;
}

.p7IGM04-pags-fullscreen.max, .p7IGM04-pags-fullscreen.min,
.p7IGM04-fullscreen.max, .p7IGM04-fullscreen.min {
	font-size: 0px;
	background: none !important;
	padding: 0px !important;
	width: 22px;
}
.p7IGM04-pags-fullscreen.max:after, .p7IGM04-pags-fullscreen.min:after,
.p7IGM04-fullscreen.max:after, .p7IGM04-fullscreen.min:after {
	font-size: 22px;
	font-weight: bold;
	content: "\2195";
	text-shadow: 1px 1px #000;
	position: relative;
	top: -.1em;
}
.p7IGM04-pags-fullscreen.min:after,
.p7IGM04-fullscreen.min:after {
	content: "\2194";
}
/*SPECIAL RULES*/
.p7IGM-no-thumbs {
	display:none;
}
.p7IGM04_image {
	zoom:1;
}

/*Fullscreen-Mode Styles*/
.p7IGM04.p7IGM-fullscreen {
	background-image: none;
	background-color: #000;
}
.p7IGM04.p7IGM-fullscreen .p7IGM04_layout,
.p7IGM04.p7IGM-fullscreen .p7IGM04_FSwrapper {
	border-radius: 0px;
	border: none;
}
.p7IGM04-back, .p7IGM04-pags-back {
	float: left;
	display: none;
}
.p7IGM04.p7IGM-fullscreen .p7IGM04-back,
.p7IGM04.p7IGM-fullscreen .p7IGM04-pags-back {
	display: block;
	background-image: url(img/p7IGM-back.png) !important;
	width: 25px;
	background-repeat: no-repeat;
	position: absolute;
	left: 6px;
	z-index: 9;
}

/*Set or Change the Border Color for the image container and thumbnails wrapper and for the default thumbnail state*/
.p7IGM04_thumbsviewport, .p7IGM04_thumbslist a, .p7IGM04_FSwrapper {
	border-color: #666;
}
/*Edit border color for thumbnails on hover and when selected*/
.p7IGM04_thumbslist a:hover {
	border-color: #FF3300;
}
.p7IGM04_thumbslist a.thumb_down {
	border-color: #00CC99;
}


/*Mobile Devices*/
/*Phones*/
@media only screen and (max-device-width:76){
	.agm-section img{
		max-height:10px!important;
	}
}
@media only screen and (min-width: 0px) and (max-width: 769px) {
    .p7IGM04_thumbswrapper {display: none !important;}
}
Choose preset thumbnail heights from 30px to 100px in 10px increments. This will ensure your thumbnail scroller is uniform in height and your thumbnails are always fully displayed, no matter their individual orientations.

We have provide several media queries, at the bottom of the p7AGM-01.css file, to adjust the maximum thumbnail height for various screen widths and devices:
/*Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.p7IGM04_caption {font-size: 16px !important;}
}


/*SPECIAL RULES TO WORK AROUND FLAWS IN DREAMWEAVER DESIGIN VIEW*/
.IGMnoscript .p7IGM04_thumbslist li {display: inline;}
.IGMnoscript .p7IGM04_thumbslist a {display: inline;}
.IGMnoscript .p7IGM04_thumbswrapper {overflow: hidden; width: 99%; margin: 0px 0px;}
.IGMnoscript .p7IGM04_thumbslist {white-space: nowrap;}
.IGMnoscript .p7IGM04_FSwrapper {width: 98%; margin: 0px auto;}
.IGMnoscript .p7IGM04_fs_img {height: auto; width: auto; width: 100%; max-width: 100%;}
.IGMnoscript .p7IGMdescription-wrapper {display: none;}
.IGMnoscript .p7IGM04-prev-arrow, .IGMnoscript .p7IGM04-next-arrow {display: none;}
.IGMnoscript .p7IGM04-paginator {display: none;}
.IGMnoscript .p7IGMcaption-wrapper {display: none;}
.IGMnoscript .p7IGM04-toolbar-wrapper {display: none;}
.IGMnoscript .p7IGM04-fullscreen.max {top: 0px;}