/* FILE: /plugins/system/easyslider/assets/lib/arrows-nav/css/component.css */
.jsn-es-nav-buttons a { position: absolute; top: 50%; display: block; outline: none; text-align: left; z-index: 1000; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .jsn-es-nav-buttons a.jsn-es-prev { left: 0; } .jsn-es-nav-buttons a.jsn-es-next { right: 0; } .jsn-es-nav-buttons a svg { display: block; margin: 0 auto; padding: 0; } .jsn-es-nav h3 { z-index: 10; }     .color-1 { background: #bdc3c7; } .jsn-es-nav-slide .jsn-es-icon-wrap { position: relative; z-index: 100; display: block; padding: 20px; background-color: #fff; } .jsn-es-nav-slide svg.jsn-es-icon { fill: rgba(30, 30, 30, 0.8) ; } .jsn-es-nav-slide div { position: absolute; top: 50%; padding: 0 30px; background-color: rgba(30, 30, 30, 0.8) ; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .jsn-es-nav-slide a.jsn-es-prev div { left: 100%; padding-right: 40px; -webkit-transform: translateY(-50%) translateX(-100%); transform: translateY(-50%) translateX(-100%); } .jsn-es-nav-slide a.jsn-es-next div { right: 100%; padding-left: 40px; text-align: right; -webkit-transform: translateY(-50%) translateX(100%); transform: translateY(-50%) translateX(100%); } .jsn-es-nav-slide h3 { position: relative; margin: 0; padding: 20px 0; color: #fff; white-space: nowrap; font-weight: 300; font-size: 1.3em; line-height: 1.5; } .jsn-es-nav-slide div h3 span { display: block; color: #95a5a6; font-style: italic; font-size: 65%; font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; } .jsn-es-nav-slide img { position: absolute; top: 0; height: 100%; } .jsn-es-nav-slide a.jsn-es-prev img { right: 0; } .jsn-es-nav-slide a.jsn-es-next img { left: 0; } .jsn-es-nav-slide a:hover div { -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); }    .color-2 { background: rgba(30, 30, 30, 0.8) ; } .jsn-es-nav-imgbar a { overflow: hidden; width: 100px; height: 90%; background-color: transparent; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .jsn-es-nav-imgbar .jsn-es-icon-wrap { position: relative; top: 50%; z-index: 100; display: block; margin: 0 auto; padding: 30px; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .jsn-es-nav-imgbar a.jsn-es-prev .jsn-es-icon-wrap { -webkit-transform: translateY(-50%) translateX(10px); transform: translateY(-50%) translateX(10px); } .jsn-es-nav-imgbar a.jsn-es-next .jsn-es-icon-wrap { -webkit-transform: translateY(-50%) translateX(-10px); transform: translateY(-50%) translateX(-10px); } .jsn-es-nav-imgbar svg.jsn-es-icon { fill: #fff; } .jsn-es-nav-imgbar img { position: absolute; top: 0; min-width: 100%; min-height: 100%; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .jsn-es-nav-imgbar a.jsn-es-prev img { left: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .jsn-es-nav-imgbar a.jsn-es-next img { right: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .jsn-es-nav-imgbar a:hover { background-color: rgba(255, 255, 255, 0.7); } .jsn-es-nav-imgbar a:hover .jsn-es-icon-wrap { -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } .jsn-es-nav-imgbar a:hover img { opacity: 0.6; -webkit-transform: translateX(0); transform: translateX(0); }    .color-3 { background: #cc6055; } .jsn-es-nav-circlepop a { margin: 0 30px; width: 50px; height: 50px; } .jsn-es-nav-circlepop a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: #fff; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: scale(0.9); transform: scale(0.9); } .jsn-es-nav-circlepop .jsn-es-icon-wrap { position: relative; display: block; margin: 10% 0 0 10%; width: 80%; height: 80%; } .jsn-es-nav-circlepop a.jsn-es-next .jsn-es-icon-wrap { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .jsn-es-nav-circlepop .jsn-es-icon-wrap::before, .jsn-es-nav-circlepop .jsn-es-icon-wrap::after { position: absolute; left: 25%; width: 3px; height: 50%; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-nav-circlepop .jsn-es-icon-wrap::before { -webkit-transform: translateX(-50%) rotate(30deg); transform: translateX(-50%) rotate(30deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .jsn-es-nav-circlepop .jsn-es-icon-wrap::after { top: 50%; -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .jsn-es-nav-circlepop a:hover::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .jsn-es-nav-circlepop a:hover .jsn-es-icon-wrap::before, .jsn-es-nav-circlepop a:hover .jsn-es-icon-wrap::after { background: #cc6055; } .jsn-es-nav-circlepop a:hover .jsn-es-icon-wrap::before { -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .jsn-es-nav-circlepop a:hover .jsn-es-icon-wrap::after { -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); }    .color-4 { background-color: rgba(30, 30, 30, 0.8) ; } .jsn-es-nav-roundslide a { margin: 0 20px; padding: 15px; width: 62px; height: 62px; border-radius: 40px; background: rgba(255, 255, 255, 0.9) ; -webkit-transition: width 0.3s, background-color 0.3s; transition: width 0.3s, background-color 0.3s; } .jsn-es-nav-roundslide .jsn-es-icon-wrap { position: absolute; width: 32px; } .jsn-es-nav-roundslide a.jsn-es-prev .jsn-es-icon-wrap { left: 15px; } .jsn-es-nav-roundslide a.jsn-es-next .jsn-es-icon-wrap { right: 15px; } .jsn-es-nav-roundslide svg.jsn-es-icon { fill: rgba(30, 30, 30, 0.8) ; } .jsn-es-nav-roundslide h3 { position: absolute; top: 0; margin: 0; color: rgba(30, 30, 30, 0.8) ; text-transform: uppercase; white-space: nowrap; letter-spacing: 1px; font-weight: 400; font-size: 0.85em; line-height: 4.45; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .jsn-es-nav-roundslide a.jsn-es-prev h3 { right: 20px; -webkit-transform: translateX(100%); transform: translateX(100%); } .jsn-es-nav-roundslide a.jsn-es-next h3 { left: 20px; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .jsn-es-nav-roundslide a:hover { width: 200px; background: #fff; } .jsn-es-nav-roundslide a:hover h3 { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: translateX(0); transform: translateX(0); }    .color-5 { background: #cdd2d5; } .jsn-es-nav-slit .jsn-es-icon-wrap { position: relative; display: block; padding: 45px 5px; background-color: #939a9f; } .jsn-es-nav-slit svg.jsn-es-icon { -webkit-transition: -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; fill: #fff; } .jsn-es-nav-slit div { position: absolute; top: 0; width: 200px; height: 100%; background-color: #939a9f; -webkit-transition: -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; -webkit-perspective: 1000px; perspective: 1000px; } .jsn-es-nav-slit a.jsn-es-prev div { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .jsn-es-nav-slit a.jsn-es-next div { right: 0; text-align: right; -webkit-transform: translateX(100%); transform: translateX(100%); } .jsn-es-nav-slit h3 { position: absolute; top: 100%; margin: 0; padding: 0 20px; width: 100%; height: 30%; background: rgba(30, 30, 30, 0.8) ; color: #fff; text-transform: uppercase; white-space: nowrap; letter-spacing: 1px; font-weight: 500; font-size: 0.75em; line-height: 2.75; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webki-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-nav-slit img { position: absolute; top: 0; left: 0; width: 100%; } .jsn-es-nav-slit a:hover svg.jsn-es-icon { -webkit-transition-delay: 0s; transition-delay: 0s; } .jsn-es-nav-slit a.jsn-es-prev:hover svg.jsn-es-icon { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .jsn-es-nav-slit a.jsn-es-next:hover svg.jsn-es-icon { -webkit-transform: translateX(100%); transform: translateX(100%); } .jsn-es-nav-slit a:hover div { -webkit-transform: translateX(0); transform: translateX(0); } .jsn-es-nav-slit a:hover h3 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }    .color-6 { background-color: #af7ac4; } .jsn-es-nav-reveal a { overflow: hidden; width: 40px; height: 120px; background-color: rgba(142, 68, 173, 0.6); -webkit-transition: width 0.4s, background-color 0.4s; transition: width 0.4s, background-color 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .jsn-es-nav-reveal .jsn-es-icon-wrap { position: absolute; z-index: 100; padding: 44px 4px; width: 40px; } .jsn-es-nav-reveal a.jsn-es-prev .jsn-es-icon-wrap { left: 0; } .jsn-es-nav-reveal a.jsn-es-next .jsn-es-icon-wrap { right: 0; } .jsn-es-nav-reveal svg.jsn-es-icon { fill: #af7ac4; } .jsn-es-nav-reveal div { position: absolute; top: 0; padding: 0 50px; width: 400px; height: 100%; } .jsn-es-nav-reveal a.jsn-es-prev div { left: 0; padding-right: 130px; text-align: right; } .jsn-es-nav-reveal a.jsn-es-next div { right: 0; padding-left: 130px; } .jsn-es-nav-reveal h3 { position: relative; margin: 0; padding: 20px 0; color: #fff; font-weight: 300; font-size: 1.45em; line-height: 1.2; } .jsn-es-nav-reveal div h3 span { display: block; padding-top: 10px; color: #542568; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 50%; } .jsn-es-nav-reveal img { position: absolute; top: 10px; height: 100px; } .jsn-es-nav-reveal a.jsn-es-prev img { right: 10px; } .jsn-es-nav-reveal a.jsn-es-next img { left: 10px; } .jsn-es-nav-reveal a:hover { width: 400px; background-color: #8e44ad; }    .color-7 { background-color: #c1b8ab; } .jsn-es-nav-thumbflip a { -webkit-perspective: 1000px; perspective: 1000px; } .jsn-es-nav-thumbflip a.jsn-es-prev { -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .jsn-es-nav-thumbflip a.jsn-es-next { -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .jsn-es-nav-thumbflip .jsn-es-icon-wrap { display: block; width: 100px; height: 100px; background-color: #b1a798; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .jsn-es-nav-thumbflip svg.jsn-es-icon { position: relative; top: 50%; -webkit-transition: fill 0.3s; transition: fill 0.3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); fill: #fff; } .jsn-es-nav-thumbflip img { position: absolute; top: 0; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-nav-thumbflip a.jsn-es-prev img { left: 100%; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .jsn-es-nav-thumbflip a.jsn-es-next img { right: 100%; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .jsn-es-nav-thumbflip a:hover .jsn-es-icon-wrap { background-color: #fff; } .jsn-es-nav-thumbflip a:hover svg.jsn-es-icon { fill: #c1b8ab; } .jsn-es-nav-thumbflip a:hover img { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }    .color-8 { background-color: #47c9af; } .jsn-es-nav-doubleflip a { -webkit-perspective: 1000px; perspective: 1000px; } .jsn-es-nav-doubleflip a.jsn-es-prev { -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .jsn-es-nav-doubleflip a.jsn-es-next { -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .jsn-es-nav-doubleflip .jsn-es-icon-wrap { position: relative; z-index: 100; display: block; width: 130px; height: 100px; background-color: #16a085; -webkit-transition: background-color 0.3s 0.3s; transition: background-color 0.3s 0.3s; } .jsn-es-nav-doubleflip svg.jsn-es-icon { position: relative; top: 50%; -webkit-transition: fill 0.3s 0.3s; transition: fill 0.3s 0.3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); fill: #fff; } .jsn-es-nav-doubleflip div { position: absolute; top: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .jsn-es-nav-doubleflip a.jsn-es-prev div, .jsn-es-nav-doubleflip a.jsn-es-prev h3 { left: 100%; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .jsn-es-nav-doubleflip a.jsn-es-next div, .jsn-es-nav-doubleflip a.jsn-es-next h3 { right: 100%; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .jsn-es-nav-doubleflip img, .jsn-es-nav-doubleflip h3 { position: absolute; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-nav-doubleflip h3 { margin: 0; padding: 1.75em 1em 0; background-color: #16a085; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-weight: 300; font-style: italic; font-size: 1.15em; line-height: 1; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .jsn-es-nav-doubleflip a:hover .jsn-es-icon-wrap { background-color: #fff; -webkit-transition-delay: 0s; transition-delay: 0s; } .jsn-es-nav-doubleflip a:hover svg.jsn-es-icon { fill: #47c9af; -webkit-transition-delay: 0s; transition-delay: 0s; } .jsn-es-nav-doubleflip a:hover div, .jsn-es-nav-doubleflip a:hover h3 { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .jsn-es-nav-doubleflip a:hover div { -webkit-transition-delay: 0s; transition-delay: 0s; } .jsn-es-nav-doubleflip a:hover h3 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }    .color-9 { background-color: #e65b61; } .jsn-es-nav-multithumb a { width: 60px; height: 100px; } .jsn-es-nav-multithumb .jsn-es-icon-wrap { position: absolute; top: 50%; display: block; width: 32px; height: 32px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .jsn-es-nav-multithumb a.jsn-es-next .jsn-es-icon-wrap { right: 0; } .jsn-es-nav-multithumb .jsn-es-icon-wrap::after { position: absolute; top: 50%; width: 20px; height: 1px; background: #fff; content: ''; -webkit-transition: width 0.3s 0.2s; transition: width 0.3s 0.2s; -webkit-backface-visibility: hidden;  backface-visibility: hidden; } .jsn-es-nav-multithumb a.jsn-es-prev .jsn-es-icon-wrap::after { left: -webkit-calc(100% - 10px); left: calc(100% - 10px); } .jsn-es-nav-multithumb a.jsn-es-next .jsn-es-icon-wrap::after { right: -webkit-calc(100% - 10px); right: calc(100% - 10px); } .jsn-es-nav-multithumb svg.jsn-es-icon { fill: #fff; } .jsn-es-nav-multithumb div { position: absolute; top: -25%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: end; width: 170px; pointer-events: none; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .jsn-es-nav-multithumb div::after { position: absolute; top: 100%; left: 0; margin: 20px 5px 0; width: 100%; color: #fff; text-transform: uppercase; letter-spacing: 10px; font-weight: 300; font-size: 0.7em; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .jsn-es-nav-multithumb a.jsn-es-prev div::after { content: 'Previous'; } .jsn-es-nav-multithumb a.jsn-es-next div::after { content: 'Next'; text-align: right; } .jsn-es-nav-multithumb a.jsn-es-prev div { left: 40px; } .jsn-es-nav-multithumb a.jsn-es-next div { right: 40px; } .jsn-es-nav-multithumb div img { margin: 0 5px; opacity: 0; box-shadow: 0 1px 0 #fff, 0 -1px 0 #fff; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: scale(0.3); transform: scale(0.3); } .jsn-es-nav-multithumb a.jsn-es-prev div img { float: left; } .jsn-es-nav-multithumb a.jsn-es-next div img { float: right; } .jsn-es-nav-multithumb a:hover { width: 200px; } .jsn-es-nav-multithumb a:hover .jsn-es-icon-wrap::after { width: 200px; -webkit-transition-delay: 0s; transition-delay: 0s; } .jsn-es-nav-multithumb a:hover div { pointer-events: auto; } .jsn-es-nav-multithumb a:hover div::after { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translateY(0); transform: translateY(0); } .jsn-es-nav-multithumb a:hover img { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .jsn-es-nav-multithumb a:hover div img:first-child { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .jsn-es-nav-multithumb a:hover div img:nth-child(2) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .jsn-es-nav-multithumb a:hover div img:nth-child(3) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }    .color-10 { background: #f3cf3f; } .jsn-es-nav-fillpath a { width: 100px; height: 100px; } .jsn-es-nav-fillpath .jsn-es-icon-wrap { position: relative; display: block; width: 100%; height: 100%; z-index: 10; } .jsn-es-nav-fillpath a::before, .jsn-es-nav-fillpath a::after, .jsn-es-nav-fillpath .jsn-es-icon-wrap::before, .jsn-es-nav-fillpath .jsn-es-icon-wrap::after { position: absolute; left: 50%; width: 3px; height: 50%; background: rgba(30, 30, 30, 0.8) ; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-nav-fillpath .jsn-es-icon-wrap::before, .jsn-es-nav-fillpath .jsn-es-icon-wrap::after { z-index: 100; height: 0; background: #fff; -webkit-transition: height 0.3s, -webkit-transform 0.3s; transition: height 0.3s, transform 0.3s; } .jsn-es-nav-fillpath a::before, .jsn-es-nav-fillpath .jsn-es-icon-wrap::before { top: 50%; -webkit-transform: translateX(-50%) rotate(-135deg); transform: translateX(-50%) rotate(-135deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .jsn-es-nav-fillpath a.jsn-es-next::before, .jsn-es-nav-fillpath a.jsn-es-next .jsn-es-icon-wrap::before { -webkit-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .jsn-es-nav-fillpath a::after, .jsn-es-nav-fillpath .jsn-es-icon-wrap::after { top: 50%; -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .jsn-es-nav-fillpath a.jsn-es-next::after, .jsn-es-nav-fillpath a.jsn-es-next .jsn-es-icon-wrap::after { -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } .jsn-es-nav-fillpath h3 strong { white-space: nowrap; } .jsn-es-nav-fillpath h3 { position: absolute; top: 50%; margin: 0; color: #fff; text-transform: uppercase; font-weight: 300; font-size: 0.85em; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .jsn-es-nav-fillpath a.jsn-es-prev h3 { left: 100%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .jsn-es-nav-fillpath a.jsn-es-next h3 { right: 100%; text-align: right; -webkit-transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%); } .jsn-es-nav-fillpath a:hover .jsn-es-icon-wrap::before, .jsn-es-nav-fillpath a:hover .jsn-es-icon-wrap::after { height: 50%; } .jsn-es-nav-fillpath a:hover::before, .jsn-es-nav-fillpath a:hover .jsn-es-icon-wrap::before { -webkit-transform: translateX(-50%) rotate(-125deg); transform: translateX(-50%) rotate(-125deg); } .jsn-es-nav-fillpath a.jsn-es-next:hover::before, .jsn-es-nav-fillpath a.jsn-es-next:hover .jsn-es-icon-wrap::before { -webkit-transform: translateX(-50%) rotate(125deg); transform: translateX(-50%) rotate(125deg); } .jsn-es-nav-fillpath a:hover::after, .jsn-es-nav-fillpath a:hover .jsn-es-icon-wrap::after { -webkit-transform: translateX(-50%) rotate(-55deg); transform: translateX(-50%) rotate(-55deg); } .jsn-es-nav-fillpath a.jsn-es-next:hover::after, .jsn-es-nav-fillpath a.jsn-es-next:hover .jsn-es-icon-wrap::after { -webkit-transform: translateX(-50%) rotate(55deg); transform: translateX(-50%) rotate(55deg); } .jsn-es-nav-fillpath a:hover h3 { opacity: 1; -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); }    .jsn-es-nav-growpop .jsn-es-icon-wrap { position: relative; z-index: 100; display: block; padding: 20px 10px; border: 0px solid #b24e44; background: #b24e44; -webkit-transition: border-width 0.3s 0.15s; transition: border-width 0.3s 0.15s; } .jsn-es-nav-growpop svg.jsn-es-icon { fill: #fff; } .jsn-es-nav-growpop div { position: absolute; top: 50%; padding: 20px; width: 440px; height: 144px; background: #fff; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .jsn-es-nav-growpop a.jsn-es-prev div { left: 0; padding: 20px 140px 20px 70px; text-align: right; -webkit-transform: translateY(-50%) translateX(-100%) scale(0.75); transform: translateY(-50%) translateX(-100%) scale(0.75); } .jsn-es-nav-growpop a.jsn-es-next div { right: 0; padding: 20px 70px 20px 140px; -webkit-transform: translateY(-50%) translateX(100%) scale(0.75); transform: translateY(-50%) translateX(100%) scale(0.75); } .jsn-es-nav-growpop span { display: block; padding-bottom: 5px; border-bottom: 1px solid #ddd; color: #cdcdcd; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 0.7em; line-height: 1.2; } .jsn-es-nav-growpop h3 { margin: 0; padding: 8px 0 10px; color: #818181; font-weight: 300; font-size: 1.325em; line-height: 1.2; } .jsn-es-nav-growpop div p { margin: 0; color: #b24e44; font-style: italic; font-size: 75%; font-family: "Lucida Bright", Georgia, serif; } .jsn-es-nav-growpop img { position: absolute; top: 20px; } .jsn-es-nav-growpop a.jsn-es-prev img { right: 20px; } .jsn-es-nav-growpop a.jsn-es-next img { left: 20px; } .jsn-es-nav-growpop a:hover .jsn-es-icon-wrap { border-top-width: 40px; border-bottom-width: 40px; -webkit-transition-delay: 0s; transition-delay: 0s; } .jsn-es-nav-growpop a:hover div { opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translateY(-50%) translateX(0) scale(1); transform: translateY(-50%) translateX(0) scale(1); }    .jsn-es-nav-diamond a { margin: 0 30px; } .jsn-es-nav-diamond .jsn-es-icon-wrap { position: absolute; width: 100%; height: 100%; z-index: 100; } .jsn-es-nav-diamond svg.jsn-es-icon { fill: #fff; position: relative; stroke-width: 2; stroke: #fff; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .jsn-es-nav-diamond div { position: relative; overflow: hidden; width: 70px; height: 70px; background: rgba(30, 30, 30, 0.8) ; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-nav-diamond img { position: absolute; top: 50%; left: 50%; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .jsn-es-nav-diamond a.jsn-es-prev img { -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2); transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2); } .jsn-es-nav-diamond a.jsn-es-next img { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2); transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2); } .jsn-es-nav-diamond a:hover div { -webkit-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); } .jsn-es-nav-diamond a.jsn-es-next:hover div { -webkit-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); } .jsn-es-nav-diamond a:hover img { opacity: 0.8; } .jsn-es-nav-diamond a.jsn-es-prev:hover img { -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); } .jsn-es-nav-diamond a.jsn-es-next:hover img { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1); transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1); }    .color-10 { background-color: #dcc6e0; } .jsn-es-nav-fillslide .jsn-es-icon-wrap { position: relative; z-index: 100; display: block; padding: 65px 10px; background: #b68dbe; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-nav-fillslide .jsn-es-icon-wrap::before { content: ''; position: absolute; width: 100%; height: 110%; background: #fff; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; } .jsn-es-nav-fillslide a.jsn-es-prev .jsn-es-icon-wrap::before { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .jsn-es-nav-fillslide a.jsn-es-next .jsn-es-icon-wrap::before { -webkit-transform: translateX(100%); transform: translateX(100%); } .jsn-es-nav-fillslide svg.jsn-es-icon { fill: #736176; position: relative; z-index: 100; } .jsn-es-nav-fillslide div { position: absolute; padding: 20px; top: 0; width: 440px; height: 154px; background: #fff; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .jsn-es-nav-fillslide a.jsn-es-prev div { left: 0; padding: 20px 150px 20px 70px; text-align: right; border-radius: 0 6px 6px 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .jsn-es-nav-fillslide a.jsn-es-next div { right: 0; padding: 20px 70px 20px 150px; border-radius: 6px 0 0 6px; -webkit-transform: translateX(100%); transform: translateX(100%); } .jsn-es-nav-fillslide div span { display: inline-block; padding: 5px; color: #d0c2d3; border-top: 1px solid #d8cfda; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 0.7em; line-height: 1.2; } .jsn-es-nav-fillslide h3 { margin: 0; padding: 8px 0 10px; color: #736176; font-weight: 400; font-size: 1.35em; line-height: 1.2; font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; } .jsn-es-nav-fillslide img { position: absolute; top: 20px; border: 5px solid #736176; } .jsn-es-nav-fillslide a.jsn-es-prev img { right: 20px; } .jsn-es-nav-fillslide a.jsn-es-next img { left: 20px; } .jsn-es-nav-fillslide a:hover .jsn-es-icon-wrap::before { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 0s; transition-delay: 0s; } .jsn-es-nav-fillslide a:hover div { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translateX(0); transform: translateX(0); }    .jsn-es-nav-circleslide a { margin: 0 20px; } .jsn-es-nav-circleslide .jsn-es-icon-wrap { position: relative; z-index: 100; display: block; padding: 19px; } .jsn-es-nav-circleslide svg.jsn-es-icon { fill: #fff; -webkit-transition: fill 0.3s; transition: fill 0.3s; } .jsn-es-nav-circleslide div { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; background-color: rgba(30, 30, 30, 0.8) ; border-radius: 50%; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.1s 0s; transition: transform 0.3s, opacity 0.3s, background-color 0.1s 0s; } .jsn-es-nav-circleslide img { display: block; border-radius: 50%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .jsn-es-nav-circleslide a.jsn-es-prev img { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .jsn-es-nav-circleslide a.jsn-es-next img { -webkit-transform: translateX(100%); transform: translateX(100%); } .jsn-es-nav-circleslide a:hover div { opacity: 1; background-color: transparent;  -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.1s 0.2s; transition: transform 0.3s, opacity 0.3s, background-color 0.1s 0.2s; } .jsn-es-nav-circleslide a:hover img { -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 520px) { .jsn-es-nav-slide a.jsn-es-prev, .jsn-es-nav-reveal a.jsn-es-prev, .jsn-es-nav-doubleflip a.jsn-es-prev, .jsn-es-nav-fillslide a.jsn-es-prev, .jsn-es-nav-growpop a.jsn-es-prev { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .jsn-es-nav-slide a.jsn-es-next, .jsn-es-nav-reveal a.jsn-es-next, .jsn-es-nav-doubleflip a.jsn-es-next, .jsn-es-nav-fillslide a.jsn-es-next, .jsn-es-nav-growpop a.jsn-es-next { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .jsn-es-nav-slide a, .jsn-es-nav-reveal a, .jsn-es-nav-doubleflip a, .jsn-es-nav-fillslide a { -webkit-transform: scale(0.6); transform: scale(0.6); } .jsn-es-nav-growpop a { -webkit-transform: translateY(-50%) scale(0.6); transform: translateY(-50%) scale(0.6); } }