<style type="text/css">/*<![CDATA[*/
/*************** Style flashing des galeries horizontales ******************/
.cc-m-gallery-cool-item div:hover img { opacity: 1;-webkit-animation: flash 1.5s; animation: flash 1.5s;}
@-webkit-keyframes flash {0% {opacity: .4;}100% {opacity: 1;}}
@keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}}.cc-m-gallery-cool img {border-radius: 5px;}
/*************** Style des galeries verticales ******************/
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a {overflow: hidden;position: relative;background: #000;display: block;width: 100%; height: 100%;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img, .cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover {-ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;cursor: pointer !important;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover { -ms-transform: scale(1.2);  -moz-transform: scale(1.2);  -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after {  font-family: jimdoiconfontweb !important;   font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:hover:after {  content:'\E5F0'; position:absolute;z-index:9;top: 50%;left: 50%; -webkit-transform: translateY(-50%) translateX(-50%);-o-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 0px;}
@media only screen and (max-width:767px) {.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after {content: '\E5F0'; position: absolute; z-index: 9; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 0rem;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}}
@media only screen and (max-width:768px) {.cc-m-gallery-stack-column {width: 100% !important;}}

/*************** Galeries responsives ******************/
div.innerthumbnail img, div.innerthumbnail {width: 100% !important;height: auto !important;}.cc-m-gallery-container {overflow: visible;}div.ccgalerie div.thumb_pro1, div.ccgalerie div.thumb_pro2, div.ccgalerie div.thumb_pro3, div.ccgalerie div.thumb_sq1, div.ccgalerie div.thumb_sq2, div.ccgalerie div.thumb_sq3 {width: auto !important;height: auto !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}div.ccgalerie div.thumb_sq1 div, div.ccgalerie div.thumb_sq2 div, div.ccgalerie div.thumb_sq3 div {width: auto !important;height: auto !important;display: table-cell;text-align: center;vertical-align: middle;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}div.ccgalerie div.thumb_sq1 div img, div.ccgalerie div.thumb_sq2 div img, div.ccgalerie div.thumb_sq3 div img {width: 100% !important;height: auto !important;display: inline;vertical-align: middle;-webkit-box-sizing: border-box !important;-ms-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box !important;}

/************* Styles des vignettes des galeries d'images *****************/
/* Style rectangulaire n°1 */
div.ccgalerie div.thumb_pro1 div.innerthumbnail {display: block !important;height: auto !important;width: auto !important;overflow: hidden;}div.ccgalerie div.thumb_pro1 {margin: 0.4em !important;height: auto !important;width: auto !important;border: none !important;background: transparent;-webkit-transition: all 0.30s linear;-moz-transition: all 0.30s linear;-o-transition: all 0.30s linear;transition: all 0.30s linear;}div.ccgalerie div.thumb_pro1 img {top: 0px !important;-webkit-transition: all 0.30s linear;-moz-transition: all 0.30s linear;-o-transition: all 0.30s linear;transition: all 0.30s linear;}div.ccgalerie div.thumb_pro1 a:hover {opacity: 1 !important;}div.ccgalerie div.thumb_pro1 a:hover img {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);-webkit-transition: all 0.30s linear;-moz-transition: all 0.30s linear;-o-transition: all 0.30s linear;transition: all 0.30s linear;}
/* Style rectangulaire n°2 */
div.ccgalerie div.thumb_pro2 {margin: 0.4em !important;padding: 0px;height: auto !important;width: auto !important;border: 1px solid rgba(0, 0, 0, 0.2) !important;background: #fff url(https://u.jimcdn.com/cms/o/s8e84b1d86f5e7f1c/userlayout/img/blank.gif?t=1507973800) no-repeat center center/0% !important;} div.ccgalerie div.thumb_pro2 img {top: 0px !important;} div.ccgalerie div.thumb_pro2 div.innerthumbnail {display: block !important;height: auto !important;width: 100% !important;} div.ccgalerie div.thumb_pro2:hover {background: rgba(0, 0, 0, 0.9) url(https://u.jimcdn.com/cms/o/seff596a4145a1622/userlayout/img/magnifying-glass-128.png?t=1524335281) no-repeat center center/50% !important;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;} div.ccgalerie div.thumb_pro2 a:hover img {opacity: 0.3 !important;background: rgba(0, 0, 0, 0.7) !important;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;}
/* Style rectangulaire n°3 */
div.ccgalerie div.thumb_pro3 {margin: 0px !important;padding: 0px !important;height: auto !important;width: auto !important;} div.ccgalerie div.thumb_pro3 div.innerthumbnail {display: block !important;height: auto !important;width: auto !important;} div.ccgalerie div.thumb_pro3 a:hover {opacity: 1 !important;} div.ccgalerie div.thumb_pro3 img {-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;padding: 0.6em;border: 1px solid rgba(0, 0, 0, 0.1) !important;background: rgb(255, 255, 255);-moz-box-shadow: 0 7px 7px -6px rgba(120,120,120,0.8);-webkit-box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);} div.ccgalerie div.thumb_pro3:nth-of-type(n+1) img {margin-top: 30px;} div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) img {margin-top: 20px;} div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) img {margin-top: -15px;} div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) img {margin-top: 20px;} div.ccgalerie div.thumb_pro3:nth-of-type(n+1) {-webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-ms-transform: rotate(-8deg);-o-transform: rotate(-8deg);transform: rotate(-8deg);-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) {-webkit-transform: rotate(13deg);-moz-transform: rotate(13deg);-ms-transform: rotate(13deg);-o-transform: rotate(13deg);transform: rotate(13deg);-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) {-webkit-transform: rotate(-4deg);-moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) {-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg);-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(n+1) a:hover img {-webkit-transform: rotate(15deg) !important;-moz-transform: rotate(15deg) !important;-ms-transform: rotate(15deg) !important;-o-transform: rotate(15deg) !important;transform: rotate(15deg) !important;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) a:hover img {-webkit-transform: rotate(20deg) !important;-moz-transform: rotate(20deg) !important;-ms-transform: rotate(20deg) !important;-o-transform: rotate(20deg) !important;transform: rotate(20deg) !important;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) a:hover img {-webkit-transform: rotate(18deg) !important;-moz-transform: rotate(18deg) !important;-ms-transform: rotate(18deg) !important;-o-transform: rotate(18deg) !important;transform: rotate(18deg) !important;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) a:hover img {-webkit-transform: rotate(-23deg) !important;-moz-transform: rotate(-23deg) !important;-ms-transform: rotate(-23deg) !important;-o-transform: rotate(-23deg) !important;transform: rotate(-23deg) !important;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;}
/* Style carré n°1 */
div.ccgalerie div.thumb_sq1 {margin: 0.4em !important;} div.ccgalerie div.thumb_sq1 a img { border: 1px solid rgba(0, 0, 0, 0.1) !important;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;background: #ffffff;padding: 5px;filter: drop-shadow(0px 3px 5px #ccc);-webkit-filter: drop-shadow(0px 3px 5px #ccc);-webkit-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);-o-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);}/*div.ccgalerie div.thumb_sq1 a:hover img {-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;background: #fff;filter: drop-shadow(0px 0px 8px #aaa);-webkit-filter: drop-shadow(0px 0px 8px #aaa);border: 1px solid rgba(255, 255, 255, 0)!important;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);-webkit-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);-o-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);}*/  div.ccgalerie div.thumb_sq1 a:hover img { -webkit-transform: scale(0.97);-moz-transform: scale(0.97);-ms-transform: scale(0.97);-o-transform: scale(0.97);transform: scale(0.97);background: rgba(0, 0, 0, 0) !important;border: none;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;}  
/* Style carré n°2 */
div.ccgalerie div.thumb_sq2 {margin: 0.4em !important;padding: 5px;background: transparent !important;}div.ccgalerie div.thumb_sq2 a img {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;transition: all 0.30s ease-in-out;border: 1px solid rgba(34, 34, 34, 0.1);} div.ccgalerie div.thumb_sq2 a:hover img {box-shadow: 0px 0px 8px 2px rgba(121, 121, 121, 0.5);-moz-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121, 0.5);-webkit-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121, 0.5);border: 1px solid rgba(121, 121, 121, 0.5);-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;transition: all 0.30s ease-in-out;}
/* Style carré n°3 */
div.ccgalerie div.thumb_sq3 {margin: 0.4em !important;padding: 0.1em;border: 1px solid rgba(204, 204, 204, 0.51);background: rgb(255, 255, 255);width: auto !important;height: auto !important;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;} div.ccgalerie div.thumb_sq3:hover {border: 1px solid rgba(204, 204, 204, 0);background: rgba(204, 204, 204, 0.2);} div.ccgalerie div.thumb_sq3 a img {border: none;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;background: rgba(0, 0, 0, 0) !important;}  div.ccgalerie div.thumb_sq3 a:hover img {-webkit-transform: scale(0.97);-moz-transform: scale(0.97);-ms-transform: scale(0.97);-o-transform: scale(0.97);transform: scale(0.97);background: rgba(0, 0, 0, 0) !important;border: none;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;}

