File: /home/ezpgggd/www/wp-content/plugins/modula/assets/css/effects.css
@media screen and (min-width: 1px) {
.modula-gallery .modula-items .modula-item .modula-item-overlay {
position: absolute;
width:100%;
height:100%;
z-index: -1;
}
.modula-gallery .modula-items .modula-item .jtg-title {
margin:0;
}
.modula-gallery .modula-items .modula-item p {
margin:0;
padding: 0;
}
html body .modula-gallery .modula-items .figc {
color: black;
text-align: center;
position: absolute;
left: 0;
width: 100%;
padding:2em;
box-sizing: border-box;
}
html body .modula-gallery .modula-items .figc .jtg-title,
html body .modula-gallery .modula-items .figc p{
text-align:center;
}
.modula-gallery .modula-item .jtg-social a {
text-decoration: none;
color: #fff;
display: inline-block;
margin:0 10px 0 0;
padding: 0;
border: 0;
opacity: 0;
transition: opacity .3s;
}
.modula-gallery .modula-item:hover .jtg-social a {
opacity: 1;
}
/* Individual effects */
/*---------------*/
/***** quiet *****/
/*---------------*/
html body .modula-gallery .modula-items .effect-quiet .jtg-social {
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
left: 0;
transition:all .3s;
}
html body .modula-gallery .modula-items .effect-quiet .jtg-social a {
text-align:center;
}
.modula-gallery .modula-items .effect-quiet:hover .jtg-social {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-quiet .figc {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.modula-gallery .modula-item.effect-quiet .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
.modula-gallery .modula-item.effect-quiet:hover .figc::before,
.modula-gallery .modula-item.effect-quiet:hover .figc::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-quiet:hover .jtg-title,
.modula-gallery .modula-item.effect-quiet:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*---------------*/
/***** seemo *****/
/*---------------*/
.modula-gallery .modula-item.effect-seemo {
-webkit-perspective: 1000px;
perspective: 1000px;
}
body .modula-gallery .modula-items .modula-item.tg-loaded.effect-seemo .modula-item-content, body .modula-gallery.modula-columns .modula-items .modula-item.effect-seemo .modula-item-content {
transform:none !important;
}
.modula-gallery .modula-item.effect-seemo img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,300px);
transform: translate3d(0,0,300px);
}
.modula-gallery .modula-item.effect-seemo .jtg-title {
width: 100%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-seemo .jtg-title {
-webkit-transform: translate3d(0,0px,0) translate3d(0,0,0);
transform: translate3d(0,0,0) translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-seemo:hover .jtg-title {
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
.modula-gallery .modula-item.effect-seemo:hover img {
-webkit-transform: translate3d(0,0,0) translate3d(0,0,0);
transform: translate3d(0,0,0) translate3d(0,0,0);
}
@media all and (max-width:480px){
html body .modula-gallery .modula-item.effect-seemo .jtg-social {
left:0;
right:0;
text-align:center;
}
html body .modula-gallery .modula-items .modula-item.effect-seemo .jtg-social a {
margin-right:10px;
padding:5px;
text-align:center;
}
}
/*---------------*/
/***** appear *****/
/*---------------*/
.modula-gallery .modula-item.effect-appear .figc::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2.5%;
background: #fff;
content: '';
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
html body .modula-gallery .modula-item.effect-appear .jtg-title {
position: absolute;
bottom: 7.5%;
left: 0;
padding: 6% 5%;
width: 100%;
text-align: left;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
@media all and (max-width:480px) {
html body .modula-gallery .modula-item.effect-appear .jtg-title {
bottom:60px;
}
html body .modula-gallery .modula-item.effect-appear .jtg-social {
left:0;
right:0;
text-align:center;
}
html body .modula-gallery .modula-items .modula-item.effect-appear .jtg-social a {
margin-right:10px;
padding:5px;
text-align:center;
}
}
.modula-gallery .modula-item.effect-appear .jtg-title i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
.modula-gallery .modula-item.effect-appear .jtg-social a:last-of-type {
margin-right: 0;
}
.modula-gallery .modula-item.effect-appear .figc::before,
.modula-gallery .modula-item.effect-appear .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-appear:hover .figc::before,
.modula-gallery .modula-item.effect-appear:hover .jtg-title,
.modula-gallery .modula-item.effect-appear:hover .jtg-title i {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*---------------*/
/***** crafty *****/
/*---------------*/
.modula-gallery .modula-item.effect-crafty .jtg-title {
margin: 0 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
.modula-gallery .modula-item.effect-crafty p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
margin-bottom: 10px;
}
.modula-gallery .modula-item.effect-crafty:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-crafty:hover .figc::before,
.modula-gallery .modula-item.effect-crafty:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/*---------------*/
/***** pufrobo *****/
/*---------------*/
html body .modula-gallery .modula-items .effect-pufrobo .jtg-social {
opacity: 0;
/*transition: opacity 0.1s;*/
right:5%;
position: absolute;
bottom:2.5%;
text-align: right;
transition:all .3s;
}
html body .modula-gallery .modula-items .effect-pufrobo .jtg-social a {
text-align:right;
}
.modula-gallery .modula-items .effect-pufrobo:hover .jtg-social {
opacity: 1;
}
.modula-gallery .modula-items .effect-pufrobo .jtg-social a:last-of-type {
margin-right: 0;
}
.modula-gallery .modula-item.effect-pufrobo p.description {
margin-bottom: 2em;
}
html body .modula-gallery .modula-item.effect-pufrobo .figc{
text-align: right;
}
html body .modula-gallery .modula-item.effect-pufrobo .jtg-title,
html body .modula-gallery .modula-item.effect-pufrobo p {
position: absolute;
right: 30px;
left: 30px;
padding: 10px 0;
text-align: right;
}
.modula-gallery .modula-item.effect-pufrobo p {
bottom: 20%;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
letter-spacing: 1px;
}
.modula-gallery .modula-item.effect-pufrobo .jtg-title {
/*top: 30px;*/
top: 10%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.modula-gallery .modula-item.effect-pufrobo:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-pufrobo .jtg-title::after {
position: absolute;
top: 80%;
left: 0;
width: 100%;
height: 4px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.modula-gallery .modula-item.effect-pufrobo .jtg-title::after,
.modula-gallery .modula-item.effect-pufrobo p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-pufrobo:hover .jtg-title::after,
.modula-gallery .modula-item.effect-pufrobo:hover p {
margin-top: 10px;
margin-bottom: 5px;
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*---------------*/
/***** hide *****/
/*---------------*/
html body .modula-gallery .modula-items .effect-hide .jtg-social {
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
position: absolute;
bottom: 5%;
width: 100%;
text-align: center;
left: 0;
transition:all .3s;
}
html body .modula-gallery .modula-items .effect-hide .jtg-social a {
margin-right:10px;
text-align:center;
}
@media all and (max-width:480px){
html body .modula-gallery .modula-items .effect-hide .jtg-social a {
padding:5px;
}
}
.modula-gallery .modula-items .effect-hide:hover .jtg-social {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-hide .figc {
display: flex;
align-items: center;
justify-content: center;
}
.modula-gallery .modula-item.effect-hide .figc-inner .jtg-title,
.modula-gallery .modula-item.effect-hide .figc-inner p {
margin: 0 20px;
}
.modula-gallery .modula-item.effect-hide img {
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.modula-gallery .modula-item.effect-hide:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-hide .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
margin-bottom: 10px;
}
.modula-gallery .modula-item.effect-hide p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
.modula-gallery .modula-item.effect-hide:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-hide:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
/*---------------*/
/***** Sarah *****/
/*---------------*/
.modula-gallery .modula-item.effect-sarah {
background: #42b078;
}
.modula-gallery .modula-item.effect-sarah img {
max-width: none;
min-width: -webkit-calc(100% + 60px) !important;
min-width: calc(100% + 60px) !important;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
inset:unset !important;
}
.modula-gallery.modula-columns .modula-items .modula-item.effect-sarah img.pic {
max-width:none;
}
.modula-gallery .modula-item.effect-sarah:hover img {
opacity: 0.4;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-sarah .figc {
text-align: left;
}
.modula-gallery .modula-item.effect-sarah .jtg-title {
position: relative;
overflow: hidden;
padding: 20px 0;
text-align:left;
}
.modula-gallery .modula-item.effect-sarah p.description {
padding: 20px 0;
text-align:left;
}
.modula-gallery .modula-item.effect-sarah .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-sarah .jtg-title::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.modula-gallery .modula-item.effect-sarah:hover .jtg-title::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-sarah p {
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.modula-gallery .modula-item.effect-sarah:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-sarah .jtg-social a {
padding:5px;
margin-right:10px;
}
/*---------------*/
/***** Lily *****/
/*---------------*/
.modula-gallery .modula-items .modula-item.effect-lily img {
max-width: none;
min-width: -webkit-calc(100% + 50px) !important;
min-width: calc(100% + 50px) !important;
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-20px,0, 0);
transform: translate3d(-20px,0,0);
}
body .modula-gallery.modula-columns .modula-items .modula-item.effect-lily img.pic {
max-width:none;
}
html body .modula-gallery .modula-items .modula-item.effect-lily .figc,
html body .modula-gallery .modula-items .modula-item.effect-lily .figc .jtg-title,
html body .modula-gallery .modula-items .modula-item.effect-lily .figc p{
text-align: left;
}
html body .modula-gallery .modula-items .modula-item.effect-lily .figc > div {
position: absolute;
bottom: 0;
left: 0;
top: 50%;
padding: 5%;
width: 100%;
}
.modula-gallery .modula-item.effect-lily .jtg-title,
.modula-gallery .modula-item.effect-lily .jtg-body {
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.modula-gallery .modula-item.effect-lily .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-lily .jtg-title:before {
displaY:none;
}
.modula-gallery .modula-item.effect-lily .jtg-body {
color: rgba(255,255,255,0.8);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
position: relative;
}
.modula-gallery .modula-item.effect-lily:hover img,
.modula-gallery .modula-item.effect-lily:hover .jtg-body {
opacity: 1;
}
.modula-gallery .modula-item.effect-lily:hover img,
.modula-gallery .modula-item.effect-lily:hover .jtg-title,
.modula-gallery .modula-item.effect-lily:hover .jtg-body {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-lily:hover .jtg-body {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
z-index:9999;
}
html body .modula-gallery .modula-items .modula-item.effect-lily .jtg-body .jtg-social {
text-align: left;
margin-top:10px;
}
@media all and (max-width:480px) {
html body .modula-gallery .modula-items .modula-item.effect-lily .jtg-body .jtg-social a {
margin-right:10px;
padding:5px;
text-align:left;
}
}
/*---------------*/
/***** Centered Bottom *****/
/*---------------*/
.modula-gallery .modula-items .modula-item.effect-centered-bottom img {
max-width: none;
min-width: -webkit-calc(100% + 50px) !important;
min-width: calc(100% + 50px) !important;
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-20px,0, 0);
transform: translate3d(-20px,0,0);
}
body .modula-gallery.modula-columns .modula-items .modula-item.effect-centered-bottom img.pic {
max-width:none;
}
html body .modula-gallery .modula-items .modula-item.effect-centered-bottom .figc,
html body .modula-gallery .modula-items .modula-item.effect-centered-bottom .figc .jtg-title,
html body .modula-gallery .modula-items .modula-item.effect-centered-bottom .figc p{
text-align: center;
}
html body .modula-gallery .modula-items .modula-item.effect-centered-bottom .figc > div {
position: absolute;
bottom: 0;
left: 0;
padding: 5%;
width: 100%;
box-sizing: border-box;
}
.modula-gallery .modula-item.effect-centered-bottom .jtg-title,
.modula-gallery .modula-item.effect-centered-bottom .jtg-body {
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.modula-gallery .modula-item.effect-centered-bottom .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-centered-bottom .jtg-title:before {
displaY:none;
}
.modula-gallery .modula-item.effect-centered-bottom .jtg-body {
color: rgba(255,255,255,0.8);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
position: relative;
}
.modula-gallery .modula-item.effect-centered-bottom:hover img,
.modula-gallery .modula-item.effect-centered-bottom:hover .jtg-body {
opacity: 1;
}
.modula-gallery .modula-item.effect-centered-bottom:hover img,
.modula-gallery .modula-item.effect-centered-bottom:hover .jtg-title,
.modula-gallery .modula-item.effect-centered-bottom:hover .jtg-body {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-centered-bottom:hover .jtg-body {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
z-index:9999;
}
html body .modula-gallery .modula-items .modula-item.effect-centered-bottom .jtg-body .jtg-social {
text-align: center;
margin-top:10px;
}
@media all and (max-width:480px) {
html body .modula-gallery .modula-items .modula-item.effect-centered-bottom .jtg-body .jtg-social a {
margin-right:10px;
padding:5px;
text-align:left;
}
}
/*---------------*/
/***** Sadie *****/
/*---------------*/
.modula-gallery .modula-item.effect-sadie .figc::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
.modula-gallery .modula-item.effect-sadie .jtg-title {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.modula-gallery .modula-item.effect-sadie .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-sadie .figc::before,
.modula-gallery .modula-item.effect-sadie .jtg-body {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-sadie .jtg-body {
position: absolute;
bottom: 0;
left: 0;
padding: 15%;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
z-index:99;
}
.modula-gallery .modula-item.effect-sadie:hover .jtg-title {
color: #fff;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
.modula-gallery .modula-item.effect-sadie:hover .figc::before ,
.modula-gallery .modula-item.effect-sadie:hover .jtg-body {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-items .modula-item.effect-sadie .jtg-body .jtg-social {
position: relative;
bottom: auto;
right: auto;
text-align: center;
}
html body .modula-gallery .modula-items .modula-item.effect-sadie .jtg-body .jtg-social a {
margin-right:10px;
text-align:center;
}
@media all and (max-width:480px) {
html body .modula-gallery .modula-items .modula-item.effect-sadie .jtg-body .jtg-social a {
padding:5px;
}
}
.modula-gallery .modula-items .modula-item.effect-sadie .jtg-body p.description {
margin-bottom:15px;
}
/*---------------*/
/***** Roxy *****/
/*---------------*/
.modula-gallery .modula-item.effect-roxy {
background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}
.modula-gallery .modula-item.effect-roxy img {
max-width: none;
width: -webkit-calc(100% + 60px) !important;
/*width: calc(100% + 60px) !important;*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50px,0,0);
transform: translate3d(-50px,0,0);
min-width:calc(100% + 100px) !important;
inset:unset;
}
.modula-gallery.modula-columns .modula-items .modula-item.effect-roxy img.pic {
width: -webkit-calc(100% + 20px) !important;
width: calc(100% + 20px) !important;
}
.modula-gallery .modula-item.effect-roxy .figc::before {
position: absolute;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
border: 1px solid #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-20px,0,0);
transform: translate3d(-20px,0,0);
}
html body .modula-gallery .modula-item.effect-roxy .figc {
padding: 10%;
text-align: left;
}
html body .modula-gallery .modula-item.effect-roxy .figc p {
text-align:left;
}
html body .modula-gallery .modula-item.effect-roxy .figc .figc-inner{
text-align:left;
max-width:85%;
}
.modula-gallery .modula-item.effect-roxy .jtg-title {
padding: 10px 0 10px 0;
text-align:left;
}
.modula-gallery .modula-item.effect-roxy .jtg-title:before {
display:none;
}
html body .modula-gallery .modula-item.effect-roxy .jtg-social {
position: relative;
bottom: auto;
right: auto;
text-align: left;
}
html body .modula-gallery .modula-item.effect-roxy .jtg-social a {
text-align:left;
}
.modula-gallery .modula-item.effect-roxy p,
.modula-gallery .modula-item.effect-roxy .jtg-social {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
}
.modula-gallery .modula-item.effect-roxy:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-roxy:hover .figc::before,
.modula-gallery .modula-item.effect-roxy:hover p,
.modula-gallery .modula-item.effect-roxy:hover .jtg-social {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-roxy .jtg-social {
margin-top:10px;
}
html body .modula-gallery .modula-item.effect-roxy .jtg-social a {
padding:5px;
}
/*---------------*/
/***** Bubba *****/
/*---------------*/
.modula-gallery .modula-item.effect-bubba {
background: #9e5406;
}
.modula-gallery .modula-item.effect-bubba img {
opacity: 0.7;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.modula-gallery .modula-item.effect-bubba:hover img {
opacity: 0.4;
}
.modula-gallery .modula-item.effect-bubba .figc::before,
.modula-gallery .modula-item.effect-bubba .figc::after {
position: absolute;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-bubba .figc::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.modula-gallery .modula-item.effect-bubba .figc::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
.modula-gallery .modula-item.effect-bubba .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.modula-gallery .modula-item.effect-bubba .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-bubba .jtg-body {
padding: 20px 2.5em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
z-index:999;
}
.modula-gallery .modula-item.effect-bubba:hover .figc::before,
.modula-gallery .modula-item.effect-bubba:hover .figc::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-bubba:hover .jtg-title,
.modula-gallery .modula-item.effect-bubba:hover .jtg-body {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-bubba .jtg-body .jtg-social {
position: relative;
bottom: auto;
right: auto;
text-align: center;
}
html body .modula-gallery .modula-item.effect-bubba .jtg-body .jtg-social a {
padding: 5px;
margin-right: 10px;
text-align:center;
}
.modula-gallery .modula-item.effect-bubba .jtg-body p.description {
padding-bottom: 20px;
}
html body .modula-gallery .modula-item.effect-bubba .figc {
padding:5.5%;
}
/*---------------*/
/***** Romeo *****/
/*---------------*/
.modula-gallery .modula-item.effect-romeo {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.modula-gallery .modula-item.effect-romeo img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,300px);
transform: translate3d(0,0,300px);
}
.modula-gallery .modula-item.effect-romeo:hover img {
opacity: 0.6;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-romeo .figc {
padding: 15%;
}
.modula-gallery .modula-item.effect-romeo .figc::before,
.modula-gallery .modula-item.effect-romeo .figc::after {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #fff;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.modula-gallery .modula-item.effect-romeo:hover .figc::before {
opacity: 0.5;
-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
transform: translate3d(-50%,-50%,0) rotate(45deg);
}
.modula-gallery .modula-item.effect-romeo:hover .figc::after {
opacity: 0.5;
-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
transform: translate3d(-50%,-50%,0) rotate(-45deg);
}
.modula-gallery .modula-item.effect-romeo .jtg-title,
.modula-gallery .modula-item.effect-romeo .jtg-body {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-romeo .jtg-title {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}
.modula-gallery .modula-item.effect-romeo .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-romeo .jtg-body {
padding: 0.25em 2em;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}
.modula-gallery .modula-item.effect-romeo:hover .jtg-title {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}
.modula-gallery .modula-item.effect-romeo:hover .jtg-body {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}
/*---------------*/
/***** Layla *****/
/*---------------*/
.modula-gallery .modula-item.effect-layla {
background: #18a367;
}
.modula-gallery .modula-item.effect-layla .modula-item-content {
height:100%;
}
.modula-gallery .modula-item.effect-layla img {
height: 390px;
}
.modula-gallery .modula-item.effect-layla .figc {
padding: 3em;
}
.modula-gallery .modula-item.effect-layla .figc::before,
.modula-gallery .modula-item.effect-layla .figc::after {
position: absolute;
content: '';
opacity: 0;
}
.modula-gallery .modula-item.effect-layla .figc::before {
top: 10%;
right: 5%;
bottom: 10%;
left: 5%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.modula-gallery .modula-item.effect-layla .figc::after {
top: 5%;
right: 10%;
bottom: 5%;
left: 10%;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.modula-gallery .modula-item.effect-layla .jtg-title {
padding-top: 26%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-layla .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-layla p {
padding: 0.5em 2em;
text-transform: none;
opacity: 0;
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
}
.modula-gallery .modula-item.effect-layla img,
.modula-gallery .modula-item.effect-layla .jtg-title {
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
min-height:calc(100% + 60px) !important;
}
.modula-gallery .modula-item.effect-layla img,
.modula-gallery .modula-item.effect-layla .figc::before,
.modula-gallery .modula-item.effect-layla .figc::after,
.modula-gallery .modula-item.effect-layla p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-layla:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-layla:hover .figc::before,
.modula-gallery .modula-item.effect-layla:hover .figc::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-layla:hover .jtg-title,
.modula-gallery .modula-item.effect-layla:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-layla:hover figc::after,
.modula-gallery .modula-item.effect-layla:hover .jtg-title,
.modula-gallery .modula-item.effect-layla:hover p,
.modula-gallery .modula-item.effect-layla:hover img {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
/*---------------*/
/***** Honey *****/
/*---------------*/
.modula-gallery .modula-item.effect-honey {
background: #4a3753;
}
.modula-gallery .modula-item.effect-honey img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.modula-gallery .modula-item.effect-honey:hover img {
opacity: 0.5;
}
.modula-gallery .modula-item.effect-honey .figc::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
html body .modula-gallery .modula-item.effect-honey .jtg-title {
position: absolute;
bottom: 0;
left: 0;
padding: 5% 6%;
width: 100%;
text-align: left;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
.modula-gallery .modula-item.effect-honey .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-honey .jtg-title i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
.modula-gallery .modula-item.effect-honey .figc::before,
.modula-gallery .modula-item.effect-honey .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-honey:hover .figc::before,
.modula-gallery .modula-item.effect-honey:hover .jtg-title,
.modula-gallery .modula-item.effect-honey:hover .jtg-title i {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*---------------*/
/***** Oscar *****/
/*---------------*/
.modula-gallery .modula-item.effect-oscar {
background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}
.modula-gallery .modula-item.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.modula-gallery .modula-item.effect-oscar .figc {
padding: 3em;
background-color: rgba(58,52,42,0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}
.modula-gallery .modula-item.effect-oscar .figc::before {
position: absolute;
top: 7.5%;
right: 7.5%;
bottom: 7.5%;
left: 7.5%;
border: 1px solid #fff;
content: '';
}
/*.modula-gallery .modula-item.effect-oscar .jtg-title {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}*/
.modula-gallery .modula-item.effect-oscar .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-oscar .figc::before,
.modula-gallery .modula-item.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
/*.modula-gallery .modula-item.effect-oscar:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}*/
.modula-gallery .modula-item.effect-oscar:hover .figc::before,
.modula-gallery .modula-item.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-oscar:hover .figc {
background-color: rgba(58,52,42,0);
}
.modula-gallery .modula-item.effect-oscar:hover img {
opacity: 0.4;
}
/*---------------*/
/***** Marley *****/
/*---------------*/
html body .modula-gallery .modula-item.effect-marley .figc,
html body .modula-gallery .modula-item.effect-marley .figc p,
html body .modula-gallery .modula-item.effect-marley .figc .jtg-title{
text-align: right;
}
.modula-gallery .modula-item.effect-marley .jtg-title,
.modula-gallery .modula-item.effect-marley p {
position: absolute;
right: 7.5%;
left: 7.5%;
padding: 2.5% 0;
}
.modula-gallery .modula-item.effect-marley p {
bottom: 7.5%;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.modula-gallery .modula-item.effect-marley .jtg-title {
top: 7.5%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.modula-gallery .modula-item.effect-marley .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-marley:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-marley .jtg-title::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.modula-gallery .modula-item.effect-marley .jtg-title::after,
.modula-gallery .modula-item.effect-marley p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-marley:hover .jtg-title::after,
.modula-gallery .modula-item.effect-marley:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*---------------*/
/***** Ruby *****/
/*---------------*/
.modula-gallery .modula-item.effect-ruby {
background-color: #17819c;
}
.modula-gallery .modula-item.effect-ruby .figc {
padding: 5%;
}
.modula-gallery .modula-item.effect-ruby .figc .figc-inner {
min-width:60%;
max-width:90%;
}
.modula-gallery .modula-item.effect-ruby img {
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.modula-gallery .modula-item.effect-ruby:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-ruby .jtg-title {
margin-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.modula-gallery .modula-item.effect-ruby .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-ruby .jtg-body {
margin: 2.5% 0 0;
padding: 5%;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
z-index:10;
}
.modula-gallery .modula-item.effect-ruby:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-ruby:hover .jtg-body {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
html body .modula-gallery .modula-item.effect-ruby .jtg-body .jtg-social {
position: relative;
bottom: auto;
right: auto;
width: 100%;
text-align: center;
margin-top:15px;
}
html body .modula-gallery .modula-item.effect-ruby .jtg-body .jtg-social a {
padding:5px;
margin-right:10px;
text-align:center;
}
/*---------------*/
/***** Milo *****/
/*---------------*/
.modula-gallery .modula-item.effect-milo {
background: #2e5d5a;
}
.modula-gallery .modula-item.effect-milo img {
max-width: none;
min-width: -webkit-calc(100% + 60px) !important;
min-width: calc(100% + 60px) !important;
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-30px,0,0) scale(1.12);
transform: translate3d(-30px,0,0) scale(1.12);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.modula-gallery.modula-columns .modula-items .modula-item.effect-milo img {
max-width:none;
}
.modula-gallery .modula-item.effect-milo:hover img {
opacity: 0.5;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
.modula-gallery .modula-item.effect-milo .jtg-title {
position: absolute;
right: 0;
bottom: 0;
padding: 1em 1.2em;
}
html body .modula-gallery .modula-items .modula-item.effect-milo p {
padding: 0 10px 0 0;
width: 50%;
border-right: 1px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0,0);
transform: translate3d(-40px,0,0);
}
html body .modula-gallery .modula-items .modula-item.effect-milo:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*---------------*/
/***** Dexter *****/
/*---------------*/
.modula-gallery .modula-item.effect-dexter {
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);
}
.modula-gallery .modula-item.effect-dexter .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-dexter img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.modula-gallery .modula-item.effect-dexter:hover img {
opacity: 0.4;
}
.modula-gallery .modula-item.effect-dexter .figc::after {
position: absolute;
right: 5%;
bottom: 5%;
left: 5%;
height: -webkit-calc(60% - 10px) !important;
height: calc(60% - 10px) !important;
border: 7px solid #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-60%,0);
transform: translate3d(0,-60%,0);
}
.modula-gallery .modula-item.effect-dexter:hover .figc::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-dexter .figc {
padding: 7%;
text-align: left;
display:block;
}
html body .modula-gallery .modula-item.effect-dexter .figc p {
text-align:left;
}
.modula-gallery .modula-item.effect-dexter .figc .jtg-title {
padding:10px;
text-align:left;
}
.modula-gallery .modula-item.effect-dexter .jtg-body {
position: absolute;
right: 8%;
bottom: 10%;
left: 8%;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
z-index: 999;
}
.modula-gallery .modula-item.effect-dexter:hover .jtg-body {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-dexter .jtg-body .jtg-social {
position: relative;
right: auto;
bottom: auto;
text-align: left;
}
.modula-gallery .modula-item.effect-dexter .jtg-body .jtg-social a {
padding:5px;
text-align:center;
}
.modula-gallery .modula-item.effect-dexter .jtg-body p.description {
padding:15px;
}
/*---------------*/
/***** Zoe *****/
/*---------------*/
.modula-gallery .modula-item.effect-zoe .modula-item-content {
height:100%;
}
.modula-gallery .modula-item.effect-zoe .figc {
top: auto;
bottom: 0;
padding: 1em;
height: auto !important;
background: #fff;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
box-sizing: border-box;
width: 100%;
z-index:99;
}
html body .modula.modula-gallery .modula-item.effect-zoe .figc{
padding: 1em;
}
.modula-gallery.modula-columns .modula-items .modula-item.effect-zoe .figc {
top:auto;
}
.modula-gallery .modula-item.effect-zoe .figc .figc-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.modula-gallery .modula-item.effect-zoe .figc .figc-inner .jtg-social {
flex-shrink: 0;
}
html body .modula .modula-items .modula-item.effect-zoe .jtg-social a:last-of-type {
margin-right:10px;
}
html body .modula-gallery .modula-item.effect-zoe .jtg-title {
float: left;
text-align: left;
}
.modula-gallery .modula-item.effect-zoe .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-zoe .jtg-social {
position: relative;
right: auto;
bottom: auto;
}
.modula-gallery .modula-item.effect-zoe .jtg-social a {
font-size: 1.4em;
}
.modula-gallery .modula-item.effect-zoe p.description {
position: absolute;
bottom: 150%;
padding: 5%;
color: #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
box-sizing: border-box;
width: 100%;
left: 0;
}
.modula-gallery .modula-item.effect-zoe .jtg-title,
.modula-gallery .modula-item.effect-zoe .jtg-social a {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}
.modula-gallery .modula-item.effect-zoe:hover p.description {
opacity: 1;
}
.modula-gallery .modula-item.effect-zoe:hover .figc,
.modula-gallery .modula-item.effect-zoe:hover .jtg-title,
.modula-gallery .modula-item.effect-zoe:hover .jtg-social a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-zoe:hover .jtg-title {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.modula-gallery .modula-item.effect-zoe:hover .jtg-social a:nth-child(4) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modula-gallery .modula-item.effect-zoe:hover .jtg-social a:nth-child(3) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.modula-gallery .modula-item.effect-zoe:hover .jtg-social a:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.modula-gallery .modula-item.effect-zoe:hover .jtg-social a:first-child {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
/* Color for admin */
.modula-gallery .panel-zoe .modula-item.effect-zoe .jtg-title,
.modula-gallery .panel-zoe .modula-item.effect-zoe .jtg-social a {
color: #000;
}
/*---------------*/
/***** Chico *****/
/*---------------*/
.modula-gallery .modula-item.effect-chico img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
.modula-gallery .modula-item.effect-chico:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-chico .figc {
padding: 3em;
}
.modula-gallery .modula-item.effect-chico .figc::before {
position: absolute;
top: 7.5%;
right: 7.5%;
bottom: 7.5%;
left: 7.5%;
border: 1px solid #fff;
content: '';
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.modula-gallery .modula-item.effect-chico .figc::before,
.modula-gallery .modula-item.effect-chico p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
html body .modula-gallery .modula-items .modula-item.effect-chico .figc-inner {
padding:8%;
}
html body .modula-gallery .modula-items .modula-item.effect-chico .figc-inner .jtg-social a {
margin-right:10px;
padding:5px;
}
.modula-gallery .modula-item.effect-chico .jtg-title {
padding: 20px 0 20px 0;
}
.modula-gallery .modula-item.effect-chico .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-chico p {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.modula-gallery .modula-item.effect-chico:hover .figc::before,
.modula-gallery .modula-item.effect-chico:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-item.effect-chico p.description {
padding-bottom:20px;
}
/*---------------*/
/***** Julia *****/
/*---------------*/
.modula-gallery .modula-item.effect-julia {
background: #2f3238;
}
.modula-gallery .modula-item.effect-julia img {
max-width: none;
height: 400px;
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
html body .modula-gallery .modula-item.effect-julia .figc,
html body .modula-gallery .modula-item.effect-julia .figc .jtg-title{
text-align: left;
}
html body .modula-gallery .modula-items .modula-item.effect-julia .figc .figc-inner {
display:flex;
flex-direction: column;
width:100%;
text-align:left;
}
html body .modula-gallery .modula-items .modula-item.effect-julia .figc .figc-inner .jtg-social a {
padding:5px;
}
.modula-gallery .modula-item.effect-julia .jtg-title {
position: relative;
padding: 0.5em 0;
}
.modula-gallery .modula-item.effect-julia .jtg-title:before {
display:none;
}
html body .modula-gallery .modula-item.effect-julia p.description,
html body .modula-gallery .modula-item.effect-julia .jtg-social {
display: table;
margin: 0 0 0.25em;
padding: 0.4em 1em;
background: rgba(255,255,255,0.9);
color: #2f3238;
text-transform: none;
font-weight: 500;
font-size: 75%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-120%,0,0);
transform: translate3d(-999%,0,0);
text-align:left;
}
html body .modula-gallery .modula-item.effect-julia .jtg-social a {
text-align:left;
}
.modula-gallery .modula-item.effect-julia p:first-child {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.modula-gallery .modula-item.effect-julia .jtg-social {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modula-gallery .modula-item.effect-julia p:nth-of-type(3) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.modula-gallery .modula-item.effect-julia:hover p:first-child {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.modula-gallery .modula-item.effect-julia:hover p:nth-of-type(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.modula-gallery .modula-item.effect-julia:hover p:nth-of-type(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modula-gallery .modula-item.effect-julia:hover img {
opacity: 0.4;
-webkit-transform: scale3d(1.1,1.1,1);
transform: scale3d(1.1,1.1,1);
}
.modula-gallery .modula-item.effect-julia:hover p,
.modula-gallery .modula-item.effect-julia:hover .jtg-social {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*-----------------*/
/***** Goliath *****/
/*-----------------*/
.modula-gallery .modula-item.effect-goliath {
background: #df4e4e;
}
.modula-gallery .modula-item.effect-goliath img,
.modula-gallery .modula-item.effect-goliath .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-goliath img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.modula-gallery .modula-item.effect-goliath .jtg-title,
.modula-gallery .modula-item.effect-goliath p {
position: absolute;
bottom: 0;
left: 0;
padding: 30px;
}
.modula-gallery .modula-item.effect-goliath p {
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.modula-gallery .modula-item.effect-goliath:hover img {
-webkit-transform: translate3d(0,-80px,0);
transform: translate3d(0,-80px,0);
}
.modula-gallery .modula-item.effect-goliath:hover .jtg-title {
-webkit-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
}
.modula-gallery .modula-item.effect-goliath .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-goliath:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*-----------------*/
/***** Hera *****/
/*-----------------*/
.modula-gallery .modula-item.effect-hera {
background: #303fa9;
}
.modula-gallery .modula-item.effect-hera .jtg-title {
font-size: 158.75%;
}
.modula-gallery .modula-item.effect-hera .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-hera .jtg-title,
.modula-gallery .modula-item.effect-hera .jtg-social {
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
.modula-gallery .modula-item.effect-hera .jtg-social {
right: auto;
bottom: auto;
}
.modula-gallery .modula-item.effect-hera .figc::before {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
border: 2px solid #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
html body .modula-gallery .modula-item.effect-hera .jtg-social {
width: 50%;
text-transform: none;
font-size: 121%;
line-height: 2;
text-align: center;
}
html body .modula-gallery .modula-item.effect-hera .jtg-social a {
text-align: center;
box-sizing: border-box;
/* Fix for gutter in socials settings */
margin:0 auto !important;
padding:5px;
}
.modula-gallery .modula-item.effect-hera .jtg-social a:hover,
.modula-gallery .modula-item.effect-hera .jtg-social a:focus {
opacity: 0.6;
}
.modula-gallery .modula-item.effect-hera .jtg-social a svg {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
vertical-align: middle;
margin:0 auto;
}
.modula-gallery .modula-item.effect-hera .jtg-social a:first-child svg {
-webkit-transform: translate3d(-60px,-60px,0);
transform: translate3d(-60px,-60px,0);
}
.modula-gallery .modula-item.effect-hera .jtg-social a:nth-child(2) svg {
-webkit-transform: translate3d(60px,-60px,0);
transform: translate3d(60px,-60px,0);
}
.modula-gallery .modula-item.effect-hera .jtg-social a:nth-child(3) svg {
-webkit-transform: translate3d(-60px,60px,0);
transform: translate3d(-60px,60px,0);
}
.modula-gallery .modula-item.effect-hera .jtg-social a:nth-child(4) svg {
-webkit-transform: translate3d(60px,60px,0);
transform: translate3d(60px,60px,0);
}
.modula-gallery .modula-item.effect-hera .jtg-social a:nth-child(5) svg {
-webkit-transform: translate3d(-60px,60px,0);
transform: translate3d(-60px,60px,0);
}
.modula-gallery .modula-item.effect-hera .jtg-social a:nth-child(6) svg {
-webkit-transform: translate3d(60px,60px,0);
transform: translate3d(60px,60px,0);
}
.modula-gallery .modula-item.effect-hera:hover .figc::before {
opacity: 1;
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}
.modula-gallery .modula-item.effect-hera:hover .jtg-title {
opacity: 0;
-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}
.modula-gallery .modula-items .modula-item.effect-hera:hover .jtg-social svg {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
opacity: 1;
}
.modula-gallery .modula-item.effect-hera p.description {
display:none;
}
.modula-gallery .modula-item.effect-hera:hover p.description {
display:block;
}
/*-----------------*/
/***** Selena *****/
/*-----------------*/
.modula-gallery .modula-item.effect-selena {
background: #fff;
}
.modula-gallery .modula-item.effect-selena img {
opacity: 0.95;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.modula-gallery .modula-item.effect-selena:hover img {
-webkit-transform: scale3d(0.95,0.95,1);
transform: scale3d(0.95,0.95,1);
}
.modula-gallery .modula-item.effect-selena .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.modula-gallery .modula-item.effect-selena p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
transform: perspective(1000px) rotate3d(1,0,0,90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.modula-gallery .modula-item.effect-selena:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-selena:hover p {
opacity: 1;
-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
transform: perspective(1000px) rotate3d(1,0,0,0);
}
html body .modula-gallery .modula-items .modula-item.effect-selena .jtg-social a {
margin-right:10px;
padding:5px;
}
/*-----------------*/
/***** Terry *****/
/*-----------------*/
.modula-gallery .modula-item.effect-terry {
background: #34495e;
}
.modula-gallery .modula-item.effect-terry .figc {
padding: 1em;
}
.modula-gallery:not(.modula-custom-grid) .modula-item.effect-terry .figc,
.modula-gallery:not(.modula-custom-grid) .modula-item.effect-terry {
min-height:200px;
}
.modula-gallery .modula-item.effect-terry .figc::before,
.modula-gallery .modula-item.effect-terry .figc::after {
position: absolute;
width: 200%;
height: 200%;
border-style: solid;
border-color: #101010;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-terry .figc::before {
right: 0;
bottom: 0;
border-width: 0 70px 60px 0;
-webkit-transform: translate3d(70px,60px,0);
transform: translate3d(70px,60px,0);
}
.modula-gallery .modula-item.effect-terry .figc::after {
top: 0;
left: 0;
border-width: 15px 0 0 15px;
-webkit-transform: translate3d(-15px,-15px,0);
transform: translate3d(-15px,-15px,0);
}
.modula-gallery .modula-item.effect-terry .figc .figc-inner {
width: 100%;
height: 100%;
}
.modula-gallery .modula-item.effect-terry img,
.modula-gallery .modula-item.effect-terry .jtg-social a {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-terry img {
opacity: 0.85;
}
html body .modula-gallery .modula-item.effect-terry .jtg-title {
position: absolute;
bottom: 0;
left: 0;
padding: 0.4em 15px;
width: 100%;
text-align: left;
}
.modula-gallery .modula-item.effect-terry .jtg-title:before {
display: none;
}
html body .modula-gallery .modula-item.effect-terry .jtg-social {
float: right;
clear: both;
text-align: left;
text-transform: none;
font-size: 111%;
position: relative;
right: auto;
bottom: auto;
margin-right: 25px;
margin-top: 15px;
}
.modula-gallery .modula-item.effect-terry .jtg-social a {
display: block;
margin-right: 0 !important;
color: #fff;
opacity: 0;
-webkit-transform: translate3d(90px,0,0);
transform: translate3d(90px,0,0);
width: auto;
text-align: left;
}
.modula-gallery .modula-item.effect-terry:hover .figc::before,
.modula-gallery .modula-item.effect-terry:hover .figc::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-terry:hover img {
opacity: 0.6;
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a {
opacity: 1;
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a:first-child {
-webkit-transition-delay: 0.025s;
transition-delay: 0.025s;
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a:nth-child(3) {
-webkit-transition-delay: 0.075s;
transition-delay: 0.075s;
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a:nth-child(4) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a:nth-child(5) {
-webkit-transition-delay: 0.125s;
transition-delay: 0.125s;
}
.modula-gallery .modula-item.effect-terry:hover .jtg-social a:nth-child(6) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
/*-----------------*/
/***** Apollo *****/
/*-----------------*/
.modula-gallery .modula-item.effect-apollo {
background: #3498db;
}
.modula-gallery .modula-item.effect-apollo img {
opacity: 0.95;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}
html body .modula-gallery .modula-items .modula-item.effect-apollo .figc {
padding:10%;
}
.modula-gallery .modula-item.effect-apollo .figc::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
content: '';
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);
transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);
}
html body .modula-gallery .modula-items .modula-item.effect-apollo p {
position: absolute;
right: 3%;
bottom: 3%;
margin: 10%;
padding: 0 5%;
border-right: 4px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
width:70%;
}
html body .modula-gallery .modula-items .modula-item.effect-apollo .jtg-title {
text-align: left;
}
.modula-gallery .modula-item.effect-apollo .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-apollo:hover img {
opacity: 0.6;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.modula-gallery .modula-item.effect-apollo:hover .figc::before {
-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0);
transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0);
}
html body .modula-gallery .modula-items .modula-item.effect-apollo:hover p {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
/*-----------------*/
/***** Kira *****/
/*-----------------*/
html body .modula-gallery .modula-item.effect-kira {
background: #fff;
text-align: left;
}
.modula-gallery .modula-item.effect-kira img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.modula-gallery .modula-item.effect-kira .figc {
z-index: 1;
}
.modula-gallery .modula-item.effect-kira p {
padding: 2.25em 0.5em;
font-weight: 600;
font-size: 100%;
line-height: 1.5;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
text-align:left;
}
.modula-gallery .modula-item.effect-kira .figc::before {
position: absolute;
top: 0;
right: 2em;
left: 2em;
z-index: -1;
height: 3.5em;
background: #fff;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
transform: translate3d(0,4em,0) scale3d(1,0.023,1);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.modula-gallery .modula-item.effect-kira:hover img {
opacity: 0.5;
}
.modula-gallery .modula-item.effect-kira:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-kira .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-kira:hover .figc::before {
opacity: 0.7;
-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
transform: translate3d(0,5em,0) scale3d(1,1,1);
}
/*-----------------*/
/***** Steve *****/
/*-----------------*/
.modula-gallery .modula-item.effect-steve {
z-index: auto;
overflow: visible;
background: #000;
overflow:hidden;
}
.modula-gallery .modula-item.effect-steve:before{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #000;
content: '';
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
html body .modula-gallery .modula-items .modula-item.effect-steve .figc {
padding:5%;
}
.modula-gallery .modula-item.effect-steve .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-steve:before {
box-shadow: 0 3px 30px rgba(0,0,0,0.8);
opacity: 0;
}
.modula-gallery .modula-item.effect-steve .figc {
z-index: 1;
}
.modula-gallery .modula-item.effect-steve img {
opacity: 1;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,0);
transform: perspective(1000px) translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-steve .jtg-title,
.modula-gallery .modula-item.effect-steve p {
background: #fff;
color: #2d434e;
}
.modula-gallery .modula-item.effect-steve .jtg-title {
position: relative;
margin-top: 2em;
padding: 0.25em;
}
html body .modula-gallery .modula-items .modula-item.effect-steve p {
margin-top: 1em;
padding: 0.5em;
font-weight: 800;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(0.9,0.9,1);
transform: scale3d(0.9,0.9,1);
}
.modula-gallery .modula-item.effect-steve:hover:before {
opacity: 1;
}
.modula-gallery .modula-item.effect-steve:hover img {
-webkit-transform: perspective(1000px) translate3d(0,0,21px);
transform: perspective(1000px) translate3d(0,0,21px);
}
html body .modula-gallery .modula-items .modula-item.effect-steve:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
/*---------------*/
/***** Jazz *****/
/*---------------*/
.modula-gallery .modula-item.effect-jazz {
background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
}
.modula-gallery .modula-item.effect-jazz img {
opacity: 0.9;
}
.modula-gallery .modula-item.effect-jazz .figc::after,
.modula-gallery .modula-item.effect-jazz img,
.modula-gallery .modula-item.effect-jazz p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-jazz .figc::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
content: '';
opacity: 0;
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.modula-gallery .modula-item.effect-jazz .figc-inner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.modula-gallery .modula-item.effect-jazz .jtg-title,
.modula-gallery .modula-item.effect-jazz p {
opacity: 1;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
}
.modula-gallery .modula-item.effect-jazz .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-jazz .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-jazz p {
padding: 0.5em 2em;
text-transform: none;
font-size: 0.85em;
opacity: 0;
}
.modula-gallery .modula-item.effect-jazz:hover img {
opacity: 0.7;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}
.modula-gallery .modula-item.effect-jazz:hover .figc::after {
opacity: 1;
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}
.modula-gallery .modula-item.effect-jazz:hover .jtg-title,
.modula-gallery .modula-item.effect-jazz:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
/*---------------*/
/***** Ming *****/
/*---------------*/
.modula-gallery .modula-item.effect-ming {
background: #030c17;
}
.modula-gallery .modula-item.effect-ming img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.modula-gallery .modula-item.effect-ming .figc::before {
position: absolute;
top: 7.5%;
right: 7.5%;
bottom: 7.5%;
left: 7.5%;
border: 2px solid #fff;
box-shadow: 0 0 0 100vmax rgba(255,255,255,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.4,1.4,1);
transform: scale3d(1.4,1.4,1);
}
html body .modula-gallery .modula-items .modula-item.effect-ming .figc {
padding:9%;
}
html body .modula-gallery .modula-items .modula-item.effect-ming .figc .figc-inner {
padding:5%;
}
.modula-gallery .modula-item.effect-ming .jtg-title {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.modula-gallery .modula-item.effect-ming .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-ming .jtg-body {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.5);
transform: scale(1.5);
z-index: 999;
position: relative;
}
.modula-gallery .modula-item.effect-ming:hover .jtg-title {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.modula-gallery .modula-item.effect-ming:hover .figc::before,
.modula-gallery .modula-item.effect-ming:hover .jtg-body {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.modula-gallery .modula-item.effect-ming:hover .figc {
background-color: rgba(58,52,42,0);
}
.modula-gallery .modula-item.effect-ming:hover img {
opacity: 0.4;
}
html body .modula-gallery .modula-items .modula-item.effect-ming .jtg-body .jtg-social {
margin-top:10px;
}
html body .modula-gallery .modula-items .modula-item.effect-ming .jtg-body .jtg-social a {
margin-right:10px;
padding:5px;
}
/*---------------*/
/***** Lexi *****/
/*---------------*/
.modula-gallery .modula-item.effect-lexi {
background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
background: linear-gradient(-45deg, #000 0%,#fff 100%);
}
html body .modula-gallery .modula-items .modula-item.effect-lexi .figc {
padding:5%;
}
.modula-gallery .modula-item.effect-lexi .modula-item-content {
height:100%;
}
.modula-gallery .modula-item.effect-lexi img {
margin: -10px 0 0 -10px;
max-width: none;
width: -webkit-calc(100% + 10px) !important;
width: calc(100% + 10px) !important;
opacity: 0.9;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(10px,10px,0);
transform: translate3d(-10px,-10px,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
min-height:calc(100% + 60px) !important;
min-width:calc(100% + 60px) !important;
}
.modula-gallery.modula-columns .modula-items:not(.justified-gallery) .modula-item.effect-lexi img.pic{
-webkit-transform: translate3d(-10px,0px,0);
transform: translate3d(-10px,0px,0);
}
.modula-gallery .modula-item.effect-lexi .figc::before,
.modula-gallery .modula-item.effect-lexi p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-lexi .figc::before {
position: absolute;
right: -100px;
bottom: -100px;
width: 300px;
height: 300px;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
content: '';
opacity: 0;
-webkit-transform: scale3d(0.5,0.5,1);
transform: scale3d(0.5,0.5,1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.modula-gallery .modula-item.effect-lexi:hover img,
.modula-gallery.modula-columns .modula-items:not(.justified-gallery) .modula-item.effect-lexi:hover img.pic {
opacity: 0.6;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-lexi .jtg-title {
text-align: left;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(5px,5px,0);
transform: translate3d(5px,5px,0);
}
.modula-gallery .modula-item.effect-lexi .jtg-title:before {
display:none;
}
html body .modula-gallery .modula-items .modula-item.effect-lexi p {
position: absolute;
right: 0;
bottom: 0;
padding: 0 1.5em 1.5em 0;
width: 140px;
text-align: right;
opacity: 0;
-webkit-transform: translate3d(20px,20px,0);
transform: translate3d(20px,20px,0);
}
.modula-gallery .modula-item.effect-lexi:hover .figc::before {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
html body .modula-gallery .modula-item.effect-lexi:hover .jtg-title,
html body .modula-gallery .modula-item.effect-lexi:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*---------------*/
/***** Duke *****/
/*---------------*/
.modula-gallery .modula-item.effect-duke {
background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}
html body .modula-gallery .modula-items .modula-item.effect-duke .figc {
padding:5%;
}
.modula-gallery .modula-item.effect-duke img,
.modula-gallery .modula-item.effect-duke p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-duke:hover img {
opacity: 0.1;
-webkit-transform: scale3d(2,2,1);
transform: scale3d(2,2,1);
}
.modula-gallery .modula-item.effect-duke .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.modula-gallery .modula-item.effect-duke .jtg-title:before {
display: none;
}
.modula-gallery .modula-items .modula-item.effect-duke p {
position: absolute;
bottom: 0;
left: 0;
margin: 20px;
padding: 30px;
border: 2px solid #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
width:calc(100% - 40px) !important;
}
.modula-gallery .modula-item.effect-duke:hover .jtg-title,
.modula-gallery .modula-item.effect-duke:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
/**
Tilt Hover Effects
**/
.modula-gallery .modula-item.effect-tilt_1 > *,
.modula-gallery .modula-item.effect-tilt_2 > *,
.modula-gallery .modula-item.effect-tilt_3 > *,
.modula-gallery .modula-item.effect-tilt_4 > *,
.modula-gallery .modula-item.effect-tilt_5 > *,
.modula-gallery .modula-item.effect-tilt_6 > *,
.modula-gallery .modula-item.effect-tilt_7 > *,
.modula-gallery .modula-item.effect-tilt_8 > *{
transform: translateZ(0px); /* Force correct stacking order */
}
.modula-gallery .modula-item.effect-tilt_1 .jtg-title:before,
.modula-gallery .modula-item.effect-tilt_2 .jtg-title:before,
.modula-gallery .modula-item.effect-tilt_3 .jtg-title:before,
.modula-gallery .modula-item.effect-tilt_4 .jtg-title:before,
.modula-gallery .modula-item.effect-tilt_5 .jtg-title:before,
.modula-gallery .modula-item.effect-tilt_6 .jtg-title:before,
.modula-gallery .modula-item.effect-tilt_7 .jtg-title:before,
.modula-gallery .modula-item.effect-tilt_8 .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-tilt_1 .modula-item-content,
.modula-gallery .modula-item.effect-tilt_2 .modula-item-content,
.modula-gallery .modula-item.effect-tilt_3 .modula-item-content,
.modula-gallery .modula-item.effect-tilt_4 .modula-item-content,
.modula-gallery .modula-item.effect-tilt_5 .modula-item-content,
.modula-gallery .modula-item.effect-tilt_6 .modula-item-content,
.modula-gallery .modula-item.effect-tilt_7 .modula-item-content,
.modula-gallery .modula-item.effect-tilt_8 .modula-item-content {
height:100%;
}
.modula-gallery .modula-item.effect-tilt_1 ,
.modula-gallery .modula-item.effect-tilt_2 ,
.modula-gallery .modula-item.effect-tilt_3 ,
.modula-gallery .modula-item.effect-tilt_4 ,
.modula-gallery .modula-item.effect-tilt_5 ,
.modula-gallery .modula-item.effect-tilt_6 ,
.modula-gallery .modula-item.effect-tilt_7 ,
.modula-gallery .modula-item.effect-tilt_8 ,
.modula-gallery .modula-item.effect-tilt_1 .figc,
.modula-gallery .modula-item.effect-tilt_2 .figc,
.modula-gallery .modula-item.effect-tilt_3 .figc,
.modula-gallery .modula-item.effect-tilt_4 .figc,
.modula-gallery .modula-item.effect-tilt_5 .figc,
.modula-gallery .modula-item.effect-tilt_6 .figc,
.modula-gallery .modula-item.effect-tilt_7 .figc,
.modula-gallery .modula-item.effect-tilt_8 .figc,
.modula-gallery .tilter__deco--lines,
.modula-gallery .tilter__deco--shine div {
transition: transform 0.2s ease-out;
}
.modula-gallery .modula-item.effect-tilt_1::before,
.modula-gallery .modula-item.effect-tilt_2::before ,
.modula-gallery .modula-item.effect-tilt_3::before ,
.modula-gallery .modula-item.effect-tilt_4::before ,
.modula-gallery .modula-item.effect-tilt_5::before ,
.modula-gallery .modula-item.effect-tilt_6::before ,
.modula-gallery .modula-item.effect-tilt_7::before ,
.modula-gallery .modula-item.effect-tilt_8::before {
content: '';
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
}
.modula-gallery .tilter__deco {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.modula-gallery .tilter__deco--overlay {
/*background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));*/
}
.modula-gallery .tilter__deco--shine div {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
/*background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);*/
}
.modula-gallery .tilter__deco--lines {
width: 90%;
height: 90%;
position: absolute;
top:5%;
left: 5%;
border: 1.5px solid #fff;
box-sizing: border-box;
}
html body .modula-gallery .modula-items .modula-item.effect-tilt_1 .figc,
html body .modula-gallery .modula-items .modula-item.effect-tilt_2 .figc ,
html body .modula-gallery .modula-items .modula-item.effect-tilt_3 .figc ,
html body .modula-gallery .modula-items .modula-item.effect-tilt_4 .figc ,
html body .modula-gallery .modula-items .modula-item.effect-tilt_5 .figc ,
html body .modula-gallery .modula-items .modula-item.effect-tilt_6 .figc ,
html body .modula-gallery .modula-items .modula-item.effect-tilt_7 .figc ,
html body .modula-gallery .modula-items .modula-item.effect-tilt_8 .figc {
position: absolute;
bottom: 0;
width: 100%;
padding: 10%;
}
/* Individual styles */
/* Example 1 */
html body .modula-gallery .modula-item.effect-tilt_1 .figc {
text-align: left;
align-items: flex-end;
justify-content: flex-start;
}
html body .modula-gallery .modula-item.effect-tilt_1 .figc .jtg-title,
html body .modula-gallery .modula-item.effect-tilt_1 .figc p{
text-align:left;
}
html body .modula-gallery .modula-item.effect-tilt_1 .figc .jtg-social {
position: relative;
bottom: auto;
right: auto;
text-align: left;
margin-top:10px;
}
.modula-gallery .modula-item.effect-tilt_1 .figc .jtg-social a {
opacity: 1;
text-align: left;
}
/* Example 3 (no lines, overlay hard-light) */
html body .modula-gallery .modula-items.effect-tilt_3 .figc {
padding: 15%;
text-align: right;
text-shadow: 0.1em 0.8em 1em rgba(0,0,0,0.35);
}
html body .modula-gallery .modula-items.effect-tilt_3 .figc .jtg-title,
html body .modula-gallery .modula-items.effect-tilt_3 .figc p {
text-align:right;
}
html body .modula-gallery .modula-item.effect-tilt_3 .figc {
text-align: right;
align-items: flex-end;
justify-content: flex-end;
}
.modula-gallery .modula-item.effect-tilt_3 .figc .jtg-social {
position: relative;
bottom: auto;
right: auto;
margin-top:10px;
text-align:right;
}
.modula-gallery .modula-item.effect-tilt_3 .figc .jtg-social a {
opacity: 1;
text-align:right;
}
/* Example 7 (different line) */
.modula-gallery .modula-item.effect-tilt_7 .tilter__deco--lines {
border-width: 10px;
transform: scale3d(0.9,0.9,1);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
}
.modula-gallery .modula-item.effect-tilt_7:hover .tilter__deco--lines {
opacity: 1;
transform: scale3d(1,1,1);
}
.modula-gallery .modula-item.effect-tilt_7 .tilter__figure::before {
box-shadow: none;
}
html body .modula-gallery .modula-item.effect-tilt_7 .figc {
text-align: left;
align-items: flex-end;
justify-content: flex-start;
}
html body .modula-gallery .modula-item.effect-tilt_7 .figc .jtg-title,
html body .modula-gallery .modula-item.effect-tilt_7 .figc p{
text-align:left;
}
html body .modula-gallery .modula-item.effect-tilt_7 .figc .jtg-social {
position: relative;
bottom: auto;
right: auto;
text-align: left;
margin-top:10px;
}
.modula-gallery .modula-item.effect-tilt_7 .figc .jtg-social a {
opacity: 1;
}
/*---------------*/
/***** fluid-up *****/
/*---------------*/
.modula-gallery .modula-item.effect-fluid-up .modula-item-content {
height:100%;
}
html body .modula-gallery .modula-items .modula-item.effect-fluid-up .figc {
top: auto;
display: block;
bottom: 0;
padding: 5%;
background: #fff;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
height:auto !important;
}
.modula-gallery .modula-items .modula-item.effect-fluid-up .jtg-title {
float: left;
color:#121212;
}
html body .modula-gallery .modula-item.effect-fluid-up p.description {
position: absolute;
bottom: 6em;
text-align: left;
text-transform: none;
opacity: 0;
left:0;
margin:0 1em;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}
.modula-gallery .modula-item.effect-fluid-up .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}
.modula-gallery .modula-item.effect-fluid-up .jtg-title {
display: inline-block;
}
.modula-gallery .modula-item.effect-fluid-up:hover p.description {
opacity: 1;
}
.modula-gallery .modula-item:not(.notitle).effect-fluid-up:hover .figc,
.modula-gallery .modula-item:not(.notitle).effect-fluid-up:hover .jtg-title,
.modula-gallery .modula-item:not(.notitle).effect-fluid-up:hover p.icon-links a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-fluid-up:hover .jtg-title {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
/*---------------*/
/***** comodo *****/
/*---------------*/
html body .modula-gallery .modula-items .effect-comodo .jtg-social {
position: absolute;
bottom: 20px;
text-align: center;
left: 0;
right: 0;
}
.modula-gallery .modula-items .effect-comodo .jtg-social a {
display: inline-block;
text-align:center;
}
.modula-gallery .modula-items .effect-comodo .jtg-social a:last-of-type {
margin-right: 0;
}
.modula-gallery .modula-items .modula-item.effect-comodo img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
.modula-gallery .modula-items .modula-item.effect-comodo:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
.modula-gallery .modula-items .modula-item.effect-comodo .figc {
display: block;
}
.modula-gallery .modula-items .modula-item.effect-comodo .jtg-title {
margin-top: 20px;
}
@media all and (max-width:480px) {
html body .modula-gallery .modula-items .modula-item.effect-comodo .jtg-social a {
margin-right:10px;
padding:5px;
}
}
/* Individual effects */
/*-----------------*/
/***** catinelle *****/
/*-----------------*/
.modula-gallery .modula-items .effect-catinelle .figc {
display: flex;
align-items: center;
justify-content: center;
}
.modula-gallery .modula-items .effect-catinelle .jtg-social {
width:60px;
transform:scale(2);
transition:all .3s;
}
html body .modula .modula-items .effect-catinelle .jtg-social a {
padding: 0;
margin:0 10px 10px 0;
font-size: 24px;
}
/*.modula-gallery .modula-items .effect-catinelle .jtg-social a:nth-child(2n) {
margin-right: 0;
}*/
.modula-gallery .modula-items .effect-catinelle:hover .jtg-social {
width:60px;
transform:scale(1);
}
/*-----------------*/
/***** Winston *****/
/*-----------------*/
html body .modula-gallery .modula-item.effect-winston {
background: #162633;
text-align: left;
}
html body .modula-gallery .modula-item.effect-winston .jtg-title,
html body .modula-gallery .modula-item.effect-winston p{
text-align:left;
}
.modula-gallery .modula-item.effect-winston img {
-webkit-transition: opacity 0.45s;
transition: opacity 0.45s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.modula-gallery .modula-item.effect-winston .figc::before {
position: absolute;
bottom: 0;
left: 0;
width: 1200%;
height: 300%;
background: url(../images/triangle.svg) no-repeat bottom center;
background-size: cover;
content: '';
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.45s, transform 0.45s;
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.modula-gallery .modula-item.effect-winston .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.modula-gallery .modula-item.effect-winston .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-winston .jtg-social {
position: absolute;
right: 7.25%;
bottom: 7.25%;
padding: 0 1.5em 2em 0;
}
.modula-gallery .modula-item.effect-winston a {
margin: 0 10px;
}
.modula-gallery .modula-item.effect-winston .jtg-social a {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.modula-gallery .modula-item.effect-winston:hover img {
opacity: 0.6;
}
.modula-gallery .modula-item.effect-winston:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-winston:hover .figc::before {
opacity: 0.7;
-webkit-transform: rotate3d(0, 0, 1, 20deg);
transform: rotate3d(0, 0, 1, 20deg);
height: 300%;
width: 1200%;
}
.modula-gallery .modula-item.effect-winston:hover .jtg-social a {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-winston:hover .jtg-social a:nth-child(4) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.modula-gallery .modula-item.effect-winston:hover .jtg-social a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modula-gallery .modula-item.effect-winston:hover .jtg-social a:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.modula-gallery .modula-item.effect-winston:hover .jtg-social a:first-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/*-----------------*/
/***** Selena *****/
/*-----------------*/
.modula-gallery .modula-item.effect-selena {
background: #fff;
}
html body .modula-gallery .modula-items .modula-item.effect-selena .figc {
padding:10%;
}
.modula-gallery .modula-item.effect-selena img {
opacity: 0.95;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.modula-gallery .modula-item.effect-selena:hover img {
-webkit-transform: scale3d(0.95,0.95,1);
transform: scale3d(0.95,0.95,1);
}
.modula-gallery .modula-item.effect-selena .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.modula-gallery .modula-item.effect-selena .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-selena p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
transform: perspective(1000px) rotate3d(1,0,0,90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.modula-gallery .modula-item.effect-selena:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.modula-gallery .modula-item.effect-selena:hover p {
opacity: 1;
-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
transform: perspective(1000px) rotate3d(1,0,0,0);
}
/*-----------------*/
/***** Phoebe *****/
/*-----------------*/
.modula-gallery .modula-item.effect-phoebe {
background: #675983;
}
.modula-gallery .modula-item.effect-phoebe img {
opacity: 0.85;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.modula-gallery .modula-item.effect-phoebe:hover img {
opacity: 0.6;
}
.modula-gallery .modula-item.effect-phoebe .figc::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/triangle2.svg) no-repeat center center;
background-size: cover;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(5,2.5,1);
transform: scale3d(5,2.5,1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
html body .modula-gallery .modula-items .modula-item.effect-phoebe .figc {
padding:10%;
}
.modula-gallery .modula-item.effect-phoebe:hover .figc::before {
opacity: 0.6;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.modula-gallery .modula-items .modula-item.effect-phoebe .jtg-title {
margin-top: 1em;
-webkit-transition: transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.modula-gallery .modula-item.effect-phoebe .jtg-title:before {
display: none;
}
.modula-gallery .modula-item.effect-phoebe:hover .jtg-title {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
html body .modula-gallery .modula-item.effect-phoebe .jtg-social {
text-align: center;
}
html body .modula-gallery .modula-items .modula-item.effect-phoebe .jtg-social a {
color: #fff;
opacity: 0;
position: relative;
display: inline-block;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
padding:5px;
margin-right:10px;
text-align:center;
}
.modula-gallery .modula-item.effect-phoebe .jtg-social a:first-child {
-webkit-transform: translate3d(-60px,-60px,0);
transform: translate3d(-60px,-60px,0);
}
.modula-gallery .modula-item.effect-phoebe .jtg-social a:nth-child(2) {
-webkit-transform: translate3d(0,60px,0);
transform: translate3d(0,60px,0);
}
.modula-gallery .modula-item.effect-phoebe .jtg-social a:nth-child(3) {
-webkit-transform: translate3d(60px,-60px,0);
transform: translate3d(60px,-60px,0);
}
.modula-gallery .modula-item.effect-phoebe .jtg-social a:nth-child(4) {
-webkit-transform: translate3d(0,60px,0);
transform: translate3d(0,60px,0);
}
.modula-gallery .modula-item.effect-phoebe .jtg-social a:nth-child(5) {
-webkit-transform: translate3d(60px,60px,0);
transform: translate3d(60px,60px,0);
}
.modula-gallery .modula-item.effect-phoebe .jtg-social a:nth-child(6) {
-webkit-transform: translate3d(60px,-60px,0);
transform: translate3d(60px,-60px,0);
}
html body .modula-gallery .modula-items .modula-item.effect-phoebe:hover .jtg-social a {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*-----------------*/
/***** reflex *****/
/*-----------------*/
.modula-gallery .modula-item.effect-reflex img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}
.modula-gallery .modula-item.effect-reflex .figc {
display: block;
}
.modula-gallery .modula-item.effect-reflex .figc-inner {
margin:5%;
}
.modula-gallery .modula-item.effect-reflex .figc-inner .jtg-title,
.modula-gallery .modula-item.effect-reflex .figc-inner p {
border-left: 3px solid #fff;
padding-left: 2.5%;
}
html body .modula-gallery .modula-item.effect-reflex .figc-inner p {
text-align: left;
margin-top:0px;
opacity: 0;
transition: opacity .3s;
}
.modula-gallery .modula-item.effect-reflex:hover .figc-inner p {
opacity: 1
}
html body .modula-gallery .modula-item.effect-reflex .jtg-title {
text-align: left;
}
.modula-gallery .modula-item.effect-reflex .jtg-social {
position: absolute;
bottom: 5%;
right: 5%;
}
@media all and (max-width: 480px) {
html body .modula-gallery .modula-item.effect-reflex .jtg-social {
right: 0;
left:0;
text-align:center;
}
html body .modula-gallery .modula-items .modula-item.effect-reflex .jtg-social a {
padding: 5px;
margin-right:10px;
text-align:center;
}
}
.modula-gallery .modula-item.effect-reflex:hover img {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
/*-----------------*/
/***** curtain *****/
/*-----------------*/
html body .modula-gallery .modula-items .effect-curtain .jtg-social {
position: relative;
text-align: left;
bottom: auto;
right: auto;
background: rgba( 255,255,255,.6 );
padding: 2.5% 2.5% 2%;
overflow: hidden;
transform:scaleY(0);
transform-origin:top;
}
html body .modula-gallery .modula-items .effect-curtain .jtg-social a {
text-align:left;
}
@media all and (max-width: 480px) {
html body .modula-gallery .modula-items .effect-curtain .jtg-social {
text-align: center;
}
html body .modula-gallery .modula-items .effect-curtain .jtg-social a {
margin-right:10px;
padding:5px;
}
}
.modula-gallery .modula-items .effect-curtain:hover .jtg-social {
transform:scaleY(1);
}
html body .modula-gallery .modula-items .effect-curtain .jtg-title {
text-align: left;
padding: 0 0 2.5%;
border-bottom: 2px solid rgba( 255,255,255,.6 );
}
html body .modula-gallery .modula-items .modula-item.effect-curtain .figc {
text-align: left;
display: block;
}
html body .modula-gallery .modula-items .modula-item.effect-curtain .figc a,
html body .modula-gallery .modula-items .modula-item.effect-curtain .figc p{
text-align:left;
}
.modula-gallery .modula-items .modula-item.effect-curtain .figc-inner {
position: relative;
width: 100%;
height: 100%;
padding: 10%;
box-sizing: border-box;
}
/*.modula-gallery .modula-item.effect-curtain .figc::before {
position: absolute;
top: 0;
right: 35px;
left: 35px;
height: 60px;
background: #fff;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,70px,0) scale3d(1,0.023,1) ;
transform: translate3d(0,70px,0) scale3d(1,0.023,1);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}*/
.modula-gallery .modula-item.effect-curtain:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/*.modula-gallery .modula-item.effect-curtain:hover .figc::before {
opacity: 0.7;
-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
transform: translate3d(0,5em,0) scale3d(1,1,1);
}*/
/*---------------*/
/***** lens *****/
/*---------------*/
.modula-gallery .modula-item .figc {
display: flex;
align-items: center;
justify-content: center;
}
.modula-gallery .modula-item.effect-lens img,
.modula-gallery .modula-item.effect-lens p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.modula-gallery .modula-item.effect-lens:hover img {
-webkit-transform: scale3d(2,2,1);
transform: scale3d(2,2,1);
}
.modula-gallery .modula-item.effect-lens .jtg-title {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
html body .modula-gallery .modula-item.effect-lens .jtg-social {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
text-align: center;
}
html body .modula-gallery .modula-item.effect-lens .jtg-social a {
text-align:left;
}
@media all and (max-width:480px) {
html body .modula-gallery .modula-item.effect-lens .jtg-social a {
padding:5px;
margin-right:10px;
}
}
html body .modula-gallery .modula-item.effect-lens p {
text-align: center;
opacity: 0;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
margin-top: 10px;
}
.modula-gallery .modula-item.effect-lens:hover .jtg-title,
.modula-gallery .modula-item.effect-lens:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
}
/**
Effect Black White
*/
html body .modula-gallery .modula-item.effect-greyscale img.pic {
-webkit-filter : grayscale(1);
filter : grayscale(1);
transition:300ms ease-in;
}
html body .modula-gallery .modula-item.effect-greyscale:hover img.pic {
-webkit-filter : grayscale(0);
filter : none;
}
html body .modula-gallery .modula-item.effect-greyscale:hover .jtg-title,
html body .modula-gallery .modula-item.effect-greyscale:hover p.description {
display:none;
}
html body .modula-gallery .modula-item.effect-greyscale .modula-item-overlay {
display:none;
}
#modula-hover-effect.modula-tab-content .modula-gallery .modula-item.effect-greyscale .jtg-social {
right: 30px;
position: absolute;
bottom: 20px;
text-align: right;
transition: all .3s;
}
#modula-hover-effect.modula-tab-content .modula-gallery .modula-item.effect-greyscale .jtg-social a {
text-align:right;
}
/****
Filter Styles
*/
html body .modula >.filters {
margin: 20px 0 20px 0;
}
html body .modula > .filters.vertical-filters {
margin-top: 0;
width: 20%;
float: left;
}
html body .modula > .filters ul.modula_menu__list a.modula_menu__link,
html body .modula-pro-live-preview ul.modula_menu__list a.modula_menu__link{
text-decoration: none;
display: inline-block;
margin:0;
color: #333;
outline: none;
transition: 350ms ease-in;
}
html body .modula > .filters.menu--default a {
border-bottom: 2px solid transparent;
}
html body .modula > .filters.colored a {
border: 0;
color: #fff;
}
html body .modula > .filters:not(.styled-menu) a:hover,
html body .modula > .filters:not(.styled-menu) a.selected {
border-bottom-color: #333;
border-bottom: 1px solid;
}
/*html body .modula .modula-item {
width: 100%;
}*/
html body .modula.vertical-filters .modula-items {
width: 80%;
float: left;
}
html body .modula:after {
content: "";
display: block;
clear: both;
}
html body .modula.vertical-filters .filters {
width: 20%;
float: left;
}
html body .modula > .filters ul.modula_menu__list {
display:inline-block;
}
html body .modula > .filters.vertical-filters.both-vertical + .modula-items {
width: 60%;
float: left;
}
html body .modula > .filters.vertical-filters a {
display: block;
margin-bottom: 15px;
}
html body .modula > .filters.vertical-filters.colored a {
border-radius: 5px;
text-align: center;
background: #fff;
border: 1px solid #3498db;
color: #3498db;
}
html body .modula > .filters.vertical-filters.colored a:hover,
html body .modula > .filters.vertical-filters.colored a.selected {
background: #fff;
color: #8e44ad;
border-color: #8e44ad;
}
html body .modula > .filters.horizontal-filters.colored a {
display: inline-block;
padding: 0 30px;
margin-right: 2px;
background: #3498db;
position: relative;
border: 0px;
}
html body .modula > .filters.horizontal-filters.colored a:hover,
html body .modula > .filters.horizontal-filters.colored a.selected {
background: #8e44ad;
}
html body .modula > .filters.horizontal-filters.colored a:before {
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
border: none;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: medium;
border-left-color: currentcolor;
border-left-style: none;
border-left-width: medium;
border-left: solid 17px white;
border-bottom: solid 41px transparent;
z-index: 1;
transition: .4s;
}
html body .modula > .filters.horizontal-filters.colored a:after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 0;
height: 0;
border: none;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: medium;
border-left-color: currentcolor;
border-left-style: none;
border-left-width: medium;
border-left: solid 17px transparent;
border-bottom: solid 41px white;
z-index: 1;
transition: .4s;
}
html body .filter-by-wrapper {
text-align: center;
margin-bottom: 25px;
text-transform: uppercase;
}
html body .filter-by-wrapper span {
cursor: pointer;
}
html body .filter-by-wrapper span:after {
content: "";
margin-left: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 10px 0 10px;
border-color: #0470e3 transparent transparent transparent;
display: inline-block;
}
html body .filter-by-wrapper.opened span:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 15px 10px;
border-color: transparent transparent #d500ff transparent;
display: inline-block;
}
html body .modula > .filters.vertical-filters a {
margin-bottom: 0;
}
html body .modula > .filters .modula_menu__list li.modula_menu__item {
margin: 15px;
}
@media all and (min-width: 1025px) {
html body .filter-by-wrapper {
display: none !important;
}
html body .modula > .filters {
display: block !important;
}
}
@media all and (max-width: 1024px) {
html body .modula.vertical-filters .filters,
html body .modula.vertical-filters .modula-items,
html body .modula > .filters.vertical-filters.both-vertical + .modula-items {
width: 100% !important;
float: none;
}
html body .modula > .filters .modula_menu__list {
padding: 0px;
}
html body .modula > .filters .modula_menu__list li.modula_menu__item {
margin: 0;
}
}
html body .modula > .filters {
margin: 0;
box-sizing: border-box;
}
.modula-gallery.horizontal-filters .filters {
margin-bottom: 20px;
}
.modula-gallery.horizontal-filters .modula-items + .filters {
margin-top: 20px;
margin-bottom: 0;
}
.modula-gallery.vertical-filters .filters {
padding-right: 20px;
}
.modula-gallery.vertical-filters .modula-items + .filters {
padding-left: 20px;
padding-right: 0;
}
/* Default */
html body .modula > .filters.menu--default a {
text-decoration: none;
display: inline-block;
margin:0 10px 0 0;
color: #333;
outline:none;
transition:350ms ease-in;
}
html body .modula > .filters.menu--default a:hover,
html body .modula > .filters.menu--default .modula_menu__item--current a {
border-bottom-color: #333;
border-bottom:1px solid;
}
html body .modula > .filters .modula_menu__item {
display:inline-block;
}
html body .modula > .filters.vertical-filters .modula_menu__item {
display: block;
}
html body .modula > .filters .modula_menu__link {
text-decoration:none;
outline:none;
color:#000000;
padding: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
display: inline-block;
line-height: 1;
}
html body .modula > .filters.menu--default .modula_menu__list li.modula_menu__item .modula_menu__link {
padding: 0;
}
html body .modula > .filters .modula_menu__link:hover,
html body .modula > .filters .modula_menu__link:focus {
outline: none;
color:#ff0000;
}
html body .modula > .filters .modula_menu__list {
margin: 0 0 5px 0;
padding-left: 0;
}
html body .modula > .filters .modula_menu__list li.modula_menu__item {
margin: 0 10px 0 0;
}
/* Individual styles */
/* Alonso */
html body .modula > .filters.menu--alonso .modula_menu__item {
margin: 0;
}
html body .modula > .filters.menu--alonso .modula_menu__link {
width: 120px;
height: 3em;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--alonso .modula_menu__link:hover,
html body .modula > .filters.menu--alonso .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--alonso .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
html body .modula > .filters.menu--alonso .modula_menu__line {
position: absolute;
top: 100%;
left: 0;
width: 120px;
height: 2px;
pointer-events: none;
border: 1px solid #fff;
border-width: 0 45px;
background: #d94f5c;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(1).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(2).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(3).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(4).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(300%, 0, 0);
transform: translate3d(300%, 0, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(5).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(400%, 0, 0);
transform: translate3d(400%, 0, 0);
}
@media screen and (max-width:55em) {
html body .modula > .filters.menu--alonso .modula_menu__line {
top: 3em;
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(1).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(2).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(3).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(0, 6em, 0);
transform: translate3d(0, 6em, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(4).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(0, 9em, 0);
transform: translate3d(0, 9em, 0);
}
html body .modula > .filters.menu--alonso .modula_menu__item:nth-child(5).modula_menu__item--current ~ .modula_menu__line {
-webkit-transform: translate3d(0, 12em, 0);
transform: translate3d(0, 12em, 0);
}
}
/* Sebastian */
html body .modula > .filters.menu--sebastian .modula_menu__link {
position: relative;
display: block;
margin: 0 1em;
text-align: center;
color: #929292;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
html body .modula > .filters.menu--sebastian .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--sebastian .modula_menu__link::before,
html body .modula > .filters.menu--sebastian .modula_menu__link::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #d94f5c;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
html body .modula > .filters.menu--sebastian .modula_menu__link::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
html body .modula > .filters.menu--sebastian .modula_menu__link::after {
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
html body .modula > .filters.menu--sebastian .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--sebastian .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
/* Prospero */
html body .modula > .filters.menu--prospero .modula_menu__link {
position: relative;
display: block;
margin: 0 1.5em;
padding: 0.75em 0;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--prospero .modula_menu__link:hover,
html body .modula > .filters.menu--prospero .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--prospero .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--prospero .modula_menu__link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: #d94f5c;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
}
html body .modula > .filters.menu--prospero .modula_menu__item--current .modula_menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
/* Viola */
html body .modula > .filters.menu--viola .modula_menu__item {
position: relative;
margin: 0 1em;
}
html body .modula > .filters.menu--viola .modula_menu__link {
position: relative;
display: block;
text-align: center;
color: #929292;
-webkit-transition: color 0.4s;
transition: color 0.4s;
width:auto;
}
html body .modula > .filters.menu--viola .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--viola .modula_menu__item::before,
html body .modula > .filters.menu--viola .modula_menu__item::after,
html body .modula > .filters.menu--viola .modula_menu__link::before,
html body .modula > .filters.menu--viola .modula_menu__link::after {
content: '';
position: absolute;
background: #d94f5c;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
html body .modula > .filters.menu--viola .modula_menu__item::before,
html body .modula > .filters.menu--viola .modula_menu__item::after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
html body .modula > .filters.menu--viola .modula_menu__item::before {
left: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
html body .modula > .filters.menu--viola .modula_menu__item::after {
right: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
html body .modula > .filters.menu--viola .modula_menu__link::before,
html body .modula > .filters.menu--viola .modula_menu__link::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
html body .modula > .filters.menu--viola .modula_menu__link::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
html body .modula > .filters.menu--viola .modula_menu__link::after {
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
html body .modula > .filters.menu--viola .modula_menu__item--current::before,
html body .modula > .filters.menu--viola .modula_menu__item--current::after,
html body .modula > .filters.menu--viola .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--viola .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
/* Antonio */
html body .modula > .filters.menu--antonio .modula_menu__item {
position: relative;
}
html body .modula > .filters.menu--antonio .modula_menu__link {
position: relative;
display: block;
min-width: 110px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
html body .modula > .filters.menu--antonio .modula_menu__link:hover,
html body .modula > .filters.menu--antonio .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--antonio .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
html body .modula > .filters.menu--antonio .modula_menu__item::before,
html body .modula > .filters.menu--antonio .modula_menu__item::after,
html body .modula > .filters.menu--antonio .modula_menu__link::before,
html body .modula > .filters.menu--antonio .modula_menu__link::after {
content: '';
position: absolute;
background: #d94f5c;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
html body .modula > .filters.menu--antonio .modula_menu__item::before,
html body .modula > .filters.menu--antonio .modula_menu__item::after {
top: 0;
width: 4px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
html body .modula > .filters.menu--antonio .modula_menu__item::before {
left: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
html body .modula > .filters.menu--antonio .modula_menu__item::after {
right: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
html body .modula > .filters.menu--antonio .modula_menu__link::before,
html body .modula > .filters.menu--antonio .modula_menu__link::after {
left: 0;
width: 100%;
height: 4px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
html body .modula > .filters.menu--antonio .modula_menu__link::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
html body .modula > .filters.menu--antonio .modula_menu__link::after {
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
html body .modula > .filters.menu--antonio .modula_menu__item--current::before,
html body .modula > .filters.menu--antonio .modula_menu__item--current::after,
html body .modula > .filters.menu--antonio .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--antonio .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
html body .modula > .filters.menu--antonio .modula_menu__item--current::after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
html body .modula > .filters.menu--antonio .modula_menu__item--current .modula_menu__link::before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
html body .modula > .filters.menu--antonio .modula_menu__item--current .modula_menu__link::after {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/* Miranda */
html body .modula > .filters.menu--miranda .modula_menu__item {
position: relative;
margin: 1em;
}
html body .modula > .filters.menu--miranda .modula_menu__link {
position: relative;
display: block;
min-width: 100px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--miranda .modula_menu__link:hover,
html body .modula > .filters.menu--miranda .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--miranda .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--miranda .modula_menu__item::before,
html body .modula > .filters.menu--miranda .modula_menu__item::after,
html body .modula > .filters.menu--miranda .modula_menu__link::before,
html body .modula > .filters.menu--miranda .modula_menu__link::after {
content: '';
position: absolute;
background: #d94f5c;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
-webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}
/* left and right line */
html body .modula > .filters.menu--miranda .modula_menu__item::before,
html body .modula > .filters.menu--miranda .modula_menu__item::after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
/* left line */
html body .modula > .filters.menu--miranda .modula_menu__item::before {
left: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
/* right line */
html body .modula > .filters.menu--miranda .modula_menu__item::after {
right: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
/* top and bottom line */
html body .modula > .filters.menu--miranda .modula_menu__link::before,
html body .modula > .filters.menu--miranda .modula_menu__link::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
/* top line */
html body .modula > .filters.menu--miranda .modula_menu__link::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
/* bottom line */
html body .modula > .filters.menu--miranda .modula_menu__link::after {
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
/* Delays (first reverse, then current) */
/* These rules can be simplified, but let's keep it for better readability */
/* bottom line */
html body .modula > .filters.menu--miranda .modula_menu__item .modula_menu__link::after {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
html body .modula > .filters.menu--miranda .modula_menu__item--current .modula_menu__link::after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* left line */
html body .modula > .filters.menu--miranda .modula_menu__item::before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
html body .modula > .filters.menu--miranda .modula_menu__item--current::before {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
/* top line */
html body .modula > .filters.menu--miranda .modula_menu__item .modula_menu__link::before {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
html body .modula > .filters.menu--miranda .modula_menu__item--current .modula_menu__link::before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/* right line */
html body .modula > .filters.menu--miranda .modula_menu__item--current::after {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
html body .modula > .filters.menu--miranda .modula_menu__item--current::before,
html body .modula > .filters.menu--miranda .modula_menu__item--current::after,
html body .modula > .filters.menu--miranda .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--miranda .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* Ariel */
html body .modula > .filters.menu--ariel .modula_menu__item {
position: relative;
margin: 0.5em 1em;
}
html body .modula > .filters.menu--ariel .modula_menu__link {
line-height: 1.15;
position: relative;
display: block;
min-width: 110px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--ariel .modula_menu__link:hover,
html body .modula > .filters.menu--ariel .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--ariel .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--ariel .modula_menu__item::before,
html body .modula > .filters.menu--ariel .modula_menu__item::after,
html body .modula > .filters.menu--ariel .modula_menu__link::before,
html body .modula > .filters.menu--ariel .modula_menu__link::after {
content: '';
position: absolute;
background: #d94f5c;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);
transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);
}
html body .modula > .filters.menu--ariel .modula_menu__item::before,
html body .modula > .filters.menu--ariel .modula_menu__item::after {
top: 0;
width: 4px;
height: 100%;
-webkit-transform: scale3d(0.1, 0, 1);
transform: scale3d(0.1, 0, 1);
}
/* left line */
html body .modula > .filters.menu--ariel .modula_menu__item::before {
left: 0;
}
/* right line */
html body .modula > .filters.menu--ariel .modula_menu__item::after {
right: 0;
}
html body .modula > .filters.menu--ariel .modula_menu__link::before,
html body .modula > .filters.menu--ariel .modula_menu__link::after {
left: 0;
width: 100%;
height: 4px;
-webkit-transform: scale3d(0, 0.1, 1);
transform: scale3d(0, 0.1, 1);
}
/* top line */
html body .modula > .filters.menu--ariel .modula_menu__link::before {
top: 0;
}
/* bottom line */
html body .modula > .filters.menu--ariel .modula_menu__link::after {
bottom: 0;
}
html body .modula > .filters.menu--ariel .modula_menu__item--current::before,
html body .modula > .filters.menu--ariel .modula_menu__item--current::after,
html body .modula > .filters.menu--ariel .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--ariel .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* Caliban */
html body .modula > .filters.menu--caliban .modula_menu__item {
margin: 0.5em 0;
}
html body .modula > .filters.menu--caliban .modula_menu__link {
position: relative;
display: block;
margin: 0 1em;
color: #b5b5b5;
-webkit-transition: color 0.2s;
transition: color 0.2s;
text-align: center;
}
html body .modula > .filters.menu--caliban .modula_menu__link:hover,
html body .modula > .filters.menu--caliban .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--caliban .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--caliban .modula_menu__link::before,
html body .modula > .filters.menu--caliban .modula_menu__link::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #d94f5c;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
background:transparent !important;
}
html body .modula > .filters.menu--caliban .modula_menu__link::before {
border-width: 0 2px;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
html body .modula > .filters.menu--caliban .modula_menu__link::after {
border-width: 2px 0;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
html body .modula > .filters.menu--caliban .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--caliban .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* Ferdinand */
html body .modula > .filters.menu--ferdinand .modula_menu__link {
position: relative;
display: block;
margin: 0 1.5em;
padding: 0.65em 0;
text-align: center;
color: #b5b5b5;
-webkit-transition: background 0.3s, color 0.3s;
transition: background 0.3s, color 0.3s;
}
html body .modula > .filters.menu--ferdinand .modula_menu__link:hover,
html body .modula > .filters.menu--ferdinand .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--ferdinand .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--ferdinand .modula_menu__link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #d94f5c;
-webkit-transform: scale3d(0, 5, 1);
transform: scale3d(0, 5, 1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}
html body .modula > .filters.menu--ferdinand .modula_menu__item--current .modula_menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* Adrian */
html body .modula > .filters.menu--adrian .modula_menu__item {
margin: 0 1em;
}
html body .modula > .filters.menu--adrian .modula_menu__link {
position: relative;
overflow: hidden;
width: 130px;
padding: 1em 0;
color: #b5b5b5;
}
html body .modula > .filters.menu--adrian .modula_menu__link:hover,
html body .modula > .filters.menu--adrian .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--adrian .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--adrian .modula_menu__link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 300%;
height: 50px;
opacity: 0;
-webkit-transform: translate3d(130px, 0, 0);
transform: translate3d(130px, 0, 0);
-webkit-transition: -webkit-transform 0s 0.3s, opacity 0.3s;
transition: transform 0s 0.3s, opacity 0.3s;
}
html body .modula > .filters.menu--adrian .modula_menu__item--current .modula_menu__link::before {
opacity: 1;
-webkit-transform: translate3d(-260px, 0, 0);
transform: translate3d(-260px, 0, 0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
html body .modula > .filters.menu--adrian .modula_menu__helper {
display: block;
pointer-events: none;
}
html body .modula > .filters.menu--adrian .modula_menu__item--current .modula_menu__helper {
-webkit-animation: anim-adrian 0.3s forwards;
animation: anim-adrian 0.3s forwards;
}
@-webkit-keyframes anim-adrian {
50% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes anim-adrian {
50% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* Francisco */
html body .modula > .filters.menu--francisco .modula_menu__item {
margin: 0 1.5em;
}
html body .modula > .filters.menu--francisco .modula_menu__link {
position: relative;
overflow: hidden;
/*height: 3em;*/
padding: 1em 0;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--francisco .modula_menu__link:hover,
html body .modula > .filters.menu--francisco .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--francisco .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--francisco .modula_menu__link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
opacity: 0;
background: #d94f5c;
-webkit-transform: translate3d(0, -1em, 0);
transform: translate3d(0, -1em, 0);
-webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;
transition: transform 0s 0.3s, opacity 0.2s;
}
html body .modula > .filters.menu--francisco .modula_menu__item--current .modula_menu__link::before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.3s, opacity 0.1s;
transition: transform 0.3s, opacity 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
html body .modula > .filters.menu--francisco .modula_menu__helper {
display: block;
pointer-events: none;
}
html body .modula > .filters.menu--francisco .modula_menu__item--current .modula_menu__helper {
-webkit-animation: anim-francisco 0.3s forwards;
animation: anim-francisco 0.3s forwards;
}
@-webkit-keyframes anim-francisco {
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes anim-francisco {
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* Trinculo */
html body .modula > .filters.menu--trinculo .modula_menu__item {
margin: 0 1.75em;
}
html body .modula > .filters.menu--trinculo .modula_menu__link {
position: relative;
padding: 1em 0.1em;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--trinculo .modula_menu__link:hover,
html body .modula > .filters.menu--trinculo .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--trinculo .modula_menu__link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
opacity: 0;
background: #d94f5c;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition: -webkit-transform 0s 0.2s, opacity 0.2s;
transition: transform 0s 0.2s, opacity 0.2s;
}
html body .modula > .filters.menu--trinculo .modula_menu__item--current .modula_menu__link::before {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.2s, opacity 0.1s;
transition: transform 0.2s, opacity 0.1s;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
html body .modula > .filters.menu--trinculo .modula_menu__helper {
display: block;
pointer-events: none;
}
html body .modula > .filters.menu--trinculo .modula_menu__item--current .modula_menu__helper {
-webkit-animation: anim-trinculo 0.6s forwards;
animation: anim-trinculo 0.6s forwards;
}
@-webkit-keyframes anim-trinculo {
50% {
opacity: 0;
color: #929292;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
51% {
opacity: 0;
color: #d94f5c;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
75% {
opacity: 1;
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
opacity: 1;
color: #d94f5c;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes anim-trinculo {
50% {
opacity: 0;
color: #929292;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
51% {
opacity: 0;
color: #d94f5c;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
75% {
opacity: 1;
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
opacity: 1;
color: #d94f5c;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* Stephano */
html body .modula > .filters.menu--stephano .modula_menu__item {
position: relative;
margin: 0 1em;
}
html body .modula > .filters.menu--stephano .modula_menu__link {
position: relative;
min-width: 105px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--stephano .modula_menu__link:hover,
html body .modula > .filters.menu--stephano .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--stephano .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--stephano .modula_menu__item::before,
html body .modula > .filters.menu--stephano .modula_menu__link::before,
html body .modula > .filters.menu--stephano .modula_menu__link::after {
content: '';
position: absolute;
bottom: 0;
width: 10px;
height: 2px;
opacity: 0;
background: #d94f5c;
}
/* flipped sides */
html body .modula > .filters.menu--stephano .modula_menu__link::before,
html body .modula > .filters.menu--stephano .modula_menu__link::after {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
html body .modula > .filters.menu--stephano .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--stephano .modula_menu__item--current .modula_menu__link::after {
opacity: 1;
}
/* left flip */
html body .modula > .filters.menu--stephano .modula_menu__link::before {
left: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
html body .modula > .filters.menu--stephano .modula_menu__item--current .modula_menu__link::before {
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
}
/* right flip */
html body .modula > .filters.menu--stephano .modula_menu__link::after {
right: 0;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
html body .modula > .filters.menu--stephano .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
}
/* bottom line */
html body .modula > .filters.menu--stephano .modula_menu__item::before {
left: 0;
width: 100%;
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
html body .modula > .filters.menu--stephano .modula_menu__item--current::before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.3s, opacity 0.1s;
transition: transform 0.3s, opacity 0.1s;
}
/* Iris */
html body .modula > .filters.menu--iris .modula_menu__item {
margin: 0 1em;
}
html body .modula > .filters.menu--iris .modula_menu__link {
position: relative;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--iris .modula_menu__link:hover,
html body .modula > .filters.menu--iris .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--iris .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--iris .modula_menu__link::before,
html body .modula > .filters.menu--iris .modula_menu__link::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
opacity: 0;
border: 2px solid #d94f5c;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
background:transparent !important;
}
html body .modula > .filters.menu--iris .modula_menu__link::before {
top: 0;
left: 0;
border-width: 2px 0 0 2px;
-webkit-transform: translate3d(10px, 10px, 0);
transform: translate3d(10px, 10px, 0);
}
html body .modula > .filters.menu--iris .modula_menu__link::after {
right: 0;
bottom: 0;
border-width: 0 2px 2px 0;
-webkit-transform: translate3d(-10px, -10px, 0);
transform: translate3d(-10px, -10px, 0);
}
html body .modula > .filters.menu--iris .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--iris .modula_menu__item--current .modula_menu__link::after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Ceres */
html body .modula > .filters.menu--ceres .modula_menu__item {
position: relative;
margin:0 !important;
}
html body .modula > .filters.menu--ceres .modula_menu__link {
position: relative;
min-width: 115px;
height: 50px;
padding:0;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
line-height: 50px;
}
html body .modula > .filters.menu--ceres .modula_menu__link:hover,
html body .modula > .filters.menu--ceres .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--ceres .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--ceres .modula_menu__item::before,
html body .modula > .filters.menu--ceres .modula_menu__item::after,
html body .modula > .filters.menu--ceres .modula_menu__link::after {
content: '';
position: absolute;
bottom: 0;
background: #d94f5c;
}
html body .modula > .filters.menu--ceres .modula_menu__item::before,
html body .modula > .filters.menu--ceres .modula_menu__item::after {
width: 2px;
height: 100%;
opacity: 0;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transition: -webkit-transform 0s 0.1s, opacity 0.1s;
transition: transform 0s 0.1s, opacity 0.1s;
}
html body .modula > .filters.menu--ceres .modula_menu__item::before {
left: 0;
}
html body .modula > .filters.menu--ceres .modula_menu__item::after {
right: 0;
}
html body .modula > .filters.menu--ceres .modula_menu__item--current::before,
html body .modula > .filters.menu--ceres .modula_menu__item--current::after {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
/* bottom line */
html body .modula > .filters.menu--ceres .modula_menu__link::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
html body .modula > .filters.menu--ceres .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: translate3d(0, -48px, 0);
transform: translate3d(0, -48px, 0);
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
/* Juno */
html body .modula > .filters.menu--juno .modula_menu__item {
position: relative;
overflow: hidden;
margin: 0.5em;
}
html body .modula > .filters.menu--juno .modula_menu__link {
position: relative;
z-index: 10;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
width:auto;
}
html body .modula > .filters.menu--juno .modula_menu__link:hover,
html body .modula > .filters.menu--juno .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--juno .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--juno .modula_menu__item::before,
html body .modula > .filters.menu--juno .modula_menu__item::after,
html body .modula > .filters.menu--juno .modula_menu__link::before,
html body .modula > .filters.menu--juno .modula_menu__link::after {
content: '';
position: absolute;
pointer-events: none;
opacity: 0;
background: #d94f5c;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* top and bottom line */
html body .modula > .filters.menu--juno .modula_menu__item::before,
html body .modula > .filters.menu--juno .modula_menu__item::after {
left: 0;
width: 100%;
height: 2px;
}
html body .modula > .filters.menu--juno .modula_menu__item::before {
top: 0;
-webkit-transform: translate3d(0, 15px, 0);
transform: translate3d(0, 15px, 0);
}
html body .modula > .filters.menu--juno .modula_menu__item::after {
bottom: 0;
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
/* left and right line */
html body .modula > .filters.menu--juno .modula_menu__link::before,
html body .modula > .filters.menu--juno .modula_menu__link::after {
top: 0;
width: 2px;
height: 100%;
}
html body .modula > .filters.menu--juno .modula_menu__link::before {
left: 0;
-webkit-transform: translate3d(15px, 0, 0);
transform: translate3d(15px, 0, 0);
}
html body .modula > .filters.menu--juno .modula_menu__link::after {
right: 0;
-webkit-transform: translate3d(-15px, 0, 0);
transform: translate3d(-15px, 0, 0);
}
html body .modula > .filters.menu--juno .modula_menu__item--current::before,
html body .modula > .filters.menu--juno .modula_menu__item--current::after,
html body .modula > .filters.menu--juno .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--juno .modula_menu__item--current .modula_menu__link::after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Maria */
html body .modula > .filters.menu--maria .modula_menu__item {
position: relative;
display: inline-block;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
margin: 0 1.25em;
text-align: center;
}
html body .modula > .filters.menu--maria.vertical-filters .modula_menu__item {
display:block;
}
html body .modula > .filters.menu--maria .modula_menu__item::before {
content: '';
position: absolute;
top: 40px;
left: 50%;
width: 60px;
height: 4px;
margin-left: -15px;
background: #d94f5c;
-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0, 1, 1) translateX( -50% );
transform: rotate3d(0, 0, 1, -45deg) scale3d(0, 1, 1) translateX( -50% );
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
html body .modula > .filters.menu--maria .modula_menu__item.modula_menu__item--current::before {
-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
}
html body .modula > .filters.menu--maria .modula_menu__link {
position: relative;
color: #929292;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
html body .modula > .filters.menu--maria .modula_menu__link:hover,
html body .modula > .filters.menu--maria .modula_menu__link:focus {
color: #d94f5c;
}
html body .modula > .filters.menu--maria .modula_menu__item.modula_menu__item--current .modula_menu__link {
color: #333;
}
/* Valentine */
html body .modula > .filters.menu--valentine .modula_menu__item {
position: relative;
margin: 0 1em;
}
html body .modula > .filters.menu--valentine .modula_menu__link {
position: relative;
display: block;
min-width: 105px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--valentine .modula_menu__link:hover,
html body .modula > .filters.menu--valentine .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--valentine .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--valentine .modula_menu__item::before,
html body .modula > .filters.menu--valentine .modula_menu__item::after,
html body .modula > .filters.menu--valentine .modula_menu__link::before,
html body .modula > .filters.menu--valentine .modula_menu__link::after {
content: '';
position: absolute;
background: #d94f5c;
-webkit-transform-origin: 350% 350%;
transform-origin: 350% 350%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
html body .modula > .filters.menu--valentine .modula_menu__item::before,
html body .modula > .filters.menu--valentine .modula_menu__item::after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
/* left line */
html body .modula > .filters.menu--valentine .modula_menu__item::before {
left: 0;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
/* right line */
html body .modula > .filters.menu--valentine .modula_menu__item::after {
right: 0;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
html body .modula > .filters.menu--valentine .modula_menu__link::before,
html body .modula > .filters.menu--valentine .modula_menu__link::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
/* top line */
html body .modula > .filters.menu--valentine .modula_menu__link::before {
top: 0;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
/* bottom line */
html body .modula > .filters.menu--valentine .modula_menu__link::after {
bottom: 0;
}
html body .modula > .filters.menu--valentine .modula_menu__item--current::before,
html body .modula > .filters.menu--valentine .modula_menu__item--current::after,
html body .modula > .filters.menu--valentine .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--valentine .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* Puck (by @eden_sg) */
html body .modula > .filters.menu--puck .modula_menu__link {
position: relative;
display: block;
margin: 0 1em;
text-align: center;
color: #929292;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
html body .modula > .filters.menu--puck .modula_menu__link:hover,
html body .modula > .filters.menu--puck .modula_menu__link:focus {
color: #828282;
}
html body .modula > .filters.menu--puck .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--puck .modula_menu__link::before,
html body .modula > .filters.menu--puck .modula_menu__link::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 7px;
background: #d94f5c;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
html body .modula > .filters.menu--puck .modula_menu__link::before {
bottom: -5px;
height: 2px;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
html body .modula > .filters.menu--puck .modula_menu__link::after {
bottom: 0;
}
html body .modula > .filters.menu--puck .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--puck .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0, 1.54, 0.34, 1);
transition-timing-function: cubic-bezier(0, 1.54, 0.34, 1);
-webkit-transition-duration: 0.8s;
transition-duration: 0.8s;
}
/* Titania (by @rileyjshaw) */
html body .modula > .filters.menu--titania .modula_menu__item {
margin: 0;
}
html body .modula > .filters.menu--titania .modula_menu__link {
width: 120px;
height: 3em;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s 0.2s;
transition: color 0.3s 0.2s;
}
html body .modula > .filters.menu--titania .modula_menu__link:hover,
html body .modula > .filters.menu--titania .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--titania .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
-webkit-transition: color 0.7s 0.2s;
transition: color 0.7s 0.2s;
}
html body .modula > .filters.menu--titania .modula_menu__lines {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 100%;
pointer-events: none;
border: 2px solid #d94f5c;
border-width: 2px 0;
-webkit-transition: -webkit-transform 0.5s 0.2s;
transition: transform 0.5s 0.2s;
-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}
/* vertical lines */
html body .modula > .filters.menu--titania .modula_menu__lines::before,
html body .modula > .filters.menu--titania .modula_menu__lines::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #d94f5c;
border-width: 0 2px;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
/* animates out at transition start */
html body .modula > .filters.menu--titania .modula_menu__lines::before {
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
-webkit-transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
}
/* animates back in at transition end */
html body .modula > .filters.menu--titania .modula_menu__lines::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.2s ease 0.7s;
transition: transform 0.2s ease 0.7s;
}
html body .modula > .filters.menu--titania .modula_menu__item:active:not(.modula_menu__item--current) ~ .modula_menu__lines::before,
html body .modula > .filters.menu--titania .modula_menu__item:active:not(.modula_menu__item--current) ~ .modula_menu__lines::after {
-webkit-transition: -webkit-transform 0s;
transition: transform 0s;
}
html body .modula > .filters.menu--titania .modula_menu__item:active:not(.modula_menu__item--current) ~ .modula_menu__lines::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
html body .modula > .filters.menu--titania .modula_menu__item:active:not(.modula_menu__item--current) ~ .modula_menu__lines::after {
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(1).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(2).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(3).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(4).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(300%, 0, 0);
transform: translate3d(300%, 0, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(5).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(400%, 0, 0);
transform: translate3d(400%, 0, 0);
}
@media screen and (max-width:55em) {
html body .modula > .filters.menu--titania .modula_menu__lines {
height: 20%;
border-width: 0 2px;
}
/* horizontal lines */
html body .modula > .filters.menu--titania .modula_menu__lines::before,
html body .modula > .filters.menu--titania .modula_menu__lines::after {
border-width: 2px 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
html body .modula > .filters.menu--titania .modula_menu__lines::before {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
html body .modula > .filters.menu--titania .modula_menu__item:active:not(.modula_menu__item--current) ~ .modula_menu__lines::after {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(1).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(2).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(3).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(4).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(0, 300%, 0);
transform: translate3d(0, 300%, 0);
}
html body .modula > .filters.menu--titania .modula_menu__item:nth-child(5).modula_menu__item--current ~ .modula_menu__lines {
-webkit-transform: translate3d(0, 400%, 0);
transform: translate3d(0, 400%, 0);
}
}
/* bagot (by @RplusTW) */
html body .modula > .filters.menu--bagot .modula_menu__item {
position: relative;
}
html body .modula > .filters.menu--bagot .modula_menu__link {
position: relative;
min-width: 7rem;
height: 50px;
padding: 1em 1.5em;
text-align: center;
opacity: 0.7;
color: #929292;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
html body .modula > .filters.menu--bagot .modula_menu__item::before,
html body .modula > .filters.menu--bagot .modula_menu__item::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #d94f5c;
border-style: solid;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(1, 0.6, 0, 1);
transition: transform 0.2s cubic-bezier(1, 0.6, 0, 1);
}
html body .modula > .filters.menu--bagot .modula_menu__item::before {
border-width: 2px 0 0;
-webkit-transform: translateY(calc(100% - 2px));
transform: translateY(calc(100% - 2px));
}
html body .modula > .filters.menu--bagot .modula_menu__item::after {
right: -1px;
left: -1px; /* for border-collapse */
border-width: 0 2px;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
html body .modula > .filters.menu--bagot .modula_menu__item.modula_menu__item--current::before {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
}
html body .modula > .filters.menu--bagot .modula_menu__item.modula_menu__item--current::after {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
}
html body .modula > .filters.menu--bagot .modula_menu__item--current .modula_menu__link,
html body .modula > .filters.menu--bagot .modula_menu__link:hover,
html body .modula > .filters.menu--bagot .modula_menu__link:focus {
opacity: 1;
}
html body .modula > .filters.menu--bagot .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
@media screen and (max-width:55em) {
html body .modula > .filters.menu--bagot .modula_menu__item {
margin: 0;
}
html body .modula > .filters.menu--bagot .modula_menu__item::before {
border-width: 0 2px 0 0;
-webkit-transform: translateX(calc(2px - 100%));
transform: translateX(calc(2px - 100%));
}
html body .modula > .filters.menu--bagot .modula_menu__item::after {
top: -1px;
right: 0;
bottom: -1px;
left: 0;
border-width: 2px 0;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
}
/* Shylock (by @benhanks040888) */
html body .modula > .filters.menu--shylock .modula_menu__link {
position: relative;
margin: 0 1em;
padding-right: 0;
padding-left: 0;
color: #b5b5b5;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
html body .modula > .filters.menu--shylock .modula_menu__item--current .modula_menu__link,
html body .modula > .filters.menu--shylock .modula_menu__item--current .modula_menu__link:hover,
html body .modula > .filters.menu--shylock .modula_menu__item--current .modula_menu__link:focus {
color: #d94f5c;
}
html body .modula > .filters.menu--shylock .modula_menu__item--current .modula_menu__link::after,
html body .modula > .filters.menu--shylock .modula_menu__item--current .modula_menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
html body .modula > .filters.menu--shylock.modula_menu__item--current .modula_menu__link::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
html body .modula > .filters.menu--shylock .modula_menu__link:hover,
html body .modula > .filters.menu--shylock .modula_menu__link:focus {
color: #b5b5b5;
}
html body .modula > .filters.menu--shylock .modula_menu__link:hover::before,
html body .modula > .filters.menu--shylock .modula_menu__link:focus::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
html body .modula > .filters.menu--shylock .modula_menu__link::before,
html body .modula > .filters.menu--shylock .modula_menu__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: center left;
transform-origin: center left;
-webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html body .modula > .filters.menu--shylock .modula_menu__link::before {
background: #b5b5b5;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
html body .modula > .filters.menu--shylock .modula_menu__link::after {
background: #d94f5c;
}
/* Cordelia (by @vivien_le_neez) */
html body .modula > .filters.menu--cordelia .modula_menu__item {
position: relative;
}
html body .modula > .filters.menu--cordelia .modula_menu__link {
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
html body .modula > .filters.menu--cordelia .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}
html body .modula > .filters.menu--cordelia .modula_menu__item::before,
html body .modula > .filters.menu--cordelia .modula_menu__item::after {
content: '';
position: absolute;
z-index: 10;
width: 100%;
height: 2px;
background: #d94f5c;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-animation-fill-mode: initial;
animation-fill-mode: initial;
}
html body .modula > .filters.menu--cordelia .modula_menu__item::before {
top: 0;
right: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
html body .modula > .filters.menu--cordelia .modula_menu__item::after {
bottom: 0;
left: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
html body .modula > .filters.menu--cordelia .modula_menu__item--current::before {
-webkit-animation: anim-cordelia-top 0.6s linear both;
animation: anim-cordelia-top 0.6s linear both;
}
html body .modula > .filters.menu--cordelia .modula_menu__item--current::after {
-webkit-animation: anim-cordelia-bottom 0.6s linear both;
animation: anim-cordelia-bottom 0.6s linear both;
}
@-webkit-keyframes anim-cordelia-top {
0% {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
10% {
-webkit-transform: scale3d(0.05, 1, 1);
transform: scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes anim-cordelia-top {
0% {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
10% {
-webkit-transform: scale3d(0.05, 1, 1);
transform: scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@-webkit-keyframes anim-cordelia-bottom {
0% {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
10% {
-webkit-transform: scale3d(0.05, 1, 1);
transform: scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes anim-cordelia-bottom {
0% {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
10% {
-webkit-transform: scale3d(0.05, 1, 1);
transform: scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
/* Horatio Styles */
html body .modula > .filters.menu--horatio .modula_menu__item {
margin-left: 3px;
margin-right: 3px;
color: #4e3c3e;
}
html body .modula > .filters.menu--horatio .modula_menu__item {
position: relative;
-webkit-transition: color .25s;
transition: color .25s;
}
html body .modula > .filters.menu--horatio .modula_menu__item a {
position: relative;
color: inherit;
width:auto;
text-align:center;
}
html body .modula > .filters.menu--horatio .modula_menu__item--current {
color: #b5b5b5;
}
html body .modula > .filters.menu--horatio .modula_menu__item:hover {
color: #d94f5c;
}
html body .modula > .filters.menu--horatio .modula_menu__item::before,
html body .modula > .filters.menu--horatio .modula_menu__item::after,
html body .modula > .filters.menu--horatio .modula_menu__item a::before,
html body .modula > .filters.menu--horatio .modula_menu__item a::after {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid currentColor;
}
html body .modula > .filters.menu--horatio .modula_menu__item::before {
border-width: 0 0 0 2px;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
html body .modula > .filters.menu--horatio .modula_menu__item::after {
border-width: 0 2px 0 0;
-webkit-transform-origin: right top;
transform-origin: right top;
}
html body .modula > .filters.menu--horatio .modula_menu__item a::before,
html body .modula > .filters.menu--horatio .modula_menu__item a::after {
z-index: 2;
}
html body .modula > .filters.menu--horatio .modula_menu__item a::before {
border-width: 2px 0 0;
-webkit-transform-origin: left top;
transform-origin: left top;
}
html body .modula > .filters.menu--horatio .modula_menu__item a::after {
border-width: 0 0 2px;
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
html body .modula > .filters.menu--horatio .modula_menu__item--current::before,
html body .modula > .filters.menu--horatio .modula_menu__item--current::after,
html body .modula > .filters.menu--horatio .modula_menu__item:hover::before,
html body .modula > .filters.menu--horatio .modula_menu__item:hover::after,
html body .modula > .filters.menu--horatio .modula_menu__item--current a::before,
html body .modula > .filters.menu--horatio .modula_menu__item--current a::after,
html body .modula > .filters.menu--horatio .modula_menu__item:hover a::before,
html body .modula > .filters.menu--horatio .modula_menu__item:hover a::after {
content: '';
background-color: transparent !important;
}
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover::before,
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover::after,
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover a::before,
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover a::after {
-webkit-animation: horatio-anim .6s ease-in-out;
animation: horatio-anim .6s ease-in-out;
}
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover::before {
-webkit-animation-delay: -.45s;
animation-delay: -.45s;
}
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover a::before {
-webkit-animation-delay: -.3s;
animation-delay: -.3s;
}
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover::after {
-webkit-animation-delay: -.15s;
animation-delay: -.15s;
}
html body .modula > .filters.menu--horatio .modula_menu__item:not(.modula_menu__item--current):hover a::after {
-webkit-animation-delay: 0;
animation-delay: 0;
}
@-webkit-keyframes horatio-anim {
0%, 33% {
opacity: 0;
-webkit-transform: rotate(45deg) scale(1.5);
transform: rotate(45deg) scale(1.5);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes horatio-anim {
0%, 33% {
opacity: 0;
-webkit-transform: rotate(45deg) scale(1.5);
transform: rotate(45deg) scale(1.5);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/* End: Horatio Styles */
/* Luce (by @ryjohnson) */
html body .modula > .filters.menu--luce .modula_menu__item {
position: relative;
margin: 1em;
}
html body .modula > .filters.menu--luce .modula_menu__link {
position: relative;
display: block;
min-width: 100px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}
html body .modula > .filters.menu--luce .modula_menu__link:hover,
html body .modula > .filters.menu--luce .modula_menu__link:focus {
color: #929292;
}
html body .modula > .filters.menu--luce .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--luce .modula_menu__item::before,
html body .modula > .filters.menu--luce .modula_menu__item::after,
html body .modula > .filters.menu--luce .modula_menu__link::before,
html body .modula > .filters.menu--luce .modula_menu__link::after {
content: '';
position: absolute;
background: #b5b5b5;
-webkit-transition: -webkit-transform 0.25s, background .75s;
transition: transform 0.25s, background .75s;
-webkit-transition-timing-function: cubic-bezier(1, 0.53, 0.79, 0.68);
transition-timing-function: cubic-bezier(1, 0.53, 0.79, 0.68);
}
/* left and right line */
html body .modula > .filters.menu--luce .modula_menu__item::before,
html body .modula > .filters.menu--luce .modula_menu__item::after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
/* left line */
html body .modula > .filters.menu--luce .modula_menu__item::before {
left: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
/* right line */
html body .modula > .filters.menu--luce .modula_menu__item::after {
right: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
/* top and bottom line */
html body .modula > .filters.menu--luce .modula_menu__link::before,
html body .modula > .filters.menu--luce .modula_menu__link::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
/* top line */
html body .modula > .filters.menu--luce .modula_menu__link::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
/* bottom line */
html body .modula > .filters.menu--luce .modula_menu__link::after {
bottom: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
/* Delays (first reverse, then current) */
/* These rules can be simplified, but let's keep it for better readability */
/* bottom line */
html body .modula > .filters.menu--luce .modula_menu__item .modula_menu__link::after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
html body .modula > .filters.menu--luce .modula_menu__item--current .modula_menu__link::after {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
/* left line */
html body .modula > .filters.menu--luce .modula_menu__item::before {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
html body .modula > .filters.menu--luce .modula_menu__item--current::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* top line */
html body .modula > .filters.menu--luce .modula_menu__item .modula_menu__link::before {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
html body .modula > .filters.menu--luce .modula_menu__item--current .modula_menu__link::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* right line */
html body .modula > .filters.menu--luce .modula_menu__item--current::after {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
html body .modula > .filters.menu--luce .modula_menu__item--current::before,
html body .modula > .filters.menu--luce .modula_menu__item--current::after,
html body .modula > .filters.menu--luce .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--luce .modula_menu__item--current .modula_menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
background: #d94f5c;
}
/* End: Luce Styles */
/* Juliet Styles */
html body .modula > .filters.menu--juliet .modula_menu__item {
position: relative;
-webkit-transition: color .25s;
transition: color .25s;
}
html body .modula > .filters.menu--juliet .modula_menu__item::before,
html body .modula > .filters.menu--juliet .modula_menu__item::after,
html body .modula > .filters.menu--juliet .modula_menu__item--current::before,
html body .modula > .filters.menu--juliet .modula_menu__item--current::after {
position: absolute;
left: 50%;
width: 0;
height: 0;
border: solid transparent;
content: '';
pointer-events: none;
top: 100% !important;
}
html body .modula > .filters.menu--juliet .modula_menu__item::before,
html body .modula > .filters.menu--juliet .modula_menu__item::after {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: left left;
transform-origin: left left;
-webkit-transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
background:transparent !important;
}
html body .modula > .filters.menu--juliet .modula_menu__item--current::before,
html body .modula > .filters.menu--juliet .modula_menu__item--current::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html body .modula > .filters.menu--juliet .modula_menu__item:hover::before,
html body .modula > .filters.menu--juliet .modula_menu__item:hover::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html body .modula > .filters.menu--juliet .modula_menu__item::before {
top: 100%;
margin-left: -9px;
border-width: 10px;
border-top-color: #b5b5b5;
}
html body .modula > .filters.menu--juliet .modula_menu__item--current::before {
margin-left: -9px;
border-width: 10px;
border-top-color: #d94f5c;
border-bottom-color:transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}
html body .modula > .filters.menu--juliet .modula_menu__item::after,
html body .modula > .filters.menu--juliet .modula_menu__item--current::after {
top: 94%;
margin-left: -5px;
border-width: 6px;
border-top-color: #2a282b;
border-bottom-color:transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}
html body .modula > .filters.menu--juliet .modula_menu__link {
position: relative;
margin: 0 1em;
padding-right: 0;
padding-left: 0;
color: #b5b5b5;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
html body .modula > .filters.menu--juliet .modula_menu__item--current .modula_menu__link,
html body .modula > .filters.menu--juliet .modula_menu__item--current .modula_menu__link:hover,
html body .modula > .filters.menu--juliet .modula_menu__item--current .modula_menu__link:focus {
color: #d94f5c;
}
html body .modula > .filters.menu--juliet .modula_menu__item--current .modula_menu__link::after,
html body .modula > .filters.menu--juliet .modula_menu__item--current .modula_menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
html body .modula > .filters.menu--juliet .modula_menu__item--current .modula_menu__link::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
html body .modula > .filters.menu--juliet .modula_menu__link:hover,
html body .modula > .filters.menu--juliet .modula_menu__link:focus {
color: #b5b5b5;
}
html body .modula > .filters.menu--juliet .modula_menu__item:hover .modula_menu__link::before,
html body .modula > .filters.menu--juliet .modula_menu__item:focus .modula_menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
html body .modula > .filters.menu--juliet .modula_menu__link::before,
html body .modula > .filters.menu--juliet .modula_menu__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: center left;
transform-origin: center left;
-webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html body .modula > .filters.menu--juliet .modula_menu__link::before {
background: #b5b5b5;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
html body .modula > .filters.menu--juliet .modula_menu__link::after {
background: #d94f5c;
}
/* End: Juliet Styles */
/* Invulner Styles */
html body .modula > .filters.menu--invulner .modula_menu__link {
position: relative;
-webkit-transition: color .4s ease-in;
transition: color .4s ease-in;
}
html body .modula > .filters.menu--invulner .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
}
html body .modula > .filters.menu--invulner .modula_menu__link::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
border-radius: 100%;
border: 2px solid #d94f5c;
-webkit-transition: all .5s cubic-bezier(.52,.27,.4,1.52);
transition: all .5s cubic-bezier(.52,.27,.4,1.52);
opacity: 0;
background-color:transparent !important;
}
html body .modula > .filters.menu--invulner .modula_menu__item--current .modula_menu__link::before {
left: 0;
top: 0;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 100%;
border-radius: 0;
opacity: 1;
}
/* End: Invulner Styles */
/* tantalid Styles */
html body .modula > .filters.menu--tantalid .modula_menu__link {
color: #929292;
position: relative;
-webkit-transition: color .4s ease-in;
transition: color .4s ease-in;
}
html body .modula > .filters.menu--tantalid .modula_menu__link:hover {
color: #d94f5c;
}
html body .modula > .filters.menu--tantalid .modula_menu__item--current .modula_menu__link {
color: #d94f5c;
overflow: visible;
}
html body .modula > .filters.menu--tantalid .modula_menu__link::before,
html body .modula > .filters.menu--tantalid .modula_menu__link::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
opacity: 0;
border: 2px solid #d94f5c;
-webkit-transition: -webkit-transform 0.4s, opacity 0.3s, width 0.4s;
transition: transform .4s, opacity 0.3s, width .4s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
background-color: transparent !important;
}
html body .modula > .filters.menu--tantalid .modula_menu__link::before {
top: 0;
left: 0;
border-width: 2px 0 0 2px;
-webkit-transform: translate3d(-150%, 70%, 0) rotate(-30deg);
transform: translate3d(-150%, 70%, 0) rotate(-30deg);
}
html body .modula > .filters.menu--tantalid .modula_menu__link::after {
right: 0;
bottom: 0;
border-width: 0 2px 2px 0;
-webkit-transform: translate3d(150%, -70%, 0) rotate(-30deg);
transform: translate3d(150%, -70%, 0) rotate(-30deg);
}
html body .modula > .filters.menu--tantalid .modula_menu__item--current .modula_menu__link::before,
html body .modula > .filters.menu--tantalid .modula_menu__item--current .modula_menu__link::after {
width: 80%;
height: 80%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
/* End: tantalid Styles */
/* Stack items for smaller screens */
@media screen and (max-width:55em) {
html body .modula > .filters .modula_menu__list {
display: block;
margin: 0 auto;
}
}
/**
End Modula Filters
*/
/* Change Filter by color */
.filter-by-wrapper span {
color: #000;
}
.filter-by-wrapper.opened span:after{
border-color: transparent transparent #000 transparent;
}
.filter-by-wrapper span:after {
border-color: #000 transparent transparent transparent;
}
/* Under Effect */
html body .modula-gallery.modula-creative-gallery .modula-items .modula-item.effect-under .modula-item-content,
html body .modula-gallery.modula-custom-grid .modula-items .modula-item.effect-under .modula-item-content {
height:auto;
opacity:1;
}
.modula-gallery .modula-items .modula-item.effect-under > a.modula-simple-link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.modula-gallery.modula-creative-gallery .modula-items .modula-item.effect-under a.tile-inner.modula-item-link,
.modula-gallery .modula-items .modula-item.effect-under > a {
position: absolute;
width: 100%;
height: 100%;
}
.modula-gallery .modula-items .modula-item.effect-under {
display: flex;
flex-direction: column;
}
.modula-gallery .modula-items .modula-item.effect-under .modula-item-image-continer {
flex-grow: 1;
width: 100%;
position: relative;
overflow: hidden;
}
.modula-gallery .modula-items .modula-item.effect-under .figc {
padding: 5%;
height: auto !important;
text-align: left;
position: relative;
}
.modula-gallery .modula-items .modula-item.effect-under .modula-item-image-continer img {
margin:0 auto !important;
width:100%;
}
.modula-gallery .modula-items .modula-item.effect-under .figc-inner {
width: 100%;
}
.modula-gallery .modula-items .modula-item.effect-under .figc .jtg-social {
right: auto;
position: relative;
bottom: auto;
text-align: left;
}
.modula-gallery .modula-items .modula-item.effect-under .jtg-social a {
opacity: 1;
}
.modula-gallery .modula-items .modula-item.effect-under .jtg-title:before {
display: none;
}
.modula-gallery .modula-items .modula-item.effect-under .figc p.description {
padding:10px 0;
}
@media all and (max-width:480px) {
.modula-gallery .modula-items .modula-item.effect-under .figc .jtg-social a {
padding:5px;
}
}
/* Comun CSS */
.modula-gallery .modula-items .modula-item.effect-julia .figc,
.modula-gallery .modula-items .modula-item.effect-selena .figc,
.modula-gallery .modula-items .modula-item.effect-phoebe .figc,
.modula-gallery .modula-items .modula-item.effect-apollo .figc,
.modula-gallery .modula-items .modula-item.effect-steve .figc,
.modula-gallery .modula-items .modula-item.effect-jazz .figc,
.modula-gallery .modula-items .modula-item.effect-ming .figc,
.modula-gallery .modula-items .modula-item.effect-lexi .figc,
.modula-gallery .modula-items .modula-item.effect-duke .figc,
.modula-gallery .modula-items .modula-item.effect-sarah .figc {
padding: 15%;
}
.modula-gallery .modula-items .modula-item.effect-ming .figc-inner,
.modula-gallery .modula-items .modula-item.effect-chico .figc-inner {
width: 100%;
padding: 7.5%;
box-sizing: border-box;
}
.modula-gallery .modula-item.effect-phoebe .figc-inner,
.modula-gallery .modula-item.effect-jazz .figc-inner,
.modula-gallery .modula-item.effect-lexi .figc-inner,
.modula-gallery .modula-item.effect-duke .figc-inner,
.modula-gallery .modula-item.effect-apollo .figc-inner {
width: 100%;
height: 100%;
}
.modula-gallery .modula-items .modula-item.effect-chico .jtg-body .jtg-social,
.modula-gallery .modula-items .modula-item.effect-julia .jtg-social,
.modula-gallery .modula-items .modula-item.effect-phoebe .jtg-social,
.modula-gallery .modula-items .modula-item.effect-ming .jtg-social,
.modula-gallery .modula-items .modula-item.effect-lily .jtg-body .jtg-social,
.modula-gallery .modula-items .modula-item.effect-centered-bottom .jtg-body .jtg-social {
position: relative;
bottom: auto;
right: auto;
}
.modula-gallery .modula-items .modula-item.effect-chico .jtg-body .jtg-social,
.modula-gallery .modula-items .modula-item.effect-ming .jtg-body .jtg-social{
text-align: center;
}
.modula-gallery .modula-item.effect-milo .jtg-title:before {
display:none;
}
.modula-gallery .modula-item.effect-milo p.description {
min-width: 60%;
margin: 0 auto;
}
/* Dropdown Filters */
select.filters {
/*background: transparent;*/
font-size: 16px;
font-family: sans-serif;
/* font-weight: 700;*/
color: #444;
line-height: 1.3;
padding: .6em 1.4em .5em .8em;
width: max-content;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fff;
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
position: relative;
}