.cityplot-gallery {
    padding: 40px;
    background-image: linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px),
                      linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 25px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
		height: 801px;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}


.cityplot-gallery-grid {
    display: flex;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.cityplot-gallery-item {
    display: inline-block;
    background: #fff;
    padding: 10px;
    border: 7px solid #222;
		box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.3), 0px 9px 20px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
		width: 90%;
    margin-left: auto;
    margin-right: auto;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: cityplot-sweep 10s ease-in-out infinite;
    -webkit-animation: cityplot-sweep 10s ease-in-out infinite;
    position: relative;
}

@media (max-width: 1026px) and (orientation: landscape) {
	.cityplot-gallery {
		height: 601px;
	}
	.cityplot-gallery-item {
		width: 90%;
	}
}

@media (max-width: 1024px) {
	.cityplot-gallery {
		height: 501px;
		padding: 10px;
	}
	.cityplot-gallery-item {
		width: 85%;
	}
}

@keyframes cityplot-sweep {
    0% {
		    transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
				box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
    }
    30% {
			  transform: rotateY(-5deg);
        -webkit-transform: rotateY(-5deg);
				box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.3), inset -5px 0px 10px 0px rgba(0, 0, 0, 0.2), -15px 0px 30px -10px rgba(0, 0, 0, 0.3);

    }
/* 
    50% {
			  transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
				box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
    }
 */
    80% {
			  transform: rotateY(5deg);
        -webkit-transform: rotateY(5deg);
				box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.3), inset 5px 0px 10px 0px rgba(0, 0, 0, 0.2), 15px 0px 30px -10px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
				box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
    }
}

@-webkit-keyframes cityplot-sweep {
    0% {
		    transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
				box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
    }
    30% {
			  transform: rotateY(-10deg);
        -webkit-transform: rotateY(-10deg);
				box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.3), inset -5px 0px 10px 0px rgba(0, 0, 0, 0.2), -15px 0px 30px -10px rgba(0, 0, 0, 0.3);

    }
    50% {
			  transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
				box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
    }
    80% {
			  transform: rotateY(10deg);
        -webkit-transform: rotateY(10deg);
				box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.3), inset 5px 0px 10px 0px rgba(0, 0, 0, 0.2), 15px 0px 30px -10px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
				box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
    }
}

.cityplot-gallery-image {
    display: block;
    width: 1000px;
    max-width: 1000px;
}

.cityplot-gallery-loading {
    color: #777;
    padding: 40px;
}

.cityplot-gallery-error {
    color: #c44;
    padding: 30px;
}