/*----------------------------------------------------------------------------* NAVIGATION SHORTCODE \*----------------------------------------------------------------------------*/ .mpc-navigation { display: block; pointer-events: none; } .mpc-navigation.mpc-on-hover { opacity: 0 !important; -webkit-transition: .25s all; transition: .25s all; } .mpc-navigation .mpc-nav__icon:focus { outline: none; } .mpc-navigation .mpc-nav__arrow { -webkit-transition: -webkit-transform .25s; transition: transform .25s; } .mpc-navigation .mpc-nav__arrow.slick-disabled .mpc-nav__icon { opacity: .5 !important; pointer-events: none; cursor: default; } .mpc-navigation i { overflow: hidden; transform: translate3d(0, 0, 0); position: relative; pointer-events: initial; display: block; cursor: pointer; -webkit-transition: inherit; transition: inherit; } .mpc-navigation i:before { position: relative; z-index: 2; } .mpc-carousel__wrapper:hover .mpc-navigation.mpc-on-hover { opacity: 1 !important; } .mpc-nav__background { position: absolute; z-index: -1; opacity: 0; } .mpc-nav__icon i:hover .mpc-nav__background { opacity: 1; } .mpc-nav__background.mpc-effect-type--fade.mpc-effect-side--in { top: 0; bottom: 0; left: 0; right: 0; } .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--top { top: -100%; left: 0; width: 100%; height: 100%; } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--top { top: 0; } .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--right { top: 0; left: 100%; width: 100%; height: 100%; } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--right { left: 0; } .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--bottom { top: 100%; left: 0; width: 100%; height: 100%; } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--bottom { top: 0; } .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--left { top: 0; left: -100%; width: 100%; height: 100%; } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--slide.mpc-effect-side--left { left: 0; } .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--horizontal { top: 0; bottom: 0; left: 50%; right: 50%; } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--horizontal { left: 5%; right: 5%; } .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--vertical { top: 50%; bottom: 50%; left: 0; right: 0; } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--vertical { top: 5%; bottom: 5%; } .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--diagonal_left { top: 50%; bottom: 50%; left: -20%; right: -20%; transform: rotate(45deg); } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--diagonal_left { top: -60%; bottom: -60%; } .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--diagonal_right { top: 50%; bottom: 50%; left: -20%; right: -20%; transform: rotate(-45deg); } .mpc-nav__icon i:hover .mpc-nav__background.mpc-effect-type--expand.mpc-effect-side--diagonal_right { top: -60%; bottom: -60%; } .mpc-navigation--style_1, .mpc-navigation--style_2 { width: 100%; } .mpc-navigation--style_1 .mpc-nav__arrow, .mpc-navigation--style_2 .mpc-nav__arrow { display: inline-block; } /* Style 3 */ .mpc-navigation--style_3 { position: absolute; top: 0; width: auto; height: 100%; } .mpc-navigation--style_3:first-child { left: 0; } .mpc-navigation--style_3:last-child { right: 0; } .mpc-navigation--style_3 .mpc-nav__arrow { height: 100%; display: table; } .mpc-navigation--style_3 .mpc-nav__arrow .mpc-nav__icon { display: table-cell; height: 100%; vertical-align: middle; text-align: center; } /* Style 4 */ .mpc-navigation--style_4 { position: absolute; top: 0; width: auto; height: 100%; } .mpc-navigation--style_4:first-child { left: 0; } .mpc-navigation--style_4:last-child { right: 0; } .mpc-navigation--style_4 .mpc-nav__arrow { height: 100%; display: table; } .mpc-navigation--style_4 .mpc-nav__arrow .mpc-nav__icon { display: table-cell; height: 100%; vertical-align: middle; text-align: center; } .mpc-navigation--style_4 .mpc-nav__arrow { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mpc-waypoint--init .mpc-navigation--style_4 .mpcslick-prev { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .mpc-waypoint--init .mpc-navigation--style_4 .mpcslick-next { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } /* Style 5 */ .mpc-navigation--style_5 { position: absolute; top: 0; width: auto; height: 100%; } .mpc-navigation--style_5:first-child { left: 0; } .mpc-navigation--style_5:last-child { right: 0; } .mpc-navigation--style_5 .mpc-nav__arrow { height: 100%; display: table; } .mpc-navigation--style_5 .mpc-nav__arrow .mpc-nav__icon { display: table-cell; height: 100%; vertical-align: middle; text-align: center; } .mpc-navigation--style_5 .mpc-nav__arrow { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mpc-waypoint--init .mpc-navigation--style_5 .mpcslick-prev { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .mpc-waypoint--init .mpc-navigation--style_5 .mpcslick-next { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } /* Style 6 */ .mpc-navigation--style_6 { position: absolute; top: 0; width: auto; height: 100%; } .mpc-navigation--style_6:first-child { left: 0; } .mpc-navigation--style_6:last-child { right: 0; } .mpc-navigation--style_6 .mpc-nav__arrow { height: 100%; display: table; } .mpc-navigation--style_6 .mpc-nav__arrow .mpc-nav__icon { display: table-cell; height: 100%; vertical-align: middle; text-align: center; } .mpc-navigation--style_6 .mpc-nav__arrow { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mpc-nav--stretched .mpc-nav__arrow { -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; } .mpc-nav--stretched:not(.mpc-navigation--style_1):not(.mpc-navigation--style_2) .mpc-nav__arrow { margin-left: 0 !important; margin-right: 0 !important; } /* Responsive */ @media screen and (max-width: 767px) { .mpc-nav__arrow { -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; } .mpc-navigation:not(.mpc-navigation--style_1):not(.mpc-navigation--style_2) .mpc-nav__arrow { margin-left: 0 !important; margin-right: 0 !important; } }