/* FILE: /templates/jsn_glass2_pro/css/color_e2c0be24560d78c5e599c2a9c9d0bbd2.css */
/* ============================ */ div[data-pf-type="Body"] .sunfw-tx-mc, div[data-pf-type="body"] .sunfw-tx-mc { color: #008380; } div[data-pf-type="Body"] .sunfw-tx-mc-h:hover, div[data-pf-type="body"] .sunfw-tx-mc-h:hover { color: #008380; } div[data-pf-type="Body"] .sunfw-bg-mc, div[data-pf-type="body"] .sunfw-bg-mc { background-color: #008380; } div[data-pf-type="Body"] .sunfw-bg-mc-h:hover, div[data-pf-type="body"] .sunfw-bg-mc-h:hover { background-color: #008380; } div[data-pf-type="Body"] .sunfw-bd-mc, div[data-pf-type="body"] .sunfw-bd-mc { border-color: #008380; } div[data-pf-type="Body"] .sunfw-bd-mc-h:hover, div[data-pf-type="body"] .sunfw-bd-mc-h:hover { border-color: #008380; } .sunfw-content .main-color { color: #008380; } .sunfw-content .bg-main-color { background: #008380; } ul.newsfeed li, ul.archive-module li, ul.relateditems li, ul.categories-module li, ul.category-module li, ul.mostread li, ul.latestnews li, ul.latestusers li { color: #008380; } ul.newsfeed li a *, ul.archive-module li a *, ul.relateditems li a *, ul.categories-module li a *, ul.category-module li a *, ul.mostread li a *, ul.latestnews li a *, ul.latestusers li a * { color: #008380; } ul.categories-module ul li { color: #008380; } .item-page.edit #com-content-formTabs > li.active > a:hover, .item-page.edit #com-content-formTabs > li.active > a { border-color: #008380; background-color: #008380; } .home-contact-box { border-color: #008380 !important; } .page-header h2 a, .blog-featured h2.item-title a, .blog h2.item-title a { color: #008380; } .icon-hover-type-1:hover { color: #008380 !important; } .icon-hover-type-2:hover { background-color: #008380; } .label-info[href]:hover, .label-info[href]:focus, .content_rating + form input[name="submit_vote"], .content_rating + form .content_vote input { background: #008380 !important; } ul.nav[class*='menu-treemenu'] li a:hover { color: #008380; } .color-img img { background-color: #008380; } .bg-main-color .jsn-es-background { background-color: #008380 !important; } ul.nav[class*='menu-treemenu'] li.active > a, ul.nav[class*='menu-treemenu'] li.current > a { color: #008380; } ul.nav[class*='menu-sidemenu'] li.active > a, ul.nav[class*='menu-sidemenu'] li.current > a { color: #008380; } ul.nav.menu li a:hover, .btn.btn-plain:hover { color: #008380; } .hikashop_cart_product_name a:hover { color: #008380; } .bg-2nd-subcolor { background-color: #0a0f0f; } .sunfw-scrollup:hover { background-color: #3a4749; } .module-style-2 .module-title .box-title { border-color: #008380; color: #008380 !important; } .module-style-2 .module-title .box-title i.fa { border-color: #008380; color: #008380; } .module-style-3 .module-title .box-title { border-color: #008380; } .content-category .cat-children h3.page-header a { color: #008380; } .hikashop_header_buttons a { color: #008380; } h3.glass_module_title:after { background-color: #008380; } .sunfw_get_it_touch .container .get-it-touch .box-form .layout-item { border-color: #008380; } .label-info { color: #008380; border-color: #008380; } div.pagination ul.pagination li.active a { border-color: #008380; background-color: #008380; } ul.pagination li.active a, .pagination > .active > a, .pagination > .active > a:hover { border-color: #008380; background-color: #008380; } .item-page.edit form#adminForm .toggle-editor .btn { color: #008380; } .breadcrumb > li + li:before { color: #008380; } .glass-header-title:after { background-color: #008380; } .jsn-counter-wrap .info .number { color: #008380; } .jsn-counter-wrap .info:after { color: #008380; } .content-category .form-inline table.category a { color: #008380; } select[multiple]:focus, select[size]:focus, select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus { border-color: #008380; } p.readmore a { background-color: #008380; } #menu_item_menu ul.dropdown-menu li a:hover, #menu_item_menu ul.sunfw-megamenu-sub-menu li a:hover, #menu_item_menu .modulecontainer ul.nav-child li a:hover, #menu_item_menu ul.dropdown-menu li a:focus, #menu_item_menu ul.sunfw-megamenu-sub-menu li a:focus, #menu_item_menu .modulecontainer ul.nav-child li a:focus, #menu_item_menu ul.dropdown-menu li a.current, #menu_item_menu ul.sunfw-megamenu-sub-menu li a.current, #menu_item_menu .modulecontainer ul.nav-child li a.current { color: #008380 !important; } #menu_item_menu ul.dropdown-menu li a:hover .caret:before, #menu_item_menu ul.sunfw-megamenu-sub-menu li a:hover .caret:before, #menu_item_menu .modulecontainer ul.nav-child li a:hover .caret:before, #menu_item_menu ul.dropdown-menu li a:focus .caret:before, #menu_item_menu ul.sunfw-megamenu-sub-menu li a:focus .caret:before, #menu_item_menu .modulecontainer ul.nav-child li a:focus .caret:before, #menu_item_menu ul.dropdown-menu li a.current .caret:before, #menu_item_menu ul.sunfw-megamenu-sub-menu li a.current .caret:before, #menu_item_menu .modulecontainer ul.nav-child li a.current .caret:before { color: #008380 !important; } nav.navbar.sunfw-menu-head ul.navbar-nav > li.active > a i.fa { border-color: #008380; } .carousel-control > span:not(.sr-only) { background-color: #008380; } .cat-children .item-title.page-header a, .categories-list .item-title.page-header a, .contact-category #adminForm .category .list-title a, .contact .accordion-group .contact-links ul li a, .display-in-list .hikashop_subcategories ul.box-categories-list li.hikashop_category_list_item a, .btn-mini:not(.btn-primary), .btn-small:not(.btn-primary) { color: #008380; } .hikashop_cpanel_main .hikashop_cpanel .hk-row-fluid .icon-wrapper .icon a:hover span { color: #008380 !important; } .hikashop_product_list_div .hikashop_container .hikashop_listing_img .hikashop_product_stock a.hikashop_cart_button, .hikashop_product_list_div .hikashop_container .hikashop_listing_img_title .hikashop_product_stock a.hikashop_cart_button { background-color: #008380; } .hikashop_product_name a { color: #008380 !important; } .display-in-div .hikashop_category_listing_div .hikashop_subcontainer .hikashop_category_name a.btn-transparent:hover { color: #008380; } .display-in-list .hikashop_subcategories ul.box-categories-list li.hikashop_category_list_item a:hover { color: #008380; } .hikashop_module ul.category-menu li a { color: #008380; } .your-cart-module a.btn { background-color: #008380; } a.hikashop_cart_button { background: none #008380; } #hikashop_product_top_part h1 { color: #008380; } a.hikashop_product_quantity_field_change, a.hikashop_product_quantity_field_change:hover { color: #008380; } .hikashop_product_page .show_tabular .hikashop_tabs_ul li.hikashop_tabs_li_selected { background-color: #008380 !important; border-color: #008380 !important; } .hikashop_product_page .hikashop_vote_form .button { background-color: #008380; } .hikashop_submodules h2:after { background-color: #008380; } .hikashop_products_listing ul.hikashop_product_list li a.hikashop_product_name_in_list { color: #008380; } .hikashop_cart_product_name a { color: #008380; } table.hikashop_cart_products tbody > tr > td .hikashop_cart_product_name a { color: #008380 !important; } .hikashop_order_number_value a { color: #008380 !important; } #hikashop_carts_listing div.toolbar a:hover, #hikashop_affiliate_main div.toolbar a:hover, #hikashop_address_listing div.toolbar a:hover, #hikashop_order_listing div.toolbar a:hover { color: #008380 !important; } .notifyjs-metro-info .title { color: #008380 !important; } /* ============================ Sub Color ============================ */ div[data-pf-type="Body"] .sunfw-tx-sc, div[data-pf-type="body"] .sunfw-tx-sc { color: #005499; } div[data-pf-type="Body"] .sunfw-tx-sc-h:hover, div[data-pf-type="body"] .sunfw-tx-sc-h:hover { color: #005499; } div[data-pf-type="Body"] .sunfw-bg-sc, div[data-pf-type="body"] .sunfw-bg-sc { background-color: #005499; } div[data-pf-type="Body"] .sunfw-bg-sc-h:hover, div[data-pf-type="body"] .sunfw-bg-sc-h:hover { background-color: #005499; } div[data-pf-type="Body"] .sunfw-bd-sc, div[data-pf-type="body"] .sunfw-bd-sc { border-color: #005499; } div[data-pf-type="Body"] .sunfw-bd-sc-h:hover, div[data-pf-type="body"] .sunfw-bd-sc-h:hover { border-color: #005499; } .nav[class*='menu-'] li a.get-it.btn-primary:hover { background-color: #005499; } nav.navbar.sunfw-menu-head ul.navbar-nav > li > a.get-it.btn-primary:hover, nav.navbar.sunfw-menu-head ul.navbar-nav > li > a.get-it.btn-primary:focus { background-color: #005499; } a.hikashop_cart_button:hover { background: none #005499; } .hikashop_product_page .hikashop_vote_form .button:hover { background-color: #005499; } .your-cart-module a.btn:hover { background-color: #005499; } p.readmore a:hover { background-color: #005499; } .hikashop_product_list_div .hikashop_container .hikashop_listing_img .hikashop_product_stock a.hikashop_cart_button:hover, .hikashop_product_list_div .hikashop_container .hikashop_listing_img_title .hikashop_product_stock a.hikashop_cart_button:hover { background-color: #005499; } .sunfw-content .bg-main-color:hover { background-color: #005499 !important; } .carousel-control > span:not(.sr-only):hover { background-color: #005499; } .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { background-color: #005499 !important; border-color: #005499 !important; } div[data-pf-type="Body"] .btn-default, div[data-pf-type="body"] .btn-default { background-color: #555; color: #fff; } div[data-pf-type="Body"] .btn-default:hover, div[data-pf-type="body"] .btn-default:hover { background-color: #8596a9; color: #fff; } div[data-pf-type="Body"] .btn-primary, div[data-pf-type="body"] .btn-primary { background-color: #008380; color: #fff; } div[data-pf-type="Body"] .btn-primary:hover, div[data-pf-type="body"] .btn-primary:hover { background-color: #008380; color: #fff; } div[data-pf-type="Body"] .btn-info, div[data-pf-type="body"] .btn-info { background-color: #5bc0de; color: #fff; } div[data-pf-type="Body"] .btn-info:hover, div[data-pf-type="body"] .btn-info:hover { background-color: #31b0d5; } div[data-pf-type="Body"] .btn-danger, div[data-pf-type="body"] .btn-danger, div[data-pf-type="Body"] .btn-error, div[data-pf-type="body"] .btn-error { background-color: #d9534f; color: #fff; } div[data-pf-type="Body"] .btn-danger:hover, div[data-pf-type="body"] .btn-danger:hover, div[data-pf-type="Body"] .btn-error:hover, div[data-pf-type="body"] .btn-error:hover { background-color: #c9302c; } div[data-pf-type="Body"] .btn-secondary, div[data-pf-type="body"] .btn-secondary { background-color: #6c757d; color: #fff; } div[data-pf-type="Body"] .btn-secondary:hover, div[data-pf-type="body"] .btn-secondary:hover { background-color: #5a6268; } div[data-pf-type="Body"] .btn-success, div[data-pf-type="body"] .btn-success { background-color: #5cb85c; color: #fff; } div[data-pf-type="Body"] .btn-success:hover, div[data-pf-type="body"] .btn-success:hover { background-color: #449d44; } div[data-pf-type="Body"] .btn-warning, div[data-pf-type="body"] .btn-warning { background-color: #ff9c00; color: #fff; } div[data-pf-type="Body"] .btn-warning:hover, div[data-pf-type="body"] .btn-warning:hover { background-color: #cc7d00; } div[data-pf-type="Body"] .btn-dark, div[data-pf-type="body"] .btn-dark { background-color: #343a40; color: #fff; } div[data-pf-type="Body"] .btn-dark:hover, div[data-pf-type="body"] .btn-dark:hover { background-color: #23272b; } div[data-pf-type="Body"] .btn-link, div[data-pf-type="body"] .btn-link { background: none; color: #007bff; }
/* FILE: /templates/jsn_glass2_pro/css/core/layout_e2c0be24560d78c5e599c2a9c9d0bbd2.css */
.sunfw_section_section_footer { padding-top: 55px; padding-bottom: 55px; } .sunfw_section_section_banner_slider { margin-top: -130px; } .sunfw_section_section_breadcrumb { margin-bottom: 30px; } .sunfw_section_section_promo { margin-bottom: 0px; } #menu_item_menu_main_menu_mobile > i { font-size: 26px; } #menu_item_menu_top_menu_mobile > i { font-size: 18px; }

/* FILE: /templates/jsn_glass2_pro/css/core/general_e2c0be24560d78c5e599c2a9c9d0bbd2.css */
body { background-color: #005499; color: #000; font-family: Roboto; font-weight: normal; font-size: 14px; line-height: 1.5; } a { color: #008380; } a:hover, a:focus { color: #008380; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: Roboto; font-weight: normal; line-height: 1.5; color: #000; letter-spacing: 0px; text-transform: capitalize; } h1, .h1 { font-size: 28px; } h2, .h2 { font-size: 23px; } h3, .h3 { font-size: 19px; } h4, .h4 { font-size: 14px; } h5, .h5 { font-size: 11px; } h6, .h6 { font-size: 10px; } .btn-default { background: #555; font-size: 14px; color: #fff; letter-spacing: 0px; -webkit-box-shadow: 0px 0px 0px #000; box-shadow: 0px 0px 0px #000; } .btn-default:hover, .btn-default:focus { color: #fff; } .btn-default:hover, .btn-default:focus, .btn-default.active { background-color: #8596a9; } .btn-primary { border-width: 0px; } .btn-primary { background: #008380; color: #fff; font-size: 14px; letter-spacing: 0px; -webkit-box-shadow: 0px 0px 0px #000; box-shadow: 0px 0px 0px #000; } .btn-primary:hover, .btn-primary:focus { color: #fff; border-color: #005499; } .btn-primary:hover, .btn-primary:focus, .btn-primary.active { background-color: #008380; }

/* FILE: /templates/jsn_glass2_pro/css/core/offcanvas_e2c0be24560d78c5e599c2a9c9d0bbd2.css */


/* FILE: /templates/jsn_glass2_pro/css/core/sections_e2c0be24560d78c5e599c2a9c9d0bbd2.css */
.sunfw_section_section_top_bar { background-color: #000; color: #fff; font-size: 14px; } .sunfw_section_section_top_bar h1, .sunfw_section_section_top_bar h2, .sunfw_section_section_top_bar h3, .sunfw_section_section_top_bar h4, .sunfw_section_section_top_bar h5, .sunfw_section_section_top_bar h6, .sunfw_section_section_top_bar .h1, .sunfw_section_section_top_bar .h2, .sunfw_section_section_top_bar .h3, .sunfw_section_section_top_bar .h4, .sunfw_section_section_top_bar .h5, .sunfw_section_section_top_bar .h6 { color: #fff; line-height: 1.4; } .sunfw_section_section_top_bar h1, .sunfw_section_section_top_bar .h1 { font-size: 31px; } .sunfw_section_section_top_bar h2, .sunfw_section_section_top_bar .h2 { font-size: 25px; } .sunfw_section_section_top_bar h3, .sunfw_section_section_top_bar .h3 { font-size: 21px; } .sunfw_section_section_top_bar h4, .sunfw_section_section_top_bar .h4 { font-size: 15px; } .sunfw_section_section_top_bar h5, .sunfw_section_section_top_bar .h5 { font-size: 12px; } .sunfw_section_section_top_bar h6, .sunfw_section_section_top_bar .h6 { font-size: 11px; } .sunfw_section_section_top_bar a { color: #fff; } .sunfw_section_section_top_bar a:hover { color: #008380; } .sunfw_section_section_header { background-color: #008380; } .sunfw_section_section_breadcrumb { background-color: #fff; } .sunfw_section_section_banner_slider { background-image: url("../../../../images/joomlashine/sample/background/promo-slideshow-bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; } .sunfw_section_section_content_top { font-size: 14px; } .sunfw_section_section_footer { background-color: #134c7b; color: #ffcdbe; font-size: 14px; } .sunfw_section_section_footer h1, .sunfw_section_section_footer h2, .sunfw_section_section_footer h3, .sunfw_section_section_footer h4, .sunfw_section_section_footer h5, .sunfw_section_section_footer h6, .sunfw_section_section_footer .h1, .sunfw_section_section_footer .h2, .sunfw_section_section_footer .h3, .sunfw_section_section_footer .h4, .sunfw_section_section_footer .h5, .sunfw_section_section_footer .h6 { color: #fff; text-transform: capitalize; line-height: 1.5; } .sunfw_section_section_footer h1, .sunfw_section_section_footer .h1 { font-size: 28px; } .sunfw_section_section_footer h2, .sunfw_section_section_footer .h2 { font-size: 23px; } .sunfw_section_section_footer h3, .sunfw_section_section_footer .h3 { font-size: 19px; } .sunfw_section_section_footer h4, .sunfw_section_section_footer .h4 { font-size: 14px; } .sunfw_section_section_footer h5, .sunfw_section_section_footer .h5 { font-size: 11px; } .sunfw_section_section_footer h6, .sunfw_section_section_footer .h6 { font-size: 10px; } .sunfw_section_section_copyright { background-color: #01457c; color: #fff; font-size: 14px; line-height: 1.5; } .sunfw_section_section_copyright h1, .sunfw_section_section_copyright h2, .sunfw_section_section_copyright h3, .sunfw_section_section_copyright h4, .sunfw_section_section_copyright h5, .sunfw_section_section_copyright h6, .sunfw_section_section_copyright .h1, .sunfw_section_section_copyright .h2, .sunfw_section_section_copyright .h3, .sunfw_section_section_copyright .h4, .sunfw_section_section_copyright .h5, .sunfw_section_section_copyright .h6 { color: #fff; text-transform: capitalize; line-height: 1.5; } .sunfw_section_section_copyright h1, .sunfw_section_section_copyright .h1 { font-size: 28px; } .sunfw_section_section_copyright h2, .sunfw_section_section_copyright .h2 { font-size: 23px; } .sunfw_section_section_copyright h3, .sunfw_section_section_copyright .h3 { font-size: 19px; } .sunfw_section_section_copyright h4, .sunfw_section_section_copyright .h4 { font-size: 14px; } .sunfw_section_section_copyright h5, .sunfw_section_section_copyright .h5 { font-size: 11px; } .sunfw_section_section_copyright h6, .sunfw_section_section_copyright .h6 { font-size: 10px; }

/* FILE: /templates/jsn_glass2_pro/css/core/modules_e2c0be24560d78c5e599c2a9c9d0bbd2.css */
body#sunfw-master .module-style-1 { background: #fff; border-width: 1px; border-style: solid; border-color: #d1d6de; } body#sunfw-master .module-style-1 .module-title .box-title { font-size: 18px; color: #555; font-weight: normal; } body#sunfw-master .module-style-1 .module-title .box-title:before, body#sunfw-master .module-style-1 .module-title .box-title i[class*='fa-'] { font-size: 1em; } body#sunfw-master .module-style-2 { background: #fff; border-width: 1px; border-style: solid; border-color: #008380; } body#sunfw-master .module-style-2 .module-title .box-title { font-size: 18px; color: #555; font-weight: normal; } body#sunfw-master .module-style-3 { background: #008380; border-width: 1px; border-style: solid; border-color: #d1d6de; } body#sunfw-master .module-style-3 .module-title .box-title { font-size: 18px; text-transform: uppercase; color: #fff; font-weight: normal; } body#sunfw-master .module-style-3 .module-title .box-title:before, body#sunfw-master .module-style-3 .module-title .box-title i[class*='fa-'] { color: #fff; } body#sunfw-master .module-style-3 .module-body a, body#sunfw-master .module-style-3 .custom a { color: #fff; } body#sunfw-master .module-style-3 .module-body a:hover, body#sunfw-master .module-style-3 .custom a:hover { color: #bdbdbd; } body#sunfw-master .module-style-3 .module-body .btn-primary { background-color: #005499; border-width: 0px; color: #fff; } body#sunfw-master .module-style-3 .module-body .btn-primary:hover { background-color: #008380; border-color: #005499; color: #fff; } body#sunfw-master .module-style-4 { background: #fff; border-width: 1px; border-style: solid; border-color: #008380; } body#sunfw-master .module-style-4 .module-title .box-title { background: #008380; font-size: 18px; color: #fff; font-weight: normal; }

/* FILE: /templates/jsn_glass2_pro/css/core/menu_e2c0be24560d78c5e599c2a9c9d0bbd2.css */
#menu_item_menu_main_menu { background-color: #008380; color: #000; } #menu_item_menu_main_menu ul.navbar-nav > li > a, #menu_item_menu_main_menu ul.navbar-nav > li > span.nav-header { font-size: 16px; color: #fff; text-transform: capitalize; } #menu_item_menu_main_menu ul.navbar-nav > li:hover > a, #menu_item_menu_main_menu ul.navbar-nav > li.active > a, #menu_item_menu_main_menu ul.navbar-nav > li:hover > span.nav-header, #menu_item_menu_main_menu ul.navbar-nav > li.active > span.nav-header { color: #005499; background-color: #ffc340; } #menu_item_menu_main_menu ul.dropdown-menu, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu, #menu_item_menu_main_menu .modulecontainer ul.nav-child { background-color: #fff; } #menu_item_menu_main_menu ul.dropdown-menu li a, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li a, #menu_item_menu_main_menu .modulecontainer ul.nav-child li a, #menu_item_menu_main_menu ul.dropdown-menu li span.nav-header, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li span.nav-header, #menu_item_menu_main_menu .modulecontainer ul.nav-child li span.nav-header { font-size: 14px; color: #555; } #menu_item_menu_main_menu ul.dropdown-menu li a:hover, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li a:hover, #menu_item_menu_main_menu .modulecontainer ul.nav-child li a:hover, #menu_item_menu_main_menu ul.dropdown-menu li span.nav-header:hover, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li span.nav-header:hover, #menu_item_menu_main_menu .modulecontainer ul.nav-child li span.nav-header:hover, #menu_item_menu_main_menu ul.dropdown-menu li a:focus, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li a:focus, #menu_item_menu_main_menu .modulecontainer ul.nav-child li a:focus, #menu_item_menu_main_menu ul.dropdown-menu li span.nav-header:focus, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li span.nav-header:focus, #menu_item_menu_main_menu .modulecontainer ul.nav-child li span.nav-header:focus, #menu_item_menu_main_menu ul.dropdown-menu li a.current, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li a.current, #menu_item_menu_main_menu .modulecontainer ul.nav-child li a.current, #menu_item_menu_main_menu ul.dropdown-menu li span.nav-header.current, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li span.nav-header.current, #menu_item_menu_main_menu .modulecontainer ul.nav-child li span.nav-header.current { color: #008380; } #menu_item_menu_main_menu ul.dropdown-menu li.active > a, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li.active > a, #menu_item_menu_main_menu .modulecontainer ul.nav-child li.active > a, #menu_item_menu_main_menu ul.dropdown-menu li.active > span.nav-header, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li.active > span.nav-header, #menu_item_menu_main_menu .modulecontainer ul.nav-child li.active > span.nav-header { color: #008380; } #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li.current > a, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu li.current > span.nav-header { color: #008380; } #menu_item_menu_main_menu ul.dropdown-menu, #menu_item_menu_main_menu ul.sunfw-megamenu-sub-menu ul { width: 250px; } #menu_item_menu_top_menu ul.navbar-nav > li > a, #menu_item_menu_top_menu ul.navbar-nav > li > span.nav-header { font-size: 22px; color: #fff; }

/* FILE: /templates/jsn_glass2_pro/css/custom/custom.css */
.nobanner div#sunfw_section_section_content_top { margin-top: 0px!important; } div.article-index ul.nav li:last-child { display: none; } #menu_item_menu_main_menu .navbar-nav span.caret { right: 15px!important; } .crisis .sunfw_content_top .container { margin-top: -80px; } .crisis div#sunfw_section_section_content_top { display: none!important; } .crisis div#sunfw_section_section_main_body { margin-top: -55px; margin-left: 2px; } /* Write your custom css code here */ ul.sunfw-tpl-menu > li.megamenu ul.sunfw-megamenu-sub-menu { margin-left: -100px!important; width: 400px!important; } /* Agency 800 Number in Menu Bar */ .menunumber a { color: #FFFFFF!important; font-size: 2em; font-weight: 600; } /* Staff Spotlight */ .item-image img.img-responsive { max-height: 600px; } /* Client Services Guide */ .clientservicesguide .sunfw_banner { margin-bottom: 0px!important; padding-bottom: 30px!important; } /* Article Index */ @media only screen and (max-width: 767px) { .pull-right.article-index { display: block!important; float: left!important; width: 100%!important; } } /* Testimonies */ .testimonies li { background: lightgrey; padding: 20px!important; border-style: solid; border-color: #008380; border-radius: 15px; max-width: 47%; font-size: 1.5em!important; display: inline-block!important; margin: 5px!important; min-height: 200px; z-index: 100; padding-left: 1.3em!important; } .testimonies li.even { margin-right: 20px!important; } .testimonies li:before { content: "\f10d"; font-family: FontAwesome; display: inline-block; color: #008380; font-size: 2em; position: absolute; z-index: 0; margin-left: -.9em; margin-top: -.9em; text-shadow: 4px 2px black; } .testimonies li.clearList { display: none!important; } .testimonies .k2ItemsBlock ul li { display: inline; vertical-align: top; } .sunfw_banner { z-index: -1; } /* Mega Menu CSS changes 2 */ ul.sunfw-megamenu-sub-menu.sunfw-submenu-level-1 { width: unset!important; background: linear-gradient( 0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)!important; border-style: none!important; } .covid.module-style { background: black; padding: 10px; } /* .sunfw-tpl-menu ul.sunfw-megamenu-sub-menu.sunfw-submenu-level-1 { background: transparent!important; border: none!important; } */ /* .main-menu li > a { padding: 43px 12px!important; } */ .sunfw-logo.visible-lg.visible-md.visible-sm.visible-xs { padding: 0px!important; } img.logo.visible-md.visible-lg.img-responsive { max-height: 80px!important; } img.logo.visible-md.visible-lg.img-responsive { background: rgb(255,255,255); background: linear-gradient( 0deg , rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); } img.logo.hidden-md.hidden-lg.img-responsive { background: rgb(255,255,255); background: linear-gradient( 0deg , rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); } .page-header h2 { font-size: 24px!important; font-weight: bold!important; } /* Services Article Pages */ ul.category-moduleServicesArticleModule { list-style-type: none; } /* ul.category-moduleServicesArticleModule div.content { border-top-style: solid; border-width: 1px; border-color: black; } */ .ServicesArticleModule .module-body { padding: 0px!important; } ul.category-moduleServicesArticleModule { padding-left: 0px; } .ServicesArticleModule .content { padding-left: 10px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; } .ServicesArticleModule .module-body { background-color: #008380; } ul.category-moduleServicesArticleModule { margin-bottom: 0px!important; } .ServicesArticleModule a.mod-articles-category-title { color: #ffffff!important; font-weight: 500!important; } .ServicesArticleModule li:hover { background-color: #ffc340; } .ServicesArticleModule li:hover a { color: #008380!important; } /* Breadcrumbs */ .sunfw_content_top .container { padding: 0px!important; } .sunfw_content_top .container { padding-left: 2px!important; padding-top: 2px!important; } div#sunfw_section_section_content_top { margin-top: -30px!important; } /* Publications */ .removebannermargin .sunfw_banner { padding-bottom: 0px!important; } .sunfw_banner_slider { position: unset!important; } /* PCI Compliance */ .ac-widget { box-shadow: none!important; margin-right: -10px!important; } /* Mobile CSS */ @media only screen and (max-width: 440px) { .testimonies li { max-width: none!important; } /* TopMenu on Mobile */ ul.sunfw-tpl-menu .caret { width: 5px!important; } .sunfw_top_menu span.menutitle { font-size: 0.8em!important; } .sunfw_top nav.navbar ul.navbar-nav > li a { padding: 0px!important; } ul.sunfw-tpl-menu .caret { font-size: 0.8em!important; } .sunfw_top_menu li { padding-left: 2px; padding-right: 10px; } ul.sunfw-tpl-menu .caret { right: -6px; } } ul.nav.navbar-nav.sunfw-tpl-menu::-webkit-scrollbar { display:none!important; }

/* FILE: /plugins/system/easyslider/assets/css/easyslider.css */
.jsn-es-hidden { opacity: 0 !important; visibility: hidden !important; display: none !important; } .jsn-es-draggable { cursor: -webkit-grab; cursor: -moz-grab; } .jsn-es-draggable:active, .jsn-es-draggable-dragging { cursor: -webkit-grabbing; cursor: -moz-grabbing; } .jsn-es-background { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; overflow: hidden; z-index: 1; } .jsn-es-background { pointer-events: all !important; } .jsn-es-background .jsn-es-loading { position: absolute; display: block; top: 50%; left: 50%; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.7); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border: 1px solid #2e6da4; border-radius: 50%; z-index: 2; } .jsn-es-background .jsn-es-loading:before, .jsn-es-background .jsn-es-loading:after { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border-radius: 50%; border: 3px solid #2e6da4; box-sizing: border-box; } .jsn-es-background .jsn-es-loading:before { border-top-color: transparent; } .jsn-es-background .jsn-es-loading:after { width: 10px; height: 10px; z-index: 4; border-width: 2px; } .jsn-es-background iframe { max-width: 1000% !important; } .jsn-es-background.slide-background iframe { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } video.jsn-es-video { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .jsn-es-slider, .jsn-es-slider * { box-sizing: border-box; /* Prevent user selection for native like experience */ -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-slider * { pointer-events: none; z-index: 0; } .jsn-es-slider { display: block; position: relative; box-sizing: content-box; max-width: 100%; } .jsn-es-slide-progress { background: rgba(100,100,100,0.1); display: none; position: relative; /*z-index: 999;*/ } .jsn-es-slide-progress-bar { background: #768dc2; height: 4px; width: 0%; } .jsn-es-viewport { display: inline-block; position: relative; width: 100%; height: 100%; box-sizing: content-box; overflow: hidden; } .jsn-es-viewport { -webkit-transform-style: flat; transform-style: flat; } .jsn-es-viewport * { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .jsn-es-stage { display: block; position: absolute; top: 50%; left: 50%; overflow: visible; z-index: 2; } .jsn-es-global .jsn-es-items { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } .jsn-es-slides, .jsn-es-slide, .jsn-es-swiper { display: block; position: absolute; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; list-style: none; } .jsn-es-slide, .jsn-es-slide * { /*visibility: hidden;*/ -webkit-transform-style: flat; transform-style: flat; /*pointer-events: none !important;*/ } .jsn-es-slide { pointer-events: none !important; } .jsn-es-global { z-index: 2; } .jsn-es-slides { z-index: 1; } .jsn-es-items { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; list-style: none; pointer-events: none !important; padding: 0; margin: 0; z-index: 2; } .jsn-es-item { position: absolute; top: 50%; left: 50%; width: 0; height: 0; padding: 0; margin: 0; } .jsn-es-item, .jsn-es-item * { -webkit-transform-style: flat; transform-style: flat; backface-visibility: visible; pointer-events: all !important; } .jsn-es-item a, .jsn-es-item a:hover, .jsn-es-item a:active { cursor: pointer; text-decoration: none; } .jsn-es-item .item-offset { display: block; position: absolute; -webkit-perspective: 1000px; perspective: 1000px; transform: translate3d(0px,0px,0px); -webkit-transform: translateX(0px) translateY(0px) translateZ(0px); } .jsn-es-item .item-animation, .jsn-es-item .item-container { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; border: 1px solid transparent; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; /*overflow: hidden;*/ } .jsn-es-item .item-content { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: distribute; justify-content: space-around; width: 100%; height: 100%; filter: none !important; padding: 0; margin: 0; z-index: 2; } .jsn-es-nav svg { max-width: 10000px; } .jsn-es-nav { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .jsn-es-nav-buttons { font-size: 16.5px; line-height: 1.25; font-family: 'Lato', sans-serif; font-weight: 300; } .jsn-es-nav-pagination { top: auto; margin-bottom: 15px; text-align: center; font-weight: 400; font-size: 1em; font-family: 'Lato', Arial, sans-serif; } .jsn-es-nav .jsn-es-next, .jsn-es-nav .jsn-es-next *, .jsn-es-nav .jsn-es-prev, .jsn-es-nav .jsn-es-prev * .jsn-es-nav .jsn-es-pagination, .jsn-es-nav .jsn-es-pagination * { pointer-events: all !important; cursor: pointer; } /*.jsn-es-nav-pagination {*/ /*list-style: none;*/ /*white-space: nowrap;*/ /*top: auto;*/ /*left: 0;*/ /*right: 0;*/ /*bottom: 0;*/ /*padding: 0;*/ /*margin: 5px;*/ /*text-align: center;*/ /*}*/ /*.jsn-es-pagination > * {*/ /*display: inline-block;*/ /*position: relative;*/ /*margin: 1px;*/ /*font-size: 0;*/ /*width: 10px;*/ /*height: 10px;*/ /*box-sizing: content-box;*/ /*border: 5px solid rgba(0,0,0,0);*/ /*border-radius: 50%;*/ /*background-clip: content-box;*/ /*}*/ /*.jsn-es-pagination > * {*/ /*cursor: pointer;*/ /*color: rgba(0,0,0,0.7);*/ /*pointer-events: all !important;*/ /*background-color: rgba(255,255,255,0.5);*/ /*transition: all 300ms ease;*/ /*}*/ /*.jsn-es-pagination > *:hover {*/ /*background-color: rgba(255,255,255,0.9);*/ /*}*/ /*.jsn-es-pagination > *:active,*/ /*.jsn-es-pagination > *.jsn-es-active {*/ /*transition: none 0ms;*/ /*background-color: rgba(0,0,0,0.5);*/ /*color: rgba(255,255,255,0.8)*/ /*}*/ .jsn-es-cube { display: block; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; } .jsn-es-cuboid, .jsn-es-cuboid * { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .jsn-es-cuboid { display: block; position: absolute; top: 0; left: 0; } .jsn-es-cuboid-face { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ddd; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .jsn-es-cuboid-front { background-color: black; } .jsn-es-cuboid-left, .jsn-es-cuboid-right { left: 50%; /*background-color: rgba(50,50,50,0.3);*/ } .jsn-es-cuboid-back { /*background-color: rgba(0,0,0,0.3);*/ } .jsn-es-cuboid-top, .jsn-es-cuboid-bottom { top: 50%; /*background-color: rgba(50,50,50,0.3);*/ } /* SVG wrap */ .svg-wrap { position: absolute; width: 0px; height: 0px; overflow: hidden; } .jsn-es-flat-slider .jsn-es-items { -webkit-transform-style: flat !important; transform-style: flat !important; } .bg-parallax { width: 100%; height: 100%; } .none-bg { background: none !important; } .slide-background-effect { width: 100%; height: 100%; } .jsn-es-background.slide-background { border: none; padding: 0; margin: 0 0; } .jsn-es-slider ul, .jsn-es-slides { margin: 0px !important; padding: 0; }

/* FILE: /plugins/system/easyslider/assets/lib/arrows-nav/css/component.css */
/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);*/ .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; } /* Individual styles */ /*--------------------*/ /* Slide out */ /*--------------------*/ .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) /* common color */; } .jsn-es-nav-slide div { position: absolute; top: 50%; padding: 0 30px; background-color: rgba(30, 30, 30, 0.8) /* common color */; -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); } /*--------------------*/ /* Image bar */ /*--------------------*/ .color-2 { background: rgba(30, 30, 30, 0.8) /* common color */; } .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); } /*--------------------*/ /* Circle pop */ /*--------------------*/ .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); } /*--------------------*/ /* Rounded slide */ /*--------------------*/ .color-4 { background-color: rgba(30, 30, 30, 0.8) /* common color */; } .jsn-es-nav-roundslide a { margin: 0 20px; padding: 15px; width: 62px; height: 62px; border-radius: 40px; background: rgba(255, 255, 255, 0.9) /* common color */; -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) /* common color */; } .jsn-es-nav-roundslide h3 { position: absolute; top: 0; margin: 0; color: rgba(30, 30, 30, 0.8) /* common color */; 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); } /*--------------------*/ /* Slit (inspired by Jam3) */ /*--------------------*/ .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) /* common color */; 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); } /*--------------------*/ /* Reveal */ /*--------------------*/ .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; } /*--------------------*/ /* Thumb flip */ /*--------------------*/ .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); } /*--------------------*/ /* Double flip */ /*--------------------*/ .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; } /*--------------------*/ /* Multi thumb */ /*--------------------*/ .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; /* needed because of Chrome bug with prefixed calc */ 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; } /*--------------------*/ /* Fillpath (http://www.nizuka.fr/)*/ /*--------------------*/ .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) /* common color */; 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); } /*--------------------*/ /* Grow Pop */ /*--------------------*/ .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); } /*--------------------*/ /* Diamond */ /*--------------------*/ .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) /* common color */; -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); } /*--------------------*/ /* Fill Slide */ /*--------------------*/ .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); } /*--------------------*/ /* Circle slide */ /*--------------------*/ .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) /* common color */; 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; /* Trick to hide the visible border of image */ -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); } }

