/*! * Bokeh Template (http://themeforest.net/users/imangm) * Copyright 2014 ImanGM */ /*------------------------------------------------- = Table of Css 1. Base Elements 2. Body 3. Header 4. Navigation 5. Page Banner 6. Breadcrumb 7. Page Content 8. Typography 9. Blog Author Box 10. Related Posts 11. Blog Comments 12. Tooltip & PopOver 13. Footer 14. Sidebar 15. Search Widget 16. Recent Posts 17. Tag Cloud Widget 18. Blog Grid 19. Blog List 20. Contact Page 21. Iconned Lists 22. Contact Form 23. Portfolio Single 24. Related Portfolio 25. OWL Slider 25.1 OWL - Image Slider 26. Isotope 27. Services 28. Steps 29. Image Boxes 30. Team Members 31. Testimonials 32. Clients 33. Off Canvas Menu 34. 3d Menu 35. Post Slider 36. Full Width Image 37. Back to Top 38. Button 39. Google Search 40. WP Required Classes 41. WP Widgets 42. Visual Composer Fixes 43. VC Accordions -------------------------------------------------*/ /*-------------------------------------------------------*/ /* 1. Base Elements /*-------------------------------------------------------*/ .container { -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold; } div, p, a { color: #eeeeee; } img { max-width: 100%; height: auto; } a:hover { color: #ffffff; } blockquote { border-left: 0; margin: 30px 50px 50px; font-style: italic; } blockquote:before { position: absolute; left: 48px; content: "\f10d"; font-size: 24px; font-family: 'fontawesome'; font-style: normal; } blockquote:after { position: absolute; right: 48px; content: "\f10e"; font-size: 24px; font-family: 'fontawesome'; font-style: normal; } table { width: 100%; margin-bottom: 20px; } table thead { background-color: #0f9db1; color: #fff; } table tbody tr { background-color: rgba(0,0,0,0.3); border-bottom: 1px solid #333333; } table tbody tr:hover{ background: #000000; } table thead th, table thead td { padding: 8px; } table tbody th, table tbody td { padding: 8px; } .videoplay iframe { border: 0; } /*-------------------------------------------------------*/ /* 2. Body /*-------------------------------------------------------*/ body { padding-top: 120px; font-family: "Open Sans", "Roboto Slab", "Noto Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; background: url('../upload/bg/bgp-hd.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } body:after { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: rgba(0,0,0,0.3); /* background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAEklEQVQIW2NkQIB6RnROPUwAABlDAYFEBeIlAAAAAElFTkSuQmCC') repeat; */ background-attachment: fixed; content: ""; } /* sticky footer */ body > .container { padding-bottom: 50px; } /************************************************************************************/ .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0; } .navbar-brand img { padding-top: 5px; padding-bottom: 5px; width: 130px; margin-top: -5px; } /*-------------------------------------------------------*/ /* 3. Header /*-------------------------------------------------------*/ header .navbar-inverse { margin-top: 35px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } header.active .navbar-inverse { margin-top: 0; min-height: 70px; background-color: #000; background-color: rgba(0,0,0,0.5); } header.active .logo2, header:not(.active) .logo { display: inline-block; } header.active .logo, header:not(.active) .logo2 { display: none; } header.active .navbar-right li { padding-top: 10px; padding-bottom: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } header.active .navbar-brand { padding-top: 10px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } header.active .navbar-toggle, header.active .navbar-inverse .navbar-toggle:focus { margin-top: 10px; margin-bottom: 10px; } header.active nav#main-menu { margin-top: 10px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } a.navbar-brand span { display: inline-block; padding-top: 15px; font-size: 24px; font-weight: bold; color: #ffffff; } header.active a.navbar-brand span { color: #000000; } /* Better WPML Menu */ ul.wpml-lang-menu a span { padding-left: 5px; } /*-------------------------------------------------------*/ /* 4. Navigation /*-------------------------------------------------------*/ .navbar-toggle, .navbar-inverse .navbar-toggle:focus { width: 50px; height: 50px; margin: 20px 15px 0 0; padding: 0; text-align: center; border: 0; border-radius: 0; background-color: #000; background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .navbar-inverse .navbar-toggle:hover { color: #fff; background-color: #9e0047; background-color: rgba(158,0,71,0.7); } .navbar-toggle i { color: #f1f1f1; font-size: 24px; } .collapse.in, .collapsing { display: inline-block; position: absolute; top: 0; right: 70px; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-inverse { background-color: transparent; border-color: transparent; } .navbar-brand { padding-top: 0; margin-right: 50px; } .navbar-right li { display: inline-block; padding-top: 0; padding-bottom: 10px; } .navbar-right li a { display: inline-block; width: 50px; height: 50px; font-size: 24px; line-height: 50px; text-align: center; color: #f1f1f1; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .navbar-right li a:hover { color: #fff; background-color: #9e0047; background-color: rgba(158,0,71,1); } /*-------------------------------------------------------*/ /* 5. Page Banner /*-------------------------------------------------------*/ #page-banner { height: 50px; background: #000000; background: rgba(0,0,0,0.2); } #page-banner h2 { display: inline-block; float: left; padding-left: 30px; padding-right: 30px; margin: 0; font-size: 16px; font-weight: normal; line-height: 50px; color: #f1f1f1; } /*-------------------------------------------------------*/ /* 6. BreadCrumb /*-------------------------------------------------------*/ .breadcrumb { float: right; background: none; line-height: 50px; padding: 0 30px 0; margin: 0; } .breadcrumb a, .breadcrumb > .active { color: #f1f1f1; font-size: 13px; } ol.breadcrumb { color: #f1f1f1; font-size: 13px; } /*-------------------------------------------------------*/ /* 7. Page Content Area /*-------------------------------------------------------*/ body.page-template-onepage-php #ajax-loader h1 { margin-top: 80px; } #content-inner { padding: 30px; min-height: 300px; background: rgba(0,0,0,0.6); padding-bottom: 50px; } /*-------------------------------------------------------*/ /* 8. Typography /*-------------------------------------------------------*/ div.divider { border-bottom: 1px solid #666; margin: 30px auto 60px; max-width: 600px; } div.spacer { margin-bottom: 50px; } div.spacer.small { margin-bottom: 30px; } div.spacer.large { margin-bottom: 80px; } h4.underlined { clear: both; margin-top: 0; padding-bottom: 25px; margin-bottom: 30px; text-align: left; color: #ffffff; font-size: 24px; border-bottom: 2px solid #9e0047; display: inline-block; } h1.main-title { clear: both; width: 100%; margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 36px; text-transform: uppercase; letter-spacing: 5px; color: #ffffff; } h2.main-title { clear: both; width: 100%; margin-top: 30px; margin-bottom: 50px; text-align: center; font-size: 28px; text-transform: uppercase; letter-spacing: 4px; color: #ffffff; } h4.page-titles { clear: both; margin-top: 0; margin-bottom: 50px; text-align: center; color: #ffffff; font-size: 22px; } .main-title:after, .page-titles:after { content: ""; width: 200px; border-bottom: 2px solid #9e0047; display: block; margin: auto; margin-top: 25px; } .excerpt { text-align: center; margin-bottom: 50px; } .featured-image { margin-left: -30px; margin-right: -30px; } .featured-image img { width: 100%; height: auto; } .video-format-image-container { margin-left: -30px; margin-right: -30px; } .blog-details { text-align: center; } .blog-details .blog-date { display: inline-block; margin-bottom: 30px; padding-right: 20px; padding-left: 20px; height: 50px; line-height: 50px; letter-spacing: 2px; background-color: #9e0047; background-color: rgba(158,0,71,0.7); color: #eeeeee; } .blog-details .blog-date a { color: #eeeeee; text-decoration: none; } .blog-details .blog-info { font-size: 12px; margin-bottom: 30px; color: #eeeeee; } .blog-details i.divider { font-style: normal; margin-left: 5px; margin-right: 5px; } .blog-content { margin-bottom: 40px; } .blog-content:after { content: ""; width: 200px; border-bottom: 2px solid #9e0047; display: block; margin: auto; margin-top: 30px; } .blog-more { display: block; margin-bottom: 40px; width: 100%; text-align: center; clear: both; } .blog-more h5 { display: inline-block; margin-top: 0; margin-bottom: 10px; font-size: 13px; font-weight: bold; color: #eeeeee; } .blog-more a { display: inline-block; margin-bottom: 10px; } .blog-more .share-items { margin: 0 0 40px 0; padding: 0; } .blog-more .share-items li { display: inline-block; margin-left: 2px; margin-right: 2px; list-style: none; font-size: 24px; } .blog-more .share-items a { color: #cccccc; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .blog-more .share-items a:hover { color: #ffffff; } .blog-more .blog-tags { font-size: 13px; color: #eeeeee; } .blog-more .blog-tags a { color: #eeeeee; } .blog-more .blog-tags a:hover { color: #ffffff; } /*-------------------------------------------------------*/ /* 9. Blog Author Box /*-------------------------------------------------------*/ .author-box { padding: 20px; margin-bottom: 80px; background-color: #9e0047; background-color: rgba(158,0,71,0.7); } .author-box img { float: left; } .author-box .author-name { display: inline-block; margin-bottom: 10px; font-size: 16px; color: #eeeeee; } .author-box .author-name a { text-decoration: none; font-weight: bold; color: #ffffff; } .author-box .author-content { margin-left: 120px; } .author-box .author-content p { color: #cccccc; } .author-box .author-social { padding: 0; list-style: none; width: 100%; display: inline-block; margin-top: 15px; margin-bottom: 0; } .author-box .author-social a { color: #cccccc; text-decoration: none; } .author-box .author-social a:hover { color: #ffffff; } .author-box .author-social li { display: inline-block; margin-right: 20px; font-size: 12px; text-transform: uppercase; } .author-box .author-social i { margin-right: 5px; } /*-------------------------------------------------------*/ /* 10. Related Posts /*-------------------------------------------------------*/ .blog-related-posts { margin-bottom: 80px; } .blog-related-posts img{ width: 100%; height: auto; } .related-post-item { margin-left: -15px; margin-right: -15px; } .related-post-item .post-info-hover { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 45px; padding-right: 45px; text-align: center; } .post-info-overlay { opacity: 0; position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; background-color: rgba(0,0,0,0.7); } .related-post-item .post-info-hover, .post-info-overlay, .related-post-item .post-info-hover h3, .related-post-item .post-info-hover div, .related-post-item .post-info-hover a.read-more { -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .related-post-item .post-info-hover h3 { position: absolute; width: 100%; margin: 0; padding-left: 30px; padding-right: 30px; top: 0; left: 0; font-size: 18px; text-align: center; color: #eeeeee; line-height: 1.4; } .related-post-item .post-info-hover a.read-more { position: absolute; left: 40%; top: 43%; } .related-post-item .post-info-hover a.read-more i { font-size: 30px; } .related-post-item .post-info-hover > div { position: absolute; width: 100%; padding-left: 30px; padding-right: 30px; left: 0; bottom: 0; font-size: 13px; text-align: center; } .related-post-item.active .post-info-hover h3, .related-post-item:hover .post-info-hover h3 { top: 25px; } .related-post-item.active .post-info-hover a.read-more, .related-post-item:hover .post-info-hover a.read-more { left: 45%; left: calc(50% - 12px); color: #eeeeee; } .related-post-item .post-info-hover a.read-more:hover { color: #ffffff; } .related-post-item.active .post-info-hover > div, .related-post-item:hover .post-info-hover > div { bottom: 25px; } .related-post-item.active .post-info-hover, .related-post-item.active .post-info-overlay, .related-post-item:hover .post-info-hover, .related-post-item:hover .post-info-overlay { opacity: 1; } .related-post-date, .related-post-author { color: #eeeeee; } /*-------------------------------------------------------*/ /* 11. Blog Comments /*-------------------------------------------------------*/ .blog-comments-area { } ol.comments, ol.comments ol.children, ol.comments > li, ol.comments ol.children > li { list-style: none; margin: 0; padding: 0; } ol.comments ol.children { margin-left: 40px; } ol.comments #respond { margin-top: 30px; } ol.comments { margin-bottom: 50px; } .comment-box { margin-bottom: 1px; background: #000000; background: rgba(0,0,0,0.3); padding: 30px; position: relative; } .bypostauthor .comment-box { background-color: #9e0047; background-color: rgba(158,0,71,0.7); } .comment-box .comment-content > h4 { margin-top: 0; color: #eeeeee; } .comment-box img { float: left; width: 70px; height: 70px; } .comment-box .comment-content { margin-left: 95px; } .comment-box .comment-content p { color: #cccccc; } .comment-box .comment-info { position: absolute; right: 30px; top: 30px; font-size: 12px; text-transform: uppercase; color: #cccccc; } .comment-box .comment-info .comment-reply { text-decoration: none; color: #cccccc; } .comment-box .comment-info .comment-reply:hover { color: #ffffff; } .comment-box i.divider { font-style: normal; margin-left: 5px; margin-right: 5px; } #respond input, #respond textarea { background-color: #000000; background-color: rgba(255,255,255,0.2); color: #ffffff; border: 0; } #respond input { height: 50px; } #respond textarea { height: 190px; } #respond input, #respond textarea { width: 100%; padding: 20px; margin-bottom: 20px; outline-color: #9e0047; } #respond input[type="submit"] { background-color: #9e0047; background-color: rgba(158,0,71,0.7); width: auto; float: right; padding: 0 25px; line-height: 50px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } #respond input[type="submit"]:hover { background-color: #9e0047; } #respond h3#reply-title { clear: both; margin-top: 0; padding-bottom: 25px; margin-bottom: 30px; text-align: left; color: #ffffff; font-size: 22px; border-bottom: 2px solid #9e0047; display: inline-block; } /*-------------------------------------------------------*/ /* 12. ToolTip /*-------------------------------------------------------*/ .tooltip.top .tooltip-arrow { border-top-color: #9e0047; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #9e0047; } .tooltip-inner { background-color: #9e0047; } .tooltip { font-size: 13px; } .popover.fade.left { margin-top: -5px; } /*-------------------------------------------------------*/ /* 13. Footer /*-------------------------------------------------------*/ .footer { margin-bottom: 30px; margin-top: 10px; min-height: 50px; height: 50px; border-color: #080808; bottom: 0; width: 100%; z-index: 10; } .footer .footer-logo { float: left; overflow: hidden; margin: 0; padding-right: 30px; font-size: 18px; line-height: 50px; font-weight: bold; text-transform: uppercase; color: #fff; } .footer .footer-copyright { float: left; padding-left: 30px; padding-right: 30px; line-height: 50px; } .footer .footer-copyright p { color: #f1f1f1; margin: 0; } .footer .footer-social { float: right; list-style: none; margin: 0; padding: 0; } .footer .footer-social li { display: inline; } .footer .footer-social li a { display: inline-block; width: 50px; text-align: center; color: #f1f1f1; font-size: 18px; line-height: 50px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .footer .footer-social li a:hover { background-color: #9e0047; background-color: rgba(158,0,71,0.5); } /*-------------------------------------------------------*/ /* 14. Sidebar /*-------------------------------------------------------*/ #sidebar-area { /* background-color: #9e0047; background-color: rgba(158,0,71,0.3); */ min-height: 500px; /* margin-top: -30px; */ margin-bottom: -30px; padding: 1px 30px 10px; } #sidebar-area.right-sidebar { margin-right: -30px; } #sidebar-area.left-sidebar { margin-left: -30px; } #sidebar-area .widget { margin: 20px auto 30px; } #sidebar-area .widget > h4 { clear: both; margin-top: 0; padding-bottom: 15px; margin-bottom: 15px; text-align: left; color: #ffffff; font-size: 18px; border-bottom: 2px solid #9e0047; display: inline-block; } /*-------------------------------------------------------*/ /* 15. Search Widget /*-------------------------------------------------------*/ .sidebar-searchbox { position: relative; } .sidebar-searchbox input { width: 100%; height: 50px; margin: 10px auto; padding-left: 20px; padding-right: 40px; background-color: #000000; background-color: rgba(255,255,255,0.2); color: #ffffff; border: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .sidebar-searchbox input:focus, .sidebar-searchbox input:hover { outline-color: #9e0047; } .sidebar-searchbox:after { position: absolute; top: 20px; right: 15px; margin-left: 5px; font-family: 'FontAwesome'; font-size: 20px; color: #999; content: '\f002'; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .sidebar-searchbox:hover:after { color: #ffffff; } .excerpt form.sidebar-searchbox { margin-left: -15px; margin-right: -15px; } /*-------------------------------------------------------*/ /* 16. Recent Posts Widget /*-------------------------------------------------------*/ .widget .recent-posts h4.media-heading{ font-size: 14px; line-height: 18px; } .widget .recent-posts .media-object { box-shadow: #000 0em 0em 0em; nowhitespace: afterproperty; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .widget .recent-posts .media-object:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-backface-visibility: hidden; } .widget .recent-posts aside { font-size: 12px; } .recent-posts img.media-object { max-width: 70px; } /*-------------------------------------------------------*/ /* 17. Tag Cloud Widget /*-------------------------------------------------------*/ .tagcloud { margin-top: 15px; } .tagcloud a { display: inline-block; padding: 6px 10px; margin-right: 6px; margin-bottom: 10px; color: #999; font-size: 13px; background-color: #000; background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .tagcloud a:hover { text-decoration: none; color: #fff; background-color: rgba(158,0,71,0.5); } /*-------------------------------------------------------*/ /* 18. Blog Grid /*-------------------------------------------------------*/ .blog-grid img { width: 100%; height: auto; } .blog-grid-item { background: #000000; background: rgba(0,0,0,0.3); overflow: hidden; margin-bottom: 30px; } .blog-grid-item .img-link img, .blog-list-post .img-link img { box-shadow: #000 0em 0em 0em; nowhitespace: afterproperty; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .blog-grid-item .img-link img:hover, .blog-list-post .img-link img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-backface-visibility: hidden; } .blog-grid-content { padding: 30px 0 30px 30px; min-height: 200px; overflow: hidden; } .blog-grid-item .blog-grid-content h3 { clear: both; margin-top: 0; padding-bottom: 15px; margin-bottom: 20px; text-align: left; font-size: 18px; border-bottom: 2px solid #9e0047; display: inline-block; line-height: 1.4; } .blog-grid-content p { color: #eeeeee; } .blog-grid-item .blog-grid-content h3 a { text-decoration: none; color: #ffffff; } .blog-grid-controls { float: right; width: 50px; margin-left: 30px; margin-top: 15px; } .blog-grid-controls a { display: block; width: 50px; height: 50px; margin-bottom: 10px; font-size: 24px; text-align: center; line-height: 50px; background: #000000; color: #eeeeee; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .blog-grid-controls a:hover { background-color: #9e0047; background-color: rgba(158,0,71,0.7); color: #ffffff; } /*-------------------------------------------------------*/ /* 19. Blog List /*-------------------------------------------------------*/ .blog-list-post { background: #000000; background: rgba(0,0,0,0.3); padding: 0 0 10px; margin-bottom: 50px; } .sticky .blog-list-post { background: #333333; } .blog-list-featured-image { overflow: hidden; } .blog-list-featured-image img { width: 100%; } .blog-list-content { padding: 0 120px; } .blog-list-content > h2 { clear: both; margin-top: 0; margin-bottom: 30px; text-align: center; color: #ffffff; font-size: 30px; letter-spacing: 2px; font-weight: normal; } .blog-list-content > h2:after { content: ""; width: 200px; border-bottom: 2px solid #9e0047; display: block; margin: auto; margin-top: 25px; } .col-md-5 .blog-list-content { padding: 0 30px; } .col-md-5 .blog-list-content > h2 { font-size: 24px; letter-spacing: 1px; } .blog-list-title a { text-decoration: none; color: #eeeeee; } .blog-list-title a:hover { color: #ffffff; } .blog-list-excerpt { margin-bottom: 30px; color: #eeeeee; } /* Pagination */ ul.page-numbers { margin-bottom: 38px; padding-left: 0; text-align: center; } ul.page-numbers li { display: inline-block; margin-left: 2px; margin-right: 2px; } ul.page-numbers li a, ul.page-numbers li span { display: inline-block; background: #eeeeee; padding: 5px 10px; text-decoration: none; font-size: 13px; color: #000; transition: all 0.17s ease-in-out; -moz-transition: all 0.17s ease-in-out; -webkit-transition: all 0.17s ease-in-out; -o-transition: all 0.17s ease-in-out; } ul.page-numbers li a.active, ul.page-numbers li a:hover, ul.page-numbers li span { background-color: #9e0047; background-color: rgba(158,0,71,0.7); color: #fff; } /*-------------------------------------------------------*/ /* 20. Contact Page /*-------------------------------------------------------*/ .contact-map { margin-left: -30px; margin-right: -30px; margin-bottom: 80px; } .contact-map #map_canvas{ width: 100%; height: 380px; } #map-content h3 { font-size: 24px; color: #9e0047; } #map-content h3 { clear: both; margin-top: 10px; margin-bottom: 20px; text-align: center; color: #333333; font-size: 24px; letter-spacing: 2px; } #map-content h3:after { content: ""; width: 200px; border-bottom: 2px solid #9e0047; display: block; margin: auto; margin-top: 15px; } #map-content p { color: #333333; } /*-------------------------------------------------------*/ /* 21. Iconned Lists /*-------------------------------------------------------*/ ul.iconned-list { margin: 0; padding: 0; } ul.iconned-list li { list-style: none; margin-left: 35px; margin-bottom: 20px; color: #eeeeee; } ul.iconned-list li i { width: 22px; text-align: center; left: 15px; position: absolute; color: #9e0047; margin-right: 15px; font-size: 22px; } /*-------------------------------------------------------*/ /* 22. Contact Form /*-------------------------------------------------------*/ .wpcf7 input, .wpcf7 textarea { background-color: #000000; background-color: rgba(255,255,255,0.2); color: #ffffff; border: 0; } .wpcf7 input { height: 50px; } .wpcf7 textarea { height: 190px; } .wpcf7 input, .wpcf7 textarea { width: 100%; padding: 20px; margin-bottom: 20px; outline-color: #9e0047; } /* Contact Form fix on FF add to line 1560 or later */ .wpcf7 input, #respond input { padding: 0 20px; } .wpcf7 input[type="submit"] { background-color: #9e0047; background-color: rgba(158,0,71,0.7); width: auto; float: right; padding: 0 25px; line-height: 50px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .wpcf7 input[type="submit"]:hover { background-color: #9e0047; } /*-------------------------------------------------------*/ /* 23. Portfolio Single /*-------------------------------------------------------*/ .portfolio-featured-image { margin-left: -30px; margin-right: -30px; margin-bottom: 80px; } .portfolio-featured-image img { width: 100%; height: auto; } .portfolio-more:before { content: ""; width: 200px; border-bottom: 2px solid rgba(15, 157, 177, 1); display: block; margin: auto; margin-bottom: 30px; } .blog-more.portfolio-more { margin-bottom: 80px; } /*-------------------------------------------------------*/ /* 24. Related Portfolio /*-------------------------------------------------------*/ .portfolio-related-posts { margin-bottom: 50px; margin-left: -30px; margin-right: -30px; } .related-portfolio-item { overflow: hidden; } .portfolio-related-posts img{ width: 100%; height: auto; } .portfolio-info-overlay { opacity: 0; position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: #9e0047; background-color: rgba(158,0,71,0.7); } .related-portfolio-item:hover .portfolio-info-hover, .related-portfolio-item:hover .portfolio-info-overlay { opacity: 1; } .related-portfolio-item .portfolio-info-hover, .portfolio-info-overlay, .related-portfolio-item .portfolio-info-hover h3, .related-portfolio-item .portfolio-info-hover .related-portfolio-icon, .related-portfolio-item .portfolio-info-hover a.read-more, .related-portfolio-item .portfolio-info-hover .related-portfolio-categories { -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .related-portfolio-item .portfolio-info-hover { opacity: 0; position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%; /* height: 100%; */ padding-left: 30px; padding-right: 30px; text-align: center; } .related-portfolio-item .portfolio-info-hover h3 { width: 100%; margin: 0; font-size: 20px; line-height: 1.3; text-align: center; padding-top: 80px; color: #eeeeee; } .related-post-item .post-info-hover h3 a { color: #eeeeee; text-decoration: none; } .related-portfolio-item:hover .portfolio-info-hover h3 { padding-top: 110px; } .related-portfolio-item .related-portfolio-icon { position: absolute; width: 100%; margin: 0; padding-left: 30px; padding-right: 30px; top: 0; left: 0; font-size: 48px; text-align: center; } .related-portfolio-item:hover .portfolio-info-hover .related-portfolio-icon { top: 25px; color: #eeeeee; } .related-portfolio-item .portfolio-info-hover a.read-more i { font-size: 30px; } .related-portfolio-item .portfolio-info-hover a.read-more { position: absolute; width: 100%; margin: 0; padding-top: 100px; padding-left: 30px; padding-right: 30px; /* bottom: 0; */ left: 0; font-size: 30px; text-align: center; color: #eeeeee; } .related-portfolio-item:hover .portfolio-info-hover a.read-more { /* bottom: 25px; */ padding-top: 15px; color: #ffffff; } .related-portfolio-item .related-portfolio-categories { width: 100%; margin: 0; font-size: 14px; text-align: center; padding-top: 0; } .related-portfolio-item:hover .related-portfolio-categories { padding-top: 10px; color: #eeeeee; } .related-portfolio-item a img { box-shadow: #000 0em 0em 0em; nowhitespace: afterproperty; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .related-portfolio-item:hover a img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-backface-visibility: hidden; } /*-------------------------------------------------------*/ /* 25. OWL Slider /*-------------------------------------------------------*/ .owl-theme .owl-controls { margin-top: 30px; } .team-members .owl-theme .owl-controls { margin-top: 0; } .owl-theme .owl-controls .owl-nav div { position: relative; display: inline-block; margin: 5px; width: 50px; height: 50px; color: rgba(255,255,255,0.7); background-color: #9e0047; background-color: rgba(158,0,71,0.3); -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .owl-theme .owl-controls .owl-nav div:hover { color: rgba(255,255,255,1); background-color: rgba(158,0,71,1); } .owl-theme .owl-controls .owl-nav div:before { height: 50px; line-height: 50px; top: 0; left: 50%; margin-left: -4px; position: absolute; font-size: 24px; font-family: 'fontawesome'; font-style: normal; } .owl-theme .owl-controls .owl-nav .owl-prev:before { content: "\f104"; } .owl-theme .owl-controls .owl-nav .owl-next:before { content: "\f105"; } .owl-theme .owl-dots { -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .owl-theme .owl-dot { display: inline-block; width: 12px; height: 12px; background: rgba(255,255,255,0.3); margin-left: 5px; margin-right: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .owl-theme .owl-dot:hover, .owl-theme .owl-dot.active { background: rgba(255,255,255,1); } /*-------------------------------------------------------*/ /* 25.1 OWL - Image Slider /*-------------------------------------------------------*/ .slider-container { clear: both; margin-left: -30px; margin-right: -30px; } .slider-container .owl-theme .owl-controls { margin-top: 0; } .slider-container .owl-theme .owl-nav div { position: absolute; opacity: 0; width: auto; height: auto; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; color: rgba(255,255,255,0.3); background: transparent; } .slider-container .owl-theme .owl-nav .owl-prev { top: 50%; left: 0; margin-top: -15px; margin-left: 0; } .slider-container .owl-theme .owl-nav .owl-next { top: 50%; right: 0; margin-top: -20px; margin-right: 0; } .slider-container:hover .owl-theme .owl-nav div { opacity: 1; } .slider-container:hover .owl-theme .owl-nav .owl-prev { margin-left: 25px; } .slider-container:hover .owl-theme .owl-nav .owl-next { margin-right: 25px; } .slider-container .owl-theme .owl-nav div:hover { color: #ffffff; } .slider-container .owl-theme .owl-nav div:before { top: 0; left: 50%; margin-left: -11px; position: absolute; font-size: 30px; font-family: 'fontawesome'; font-style: normal; } .slider-container .owl-theme .owl-nav .owl-prev:before { content: "\f053"; } .slider-container .owl-theme .owl-nav .owl-next:before { content: "\f054"; } .slider-container .owl-theme .owl-dots { position: absolute; bottom: 0; left: 50%; margin-left: -30px; opacity: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .slider-container:hover .owl-theme .owl-dots { opacity: 1; bottom: 15px; } .slider-container .owl-theme .owl-dot { display: inline-block; width: 12px; height: 12px; background: rgba(255,255,255,0.3); margin-left: 5px; margin-right: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .slider-container .owl-theme .owl-dot:hover, .slider-container .owl-theme .owl-dot.active { background: rgba(255,255,255,1); } .portfolio-featured-gallery { margin-bottom: 80px; } /*-------------------------------------------------------*/ /* 26. Isotope /*-------------------------------------------------------*/ .portfolio-filterable { /* margin-bottom: 50px; */ margin-left: -30px; margin-right: -30px; clear: both; } .portfolio-filterable img{ width: 100%; height: auto; } .isotope .isotope-item { width: 25%; } .isotope .isotope-item.w2 { width: 50%; } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item {/* change duration value to whatever you like */ -webkit-transition-duration: 1.0s; -moz-transition-duration: 1.0s; transition-duration: 1.0s; } .isotope { display: none; -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property:-moz-transform, opacity; transition-property:transform, opacity; } ul.filter { display: inline-block; width: 100%; margin-bottom: 40px; padding: 0; text-align: center; } ul.filter li { display: inline-block; } ul.filter li a { display: inline-block; height: 50px; line-height: 50px; padding-right: 15px; padding-left: 15px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; text-decoration: none; color: #cccccc; background-color: #000000; background-color: rgba(0,0,0,0.7); -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -ms-transition: all 0.28s ease; -o-transition: all 0.28s ease; transition: all 0.28s ease; } ul.filter li a i { margin-right: 10px; } ul.filter li a:hover { color: #ffffff; background-color: #9e0047; background-color: rgba(158,0,71,1); } ul.filter li a.active { color: #ffffff; background-color: #9e0047; background-color: rgba(158,0,71,1); } /*-------------------------------------------------------*/ /* 27. Services /*-------------------------------------------------------*/ .service-item { padding: 40px 30px; background: #000000; background: rgba(0,0,0,0.3); -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -ms-transition: all 0.28s ease; -o-transition: all 0.28s ease; transition: all 0.28s ease; } .service-item a, .service-item p, .service-item i { color: #eeeeee; } .service-item a:hover { color: #ffffff; } .service-item.active { background-color: #9e0047; background-color: rgba(158,0,71,0.5); } .service-item:hover { background-color: #9e0047; background-color: rgba(158,0,71,0.3); /* background-color: rgba(0,0,0,0.7); */ } .service-item i.fa { font-size: 48px; float: left; } .service-item:active i.fa, .service-item:focus i.fa, .service-item:hover i.fa { -webkit-animation-name: pop; animation-name: pop; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .service-item:hover i.fa { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0,0,0,0); } .service-item-content { margin-left: 90px; } .service-item-content h3 { margin-top: 0; margin-bottom: 20px; font-size: 21px; } /*-------------------------------------------------------*/ /* 28. Steps /*-------------------------------------------------------*/ .steps { clear: both; margin-left: -30px; margin-right: -30px; margin-bottom: 30px; overflow: hidden; } .steps.steps-4-cols .step-item { width: 25%; } .steps .step-item { position: relative; float: left; padding: 40px 30px; background-color: #000000; background-color: rgba(0,0,0,0.3); background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#1a000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -ms-transition: all 0.28s ease; -o-transition: all 0.28s ease; transition: all 0.28s ease; } .steps .step-item h3, .steps .step-item h3 a, .steps .step-item p { color: #eeeeee; } .steps .step-item:after { position: absolute; width: 50px; height: 50px; top: 0; right: 0; content: " "; } .steps .step-item.active { background-color: #9e0047; background-color: rgba(158,0,71,0.7); } .steps .step-item:hover { background-color: #9e0047; background-color: rgba(158,0,71,0.3); } .steps .step-item.active .step-icon i, .steps .step-item:hover .step-icon i { color: #ffffff; } .steps .step-item h3 { font-size: 20px; text-align: center; } .steps .step-item p { text-align: center; } .steps .step-item .step-icon { width: 100%; font-size: 60px; display: inline-block; text-align: center; color: #9e0047; } .steps .step-item:active .step-icon, .steps .step-item:focus .step-icon, .steps .step-item:hover .step-icon { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); } .steps .step-item .step-icon { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*-------------------------------------------------------*/ /* 29. Image Boxes /*-------------------------------------------------------*/ .image-box { display: inline-block; width: 100%; margin-bottom: 30px; min-height: 200px; background-color: #000000; background-color: rgba(0,0,0,0.3); max-height: 300px; overflow: hidden; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -ms-transition: all 0.28s ease; -o-transition: all 0.28s ease; transition: all 0.28s ease; } .image-box .image { position: relative; float: left; width: 50%; max-height: 300px; overflow: hidden; background-repeat: no-repeat; background-size: cover; } .image-box .image .image-zoom { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -ms-transition: all 0.28s ease; -o-transition: all 0.28s ease; transition: all 0.28s ease; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; } .image-box .image a { font-size: 24px; width: 50px; height: 50px; text-align: center; line-height: 50px; display: inline-block; background-color: #000000; background-color: rgba(0,0,0,0.7); -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -ms-transition: all 0.28s ease; -o-transition: all 0.28s ease; transition: all 0.28s ease; color: #eeeeee; } .image-box .image a:hover { background-color: #9e0047; background-color: rgba(158,0,71,0.7); color: #ffffff; } .image-box .image img { /* width: 100%; height: auto; */ max-height: 100%; width: auto; max-width: none; } .image-box .image-box-content { position: relative; float: left; width: 50%; padding: 30px; } .image-box .image-box-content p, .image-box .image-box-content a { color: #eeeeee; } .image-box .image-box-content a:hover { color: #ffffff; } .image-box .image-box-content:before { position: absolute; content: ""; top: 0; left: 0; border-right: 25px solid transparent; border-top: 20px solid transparent; border-bottom: 20px solid transparent; margin-left: 0; margin-top: 20px; -webkit-transition: 0.28s all 0.1s ease; -moz-transition: 0.28s all 0.1s ease; -ms-transition: 0.28s all 0.1s ease; -o-transition: 0.28s all 0.1s ease; transition: 0.28s all 0.1s ease; } .image-box .image-box-content h3 { margin-top: 0; margin-bottom: 20px; font-size: 20px; } .image-box .image-box-content .image-box-link { display: inline-block; width: 100%; margin-top: 15px; font-size: 30px; text-align: right; } .image-box:hover { background-color: #9e0047; } .image-box:hover .image-box-content:before { border-right-color: #9e0047; margin-left: -23px; } .image-box:hover .image-zoom { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*-------------------------------------------------------*/ /* 30. Team Members /*-------------------------------------------------------*/ .team-members { display: inline-block; width: 100%; } .team-member { position: relative; margin-bottom: 30px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .team-member .team-info { position: relative; overflow: hidden; } .team-member .team-info img { width: 100%; height: auto; box-shadow: #000 0em 0em 0em; nowhitespace: afterproperty; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .members-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 40px 30px; text-align: center; background-color: #000000; background-color: rgba(0,0,0,0.7); opacity: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .members-overlay .team-social { position: absolute; width: 100%; bottom: 40px; left: 0; padding: 0; list-style: none; margin-bottom: -20px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .members-overlay > p { padding-top: 60px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .members-overlay p, .members-overlay a { color: #eeeeee; } .members-overlay .team-social li { display: inline-block; font-size: 30px; margin: auto 5px; } .team-title { background-color: #9e0047; background-color: rgba(158,0,71,0.3); padding: 20px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; border-radius: 0 0 3px 3px; } .team-title h4 { margin-top: 0; margin-bottom: 10px; text-align: center; font-size: 18px; color: #eeeeee; } .team-title p { font-style: italic; text-align: center; margin-top: 0; margin-bottom: 0; color: #eeeeee; } .team-member:hover .members-overlay { opacity: 1; } .team-member:hover .members-overlay .team-social { margin-bottom: 0; } .team-member:hover .members-overlay > p { padding-top: 0; } .team-member:hover .team-info img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-backface-visibility: hidden; } .team-member:hover .team-title { background-color: #9e0047; background-color: rgba(158,0,71,0.7); } /*-------------------------------------------------------*/ /* 31. Testimonials /*-------------------------------------------------------*/ .testimonials { display: block; clear: both; margin-left: -30px; margin-right: -30px; margin-bottom: 30px; background-color: #9e0047; background-color: rgba(158,0,71,0.7); padding: 60px; text-align: center; } .testimonial .quoter-info { margin-top: 30px; text-align: center; } .testimonial .quoter-info strong { color: #ffffff; } .testimonial .quoter-info span { color: #eeeeee; } .testimonials > i.fa { font-size: 80px; color: #eeeeee; } .testimonial > p { font-size: 22px; font-style: italic; color: #dddddd; } .testimonials-slider { margin-top: 30px; } /*-------------------------------------------------------*/ /* 32. Clients /*-------------------------------------------------------*/ .clients { margin-bottom: 30px; display: block; clear: both; } .client { text-align: center; } .client a { display: inline-block; } /*-------------------------------------------------------*/ /* 33. Off Canvas Menu /*-------------------------------------------------------*/ .mp-back { display: none; } nav#main-menu { float: left; margin-top: 0; } nav#main-menu .menu-container .menu-container { box-shadow: 0px 5px 30px rgba(0,0,0,0.4); } nav#main-menu > .menu-container > ul > li{ display: inline-block; position: relative; } /* First Level Menu Buttons */ nav#main-menu > .menu-container > ul > li > a { display: inline-block; height: 50px; padding-left: 20px; padding-right: 20px; font-size: 16px; line-height: 50px; text-align: center; color: #f1f1f1; font-weight: bold; text-decoration: none; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; border-color: rgba(158,0,71,0.7); border-style: solid; border-width: 0; color: #eeeeee; } nav#main-menu > .menu-container > ul > li:hover > a { color: #ffffff; background-color: #9e0047; background-color: rgba(158,0,71,0.97); } nav#main-menu > .menu-container .menu-container ul > li > a { display: inline-block; width: 100%; padding: 10px 15px; text-decoration: none; } nav#main-menu > .menu-container .menu-container ul > li > a:hover { background-color: #000000; background-color: rgba(0,0,0,0.7); } nav#main-menu .menu-container ul, nav#main-menu .menu-container li { padding: 0; margin: 0; list-style: none; } nav#main-menu > .menu-container .menu-container { position: absolute; top: 100%; opacity: 0; z-index: 3; margin: 0; min-width: 200px; background-color: #9e0047; background-color: rgba(158,0,71,0.97); -webkit-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: perspective(350px) rotateX(-90deg); -o-transform: perspective(350px) rotateX(-90deg); transform: perspective(350px) rotateX(-90deg); -webkit-transition:0.2s linear 0s; -o-transition:0.2s linear 0s; transition:0.2s linear 0s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } nav#main-menu > .menu-container .menu-container li { position: relative; } nav#main-menu > .menu-container .menu-container .menu-container { z-index: 2; top: 0; left: 200px; -webkit-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: perspective(350px) rotateY(-90deg); -o-transform: perspective(350px) rotateY(-90deg); transform: perspective(350px) rotateY(-90deg); } nav#main-menu > .menu-container > ul > li:hover > .menu-container { visibility: visible; opacity: 1; -webkit-transform: perspective(350px) rotateX(0deg); -o-transform: perspective(350px) rotateX(0deg); transform: perspective(350px) rotateX(0deg); -webkit-transition:0.28s linear 0s; -o-transition:0.28s linear 0s; transition:0.28s linear 0s; } nav#main-menu > .menu-container .menu-container li:hover > .menu-container { visibility: visible; opacity: 1; -webkit-transform: perspective(350px) rotateY(0deg); -o-transform: perspective(350px) rotateY(0deg); transform: perspective(350px) rotateY(0deg); -webkit-transition:0.28s linear 0.1s; -o-transition:0.28s linear 0.1s; transition:0.28s linear 0.1s; } .menu-item a { color: #eeeeee; } .menu-item a:hover { color: #ffffff; } .mp-menu ul li > a { font-size: 18px; } /*-------------------------------------------------------*/ /* 34. 3D Menu /*-------------------------------------------------------*/ .flip-menu { position: relative; margin-left: -30px; margin-right: -29px; clear: both; } .flip-item { opacity: 0; position: relative; z-index: 1; margin-left: -15px; margin-right: -15px; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-inner { top: 50%; position: absolute; width: 100%; margin-top: -50px; } /* Loading Items with fade in effect */ .flip-item.images-loaded { opacity: 1; -webkit-transition: opacity 0.28s linear; -o-transition: opacity 0.28s linear; transition: opacity 0.28s linear; } .flip-item .flip-content img, .flip-item .flip-hover-content img { width: 100%; height: auto; } /* UPDATED! flip the pane when hovered */ .flip-item:hover .flip-hover-content { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } .flip-item:hover .flip-content { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); opacity: 0; } /* UPDATED v1.1! No Flip Items */ .flip-item.no-flip:hover .flip-content { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } /* flip speed goes here */ .flip-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left:0; -webkit-transition:0.28s; -o-transition:0.28s; transition:0.28s; } /* hide back of pane during swap */ .flip-content, .flip-hover-content { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition:0.5s ease 0.2s; -o-transition:0.5s ease 0.2s; transition:0.5s ease 0.2s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* UPDATED! front pane, placed above back */ .flip-content { background: rgba(158,0,71,1); opacity: 1; z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); overflow: hidden; } /* back, initially hidden pane */ .flip-hover-content { opacity: 0; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); overflow: hidden; background: rgba(0,0,0,0.3); } .flip-item.active .flip-wrapper { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } .flip-item .flip-content.iconned, .flip-item .flip-hover-content.iconned { padding-top: 80px; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .flip-item .flip-content.iconned i.fa, .flip-item .flip-hover-content.iconned i.fa { font-size: 60px; } .flip-item .flip-content.iconned h3, .flip-item .flip-hover-content.iconned h3 { font-size: 18px; font-weight: normal; } .flip-item .flip-content.iconned i.fa, .flip-item .flip-content.iconned h3 { color: #eeeeee; } .flip-item .flip-content .overlay, .flip-item .flip-hover-content .overlay { position: absolute; top:0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,0.7); } .flip-item .flip-content .overlay, .flip-item .flip-hover-content .overlay { padding: 30px; text-align: center; } .flip-item .flip-content .overlay h3, .flip-item .flip-hover-content .overlay h3 { margin-bottom: 30px; font-size: 18px; font-weight: bold; } .flip-item .flip-content .overlay i.fa, .flip-item .flip-hover-content .overlay i.fa { position: absolute; right: 30px; bottom: 30px; font-size: 24px; } #ajax-container { position: relative; height: auto; } #ajax-loader { min-height: 580px; position: absolute; top: 0; left:0; right:0; padding: 0 30px; background: #000; background: rgba(0, 0, 0, 0.7); } body.page-template-onepage-php { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } body.page-template-onepage-php #page-content { display: none; } body.page-template-onepage-php nav#main-menu { display: none; } /* Next Prev Index Data Collections */ .data-collection { display: none; } .navbar-right { position: relative; } .navbar-right li { position: absolute; right: 0; display: none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar-right li#search { display: inline-block; } #trigger { display: none; float: left; width: 50px; height: 50px; margin-top: 0; margin-right: 15px; font-size: 24px; box-shadow: none; background-color: #9e0047; background-color: rgba(158,0,71,0.97); border: 0; outline: 0; color: #eeeeee; line-height: 50px; text-align: center; -webkit-box-shadow: none; -moz-box-shadow: none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } #trigger:hover { color: #ffffff; } header.active #trigger { margin-top: 10px; } .popover { border-radius: 0; background-color: #9e0047; } .popover-title { border-radius: 0; border-bottom: 0; } .popover-content { padding: 0; } .popover-content .sidebar-searchbox input { margin: 0; min-width: 210px; background: transparent; } .popover-content .sidebar-searchbox:after { top: 10px; } .popover.left > .arrow:after { border-left-color:#9e0047; } .popover.bottom > .arrow:after { border-bottom-color: #9e0047; } .loading-content { position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: #000000; z-index: 20000; } .loading-content.inner { position: absolute; min-height: 570px; } /* WebKit and Opera browsers */ @-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } } /* all other browsers */ @keyframes spinner { from { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -moz-transform: rotateY(-360deg);s -ms-transform: rotateY(-360deg); transform: rotateY(-360deg); } } #stage { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin: 1em auto; -webkit-perspective: 1920px; -moz-perspective: 1920px; -ms-perspective: 1920px; perspective: 1920px; } #spinner img { width: 100%; } #spinner { margin-top: -80px; margin-left: -50px; width: 100px; height: 100px; text-align: center; color: #fff; padding:0 0; -webkit-animation-name: spinner; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 2s; animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 2s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } #spinner:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } body { overflow-y: scroll; } /*-------------------------------------------------------*/ /* 35. Post Slider /*-------------------------------------------------------*/ .post-slider { display: block; margin-left: -30px; margin-right: -30px; margin-top: -30px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .post-slider > div { padding: 0; } .post-slider .owl-controls { display: none; } .post-slider .slides { /* border-right: 1px solid rgba(255,255,255,0.1);*/ } .post-slider .slides img { display: none; } .post-slider .slides .overlay { position: absolute; width: 100%; bottom: -100px; padding: 30px; background: rgba(0,0,0,0.4); text-align: left; z-index: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 0; } .post-slider .slides .active .overlay { bottom: 0; opacity: 1; } .post-slider .slides .overlay a { text-decoration: none; } .post-slider .slides .overlay h3 { position: relative; width: 100%; margin: 0; text-transform: uppercase; letter-spacing: 4px; font-size: 26px; opacity: 1; color: #eeeeee; } .post-slider .slides .overlay p { margin-top: 15px; margin-bottom: 0; color: #dddddd; } .post-slider .thumbs { } .post-slider .thumbs .item { position: relative; /*height: 118px;*/ border-bottom: 1px solid rgba(255,255,255,0.1); /*background: rgba(0,0,0,0.3);*/ padding: 20px; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; cursor: pointer; } .post-slider .thumbs .item:last-child { border-bottom:0; } .post-slider .thumbs .item:hover, .post-slider .thumbs .item.active { background: rgba(158,0,71,1); color: #ffffff; } .post-slider .thumbs .item.active:after { content: ""; position: absolute; left: -15px; top: 20px; width: 0; height: 0; border-top: 12px solid transparent; border-right: 15px solid rgba(158,0,71,1); border-bottom: 12px solid transparent; z-index: 1; } .post-slider .thumbs .item > img { float: left; width: 80px; } .post-slider .thumbs .item > span { display: block; margin-left: 100px; } /*-------------------------------------------------------*/ /* 36. Full Width Image /*-------------------------------------------------------*/ .fullwidth-image { margin-left: -30px; margin-right: -30px; } .wpb_column > .wpb_wrapper > *:last-child.fullwidth-image { margin-bottom: 0 !important; } .fullwidth-image img { width: 100%; } /*-------------------------------------------------------*/ /* 37. Back to Top /*-------------------------------------------------------*/ #back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #ffffff; background-color: #000000; background-color: rgba(0,0,0,0.3); opacity: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } #back-to-top.active { opacity: 1; z-index: 10; } #back-to-top:hover { background-color: #9e0047; background-color: rgba(158,0,71,0.7); } /*-------------------------------------------------------*/ /* 38. Button /*-------------------------------------------------------*/ .btn { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; border: 0; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .btn-primary { background-color: #9e0047; background-color: rgba(158,0,71,0.7); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #9e0047; background-color: rgba(158,0,71,1); } .btn i.fa { padding-right: 15px; } /*-------------------------------------------------------*/ /* 39. Google Search /*-------------------------------------------------------*/ a.gs-title, .gsc-url-top, table.gsc-table-result, .gsc-cursor-page, .gsc-result-info, .gsc-orderby { font-family: "open sans"; } .gsc-selected-option-container { min-width: 85px !important; } .cse .gsc-control-cse, .gsc-control-cse { background: transparent !important; border: 0 !important; } .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult { border: 0 !important; background: transparent !important; } .gsc-results .gsc-cursor-box .gsc-cursor-current-page { background: transparent !important; } .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType { color: #eee !important; } .gsc-selected-option { color: #666666; } /*-------------------------------------------------------*/ /* 40. WP Required Classes /*-------------------------------------------------------*/ .alignleft { float: left; margin-right: 20px; margin-top: 10px; margin-bottom: 40px; } .alignright { float: right; margin-left: 20px; margin-top: 10px; margin-bottom: 40px; } .aligncenter { display: block; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 40px; } .bypostauthor { min-height: 10px; } .wp-caption-text { text-align: center; } .wp-caption { max-width: 100%; text-align: center; } .post-password-form { text-align: center; } .gallery-caption { } .sticky { } /*-------------------------------------------------------*/ /* 41. WP Widgets /*-------------------------------------------------------*/ .widget_archive > ul, .widget_recent_entries > ul, .widget_categories > ul, .widget_recent_comments > ul, .widget_meta > ul, .widget_pages > ul { margin-left: 0; padding-left: 0; list-style: none; } .widget_archive > ul > li, .widget_recent_entries > ul > li, .widget_categories > ul > li, .widget_recent_comments > ul > li, .widget_meta > ul > li, .widget_pages > ul > li { border-bottom: 1px solid #333333; line-height: 1.8; padding-top: 10px; padding-bottom: 10px; } .widget_archive > ul ul.children, .widget_categories > ul ul.children, .widget_pages > ul ul.children { padding-left: 20px; } .widget_archive > ul ul.children li, .widget_categories > ul ul.children li, .widget_pages > ul ul.children li { padding-top: 10px; padding-bottom: 10px; line-height: 1.8; } .widget_archive > ul ul.children li:first-child, .widget_categories > ul ul.children li:first-child, .widget_pages > ul ul.children li:first-child { padding-top: 20px; } .widget_archive > ul ul.children li:last-child, .widget_categories > ul ul.children li:last-child, .widget_pages > ul ul.children li:last-child { padding-bottom: 0px; } .widget_tag_cloud a { font-size: 14px !important; } .widget_recent_entries span.post-date { font-size: 12px; font-style: italic; margin-left: 5px; } #sidebar-area .widget_tmq-power-shortcodes .widget.widget_recentposts { margin-top: 15px; margin-bottom: 10px !important; } /* Set proper styles for menu widget */ .widget_nav_menu > div > ul { margin-left: 0; padding-left: 0; list-style: none; } .widget_nav_menu > div > ul > li { border-bottom: 1px solid #eeeeee; line-height: 1.8; padding-top: 5px; padding-bottom: 5px; } .widget_nav_menu .menu-item a { color: #666666; } /*-------------------------------------------------------*/ /* 42. Visual Composer Fixes /*-------------------------------------------------------*/ .full-width-no-padding { width: 100%; clear: both; position: relative; } .full-width-no-padding > .vc_column_container { padding: 0; } .wpb_column > .wpb_wrapper > *:last-child { margin-bottom: 30px !important; } .wpb_gmaps_widget .wpb_wrapper { padding: 0 !important; } /*-------------------------------------------------------*/ /* 43. VC Accordions /*-------------------------------------------------------*/ .wpb_content_element .wpb_tour_tabs_wrapper .wpb_tabs_nav a, .wpb_content_element .wpb_accordion_header a { padding: 15px 30px; } .wpb_content_element .wpb_tour_tabs_wrapper .wpb_tab, .wpb_content_element .wpb_accordion_wrapper .wpb_accordion_content { padding: 30px; } .wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header a { padding-left: 30px; } .wpb_accordion .wpb_accordion_wrapper .ui-state-default .ui-icon, .wpb_accordion .wpb_accordion_wrapper .ui-state-active .ui-icon { top: 17px; } .ui-accordion-header-active a, .ui-tabs-active a { color: #0f9db1; } .wpb_content_element .wpb_accordion_wrapper .wpb_accordion_header, .wpb_content_element.wpb_tabs .wpb_tour_tabs_wrapper .wpb_tab { background-color: #000000; background-color: rgba(0,0,0,0.3); } .wpb_content_element .wpb_tabs_nav li { background-color: #000000; background-color: rgba(0,0,0,0.7); } .wpb_content_element .wpb_tabs_nav li.ui-tabs-active, .wpb_content_element .wpb_tabs_nav li:hover { background-color: #000000; background-color: rgba(0,0,0,0.3); } .wpb_gallery_slides .owl-controls { display: none; } .flickr_badge_image img { padding: 5px; border: 1px solid #eeeeee; -webkit-transition: all 0.28s ease; -moz-transition: all 0.28s ease; -o-transition: all 0.28s ease; -ms-transition: all 0.28s ease; transition: all 0.28s ease; } .flickr_badge_image img:hover { padding: 0; }