/** * * ------------------------------------------- * Basic template CSS file * ------------------------------------------- * **/ /* * * 1. Global elements * * ------------------------------------ */ /* * GK Font */ @charset "UTF-8"; @font-face { font-family: "gkfont"; src: url("../fonts/gk-font/gkfont.eot"); src: url("../fonts/gk-font/gkfont.eot?#iefix") format("embedded-opentype"), url("../fonts/gk-font/gkfont.ttf") format("truetype"), url("../fonts/gk-font/gkfont.svg#gkfont") format("svg"), url("../fonts/gk-font/gkfont.woff") format("woff"); font-weight: normal; font-style: normal; } [class^="gk-icon-"]:before, [class*=" gk-icon-"]:before { font-family: "gkfont"; font-style: normal; font-weight: normal; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; } .gk-icon-arrow-left:before { content: "1"; } .gk-icon-arrow-right:before { content: "2"; } .gk-icon-cross:before { content: "3"; } /* 1.1. Base document elements ==================================== */ * { outline: none!important; } html { -webkit-font-smoothing: antialiased; max-width: 100%; } body { background: #282c2f; color: #777; font-size: 14px; font-weight: 300; line-height: 1.7; margin: 0; max-width: 100%; min-height: 100%; padding: 0; word-wrap: break-word; } body.pattern1 .gk-page-content { background-image: url('../images/patterns/pattern1.png'); } body.pattern2 .gk-page-content{ background-image: url('../images/patterns/pattern2.png'); } body.pattern3 .gk-page-content{ background-image: url('../images/patterns/pattern3.png'); } body.pattern4 .gk-page-content{ background-image: url('../images/patterns/pattern4.png'); } body.pattern5 .gk-page-content{ background-image: url('../images/patterns/pattern5.png'); } body.pattern6 .gk-page-content{ background-image: url('../images/patterns/pattern6.png'); } body.pattern7 .gk-page-content{ background-image: url('../images/patterns/pattern7.png'); } body.pattern8 .gk-page-content{ background-image: url('../images/patterns/pattern8.png'); } body.pattern9 .gk-page-content{ background-image: url('../images/patterns/pattern9.png'); } body.pattern10 .gk-page-content{ background-image: url('../images/patterns/pattern10.png'); } body.pattern11 .gk-page-content{ background-image: url('../images/patterns/pattern11.png'); } body.pattern12 .gk-page-content{ background-image: url('../images/patterns/pattern12.png'); } body[data-mobile="true"] #main-menu-mobile select { font-size: 50px; } /* 1.2. Base typography elements ==================================== */ a, #gk-mainbody a:active, #gk-mainbody a:focus, #gk-mainbody a:hover, #gk-mainbody h1 a, #gk-mainbody h2 a, #gk-mainbody .author-desc a { color: #282c2f; -webkit-transition: color 0.2s linear; -moz-transition: color 0.2s linear; transition: color 0.2s linear; text-decoration: none; } a:hover, a:active, a:focus, #gk-mainbody a, #gk-mainbody h1 a:active, #gk-mainbody h1 a:focus, #gk-mainbody h1 a:hover, #gk-mainbody h2 a:active, #gk-mainbody h2 a:focus, #gk-mainbody h2 a:hover, #gk-sidebar .box a:hover, #gk-mainbody .author-desc a:active, #gk-mainbody .author-desc a:focus, #gk-mainbody .author-desc a:hover { color: #ed6363; } h1, h2, h3, h4, h5, h6 { color: #282c2f; font-weight: 300; line-height: 1.2; margin: 0; padding: 0; } h1 { font-size: 48px; } h2, .page-title { font-size: 42px; } h3 { font-size: 30px; } h4 { font-size: 22px; } h5 { font-size: 17px; } h6 { font-size: 13px; } ul { list-style: none; margin: 0; padding: 0; } ol { margin: 0; padding: 0; } ul li, ol li { line-height: 2.0; } p { margin: 0.5em 0 1.5em; } iframe { max-width: 100%!important; } table td { vertical-align: top; } img { height: auto; max-width: 100%; } /* 1.3. Base form elements ==================================== */ /* buttons */ .btn, button, .button, .woocommerce a.button, .wc-product-details, .readon, .nav-btn a, .more-link, .gk-button, a.gk-button, input[type="button"], input[type="submit"] { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; background: #282c2f; border: none; color: #fff!important; cursor: pointer; display: block; float: left; font-size: 11px; font-weight: 400; height: 36px; line-height: 36px; margin: 0 5px 2px 2px; padding: 0 15px; text-align: center; text-transform: uppercase; } .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled], .nav-btn a:active, .nav-btn a:focus, .nav-btn a:hover, .woocommerce a.button:hover, .woocommerce a.button:active, .woocommerce a.button.active, .woocommerce a.button:focus, .wc-product-details:hover, .wc-product-details:active, .wc-product-details:focus, button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:active, input[type="button"]:active, input[type="submit"]:active, button.disabled, input[type="button"].disabled, input[type="submit"].disabled, .button:hover, .button:active, .button:focus, a.gk-button:hover, a.gk-button:active, a.gk-button.active, a.gk-button.disabled, a.gk-button[disabled], .readon:hover, .readon:active, .readon:focus, .btn:focus, button:focus, a.gk-button:focus, input[type="button"]:focus, input[type="submit"]:focus, .more-link:active, .more-link:focus, .more-link:hover { background: #3c5166; color: #fff!important; } .readon, .wc-product-details { background: #282c2f; color: #fff!important; display: inline-block; float: none; font-size: 11px; font-weight: normal; height: 28px; line-height: 28px; margin: 35px 0 0 0; padding: 0 12px; text-align: center; text-transform: uppercase; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; width: auto; } /* input fields */ input[type="text"], input[type="password"], input[type="email"], input[type="www"], input[type="tel"], textarea { -moz-border-radius: 4px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-border-radius: 4px; -webkit-box-sizing: border-box; border: 1px solid #e5e5e5; border-radius: 4px; box-sizing: border-box; color: #9c9c9c; font-size: 12px; font-weight: 400; height: 34px; max-width: 100%!important; padding: 0 15px } input[type=checkbox], .checkbox, input[type=radio], .radio { background: transparent!important; border: none!important; height: auto!important; margin-top: 7px!important } textarea { -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; max-width: 100%!important; padding: 14px } input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus { background: #fffef4; } label { color: #333; display: inline-block; font-size: 13px; font-weight: 400; } select { border: 1px solid #e5e5e5; height: inherit; max-width: 100%; padding: 6px } /* 1.4. Base other elements ==================================== */ article { margin: 0; } .tag-page article, .category-page article, .search-page article, .archive article, .page-template-template-latest-php article, .home .gk-is-homepage article, .home #gk-mainbody article { margin-bottom: 30px; padding-top: 30px; } .tag-page article:first-child, .category-page article:first-child, .search-page article:first-child, .archive article:first-child, .page-template-template-latest-php article:first-child, .home .gk-is-homepage article:first-child, .home #gk-mainbody article:first-child { border-top: 0; margin-top: 0; padding-top: 0; } /* 1.5. Base CSS classes ==================================== */ /* * * 2. Template containers * * ------------------------------------ */ .gk-page-wrapper { background: #fff url(../images/lamberts-bg1.png) top left repeat-x;} .gk-page-content { background: #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; padding: 50px 0; position: relative; z-index: 100; } .gk-page { margin: 0 auto; width: 100%; } #gk-mainbody-columns { display: block; width: 100%; } #gk-mainbody-columns > section { background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; float: left; padding: 40px; } #gk-mainbody-columns > aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; float: left; padding-left: 13px; } #gk-sidebar > div { background: #fff; padding: 40px 30px; } #gk-mainbody-columns.gk-column-left > section { float: right; } #gk-mainbody-columns.gk-column-left > aside { float: left; padding: 0 13px 0 0; } /* * * 3. Template structure * * ------------------------------------ */ /* 3.1. Top ==================================== */ #gk-search { clear: right; float: right; margin: 44px 0 21px 20px; max-width: 190px; } #gk-search #s { background: #f5f5f5; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #555; font-size: 13px; height: 30px; padding: 0 12px; width: 190px; } #gk-search #s::-webkit-input-placeholder { color: #333; } /* WebKit browsers */ #gk-search #s:-moz-placeholder { color: #333; } /* Mozilla Firefox 4 to 18 */ #gk-search #s::-moz-placeholder { color: #333; } /* Mozilla Firefox 19+ */ #gk-search #s:-ms-input-placeholder { color: #333; } /* Internet Explorer 10+ */ #gk-search #s::placeholder { color: #333; } /* Standard */ #top-menu { float: right; } #top-menu li { float: left; font-size: 16px; font-weight: 400; line-height: 30px; margin: 0 20px; } #top-menu li a { color: #555; } #top-menu li a:active, #top-menu li a:focus, #top-menu li a:hover { color: #ed6363; } /* Button Cart */ #btn-cart { color: #000; cursor: pointer; float: right; font-size: 11px; line-height: 11px; margin-left: 15px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } #btn-cart:hover { color: #ed6363; cursor: pointer; } #btn-cart:before { content: "/"; margin-right: 12px; } /* 3.2. Header ==================================== */ #gk-head { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 64px 0 0 0; width: 100%; } /* Logo */ #gk-head h2 { float: left; margin: 0 0 10px 0; } a.cssLogo { display: block; float: left; height: 25px; margin: 0; padding: 0; text-indent: -999em; width: 212px; } a.cssLogo { background: transparent url('../images/style1/logo.png') no-repeat 0 0; /* You can specify there logo size and background */ height: 25px; width: 212px; } #gk-head a.textLogo { color: #282c2f; display: block; font-size: 30px; font-weight: 500; height: auto; line-height: 30px; margin: 0; overflow: hidden; padding: 0; text-indent: 0; text-transform: uppercase; } #gk-head a.textLogo small { color: #777; display: block; font-size: 12px; line-height: 12px; } /* Header */ #gk-head .box{ margin: 0; padding: 0; } #gk-header-mod { clear: both; padding: 0 0 15px 0; } #gk-header-mod .box { margin: 0; padding: 0; } #gk-header-mod.gk-bottom-margin .box { margin-bottom: -200px; } /* Header Bottom */ #gk-header-bottom { background: #fff; position: relative; z-index: 101; } #gk-header-bottom .box { margin: 0; padding: 26px 32px 0 32px; } /* 3.3. Content ==================================== */ section.intro { font-size: 110%; padding: 0; } #gk-head:after, .box:after, article:after, #respond:after, #gk-top1:after, #gk-top2:after, #gk-footer:after, #gk-bottom1:after, #gk-bottom2:after, #gk-mainbody:after, #gk-mainbody-columns:after, #gk-sidebar:after, #gk-sidebar > div:after { clear: both; content: ""; display: table; } section.content:after { clear: both; content: ""; display: table; } #gk-mainbody .box, #gk-mainbody-top .box, #gk-mainbody-bottom .box { margin: 30px 0 0 0; padding: 0; } #gk-mainbody .box:first-child, #gk-mainbody-top .box:first-child, #gk-mainbody-bottom .box:first-child { margin-top: 0; } #gk-mainbody-top { padding: 40px 30px; background:#fff;} #gk-mainbody-bottom { padding: 30px 10px; background:#fff;} /* 3.4. Page CSS suffixes ==================================== */ /* Page suffix "frontpage" */ .frontpage #gk-mainbody { margin-bottom: 0; } .frontpage #gk-mainbody-top { margin: 15px 0!important; } .frontpage #gk-sidebar { margin: 15px 0!important; } .frontpage #gk-mainbody-bottom { margin-top: 10px!important; } .frontpage #gk-mainbody-columns > section { background: transparent; padding: 0; } .frontpage #gk-top1 .box, .frontpage #gk-top2 .box { margin-bottom: 10px; padding: 0; } .frontpage #gk-top1, .frontpage #gk-top2 { margin: 0 -0.75%; } .frontpage .box.col1 { margin-left: 0.75%; margin-right: 0.75%; width: 98.5%; } .frontpage .box.col2 { margin-left: 0.75%; margin-right: 0.75%; width: 48.5%; } .frontpage .box.col3 { margin-left: 0.75%; margin-right: 0.75%; width: 31.8%; } .frontpage .col3.last1 { width: 98.5%!important; } .frontpage .col3.last2 { width: 48.5%!important; } .frontpage #gk-header-mod { padding: 0; } .frontpage #gk-header-mod .box { margin-bottom: 14px; } /* Page CSS suffix "transparent-sidebar" */ .transparent-sidebar #gk-sidebar > div { background: transparent; padding: 0; } /* 3.5. Bottom ==================================== */ #gk-bottom1, #gk-bottom2 { background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 50px 0 65px 0; } #gk-bottom1 { padding: 50px 0; } #gk-bottom1 .box, #gk-bottom2 .box { color: #666; font-size: 13px; } #gk-bottom1 .box { font-size: 14px; } #gk-bottom1 > div, #gk-bottom2 > div { margin: 0 -10px; } #gk-bottom1 + #gk-bottom2 { border-top: 1px solid #e5e5e5; } /*#gk-bottom1 .box .box-title,*/ #gk-bottom2 .box .box-title { color: #282c2f; font-size: 14px; font-weight: bold; line-height: 16px; margin: 8px 0 30px 0; padding: 0; text-transform: uppercase; } #gk-bottom1 .box li, #gk-bottom2 .box li { border: none; color: #929292; font-size: 12px; line-height: 20px; padding: 0; } #gk-bottom1 .box li a, #gk-bottom2 .box li a { color: #929292; } #gk-bottom1 .box li a:active, #gk-bottom1 .box li a:focus, #gk-bottom1 .box li a:hover, #gk-bottom2 .box li a:active, #gk-bottom2 .box li a:focus, #gk-bottom2 .box li a:hover { color: #ed6363; } /* 3.6. Footer ==================================== */ #gk-footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #a2a8ad; font-size: 11px; font-weight: 400; line-height: 24px; padding: 37px 0; } #gk-footer a { color: #fff; } #gk-footer a:active, #gk-footer a:focus, #gk-footer a:hover { color: #ed6363; } #footer-menu { float: left; } #footer-menu li { border: none; color: #fff; float: left; font-size: 11px; margin: 0; padding: 0; } #footer-menu li:before { color: #8f9599; content: "/"; margin: 0 9px; } #footer-menu li a { color: #929292; } #footer-menu li:first-child { margin-left: 0; } #footer-menu li:first-child:before { display: none; } #footer-menu li a { color: #fff; } #footer-menu li a:active, #footer-menu li a:focus, #footer-menu li a:hover { color: #8f9599; } #footer-menu ul { display: none; } #gk-footer .gk-copyrights { float: right; margin: 0; } #gk-style-area { clear: both; margin: 20px 0; text-align: center; } .gk-framework-logo { clear: both; display: block; float: none; margin: 30px auto!important; padding: 0!important; } #gk-footer-text { clear: both; padding: 25px 90px; text-align: center; } /* Style switcher */ #gk-style-area { clear: both; display: block; line-height: 10px; margin: 20px 0 40px 0; padding: 10px 0; text-align: center; } #gk-style-area a { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; height: 10px; margin: 15px 0 0 5px; text-indent: -9999px; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); -webkit-transition: -webkit-transform 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out; transition: transform 0.2s ease-out; width: 10px; } #gk-style-area a:first-child { margin-left: 0; } #gk-style-area a:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } #gk-color1 { background: #ed6363; } #gk-color2 { background: #5c6073; } #gk-color3 { background: #8da897; } #gk-color4 { background: #abb7b7; } #gk-color5 { background: #807d77; } #gk-color6 { background: #e34f34; } /* * * 4. Widget styles * * ------------------------------------ */ /* 4.1. Base style ==================================== */ .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; } #gk-mainbody-top .box, #gk-mainbody-bottom .box { padding: 0; } /* 4.2. Base style for other areas ==================================== */ #gk-top1, #gk-top2, #gk-bottom1, #gk-bottom2 { clear: both; } #gk-top1 .box, #gk-top2 .box, #gk-bottom1 .box, #gk-bottom2 .box { float: left; } #gk-top1, #gk-top2 { margin: 0 -10px; overflow: hidden; } .widget-area .col1 { width: 100%; } .widget-area .col2 { width: 50%; } .widget-area .col3 { width: 33.3%; } .widget-area .col4 { width: 25%; } .widget-area .col5 { width: 20%; } .widget-area .col6 { width: 16.6%; } .widget-area .box.last1 { width: 100%; } .widget-area .box.last2 { width: 50%; } .widget-area .box.last3 { width: 31%; margin:0 1.0%; } .widget-area .box.last4 { width: 25%; } .widget-area .box.last5 { width: 20%; } .widget-area .nth1 { clear: both; } /* 4.3. Device classes ==================================== */ .onlyDesktop { display: block!important; } .onlyTablets { display: none!important; } .onlySmartphones { display: none!important; } .onlyTabltetsAndSmartphones { display: none!important; }