/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms - default ## Layouts # Components - Header - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Generic --------------------------------------------------------------*/ /* Normalize --------------------------------------------- */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; font-size: 1em; } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Box sizing --------------------------------------------- */ /* Inherit box-sizing to more easily change it's value on a component level. @link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ *, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ /* Typography --------------------------------------------- */ body, button, input, select, optgroup, textarea { color: #404040; font-family: 'Poppins', sans-serif; font-size: 1rem; line-height: 1.5; } body{ font-weight: 400; overflow-x: hidden; word-break: break-word; -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; } html { font-family: 'Poppins', sans-serif; } html, body { width: 100%; height: 100%; } h1, h2, h3, h4, h5, h6 { clear: both; } p { font-family: 'Poppins', sans-serif; color: #3f3f3f; font-size: 14px; line-height: 24px; font-weight: 400; margin: 0 0 15px 0; } h1, h2, h3, h4, h5, h6{ font-family: 'Noto Serif', serif; font-weight: 600; margin: 0 0 15px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; line-height:1.3; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* Elements --------------------------------------------- */ body { margin: 0; overflow-x: hidden; display: block; word-break: break-word; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } img { height: auto; max-width: 100%; } figure { margin: 1em 0; } table { margin: 0 0 1.5em; width: 100%; } /* Links --------------------------------------------- */ a { color: #4169e1; } a:visited { color: #800080; } a:hover, a:focus, a:active { color: #191970; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /* Forms --------------------------------------------- */ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #222; color: #fff; padding: 0.3em 1.5em 0.3em; text-transform: uppercase; font-size: 15px; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; opacity: 0.8 } button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { opacity: 0.8; border: 2px dotted #77A464; outline-offset: 1px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; min-height: 35px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { border: 1px solid #ccc; } textarea { width: 100%; } /* default --------------------------------------------- */ .list-hide ul{ margin: 0; padding: 0; list-style: none; } .text-white, .text-white a, .text-white{ color: #fff; } /*-------------------------------------------------------------- # Layouts --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Components --------------------------------------------------------------*/ /* Header --------------------------------------------- */ .site-branding.has-himg { position: relative; overflow: hidden; } .site-branding.has-himg .beshop-header-img { min-height: 250px; max-height: 300px; } .site-branding.has-himg .beshop-header-img img { width: 100%; height: auto; min-height: 250px } .site-branding.has-himg.behimg-auto .beshop-header-img, .site-branding.has-himg.behimg-auto .beshop-header-img img { min-height: auto; } @media screen and (max-width: 992px) { .site-branding.has-himg.behimg-amobile .beshop-header-img, .site-branding.has-himg.behimg-amobile .beshop-header-img img { min-height: auto; } } .site-branding.has-himg.bshop-two-logo .beshop-header-img { min-height: 420px; max-height: 1000px; } .site-branding.has-himg.bshop-two-logo .beshop-header-img img { min-height: 420px; } .has-himg .headerlogo-text { position: absolute; top: 0; left: 0; width: 100%; text-align: center; margin: auto; height: 100%; } .has-himg p.site-description { display: inline-block; padding: 10px 20px; border-radius: 50px; } /* Navigation --------------------------------------------- */ .main-navigation { display: block; width: 100%; } .beshop-main-nav ul li a { padding: 15px 20px; color: #fff; border-right: 1px solid #555; border-left: 1px solid #555; } .beshop-main-nav ul li.page_item_has_children a, .mini-toggle, .beshop-main-nav ul li.menu-item-has-children a { padding-right: 25px; } .beshop-main-nav ul li a:hover, .beshop-main-nav ul li a:focus { text-decoration: none; opacity: 0.8; } .beshop-main-nav ul li:first-child a { border-left: 0; } .beshop-main-nav ul li:last-child a { border-right: 0; } .mini-toggle, .main-navigation .page_item_has_children:before, .main-navigation .menu-item-has-children:before { display: inline-block; top: 25px; right: 8px; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; position: absolute; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation ul ul { -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); float: left; position: absolute; top: 100%; left: 0; z-index: 99999; background: #555; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; display: inline-block; } .main-navigation ul ul ul { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); top: 5px; visibility: hidden; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; left: 100%; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { display: block; left: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; } .main-navigation ul ul ul li:hover > ul, .main-navigation ul ul ul li.focus > ul { left: 10px; bottom: -50px; top: auto; } .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: 0; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .main-navigation ul >li { position: relative; } .main-navigation a { display: block; text-decoration: none; } button.mini-toggle { background: transparent; border: none; display: none; } .menu-toggle { display: none; } .main-navigation ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } button.menu-toggle span.mshow { display: block; } .toggled button.menu-toggle span.mshow { display: none; } button.menu-toggle span.mhide { display: none; } .toggled button.menu-toggle span.mhide { display: block; } @media (max-width: 991px){ .main-navigation.toggled ul { max-height: 10000px; visibility: visible; opacity: 1; } button.menu-toggle { background: #222; color: #fff; font-weight: 700; text-transform: uppercase; border: 2px solid #fff; display: inline-block; margin: 5px 0; } .main-navigation ul { display: block; height: auto; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; max-height: 0; } .menu-toggle { display: block; } .main-navigation ul button.mini-toggle { display: block; width: 40px; height: 40px; top: 7px; right: 7px; border: 1px solid #888; } .main-navigation ul ul button.mini-toggle { top: 7px; right: -18px; } .main-navigation ul >li { position: relative; width: 95%; display: inline-block; min-width: 240px; max-width: 800px; } .mini-toggle, .main-navigation .menu-item-has-children:before, .page_item_has_children:before { right: 22px; } .main-navigation ul ul .mini-toggle, .main-navigation ul ul .menu-item-has-children:before, .main-navigation ul ul .page_item_has_children:before { right: -4px; } .beshop-main-nav ul li a { border-right: none; border-left: none; display: inline-block; } .beshop-main-nav ul li { border-bottom: 1px solid #ccc; } .main-navigation ul ul ul, .main-navigation ul ul { position: inherit; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; } .main-navigation ul ul ul { left:5px !important; } .main-navigation ul> ul> ul, .main-navigation ul> li> ul.sub-menu, .main-navigation ul> li> ul.children { /* display: none !important; */ opacity: 0; visibility: hidden; max-height: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .main-navigation ul> ul> ul, .main-navigation ul> li.menushow> ul.sub-menu, .main-navigation ul> li.befocus.menushow> ul.sub-menu, .main-navigation ul> li.befocus.menushow> ul.children, .main-navigation ul> li.menuhide.befocus> ul.sub-menu, .main-navigation ul> li.menuhide.befocus> ul.children, .main-navigation ul> li.menushow> ul.children { display: block !important; max-height: 10000px; height: auto; opacity: 1; visibility: visible; overflow: inherit; bottom: 0px; width: 100%; } .beshop-main-nav ul li.page_item_has_children a, .mini-toggle, .beshop-main-nav ul li.menu-item-has-children a { padding-right: 5px; } } /* Small menu. */ /* @media screen and (min-width: 37.5em) { } */ .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; } .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; } /* Posts and pages --------------------------------------------- */ .sticky { display: block; } .post { margin: 0 0 2.5em; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*Contact page style*/ .wpcf7-form label, .wpcf7-form span, .wpcf7-form label input { width: 100%; } /* Comments --------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .comment-form .form-submit { float: right; } .comment-form-cookies-consent { display: flex; align-items: baseline; } .comment-form-cookies-consent input{ margin-right: 5px; } /*-------------------------------------------------------------- # Comments --------------------------------------------------------------*/ .comment-respond { margin-top: 4rem; margin-bottom: 4rem; border: solid thin #eaeaea; padding: 1.75rem; } .comment-notes { font-size: medium; margin: 0px 0; } .comment-list { padding: 0; } .comments-title { font-size: medium; } .comment-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; } .comment-author img { border-radius: 50%; margin-right: .5rem; } .comment-metadata a { color: #c1c1c1; } .says { display: none; } .comment-reply-link { border: solid thin #eaeaea; padding: 0.2rem 0.5rem; } .comment-form-cookies-consent { font-size: medium; font-weight: normal; } .comments-area ol { list-style: none; } .comment-body { border: solid thin #e2e8f0; padding: 1rem; margin-bottom: 2rem; font-size: medium; word-wrap: break-word; } ol.children { margin-bottom: 0; margin-left: 0; } div.comments-area label { display: inline-block; margin-bottom: 0; color: #757575; } div.comment-respond h3 { font-size: inherit; } p.logged-in-as { font-size: medium; margin: 0px 0; } span.nav-subtitle { color: #999; } form#commentform input:not([type="checkbox"]) { display: block; width: 100%; } /* Widgets --------------------------------------------- */ .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } .widget select { width: 100%; height: 32px; } .widget img { margin: 0 0 5px 0; } .tagcloud a { border: 1px solid #E0ECDE; padding: 5px 10px; margin: 5px; display: inline-block; font-size: 14px !important; font-weight: 700; text-shadow: inherit; } /*calender widget*/ .calendar_wrap tr { border-bottom: 1px solid #ccc; } .calendar_wrap td, .calendar_wrap th { border-right: 1px solid #ccc; padding: 5px; text-align: center; } .calendar_wrap tr:first-child { border-top: 1px solid #ccc; } .calendar_wrap table { border-left: 1px solid #ccc; } #wp-calendar caption { border: 1px solid #ccc; padding: 10px 0; color: #000; text-align: center; } .widget .menu-item-has-children ul.sub-menu, .widget .page_item_has_children ul.children { margin-left: 5px; } /* Media --------------------------------------------- */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } img.custom-logo { margin-bottom: .5rem; } /* Captions --------------------------------------------- */ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* Galleries --------------------------------------------- */ .gallery { margin-bottom: 1.5em; display: -ms-grid; display: grid; grid-gap: 0.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /* Jetpack infinite scroll --------------------------------------------- */ /* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } /* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } /* Alignments --------------------------------------------- */ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /*Search style*/ .popup-box-on { display: block !important; } .off { display: none; } #bessearch.open { opacity: 1; transform: translate(0px, 0px) scale(1, 1); } #bessearch { background-color: #fff; height: 100%; left: 0; position: fixed; top: 0; transition: all 0.5s ease-in-out 0s; width: 100%; z-index: 2000; } #bessearch .close { color: #be5254; font-size: 40px; opacity: 1; padding: 10px 17px; position: fixed; right: 15px; top: 15px; } button.close { background: transparent none repeat scroll 0 0; border: 0 none; cursor: pointer; } .close { float: right; font-weight: bold; line-height: 1; text-shadow: 0 1px 0 #fff; } #bessearch input[type="search"] { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0 none; color: #333; font-family: "Open Sans",sans-serif; font-size: 50px; font-weight: 300; margin: -51px auto 0; outline: medium none; padding-left: 30px; padding-right: 30px; position: absolute; text-align: center; top: 50%; width: 100%; border-bottom: 1px solid #ededed; } #bessearch .search-submit { left: 50%; margin-top: 60px; padding: 10px 50px; position: absolute; top: 50%; transform: translateX(-50%); border-radius: 153px; font-size: 29px; } .beshop-cradit{ text-align: center; color: rgb(0, 0, 0); position: absolute; left: 0px; right: 0px; bottom: 10px; font-size: 12px; } .besearch-icon i, .besearch-icon a { font-size: 15px; color: #fff; }