Меню меняет цвет при наведении — как сделать?
-
Здравствуйте! Помогите пожалуйста настроить меню, чтобы при наведении мышки на раздел оно подсвечивалось фоновым цветом или другим цветом текста.
Ниже кидаю файл стилей… Если, кто может подправить меню, буду очень благодарен!/* ---------------------------------------------------- 1. Body Start -------------------------------------------------------- */ body { font-family: "Lato", sans-serif; background: #f7f7f7; } #wrapper { overflow: hidden; width: 100%; } #header { background: #353535; } #main-content-sticky { display: block; overflow: hidden; position: relative; } .overlay { height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: rgba(0, 0, 0, .2); } .preview.button { cursor: text; font-size: 18px; font-weight: bold; background-color: #00bcd4; margin-top: -40px; } /* ------------------------------------ 2. WORDPRESS CORE ------------------------------------ */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { max-width: 96%; /* Image does not overflow the content area */ padding: 10px 3px 10px; text-align: center; } .wp-caption img { max-width: 98%!important; height: auto; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none !important; margin: 0 !important; max-width: 570px; padding: 0 !important; } .wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .sticky {} .gallery-caption {} .bypostauthor {} .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /*---------------------------------------------------- 2. Header -------------------------------------------------------- */ /*------------------------- 2.1 LOGO ---------------------------*/ .logo-center { margin: 0 auto; justify-content: center; display: flex; text-align: center; } .logo-right{ justify-content: flex-end; display: flex; text-align: right; } .desc { text-align: left; color: #000; font-size: 14px; padding-bottom: 20px; padding-top: 10px; } #site-title { height: auto; background: no-repeat; line-height: 1.5; } #site-title .site-title { margin: 0; } #site-title a { color: #000; font-size: 40px; text-decoration: none; text-align: center; } #site-title a img { overflow: hidden; } /*------------------------- 2.2 HEADER info ---------------------------*/ .head-top-area { position: relative; padding: 10px; background-color: #ffffff; } .head-bottom-area { background: #f8cf27 none repeat scroll 0 0; transition: all 0.4s ease; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.12); } .logo-sticky #site-title a { line-height: 0; } .logo-sticky #site-title { padding-top: 3px; padding-bottom: 2px; } /*------------------------- 2.3 TOP BAR ---------------------------*/ #topmenu { background-color: #fff; border-bottom: 1px solid #ecede7; } #topmenu .top-bar, #topmenu .top-bar ul { padding: 5px 5px 5px 5px; background-color: transparent; } #topmenu .dropdown li { padding: 0px; } #topmenu .dropdown.menu a { padding: 0 25px 0 0; font-size: 14px; } #topmenu .top-bar .top-bar-left .menu a { padding: 7.5px 9px; font-size: 0.75rem; font-weight: 800; } /*------------------------- 2.4 DESKTOP MENU ---------------------------*/ .top-bar, .top-bar ul { background-color: transparent; } .hover-underline-menu { width: 100%; } .head-bottom-area.sticky { z-index: 20; } .head-bottom-area.is-stuck { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); } .head-bottom-area.animated { animation-duration: 0.5s; } .hover-underline-menu .desktop-menu .underline-from-center { position: relative; } .hover-underline-menu .desktop-menu .underline-from-center::after { content: ""; position: absolute; top: calc(100% - 0.125rem); border-bottom: 0.125rem solid #000000; border-top: 0.125rem solid #fefefe; left: 50%; right: 50%; transition: all 0.5s ease; } .hover-underline-menu .desktop-menu .underline-from-center:hover::after { left: 0; right: 0; transition: all 0.5s ease; } .no-js { display: none; } .head-bottom-area .top-bar { padding: 0; background: transparent; } .head-bottom-area .dropdown.menu a { padding: 18px 17px; } .is-dropdown-submenu { border: none; z-index: 20; } .dropdown.menu a, .dropdown .is-dropdown-submenu a { padding: 1rem 1rem } .dropdown.menu a { padding: 1.3rem 1rem } .dropdown li ul li { padding: 0px } .dropdown.menu>li.is-dropdown-submenu-parent>a::after { content: "\f107"; font-family: FontAwesome; border: none; margin-top: -7px; right: 18px; } .head-bottom-area .desktop-menu .is-dropdown-submenu-parent .is-dropdown-submenu li a:hover { -webkit-transition: background-color 300ms linear; -ms-transition: background-color 300ms linear; transition: background-color 300ms linear; } .head-bottom-area .animated { animation-duration: .7s; animation-fill-mode: both; } /*------------------------- 2.5 MOBILE MENU ---------------------------*/ .mobile-menu .is-stuck { top: 0; transition: top 1s ease-in-out; width: 100%; z-index: 999; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); } .multilevel-offcanvas { padding: 60px 30px; } .off-canvas-content .title-bar { padding-left: 20px; } .nav-bar .offcanvas-trigger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1.6rem; color: #fff; font-family: "Titillium Web", sans-serif; text-transform: uppercase; background-color: #566d7c; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; cursor: pointer; } .nav-bar .offcanvas-trigger .offcanvas-trigger-text { margin-right: 0.25rem; margin-top: 0.25rem; } .nav-bar .offcanvas-trigger:hover { background-color: #6b879a; } @media screen and (max-width: 39.9375em) { .nav-bar .offcanvas-trigger { padding: 0.9rem; } } .position-right { width: 270px; -ms-transform: translateX(270px); transform: translateX(270px); } .off-canvas { background-color: #232323; } .position-right.is-transition-push { box-shadow: none; } .js-off-canvas-overlay.is-overlay-fixed { position: fixed; background: rgba(95, 0, 255, 0.7); } .off-canvas>.menu { margin-bottom: 1rem; } .off-canvas .menu a { color: rgb(221, 51, 51); -webkit-transition: color .2s ease-in; transition: color .2s ease-in; font-weight: 600; } .off-canvas .menu a:hover { color: rgb(111, 49, 225); } .off-canvas .fa { color: #fff; } .off-canvas .is-accordion-submenu-parent>a::after { border-color: rgba(255, 255, 255, 0.6) transparent transparent; } .off-canvas .fa-window-close { font-size: xx-large; position: absolute; top: 10px; left: 10px; display: block; width: 40px; height: 40px; color: #f00; text-align: center; line-height: 40px; opacity: .5; } .nav-bar li { list-style: none; } .is-open+.off-canvas-content .hamburger .line:nth-child(1), .is-open+.off-canvas-content .hamburger .line:nth-child(3) { width: 12px; } .is-open+.off-canvas-content .hamburger .line:nth-child(1) { -webkit-transform: translateX(-5px) rotate(-45deg); transform: translateX(-5px) rotate(-45deg); } .is-open+.off-canvas-content .hamburger .line:nth-child(3) { -webkit-transform: translateX(-5px) rotate(45deg); transform: translateX(-5px) rotate(45deg); } .hamburger .line { width: 20px; height: 2px; background-color: #fff; display: block; margin: 3px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hamburger .line:last-child { margin-bottom: 0; } .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle)>a::after { content: "\f107"; font-family: FontAwesome; font-size: 18px; font-style: normal; font-weight: normal; text-decoration: inherit; width: auto; height: auto; border: none; margin-top: -7px; } .off-canvas .menu a { position: relative; display: block; width: 100%; border-top: 1px solid rgba(49, 49, 49, 0.06); line-height: 20px; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } .multilevel-offcanvas>ul>li:first-child>a { border-top: none; } .off-canvas.is-transition-overlap{z-index: 999999;} /*---------------------------------------------------- 3. Slider -------------------------------------------------------- */ .slick-slide{ line-height: 0; } #top-content { overflow: hidden; position: relative; } #top-content .slick-slider{ overflow: hidden; position: relative; height:0px; } #top-content .slick-slider.slick-initialized{ overflow: hidden; position: relative; height:auto; } .sliderlink{position: absolute;height: 100%;width: 100%;z-index: 2} #slider .projectitem { position: relative; cursor: pointer; } .slick-slider { opacity: 0; visibility: hidden; } .slick-slider.slick-initialized { opacity: 1; transition: opacity .3s ease-out; display: block; visibility:visible;} .slider-container { background-size: cover !important; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; overflow: hidden; min-height: 40vh; } @media screen and (min-width: 64em) { .slider-container { min-height: 600px; } } .slider-container .post-header-outer { padding: 20px 30px 30px 30px; top: auto; right: 0; bottom: 0; left: 0; z-index: 3; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .slider-container .post-cat-info { font-family: Dosis; text-transform: uppercase; letter-spacing: 0; font-weight: 700; font-style: normal; font-size: 12px; margin-bottom: 10px; overflow: hidden; } .slider-container .cat-info-el { color: #fff; } .slider-container .post-title { text-shadow: 1px 1px 2px rgba(28, 28, 28, .1); letter-spacing: 0; font-weight: 700; font-style: normal; color: #fff; } .slider-container .post-title a{text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);} .slider-container .post-meta-info { color: #eee; font-size: 14px; } .slider-container .post-meta-info .meta-info-author .author { font-size: 14px; font-weight: bolder; } .newspaperss-slider-nav { position: absolute; z-index: 2; padding: 0; width: 38px; height: 38px; -webkit-border-radius: 4px; border-radius: 4px; background-color: rgba(28, 28, 28, .5); color: #fff; text-align: center; font-size: 24px; line-height: 38px; opacity: .3; cursor: pointer; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .newspaperss-slider-nav:hover{opacity: .8;background-color: rgba(28, 28, 28, .9);} .newspaperss-slider-next { top: 50%; right: 20px; left: auto; margin-top: -19px; } .newspaperss-slider-prev { top: 50%; left: 20px; margin-top: -19px; } /*---------------------------------------------------- 3.1 Slider right post -------------------------------------------------------- */ .slider-right .post-wrap { position: relative; display: block; overflow: hidden; margin-right: auto; margin-left: auto; margin-bottom:0px; } .slider-right .thumbnail-post { z-index: 1; display: block; width: 100%; height: 100%; } .slider-right .post-header-outer { top: 0; right: auto; bottom: auto; left: 0; display: -webkit-flex; display: flex; padding: 0; width: 100%; height: 100%; text-align: center; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slider-right .post-header { margin: auto; max-width: 90%; pointer-events: auto; } .slider-right .post-title a{ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); color: #fff;} .slider-right .post-header .post-cat-info { margin-bottom: 10px; width: 100%; overflow: hidden; text-align: center; } .slider-right .post-header .post-cat-info a { color: #fff; } .slider-right .post-header .post-cat-info .cat-info-el { display: inline-block; float: none; margin: 0px; font-size: 12px; font-weight: 800; } .slider-right .post-thumb-overlay { top: 0; bottom: 0; background: inherit; background-color: rgba(0, 0, 0, .4); -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; } .slider-right .post-meta-info .meta-info-author .author{ color: #fff; } /*---------------------------------------------------- 4. Latest Post section -------------------------------------------------------- */ #news-latest-post { overflow: hidden; position: relative; } .card { margin: 0px; border: none; background: transparent; } .lates-post-warp { width: 50%; display: block; padding-right: .9375rem; padding-left: .9375rem; float: left; padding-bottom: 20px; } .no-homesidebar .lates-post-warp { width: 33%; display: block; padding-right: .9375rem; padding-left: .9375rem; float: left; padding-bottom: 20px; } .block-header-wrap { position: relative; display: block; border-bottom: 1px solid rgba(28, 28, 28, .07); text-transform: uppercase; letter-spacing: 0; font-weight: 400; } .block-title h3 { display: inline-block; border-bottom: 3px solid; margin-bottom: 0px; font-weight: 400; font-size: x-large; } .block-title { position: relative; display: inline-block; line-height: 0; } .block-header-inner { position: relative; display: block; } .block-content-wrap { position: relative; display: block; margin-bottom: 15px; background-color: #fff; webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } .post-wrap-big { margin-bottom: 25px; background: transparent; box-shadow: none; overflow: hidden; position: relative; } .post-wrap-big .post-header-outer { top: auto; right: 0; bottom: 0; left: 0; z-index: 3; padding: 15px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .post-wrap-big .post-cat-info { text-transform: uppercase; font-weight: 400; font-style: normal; display: inline-block; } .post-wrap-big .post-title a { letter-spacing: 1px; } .post-list { display: block; overflow: hidden; padding: 5px 15px 10px 15px; } .post-list .post-thumb-outer { float: left; margin-bottom: 0; max-width: 110px; width: 110px; height: 85px; } .post-list .post-body { margin-left: 125px; padding: 0; } .post-list .post-title a { color: #282828; } .post-list .post-meta-info .meta-info-el { color: #282828; } .lates-post-warp .button.secondary { background-color: #767676; color: #fefefe; margin-bottom: 0px; width: 100%; margin-top: 25px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; pointer-events: auto; } .lates-post-warp .button.secondary:hover { background-color: #2f2f2f; } .block-content-wrap .post-title.is-lite a:hover { color: #dd3333 } .latest-post-news .block-content-inner .post-list img{ width: 100%; -o-object-fit: cover; object-fit: cover; height: 85px; } .widget_recent-post-single .block-content-recent .post-list img{ width: 100%; -o-object-fit: cover; object-fit: cover; height: 85px; } .post-wrap-big .post-thumb img { min-width: 370px; width: 100%; -o-object-fit: cover; object-fit: cover; object-position: center center; height: 350px; } /*---------------------------------------------------- 4.1 latest post blog style -------------------------------------------------------- */ .latest_post_blog_list{ display: inline-block; width: 100%; overflow: hidden; } .lates-post-blog { margin-bottom:0px; } .no-homesidebar .lates-post-blog { display: block; width: 80%; overflow: hidden; } .lates-post-blog .block-content-wrap { margin-bottom: 30px; margin-right: 5px; margin-left: 5px; } .lates-post-blog .post-body { padding: 40px 30px 19px 10px; } .post-list-content h3{margin-bottom: 0.5rem;} .post-list-content .post-cat-info { display: inline-block; overflow: hidden; } .post-list-content .post-cat-info a { color: #fff; } .post-list-content .post-title { margin-top: 10px; } .post-list-content .post-title a { display: block; color: #282828; } .post-list-content .post-meta-info { margin-top: 10px; padding-left: 10px; border-left: 5px solid rgba(28, 28, 28, .07); } .post-list-content .post-meta-info a { color: #282828; font-weight: 700; } .no-left-padding .lates-post-blog { padding-left: 0; } .post-list-content .meta-info-date { color: #282828; } /*---------------------------------------------------- 4.2 latest post blog big style -------------------------------------------------------- */ .lates-post-blogbig{ /* display: inline-block;*/ } .lates-post-blogbig .block-content-wrap { margin-bottom: 30px; box-shadow: none; background: none; } .lates-post-blogbig .thumbnail-resize img{ width: 100%; height: 400px; object-fit: cover; object-position: center; } .lates-post-blogbig .post-excerpt p { color: #000; } .post-excerpt p { color: #000; } .post-thumb-outer { position: relative; display: block; } .lates-post-blogbig .post-body { position: relative; z-index: 2; display: block; margin-top: -90px; margin-right: 40px; margin-left: 40px; padding: 30px; background-color: #fff; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } .lates-post-blogbig .post-body-noimg { margin-top: 0px; } /*---------------------------------------------------- latest post layout 3 -------------------------------------------------------- */ .layout3-post{ box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); background-color: #3b3b3b; color: #333333; margin-bottom: 40px; position: relative; z-index: 1; border: 0 none; -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; } .layout3-post .card-title a { margin: 5px 0 0 0; color: #d2cac4; } .layout3-post .card-section p { color: #d2cac4; margin-bottom: 5px; margin-top: 8px; } .layout3-post .thumbnail-resize img{ max-width: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; height: 250px; object-position: center center; } .post-cat-info.is-absolute { bottom: 15px; left: 15px; margin: 0; padding: 0; } .layout3-post .card-divider span { margin: 0 0 0 .75em; font-size: .75em; } .layout3-post .card-divider span a { color: #8f8f8f; } .layout3-post .card-divider .mate-info-date-icon:after { content: "\2044"; margin-left: .75em; color: silver; } .layout3-post .card-divider { padding: 0; background: transparent; padding-bottom: .8em; padding-left: .5em; } /*---------------------------------------------------- Recent post widget style 2 -------------------------------------------------------- */ .block-content-recent{ position: relative; display: block; margin-bottom: 5px; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); padding-top: 10px; } .block-content-recent .card-section .post-list { display: block; overflow: hidden; padding: 5px 0px 10px 0px; } .block-content-recent .card-section .post-list { display: block; overflow: hidden; padding: 5px 0px 10px 0px; } /*---------------------------------------------------- sidebar common 5 -------------------------------------------------------- */ .widget-title { position: relative; display: block; overflow: hidden; margin-bottom: 25px; border-bottom: 1px solid rgba(28, 28, 28, .07); color: #444; font-weight: 600; font-size: 14px; } .top-footer-wrap .widget-title { margin-bottom: 10px; } .widget-title h3 { display: inline-block; border-bottom: 3px solid; line-height: 37px; font-size: 18px; margin-bottom: 0px; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget ul li { list-style-type: none; margin: 10px 0; } .widget li a { color: #999999; } .sidebar-inner .widget_archive ul li, .sidebar-inner .widget_categories ul li, .sidebar-inner .widget_pages ul li, .sidebar-inner .widget_nav_menu ul li, .sidebar-inner .widget_portfolio_category ul li { padding: 10px 0; border-bottom: 1px solid #eee; margin: 0px; display: block; } .sidebar-inner .widget_archive ul li:last-child, .sidebar-inner .widget_categories ul li:last-child, .sidebar-inner .widget_pages ul li:last-child, .sidebar-inner .widget_nav_menu ul li:last-child, .sidebar-inner .widget_portfolio_category ul li:last-child { border: none; } .sidebar-inner .widget_archive ul li a, .sidebar-inner .widget_categories ul li a, .sidebar-inner .widget_pages ul li a, .sidebar-inner .widget_nav_menu ul li a, .sidebar-inner .widget_portfolio_category ul li a { line-height: 20px; padding: 5px 0; font-size: 13px; color: #665665; } .widget_wrap .menu { display: block; } .sidebar-inner .widget_archive ul li a:before, .sidebar-inner .widget_categories ul li a:before, .sidebar-inner .widget_pages ul li a:before, .sidebar-inner .widget_nav_menu ul li a:before, .sidebar-inner .widget_portfolio_category ul li a:before { content: "\f061"; font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; margin-right: 15px; display: inline-block; vertical-align: baseline; color: #da1c36; } .tagcloud a { font-size: 12px !important; text-transform: uppercase; line-height: 20px; margin: 0 6px 6px 0; padding-left: 12px; padding-right: 12px; padding-top: 10px; padding-bottom: 10px; border-radius: 0; background: #fff; color: #665; display: inline-block; } .tagcloud a:hover { text-decoration: none; background: #da1c36; color: #fff; border-color: #da1c36; } .sidebar-inner { display: block; margin-bottom: 30px; } .sidebar-inner .widget_wrap { position: relative; display: block; margin-bottom: 20px; } .sidebar-inner .lates-post-blog { margin: 0px; padding: 0px; } .sidebar-inner .lates-post-warp { width: 100%; padding: 0; } .sidebar-inner .sidebar-homepagesidebar { width: 100% !important; } .sidebar-inner .lates-post-blog .block-content-wrap { margin: 0; margin-bottom: 20px; } .home-sidebar .block-content-wrap .post-body, .sidebar-inner .block-content-wrap .post-body { padding-left: 20px; padding-right: 10px; padding-top: 19px; } .sidebar-inner .lates-post-blogbig .post-body { margin-right: 10px; margin-left: 10px; } .sidebar-inner .lates-post-blogbig .post-list-content .post-title a { font-size: 24px; } .sidebar-inner .object-fit-postimg { height: auto; } .sidebar-inner .gallery-item,.top-footer-wrap .gallery-item{ float: left; padding: 2px; } .sidebar-inner .gallery-columns-1 .gallery-item{width: 100%;} .sidebar-inner .gallery-columns-3 .gallery-item {width: 33%;} .sidebar-inner .gallery-columns-2 .gallery-item{width: 50%;} .sidebar-inner .gallery-columns-4 .gallery-item{width: 25%;} /*---------------------------------------------------- sidebar Home 5.1 -------------------------------------------------------- */ .home-sidebar .lates-post-warp { width: 100%; } .home-sidebar .widget { position: relative; display: block; margin-bottom: 15px; } .home-sidebar { display: block; overflow: hidden; position: relative; } .home-sidebar .sidebar-homepagesidebar { width: 100% !important; } /*---------------------------------------------------- blog,category,archive,tag -------------------------------------------------------- */ #blog-content { display: block; position: relative; overflow: hidden; padding-top: 10px; padding-bottom: 0px; } #sub_banner { position: relative; height: auto; } #sub_banner .header-image-container { z-index: 1; } .blog .breadcrumb-wraps { display: none; } .header-image-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } .heade-content { position: relative; display: block; z-index: 3; padding-top: 50px; padding-bottom: 50px; } .heade-content h1 { margin: 0; color: #fff; font-size: 32px; text-transform: capitalize; } #blog-content .sidebar-inner { margin-top: 30px; } #blog-content .pagination { width: 80%; margin-right: auto; margin-left: auto; } #blog-content .navigation .nav-links { margin: 1em auto 1em; text-align: center; width: 100%; max-width: none; display: inline-block; border-radius: 0.25em; border: 1px solid #2fc2e3; background-color: #fff0; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 5px 0 rgba(96, 92, 92, 0.64); } #blog-content .navigation .nav-links a { /* hide numbers on small devices */ display: none; margin: 0 .2em; } #blog-content .navigation .nav-links a.page-numbers { /* make sure prev next bblog-buttons are visible */ display: inline-block; } #blog-content .navigation .nav-links a, #blog-content .navigation .nav-links span { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* use padding and font-size to change bblog-buttons size */ padding: .6em .8em; font-size: 14px; color: #ffffff; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #blog-content .navigation .nav-links a.disabled { /* bblog-button disabled */ color: rgba(46, 64, 87, 0.4); pointer-events: none; } #blog-content .navigation .nav-links a.disabled::before,#blog-content .navigation .nav-links a.disabled::after { opacity: .8; } #blog-content .navigation .nav-links .current { /* selected number */ background-color: #fbb5be; color: #ffffff; pointer-events: none; } @media only screen and (min-width: 768px) { #blog-content .navigation .nav-links a { display: inline-block; } } @media only screen and (min-width: 1170px) { #blog-content .navigation .nav-links { margin: 1em auto 1em; } } #blog-content .navigation .nav-links:after { content: ""; display: table; clear: both; } #blog-content .navigation .nav-links a { margin: 0; border-right: 1px solid #e6e6e6; } #blog-content .navigation .nav-links a:last-of-type { border-right: none; } #blog-content .navigation .nav-links a,#blog-content .navigation .nav-links span { border-radius: 0; padding: .8em 1em; border: none; } #blog-content .navigation .nav-links .prev { border-radius: 0.25em 0 0 0.25em; } #blog-content .navigation .nav-links .next { border-radius: 0 0.25em 0.25em 0; } #blog-content .navigation .nav-links .next:after { content: "\f105"; font-family: FontAwesome; display: table; clear: both; float: right; padding-left: 5px; } #blog-content .navigation .nav-links .prev:after { content: "\f104"; font-family: FontAwesome; display: table; clear: both; float: left; padding-right: 5px; } #blog-content .navigation .nav-links .page-numbers.prev { float: left; } #blog-content .navigation .nav-links .page-numbers.next { float: right; } #blog-content .navigation .nav-links { display: block; overflow: hidden; } /*---------------------------------------------------- search bar styling -------------------------------------------------------- */ .widget_search { display: block; overflow: hidden; } .widget_search label { display: block; float: left; width: 75%; } .widget_search input[type=search] { padding: 8px 15px; height: 50px; border: none; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; color: #282828; background-color: rgba(255, 255, 255, 0.98); } .widget_search input[type=search]:focus { box-shadow: inset 0 1px 2px rgba(10, 10, 10, .1); } .widget_search .screen-reader-text { display: none; } .widget_search .search-submit { position: relative; display: block; float: left; width: 25%; height: 50px; border: 0; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; background-color: #55acee; color: #fff; font-weight: 700; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; cursor: pointer; } .widget_search .search-submit:hover { background-color: #507a9a; } /****** search bar Header styling *******/ .search-wrap .search-submit { position: absolute; top: 10px; right: 20px; opacity: 0; width: 30px; cursor: pointer; z-index: 10; } .search-wrap .fa-search { position: absolute; top: 26%; padding-right: 10px; right: 40px; font-size: 24px; border-right: 1px solid; height: auto; color: white; opacity: 0; } .search-wrap.open .fa-search { opacity: 1; } .search-wrap .search-field { border: none; box-shadow: none; max-width: 100%; margin: 0; border-radius: 20px; background-color: transparent; height: auto; height: 40px; padding-top: 0px; padding-bottom: 0px; font-size: 16px; font-weight: 700; } .search-wrap .screen-reader-text { display: none; } .search-wrap .search-form input[type=search]:focus { border: none; background: transparent; } .search-wrap { position: absolute; display: block; z-index: 1; width: 16px; height: 16px; margin-left: 0; padding: 0; border: 2px solid white; border-radius: 20px; -moz-transition: all 0.25s ease 0.3s; -o-transition: all 0.25s ease 0.3s; -webkit-transition: all 0.25s ease; -webkit-transition-delay: 0.3s; transition: all 0.25s ease 0.3s; right: 0px; margin-right: 30px; margin-top: -4px; } .search-wrap:before { top: 90%; left: 90%; width: 13px; height: 1.6px; background-color: white; border-radius: 1px; -moz-transition: width 0.15s ease 0.55s; -o-transition: width 0.15s ease 0.55s; -webkit-transition: width 0.15s ease; -webkit-transition-delay: 0.55s; transition: width 0.15s ease 0.55s; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transform-origin: top left; -ms-transform-origin: top left; -webkit-transform-origin: top left; transform-origin: top left; } .search-wrap label { width: 100%; height: 100%; padding: 0 30px 0 0px; font-size: 14px; line-height: 38px; opacity: 0; background-color: transparent; -moz-transition: opacity 0.15s ease; -o-transition: opacity 0.15s ease; -webkit-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } .eks { display: block; position: absolute; opacity: 0; top: 50%; right: 0; z-index: 10; width: 30px; height: 30px; cursor: pointer; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .eks:before, .eks:after { right: 5px; height: 2px; width: 2px; border-radius: 1px; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .eks:before { top: 0px; background-color: white; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; transform-origin: top right; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .eks:after { bottom: 0px; background-color: white; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -webkit-transform-origin: bottom right; transform-origin: bottom right; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } .search-wrap.open { width: 400px; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; height: 96%; background-color: #535656; border: 2px solid #a5a5a5; margin-top: 0px; } .search-wrap.open:before { width: 0px; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } .search-wrap.open label { opacity: 1; -moz-transition-delay: 0.15s; -o-transition-delay: 0.15s; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .open .eks { opacity: 1; } .search-wrap.open .eks:before, .search-wrap.open .eks:after { width: 15px; right: 12px; } .search-wrap.open .eks:before { top: 9px; -moz-transition-delay: 0.25s; -o-transition-delay: 0.25s; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .search-wrap.open .eks:after { bottom: 9px; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .search-wrap:before, .eks:before, .eks:after { content: ""; position: absolute; display: block; } .multilevel-offcanvas .search-wrap { width: 20px; height: 20px; margin-left: 0; padding: 0; border: 2px solid #171616; margin-right: 30px; margin-top: 0px; top: 20px; } .multilevel-offcanvas .search-wrap:before { border: 2px solid #171616; } .multilevel-offcanvas .search-wrap.open { width: 95%; height: 45px; background-color: #535656; border: 2px solid #a5a5a5; margin-top: -10px; right: -20px; border-radius: 8px; } .multilevel-offcanvas .search-wrap .search-submit { position: absolute; top: 10px; right: 50px; opacity: 0; width: 30px; cursor: pointer; z-index: 10; } /*---------------------------------------------------- Footer -------------------------------------------------------- */ #footer .sticky-container { z-index: -1; } .footer-wrap { position: relative; display: block; } .footer-copyright-wrap { position: relative; z-index: 1; display: block; padding: 15px; } .footer-copyright-text{ font-size: 14px; line-height: 1.5; font-weight: bold; } .footer-copyright-wrap p { color: #ddd; font-size: 13px; line-height: 1.6; } .footer-copyright-wrap .theme-by{ font-weight: bold; } .top-footer-wrap { display: block; overflow: hidden; background-color: #1b1a1a; padding-top: 30px; padding-bottom: 30px; color: #fff; } .top-footer-wrap .sidebar-footer { padding-right: 30px; padding-left: 30px; padding-bottom: 30px; } .top-footer-wrap .lates-post-blog { margin-top: 0; } .top-footer-wrap .sidebar-homepagesidebar { width: 100%; } .top-footer-wrap .lates-post-warp { width: 100% } .top-footer-wrap .lates-post-blogbig .post-body { margin-top: -20px; margin-right: 10px; margin-left: 10px; padding: 15px; } #footer .defult-text { padding: 0; margin: 0; } #footer .defult-text a { color: #fff; } .footer-copyright-text a, .footer-copyright-text p, .footer-copyright-text { margin-bottom: 0; } .top-footer-wrap .block-title h3 { font-size: 18px; } #footer .lates-post-blog .block-content-wrap{ margin-top: 20px; } #footer .lates-post-blog .post-body { padding: 10px ; } .top-footer-wrap .block-content-recent { background-color: transparent; } .top-footer-wrap .block-content-recent .card-section { padding: 0px; } /*---------------------------------------------------- Single Post -------------------------------------------------------- */ .single-post-outer { display: block; } .single-post-feat-bg-outer { position: relative; margin: 0; padding: 0; } .single-post-thumb-outer { position: relative; display: block; text-align: center; margin-top: 0; margin-bottom: 0; } .single-post-feat-bg-outer .post-thumb { display: block; max-height: 500px; width: 100%; } .single-post-feat-bg-outer .post-thumb img { display: inline-block; max-height: 500px; height: 100%; -o-object-fit: cover; object-fit: cover; max-width: 100%; width: 100%; } .single-wrap { padding-top: 20px; padding-bottom: 20px; } .single-post-content-wrap { position: relative; } .single-post-header { position: relative; display: block; padding-top: 0px; padding-bottom: 0px; padding-right: 10px; padding-left: 20px; border-bottom: 0.5px solid rgba(28, 28, 28, .05); background: #3b3b3b; padding-top: 20px; } .single-post-top { position: relative; margin-bottom: 20px; border-bottom: 1px solid rgba(28, 28, 28, .07); font-size: 12px; color: #999; } .breadcrumb-wrap { display: block; width: 100%; color: #777; font-size: 12px; line-height: 20px; overflow: hidden; } .single-post-top .breadcrumb-wrap .bread-current { color: #989898; } .post-cat-info { text-transform: uppercase; font-weight: 700; font-size: 11px; display: inline-block; } .single-post-content-wrap .single-title h1 { color: #d2cac4; font-size: 22px; } .single-post-header .post-meta-info { margin-top: 10px; } .post-meta-info .meta-info-el { margin-right: 10px; } .single-post-content-wrap .post-meta-info .meta-info-el a{ color: #737272; } .meta-info-el.meta-info-author img { display: inline; margin-right: 7px; width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: middle; } .meta-info-el i { margin-right: 5px; } .single-content-wrap { position: relative; display: block; padding: 20px 20px 30px 20px; background: #3b3b3b; overflow: hidden; } .single-entry{ display: block; overflow:hidden; } .single-post-tag{ display: block; overflow:hidden; margin-top: 20px; } .single-post-tag .single-tag-text { margin-right: 10px; vertical-align: middle; line-height: 26px; } .single-post-tag a { display: inline-block; margin-right: 5px; padding: 0 15px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: #6f31e1; vertical-align: middle; text-align: center; font-style: normal; line-height: 26px; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; color: #ffffff; } /*---------------------------------------------------- single post box related -------------------------------------------------------- */ .single-post-box-related { margin-top: 30px; } .single-post-box-related .post-wrap{ margin-right: 20px; margin-bottom: 20px; margin-left: 0px; } .single-post-box-related .block-content-wrap { position: relative; display: block; margin-bottom: 15px; background: transparent; box-shadow: none; } .single-post-box-related .post-wrap .post-header-outer { top: auto; right: 0; bottom: 0; left: 0; z-index: 3; padding: 15px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .post-image-warp { display: block; overflow: hidden; position: relative; } .thumbnail-post { position: relative; display: block; } .object-fit-postimg_250.noimage{ background: #3a3a3a; } .single-box-author { position: relative; display: block; margin: 0; padding: 0; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(28,28,28,.05); -wekit-box-shadow: 0 1px 3px 0 rgba(28,28,28,.05); margin-top: 30px; padding: 20px; } .author-thumb-wrap{ text-align: center; } .single-box-author .author-thumb-wrap img { overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .author-content-wrap .author-title h3 { font-weight: inherit; font-size: 16px; line-height: 20px; } .author-description { font-size: .95em; line-height: 1.6; } .single-box-author .author-links .bubbly-button{ padding: 5px 10px; margin-top: 20px; } /*---------------------------------------------------- comment box -------------------------------------------------------- */ .box-comment-content .comments-area { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(28, 28, 28, .07); } .comment-respond { display: none; margin-top: 30px; opacity: 0; } .block-title-wrap { text-align: center; display: block; } .comment-title h2 { margin-bottom: 20px; color: #55acee; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 24px; line-height: 28px; } .comment-list { margin-top: 30px; margin-right: 0; margin-left: 0; list-style: none; } .comment-list li.comment { list-style: none; } .comment-list .comment-body { position: relative; display: block; overflow: hidden; margin-top: 35px; } .comment-list .comment-author img { display: block; float: left; margin-top: 0!important; margin-right: 10px; margin-bottom: 0; width: 45px!important; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .comment-author.vcard .fn, .comment-author.vcard .fn a { color: #282828; text-transform: uppercase; font-size: 12px; } .comment-author.vcard .says { display: none; } .comment-metadata { display: block; float: left; padding-top: 2px; color: #999; font-style: italic; font-size: 12px; line-height: 1; } .comment-metadata a:not(.comment-edit-link) { color: #999!important; } .comment-list .comment-content { position: relative; display: block; float: left; clear: both; margin-top: 15px; padding: 20px 15px; width: 100%; background-color: #fafafa; box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05); color: #999; -wekit-box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05); } .comment-list .comment-reply-link { position: absolute; top: 0; right: 0; display: block; padding: 3px 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #55acee; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; line-height: 9px; } .comment-list .comment-content:before { position: absolute; top: -6px; left: 15px; z-index: 10; border-right: 5px solid transparent; border-bottom: 6px solid #f3f3f3; border-left: 5px solid transparent; content: ''; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .comment-list .comment-content p:last-child { margin-bottom: 0; } .comment-list .comment-content p { margin-bottom: 10px; color: #444; font-size: .9em; line-height: 1.6; } .box-comment-content .entry ol { margin: 0; } .comment-list .edit-link { display: inline-block; margin-left: 5px; color: #55acee } .comment-list .edit-link:before { content: '(' } .comment-list .edit-link:after { content: ')' } #cancel-comment-reply-link { margin-left: 7px; color: #999; letter-spacing: 0; font-weight: 400; font-size: 12px } #cancel-comment-reply-link:hover { color: #282828; text-decoration: underline } .depth-2 .comment-body { margin-left: 20px } .depth-3 .comment-body { margin-left: 40px } .depth-4 .comment-body { margin-left: 60px } .depth-5 .comment-body { margin-left: 80px } h2.comment-reply-title { margin-bottom: 10px; color: #55acee; text-transform: uppercase; font-weight: 700; font-size: 18px; line-height: 24px; } .comment-form textarea { display: block; margin-top: 30px; width: 100%; padding: 20px; outline: none!important; box-shadow: none; border: 1px solid rgba(28, 28, 28, .07); color: #282829; vertical-align: middle; text-align: left; font-weight: 400; font-size: 14px; line-height: 1.5; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .comment-form input { margin-top: 15px; } .comment-form input[type="text"], .comment-form input[type="tel"], .comment-form input[type="email"], .comment-form [type=url], .comment-form [type=password] { display: block; padding: 10px 20px; width: 50%; white-space: nowrap; outline: 0; outline: none!important; border: 1px solid #eee; box-shadow: none; vertical-align: middle; text-align: left; font-weight: 400; font-size: 14px; line-height: 1.3; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out; } .box-comment-btn-wrap { display:block; position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-top: 30px; padding-bottom: 30px; border-top: 1px solid rgba(28, 28, 28, .07); border-bottom: 1px solid rgba(28, 28, 28, .07); margin-top: 20px; } .bubbly-button { display: inline-block; font-size: 0.9rem; padding: 12px 28px; -webkit-appearance: none; appearance: none; background-color: #ff0081; color: #fff; border-radius: 4px; border: none; cursor: pointer; position: relative; transition: transform ease-in 0.1s, box-shadow ease-in 0.25s; box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5); z-index: 2; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .latest-post-news .viewall-text .bubbly-button{ width: 100%; border-radius: 0px; margin-top: 20px; } .bubbly-button:focus { outline: 0; } .bubbly-button:before, .bubbly-button:after { position: absolute; content: ''; display: block; width: 140%; height: 100%; left: -20%; z-index: -1000; transition: all ease-in-out 0.5s; background-repeat: no-repeat; } .bubbly-button:before { display: none; top: -75%; background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%); background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; } .bubbly-button:after { display: none; bottom: -75%; background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%); background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; } .bubbly-button:active { transform: scale(0.9); background-color: #e60074; box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2); } .bubbly-button.animate:before { display: block; animation: topBubbles ease-in-out 0.75s forwards; } .bubbly-button.animate:after { display: block; animation: bottomBubbles ease-in-out 0.75s forwards; } @keyframes topBubbles { 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; } 50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; } 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } @keyframes bottomBubbles { 0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; } 50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; } 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } /*---------------------------------------------------- single page navigation -------------------------------------------------------- */ .single-nav { display: block; overflow: hidden; margin-top: 30px; padding: 30px; position: relative; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05); -wekit-box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05); } .single-nav .nav-left a { color: #282828; font-size: 13px; padding-right: 20px; border-right: 1px solid rgba(0, 0, 0, .02); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: right; transition: all 0.2s ease-in-out; } .single-nav .nav-left a:hover, .single-nav .nav-right a:hover { color: #4387d2 } .single-nav a:hover>.newspaper-nav-icon { background-color: #4387d2; color: #fff; } .single-nav .nav-right a { color: #282828; font-size: 13px; margin-left: -1px; padding-left: 20px; border-collapse: collapse; border-left: 1px solid rgba(0, 0, 0, .04); text-align: right; float: right; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .nav-left-icon { float: left; margin-right: 15px; } .nav-right-icon { float: right; margin-left: 15px; padding-left: 1px; } .nav-left-link { float: left; text-align: left; display: block; overflow: hidden; max-width: 75%; } .nav-right-link { float: right; text-align: right; display: block; overflow: hidden; max-width: 75%; } .single-nav a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; margin: 0; padding: 0; } .pagination li a { margin-right: 4px; margin-left: 4px; padding: .3875rem .825rem; -webkit-border-radius: 4px; border-radius: 4px; background-color: #1779ba; color: #fff; text-align: center; font-size: 14px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .pagination .current { padding: .3875rem .825rem; background: #1779ba; color: #fefefe; cursor: default; -webkit-border-radius: 4px; border-radius: 4px; opacity: 0.8; } .page-navigation { display: block; clear: both; margin-top: 10px; margin-bottom: 20px; padding: 0 15px; width: 100%; height: 34px; text-align: center; } .single-post-thumb-outer .post-thumb:after { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; /*background: rgba(28, 28, 28, .6);*/ content: ''; opacity: 1; } /*=============================================>>>>> = gallery style = ===============================================>>>>>*/ .gallery { width: 100%; display: inline-block; } .gallery-item { float: left; padding: 10px; } /*---------------------------------------------------- Single Page -------------------------------------------------------- */ #content-page { display: block; } .content-page { margin-top: 40px; margin-bottom: 40px; } .page_content { padding-top: 0px; padding-bottom: 0px; padding-right: 20px; padding-left: 20px; display: block; overflow: hidden; background-color: #fff; } /*---------------------------------------------------- Page 404 -------------------------------------------------------- */ .section-404 { display: block; position: relative; overflow: hidden; background: #fff; padding-top: 30px; padding-bottom: 0px; } .hs-line-13 { margin-top: 0; position: relative; font-size: 96px; font-weight: 400; line-height: 1; text-transform: uppercase; margin-bottom: 10px; } .hs-line-4 { margin-top: 0; position: relative; font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; color: rgba(49, 46, 46, 0.85); } .hs-wrap { max-width: 570px; margin: 0 auto; padding: 47px 30px 53px; position: relative; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(82, 82, 82, 0.5); } .local-scroll .search-submit { position: relative; display: block; float: none; width: 50%; height: 50px; border: 0; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; background-color: #55acee; color: #fff; font-weight: 700; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; cursor: pointer; margin-right: auto; margin-left: auto; } @media print, screen and (min-width: 40em) { .section-404 .grid-y.medium-grid-frame { width: auto; overflow: hidden; position: relative; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-align: stretch; align-items: stretch; height: 60vh; } } /*---------------------------------------------------- Social style #1 -------------------------------------------------------- */ .social-btns .btn, .social-btns .btn:before, .social-btns .btn .fa { transition: all 0.35s; transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59); } .social-btns .btn:before { top: 90%; left: -110%; } .social-btns .btn .fa { transform: scale(0.8); } .social-btns .btn.facebook:before { background-color: #3b5998; } .social-btns .btn.facebook .fa { color: #3b5998; } .social-btns .btn.twitter:before { background-color: #3cf; } .social-btns .btn.twitter .fa { color: #3cf; } .social-btns .btn.google:before { background-color: #dc4a38; } .social-btns .btn.google .fa { color: #dc4a38; } .social-btns .btn.dribbble:before { background-color: #f26798; } .social-btns .btn.dribbble .fa { color: #f26798; } .social-btns .btn.skype .fa { color: #00aff0; } .social-btns .btn.skype:before { background-color: #00aff0; } .social-btns .btn.pinterest .fa { color: #cb2027; } .social-btns .btn.pinterest:before { background-color: #cb2027; } .social-btns .btn.linkedin .fa { color: #007bb6; } .social-btns .btn.linkedin:before { background-color: #007bb6; } .social-btns .btn.youtube .fa { color: #bb0000; } .social-btns .btn.youtube:before { background-color: #bb0000; } .social-btns .btn.vimeo .fa { color: #1ab7ea; } .social-btns .btn.vimeo:before { background-color: #1ab7ea; } .social-btns .btn.tumblr .fa { color: #32506d; } .social-btns .btn.tumblr:before { background-color: #32506d; } .social-btns .btn.instagram .fa { color: #bc2a8d; } .social-btns .btn.instagram:before { background-color: #bc2a8d; } .social-btns .btn.flickr .fa { color: #bc2a8d; } .social-btns .btn.flickr:before { background-color: #bc2a8d; } .social-btns .btn.vk .fa { color: #45668e; } .social-btns .btn.vk:before { background-color: #45668e; } .social-btns .btn.xing .fa { color: #026466; } .social-btns .btn.xing:before { background-color: #026466; } .social-btns .btn:focus:before, .social-btns .btn:hover:before { top: -10%; left: -10%; } .social-btns .btn:focus .fa, .social-btns .btn:hover .fa { color: #fff; transform: scale(1); } .social-btns { margin: auto; font-size: 0; text-align: center; top: 0; bottom: 0; left: 0; right: 0; } .social-btns .btn { display: inline-block; background-color: #fff; width: 30px; height: 30px; line-height: 30px; margin: 0 5px; text-align: center; position: relative; overflow: hidden; border-radius: 28%; box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); opacity: 0.99; } .social-btns .btn:before { content: ''; width: 120%; height: 120%; position: absolute; transform: rotate(45deg); } .social-btns .btn .fa { font-size: 26px; vertical-align: middle; } /*=============================================>>>>> = featured = ===============================================>>>>>*/ .featured-section{ margin-bottom: 20px; } .slider-post-wrap { position: relative; display: none; overflow: hidden; background-color: transparent; opacity: 0 } .slider-post-wrap.featured .slider-content2 { position: absolute; top: 50%; left: 0; text-align: center; width: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-post-wrap.featured .entry-meta { display: inline-block; padding: 40px 10px; width: calc(100% - 50px); background: rgba(0, 0, 0, .5); } .slider-post-wrap.featured .entry-meta h3{ font-size: 16px; } .slider-post-wrap.featured .entry-meta h3 a{ color: #fff; } .wrap-slider { position: relative; overflow: hidden; } .featured .slider-thum { height: 300px; } .slider-thum .img-slider{ width: 100%; -o-object-fit: cover; object-fit: cover; object-position: center center; height: 300px; } .featured .slider-title{ color: #fff; padding: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline-block; background-color: transparent; width: 100%; font-weight:bold; } /*---------------------------------------------------- common css -------------------------------------------------------- */ .thumbnail-resize img { -webkit-filter: brightness(100%); -moz-filter: brightness(100%); -o-filter: brightness(100%); -ms-filter: brightness(100%); filter: brightness(100%); -webkit-transition: all 0.8s; } .thumbnail { margin: 0; border: none; } .block-content-wrap:hover .thumbnail-resize a img { -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); filter: brightness(50%); } .layout3-post:hover .thumbnail-resize a img { -webkit-filter: brightness(20%); -moz-filter: brightness(20%); -o-filter: brightness(20%); -ms-filter: brightness(20%); filter: brightness(20%); } .post-wrap { position: relative; display: block; overflow: hidden; margin-right: 15px; margin-bottom: 30px; margin-left: 15px; background-color: #fff; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } .cat-info-el { position: relative; display: block; float: left; margin-top: 1px; margin-bottom: 1px; margin-left: 5px; padding: 2px 12px; -webkit-border-radius: 4px; border-radius: 4px; background-color: #55acee; color: #fff; text-shadow: none; line-height: 20px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; pointer-events: auto } .post-cat-info a { color: #fff; } .post-title a { display: block; margin: 0; padding: 0; -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; transition: color .3s ease-in-out } .post-title { margin-bottom: 0px; } .post-title.is-size-1 { font-weight: 700; } .post-title.is-size-2 { font-weight: 700; } .post-title.is-size-3 { font-size: 24px; font-weight: 600; } .post-title.is-size-4 { font-size: 18px; font-weight: 600; } .post-title.is-size-5 { font-size: 14px; font-weight: 600; } .post-title.is-size-6 { font-size: 13px; font-weight: 600; } .meta-info-el { display: inline; vertical-align: middle; line-height: inherit } .is-absolute { position: absolute!important; z-index: 4; } .post-meta-info { color: #999; font-size: 12px; padding-top: 10px; } .post-meta-info-left { display: inline-block; } .post-meta-info .meta-info-author .author.is-lite, .post-meta-info .meta-info-author .date.is-lite { color: #fff; font-weight: 600; } .is-lite a { color: #fff; } .post-meta-info .meta-info-author .author { color: #737272; font-weight: 600; font-size: 13px; } .cat-info-el:hover { background-color: #2f2f2f; } .meta-info-date { color: #fff; display: inline; overflow: hidden; } .post-meta-info-left .post-meta-info a { display: inline-block; } .post-thumb-overlay { position: absolute; top: 45%; right: 0; bottom: 0; left: 0; z-index: 1; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(30%, rgba(0, 0, 0, .2)), color-stop(100%, rgba(0, 0, 0, .75))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%); pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden } .post-thumb.is-bg-thumb { z-index: 1; display: block; width: 100%; height: 100% } .thumbnail-resize { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; text-align: center; line-height: 0 } .object-fit-img { object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center '; } .object-fit-postimg { max-width: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; height: 300px; } .object-fit-postimg_250 { max-width: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; height: 250px; } .newspaper-nav-icon { display: inline-block; width: 30px; height: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #efefef; vertical-align: middle; text-align: center; font-size: 16px; line-height: 30px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .margin-horizontal { margin-right: 1rem; margin-left: 1rem; } .center-conetent { margin: 0 auto; justify-content: center; display: flex; } .woocommerce .woocommerce-breadcrumb a { opacity: 1; } .woocommerce .breadcrumbs li:last-child { font-weight: 800; } .breadcrumb-wraps { margin-top: 20px; } .single .breadcrumbs a, .single .breadcrumbs li:not(:last-child)::after { color: #989898; } .breadcrumb-wraps .breadcrumbs li { font-size: .7875rem; color: #f00; } .breadcrumb-wraps .breadcrumbs .current { color: #ffffff; } .z-depth-2 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 3px 10px 0 rgba(0, 0, 0, .09) } .z-depth-3 { box-shadow: 0 6px 7px 0 rgba(0, 0, 0, .12), 0 17px 50px 0 rgba(0, 0, 0, .08) } .z-depth-4 { box-shadow: 0 8px 14px 0 rgba(0, 0, 0, .11), 0 12px 27px 0 rgba(0, 0, 0, .1) } .no-padding { padding-right: 0px; padding-left: 0px; } .floating-action.button { overflow: hidden; width: 56px; height: 56px; border-radius: 50%; padding: .7rem; margin: 0; background-color: #00bcd4; } .floating-action.button .fa { font-size: 36px; } .cell.addwidgets-warp { display: inline-block; overflow: hidden; padding: 0; border: 4px dotted #d4d2d2; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .13), 0 1px 5px 0 rgba(0, 0, 0, .08); margin-right: 10px; } /*=============================================>>>>> = woocommerce = ===============================================>>>>>*/ .woocommerce .woocommerce-breadcrumb { margin-bottom: 0px; } .related>h2:first-child, .upsells>h2:first-child { font-size: 1.618em; margin-bottom: 1em; } .woocommerce-tabs .panel h2:first-of-type { font-size: 1.618em; margin-bottom: 1em; } .single-product .woocommerce-product-gallery--with-images { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 3px 10px 0 rgba(0, 0, 0, .09) } .woocommerce div.product form.cart .button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { color: #ffffff; font-size: 14px; font-weight: 600; padding: 12px 17px 12px; background-color: #00bcd4; display: inline-block; border-radius: 3px; } .woocommerce ul.products li.product .button::before, button.single_add_to_cart_button::before { content: "\f217"; display: inline; font-family: FontAwesome; margin-right: 10px; } .woocommerce .quantity .qty { border: 3px solid #dddddd; height: 38px; text-align: center; width: 70px; margin-right: 15px; } .woocommerce ul.products li.product .button, .easy-commerce-woocommerce ul.products li.product .button { line-height: 1.5; margin: 10px auto 20px; padding: .5em .7em; position: relative; border: 0; text-align: center; display: inline-block; background-color: #00bcd4; color: #fff; } .woocommerce div.product .product_title { clear: none; font-size: 28px; margin: 0 0 15px; padding: 0; border-bottom: 1px double #ebe9eb; } h1.entry-title::after { content: ""; display: block; height: 2px; background: #00bcd4; width: 50px; bottom: -1px; margin-top: 0px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .13), 0 1px 5px 0 rgba(0, 0, 0, .08); background-color: #fff; } .woocommerce ul.products li.product a, .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3, .woocommerce ul.products li.product .price, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #3C4858; } .woocommerce ul.products li.product .star-rating { font-size: .857em; margin-right: auto; margin-left: auto; } .woocommerce-cart .quantity .qty { margin: 0 auto; } .woocommerce table tbody tr:nth-child(2n) { background-color: #fff } .woocommerce-cart table.cart td { text-align: center; padding-top: 20px; padding-bottom: 20px; border-right: 1px solid #eee; } .woocommerce table.shop_table th { font-weight: normal; padding: 6px 12px; font-size: 16px; text-align: center; } .woocommerce .cart_totals h2 { margin-bottom: 30px; border-bottom: 1px solid #eee; font-size: 24px; padding-bottom: 15px; position: relative; text-transform: uppercase; text-align: left; } .woocommerce .cart_totals h2:after { content: ""; width: 160px; border-bottom: 1px solid #00bcd4; left: 0; bottom: -1px; position: absolute; } .woocommerce table.shop_table tbody tr td.actions .coupon .input-text { height: 40px; width: 150px !important; margin: 0 20px 5px 0; background: none; } .woocommerce .button { -webkit-transition: -webkit-box-shadow .25s; transition: -webkit-box-shadow .25s; transition: box-shadow .25s; transition: box-shadow .25s, -webkit-box-shadow .25s; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .woocommerce .button:hover {} .woocommerce div.product form.cart { margin: 36px 0px 0px 0px; } .woocommerce div.product form.cart .variations, .woocommerce #content div.product form.cart .variations { margin: 0; width: 100%; table-layout: fixed; } .woocommerce .variations_form.cart .variations tbody { border: none; } .woocommerce div.product form.cart .variations td.label, .woocommerce #content div.product form.cart .variations td.label { padding: 0px 18px 0px 0px; background-color: transparent; font-weight: 600; min-width: 80px; position: relative; overflow: hidden; margin-top: -20px; } .woocommerce div.product form.cart .variations select, .woocommerce #content div.product form.cart .variations select { width: 100%; margin: 0px 0px 0px 0px; } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { width: 100%; } .single-product .product_meta { padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #eaeaea; padding-right: 5px; padding-left: 10px; margin-top: 20px; } .single-product .product_meta span { display: table; table-layout: fixed; } .single-product .product_meta span>* { padding-left: 5px; } .single-product .product_meta span span { display: inline-block; table-layout: auto; } .woocommerce nav.woocommerce-pagination { border-radius: 0; display: block; height: 50px; margin-top: 20px; margin-bottom: 20px; } .shop-warp { margin-top: 40px; margin-bottom: 40px; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { margin-right: 4px; margin-left: 4px; padding: .3875rem .825rem; -webkit-border-radius: 4px; border-radius: 4px; text-align: center; font-size: 14px; line-height: inherit; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .woocommerce nav.woocommerce-pagination ul li, .woocommerce nav.woocommerce-pagination ul { border: none; padding: inherit; margin: auto; overflow: inherit; } /* ------------------------------------ Code For Mobile device CORE ------------------------------------ */ /*======== Media Queries for Standard Devices ========*/ /* Portrait */ @media print, screen and (min-width: 320px) and (max-width: 1024px) and (orientation: portrait) { #header-top .off-canvas-wrapper { display: block; } /*===General===*/ body .fullWidth { width: 100%; margin-left: auto; margin-right: auto; max-width: initial; padding: 0px; } /*===Header===*/ #site-title .site-title, .site-title a { font-size: 90% !important; } .mobile-menu .logo a img { width: 70%; } #site-title .site-title, .site-title { margin: 0px !important; } #topmenu .top-bar .top-bar-left .menu { text-align: center; display: inline-block; width: 100%; } #topmenu .top-bar .top-bar-left .menu li { display: inline-block } #topmenu .top-bar .top-bar-left .menu a { padding-right: 5px; padding-left: 5px; } .top-bar .social-btns { text-align: center; } #topmenu .top-bar, #topmenu .top-bar ul { padding: 0px 5px 5px 5px; background-color: transparent; } #header-top .head-bottom-area, #header-top .head-top-area { display: none; } /*===Widgets===*/ .lates-post-warp, .no-homesidebar .lates-post-warp { width: 100%; display: block; padding-right: .10rem; padding-left: .10rem; } .lates-post-blogbig .post-body { margin-right: 10px; margin-left: 10px; } .grid-container.small-full { padding-right: 0; padding-left: 0; max-width: 100%; margin: 0 auto; } .sidebar-inner { padding-right: 0px; padding-left: 0px; } .top-footer-wrap .sidebar-footer { padding-right: .625rem; padding-left: .625rem; } .single-post-header { padding-bottom: 20px; } .single-content-wrap { padding: 10px 20px 30px 20px; } .margin-horizontal { margin-right: auto; ; margin-left: auto; } .no-homesidebar .lates-post-blog { display: block; width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; } .flexslider .flex-control-thumbs .image { height: 50px; } #top-content { padding-top: 0px; padding-bottom: 10px; } #top-content .flexslider { margin-top: 15px; margin-bottom: 15px; } .top-bar .float-center-small { display: block; margin-right: auto; margin-left: auto; margin-top: 20px; max-width: fit-content; } .lates-post-blogbig .post-body { margin-top: -30px; } .heade-content { padding-top: 30px; padding-bottom: 0px; } } /* !!! Portrait !!! */ /* Landscape */ @media print, screen and (min-width: 568px) and (max-width: 1024px) and (orientation: landscape) { /*===General===*/ body .fullWidth { width: 100%; margin-left: auto; margin-right: auto; max-width: initial; padding: 0px; } /*===Header===*/ .mobile-menu .logo a img { width: 70%; } #site-title .site-title, .site-title a { font-size: 90% !important; } #site-title .site-title, .site-title { margin: 0px !important; } #header-top .off-canvas-wrapper { display: block; } #header-top .head-bottom-area, #header-top .head-top-area { display: none; } /*===Widgets===*/ .no-homesidebar .lates-post-warp { width: 50%; } .lates-post-blogbig .post-body { margin-right: 10px; margin-left: 10px; } .grid-container.small-full { padding-right: 0; padding-left: 0; max-width: 100%; margin: 0 auto; } .single-content-wrap { padding: 20px 20px 40px 20px; } .single-post-header { padding-bottom: 20px; } .margin-horizontal { margin-right: auto; ; margin-left: auto; } .no-homesidebar .lates-post-blog { display: block; width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; } .flexslider .flex-control-thumbs .image { height: 60px; } #top-content .flexslider { margin-top: 15px; margin-bottom: 15px; } #top-content { padding-top: 0px; padding-bottom: 10px; } .top-bar .float-center-small { display: block; margin-right: auto; margin-left: auto; margin-top: 20px; max-width: fit-content; } .lates-post-blogbig .post-body { margin-top: -30px; } } /*----------- Ipad portrait -----------*/ @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .lates-post-warp, .no-homesidebar .lates-post-warp { width: 50%; display: block; padding-right: .10rem; padding-left: .10rem; } #header-top .off-canvas-wrapper { display: block; } .lates-post-blogbig .post-body { margin-top: -30px; } .mobile-menu .logo a img { width: 70%; } } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { #header-top .off-canvas-wrapper { display: block; } } /* !!!! Landscape !!! */ /* ----------- Retina Screens ----------- */ @media print, screen and (min-width: 40em) { .slider-right .post-wrap { height: 300px; } } @media print, screen and (min-width: 64em) { /*===Header===*/ #header-top .off-canvas-wrapper { display: none; } /*===Content===*/ #top-content { padding-top: 0px; padding-bottom: 16px; } .slider-right .post-wrap { height: 300px; } .nopadding-left { margin-left: 0px !important; } .lates-post-blog { margin-left: .9rem; } .margin-right-post { margin-right: .9rem; } .no-homesidebar .lates-post-blog { padding-left: 0; } .no-homesidebar .lates-post-blogbig .block-content-wrap, .no-homesidebar .lates-post-blogbig .block-header-wrap { width: 90%; margin-right: auto; margin-left: auto; } .sidebar-inner { padding-left: 0px; padding-right: 15px; padding-left: 25px; } .home-sidebar.sidebar-inner { padding-left: 20px; padding-right: 20px; } .no-homesidebar .lates-post-warp { width: 33%; } /*===Text size===*/ .post-title.is-size-1 { font-size: 36px; font-weight: inherit; } .post-title.is-size-2 { font-size: 30px; font-weight: inherit; } .is-size-2 { font-size: 30px; font-weight: inherit; } .post-title.is-size-3 { font-size: 24px; font-weight: 600; } .post-title.is-size-4 { font-size: 21px; font-weight: 600; } .post-title.is-size-5 { font-size: 14px; font-weight: 600; } .post-title.is-size-6 { font-size: 13px; font-weight: 600; } .shop-warp { margin-top: 60px; margin-bottom: 40px; } .columns-3 .woocommerce ul.products li.product, .woocommerce-page .columns-3 ul.products li.product { width: 30%; } } .single-post-tag a, .single-post-tag a:visited, .single-post-tag a:active { background:#6f31e1; border:1px solid #ffffff; border-radius:5px; text-decoration:none; padding:3px; margin:3px; text-transform:uppercase; } .single-post-tag a:hover { background:#dd3333; color:#FFF; } /*== END ===*/
- Тема «Меню меняет цвет при наведении — как сделать?» закрыта для новых ответов.