/*]]>*/

</style>


Si utilisation de photos horizontale/portrait

Grille | Format carré | Design 1

Grille | Format carré | Design 2

Grille | Format carré | Design 3

Grille | Format proportion originale | Design 1

Si photo transformé en amont au format carré :

Grille | Format proportion originale | Design 2

Si photo transformé en amont au format carré :

Grille | Format proportion originale | Design 3

Si photo transformé en amont au format carré :


<style type="text/css">

/*<![CDATA[*/

 

 

 

/**************************** Pretty-Gals pour Jimdo par Realia *********************/

/***** https://pretty-grids.jimdo.com ****/

/* V1 (29/04/2018) */

 

 

/*************** Style flashing des galeries horizontales ******************/ 

.cc-m-gallery-cool-item div:hover img { opacity: 1;-webkit-animation: flash 1.5s; animation: flash 1.5s;}

@-webkit-keyframes flash {0% {opacity: .4;}100% {opacity: 1;}}

@keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}}

 

/*************** Style des galeries verticales ******************/ 

.cc-m-gallery-stack-column .cc-m-gallery-stack-item a {overflow: hidden;position: relative;background: #;display: block;width: 100%; height: 100%;}

.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img, .cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover {-ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;cursor: pointer !important;}

.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover { -ms-transform: scale(1.2);  -moz-transform: scale(1.2);  -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}

.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after {  font-family: jimdoiconfontweb !important;   font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;}

.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:hover:after {  content:'\E5F0'; position:absolute;z-index:9;top: 50%;left: 50%; -webkit-transform: translateY(-50%) translateX(-50%);-o-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 40px;}

@media only screen and (max-width:767px) {.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after {content: '\E5F0'; position: absolute; z-index: 9; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 1rem;}

.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}}

