/* Theme Name: TheCanvas Theme URI: www.action.asidemo.it/ Author: Artillegence Author URI: www.action.asidemo.it Description: Multi Purpose Theme Version: 1.4.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar,responsive-layout, fixed-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: ioa */ /*========================================= = Table of Contents = ========================================= 1. Icon Fonts 2. Base Css [ Reset / Common Stylings ] 3. Layout 4. Lightbox for Theme [ Prettyphoto] 5. Typography 6. Head Area Stylings 7. Title & Pages Stylings 8. Page Builder Stylings 9. Media Elements Stylings 10. Single Post Stylings 11. Single Portfolio Stylings 12. Footer Stylings 13. Sidebar & Footer Widgets Stylings ---- End of Table of Contents ------*/ /*========================================= = Icon Fonts = =========================================*/ @import url("sprites/fonts/_ioa_front.css"); @import url("sprites/fonts/th-fonts/themify-icons.css"); /*----- End of Import Font Icsons ------*/ /*============================================= = Base Css [ Reset / Common Stylings ] = =============================================*/ div.pp_default .pp_top, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_right, div.pp_default .pp_bottom, div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right { height: 13px; } div.pp_default .pp_top .pp_left { background: url(sprites/i/prettyPhoto/default/sprite.png) -78px -93px no-repeat; } div.pp_default .pp_top .pp_middle { background: url(sprites/i/prettyPhoto/default/sprite_x.png) top left repeat-x; } div.pp_default .pp_top .pp_right { background: url(sprites/i/prettyPhoto/default/sprite.png) -112px -93px no-repeat; } div.pp_default .pp_content .ppt { color: #f8f8f8; } div.pp_default .pp_content_container .pp_left { background: url(sprites/i/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y; padding-left: 13px; } div.pp_default .pp_content_container .pp_right { background: url(sprites/i/prettyPhoto/default/sprite_y.png) top right repeat-y; padding-right: 13px; } div.pp_default .pp_next:hover { background: url(sprites/i/prettyPhoto/default/sprite_next.png) center right no-repeat; cursor: pointer; } div.pp_default .pp_previous:hover { background: url(sprites/i/prettyPhoto/default/sprite_prev.png) center left no-repeat; cursor: pointer; } div.pp_default .pp_expand { background: url(sprites/i/prettyPhoto/default/sprite.png) 0 -29px no-repeat; cursor: pointer; width: 28px; height: 28px; } div.pp_default .pp_expand:hover { background: url(sprites/i/prettyPhoto/default/sprite.png) 0 -56px no-repeat; cursor: pointer; } div.pp_default .pp_contract { background: url(sprites/i/prettyPhoto/default/sprite.png) 0 -84px no-repeat; cursor: pointer; width: 28px; height: 28px; } div.pp_default .pp_contract:hover { background: url(sprites/i/prettyPhoto/default/sprite.png) 0 -113px no-repeat; cursor: pointer; } div.pp_default .pp_close { width: 30px; height: 30px; background: url(sprites/i/prettyPhoto/default/sprite.png) 2px 1px no-repeat; cursor: pointer; } div.pp_default .pp_gallery ul li a { background: url(sprites/i/prettyPhoto/default/default_thumb.png) center center #f8f8f8; border: 1px solid #aaa; } div.pp_default .pp_social { margin-top: 7px; } div.pp_default .pp_gallery a.pp_arrow_previous, div.pp_default .pp_gallery a.pp_arrow_next { position: static; left: auto; } div.pp_default .pp_nav .pp_play, div.pp_default .pp_nav .pp_pause { background: url(sprites/i/prettyPhoto/default/sprite.png) -51px 1px no-repeat; height: 30px; width: 30px; } div.pp_default .pp_nav .pp_pause { background-position: -51px -29px; } div.pp_default a.pp_arrow_previous, div.pp_default a.pp_arrow_next { background: url(sprites/i/prettyPhoto/default/sprite.png) -31px -3px no-repeat; height: 20px; width: 20px; margin: 4px 0 0; } div.pp_default a.pp_arrow_next { left: 52px; background-position: -82px -3px; } div.pp_default .pp_content_container .pp_details { margin-top: 5px; } div.pp_default .pp_nav { clear: none; height: 30px; width: 110px; position: relative; } div.pp_default .pp_nav .currentTextHolder { font-family: Georgia; font-style: italic; color: #999; font-size: 11px; left: 75px; line-height: 25px; position: absolute; top: 2px; margin: 0; padding: 0 0 0 10px; } div.pp_default .pp_close:hover, div.pp_default .pp_nav .pp_play:hover, div.pp_default .pp_nav .pp_pause:hover, div.pp_default .pp_arrow_next:hover, div.pp_default .pp_arrow_previous:hover { opacity: 0.7; } div.pp_default .pp_description { font-size: 11px; font-weight: 700; line-height: 14px; margin: 5px 50px 5px 0; } div.pp_default .pp_bottom .pp_left { background: url(sprites/i/prettyPhoto/default/sprite.png) -78px -127px no-repeat; } div.pp_default .pp_bottom .pp_middle { background: url(sprites/i/prettyPhoto/default/sprite_x.png) bottom left repeat-x; } div.pp_default .pp_bottom .pp_right { background: url(sprites/i/prettyPhoto/default/sprite.png) -112px -127px no-repeat; } div.pp_default .pp_loaderIcon { background: url(sprites/i/prettyPhoto/default/loader.gif) center center no-repeat; } div.light_rounded .pp_top .pp_left { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat; } div.light_rounded .pp_top .pp_right { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat; } div.light_rounded .pp_next:hover { background: url(sprites/i/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; } div.light_rounded .pp_previous:hover { background: url(sprites/i/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } div.light_rounded .pp_expand { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } div.light_rounded .pp_expand:hover { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } div.light_rounded .pp_contract { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } div.light_rounded .pp_contract:hover { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } div.light_rounded .pp_close { width: 75px; height: 22px; background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } div.light_rounded .pp_nav .pp_play { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_nav .pp_pause { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_arrow_previous { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat; } div.light_rounded .pp_arrow_next { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat; } div.light_rounded .pp_bottom .pp_left { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat; } div.light_rounded .pp_bottom .pp_right { background: url(sprites/i/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat; } div.dark_rounded .pp_top .pp_left { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat; } div.dark_rounded .pp_top .pp_right { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat; } div.dark_rounded .pp_content_container .pp_left { background: url(sprites/i/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y; } div.dark_rounded .pp_content_container .pp_right { background: url(sprites/i/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y; } div.dark_rounded .pp_next:hover { background: url(sprites/i/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer; } div.dark_rounded .pp_previous:hover { background: url(sprites/i/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } div.dark_rounded .pp_expand { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } div.dark_rounded .pp_expand:hover { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } div.dark_rounded .pp_contract { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } div.dark_rounded .pp_contract:hover { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } div.dark_rounded .pp_close { width: 75px; height: 22px; background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } div.dark_rounded .pp_description { margin-right: 85px; color: #fff; } div.dark_rounded .pp_nav .pp_play { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_nav .pp_pause { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_arrow_previous { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat; } div.dark_rounded .pp_arrow_next { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat; } div.dark_rounded .pp_bottom .pp_left { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat; } div.dark_rounded .pp_bottom .pp_right { background: url(sprites/i/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat; } div.dark_rounded .pp_loaderIcon { background: url(sprites/i/prettyPhoto/dark_rounded/loader.gif) center center no-repeat; } div.dark_square .pp_left, div.dark_square .pp_middle, div.dark_square .pp_right, div.dark_square .pp_content { background: #000; } div.dark_square .pp_description { color: #fff; margin: 0 85px 0 0; } div.dark_square .pp_loaderIcon { background: url(sprites/i/prettyPhoto/dark_square/loader.gif) center center no-repeat; } div.dark_square .pp_expand { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } div.dark_square .pp_expand:hover { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } div.dark_square .pp_contract { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } div.dark_square .pp_contract:hover { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } div.dark_square .pp_close { width: 75px; height: 22px; background: url(sprites/i/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } div.dark_square .pp_nav { clear: none; } div.dark_square .pp_nav .pp_play { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_nav .pp_pause { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_arrow_previous { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat; } div.dark_square .pp_arrow_next { background: url(sprites/i/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat; } div.dark_square .pp_next:hover { background: url(sprites/i/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer; } div.dark_square .pp_previous:hover { background: url(sprites/i/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer; } div.light_square .pp_expand { background: url(sprites/i/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } div.light_square .pp_expand:hover { background: url(sprites/i/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } div.light_square .pp_contract { background: url(sprites/i/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } div.light_square .pp_contract:hover { background: url(sprites/i/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } div.light_square .pp_close { width: 75px; height: 22px; background: url(sprites/i/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } div.light_square .pp_nav .pp_play { background: url(sprites/i/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_nav .pp_pause { background: url(sprites/i/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_arrow_previous { background: url(sprites/i/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat; } div.light_square .pp_arrow_next { background: url(sprites/i/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat; } div.light_square .pp_next:hover { background: url(sprites/i/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer; } div.light_square .pp_previous:hover { background: url(sprites/i/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer; } div.facebook .pp_top .pp_left { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat; } div.facebook .pp_top .pp_middle { background: url(sprites/i/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x; } div.facebook .pp_top .pp_right { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat; } div.facebook .pp_content_container .pp_left { background: url(sprites/i/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y; } div.facebook .pp_content_container .pp_right { background: url(sprites/i/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y; } div.facebook .pp_expand { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat; cursor: pointer; } div.facebook .pp_expand:hover { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat; cursor: pointer; } div.facebook .pp_contract { background: url(sprites/i/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat; cursor: pointer; } div.facebook .pp_contract:hover { background: url(sprites/i/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat; cursor: pointer; } div.facebook .pp_close { width: 22px; height: 22px; background: url(sprites/i/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat; cursor: pointer; } div.facebook .pp_description { margin: 0 37px 0 0; } div.facebook .pp_loaderIcon { background: url(sprites/i/prettyPhoto/facebook/loader.gif) center center no-repeat; } div.facebook .pp_arrow_previous { background: url(sprites/i/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat; height: 22px; margin-top: 0; width: 22px; } div.facebook .pp_arrow_previous.disabled { background-position: 0 -96px; cursor: default; } div.facebook .pp_arrow_next { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat; height: 22px; margin-top: 0; width: 22px; } div.facebook .pp_arrow_next.disabled { background-position: -32px -96px; cursor: default; } div.facebook .pp_nav { margin-top: 0; } div.facebook .pp_nav p { font-size: 15px; padding: 0 3px 0 4px; } div.facebook .pp_nav .pp_play { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_nav .pp_pause { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_next:hover { background: url(sprites/i/prettyPhoto/facebook/btnNext.png) center right no-repeat; cursor: pointer; } div.facebook .pp_previous:hover { background: url(sprites/i/prettyPhoto/facebook/btnPrevious.png) center left no-repeat; cursor: pointer; } div.facebook .pp_bottom .pp_left { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat; } div.facebook .pp_bottom .pp_middle { background: url(sprites/i/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x; } div.facebook .pp_bottom .pp_right { background: url(sprites/i/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat; } div.pp_pic_holder a:focus { outline: none; } div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500; } div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; } .pp_content { height: 40px; min-width: 40px; } * html .pp_content { width: 40px; } .pp_content_container { position: relative; text-align: left; width: 100%; } .pp_content_container .pp_left { padding-left: 20px; } .pp_content_container .pp_right { padding-right: 20px; } .pp_content_container .pp_details { float: left; margin: 10px 0 2px; } .pp_description { display: none; margin: 0; } .pp_social { float: left; margin: 0; } .pp_social .facebook { float: left; margin-left: 5px; width: 55px; overflow: hidden; } .pp_social .twitter { float: left; } .pp_nav { clear: right; float: left; margin: 3px 10px 0 0; } .pp_nav p { float: left; white-space: nowrap; margin: 2px 4px; } .pp_nav .pp_play, .pp_nav .pp_pause { float: left; margin-right: 4px; text-indent: -10000px; } a.pp_arrow_previous, a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; overflow: hidden; text-indent: -10000px; width: 14px; } .pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; } .pp_gallery { display: none; left: 50%; margin-top: -50px; position: absolute; z-index: 10000; } .pp_gallery div { float: left; overflow: hidden; position: relative; } .pp_gallery ul { float: left; height: 35px; position: relative; white-space: nowrap; margin: 0 0 0 5px; padding: 0; } .pp_gallery ul a { border: 1px rgba(0, 0, 0, 0.5) solid; display: block; float: left; height: 33px; overflow: hidden; } .pp_gallery ul a img { border: 0; } .pp_gallery li { display: block; float: left; margin: 0 5px 0 0; padding: 0; } .pp_gallery li.default a { background: url(sprites/i/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat; display: block; height: 33px; width: 50px; } .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next { margin-top: 7px !important; } a.pp_next { background: url(sprites/i/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: right; height: 100%; text-indent: -10000px; width: 49%; } a.pp_previous { background: url(sprites/i/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: left; height: 100%; text-indent: -10000px; width: 49%; } a.pp_expand, a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000; } a.pp_close { position: absolute; right: 0; top: 0; display: block; line-height: 22px; text-indent: -10000px; } .pp_loaderIcon { display: block; height: 24px; left: 50%; position: absolute; top: 50%; width: 24px; margin: -12px 0 0 -12px; } #pp_full_res { line-height: 1 !important; } #pp_full_res .pp_inline { text-align: left; } #pp_full_res .pp_inline p { margin: 0 0 15px; } div.ppt { color: #fff; display: none; font-size: 17px; z-index: 9999; margin: 0 0 5px 15px; } div.pp_default .pp_content, div.light_rounded .pp_content { background-color: #fff; } div.pp_default #pp_full_res .pp_inline, div.light_rounded .pp_content .ppt, div.light_rounded #pp_full_res .pp_inline, div.light_square .pp_content .ppt, div.light_square #pp_full_res .pp_inline, div.facebook .pp_content .ppt, div.facebook #pp_full_res .pp_inline { color: #000; } div.pp_default .pp_gallery ul li a:hover, div.pp_default .pp_gallery ul li.selected a, .pp_gallery ul a:hover, .pp_gallery li.selected a { border-color: #fff; } div.pp_default .pp_details, div.light_rounded .pp_details, div.dark_rounded .pp_details, div.dark_square .pp_details, div.light_square .pp_details, div.facebook .pp_details { position: relative; } div.light_rounded .pp_top .pp_middle, div.light_rounded .pp_content_container .pp_left, div.light_rounded .pp_content_container .pp_right, div.light_rounded .pp_bottom .pp_middle, div.light_square .pp_left, div.light_square .pp_middle, div.light_square .pp_right, div.light_square .pp_content, div.facebook .pp_content { background: #fff; } div.light_rounded .pp_description, div.light_square .pp_description { margin-right: 85px; } div.light_rounded .pp_gallery a.pp_arrow_previous, div.light_rounded .pp_gallery a.pp_arrow_next, div.dark_rounded .pp_gallery a.pp_arrow_previous, div.dark_rounded .pp_gallery a.pp_arrow_next, div.dark_square .pp_gallery a.pp_arrow_previous, div.dark_square .pp_gallery a.pp_arrow_next, div.light_square .pp_gallery a.pp_arrow_previous, div.light_square .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.light_rounded .pp_arrow_previous.disabled, div.dark_rounded .pp_arrow_previous.disabled, div.dark_square .pp_arrow_previous.disabled, div.light_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_rounded .pp_arrow_next.disabled, div.dark_rounded .pp_arrow_next.disabled, div.dark_square .pp_arrow_next.disabled, div.light_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_rounded .pp_loaderIcon, div.light_square .pp_loaderIcon { background: url(sprites/i/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } div.dark_rounded .pp_top .pp_middle, div.dark_rounded .pp_content, div.dark_rounded .pp_bottom .pp_middle { background: url(sprites/i/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } div.dark_rounded .currentTextHolder, div.dark_square .currentTextHolder { color: #c4c4c4; } div.dark_rounded #pp_full_res .pp_inline, div.dark_square #pp_full_res .pp_inline { color: #fff; } .pp_top, .pp_bottom { height: 20px; position: relative; } * html .pp_top, * html .pp_bottom { padding: 0 20px; } .pp_top .pp_left, .pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_top .pp_middle, .pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_top .pp_middle, * html .pp_bottom .pp_middle { left: 0; position: static; } .pp_top .pp_right, .pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_fade, .pp_gallery li.default a img { display: none; } /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. RESET 2. Events Pro 3. Basic Swiper Styles ----- End of Table of Contents ---------- */ /*============================= = RESET = =============================*/ body { margin: 0; padding: 0; } .entry-content img, .entry-summary img, .comment-content img, .widget img, .wp-caption { max-width: 100%; height: auto; } .entry-content img, .entry-summary img, .comment-content img[height], img[class*=align], img[class*=wp-image-], img[class*=attachment-] { height: auto; } .entry-media img, img.size-full, img.size-large, img.wp-post-image { height: auto; max-width: 100%; } embed, iframe, object, video { max-width: 100%; } .entry-content .twitter-tweet-rendered { max-width: 100% !important; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } div.page-wrapper img.alignleft { margin: 10px 20px 15px 0; } .wp-caption.alignleft { margin: 5px 10px 15px 0; } div.page-wrapper img.alignright { margin: 10px 0 15px 20px; } .wp-caption.alignright { margin: 5px 0 15px 10px; } div.page-wrapper img.aligncenter { margin: 10px auto; } div.page-wrapper img.alignnone { margin: 5px 0; } .wp-caption .wp-caption-text, .entry-caption, .gallery-caption { color: #222222; font-size: 18px; font-style: italic; font-weight: 300; } img.wp-smiley, .rsswidget img { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; margin-top: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline; zoom: 1; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, textarea { font-family: sans-serif; } a:focus { outline: none; } a:active, a:hover { outline: 0; } h1 { margin: .67em 0; } h2 { margin: .83em 0; } h4 { margin: 1.33em 0; } h5 { margin: 1.67em 0; } h6 { margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: none; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } dd { margin: 0 0 0 40px; } menu, ol, ul { padding: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; } img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; white-space: normal; margin-left: -7px; padding: 0; } button, input, select, textarea { font-size: 100%; vertical-align: middle; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type=checkbox], input[type=radio] { box-sizing: border-box; height: 13px; width: 13px; padding: 0; } input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .last { clear: right; } .first { clear: left; } .no-bottom-border { border-bottom: none !important; } textarea, input { outline: none; } pre { padding: 10px; border: 1px solid #eaeaea; } table { width: 100%; margin-bottom: 30px; } table th { padding: 10px 20px; text-align: left; border-bottom: 1px solid #eaeaea; border-top: 1px solid #eaeaea; } table tr th { border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea; } table tr td { padding: 10px 20px; text-align: left; } form select, form input[type=tel], form input[type=search] ,form select, form input[type=password], form input[type=text], form input[type=email], form input[type=url] { padding: 11px; border: none; width: 75%; color: #222222; border-radius: 2px; background: #f3f3f3; border: 1px solid #eaeaea; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } form input[type=tel]:focus, form input[type=search]:focus,form input[type=password]:focus, form input[type=text]:focus, form input[type=url]:focus, form input[type=email]:focus, form textarea:focus { background: #fafafa; color: #222222; border: 1px solid #eaeaea; } form textarea { padding: 12px 10px; width: 100%; border: none; color: #222222; background: #f3f3f3; border: 1px solid #eaeaea; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 2px; } form input[type=submit] { border: none; outline: none; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 15px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } form input[type=submit]:hover { background: #66a7cf; border-color: #66a7cf; color: white; } iframe { border: none; outline: none; } input:-webkit-autofill { background-color: #222222; } input[type=text]:focus { outline: none; } .bypostauthor { display: block; } /*----- End of RESET ------*/ .box-model { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /*================================== = Events Pro = ==================================*/ .ui-datepicker { z-index: 4 !important; } .em-toggle.hide { display: block; } .relative { position: relative; } /*----- End of Events Pro ------*/ /* =============================================================== Basic Swiper Styles ================================================================*/ .swiper-container { position: relative; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; margin: 0 auto; } .swiper-wrapper { position: relative; width: 100%; -webkit-transition-property: 0 left, top; -webkit-transition-duration: 0; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-timing-function: ease; -moz-transition-property: 0 left, top; -moz-transition-duration: 0; -moz-transform: translate3d(0px, 0, 0); -moz-transition-timing-function: ease; -o-transition-property: 0 left, top; -o-transition-duration: 0; -o-transition-timing-function: ease; -o-transform: translate(0px, 0px); -ms-transition-property: 0 left, top; -ms-transition-duration: 0; -ms-transform: translate3d(0px, 0, 0); -ms-transition-timing-function: ease; transition-property: transform, left, top; transition-duration: 0; transform: translate3d(0px, 0, 0); transition-timing-function: ease; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { float: left; } .swiper-wp8-horizontal { -ms-touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; } .swiper-scrollbar { position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); } .swiper-scrollbar-cursor-drag { cursor: move; } .mejs-controls .mejs-time-rail span.mejs-offscreen, span.mejs-offscreen { display: none; } .mejs-container a:focus, .mejs-container a:active, .mejs-video, .wp-video-shortcode, .video-inner-wrap *, .wp-video:focus, .wp-video:active { box-shadow: none !important; outline: 0; } .wp-video-shortcode a, .wp-video-shortcode a:hover, .wp-video-shortcode a:active { display: none; box-shadow: none !important; } /*============================================== = Media Element Stylings = ==============================================*/ /** * * Animation Declarations * **/ @-webkit-keyframes iconScaleOut { 0% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); } } @keyframes iconScaleOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } @-webkit-keyframes iconScaleIn { 0% { opacity: 0; -webkit-transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes iconScaleIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes FadeOut { 0% { opacity: 0.9; } 100% { opacity: 0; } } @keyframes FadeOut { 0% { opacity: 0.9; } 100% { opacity: 0; } } @-webkit-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } @keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } @-webkit-keyframes ScaleOut { 0% { opacity: 0.9; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); } } @keyframes ScaleOut { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } } @-webkit-keyframes ScaleIn { 0% { opacity: 0; -webkit-transform: scale(1.2); } 100% { opacity: 0.9; -webkit-transform: scale(1); } } @keyframes ScaleIn { 0% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0.9; transform: scale(1); } } .modal-open { overflow: hidden; } .modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal-dialog { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal-dialog { position: relative; width: auto; margin: 10px; } .modal-content { position: relative; background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; outline: 0; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.in { opacity: 0.5; filter: alpha(opacity=50); } .modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; min-height: 16.42857143px; position: relative; } .modal-header .close { border: none; background: none; position: absolute; top: 5px; right: 5px; font-size: 24px; } .modal-title { margin: 0; line-height: 1.42857143; } .modal-body { position: relative; padding: 15px; } .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } .modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; } .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .modal-footer .btn-block + .btn-block { margin-left: 0; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .modal-sm { width: 300px; } } @media (min-width: 992px) { .modal-lg { width: 900px; } } .modal-footer:before, .modal-footer:after { content: " "; display: table; } .clearfix:after, .modal-footer:after { clear: both; } /*----- End of Section comment block ------*/ /*============================================= = Layout = =============================================*/ /** * * Fixed Width Variables * **/ /** Sidebar Layout */ /** Double Sidebar Layout */ /*============================================ = Basic Layout Classes = ============================================*/ .left { float: left; } .right { float: right; } .last { padding-right: 0 !important; clear: right; margin-right: 0 !important; } .first { padding-left: 0 !important; clear: left; margin-left: 0 !important; } .auto_align { margin: 0 auto; } .skeleton { width: 1060px; position: relative; z-index: 1; } .layout-boxed div.inner-super-wrapper { width: 1160px; margin: 50px auto 0 auto; position: relative; z-index: 3;} .layout_element, .col { float: left; min-height: 1px; margin: 0px 50px 50px 0; padding: 0px; } .full, .full.layout_element { clear: both; width: 100%; padding-right: 0 !important; } .box-model, .layout_element { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*----- End of Basic Layout Classes ------*/ /*============================================== = Container Based Layout = ==============================================*/ .one_half { width: 505px; } .one_third { width: 319.96467px; } .one_fourth { width: 227.5px; } .one_fifth { width: 172px; } .two_third { width: 689.92933px; } .three_fourth { width: 782.03704px; } .four_fifth { width: 838px; } /*----- End of Container Based Layout ------*/ /*======================================== = RAD Fluid Layout = ========================================*/ .full_width .layout_element, .nested .layout_element, .nested .col { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .full_width .layout_element, .full_width .col { margin: 0; } .nested .full, .full_width .full { clear: both; width: 100%; } .nested .one_half, .full_width .one_half { width: 50%; } .nested .one_third, .full_width .one_third { width: 33.333%; } .nested .one_fourth, .full_width .one_fourth { width: 25%; } .nested .one_fifth, .full_width .one_fifth { width: 20%; } .nested .two_third, .full_width .two_third { width: 66.66667%; } .nested .three_fourth, .full_width .three_fourth { width: 75%; } .nested .four_fifth, .full_width .four_fifth { width: 80%; } .nested .layout_element, .nested .col { padding: 15px; margin: 0; } /*----- End of RAD Fluid Layout ------*/ /*====================================== = Sidebar Layout = ======================================*/ .has-sidebar .layout_element, .has-sidebar .col { float: left; min-height: 1px; margin: 0px 30px 30px 0; padding: 0px; } .has-sidebar .one_half { width: 367.5px; } .has-sidebar .one_third { width: 234.9745px; } .has-sidebar .one_fourth { width: 168.75px; } .has-sidebar .one_fifth { width: 129px; } .has-sidebar .two_third { width: 499.949px; } .has-sidebar .three_fourth { width: 565.97222px; } .has-sidebar .four_fifth { width: 606px; } /*----- End of Sidebar Layout ------*/ /*====================================== = Double Sidebar Layout = ======================================*/ .sidebar-double-layout .layout_element, .sidebar-double-layout .col { float: left; min-height: 1px; margin: 0px 20px 20px 0; padding: 0px; } .sidebar-double-layout .one_half { width: 281.5px; } .sidebar-double-layout .one_third { width: 180.98057px; } .sidebar-double-layout .one_fourth { width: 130.75px; } .sidebar-double-layout .one_fifth { width: 100.6px; } .sidebar-double-layout .two_third { width: 381.96113px; } .sidebar-double-layout .three_fourth { width: 432.06481px; } .sidebar-double-layout .four_fifth { width: 462.4px; } /*----- End of Double Sidebar Layout ------*/ /*========================================== = Sidebar Structure = ==========================================*/ .blog-misc-page { padding-top: 50px; } .mutual-content-wrap { position: relative; z-index: 1; } .sidebar { padding-bottom: 50px; position: relative; z-index: 2; padding-top: 50px; } .sidebar-layout, .sidebar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* == Right Sidebar ========================== */ .has-left-sidebar { float: right; width: 795px; } .left-sidebar.sidebar { float: left; width: 240px; padding-right: 25px; } /* == Left Sidebar ========================== */ .has-right-sidebar { float: left; width: 795px; } .right-sidebar.sidebar { float: right; width: 240px; padding-left: 25px; margin-left: 25px; } /*========== Double Left Sidebar ==========*/ .has-double-left-sidebar { float: right; width: 583px; padding-left: 0; } .double-left-sidebar.sidebar { float: left; width: 218.5px; margin-right: 20px; padding-right: 20px; } /*========== Double Right Sidebar ==========*/ .has-double-right-sidebar { float: left; width: 583px; padding-left: 0; } .double-right-sidebar.sidebar { float: right; width: 218.5px; padding-left: 20px; margin-left: 20px; } /*========== Double Sidebars with content in center ==========*/ .has-double-sidebar { float: right; width: 583px; padding-left: 0; } .double-sidebar.sidebar { float: right; width: 218.5px; padding-left: 20px; margin-left: 20px; } #sidebar.double-sidebar.sidebar { float: left; padding-left: 0; padding-right: 20px; margin-right: 20px; } /* Sticky Sidebars */ .sticky-right-sidebar .sidebar-inner-wrap { width: 240px; } .sticky-left-sidebar .sidebar-inner-wrap { width: 240px; } /* == Sticky Left Sidebar ========================== */ .has-sticky-left-sidebar { float: right; width: 795px; } .sticky-left-sidebar.sidebar { float: left; width: 265px; padding-right: 25px; margin-right: 25px; } /* == Sticky Right Sidebar ========================== */ .has-sticky-right-sidebar { float: left; width: 795px; } .sticky-right-sidebar.sidebar { float: right; width: 265px; padding-left: 25px; margin-left: 25px; } /*----- End of Sidebar Structure ------*/ #layout_engine_overlay { position: absolute; background-color: rgba(61, 133, 201, 0.3); z-index: 1000000; pointer-events: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*----- End of Section comment block ------*/ /*============================================= = Typography = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Typographic Declarations for the Theme 2. Typographic Elements ----- End of Table of Contents ---------- */ /*============================================================== = Typographic Declarations for the Theme = ==============================================================*/ body { font-family: "Open Sans", "Helvetica", "Arial" sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; color: #222222; } strong { color: inherit; } body a { color: #222222; } body a:hover { color: #66a7cf; } /*========== Headings ==========*/ h1 { margin: 0px 0px 15px 0px; padding: 0; font-size: 36px; color: #222222; line-height: 1.1; } h2 { margin: 0px 0px 15px 0px; padding: 0; font-size: 32px; color: #222222; line-height: 1.1; } h3 { margin: 0px 0px 15px 0px; padding: 0; font-size: 26px; color: #222222; line-height: 1.1; } h4 { margin: 0px 0px 15px 0px; padding: 0; font-size: 20px; color: #222222; line-height: 1.1; } h5 { margin: 0px 0px 15px 0px; padding: 0; font-size: 20px; color: #222222; line-height: 1.1; } h6 { margin: 0px 0px 15px 0px; padding: 0; font-size: 13px; color: #222222; line-height: 1.1; } /*----- End of Typography Section ------*/ /*============================================ = Typographic Elements = ============================================*/ /*========== Drops ==========*/ .drop-cap { float: left; padding: 6px 21px; color: white; font-size: 24px; background: #222222; margin: 0px 15px 5px 0; border-radius: 0px; } /*========== Blockquotes ==========*/ .page-content blockquote.blockquote-right { max-width: 40%; margin: 10px 0px 10px 20px; float: right; } .page-content blockquote.blockquote-left { max-width: 40%; margin: 10px 20px 10px 0px; float: left; } .blockquote-wrap i { display: block; top: 9px; font-size: 16px; left: 9px; position: absolute; } .page-content blockquote, .blockquote-wrap blockquote { position: relative; margin: 10px 0; padding: 30px 20px; color: #999999; border-radius: 0px; font-size: 18px; font-family: Georgia,Arial; text-align: center; border: 1px solid #eaeaea; font-style: italic; } .bottom-quote-wrap { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .quote-cap { position: absolute; top: 5px; right: 5px; background: #66a7cf; padding: 15px; color: white; font-size: 48px; line-height: 1; border-radius: 100%; } .full_width .blockquote-wrap { padding: 30px; } /*========== Highlighter ==========*/ .highlighter-p { display: inline-block; padding: 1px 8px; background: #66a7cf; color: white; border-radius: 0px; } .highlighter-s { display: inline-block; padding: 1px 8px; background: #222222; color: white; border-radius: 0px; } .highlighter-p-color { color: #9ac832; } /*========== Magic List ==========*/ ul.magic-list { padding: 0; margin: 0; } ul.magic-list li { padding: 0; margin: 0 0 20px 0; list-style: none; position: relative; min-height: 20px; } ul.magic-list li .icon-area { position: absolute; left: 0; top: 3px; font-size: 24px; line-height: 1; } ul.magic-list li .desc-area { margin-left: 30px; font-size: 16px; } /* ========= Lightbox Widget ========== */ a.shortcode-lightbox { text-decoration: none; display: inline-block; border-bottom: 1px solid #222222; position: relative; } a.shortcode-lightbox:hover { border-color: #66a7cf; } /*----- End of Typographic Elements ------*/ /*----- End of Section comment block ------*/ /*============================================= = Head Area Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Top Area Blocks Stylings 2. General Head Structure & Stylings 3. Head Major Elements Stylings 4. Head Area Styles & Sidebar Area Stylings 5. Compact Bar ----- End of Table of Contents ---------- */ /*========================================================= = Top Area Blocks Stylings = =========================================================*/ .super-head-wrap { position: relative; z-index: 20; } .head-positon-overlap .super-head-wrap { position: absolute; top: 0; left: 0; width: 100%; } .header-cons-area > div { background: white; position: relative; } /*----- End of Top Area Blocks Stylings ------*/ /*========================================================= = General Head Structure & Stylings = =========================================================*/ .theme-header { line-height: 1; /* The Whole Header needs to have 1 for consistent browser paddings */ z-index: 12; position: relative; } .theme-header .video-bg { z-index: 1; position: absolute; } .head-fluid .skeleton { width: 96%; } .header-cons-area .center-area { text-align: center; } .header-cons-area .left-area { float: left; } .header-cons-area .right-area { float: right; } .header-cons-area { position: relative; z-index: 20; } .left-area .h-widget { float: left; margin-right: 10px; } .right-area .h-widget { float: left; margin-left: 10px; } .center-area .h-widget { display: inline-block; vertical-align: middle; margin: 0 10px; } .center-area #logo { margin: 0 10px; vertical-align: top; } .center-area .h-widget .menu-wrapper { top: -2px; } .left-area .h-widget:first-child { margin-left: 0px; } .right-area .h-widget:last-child { margin-right: 0px; } #mlogo { display: block; position: absolute; left: 15px; top: 5px; height: 100%; line-height: 60px; } #mlogo img { display: inline-block; vertical-align: middle; margin: 0 auto; max-width: 100%; height: auto; max-height: 100%; width: auto; } a.mobile-menu { position: absolute; top: 50%; right: 15px; z-index: 2; font-size: 18px; margin-top: -9px; width: 18px; height: 18px; text-decoration: none; } a.mobile-menu i { position: fixed; top: 0; left: 0; transition: all 0.3s ease-in-out 0.2s; } a.mobile-menu .default-icon { z-index: 2; } a.mobile-menu .close-icon { opacity: 0; transform: rotateX(-90deg); z-index: 4; } .showMobileMenu a.mobile-menu .default-icon { opacity: 0; transform: rotate(90deg); } .showMobileMenu a.mobile-menu .close-icon { opacity: 1; transform: rotate(0deg); } .mobile-header { position: relative; min-height: 70px; display: none; background: white; } .mobile-menu-wrap { position: fixed; top: 0px; right: 0; width: 250px; height: 100%; overflow: auto; z-index: 1; background: #222222; display: none; } .mobile-menu-list { padding: 0; margin: 0; display: block; } .mobile-menu-list > li:first-child { border-top: 1px solid #333333; } .mobile-menu-list li { padding: 13px 0px; border-bottom: 1px solid #333333; list-style: none; position: relative; } .mobile-menu-list li > a { padding-left: 15px; } .mobile-menu-list li a { color: #66a7cf; display: block; text-decoration: none; position: relative; z-index: 1; margin-right: 30px; } .mobile-menu-list li a:hover { color: white; } .sub-menu-toggle { float: right; cursor: pointer; margin: 0px 0px 0 0; font-size: 11px; padding: 10px; color: #66a7cf; border: 1px solid #333333; position: absolute; z-index: 12; top: 6px; right: 6px; } .sub-mobile-menu { padding: 0; margin: 0; border-top: 1px solid #333333; margin-top: 10px; display: none; } .sub-mobile-menu li { padding: 10px 0px 10px 0px; border-bottom: 1px solid #333333; list-style: none; } .sub-mobile-menu li:last-child { border-bottom: none; padding-bottom: 0px; } .sub-mobile-menu h6 { margin-bottom: 0; padding-left: 30px; } .sub-mobile-menu > li > a { padding-left: 30px; } .sub-mobile-menu .sub-mobile-menu > li > a { padding-left: 60px; } /*----- End of General Head Structure & Stylings ------*/ /*==================================================== = Head Major Elements Stylings = ====================================================*/ /*========== Text Element ==========*/ .center-area .h-widget.top-text { line-height: 1.4; } .top-text { margin-bottom: 0; margin-top: 0px; color: #aaaaaa; font-size: 12px; } .top-text p { padding: 0; margin: 0; color: #aaaaaa; } .top-text p strong { color: #aaaaaa; } .top-text a { color: #222222; font-size: 11px; font-weight: 700; margin-right: 5px; margin-left: 5px; text-decoration: none; } .top-text a:hover { color: #222222; text-decoration: none; } .top-text i.shortcode-icon { margin-left: 18px; } .top-text i.shortcode-icon:first-child { margin-left: 0; } /*========== Logo Element ==========*/ #logo { display: inline-block; position: relative; margin: 0; } #logo img { display: inline-block; height: auto; vertical-align: middle; } /** Stylings for Text logo */ .text-logo { vertical-align: middle; text-decoration: none; } .text-logo > div { display: inline-block; vertical-align: middle; } .text-logo h1.logo-text { text-decoration: none; font-size: 24px; color: #222222; line-height: 1; display: block; margin: 0; } /*========== Menu Element ==========*/ .menu-wrapper { position: relative; z-index: 26; } .menu-wrapper .menu { position: relative; } .theme-header .m-el { position: relative; z-index: 3; } .theme-header .menu > li:hover > a { color: #222222; } /* Current Top Level Menu label Styling */ .theme-header .menu-bar .menu > li.current_page_item > a .hover-element, .theme-header .menu-bar .menu > li.current-menu-ancestor > a .hover-element, .theme-header .menu-bar .menu > li.menu-active > a .hover-element, .theme-header .menu-bar .menu > li.current-menu-item > a .hover-element { display: block; } /* Current Top Level Menu anchor Styling */ .theme-header .menu-bar .menu > li.current_page_item > a, .theme-header .menu-bar .menu > li.current-menu-ancestor > a, .theme-header .menu-bar .menu > li.current-menu-item > a { color: #222222; border-color: transparent; background: transparent; } /* Current Sub Menu Item Styling */ .theme-header .menu-bar .sub-menu .menu li ul.sub-menu li.current-menu-item > a, .theme-header .menu-bar .menu li ul.sub-menu li.current_page_item > a, .theme-header .menu-bar .menu li ul.sub-menu li.current-menu-parent > a { color: white; background: rgba(255, 255, 255, 0.07); } .theme-header .menu > li > a span.menu-arrow { top: 50%; margin-top: -5px; right: 18px; font-size: 11px; z-index: 2; color: inherit; position: absolute; } .theme-header .menu-bar ul.sub-menu li a span.menu-arrow { top: 18px; right: 20px; font-size: 18px; position: absolute; } /* Sub Menu Stylings */ .theme-header .menu-bar li ul.sub-menu { display: none; } .theme-header .menu-bar li.relative ul.sub-menu { display: none; left: 0px; z-index: 5; background: #222222; position: absolute; top: 100%; width: 220px; margin: 0; padding: 10px 0; box-shadow: -10px 18px 30px rgba(0, 0, 0, 0.1); line-height: 1.6; } .theme-header .menu-bar ul.sub-menu ul.sub-menu { left: 220px; top: 0px; margin-top: 0; } .theme-header .menu-bar ul.sub-menu li { position: relative; } .theme-header .menu-bar ul.sub-menu li { padding: 0; margin: 0; display: block; } .theme-header .menu-bar ul.sub-menu li a { text-decoration: none; padding: 15px 23px; display: block; margin: 0px; color: white; font-size: 12px; } .theme-header .menu-bar ul.sub-menu li.last-child a { border-bottom: none; } /* Invisible Holder for better usability */ .faux-holder { position: absolute; top: -7px; left: 0; right: 0; height: 15px; display: block; } .sub-menu .sub-menu .faux-holder { height: 100%; left: -50px; right: auto; top: 0; width: 52px; } /* WPML Menu Item Stylinh */ .theme-header .menu-bar .menu > li.menu-item-language-current ul.sub-menu li:hover > a { color: white; background: rgba(255, 255, 255, 0.07); } .theme-header .menu-bar .menu > li.menu-item-language-current img { float: left; } /* Edge Detection Styling */ .theme-header .menu-bar li.forceRightChain ul.sub-menu li { text-align: right; } .theme-header .menu-bar li.forceRightChain ul.sub-menu li a span.menu-arrow { top: 50%; margin-top: -4px; right: auto; left: 18px; font-size: 11px; position: absolute; } .theme-header .menu-bar li.forceRightChain > ul.sub-menu { left: -220px; right: auto; } .theme-header .menu-bar .menu > li.forceRightChain > ul.sub-menu { left: auto; right: 0; } /* Top Level Menu Stylings */ .theme-header .menu-bar .menu { padding: 0; margin: 0; } .theme-header .menu-bar span.menu-subtitle { display: block; text-align: center; font-size: 11px; line-height: 1; } .theme-header .menu-bar .menu ul.sub-menu li:hover > a { color: white; background: #2a2a2a; } .theme-header .menu-bar .menu > li { display: block; float: left; margin: 0 0; z-index: 9; position: relative; } .theme-header .menu-bar .menu > li:hover { z-index: 15; } .theme-header .menu-bar .menu > li:hover > a .hover-element { display: block; } .theme-header .menu-bar .menu > li:first-child { margin-left: 0; } .theme-header .menu > li > a { text-align: center; display: inline-block; font-size: 11px; padding: 10px 10px; margin: 0 5px; position: relative; text-decoration: none; z-index: 3; color: #aaaaaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out; line-height: 1; text-transform: uppercase; letter-spacing: 1px; border: 2px solid transparent; border-radius: 0px; } .theme-header .menu > li.hasDropDown > a { padding-right: 32px; } .hover-element { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: block; } /** Mega Menu Styling */ .theme-header.no-title { margin-bottom: 40px; } .theme-header .menu-bar li div.sub-menu ul.sub-menu { display: block; margin: 0px; padding: 10px 0px; } div.sub-menu { display: none; box-shadow: -10px 18px 30px rgba(0, 0, 0, 0.15); background: #222222; position: absolute; top: 100%; left: 0%; margin: 0; padding: 0; z-index: 2; line-height: 1.5; } .theme-header .menu-bar div.sub-menu ul.sub-menu li { border-bottom: none; } div.sub-menu > div { width: 211px; float: left; margin: 0; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-left: 1px solid #2f2f2f; } div.sub-menu > div:first-child { border-left: none; } div.sub-menu > div.m_full { width: auto; } div.sub-menu > div.m_one_half { width: 529px; } div.sub-menu > div.m_one_third { width: 352px; } div.sub-menu > div.m_one_fourth { width: 264px; } div.sub-menu > div h6 { padding: 20px 30px; line-height: 1.4; margin: 0px; font-size: 12px !important; color: white; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; border-bottom: 1px solid #2f2f2f; } div.sub-menu > div h6 a { text-decoration: none; color: inherit; } .theme-header .menu-bar div.sub-menu ul.sub-menu li:last-child a { border-bottom: none; } .theme-header .menu-bar .menu li div.sub-menu ul.sub-menu li { padding: 0; } .theme-header .menu-bar .menu li div.sub-menu ul.sub-menu li a { padding: 14px 30px; margin: 0; } .theme-header .menu-bar .menu li div.sub-menu ul.sub-menu li:hover a { text-decoration: none; } /*========== Ajax Search Element ==========*/ /* Ajax Search Button */ a.ajax-search-trigger { font-size: 14px; display: inline-block; padding: 12px 12px 13px 12px; color: #66a7cf; text-decoration: none; position: relative; } a.ajax-search-trigger i { line-height: 1; display: block; transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; } a.ajax-search-trigger.active i.trigger-search-icon { opacity: 0.3; } /* Ajax Search Panel */ div.search-sidebar { position: fixed; top: -76px; left: 0px; width: 100%; height: 75px; background: #fff; z-index: 20; transition: top 0.2s ease-in-out; } div.search-sidebar div.sidebar-wrap { margin: 0 20px; padding: 15px 0; } .search-sidebar-active div.search-sidebar { top: 0; } .admin-bar.search-sidebar-active div.search-sidebar { top: 32px; } .clear-ajax-search { position: absolute; top: 30px; right: 25px; color: white; font-size: 18px; z-index: 10; cursor: pointer; } div.ajax-search { margin: 0 auto; position: relative; z-index: 25; } div.ajax-search-pane { position: relative; line-height: 1; z-index: 12; } div.ajax-search-pane div.form { padding: 10px 20px 10px 5px; position: relative; background: #ffffff; } div.ajax-search-pane form { width: 600px; margin: 0 auto; } div.ajax-search-pane div.form label { color: white; font-size: 13px; margin: 20px 10px 0 0; float: left; } div.ajax-search-pane div.form input[type=text] { width: 86%; border: none; outline: none; padding: 10px 15px; font-size: 13px; margin: 10px; color: #fff; background: rgba(0, 0, 0, 0.4); position: relative; z-index: 3; float: left; } a.ajax-search-close { position: absolute; top: 5px; right: 16px; color: white; font-size: 9px; z-index: 3; } span.search-loader { display: none; position: absolute; top: 20px; right: 0px; color: white; } div.ajax-search h4.no-results { display: none; padding: 15px; text-align: center; color: white; } div.search-results { min-height: 0px; display: none; width: 600px; position: relative; margin-top: -5px; } div.search-results > i { position: absolute; top: -22px; left: 50%; font-size: 32px; color: #222222; } div.search-results strong { color: white; } div.search-results ul { margin: 0; padding: 0 10px; position: absolute; top: 0px; left: 53px; width: 84%; background: #222222; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1); } div.search-results ul li { list-style: none; margin: 10px 0 10px 0; border-top: 1px solid #333333; padding: 10px; position: relative; } div.search-results ul li:first-child { border-top: none; } div.search-results ul li.not-found { text-align: center; padding: 10px; margin: 0; color: white; } div.search-results ul li div.image { float: left; margin-right: 5px; width: 60px; } div.search-results ul li div.image img { display: block; } div.search-results ul li div.desc.hasImage { width: 225px; float: left; } div.search-results ul li div.desc span.date { font-size: 12px; margin-top: -2px; display: block; color: white; } div.search-results ul li div.desc a.more { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 5px 10px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; } div.search-results ul li div.desc a.more:hover { background: #66a7cf; border-color: #66a7cf; color: white; } div.search-results ul li h5 { margin: 0 50px 5px 0; padding: 0; } div.search-results ul li h5 a { color: #66a7cf; text-decoration: none; } div.search-results ul li h5 a:hover { color: white; } div.search-results ul li a.view-all { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 15px 10px; font-size: 14px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; position: relative; display: block; text-align: center; } div.search-results ul li a.view-all:hover { background: #66a7cf; border-color: #66a7cf; color: white; } div.ajax-search-pane span.tip { color: #222222; font-size: 30px; top: -20px; right: 6px; position: absolute; } .search-sidebar-active div.super-wrapper { margin-top: 75px; } /*========== Social Icons ==========*/ div.top-area a.social-icons { margin-top: 0px; margin-bottom: 0px; } .top-area-social-list { display: inline-block; vertical-align: middle; } .theme-header .social-set ul li { float: left; border-bottom: none; margin: 0; padding: 0; position: relative; list-style: none; } .theme-header .social-set ul li a { display: block; margin-left: 5px; overflow: hidden; text-decoration: none; background: none; color: #9ac832; width: 22px; height: 22px; } .theme-header .social-set ul li a span { padding: 2px; } .theme-header .social-set ul li:first-child a { margin-left: 0; } .theme-header .social-set ul li span.social-block { font-size: 16px; display: inline-block; transition: none; opacity: 1; color: #66a7cf; background: none; width: 22px; } .theme-header .social-set ul li a:hover span.visible-block { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); color: #025d8c; } .theme-header .tooltip { top: 46px !important; } /*========== WPML Stylings ==========*/ a.wpml-lang-selector { position: relative; z-index: 2; text-decoration: none; color: #aaaaaa; padding: 0px 15px 0px 15px; font-size: 12px; display: block; } a.wpml-lang-selector i { margin: 4px 5px 0 0; } div.wpml-selector { position: relative; } div.wpml-selector ul { display: none; padding: 0px; margin: 0; width: 150px; position: absolute; top: 90%; left: 0px; background: #222222; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); z-index: 10; line-height: 1; } div.wpml-selector ul i { position: absolute; top: -12px; left: 66px; margin: 0; font-size: 18px; color: #222222; } @-moz-document url-prefix() { div.wpml-selector ul i { top: -13px; } } div.wpml-selector ul li { margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; } div.wpml-selector ul li a { font-size: 11px; padding: 10px 11px; color: white; text-decoration: none; display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } div.wpml-selector ul li.last a { border-bottom: none; } div.wpml-selector ul li a:hover { color: white; } /*========== Search Bar ==========*/ .theme-header .search-input { width: 100%; position: relative; display: inline-block; border: 1px solid #ddd; background: #fff; } .theme-header #searchsubmit { display: none; } .theme-header #searchform input[type=text] { padding: 8px 10px; border: none; background: none; float: none; background: none; margin-right: 63px; display: block; width: 140px; color: #222222; font-size: 12px; } .theme-header .proxy-search { position: absolute; text-decoration: none; color: #222222; font-size: 14px; top: 0; right: 1px; padding: 8px; } /*========== AJAX Woo Commerce Cart ==========*/ .ajax-cart { position: relative; } .ajax-cart > span { display: inline-block; margin-left: 15px; } a.ajax-cart-trigger { padding: 0px; margin-right: 10px; text-decoration: none; position: relative; } a.ajax-cart-trigger i { color: #66a7cf; padding: 12px; font-size: 16px; position: relative; } .center-logo a.ajax-cart-trigger i:after { content: '|'; position: absolute; top: 10px; right: 0; } a.ajax-cart-trigger > span { color: #fff; padding: 3px 6px; border-radius: 100%; position: absolute; bottom: -4px; font-size: 10px; line-height: 1; right: -7px; } a.ajax-cart-trigger span small { font-size: 100%; } .ajax-cart .ajax-cart-items { position: absolute; top: 100%; left: 0px; background: white; width: 300px; display: none; line-height: 1; box-shadow: -3px 18px 30px rgba(0, 0, 0, 0.15); text-align: left; } .ajax-cart .ajax-cart-items ul { margin: 0; padding: 0; background: white; } .ajax-cart .ajax-cart-items .product_list_widget li.empty { text-align: center; font-size: 12px; padding: 80px 15px; margin: 0; min-height: 0; } .ajax-cart .ajax-cart-items .product_list_widget li { list-style: none; padding: 15px 0px 15px 95px; min-height: 60px; position: relative; background: none; color: #222222; border-bottom: 1px solid #eaeaea; } .ajax-cart .ajax-cart-items .product_list_widget .amount { font-size: 11px; color: #222222; } .ajax-cart .ajax-cart-items .product_list_widget del .amount { color: #222222; } .ajax-cart .ajax-cart-items .product_list_widget a.product-thumb { position: absolute; top: 15px; left: 15px; margin: 0; width: 60px; } .ajax-cart .ajax-cart-items .product_list_widget a.product-thumb img { display: block; width: 100%; min-height: 60px; } .ajax-cart .ajax-cart-items .product_list_widget h6 { margin: 0 0 5px 0; } .ajax-cart .ajax-cart-items .product_list_widget h6 a { font-size: 15px; line-height: 1; display: block; margin-bottom: 0px; color: #222222; text-decoration: none; } .ajax-cart .ajax-cart-items .product_list_widget a.remove { text-decoration: none; font-size: 12px; color: #999999; } .right-area .ajax-cart .ajax-cart-items, div.centered-theme-header .ajax-cart .ajax-cart-items { left: auto; right: 9px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.total strong { color: #222222; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.total { margin-top: 10px; padding: 15px 15px; margin-bottom: 0; display: block; text-align: center; border: none; color: #222222; font-size: 12px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.total span.amount { color: #9ac832; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.buttons { margin: 0; padding: 15px; clear: both; height: 40px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button { display: block; padding: 12px 15px; text-decoration: none; text-align: center; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0px 1% 0 1%; width: 40%; font-size: 12px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button.checkout.wc-forward { width: 51%; margin-left: 15px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content span.amount { font-size: 12px; color: #222222; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content span.quantity { font-size: 10px; color: #222222; } /*----- End of Head Major Elements ------*/ /*=================================== = Compact Bar = ===================================*/ .admin-bar div.compact-bar { top: 32px; } div.compact-bar { background: #fafafa; padding: 0; visibility: visible; position: fixed; top: -70px; left: 0; width: 100%; z-index: 9999; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); transition: top 0.3s ease-in-out; } div.compact-bar #clogo { float: left; margin-top: 0px; height: 43px; vertical-align: middle; line-height: 43px; } div.compact-bar #clogo img { display: inline-block; max-height: 43px; width: auto; vertical-align: middle; } div.compact-bar .menu-wrapper { float: right; line-height: 45px; height: 45px; } div.compact-bar .menu-wrapper .menu > li > a { font-size: 11px; } div.compact-bar.theme-header .menu-bar li.relative ul.sub-menu a { font-size: 10px; } /*----- End of Compact Bar ------*/ /*======================================== = Sidebar Stylings = ========================================*/ .ipad-menu { background: inherit; position: absolute; top: 20px; left: -50px; width: 50px; height: 50px; color: #66a7cf; text-decoration: none; font-size: 18px; display: none; } .head-sidebar-align-left .ipad-menu { right: -50px; left: auto; } a.ipad-menu i { position: absolute; top: 16px; left: 16px; transition: all 0.3s ease-in-out 0.1s; } a.ipad-menu .default-icon { z-index: 2; } a.ipad-menu .close-icon { opacity: 0; transform: rotateX(-90deg); z-index: 4; } .showIpadMenu a.ipad-menu .default-icon { opacity: 0; transform: rotate(90deg); } .showIpadMenu a.ipad-menu .close-icon { opacity: 1; transform: rotate(0deg); } .sidebar-head-wrap { background: white; margin-top: 10px; } .sidebar-head-wrap .header-cons-area > div { position: relative; background: none; } .head-sidebar-align-right.head-layout-type-vertical .sidebar-head-wrap { width: 280px; position: fixed; top: 0; right: 0; height: 100%; z-index: 20; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; } .head-sidebar-align-right.head-layout-type-vertical div.inner-super-wrapper { margin-right: 280px; } .head-sidebar-align-left.head-layout-type-vertical .sidebar-head-wrap { width: 280px; position: fixed; top: 0; left: 0; height: 100%; z-index: 20; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; } .head-sidebar-align-left.head-layout-type-vertical div.inner-super-wrapper { margin-left: 280px; } .head-layout-type-vertical .sidebar-head-wrap .h-widget, .head-layout-type-vertical .sidebar-head-wrap #logo { margin: 40px 40px 0px 40px; } .head-layout-type-vertical .sidebar-head-wrap .menu-wrapper.h-widget { margin-left: 0; margin-right: 0; } .head-layout-type-vertical .sidebar-head-wrap #logo img { display: block; margin: 0 auto; } .head-layout-type-vertical .sidebar-head-wrap .theme-header .menu-bar .menu > li { float: none; position: relative; } #head-sidebar .menu-bar .menu > li > a { padding: 16px 50px; display: block; border-radius: 0; border-left: none; border-right: none; margin: 0; } .head-layout-type-vertical .sidebar-head-wrap .hover-element { border-radius: 0; } .head-sidebar-align-left.head-layout-type-vertical .sidebar-head-wrap .theme-header .menu-bar li.relative ul.sub-menu, .head-sidebar-align-left.head-layout-type-vertical .sidebar-head-wrap div.sub-menu { left: 280px; top: 0; } .head-sidebar-align-right.head-layout-type-vertical .sidebar-head-wrap .theme-header .menu-bar li.relative ul.sub-menu, .head-sidebar-align-right.head-layout-type-vertical .sidebar-head-wrap div.sub-menu { right: 280px; top: 0; left: auto; } .head-sidebar-align-right.head-layout-type-vertical .sidebar-head-wrap .theme-header .menu > li > a span.menu-arrow { left: 11px; right: auto; } .text-align-center { text-align: center; } .text-align-left { text-align: left; } .text-align-right { text-align: right; } .text-align-left .menu-bar .menu > li > a { text-align: left; } .text-align-right .menu-bar .menu > li > a { text-align: right; } /*----- End of Sidebar Stylings ------*/ /*----- End of Bottom Bar ------*/ /*----- End of Section comment block ------*/ /*============================================= = Title & Pages Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. General Styling 2. Custom Scrollbar 3. Splash Screen Stylings 4. Featured Media Stylings 5. Page Title Stylings 6. Title Intro Animations 7. Title Alignment Stylings 8. Layout Related Stylings 9. Breadcrumbs Stylings 10 . 404 Styling 11. Sitemap Stylings 12. Contact Form 7 Stylings 13. Pagination Stylings 14. Filter Stylings ----- End of Table of Contents ---------- */ /*======================================= = General Styling = =======================================*/ body { overflow-x: hidden; } .super-wrapper { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative; z-index: 2; } .inner-super-wrapper { background:white; position: relative; z-index: 7; } .super-overlay-block { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1;} div.post-format-audio .mejs-container { position: relative; background: #222222 !important; text-align: left; vertical-align: top; text-indent: 0; height: 75px !important; } div.post-format-audio .mejs-container, div.post-format-audio .mejs-embed, div.post-format-audio .mejs-embed body, div.post-format-audio .mejs-container .mejs-controls { width: 100%; height: 100%; background: #222222 !important; overflow: hidden; margin: 0; padding: 0; } body div.post-format-audio .mejs-container .mejs-controls { bottom: -23px; } body div.post-format-audio .mejs-controls .mejs-button button, body div.post-format-audio .mejs-controls .mejs-playpause-button button { font-family: "_ioa_front"; background: none; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; font-size: 14px; color: #66a7cf; } body div.post-format-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, body div.post-format-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { height: 15px; top: 7px; } body div.post-format-audio .mejs-controls .mejs-time-rail span { height: 15px; top: 2px; } body div.post-format-audio .mejs-controls .mejs-button button { margin: 6px 5px 6px 1px; } body div.post-format-audio .mejs-controls .mejs-button button { font-size: 18px; } body div.post-format-audio .mejs-controls .mejs-playpause-button button { left: 8px; } body div.post-format-audio .mejs-controls .mejs-playpause-button button:before { content: '\e90a'; } body div.post-format-audio .mejs-controls .mejs-mute button:before { content: '\e8c8'; } .pp_inline video { width: 100%; min-height: 270px; } #bg-audio { position: fixed; bottom: 0; left: 0; z-index: 900; width: 115px !important; } #bg-audio .mejs-container { width: 115px !important; } /* Side Layout */ .layout-side div.inner-super-wrapper { margin-left: 280px; } /*----- End of General Styling ------*/ /*======================================== = Custom Scrollbar = ========================================*/ div.nicescroll-rails { z-index: 10; cursor: pointer; } /*----- End of Custom Scrollbar ------*/ /*============================================== = Splash Screen Stylings = ==============================================*/ #splash_screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } div.splash_wrap { position: absolute; top: 0%; width: 100%; height: 100%; left: 0%; z-index: 15; display: table; } div.splash_wrap div.splash_inner-wrap { display: table-cell; vertical-align: middle; } div.splash_wrap img { display: block; margin: 0 auto; } div.splash-loader { width: 430px; height: 1px; background: rgba(0, 0, 0, 0.2); position: relative; margin: 20px auto; } div.splash-loader div { position: absolute; top: 0; width: 0%; left: 0; background: #fff; height: 1px; overflow: hidden; } .sp-head { position: absolute; opacity: 0; top: 0; right: 0; width: 3px; height: 1px; background: #fff; box-shadow: 0px 0px 8px 4px #fff; border-radius: 100%; } #spl-1 { position: absolute; top: 0; left: 0; width: 100%; height: 50%; z-index: 9; } #spl-2 { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; z-index: 9; } /*----- End of Splash Screen Stylings ------*/ /*================================================ = Featured Media Stylings = ================================================*/ .mutual-content-wrap > img { margin: 30px auto; display: block; max-width: 100%; } div.page-wrapper img { max-width: 100%; margin: 0 auto; height: auto; } div.page-wrapper div.googlemap-inner-wrap img { max-width: none; } div.single-image, div.single-video, div.product-gallery { margin-top: 50px; position: relative; } div.single-image img { display: block; max-width: 100%; height: auto; } .no-post-thumb { display: none; } .featured-wrap { position: relative; z-index: 2; } .featured-wrap.no-post-thumb { margin-bottom: 0; } .gm-style-iw { color: #333; } /*----- End of Featured Media Stylings ------*/ /*=========================================== = Page Title Stylings = ===========================================*/ /* Faux Wrapper for Top Area */ div.supper-top-wrap { position: relative; z-index: 80; } /*========== Title Area Stylings ==========*/ div.title-wrap { padding: 50px 0 50px 0; position: relative; z-index: 2; background: #222222; } div.title-wrap h1 { color: white; padding: 0px; margin: 0; display: block; line-height: 1.2; transition: font-size 0.8s cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transition: font-size 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); } div.title-wrap i { margin-right: 8px; } div.title-block i.icon { margin-right: 20px; } div.title-wrap.has-breadcrumbs h1 { width: 60%; } #title-overlay { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; } /* Subtitle */ .subtitle { color: white; font-size: 13px; padding: 10px 0 0 0; line-height: 1.4; margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; } div.title-wrap .wrap { position: relative; z-index: 4; } /*========== Title Intro Animations ==========*/ /* Title Height Animation */ .teaser-height_animate div.supper-top-wrap { height: 0; overflow: hidden; transition: height 0.9s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: height 0.9s cubic-bezier(0.165, 0.84, 0.44, 1); } /*========== Title Alignment Stylings ==========*/ .title-align-right div.title-wrap, .title-align-right .subtitle { text-align: right; } .title-align-right div.title-wrap i { float: right; margin-right: 0; margin-left: 20px; } .title-align-right h1 { float: right; } .title-align-center div.title-wrap, .title-align-center .subtitle { text-align: center; } .title-align-center .subtitle { width: auto; } .title-align-center div.title-wrap #breadcrumbs { margin-top: 0; position: relative; left: auto; top: auto; text-align: center; display: block; } /*========== Fluid Title ==========*/ .title-style-fluid .title-wrap .skeleton { width: 95%; } .title-align-center div.title-wrap.has-breadcrumbs h1 { margin-left: auto; margin-right: auto; width: auto; } /*----- End of Page Title Stylings ------*/ /*=============================================== = Layout Related Stylings = ===============================================*/ .mutual-content-wrap { margin-bottom: 0px; margin-top: 0px; } .mutual-content-wrap p:first-child { padding-top: 0; } .mutual-content-wrap p { padding: 10px 0px 10px 0; margin: 0; } /*========== Page Structure Stylings ==========*/ div.page-wrapper { position: relative; z-index: 5; } div.woo-shop { margin-top: 50px; } .page-content img { max-width: 100%; height: auto; } .page-content { padding-bottom: 30px; padding-top: 45px; } div.single-post-content .page-content { padding-bottom: 0; } .page-content p:first-child { margin-top: 0; } .page-content p:last-child { margin-bottom: 0; } /* Archives etc Misc Pages top margin */ /*----- End of Layout Related Stylings ------*/ /*========== Gallery Tiles ==========*/ .page-content div.gallery { margin: 0px 0px 15px 0px; clear: both; } .page-content div.gallery dl.gallery-item { padding: 0; float: left; margin: 0; } .page-content div.gallery dl.gallery-item a, div.gallery dl.gallery-item img { display: block; max-width: 100%; margin: 0 auto; border-radius: 0px; } .page-content div.gallery dl.gallery-item a { margin: 1px; } .page-content div.gallery a.read-more { margin-top: 10px; } .page-content div.gallery.gallery-columns-1 dl.gallery-item { max-width: 100%; } .page-content div.gallery.gallery-columns-2 dl.gallery-item { max-width: 50%; } .page-content div.gallery.gallery-columns-3 dl.gallery-item { max-width: 33.33%; } .page-content div.gallery.gallery-columns-4 dl.gallery-item { max-width: 25%; } .page-content div.gallery.gallery-columns-5 dl.gallery-item { max-width: 20%; } .page-content div.gallery.gallery-columns-6 dl.gallery-item { max-width: 16.66%; } .page-content div.gallery.gallery-columns-7 dl.gallery-item { max-width: 14.28%; } .page-content div.gallery.gallery-columns-8 dl.gallery-item { max-width: 12.5%; } .page-content div.gallery.gallery-columns-9 dl.gallery-item { max-width: 11.1%; } /*========== Password Protected Stylings ==========*/ form.post-password-form { padding: 30px; border: 1px solid #eaeaea; border-radius: 2px; margin: 30px auto; text-align: center; } form.post-password-form input { display: inline-block; margin-right: 15px; } form.post-password-form input[type=password] { padding: 12px 10px; width: 300px; border-radius: 0px; } form.post-password-form input[type=submit] { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 12px 15px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } form.post-password-form input[type=submit]:hover { background: #66a7cf; border-color: #66a7cf; color: white; } /*============================================ = Breadcrumbs Stylings = ============================================*/ /*========== WRT Centered Align Title ==========*/ #breadcrumbs.break-crumbs { margin-top: 3px; } #breadcrumbs { position: absolute; top: 50%; right: 0; z-index: 3; border-radius: 0px; padding: 0; display: block; background: inherit; padding: 2px 10px; color: white; margin-top: -10px; font-size: 11px; } #breadcrumbs a { font-size: 11px; text-decoration: none; color: white; } #breadcrumbs span.current { font-size: 11px; color: white; } #breadcrumbs span { margin: 0 2px; } /*========== WRT Right Align Title ==========*/ .title-align-right #breadcrumbs { left: 0; right: auto; } /*----- End of Breadcrumbs Stylings ------*/ /*=================================== = 404 Styling = ===================================*/ .not-found-teaser { text-align: center; margin-top: 50px; } .not-found-teaser h4 { font-size: 160px; color: #66a7cf; } .not-found-teaser h4 span { opacity: 0; display: inline-block; } div.not-found-image { display: block; position: relative; } div.not-found-image img { display: block; margin: 90px auto 5px auto; max-width: 100%; } div.not-found-image canvas#icon404 { position: absolute; top: -60px; left: 35%; z-index: 10; } div.not-found-image canvas#icon404-subset { position: absolute; top: -60px; left: 64%; z-index: 10; } .mutual-content-wrap div.not-found-text { max-width: 70%; margin: 5px auto; display: block; text-align: center; } div.error-search { width: 70%; margin: 25px auto 50px auto; } div.error-search input[type=text] { padding: 11px; color: #222222; border-radius: 0px; width: 100%; } /*----- End of 404 Styling ------*/ /*=============================================== = Contact Form 7 Stylings = ===============================================*/ form.wpcf7-form input[type=text] { width: 100%; } form.wpcf7-form p { margin-bottom: 0; width: 100%; clear: both; } form.wpcf7-form p:last-child { margin-bottom: 0; padding-bottom: 0; } form.wpcf7-form p span.wpcf7-list-item { display: block; margin-top: 4px; } form.wpcf7-form .wpcf7-text, div.wpcf7 div.text-three-cols input[type=text], form.wpcf7-form .wpcf7-select, form.wpcf7-form .wpcf7-password { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0; } form.wpcf7-form .wpcf7-select { width: 90%; } form.wpcf7-form .wpcf7-textarea { padding: 14px; overflow: auto; display: block; } div.rad-widget form.wpcf7-form .wpcf7-submit { margin-top: 0; } form.wpcf7-form .wpcf7-submit { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 12px 16px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; } form.wpcf7-form .wpcf7-submit:hover { background: #66a7cf; border-color: #66a7cf; color: white; } form.wpcf7-form .wpcf7-captchar { padding: 14px; width: 100px; border: none; display: block; margin: 0; box-shadow: none; } form.wpcf7-form .wpcf7-captchac { margin: 7px 10px 0px 0px; float: left; } div.wpcf7-response-output { padding: 15px !important; background: #66d179; margin: 0 !important; text-align: center; color: #fff; } div.wpcf7-validation-errors.wpcf7-response-output { background: #fd5d56 !important; border-color: #fd5d56 !important; } span.wpcf7-not-valid-tip { left: auto !important; width: auto !important; right: 0 !important; background: #fd5d56 !important; color: #fff; font-size: 11px !important; top: 29px !important; padding-left: 10px; } div.wpcf7 img.ajax-loader { display: none; } select.wpcf7-form-control.wpcf7-select { width: 100%; border: 1px solid #eaeaea; box-shadow: none; background: #fff; } form.wpcf7-form p.input-half { width: 48%; padding: 0; margin: 12px 0 12px 0; float: left; clear: left; } form.wpcf7-form p.input-half-last { width: 48%; padding: 0; margin: 12px 0 12px 0; float: left; clear: right; } form.wpcf7-form p.input-half-last { margin-left: 4%; } /*----- End of Contact Form 7 Stylings ------*/ /*========== Search Page Search ==========*/ .search-page-search { position: relative; padding-bottom: 40px; margin-top: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 40px; } .search-page-search label { display: none; } .search-page-search input[type=submit] { position: absolute; top: 0; right: 0; } .search-page-search input[type=text] { width: 85%; display: block; } /*=========================================== = Pagination Stylings = ===========================================*/ .pagination { float: left; padding: 0; } .pagination_wrap { padding: 50px 0 50px 0; border-top: 1px solid #eaeaea; } .full_width .pagination_wrap { padding: 50px; } div.woocommerce-pagination, div.misc-pagination-wrap { padding-bottom: 40px; } .pagination ul { margin: 0; padding: 0; display: block; } .pagination ul li, .page-numbers { float: left; list-style: none; padding: 0; margin: 0px 4px 0px 0px; } .pagination ul li a, .pagination_wrap a.page-numbers { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 7px 12px; font-size: 11px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; display: block; } .pagination ul li a:hover, .pagination_wrap a.page-numbers:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .pagination ul li span.current, .pagination_wrap span.page-numbers { background: #66a7cf; border-color: #66a7cf; color: white; outline: none; border: 1px solid #66a7cf; padding: 7px 12px; font-size: 11px; display: inline-block; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; } .pagination ul li span.gap { color: #222222; font-size: 12px; display: block; padding: 12px 12px; } /*========== Pagination Dropdown Stylings ==========*/ .pagination-dropdown { float: right; padding: 0; } .pagination-dropdown span { font-size: 11px; float: left; margin: 8px 5px 0 0; } .pagination-dropdown div.select-wrap i { position: absolute; top: 5px; right: 0; color: #222222; font-size: 14px; display: block; padding: 5px 7px; } .pagination-dropdown div.select-wrap { height: 21px; margin: 0; overflow: hidden; padding: 5px 0; position: relative; width: 54px; z-index: 1; float: left; padding-top: 8px; border: 1px solid #999999; border-radius: 0px; } .pagination-dropdown div.select-wrap select { background: transparent !important; border: none; color: #222222; cursor: pointer; display: block; font-size: 13px; margin: 0 !important; outline: none; outline: none; padding: 0px 0px 10px 10px; width: 83px; height: 25px; position: relative; z-index: 2; } .pagination-dropdown div.select-wrap select option { background: white; } /*----- End of Pagination Stylings ------*/ /*======================================= = Filter Stylings = =======================================*/ div.top-portfolio-nav { margin-bottom: 10px; } .ioa-menu { margin-top: 0px; margin-bottom: 30px; position: relative; float: left; z-index: 10; text-align: center; } .ioa-menu > span { float: left; margin: 5px 10px 0 0; } .ioa-menu ul { margin: 0; padding: 0; float: left; display: block; } .ioa-menu ul li { list-style: none; margin: 0 10px 0 0; padding: 0 0 0; float: left; cursor: pointer; overflow: hidden; position: relative; border-radius: 0px; } .ioa-menu ul li span.filter-text { position: relative; display: block; padding: 5px 20px; color: #999999; font-size: 11px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .ioa-menu ul li.active span.filter-text { color: #222222; background: white; border-radius: 0px; } .ioa-menu ul li:hover span.filter-text { color: #222222; background: white; } .full_width .ioa-menu { padding: 30px 0 0px; float: none; text-align: center; } .full_width .ioa-menu ul { float: none; display: inline-block; } .full_width div.top-portfolio-nav { margin-bottom: 0; } /*----- End of Filter Stylings ------*/ /*========================================== = Under Construction = ==========================================*/ div.main-uc-area { background-color: #66a7cf; padding: 30px 0; font-family: "Open Sans", Helvetica,Arial; } div.main-uc-area h1.title { font-size: 32px; color: #333; margin: 0 0 15px 0; text-align: center; } div.uc-text { font-size: 13px; text-align: center; max-width: 60%; margin: 20px auto; color: #222222; line-height: 1.7; } div.easyPieChart { margin: 30px auto; position: relative; text-align: center; font-size: 48px; color: white; } div.easyPieChart canvas { position: absolute; top: 0; left: 0; } div.uc-content-area { width: 700px; margin: 0 auto; background: rgba(255, 255, 255, 0.8); padding: 40px 0 30px 0; } /*----- End of Under Construction ------*/ /** Sticky Contact Form */ div.sticky-contact { position: fixed; bottom: 0; right: 25px; width: 260px; background: #fff; z-index: 9997; min-height: 300px; visibility: hidden; } .sticky-button-panel { position: absolute; top: 8px; right: 10px; } .sticky-button-panel a { float: left; padding: 10px; color: #222222; background: rgba(255, 255, 255, 0.1); margin-left: 1px; } .sticky-button-panel a:hover { color: white; } div.sticky-title { padding: 15px; background: #66a7cf; } div.sticky-title h5 { margin: 0; color: white; } .inner-sticky-contact { border: 1px solid #eaeaea; border-top: none; padding: 15px; position: relative; z-index: 4; max-height: 550px; overflow: auto; } .inner-sticky-contact p { margin-top: 0; position: relative; } .inner-sticky-contact span.error-note { position: absolute; left: -126px; top: 6px; width: 114px; text-align: center; font-weight: bold; background: #ea0000; opacity: 0; visibility: hidden; border-radius: 2px; color: #fff; font-size: 10px; padding: 3px 6px; } .inner-sticky-contact div.success { display: none; padding: 15px; text-align: center; background: #73d40b; color: #fff; margin-bottom: 15px; } div.sticky-contact form.wpcf7-form .wpcf7-text, div.sticky-contact form.wpcf7-form .wpcf7-select, div.sticky-contact form.wpcf7-form .wpcf7-password { padding: 10px 6px; } /** Title Styles */ .title-style-bottom-border .intro_title-title-inner-wrap, .title-style-bottom-border .ioa-text-column h4.text-subtitle { border-bottom: 2px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; } .title-style-bottom-border .sidebar-wrap h4.heading { border-bottom: 2px solid #eaeaea; padding-bottom: 15px; margin-bottom: 25px; } .title-style-short-bottom-border .intro_title-title-inner-wrap:after, .title-style-short-bottom-border .ioa-text-column h4.text-subtitle:after { content: ' '; width: 45px; height: 0px; border-bottom: 2px solid #eaeaea; display: block; margin-top: 5px; margin-bottom: 25px; } .title-style-short-bottom-border .sidebar-wrap h4.heading:after { content: ' '; width: 45px; height: 0px; border-bottom: 2px solid #eaeaea; display: block; margin-top: 5px; margin-bottom: 25px; } /** Events Plugin */ h4.entry-title.summary { margin-bottom: 5px; } ol.hfeed.vcalendar { padding-left: 0px; } #tribe-events .tribe-events-button, #tribe-events .tribe-events-button:hover, #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, .tribe-events-button.tribe-active:hover, .tribe-events-button.tribe-inactive, .tribe-events-button:hover, .tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-], .tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-] > a { background: #9ac832; } #tribe-events-content .tribe-events-tooltip h4, #tribe_events_filters_wrapper .tribe_events_slider_val, .single-tribe_events a.tribe-events-gcal, .single-tribe_events a.tribe-events-ical { color: #9ac832; } /*----- End of Section comment block ------*/ /*============================================= = Page Builder Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Animation 2. Common Hover Stylings 3. Media Intro Animation 4. General Stylings 5. Slider in RAD Widgets 6. Text Column Stylings 7. HTML Column Stylings 8. Post List Stylings 9. Post Column Stylings 10. Intro title 11. Divider 12. Image Widget 13. Thumbnails Widget 14. CTA 15. Tabs 16. Accordion 17. Sidebar Widget 18. Testimonial Slider 19. Single Testimonial 20. Video 21. Progress Bar 22. Radial Chart 23. Button 24. Social Icons 25. Flickr 26. Person Widget 27. Toggles 28. Google MAP 29. Logo Widget 30. Counter Widget 31. Easy List 32. Tweets 33. Notification 34. Pricing Tables 35. Project Gallery 36. Masonry Widget 37. Pie Chart 38. Bar Graphs 39. Line Graphs 40. Banners 41. Blog List Template 42. Menu 32. Mail Chimp ----- End of Table of Contents ---------- */ /*============================================= = Common Hover Stylings = =============================================*/ /*========== Image Mask ==========*/ .image-mask { border-radius: 0px; position: relative; } .image-mask:before { left: -1px; z-index: 2; bottom: -1px; right: -1px; height: 50%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(34, 34, 34, 0)), to(rgba(34, 34, 34, 0.4))); background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0) 0, rgba(34, 34, 34, 0.45) 100%); background: linear-gradient(to bottom, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.4) 100%); content: ' '; position: absolute; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .image-mask:after { opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; left: -1px; z-index: 2; top: -1px; right: -1px; bottom: -1px; background: #222222; content: ' '; position: absolute; border-radius: 0px; } .image-mask:hover:after { opacity: 0.2; } div.google_map img { max-width: none; } /*========== Default Hover ==========*/ .demo-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0px; z-index: 5; opacity: 0; transition: opacity 0.3s; background: rgba(0, 0, 0, 0.7); } div.portfolio-columns ul li div.inner-item-wrap div.image-wrap:hover .demo-overlay { opacity: 1; } .inner-demo-overlay { display: table; width: 100%; height: 100%; top: 0; left: 0; position: absolute; } .demo-button-panel { display: table-cell; vertical-align: middle; text-align: center; } .demo-button-panel a, a.demo-link { text-decoration: none; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 15px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } .demo-button-panel a:hover, a.demo-link:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .demo-meta-info { display: none; } a.demo-link { margin-left: 0; } .hover-overlay { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 3; border-radius: 0px; overflow: hidden; } .hover-item .image { overflow: hidden; } .hover-item img { max-width: 100%; height: auto; } .hover-item .hide { display: none; } .ioa-hover-default .hover-overlay .hover-icon { color: #fff; padding: 0px; display: block; font-size: 14px; position: absolute; bottom: 15px; left: 15px; opacity: 1; z-index: 2; } .single-hover { border-radius: 0px; } .ioa-hover-default .single-hover { display: block; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: 6; width: 100%; height: 100%; } .ioa-hover-default .single-hover > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; color: #fff; border-radius: 0px; } .ioa-hover-fade .single-hover { display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: -1px; z-index: 6; background: #66a7cf; opacity: 0; -webkit-animation: FadeOut 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) forwards; animation: FadeOut 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) forwards; } .ioa-hover-fade .single-hover > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; } .ioa-hover-fade .hover-overlay .hover-icon { color: white; padding: 22px; display: block; font-size: 24px; position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px; } .ioa-hover-fade .image:hover .single-hover, .hover-item:hover .single-hover { -webkit-animation: FadeIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; animation: FadeIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; } .ioa-hover-fade_scale .text-col-layout .imageholder, .ioa-hover-fade_scale .default-col-layout .imageholder { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; position: relative; } .ioa-hover-fade_scale .single-hover { display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 6; background: #66a7cf; opacity: 0; -webkit-animation: FadeOut 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) forwards; animation: FadeOut 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) forwards; } .ioa-hover-fade_scale .single-hover > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; } .ioa-hover-fade_scale .hover-overlay .hover-icon { color: white; padding: 22px; display: block; font-size: 24px; position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px; } .ioa-hover-fade_scale .image:hover .single-hover { -webkit-animation: FadeIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; animation: FadeIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; } .ioa-hover-fade_scale .text-col-layout .image:hover .imageholder, .ioa-hover-fade_scale .default-col-layout .image:hover .imageholder { transform: scale(1.4); -webkit-transform: scale(1.4); } /*========== Grid Hovers ==========*/ /* Default Hover */ .hover-grid-overlay { display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 6; text-align: center; } .hover-grid-overlay .grid-inner-wrap { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; z-index: 6; } .hover-grid-overlay .grid-inner-wrap a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; } .ioa-grid-hover-default .grid-col-layout .single-hover { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; } .ioa-grid-hover-default .grid-col-layout .single-hover > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; overflow: hidden; } .ioa-grid-hover-default .hover-grid-overlay .grid-inner-wrap { opacity: 1; } .ioa-grid-hover-default .hover-grid-overlay { top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 6; text-align: left; } .ioa-grid-hover-default .hover-grid-overlay i { top: 8px; left: 8px; transition: opacity 0.3s ease-in-out; font-size: 18px; color: #fff; position: absolute; margin-top: -8px; margin-left: -8px; opacity: 0; background: rgba(0, 0, 0, 0.7); padding: 5px; } .ioa-grid-hover-default .grid-col-layout .hover-grid-overlay:hover i { opacity: 1; } div.hover-title-area-wrap { position: absolute; bottom: 15px; left: 15px; z-index: 2; right: 15px; } div.hover-title-area h4 { color: #fff; margin: 0; font-weight: 400; font-size: 13px; letter-spacing: 1px; line-height: 1.4; margin-right: 20px; } .ioa-grid-hover-fade div.hover-title-area-wrap, .ioa-grid-hover-fade_scale div.hover-title-area-wrap { top: 15px; } .ioa-grid-hover-fade div.hover-title-area, .ioa-grid-hover-fade_scale div.hover-title-area { display: table; width: 100%; height: 100%; } .ioa-grid-hover-fade div.hover-title-area h4, .ioa-grid-hover-fade_scale div.hover-title-area h4 { display: table-cell; text-align: center; vertical-align: middle; } /* Title Slide Up */ .ioa-grid-hover-titleslide .grid-col-layout img { transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; top: 0; } .ioa-grid-hover-titleslide .underlay-title { background: #66a7cf; position: absolute; z-index: 6; bottom: -60px; left: 0; width: 100%; transition: bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); } .ioa-grid-hover-titleslide .hover-grid-overlay:hover .underlay-title { bottom: 0; } .ioa-grid-hover-titleslide .grid-col-layout .underlay-title h4 { color: white; padding: 0px; text-align: center; margin: 18px; font-size: 15px; } .ioa-grid-hover-titleslide .grid-col-layout .image:hover img, .ioa-grid-hover-titleslide .grid-col-layout:hover img { top: -35px; } /* Fade */ .ioa-grid-hover-fade .grid-inner-wrap { background: #66a7cf; opacity: 0; -webkit-animation: FadeOut 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); animation: FadeOut 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); } .ioa-grid-hover-fade .grid-col-layout .single-hover { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; } .ioa-grid-hover-fade .grid-col-layout .single-hover > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; } .ioa-grid-hover-fade .grid-col-layout:hover .hover-grid-overlay .grid-inner-wrap { -webkit-animation: FadeIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; animation: FadeIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; } div.portfolio-columns ul li div.inner-item-wrap div.hover-title-area h4 { color: white; } /* Fade Scale */ .ioa-grid-hover-fade_scale .grid-inner-wrap { background: #66a7cf; opacity: 0; -webkit-animation: ScaleOut 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); animation: ScaleOut 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); } .ioa-grid-hover-fade_scale .grid-col-layout .single-hover { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; } .ioa-grid-hover-fade_scale .grid-col-layout .single-hover > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; } .ioa-grid-hover-fade_scale .grid-col-layout:hover .hover-grid-overlay .grid-inner-wrap { -webkit-animation: ScaleIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; animation: ScaleIn 0.3s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; } /* Complete Set */ .ioa-grid-hover-whole_set .hover-grid-overlay { background: #66a7cf; opacity: 0; -webkit-animation: ScaleOut 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); animation: ScaleOut 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); } div.hover-set-area-wrap { display: table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } div.hover-set-area { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; } div.hover-set-area h4 { color: white; margin-bottom: 0; } .ioa-grid-hover-whole_set .grid-col-layout:hover .hover-grid-overlay { -webkit-animation: ScaleIn 0.2s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; animation: ScaleIn 0.2s 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; } div.hover-link-set { display: inline-block; margin-top: 20px; } div.hover-link-set a { float: left; color: white; text-decoration: none; margin: 0px 5px 0px 5px; transition: all 0.2s; line-height: 1; position: relative; padding: 12px 15px; border: 1px solid white; } div.hover-link-set a:hover { background: #222222; color: white; border-color: #222222; } /*----- End of Common Hover Stylings ------*/ /*======================================== = General Stylings = ========================================*/ .section-secondary-color { background: #222222; } .section-tertiary-color { background: #f0f0f0; } .section-primary-color { background: #66a7cf; } /*========== Loading Icon ==========*/ .ioa-loader { position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -15px; background: url(sprites/i/loader.gif) center center no-repeat; padding: 15px; border-radius: 2px; opacity: 0.8; z-index: 99; display: block; width: 15px; height: 15px; } .sticky-icon { position: absolute; background: #66a7cf; color: white; padding: 13px 14px; top: 10px; left: -10px; z-index: 10; border-radius: 0px; } /*========== Load More AJAX Stylings ==========*/ div.ajax-button-wrap { text-align: center; margin-bottom: 25px; margin-top: 25px; } .page-wrapper a.ajax-load-more-button, .page-wrapper a.ajax-list-load-more-button { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 10px 18px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; display: inline-block; } /* Scrollable stylings for Elements */ .bx-wrapper { max-width: 100%; } .scrollable { opacity: 0; overflow: hidden; } .shortcode-scrollable .slide { overflow: hidden; float: left; } .shortcode-scrollable h2 { margin: 10px 0 10px 0; padding: 0; line-height: 1; font-size: 15px; } .shortcode-scrollable h2 a { text-decoration: none; color: #222222; } .shortcode-scrollable img { width: 100%; } ul.scroll-slide-controls { padding: 0 0 20px 0; margin: 0; } ul.scroll-slide-controls li { padding: 0 0px 2px 0; cursor: pointer; margin: 0 30px 0 0; float: left; list-style: none; } ul.scroll-slide-controls li.active { color: #9ac832; } /*========== Swiper ==========*/ .swiper-slide { position: relative; float: left; overflow: hidden; } .swiper-slide img { display: block; width: 100%; } .swiper-container { overflow: hidden; visibility: hidden; opacity: 0; } .swiper-slide .image { position: relative; } div.swiper-slide:hover div.mason-caption-wrap { opacity: 1; transform: scale(1); -webkit-transform: scale(1); } .modelie-scrollbar-wrap { position: relative; height: 5px; margin-top: 5px; opacity: 0.5; transition: opacity 0.4s; } .modelie-scrollbar-wrap:hover { opacity: 1; } .modelie-scrollbar { position: relative; -ms-touch-action: none; height: 5px; background: rgba(0, 0, 0, 0.1); border-radius: 0px; } .swiper-scrollbar-drag { height: 100%; position: relative; background: #66a7cf; border-radius: 0px; } .swiper-scrollbar-cursor-drag { cursor: move; } /*========== Builder Related Structural Stylings ==========*/ .has-sidebar .skeleton { width: auto; } /*========== BG and Border Models for RAD Containers ==========*/ .senseBottomBorderModel { padding-bottom: 30px; } .senseTopBorderModel { padding-top: 30px; } .page-rad-component { padding-bottom: 30px; } /*========== Row Background Video Settings ==========*/ div.video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: hidden; } .video-bg-inner { position: absolute; top: 0; left: 0; } div.video-bg .mejs-controls { display: none; } div.video-bg .mejs-offscreen, div.video-bg .mejs-layers { display: none; } /*========== RAD Row ==========*/ div.section-inner-wrap { height:100%; } div.page-section { padding: 0; position: relative; } div.page-section.has-one-page-menu { z-index: 9999; } div.page-section div.rad-container.top { margin-top: 50px; } div.section-content { position: relative; z-index: 3; } div.section-vertical-span { display: table; height: 100%; width: 100%; } div.inner-section-vertical-span { display: table-cell; vertical-align: middle; } .section-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } div.section-bg-google-map { width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; left: 0; } div.section-bg-google-map div.google_map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /*========== RAD Columns ==========*/ div.page-section div.full_width div.rad-container { margin-top: 0; margin-bottom: 0; } div.page-section div.full_width div.rad-container.senseBGModel div.rad-inner-container { padding: 0; } div.rad-container.last { margin-right: 0; clear: right; } div.rad-container.senseBGModel div.rad-inner-container { padding: 30px; } div.rad-container.full { margin-right: 0; } /* Container Alignment */ div.rad-container.auto_align { float: none; margin-left: auto !important; margin-right: auto; } div.rad-container.inline { float: none; margin-left: auto !important; margin-right: auto; text-align: center; } div.rad-container.inline div.rad-widget { display: inline-block; margin-left: 10px; margin-right: 10px; margin-top: 0; } div.rad-container.right { float: right; } div.rad-widget { margin-top: 25px; } div.rad-widget.top { margin-top: 0px; } /*========== Cell Blocks Layout for Columns ==========*/ .blocked-layout .rad-container { position: relative; } .blocked-layout div.rad-widget { margin-bottom: 0; } .blocked-layout .rad-container.top .rad-inner-container { margin-top: 0; } .blocked-layout .rad-container .rad-inner-container { margin-top: 10px; } .blocked-layout div.rad-container { padding: 0; margin-right: 25px; margin-left: 25px; } .blocked-layout div.rad-container .rad-inner-container { padding: 0px 5px; } .blocked-layout div.rad-container .rad-inner-container.first { padding-left: 0; } .blocked-layout div.rad-container .rad-inner-container.last { padding-right: 0; } .blocked-layout div.rad-container span.hline { border-right: 1px solid rgba(0, 0, 0, 0.1); width: 0px; display: block; top: 0px; height: 0%; top: 0%; right: -25px; position: absolute; -webkit-transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .blocked-layout div.rad-container span.vline { border-bottom: 1px solid rgba(0, 0, 0, 0.1); height: 0px; display: block; top: -25px; left: 50%; width: 0%; position: absolute; -webkit-transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .blocked-layout.start-block-animation div.rad-container span.hline { top: 0; height: 100%; } .blocked-layout.start-block-animation div.rad-container span.vline { left: 0; width: 100%; } /*========== RAD Widget ==========*/ div.rad-widget { position: relative; } .nested div.rad-widget.w_layout_element { margin-top: 20px; margin-bottom: 0; } .nested div.rad-widget.w_layout_element.top { margin-top: 0px; margin-bottom: 0; } .full_width .nested div.rad-widget.w_layout_element.w_full:first-child, .full_width div.rad-widget.nested div.rad-widget.w_col.w_full:first-child { margin-top: 0; } /*========== RAD Fade Animation ==========*/ div.rad-widget.widget-animate-fade { opacity: 0; transition: all 0.2s ease-in-out 0.3s; -webkit-transition: all 0.2s ease-in-out 0.3s; } div.rad-widget.widget-animate-fade.start-animation { opacity: 1; } /*========== RAD Fade from Left Animation ==========*/ div.rad-widget.widget-animate-fade-left { transform: translate(-50px, 0px); -webkit-transform: translate(-50px, 0px); -webkit-transition: all 0.4s ease-out 0.3s; transition: all 0.4s ease-out 0.3s; opacity: 0; } div.rad-widget.widget-animate-fade-left.start-animation { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } /*========== RAD Fade from Right Animation ==========*/ div.rad-widget.widget-animate-fade-right { transform: translate(50px, 0px); -webkit-transform: translate(50px, 0px); -webkit-transition: all 0.4s ease-out 0.3s; transition: all 0.4s ease-out 0.3s; opacity: 0; } div.rad-widget.widget-animate-fade-right.start-animation { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } /*========== RAD Fade from Bottom Animation ==========*/ div.rad-widget.widget-animate-fade-bottom { transform: translate(0px, 50px); -webkit-transform: translate(0px, 50px); -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; opacity: 0; } div.rad-widget.widget-animate-fade-bottom.start-animation { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } /*========== RAD Fade from Top Animation ==========*/ div.rad-widget.widget-animate-fade-top { transform: translate(0px, -50px); -webkit-transform: translate(0px, -50px); -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; opacity: 0; } div.rad-widget.widget-animate-fade-top.start-animation { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } /*========== RAD Icon Fade Animation ==========*/ div.widget-animate-icon-fade.rad-widget div.ioa-icon-area i { -webkit-transition: all 0.6s linear 0.3s; transition: all 0.6s linear 0.3s; opacity: 0; } div.widget-animate-icon-fade.rad-widget.start-animation div.ioa-icon-area i { opacity: 1; } /*========== RAD Icon Expand Animation ==========*/ div.widget-animate-icon-expand.rad-widget div.ioa-icon-area i, div.widget-animate-icon-expand.rad-widget div.ioa-icon-area img { -webkit-transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; opacity: 0; -webkit-transform: scale(0.3) rotate(15deg); transform: scale(0.3) rotate(15deg); } div.widget-animate-icon-expand.rad-widget.start-animation div.ioa-icon-area i, div.widget-animate-icon-expand.rad-widget.start-animation div.ioa-icon-area img { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } /*========== RAD Thumbs Animation ==========*/ div.widget-animate-thumbs.rad-widget ul li { -webkit-transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.3s; transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.3s; opacity: 0; -webkit-transform: scale() rotate(15deg); transform: scale(); } div.widget-animate-thumbs.rad-widget.start-animation ul li { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1); } /*========== Icons Stylings ==========*/ i.shortcode-icon { margin: 1px; display: inline-block; } /*----- End of General Stylings ------*/ /*========== Media Loader ==========*/ div.mason-parent { position: relative; overflow: hidden; height: 500px; } div.mason-parent .isotope { opacity: 0; } /*============================================= = Slider in RAD Widgets = =============================================*/ .slider-inner-wrap div.inner-bg-desc h2 { font-size: 52px; color: inherit; } .slider-inner-wrap div.slider-desc div.caption p { font-size: 15px; } /*----- End of Slider in RAD Widgets ------*/ /*============================================ = Text Column Stylings = ============================================*/ /*========== Default Icon Stylings for Text Columns ==========*/ .ioa-icon-area i { border-color: transparent; font-size: 24px; z-index: 3; position: relative; } .ioa-icon-area { position: relative; } /* == Border Style == */ i.border-style, i.border-style-circ { padding: 15px; border: 2px solid #eaeaea; } i.background-style, i.background-style-circ { background: #66a7cf; color: white; padding: 15px; } i.border-style-circ, i.background-style-circ { border-radius: 100%; } /* Icon Style when no icon style is set */ .ioa-text-column.none .ioa-icon-area { position: relative; } .ioa-text-column.none.col-align-left .ioa-icon-area { float: left; margin-right: 15px; margin-bottom: 10px; } .ioa-text-column.none.col-align-right .ioa-icon-area { float: right; margin-left: 15px; margin-bottom: 10px; } .ioa-text-column.none.icon-style-default .ioa-icon-area { padding-top: 8px; } .ioa-text-column.none.col-align-center .ioa-icon-area { text-align: center; margin-bottom: 15px; } .ioa-text-column.none.col-align-center .ioa-icon-area i { display: inline-block; } /*========== Default Stylings for columns ==========*/ .ioa-text-column { position: relative; min-height: 60px; } .ioa-text-column.none { min-height: 0; } .ioa-text-column h2 { margin: 0 0 5px 0; padding: 0; color: #222222; line-height: 1.4; font-size: 16px; } .ioa-text-column h4 { margin: 0px 0 15px 0; padding: 0; color: #999999; font-size: 12px; line-height: 1.3; } .ioa-text-column div.ioa-text { margin-top: 0px; clear: both; margin-bottom: 0px; } .ioa-text-column p { margin: 0 0 15px 0; padding: 0; } .ioa-text-column p:first-child { margin-top: 0; padding-top: 0; } .ioa-text-column p:last-child { margin-bottom: 0; padding-bottom: 0; } .ioa-text-column div.ioa-text p { color: inherit; } /*========== More Button Stylings ==========*/ .ioa-text-column .ioa-more-button { margin-top: 15px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 15px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } .ioa-text-column .ioa-more-button:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .ioa-text-column .ioa-more-button i { width: auto; } /*========== Right / Left Icon Column Calculation based on Columns ==========*/ .ioa-text-column.left-icon .ioa-icon-area { position: absolute; top: 0; left: 0; } .ioa-text-column.right-icon .ioa-icon-area { position: absolute; top: 0; right: 0; } .ioa-text-column.left-icon div.ioa-text-area { margin-left: 80px; } .ioa-text-column.right-icon div.ioa-text-area { margin-right: 80px; text-align: right; } .ioa-text-column.left-icon.icon-style-default .ioa-icon-area i, .ioa-text-column.right-icon.icon-style-default .ioa-icon-area i { font-size: 24px; margin-top: 4px; } .ioa-text-column.left-icon.icon-style-default div.ioa-text-area { margin-left: 60px; } .ioa-text-column.right-icon.icon-style-default div.ioa-text-area { margin-right: 60px; } .full_width .ioa-text-column.right-icon .ioa-icon-area { padding-top: 30px; right: 2.5%; } /*========== Centered Text Style ==========*/ .centered .ioa-icon-area i { margin-bottom: 25px; font-size: 24px; } /*========== Top Image for Columns ==========*/ .ioa-image-area { margin-bottom: 25px; position: relative; } .ioa-image-area img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0px; } /*========== Boxed Layout Stylings ==========*/ .ioa-text-column.boxed { padding: 25px; border-radius: 0px; -webkit-transform-style: preserve-3d; transition: background 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; } .ioa-text-column.boxed i { margin-bottom: 25px; border-color: transparent; } .ioa-text-column.boxed.icon-style-default i { font-size: 24px; } .ioa-text-column.boxed div.ioa-icon-area span { display: none; } .ioa-text-column.boxed > a { text-decoration: none; display: block; color: inherit; } .ioa-text-column.boxed:hover { background: #66a7cf; } .ioa-text-column.boxed:hover h2, .ioa-text-column.boxed:hover h4 { color: white; } .ioa-text-column.boxed:hover p, .ioa-text-column.boxed:hover { color: white; } div.ioa-text-column.boxed:hover div.ioa-icon-area i { color: white !important; border-color: none !important; background: rgba(0, 0, 0, 0) !important; text-shadow: none !important; } .ioa-text-column.boxed:hover .ioa-more-button { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 15px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } .ioa-text-column.boxed:hover .ioa-more-button:hover { background: #66a7cf; border-color: #66a7cf; color: white; } /*========== Icon Boxes ==========*/ .ioa-text-column.iconed { margin-top: 45px; border-radius: 0px; border: 1px solid #eaeaea; position: relative; } .ioa-text-column.iconed i.none { padding: 5px 30px 0 30px; } .ioa-text-column.iconed i.border-style, .ioa-text-column.iconed i.border-style-circ { background: #222222; background: white; } .ioa-text-column.icon.icon-style-default .ioa-icon-area i { border-radius: 100%; } .ioa-text-column.icon.icon-style-border, .ioa-text-column.icon.icon-style-border-circ { border-style: solid; } .ioa-text-column.iconed .ioa-icon-area i { padding: 15px; font-size: 18px; background: #66a7cf; color: white; } .ioa-text-column.iconed .ioa-icon-area { position: absolute; top: -27px; left: 50%; margin-left: -27px; } .ioa-text-column.iconed.col-align-left .ioa-icon-area { left: 28px; margin-left: 0; } .ioa-text-column.iconed.col-align-right .ioa-icon-area { right: 28px; left: auto; margin-left: 0; } .ioa-text-column.iconed .ioa-text-area { z-index: 2; border-radius: 0px; padding: 65px 30px 35px 30px; } /*========== Icon Flip Boxes ==========*/ .ioa-text-column.iconed-alt { text-align: center; -webkit-perspective: 2500px; perspective: 2500px; -webkit-perspective-origin: 50% 0%; perspective-origin: 50% 0%; height: 320px; width: 100%; position: relative; } .ioa-text-column.iconed-alt .front-view i { margin-bottom: 30px; } .ioa-text-column.iconed-alt .front-view i.default { font-size: 32px; } .ioa-text-column.iconed-alt .front-view h2 { margin: 0px 20px; } .ioa-text-column.iconed-alt > div { -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .ioa-text-column .front-view { padding: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; display: table; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .ioa-text-column .front-view > div { display: table-cell; vertical-align: middle; } .ioa-text-column .inner-back-view { padding: 0; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; background: rgba(0, 0, 0, 0.2); z-index: 2; } .ioa-text-column .inner-back-view .back-table-view { -webkit-font-smoothing: subpixel-antialiased; padding: 0; position: absolute; display: table; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 2; } .ioa-text-column .inner-back-view .back-table-view > div { display: table-cell; vertical-align: middle; padding: 0 20px; } .ioa-text-column.iconed-alt .alt-desc { border-radius: 0px; position: absolute; z-index: 5; top: 0px; left: 0px; right: 0px; bottom: 0px; text-align: center; height: 100%; width: 100%; background: #66a7cf; } .alt-inner-desc .ioa-text { line-height: 1.6; } .ioa-text-column .alt-desc a.ioa-more-button { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 15px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } .ioa-text-column .alt-desc a.ioa-more-button:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .ioa-text-column.iconed-alt .alt-desc { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; background-size: cover; background-position: center center; } .ioa-text-column.iconed-alt:hover .alt-desc { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .ioa-text-column.iconed-alt:hover .front-view { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*----- End of Text Column Stylings ------*/ /*========== Full Width Stylings ==========*/ .full_width .ioa-text-column { padding: 30px 2.5%; } .full_width .full .ioa-text-column { padding: 30px 2.5%; } .full_width .four_fifth .ioa-text-column { padding: 30px 2.9%; } .full_width .three_fourth .ioa-text-column { padding: 30px 3.2%; } .full_width .two_third .ioa-text-column { padding: 30px 3.7%; } .full_width .one_half .ioa-text-column { padding: 20px 5%; } .full_width .one_third .ioa-text-column { padding: 30px 7.5%; } .full_width .one_fourth .ioa-text-column { padding: 30px 9%; } .full_width .one_fifth .ioa-text-column { padding: 30px 10%; } div.page-section div.full_width .text-title-wrap { padding: 15px; } /*============================================ = HTML Column Stylings = ============================================*/ .col-align-left { text-align: left; } .col-align-center { text-align: center; } .col-align-right { text-align: right; } .col-align-justify { text-align: justify; } /*----- End of HTML Column Stylings ------*/ /*========================================== = Post List Stylings = ==========================================*/ /*========== General Post Stylings ==========*/ .full_width .post_list-inner-wrap { margin: 30px; } ul.posts { margin: 0; padding: 0; } ul.posts li { list-style: none; padding: 0; margin: 0; position: relative; } ul.posts li div.image { overflow: hidden; } .page-wrapper .post_list-inner-wrap a.ajax-load-more-button span.button-content { padding: 18px 0; } .page-wrapper .post_list-inner-wrap ul.posts li:last-child { padding-bottom: 0; margin-bottom: 0; } .post_list-inner-wrap .pagination { margin-top: 15px; width: 100%; border-top: 1px solid #eaeaea; padding-top: 20px; } /*========== Post List wtih Thumbnail Stylings ==========*/ ul.thumb-list li { min-height: 125px; margin-bottom: 20px; } ul.thumb-list li:last-child { border-bottom: none; } ul.thumb-list li .image { width: 125px; position: absolute; top: 0; left: 0; border-radius: 0px; } ul.thumb-list li .image .helper-display-icon { width: 100%; padding: 30px 0; text-align: center; background: #f0f0f0; color: #222222; } ul.thumb-list li .imageholder, ul.thumb-list img { display: block; border-radius: 0px; } ul.thumb-list li .desc { margin-left: 140px; } ul.thumb-list li .desc h2 { margin: 0; padding: 0; line-height: 1; font-size: 15px; } ul.thumb-list li .desc.adjust-title h2 { margin-top: 0px; } ul.thumb-list li .desc h2 a { text-decoration: none; color: #222222; line-height: 1; } ul.thumb-list li .desc h2 a:hover { color: #66a7cf; } ul.thumb-list li .extras { color: #999999; margin-top: 7px; margin-bottom: 7px; font-style: italic; font-size: 12px; } ul.thumb-list li .extras a, ul.thumb-list li .extras i { text-decoration: none; line-height: 1; } ul.thumb-list li .desc p { margin: 0px; padding: 0; } ul.thumb-list li .extras i { font-size: 9px; } /*========== Post List with Thumbnail Animation ==========*/ div.rad-widget.widget-animate-fade ul.thumb-list li { opacity: 0; transition: all 0.2s ease-in-out 0.3s; -webkit-transition: all 0.2s ease-in-out 0.3s; } div.rad-widget.widget-animate-fade.start-animation ul.thumb-list li { opacity: 1; } div.rad-widget.widget-animate-fade-items-left.start-animation ul.thumb-list li { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } div.rad-widget.widget-animate-fade-items-left ul.thumb-list li { transform: translate(-50px, 0); -webkit-transform: translate(-50px, 0); -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; opacity: 0; } div.rad-widget.widget-animate-fade-items-top.start-animation ul.thumb-list li { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } div.rad-widget.widget-animate-fade-items-top ul.thumb-list li { transform: translate(0px, -50px); -webkit-transform: translate(0px, -50px); -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; opacity: 0; } div.rad-widget.widget-animate-thumbs-expand.start-animation ul.thumb-list li .image { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } div.rad-widget.widget-animate-thumbs-expand ul.thumb-list li .image { transform: scale(0, 0); -webkit-transform: scale(0, 0); -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; opacity: 0; } /*========== Post Plain List ==========*/ ul.plain-list li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eaeaea; position: relative; } ul.plain-list li:last-child { border-bottom: none; } ul.plain-list li .date-area { position: absolute; top: 0; left: 0; color: #222222; text-align: center; padding: 10px; border-radius: 0px; border: 1px solid #222222; } ul.plain-list li .date-area small { font-size: 100%; display: block; line-height: 1; color: #222222; text-transform: uppercase; } ul.plain-list li .date-area small.date { font-size: 28px; display: block; color: #222222; } ul.plain-list li .date-area small.month { font-size: 12px; display: block; margin-top: 3px; color: #222222; } ul.plain-list li .desc { margin-left: 80px; } ul.plain-list li .desc h2 { margin: 0; padding: 0; line-height: 1; font-size: 14px; } ul.plain-list li .desc h2 a { text-decoration: none; color: #222222; font-size: 15px; display: block; } ul.plain-list li .desc h2 a:hover { color: #66a7cf; } ul.plain-list li .extras { font-size: 12px; color: #999999; margin-top: 4px; font-style: italic; } ul.plain-list li .extras a, ul.plain-list li .extras i { text-decoration: none; line-height: 1; } ul.plain-list li .extras a:hover { text-decoration: underline; color: #66a7cf; } ul.plain-list li .desc p { margin-top: 4px; margin-bottom: 0; padding-bottom: 0; } /*============================================ = Post Column Stylings = ============================================*/ ul.blog_posts { padding: 0; margin: 0; } ul.blog_posts li { padding: 0; margin: 0; list-style: none; } /*========== General Stylings ==========*/ .sticky-post-icon { position: absolute; z-index: 20; top: 0; right: 0; background: #66a7cf; color: white; border-radius: 0px; padding: 9px; display: block; } .portfolio-columns .quartz { min-height: 0px; } .portfolio-columns .excerpt { margin-top: 0px; } .portfolio-columns .read-more { margin-top: 15px; text-decoration: none; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 15px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; float: left; } .portfolio-columns .read-more:hover { background: #66a7cf; border-color: #66a7cf; color: white; } div.bottom-portfolio-col { position: relative; z-index: 4; } div.bottom-portfolio-col div.share { float: right; margin-top: 10px; position: relative; padding: 11px 0px 11px 20px; } div.bottom-portfolio-col div.share span { font-size: 11px; color: #222222; cursor: pointer; font-weight: 600; margin-top: 3px; padding: 12px; border: 1px solid #eaeaea; border-radius: 3px; } div.bottom-portfolio-col div.share div { position: absolute; left: -286px; width: 307px; top: 1px; border: 1px solid #eaeaea; display: none; border-radius: 3px; } div.bottom-portfolio-col div.share div a { text-decoration: none; color: #222222; display: block; padding: 8px 12px; float: left; display: block; padding: 9px 12px 10px; float: left; } div.bottom-portfolio-col div.share div a:hover { color: #66a7cf; } div.col-grid { margin-bottom: 40px; } div.portfolio-columns ul.isotope { padding: 0; margin: 0; } div.portfolio-columns ul.isotope.layout-masonry { margin-bottom: 50px; } div.portfolio-columns ul li.iso-item { padding: 0 0 0px 0; margin: 0 0 0px; list-style: none; float: left; } div.portfolio-columns ul li div.inner-item-wrap { padding-bottom: 5px; } /*========== Boxed Stylings ==========*/ div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap { background: #f0f0f0; border-radius: 0px; } div.portfolio-columns.five-columns ul.style-boxed-list li div.inner-item-wrap div.desc { padding: 15px; } div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap div.desc { padding: 25px; } div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap h2 a { color: #222222; } div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap h2 a:hover { color: #66a7cf; } div.portfolio-columns ul.style-boxed-list div.extras { color: #222222; } div.portfolio-columns ul.style-boxed-list div.extras a { color: #66a7cf; } div.portfolio-columns ul.style-boxed-list div.extras a:hover { color: #222222; } div.portfolio-columns ul.style-boxed-list div.bottom-portfolio-col div.share div, div.bottom-portfolio-col div.share span { background: white; border-color: #eaeaea; } div.portfolio-columns ul.style-boxed-list div.bottom-portfolio-col div.share div a { color: #222222; } div.portfolio-columns ul.style-boxed-list div.bottom-portfolio-col div.share div a { color: #66a7cf; } div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap div.image, div.portfolio-columns ul.style-boxed-list li div.image img, div.portfolio-columns ul.style-boxed-list li div.image .hover-overlay, div.portfolio-columns ul.style-boxed-list li div.image .single-hover { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } /* Image Holder */ div.portfolio-columns ul li div.image a.imageholder { height: auto; margin: 0 auto; display: block; position: relative; } div.portfolio-columns ul li div.image img { height: auto; margin: 0 auto; display: block; max-width: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; } div.portfolio-columns ul li div.inner-item-wrap div.image-wrap { text-align: center; } div.portfolio-columns ul li div.inner-item-wrap div.image { position: relative; overflow: hidden; border-radius: 0px; } div.portfolio-columns ul li div.image .hover-overlay { border-radius: 0px; } /* Text */ div.portfolio-columns ul li div.inner-item-wrap div.desc { padding-top: 15px; position: relative; } div.portfolio-columns ul li div.inner-item-wrap div.desc p { margin-bottom: 0; margin-top: 5px; line-height: 1.6; color: inherit; } /* Title */ div.portfolio-columns ul li div.inner-item-wrap h2 { margin: 0; line-height: 1.2; padding: 0px; } div.portfolio-columns ul li div.inner-item-wrap h2 a { text-decoration: none; color: #222222; display: block; } div.portfolio-columns ul li div.inner-item-wrap h2 a:hover { color: #66a7cf; } /* Subtitle */ div.portfolio-columns ul li div.inner-item-wrap h4 { color: #999999; margin-top: 6px; } div.portfolio-columns ul li.no-posts-found { padding: 30px; text-align: center; color: #222222; margin: 0px 0 30px 0; font-style: italic; font-size: 16px; } /* Extra Info */ div.portfolio-columns div.extras { color: #999999; margin-bottom: 10px; font-size: 13px; line-height: 1.4; font-style: italic; font-weight: 400; } div.portfolio-columns div.extras a { text-decoration: none; display: inline-block; color: #66a7cf; } div.portfolio-columns div.extras a:hover { color: #66a7cf; } /*========== Post Formats ==========*/ div.post-format-video p { display: block; } div.post-format-video iframe, div.post-format-video video { width: 100%; display: block; } div.post-format-audio .mejs-container { max-width: 100% !important; background: #222222 !important; } div.post-format-audio .mejs-container .mejs-controls { background: #222222 !important; } body div.post-format-audio .mejs-container .mejs-controls .mejs-time span { color: white; font-weight: 600; } body div.post-format-audio .mejs-controls .mejs-button button, body .mejs-controls .mejs-playpause-button button { color: white; } body div.post-format-audio.mejs-controls .mejs-time-rail span { top: 0; } body div.post-format-audio .mejs-controls .mejs-time-rail .mejs-time-loaded, body .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: white; } div.post-format-chat { padding: 20px 20px 35px 20px; border: 1px solid #eaeaea; position: relative; } div.post-format-chat i { position: absolute; bottom: 15px; left: 15px; font-size: 12px; color: #222222; } div.post-format-image p, div.post-format-link p { padding-bottom: 0; margin-bottom: 0; } div.post-format-link { padding: 45px 30px; background: #f0f0f0; text-decoration: none; text-align: left; position: relative; transition: all 0.2s; } div.post-format-link a { color: #222222; font-size: 21px; margin: 0px 50px; font-weight: 600; text-decoration: none; display: block; } div.post-format-link i { position: absolute; top: 32px; left: 25px; color: #222222; margin-top: -10px; font-size: 20px; } div.post-format-link:hover { background: #222222; } div.post-format-link:hover a, div.post-format-link:hover i { color: white; } div.post-format-quote { padding: 45px 30px; background: #f0f0f0; text-decoration: none; text-align: left; position: relative; } div.post-format-quote p { color: #222222; font-size: 21px; margin: 0px 50px; font-weight: 600; } div.post-format-quote blockquote p { margin: 0; } div.post-format-quote i { position: absolute; top: 32px; left: 25px; color: #222222; margin-top: -10px; font-size: 20px; } div.post-format-quote h5.quote-by { margin-left: 50px; font-size: 16px; margin-bottom: 0; padding-bottom: 0; } div.post-format-status { padding: 45px 30px; background: #f0f0f0; text-decoration: none; text-align: left; position: relative; } div.post-format-status p { color: #222222; font-size: 21px; margin: 0px 50px; font-weight: 600; } /*========== Columns ==========*/ div.portfolio-columns.one-column ul li div.inner-item-wrap h2 { font-size: 30px; padding: 0px; max-width: 80%; } div.portfolio-columns.two-column ul li div.inner-item-wrap h2 { font-size: 18px; } div.portfolio-columns.three-column ul li div.inner-item-wrap h2 { font-size: 16px; } div.portfolio-columns.four-column ul li div.inner-item-wrap h2 { font-size: 14px; } div.portfolio-columns.five-column ul li div.inner-item-wrap h2 { font-size: 12px; } /*========== Grid Layout ==========*/ div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap { overflow: hidden; padding-bottom: 0; position: relative; } div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap div.image { display: block; overflow: hidden; } div.portfolio-columns ul.column-align-center li { text-align: center; } div.portfolio-columns ul.column-align-right li { text-align: right; } div.two-column ul li.portfolio-grid-col-layout { width: 50%; } div.three-column ul li.portfolio-grid-col-layout { width: 33.33%; } div.four-column ul li.portfolio-grid-col-layout { width: 25%; } div.five-column ul li.portfolio-grid-col-layout { width: 20%; margin-bottom: 0; padding-bottom: 0; } div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap a.imageholder, div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap img, div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap div.image { border-radius: 0; width: 100%; } /*========== Full Width Columns ==========*/ .full_width div.two-column ul li.iso-item { width: 50%; } .full_width div.three-column ul li.iso-item { width: 33.33%; } .full_width div.four-column ul li.iso-item { width: 25%; } .full_width div.five-column ul li.iso-item { width: 20%; margin-bottom: 0; padding-bottom: 0; } .full_width div.portfolio-columns ul li div.image img, .full_width div.portfolio-columns ul li div.inner-item-wrap div.image, .full_width div.portfolio-columns ul li div.image .hover-overlay { border-radius: 0; width: 100%; } .full_width div.portfolio-columns ul li.iso-item div.inner-item-wrap { padding-bottom: 0; } /*----- End of Post Column Stylings ------*/ /*=================================== = Intro title = ===================================*/ /*========== Ful Width ==========*/ .full_width .intro_title-inner-wrap { padding: 30px 2.5%; } .full .intro_title-inner-wrap .text_subtitle { max-width: 65%; } /*========== General ==========*/ .intro_title-inner-wrap h2 { font-size: 32px; margin: 0px 0 10px 0; padding: 0; color: #222222; line-height: 1.4; font-weight: 600; } .intro_title-inner-wrap h2 span { display: inline-block; position: relative; } .intro_title-inner-wrap .text_subtitle { font-size: 15px; display: inline-block; color: #999999; clear: both; } .section-primary-color .intro_title-inner-wrap h2 { color: white; } .section-primary-color .intro_title-inner-wrap .text_subtitle { color: white; } .section-secondary-color .intro_title-inner-wrap h2 { color: white; } .section-secondary-color .intro_title-inner-wrap .text_subtitle { color: white; } /*========== Alignment ==========*/ .col-center { text-align: center; } .col-right { text-align: right; } /*----- End of Intro title ------*/ /*=============================== = Divider = ===============================*/ div.divider { clear: both; } div.divider.none { height: 1px; } div.divider.line { height: 0px; border-top: 1px solid #eaeaea; } div.divider.dotted { height: 0px; border-top: 1px dotted #eaeaea; } div.divider.dashed { height: 0px; border-top: 1px dashed #eaeaea; } div.divider.double { height: 1px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .m-divider-wrap { position: relative; display: inline-block; } div.divider.title, div.divider.small-title, div.divider.icon, div.divider.small-icon { overflow: hidden; position: relative; text-align: center; } div.divider.title .divider-text { text-align: center; position: relative; } div.divider.title div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -715px; width: 700px; height: 1px; background: #eaeaea; } div.divider.title div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -715px; width: 700px; height: 1px; background: #eaeaea; } div.divider.small-title .divider-text { text-align: center; position: relative; } div.divider.small-title div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -115px; width: 100px; height: 1px; background: #eaeaea; } div.divider.small-title div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -115px; width: 100px; height: 1px; background: #eaeaea; } div.divider.icon .divider-text { text-align: center; position: relative; } div.divider.icon div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -715px; width: 700px; height: 1px; background: #eaeaea; } div.divider.icon div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -715px; width: 700px; height: 1px; background: #eaeaea; } div.divider.small-icon .divider-text { text-align: center; position: relative; } div.divider.small-icon div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -115px; width: 100px; height: 1px; background: #eaeaea; } div.divider.small-icon div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -115px; width: 100px; height: 1px; background: #eaeaea; } /*========== Animation ==========*/ .widget-animate-width div.divider, .widget-animate-width div.divider.title div.divider-text:before, .widget-animate-width div.divider.icon div.divider-text:before, .widget-animate-width div.divider.title div.divider-text:after, .widget-animate-width div.divider.icon div.divider-text:after, .widget-animate-width div.divider.small-title div.divider-text:before, .widget-animate-width div.divider.small-icon div.divider-text:before, .widget-animate-width div.divider.small-title div.divider-text:after, .widget-animate-width div.divider.small-icon div.divider-text:after { width: 0px; transform: scale(1, 0); -webkit-transform: scale(1, 0); -webkit-transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; } .widget-animate-width div.divider-text span { opacity: 0; transform: scale(0); -webkit-transform: scale(0); -webkit-transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1) 0.7s; transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1) 0.7s; } .widget-animate-width div.divider.title div.divider-text:before, .widget-animate-width div.divider.icon div.divider-text:before, .widget-animate-width div.divider.small-title div.divider-text:before, .widget-animate-width div.divider.small-icon div.divider-text:before { left: -30px; } .widget-animate-width div.divider.title div.divider-text:after, .widget-animate-width div.divider.icon div.divider-text:after, .widget-animate-width div.divider.small-title div.divider-text:after, .widget-animate-width div.divider.small-icon div.divider-text:after { right: -30px; } .widget-animate-width.start-animation div.divider { width: 100%; transform: scale(1, 1); } .widget-animate-width.start-animation div.divider-text span { opacity: 1; transform: scale(1, 1); } .widget-animate-width div.divider.title, .widget-animate-width div.divider.small-title, .widget-animate-width div.divider.icon, .widget-animate-width div.divider.small-icon { width: auto; transform: none; -webkit-transform: none; -webkit-transition: none; transition: none; } .widget-animate-width.start-animation div.divider.title div.divider-text:before, .widget-animate-width.start-animation div.divider.icon div.divider-text:before { width: 700px; transform: scale(1, 1); left: -715px; } .widget-animate-width.start-animation div.divider.title div.divider-text:after, .widget-animate-width.start-animation div.divider.icon div.divider-text:after { width: 700px; transform: scale(1, 1); right: -715px; } .widget-animate-width.start-animation div.divider.small-title div.divider-text:before, .widget-animate-width.start-animation div.divider.small-icon div.divider-text:before { width: 100px; transform: scale(1, 1); left: -115px; } .widget-animate-width.start-animation div.divider.small-title div.divider-text:after, .widget-animate-width.start-animation div.divider.small-icon div.divider-text:after { width: 100px; transform: scale(1, 1); right: -115px; } /*----- End of Divider ------*/ /*==================================== = Image Widget = ====================================*/ .image-inner-wrap .hoverable { position: relative; } .image-inner-wrap { display: block; position: relative; max-width: 100% !important; } .image-inner-wrap img, .image-align-none img { display: block; max-width: 100%; margin: 0 auto; position: relative; z-index: 2; height: auto; } .image-align-left { float: left; margin: 10px 20px 10px 0; } .image-align-right { float: right; margin: 10px 0px 10px 20px; } .image-inner-wrap .text_caption { text-align: center; z-index: 2; padding: 25px; margin-bottom: 0px; font-size: 12px; background: #222222; color: white; } .image-inner-wrap .hover-item, .image-align-none { max-width: 100% !important; overflow: hidden; margin: 0 auto; } .image-stretched.image-inner-wrap img { width: 100%; } .image-inner-wrap.mag-wrap { text-align: center; } .image-mag-proto { position: relative; } .image-inner-wrap .mag-gl { position: absolute; z-index: 5; top: 0px; left: 0px; width: 257px; height: 249px; transform: scale(0); opacity: 0; transition: opacity 0.4s ease-in-out,transform 0.3s ease-in-out; } .image-inner-wrap .mag-gl img { position: relative; z-index: 5; } .mag-src { position: absolute; z-index: 2; top: 10px; left: 15px; width: 219px; height: 219px; border-radius: 100%; background-repeat: no-repeat; background-color: #fff; } .image-inner-wrap.show-mag .mag-gl { opacity: 1; transform: scale(1); } /*----- End of Image Widget ------*/ /*========================================= = Thumbnails Widget = =========================================*/ .thumbnail-inner-wrap { margin: 0px; width: 100%; } .thumbnail-inner-wrap ul { margin: auto; padding: 10px; } .thumbnail-inner-wrap ul li { float: left; max-width: 145px; margin: 0px 10px 0px 10px; list-style: none; } .thumbnail-inner-wrap ul li a { float: left; margin: 0px 10px 0px 10px; list-style: none; } .thumbnail-inner-wrap ul li img { float: left; margin: 0px 10px 0px 10px; border-radius: 0px; } /*----- End of Thumbnails Widget ------*/ /*=========================== = CTA = ===========================*/ .full_width .cta-inner-wrap { margin: 30px; } .cta-inner-wrap { position: relative; } .cta-inner-wrap.default .cta-heading { padding: 0px 300px 0px 0px; } .cta-inner-wrap .cta-heading h2 { font-size: 32px; line-height: 1.4; padding: 0px; margin: 0; color: #222222; } .cta-inner-wrap .cta-heading h5 { font-size: 15px; color: #999999; margin: 5px auto 10px auto; line-height: 1.8; } .cta-inner-wrap a.cta_button { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 12px 18px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; padding: 0; position: relative; margin-top: 25px; } .cta-inner-wrap.default a.cta_button { margin-top: 0px; position: absolute; right: 0; top: 50%; margin-top: -30px; } .cta-inner-wrap a.cta_button:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .cta-inner-wrap.plain_link { text-align: center; } .cta-inner-wrap .cta-button-label { position: relative; z-index: 2; display: block; padding: 15px 26px; } .cta-inner-wrap .icon-button .cta-button-label { border-right: 1px solid rgba(0,0,0,0.1); border-color: inherit; margin-right: 49px; transition: all 0.2s ease-in-out; } .cta-inner-wrap .cta-icon { position: absolute; top: 50%; margin-top: -11px; font-size: 20px; right: 15px; } .cta-inner-wrap.default .cta-heading h2 { font-size: 32px; } .cta-inner-wrap.default .cta-heading h5 { max-width: none; } .cta-inner-wrap.center { text-align: center; padding: 15px 0 10px 0; position: relative; } .cta-inner-wrap.center .cta-heading h2 { font-size: 32px; line-height: 1.4; padding: 0px 15px 0px 15px; margin: 0; } .cta-inner-wrap.center .cta-heading h5 { max-width: 75%; } .cta-inner-wrap.below .cta-heading h5 { text-align: left; margin: 10px 0; } .cta-inner-wrap.below .cta-heading h2 { max-width: 84%; } .main-cta-icon i { font-size: 48px; } /*----- End of CTA ------*/ /*============================ = Tabs = ============================*/ .ui-tabs { position: relative; padding: 0; margin: 0px 0 0 0; } .ui-tabs img { max-width: 100%; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0; display: block; } .ui-tabs .ui-tabs-nav li i { margin-right: 4px; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 0 4px 0px 0; padding: 0; border-bottom-width: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li span { display: inline-block; } .ui-tabs .ui-tabs-nav li a { display: block; color: #222222; text-decoration: none; padding: 15px 21px; border-radius: 0px; background: rgba(0, 0, 0, 0.01); } .ui-tabs .ui-tabs-nav li a:hover { color: #9ac832; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a { background: #f0f0f0; color: #222222; } .full_width .tabs-inner-wrap { margin: 30px; } /*========== Tabs Alignment ==========*/ .tabs-align-top div.ui-tabs-panel { clear: both; } .tabs-align-bottom div.ui-tabs-panel { clear: both; } .tabs-align-left .ui-tabs .ui-tabs-panel { margin-left: 153px; } .tabs-align-left .ui-tabs .ui-tabs-nav { position: absolute; top: 0; left: 0; width: 153px; border: none; } .tabs-align-left .ui-tabs .ui-tabs-nav li { float: none; text-align: right; border-left: none; margin-right: 0; margin-bottom: 4px; } .tabs-align-left .ui-tabs-panel p { padding-top: 0; margin-top: 0; } .tabs-align-right .ui-tabs-panel { margin-right: 153px; } .tabs-align-right .ui-tabs .ui-tabs-nav { position: absolute; top: 0; right: 0; width: 153px; } .tabs-align-right .ui-tabs .ui-tabs-nav li { float: none; border-left: none; margin-right: 0; margin-bottom: 4px; } .tabs-align-right .ui-tabs-panel p { padding-top: 0; margin-top: 0; } .tabs-align-top .ui-tabs, .tabs-align-bottom .ui-tabs { text-align: center; } .tabs-align-top .ui-tabs .ui-tabs-nav { display: block; } .ui-tabs .ui-tabs-panel { text-align: left; padding: 25px; background: #f0f0f0; color: #222222; margin-top: 0; } /*================================= = Accordion = =================================*/ .ioa_accordion { margin: 0; } .ioa_accordion .ui-accordion-header { text-decoration: none; border-radius: 0px; background: #f0f0f0; padding: 20px; margin-bottom: 5px; display: block; color: #222222; font-size: 13px; position: relative; overflow: hidden; cursor: pointer; } .ioa_accordion .ui-accordion-header:focus { outline: none; } .ioa_accordion .ui-accordion-header i { margin-right: 0px; font-size: 12px; float: right; color: #222222; } .ioa_accordion .ui-state-active { background: #222222; color: white; border-radius: 0px; border-bottom: none; margin-bottom: 5px; } .ioa_accordion .ui-state-active i { color: white; } .ioa_accordion .ui-accordion-li-fix { display: inline; } .ioa_accordion .ui-accordion-content { padding: 20px 0; position: relative; top: 1px; margin-bottom: 0px; overflow: auto; display: none; zoom: 1; } .ioa_accordion .ui-accordion-content-active { display: block; } .ioa_accordion .ui-accordion-content p { margin-top: 0; } .ioa_accordion.accordion-style-simple .ui-accordion-header { color: #999999; border-radius: 0; background: none !important; border-bottom: 1px solid #eaeaea; padding: 20px 0; } .ioa_accordion.accordion-style-simple .ui-accordion-header i { color: #999999; } .ioa_accordion.accordion-style-simple .ui-state-active { border-bottom: 1px solid #333333; color: #222222; } .ioa_accordion.accordion-style-simple .ui-state-active i { color: #333333; } /*========== Styled ==========*/ .accordion-style-styled.ioa_accordion .ui-accordion-header { color: white; background: #66a7cf; padding: 20px; margin-bottom: 5px; border-radius: 0px; } .accordion-style-styled.ioa_accordion .ui-accordion-header i { color: white; } .accordion-style-styled.ioa_accordion .ui-state-active { background: #222222; color: white; } .accordion-style-styled.ioa_accordion .ui-accordion-header.ui-state-active i { color: white; } /*----- End of Accordion ------*/ .full_width .accordion-inner-wrap { margin: 30px; } /*========== Sidebar ==========*/ .sidebar-inner-wrap .sidebar { padding: 0; } /*----- End of Sidebar Widget ------*/ /*========================================== = Testimonial Slider = ==========================================*/ .full_width .testimonials-inner-wrap { margin: 30px; } /*========== General Stylings ==========*/ .testimonials-inner-wrap .bx-wrapper .bx-pager .bx-pager-item, .testimonials-inner-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item { float: left; } .testimonials-inner-wrap.testimonial-centered .bx-wrapper .bx-pager .bx-pager-item, .testimonials-inner-wrap.testimonial-centered .bx-wrapper .bx-controls-auto .bx-controls-auto-item { float: none; } .rad-testimonials-list { padding: 0; margin: 0; } .rad-testimonials-list .desc { clear: both; padding: 0 0 20px 0; color: #222222; font-size: 18px; font-style: italic; } .rad-testimonials-list .desc p { margin: 0; padding: 0; } .rad-testimonials-list h4 { margin: 0px 0 0 0; padding: 0; line-height: 1; display: inline-block; } .rad-testimonials-list .designation { color: #222222; display: inline-block; } .rad-testimonials-list .info { float: left; margin: 7px 0 0 0px; } .rad-testimonials-list .image { margin-right: 15px; float: left; } .rad-testimonials-list .image img { border-radius: 0px; display: block; } .rad-testimonials-list.default img { margin-left: 0; } div.testimonials-wrapper .testimonials-inner-wrap .bx-has-pager { opacity: 1 !important; left: 0px; } .testimonials-inner-wrap .bx-wrapper .bx-pager.bx-default-pager a { background: rgba(0, 0, 0, 0.25); border: none; margin: 0 3px; } /*========== Right Aligned ==========*/ .rad-testimonials-list.right { float: none; text-align: right; } .rad-testimonials-list.right .info { float: right; margin: 7px 0px 0 0px; } .rad-testimonials-list.right .image { float: right; margin-left: 15px; margin-right: 0; } .testimonials-inner-wrap.testimonial-right .bx-controls.bx-has-pager { right: 0px; left: auto; } /*========== Centered Aligned ==========*/ .rad-testimonials-list.centered { text-align: center; } .rad-testimonials-list.centered .info { float: none; margin-left: 0; } .testimonials-inner-wrap.testimonial-centered .text-title-wrap { text-align: center; } .testimonials-inner-wrap.testimonial-centered .bx-controls.bx-has-pager { right: 0; left: 0; bottom: -30px; } .rad-testimonials-list.centered .image { float: none; margin: 0px 0px 15px 0px; } .section-primary-color .rad-testimonials-list .designation { color: white; } .section-secondary-color .rad-testimonials-list .designation { color: white; } /*----- End of Testimonial Slider ------*/ /*========================================== = Single Testimonial = ==========================================*/ .testimonial-bubble-content .content { position: relative; } div.testimonial-bubble { position: relative; } div.testimonial-bubble div.image { float: left; margin: 15px 15px 0 0; } div.testimonial-bubble div.image img { display: block; border-radius: 0px; } div.testimonial-bubble div.info { float: left; } div.testimonial-bubble div.info h2 { margin: 15px 0 0 0; font-size: 16px; } div.testimonial-bubble div.info span { color: #9ac832; line-height: 1.3; margin-top: 8px; display: block; } div.testimonial-bubble-content { padding: 30px 0 0; position: relative; color: #222222; margin-bottom: 10px; font-size: 16px; } div.testimonial-bubble-content i.ioa-front-icon { display: none; } .full_width div.testimonial-bubble { padding: 30px 2.5%; } /*----- End of Single Testimonial ------*/ /*============================= = Video = =============================*/ iframe.video, video.video { outline: 0; border: 0; max-width: 100% !important; } div.video-inner-wrap .text_caption { text-align: center; padding: 25px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04); font-size: 12px; position: relative; } div.video-inner-wrap { overflow: hidden; } div.ioa-video { display: block; margin-top: 0px; } div.video-inner-wrap .fluid-width-video-wrapper { position: relative; visibility: visible; } div.ioa-video video, div.ioa-video iframe { max-width: 100% !important; } .full_width div.video-inner-wrap iframe.video, .full_width div.video-inner-wrap video.video { width: 100%; } /*----- End of Video ------*/ /*==================================== = Progress Bar = ====================================*/ .full_width .progress_bar-inner-wrap { margin: 30px; } /*========== Horizontal ==========*/ .progress_bar-inner-wrap { padding-top: 25px; } .progress-horizontal div.progress-bar h6.progress-bar-title { z-index: 2; padding: 11px 10px 0px 0px; position: absolute; top: -30px; left: 0px; display: block; color: #222222; font-size: 13px; margin: 0px; line-height: 1.2; } .progress-horizontal div.progress-bar { position: relative; width: 100%; height: 15px; background: rgba(0, 0, 0, 0.08); margin-top: 35px; border-radius: 0px; } .progress-horizontal div.progress-bar:first-child { margin-top: 0; } .progress-horizontal div.progress-bar div.filler { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; width: 0px; opacity: 0; font-size: 11px; position: absolute; top: 0; left: 0; height: 15px; background: #66a7cf; text-align: right; color: white; padding: 0px 0px 0px 0px; border-radius: 0px; } .progress-horizontal div.progress-bar div.filler span { transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; opacity: 0; position: absolute; top: -22px; right: 0px; color: white; color: #222222; font-size: 13px; width: 50px; text-align: right; } .progress-horizontal div.progress-bar .overlay { background: url(sprites/i/animated-overlay.gif); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.07; } .progress-horizontal div.progress-bar.animate-progress-bar div.filler span { opacity: 1; } /*========== Vertical ==========*/ .progress-vertical div.progress-bar h6.progress-bar-title { z-index: 2; padding: 11px 10px 0px 0px; position: absolute; top: 96%; left: 0px; display: block; color: #222222; font-size: 13px; margin: 0px; line-height: 1.2; } .progress-vertical div.progress-bar { position: relative; float: left; height: 150px; width: 45px; background: rgba(0, 0, 0, 0.08); margin-right: 30px; border-radius: 0px; } .progress-vertical div.progress-bar div.filler { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; height: 0px; opacity: 0; font-size: 11px; position: absolute; bottom: 0; left: 0; width: 45px; background: #66a7cf; text-align: right; color: white; padding: 0px 0px 0px 0px; border-radius: 0px; } .progress-vertical div.progress-bar div.filler span { transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; opacity: 0; position: absolute; top: -22px; right: 0px; color: white; color: #222222; font-size: 12px; width: 45px; text-align: center; } .progress-vertical div.progress-bar .overlay { background: url(sprites/i/animated-overlay.gif); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.07; } .progress-vertical div.progress-bar.animate-progress-bar div.filler span { opacity: 1; } /*----- End of Progress Bar ------*/ /*==================================== = Radial Chart = ====================================*/ .radial-chart { position: relative; text-align: center; font-size: 52px; margin: 0 auto; color: #9ac832; } .radial-chart canvas { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } .radial_chart-inner-wrap .text-title-wrap { text-align: center; margin-top: 25px; } /*----- End of Radial Chart ------*/ /*============================== = Button = ==============================*/ a.ioa-button { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 0px 0px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; margin: 3px; position: relative; -webkit-backface-visibility: hidden; transition: all 0.3s; backface-visibility: hidden;} a.ioa-button:hover { opacity: 0.9; background: #66a7cf; border-color: #66a7cf; color: white; } a.ioa-button span { display: block; } a.ioa-button.has-icon span { border-left: 1px solid rgba(255, 255, 255, 0.1); } a.ioa-button.has-icon:hover span { border-left-color: rgba(255, 255, 255, 0.1); } a.ioa-button i { position: absolute; top: 50%; left: 12px; margin-top: -7px; } a.ioa-button.has-icon.size-small i { left: 8px; margin-top: -5px; font-size: 11px; } a.ioa-button.has-icon.size-large i { left: 15px; margin-top: -10px; font-size: 18px; } a.ioa-button.has-icon.size-big i { left: 18px; margin-top: -11px; font-size: 20px; } a.ioa-button.has-icon.size-block i { left: 18px; margin-top: -11px; font-size: 20px; } a.ioa-button.style-classic { background: #66a7cf; border-color: #66a7cf; color: #fff; } a.ioa-button.style-gradient { background: url(sprites/i/menu-gloss.png) #66a7cf; border-color: transparent; color: #fff; } a.ioa-button.style-3d { border-bottom: 3px solid #4f9ac8; background: #66a7cf; color: #fff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } a.ioa-button.style-3d:hover { border: 1px solid #66a7cf; } .ioa-button.size-small { font-size: 10px; } .ioa-button.size-default { font-size: 12px; } .ioa-button.size-large { font-size: 14px; } .ioa-button.size-big { font-size: 15px; } .ioa-button.size-block { font-size: 15px; } .ioa-button.size-small span { padding: 6px 25px; } .ioa-button.size-default span { padding: 8px 35px; } .ioa-button.size-large span { padding: 12px 23px; } .ioa-button.size-big span { padding: 15px 55px; } .ioa-button.size-block span { padding: 10px 10px; } .ioa-button.has-icon.size-small span { margin-left: 25px; } .ioa-button.has-icon.size-default span { margin-left: 35px; } .ioa-button.has-icon.size-large span { margin-left: 45px; } .ioa-button.has-icon.size-big span { margin-left: 55px; } .ioa-button.has-icon.size-block span { margin-left: 55px; } .button-align-center { text-align: center; } .button-align-right { text-align: right; } a.size-block { display: block; text-align: center; margin: 0; } .full_width div.rad-button-widget.rad-widget { border-radius: 0px; display: block; width: 100%;} /*----- End of Button ------*/ /*==================================== = Social Icons = ====================================*/ .iconset-inner-wrap { margin: 0px; } .social-set { position: relative; border: none; } .social-set ul { margin: 0; padding: 0; } .social-set ul li { float: left; border-bottom: none; margin: 0 1px 1px 0; padding: 0; position: relative; list-style: none; } .social-set ul li a { border-bottom: none; display: block; width: 40px; height: 38px; margin-left: 0; position: relative; overflow: hidden; text-decoration: none; -webkit-perspective: 2500px; perspective: 2500px; -webkit-perspective-origin: 50% 0%; perspective-origin: 50% 0%; } .social-set ul li span.social-block { width: 40px; padding: 10px 0; font-size: 18px; display: block; position: absolute; top: 0; left: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .social-set ul li span.visible-block { color: #222222; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); background: rgba(0, 0, 0, 0.03); } .social-set ul li span.hover-block { background-color: #66a7cf; color: white; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .social-set ul li a:hover span.hover-block { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .social-set ul li a:hover span.visible-block { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*========== Tooltips ==========*/ .tooltip { position: absolute; background: rgba(0, 0, 0, 0.85); color: #ffffff; font-size: 11px; border-radius: 0px; width: 100px; top: -28px; left: 50%; text-align: center; padding: 7px 6px; z-index: 2; display: none; margin-left: -56px; } .tooltip i { display: none; } /*----- End of Social Icons ------*/ /*============================== = Flickr = ==============================*/ .flickr-pictures a { float: left; margin: 0px 4px 4px 0; width: 70px; height: 70px; overflow: hidden; border-radius: 0px; } .flickr-pictures a img { min-height: 100%; width: 100%; display: block; border-radius: 0px; } /*----- End of Flickr ------*/ /*===================================== = Person Widget = =====================================*/ .full_width .person-inner-wrap { margin: 30px; } .full_width .person-inner-wrap div.image img { width: 100%; } .person-inner-wrap { position: relative; } .person-inner-wrap > div.p-area { position: relative; } .person-inner-wrap .person-icon { text-decoration: none; padding: 10px; font-size: 14px; position: absolute; z-index: 2; bottom: 0; left: 0; border-radius: 0px; background: rgba(255, 255, 255, 0.8); color: #9ac832; } .person-inner-wrap .social-set { margin-top: 0px; } .person-inner-wrap div.image { position: relative; } .person-inner-wrap div.image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 0px; } .person-inner-wrap div.desc-area { margin-top: 15px; position: relative; } .person-inner-wrap div.desc-area .info { margin-bottom: 15px; border-top: 1px solid #eee; padding-top: 20px; margin-top: 20px; } .person-inner-wrap div.desc-area h4 { padding: 0; margin: 0px; font-size: 16px; line-height: 1; color: #222222; } .person-inner-wrap div.desc-area span { font-size: 12px; text-align: center; margin: 4px 0px; font-style: italic; color: #999999; } /*----- End of Person Widget ------*/ /*=============================== = Toggles = ===============================*/ div.toggle .toggle-body { padding: 25px 0; border-bottom: 1px solid transparent; } div.toggle .toggle-body p:first-child { margin-top: 0; } div.toggle .toggle-body p:last-child { margin-bottom: 0; } div.toggle .toggle-body.collapse { display: none; } div.toggle a.toggle-title { text-decoration: none; border-radius: 0px; padding: 12px 0; display: block; color: #222222; font-size: 15px; } div.toggle a.toggle-title i { font-size: 12px; float: right; position: relative; top: 0px; } div.toggle h4 { margin-bottom: 0; } /*========== Styled ==========*/ .toggle-style-styled div.toggle a.toggle-title { text-decoration: none; background: #f0f0f0; padding: 15px; display: block; color: #222222; font-size: 13px; font-weight: 600; } .toggle-style-styled div.toggle a.toggle-title.title-active { background: #66a7cf; color: white; font-size: 13px; } .toggle-style-styled div.toggle a.toggle-title i { font-size: 12px; margin-right: 2px; position: relative; margin-top: 2px; color: #222222; } .toggle-style-styled div.toggle a.toggle-title.title-active i { color: white; } .toggle-style-styled div.toggle { margin-bottom: 1px; } .toggle-style-styled div.toggle-body { margin-top: 10px; margin-bottom: 10px; background: rgba(0, 0, 0, 0.04); border-radius: 0px; padding: 25px; } /*========== Simple ==========*/ .toggle-style-simple div.toggle a.toggle-title { background: none; text-decoration: none; border-bottom: 1px solid #eaeaea; padding: 15px 0; display: block; font-weight: 600; } .toggle-style-simple div.toggle a.toggle-title.title-active { border-bottom: none; } .toggle-style-simple div.toggle a.toggle-title i { font-size: 16px; margin-right: 10px; position: relative; top: 2px; color: #9ac832; } .toggle-style-simple div.toggle .toggle-body.open { border-bottom: 1px solid #eaeaea; } /*----- End of Toggles ------*/ .full_width .toggle-inner-wrap { margin: 30px; } /*================================== = Google MAP = ==================================*/ .rad_google_map textarea { display: none; } /*----- End of Google MAP ------*/ /*=================================== = Logo Widget = ===================================*/ .full_width .logo-inner-wrap { margin: 10px; } .logo-area { padding: 0; margin: 0; } .logo-area li { float: left; width: 11.1%; list-style: none; margin: 0; position: relative; } .logo-area li .inner-logo-item { padding: 10px; min-height: 20px; } .logo-area li a { display: block; } .logo-area li img { margin: 0 auto; max-width: 100%; display: block; display: block; padding: 10px 0; -webkit-filter: none; -moz-filter: none; filter: none; opacity: 1; } .logo-area li a:hover, .logo-area li img:hover { -webkit-filter: none; -moz-filter: none; filter: none; opacity: 1; } .logo-area.logo-grid li { border-top: 1px solid #eaeaea; border-left: 1px solid #eaeaea; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .logo-area.logo-grid li.top_item { border-top: none; } .logo-area.logo-grid li.first_item { border-left: none; } /*========== Logo Scrollable ==========*/ .logo-inner-wrap div.swiper-slide img { width: auto; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.5; } .logo-inner-wrap div.swiper-slide:hover img { -webkit-filter: none; -moz-filter: none; filter: none; opacity: 1; } .logo-inner-wrap .inner-logo-item { position: relative; padding: 10px 5px; } .logo-inner-wrap .inner-logo-item .tooltip { top: 0; m} /*----- End of Logo Widget ------*/ /*====================================== = Counter Widget = ======================================*/ .counter-inner-wrap { text-align: center; line-height: 1.6; } .counter-inner-wrap .counter-area { font-size: 48px; font-weight: 900; color: #222222; line-height: 1; text-align: center; } .counter-inner-wrap .counter-area div, .counter-inner-wrap .counter-area span { display: inline-block; } .counter-inner-wrap .counter-area div { letter-spacing: -1px; } .counter-icon i { font-size: 32px; margin-bottom: 20px; color: #9ac832; } .counter-inner-wrap .ioa-widget-title { margin-bottom: 0; margin-top: 10px; padding: 0; font-size: 12px; color: #222222; } .counter-inner-wrap.counter-styleborder { display: inline-block; width: 270px; height: 270px; line-height: 270px; display: table; border-radius: 100%; border: 1px solid #eaeaea; } .counter-inner-wrap.counter-styleborder .counter-icon i { margin-bottom: 0; } .counter-inner-wrap.counter-styleborder .counter-area-m-wrap { display: table-cell; vertical-align: middle; } /*----- End of Counter Widget ------*/ /*================================= = Countdown = =================================*/ .countdown { text-align: center; } .countdown span { display: inline-block; } .countdown .time-unit { font-size: 24px; color: #222222; margin-right: 5px; } .countdown .time-label { font-size: 14px; color: #999999; margin-right: 15px; } /*----- End of Countdown ------*/ /*================================= = Easy List = =================================*/ .full_width .magic_list-inner-wrap { margin: 30px; } .magic_list-inner-wrap ul { padding: 0; margin: 0; } .magic_list-inner-wrap ul li { padding: 0 0 20px 0; margin: 0 0 20px 0; list-style: none; position: relative; min-height: 75px; } .magic_list-inner-wrap ul li .ioa-icon-area { position: absolute; top: -4px; left: 0; padding: 0px; line-height: 1; } .magic_list-inner-wrap ul li .ioa-icon-area i { font-size: 24px; color: white; background: #66a7cf; border-radius: 100%; padding: 20px; margin: -2px 0 0 -2px; } .magic_list-inner-wrap ul li .desc-area { margin-left: 85px; } .magic_list-inner-wrap ul li .desc-area p:first-child { margin-top: 0; } .magic_list-inner-wrap ul li h4 { margin-bottom: 0px; font-size: 15px; line-height: 1.2; } .magic_list-inner-wrap ul li .desc-area .desc { margin-top: 5px; } .magic_list-inner-wrap ul li .ripple { margin: -2px 0 0 -2px; width: 16px; height: 16px; background: #9ac832; } /*========== Numbered List ==========*/ .magic_list-inner-wrap.list-ordered ul li .desc-area { margin-left: 85px; } .magic_list-inner-wrap.list-ordered ul li .ioa-icon-area i { display: block; line-height: 1; color: white; background: #66a7cf; border-radius: 100%; padding: 20px 0px; font-size: 18px; font-style: normal; width: 60px; text-align: center; } /*========== List Animation ==========*/ .widget-animate-icon .magic_list-inner-wrap ul li .ioa-icon-area i { -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-style: preserve-3d; } .widget-animate-icon.start-animation .magic_list-inner-wrap ul li .ioa-icon-area i { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .widget-animate-icon.start-animation .magic_list-inner-wrap ul li .ripple { -webkit-animation: ripple 0.8s ease; animation: ripple 0.8s ease; } /*----- End of Easy List ------*/ /*============================== = Tweets = ==============================*/ .tweets-wrapper.list ul.tweets { margin: 0; padding: 0; } .tweets-wrapper.list ul.tweets li { position: relative; margin: 0 0 20px 0; min-height: 45px; border-bottom: 1px solid #999999; padding: 0 0 30px 55px; list-style: none; } .tweets-wrapper.list ul.tweets li i { background: #66a7cf; color: white; position: absolute; top: -2px; left: 0; padding: 12px; } /*========== Tweets slider ==========*/ .tweets-wrapper.slider ul.tweets { margin: 0; padding: 0; } .tweets-wrapper.slider ul.tweets li { position: relative; margin: 0; padding: 20px 20px 20px 20px; list-style: none; text-align: center; } .tweets-wrapper.slider ul.tweets li i { background: #66a7cf; color: white; position: absolute; top: 0px; left: 0px; padding: 25px 16px; } /*----- End of Tweets ------*/ /*==================================== = Notification = ====================================*/ .ioa-message { border-radius: 0px; } .ioa-message h2.message-title { padding: 30px; color: #fff; margin-bottom: 0; line-height: 1; text-align: center; font-size: 14px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; } .ioa-message a.close-notify-box { position: absolute; top: 0; right: 0; padding: 30px; text-decoration: none; overflow: hidden; color: #fff; border-left: 1px solid rgba(255, 255, 255, 0.2); } .message-default { background: #9ac832; } .message-success { background: #66d179; color: #fff; } .message-information { background: #5fd7ed; color: #fff; } .message-error { background: #fd5d56; color: #fff; } .message-inverse { background: #222222; color: white; } .message-inverse h2.message-title { color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .message-inverse.ioa-message a.close-notify-box { border-left: 1px solid rgba(0, 0, 0, 0.1); color: white; } .ioa-message div.message-content { padding: 35px 60px; text-align: center; position: relative; border-top: none; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; color: #fff; font-size: 13px; } .notify-icon { position: absolute; top: 0%; left: 30px; font-size: 16px; margin-top: -45px; } .full_width .ioa-message { margin: 30px; } /*----- End of Notification ------*/ /*====================================== = Pricing Tables = ======================================*/ div.pricing-table { padding-top: 30px; padding-bottom: 30px; } div.pricing-table div.plan { float: left; position: relative; z-index: 1; } div.pricing-table div.plan.last-plan { margin-right: 0; } div.pricing-table div.plan span.plan-title { margin: 0; text-align: center; display: block; font-size: 15px; text-align: center; padding: 25px; background: rgba(0, 0, 0, 0.1); color: white; } div.pricing-table div.plan.featured-plan { border: none; } div.pricing-table div.plan.full { float: none; width: 100%; } div.pricing_area { background: #222222; } div.pricing_area h2 { font-size: 60px; line-height: 1; color: white; text-align: center; margin: 0; padding: 40px 0; } div.pricing_area span.suffix { padding-top: 10px; padding-bottom: 30px; color: white; text-align: center; display: block; font-size: 18px; } div.pricing-table ul.pricing-row { margin: 0; padding: 0; } div.pricing-table ul.pricing-row li { padding: 20px 0; list-style: none; text-align: center; } div.pricing-table ul.pricing-row li:nth-child(even) { background: rgba(0, 0, 0, 0.02); } div.pricing-table ul.pricing-row li:nth-child(odd) { background: rgba(0, 0, 0, 0.04); } div.pricing-table ul.pricing-row li.sign-up { padding: 0; border-bottom: none; background: #222222; } ul.pricing-row li.sign-up a { background: rgba(255, 255, 255, 0.03); display: block; margin: 0px; position: relative; color: white; text-align: center; padding: 30px 0; text-decoration: none; font-size: 16px; } .pricing_area .mini-divider { height: 3px; background: white; width: 30px; margin: 0 auto; display: block; } /** Pricing Table Settings */ div.pricing-table div.featured-plan.plan { z-index: 2; } div.pricing-table div.featured-plan.plan ul.pricing-row li.sign-up a { background: #66a7cf; color: white; } div.featured-plan.plan div.pricing_area h2 { color: white; } div.featured-plan div.pricing_area { background: #66a7cf; } div.pricing-table div.plan.featured-plan span.plan-title, div.plan.featured-plan div.pricing_area span.suffix { color: white; } div.featured-plan.plan .pricing_area .mini-divider { background: #fff; } /*----- End of Pricing Tables ------*/ /*====================================== = Masonry Widget = ======================================*/ div.mason_item { width: 25%; overflow: hidden; } div.mason_item.mason_one_half { width: 50%; } div.mason_item.mason_one_fourth { width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.mason_item img { width: 100%; display: block; height: auto; } div.mason_item div.text-block { display: table; height: 100%; width: 80%; margin: 0 auto; } div.mason_item div.text-block > div { display: table-cell; text-align: center; vertical-align: middle; line-height: 1.8; } div.mason_item div.text-block h4 { color: inherit; font-size: 16px; } div.mason_item div.text-block div.text-caption { font-size: 14px; color: inherit; } div.mason_item div.text-block a.hover-link { font-size: 12px; color: inherit; } div.masonry-image { position: relative; overflow: hidden; } .mason-load-wrap { position: relative; display: inline-block; } .mason-button-label-wrap { cursor: pointer; } /*----- End of Masonry Widget ------*/ /*================================= = Pie Chart = =================================*/ div.graph > div { margin: 0 auto; } div.pie-chart-wrap { position: relative; margin: 0 auto; } div.pie-chart-wrap i { background: rgba(0, 0, 0, 0.8); z-index: 2; cursor: pointer; position: absolute; top: 0px; left: 0; color: #fff; width: 35px; text-align: center; padding: 10px 0; display: block; } div.pie-chart-wrap div.info-area { color: #fff; position: absolute; display: none; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); padding: 5px; } div.pie-chart-wrap div.info-area div.pie-val { margin-bottom: 5px; } div.pie-chart-wrap div.info-area div.pie-val span { float: left; } div.pie-chart-wrap div.info-area div.pie-val span.label { font-size: 12px; width: 130px; padding-top: 5px; color: #fff; text-align: right; } div.pie-chart-wrap div.info-area div.pie-val span.block { display: block; width: 32px; padding: 8px 0; text-align: center; color: #fff; font-size: 9px; margin-left: 10px; } div.pie-chart-wrap canvas { display: block; max-width: 100% !important; margin: 0 auto; } /*----- End of Pie Chart ------*/ /*================================== = Bar Graphs = ==================================*/ div.bar_graph-inner-wrap canvas { max-width: 100% !important; height: auto !important; margin: 0 auto; display: block; } .bar-val { display: none; } .bar-chart-wrap { border-right: 2px dashed transparent; border-bottom: 2px dashed transparent; padding-bottom: 10px; } div.bar-stroke-hide div.bar-chart-wrap { border: none; } /*----- End of Bar Graphs ------*/ /*=================================== = Line Graphs = ===================================*/ .line-val { display: none; } .line-chart-wrap canvas { max-width: 100% !important; display: block; margin: 0 auto; } .line-chart-wrap { padding: 20px; } /*----- End of Line Graphs ------*/ /*=============================== = Banners = ===============================*/ div.image-frame { background: #222222; position: relative; color: white; border-color: #ffffff; border-style: solid; border-width: 4px; border-radius: 0px; } div.image-frame .cta-icon { font-size: 18px; color: inherit; } div.image-frame .cta-icon img { display: block; margin: 0 auto; } div.image-frame .ioa-text { margin-left: 15%; margin-right: 15%; color: inherit; } div.image-frame h4.text-subtitle { color: inherit; margin-left: 10px; margin-right: 10px; font-size: 13px; line-height: 1.6; margin-top: 0px; } div.image-frame h2.text-title { color: inherit; margin-left: 10px; margin-right: 10px; font-size: 18px; margin-top: 0; margin-top: 10px; margin-bottom: 0; } div.inner-image-frame-wrap { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: table; text-align: center; } div.inner-image-frame-wrap .frame-content { vertical-align: middle; display: table-cell; } div.inner-image-frame-wrap .frame-content > a { display: block; text-decoration: none; } div.image-frame div.front-side, div.image-frame div.back-side { -webkit-transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s; transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: table; } div.image-frame:hover div.front-side { opacity: 0; } div.image-frame div.back-side { opacity: 0; } div.image-frame:hover div.back-side { opacity: 1; } div.frame-style-animated .frame-content { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } div.front-side-inner-wrap { vertical-align: middle; display: table-cell; } div.back-side-inner-wrap { vertical-align: middle; display: table-cell; } div.frame-style-animated.image-frame .cta-icon { font-size: 24px; color: inherit; } div.frame-gap { top: 5px; left: 5px; right: 5px; bottom: 5px; position: absolute; background: rgba(0, 0, 0, 0.3); } div.frame-gap > a { color: inherit; } .full_width div.image-frame { border-radius: 0; } /*----- End of Banners ------*/ /*===================================== = Misc Elements = =====================================*/ .full_width .cf7-inner-wrap { margin: 30px; } /*----- End of Misc Elements ------*/ /*============================ = Menu = ============================*/ /*----- End of Menu ------*/ /*================================== = Mail Chimp = ==================================*/ .mailchimp-inner-wrap .input-area { margin-right: 150px; } .mailchimp-inner-wrap .input-area div { float: left; width: 48%; margin-left: 2%; padding: 0; position: relative; } .mailchimp-inner-wrap .input-area div span { position: absolute; top: -20px; right: 0px; background: #fd5d56; color: #fff; padding: 3px 8px; display: none; font-size: 10px; font-style: italic; } .mailchimp-inner-wrap .input-area div:first-child { margin-left: 0; } .mailchimp-inner-wrap .input-area input { width: 100%; display: block; } .mailchimp-inner-wrap form { position: relative; } .mailchimp-inner-wrap a { position: absolute; top: 0; right: 0; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 4px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; width: 141px; text-align: center; } .mailchimp-inner-wrap a:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .mailchimp-subscription-confirmation { display: none; padding: 20px; text-align: center; background: #222222; color: white; } /*----- End of Mail Chimp ------*/ a.modal-trigger { text-decoration: none; display: inline-block; border-bottom: 1px solid #222222; font-weight: 600; } a.modal-trigger:hover { border-bottom: 1px solid #66a7cf; } /*----- End of Section comment block ------*/ /*============================================= = Media Elements Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Gallery 2. Quartz Slider 3. Image Accordion 4. Grid columns 5. BX Scrollable ----- End of Table of Contents ---------- */ /*=============================== = Gallery = ===============================*/ /*========== Basic Structure ==========*/ .seleneGallery { margin: 0px auto 0px auto; position: relative; padding: 0; width: 600px; max-width: 100%; visibility: hidden; opacity: 0; } .seleneGallery div.gallery-holder { position: relative; padding: 0; border: none; width: 100%; min-height: 150px; overflow: hidden; z-index: 2; border-radius: 0px; } .seleneGallery div.gallery-item { text-align: center; position: absolute; top: 0; left: 0; border: none; margin: 0; padding: 0; display: block; width: 100%; height: 100%; z-index: 1; } .seleneGallery div.gallery-item > a { margin: 0; padding: 0; outline: none; border: none; text-decoration: none; display: block; width: 100%; height: 100%; } .seleneGallery div.gallery-item img { margin: 0 auto; padding: 0; display: inline-block; max-width: 100%; height: auto; position: relative; z-index: 1; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; vertical-align: middle; } .seleneGallery div.gallery-item video, .seleneGallery div.gallery-item iframe, .seleneGallery div.gallery-item object, .seleneGallery div.gallery-item embed { position: absolute; top: 0; left: 0; border: none; outline: none; height: auto !important; width: 100%; } .seleneGallery div.gallery-item.hidden { z-index: 2; display: none; } .seleneGallery div.gallery-item.active { z-index: 7; } .seleneGallery div.gallery-item.reset { z-index: 5; } /*========== Full Width / Full screen / Adpative ==========*/ .full-stretch ul.selene-thumbnails li img { min-height: 100%; } .seleneGallery.fullscreen div.gallery-item img { width: 100%; } .seleneGallery.none div.gallery-item img { width: auto; } .seleneGallery.hard div.gallery-item img { width: auto; } .seleneGallery.adaptive div.gallery-item img { min-height: 0; height: auto; min-height: 0; } .seleneGallery.adaptive div.gallery-item { height: auto; } /*========== Thumbnail Stylings ==========*/ .seleneGallery .selene-thumbnails-wrap { margin-top: 15px; height: 87px; position: relative; overflow: hidden; } .seleneGallery ul.selene-thumbnails { width: 2000em; margin: 0 0; padding: 0 0; height: 80px; position: absolute; top: 0; left: 0px; z-index: 4; } .seleneGallery ul.selene-thumbnails li { overflow: hidden; cursor: pointer; float: left; padding: 0px 15px 4px 0px; list-style: none; position: relative; width: 75px; height: 75px; position: relative; } .seleneGallery ul.selene-thumbnails li canvas { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; } .seleneGallery.fullscreen ul.selene-thumbnails li:first-child { padding-left: 15px; } .seleneGallery ul.selene-thumbnails li.active img, .seleneGallery ul.selene-thumbnails li:hover img { opacity: 1; position: relative; } .seleneGallery ul.selene-thumbnails li img { margin: 0 auto; padding: 0; display: block; position: relative; opacity: 0.7; z-index: 2; width: 100%; height: 100%; border-radius: 0px; } /*========== Controls ==========*/ div.selene-controls-wrap { position: absolute; bottom: 0; left: 0; z-index: 99; width: 100%; text-align: center; } div.selene-controls-wrap > a { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; background: rgba(0, 0, 0, 0.7); text-align: center; color: #fff; font-size: 14px; padding: 24px 16px; line-height: 0px; z-index: 100; display: inline-block; } .seleneGallery div.gallery-holder:hover div.selene-controls-wrap > a { opacity: 0.9; } /* Lightbox */ .seleneGallery div.gallery-item > a.ioa-lightbox-icon { transition: all 0.3s linear; -webkit-transition: all 0.3s linear; position: absolute; right: 79px; padding: 13px 13px 14px 13px; top: 15px; left: auto; font-size: 13px; background: rgba(0, 0, 0, 0.8); color: white; z-index: 43; width: auto; height: auto; } .seleneGallery div.gallery-item:hover > a.ioa-lightbox-icon { opacity: 0.9; } /* Thumbnail Area and Controls */ .seleneGallery div.selene-thumbnails-wrap a { opacity: 0; transform: scale(0); -webkit-transform: scale(0); transition: all 0.2s linear; -webkit-transition: all 0.2s linear; } .seleneGallery div.selene-thumbnails-wrap:hover a { opacity: 0.9; transform: scale(1); -webkit-transform: scale(1); } .seleneGallery a.thumb-arrow-left { top: 50%; padding: 20px 14px; margin-top: -25px; left: 0; text-decoration: none; background: #000; opacity: 0.8; text-align: center; color: white; font-size: 18px; line-height: 0px; display: block; z-index: 100; position: absolute; } .seleneGallery a.thumb-arrow-right { top: 50%; padding: 20px 14px; margin-top: -25px; right: 0; text-decoration: none; background: #000; opacity: 0.8; text-align: center; color: white; font-size: 18px; line-height: 0px; display: block; z-index: 100; position: absolute; border-radius: 0px; } .seleneGallery .gallery-item > a.selene-caption-toggle, .seleneGallery .gallery-item > a.selene-caption-close { position: absolute; top: 15px; right: 15px; padding: 15px; font-size: 10px; background: rgba(0, 0, 0, 0.8); color: #fff; z-index: 103; width: auto; height: auto; border-radius: 0px; bottom: auto; left: auto; line-height: 1; } .seleneGallery .gallery-item > a.selene-caption-close { display: none; } /*========== Captions ==========*/ .seleneGallery div.gallery-desc { line-height: 1.5; position: absolute; width: 100%; top: 0; right: 0px; bottom: 0; height: 100%; z-index: 40; opacity: 0; font-size: 12px; text-align: left; transition: opacity 0.2s ease-in-out; } .seleneGallery div.inner-desc-wrap { padding: 15px; display: block; position: absolute; background: rgba(0, 0, 0, 0.8); top: 15px; left: 15px; bottom: 15px; right: 15px; } .seleneGallery div.inner-bg-desc { display: table; width: 100%; height: 100%; } .seleneGallery div.inner-bg-desc-wrap { display: table-cell; vertical-align: middle; text-align: center; } .seleneGallery div.inner-bg-desc-wrap h4 { color: white; margin-bottom: 5px; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; font-size: 18px; } .seleneGallery div.gallery-desc .inner-desc-wrap > p { margin: 2px 0 0 0; padding: 0; } .seleneGallery div.gallery-desc h1 { margin-top: 0; display: block; font-size: 24px; line-height: 1.6; padding: 0; margin-bottom: 1px; } .seleneGallery div.gallery-desc div.caption { margin-top: 0; padding: 0 15px 0; display: block; font-size: 14px; color: white; } .seleneGallery div.gallery-desc div.caption p { color: inherit; font-size: 14px; width: 75%; margin: 0 auto; color: white; } .seleneGallery div.gallery-desc a.hover-link { position: relative; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 7px 25px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } .seleneGallery div.gallery-desc a.hover-link:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .seleneGallery .caption-slide div.gallery-desc { opacity: 1; } .seleneGallery.hide-controls div.selene-controls-wrap { display: none; } .seleneGallery div.caption-slide.gallery-item > a.selene-caption-toggle { display: none; } .seleneGallery div.caption-slide.gallery-item > a.selene-caption-close { display: block; } /*----- End of Gallery ------*/ /*===================================== = Quartz Slider = =====================================*/ /*========== General Stylings ==========*/ .quartz { margin: 0px auto 0px auto; position: relative; padding: 0; width: 600px; max-width: 100%; min-height: 200px; visibility: hidden; opacity: 0; overflow: hidden; } .quartz .skeleton { z-index: 5; height: 100%; } .quartz div.items-holder { position: relative; border: none; width: 100%; z-index: 2; } .quartz div.items-view { position: relative; border: none; width: 100%; z-index: 2; overflow: hidden; } .quartz div.items-view div.items-holder { position: absolute; border: none; width: 100%; z-index: 2; } .quartz div.slider-item { position: absolute; top: 0; left: 0; bottom: 0; border: none; overflow: hidden; margin: 0; padding: 0; display: block; width: 100%; z-index: 1; } .quartz div.slider-item > a { margin: 0; padding: 0; outline: none; border: none; text-decoration: none; display: block; width: 100%; } .quartz div.slider-item img { margin: 0 auto; padding: 0; display: block; width: 100%; height: auto; position: relative; z-index: 1; } .quartz div.slider-item.hidden { z-index: 2; display: none; } .quartz div.slider-item.active { z-index: 17; } .quartz div.slider-item.reset { z-index: 5; } .quartz div.items-view div.items-holder div.slider-item.hidden, .quartz div.items-view div.items-holder div.slider-item.active, .quartz div.items-view div.items-holder div.slider-item.reset { z-index: 2; display: block; } .quartz div.custom_slide_style { display: none; } div.quartz-slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .quartz div.slider-item > a.quartz-caption-toggle, .quartz div.slider-item > a.quartz-caption-close { position: absolute; top: 12px; right: 12px; padding: 15px; font-size: 0px; background: rgba(0, 0, 0, 0.0); color: #fff; z-index: 103; width: auto; height: auto; border-radius: 0px; bottom: auto; left: auto; line-height: 1; display: none; } .mobile-caption-holder { position: absolute; top: 12px; right: 12px; left: 12px; bottom: 12px; background: rgba(255, 255, 255, 0.8); color: #333; z-index: 100; display: none; } .mobile-caption-holder .mobile-caption-inner-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 25px; } .mobile-caption-holder h2, .mobile-caption-holder h4, .mobile-caption-holder p { color: inherit; } .mobile-caption-holder .mobile-caption-inner-wrap a.hover-link { margin-right: 5px; text-decoration: none; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 9px 14px; display: inline-block; } /*========== Special case ==========*/ .quartz.fullscreen div.slider-item { position: relative; } .quartz.full-stretch div.slider-item img { width: 100%; min-width: 100%; } .quartz.adaptive div.slider-item img { min-height: 0; height: auto; min-height: 0; } .quartz.adaptive div.slider-item { height: auto; } .ioa-fullscreen-indicator { background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 15px; padding: 15px; border-radius: 0px; position: fixed; bottom: 30px; left: 50%; margin-left: -30px; display: block; z-index: 80; } /*========== Controls ==========*/ .quartz-bullets-wrap { position: absolute; bottom: 0; left: 0; right: 0; } .presentation-mode .quartz-bullets-wrap { top: 0; right: 0; left: auto; bottom: auto; } .quartz ul.quartz-bullets { position: relative; margin: 0 0; padding: 8px 4px 8px 8px; z-index: 4; display: inline-block; text-align: center; } .quartz ul.quartz-bullets li { margin-right: 8px; cursor: pointer; float: left; list-style: none; position: relative; width: 11px; height: 11px; padding: 0px; } .quartz ul.quartz-bullets li img { width: 75px; height: 75px; display: block; } .quartz ul.quartz-bullets li div { position: absolute; width: 75px; height: 75px; top: -95px; left: -37.5px; display: block; opacity: 0; transform: scale(0.9); transition: all 0.2s; } .quartz ul.quartz-bullets li .d-control { background: rgba(0, 0, 0, 0.5); width: 11px; height: 11px; position: absolute; top: 0; left: 0; display: block; border-radius: 100%; transition: all 0.3s ease-in-out; } .quartz ul.quartz-bullets li .a-control { background: rgba(255, 255, 255, 0.9); width: 11px; height: 11px; position: absolute; top: -18x; left: 0; display: block; border-radius: 100%; transition: all 0.3s ease-in-out; opacity: 0; } .quartz ul.quartz-bullets li.active .a-control { top: 0px; opacity: 1; } .quartz ul.quartz-bullets li.active .d-control { top: 18px; opacity: 0; } .quartz ul.quartz-bullets li:hover div { top: -85px; opacity: 1; transform: scale(1); } .presentation-mode ul.quartz-bullets li { float: none; display: block; margin-bottom: 10px; } div.quartz-controls-wrap { position: static; z-index: 99; } div.quartz-controls-wrap > a { position: absolute; text-decoration: none; opacity: 1; background: rgba(0, 0, 0, 0.6); text-align: center; color: #fff; font-size: 24px; font-weight: 400; padding: 20px 5px; line-height: 0px; display: block; z-index: 100; transition: all 0.2s ease-in-out; margin-top: 0; border-radius: 0px; margin-top: -10px; } div.quartz-controls-wrap a.autoplay-control { position: absolute; text-decoration: none; opacity: 1; background: rgba(0, 0, 0, 0.6); text-align: center; color: #fff; font-size: 14px; font-weight: 400; padding: 15px 17px; line-height: 0px; display: block; z-index: 100; transition: all 0.2s ease-in-out; margin-top: 0; border-radius: 0px; bottom: 1px; right: 47px; } div.quartz-controls-wrap a.autoplay-control .progress-bar { display: none; position: absolute; } /* Autoplay */ div.quartz-controls-wrap > a:hover { background: rgba(0, 0, 0, 0.9); } /* Lightbox */ .quartz div.slider-item > a.ioa-lightbox-icon { position: absolute; bottom: 0px; right: 0px; padding: 15px 17px; top: auto; left: auto; font-size: 14px; background: rgba(0, 0, 0, 0.8); color: #fff; z-index: 103; width: auto; height: auto; border-radius: 0px; } .quartz div.slider-item > a.ioa-lightbox-icon:hover { background: rgba(0, 0, 0, 0.8); } /*========== Thumb Animation for Controls ==========*/ div.quartz-controls-wrap > a.slider-prev { top: 50%; left: 20px; } div.quartz-controls-wrap > a.slider-next { top: 50%; right: 20px; } /*========== Tabbed Layout ==========*/ div.ioa-tabbed-layout { padding: 30px 0; text-align: center; position: relative; } div.ioa-tabbed-layout ul { padding: 0; margin: 0; display: inline-block; } div.ioa-tabbed-layout ul li { list-style: none; float: left; opacity: 0.4; transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; } div.ioa-tabbed-layout ul li.active, div.ioa-tabbed-layout ul li:hover { opacity: 1; } div.ioa-tabbed-layout ul li a { text-decoration: none; display: block; margin: 0px 15px; color: #333; } div.ioa-tabbed-layout ul li img { max-height: 48px; width: auto; display: block; margin: 0 auto; } div.ioa-tabbed-layout ul li span { display: block; font-size: 12px; margin-top: 18px; } .quartz-tip { position: absolute; bottom: -10px; left: 0; font-size: 30px; color: #fff; z-index: 20; -webkit-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } /*========== Captions Stylings ==========*/ /* General Stylings */ .quartz div.slider-desc { position: absolute; color: #fff; display: block; z-index: 40; display: none; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 40%; left: 50px; width: 50%; } .quartz div.slider-desc.caption-background { padding: 30px; background: rgba(0, 0, 0, 0.4); } .quartz div.slider-desc .inner-desc-wrap > p { margin: 2px 0 0 0; padding: 0; } .quartz div.slider-desc h2 { margin: 0 0 10px 0; padding: 0; display: block; font-size: 40px; line-height: 1.4; color: inherit; position: relative; } .quartz div.slider-desc h4 { margin: 0 0 10px 0; padding: 0; display: block; font-size: 28px; line-height: 1; color: inherit; position: relative; } .quartz div.slider-desc div.caption { font-size: 18px; position: relative; } .quartz div.slider-desc div.caption p { margin-bottom: 0px; padding-bottom: 0; } .quartz div.slider-desc a.hover-link { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 7px 25px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; margin-left: 15px; position: relative; } .quartz div.slider-desc a.hover-link:hover { background: #66a7cf; border-color: #66a7cf; color: white; } .quartz div.slider-desc a.hover-link:first-child { margin-left: 0; } p.link-p { clear: both; display: block; padding-bottom: 0; } /*========== Caption Positioning ==========*/ .quartz div.slider-desc.s-t-l { top: 50px; left: 50px; } .quartz div.slider-desc.s-t-c { top: 50px; text-align: center; width: 100%; } .quartz div.slider-desc.s-t-r { top: 50px; right: 50px; text-align: right; left: auto; } .quartz div.slider-desc.s-c-l { top: 40%; left: 50px; max-width: 50%; } .quartz div.slider-desc.s-c-c { top: 50px; right: 50px; width: 50%; text-align: center; } .quartz div.slider-desc.s-c-r { right: 50px; max-width: 50%; text-align: right; left: auto; } .quartz div.slider-desc.s-b-l { bottom: 50px; left: 50px; top: auto; } .quartz div.slider-desc.s-b-c { bottom: 50px; left: 50px; width: 100%; text-align: center; top: auto; } .quartz div.slider-desc.s-b-r { bottom: 50px; right: 50px; text-align: right; left: auto; top: auto; } /*======================================= = Image Accordion = =======================================*/ div.image-accordion { position: relative; overflow: hidden; } div.image-accordion div.items-holder { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } div.image-accordion div.items-holder div.accordion-item { float: left; height: 100%; cursor: pointer; position: relative; transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: -10px 0px 20px rgba(0, 0, 0, 0.2); overflow: hidden; } div.image-accordion div.items-holder div.accordion-item.nudge { width: 50%; } div.image-accordion div.items-holder div.accordion-item div.accordion-image { z-index: 110; position: absolute; top: 0; left: 0; height: 100%; opacity: 0; } div.image-accordion div.items-holder div.accordion-item img { width: 100%; height: auto; min-height: 100%; position: absolute; top: 0; left: 0; } div.image-accordion div.items-holder div.accordion-desc { position: absolute; color: #fff; display: block; width: 300px; z-index: 140; background: rgba(0, 0, 0, 0.8); padding: 40px; border-radius: 0px; bottom: 40px; right: -40px; opacity: 0; transition: all 1s cubic-bezier(0.23, 1, 0.32, 1); } div.image-accordion div.items-holder .show-title div.accordion-intro { opacity: 1; } div.image-accordion div.items-holder div.accordion-desc h4 { margin: 0 0 10px 0; display: block; line-height: 1.4; color: inherit; padding: 0; } div.image-accordion div.items-holder div.accordion-desc div.caption p { margin-top: 0px; font-size: 14px; color: inherit; } div.image-accordion div.items-holder div.accordion-desc a.hover-link { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid white; padding: 7px 25px; font-size: 12px; color: white; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } div.image-accordion div.items-holder div.accordion-desc a.hover-link:hover { background: #66a7cf; border-color: #66a7cf; color: white; } div.image-accordion div.items-holder div.accordion-intro { position: absolute; display: block; z-index: 139; border-radius: 0px; bottom: 40px; left: 40px; display: inline-block; width: 500px; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; } div.image-accordion div.items-holder div.accordion-intro h4 { margin: 0 0 10px 0; display: inline-block; font-size: 14px; line-height: 1.4; padding: 20px; color: #fff; background: rgba(0, 0, 0, 0.8); text-transform: uppercase; } div.image-accordion div.items-holder div.accordion-item.nudge div.accordion-intro { opacity: 0; left: 500px; } div.image-accordion div.items-holder div.accordion-item.nudge div.accordion-desc { opacity: 1; right: 40px; } /*----- End of Image Accordion ------*/ /*==================================== = Grid columns = ====================================*/ div.grid-col { float: left; } div.grid-item { margin-bottom: 20px; overflow: hidden; position: relative; } div.grid-image { border-radius: 0px; } div.grid-item div.mason-caption-wrap { z-index: 10; } div.grid-item:hover div.mason-caption-wrap { opacity: 1; transform: scale(1); -webkit-transform: scale(1); } div.grid-item:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); } div.grid-item.c20 div.mason-caption-wrap h4 { font-size: 12px; } /*----- End of Grid columns ------*/ /*===================================== = BX Scrollable = =====================================*/ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0 auto 60px; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; display: block; } /** THEME ===================================*/ .bx-controls { position: absolute; top: 50%; left: 0%; z-index: 9999; width: 100%; } .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; } .bx-controls.bx-has-pager { position: absolute; bottom: -35px; left: 0; width: auto; right: auto; z-index: 9999; top: auto; } .bx-controls.bx-has-pager .bx-wrapper .bx-loading { min-height: 50px; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { text-indent: 9999px; background: #999999; display: block; width: 12px; height: 12px; margin: 0 12px 0 0; outline: 0; border-radius: 0px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #9ac832; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 0px; text-align: center; color: white; } .bx-wrapper .bx-next { right: 0px; text-align: center; color: white; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls { opacity: 1; } .bx-controls-direction { width: 100%; } .bx-wrapper .bx-controls-direction a { outline: 0; padding: 0px; text-decoration: none; position: absolute; display: block; margin-top: -24px; opacity: 1; font-size: 48px; color: #222222; transition: all 0.2s ease-in-out; } .bx-wrapper .bx-controls-direction a:hover { opacity: 1; } .bx-wrapper .bx-controls-direction a.bx-prev { left: -50px; } .bx-wrapper .bx-controls-direction a.bx-next { right: -50px; } .bx-wrapper .bx-controls-direction a:hover { color: #9ac832; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(sprites/i/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(sprites/i/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #999999; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #222222; font-family: Arial; display: block; font-size: .85em; padding: 10px; } /*----- End of BX Scrollable ------*/ /*----- End of Section comment block ------*/ /*============================================= = Single Post Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. General Stylings 2. Extra Information Area 3. Author Box 4. Comments 5. Related Posts ----- End of Table of Contents ---------- */ /*======================================== = General Stylings = ========================================*/ .post-format-standard.single-post-content .page-content { padding: 25px 0; } .fb_iframe_widget span, .fb_iframe_widget { max-width: 100% !important; } div.fb_comments_template { margin-bottom: 50px; } .post-bottom-section { margin-bottom: 20px; border: 1px solid #eaeaea; padding: 20px 20px; border-radius: 0px; } /*----- End of General Stylings ------*/ .post .page-content { padding-top: 20px; } .single-post .post-navigation { border: 1px solid #eaeaea; padding: 20px; border-radius: 0px; } .single-post .post-navigation .skeleton { padding: 5px 0; width: auto; } .single-post div.prev-post-link, .single-post div.next-post-link { width: 50%; } p.post_tags { margin: 0; padding: 15px 0 0 0; float: left; font-size: 12px; width: 50%; } p.post_tags span { font-weight: 600; } p.post_tags a { display: inline-block; margin-right: 3px; text-decoration: none; } div.post-share { float: right; } div.post-share div.share-links { float: left; } div.post-share div.share-links a { display: inline-block; margin-right: 3px; text-decoration: none; text-decoration: none; } div.post-share span { float: left; margin-right: 15px; } /*============================================== = Extra Information Area = ==============================================*/ div.meta-info { margin-top: 0px; padding: 0; } div.meta-info div.inner-meta-info i { margin-left: 4px; } div.meta-info div.inner-meta-info > div { display: block; padding: 0px; margin: 0px; text-align: center; font-size: 11px; float: left; } div.meta-info a { text-decoration: none; color: #66a7cf; margin-left: 2px; font-size: 13px; } div.meta-info a:hover { color: #222222; } .meta-info > div { color: #222222; padding: 5px 0; font-size: 13px; } /*----- End of Extra Information Area ------*/ /*================================ = Comments = ================================*/ #comments { padding: 50px 0 20px 0; } ol.comment-list { list-style: none; padding: 30px 0px 30px 0px; margin: 0 0 30px 0; border-bottom: 1px solid #eaeaea; } ol.comment-list li.comment { padding-bottom: 30px; position: relative; } ol.comment-list li.comment:last-child { padding-bottom: 10px; } ol.children { list-style: none; padding: 30px 0 0px 30px; margin: 0; } ol.children li.comment:last-child { padding-bottom: 0px; } div.image-info { position: absolute; border: 1px solid #eaeaea; border-radius: 0px; top: 0px; left: 0px; } div.image-info img { display: block; float: left; } div.image-info > a { float: left; font-size: 11px; color: #222222; } div.comment-info { position: relative; } div.comment-body { padding: 25px; margin-bottom: 20px; position: relative; min-height: 80px; margin-left: 120px; border: 1px solid #eaeaea; border-radius: 0px; } div.comment-body span.arrow { display: none; } #comments .fn { display: block; font-size: 14px; } #comments a.comment-time { text-decoration: none; font-size: 12px; color: #222222; } div.comment-body img.avatar { display: block; max-width: 100%; } #comments div.reply { position: absolute; top: -1px; right: -1px; } #comments a.comment-reply-link { transition: all 0.2s ease-in-out; outline: none; border: 1px solid #eaeaea; padding: 12px 15px; font-size: 12px; color: #222222; display: inline-block; text-decoration: none; border-radius: 0px; } #comments a.comment-reply-link:hover { color: #9ac832; } div.comment-text { margin-top: 20px; } p.no-comments { border: 1px solid #eaeaea; text-align: center; display: block; padding: 30px; } div.comment-text h1, div.comment-text h2, div.comment-text h3, div.comment-text h4, div.comment-text h5, div.comment-text h6 { color: white; } #comments img { display: inline; } /*========== Comments Form ==========*/ #respond { clear: both; padding: 0; position: relative; margin-top: 10px; } #respond h3#reply-title { font-size: 18px; line-height: 1.6; } #respond h3.custom-font { color: #222222; font-size: 18px; line-height: 1.6; margin-bottom: 10px; } #commentform { border-top: none; padding: 0 0 20px 0; } #commentform input[type=text], #commentform input[type=email], #commentform input[type=url] { border: 1px solid #eaeaea; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 10px; width: 90%; border-radius: 0px; background: white; } #commentform code { border: none; color: #999999; font-size: 11px; padding: 2px 4px; } #commentform { margin-left: 0px; margin-top: 0px; } #commentform p.single-row-textfield { float: left; margin-bottom: 10px; width: 32%; } #commentform p.comment-form-url { margin-right: 0; } #commentform input[type=submit] { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 18px 24px; font-size: 13px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } #commentform input[type=submit]:hover { background: #66a7cf; border-color: #66a7cf; color: white; } #commentform label { font-size: 13px; margin-right: 20px; margin-top: 14px; } #commentform p { margin: 5px 0px 0px 0px; } a#cancel-comment-reply-link { position: absolute; top: 0; right: 0; background: #9ac832; padding: 2px 7px; text-decoration: none; font-size: 10px; color: #fff; border-radius: 0px; } a#cancel-comment-reply-link:hover { background: #222222; color: white; } p.comment-form-url, p.comment-form-author, p.comment-form-email { width: 33.33%; float: left; } p.comment-form-url { clear: right; } #commentform p.comment-form-url input { width: 100%; } /*----- End of Comments ------*/ /*===================================== = Related Posts = =====================================*/ div.related_posts div.related_posts-title-area { margin-bottom: 0px; } h3.single-related-posts-title { margin-top: 0px; display: block; } ul.single-related-posts li .helper-display-icon { width: 100%; text-align: center; padding: 40px 0; font-size: 16px; padding: 60px 0; } div.related_posts .ioa-menu { margin-right: 0; margin-top: -5px; margin-bottom: 30px; border-bottom: 1px solid #eaeaea; float: none; } div.related_posts .ioa-menu ul { float: none; } div.related_posts .ioa-menu li { padding: 12px 20px 12px 0px; } div.related_posts .ioa-menu li:hover, div.related_posts .ioa-menu li.active { color: #66a7cf; } div.related-posts-wrap { margin-top: 0px; } div.related-posts-wrap ul.single-related-posts { margin: 0; padding: 0; display: none; } div.related-posts-wrap ul.single-related-posts.active { display: block; } div.related-posts-wrap ul.single-related-posts li.hover-item { width: 250px; margin: 0px 20px 0px 0px; padding: 0; list-style: none; float: left; } div.related-posts-wrap.related_posts div.related_posts-title-area { margin-bottom: 10px; } div.related-posts-wrap ul.single-related-posts img { border-radius: 0px; } div.related-posts-wrap ul.single-related-posts div.image { overflow: hidden; position: relative; } div.related-posts-wrap ul.single-related-posts h4 { margin-top: 20px; font-size: 17px; } div.related-posts-wrap ul.single-related-posts h4 a { text-decoration: none; } .sidebar-layout div.related-posts-wrap ul.single-related-posts li.hover-item { width: 170px; } /*----- End of Related Posts ------*/ /*========================================== = Project Navigation = ==========================================*/ .post-navigation .skeleton { padding: 15px 0; } .post-navigation span { margin: 10px 0 10px 0; padding: 0; line-height: 1; font-size: 15px; } div.prev-post-link, div.next-post-link { width: 40%; float: left; padding: 10px 0; } div.prev-post-link a { text-decoration: none; } div.prev-post-link a i { font-size: 15px; margin-right: 15px; position: relative; top: 2px; padding: 5px 0; } div.next-post-link a { text-decoration: none; float: right; } div.next-post-link a i { font-size: 15px; margin-left: 15px; position: relative; top: 2px; padding: 5px 0; } /*----- End of Section comment block ------*/ /*============================================= = Single Portfolio Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Single Portfolio Categorie 2. Related Projects 3. Project Extra Images 4. Project Navigation ----- End of Table of Contents ---------- */ /*======================================== = General Stylings = ========================================*/ .single-portfolio-layout .single-portfolio-image-area { margin-bottom: 20px; } /*========== Extra Information ==========*/ .single-portfolio-meta h4 { border-bottom: 1px solid #eaeaea; padding-bottom: 20px; font-weight: 400; } .smeta-item { border-bottom: 1px solid #eaeaea; padding-bottom: 12px; margin-bottom: 12px; } .smeta-item strong { width: 45%; float: left; font-size: 13px; } .smeta-item span { width: 55%; float: left; font-style: italic; } .smeta-item a { text-decoration: none; display: inline-block; line-height: 1; color: #66a7cf; } .smeta-item a:hover { color: #222222; } /*----- End of General Stylings ------*/ .single-portfolio-description.full-desc .single-portfolio-layout .page-content { margin-bottom: 0; padding-bottom: 0; } .default-portfolio-layout .single-portfolio-layout .page-content .page-content { padding-top: 0; } .ioa-single-portfolio-default-2 div.inner-single-portfolio-description .page-content { padding-top: 0; } /*=================================================== = Single Portfolio Categories = ===================================================*/ div.portfolio_cats { margin-bottom: 30px; margin-top: -10px; } div.portfolio_cats span { display: inline-block; padding: 0px; margin: 0px 10px 0px 0px; } div.portfolio_cats a { display: inline-block; padding: 0px; margin: 0px 10px 0px 0px; text-decoration: none; } div.portfolio_cats a:hover { text-decoration: none; } /*----- End of Single Portfolio Categories ------*/ /*======================================== = Related Projects = ========================================*/ div.portfolio_related_posts { margin-bottom: 50px; border-top: 1px solid #eaeaea; padding-top: 50px; } div.portfolio_related_posts ul.single-related-posts { margin: 0; padding: 0; } div.portfolio_related_posts ul.single-related-posts li.hover-item { width: 250px; margin: 0px 20px 0px 0px; padding: 0; list-style: none; float: left; } div.portfolio_related_posts.related_posts div.related_posts-title-area { margin-bottom: 10px; } div.portfolio_related_posts ul.single-related-posts img { border-radius: 0px; } div.portfolio_related_posts ul.single-related-posts div.image { overflow: hidden; position: relative; } div.portfolio_related_posts ul.single-related-posts h4 { margin-top: 20px; font-size: 17px; } div.portfolio_related_posts ul.single-related-posts h4 a { text-decoration: none; } .sidebar-layout div.portfolio_related_posts ul.single-related-posts li.hover-item { width: 170px; } div.portfolio_related_posts .bx-wrapper .bx-controls-direction a { margin-top: -54px; } /*----- End of Related Projects ------*/ /*============================================= = Project Extra Images = =============================================*/ .extra-portfolio-items { margin: 20px 0px 20px 0; } .extra-portfolio-items h3 { font-size: 15px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eaeaea; } .extra-portfolio-items ul { padding: 0; margin: 0; } .extra-portfolio-items ul li { list-style: none; padding: 0; margin: 0 0 20px 0; position: relative; width: 100%; overflow: hidden; } .extra-portfolio-items ul li img { display: block; width: 100%; height: auto; border-radius: 0px; } /*----- End of Project Extra Images ------*/ div.prev-portfolio-link { position: fixed; top: 50%; left: 0; margin-top: -15px; background: rgba(0, 0, 0, 0.3); z-index: 10; } div.next-portfolio-link { position: fixed; top: 50%; right: 0; margin-top: -15px; background: rgba(0, 0, 0, 0.3); z-index: 10; } div.prev-portfolio-link a, div.next-portfolio-link a { color: #fff; text-decoration: none; padding: 30px 15px; display: block; } /*----- End of Project Navigation ------*/ /*===================================== = Fluide Layout = =====================================*/ .ioa-single-portfolio-fluid .single-portfolio-layout.skeleton { width: 95%; } .ioa-single-portfolio-fluid .single-portfolio-image-area { width: 60%; margin: 0; float: left; } .ioa-single-portfolio-fluid .single-portfolio-description { width: 40%; margin: 0; position: relative; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 50px; } .ioa-single-portfolio-fluid .single-portfolio-layout .page-content { padding-top: 0px; } .ioa-single-portfolio-fluid .single-image img { width: 100%; height: auto; } .ioa-single-portfolio-fluid .post-navigation .skeleton { width: 100%; } .single-portfolio-stuck .page-content, .single-portfolio-stuck .single-portfolio-meta { margin-right: 50px; } .single-portfolio-stuck .portfolio-extra-data { margin-right: 50px; } /*----- End of Fluide Layout ------*/ /*=========================================== = Full Layout = ===========================================*/ /*----- End of Default Full Layout ------*/ div.single-portfolio-ajax-wrap { position: relative; } div.single-portfolio-ajax-wrap.loading > div { position: absolute; width: 100%; left: 0; } div.single-portfolio-ajax-wrap > div.overlay-loader { height: 100%; top: 0; z-index: 100; opacity: 0.9; background: white; width: 100%; position: absolute; left: 0; display: none; } div.single-portfolio-ajax-wrap > div.overlay-loader span.loader { top: 150px; } .ioa-single-portfolio-default-2 div.single-portfolio-share { border-top: none; } div.single-portfolio-share { padding: 15px 0; border-top: 1px solid #eaeaea; color: #222222; position: relative; } div.single-portfolio-share i { margin-right: 15px; } div.single-portfolio-share h5 { margin: 0; padding: 0; cursor: pointer; } div.share-button-panel { padding: 15px 15px 8px 15px; background: rgba(255, 255, 255, 0.95); top: 100%; left: 0; position: absolute; width: 300px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 0px; display: none; } div.single-portfolio-share:hover div.share-button-panel { display: block; } div.share-button-panel > div { float: left; overflow: hidden; width: 84px; height: 27px; } div.single-portfolio-views { padding: 15px 0; border-top: 1px solid #eaeaea; color: #222222; } div.single-portfolio-appreciation { padding: 15px 0; border-top: 1px solid #eaeaea; color: #222222; text-transform: uppercase; border-bottom: 1px solid #eaeaea; margin-bottom: 22px; } div.single-portfolio-views i, div.single-portfolio-appreciation i { margin-right: 15px; } div.single-portfolio-views h5, div.single-portfolio-appreciation h5 { margin: 4px 0 0 0; padding: 0; float: left; color: #999999; } div.single-portfolio-views .count, div.single-portfolio-appreciation .count { float: right; font-weight: 600; } div.feature-portfolio-wrap { position: relative; } div.feature-portfolio-wrap .single-image { position: relative; overflow: hidden; } div.like-icon-wrap { margin-top: 30px; display: block; padding: 14px 0px; cursor: pointer; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } div.like-icon-wrap i { font-size: 16px; float: left; margin-top: 3px; } div.like-icon-wrap.liked { cursor: auto; opacity: 0.5; } div.like-icon-wrap span { float: right; } /*----- End of Section comment block ------*/ /*============================================= = Footer Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Footer Stylings 2. Bottom Footer Stylings ----- End of Table of Contents ---------- */ /*======================================== = Footer Stylings = ========================================*/ /*========== General Stylings ==========*/ #footer { z-index: 16; position: relative; } #lang_sel_footer { background: rgba(255, 255, 255, 0.2); padding: 5px 0; font-family: inherit; } #lang_sel_footer a { color: white; text-decoration: none; border-bottom: 1px solid transparent; font-size: 11px; } #lang_sel_footer a:hover { color: #66a7cf; } .mobile_footer_widget { display: none; } a.back-to-top { position: fixed; right: 15px; opacity: 0; transform: scale(0); -webkit-transform: scale(0); margin-left: -20px; bottom: 15px; color: #222222; z-index: 300; padding: 20px; border-radius: 0px; background: #66a7cf; overflow: hidden; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; } a.bt-reveal.back-to-top { opacity: 1; transform: scale(1); -webkit-transform: scale(1); } /*========== Widget Area ==========*/ .inner-footer-wrapper { background: #222222; } .inner-footer-wrapper .skeleton { padding: 70px 0; } .inner-footer-wrapper .col { margin-bottom: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-right: 1px solid #222222; } #footer .col.last { border-right: none; } /*----- End of Footer Stylings ------*/ /*===================================== = Bottom Footer = =====================================*/ #footer-menu { padding: 10px 0 10px 0; background: #292929; position: relative; } #footer-menu p.footer-text { float: left; color: white; font-size: 13px; margin-top: 7px; margin-bottom: 0; } #footer-menu p.footer-text a { color: #66a7cf; text-decoration: underline; } #footer-menu p.footer-text a:hover { color: white; } #footer-menu .menu { float: right; margin: 0; padding: 0px 0 0 0; } #footer-menu .menu li { float: left; list-style: none; margin: 0; } #footer-menu .menu li a { color: #66a7cf; text-decoration: none; display: block; padding: 5px 10px; border-radius: 0px; } #footer-menu .menu li a:hover { color: white; } #footer-menu.footer-align-center { text-align: center; } #footer-menu.footer-align-center p.footer-text, #footer-menu.footer-align-center .menu { float: none; } #footer-menu.footer-align-right p.footer-text, #footer-menu.footer-align-right .menu { float: right; } /*----- End of Bottom Footer ------*/ /*----- End of Section comment block ------*/ /*============================================= = Sidebar & Footer Widgets Stylings = =============================================*/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Common Stylings for Widget Areas 2. Sidebar Related Widget Stylings 3. Footer Styling 4. BBPRESS Stylings ----- End of Table of Contents ---------- */ /*======================================================== = Common Stylings for Widget Areas = ========================================================*/ div.widget-posts-grid { display: block; margin-top: 25px; } div.widget-posts-grid div.image { float: left; position: relative; width: 30%; margin: 0px 3% 3% 0px; z-index: 1; } div.widget-posts-grid div.image:hover { position: relative; z-index: 10; } div.widget-posts-grid div.image img { display: block; max-width: 100%; height: auto; border-radius: 0px; } div.super-wrapper div.widget-posts-grid h3 { position: absolute; bottom: 55px; left: -25px; padding: 6px 10px; background: #66a7cf; color: white; font-size: 12px; display: none; text-align: center; line-height: 1.1; border-radius: 0px; width: 100px; } ul.instagram-pics { padding: 0; margin: 0; } .ioa-instagram-feed a { letter-spacing: 2px; color: white; text-transform: uppercase; font-weight: 600; text-decoration: none; } .ioa-instagram-feed a:hover { letter-spacing: 2px; color: #66a7cf; text-transform: uppercase; font-weight: 600; text-decoration: none; } .sidebar-wrap ul li.cat-item a, .footer-wrap ul li.cat-item a, .sidebar-wrap.widget_archive ul li a, .footer-wrap.widget_archive ul li a { display: inline-block; } /*----- End of Common Stylings for Widget Areas ------*/ /*======================================================= = Sidebar Related Widget Stylings = =======================================================*/ .sidebar-wrap .heading { color: #222222; margin-bottom: 15px; position: relative; line-height: 1.4; font-size: 16px; } .sidebar-wrap .heading a { display: inline-block; } /*========== General Stylings ==========*/ .sidebar, .sidebar li { color: #222222; } .sidebar .widget_nav_menu i.ioa-front-icon { margin-right: 5px; color: #66a7cf; } .sidebar p { color: #999999; } div.sidebar-wrap a { color: #66a7cf; display: block; } div.sidebar-wrap a:hover { color: #222222; } .sidebar-wrap ul.children { margin: 10px 0 10px 14px; padding: 0 0 0 10px; border-left: 1px solid #f0f0f0; } .sidebar-wrap ul li:first-child { margin-top: 0; padding-top: 0; } .sidebar-wrap ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .sidebar-wrap { padding: 50px 0 0px 0; margin: 0; } .sidebar .sidebar-wrap:first-child { margin-top: 0; padding-top: 0 !important; } .sidebar-wrap:last-child { border-bottom: none; } .sidebar-wrap a.more { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 15px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; display: inline-block; text-decoration: none; } .sidebar-wrap a.more:hover { background: #66a7cf; border-color: #66a7cf; color: white; } div.sidebar-wrap.widget.CustomBox .title_line { margin-bottom: 0; } /*========== General List Stylings ==========*/ .sidebar-wrap div.ioa-image-wrap { padding: 0; } .sidebar-wrap div.ioa-image-wrap img { border-radius: 0px; } .sidebar-wrap ul { margin: 0; padding: 0 0; } .sidebar-wrap ul li { list-style: none; margin: 0; padding: 8px 0px; display: block; position: relative; border-bottom: 1px solid #f0f0f0; } .sidebar-wrap ul li a { text-decoration: none; display: block; } .sidebar-wrap ul li a:hover { color: #222222; } .sidebar-wrap ul li a abbr[title] { border-bottom: none; } div.sidebar-wrap.widget.widget_recent_entries a { font-size: 15px; } html .recentcomments a { font-size: 15px; display: block !important; font-style: normal; } html .recentcomments { font-style: italic; font-style: italic; font-size: 11px; color: #999999; } span.post-date { font-style: italic; color: #999999; font-size: 11px; } /*========== WPML ==========*/ .icl_languages_selector { position: relative; z-index: 10; } .sidebar-wrap #lang_sel { display: block; } .sidebar-wrap #lang_sel li { width: 90%; background: #66a7cf; } .sidebar-wrap #lang_sel li a { padding: 7px; background-position: 97% 50%; } .sidebar-wrap #lang_sel ul ul { top: 39px; width: 100%; } /*========== Tweets ==========*/ .sidebar-wrap .tweets-wrapper.list ul.tweets li i { font-size: 18px; top: -8px; background: none; color: #66a7cf; padding-left: 0; } .sidebar-wrap .tweets-wrapper.list ul.tweets li { padding-left: 35px; padding-bottom: 20px; line-height: 1.4; min-height: 30px; } .sidebar-wrap .tweets-wrapper.list ul.tweets li { border-bottom: 1px solid #f0f0f0; } .sidebar-wrap .tweets-wrapper ul.tweets li { border-bottom: none; } /*========== WP Calendar Styling ==========*/ .sidebar-wrap.widget_calendar table { width: 100%; border-collapse: collapse; margin-bottom: 0; } .sidebar-wrap.widget_calendar table thead { border-radius: 0px; background: rgba(0, 0, 0, 0.07); } .sidebar-wrap.widget_calendar table caption { padding-bottom: 6px; text-align: center; margin-top: 10px; } .sidebar-wrap.widget_calendar table td { padding: 5px 0px; font-size: 11px; text-align: center; } .sidebar-wrap.widget_calendar table th { font-size: 11px; padding: 12px 0; text-align: center; border: none; } .sidebar-wrap.widget_calendar table #prev { padding-left: 0; text-align: left; } .sidebar-wrap.widget_calendar table #next { text-align: right; padding-right: 0; } .sidebar-wrap.widget_calendar table td a { border-radius: 0px; margin-top: 5px; padding: 2px 8px 1px 8px; display: inline-block; border: 1px solid #f0f0f0; text-decoration: none; } .sidebar-wrap.widget_calendar table td a:hover { border-color: #9ac832; } .sidebar-wrap.widget_calendar table #today { border-radius: 0px; color: #9ac832; } .sidebar-wrap.widget_calendar tfoot { border-top: 1px solid #f0f0f0; } /*========== Menu Styling ==========*/ div.sidebar-wrap ul.menu { margin: 0; padding: 0; } div.sidebar-wrap ul.menu li { position: relative; } div.sidebar-wrap ul.menu a { position: relative; z-index: 2; } div.sidebar-wrap ul.menu ul.sub-menu a { display: inline-block; } div.sidebar-wrap .menu > li.current_page_item > a, div.sidebar-wrap .menu > li.current-menu-ancestor > a, div.sidebar-wrap .menu > li.menu-active > a, div.sidebar-wrap .menu > li.current-menu-item > a { color: #66a7cf; } div.sidebar-wrap ul.sub-menu { display: none; left: -220px; z-index: 5; background: #222222; position: absolute; top: 0; width: 220px; margin: 0; padding: 0; box-shadow: -10px 18px 30px rgba(0, 0, 0, 0.1); line-height: 1.6; } div.left-sidebar div.sidebar-wrap ul.sub-menu { left: auto; right: -220px; } div.sidebar-wrap ul.sub-menu > li { text-align: left; border-bottom: none; margin: 0; padding: 0; } div.sidebar-wrap ul.sub-menu li a { text-decoration: none; padding: 15px 23px; display: block; margin: 0px; color: white; font-size: 12px; } div.sidebar-wrap ul.menu li:hover > a { opacity: 0.8; } /*========== Rss Widget ==========*/ div.sidebar-wrap a.rsswidget { border-bottom: none; } /*========== Search Bar ==========*/ div.sidebar-wrap input[type=submit] { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 22px 9px 22px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; outline: none; border: none; } div.sidebar-wrap.widget_search label.screen-reader-text { display: none; } div.sidebar-wrap #searchsubmit { display: none; } #searchform input[type=text] { width: 100%; } .sidebar-wrap.widget.widget_search .title_line { margin-bottom: 30px; } /*========== Tags ==========*/ div.sidebar-wrap div.tagcloud a { outline: none; margin: 0px 12px 2px 0px; text-decoration: none; padding: 1px 0px; float: left; font-size: 13px !important; font-style: italic; color: #222222; } div.sidebar-wrap div.tagcloud a:hover { color: #222222; } /*========== Testimonial Widget ==========*/ div.sidebar-wrap div.testimonial-bubble-content { padding: 0 0 15px 0; font-size: 13px; font-style: italic; color: #222222; } div.sidebar-wrap div.testimonial-bubble div.image img { display: block; border-radius: 0px; } div.sidebar-wrap div.testimonial-bubble-meta h3 { font-size: 13px; margin-top: 5px; margin-bottom: 0; } div.sidebar-wrap div.testimonial-bubble div.image { margin-top: 8px; } div.sidebar-wrap div.testimonial-bubble div.info span { margin-top: 2px; color: #222222; font-size: 11px; } div.sidebar-wrap .rad-testimonials-list .image { float: left; } div.sidebar-wrap .rad-testimonials-list .info { margin: 0px 0 0 15px; } div.sidebar-wrap .rad-testimonials-list .info h3 { font-size: 16px; margin-top: 0px; margin-bottom: 0; } /*========== Google Map ==========*/ div.sidebar-wrap div.google-map { max-width: 100%; } /*========== Custom Box ==========*/ div.custom-box-content p:last-child { margin-bottom: 0; } div.custom-box-image { float: left; } .sidebar-wrap a.more { margin-top: 15px; } div.custom-box-content strong { color: inherit; } div.custom-box-content img { border-radius: 0px; } div.custom-box-content p:first-child { margin-top: 0px; } /*========== Custom Posts ==========*/ .sidebar-wrap .widget-posts { margin: 20px 0 0 0; padding: 0; } .sidebar-wrap .widget-posts li { padding: 0px 0px 15px 0px; border-bottom: 1px solid #f0f0f0; min-height: 10px; position: relative; margin: 15px 0; } .sidebar-wrap .widget-posts li:last-child { margin-bottom: 0; padding-bottom: 0; } .sidebar-wrap .widget-posts li a { border: none; } .sidebar-wrap .widget-posts .image { width: 50px; position: absolute; top: 3px; left: 0; } .sidebar-wrap .widget-posts .image i { width: 50px; text-align: center; color: #888; font-size: 16px; padding: 20px 0; border: 1px solid rgba(0, 0, 0, 0.07); } .sidebar-wrap .widget-posts .image img { margin-right: 0px; display: block; border-radius: 0px; } .sidebar-wrap .widget-posts li:first-child .image { top: 2px; } .sidebar-wrap .widget-posts .description { float: left; margin-left: 65px; min-height: 65px; } .sidebar-wrap .widget-posts .description p { padding: 0; margin: 0; } .sidebar-wrap .widget-posts .description h5 { margin-bottom: 2px; margin-top: 0px; line-height: 1.4; font-weight: 700; } .sidebar-wrap .widget-posts .description h5 a { font-size: 12px; word-break: initial; } .sidebar-wrap .widget-posts .description h5 a:hover { border-bottom: none; } .sidebar-wrap .widget-posts li .full-desc.description { margin-left: 0; width: auto; } .sidebar-wrap div.facebookOuter { margin-top: 25px; } /*========== Social Set ==========*/ .sidebar-wrap .social-set { margin-top: 0px; padding: 4px 0px; margin-bottom: 0px; } .sidebar-wrap .social-set { padding: 0; } .sidebar-wrap .social-set ul.social-icons li { margin-right: 4px; border-bottom: none; margin-top: 0; margin-bottom: 0; padding: 0; } .sidebar-wrap .social-set ul.social-icons li a { border-bottom: none; } /*========== Video ==========*/ .sidebar-wrap.Video p.caption { text-align: center; font-size: 11px; padding: 0; margin: 0; } /*----- End of Sidebar Stylings ------*/ /*====================================== = Footer Styling = ======================================*/ /*========== Genertal Stylings ==========*/ div.footer-wrap ul.instagram-pics li, div.sidebar-wrap ul.instagram-pics li { padding: 0; width: 30%; margin: 0px 3% 3% 0px; float: left; border: none; } div.footer-wrap ul.instagram-pics li a, div.sidebar-wrap ul.instagram-pics li a { display: block; } div.footer-wrap ul.instagram-pics li a img, div.sidebar-wrap ul.instagram-pics li a img { display: block; border-radius: 0px; max-width: 100%; } .footer-one-col div.footer-wrap { padding-right: 0; } #footer .footer-cols.last div.footer-wrap { padding-right: 0px; } div.footer-wrap ul.social-icons { display: inline-block; } div.footer-wrap { padding: 20px 50px 20px 0px; color: white; } .f-w-center div.footer-wrap { text-align: center; } .f-w-right div.footer-wrap { text-align: right; } .footer-wrap div.title_line { margin-bottom: 0; } .footer-wrap a.more { margin-top: 15px; float: left; transition: all 0.2s ease-in-out; outline: none; border: 1px solid white; padding: 4px 8px; font-size: 11px; color: white; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; } .footer-wrap a.more:hover { border-color: white; background: white; color: #66a7cf; } .footer-wrap img { max-width: 100%; } .footer-wrap ul { margin: 0; padding: 0 0; word-break: break-all; } .footer-wrap ul li { list-style: none; margin: 0; padding: 8px 0px; display: block; position: relative; border-bottom: 1px solid #222222; color: white; } .footer-wrap ul li a { text-decoration: none; display: inline-block; color: white; } .footer-wrap ul li a:hover { color: #66a7cf; } .footer-wrap ul li a abbr[title] { border-bottom: none; } .footer-wrap ul.children { margin: 10px 0 10px 24px; padding: 0; } .footer-wrap ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .footer-wrap .bx-wrapper .bx-pager.bx-default-pager a { background: #222222; } .footer-wrap .bx-wrapper .bx-pager.bx-default-pager a:hover, .footer-wrap .bx-wrapper .bx-pager.bx-default-pager a.active { background: white; } .footer-wrap h3.footer-heading { color: white; font-size: 16px; margin-bottom: 10px; line-height: 1.4; } div.footer-wrap p, div.footer-wrap strong { color: white; } div.footer-wrap h1, div.footer-wrap h2, div.footer-wrap h3, div.footer-wrap h4, div.footer-wrap h5, div.footer-wrap h6 { color: white; } div.footer-wrap p a, div.footer-wrap a { color: white; } div.footer-wrap p a:hover, div.footer-wrap a:hover { color: #66a7cf; } /*========== Single Testimonial ==========*/ .footer-wrap .rad-testimonials-list h2 { color: white; } .footer-wrap .testimonial-bubble-content { padding: 15px; position: relative; border-radius: 0px; } .footer-wrap div.testimonial-bubble div.image { float: left; margin-right: 10px; margin-top: 10px; } .footer-wrap div.testimonial-bubble div.image img { display: block; border-radius: 100%; } .footer-wrap div.testimonial-bubble div.info { float: left; } .footer-wrap div.testimonial-bubble div.info h3 { margin: 0; color: white; line-height: 14px; font-size: 14px; margin-top: 16px; } .footer-wrap div.testimonial-bubble div.info span { color: #222222; font-size: 10px; line-height: 1.3; display: block; } .footer-wrap div.testimonial-bubble-content i.icon-sort-down { display: nonel; } .footer-wrap div.testimonials-wrapper ul.rad-testimonials-list li div.content { background: none; padding: 0px; margin-bottom: 0; } .footer-wrap div.testimonials-wrapper ul.rad-testimonials-list li div.content p { padding: 0; margin: 0; } .footer-wrap ul { padding: 0; } /*========== Footer Google map ==========*/ .footer-wrap .google-map, .footer-wrap .google-map iframe { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0px; } /*========== WP Calendar Styling ==========*/ .footer-wrap.widget_calendar table { width: 100%; color: white; border-collapse: collapse; } .footer-wrap.widget_calendar table caption { color: white; padding-bottom: 6px; text-align: center; } .footer-wrap.widget_calendar table td { font-size: 11px; padding: 8px; text-align: center; } .footer-wrap.widget_calendar table tr { width: 100%; background: none; } .footer-wrap.widget_calendar table { margin: 0px; display: block; padding: 0; position: relative; } .footer-wrap.widget_calendar table tbody tr:nth-child(odd) td { background: none; } .footer-wrap.widget_calendar table th { padding: 10px 0; color: white; font-size: 11px; text-align: center; border: none; } .footer-wrap.widget_calendar table #prev { padding-left: 0; } .footer-wrap.widget_calendar table #next { text-align: right; padding-right: 0; } .footer-wrap.widget_calendar table td a { text-decoration: none; background: #66a7cf; border-radius: 0px; margin-top: 5px; color: white; padding: 2px 8px 1px 8px; font-size: 10px; display: inline-block; } .footer-wrap.widget_calendar table td a:hover { border-color: footer_secondary_bg_color; color: footer_secondary_bg_color; } /*========== Menu Styling ==========*/ div.footer-wrap ul.menu li ul.sub-menu li:last-child { background: none; padding-bottom: 0; } div.footer-wrap ul.menu li { position: relative; } div.footer-wrap ul.menu { padding: 0; } div.footer-wrap ul.menu > li { padding: 0 0 2px 0; margin: 0; } div.footer-wrap ul.menu li:before { content: ''; } div.footer-wrap ul.menu a { margin-left: 0; display: block; padding: 4px 0px; border-bottom: none; color: white; font-size: 13px; } div.footer-wrap ul.menu a:hover { color: #66a7cf; } div.footer-wrap .menu > li.current_page_item > a, div.footer-wrap .menu > li.current-menu-ancestor > a, div.footer-wrap .menu > li.menu-active > a, div.footer-wrap .menu > li.current-menu-item > a { color: #66a7cf; } div.footer-wrap ul.sub-menu { padding: 10px 0px 10px 10px; margin-top: 10px; border-left: 1px solid rgba(255, 255, 255, 0.07); } /*========== Rss Widget ==========*/ div.footer-wrap a.rsswidget { border-bottom: none; } /*========== Search Bar ==========*/ div.footer-wrap .search-input { width: 100%; } div.footer-wrap.widget_search label.screen-reader-text { display: none; } div.footer-wrap #searchform input[type=text] { border: none; float: none; color: white; width: 93%; display: block; margin-bottom: 20px; } /*========== Twitter ==========*/ div.footer-wrap div.tweets-wrapper i.ioa-front-icon { z-index: 2; top: 0px; left: 0; position: absolute; padding: 9px; color: white; font-size: 24px; background: none !important; } div.footer-wrap .tweets-wrapper.list ul.tweets li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 0px 0px 15px 55px; min-height: 47px; display: block; margin: 15px 0 0 0; } /*========== Tags ==========*/ div.footer-wrap div.tagcloud a { outline: none; margin: 0px 5px 0 0; float: left; transition: all 0.2s ease-in-out; outline: none; padding: 2px 5px; font-size: 10px; color: #66a7cf; display: inline-block; text-decoration: none; font-size: 11px !important; } div.footer-wrap div.tagcloud a:hover { background: #66a7cf; border-color: #66a7cf; color: white; border-radius: 3px; } /*========== Custom Box ==========*/ div.footer-wrap div.custom-box-content, div.footer-wrap div.custom-box-content p { color: #999999; } div.footer-wrap div.custom-box-content p:first-child { padding-top: 0px; } div.footer-wrap div.custom-box-content p:last-child { padding-bottom: 0; } div.footer-wrap div.custom-box-content strong { color: white; } div.custom-box-image { float: left; } /*========== Custom Posts ==========*/ .footer-wrap .widget-posts { margin: 0; padding: 0; } .footer-wrap .widget-posts li { padding-bottom: 10px; margin-bottom: 15px; min-height: 70px; position: relative; padding-left: 0; background: none; } .footer-wrap .widget-posts li .full-desc.description { margin-left: 0; width: auto; } .footer-wrap .widget-posts li:last-child { margin-bottom: 0; padding-bottom: 0; } .footer-wrap .widget-posts .image { width: 50px; position: absolute; top: 10px; left: 0; } .footer-wrap .widget-posts .image i { width: 50px; text-align: center; color: #888; font-size: 16px; padding: 20px 0; border: 1px solid rgba(255, 255, 255, 0.07); } .footer-wrap .widget-posts .image img { margin-right: 0px; display: block; border-radius: 0px; } .footer-wrap .widget-posts .description { float: left; margin-left: 65px; color: white; } .footer-wrap .widget-posts .description p { padding: 0; margin: 0; } .footer-wrap .widget-posts .description h5 { margin-bottom: 2px; margin-top: 1px; line-height: 1.2; } .footer-wrap .widget-posts .description h5 a { font-size: 14px; } /*========== Social Set ==========*/ .footer-wrap .fb-widget iframe { background: none; } .footer-wrap .social-set { margin-top: 0px; padding: 4px 0px; margin-bottom: 0px; } .footer-wrap .social-set { padding: 0; } .footer-wrap .social-set ul.social-icons li { margin-right: 4px; border: none; padding: 0; } .footer-wrap .social-set ul li span.visible-block { color: white; background: #66a7cf; } /*----- End of Footer Stylings ------*/ /*======================================== = BBPRESS Stylings = ========================================*/ .widget_display_search #bbp-search-form input[type=submit] { display: none; } div.bbp-logged-in a.user-submit { float: left; margin-right: 10px; border-radius: 0px; } div.bbp-logged-in h4 { display: inline-block; } div.bbp-logged-in h4 a { text-decoration: none; border-bottom: 1px dashed #66a7cf; color: #66a7cf; } div.bbp-logged-in h4:hover a { border-bottom: 1px solid #222222; color: #222222; } div.bbp-logged-in .logout-link { text-decoration: none; font-size: 10px; padding: 5px 10px; display: inline-block; margin-top: 10px; } div.bbp_widget_login fieldset { border: none; padding: 0; margin: 0; } div.bbp_widget_login legend { display: none; } div.bbp_widget_login label { font-size: 12px; margin-bottom: 5px; display: block; } div.bbp_widget_login input[type=text], div.bbp_widget_login input[type=password] { border: 1px solid rgba(0, 0, 0, 0.07); padding: 12px 10px; margin-bottom: 15px; } div.bbp-submit-wrapper button { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; outline: none; border: 1px solid #66a7cf; padding: 9px 22px 9px 22px; font-size: 12px; color: #66a7cf; display: inline-block; text-decoration: none; background: transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; outline: none; border: none; } div.bbp-remember-me { clear: both; } div.bbp-remember-me label { float: left; margin-top: -2px; margin-left: 6px; } div.bbp-remember-me input { float: left; } div.bbp-submit-wrapper { clear: both; } div.bbp-login-links { margin-top: 10px; } div.bbp-login-links a { display: inline-block; font-size: 11px; margin-right: 8px; border-bottom: 1px dashed #66a7cf; color: #66a7cf; text-decoration: none; } div.bbp-login-links a:hover { border-bottom: 1px solid #222222; color: #222222; } div.widget_display_stats dt { display: inline-block; width: 46%; margin-bottom: 10px; } div.widget_display_stats dd { display: inline-block; width: 46%; margin: 0 0 10px 0; } /*----- End of BBPRESS Stylings ------*/ /*----- End of Section comment block ------*/ .tp-rightarrow.default , .tp-leftarrow.default { padding-bottom: 15px; } ul.proxy-ff-dropdown { position:absolute; top:0; left:0; display: none; } ul.proxy-ff-dropdown li { padding: 6px 10px; list-style: none; margin: 0; }