/* FILE: /plugins/system/easyslider/assets/lib/dot-nav/css/component.css */
/* Common styles and resets */ .dotstyle ul { position: relative; display: inline-block; margin: 0; padding: 0; list-style: none; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dotstyle li { position: relative; display: block; float: left; margin: 0 8px; width: 16px; height: 16px; cursor: pointer; } .dotstyle li a { top: 0; left: 0; width: 100%; height: 100%; outline: none; border-radius: 50%; background-color: #fff; background-color: rgba(255, 255, 255, 0.3); text-indent: -999em; /* make the text accessible to screen readers */ cursor: pointer; position: absolute; } .dotstyle li a:focus { outline: none; } /* Individual styles and effects */ /* Fill up */ .dotstyle-fillup li a { overflow: hidden; background-color: transparent; box-shadow: inset 0 0 0 2px white; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; } .dotstyle-fillup li a::after { content: ''; position: absolute; bottom: 0; height: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 0 1px #fff; -webkit-transition: height 0.3s ease; transition: height 0.3s ease; } .dotstyle-fillup li a:hover, .dotstyle-fillup li a:focus { background-color: rgba(0, 0, 0, 0.2); } .dotstyle-fillup li.current a::after { height: 100%; } /* Scale up */ .dotstyle-scaleup li a { -webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease; transition: transform 0.3s ease, background-color 0.3s ease; } .dotstyle-scaleup li a:hover, .dotstyle-scaleup li a:focus { background-color: white; } .dotstyle-scaleup li.current a { background-color: white; -webkit-transform: scale(1.5); transform: scale(1.5); } /* Stroke */ .dotstyle-stroke li a { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0); -webkit-transition: box-shadow 0.3s ease, background-color 0.3s ease; transition: box-shadow 0.3s ease, background-color 0.3s ease; } .dotstyle-stroke li a:hover, .dotstyle-stroke li a:focus { background-color: white; } .dotstyle-stroke li.current a { background-color: transparent; box-shadow: 0 0 0 2px white; } /* Fill in */ .dotstyle-fillin li a { background-color: transparent; box-shadow: inset 0 0 0 2px white; -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; } .dotstyle-fillin li a:hover, .dotstyle-fillin li a:focus { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) } .dotstyle-fillin li.current a { box-shadow: inset 0 0 0 8px white; } /* Circle grow */ .dotstyle-circlegrow li a { overflow: hidden; background-color: transparent; box-shadow: inset 0 0 0 2px white; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .dotstyle-circlegrow li a::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; border-radius: 50%; background-color: #fff; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; } .dotstyle-circlegrow li a:hover, .dotstyle-circlegrow li a:focus { opacity: 0.7; } .dotstyle-circlegrow li.current a::after { -webkit-transform: scale(1); transform: scale(1); } /* Dot to stroke */ .dotstyle-dotstroke li a { box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.5); -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; } .dotstyle-dotstroke li a:hover, .dotstyle-dotstroke li a:focus { box-shadow: inset 0 0 0 8px white; } .dotstyle-dotstroke li.current a { box-shadow: inset 0 0 0 2px white; } /* SVG draw circle stroke */ .dotstyle-drawcircle li { width: 18px; height: 18px; } .dotstyle-drawcircle li a { top: 3px; left: 3px; width: 12px; height: 12px; background-color: rgba(0, 0, 0, 0.5) /* common color */; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .dotstyle-drawcircle li svg { z-index: 10; } .dotstyle-drawcircle li svg circle { opacity: 0; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 39 39; stroke-dashoffset: 39; /* length of circle path (pi*2r) */ -webkit-transition: stroke-dashoffset 0.3s, opacity 0.3s; transition: stroke-dashoffset 0.3s, opacity 0.3s; } .dotstyle-drawcircle li.current a, .dotstyle-drawcircle li a:hover, .dotstyle-drawcircle li a:focus { opacity: 0.5; } .dotstyle-drawcircle li.current svg circle { opacity: 1; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.3s, opacity 0.15s; transition: stroke-dashoffset 0.3s, opacity 0.15s; } /* Small dot with stroke */ .dotstyle-smalldotstroke li { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0); -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; } .dotstyle-smalldotstroke li a { background-color: rgba(255, 255, 255, 0.7); -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease; transition: background-color 0.3s ease, transform 0.3s ease; } .dotstyle-smalldotstroke li a:hover, .dotstyle-smalldotstroke li a:focus, .dotstyle-smalldotstroke li.current a { background-color: white } .dotstyle-smalldotstroke li.current a { -webkit-transform: scale(0.4); transform: scale(0.4); } .dotstyle-smalldotstroke li.current { box-shadow: 0 0 0 2px white; } /* Puff */ .dotstyle-puff li a { border: 2px solid #fff; -webkit-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } .dotstyle-puff li a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; background: rgba(0, 0, 0, 0.5) /* common color */; border-radius: 50%; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) /* common color */; opacity: 0; -webkit-transform: scale(3); transform: scale(3); -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease, visibility 0s 0.3s; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s; } .dotstyle-puff li a:hover, .dotstyle-puff li a:focus, .dotstyle-puff li.current a { border-color: rgba(0, 0, 0, 0.5) /* common color */; } .dotstyle-puff li.current a::after { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; } /* 3D Flip */ .dotstyle-flip li { -webkit-perspective: 1000px; perspective: 1000px; } .dotstyle-flip li a { background-color: transparent; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; } .dotstyle-flip li a::before, .dotstyle-flip li a::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: white; content: ''; text-indent: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dotstyle-flip li a::after { background-color: rgba(0, 0, 0, 0.5) /* common color */; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .dotstyle-flip li a:hover, .dotstyle-flip li a:focus { opacity: 0.8; } .dotstyle-flip li.current a { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } /* Tooltip */ .dotstyle-tooltip li { border: 2px solid #fff; border-radius: 50%; z-index: 1; -webkit-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } .dotstyle-tooltip li a { top: auto; bottom: 250%; left: 50%; visibility: hidden; white-space: nowrap; padding: 0 10px; width: auto; height: auto; border-radius: 0; background-color: rgba(0, 0, 0, 0.5) /* common color */; color: #fff; text-indent: 0; line-height: 2; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease; } .dotstyle-tooltip li a::after { /* http: //cssarrowplease.com/ */ position: absolute; left: 50%; margin-left: -6px; width: 0; height: 0; border: solid transparent; border-width: 6px; border-color: transparent; border-top-color: rgba(0, 0, 0, 0.5) /* common color */; content: ''; pointer-events: none; top: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .no-touch .dotstyle-tooltip li:hover a, .dotstyle-tooltip li.current a { z-index: 100; visibility: visible; opacity: 1; -webkit-transform: translateX(-50%) translateY(0%); transform: translateX(-50%) translateY(0%); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; } .dotstyle-tooltip li.current { border-color: rgba(0, 0, 0, 0.5) /* common color */; } .dotstyle-tooltip li:hover { z-index: 100; } .no-touch .dotstyle-tooltip ul:hover li.current a { opacity: 0.2; } .dotstyle-tooltip ul li.current:hover a { opacity: 1; } /* Dot move */ .dotstyle-dotmove li:last-child { position: absolute; left: 0; margin: 0; width: 48px; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; } .dotstyle-dotmove li:last-child::after { content: ''; position: absolute; left: 50%; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, 0.5) /* common color */; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .dotstyle-dotmove li.current:first-child ~ li:last-child { -webkit-transform: translateX(0%); transform: translateX(0%); } .dotstyle-dotmove li.current:nth-child(2) ~ li:last-child { -webkit-transform: translateX(100%); transform: translateX(100%); } .dotstyle-dotmove li.current:nth-child(3) ~ li:last-child { -webkit-transform: translateX(200%); transform: translateX(200%); } .dotstyle-dotmove li.current:nth-child(4) ~ li:last-child { -webkit-transform: translateX(300%); transform: translateX(300%); } .dotstyle-dotmove li.current:nth-child(5) ~ li:last-child { -webkit-transform: translateX(400%); transform: translateX(400%); } .dotstyle-dotmove li.current:nth-child(6) ~ li:last-child { -webkit-transform: translateX(500%); transform: translateX(500%); } .dotstyle-dotmove li a { -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .dotstyle-dotmove li a:hover, .dotstyle-dotmove li a:focus { background-color: #fff; } /* Fly in */ .dotstyle-hop li a { border: 2px solid rgba(0, 0, 0, 0.5) /* common color */; background: transparent; } .dotstyle-hop li a::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; border-radius: 50%; visibility: hidden; background: #fff; opacity: 0; -webkit-transform: rotate(-100deg); transform: rotate(-100deg); -webkit-transform-origin: -200% 50%; transform-origin: -200% 50%; -webkit-transition: -webkit-transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease; transition: transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease; } .dotstyle-hop li a:focus { background: rgba(255, 255, 255, 0.2); } .dotstyle-hop li.current-from-right a::after { -webkit-transition: none; transition: none; -webkit-transform: rotate(100deg); transform: rotate(100deg); -webkit-transform-origin: 300% 50%; transform-origin: 300% 50%; } .dotstyle-hop li.current a::after { visibility: visible; opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; } /* Fall */ .dotstyle-fall li::after { content: ''; position: absolute; width: 100%; height: 100%; visibility: hidden; opacity: 0; left: 0; background-color: rgba(0, 0, 0, 0.5) /* common color */; border-radius: 50%; -webkit-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s; } .dotstyle-fall li a { -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; } .dotstyle-fall li:hover a, .dotstyle-fall li a:focus, .dotstyle-fall li.current a { background-color: #fff; } .dotstyle-fall li.current::after { opacity: 1; visibility: visible; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; -webkit-transform: translateY(0%); transform: translateY(0%); } .dotstyle-fall li.current a { opacity: 0; -webkit-transform: translateY(200%); transform: translateY(200%); }