@media only screen and (max-width:768px) {.cc-m-gallery-stack-column {width: 100% !important;}}

 

/**************************** Pretty-Grids pour Jimdo par Realia *********************/

/***** https://pretty-grids.jimdo.com ****/

/* Version minimale */

/* V2 (23/04/2018) */

 

/*************** Galeries responsives ******************/

 

div.innerthumbnail img, div.innerthumbnail {

width: 100% !important;

height: auto !important;

}

 

.cc-m-gallery-container {

overflow: visible;

}

 

div.ccgalerie div.thumb_pro1, div.ccgalerie div.thumb_pro2, div.ccgalerie div.thumb_pro3, div.ccgalerie div.thumb_sq1, div.ccgalerie div.thumb_sq2, div.ccgalerie div.thumb_sq3 {

width: auto !important;

height: auto !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

 

div.ccgalerie div.thumb_sq1 div, div.ccgalerie div.thumb_sq2 div, div.ccgalerie div.thumb_sq3 div {

width: auto !important;

height: auto !important;

display: table-cell;

text-align: center;

vertical-align: middle;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

 

div.ccgalerie div.thumb_sq1 div img, div.ccgalerie div.thumb_sq2 div img, div.ccgalerie div.thumb_sq3 div img {

width: 100% !important;

height: auto !important;

display: inline;

vertical-align: middle;

-webkit-box-sizing: border-box !important;

-ms-box-sizing: border-box;

-moz-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box !important;

}

 

/************* Styles des vignettes des galeries d'images *****************/

 

/* Style rectangulaire n°1 */

 

div.ccgalerie div.thumb_pro1 div.innerthumbnail {

display: block !important;

height: auto !important;

width: auto !important;

overflow: hidden;

}

 

div.ccgalerie div.thumb_pro1 {

margin: 0.4em !important;

height: auto !important;

width: auto !important;

border: none !important;

background: transparent;

-webkit-transition: all 0.30s linear;

-moz-transition: all 0.30s linear;

-o-transition: all 0.30s linear;

transition: all 0.30s linear;

}

 

div.ccgalerie div.thumb_pro1 img {

top: 0px !important;

-webkit-transition: all 0.30s linear;

-moz-transition: all 0.30s linear;

-o-transition: all 0.30s linear;

transition: all 0.30s linear;

}

 

div.ccgalerie div.thumb_pro1 a:hover {

opacity: 1 !important;

}

 

div.ccgalerie div.thumb_pro1 a:hover img {

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-ms-transform: scale(1.2);

-o-transform: scale(1.2);

transform: scale(1.2);

-webkit-transition: all 0.30s linear;

-moz-transition: all 0.30s linear;

-o-transition: all 0.30s linear;

transition: all 0.30s linear;

}

 

/* Style rectangulaire n°2 */

 

div.ccgalerie div.thumb_pro2 {

margin: 0.4em !important;

padding: 0px;

height: auto !important;

width: auto !important;

border: 1px solid rgba(0, 0, 0, 0.2) !important;

background: #fff url(https://u.jimcdn.com/cms/o/s8e84b1d86f5e7f1c/userlayout/img/blank.gif?t=1507973800) no-repeat center center/0% !important;

}

 

div.ccgalerie div.thumb_pro2 img {

top: 0px !important;

}

 

div.ccgalerie div.thumb_pro2 div.innerthumbnail {

display: block !important;

height: auto !important;

width: 100% !important;

}

 

div.ccgalerie div.thumb_pro2:hover {

background: rgba(0, 0, 0, 0.9) url(https://u.jimcdn.com/cms/o/seff596a4145a1622/userlayout/img/magnifying-glass-128.png?t=1524335281) no-repeat center center/50% !important;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

transition: all 300ms linear;

}

 

div.ccgalerie div.thumb_pro2 a:hover img {

opacity: 0.3 !important;

background: rgba(0, 0, 0, 0.7) !important;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

transition: all 300ms linear;

}

 

/* Style rectangulaire n°3 */

 

div.ccgalerie div.thumb_pro3 {

margin: 0px !important;

padding: 0px !important;

height: auto !important;

width: auto !important;

}

 

div.ccgalerie div.thumb_pro3 div.innerthumbnail {

display: block !important;

height: auto !important;

width: auto !important;

}

 

div.ccgalerie div.thumb_pro3 a:hover {

opacity: 1 !important;

}

 

div.ccgalerie div.thumb_pro3 img {

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

padding: 0.6em;

border: 1px solid rgba(0, 0, 0, 0.1) !important;

background: rgb(255, 255, 255);

-moz-box-shadow: 0 7px 7px -6px rgba(120,120,120,0.8);

-webkit-box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);

box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(n+1) img {

margin-top: 30px;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) img {

margin-top: 20px;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) img {

margin-top: -15px;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) img {

margin-top: 20px;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(n+1) {

-webkit-transform: rotate(-8deg);

-moz-transform: rotate(-8deg);

-ms-transform: rotate(-8deg);

-o-transform: rotate(-8deg);

transform: rotate(-8deg);

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) {

-webkit-transform: rotate(13deg);

-moz-transform: rotate(13deg);

-ms-transform: rotate(13deg);

-o-transform: rotate(13deg);

transform: rotate(13deg);

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) {

-webkit-transform: rotate(-4deg);

-moz-transform: rotate(-4deg);

-ms-transform: rotate(-4deg);

-o-transform: rotate(-4deg);

transform: rotate(-4deg);

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) {

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

-ms-transform: rotate(5deg);

-o-transform: rotate(5deg);

transform: rotate(5deg);

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(n+1) a:hover img {

-webkit-transform: rotate(15deg) !important;

-moz-transform: rotate(15deg) !important;

-ms-transform: rotate(15deg) !important;

-o-transform: rotate(15deg) !important;

transform: rotate(15deg) !important;

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) a:hover img {

-webkit-transform: rotate(20deg) !important;

-moz-transform: rotate(20deg) !important;

-ms-transform: rotate(20deg) !important;

-o-transform: rotate(20deg) !important;

transform: rotate(20deg) !important;

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) a:hover img {

-webkit-transform: rotate(18deg) !important;

-moz-transform: rotate(18deg) !important;

-ms-transform: rotate(18deg) !important;

-o-transform: rotate(18deg) !important;

transform: rotate(18deg) !important;

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) a:hover img {

-webkit-transform: rotate(-23deg) !important;

-moz-transform: rotate(-23deg) !important;

-ms-transform: rotate(-23deg) !important;

-o-transform: rotate(-23deg) !important;

transform: rotate(-23deg) !important;

-webkit-transition: all 200ms linear;

-moz-transition: all 200ms linear;

-o-transition: all 200ms linear;

transition: all 200ms linear;

}

 

/* Style carré n°1 */

 

div.ccgalerie div.thumb_sq1 {

margin: 0.4em !important;

}

 

div.ccgalerie div.thumb_sq1 a img {

 

border: 1px solid rgba(0, 0, 0, 0.1) !important;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

background: #ffffff;

padding: 5px;

filter: drop-shadow(0px 3px 5px #ccc);

-webkit-filter: drop-shadow(0px 3px 5px #ccc);

-webkit-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

-o-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

}

/*

div.ccgalerie div.thumb_sq1 a:hover img {

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

background: #fff;

filter: drop-shadow(0px 0px 8px #aaa);

-webkit-filter: drop-shadow(0px 0px 8px #aaa);

border: 1px solid rgba(255, 255, 255, 0)!important;

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

-webkit-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

-o-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);

}

*/

 

 

div.ccgalerie div.thumb_sq1 a:hover img {

 

-webkit-transform: scale(0.97);

-moz-transform: scale(0.97);

-ms-transform: scale(0.97);

-o-transform: scale(0.97);

transform: scale(0.97);

background: rgba(0, 0, 0, 0) !important;

border: none;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

transition: all 300ms linear;

}

 

 

/* Style carré n°2 */

 

div.ccgalerie div.thumb_sq2 {

margin: 0.4em !important;

padding: 5px;

background: transparent !important;

}

 

div.ccgalerie div.thumb_sq2 a img {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-transition: all 0.30s ease-in-out;

-moz-transition: all 0.30s ease-in-out;

-o-transition: all 0.30s ease-in-out;

transition: all 0.30s ease-in-out;

border: 1px solid rgba(34, 34, 34, 0.1);

}

 

div.ccgalerie div.thumb_sq2 a:hover img {

box-shadow: 0px 0px 8px 2px rgba(121, 121, 121, 0.5);

-moz-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121, 0.5);

-webkit-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121, 0.5);

border: 1px solid rgba(121, 121, 121, 0.5);

-webkit-transition: all 0.30s ease-in-out;

-moz-transition: all 0.30s ease-in-out;

-o-transition: all 0.30s ease-in-out;

transition: all 0.30s ease-in-out;

}

 

/* Style carré n°3 */

 

div.ccgalerie div.thumb_sq3 {

margin: 0.4em !important;

padding: 0.1em;

border: 1px solid rgba(204, 204, 204, 0.51);

background: rgb(255, 255, 255);

width: auto !important;

height: auto !important;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

transition: all 300ms linear;

}

 

div.ccgalerie div.thumb_sq3:hover {

border: 1px solid rgba(204, 204, 204, 0);

background: rgba(204, 204, 204, 0.2);

}

 

div.ccgalerie div.thumb_sq3 a img {

border: none;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

transition: all 300ms linear;

background: rgba(0, 0, 0, 0) !important;

}

 

 

div.ccgalerie div.thumb_sq3 a:hover img {

-webkit-transform: scale(0.97);

-moz-transform: scale(0.97);

-ms-transform: scale(0.97);

-o-transform: scale(0.97);

transform: scale(0.97);

background: rgba(0, 0, 0, 0) !important;

border: none;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

transition: all 300ms linear;

}

 

/**************************** Pretty-Grids pour Jimdo par Realia *********************/

/***** https://pretty-grids.jimdo.com ****/

/* Add-On : centrer les galeries en version mobile uniquement */

/* V1 (16/10/2017) */

 

/*************** Centrer les galeries en version mobile uniquement ******************/

 

@media (max-width: 768px){

.cc-m-gallery-container {text-align: center;}

 

.ccgalerie div.thumb_pro1, .ccgalerie div.thumb_pro2, .ccgalerie div.thumb_pro3, .ccgalerie div.thumb_sq1, .ccgalerie div.thumb_sq2, .ccgalerie div.thumb_sq3 {

float: none;

display:inline-block;

}

}

 

/**************************** Pretty-Grids pour Jimdo par Realia *********************/

/***** https://pretty-grids.jimdo.com ****/

/* Add-on : centrer les galeries */

/* V1 (16/10/2017) */

 

/*************** Toujours centrer les galeries ******************/

 

.cc-m-gallery-container {text-align: center;}

 

.ccgalerie div.thumb_pro1, .ccgalerie div.thumb_pro2, .ccgalerie div.thumb_pro3, .ccgalerie div.thumb_sq1, .ccgalerie div.thumb_sq2, .ccgalerie div.thumb_sq3 {

float: none;

display:inline-block;

}

 

/*]]>*/

</style>