.ccm-page .galleryES, .ccm-page .galleryESTags, .ccm-page .galleryESPagination, .ccm-page .galleryESLatest { clear: both; } .ccm-page .galleryESEditMode { max-height: 350px; height: 350px; max-width: 100%; width: 100%; overflow: hidden; padding-top: 350px; border: 3px dashed #999; background-color: #CCC; background-image: url("/packages/gallery_e_s/src/Assets/Images/gallery-es-watermark.png"); background-position: center center; background-size: 90%; background-repeat: no-repeat; position: relative; } .ccm-page .galleryESEditModeText { position: absolute; top: 0px; width: 100%; padding: 10px; text-align: center; font-weight: bold; color: #666; } .ccm-page .galleryESTagButton { background-color: transparent; text-decoration: none; border: none; cursor: pointer; cursor: hand; } .ccm-page .galleryESTagButton:hover { background-color: #000000; text-decoration: none; border: none; cursor: pointer; color: #ffffff; cursor: hand; } .ccm-page .masonry { -webkit-transition-property: height, width; -moz-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } .ccm-page .masonry-brick { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } .ccm-page .galleryESmasonry454.masonry-brick { opacity: 1; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .ccm-page .galleryESmasonry454 { opacity: 0; } .ccm-page .galleryESmasonry454 a { display: block; margin: 10px; } .ccm-page .galleryESmasonry454 img { width: 100%; } .ccm-page .galleryESmasonry454 { display: block; float: left; width: 20%; height: auto; } @media only screen and (max-width: 480px) { /* Smartphone view: 1 tile */ .ccm-page .galleryESmasonry454 { width: 100%; } } @media only screen and (max-width: 650px) and (min-width: 481px) { /* Tablet view: 2 tiles */ .ccm-page .galleryESmasonry454 { width: 50%; } } @media only screen and (max-width: 1050px) and (min-width: 651px) { /* Small desktop / ipad view: 3 tiles */ .ccm-page .galleryESmasonry454 { width: 33.3%; } } @media only screen and (max-width: 1290px) and (min-width: 1051px) { /* Medium desktop: 4 tiles */ .ccm-page .galleryESmasonry454 { width: 25%; } }