.image-viewer { display: grid; grid-template-columns: 2fr 7fr; align-items: center; }

.image-viewer .image-viewer-selector { text-align: right; }
.image-viewer .image-viewer-selector li { line-height: 30px; }

.image-viewer-selector .image-viewer-selection { cursor: pointer; }
.image-viewer-selector .image-viewer-selection.active { color: #2da14a; font-weight: 600;}

.image-viewer .image-viewer-images { position: relative; min-height: 405px; }
.image-viewer .image-viewer-image, .image-viewer .image-default { display: block; position: absolute; width: 100%; height: 100%;  background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; }
.image-viewer .image-viewer-image.animated { -webkit-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out }
.image-viewer .image-viewer-image.active { opacity: 1; }
.image-viewer .image-0 { background-image: url(/filemaker/images/image-rotator/screen1.jpg); }
.image-viewer .image-1 { background-image: url(/filemaker/images/image-rotator/screen2.jpg); }
.image-viewer .image-2 { background-image: url(/filemaker/images/image-rotator/screen3.jpg); }
.image-viewer .image-3 { background-image: url(/filemaker/images/image-rotator/screen4.jpg); }
.image-viewer .image-4 { background-image: url(/filemaker/images/image-rotator/screen5.jpg); }
.image-viewer .image-5 { background-image: url(/filemaker/images/image-rotator/screen6.jpg); }
.image-viewer .image-6 { background-image: url(/filemaker/images/image-rotator/screen7.jpg); }
.image-viewer .image-7 { background-image: url(/filemaker/images/image-rotator/screen8.jpg); }
.image-viewer .image-8 { background-image: url(/filemaker/images/image-rotator/screen9.jpg); }
.image-viewer .image-9 { background-image: url(/filemaker/images/image-rotator/screen10.jpg); }

.image-viewer .image-default { background-image: url(/filemaker/images/image-rotator/screen10.jpg); } /* last image again */
/*.image-viewer .image-default:after { padding-top: 72.667%; display: block; content: '';}*/


/* X-LARGE SCREENS (CASCADE TO LOWER SCREEN) */
@media only screen and (min-width: 1442px) {
	
}
 
/* LARGE SCREENS (SPECIFIC) */
@media only screen and (min-width: 1069px) and (max-width:1441px) {
	
}
 
/* MEDIUM SCREENS (CASCADE TO LOWER SCREENS) */
@media only screen and (max-width: 1068px) {
	.image-viewer { grid-template-columns: 2fr 5fr; }
	.image-viewer .image-viewer-images { min-height: 350px; }
	.image-viewer .image-viewer-selector { padding-right: 32px; }
}
 
/* MEDIUM SCREENS (SPECIFIC) */
@media only screen and (min-width: 736px) and (max-width:1068px) {
 
}
 
/* SMALL SCREENS */
@media only screen and (max-width: 735px) {
	.image-viewer  { grid-template-columns: 1fr; }
	.image-viewer .image-viewer-selector { order: 2; text-align: center; margin: 0 auto; padding-right:0px;}
	.image-viewer .image-viewer-selection { display: inline-block; margin: 8px; }
}
 
/* EXTRA SMALL SCREENS < 400px */
@media only screen and (max-width: 400px) {
 
}

/* RETINA */
@media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) {
	.image-viewer .image-0 { background-image: url(/filemaker/images/image-rotator/screen1_2x.jpg); }
	.image-viewer .image-1 { background-image: url(/filemaker/images/image-rotator/screen2_2x.jpg); }
	.image-viewer .image-2 { background-image: url(/filemaker/images/image-rotator/screen3_2x.jpg); }
	.image-viewer .image-3 { background-image: url(/filemaker/images/image-rotator/screen4_2x.jpg); }
	.image-viewer .image-4 { background-image: url(/filemaker/images/image-rotator/screen5_2x.jpg); }
	.image-viewer .image-5 { background-image: url(/filemaker/images/image-rotator/screen6_2x.jpg); }
	.image-viewer .image-6 { background-image: url(/filemaker/images/image-rotator/screen7_2x.jpg); }
	.image-viewer .image-7 { background-image: url(/filemaker/images/image-rotator/screen8_2x.jpg); }
	.image-viewer .image-8 { background-image: url(/filemaker/images/image-rotator/screen9_2x.jpg); }
	.image-viewer .image-9 { background-image: url(/filemaker/images/image-rotator/screen10_2x.jpg); }

}