/* Theme Name: Beat Mix Lite Theme URI: http://kopatheme.com/ Author: Kopatheme Author URI: http://kopatheme.com/ Version: 1.0.0 Description: BeatMix is a clean, trendy and fully responsive WordPress theme suited for concerts, events or any kind of music websites or blogs. This super flexible and easy-to-use theme coming along with many powerful options and features is guaranteed to give your site an amazing look beyond your expectations. Tags: light, one-column, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, translation-ready License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: beatmix_lite Requires at least: 3.8 Tested up to: 4.2.2 */ /** * Table of Contents: * 1 - Body 1.1 - Repeatable Patterns 1.2 - Basic Structure 1.3 - Color 2 - Header / #kopa-page-header 2.1 - Search / .search-box 2.2 - Navigation / #main-nav 3 - Content 3.1 - Home Page 3.2 - Sub Page 3.3 - Widget 3.4 - Bottom sidebar / #bottom-sidebar 4.0 - Footer / #kopa-page-footer * ----------------------------------------------------------------------------- */ .widget, .kopa-rating { list-style: none; padding: 0; } .kopa-social-links { &.style1, &.style2 { list-style: none; padding: 0; } } .widget ul, .kopa-rating ul { list-style: none; padding: 0; } .kopa-social-links { &.style1 ul, &.style2 ul { list-style: none; padding: 0; } } .widget ol, .kopa-rating ol { list-style: none; padding: 0; } .kopa-social-links { &.style1 ol, &.style2 ol { list-style: none; padding: 0; } } .kopa-event-widget > ul li:first-child, .kopa-rating ul li:first-child, .kopa-audio-download-widget > ul li:first-child { margin: 0; padding: 0; border: 0; } .outer:before, .entry-box .entry-content-wrap .left-col .about-author .author-content footer:before, .kopa-blog-classic-widget ul li .entry-item .entry-content footer a:before, .kopa-audio-list-2-widget > header:before { content: ""; display: table; } .kopa-album-widget .masonry-container .container-masonry .item { .entry-item .entry-bottom:before, .jp-time-holder:before { content: ""; display: table; } } .kopa-event-3-widget .kopa-event-carousel .item ul > li:before, .kopa-event-widget > ul > li:before { content: ""; display: table; } .kopa-album-list { .entry-item .entry-bottom:before, .jp-time-holder:before { content: ""; display: table; } } .kopa-rating ul:before, .kopa-audio-list-widget > header:before, .kopa-countdown:before, .btn-ca li:before, .kopa-audio-list-1-widget .jp-audio:before, .kopa-countdown-2:before, .kopa-tab.style1 .nav-tabs:before, .kopa-audio-download-widget .entry-item:before, .kopa-event-2-widget > ul > li:before { content: ""; display: table; } .jp-audio.kopa-jp-wrap4 .jp-interface > { header:before, footer:before { content: ""; display: table; } } .outer:after, .entry-box .entry-content-wrap .left-col .about-author .author-content footer:after, .kopa-blog-classic-widget ul li .entry-item .entry-content footer a:after, .kopa-audio-list-2-widget > header:after { content: ""; display: table; } .kopa-album-widget .masonry-container .container-masonry .item { .entry-item .entry-bottom:after, .jp-time-holder:after { content: ""; display: table; } } .kopa-event-3-widget .kopa-event-carousel .item ul > li:after, .kopa-event-widget > ul > li:after { content: ""; display: table; } .kopa-album-list { .entry-item .entry-bottom:after, .jp-time-holder:after { content: ""; display: table; } } .kopa-rating ul:after, .kopa-audio-list-widget > header:after, .kopa-countdown:after, .btn-ca li:after, .kopa-audio-list-1-widget .jp-audio:after, .kopa-countdown-2:after, .kopa-tab.style1 .nav-tabs:after, .kopa-audio-download-widget .entry-item:after, .kopa-event-2-widget > ul > li:after { content: ""; display: table; } .jp-audio.kopa-jp-wrap4 .jp-interface > { header:after, footer:after { content: ""; display: table; } } .outer:after, .entry-box .entry-content-wrap .left-col .about-author .author-content footer:after, .kopa-blog-classic-widget ul li .entry-item .entry-content footer a:after, .kopa-audio-list-2-widget > header:after { clear: both; } .kopa-album-widget .masonry-container .container-masonry .item { .entry-item .entry-bottom:after, .jp-time-holder:after { clear: both; } } .kopa-event-3-widget .kopa-event-carousel .item ul > li:after, .kopa-event-widget > ul > li:after { clear: both; } .kopa-album-list { .entry-item .entry-bottom:after, .jp-time-holder:after { clear: both; } } .kopa-rating ul:after, .kopa-audio-list-widget > header:after, .kopa-countdown:after, .btn-ca li:after, .kopa-audio-list-1-widget .jp-audio:after, .kopa-countdown-2:after, .kopa-tab.style1 .nav-tabs:after, .kopa-audio-download-widget .entry-item:after, .kopa-event-2-widget > ul > li:after { clear: both; } .jp-audio.kopa-jp-wrap4 .jp-interface > { header:after, footer:after { clear: both; } } p { &.reset, &:last-child { margin: 0; } } a, .nav-tabs.kopa-tabs-2 > li:before, .kopa-button-border { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .kopa-button { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; &:before, &:after { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .kopa-button-icon { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .table-4col .pricing-column .pricing-column-inner .pricing-header { .pricing-title { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .pricing-price { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; span { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } .table-3col .pricing-column .pricing-column-inner .pricing-header { .pricing-title, .pricing-price { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .pro-bar-container .pro-bar p, .social-links li, .jp-stop, .jp-previous, .jp-next, .jp-play { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .owl-theme .owl-controls { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; .owl-buttons div, .owl-pagination .owl-page span { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .search-box .search-form .search-submit:hover { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } #main-menu > li { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; > { a:before { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } ul > li { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; ul li { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } } .home-slider-box { .kopa-home-slider-carousel .carousel-item .slide-caption .entry-title, #prev img, #next img { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .entry-box { .entry-thumb .kopa-single-carousel .owl-controls .owl-buttons > div { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .share-box ul li a { i, span { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } #related-post .row > div .entry-item .entry-thumb .mask { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; a i { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } #respond { .comments-form p input[type='text'], .comment-form p input[type='text'], .comments-form p textarea, .comment-form p textarea, .comments-form p input[type='submit'], .comment-form p input[type='submit'] { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } #contact-box .contact-form .row > div p { #contact_fname, #contact_email, #contact_lname, #contact_date, #contact_phone, #contact_hour, #contact_message { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .woocommerce ul.products li.product > div, .woocommerce-page ul.products li.product > div, .woocommerce ul.products li.product > div > a h3, .woocommerce-page ul.products li.product > div > a h3, .woocommerce div.product div.summary form.cart .quantity .minus, .woocommerce-page div.product div.summary form.cart .quantity .minus, .woocommerce div.product div.summary form.cart .quantity .plus, .woocommerce-page div.product div.summary form.cart .quantity .plus, .woocommerce div.product div.summary form.cart .quantity .qty, .woocommerce-page div.product div.summary form.cart .quantity .qty, .woocommerce div.product div.summary form.cart .single_add_to_cart_button, .woocommerce-page div.product div.summary form.cart .single_add_to_cart_button, .kopa-twitter-widget ul li .tweet-item .tweet-avatar { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .kopa-gallery-widget .masonry-container { > header .filters li { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .container-masonry .item { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; .mask { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; a i { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } } .kopa-masonry-list-1-widget .masonry-list-wrapper > ul > li .entry-item .entry-thumb { .mask { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; a i { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .kopa-blog-carousel .owl-controls .owl-buttons div { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .kopa-blog-classic-widget ul li .entry-item .entry-thumb { .mask { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; a i { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .kopa-blog-classic-carousel .owl-controls .owl-buttons > div { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .kopa-artist-widget .masonry-container { > header .filters li { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; &:before { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .container-masonry .item { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; .artist-item .artist-thumb .mask { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; a i { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } } .kopa-album-widget .masonry-container { > header .filters li { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; &:before { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .container-masonry .item { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; .entry-item .entry-thumb { .sd, > img { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } } .kopa-event-3-widget .kopa-event-carousel .item ul > li { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .kopa-album-list .entry-item .entry-thumb { .sd, > img { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .owl-carousel-1 .entry-item { &:before, .entry-thumb > span { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .sync1 .entry-item .entry-thumb > a { &:before, &:after { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .thumb-hover, .thumb-icon, .sync2 .owl-controls .owl-buttons div { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .btn-ca li a { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; i { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .owl-carousel-3 .entry-item .entry-thumb > a { &:before, &:after { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .contact-box-1 { input, textarea { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .comment-box-1 { input, textarea { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .contact-box-1 { input:focus, textarea:focus { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .comment-box-1 { input:focus, textarea:focus { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .contact-box-1 { input { &#submit-contact-1, &#submit-comment-1 { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } textarea { &#submit-contact-1, &#submit-comment-1 { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } .comment-box-1 { input { &#submit-contact-1, &#submit-comment-1 { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } textarea { &#submit-contact-1, &#submit-comment-1 { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } } .kopa-header-notification { .outer, .close { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } } .kopa-audio-download-widget .entry-item .col-left a, .event-button:before, .kopa-event-2-widget > ul > li, .kopa-newsletter-1-widget .newsletter-form .search-submit, .widget_archive ul li:before, #back-top a:before { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .jp-stop:before, .jp-previous:before, .jp-next:before, .jp-play:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .owl-theme .owl-controls .owl-buttons div { &.owl-prev:before, &.owl-next:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } .entry-icon:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .home-slider-box { #prev:before, #next:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } .entry-box .entry-thumb .kopa-single-carousel .owl-controls .owl-buttons > div:before, .kopa-masonry-list-1-widget .masonry-list-wrapper > ul > li .entry-item .entry-thumb .kopa-blog-carousel .owl-controls .owl-buttons div:before, .kopa-blog-classic-widget ul li .entry-item .entry-thumb .kopa-blog-classic-carousel .owl-controls .owl-buttons > div:before, .kopa-audio-list-2-widget .widget-content .audio-list-wrapper .audio-list > li a:before, .kopa-event-3-widget .kopa-event-carousel .owl-controls .owl-buttons > div.owl-next:after, .kopa-audio-list-widget .widget-content .audio-list > li a:before, .thumb-icon, .jp-playlist ul li:before, .widget_archive ul li:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /** * 1. Body * ----------------------------------------------------------------------------- */ /**1.1 Repeatable Patterns**/ ::selection, ::-moz-selection { background: #38b883; color: #4f4954; text-shadow: none; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; &:before, &:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Source Sans Pro", sans-serif; color: #392f55; font-weight: 400; display: block; margin: 0 0 10px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { color: #c4c4c4; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover { color: #38b883; } h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, .h1 em, .h2 em, .h3 em, .h4 em, .h5 em, .h6 em { color: #392f55; font-weight: 300; } h1 { font-size: 40px; line-height: 44px; } h2 { font-size: 30px; line-height: 34px; } h3 { font-size: 25px; line-height: 29px; } h4 { font-size: 20px; line-height: 24px; } h5 { font-size: 18px; line-height: 22px; } h6 { font-size: 15px; line-height: 20px; } a { color: #c4c4c4; text-decoration: none !important; outline: none !important; &:hover, &.active { color: #38b883; text-decoration: none; } &:focus { outline: none; } } ol { counter-reset: item; display: block; margin: 5px 0; padding: 0 0 0 40px; } ul { list-style-type: square; margin: 5px 0px; padding: 0 0 0 40px; li { list-style-type: inside square; margin-bottom: 10px; ol li { list-style: inside decimal; } } } ol li ol li, ul li ol li ol li { list-style: lower-alpha inside none; } ol li { list-style: inside decimal; margin-bottom: 10px; > ul { margin-top: 10px; margin-left: 10px; } } ul li > ol { margin-top: 10px; margin-left: 10px; } ol li ul li { list-style: inside square; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } figure.wp-caption.alignleft, img.alignleft { margin: 5px 20px 5px 0; } .wp-caption.alignleft { margin: 5px 10px 5px 0; } figure.wp-caption.alignright, img.alignright { margin: 5px 0 5px 20px; } .wp-caption.alignright { margin: 5px 0 5px 10px; } img { &.aligncenter { margin: 5px auto; } &.alignnone { margin: 5px 0; } } .entry-box .entry-content img, .entry-summary img, .comment-content img, .widget img, .wp-caption { max-width: 100%; } .entry-box .entry-content address { font-style: italic; } textarea { resize: vertical; outline: none !important; } input { outline: none !important; } img { max-width: 100%; height: auto; } .text-hover { color: #38b883; } .text-light { font-weight: 300; } select { width: 100%; option { width: 280px; } } input:-ms-input-placeholder, ::-webkit-input-placeholder { color: #fff; } input:-moz-placeholder { /* Firefox 18- */ color: #fff; } ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } .sticky-post { position: absolute; right: 0; top: 40px; z-index: 1; &:before { content: ''; position: absolute; border-left: 40px solid transparent; border-right: 0px solid transparent; border-top: 40px solid #38b883; bottom: 0; left: 50%; margin-left: -40px; } i { color: #fff; position: absolute; left: -15px; top: -35px; -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); &:before { content: "\f0e7"; } } } /*.video-wrapper { height: 0; padding-bottom: 56.25%; padding-top: 0; position: relative; } .video-wrapper iframe, .video-wrapper object, .video-wrapper video { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }*/ /*----- Tabs -----*/ .nav-tabs.kopa-tabs-1 { border-bottom: none; margin: 0; padding: 0px; background-color: #392f55; > li { margin: 0; border-right: 1px solid #ffffff; line-height: 0; a { position: relative; padding: 0; margin: 0; border: none !important; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; font-size: 14px; line-height: 26px; display: block; padding: 12px 30px; color: #ffffff; background-color: #392f55; } &.active a { color: #392e54; background-color: #ffffff; } } } .tab-content { background-color: #ffffff; padding: 20px 30px; } .kopa-tab-container-3 { background-size: cover; position: relative; &.row { margin-left: 0; margin-right: 0; > div { padding-left: 0; padding-right: 0; } } .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(57, 47, 85, 0.4); } .tab-content { background-color: transparent; color: #ffffff; p { margin-bottom: 20px; } } } .nav-tabs.kopa-tabs-3 { margin: 0px; padding: 0; border: none; > li { padding: 0; margin: 1px 0 0; float: none; a { border: none !important; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; font-size: 14px; line-height: 26px; padding: 12px 30px; background-color: #392f55; color: #ffffff; } &:first-child { margin: 0; } &.active a { background-color: rgba(234, 233, 241, 0.4); color: #392f55; } } } .kopa-tab-container-4, .kopa-tab-container-2 { position: relative; } .nav-tabs.kopa-tabs-2 { padding: 10px 0; margin: 0px; border: none !important; background-color: #9c97aa; > li { padding: 0; float: left; margin: 0 0 0 10px; list-style: none; position: relative; a { border: none !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; padding: 0 20px; line-height: 30px; display: block; text-align: center; color: #392f55; background-color: #eae9f1; margin: 0; } &.active { a { background-color: #392f55; color: #ffffff; position: relative; z-index: 1; } &:before { opacity: 1; filter: Alpha(Opacity = 100); } } &:before { content: ''; position: absolute; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #392f55; bottom: -5px; left: 50%; margin-left: -4px; opacity: 0; filter: Alpha(Opacity = 0); } } } .kopa-tab-container-4 { padding-top: 170px; .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(57, 47, 85, 0.4); z-index: 0; } .kopa-tabs-4 { position: relative; z-index: 1; margin: 0; padding: 0 15px; border: none !important; li { float: left; margin: 0 0 0 3px; list-style: none; a { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; display: block; border: none !important; background-color: rgba(57, 47, 85, 0.3); color: #ffffff; line-height: 20px; padding: 15px 20px; margin: 0; } &.active a { color: #392f55; background-color: #ffffff; } } } .tab-content { position: relative; z-index: 1; } } .kopa-tab-container-5 { padding-top: 170px; position: relative; .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(57, 47, 85, 0.4); z-index: 0; } .kopa-tabs-5 { position: relative; z-index: 1; margin: 0; padding: 0 15px; border: none !important; li { float: left; margin: 0 0 0 3px; list-style: none; a { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; display: block; border: none !important; background-color: rgba(255, 255, 255, 0.3); color: #ffffff; line-height: 20px; padding: 15px 20px; margin: 0; } &.active a { background-color: #392f55; color: #ffffff; } } } .tab-content { position: relative; z-index: 1; background-color: #392f55; color: #ffffff; } } .kopa-tab-container-6 .nav.nav-tabs.kopa-tabs-6 { margin: 0; border-bottom: none !important; > li { margin: 0 0 30px; > a { background-color: #3a2f57; color: #ffffff; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; margin: 0 5px 0 0; text-transform: uppercase; } &.active a { border: none !important; background-color: #38b883; } } } /*----- DropCap -----*/ .kp-dropcap-1 { display: inline-block; float: left; font-size: 60px; line-height: 58px; margin: 0 15px 0 0; text-align: center; color: #392f55; font-weight: 700; } .kp-dropcap-2 { display: inline-block; float: left; font-size: 24px; line-height: 46px; width: 46px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin: 10px 15px 0 0; text-align: center; color: #ffffff; background-color: #392f55; font-weight: 700; } /*----- Accordion -----*/ .accordion-title h6 { font-size: 14px; margin: 0; line-height: 50px; text-transform: none; font-family: "Lato", sans-serif; } .accordion-container { padding: 15px 30px 10px; background-color: #ffffff; } .acc-wrapper { .accordion-title { position: relative; &.active span:before { content: "\f068"; } &:first-child h6 { border-top: none; } h6 { padding: 0 50px 0 30px; margin: 0; background-color: #392f55; cursor: pointer; border-top: 1px solid #ffffff; a { color: #ffffff; } } span { position: absolute; display: block; top: 10px; right: 10px; color: #4f4954; width: 30px; height: 30px; font-size: 10px; line-height: 32px; text-align: center; color: #b4b2bb; } } &.acc-wrapper-1 { .accordion-title.active h6 { background-color: #ffffff; a { color: #392f55; } } .accordion-container { padding-top: 5px; } } &.acc-wrapper-2 { .accordion-title { h6 { padding: 0 30px 0 65px; background-color: #ffffff; border-top-color: #eae9f1; a { color: #93909e; } } span { right: auto; left: 30px; width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; line-height: 20px; background-color: #392f55; top: 15px; } &.active { h6 { background-color: #392f55; a { color: #ffffff; } } span { background-color: #ffffff; } } } .accordion-container { background-color: #392f55; padding-top: 0; } } &.acc-wrapper-3 .accordion-title { h6 { padding: 0 30px 0 70px; background-color: #ffffff; border-top-color: #eae9f1; a { color: #93909e; } } span { right: auto; left: 0px; width: 50px; height: 50px; line-height: 50px; background-color: #392f55; top: 0; } &:first-child span { height: 49px; line-height: 48px; } &.active h6 a { color: #392f55; } } } /*----- Toggle -----*/ .toggle-view { margin: 0; padding: 0; li { padding: 0; cursor: pointer; position: relative; float: none; margin: 0; list-style: none; border-top: 1px solid #ffffff; &:first-child { border-top: none; } h6 { font-size: 14px; line-height: 50px; padding: 0 60px 0 30px; margin: 0; background-color: #392f55; font-family: "Lato", sans-serif; color: #ffffff; } span { position: absolute; right: 20px; top: 15px; color: #38b883; width: 20px; height: 20px; background-color: #ffffff; text-align: center; line-height: 20px; font-size: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: #b4b2bb; } .kopa-panel { display: none; background-color: #ffffff; padding: 5px 60px 15px 30px; margin: 0; } &.active { h6 { background-color: #ffffff; color: #392f55; } span { background-color: #392f55; } } } } .kopa-toggle-2.toggle-view li { border-top: none; h6 { background-color: transparent; padding: 0 30px 0 50px; color: #93909e; } span { display: block; position: absolute; left: 0; right: auto; width: 30px; height: 30px; line-height: 28px; color: #ffffff; background-color: transparent; border: 1px solid #392f55; color: #392f55; } &.active { h6 { color: #392f55; } span { color: #ffffff; background-color: #392f55; } } .kopa-panel { background-color: transparent; color: #93909e; padding-left: 50px; } } .kopa-toggle-3.toggle-view li { h6 { padding-right: 40px; } span { background-color: transparent; right: 10px; } &.active h6 { color: #ffffff; background-color: #392f55; } .kopa-panel { background-color: #392f55; color: #93909e; padding-right: 40px; } } /*----- Progress bar -----*/ .progress { box-shadow: 0 0 0 transparent; -ms-box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; background-color: #d3d3d3; margin-bottom: 30px; height: 44px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; position: relative; overflow: visible; span { position: absolute; left: 20px; top: 0; line-height: 44px; font-family: "Source Sans Pro", sans-serif; font-size: 20px; font-weight: 300; text-transform: uppercase; } strong { font-size: 40px; line-height: 44px; position: absolute; right: -25%; top: 0; font-family: "Source Sans Pro", sans-serif; } .progress-bar-danger { background-color: #38b883; } } /*----- Divider -----*/ .kopa-divider-shadow { width: 100%; height: 7px; margin: 20px 0; position: relative; &:before { background: url(images/background/divider-shadow.png) repeat-x right top; width: 50%; left: auto; right: 0; position: absolute; content: ""; top: 0; height: 7px; } &:after { background: url(images/background/divider-shadow.png) repeat-x left top; height: 7px; left: 0; width: 50%; position: absolute; content: ""; top: 0; } } .kopa-divider-line { position: relative; height: 1px; width: 100%; background-color: #392f55; margin: 20px 0; } .kopa-divider-dotted { position: relative; height: 1px; width: 100%; border-top: 1px dotted #392f55; margin: 20px 0; } .kopa-divider-dashed { position: relative; height: 1px; width: 100%; border-top: 1px dashed #392f55; margin: 20px 0; } .kopa-divider-fat-line { position: relative; height: 2px; width: 100%; background-color: #392f55; margin: 20px 0; } /*----- Buttons -----*/ .kopa-button-border { display: inline-block; line-height: 20px; padding: 9px 20px; color: #ffffff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; border: 1px solid #392f55; color: #392f55; &:hover { border-color: #38b883; color: #38b883; } &.medium-btn { padding: 15px 30px; } &.large-btn { padding: 18px 40px; font-size: 16px; } &.xlarge-btn { padding: 21px 50px; font-size: 18px; } } .kopa-button { display: inline-block; line-height: 20px; padding: 10px 20px; color: #ffffff !important; font-weight: 300; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; position: relative; background-color: #392f55; &:before { height: 5px; content: ""; left: 0; width: 100%; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -ms-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; position: absolute; bottom: 0; background-color: #6a609f; } &:after { background-color: #392f55; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -ms-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; bottom: 2px; content: ""; height: 5px; left: 0; position: absolute; width: 100%; } &:hover { background-color: #f42495; &:before { background-color: #fc6bb9; } &:after { background-color: #f42495; } } &.medium-btn { padding: 16px 30px; } &.large-btn { padding: 19px 40px; font-size: 16px; &:after { bottom: 3px; } } &.xlarge-btn { padding: 22px 50px; font-size: 18px; &:after { bottom: 3px; } } &.green-btn { background-color: #38b883; &:before { background-color: #6ee0b1; } &:after { background-color: #38b883; } &:hover { background-color: #392f55; &:before { background-color: #6a609f; } &:after { background-color: #392f55; } } } &.pink-btn { background-color: #f42495; &:before { background-color: #fc6bb9; } &:after { background-color: #f42495; } &:hover { background-color: #392f55; &:before { background-color: #6a609f; } &:after { background-color: #392f55; } } } } .kopa-button-icon { display: inline-block; background-color: #38b883; color: #4f4954; text-transform: uppercase; i { display: inline-block; padding: 0 10px; line-height: 35px; margin: 0 !important; } span { line-height: 35px; display: inline-block; padding: 0 10px; border-left: 1px solid #db2942; } &:hover { background-color: #ffffff; } } /*----- Blockquotes -----*/ .kopa-blockquote-1 { background-color: #ffffff; font-size: 16px; border-left: 4px solid #392f55; padding: 20px 30px; color: #392f55; p { line-height: 26px; font-size: 18px; margin-bottom: 25px; font-weight: 300; i { font-size: 30px; color: #afa3cd; margin: 0 12px 0 0 !important; } } span { font-style: italic; color: #93909e; display: inline-block; } } .kopa-blockquote-2 { background-color: #eae9f1; font-size: 14px; font-weight: 300; border: 1px solid #cfc8e0; padding: 20px 30px 30px; position: relative; &:before { content: ''; position: absolute; border-top: 0px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #cfc8e0; top: -1px; right: -30px; right: -1px; bottom: -1px; top: auto; } &:after { content: ''; position: absolute; border-top: 30px solid transparent; border-bottom: 0px solid transparent; border-right: 30px solid #eae9f1; top: -1px; left: -30px; right: -1px; bottom: -1px; top: auto; left: auto; } p { font-size: 14px; line-height: 20px; margin-bottom: 20px; position: relative; padding-left: 45px; i { position: absolute; left: 0; top: 5px; color: #afa3cd; font-size: 28px; } } span { font-style: italic; float: right; margin-right: 15px; } } .kopa-blockquote-3 { background-color: #eae9f1; font-size: 14px; font-weight: 300; border: 1px solid #cfc8e0; border-top: 4px solid #392f55; padding: 20px 30px 30px; position: relative; &:before { content: ''; position: absolute; border-top: 0px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #cfc8e0; top: -1px; right: -30px; right: -1px; bottom: -1px; top: auto; } &:after { content: ''; position: absolute; border-top: 30px solid transparent; border-bottom: 0px solid transparent; border-right: 30px solid #eae9f1; top: -1px; left: -30px; right: -1px; bottom: -1px; top: auto; left: auto; } p { font-size: 14px; line-height: 20px; margin-bottom: 20px; position: relative; padding-left: 45px; i { position: absolute; left: 0; top: 5px; color: #afa3cd; font-size: 28px; } } span { font-style: italic; float: left; } } /*----- Pricing Tables -----*/ .table-5col .pricing-column { float: left; width: 20%; .pricing-header { background-color: #392f55; color: #ffffff; padding: 15px 0; } .features { padding: 0; margin: 0; border-left: 1px solid #eee; background-color: #ffffff; li { float: none; margin: 0; list-style: none; border-bottom: 1px solid #eee; p { margin: 0; padding: 15px 0; i { color: #392f55; &.fa-close { color: #fd5ab2; } } } &:nth-child(even) { background-color: #f7f7f7; } } } &:first-child { .features, .pricing-footer { border-left: none; } } .pricing-footer { background-color: #ffffff; padding: 15px 0; min-height: 70px; border-left: 1px solid #eee; .kopa-button { margin: 0; text-transform: uppercase; } } } .table-4col { .pricing-column .pricing-column-inner { background-color: #ffffff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); font-weight: 700; font-size: 16px; .pricing-header { .pricing-title { font-weight: 300; font-size: 34px; line-height: 40px; padding: 20px 0; } .pricing-price { padding: 10px 0; color: #8394ae; span { color: #ffffff; } } } .features { margin: 0; padding: 35px 0; li { float: none; margin: 0; list-style: none; padding: 10px 15px; p { margin: 0; span { margin-right: 5px; color: #392f55; } } } } .pricing-footer { padding: 0 15px 15px; a { display: block; text-transform: uppercase; margin: 0; border-width: 2px; font-size: 16px; font-weight: 700; padding: 10px 30px; &:hover { border-color: #38b883; background-color: #38b883; color: #ffffff; } } } } &.table-4col-s1 .pricing-column .pricing-column-inner { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; .pricing-header { .pricing-title { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .pricing-price { background-color: #43385c; } } &:hover .pricing-header { .pricing-title { background-color: #392f55; color: #ffffff; } .pricing-price { background-color: #38b883; color: #ffffff; } } } &.table-4col-s2 .pricing-column .pricing-column-inner { box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -ms-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; .pricing-header { position: relative; .pricing-title { background-color: #ded6f2; color: #392f55; padding-bottom: 54px; text-transform: uppercase; } .pricing-price { color: #ffffff; font-size: 21px; width: 68px; height: 68px; line-height: 68px; padding: 0; position: absolute; bottom: -34px; left: 50%; margin: 0 0 0 -34px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background-color: #8374ac; } } .pricing-footer a { border-color: #b2afbb; color: #b2afbb; &:hover { border-color: #392f55; background-color: #392f55; color: #ffffff; } } &:hover .pricing-header { .pricing-title { background-color: #392f55; color: #ffffff; } .pricing-price { background-color: #78d5af; } } } &.table-4col-s3 .pricing-column .pricing-column-inner { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); padding: 2px; .pricing-header { background-color: #ffffff; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; .pricing-title { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; font-weight: 400; font-size: 18px; text-transform: uppercase; color: #392f55; padding: 30px 0 10px; } .pricing-price { font-size: 21px; color: #392f55; padding-bottom: 25px; span { font-size: 40px; color: #392f55; sup { font-size: 21px; top: -1em; } } } } .features { background-color: #ffffff; font-weight: 400; color: #93909e; padding-top: 15px; li p span { color: #93909e; } } .pricing-footer { background-color: #ffffff; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; a { border: none; color: #ffffff; background-color: #8374ac; &:hover { background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); } } } &:hover .pricing-header { background-color: #38b883; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; .pricing-title { color: #ffffff; background-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .pricing-price { color: #ffffff; background-color: transparent; span { color: #ffffff; } } } } } .table-3col .pricing-column .pricing-column-inner { background-color: #ffffff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; font-size: 16px; .pricing-header { .pricing-title { text-transform: uppercase; font-size: 18px; line-height: 24px; padding: 15px 0; } .pricing-price { background-color: #3f3454; padding: 20px 0; .pricing-price-inner { width: 110px; height: 110px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 2px solid #dedede; line-height: 106px; font-weight: 400; color: #ffffff; display: inline-block; background: -webkit-radial-gradient(#bebebe 1%, #7b47b6 99%); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(#bebebe 1%, #7b47b6 99%); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(#bebebe 1%, #7b47b6 99%); /* For Firefox 3.6 to 15 */ background: radial-gradient(#bebebe 1%, #7b47b6 99%); /* Standard syntax */ span { font-size: 24px; sup { font-size: 14px; top: -0.75em; } } } } } .features { margin: 0; padding: 30px 0; li { float: none; margin: 0; list-style: none; padding: 10px 15px; p { margin: 0; font-size: 16px; } } } .pricing-footer { padding: 0 15px 15px; background-color: #ffffff; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; a { margin: 0; display: block; padding: 10px 30px; border: none; color: #ffffff; background-color: #8374ac; &:hover { background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); } } } &:hover .pricing-header .pricing-price { background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); } } /*----- Message Boxes -----*/ .alert { font-weight: 300; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; color: #ffffff; padding: 30px 80px 30px 95px; position: relative; i { width: 46px; height: 46px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 1px solid #ffffff; position: absolute; top: 50%; margin: -23px 0 0; left: 30px; line-height: 44px; text-align: center; } } .alert-dismissable .close { right: 30px; width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background-color: #ffffff; font-size: 18px; line-height: 20px; text-shadow: none; opacity: 1; filter: Alpha(Opacity = 100); position: absolute; top: 50%; margin-top: -10px; } .alert-dark-blue { background-color: #392f55; &.alert-dismissable .close { color: #392f55; } } .alert-yellow { background-color: #fc880f; &.alert-dismissable .close { color: #fc880f; } } .alert-green { background-color: #8fca1d; &.alert-dismissable .close { color: #8fca1d; } } .alert-pink { background-color: #f42494; &.alert-dismissable .close { color: #f42494; } } .alert-sky { background-color: #24b9e2; &.alert-dismissable .close { color: #24b9e2; } } /*----- Sticky Notes -----*/ .sticky-note { padding: 20px 30px 15px; position: relative; font-weight: 300; &:before { content: ''; position: absolute; border-left: 30px solid transparent; border-right: 0 solid transparent; border-bottom: 30px solid #eae9f1; top: 0; left: 50%; margin-left: -30px; left: auto; right: 0; bottom: -1px; top: auto; } &.sticky-sky { background-color: #edf6ff; color: #93909e; &:after { content: ''; position: absolute; border-left: 0 solid transparent; border-right: 30px solid transparent; border-top: 30px solid #9abbdc; bottom: -1px; left: 50%; margin-left: 0; left: auto; right: -1px; margin-left: 0; } } &.sticky-orange { background-color: #fcf0c5; color: #392f55; &:after { content: ''; position: absolute; border-left: 0 solid transparent; border-right: 30px solid transparent; border-top: 30px solid #dec87c; bottom: -1px; left: 50%; margin-left: 0; left: auto; right: -1px; margin-left: 0; } } &.sticky-pink { background-color: #fdd4d4; color: #e39f9f; &:after { content: ''; position: absolute; border-left: 0 solid transparent; border-right: 30px solid transparent; border-top: 30px solid #e39f9f; bottom: -1px; left: 50%; margin-left: 0; left: auto; right: -1px; margin-left: 0; } } &.sticky-green { background-color: #eaffc3; color: #b5d37f; &:after { content: ''; position: absolute; border-left: 0 solid transparent; border-right: 30px solid transparent; border-top: 30px solid #b5d37f; bottom: -1px; left: 50%; margin-left: 0; left: auto; right: -1px; margin-left: 0; } } } /*----- Progress Bars -----*/ .pro-bar-container { height: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; border: none; overflow: visible !important; margin-bottom: 50px; &.color-midnight-blue { background-color: #211c2d; } .pro-bar { height: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; position: relative; overflow: visible !important; > div { line-height: 35px; color: #ffffff; padding: 0 20px; font-weight: 300; } p { margin: 0; display: inline-block; line-height: 22px; padding: 0 5px; background-color: #211c2d; font-weight: 300; color: #ffffff; position: absolute; right: -18px; top: -37px; font-size: 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; opacity: 0; filter: Alpha(Opacity = 0); &:before { content: ''; position: absolute; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #211c2d; bottom: -6px; left: 50%; margin-left: -3px; } } &.animated p { opacity: 1; filter: Alpha(Opacity = 100); } &.color-kopa-gradient { background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); } &.color-green { background-color: #38b883; } } } /*----- Social Links -----*/ .social-links { padding: 0; margin: -10px 0 0 -15px; li { float: left; margin: 10px 0 0 15px; list-style: none; position: relative; padding: 0; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; a { border: 1px solid #38b883; display: block; line-height: 22px; font-size: 13px; position: relative; text-align: center; z-index: 0; width: 24px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: #ffffff; &:hover { color: #38b883; border: 1px solid #ffffff; } } } } /*--- jplayer ---*/ .jp-gui { .col-left { float: left; padding-right: 75px; position: relative; span { color: #1f1b2a; font-size: 38px; position: absolute; top: 26px; right: 15px; } } .col-right { overflow: hidden; padding-right: 140px; } } .jp-playlist ul { display: none !important; } .jp-controls button { margin-left: 10px; &:first-child { margin-left: 0; } } .jp-stop, .jp-previous, .jp-next, .jp-play { display: inline-block; text-align: center; width: 28px; height: 28px; line-height: 22px; font-size: 12px; background: none; border: 3px solid #38b883; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: #fff; margin-top: 6px; } .jp-stop:hover, .jp-previous:hover, .jp-next:hover, .jp-play:hover { border-color: #f42495; } .jp-stop:before { content: '\f04d'; } .jp-previous:before { content: '\f04a'; margin-left: -2px; } .jp-next:before { content: '\f04e'; padding-left: 1px; } .jp-play { display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 34px; font-size: 14px; background: none; margin-top: 0; &:before { content: '\f04b'; padding-left: 4px; } } .jp-state-playing .jp-play:before { content: '\f04c'; padding-left: 0; } .jp-seek-bar { background: #1f1b2a; } .jp-play-bar { background: #38b883; border-radius: 10px; } .jp-volume-controls span.fa { font-size: 20px; color: #fff; float: left; } .jp-volume-bar { background: #6a609f; } .jp-volume-bar-value { background: #9c97aa; } .text-uppercase { text-transform: uppercase; } .text-normal { font-weight: 400; } /**1.2 Basic structure**/ body { position: relative; font-family: "Lato", sans-serif; color: #c4c4c4; line-height: 20px; font-size: 14px; overflow-x: hidden; } .mb-0 { margin-bottom: 0px !important; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mt-15 { margin-top: 15px; } .mt-5 { margin-top: 5px; } .outer { width: 1170px; margin: 0 auto; position: relative; } .wrapper { width: 1050px; margin: 0 auto; position: relative; } #main-content { position: relative; background-color: #eae9f1; z-index: 2; overflow-x: hidden; } .kopa-full-width { .sidebar { display: none; } .main-col { width: 100%; } } /*--- span-bg ---*/ .span-bg { &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("images/background/bg/black/7.png"); background: rgba(33, 31, 35, 0.8); } .c-tg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } /*--- kopa-area ---*/ .kopa-area { padding-top: 80px; position: relative; > { .wrapper > .row > .col-md-12 > .widget, .kopa-area-nt > .wrapper > .row > .col-md-12 > .widget { text-align: center; } } } .kopa-area-1 { background-size: cover; } .kopa-area-2 { overflow: hidden; .span-bg { &:before { background: rgba(31, 27, 42, 0.9); } &:after { content: ''; position: absolute; top: 300px; left: -50%; width: 200%; height: 1px; background: #fff; -webkit-transform: rotate(-22deg); -moz-transform: rotate(-22deg); -ms-transform: rotate(-22deg); transform: rotate(-22deg); } } } .kopa-area-3 .span-bg:before { background: url("images/background/bg/white/9.png"); background: rgba(255, 255, 255, 0.9); } .kopa-area-4 .span-bg:before { background: rgba(33, 31, 35, 0.7); } .kopa-area-5 .span-bg:before { background: rgba(27, 24, 34, 0.8); } .kopa-area-6 { background-size: cover; padding-bottom: 425px; } .kopa-area-7 { padding-bottom: 100px; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(27, 24, 34, 0.7); } .span-bg { &:before { content: ''; position: absolute; top: auto; bottom: -160px; left: -50%; width: 100%; height: 250px; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); background: #392f55; } &:after { content: ''; position: absolute; top: auto; bottom: -160px; left: -50%; width: 100%; height: 250px; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); background: #392f55; left: auto; right: -50%; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } } } .kopa-area-9 .span-bg:before { background: url("images/background/2.png"); background-size: cover; } .kopa-area-10 { background: #231d30; } .kopa-area-11 .span-bg:before { background: url("images/background/4.png"); background-size: cover; } .kopa-area-12 { background: #191422; } .kopa-area-13 { padding: 140px 0 80px !important; .span-bg:before { background: url("images/background/5.png"); background-size: cover; opacity: 0.6; filter: Alpha(Opacity = 60); } } .kopa-area-14 .span-bg:before { background-color: rgba(53, 44, 79, 0.4); } .kopa-area-dark { > .wrapper > p { color: #ffffff; } .widget .widget-title { color: #fff; } a { color: #fff; &:hover { color: #38b883; } } span, input, .kopa-countdown-2-widget p { color: #fff; } .kopa-countdown-2 li h3 { color: #fff; border-color: #fff; } .article-list-2 a { color: #fff; &:hover { color: #f42495; } } } .kopa-rt { position: relative; } .kopa-ab { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; .widget:last-child { margin-bottom: 0; } } .kopa-area-nt { margin-top: -170px; } .kopa-area-fit .widget:last-child { margin-bottom: 0; } .article-list-2 ul li .entry-item { &.video-post .entry-thumb .thumb-hover .thumb-icon i:before { content: "\f04b" !important; } &.audio-post .entry-thumb .thumb-hover .thumb-icon i:before { content: "\f025" !important; } &.gallery-post .entry-thumb .thumb-hover .thumb-icon i:before { content: "\f03e" !important; } &.standard-post .entry-thumb .thumb-hover .thumb-icon i:before { content: "\f040" !important; } } /*--- kopa-parallax ---*/ .kopa-parallax { padding-top: 80px; position: relative; background-position: 50% 0; /* background-attachment: fixed !important;*/ background-repeat: no-repeat; background-size: cover !important; } .widget > header { margin-bottom: 45px; .widget-title { margin-bottom: 15px; } } /*--- owl-button ---*/ .owl-theme .owl-controls { margin: 0; .owl-buttons div { color: #392f55; background: none; padding: 0; margin: 0; border-radius: 0; text-align: center; width: 16px; height: 26px; line-height: 26px; font-size: 30px; position: absolute; top: 50%; margin-top: -13px; margin-left: -8px; margin-left: 0; margin-top: -35px; opacity: 1; filter: Alpha(Opacity = 100); &:hover { color: #38b883; } &.owl-prev { left: -46px; padding-right: 2px; &:before { content: "\f104"; } } &.owl-next { right: -46px; padding-left: 2px; &:before { content: "\f105"; } } } .owl-pagination { margin-top: 40px; width: 100%; .owl-page { span { width: 10px; height: 10px; margin: 5px 5px 0; opacity: 1; filter: Alpha(Opacity = 100); background: #392f55; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border: none; border-radius: 0; } &.active span, &:hover span { background: #38b883; } } } } /** * 2.0 Header * ----------------------------------------------------------------------------- */ #kopa-page-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; background-color: rgba(33, 28, 45, 0.8); color: #ffffff; #kopa-header-top { border-bottom: 1px solid #4f4954; overflow: hidden; #logo-image { width: 285px; text-align: center; height: 101px; padding: 35px 0; a { display: inline-block; } } #kopa-header-top-inner { border-left: 1px solid #4f4954; height: 101px; width: 885px; > .clearfix { height: 50px; .line-divider { border-bottom: 1px solid #4f4954; } .left-col { width: 600px; height: 50px; padding: 0 20px; .social-links { margin-top: 3px; } } .right-col { border-left: 1px solid #4f4954; width: 284px; height: 50px; padding: 0 20px; position: relative; .signin-button, .reg-button { display: inline-block; background-color: #38b883; color: #ffffff; text-transform: uppercase; font-size: 13px; font-weight: 300; padding: 0 8px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; margin-top: 15px; } .signin-button:hover, .reg-button:hover { background-color: #f42495; } .shopping-cart-button { color: #ffffff; margin-top: 15px; display: inline-block; span { text-transform: uppercase; font-size: 13px; font-weight: 300; } i { width: 20px; line-height: 18px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 1px solid #38b883; text-align: center; font-size: 10px; margin: 0 10px 0 0; } &:hover { color: #38b883; } } &:before { content: ""; position: absolute; left: 100%; top: -1px; border-top: 1px solid #4f4954; width: 500%; height: 100%; } } } } } } .kp-headline-wrapper { max-width: 419px; padding: 0 20px 0 0; overflow: hidden; height: 50px; position: relative; padding-right: 20px; .kp-headline { max-height: 50px; margin: 0; overflow: hidden; dl { display: block; margin: 0; dt { display: none; } dd { display: block; float: left; margin: 0 40px; a { line-height: 50px; color: #ffffff; font-weight: 300; &:hover { color: #38b883; } } } } } } /** 2.1 Search **/ .search-box .search-form { width: 100%; position: relative; .search-text { border: none; background: none; color: #ffffff; text-align: right; line-height: 50px; width: 100%; padding: 0 0 0 20px; outline: none; } .search-submit { border: none; background: none; color: #ffffff; position: absolute; left: 0; top: 15px; font-size: 16px; padding: 0; &:hover { color: #38b883; } } } /** 2.2 Navigation **/ #main-nav { position: relative; z-index: 20; text-align: center; } #main-menu { margin: 0; padding: 0; position: relative; z-index: 1; display: inline-block; > li { position: relative; z-index: 1; font-size: 18px; padding: 35px 0; float: left; margin: 0 0 0 30px; list-style: none; &.mega-menu { position: static; } &:first-child { margin: 0; } > a { padding: 0; text-transform: uppercase; display: block; position: relative; font-family: "Source Sans Pro", sans-serif; color: #ffffff; &:before { content: ""; width: 18px; height: 2px; background-color: #38b883; position: absolute; bottom: -10px; left: 50%; margin-left: -9px; opacity: 0; filter: Alpha(Opacity = 0); } } &:hover > a, &.current-menu-item > a { color: #38b883; } &:hover > a:before, &.current-menu-item > a:before { opacity: 1; filter: Alpha(Opacity = 100); } > ul { width: 250px; display: none; position: absolute; left: 0; top: 95px; margin: 0; padding: 0; z-index: 1; background-color: #191523; border-top: 2px solid #38b883; text-align: left; > li { list-style: none; padding: 10px 15px; position: relative; z-index: 1; border-top: 1px solid #4b4756; margin: 0; &:first-child { border-top: none; } > a { display: block; font-weight: 300; color: #ffffff; position: relative; z-index: 1; font-size: 14px; } &:hover, &.current-menu-item { background-color: #ffffff; } &:hover > a, &.current-menu-item > a { color: #403361; } ul { left: 251px; top: -1px; width: 250px; display: none; position: absolute; margin: 0; padding: 0px; z-index: 1; background-color: #191523; border-top: 2px solid #38b883; text-align: left; li { list-style: none; padding: 10px 15px; position: relative; z-index: 1; border-top: 1px solid #4b4756; margin: 0; &:first-child { border-top: none; } a { display: block; font-weight: 300; color: #ffffff !important; position: relative; z-index: 1; font-size: 14px; } &:hover, &.current-menu-item { background-color: #ffffff; } &:hover a, &.current-menu-item a { color: #403361 !important; } } } } } } } .sf-with-ul:after { display: none; } #main-menu .sf-mega { position: absolute; left: 0; top: 45px; } .sf-mega { background-color: #313131; border-bottom: 2px solid #000; display: none; position: relative; z-index: 9999; width: 100%; padding: 25px 20px 15px; .row { margin-left: -10px; margin-right: -10px; > div { padding-left: 10px; padding-right: 10px; .entry-item { position: relative; .entry-icon { font-size: 14px; } .entry-thumb { margin-bottom: 20px; img { width: 100%; } } .entry-content { .entry-date { font-size: 14px; color: #7a7a7a; display: inline-block; line-height: 1; font-weight: 400; margin-bottom: 10px; i { display: block !important; font-size: 12px !important; margin: 0 7px 0 0 !important; color: #38b883; } } .entry-title { font-size: 18px; line-height: 22px; margin-bottom: 0; a { color: #4f4954; &:hover { color: #38b883; } } } } } } } } /*--- Mobile Menu ---*/ #main-nav > i { font-size: 30px; cursor: pointer; display: none; color: #ffffff; margin: 2px 10px; } #kopa-page-header.style2 #main-nav #mobile-menu { left: auto; right: 10px; } .mobile-menu-wrapper { display: none; z-index: 99999; position: relative; text-align: left; } #mobile-menu { position: absolute; top: 0px; left: 0; padding: 0; z-index: 99999; width: 250px; display: none; margin: 0; background-color: #191523; > { ul { z-index: 99999; position: relative; } li { margin: 0; list-style: none; padding: 0; border-top: 1px solid #4b4756; z-index: 99999; position: relative; &:first-child { border-top: none; } &.current-menu-item > a { background-color: #ffffff; color: #392f55; } &:hover > a { color: #392f55; background-color: #ffffff; } > { a { padding: 8px 15px; display: block; position: relative; z-index: 99999; font-weight: 300; color: #ffffff; font-size: 14px; } ul { margin-left: 0; padding-left: 20px; padding-right: 20px; > li { list-style: none; border-top: 1px solid #4b4756; margin-bottom: 0; &.current-menu-item > a { color: #38b883; } &:first-child { border-top: none; } > { ul { padding-left: 20px; } a { padding: 7px 0; color: #ffffff; font-weight: 300; font-size: 14px; display: block; position: relative; &:hover { color: #38b883; } } ul > li { list-style: none; border-top: 1px solid #4b4756; margin-bottom: 0; &.current-menu-item > a { color: #38b883; } > a { text-transform: none; color: #ffffff; display: block; padding: 7px 0; &:hover { color: #38b883; } } } } } } a .caret { position: absolute; right: 15px; top: 18px; } ul > li > a .caret { top: 15px; right: 15px; position: absolute; } } } } } #footer-nav #footer-menu { padding: 0; margin: 0; li { float: left; margin: 0 0 0 20px; list-style: none; a { text-transform: uppercase; color: #ffffff; font-weight: 300; font-family: "Source Sans Pro", sans-serif; font-size: 13px; &:hover { color: #38b883; } } } } .widget { margin-bottom: 80px; .widget-title { text-transform: uppercase; font-size: 32px; font-weight: 300; line-height: 1; margin-bottom: 30px; &.widget-title-s2 { display: inline-block; background-color: #ffffff; color: #4f4954; text-transform: uppercase; font-size: 25px; height: 38px; padding: 0 20px; i { font-size: 22px; margin: 8px 5px 0 0 !important; } span { border-left: 1px solid #4f4954; display: block; padding-left: 5px; line-height: 18px; margin-top: 10px; } } &.widget-title-s3 { text-transform: uppercase; overflow: hidden; padding-left: 30px; i { font-size: 18px; margin: 3px 5px 0 0 !important; padding-left: 10px; position: relative; line-height: 22px; &:after { content: ""; position: absolute; right: 100%; height: 2px; width: 500%; background-color: #211c2d; top: 50%; margin-top: -1px; } } span { border-left: 1px solid #ffffff; padding-left: 5px; padding-right: 10px; position: relative; &:after { content: ""; position: absolute; left: 100%; height: 2px; width: 500%; background-color: #211c2d; top: 50%; } } } &.widget-title-s4 { color: #4f4954; font-size: 18px; line-height: 22px; padding-left: 10px; position: relative; margin-bottom: 15px; &:before { content: ""; width: 3px; height: 15px; position: absolute; left: 0; top: 4px; background-color: #38b883; } } &.widget-title-s5 { text-align: center; font-size: 60px; line-height: 66px; text-transform: none; color: #392f55; font-weight: 400; } } .entry-content .entry-title { font-size: 18px; line-height: 22px; margin-bottom: 5px; &.entry-title-s1 { margin: 0; text-transform: uppercase; font-size: 15px; line-height: 18px; a { color: #4f4954; background-color: rgba(0, 0, 0, 0.75); box-decoration-break: clone; box-shadow: -10px 0 0 rgba(0, 0, 0, 0.75), 10px 0 0 rgba(0, 0, 0, 0.75); &:hover { background-color: rgba(213, 3, 33, 0.75); box-shadow: -10px 0 0 rgba(213, 3, 33, 0.75), 10px 0 0 rgba(213, 3, 33, 0.75); } } } } .entry-thumb img { width: 100%; } &.widget_text { .entry-thumb img, img { width: auto; max-width: 100%; } } } .entry-author { color: #38b883; display: inline-block; span { margin-right: 5px; } a { color: #38b883; &:hover { color: #392f55; } } } .entry-icon { position: absolute; color: #4f4954; top: 0; left: 0; line-height: 28px; width: 30px; text-align: center; height: 30px; background-color: #38b883; } .entry-item.standard-post .entry-icon:before, .entry-box.standard-post .entry-icon:before { content: "\f1c2"; } .entry-item.audio-post .entry-icon:before, .entry-box.audio-post .entry-icon:before { content: "\f025"; } .entry-item.gallery-post .entry-icon:before, .entry-box.gallery-post .entry-icon:before { content: "\f03e"; } .entry-item.video-post .entry-icon:before, .entry-box.video-post .entry-icon:before { content: "\f03d"; } .entry-categories, .entry-view, .entry-comments { display: inline-block; color: #38b883; } .entry-date { display: inline-block; line-height: 1; i { margin: 0 5px 0 0 !important; color: #38b883; } } .pagination { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; margin: 40px 0 0; display: block; text-align: center; .page-numbers { padding: 0; margin: 0; display: inline-block; li { float: left; margin: 0; list-style: none; &:first-child { margin: 0; } a { display: block; padding: 0 10px; line-height: 36px; font-size: 21px; position: relative; color: #392f55; } span { display: block; padding: 0 10px; line-height: 36px; font-size: 21px; position: relative; color: #392f55; &.current { color: #998bc0; } } a { &:hover { color: #998bc0; } &.prev, &.next { margin-right: 30px; font-size: 16px; width: 40px; height: 40px; line-height: 36px; border: 2px solid #392f55; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } &.prev i, &.next i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } &.prev:hover { background-color: #392f55; color: #ffffff; } &.next { &:hover { background-color: #392f55; color: #ffffff; } margin: 0 0 0 30px; } } } } } .kopa-rating { margin: 0; padding: 0; display: inline-block; li { float: left; margin: 0; list-style: none; color: #38b883; } } .loading { background: url(images/icons/loading.gif) no-repeat center; } .breadcrumb { background: none; padding: 0 0 2px; border-bottom: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; font-size: 15px; color: #ffffff; span { display: inline-block; } a { color: #ffffff; &:hover { color: #38b883; } } } /** * 3. Content * ----------------------------------------------------------------------------- */ .home-slider-box { .kopa-home-slider-carousel { overflow: hidden; .carousel-item { display: block; float: left; height: auto !important; position: relative; img { width: 100%; height: auto !important; } .mask { width: 100%; height: 100%; background: url(images/background/pattern.png) 0 0 no-repeat; background-size: cover; position: absolute; top: 0; left: 0; } .slide-caption { position: absolute; top: 45%; left: 50%; margin: 0 0 0 -330px; text-align: center; width: 660px; .author-name { display: inline-block; font-size: 16px; line-height: 22px; color: #ffffff; text-transform: uppercase; margin-bottom: 5px; &:hover { color: #38b883; } } .entry-title { font-size: 72px; line-height: 78px; font-family: "Source Sans Pro", sans-serif; font-weight: 400; a { color: #ffffff; &:hover { color: #38b883; } } } } } } #prev, #next { display: block; width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -60px; background-color: #403361; text-align: center; line-height: 58px; font-size: 40px; color: #c4c4c4 !important; } #prev:hover, #next:hover { background-color: #38b883; color: #ffffff !important; } #prev img, #next img { border: 3px solid #ffffff; opacity: 0; filter: Alpha(Opacity = 0); position: absolute; top: -17px; width: 94px; height: 94px; max-width: 94px; } #prev:hover img, #next:hover img { opacity: 1; filter: Alpha(Opacity = 100); } #prev { left: 0px; &:before { content: "\f104"; } } #next { right: 0px; &:before { content: "\f105"; } } #prev img { left: 100%; } #next img { right: 100%; } #pagenumber, #title, #pager { margin: 0; padding: 0; } #pagenumber { width: 200px; display: none; } #pager { text-align: center; width: 100%; position: absolute; left: 0; bottom: 135px; > span { display: block !important; > span { text-decoration: none; text-align: center; line-height: 20px; display: inline-block; width: 14px; height: 14px; margin: 0 5px; border: 2px solid #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background-color: transparent; position: relative; text-indent: -9999px; &:before { content: ""; height: 1px; width: 10px; background-color: #ffffff; position: absolute; top: 50%; left: -12px; } &:first-child:before { display: none; } span { text-transform: uppercase; font-size: 16px; color: #ffffff; line-height: 40px; padding: 0 15px; background-color: #38b883; display: none; position: absolute; top: -50px; right: -199px; text-indent: 0; min-width: 155px; } &:hover span { display: block; } &.selected { background-color: #38b883; color: #fff; } } } a { position: relative; display: block; width: 100%; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } > span > span { img { border: 3px solid #ffffff; display: none; position: absolute; bottom: 20px; left: -40px; max-width: 1000px; } &:hover img { display: block; } } } } /** 3.2 Sub page **/ .page-header { margin: 0 0 80px; border-bottom: none; position: relative; padding-bottom: 0; &.have-disc-icon { margin-bottom: 160px; } .page-header-inner { padding: 350px 0 150px; position: relative; z-index: 2; .page-title { text-transform: uppercase; margin-bottom: 15px; font-weight: 400; color: #ffffff; em { color: #fff; } } &.page-header-inner-1 { padding: 300px 0 120px; } } .mask { background: url(images/background/pattern-2.png) 0 0 no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .page-header-bg { position: absolute; width: 100%; height: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; background-size: cover !important; z-index: 0; } .disc-bg { background: url(images/background/disc-bg.png) no-repeat 0 0; width: 1124px; height: 1082px; position: absolute; left: 50%; bottom: 0; margin: 0 0 -541px -562px; z-index: 0; } .disc-icon { width: 206px; height: 206px; position: absolute; left: 50%; bottom: 0; margin: 0 0 -103px -103px; text-align: center; line-height: 206px; font-size: 36px; color: #6a609f; background: url(images/background/disc-icon.png) no-repeat 0 0; z-index: 3; } .typo-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; } } .kopa-gallery-page .page-header { margin-bottom: 175px; } .kopa-event-1-page .page-header, .kopa-event-3-page .page-header { margin-bottom: 0; } /*----- Single page -----*/ .kopa-single-page #main-content { background-color: #ffffff; } .entry-box { margin-bottom: 50px; padding-top: 70px; .entry-title { font-size: 50px; line-height: 56px; font-weight: 300; color: #3a2f57; text-align: center; margin-bottom: 50px; } .entry-thumb { position: relative; margin-bottom: 35px; img { width: 100%; } iframe { border: none; width: 100%; } .kopa-single-carousel .owl-controls .owl-buttons > div { width: 55px; height: 55px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; margin: -23px 0 0; padding: 0; background-color: rgba(255, 255, 255, 0.7); opacity: 1; filter: Alpha(Opacity = 100); color: #7a738a; line-height: 53px; font-size: 40px; &:hover { background-color: rgba(57, 47, 85, 0.7); color: #b8b4be; } &.owl-next { right: 30px; &:before { content: "\f105"; } } &.owl-prev { left: 30px; &:before { content: "\f104"; } } } } .entry-content-wrap { position: relative; min-height: 325px; margin-bottom: 40px; .left-col { width: 180px; position: absolute; top: 5px; left: 0; border: 1px solid #e9e8ea; padding: 85px 30px 0; background-color: #ffffff; .rating-score { border: 3px solid #e9e8ea; width: 82px; height: 82px; margin-left: 17px; margin-bottom: 75px; color: #231d30; font-size: 40px; text-align: center; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); .rating-score-inner { display: inline-block; margin: 10px 10px 0 0; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); p { line-height: 1; margin-bottom: 5px; } .pro-bar-container { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; margin-bottom: 0; height: 4px; .pro-bar { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; height: 4px; } } } } .about-author { text-align: center; .author-avatar { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-bottom: 15px; img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } } .author-content { h5 { text-transform: uppercase; font-size: 16px; line-height: 20px; color: #8e8e8e; font-family: "Lato", sans-serif; margin-bottom: 35px; a { color: #38b883; } } footer { background-color: #392f55; padding: 20px 0 15px; margin: 0 -30px; .social-links { display: inline-block; li a { width: 28px; height: 28px; line-height: 26px; border-color: #ffffff; &:hover { border-color: #38b883; } } } } } } } .entry-content { color: #8d889a; margin-bottom: 25px; margin-left: 210px; > p { margin-bottom: 20px; } .kopa-blockquote-1 { p { font-weight: 400; i { color: #392f55; } } &.pull-right { width: 50%; margin: 0 0 20px 30px; border-left: 4px solid #392f55; border-right: none; padding: 20px 30px; p { text-align: left; font-style: italic; font-size: 26px; line-height: 32px; i { float: none !important; margin: 0 0 5px !important; display: block; font-size: 34px; } } } } } } .page-links-wrapper .page-links { a { display: inline-block; color: #b0abbb; border: 1px solid #b0abbb; line-height: 33px; padding: 0 12px; margin: 0 4px; &:hover { border-color: #38b883; color: #38b883; } } > span { display: inline-block; color: #b0abbb; border: 1px solid #b0abbb; line-height: 33px; padding: 0 12px; margin: 0 4px; border-color: #38b883; color: #38b883; } } .share-box { margin-bottom: 60px; h2 { font-size: 28px; line-height: 34px; font-weight: 300; margin-bottom: 20px; } ul { margin: 0; padding: 0; display: inline-block; li { float: left; margin: 0 15px; list-style: none; line-height: 40px; a { font-size: 16px; display: block; i { display: inline-block; width: 40px; height: 40px; line-height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: #ffffff; background-color: #797090; margin-right: 20px; } span { display: inline-block; font-size: 16px; color: #797090; } &:hover { i { background-color: #38b883; } span { color: #38b883; } } } } } } .tag-box { color: #392f55; margin-bottom: 60px; a, span { display: inline-block; } a { color: #b0abbb; border: 1px solid #b0abbb; line-height: 30px; padding: 0 15px; margin-left: 5px; &:hover { color: #38b883; border-color: #38b883; } } span { margin-right: 10px; } } .entry-box-footer { border-top: 1px solid #ebeaee; border-bottom: 1px solid #ebeaee; > div { width: 50%; position: relative; padding: 25px 45px; .prev-icon { width: 25px; height: 25px; line-height: 25px; color: #ffffff; background-color: #38b883; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; text-align: center; position: absolute; top: 30px; left: 0; font-size: 12px; } .next-icon { width: 25px; height: 25px; line-height: 25px; color: #ffffff; background-color: #38b883; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; text-align: center; position: absolute; top: 30px; left: 0; font-size: 12px; left: auto; right: 0; } .prev-post, .next-post { text-transform: uppercase; color: #38b883; display: inline-block; margin-bottom: 5px; } h4 { font-size: 14px; line-height: 20px; font-family: "Lato", sans-serif; margin-bottom: 0; a { color: #392f55; &:hover { color: #38b883; } } } &.prev-article { border-right: 1px solid #ebeaee; } &.next-article { text-align: right; } } } } .about-author-s2 { padding: 30px; position: relative; margin-bottom: 50px; overflow: hidden; .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); opacity: 0.7; filter: Alpha(Opacity = 70); } .author-bg { background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .author-avatar { position: relative; z-index: 2; width: 195px; border: 3px solid #ffffff; margin-right: 30px; } .author-content { position: relative; z-index: 2; color: #ffffff; padding-top: 20px; overflow: hidden; h5 { text-transform: uppercase; color: #ffffff; font-size: 28px; line-height: 32px; font-weight: 300; font-family: "Lato", sans-serif; margin-bottom: 20px; a { color: #ffffff; &:hover { color: #38b883; } } } p { font-weight: 300; margin-bottom: 15px; } footer .social-links li a { border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; width: auto; } } } #related-post { margin-bottom: 50px; h3 { font-weight: 300; text-transform: uppercase; font-size: 28px; line-height: 34px; margin: 0 0 25px; font-family: "Lato", sans-serif; } .row > div .entry-item { position: relative; border: 3px solid #392f55; padding: 25px 30px 30px; .entry-thumb { position: relative; img { width: 100%; } .mask { background-color: rgba(57, 47, 85, 0.4); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: Alpha(Opacity = 0); a { position: absolute; top: 50%; left: 50%; color: #ffffff; border: 2px solid #ffffff; width: 40px; height: 40px; text-align: center; line-height: 36px; margin: -20px 0 0 -20px; font-size: 12px; i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } &:hover { color: #38b883; } } } &:hover .mask { opacity: 1; filter: Alpha(Opacity = 100); a { transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } } } .entry-content { .entry-date { color: #38b883; display: inline-block; margin-bottom: 10px; } .entry-title { font-size: 21px; font-weight: 300; line-height: 27px; margin-bottom: 25px; a { color: #392f55; &:hover { color: #38b883; } } } } } } #comments { margin-bottom: 50px; h3 { font-weight: 300; text-transform: uppercase; font-size: 28px; line-height: 34px; margin: 0 0 25px; font-family: "Lato", sans-serif; } .comments-list { padding: 0; margin: 0 0 25px; > li { border: 1px solid #e9e8ea; float: none; margin: 30px 0 0; list-style: none; padding: 2px; } li { &:first-child { margin-top: 0; } .comment-wrap { position: relative; .comment-avatar { width: 85px; border: 3px solid #ffffff; position: absolute; left: -40px; top: 15px; } .comment-body { overflow: hidden; header { padding-left: 70px; padding-right: 15px; line-height: 40px; margin-bottom: 15px; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); h6 { font-size: 14px; line-height: 40px; font-family: "Lato", sans-serif; margin: 0; text-transform: uppercase; color: #ffffff; } .comment-reply-link { font-size: 12px; color: #ffffff; display: inline-block; i { margin: 0 5px 0 0; } &:hover { color: #38b883; } } } .comment-content { padding: 0 30px 0 70px; font-weight: 300; color: #8d889a; } footer { font-size: 12px; padding: 0 30px 8px 70px; color: #38b883; .comment-edit-link { color: #38b883; &:hover { color: #392f55; } } } } } } .children { padding: 0; margin: 10px 0 20px 55px; > li { border: 1px solid #e9e8ea; margin: 30px 0 0; float: none; margin: 30px 0 0; list-style: none; padding: 2px; &:first-child { margin: 0; } } } } .kopa-comment-pagination { margin: 0; border: none; text-align: right; a { color: #38b883; margin: 0 0 0 15px; } span { color: #38b883; margin: 0 0 0 15px; color: #392f55; } a:hover { color: #392f55; } } } #respond { margin-bottom: 40px; h3 { font-weight: 300; text-transform: uppercase; font-size: 28px; line-height: 34px; margin: 0 0 10px; font-family: "Lato", sans-serif; } .comments-form .c-note, .comment-form .c-note { display: block; color: #8d889a; margin-bottom: 30px; } .comments-form p, .comment-form p { margin-bottom: 20px; } .comments-form p.textarea-block, .comment-form p.textarea-block { margin-bottom: 30px; } .comments-form p .required, .comment-form p .required { display: none; } .comments-form p input[type='text'], .comment-form p input[type='text'] { height: 40px; line-height: 29px; padding: 5px 0; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #c3c0cc; width: 100%; background: none; color: #8d889a; } .comments-form p input[type='text']:focus, .comment-form p input[type='text']:focus { border-color: #38b883; } .comments-form p textarea, .comment-form p textarea { height: 230px; padding: 10px 0; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #c3c0cc; width: 100%; background: none; color: #8d889a; } .comments-form p textarea:focus, .comment-form p textarea:focus { border-color: #38b883; } .comments-form p input[type='submit'], .comment-form p input[type='submit'] { color: #ffffff; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #BB3D91), color-stop(1, #3E216A)); background-image: -o-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -moz-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -webkit-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: -ms-linear-gradient(right, #BB3D91 0%, #3E216A 100%); background-image: linear-gradient(to right, #BB3D91 0%, #3E216A 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorStr='#BB3D91', EndColorStr='#3E216A')"; /* IE8 */ text-transform: uppercase; padding: 0 20px; line-height: 45px; border: none; font-size: 13px; } .comments-form label.error, .comment-form label.error { color: #38b883; } } /*----- Elements page -----*/ .element-title { text-align: center; color: #93909e; margin-bottom: 45px; h4 { font-size: 28px; line-height: 32px; margin-bottom: 15px; color: #231e32; } } .elements-box { color: #93909e; overflow: hidden; padding-bottom: 30px; .kopa-button, .kopa-button-border, .kopa-button-icon { margin: 0 0 30px 0; } .widget { margin-bottom: 40px; } } mark { color: #ffffff; background-color: #392f55; } /* Single Event page ---------------------------------- */ .kopa-single-event .page-header { background: none; margin-bottom: 0; .mask { background: rgba(33, 27, 45, 0.4); } } .kopa-area-pattern { background: url(images/background/pattern-5.png) repeat 0 0; } .single-event-box { padding-bottom: 80px; .event-info { margin-bottom: 20px; p { margin-bottom: 0px; line-height: 24px; span { color: #ffffff; } } } h3 { color: #ffffff; font-family: "Lato", sans-serif; font-size: 28px; line-height: 34px; } .kopa-social-links { margin-bottom: 30px; } .event-content { iframe { border: none; width: 100%; } .comment-box-1 input#submit-comment-1 { background: #392f55; &:hover { background: #38b883; } } } } /* Single Artist page ---------------------------------- */ .single-artist-box { .artist-info { margin-bottom: 50px; h3 { margin-bottom: 15px; } p { margin-bottom: 0; line-height: 24px; color: #403361; span { color: #38b883; display: inline-block; width: 75px; } a { color: #403361; &:hover { color: #38b883; } } } } h3 { font-size: 28px; line-height: 34px; margin-bottom: 0; font-family: "Lato", sans-serif; } .kopa-social-links.style2 { margin-top: 15px; } .artist-content { color: #403361; h3 { font-size: 28px; line-height: 34px; margin-bottom: 20px; font-family: "Lato", sans-serif; } > p { margin-bottom: 15px; } .audio-wrap { margin-bottom: 40px; .jp-playlist { max-height: 320px; margin-top: 20px; ul { padding: 0; } } } .video-wrap iframe { width: 100%; border: none; } .comment-box-1 { margin-bottom: 40px; } } } .artist-avatar { position: absolute; width: 194px; height: 194px; top: 100%; left: 50%; margin: -97px 0 0 -97px; background-size: cover; border-radius: 50%; color: #3a2f57; z-index: 2; border: 3px solid #ffffff; img { width: 100%; border-radius: 50%; } } /* Contact page ---------------------------------- */ .kopa-contact-page { .page-header { background: none; min-height: 600px; .mask { background: rgba(33, 27, 45, 0.4); } } #main-content { background: url(images/background/pattern-5.png) repeat 0 0; } } .kp-map-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 600px; #kp-map { height: 100%; width: 100%; } } #kopa-contact-info-box { margin-bottom: 40px; p { margin-bottom: 15px; i { color: #38b883; margin-right: 10px; } strong { width: 65px; margin-right: 15px; color: #ffffff; } a { color: #c4c4c4; &:hover { color: #38b883; } } } } #contact-box { margin-bottom: 40px; h3 { color: #ffffff; font-size: 28px; line-height: 36px; margin-bottom: 5px; } .contact-form { margin: 0; .c-note { display: block; margin-bottom: 5px; } .row > div { margin-top: 30px; p { margin-bottom: 0px; .required { display: none; } #contact_fname, #contact_email, #contact_lname, #contact_date, #contact_phone, #contact_hour { height: 36px; padding: 5px 10px; width: 100%; line-height: 26px; border: none; background-color: #e9e3f3; color: #c5c3cb; font-size: 13px; } #contact_message { height: 180px; padding: 5px 10px; width: 100%; border: none; background-color: #e9e3f3; color: #c5c3cb; font-size: 13px; } } .time-frame, .party { font-size: 13px; } .time-frame ul, .party ul { margin: 10px 0 0; padding: 0; } .time-frame ul li, .party ul li { float: left; margin: 0 0 0 20px; list-style: none; overflow: hidden; } .time-frame ul li:first-child, .party ul li:first-child { margin: 0; } .time-frame ul li span, .party ul li span { margin: 0 10px 0 0; float: left; } .time-frame ul li input, .party ul li input { float: left; } } .contact-button { margin: 30px 0 0; .kopa-button { cursor: pointer; &:before { background-color: #584e74; } &:hover:before { background-color: #fc6bb9; } } } .input-submit { border: none; background: none; color: #ffffff; } label.error { color: #38b883; } } } /* Shop page ---------------------------------- */ .woocommerce { #container #content .page-title { font-size: 28px; line-height: 34px; font-family: "Lato", sans-serif; margin-bottom: 0; } .woocommerce-ordering { float: right; margin-bottom: 30px; } } .woocommerce-page .woocommerce-ordering { float: right; margin-bottom: 30px; } .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select { border: 1px solid #e5e5e5; padding: 9px 10px; color: #757575; font-size: 13px; } .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { float: left; margin: 0 0 30px; color: #392f55; line-height: 38px; } .woocommerce ul.products, .woocommerce-page ul.products { margin: 0 -15px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 33.333333%; padding: 0 15px; float: left; margin: 0 0 30px; } .woocommerce ul.products li.product > div, .woocommerce-page ul.products li.product > div { background-color: #ffffff; padding: 5px 5px 30px; border: 1px solid #e5e5e5; text-align: center; } .woocommerce ul.products li.product > div .product-thumb, .woocommerce-page ul.products li.product > div .product-thumb { margin-bottom: 40px; position: relative; } .woocommerce ul.products li.product > div .product-thumb > a > img, .woocommerce-page ul.products li.product > div .product-thumb > a > img { box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; margin-bottom: 0; } .woocommerce ul.products li.product > div .product-thumb .onsale, .woocommerce-page ul.products li.product > div .product-thumb .onsale { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; background: #38b883; color: #ffffff; z-index: 10; border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -ms-box-shadow: none; text-shadow: none; line-height: 35px; margin: 0; padding: 0 9px; font-size: 13px; right: 10px; top: 0; font-weight: 400; } .woocommerce ul.products li.product > div .product-thumb .onsale:before, .woocommerce-page ul.products li.product > div .product-thumb .onsale:before { content: ''; position: absolute; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 7px solid #38b883; bottom: -7px; left: 50%; margin-left: -22px; } .woocommerce ul.products li.product > div .product-thumb .button-box, .woocommerce-page ul.products li.product > div .product-thumb .button-box { left: 0; bottom: -15px; width: 100%; position: absolute; z-index: 1; } .woocommerce ul.products li.product > div .product-thumb .button-box a, .woocommerce-page ul.products li.product > div .product-thumb .button-box a { display: inline-block; color: #231d30; border: 1px solid #231d30; background-color: #ffffff; width: 30px; height: 30px; line-height: 28px; margin: 0 5px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } .woocommerce ul.products li.product > div .product-thumb .button-box a i, .woocommerce-page ul.products li.product > div .product-thumb .button-box a i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .woocommerce ul.products li.product > div .product-thumb .button-box a:hover, .woocommerce-page ul.products li.product > div .product-thumb .button-box a:hover { background-color: #231d30; color: #ffffff; } .woocommerce ul.products li.product > div > a, .woocommerce-page ul.products li.product > div > a { position: relative; display: block; } .woocommerce ul.products li.product > div > a footer, .woocommerce-page ul.products li.product > div > a footer { overflow: hidden; margin-bottom: 20px; } .woocommerce ul.products li.product > div > a .star-rating, .woocommerce-page ul.products li.product > div > a .star-rating { display: inline-block; font-size: 10px; line-height: 8px; color: #38b883; margin-bottom: 0; } .woocommerce ul.products li.product > div > a .star-rating:before, .woocommerce-page ul.products li.product > div > a .star-rating:before { color: #38b883; } .woocommerce ul.products li.product > div > a h3, .woocommerce-page ul.products li.product > div > a h3 { font-size: 18px; line-height: 24px; font-family: "Lato", sans-serif; font-weight: 700; padding-bottom: 12px; } .woocommerce ul.products li.product > div > a h3:hover, .woocommerce-page ul.products li.product > div > a h3:hover { color: #38b883; } .woocommerce ul.products li.product > div > a .price, .woocommerce-page ul.products li.product > div > a .price { display: inline-block; font-size: 16px; margin-top: -5px; margin-right: 5px; margin-bottom: 0; height: 20px; } .woocommerce ul.products li.product > div > a .price del, .woocommerce-page ul.products li.product > div > a .price del { font-size: 14px; margin-right: 10px; } .woocommerce ul.products li.product > div > a .price del .amount, .woocommerce-page ul.products li.product > div > a .price del .amount { font-size: 14px; text-decoration: line-through; } .woocommerce ul.products li.product > div > a .price .amount, .woocommerce-page ul.products li.product > div > a .price .amount { font-family: "Source Sans Pro", sans-serif; font-size: 18px; color: #38b883; } .woocommerce ul.products li.product > div > a .price ins, .woocommerce-page ul.products li.product > div > a .price ins { text-decoration: none; } .woocommerce ul.products li.product > div:hover, .woocommerce-page ul.products li.product > div:hover { background-color: #231d30; } .woocommerce ul.products li.product > div:hover > a h3, .woocommerce-page ul.products li.product > div:hover > a h3 { color: #ffffff; } .woocommerce ul.products li.product > div:hover a.add_to_cart_button, .woocommerce-page ul.products li.product > div:hover a.add_to_cart_button { background-color: #eae9f1; color: #392f55; } .woocommerce { #content input.button, #respond input#submit, a.button, button.button, input.button { display: inline-block !important; background: #38b883; font-family: "Source Sans Pro", sans-serif; color: #ffffff; padding: 7px 15px; font-weight: 300; text-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -ms-box-shadow: none; } } .woocommerce-page { #content input.button, #respond input#submit, a.button, button.button, input.button { display: inline-block !important; background: #38b883; font-family: "Source Sans Pro", sans-serif; color: #ffffff; padding: 7px 15px; font-weight: 300; text-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -ms-box-shadow: none; } } .woocommerce { #content input.button:hover, #respond input#submit:hover, a.button:hover, button.button:hover, input.button:hover { background: #392f55; } } .woocommerce-page { #content input.button:hover, #respond input#submit:hover, a.button:hover, button.button:hover, input.button:hover { background: #392f55; } } .woocommerce { nav.woocommerce-pagination, #content nav.woocommerce-pagination { border-top: 1px solid #ffffff; padding-top: 40px; margin-top: 10px; } } .woocommerce-page { nav.woocommerce-pagination, #content nav.woocommerce-pagination { border-top: 1px solid #ffffff; padding-top: 40px; margin-top: 10px; } } .woocommerce { #content nav.woocommerce-pagination ul, nav.woocommerce-pagination ul { border: none; margin: 0; } } .woocommerce-page { #content nav.woocommerce-pagination ul, nav.woocommerce-pagination ul { border: none; margin: 0; } } .woocommerce { #content nav.woocommerce-pagination ul li, nav.woocommerce-pagination ul li { border: none; margin: 0; display: block; overflow: visible; } } .woocommerce-page { #content nav.woocommerce-pagination ul li, nav.woocommerce-pagination ul li { border: none; margin: 0; display: block; overflow: visible; } } .woocommerce { #content nav.woocommerce-pagination ul li { a, span { display: block; font-size: 21px; padding: 0 10px; line-height: 36px; color: #392f55; } } nav.woocommerce-pagination ul li { a, span { display: block; font-size: 21px; padding: 0 10px; line-height: 36px; color: #392f55; } } } .woocommerce-page { #content nav.woocommerce-pagination ul li { a, span { display: block; font-size: 21px; padding: 0 10px; line-height: 36px; color: #392f55; } } nav.woocommerce-pagination ul li { a, span { display: block; font-size: 21px; padding: 0 10px; line-height: 36px; color: #392f55; } } } .woocommerce { #content nav.woocommerce-pagination ul li { span.current, a:hover { color: #998bc0; background: none; } } nav.woocommerce-pagination ul li { span.current, a:hover { color: #998bc0; background: none; } } } .woocommerce-page { #content nav.woocommerce-pagination ul li { span.current, a:hover { color: #998bc0; background: none; } } nav.woocommerce-pagination ul li { span.current, a:hover { color: #998bc0; background: none; } } } .woocommerce { #content nav.woocommerce-pagination ul li a { &.first, &.last { border: 2px solid #392f55; font-size: 16px; height: 40px; line-height: 36px; margin-right: 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); width: 40px; margin: 0; } } nav.woocommerce-pagination ul li a { &.first, &.last { border: 2px solid #392f55; font-size: 16px; height: 40px; line-height: 36px; margin-right: 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); width: 40px; margin: 0; } } } .woocommerce-page { #content nav.woocommerce-pagination ul li a { &.first, &.last { border: 2px solid #392f55; font-size: 16px; height: 40px; line-height: 36px; margin-right: 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); width: 40px; margin: 0; } } nav.woocommerce-pagination ul li a { &.first, &.last { border: 2px solid #392f55; font-size: 16px; height: 40px; line-height: 36px; margin-right: 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); width: 40px; margin: 0; } } } .woocommerce { #content nav.woocommerce-pagination ul li a { &.first i, &.last i { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } } nav.woocommerce-pagination ul li a { &.first i, &.last i { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } } } .woocommerce-page { #content nav.woocommerce-pagination ul li a { &.first i, &.last i { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } } nav.woocommerce-pagination ul li a { &.first i, &.last i { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } } } .woocommerce { #content nav.woocommerce-pagination ul li a { &.first:hover, &.last:hover { background-color: #392f55; color: #ffffff; } } nav.woocommerce-pagination ul li a { &.first:hover, &.last:hover { background-color: #392f55; color: #ffffff; } } } .woocommerce-page { #content nav.woocommerce-pagination ul li a { &.first:hover, &.last:hover { background-color: #392f55; color: #ffffff; } } nav.woocommerce-pagination ul li a { &.first:hover, &.last:hover { background-color: #392f55; color: #ffffff; } } } .woocommerce { #content nav.woocommerce-pagination ul li a.first, nav.woocommerce-pagination ul li a.first { margin-right: 30px; } } .woocommerce-page { #content nav.woocommerce-pagination ul li a.first, nav.woocommerce-pagination ul li a.first { margin-right: 30px; } } .woocommerce { #content nav.woocommerce-pagination ul li a.last, nav.woocommerce-pagination ul li a.last { margin-left: 30px; } } .woocommerce-page { #content nav.woocommerce-pagination ul li a.last, nav.woocommerce-pagination ul li a.last { margin-left: 30px; } } .widget_product_categories .product-categories { margin: 0; padding: 0; li { border-top: 1px solid #211c2d; padding-top: 10px; font-family: "Source Sans Pro", sans-serif; overflow: hidden; &:first-child { border-top: none; padding-top: 0; } a { float: left; } span { float: right; color: #38b883; font-size: 12px; } } } .widget_top_rated_products ul.product_list_widget { margin-top: -20px; li { position: relative; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid #211c2d; &:first-child { border-top: none; } .star-rating { font-size: 11px; line-height: 10px; margin-bottom: 20px; color: #38b883; &:before { color: #38b883; } span { line-height: 10px; } } > a { display: block; float: none; font-size: 16px; font-family: "Source Sans Pro", sans-serif; font-weight: 600; margin-bottom: 15px; img { width: 90px; height: 90px; margin-right: 20px; margin-left: 0; box-shadow: 0 0 0 transparent; -ms-box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; float: left; } } .amount { font-size: 14px; } ins { text-decoration: none; .amount { position: static; } } del { margin-right: 10px; .amount { text-decoration: line-through; font-size: 12px; } } } } .woocommerce a.add_to_cart_button, .woocommerce-page a.add_to_cart_button { line-height: 30px; padding: 0 20px; font-weight: 300; color: #ffffff; background-color: #3a2f57; } .woocommerce a.add_to_cart_button:hover, .woocommerce-page a.add_to_cart_button:hover { background-color: #eae9f1; color: #392f55; } .woocommerce #reviews h3, .woocommerce-page #reviews h3 { text-align: center; margin: 0 0 10px; } .woocommerce #reviews #comments .star-rating, .woocommerce-page #reviews #comments .star-rating { height: 20px; line-height: 20px; margin-top: 8px; color: #38b883; } .woocommerce #reviews #comments .star-rating:before, .woocommerce-page #reviews #comments .star-rating:before { color: #38b883; } .woocommerce .loading, .woocommerce-page .loading { min-height: 1px !important; } .woocommerce ul.products li.product > div > a.added_to_cart.wc-forward, .woocommerce-page ul.products li.product > div > a.added_to_cart.wc-forward, .woocommerce a.button.added::before, .woocommerce-page a.button.added::before { color: #38b883; } .woocommerce ul.products li.product > div > a.added_to_cart.wc-forward:hover, .woocommerce-page ul.products li.product > div > a.added_to_cart.wc-forward:hover { color: #fff; } .widget_pages ul li ul, .widget_categories ul li ul { margin-left: 30px; } /* Singe product page ---------------------------------- */ .woocommerce div.product, .woocommerce-page div.product { margin-bottom: 40px; } .woocommerce div.product div.images, .woocommerce-page div.product div.images { float: left; margin-bottom: 30px; width: 45%; position: relative; border: 5px solid #ffffff; } .woocommerce div.product div.images img, .woocommerce-page div.product div.images img { width: 100%; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .woocommerce div.product div.images .sale-item, .woocommerce-page div.product div.images .sale-item { position: absolute; right: -3px; top: -3px; background-color: #38b883; color: #4f4954; padding: 10px 20px; font-size: 18px; font-family: "Source Sans Pro", sans-serif; } .woocommerce div.product div.summary, .woocommerce-page div.product div.summary { margin: 0 0 30px; width: 55%; padding-left: 40px; float: right; } .woocommerce div.product div.summary h4, .woocommerce-page div.product div.summary h4 { font-family: "Lato", sans-serif; font-size: 34px; line-height: 40px; color: #231d30; margin-bottom: 8px; border-bottom: none; padding-bottom: 0 !important; } .woocommerce div.product div.summary .woocommerce-product-rating, .woocommerce-page div.product div.summary .woocommerce-product-rating { display: block; line-height: 20px; overflow: hidden; margin-bottom: 10px; } .woocommerce div.product div.summary .woocommerce-product-rating .star-rating, .woocommerce-page div.product div.summary .woocommerce-product-rating .star-rating { float: left; font-size: 13px; height: 20px; width: 60px; line-height: 20px; position: relative; font-family: 'FontAwesome'; margin-right: 10px; margin-top: 1px; } .woocommerce div.product div.summary .woocommerce-product-rating .star-rating:before, .woocommerce-page div.product div.summary .woocommerce-product-rating .star-rating:before { color: #38b883; content: "\f006\f006\f006\f006\f006"; font-family: 'FontAwesome'; float: left; left: 0; top: 0; position: absolute; } .woocommerce div.product div.summary .woocommerce-product-rating .star-rating span, .woocommerce-page div.product div.summary .woocommerce-product-rating .star-rating span { float: left; left: 0; overflow: hidden; padding-top: 1.5em; position: absolute; top: 0; width: 60%; } .woocommerce div.product div.summary .woocommerce-product-rating .star-rating span:before, .woocommerce-page div.product div.summary .woocommerce-product-rating .star-rating span:before { color: #38b883; position: absolute; left: 0; top: 0; content: "\f005\f005\f005\f005\f005"; font-family: 'FontAwesome'; } .woocommerce div.product div.summary .woocommerce-product-rating .woocommerce-review-link, .woocommerce-page div.product div.summary .woocommerce-product-rating .woocommerce-review-link { color: #93909e; } .woocommerce div.product div.summary .woocommerce-product-rating .woocommerce-review-link:hover, .woocommerce-page div.product div.summary .woocommerce-product-rating .woocommerce-review-link:hover { color: #38b883; } .woocommerce div.product div.summary p.price, .woocommerce-page div.product div.summary p.price { font-size: 18px; color: #77757d; font-weight: 300; line-height: 24px; margin-bottom: 25px; } .woocommerce div.product div.summary p.price del, .woocommerce-page div.product div.summary p.price del { margin-right: 10px; } .woocommerce div.product div.summary p.price del .amount, .woocommerce-page div.product div.summary p.price del .amount { color: #77757d; font-weight: 300; font-size: 18px; } .woocommerce div.product div.summary p.price ins, .woocommerce-page div.product div.summary p.price ins { text-decoration: none; } .woocommerce div.product div.summary p.price ins .amount, .woocommerce-page div.product div.summary p.price ins .amount { color: #38b883; font-size: 28px; font-weight: 400; } .woocommerce div.product div.summary form.cart, .woocommerce-page div.product div.summary form.cart { overflow: hidden; margin-top: 5px; margin-bottom: 30px; padding-bottom: 0; border-bottom: none; } .woocommerce div.product div.summary form.cart .quantity, .woocommerce-page div.product div.summary form.cart .quantity { float: left; margin-right: 10px; width: 70px; padding-right: 30px; overflow: hidden; position: relative; } .woocommerce div.product div.summary form.cart .quantity .minus, .woocommerce-page div.product div.summary form.cart .quantity .minus { color: #ffffff; background: #38b883; height: 15px; border-radius: 0; box-shadow: none !important; text-shadow: none !important; bottom: 0; right: 0; cursor: pointer; display: block; line-height: 15px; overflow: visible; margin: 0; padding: 0; position: absolute; text-align: center; text-decoration: none; vertical-align: text-top; width: 30px; font-size: 13px; border: none; } .woocommerce div.product div.summary form.cart .quantity .minus:hover, .woocommerce-page div.product div.summary form.cart .quantity .minus:hover { background-color: #392f55; } .woocommerce div.product div.summary form.cart .quantity .plus, .woocommerce-page div.product div.summary form.cart .quantity .plus { color: #ffffff; background: #38b883; height: 15px; border-radius: 0; box-shadow: none !important; text-shadow: none !important; top: 0; right: 0; cursor: pointer; display: block; line-height: 15px; overflow: visible; margin: 0; padding: 0; position: absolute; text-align: center; text-decoration: none; vertical-align: text-top; width: 30px; border: none; font-size: 13px; } .woocommerce div.product div.summary form.cart .quantity .plus:hover, .woocommerce-page div.product div.summary form.cart .quantity .plus:hover { background-color: #392f55; } .woocommerce div.product div.summary form.cart .quantity .qty, .woocommerce-page div.product div.summary form.cart .quantity .qty { border-radius: 0; box-shadow: none !important; text-shadow: none !important; height: 30px; float: left; border-right: none; width: 40px; text-align: center; color: #93909e; font-size: 13px; padding: 0; border: none; } .woocommerce div.product div.summary form.cart .single_add_to_cart_button, .woocommerce-page div.product div.summary form.cart .single_add_to_cart_button { float: left; display: block; padding: 5px 15px; line-height: 20px; text-align: center; background-image: none; text-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; font-size: 13px; background-color: #392f55; border: none; } .woocommerce div.product div.summary form.cart .single_add_to_cart_button:hover, .woocommerce-page div.product div.summary form.cart .single_add_to_cart_button:hover { background-color: #38b883; } .woocommerce div.product div.summary form.cart .single_add_to_cart_button i, .woocommerce-page div.product div.summary form.cart .single_add_to_cart_button i { font-size: 14px; margin-right: 10px; } .woocommerce div.product div.summary .description, .woocommerce-page div.product div.summary .description { overflow: hidden; margin-bottom: 20px; } .woocommerce div.product div.summary .description p, .woocommerce-page div.product div.summary .description p { margin-bottom: 20px; color: #77757d; } .woocommerce div.product div.summary .product_meta, .woocommerce-page div.product div.summary .product_meta { font-style: normal; color: #77757d; } .woocommerce div.product div.summary .product_meta a, .woocommerce-page div.product div.summary .product_meta a { color: #38b883; font-style: normal; } .woocommerce div.product div.summary .product_meta a:hover, .woocommerce-page div.product div.summary .product_meta a:hover { color: #77757d; } .woocommerce div.product .kopa-tab-container-1 .nav-tabs.kopa-tabs-1, .woocommerce-page div.product .kopa-tab-container-1 .nav-tabs.kopa-tabs-1 { background-color: transparent; } .woocommerce div.product .kopa-tab-container-1 h4, .woocommerce-page div.product .kopa-tab-container-1 h4 { border-bottom: 2px solid #d7d5dd; text-transform: none; margin: 0 0 15px; padding-bottom: 15px; font-size: 21px; font-family: "Lato", sans-serif; } .woocommerce div.product .kopa-tab-container-1 #comments, .woocommerce-page div.product .kopa-tab-container-1 #comments { margin-left: 30px; } .woocommerce div.product .kopa-tab-container-1 #comments h4, .woocommerce-page div.product .kopa-tab-container-1 #comments h4 { margin-bottom: 20px; } .woocommerce div.product .kopa-tab-container-1 #respond, .woocommerce-page div.product .kopa-tab-container-1 #respond { margin-bottom: 0; } .product_column .related.products h2 { font-size: 21px; line-height: 26px; font-family: "Lato", sans-serif; margin-bottom: 20px; } .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message { border-top-color: #38b883; } .woocommerce { .woocommerce-message, .woocommerce-error, .woocommerce-info { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background: #fff; border-radius: 0; } } .woocommerce-page { .woocommerce-message, .woocommerce-error, .woocommerce-info { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background: #fff; border-radius: 0; } } .woocommerce .woocommerce-message::before, .woocommerce-page .woocommerce-message::before { background-color: #38b883; } .woocommerce { .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { border-radius: 0; padding-top: 0; } } .woocommerce-page { .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { border-radius: 0; padding-top: 0; } } #commentform > p { margin-bottom: 20px; } .entry-box.no-rating .entry-content-wrap { .left-col { display: none; } .entry-content { margin-left: 0; } } /* 404 page ---------------------------------- */ .error-404 { padding: 30px 0 120px; position: relative; .left-col p { font-size: 120px; font-weight: 700; color: #38b883; line-height: 100px; text-align: right; } .right-col { color: #392f55; h1 { margin-bottom: 10px; font-size: 29px; color: #38b883; margin-top: 0; } a { color: #392f55; &:hover { color: #38b883; } } p { line-height: 24px; } } } /** 3.3 Widget **/ .widget iframe { border: none; width: 100%; } .dark-bg { background-color: #211c2d; padding: 70px 0; .widget { .widget-title.style1 { text-align: center; color: #ffffff; } &:last-child { margin-bottom: 0; } } a { color: #ffffff; &:hover { color: #38b883; } } .pagination .page-numbers li { a { color: #c7c4d2; } span { color: #c7c4d2; &.current { color: #ffffff; } } a { &.prev, &.next { color: #ffffff; } &.prev, &.next { border-color: #ffffff; } &.prev:hover, &.next:hover { border-color: #392f55; } } } } /*----- Kopa twitter widget -----*/ .kopa-twitter-widget ul { margin: 0; padding: 0; li { float: none; margin: 10px 0 0; list-style: none; padding-top: 10px; border-top: 1px solid #807a8d; &:first-child { border-top: none; padding-top: 0; margin-top: 0; } .tweet-item { position: relative; .tweet-avatar { top: 15px; left: 7px; position: absolute; width: 40px; height: 40px; color: #ffffff; text-align: center; line-height: 38px; border: 1px solid #ffffff; font-size: 16px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } } .tweet-detail { margin-left: 73px; min-height: 60px; p { margin-bottom: 0; line-height: 24px; } .tweet-time { display: block; color: #38b883; } } } &:hover .tweet-item .tweet-avatar { background-color: #6a609f; } } } #main-content .kopa-twitter-widget ul { padding: 20px 0; background-color: #13101a; li { margin-top: 15px; padding-left: 30px; padding-right: 30px; &:first-child { margin-top: 0; } } } /* Kopa flickr Widget ---------------------------------- */ .kopa-flickr-widget .flickr-wrap { margin: 0; padding: 0; li { float: left; margin: 0; list-style: none; width: 33.333333%; a { display: block; height: 104px; width: 100%; } } } /*----- Kopa recent post widget -----*/ .kopa-recent-post-widget ul { margin: 0; padding: 10px 0; background-color: #ffffff; li { float: none; margin: 0; list-style: none; padding: 20px 30px; border-top: 1px solid #d7d5dd; &:first-child { border-top: none; } .entry-item { .entry-thumb { transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); overflow: hidden; margin-right: 20px; a { display: block; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } } .entry-content { .entry-title { font-family: "Lato", sans-serif; font-weight: 300; font-size: 14px; line-height: 20px; a { color: #827f8b; &:hover { color: #38b883; } } } footer { font-weight: 300; color: #38b883; font-size: 13px; } } } } } /* Kopa gallery widget ---------------------------------- */ .kopa-gallery-widget { position: relative; .masonry-container { > header { margin-bottom: 35px; .filters { margin: -1px 0 0 -1px; padding: 0; display: inline-block; li { float: left; margin: 1px 0 0 1px; list-style: none; font-size: 15px; font-weight: 300; cursor: pointer; border: 1px solid transparent; line-height: 30px; padding: 0 15px; color: #392f55; &:hover, &.active { border-color: #d7d6df; } } } } .container-masonry { position: relative; margin: 0 0 50px; .item { width: 25%; float: left; position: relative; &.inactive { visibility: hidden; opacity: 0; filter: Alpha(Opacity = 0); } img { width: 100%; } .mask { background-color: rgba(56, 46, 85, 0.7); position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #f2f2f2; opacity: 0; filter: Alpha(Opacity = 0); a { position: absolute; top: 50%; left: 50%; color: #ffffff; border: 2px solid #ffffff; width: 50px; height: 50px; text-align: center; line-height: 46px; margin: -25px 0 0 -25px; font-size: 12px; i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } &:hover { color: #38b883; } } } &:hover .mask { opacity: 1; filter: Alpha(Opacity = 100); a { transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } } } } } } .load-more { color: #392f55; a { display: inline-block; width: 40px; height: 40px; border: 2px solid #392f55; line-height: 36px; margin-bottom: 20px; color: #392f55; font-size: 16px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } &:hover { color: #38b883; border-color: #38b883; } } span { display: block; } } /*----- Kopa masonry list 1 widget -----*/ .kopa-masonry-list-1-widget .masonry-list-wrapper { margin: 0 0 40px; > ul { margin: -30px -15px 0; padding: 0; > li { float: left; margin: 30px 0 0; list-style: none; padding: 0 15px; width: 33.2%; .entry-item { position: relative; background-color: #231d30; padding: 25px 30px 30px; .entry-thumb { position: relative; img { width: 100%; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(57, 47, 85, 0.4); opacity: 0; filter: Alpha(Opacity = 0); a { position: absolute; top: 50%; left: 50%; color: #ffffff; border: 2px solid #ffffff; width: 40px; height: 40px; text-align: center; line-height: 36px; margin: -20px 0 0 -20px; font-size: 12px; i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } &:hover { color: #38b883; } } } &:hover .mask { opacity: 1; filter: Alpha(Opacity = 100); a { transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } } iframe { border: none; width: 100%; } .kopa-blog-carousel .owl-controls { margin: 0; position: absolute; left: 0; bottom: 0; height: 35px; .owl-buttons div { position: static; width: 35px; height: 35px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; margin: 0; padding: 0; background-color: rgba(255, 255, 255, 0.7); opacity: 1; filter: Alpha(Opacity = 100); color: #7a738a; line-height: 35px; font-size: 26px; &:hover { background-color: rgba(57, 47, 85, 0.7); color: #b8b4be; } &.owl-next:before { content: "\f105"; } &.owl-prev:before { content: "\f104"; } } } } .entry-content { margin-bottom: 30px; position: relative; .kopa-blockquote-2 { padding: 0; background: none; border: none; margin-bottom: 25px; &:before, &:after { display: none; } p { padding-left: 0; text-transform: uppercase; font-size: 18px; color: #ffffff; font-weight: 400; line-height: 26px; margin-bottom: 30px; i { color: #38b883; font-size: 24px; position: static; float: left; margin-right: 15px; } } > span { float: left; font-size: 16px; color: #908c9f; font-style: normal; } } header { margin-bottom: 8px; .entry-date { color: #38b883; font-size: 13px; } } .entry-title { font-weight: 300; font-size: 24px; line-height: 28px; font-family: "Lato", sans-serif; margin-bottom: 15px; a { color: #ffffff; &:hover { color: #38b883; } } } p { font-weight: 300; margin-bottom: 20px; } .social-links { margin-left: -5px; li { margin-left: 5px; a { width: 34px; line-height: 32px; font-size: 14px; border-color: #403361; color: #d1d0d6; &:hover { background-color: #392f55; } } } } } } } } } /*----- Kopa blog classic widget -----*/ .kopa-blog-classic-widget ul { margin: 0; padding: 0; li { float: none; margin: 80px 0 0; list-style: none; &:first-child { margin: 0; } .entry-item { position: relative; .entry-thumb { margin-bottom: 25px; position: relative; .mask { background: url(images/background/pattern-4.png) repeat 0 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: Alpha(Opacity = 0); a { position: absolute; top: 50%; left: 50%; color: #ffffff; border: 2px solid #ffffff; width: 40px; height: 40px; text-align: center; line-height: 36px; margin: -20px 0 0 -20px; font-size: 12px; i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } &:hover { color: #38b883; } } } &:hover .mask { opacity: 1; filter: Alpha(Opacity = 100); a { transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } } .kopa-blog-classic-carousel .owl-controls .owl-buttons > div { width: 55px; height: 55px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; margin: -23px 0 0; padding: 0; background-color: rgba(255, 255, 255, 0.7); opacity: 1; filter: Alpha(Opacity = 100); color: #7a738a; line-height: 53px; font-size: 40px; &:hover { background-color: rgba(57, 47, 85, 0.7); color: #b8b4be; } &.owl-next { right: 30px; &:before { content: "\f105"; } } &.owl-prev { left: 30px; &:before { content: "\f104"; } } } } .entry-content { color: #93909e; header { margin-bottom: 8px; .entry-date, .entry-meta { color: #38b883; } } .kopa-blockquote-2 { border: none; padding: 0; color: #403361; margin-bottom: 15px; p { font-size: 32px; color: #392f55; font-weight: 400; line-height: 38px; margin-bottom: 8px; i { color: #403361; font-size: 30px; } } span { float: left; font-style: normal; color: #38b883; font-weight: 400; } &:before, &:after { display: none; } } .entry-title { font-size: 28px; line-height: 34px; margin-bottom: 18px; a { color: #392f55; &:hover { color: #38b883; } } } .entry-excerpt { margin-bottom: 25px; } footer a { display: inline-block; border: 1px solid #392f55; color: #392f55; line-height: 38px; padding: 0 15px; span { margin-right: 10px; } i { line-height: 38px; margin: 0 !important; } &:hover { background-color: #392f55; color: #38b883; } } } } } } /*----- Kopa event 4 widget -----*/ .kopa-event-4-widget .widget-content { .events-by-month { position: relative; .event-month { position: absolute; top: 0; left: 0; color: #ffffff; background-color: #392f55; width: 130px; text-align: center; padding: 35px 0; p { margin-bottom: 0; font-size: 40px; line-height: 38px; } span { display: inline-block; font-weight: 300; margin-bottom: 2px; } } ul { margin: 0 0 0 145px; padding: 0; li { margin: 0 0 15px; .event-item { position: relative; padding: 25px 30px 27px; .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(57, 47, 85, 0.7); } .event-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; &.event-bg-1, &.event-bg-2, &.event-bg-3, &.event-bg-4, &.event-bg-5, &.event-bg-6, &.event-bg-7, &.event-bg-8 { background-size: cover; } } .row { position: relative; z-index: 1; > div { .event-heading { margin-bottom: 8px; } .event-content { .event-date { font-size: 24px; color: #ffffff; display: inline-block; line-height: 30px; } .event-title { font-size: 24px; line-height: 30px; margin-bottom: 0; a { color: #ffffff; &:hover { color: #38b883; } } } .buy-ticket { color: #38b883; display: inline-block; line-height: 30px; &:hover { color: #ffffff; } } } } } } } } } .pagination { margin-top: 70px; } } /*----- Kopa featured post widget -----*/ .kopa-featured-post-widget .entry-item { .entry-thumb { margin-bottom: 25px; } .entry-content { padding: 0 15%; header { margin-bottom: 20px; .entry-title { font-size: 32px; line-height: 38px; a { color: #392f55; } } .entry-categories:hover, .entry-author:hover { color: #392f55; } .entry-meta { display: inline-block; color: #38b883; } > p { margin-bottom: 5px; } .entry-date { color: #392f55; span { color: #38b883; } } .amount-song { color: #392f55; } } > p { color: #524d69; } } } /*----- Kopa artist widget -----*/ .kopa-artist-widget { .search-box { margin-bottom: 35px; .search-form { .search-text { text-align: left; background-color: rgba(35, 29, 48, 0.6); padding: 5px 20px 5px 50px; line-height: 36px; height: 46px; font-weight: 300; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -ms-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-border-radius: 23px; -moz-border-radius: 23px; -ms-border-radius: 23px; border-radius: 23px; } .search-submit { top: 12px; left: 20px; } } } .masonry-container { > header { margin-bottom: 30px; overflow: hidden; padding-bottom: 10px; position: relative; .filters { margin: -10px 0 0 -20px; padding: 0; border-bottom: 1px solid #d5d3dd; padding-bottom: 10px; li { float: left; margin: 10px 0 0 20px; list-style: none; font-size: 16px; font-weight: 300; cursor: pointer; padding: 0; color: #392f55; position: relative; &:before { height: 5px; content: ""; background-color: #7e7e7e; width: 100%; position: absolute; left: 0; bottom: -13px; opacity: 0; filter: Alpha(Opacity = 0); } &:hover:before, &.active:before { opacity: 1; filter: Alpha(Opacity = 100); } } } .kopa-sorting { position: absolute; right: 0; top: 0; select { border: none; background-color: transparent; font-size: 14px; font-weight: 300; color: #392f55; } } } .container-masonry { position: relative; margin: 0 -15px 10px; .item { width: 33.333333%; padding: 0 15px; float: left; position: relative; &.inactive { visibility: hidden; opacity: 0; filter: Alpha(Opacity = 0); } .artist-item { padding-bottom: 25px; .artist-thumb { position: relative; margin-bottom: 25px; img { width: 100%; } .mask { background-color: rgba(56, 46, 85, 0.7); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: Alpha(Opacity = 0); a { position: absolute; top: 50%; left: 50%; color: #ffffff; border: 2px solid #ffffff; width: 50px; height: 50px; text-align: center; line-height: 46px; margin: -25px 0 0 -25px; font-size: 12px; i { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } &:hover { color: #38b883; } } } &:hover .mask { opacity: 1; filter: Alpha(Opacity = 100); a { transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } } } .artist-title { font-size: 16px; line-height: 20px; text-align: center; margin-bottom: 0; font-family: "Lato", sans-serif; a { color: #392f55; &:hover { color: #38b883; } } } } } } } .pagination, .load-more { border-top: 1px solid #d5d3dd; padding-top: 40px; margin-top: 0; } } /*----- Kopa audio list 2 widget -----*/ .kopa-audio-list-2-widget { text-align: left !important; > header { margin-bottom: 25px; .widget-title { text-align: center !important; } } a { color: #392f55; &:hover { color: #38b883; } } .widget-thumb { width: 200px; float: left; margin-right: 30px; } .widget-content { overflow: hidden; .audio-list-wrapper { width: 40%; float: left; max-height: 200px; overflow: hidden; padding-right: 2px; header { margin: -5px 0 20px; h3 { font-size: 24px; line-height: 30px; margin-bottom: 0; } p { color: #38b883; a { color: #38b883; &:hover { color: #392f55; } &:first-child { text-transform: capitalize; } } } } .audio-list { margin: 0; padding: 0 0 0 1px; > li { margin: 0 0 8px; a:before { content: '\f01d'; margin-right: 10px; font-size: 20px; float: left; } } } } .album-intro { padding-left: 30px; width: 60%; float: left; position: relative; color: #392f55; > p { margin-bottom: 15px; &:last-child { margin-bottom: 0; } } } .mCSB_scrollTools { width: 1px; opacity: 1; filter: Alpha(Opacity = 100); .mCSB_draggerRail { background: #392f55; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .mCSB_dragger { width: 5px; height: 30px !important; left: -2px; .mCSB_dragger_bar { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; background: #392f55 !important; } } } .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCustomScrollBox { overflow: visible; } } } /*----- Kopa album widget -----*/ .kopa-album-widget { .search-box { margin-bottom: 35px; .search-form { .search-text { text-align: left; background-color: rgba(35, 29, 48, 0.6); padding: 5px 20px 5px 50px; line-height: 36px; height: 46px; font-weight: 300; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -ms-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-border-radius: 23px; -moz-border-radius: 23px; -ms-border-radius: 23px; border-radius: 23px; } .search-submit { top: 12px; left: 20px; } } } .masonry-container { > header { margin-bottom: 30px; overflow: hidden; padding-bottom: 10px; position: relative; .filters { margin: -10px 0 0 -20px; padding: 0; border-bottom: 1px solid #d5d3dd; padding-bottom: 10px; li { float: left; margin: 10px 0 0 20px; list-style: none; font-size: 16px; font-weight: 300; cursor: pointer; padding: 0; color: #392f55; position: relative; &:before { height: 5px; content: ""; background-color: #7e7e7e; width: 100%; position: absolute; left: 0; bottom: -13px; opacity: 0; filter: Alpha(Opacity = 0); } &:hover:before, &.active:before { opacity: 1; filter: Alpha(Opacity = 100); } } } .kopa-sorting { position: absolute; right: 0; top: 0; select { border: none; background-color: transparent; font-size: 14px; font-weight: 300; color: #392f55; } } } .container-masonry { position: relative; margin: 0 -15px 10px; .item { width: 33.333333%; padding: 0 15px; float: left; position: relative; &.inactive { visibility: hidden; opacity: 0; filter: Alpha(Opacity = 0); } .entry-item { .entry-wrap { background: #231d30; overflow: hidden; } .entry-top { padding-right: 120px; &:hover .entry-thumb { .sd { margin-left: -70px; } > img { margin-left: -120px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } } .entry-thumb { text-align: center; .sd { position: absolute; bottom: -10px; left: 100%; width: 166px; height: 50px; background: url("placeholders/post1/sd.png"); margin-left: -110px; } > { img { text-align: center; width: 206px; height: 206px; line-height: 206px; font-size: 12px; position: absolute; top: 50%; margin-top: -103px; margin-left: -103px; left: 100%; margin-left: -160px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } a { position: relative; img { box-shadow: 2px -20px 6px 0px #4f4954; -ms-box-shadow: 2px -20px 6px 0px #4f4954; -moz-box-shadow: 2px -20px 6px 0px #4f4954; -webkit-box-shadow: 2px -20px 6px 0px #4f4954; } } } .entry-title { position: absolute; bottom: 22px; left: 10px; right: 10px; font-size: 12px; line-height: 18px; a { color: #fff; text-transform: uppercase; border-radius: 30px; border: 2px solid #fff; background: url("images/background/bg/black/6.png"); background: rgba(0, 0, 0, 0.6); padding: 4px 20px; display: inline-block; &:hover { background: #38b883; } } } } .entry-bottom { padding: 20px; } .entry-content { padding: 20px 0; a { color: #4f4954; &:hover { color: #38b883; } } .entry-cat { font-size: 13px; text-transform: uppercase; font-weight: 300; color: #38b883; margin-bottom: 0; a { color: #38b883; &:hover { color: #4f4954; } } } > footer { font-size: 13px; font-weight: 600; color: #4f4954; display: inline-block; margin-top: 10px; > ul { margin: -6px -6px 0; > li { display: inline-block; margin: 6px 6px 0; position: relative; &:before { content: ''; position: absolute; top: 8px; left: -7.5px; width: 3px; height: 3px; background: #4f4954; border-radius: 50%; } &:first-child:before { display: none; } &:last-child { float: right; } } } .kopa-rating { margin: 0; ul { margin: 0; } } } } } .jp-audio .jp-interface { height: auto; } .jp-controls { padding: 0px; button { float: none; display: inline-block; margin: 0 5px; } } .jp-progress { margin-top: 20px; } .jp-current-time, .jp-duration { margin-top: 15px; } .jp-volume-controls { position: absolute; top: auto; bottom: 0; right: 50%; width: 70px; margin-right: -35px; } } } } .pagination, .load-more { border-top: 1px solid #d5d3dd; padding-top: 40px; margin-top: 0; } } /*----- Kopa contact info widget -----*/ .kopa-contact-info-widget { .widget-title { text-align: center; margin-bottom: 40px; h2 { color: #c5c3cb; font-size: 60px; line-height: 40px; display: inline-block; margin: 0; } .bottom-line { position: relative; height: 1px; width: 60%; display: inline-block; background-color: #ffffff; > span { background-color: #231e32; padding: 0 7px; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -12px; span { border: 1px solid #ffffff; width: 10px; height: 10px; display: block; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } } } } .widget-content { > p { margin-bottom: 40px; } .row > div .contact-item { position: relative; min-height: 40px; .contact-icon { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #c5c3cb; background-color: #392f55; position: absolute; top: 5px; left: 0; font-size: 16px; } .contact-info { margin-left: 60px; color: #c5c3cb; h6 { color: #ffffff; font-size: 14px; margin-bottom: 20px; } p { font-weight: 300; padding-right: 65px; margin-bottom: 0; } } } } } /*--- Kopa event 3 widget ---*/ .kopa-event-3-widget .kopa-event-carousel { .item ul { background: #211b2d; color: #fff; padding: 0; margin: 0; position: relative; a { color: #fff; &:hover { color: #fff; } } &:before { content: ''; display: block; width: 11.80952%; height: 100%; border-right: 1px solid #606065; position: absolute; top: 0; left: 0; } > li { padding: 15px 0; border-bottom: 1px solid #606065; margin: 0; &:hover { background: #bb3d92; background: -moz-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -webkit-gradient(left top, right top, color-stop(0%, #bb3d92), color-stop(0%, #f6290c), color-stop(0%, #a34986), color-stop(100%, #3e216a)); background: -webkit-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -o-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -ms-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: linear-gradient(to right, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb3d92', endColorstr='#3e216a', GradientType=1 ); } &:first-child .col-2 { font-size: 18px; line-height: 24px; font-weight: 700; } > div { float: left; min-height: 1px; text-align: left; &.col-1 { width: 11.80952%; text-align: center; p { font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase; margin-top: 2px; } } &.col-2 { width: 21.52381%; padding-left: 30px; text-transform: uppercase; p { margin-top: 5px; } } &.col-3 { width: 50%; padding-left: 18px; font-family: "Source Sans Pro", sans-serif; font-size: 24px; line-height: 30px; font-weight: 300; } &.col-4 { width: 16.66667%; padding-right: 18px; text-align: right; text-transform: uppercase; margin-top: 5px; } } } } .owl-controls { margin-top: 50px; .owl-buttons > div { position: static; font-size: 14px; color: #ffffff; display: inline-block; padding: 10px 20px; border: 1px solid #ffffff; width: auto; height: 50px; line-height: 28px; margin: 0; &.owl-prev { padding-right: 20px; margin-right: 10px; &:before { content: "\f177"; margin-right: 10px; } } &.owl-next { padding-left: 20px; margin-left: 10px; &:before { display: none; } &:after { content: "\f178"; margin-left: 10px; } } &:hover { background-color: #392f55; border-color: #392f55; color: #ffffff; } } } } /*----- Kopa countdown 2 widget -----*/ .kopa-event-3-page .kopa-area-9 { .span-bg:before { background: url(images/background/6.png) no-repeat center; background-size: cover; } &.kopa-parallax { padding-top: 160px; } .kopa-countdown-2 li span { color: #ffffff; font-size: 18px; } } /*--- Kopa featured audio widget ---*/ .kopa-featured-audio-widget { background: #403361; > .outer > { .col-left, .col-right { position: relative; float: left; min-height: 1px; width: 40.59829%; } .col-left { background: #211c2d; padding-left: 130px; &:before { content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 100%; background: #403361; } .album-thumb { display: inline-block; text-align: center; width: 110px; height: 110px; line-height: 90px; font-size: 15px; background: #403361; padding: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; top: -15px; left: 0; z-index: 999; img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } } .album-content { text-transform: capitalize; padding: 14px; padding-left: 0; h6 { font-size: 16px; line-height: 24px; margin-bottom: 2px; a { color: #fff; &:hover { color: #f42495; } } } p { font-size: 13px; a { color: #38b883; &:hover { color: #f42495; } } } } } .col-right { width: 59.40171%; padding-left: 38px; } } } /*--- Kopa event widget ---*/ .widget-title.style1 { font-size: 60px; line-height: 66px; } .kopa-event-widget > ul > li { margin-top: 15px; padding-top: 15px; border-top: 1px solid #606065; > div { float: left; min-height: 1px; text-align: left; &.col-1 { width: 7.14286%; p { font-size: 16px; line-height: 22px; font-weight: 700; color: #38b883; text-transform: uppercase; } } &.col-2 { width: 18.09524%; padding-left: 40px; text-transform: capitalize; } &.col-3 { width: 43.80952%; padding-left: 70px; font-family: "Source Sans Pro", sans-serif; font-size: 20px; line-height: 26px; font-weight: 300; } &.col-4 { width: 30.95238%; padding-left: 40px; text-align: right; text-transform: uppercase; } } } /*--- kopa-album-1-widget ---*/ .album-icon { text-align: center; width: 194px; height: 194px; line-height: 194px; font-size: 40px; position: absolute; top: 100%; margin-top: -97px; margin-left: -97px; left: 50%; background: #fff; border-radius: 50%; box-shadow: 1px 2px 4px 1px #c4c4c4; -ms-box-shadow: 1px 2px 4px 1px #c4c4c4; -moz-box-shadow: 1px 2px 4px 1px #c4c4c4; -webkit-box-shadow: 1px 2px 4px 1px #c4c4c4; padding-right: 5px; color: #3a2f57; z-index: 2; .icon-inner-1 { text-align: center; width: 88px; height: 88px; line-height: 88px; font-size: 14px; position: absolute; top: 50%; margin-top: -44px; margin-left: -44px; left: 50%; background: #c7c3dc; border-radius: 50%; &:before { content: ''; width: 88px; height: 44px; border-bottom-left-radius: 44px; border-bottom-right-radius: 44px; background: #f5f4f6; position: absolute; bottom: -1px; left: 0; } &:after { content: ''; text-align: center; width: 80px; height: 80px; line-height: 80px; font-size: 14px; position: absolute; top: 50%; margin-top: -40px; margin-left: -40px; left: 50%; border-radius: 50%; border: 2px solid #fff; } } .icon-inner-2 { text-align: center; width: 30px; height: 30px; line-height: 30px; font-size: 14px; position: absolute; top: 50%; margin-top: -15px; margin-left: -15px; left: 50%; border: 1px solid #fff; border-radius: 50%; &:before { content: ''; text-align: center; width: 10px; height: 10px; line-height: 10px; font-size: 14px; position: absolute; top: 50%; margin-top: -5px; margin-left: -5px; left: 50%; background: #fff; border-radius: 50%; } } span.fa { color: #6a609f; position: relative; z-index: 2; } } .kopa-subpage .album-icon .icon-inner-1 { background: #f5f4f6; } .kopa-album-1-widget, .kopa-album-2-widget { text-align: center; margin-bottom: 0; } .kopa-album-1-widget > header, .kopa-album-2-widget > header { padding: 80px 0 140px; background: url("placeholders/parallax/2.jpg") no-repeat center; background-size: cover; position: relative; margin-bottom: 0; } .kopa-album-1-widget > header .widget-title, .kopa-album-2-widget > header .widget-title { margin-bottom: 15px; color: #fff; } .kopa-album-1-widget .widget-content, .kopa-album-2-widget .widget-content { padding: 140px 0 50px; background: url("images/background/1.png") no-repeat top center; } .entry-thumb { position: relative; } .kopa-album-list { > li { margin-bottom: 30px; } .entry-item { .entry-wrap { background: #231d30; overflow: hidden; } .entry-top { padding-right: 120px; &:hover .entry-thumb { .sd { margin-left: -70px; } > img { margin-left: -120px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } } .entry-thumb { text-align: center; .sd { position: absolute; bottom: -10px; left: 100%; width: 166px; height: 50px; background: url("placeholders/post1/sd.png"); margin-left: -110px; } > { img { text-align: center; width: 206px; height: 206px; line-height: 206px; font-size: 12px; position: absolute; top: 50%; margin-top: -103px; margin-left: -103px; left: 100%; margin-left: -160px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } a { position: relative; img { box-shadow: 2px -20px 6px 0px #4f4954; -ms-box-shadow: 2px -20px 6px 0px #4f4954; -moz-box-shadow: 2px -20px 6px 0px #4f4954; -webkit-box-shadow: 2px -20px 6px 0px #4f4954; } } } .entry-title { position: absolute; bottom: 22px; left: 10px; right: 10px; font-size: 12px; line-height: 18px; a { color: #fff; text-transform: uppercase; border-radius: 30px; border: 2px solid #fff; background: url("images/background/bg/black/6.png"); background: rgba(0, 0, 0, 0.6); padding: 4px 20px; display: inline-block; &:hover { background: #38b883; } } } } .entry-bottom { padding: 20px; } .entry-content { padding: 20px 20px 0; a { color: #4f4954; &:hover { color: #38b883; } } .entry-cat { font-size: 13px; text-transform: uppercase; font-weight: 300; color: #38b883; a { color: #38b883; &:hover { color: #4f4954; } } } > footer { font-size: 13px; font-weight: 600; color: #4f4954; display: inline-block; margin-top: 10px; > ul { margin: -6px -6px 0; > li { display: inline-block; margin: 6px 6px 0; position: relative; &:before { content: ''; position: absolute; top: 8px; left: -7.5px; width: 3px; height: 3px; background: #4f4954; border-radius: 50%; } &:first-child:before { display: none; } &:last-child { float: right; } } } .kopa-rating { margin: 0; ul { margin: 0; } } } } } .jp-audio .jp-interface { height: auto; } .jp-controls { padding: 0px; button { float: none; display: inline-block; margin: 0 5px; } } .jp-progress { margin-top: 20px; } .jp-current-time, .jp-duration { margin-top: 15px; } .jp-volume-controls { position: absolute; top: auto; bottom: 0; right: 50%; width: 70px; margin-right: -35px; } } .kopa-rating { width: 100%; margin-bottom: 5px; display: inline-block; position: relative; li { font-size: 13px; float: left; color: #3a2f57; margin-left: 0; &.inactive span:before { content: "\f123"; } } } /*--- kopa-audio-list-widget ---*/ .kopa-social-links { &.style1 { margin-top: 20px; ul { margin: -8px -2px 0; li { display: inline-block; position: relative; margin: 8px 2px 0; a { display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 40px; font-size: 18px; background: none; background: #807a8d; border-radius: 50%; color: #fff; &:hover { background: #38b883; } } } } } &.style2 { margin-top: 20px; ul { margin: -14px -6px 0; li { display: inline-block; position: relative; margin: 14px 6px 0; a { display: inline-block; text-align: center; width: 34px; height: 34px; line-height: 34px; font-size: 18px; background: none; background: #403361; border-radius: 50%; color: #fff; &:hover { background: #38b883; } } } } } } .kopa-audio-list-widget { text-align: left !important; > header { .widget-title { float: left; } .kopa-social-links { float: right; } } a { color: #392f55; &:hover { color: #38b883; } } .widget-thumb { width: 200px; float: left; margin-right: 30px; } .widget-content { overflow: hidden; > header { margin: -5px 0 20px; h3 { font-size: 24px; line-height: 30px; margin-bottom: 0; } p { color: #38b883; a { color: #38b883; &:hover { color: #392f55; } &:first-child { text-transform: capitalize; } } } } .audio-list { margin: 0 -15px; > li { margin: 0 0 8px; a:before { content: '\f01d'; margin-right: 10px; margin-left: 1px; font-size: 20px; float: left; } } } } } /*--- kopa-album-carousel-widget ---*/ .owl-carousel-1 .entry-item { padding: 45px 30px; position: relative; &:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #231d30; opacity: 0.1; filter: Alpha(Opacity = 10); } .entry-thumb { padding-left: 28px; position: relative; > { span { text-align: center; width: 114px; height: 114px; line-height: 114px; font-size: 24px; position: absolute; top: 50%; margin-top: -57px; margin-left: -57px; margin-left: 0; left: 0; background: url(placeholders/post2/1.png); } a { position: relative; } } } &:hover { &:before { opacity: 1; filter: Alpha(Opacity = 100); } .entry-thumb > span { background: url(placeholders/post2/2.png); } } } /*--- kopa-sync-carousel-widget ---*/ .kopa-sync-carousel-widget { overflow: hidden; } .sync1 .entry-item { .entry-thumb { width: 450px; background: #eee; -webkit-transform: scale(0.8) rotate(45deg); -moz-transform: scale(0.8) rotate(45deg); -ms-transform: scale(0.8) rotate(45deg); transform: scale(0.8) rotate(45deg); overflow: hidden; margin: 40px auto; > a { display: block; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 5px solid #eee; z-index: 9; } &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 5px solid #eee; z-index: 9; border: none; background: #1f1b2a; opacity: 0.3; filter: Alpha(Opacity = 30); } } img { -webkit-transform: scale(1.5) rotate(-45deg); -moz-transform: scale(1.5) rotate(-45deg); -ms-transform: scale(1.5) rotate(-45deg); transform: scale(1.5) rotate(-45deg); } &:hover > a:after { opacity: 0; filter: Alpha(Opacity = 0); } } .entry-content { margin-top: 70px; > p { padding: 0 10%; } } .entry-title { font-size: 60px; line-height: 66px; text-transform: uppercase; font-weight: 300; margin-bottom: 15px; } } .thumb-hover { background: rgba(56, 46, 85, 0.7); border: 3px solid #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: Alpha(Opacity = 0); } .thumb-icon { padding: 0; margin: 0; text-align: center; width: 36px; height: 36px; line-height: 32px; font-size: 12px; position: absolute; top: 50%; margin-top: -18px; margin-left: -18px; border: 2px solid #fff; color: #fff; left: 50%; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); &:hover { color: #38b883; } i { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } } .entry-thumb:hover { .thumb-hover { opacity: 1; filter: Alpha(Opacity = 100); } .thumb-icon { -webkit-transform: scale(1) rotate(45deg); -moz-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); &.style1 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } } .sync2 { margin-top: 40px; .item { padding: 0 15px; } .owl-controls { position: absolute; width: 100%; top: -100px; .owl-buttons div { color: #392f55; background: none; padding: 0; margin: 0; border-radius: 0; text-align: center; width: 20px; height: 36px; line-height: 36px; font-size: 36px; position: absolute; top: 50%; margin-top: -18px; margin-left: -10px; opacity: 1; filter: Alpha(Opacity = 100); &:before { display: none !important; } &:hover { color: #38b883; } &.owl-prev { left: 25px; background: url("placeholders/sync/prev.png") no-repeat; } &.owl-next { right: 20px; background: url("placeholders/sync/next.png") no-repeat; } } } } /*--- article-list-1 ---*/ .owl-carousel-2 { .item { padding: 0 15px; } .owl-controls .owl-pagination .owl-page { span { border: 1px solid #eee; } &.active span, &:hover span { background: #38b883; border-color: #38b883; } } .entry-item { border: 3px solid #fff; background: #231d30; padding: 25px; text-align: left; > header { p { color: #38b883; } .entry-title { font-size: 21px; line-height: 27px; margin-bottom: 20px; font-weight: 300; } } .thumb-hover { border: none; opacity: 1; filter: Alpha(Opacity = 100); background: rgba(56, 46, 85, 0.4); } .thumb-icon { -webkit-transform: rotate(-45deg) scale(1); -moz-transform: rotate(-45deg) scale(1); -ms-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); } } } /*--- kopa-masonry-widget ---*/ .kopa-masonry-wrap { margin: -1px; } .ms-item1 { width: 25%; margin: 0; float: left; } .kopa-masonry-widget header { color: #ffffff; } /*--- kopa-countdown-widget ---*/ .kopa-span-rt { display: inline-block; text-align: center; width: 400px; height: 400px; line-height: 400px; font-size: 420px; background: #1b1822; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 80px; left: 50%; margin-left: -200px; } .countdown-wrap { position: relative; padding: 20px 0; &:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: url(placeholders/parallax/png/1.png); } &:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: url(placeholders/parallax/png/1.png); top: auto; bottom: 0; } } .kopa-countdown { text-align: center; margin: -15px -15px 0; li { display: inline-block; margin: 15px 10px 0; display: inline-block; text-align: center; width: 70px; height: 70px; line-height: 30px; font-size: 24px; background: none; border: 3px solid #38b883; color: #38b883; font-weight: 300; border-radius: 50%; h3 { color: #38b883; margin: 10px 0 0; } span { font-size: 12px; color: #fff; text-transform: capitalize; display: block; line-height: 12px; } } } .cd-info { margin-top: 20px; p { margin: 0; color: #8d889a; } } .btn-ca { margin: 20px -4px 0; li { display: inline-block; margin: 10px 4px 0; a { font-family: "Source Sans Pro", sans-serif; color: #fff !important; font-size: 13px; text-transform: uppercase; font-weight: 300; display: inline-block; padding: 10px 22px 10px 62px; position: relative; background: #392f55; i { display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 40px; font-size: 16px; background: #29223d; color: #fff; position: absolute; top: 0; left: 0; } &:hover i { background: #38b883; } } } } .kopa-countdown-widget { margin: 80px auto 40px; padding: 65px 30px 30px; background: #141118; width: 395px; max-width: 100%; .widget-title { color: #fff; margin-bottom: 20px; padding: 0 20px; } .widget-wrap { position: relative; } } /*--- kopa-twitter-1-widget ---*/ .owl-carousel-3 { .owl-controls .owl-pagination { margin-top: 40px; width: 100%; .owl-page { span { background: #1f1b2a; border: 1px solid #fff; width: 9px; height: 9px; } &.active span, &:hover span { background: #fff; } } } .entry-item { .entry-thumb { width: 160px; background: #eee; -webkit-transform: scale(0.8) rotate(45deg); -moz-transform: scale(0.8) rotate(45deg); -ms-transform: scale(0.8) rotate(45deg); transform: scale(0.8) rotate(45deg); overflow: hidden; margin: 10px auto; border: 3px solid #fff; > a { display: block; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; } &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; background: #392f55; opacity: 0.3; filter: Alpha(Opacity = 30); } } img { -webkit-transform: scale(1.5) rotate(-45deg); -moz-transform: scale(1.5) rotate(-45deg); -ms-transform: scale(1.5) rotate(-45deg); transform: scale(1.5) rotate(-45deg); } &:hover > a:after { opacity: 0; filter: Alpha(Opacity = 0); } } .entry-content { margin-top: 50px; font-size: 18px; line-height: 24px; font-weight: 300; .hash-tag { color: #38b883; } .post-content a { text-decoration: underline !important; } .post-info { margin-top: 20px; font-size: 12px; line-height: 18px; font-weight: 400; color: #38b883; text-transform: uppercase; } } } } /*--- kopa-contact-widget ---*/ .contact-box-1, .comment-box-1 { font-weight: 300; text-align: left; } .contact-box-1 { .input-block, .textarea-block { position: relative; margin: 10px 0 0; } } .comment-box-1 { .input-block, .textarea-block { position: relative; margin: 10px 0 0; } } .contact-box-1 { input, textarea { box-shadow: none; border: 1px solid #c7c3dc; background: none; height: 34px; line-height: 34px; padding: 0 10px; width: 100%; color: #fff; } } .comment-box-1 { input, textarea { box-shadow: none; border: 1px solid #c7c3dc; background: none; height: 34px; line-height: 34px; padding: 0 10px; width: 100%; color: #fff; } } .contact-box-1 { input:focus, textarea:focus { background: #191720; outline: 0; } } .comment-box-1 { input:focus, textarea:focus { background: #191720; outline: 0; } } .contact-box-1 { input { &#submit-contact-1, &#submit-comment-1 { line-height: 40px; height: 40px; color: #fff; width: auto; background: #211c2d; text-align: center; padding: 0 20px; margin-top: 20px; border: 0; } } textarea { &#submit-contact-1, &#submit-comment-1 { line-height: 40px; height: 40px; color: #fff; width: auto; background: #211c2d; text-align: center; padding: 0 20px; margin-top: 20px; border: 0; } } } .comment-box-1 { input { &#submit-contact-1, &#submit-comment-1 { line-height: 40px; height: 40px; color: #fff; width: auto; background: #211c2d; text-align: center; padding: 0 20px; margin-top: 20px; border: 0; } } textarea { &#submit-contact-1, &#submit-comment-1 { line-height: 40px; height: 40px; color: #fff; width: auto; background: #211c2d; text-align: center; padding: 0 20px; margin-top: 20px; border: 0; } } } .contact-box-1 { input { &#submit-contact-1:hover, &#submit-comment-1:hover { background: #392f55; } } textarea { &#submit-contact-1:hover, &#submit-comment-1:hover { background: #392f55; } } } .comment-box-1 { input { &#submit-contact-1:hover, &#submit-comment-1:hover { background: #392f55; } } textarea { &#submit-contact-1:hover, &#submit-comment-1:hover { background: #392f55; } } } .contact-box-1 textarea, .comment-box-1 textarea { height: auto; } .contact-box-1 label.error, .comment-box-1 label.error { color: #38b883; position: absolute; top: 0; right: 10px; margin: 0; line-height: 34px; } .contact-box-1 .input-label, .comment-box-1 .input-label { color: #4f4954; margin: 5px 0 5px; } .contact-box-1 .input-label > span { color: #38b883; margin-left: 5px; } .comment-box-1 { .input-label > span { color: #38b883; margin-left: 5px; } .input-block, .textarea-block { margin: 20px 0 0; } input, textarea { border: 1px solid #ded3f0; background: #ded3f0; color: #93909e; } input:focus, textarea:focus { background: #ded3f0; border-color: #c7c3dc; } label.error { color: #4f4954; } } .kopa-span-rt-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #211c2d; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #211c2d; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); background: #1b1822; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } } .kopa-contact-widget { margin: 30px auto 80px; width: 445px; max-width: 100%; position: relative; .widget-title { color: #fff; margin-bottom: 20px; padding: 0 20px; } .widget-wrap { position: relative; padding: 40px; background: #b4afd2; } } /*--- FOOTER ---*/ .kopa-footer { padding: 22px 0; background: url("placeholders/parallax/png/4.png"); border-bottom: 10px solid #382d54; .kopa-social-links { margin-top: 0; ul { margin: -8px -3px 0; li { margin: 8px 3px 0; a { background: #382d54; &:hover { background: #38b883; } } } } } #copyright { margin-top: 25px; } } /* ========================================================= HOME STYLE 2 ============================================================ */ #kopa-page-header.style2 { position: absolute; width: 100%; z-index: 999; background: none; #kopa-header-bottom { padding: 0; #main-menu > li { padding: 5px 0; > ul { top: 40px; } } } } .kopa-header-notification { background: #f42495; position: relative; border: none; padding: 0; border-radius: 0; margin-bottom: 30px; .outer { position: relative; padding: 16px 90px 16px 0; } a { color: #fff; font-size: 16px; line-height: 22px; &:hover { color: #392f55; } } .close { position: absolute; top: 11px; right: 0; font-size: 14px; line-height: 20px; color: #1b1822; padding: 6px 15px; background: #fff; opacity: 1; filter: Alpha(Opacity = 100); outline: none; text-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; height: auto; width: auto; margin-top: 0; i { margin-left: 5px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; border: none; width: auto; height: auto; position: static; margin-top: 0; line-height: 20px; } &:hover { background: #38b883; color: #fff; } } } .kopa-home-2 .kopa-tab.style1 .nav-tabs > li { &.active { > a, > a:focus { background-color: #f64ba8; } } > a:hover { background-color: #f64ba8; } } /*--- owl-carousel-4 ---*/ .owl-carousel-4 { .owl-controls { .owl-buttons div { color: #fff; text-align: center; width: 20px; height: 36px; line-height: 36px; font-size: 28px; position: absolute; top: 50%; margin-top: -18px; margin-left: -10px; margin-left: 0; opacity: 1; filter: Alpha(Opacity = 100); &:hover { color: #38b883; } &.owl-prev { left: 20px; &:before { content: "\f053"; } } &.owl-next { right: 20px; &:before { content: "\f054"; } } } .owl-pagination { margin-top: 40px; width: 100%; width: 100%; position: absolute; left: 0; bottom: 40px; .owl-page { span { width: 14px; height: 14px; margin: 0 5px; opacity: 1; filter: Alpha(Opacity = 100); background: none; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); border: 2px solid #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; &:before { content: ""; height: 1px; width: 10px; background-color: #ffffff; position: absolute; top: 50%; left: -12px; } } &:first-child span:before { display: none; } &.active span, &:hover span { background: #38b883; } } } } .thumb-hover { border: none; opacity: 1; filter: Alpha(Opacity = 100); background: url("images/background/2.png"); background-size: cover; } .entry-item { text-align: center; position: relative; .entry-content { width: 100%; position: absolute; left: 0; bottom: 195px; padding: 0; a { color: #fff; &:hover { color: #38b883; } } h5 { font-family: "Lato", sans-serif; font-size: 18px; line-height: 24px; font-weight: 300; text-transform: uppercase; margin-bottom: 20px; } } .entry-title { letter-spacing: 1px; font-weight: 600; margin-bottom: 0; a { text-transform: uppercase; display: inline-block; background: rgba(25, 23, 32, 0.8); color: #fff !important; font-size: 40px; line-height: 46px; padding: 23px 50px; &:hover { background: #38b883; } } } .slider-link { display: inline-block; font-size: 18px; line-height: 24px; font-weight: 300; text-transform: uppercase; padding: 12px 30px; border: 1px solid #fff; color: #fff; margin-top: 55px; &:hover { color: #38b883; border-color: #38b883; } } } } .loading { background: rgba(255, 255, 255, 0.9); min-height: 739px; width: 100%; position: absolute; top: 0; left: 0; z-index: 9; > i { position: absolute; top: 50%; left: 50%; font-size: 30px; margin-left: -13px; margin-top: -15px; } } .home-slider-box-2 .loading { position: relative; } /*--- kopa-audio-list-1-widget ---*/ .kopa-audio-list-1-widget { > ul { margin: 0 0 0 -1px; > li { width: 33.33333%; float: left; margin: 0; border-left: 1px solid #606065; } } .thumb-hover { border: none; opacity: 1; filter: Alpha(Opacity = 100); background: rgba(73, 65, 109, 0.4); } a { color: #fff; &:hover { color: #f42495; } } .entry-item { position: relative; .entry-content { position: absolute; left: 0; bottom: 0; width: 100%; } .entry-title { font-size: 42px; line-height: 48px; font-weight: 700; text-transform: uppercase; margin-bottom: 0; padding: 0 30px; } .entry-author { font-size: 15px; line-height: 20px; font-weight: 300; text-transform: uppercase; color: #f42495; padding: 0 30px; margin-bottom: 25px; } } .jp-audio { background: #231d30; position: relative; .jp-interface { padding: 35px 115px 0 90px; } .jp-controls { padding: 0; position: absolute; top: 20px; left: 30px; } .jp-progress { margin-top: 0; } .jp-play-bar { background: #f42495; } .jp-volume-controls { right: 30px; } } .jp-stop, .jp-previous, .jp-next, .jp-play { border-color: #f42495; } .jp-stop:hover, .jp-previous:hover, .jp-next:hover, .jp-play:hover { border-color: #38b883; } } /*--- kopa-countdown-2-widget ---*/ .cd-title { font-family: "Lato", sans-serif; font-size: 60px; line-height: 66px; text-transform: uppercase; margin-bottom: 35px; } .cd-date { font-size: 40px; line-height: 46px; text-transform: uppercase; margin-bottom: 20px; } .kopa-countdown-2 { text-align: center; margin: -40px -36px 0; li { display: inline-block; margin: 70px 36px 0; h3 { font-family: "Lato", sans-serif; font-weight: 700; margin: 10px 0 0; display: inline-block; text-align: center; width: 100px; height: 100px; line-height: 96px; font-size: 40px; background: none; border: 2px solid #392f55; border-radius: 50%; } span { font-size: 14px; color: #f42495; text-transform: capitalize; display: block; margin-top: 15px; } } } .kopa-single-event .kopa-countdown-2 li span { color: #ffffff; } /*--- article-list-2 ---*/ .thumb-icon.style1 { text-align: center; width: 74px; height: 74px; line-height: 68px; font-size: 30px; position: absolute; top: 50%; margin-top: -37px; margin-left: -37px; border-width: 3px; color: #fff; left: 50%; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); background: url("images/background/2.png"); background-size: cover; border-radius: 50%; &:hover { border-color: #fff; color: #fff; } i { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .entry-view-1 { padding: 15px 13px; background: #f64ba8; color: #fff; p { font-size: 14px; font-weight: 700; margin-bottom: 0; } span { font-size: 12px; line-height: 10px; display: block; text-transform: capitalize; } } .article-list-2 { padding-bottom: 70px; border-bottom: 1px solid #443f4f; > ul { margin: -30px 0 0; > li { margin-top: 30px; } } .thumb-hover { border: none; opacity: 1; filter: Alpha(Opacity = 100); background: rgba(73, 65, 109, 0.4); } .entry-item { text-align: left; .entry-thumb { margin-bottom: 30px; } .entry-content { .entry-view-1 { float: left; margin-right: 25px; } .content-wrap { overflow: hidden; .entry-date { margin: 0 0 5px; display: block; color: #f64ba8; font-weight: 300; } } .entry-title { font-size: 21px; line-height: 28px; margin-bottom: 15px; } } } } /*--- kopa-tab-widget ---*/ .kopa-tab.style1 { .nav-tabs { background: none; margin: 0 -2.5px; border: 0; > li { margin: 0 2.5px; > a { color: #fff !important; margin: 0; text-transform: none; border: none; background: #3a2f57; text-transform: uppercase; padding: 9px 13px; margin-bottom: 0px; border-radius: 0; cursor: pointer !important; position: relative; &:hover { background: #38b883; } } &.active > a { cursor: default; background: #38b883; &:hover, &:focus { cursor: default; background: #38b883; } } } } .tab-content { margin-top: 30px; background: none; padding: 0; } } .kopa-tab-widget .tab-content .tab-pane > ul { margin-top: -30px; > li { margin-top: 30px; } } .kopa-home-2-page .kopa-tab.style1 .nav-tabs > li { &.active > a { background: #f64ba8; &:hover, &:focus { background: #f64ba8; } } > a:hover { background: #f64ba8; } } /*--- kopa-audio-download-widget ---*/ .kopa-audio-download-widget { > ul > li { margin-top: 20px; padding-top: 20px; border-top: 1px solid #443f4f; } .entry-item { .col-left { width: 120px; float: left; margin-right: 30px; span, a { display: inline-block; text-align: center; width: 54px; height: 54px; line-height: 54px; font-size: 24px; background: none; font-family: "Source Sans Pro", sans-serif; color: #fff; background: #f16f5c; background: -moz-linear-gradient(left, #f16f5c 0%, #f6290c 0%, #a34986 0%, #40226b 100%); background: -webkit-gradient(left top, right top, color-stop(0%, #f16f5c), color-stop(0%, #f6290c), color-stop(0%, #a34986), color-stop(100%, #40226b)); background: -webkit-linear-gradient(left, #f16f5c 0%, #f6290c 0%, #a34986 0%, #40226b 100%); background: -o-linear-gradient(left, #f16f5c 0%, #f6290c 0%, #a34986 0%, #40226b 100%); background: -ms-linear-gradient(left, #f16f5c 0%, #f6290c 0%, #a34986 0%, #40226b 100%); background: linear-gradient(to right, #f16f5c 0%, #f6290c 0%, #a34986 0%, #40226b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f16f5c', endColorstr='#40226b', GradientType=1 ); float: left; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } span { &:before { content: ''; display: inline-block; text-align: center; width: 50px; height: 50px; line-height: 50px; font-size: 24px; background: #231d30; position: absolute; top: 2px; left: 2px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } i { position: relative; font-style: normal; } } a { margin-left: 10px; font-size: 20px; &:hover { background: #f42495; } } } .entry-content { overflow: hidden; } .entry-title { font-size: 18px; line-height: 24px; } p { font-weight: 300; text-transform: capitalize; color: #fff; } } } /*--- kopa-single-article-widget ---*/ .kopa-single-article-widget .entry-item { .thumb-hover { border: none; } .entry-thumb { width: 285px; float: left; margin-right: 30px; } .entry-content { overflow: hidden; .entry-date { margin: 0 0 5px; display: block; color: #f64ba8; font-weight: 300; } } .entry-title { font-size: 21px; line-height: 28px; margin-bottom: 15px; } } /*--- kopa-album-2-widget ---*/ .kopa-album-2-widget { > header { background: url("placeholders/parallax/10.jpg") center; background-size: cover; } .jp-audio .jp-play-bar { background: #f42495; } .jp-stop, .jp-previous, .jp-next, .jp-play { border-color: #f42495; } .jp-stop:hover, .jp-previous:hover, .jp-next:hover, .jp-play:hover { border-color: #38b883; } .kopa-album-list .entry-item { .entry-thumb .entry-title a:hover { background: #f42495; } .entry-content { text-align: left; a { color: #4f4954; &:hover { color: #f42495; } } .entry-cat { color: #f42495; a { color: #f42495; &:hover { color: #4f4954; } } } } } } /*--- kopa-event-2-widget ---*/ .event-button { display: inline-block; padding: 3px 7px; border-radius: 5px; background: #bb3d92; background: -moz-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -webkit-gradient(left top, right top, color-stop(0%, #bb3d92), color-stop(0%, #f6290c), color-stop(0%, #a34986), color-stop(100%, #3e216a)); background: -webkit-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -o-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -ms-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: linear-gradient(to right, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb3d92', endColorstr='#3e216a', GradientType=1 ); position: relative; &:before { content: ''; background: #211b2d; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; border-radius: 5px; } span { position: relative; } &:hover:before { background: #bb3d92; } } .kopa-event-2-widget > ul { background: #211b2d; color: #fff; padding: 0; margin: 0; position: relative; a { color: #fff; &:hover { color: #fff; } } &:before { content: ''; display: block; width: 11.80952%; height: 100%; border-right: 1px solid #606065; position: absolute; top: 0; left: 0; } > li { padding: 15px 0; border-bottom: 1px solid #606065; margin: 0; &:hover { background: #bb3d92; background: -moz-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -webkit-gradient(left top, right top, color-stop(0%, #bb3d92), color-stop(0%, #f6290c), color-stop(0%, #a34986), color-stop(100%, #3e216a)); background: -webkit-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -o-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: -ms-linear-gradient(left, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); background: linear-gradient(to right, #bb3d92 0%, #f6290c 0%, #a34986 0%, #3e216a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb3d92', endColorstr='#3e216a', GradientType=1 ); } &:first-child .col-2 { font-size: 18px; line-height: 24px; font-weight: 700; } > div { float: left; min-height: 1px; text-align: left; &.col-1 { width: 11.80952%; text-align: center; p { font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase; margin-top: 2px; } } &.col-2 { width: 21.52381%; padding-left: 30px; text-transform: uppercase; p { margin-top: 5px; } } &.col-3 { width: 50%; padding-left: 18px; font-family: "Source Sans Pro", sans-serif; font-size: 24px; line-height: 30px; font-weight: 300; } &.col-4 { width: 16.66667%; padding-right: 18px; text-align: right; text-transform: uppercase; margin-top: 5px; } } } } /*--- kopa-newsletter-1-widget ---*/ .kopa-newsletter-1-widget { .newsletter-info span { font-size: 16px; line-height: 24px; display: block; font-style: italic; margin-bottom: 5px; } .newsletter-form { position: relative; margin-top: 30px; .input-area { position: relative; width: 80%; padding: 0 10px 0 55px; float: left; > { span { display: inline-block; text-align: center; width: 56px; height: 46px; line-height: 46px; font-size: 16px; background: none; border: 1px solid #fff; color: #fff; position: absolute; top: 0; left: 0; } input { width: 100%; background: none; border: 1px solid #fff; padding: 0 17px; height: 46px; outline: none !important; } } label.error { color: #38b883; position: absolute; top: 0; right: 10px; margin: 0; line-height: 46px; } } .search-submit { width: 20%; float: left; background: #f42495; border: 1px solid #fff; color: #fff; text-transform: capitalize; outline: none !important; height: 46px; text-align: center; span { color: #fff; } &:hover { background: #392f55; } } } } /*--- kopa-album-page-widget ---*/ .jp-audio { &.kopa-jp-wrap4, &.kopa-jp-wrap5 { .jp-playlist ul { display: block !important; } .jp-interface { height: auto; background: #403361; padding: 20px; > footer { margin-top: 20px; position: relative; padding-right: 140px; .jp-progress { margin-top: 0; } .jp-time-holder { position: absolute; top: -7px; right: 90px; } .jp-volume-controls { top: -6px; right: 0; } } .jp-controls { padding: 0; float: left; } .current-track { overflow: hidden; padding-left: 20px; p { font-size: 16px; line-height: 22px; text-transform: capitalize; color: #fff; margin-top: 8px; } } } } } /*--- kopa-shortcode-tracklist---*/ .jp-playlist ul { font-size: 14px; font-weight: 600; text-transform: capitalize; li { list-style: none !important; padding: 0 0 0 38px; margin: 0; border: none; position: relative; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d2cfe2; &:first-child { padding-left: 38px !important; margin-top: 0; padding-top: 10px; border-top: none; } &:last-child { padding: 10px 0 0 38px !important; } &:before { content: '\f04b'; color: #6a609f; border: 1px solid #6a609f; padding-left: 2px; display: inline-block; text-align: center; width: 18px; height: 18px; line-height: 16px; font-size: 6px; background: none; border-radius: 50%; position: absolute; top: 11px; left: 0; } &.jp-playlist-current { padding-left: 38px !important; &:before { content: '\f04c'; padding-left: 0; } a { color: #6a609f !important; } } a { color: #4f4954 !important; } } } .mCSB_inside > .mCSB_container { margin-right: 20px; } .mCSB_scrollTools { width: 8px; .mCSB_draggerRail { width: 100%; background: #4f4954; border-radius: 8px; } .mCSB_dragger .mCSB_dragger_bar { width: 100%; background: #9c97aa !important; border-radius: 8px; } } .kopa-album-page-widget { text-align: left !important; h3 { font-size: 28px; line-height: 34px; text-transform: capitalize; } .col-left { width: 300px; float: left; margin-right: 30px; .album-thumb { margin-bottom: 20px; } .album-info { margin-bottom: 20px; li { margin: 5px 0 0; color: #38b883; &:first-child { margin: 0; } span { color: #392f55; } a { color: #392f55; &:hover { color: #38b883; } } } } } .col-right { overflow: hidden; } .audio-description { color: #4f4954; } .video-wrap { h3 { margin-bottom: 20px; } iframe { width: 100%; border: none; } } .jp-playlist { margin-top: 20px; max-height: 320px; } } /* WordPress default widget ---------------------------------- */ .widget_archive ul { margin: 0; padding: 10px 0; background-color: #ffffff; li { float: none; margin: 0; list-style: none; padding: 20px 30px; border-top: 1px solid #d7d5dd; line-height: 30px; &:first-child { border-top: none; } &:before { content: "\f178"; color: #392f55; border: 1px solid #392f55; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-right: 20px; height: 30px; width: 30px; text-align: center; line-height: 28px; font-size: 12px; } a { color: #392f55; &:hover { color: #38b883; } } &:hover:before { color: #ffffff; background-color: #392f55; } } } /* Woocommerce default widget ---------------------------------- */ .widget_top_rated_products ul.product_list_widget { margin-top: -10px; li { position: relative; margin: 0; padding: 10px 0 !important; border-bottom: 1px solid #211c2d; > a { display: block; float: none; font-size: 18px; font-weight: 700; margin-bottom: 8px; img { width: 75px; height: 75px; margin-right: 10px; margin-left: 0; box-shadow: 0 0 0 transparent; -ms-box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; float: left; } } .amount { font-size: 16px; color: #403361; } ins { text-decoration: none; .amount { position: static; } } del .amount { text-decoration: line-through; } .star-rating { line-height: 13px; margin-bottom: 8px; span:before { color: #403361; } } } } /**3.4 Bottom sidebar**/ .footer-social-box { background-color: #191720; position: relative; z-index: 2; .socials-link { padding: 0; margin: 0; li { float: left; margin: 0; list-style: none; text-align: center; width: 33.333333%; padding: 20px 0; border-right: 1px solid #25202d; &:first-child { border-left: 1px solid #25202d; } a { color: #ffffff; display: inline-block; &:hover { color: #38b883; } i { font-size: 20px; margin: 0 10px 0 0 !important; } span { font-size: 16px; font-weight: 300; font-family: "Source Sans Pro", sans-serif; } } } } } #kopa-page-footer { background-size: cover !important; position: relative; z-index: 2; .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(57, 47, 85, 0.8); z-index: 0; } #bottom-sidebar { padding: 80px 0 40px; position: relative; z-index: 1; color: #ffffff; line-height: 24px; .row { margin-right: -30px; margin-left: -30px; > div { padding-left: 30px; padding-right: 30px; a { color: #38b883; &:hover { color: #ffffff; } } } } #footer-logo-image { margin-bottom: 35px; } .widget { margin-bottom: 40px; .widget-title { color: #ffffff; } } } } /** * 4. Footer * ----------------------------------------------------------------------------- */ #kopa-footer { border-top: 1px solid #807a8d; position: relative; z-index: 1; padding: 25px 0; } #back-top { margin-bottom: 0; z-index: 1; position: absolute; left: 50%; top: -30px; a { text-transform: uppercase; font-size: 18px; color: #ffffff; line-height: 32px; position: relative; display: block; z-index: 1; i { position: relative; z-index: 10; } &:before { content: ''; position: absolute; border-left: 32px solid transparent; border-right: 32px solid transparent; border-top: 32px solid #6a609f; bottom: -5px; left: 50%; margin-left: -32px; left: -23px; margin-left: 0; } &:hover:before { border-top-color: #38b883; } } } .dark-bg .pagination .page-numbers .current .page-numbers { color: white; } .artist-content iframe, .kopa-album-page-widget .col-right iframe { width: 100%; } .wp-caption-text, .gallery-caption, .bypostauthor {} #logo-image.logo-text{ & > a > #site-title{ display: block; margin: 0px; padding: 0px; font-size: 30px; line-height: 30px; color: #FFF; text-transform: uppercase; } } .tag-box.category-box{ margin-bottom: 15px !important; } /* * -------------------------------------------------- * WORDPRESS REQUIRED BY THEME-CHECK * -------------------------------------------------- */ .wp-caption { font-size: inherit; max-width: 100%; } .wp-caption-text { font-size: inherit; } .sticky { font-size: inherit; } .gallery-caption { font-size: inherit; } .bypostauthor { font-size: inherit; } img { max-width: 100%; height: auto; } .alignnone { max-width: 100%; } .alignleft { display: inline; float: left; margin-right: 10px; } .alignright { display: inline; float: right; margin-left: 10px; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }