/* Theme Name: Gourmet Asia Author: Bizi Studio Author URI: http://bizi.studio/ Description: Gourmet Asia. Version: 1.0 Text Domain: gourmetasia */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Normalize 2.0 Accessibility 3.0 Alignments 4.0 Clearings 5.0 Typography 6.0 Forms 7.0 Formatting 8.0 Lists 9.0 Tables 10.0 Links 11.0 Featured Image Hover 12.0 Navigation 13.0 Layout 13.1 Header 13.2 Front Page 13.3 Regular Content 13.4 Posts 13.5 Pages 13.6 Footer 14.0 Comments 15.0 Widgets 16.0 Media 16.1 Galleries 17.0 Customizer 18.0 SVGs Fallbacks 19.0 Media Queries 20.0 Print --------------------------------------------------------------*/ @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700'); @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700'); /*-------------------------------------------------------------- 1.0 Normalize Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css --------------------------------------------------------------*/ html{font-family:sans-serif;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body{margin:0;} article,aside,footer,header,nav,section{display:block;} h1{font-size:2em;margin:.67em 0;} figcaption,figure,main{display:block;} figure{margin:1em 0;} hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible;} pre{font-family:monospace, monospace;font-size:1em;} a{background-color:transparent;-webkit-text-decoration-skip:objects;} a:active,a:hover{outline-width:0;} abbr[title]{border-bottom:1px #767676 dotted;text-decoration:none;} b,strong{font-weight:700;} code,kbd,samp{font-family:monospace, monospace;font-size:1em;} dfn{font-style:italic;} mark{background-color:#eee;color:#222;} small{font-size:87.5%;} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sub{bottom:-.25em;} sup{top:-.5em;} audio,video{display:inline-block;} audio:not([controls]){display:none;height:0;} img{border-style:none;} svg:not(:root){overflow:hidden;} button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;} button,input{overflow:visible;} button,select{text-transform:none;} button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;} button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;} button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;} fieldset{border:1px solid #bbb;margin:0 2px;padding:.35em .625em .75em;} legend{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;} progress{display:inline-block;vertical-align:baseline;} textarea{overflow:auto;} [type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;} [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;} [type="search"]{-webkit-appearance:textfield;outline-offset:-2px;} [type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;} details,menu{display:block;} summary{display:list-item;} canvas{display:inline-block;} template{display:none;} [hidden]{display:none;} /*-------------------------------------------------------------- 2.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important;} .screen-reader-text:focus{background-color:#f1f1f1;-webkit-border-radius:3px;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;color:#21759b;display:block;font-size:.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;} /*-------------------------------------------------------------- 3.0 Alignments --------------------------------------------------------------*/ .alignleft{display:inline;float:left;margin-right:1.5em;} .alignright{display:inline;float:right;margin-left:1.5em;} .aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto;} /*-------------------------------------------------------------- 4.0 Clearings --------------------------------------------------------------*/ .clear:before,.clear:after,.entry-content:before,.entry-content:after,.entry-footer:before,.entry-footer:after,.comment-content:before,.comment-content:after,.site-header:before,.site-header:after,.site-content:before,.site-content:after,.site-footer:before,.site-footer:after,.nav-links:before,.nav-links:after,.pagination:before,.pagination:after,.comment-author:before,.comment-author:after,.widget-area:before,.widget-area:after,.widget:before,.widget:after,.comment-meta:before,.comment-meta:after{content:"";display:table;table-layout:fixed;} .clear:after,.entry-content:after,.entry-footer:after,.comment-content:after,.site-header:after,.site-content:after,.site-footer:after,.nav-links:after,.pagination:after,.comment-author:after,.widget-area:after,.widget:after,.comment-meta:after{clear:both;} /*-------------------------------------------------------------- 5.0 Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #191919; font-family: Lato, helvetica, arial, sans-serif; font-size: 16px; font-size: 1em; font-weight: 300; line-height: 28px; line-height: 1.75em; } h1, h2, h3, h4, h5, h6 { clear: both; line-height: 1.5; margin: 0 0 1.5em; padding: 1.5em 0 0; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { padding-top: 0; } h1 { font-family: 'Playfair Display', sans-serif; font-size: 32px; font-size: 2em; line-height: 36px; line-height: 1.125em; margin: 0 0 0.938em; font-weight:400; } h1 em{ padding-right: .125em; } .home .entry-content h1{ padding-left: 0; background: none; } .entry-content h1{ padding-left: 14px; /*background:url(../images/Gourmet_Asia-icon-40.png) no-repeat left center;*/ line-height: 40px; } h2, .home.blog .entry-title { font-family: 'Playfair Display', sans-serif; font-size: 26px; font-size: 1.625em; font-weight: normal; margin-bottom: 30px; } h2:after{ margin-top: 5px; height: 5px; display:block; width: 40px; background: #F8A41A; content: ''; } h2.center:after{ margin-left: auto; margin-right: auto; } h2.white { color: #ffffff; } h2.white:after{ background: #ffffff; } .home h2{ font-size: 24px; font-size: 1.5em; } h3 { font-size: 16px; font-size: 1rem; font-weight: normal; } h4 { font-family: 'Playfair Display', sans-serif; color: #F8A41A; font-size: 21px; font-size: 1.3125em; font-weight: 400; margin-bottom: 0; line-height: 1.2; } h5 { font-size: 16px; font-size: 1em; color: #F8A41A; font-weight: 800; } h6 { color: #333; font-size: 15px; font-size: 0.9375rem; font-weight: 800; } p { margin: 0 0 1.5em; padding: 0; } dfn, cite, em, i { font-style: italic; } blockquote { color: #666; font-size: 18px; font-size: 1.125rem; font-style: italic; line-height: 1.7; margin: 0; overflow: hidden; padding: 0; } blockquote cite { display: block; font-style: normal; font-weight: 600; margin-top: 0.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; 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; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #eee; text-decoration: none; } big { font-size: 125%; } blockquote { quotes: "" ""; } q { quotes: "“" "”" "‘" "’"; } blockquote:before, blockquote:after { content: ""; } :focus { outline: none; } /* Typography for Chinese Font */ html[lang^="zh-"] body, html[lang^="zh-"] button, html[lang^="zh-"] input, html[lang^="zh-"] select, html[lang^="zh-"] textarea { font-family: Lato, helvetica, arial, sans-serif, "PingFang TC", STHeitiTC-Light; } html[lang="zh-CN"] body, html[lang="zh-CN"] button, html[lang="zh-CN"] input, html[lang="zh-CN"] select, html[lang="zh-CN"] textarea { font-family: Lato, helvetica, arial, sans-serif, "PingFang SC", STHeitiSC-Light; } /* Remove letter-spacing for all non-latin alphabets */ html[lang="ar"] *, html[lang="ary"] *, html[lang="azb"] *, html[lang="haz"] *, html[lang="ps"] *, html[lang^="zh-"] *, html[lang="bg-BG"] *, html[lang="ru-RU"] *, html[lang="uk"] *, html[lang="bn-BD"] *, html[lang="hi-IN"] *, html[lang="mr-IN"] *, html[lang="el"] *, html[lang="gu-IN"] *, html[lang="he-IL"] *, html[lang="ja"] *, html[lang="ko-KR"] *, html[lang="th"] * { letter-spacing: 0 !important; } /*-------------------------------------------------------------- 6.0 Forms --------------------------------------------------------------*/ label { color: #333; display: block; font-weight: 800; margin-bottom: 0.5em; } fieldset { margin-bottom: 1em; } 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; background: #fff; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); border: 1px solid #bbb; display: block; padding: 5px; width: 100%; } 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: #222; border-color: #333; } select { border: 1px solid #bbb; -webkit-border-radius: 3px; border-radius: 3px; height: 3em; max-width: 100%; } input[type="radio"], input[type="checkbox"] { margin-right: 0.5em; } input[type="radio"] + label, input[type="checkbox"] + label { font-weight: 400; } button, input[type="button"], input[type="submit"] { background-color: #FFFFFF; border: 1px solid #F9A51A; color: #F9A51A; cursor: pointer; display: inline-block; padding: 10px 30px; text-transform: uppercase; -webkit-transition: background 0.3s; transition: background 0.3s; } input + button, input + input[type="button"], input + input[type="submit"] { padding: 0.75em 2em; } button.secondary, input[type="reset"], input[type="button"].secondary, input[type="reset"].secondary, input[type="submit"].secondary { background-color: #ddd; color: #222; } button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { background: #F9A51A; color: #cccccc; } button.secondary:hover, button.secondary:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="button"].secondary:hover, input[type="button"].secondary:focus, input[type="reset"].secondary:hover, input[type="reset"].secondary:focus, input[type="submit"].secondary:hover, input[type="submit"].secondary:focus { background: #bbb; } /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder { color: #333; font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; } :-moz-placeholder { color: #333; font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; } ::-moz-placeholder { color: #333; font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } :-ms-input-placeholder { color: #333; font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; } /*-------------------------------------------------------------- 7.0 Formatting --------------------------------------------------------------*/ hr { background-color: #bbb; border: 0; height: 1px; margin-bottom: 1.5em; } /*-------------------------------------------------------------- 8.0 Lists --------------------------------------------------------------*/ ul, ol { margin: 0 0 1.5em 20px; padding: 0; } 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; } /*-------------------------------------------------------------- 9.0 Tables --------------------------------------------------------------*/ table { border-collapse: collapse; margin: 0; width: 100%; } thead th { border-bottom: 2px solid #bbb; padding-bottom: 0.5em; } th { padding: 0.4em; text-align: left; } table.rowBorder tr, tr.rowBorder { border-bottom: 1px solid #eee; } tr { } .noborder tr { border-bottom: none; } td { padding: 0.4em; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } /*-------------------------------------------------------------- 10.0 Links --------------------------------------------------------------*/ a { color: #42BCE2; text-decoration: none; } a:focus { outline: thin dotted; } a:hover, a:active { color: #000; outline: 0; } /* Hover effects */ /* .entry-content a, .entry-summary a, .widget a, .site-footer .widget-area a, .posts-navigation a, .widget_authors a strong { -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1); box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1); -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; transition: color 80ms ease-in, box-shadow 130ms ease-in-out; transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out; } .entry-title a, .entry-meta a, .page-links a, .page-links a .page-number, .entry-footer a, .entry-footer .cat-links a, .entry-footer .tags-links a, .edit-link a, .post-navigation a, .logged-in-as a, .comment-navigation a, .comment-metadata a, .comment-metadata a.comment-edit-link, .comment-reply-link, a .nav-title, .pagination a, .comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, .site-footer .widget-area ul li a, .site-footer .widget-area ul li a { -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); text-decoration: none; -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; transition: color 80ms ease-in, box-shadow 130ms ease-in-out; transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out; } .entry-content a:focus, .entry-content a:hover, .entry-summary a:focus, .entry-summary a:hover, .widget a:focus, .widget a:hover, .site-footer .widget-area a:focus, .site-footer .widget-area a:hover, .posts-navigation a:focus, .posts-navigation a:hover, .comment-metadata a:focus, .comment-metadata a:hover, .comment-metadata a.comment-edit-link:focus, .comment-metadata a.comment-edit-link:hover, .comment-reply-link:focus, .comment-reply-link:hover, .widget_authors a:focus strong, .widget_authors a:hover strong, .entry-title a:focus, .entry-title a:hover, .entry-meta a:focus, .entry-meta a:hover, .page-links a:focus .page-number, .page-links a:hover .page-number, .entry-footer a:focus, .entry-footer a:hover, .entry-footer .cat-links a:focus, .entry-footer .cat-links a:hover, .entry-footer .tags-links a:focus, .entry-footer .tags-links a:hover, .post-navigation a:focus, .post-navigation a:hover, .pagination a:not(.prev):not(.next):focus, .pagination a:not(.prev):not(.next):hover, .comments-pagination a:not(.prev):not(.next):focus, .comments-pagination a:not(.prev):not(.next):hover, .logged-in-as a:focus, .logged-in-as a:hover, a:focus .nav-title, a:hover .nav-title, .edit-link a:focus, .edit-link a:hover, .site-info a:focus, .site-info a:hover, .widget .widget-title a:focus, .widget .widget-title a:hover, .widget ul li a:focus, .widget ul li a:hover { color: #000; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); } */ /* Fixes linked images */ /* .entry-content a img, .widget a img { -webkit-box-shadow: 0 0 0 8px #fff; box-shadow: 0 0 0 8px #fff; }*/ .post-navigation a:focus .icon, .post-navigation a:hover .icon { color: #222; } /*-------------------------------------------------------------- 11.0 Featured Image Hover --------------------------------------------------------------*/ .post-thumbnail { margin-bottom: 1em; } .post-thumbnail a img { -webkit-backface-visibility: hidden; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .post-thumbnail a:hover img, .post-thumbnail a:focus img { opacity: 0.7; } /*-------------------------------------------------------------- 12.0 Navigation --------------------------------------------------------------*/ .navigation-top { font-size: 16px; font-size: 1em; left: 0; min-height: 60px; position: fixed; right: 0; width: 100%; z-index: 3; top: 0; background: rgba(255, 255, 255, 0.95); /**/ border-bottom: 1px solid #E5E5E5; } .navigation-top .wrap { max-width: 1020px; padding: 0; } .navigation-top a { color:white; -webkit-transition: color 0.2s; transition: color 0.2s; font-weight: 400; } @media screen and (max-width: 767px){ /*iphone*/ .navigation-top li a { font-weight: 700; } .navigation-top li li a { font-weight: 300; } } .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a , .main-navigation a:hover, .main-navigation a:focus { color: #000000; } .main-navigation > .current-menu-item > a:after, .main-navigation .current_page_parent > a:after, .main-navigation > li:hover > a:after, .main-navigation li.focus > a:after/*, .main-navigation li li:hover > a:after, .main-navigation li li.focus > a:after */ { height: 3px; display:block; width: 40px; background: #F8A41A; content: ''; position: absolute; right: 0; left: 0; margin: auto; pointer-events: none; } .main-navigation li li:hover > a, .main-navigation li li.focus > a { color: #F8A41A; } /* .main-navigation li li:hover, .main-navigation li li.focus { background: #F8A41A; -webkit-transition: background 0.2s; transition: background 0.2s; } */ .main-navigation { clear: both; display: block; } @media screen and (max-width: 767px){ /* WIDTH < iPad */ .main-navigation.toggled-on{ padding-bottom: 15px; } } .main-navigation ul { list-style: none; margin: 0 auto; padding: 0; text-align: center; /* max-width: 650px;*/ } .navhome { width: 101px; height: 43px; position: absolute; top: 10px; left: 15px; /* -webkit-mask: url(../images/Gourmet_Asia-logo.svg) no-repeat 50% 50%; mask: url((../images/Gourmet_Asia-logo.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; background-color: #F8A41A;*/ background: url(../images/Gourmet_Asia-logo-d.png) no-repeat center center; background-size: 101px 43px; z-index: 10; } html[lang^="zh-"] .navhome { background: url(../images/Gourmet_Asia-logo-d-zh.png) no-repeat center center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .navhome { background: url(../images/Gourmet_Asia-logo-d@2x.png) no-repeat center center; background-size: 101px 43px; } html[lang^="zh-"] .navhome { background: url(../images/Gourmet_Asia-logo-d-zh@2x.png) no-repeat center center; background-size: 101px 43px; } } /* Hide the menu on small screens when JavaScript is available. * It only works with JavaScript. */ .js .main-navigation ul, .main-navigation .menu-item-has-children > a > .icon, .main-navigation .page_item_has_children > a > .icon, .main-navigation ul a > .icon { display: none; } .js .main-navigation.toggled-on > div > ul { display: block; } .main-navigation ul ul { } .main-navigation ul ul.toggled-on { display: block; } .main-navigation ul ul a { letter-spacing: 0; position: relative; text-transform: none; } .main-navigation li { border-bottom: 1px dotted rgba(248,164,26,.5) ; position: relative; } .main-navigation li li{ border-bottom: none; } /* .main-navigation li li, .main-navigation li:last-child { border: 0; } */ .main-navigation a { display: block; padding: 0.5em 0; text-decoration: none; } /* Menu toggle */ .menu-toggle { background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; color: #222; display: none; font-size: 14px; font-size: 0.875rem; font-weight: 800; line-height: 1.5; margin: 0 15px 0 auto; padding: 13px; text-shadow: none; } /* Display the menu toggle when JavaScript is available. */ .js .menu-toggle { display: block; } .main-navigation.toggled-on ul.nav-menu { display: block; } .menu-toggle:hover, .menu-toggle:focus { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .menu-toggle:focus { outline: thin dotted; } .menu-toggle .icon { margin-right: 0.5em; top: -2px; } .toggled-on .menu-toggle .icon-bars, .menu-toggle .icon-close { display: none; } .toggled-on .menu-toggle .icon-close { display: inline-block; } /* Dropdown Toggle */ .dropdown-toggle { background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; color: #222; display: block; font-size: 16px; right: .7em; line-height: 1.5; margin: 0 auto; padding: 0.5em; position: absolute; text-shadow: none; top: 0; } .dropdown-toggle:hover, .dropdown-toggle:focus { background: transparent; } .dropdown-toggle:focus { outline: thin dotted; } .dropdown-toggle.toggled-on .icon { -ms-transform: rotate(-180deg); /* IE 9 */ -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */ transform: rotate(-180deg); } /* Scroll down arrow */ .site-header .menu-scroll-down { display: none; } /*-------------------------------------------------------------- 13.0 Layout --------------------------------------------------------------*/ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { background: #fff;/* Fallback for when there is no custom background color defined. */ } #page { position: relative; word-wrap: break-word; } .wrap { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; position: relative; } .wrap:after { clear: both; content: ""; display: block; } #primary{ min-height: 320px; } /*-------------------------------------------------------------- 13.1 Header --------------------------------------------------------------*/ #masthead .wrap { position: relative; z-index: 999; } .site-header { background-color: #ffffff; position: relative; min-height: 60px; } /* Site branding */ .site-branding { padding: 0; position: relative; -webkit-transition: margin-bottom 0.2s; transition: margin-bottom 0.2s; z-index: 3; } .site-branding a { text-decoration: none; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .site-branding a:hover, .site-branding a:focus { opacity: 0.7; } .site-title { clear: none; font-size: 24px; font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.08em; margin: 0; padding: 0; text-transform: uppercase; } .site-title, .site-title a { color: #222; opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */ } body.has-header-image .site-title, body.has-header-video .site-title, body.has-header-image .site-title a, body.has-header-video .site-title a { color: #fff; } .site-description { color: #666; font-size: 13px; font-size: 0.8125rem; margin-bottom: 0; } body.has-header-image .site-description, body.has-header-video .site-description { color: #fff; opacity: 0.8; } .custom-logo-link { display: inline-block; padding-right: 1em; vertical-align: middle; width: auto; } .custom-logo-link img { display: inline-block; max-height: 80px; width: auto; } body.home.title-tagline-hidden.has-header-image .custom-logo-link img, body.home.title-tagline-hidden.has-header-video .custom-logo-link img { max-height: 200px; max-width: 100%; } .custom-logo-link a:hover, .custom-logo-link a:focus { opacity: 0.9; } body:not(.title-tagline-hidden) .site-branding-text { display: inline-block; vertical-align: middle; } .custom-header { position: relative; } .has-header-image.gourmetasia-front-page .custom-header, .has-header-video.gourmetasia-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header { display: table; height: 300px; height: 75vh; width: 100%; } .custom-header-media { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; width: 100%; } .custom-header-media:before { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */ background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */ bottom: 0; content: ""; display: block; height: 100%; left: 0; position: absolute; right: 0; z-index: 2; } .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe { position: fixed; height: auto; left: 50%; max-width: 1000%; min-height: 100%; min-width: 100%; min-width: 100vw; /* vw prevents 1px gap on left that 100% has */ width: auto; top: 50%; padding-bottom: 1px; /* Prevent header from extending beyond the footer */ -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */ background-color: rgba(34, 34, 34, 0.5); border: 1px solid rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6); height: 45px; overflow: hidden; padding: 0; position: fixed; right: 30px; top: 30px; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; width: 45px; } .wp-custom-header .wp-custom-header-video-button:hover, .wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */ border-color: rgba(255, 255, 255, 0.8); background-color: rgba(34, 34, 34, 0.8); color: #fff; } .admin-bar .wp-custom-header-video-button { top: 62px; } .has-header-image:not(.gourmetasia-front-page):not(.home) .custom-header-media img { bottom: 0; position: absolute; top: auto; -ms-transform: translateX(-50%) translateY(0); -moz-transform: translateX(-50%) translateY(0); -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } /* For browsers that support 'object-fit' */ @supports ( object-fit: cover ) { .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.gourmetasia-front-page):not(.home) .custom-header-media img { height: 100%; left: 0; -o-object-fit: cover; object-fit: cover; top: 0; -ms-transform: none; -moz-transform: none; -webkit-transform: none; transform: none; width: 100%; } } /* Hides div in Customizer preview when header images or videos change. */ body:not(.has-header-image):not(.has-header-video) .custom-header-media { display: none; } .has-header-image.gourmetasia-front-page .site-branding, .has-header-video.gourmetasia-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding { display: table-cell; height: 100%; vertical-align: bottom; } /*-------------------------------------------------------------- 13.2 Front Page --------------------------------------------------------------*/ .gourmetasia-front-page .site-content { padding: 0; } .gourmetasia-panel { overflow: hidden; position: relative; } .panel-image { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; position: relative; } .panel-image:before { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */ /* FF3.6-15 */ background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3))); background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */ bottom: 0; content: ""; left: 0; right: 0; position: absolute; top: 100px; } .gourmetasia-front-page article:not(.has-post-thumbnail):not(:first-child) { border-top: 1px solid #ddd; } .panel-content { position: relative; } /* Panel edit link */ .gourmetasia-panel .edit-link { display: block; margin: 0.3em 0 0; } .gourmetasia-panel .entry-header .edit-link { font-size: 14px; font-size: 0.875rem; } /* Front Page - Recent Posts */ .gourmetasia-front-page .panel-content .recent-posts article { border: 0; color: #333; margin-bottom: 3em; } .recent-posts .entry-header { margin-bottom: 1.2em; } .page .panel-content .recent-posts .entry-title { font-size: 20px; font-size: 1.25rem; font-weight: 300; letter-spacing: 0; text-transform: none; } .gourmetasia-panel .recent-posts .entry-header .edit-link { color: #222; display: inline-block; font-size: 11px; font-size: 0.6875rem; margin-left: 1em; } /*-------------------------------------------------------------- 13.3 Regular Content --------------------------------------------------------------*/ .site-content-contain { background-color: #fff; position: relative; min-height: calc(100vh - 60px - 315px ); /*nav - footer - padding*/ } .site-content { padding: 30px 0 0; } /*-------------------------------------------------------------- 13.4 Posts --------------------------------------------------------------*/ /* Post Landing Page */ .sticky { position: relative; } .post:not(.sticky) .icon-thumb-tack { display: none; } .sticky .icon-thumb-tack { display: block; height: 18px; left: -1.5em; position: absolute; top: 1.65em; width: 20px; } .page .panel-content .entry-title, .page-title, body.page:not(.gourmetasia-front-page) .entry-title { color: #222; font-size: 14px; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .entry-header .entry-title { margin-bottom: 0.25em; } .entry-title a { color: #333; text-decoration: none; margin-left: -2px; } .entry-title:not(:first-child) { padding-top: 0; } .entry-meta { color: #767676; font-size: 11px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1818em; padding-bottom: 0.25em; text-transform: uppercase; } .entry-meta a { color: #767676; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .pagination, .comments-pagination { border-top: 1px solid #eee; font-size: 14px; font-size: 0.875rem; font-weight: 800; padding: 2em 0 3em; text-align: center; } .pagination .icon, .comments-pagination .icon { width: 0.666666666em; height: 0.666666666em; } .comments-pagination { border: 0; } .page-numbers { display: none; padding: 0.5em 0.75em; } .page-numbers.current { color: #767676; display: inline-block; } .page-numbers.current .screen-reader-text { clip: auto; height: auto; overflow: auto; position: relative !important; width: auto; } .prev.page-numbers, .next.page-numbers { background-color: #ddd; -webkit-border-radius: 2px; border-radius: 2px; display: inline-block; font-size: 24px; font-size: 1.5rem; line-height: 1; padding: 0.25em 0.5em 0.4em; } .prev.page-numbers, .next.page-numbers { -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; } .prev.page-numbers:focus, .prev.page-numbers:hover, .next.page-numbers:focus, .next.page-numbers:hover { background-color: #767676; color: #fff; } .prev.page-numbers { float: left; } .next.page-numbers { float: right; } /* Aligned blockquotes */ .entry-content blockquote.alignleft, .entry-content blockquote.alignright { color: #666; font-size: 13px; font-size: 0.8125rem; width: 48%; } /* Blog landing, search, archives */ .blog .site-main > article, .archive .site-main > article, .search .site-main > article { padding-bottom: 2em; } body:not(.gourmetasia-front-page) .entry-header { padding: 1em 0; } body:not(.gourmetasia-front-page) .entry-header, body:not(.gourmetasia-front-page) .entry-content, body:not(.gourmetasia-front-page) #comments { margin-left: auto; margin-right: auto; } body:not(.gourmetasia-front-page) .entry-header { padding-top: 0; } .blog .entry-meta a.post-edit-link, .archive .entry-meta a.post-edit-link, .search .entry-meta a.post-edit-link { color: #222; display: inline-block; margin-left: 1em; white-space: nowrap; } .search .page .entry-meta a.post-edit-link { margin-left: 0; white-space: nowrap; } .taxonomy-description { color: #666; font-size: 13px; font-size: 0.8125rem; } /* More tag */ .entry-content .more-link:before { content: ""; display: block; margin-top: 1.5em; } /* Single Post */ .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.gourmetasia-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary { margin-left: auto; margin-right: auto; /* max-width: 740px;*/ } .single-featured-image-header { margin-top: -30px; margin-bottom: 30px; position: relative; } .single-featured-image-header img { /* height: 100%; object-fit: cover; object-position: center center; */ /*above IE not work*/ position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; } .page-links { font-size: 14px; font-size: 0.875rem; font-weight: 800; padding: 2em 0 3em; } .page-links .page-number { color: #767676; display: inline-block; padding: 0.5em 1em; } .page-links a { display: inline-block; } .page-links a .page-number { color: #222; } /* Entry footer */ .entry-footer { border-bottom: 1px solid #eee; border-top: 1px solid #eee; margin-top: 2em; padding: 2em 0; } .entry-footer .cat-links, .entry-footer .tags-links { display: block; font-size: 11px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1818em; padding-left: 2.5em; position: relative; text-transform: uppercase; } .entry-footer .cat-links + .tags-links { margin-top: 1em; } .entry-footer .cat-links a, .entry-footer .tags-links a { color: #333; } .entry-footer .cat-links .icon, .entry-footer .tags-links .icon { color: #767676; left: 0; margin-right: 0.5em; position: absolute; top: 2px; } .entry-footer .edit-link { display: inline-block; } .entry-footer .edit-link a.post-edit-link { background-color: #222; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; color: #fff; display: inline-block; font-size: 14px; font-size: 0.875rem; font-weight: 800; margin-top: 2em; padding: 0.7em 2em; -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; white-space: nowrap; } .entry-footer .edit-link a.post-edit-link:hover, .entry-footer .edit-link a.post-edit-link:focus { background-color: #767676; } /* Post Formats */ .blog .format-status .entry-title, .archive .format-status .entry-title, .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } .format-quote blockquote { color: #333; font-size: 20px; font-size: 1.25rem; font-weight: 300; overflow: visible; position: relative; } .format-quote blockquote .icon { display: block; height: 20px; left: -1.25em; position: absolute; top: 0.4em; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); width: 20px; } /* Post Navigation */ .post-navigation { font-weight: 800; margin: 3em 0; } .post-navigation .nav-links { padding: 1em 0; } .nav-subtitle { background: transparent; color: #767676; display: block; font-size: 11px; font-size: 0.6875rem; letter-spacing: 0.1818em; margin-bottom: 1em; text-transform: uppercase; } .nav-title { color: #333; font-size: 15px; font-size: 0.9375rem; } .post-navigation .nav-next { margin-top: 1.5em; } .nav-links .nav-previous .nav-title .nav-title-icon-wrapper { margin-right: 0.5em; } .nav-links .nav-next .nav-title .nav-title-icon-wrapper { margin-left: 0.5em; } /*-------------------------------------------------------------- 13.5 Pages --------------------------------------------------------------*/ .page-header { padding-bottom: 2em; } .page .entry-header .edit-link { font-size: 14px; font-size: 0.875rem; } .search .page .entry-header .edit-link { font-size: 11px; font-size: 0.6875rem; } .page-links { clear: both; margin: 0 0 1.5em; } .page:not(.home) #content { padding-bottom: 30px; } /* 404 page */ .error404 .page-content { padding-bottom: 4em; } .error404 .page-content .search-form, .search .page-content .search-form { margin-bottom: 3em; } /*-------------------------------------------------------------- 13.6 Footer --------------------------------------------------------------*/ .site-footer { -moz-box-shadow: inset 0 15px 30px -15px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 15px 30px -15px rgba(0,0,0,0.1); box-shadow: inset 0 15px 30px -15px rgba(0,0,0,0.1); } .site-footer .wrap { padding-top: 30px; } /* Social nav */ .social-navigation { font-size: 16px; font-size: 1rem; margin-bottom: 1em; } .social-navigation ul { list-style: none; margin-bottom: 0; margin-left: 0; } .social-navigation li { display: inline; } .social-navigation a { background-color: #767676; -webkit-border-radius: 40px; border-radius: 40px; color: #fff; display: inline-block; height: 40px; margin: 0 1em 0.5em 0; text-align: center; width: 40px; } .social-navigation a:hover, .social-navigation a:focus { background-color: #333; } .social-navigation .icon { height: 16px; top: 12px; width: 16px; vertical-align: top; } /* Site info */ .site-info { font-size: 14px; font-size: 0.875rem; margin-bottom: 1em; } .site-info a { color: #666; } .site-info .sep { margin: 0; display: block; visibility: hidden; height: 0; width: 100%; } .site-footer h2, .site-footer h2.widget-title { font-size: 21px; font-size: 1.313em; font-weight: 300; line-height: 24px; line-height: 1.143em; letter-spacing: normal; text-transform: none; } .site-footer h2:before, .site-footer h2.widget-title:before { height: 20px; display:inline-block; width: 3px; background: #F8A41A; content: ''; margin-bottom: -5px; margin-right: 15px; } .site-footer h2:after, .site-footer h2.widget-title:after { display:none; } /*-------------------------------------------------------------- 14.0 Comments --------------------------------------------------------------*/ #comments { clear: both; padding: 2em 0 0.5em; } .comments-title { font-size: 20px; font-size: 1.25rem; margin-bottom: 1.5em; } .comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; } .comment-list li:before { display: none; } .comment-body { margin-left: 65px; } .comment-author { font-size: 16px; font-size: 1rem; margin-bottom: 0.4em; position: relative; z-index: 2; } .comment-author .avatar { height: 50px; left: -65px; position: absolute; width: 50px; } .comment-author .says { display: none; } .comment-meta { margin-bottom: 1.5em; } .comment-metadata { color: #767676; font-size: 10px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1818em; text-transform: uppercase; } .comment-metadata a { color: #767676; } .comment-metadata a.comment-edit-link { color: #222; margin-left: 1em; } .comment-body { color: #333; font-size: 14px; font-size: 0.875rem; margin-bottom: 4em; } .comment-reply-link { font-weight: 800; position: relative; } .comment-reply-link .icon { color: #222; left: -2em; height: 1em; position: absolute; top: 0; width: 1em; } .children .comment-author .avatar { height: 30px; left: -45px; width: 30px; } .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar { border: 1px solid #333; padding: 2px; } .no-comments, .comment-awaiting-moderation { color: #767676; font-size: 14px; font-size: 0.875rem; font-style: italic; } .comments-pagination { margin: 2em 0 3em; } .form-submit { text-align: right; } /*-------------------------------------------------------------- 15.0 Widgets --------------------------------------------------------------*/ #secondary { padding: 0 0 1em; } h2.widget-title { color: #222; font-size: 14px; font-size: 0.875em; font-weight: 700; letter-spacing: .5px; margin-bottom: 1.5em; } .widget-title a { color: inherit; } /* widget forms */ .widget select { width: 100%; } /* widget lists */ /* .widget ul { list-style: none; margin: 0; } .widget ul li, .widget ol li { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; padding: 0.5em 0; } .widget ul li + li { margin-top: -1px; } .widget ul li ul { margin: 0 0 -1px; padding: 0; position: relative; } .widget ul li li { border: 0; padding-left: 24px; padding-left: 1.5rem; } */ /* Widget lists of links */ .widget_top-posts ul li ul, .widget_rss_links ul li ul, .widget-grofile ul.grofile-links li ul, .widget_pages ul li ul, .widget_meta ul li ul { bottom: 0; } .widget_nav_menu ul li li, .widget_top-posts ul li, .widget_top-posts ul li li, .widget_rss_links ul li, .widget_rss_links ul li li, .widget-grofile ul.grofile-links li, .widget-grofile ul.grofile-links li li { padding-bottom: 0.25em; padding-top: 0.25em; } .widget_rss ul li { padding-bottom: 1em; padding-top: 1em; } /* widget markup */ .widget .post-date, .widget .rss-date { font-size: 0.81em; } /* Text widget */ .widget_text { word-wrap: break-word; } .widget_text ul { list-style: disc; margin: 0 0 1.5em 1.5em; } .widget_text ol { list-style: decimal; } .widget_text ul li, .widget_text ol li { border: none; } .widget_text ul li:last-child, .widget_text ol li:last-child { padding-bottom: 0; } .widget_text ul li ul { margin: 0 0 0 1.5em; } .widget_text ul li li { padding-left: 0; padding-right: 0; } .widget_text ol li { list-style-position: inside; } .widget_text ol li + li { margin-top: -1px; } /* RSS Widget */ .widget_rss .widget-title .rsswidget:first-child { float: right; } .widget_rss .widget-title .rsswidget:first-child:hover { background-color: transparent; } .widget_rss .widget-title .rsswidget:first-child img { display: block; } .widget_rss ul li { padding: 2.125em 0; } .widget_rss ul li:first-child { border-top: none; padding-top: 0; } .widget_rss li .rsswidget { font-size: 22px; font-size: 1.375rem; font-weight: 300; line-height: 1.4; } .widget_rss .rss-date, .widget_rss li cite { color: #767676; display: block; font-size: 10px; font-size: 0.625rem; font-style: normal; font-weight: 800; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; } .widget_rss .rss-date { margin: 0.5em 0 1.5em; padding: 0; } .widget_rss .rssSummary { margin-bottom: 0.5em; } /* Contact Info Widget */ .widget_contact_info .contact-map { margin-bottom: 0.5em; } /* Gravatar */ .widget-grofile h4 { font-size: 16px; font-size: 1rem; margin-bottom: 0; } /* Recent Comments */ .widget_recent_comments table, .widget_recent_comments th, .widget_recent_comments td { border: 0; } /* Recent Posts widget */ .widget_recent_entries .post-date { display: block; } /* Search */ .search-form { position: relative; } .search-form .search-submit { bottom: 3px; padding: 0.5em 1em; position: absolute; right: 3px; top: 3px; } .search-form .search-submit .icon { height: 24px; top: -2px; width: 24px; } /* Tag cloud widget */ .tagcloud, .widget_tag_cloud, .wp_widget_tag_cloud { line-height: 1.5; } .widget .tagcloud a, .widget.widget_tag_cloud a, .wp_widget_tag_cloud a { border: 1px solid #ddd; -webkit-box-shadow: none; box-shadow: none; display: inline-block; float: left; font-size: 14px !important; /* !important to overwrite inline styles */ font-size: 0.875rem !important; margin: 4px 4px 0 0 !important; padding: 4px 10px 5px !important; position: relative; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; width: auto; word-wrap: break-word; z-index: 0; } .widget .tagcloud a:hover, .widget .tagcloud a:focus, .widget.widget_tag_cloud a:hover, .widget.widget_tag_cloud a:focus, .wp_widget_tag_cloud a:hover, .wp_widget_tag_cloud a:focus { border-color: #bbb; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; } /* Calendar widget */ .widget_calendar th, .widget_calendar td { text-align: center; } .widget_calendar tfoot td { border: 0; } /*-------------------------------------------------------------- 16.0 Media --------------------------------------------------------------*/ img, video { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } img.alignleft, img.alignright { float: none; margin: 0; } .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { margin-bottom: 1.5em; max-width: 100%; } .wp-caption, .gallery-caption { color: #666; font-size: 13px; font-size: 0.8125rem; font-style: italic; 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; } /* Media Elements */ .mejs-container { margin-bottom: 1.5em; } /* Audio Player */ .mejs-controls a.mejs-horizontal-volume-slider, .mejs-controls a.mejs-horizontal-volume-slider:focus, .mejs-controls a.mejs-horizontal-volume-slider:hover { background: transparent; border: 0; } /* Playlist Color Overrides: Light */ .site-content .wp-playlist-light { border-color: #eee; color: #222; } .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album { color: #333; } .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist { color: #767676; } .site-content .wp-playlist-light .wp-playlist-item { border-bottom: 1px dotted #eee; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; } .site-content .wp-playlist-light .wp-playlist-item:hover, .site-content .wp-playlist-light .wp-playlist-item:focus { border-bottom-color: rgba(0, 0, 0, 0); background-color: #767676; color: #fff; } .site-content .wp-playlist-light a.wp-playlist-caption:hover, .site-content .wp-playlist-light .wp-playlist-item:hover a, .site-content .wp-playlist-light .wp-playlist-item:focus a { color: #fff; } /* Playlist Color Overrides: Dark */ .site-content .wp-playlist-dark { background: #222; border-color: #333; } .site-content .wp-playlist-dark .mejs-container .mejs-controls { background-color: #333; } .site-content .wp-playlist-dark .wp-playlist-caption { color: #fff; } .site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album { color: #eee; } .site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist { color: #aaa; } .site-content .wp-playlist-dark .wp-playlist-playing { background-color: #333; } .site-content .wp-playlist-dark .wp-playlist-item { border-bottom: 1px dotted #555; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; } .site-content .wp-playlist-dark .wp-playlist-item:hover, .site-content .wp-playlist-dark .wp-playlist-item:focus { border-bottom-color: rgba(0, 0, 0, 0); background-color: #aaa; color: #222; } .site-content .wp-playlist-dark a.wp-playlist-caption:hover, .site-content .wp-playlist-dark .wp-playlist-item:hover a, .site-content .wp-playlist-dark .wp-playlist-item:focus a { color: #222; } /* Playlist Style Overrides */ .site-content .wp-playlist { padding: 0.625em 0.625em 0.3125em; } .site-content .wp-playlist-current-item .wp-playlist-item-title { font-weight: 700; } .site-content .wp-playlist-current-item .wp-playlist-item-album { font-style: normal; } .site-content .wp-playlist-current-item .wp-playlist-item-artist { font-size: 10px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1818em; text-transform: uppercase; } .site-content .wp-playlist-item { padding: 0 0.3125em; cursor: pointer; } .site-content .wp-playlist-item:last-of-type { border-bottom: none; } .site-content .wp-playlist-item a { padding: 0.3125em 0; border-bottom: none; } .site-content .wp-playlist-item a, .site-content .wp-playlist-item a:focus, .site-content .wp-playlist-item a:hover { -webkit-box-shadow: none; box-shadow: none; background: transparent; } .site-content .wp-playlist-item-length { top: 5px; } /* SVG Icons base styles */ .icon { display: inline-block; fill: currentColor; height: 1em; position: relative; /* Align more nicely with capital letters */ top: -0.0625em; vertical-align: middle; width: 1em; } /*-------------------------------------------------------------- 16.1 Galleries --------------------------------------------------------------*/ .gallery-item { display: inline-block; text-align: center; vertical-align: top; margin: 0; padding: 0; width: 50%; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } /* .gallery-item a, .gallery-item a:hover, .gallery-item a:focus { -webkit-box-shadow: none; box-shadow: none; background: none; display: inline-block; max-width: 100%; } .gallery-item a img { display: block; -webkit-transition: -webkit-filter 0.2s ease-in; transition: -webkit-filter 0.2s ease-in; transition: filter 0.2s ease-in; transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .gallery-item a:hover img, .gallery-item a:focus img { -webkit-filter: opacity(60%); filter: opacity(60%); } */ .gallery-caption { display: block; text-align: left; padding: 0 10px 10px; margin-bottom: 0; } /*jer*/ .entry-content .gallery-item { margin: 0 -2px; width: 33%; } .entry-content .gallery-item a{ display: block; border: 1px solid transparent; } .entry-content .gallery-item a:hover{ border: 1px solid #F2F2F2; -moz-box-shadow: 0 15px 30px -5px #F2F2F2; -webkit-box-shadow: 0 15px 30px -5px #F2F2F2; box-shadow: 0 15px 30px -5px #F2F2F2; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .entry-content .gallery-item div, .entry-content .gallery-item a{ display: flex; align-items: center; justify-content: center; height: 15vw; min-height: 60px; max-height: 120px; padding: 10%; } .entry-content .gallery-item img { max-height: 100%; width: auto; } /*-------------------------------------------------------------- 17.0 Customizer --------------------------------------------------------------*/ .highlight-front-sections.gourmetasia-customizer.gourmetasia-front-page .gourmetasia-panel:after { border: 2px dashed #0085ba; /* Matches visible edit shortcuts. */ bottom: 1em; content: ""; display: block; left: 1em; position: absolute; right: 1em; top: 1em; z-index: 1; } .highlight-front-sections.gourmetasia-customizer.gourmetasia-front-page .gourmetasia-panel .panel-content { z-index: 2; /* Prevent :after from preventing interactions within the section */ } /* Used for placeholder text */ .gourmetasia-customizer.gourmetasia-front-page .gourmetasia-panel .gourmetasia-panel-title { display: block; font-size: 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; padding: 3em; text-transform: uppercase; text-align: center; } /* Show borders on the custom page panels only when the front page sections are being edited */ .highlight-front-sections.gourmetasia-customizer.gourmetasia-front-page .gourmetasia-panel:nth-of-type(1):after { border: none; } .gourmetasia-front-page.gourmetasia-customizer #primary article.panel-placeholder { border: 0; } /* Add some space around the visual edit shortcut buttons. */ .gourmetasia-panel .customize-partial-edit-shortcut button { top: 30px; left: 30px; } /* Ensure that placeholder icons are visible. */ .gourmetasia-panel .customize-partial-edit-shortcut-hidden:before { visibility: visible; } /*-------------------------------------------------------------- 18.0 SVGs Fallbacks --------------------------------------------------------------*/ .svg-fallback { display: none; } .no-svg .svg-fallback { display: inline-block; } .no-svg .dropdown-toggle { padding: 0.5em 0 0; right: 0; text-align: center; width: 2em; } .no-svg .dropdown-toggle .svg-fallback.icon-angle-down { font-size: 20px; font-size: 1.25rem; font-weight: 400; line-height: 1; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ -ms-transform: rotate(180deg); /* IE 9 */ transform: rotate(180deg); } .no-svg .dropdown-toggle.toggled-on .svg-fallback.icon-angle-down { -webkit-transform: rotate(0); /* Chrome, Safari, Opera */ -ms-transform: rotate(0); /* IE 9 */ transform: rotate(0); } .no-svg .dropdown-toggle .svg-fallback.icon-angle-down:before { content: "\005E"; } /* Social Menu fallbacks */ .no-svg .social-navigation a { background: transparent; color: #222; height: auto; width: auto; } .icon-angle-down{ margin-left: -3px} /* Show screen reader text in some cases */ .no-svg .next.page-numbers .screen-reader-text, .no-svg .prev.page-numbers .screen-reader-text, .no-svg .social-navigation li a .screen-reader-text, .no-svg .search-submit .screen-reader-text { clip: auto; font-size: 16px; font-size: 1rem; font-weight: 400; height: auto; position: relative !important; /* overrides previous !important styles */ width: auto; } /*-------------------------------------------------------------- 19.0 Media Queries --------------------------------------------------------------*/ /* Adjust positioning of edit shortcuts, override style in customize-preview.css */ @media screen and (min-width: 20em) { body.customize-partial-edit-shortcuts-shown .site-header .site-title { padding-left: 0; } } @media screen and (min-width: 30em) { /* Typography */ /* body, button, input, select, textarea { font-size: 16px; font-size: 1em; } h1 { font-size: 36px; font-size: 2.250em; } h2, .home.blog .entry-title, .page .panel-content .recent-posts .entry-title { font-size: 21px; font-size: 1.313em; } h3 { font-size: 22px; font-size: 1.375rem; } h4 { font-size: 18px; font-size: 1.125rem; } h5 { font-size: 13px; font-size: 0.8125rem; } h6 { font-size: 16px; font-size: 1rem; } .entry-content blockquote.alignleft, .entry-content blockquote.alignright { font-size: 14px; font-size: 0.875rem; } */ /* Fix image alignment */ img.alignleft { float: left; margin-right: 1.5em; } img.alignright { float: right; margin-left: 1.5em; } /* Site Branding */ .site-branding { padding: 0; } /* Front Page */ .page-one-column .panel-content .wrap { max-width: 990px; padding-left: 15px; padding-right: 15px; } .panel-content .entry-header { margin-bottom: 4.5em; } .panel-content .recent-posts .entry-header { margin-bottom: 0; } /* Blog Index, Archive, Search */ .taxonomy-description { font-size: 14px; font-size: 0.875rem; } .page-numbers.current { font-size: 16px; font-size: 1rem; } /* Site Footer */ .site-footer { font-size: 16px; font-size: 1rem; } /* Gallery Columns */ .gallery-item { max-width: 25%; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } } @media screen and (min-width: 900px) { /* Main Navigation */ .js .menu-toggle, .js .dropdown-toggle { display: none; } .main-navigation { width: auto; } .js .main-navigation ul, .js .main-navigation ul ul, .js .main-navigation > div > ul { display: block; } .main-navigation ul { background: transparent; border: 0; margin-bottom: 0; padding: 0; } .main-navigation li { border: 0; display: inline-block; } .main-navigation li li { display: block; } .main-navigation a { padding: 1.125em 0.8125em; } .main-navigation ul ul { background: rgba(255, 255, 255, 0.95); border-top: 1px solid #F2F2F2; left: -999em; padding: 0; position: absolute; top: 100%; z-index: 99999; -webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.5); -moz-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.5); box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.5); } .main-navigation ul li.menu-item-has-children:before, .main-navigation ul li.menu-item-has-children:after, .main-navigation ul li.page_item_has_children:before, .main-navigation ul li.page_item_has_children:after { border-style: solid; border-width: 0 6px 6px; content: ""; display: none; height: 0; position: absolute; left: 50%; left: calc(50% - 3px); bottom: -1px; width: 0; z-index: 100000; } .main-navigation ul li.menu-item-has-children.focus:before, .main-navigation ul li.menu-item-has-children:hover:before, .main-navigation ul li.menu-item-has-children.focus:after, .main-navigation ul li.menu-item-has-children:hover:after, .main-navigation ul li.page_item_has_children.focus:before, .main-navigation ul li.page_item_has_children:hover:before, .main-navigation ul li.page_item_has_children.focus:after, .main-navigation ul li.page_item_has_children:hover:after { display: block; } .main-navigation ul li.menu-item-has-children:before, .main-navigation ul li.page_item_has_children:before { border-color: transparent transparent #bbb; bottom: 0; } .main-navigation ul li.menu-item-has-children:after, .main-navigation ul li.page_item_has_children:after { border-color: transparent transparent #fff; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; right: auto; } .main-navigation ul ul a { padding: 0.8125em; } .main-navigation li li { -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; } .main-navigation .sub-menu li a:after { display: none; } .main-navigation li li:hover, .main-navigation li li.focus { /* background: #767676;*/ } .main-navigation li li a { -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .main-navigation li li.focus > a, .main-navigation li li:focus > a, .main-navigation li li:hover > a, .main-navigation li li a:hover, .main-navigation li li a:focus, .main-navigation li li.current_page_item a:hover, .main-navigation li li.current-menu-item a:hover, .main-navigation li li.current_page_item a:focus, .main-navigation li li.current-menu-item a:focus { /* color: #fff;*/ } .main-navigation ul ul{ opacity: 0; visibility: hidden; -webkit-transition: opacity 200ms, visibility 200ms; transition: opacity 200ms, visibility 200ms; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { opacity: 1; visibility: visible; left: -100px; right: -100px; } .main-navigation .menu-item-has-children > a > .icon, .main-navigation .page_item_has_children > a > .icon { display: inline; left: 5px; position: relative; top: -1px; } .main-navigation ul ul .menu-item-has-children > a > .icon, .main-navigation ul ul .page_item_has_children > a > .icon { margin-top: -9px; left: auto; position: absolute; right: 1em; top: 50%; -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ -ms-transform: rotate(-90deg); /* IE 9 */ transform: rotate(-90deg); } .main-navigation ul ul ul { left: -999em; margin-top: -1px; top: 0; width: 100%; } .main-navigation ul ul li.menu-item-has-children.focus:before, .main-navigation ul ul li.menu-item-has-children:hover:before, .main-navigation ul ul li.menu-item-has-children.focus:after, .main-navigation ul ul li.menu-item-has-children:hover:after, .main-navigation ul ul li.page_item_has_children.focus:before, .main-navigation ul ul li.page_item_has_children:hover:before, .main-navigation ul ul li.page_item_has_children.focus:after, .main-navigation ul ul li.page_item_has_children:hover:after { display: none; } .site-header .site-navigation-fixed .menu-scroll-down { display: none; } /* Scroll down arrow */ .site-header .menu-scroll-down { display: block; padding: 1em; position: absolute; right: 0; } .site-header .menu-scroll-down .icon { -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ -ms-transform: rotate(90deg); /* IE 9 */ transform: rotate(90deg); } .site-header .menu-scroll-down { color: #fff; top: 2em; } .site-header .navigation-top .menu-scroll-down { color: #767676; top: 0.7em; } .menu-scroll-down:focus { outline: thin dotted; } .menu-scroll-down .icon { height: 18px; width: 18px; } } @media screen and (min-width: 48em) { /* Typography */ body, button, input, select, textarea { } .entry-content blockquote.alignleft, .entry-content blockquote.alignright { font-size: 13px; font-size: 0.8125rem; } /* Layout */ .wrap { max-width: 1020px; padding-left: 15px; padding-right: 15px; } .has-sidebar:not(.error404) #primary { float: left; width: 74.242424242424242%; } .has-sidebar #secondary { float: right; padding: 0 0 1em ; width: 22.7272727272727%; } .error404 #primary { float: none; } /* Site Branding */ .site-branding { margin-bottom: 0; } .has-header-image.gourmetasia-front-page .site-branding, .has-header-video.gourmetasia-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding { bottom: 0; display: block; left: 0; height: auto; padding-top: 0; position: absolute; width: 100%; } .has-header-image.gourmetasia-front-page .custom-header, .has-header-video.gourmetasia-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header { display: block; height: auto; } .custom-header-media { height: 165px; position: relative; } .gourmetasia-front-page.has-header-image .custom-header-media, .gourmetasia-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media { height: 0; position: relative; } .has-header-image:not(.gourmetasia-front-page):not(.home) .custom-header-media, .has-header-video:not(.gourmetasia-front-page):not(.home) .custom-header-media { bottom: 0; height: auto; left: 0; position: absolute; right: 0; top: 0; } .custom-logo-link { padding-right: 2em; } .custom-logo-link img, body.home.title-tagline-hidden.has-header-image .custom-logo-link img, body.home.title-tagline-hidden.has-header-video .custom-logo-link img { max-width: 350px; } .title-tagline-hidden.home.has-header-image .custom-logo-link img, .title-tagline-hidden.home.has-header-video .custom-logo-link img { max-height: 200px; } .site-title { font-size: 36px; font-size: 2.25rem; } .site-description { font-size: 16px; font-size: 1rem; } /* Navigation */ .navigation-top { } .navigation-top .wrap { } .navigation-top nav { margin-left: -1.25em; } .site-navigation-fixed.navigation-top { bottom: auto; position: fixed; left: 0; right: 0; top: 0; width: 100%; z-index: 7; } .admin-bar .site-navigation-fixed.navigation-top { top: 32px; } /* Front Page */ .gourmetasia-front-page.has-header-image .site-branding, .gourmetasia-front-page.has-header-video .site-branding, .home.blog.has-header-image .site-branding, .home.blog.has-header-video .site-branding { margin-bottom: 70px; } .gourmetasia-front-page.has-header-image .custom-header-media, .gourmetasia-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media { height: 1200px; height: 100vh; max-height: 100%; overflow: hidden; } .gourmetasia-front-page.has-header-image .custom-header-media:before, .gourmetasia-front-page.has-header-video .custom-header-media:before, .home.blog.has-header-image .custom-header-media:before, .home.blog.has-header-video .custom-header-media:before { height: 33%; } .admin-bar.gourmetasia-front-page.has-header-image .custom-header-media, .admin-bar.gourmetasia-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media { height: calc(100vh - 32px); } .panel-content .wrap { padding-bottom:0; padding-top: 0; } .panel-image { height: 100vh; max-height: 1200px; } /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */ .background-fixed .panel-image { background-attachment: fixed; } .page-two-column .panel-content .entry-header { float: left; width: 36%; } .page-two-column .panel-content .entry-content { float: right; width: 58%; } /* Front Page - Recent Posts */ .page-two-column .panel-content .recent-posts { clear: right; float: right; width: 58%; } .panel-content .recent-posts article { margin-bottom: 4em; } .panel-content .recent-posts .entry-header, .page-two-column #primary .panel-content .recent-posts .entry-header, .panel-content .recent-posts .entry-content, .page-two-column #primary .panel-content .recent-posts .entry-content { float: none; width: 100%; } .panel-content .recent-posts .entry-header { margin-bottom: 1.5em; } .page .panel-content .recent-posts .entry-title { font-size: 26px; font-size: 1.625rem; } /* Posts */ .single-post .entry-title, .page .entry-title { font-size: 26px; font-size: 1.625rem; } .comments-pagination, .post-navigation { clear: both; } .post-navigation .nav-previous { float: left; width: 50%; } .post-navigation .nav-next { float: right; text-align: right; width: 50%; } .nav-next, .post-navigation .nav-next { margin-top: 0; } /* Blog, archive, search */ .sticky .icon-thumb-tack { height: 23px; left: -2.5em; top: 1.5em; width: 32px; } body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header { float: left; width: 36%; } .blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments { float: right; width: 58%; } .blog .site-main > article, .archive .site-main > article, .search .site-main > article { padding-bottom: 4em; } .navigation.pagination { clear: both; float: right; width: 58%; } .has-sidebar .navigation.pagination, .archive.page-one-column:not(.has-sidebar) .navigation.pagination { float: none; width: 100%; } .entry-footer { display: table; width: 100%; } .entry-footer .cat-tags-links { display: table-cell; vertical-align: middle; width: 100%; } .entry-footer .edit-link { display: table-cell; text-align: right; vertical-align: middle; } .entry-footer .edit-link a.post-edit-link { margin-top: 0; margin-left: 1em; } /* Entry content */ /* without sidebar */ :not(.has-sidebar) .entry-content blockquote.alignleft { margin-left: -17.5%; width: 48%; } :not(.has-sidebar) .entry-content blockquote.alignright { margin-right: -17.5%; width: 48%; } /* with sidebar */ .has-sidebar .entry-content blockquote.alignleft { margin-left: 0; width: 34%; } .has-sidebar .entry-content blockquote.alignright { margin-right: 0; width: 34%; } .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta { margin-right: -72.5%; width: 62%; } /* blog and archive */ .blog:not(.has-sidebar) .entry-content blockquote.alignleft, .gourmetasia-front-page.page-two-column .entry-content blockquote.alignleft, .archive:not(.has-sidebar) .entry-content blockquote.alignleft, .page-two-column .entry-content blockquote.alignleft { margin-left: -72.5%; width: 62%; } .blog:not(.has-sidebar) .entry-content blockquote.alignright, .gourmetasia-front-page.page-two-column .entry-content blockquote.alignright, .archive:not(.has-sidebar) .entry-content blockquote.alignright, .page-two-column .entry-content blockquote.alignright { margin-right: 0; width: 36%; } /* Post formats */ .format-quote blockquote .icon { left: -1.5em; } /* Pages */ .page.page-one-column .entry-header, .gourmetasia-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header { margin-bottom: 4em; } .page:not(.home) #content { padding-bottom: 0; } /* 404 page */ .error404 .page-content { padding-bottom: 9em; } /* Comments */ #comments { padding-top: 5em; } .comments-title { margin-bottom: 2.5em; } ol.children .children { padding-left: 2em; } /* Posts pagination */ .nav-links .nav-title { position: relative; } .nav-title-icon-wrapper { position: absolute; text-align: center; width: 2em; } .nav-links .nav-previous .nav-title .nav-title-icon-wrapper { left: -2em; } .nav-links .nav-next .nav-title .nav-title-icon-wrapper { right: -2em; } /* Secondary */ #secondary { } /* Widgets */ h2.widget-title { margin-bottom: 2em; } /* Footer */ .site-footer { } .home .site-footer { margin-top: 0 } .social-navigation { clear: left; float: left; margin-bottom: 0; width: 36%; } .site-info { float: left; padding: 0.7em 0 0; width: 58%; } .social-navigation + .site-info { margin-left: 6%; } .site-info .sep { margin: 0 0.5em; display: inline; visibility: visible; height: auto; width: auto; } /* Gallery Columns */ .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } } @media screen and ( min-width: 1000px ) { html[lang="en-US"] .main-navigation a { padding: 1.125em 1.125em; } } @media screen and ( min-width: 67em ) { /* Layout */ /* Navigation */ .navigation-top .wrap { padding: 0 2em; } .navigation-top nav { margin-left: 0; } /* Sticky posts */ .sticky .icon-thumb-tack { font-size: 32px; font-size: 2rem; height: 22px; left: -1.25em; top: 0.75em; width: 32px; } /* Pagination */ .page-numbers { display: inline-block; } .page-numbers.current { font-size: 15px; font-size: 0.9375rem; } .page-numbers.current .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } /* Comments */ .comment-body { margin-left: 0; } } @media screen and ( min-width: 79em ) { .has-sidebar .entry-content blockquote.alignleft { margin-left: -20%; } .blog:not(.has-sidebar) .entry-content blockquote.alignright, .archive:not(.has-sidebar) .entry-content blockquote.alignright, .page-two-column .entry-content blockquote.alignright, .gourmetasia-front-page .entry-content blockquote.alignright { margin-right: -20%; } } @media screen and ( max-width: 48.875em ) and ( min-width: 48em ) { .admin-bar .site-navigation-fixed.navigation-top, .admin-bar .site-navigation-hidden.navigation-top { top: 46px; } } /*-------------------------------------------------------------- 20.0 Print --------------------------------------------------------------*/ @media print { /* Hide elements */ form, button, input, select, textarea, .navigation-top, .social-navigation, #secondary, .content-bottom-widgets, .header-image, .panel-image-prop, .icon-thumb-tack, .page-links, .edit-link, .post-navigation, .pagination.navigation, .comments-pagination, .comment-respond, .comment-edit-link, .comment-reply-link, .comment-metadata .edit-link, .pingback .edit-link, .site-footer aside.widget-area, .site-info { display: none !important; } .entry-footer, #comments, .site-footer, .single-featured-image-header { border: 0; } /* Font sizes */ body { font-size: 12pt; } h1 { font-size: 24pt; } h2 { font-size: 22pt; } h3 { font-size: 17pt; } h4 { font-size: 12pt; } h5 { font-size: 11pt; } h6 { font-size: 12pt; } .page .panel-content .entry-title, .page-title, body.page:not(.gourmetasia-front-page) .entry-title { font-size: 10pt; } /* Layout */ .wrap { padding-left: 5% !important; padding-right: 5% !important; max-width: none; } /* Site Branding */ .site-header { background: transparent; padding: 0; } .custom-header-media { padding: 0; } .gourmetasia-front-page.has-header-image .site-branding, .gourmetasia-front-page.has-header-video .site-branding, .home.blog.has-header-image .site-branding, .home.blog.has-header-video .site-branding { position: relative; } .site-branding { margin-top: 0; margin-bottom: 1.75em !important; /* override styles added by JavaScript */ } .site-title { font-size: 25pt; } .site-description { font-size: 12pt; opacity: 1; } /* Posts */ .entry-meta { font-size: 9pt; } /* Colors */ body, .site { background: none !important; /* Brute force since user agents all print differently. */ } body, a, .site-title a, .gourmetasia-front-page.has-header-image .site-title, .gourmetasia-front-page.has-header-video .site-title, .gourmetasia-front-page.has-header-image .site-title a, .gourmetasia-front-page.has-header-video .site-title a { color: #222 !important; /* Make sure color schemes don't affect to print */ } h2, h5, blockquote, .site-description, .gourmetasia-front-page.has-header-image .site-description, .gourmetasia-front-page.has-header-video .site-description, .entry-meta, .entry-meta a { color: #777 !important; /* Make sure color schemes don't affect to print */ } .entry-content blockquote.alignleft, .entry-content blockquote.alignright { font-size: 11pt; width: 34%; } .site-footer { padding: 0; } } /*Jer*/ .site-title,.site-description { position: absolute; clip: rect(1px, 1px, 1px, 1px); } .home .entry-header{display: none} .inner-shadow{ -moz-box-shadow: inset 0 15px 30px -15px rgba(0,0,0,0.25), inset 0 -15px 30px -15px rgba(0,0,0,0.25); -webkit-box-shadow: inset 0 15px 30px -15px rgba(0,0,0,0.25), inset 0 -15px 30px -15px rgba(0,0,0,0.25); box-shadow: inset 0 15px 30px -15px rgba(0,0,0,0.25), inset 0 -15px 30px -15px rgba(0,0,0,0.25); } .shadow-top{ -moz-box-shadow: 0 -15px 30px -15px rgba(0,0,0,0.1); -webkit-box-shadow: 0 -15px 30px -15px rgba(0,0,0,0.1); box-shadow: 0 -15px 30px -15px rgba(0,0,0,0.1); } .site-footer{ background: url(../images/footer-bg.png) no-repeat center bottom; background-size: 340px 120px; padding-bottom: 90px; } .site-footer table{ margin-bottom: 0; } .kc-container, .fadeBanner .kc_column_inner{padding-right:0!important;padding-left:0!important} /* .kc_column{padding-right:0!important;padding-left:0!important} .kc_column_inner{padding-right:0!important;padding-left:0!important} .kc_row_inner{margin-left:0!important;margin-right:0!important;clear:both} .kc_row.kc_row_inner{width:100%!important}*/ .owl-theme .owl-controls{ margin-top: 10px !important; } .kc-button-main a{ min-width: 145px; } .featured-brands .item{padding: 0 15px; max-width: 255px } .featured-brands {max-width: 765px; margin: 0 auto} .absolute-top-left {position: absolute; left: 15px; width: 100px; display: run-in} @media screen and ( max-width: 940px ){ .absolute-top-left { display: none } } @media screen and (min-width: 415px) and (max-width: 767px){ /* iPhone < WIDTH < iPad */ .col-4 .kc_col-sm-3{width: 50%!important} } /* .our-exhibitors-carousel .owl-item .item{line-height:95px;text-align:center;max-height:95px;padding:0 10px}*/ /*for jquery fail*/ /* .featured-brands .item, .our-exhibitors-carousel .item{ text-align: center; } .our-exhibitors-carousel .item img,.our-exhibitors-carousel .owl-wrapper-outer .owl-wrapper .owl-item img{vertical-align:middle;max-height:75px;width:auto} */ .slideshow-exhibitors{ } .slideshow-exhibitors .gallery-item a:hover{ border: 1px solid transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @media screen and (min-width: 768px) { .slideshow-exhibitors{ height: 120px; } } /**/ .slideshow-featured{ max-width: 765px; margin: 0 auto !important; float: none!important; } .slideshow-featured .gallery-item, .slideshow-featured .gallery-item div, .slideshow-featured .gallery-item a{ max-width: 100%; height: auto!important; min-height: 60px; max-height: none; padding: 0 10px; } .slideshow-featured .gallery-item a{ padding: 0; } .slideshow-featured .gallery-item a:hover{ border: 1px solid transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @media screen and (max-width: 480px) { .slideshow-featured .gallery-item{ width: 50%!important; } } .homeSketches-1{ position: absolute ; width: 260px; top: -60px; right: -150px; z-index:0} .homeSketches-2{ position: absolute ; width: 260px; top: -60px; left:-150px; z-index:0} .homeSketches-1, .homeSketches-2{ -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; } @media screen and (max-width: 414px){ /*iphone*/ .homeSketches-1{ width: 220px; right: -135px} .homeSketches-2{ width: 220px; left: -135px; } } /*fix kingcomposer.min.css safari cannot transit position and opacity together*/ .fadeBanner .image_fadein_slider img.active { position: absolute !important; -webkit-transform: translateZ(0px);/* fix css transit cause safari text render antialiasing problem*/ } .gaTheme{ position: absolute !important; z-index: 1; height: 100%; left: 0; right: 0; /* display: flex; justify-content: center; align-items: center; */ } .gaTheme img{ position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; max-width: 100%; height: auto; /*fix*/ } .fadeBanner .image_fadein_slider{ height: 440px; overflow: hidden; } .fadeBanner .image_fadein{ /*this do parallax*/ height: 100%; position: relative; } .fadeBanner .image_fadein img{ /* width: 100%; height: 100%; object-fit: cover; object-position: center center; */ /*above IE not work*/ position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; /*cover*/ max-width: none!important; /*override kc*/ } .single-featured-image-header{ height: 320px; overflow: hidden; } .single-featured-image-header img{ width: 100%; min-height: 320px; object-fit:cover; opacity: 0; } /* Icon 1 */ #nav-icon3{ height: 60px; width: 25px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; overflow: hidden; position: relative; } #nav-icon3 span{ display: block; position: absolute; height: 3px; width: 100%; /* background: #d3531a;*/ background: #ffffff; border-radius: 3px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } /* Icon 3 */ #nav-icon3 span:nth-child(1) { top: 19px; } #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 28px; } #nav-icon3 span:nth-child(4) { top: 37px; } #nav-icon3.open span:nth-child(1) { top: 28px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -ms-transform:rotate(45deg); } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform:rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 23px; width: 0%; left: 50%; } /*Jer add for CP form*/ #fbuilder{ max-width: 690px; padding-left: 30px; margin-right: 30px; background: #fafafa; } #fbuilder div.fields { width: 50%; padding-right: 30px; float: left; } @media screen and (max-width: 414px){ /*iphone*/ #fbuilder div.fields { width: 100%; } #fbuilder{ margin-right: 0; } } #fbuilder div.full-row{ width: 100%; } #fbuilder textarea{padding-left:5px !important;padding-right:5px !important;} #fbuilder div.fields .medium{padding-left:5px !important;padding-right:5px !important;} #fbuilder .uh_phone{margin:0px!important; width: 100%;} #fbuilder .uh_phone input{ width: 50% !important; line-height: 24px; } #fbuilder div.fields.new-row, #fbuilder div.captcha, #fbuilder .pbSubmit, #fbuilder .pbreak{ clear: both; display: block; overflow: auto; } #fbuilder div.captcha p{ margin-bottom: 0; } #fbuilder div.l{ display: none; } #fbuilder label { font-size: 14px; margin-right: 15px; } #fbuilder .captcha .dfield{ width: 50%; padding-right: 10px; } #fbuilder .captcha img{ max-width: 30%; margin-bottom: 10px; } #fbuilder .captcha .dfield input{ width: 50%; } #fbuilder .r{ color: #F9A51A; padding-left: 2px; } #fbuilder .uh .cpefb_error{margin-top:0;font-size:16px} #fbuilder .captcha .cpefb_error{margin-top:10px} #fbuilder div.cpefb_error{border:1px solid #F8A41A!important} @media screen and (max-width: 640px){ #fbuilder div.full-row{ width: 100%; } #fbuilder .uh_phone input{ width: 100% !important; } } #secondary .widget{ margin-bottom: 30px } @media screen and (min-width: 415px) and (max-width: 767px){ /* iPhone < WIDTH < iPad */ #secondary .page_in_widget{ display: inline; float: left; width: 50%; } .footer-div{ width: 50% !important; display: inline; } } #secondary p{ margin-bottom: 1em } a.button { display: inline-block; transition: all 0.3s; padding: 10px 30px; border: 1px solid #F8A41A; background: #222222; color: #F8A41A; min-width: 145px; text-align: center; } a.button:hover, a.button:active, a.button:focus { background: #F8A41A; color: #ffffff; } a.button.light { background: #FFFFFF; color: #F8A41A; } a.button.light:hover, a.button.light:active, a.button.light:focus{ background: #F8A41A; color: #FFFFFF; } a.kc_button:focus, .kc-cta-button a:focus { background: #F8A41A!important; color: #FFFFFF!important; } .display-flex{ display: flex!important } .fa{ min-width: 16px; text-align: center; margin-right: 5px; } .home-news { min-height: 300px } /**/ .news-list.list-post-type .list-item{ padding-bottom: 0; margin-bottom: 1em; border-bottom: none; } .news-list h3{ font-size: 16px; font-size: 1em; padding-left: 125px; padding-top: 0; } .news-list a{ font-size: 16px; font-size: 1em !important; } .news-list .kc-entry_meta{ float: left; width: 120px; position: absolute; text-align: right; color: #7F7F7F; } .news-list .sl-clock, .news-list figure, .news-list .text{ display: none; } .CP_ContactFormPP_Widget h2:after{ display:none; } @media screen and (min-width: 415px) and (max-width: 767px){ /* iPhone < WIDTH < iPad */ .row1-3 .kc_col-sm-4{width:33.3333%!important} .row1-3 .kc_col-sm-8{width:66.6667%!important} } /*.kc-fb feature-boxes*/ .kc-feature-boxes .box-right{margin-top: .75em} .kc-fb-layout-4 .content-image{width:33%!important} @media screen and (max-width: 414px){ /*iphone*/ .kc-fb-layout-4 .content-image, .kc-fb-layout-4 .content-image img{float:none!important;width:100%!important;} } /*.kc_accordion*/ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #F8A41A!important; } .kc_accordion_section a{color: inherit!important} .kc_accordion_header > a{font-size:1em !important} /*header-widgets*/ .header-widgets{ position: absolute; right: 15px; top: 18px; z-index: 10; font-size: 14px} @media screen and (max-width: 900px){ /*iphone*/ .header-widgets{ right: 55px;} } .header-widgets > section{display: inline-block} /*qTraslate*/ .qtranxs_widget:before { font-family: "FontAwesome"; content: "\f0ac"; position:absolute; color: #F1F000; left:-20px; } .qtranxs_widget ul { margin: 0; } .qtranxs_widget ul li { display: inline; /* horizontal list, use "list-item" or other appropriate value for vertical list */ list-style-type: none; /* use "initial" or other to enable bullets */ padding-right: 10px; padding-left: 5px;/* adjust spacing between items */ border-right: 1px solid #ccc; /*opacity: 0.5; -o-transition: 1s ease opacity; -moz-transition: 1s ease opacity; -webkit-transition: 1s ease opacity; transition: 1s ease opacity;*/ } /* .qtranxs_widget ul li span { margin: 0 5px 0 0; } */ /* other way to control spacing */ /*.qtranxs_widget ul li.active { display: none} current*/ .qtranxs_widget ul li:hover { opacity: 1; } .qtranxs_widget img { box-shadow: none; vertical-align: middle; display: initial; } .qtranxs_flag { height:12px; width:18px; display:block; } .qtranxs_flag_and_text { padding-left:20px; } .qtranxs_flag span { display:none; } .lang-en.active a, .lang-zh.active a,/*add .zh show it wont be selected in .zh-hans*/ .lang-cn.active a, /*add cn bcos ga not use wpcc*/ .zh-hans .wpcc_current_lang a{color: #F1F000;} .qtranxs-available-languages-message{display: none} /*對不起，此內容只適用於美式英文。 For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.*/ /* wpcc */ .widget_wpcc{ display: inline-block; width: auto; margin: 0; padding: 0; white-space: nowrap; } #wpcc_original_link {display: none} /*不转换 button*/ /*.wpcc_current_lang {display: none}current*/ .widget_wpcc { padding-left: 10px} /**/.tab-list{height:277px; overflow-y: scroll; position: relative;} /*46px each*/ .tab-list::-webkit-scrollbar { display: none; } .tab-list-wrap{overflow:scroll} .tab.buttons{text-align: center; padding-top: 15px; clear: both} .tab.scrollDown{background: url(../images/arrow-down.png) no-repeat center center} .tab.scrollup{background: url(../images/arrow-up.png) no-repeat} .tab.scrollDown, .tab.scrollup{ width: 40px!important; height: 40px!important; cursor: pointer; display:inline-block} .tab.scrollDown:hover, .tab.scrollup:hover{color: #272727; -webkit-transition: color 0.5s; transition: color 0.5s} a.tab { display: inline-block; transition: all 0.3s; padding: 1px 15px; background: #222222; color: #ffffff; text-align: center; -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; margin-bottom: 1em; } a.tab:hover, a.tab:active, a.tab:focus { background: #F8A41A; color: #ffffff; cursor: pointer; } .kc_single_image img { margin-left: auto; margin-right: auto; } .FeaturedBrands-sidebar .gallery-item div,.FeaturedBrands-sidebar .gallery-item a{height:auto;max-height:none;padding:0} .sectors-col{max-width: 280px; margin: 0 auto; float: none!important; text-align: left}