/* LESS CMS39 compiler lessc -x style.less > style.css */ @placeholder-color: #282829; @placeholder-color-selection: #b3d4fc; @border-color: #282829; @text-color: #1D1D1B; @background-color: #fff; @link-color: #282829; @link-color-hover: @color5; @form-text-color: #222; @font-family: 'Open Sans', sans-serif; @font-size: 12px; @custom-wrapper-spacing: 12px; @import url('css/reset.css'); @import url('css/normalize.css'); @import url('fonts/flaticon.css'); @import url('//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap-theme.min.css'); @import url('//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css'); @import url('//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.min.css'); @import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,700,800,600&subset=latin,greek); /*--------------------------------------------------- LESS Elements 0.9 --------------------------------------------------- A set of useful LESS mixins More info at: http://lesselements.com ---------------------------------------------------*/ .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { background: @color; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, @start), color-stop(1, @stop)); background: -ms-linear-gradient(bottom, @start, @stop); background: -moz-linear-gradient(center bottom, @start 0%, @stop 100%); background: -o-linear-gradient(@stop, @start); filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); } .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { background: @color; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(@start,@start,@start)), color-stop(1, rgb(@stop,@stop,@stop))); background: -ms-linear-gradient(bottom, rgb(@start,@start,@start) 0%, rgb(@stop,@stop,@stop) 100%); background: -moz-linear-gradient(center bottom, rgb(@start,@start,@start) 0%, rgb(@stop,@stop,@stop) 100%); background: -o-linear-gradient(rgb(@stop,@stop,@stop), rgb(@start,@start,@start)); filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop), rgb(@start,@start,@start))); } .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { border-top: solid 1px @top-color; border-left: solid 1px @left-color; border-right: solid 1px @right-color; border-bottom: solid 1px @bottom-color; } .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); } .rounded(@radius: 2px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { -webkit-border-top-right-radius: @topright; -webkit-border-bottom-right-radius: @bottomright; -webkit-border-bottom-left-radius: @bottomleft; -webkit-border-top-left-radius: @topleft; -moz-border-radius-topright: @topright; -moz-border-radius-bottomright: @bottomright; -moz-border-radius-bottomleft: @bottomleft; -moz-border-radius-topleft: @topleft; border-top-right-radius: @topright; border-bottom-right-radius: @bottomright; border-bottom-left-radius: @bottomleft; border-top-left-radius: @topleft; .background-clip(padding-box); } .opacity(@opacity: 0.5) { -moz-opacity: @opacity; -khtml-opacity: @opacity; -webkit-opacity: @opacity; opacity: @opacity; @opperc: @opacity * 100; -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; filter: ~"alpha(opacity=@{opperc})"; } .transition-duration(@duration: 0.2s) { -moz-transition-duration: @duration; -webkit-transition-duration: @duration; -o-transition-duration: @duration; transition-duration: @duration; } .transform(...) { -webkit-transform: @arguments; -moz-transform: @arguments; -o-transform: @arguments; -ms-transform: @arguments; transform: @arguments; } .rotation(@deg:5deg) { .transform(rotate(@deg)); } .scale(@ratio:1.5) { .transform(scale(@ratio)); } .transition(@duration:0.2s, @ease:ease-out) { -webkit-transition: all @duration @ease; -moz-transition: all @duration @ease; -o-transition: all @duration @ease; transition: all @duration @ease; } .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); } .box-shadow(@arguments) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .box-sizing(@sizing: border-box) { -ms-box-sizing: @sizing; -moz-box-sizing: @sizing; -webkit-box-sizing: @sizing; box-sizing: @sizing; } .user-select(@argument: none) { -webkit-user-select: @argument; -moz-user-select: @argument; -ms-user-select: @argument; user-select: @argument; } .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { -moz-column-width: @colwidth; -moz-column-count: @colcount; -moz-column-gap: @colgap; -moz-column-rule-color: @columnRuleColor; -moz-column-rule-style: @columnRuleStyle; -moz-column-rule-width: @columnRuleWidth; -webkit-column-width: @colwidth; -webkit-column-count: @colcount; -webkit-column-gap: @colgap; -webkit-column-rule-color: @columnRuleColor; -webkit-column-rule-style: @columnRuleStyle; -webkit-column-rule-width: @columnRuleWidth; column-width: @colwidth; column-count: @colcount; column-gap: @colgap; column-rule-color: @columnRuleColor; column-rule-style: @columnRuleStyle; column-rule-width: @columnRuleWidth; } .translate(@x:0, @y:0) { .transform(translate(@x, @y)); } .background-clip(@argument: padding-box) { -moz-background-clip: @argument; -webkit-background-clip: @argument; background-clip: @argument; } .text-shadow (@x: 0; @y: 0; @blur: 2px; @color: #000) { -moz-test-shadow: @arguments; -webkit-text-shadow: @arguments; text-shadow: @arguments; } .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .animate (@time: 200ms; @type: all; @tran: linear) { -webkit-transition: @type @time @tran; -moz-transition: @type @time @tran; -o-transition: @type @time @tran; -ms-transition: @type @time @tran; transition: @type @time @tran; } /* ========================================================================== CMS39 Base styles: opinionated defaults ========================================================================== */ /* all */ ::-webkit-input-placeholder { color: @placeholder-color; font-size: 1em } ::-moz-placeholder { color: @placeholder-color; font-size: 1em } /* firefox 19+ */ :-ms-input-placeholder { color: @placeholder-color; font-size: 1em } /* ie */ input:-moz-placeholder { color: @placeholder-color; font-size: 1em } ::-moz-selection { background: @placeholder-color-selection; text-shadow: none; } ::selection { background: @placeholder-color-selection; text-shadow: none; } /* #Custom ================================================== */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; margin: 0px; padding: 0px; } html { position: relative; min-height: 100%; } body { background: @background-color; font-size: @font-size; font-family: @font-family; color: @text-color; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; padding: 0px; margin: 0px; } a { .transition-duration(0.5s); color: @link-color; text-decoration: none; &:hover { color: @link-color-hover; text-decoration: none; } &:focus { text-decoration: none; color: @link-color-hover; } &:active { text-decoration: none; color: @link-color-hover; } } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: @font-family; } @color1: #424143; @color2: #FFFFFF; @color3: #D62B30; @color4: #BCBEC0; @color5: #070606; @color5_: @color1; @color6: @color1; .cms39_gmap { border: 0px; } .contactform { width: 50%; margin: 0 auto; .parsley-errors-list.filled { opacity: 1; position: absolute; margin-top: -56px !important; font-size: 0.8em; color: @color4; } .form-container label { display: block; font-size: 0.8em; text-align: right; } ul li { display: inline-block !important; padding: 0px !important; margin: 0px !important; background: transparent !important; line-height: 0px !important; } ul, ol { margin: 0px !important; } p { margin: 0 0 10px !important; } .cms39-captcha-wrapper { text-align: right; width: 100%; display: block; .cms39-captcha-image { padding-bottom: 5px; } } } .home-link { background: @color3; padding: 10px 20px; color: @color2; font-size: 1.8em; text-align: center; } .home-h3 { margin: 40px 0 50px 0px; font-size: 1.8em; font-weight: 400; text-align: center; } .col-search { margin: 0 300px; } .glyph-icon { padding: 10px; display: block; font-family: "Flaticon"; font-size: 64px; line-height: 1; } .glyph-icon:before { font-size: 64px; margin-left: 0; } .alt-image { padding: 0px 0px; } .head-wraping-h2 { margin: 20px 0px; font-size: 2em; span { font-weight: 800; } h2 { text-align: left; } } .head-wraping { width: 30%; margin-bottom: 20px; padding-left: 7px; } .productDetail .title { color: @color2; letter-spacing: 0em; } h1 { display: inline; background-color: @color3; box-shadow: 0.2em 0 0 @color3, -0.2em 0 0 @color3; padding: 0.1em 0em; box-decoration-break: clone; line-height: 1.4em; color: @color2; letter-spacing: 0em; font-weight: 600 !important; } .custom_module_shopping_loop { text-align: center; margin-bottom: 40px; .photo { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid @color4; img { display: inline-block; } } .title { font-weight: 800; color: @color5; text-transform: uppercase; font-size: 1.3em; line-height: 1.0em; } .code { font-weight: 100; color: @color4; margin: 10px 0px; font-size: 0.9em; } .link { a { color: @color3; font-size: 0.9em; } } } .prd_details_nav { font-size: 2em; margin-bottom: 20px; a { color: @color4; } } .request { text-align: center; a.btn-sm { font-size: 1.5em; padding: 15px 50px; margin-bottom: 20px; border: 0px; background: @color3; color: @color2; font-weight: 400; .rounded(5px); .rounded-corners(5px); i { display: block; padding-bottom: 0px; font-size: 3em; } } } #shopping-description { font-size: 1.4em; } .cms39_gallery_wrapper { figure { text-align: center; margin-bottom: 60px; img { .img-full; } } figcaption { margin-top: 20px; font-size: 1.4em; font-style: italic; } clear: both; } .greek-products { display: inline-block; position: absolute; margin-left: 200px; margin-top: 20px; .rotation(-11deg); } .header-nav-main-multi { padding-bottom: 10px; display: block; clear: both; } .searchform { margin-top: 55px; input, button { background: @color2; color: @color4; border: 1px solid @color4; .rounded(0px); .rounded-corners(0px); .border-radius(0px, 0px, 0px, 0px); padding: 15px 5px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; font-size: 14px; height: auto; } button { padding-left: 15px; padding-right: 15px; } input { padding-left: 10px; padding-right: 0px; color: @color1; } .input-group .twitter-typeahead:first-child .tt-input, .input-group .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 0px; border-top-left-radius: 0px; width: 100%; } ::-webkit-input-placeholder { color: @color4; } :-moz-placeholder { /* Firefox 18- */ color: @color4; } ::-moz-placeholder { /* Firefox 19+ */ color: @color4; } :-ms-input-placeholder { color: @color4; } } .cms39-header-nav { margin: 0px 0 0 0; text-align: center; font-size: 1.1em; padding: 0px; li { display: inline-block; a { text-transform: uppercase; text-align: center; display: block; padding: 5px 8px; margin: 0 5px 0 5px; font-weight: 400; font-size: 0.9em; color: @color1; &:hover { background: @color1; color: @color2; } &.active { color: @color2; background: @color3; font-weight: 400; } } } } .cms39-site-nav { list-style: none; margin: 0px; padding: 0px; li { display: inline-block; padding: 5px; margin: 0px; a { display: block; } } } #wrapper { min-height: 200px; } .theme_menu { .rounded(5px); border: 1px solid @color1; padding: 10px 0 0 0; h2 { color: @color3; margin-bottom: 0px; margin-top: 5px; font-weight: 800; font-size: 1.4em; border-bottom: 1px solid @color1; padding-bottom: 12px; &::before { content: '+'; color: @color5; margin: 0 10px; padding: 0px; } } .submenus { display: block; margin-top: 0px; text-transform: uppercase; .sidebar_menus > li:first-child > a { font-weight: 400; background: transparent; color: @color2; &::before { color: @color2; } } .sidebar_menus, .sidebar_menus * { padding: 0px; margin: 0px; list-style: none; li { display: block; a { margin-bottom: 3px; font-size: 1.2em; display: block; padding: 10px 10px; color: @color2; &::before { content: "_"; color: @color2; margin: 0px; } &:hover { color: @color3; } .active, &.active { .shadow_box_inner; background-color: @color5; color: @color6; &::before { color: @color6; } } } } } } } .post { font-size: 1.3em; } .bread { border-top: 1px solid @color4; background: transparent; margin-bottom: 0px; padding: 10px 0px; margin-top: 10px; .breadcrumb { background: transparent; margin: 0 0 0px 0; text-align: left; text-transform: uppercase; font-size: 0.8em; li a { color: @color1; } & > li + li:before { color: @color1 } } } .shadow_txt { .text-shadow(1px, 1px, 2px, rgba(0, 0, 0, 0.2)); } .shadow_box { .drop-shadow(0px, 0px, 5px, 0.1); } .shadow_box_inner { .inner-shadow(0px, 0px, 5px, 0.1); } .font_script { } .boxedcontainer { max-width: 1170px; margin: auto; padding: 0px 30px; } .item_data { min-height: 130px; width: 100%; margin-bottom: 20px; .animate(); background: @color1; .shadow_box; &.active { display: none; } &:hover { .scale(1.05); } .details { border-top: 5px solid @color5; padding: 15px 0px; line-height: 11px; text-align: center; .title { font-weight: 400; display: block; } .link { color: @color5; font-size: 0.8em; padding-top: 4px; display: block; } } img { width: 100%; } } /********************************************* - SETTINGS FOR BANNER CONTAINERS - **********************************************/ .slider_ { background: @color1; } .tp-banner-container { max-width: 1500px; margin: 0 auto; position: relative; padding: 0px; max-height: 500px; overflow: hidden; ul, li { padding: 0px; margin: 0px; list-style: none; } } .tp-banner { width: 100%; position: relative; } .tp-banner-fullscreen-container { width: 100%; position: relative; padding: 0; } .sl-font-2, .sl-font-1 { .font_script; color: @color6; font-size: 45px; line-height: 45px; font-weight: 800; text-decoration: none; background-color: transparent; text-align: center; border-width: 0px; border-color: rgb(255, 255, 255); border-style: none; .shadow_txt; } .sl-font-2 { font-size: 25px; line-height: 25px; } .sl-font-dark { color: @color3; } .sl-font-link { background: @color5_; color: @color6; padding: 15px 30px; .font_script; font-size: 25px; line-height: 20px; font-weight: 400; text-decoration: none; text-align: center; border-width: 0px; border-color: rgb(255, 255, 255); border-style: none; a, a:hover { color: @color6; } } h3, h2 { .font_script; color: @color3; font-weight: 400; margin: 10px 0 10px 0px; padding: 0px; font-size: 1.5em; text-align: center; } .contentMaster { .contentArticle { } } .has_submenu { article { margin-left: 20px; ol, ul { list-style-position: inside; padding-left: 0px; } } .contact_interest { width: 100%; } .wr { } } .no_submenu { .wr { text-align: left; blockquote { text-align: left; } ul, li, ol { text-align: left; } } } .contact_interest { .font_script; width: 90%; font-size: 2em; text-align: center; font-weight: 100; margin: 60px auto 60px auto; line-height: 40px; border: 0px solid @color4; padding: 20px; .rounded(5px); .tel_interest, .btn_interest { display: inline-block; padding: 10px 20px; margin: 10px 3px 0 3px; font-size: 1.2em; font-weight: 800; background: @color3; color: @color2; .rounded(5px); .rounded-corners(5px); i { margin-right: 10px; } } } header { margin-bottom: 0px; .cms39-header-nav { margin-top: 0px; margin-bottom: 0px; text-align: center; } .cms39-top { text-transform: uppercase; background: @color1; font-size: 0.9em; color: @color2; padding: 8px 0; margin-bottom: 30px; a { color: @color2; } ul, li { margin: 0px 2px; padding: 0px 2px; } } .cms39-navbar { .cms39-navbar-header { text-align: center; margin: 20px 0 40px 0px; } } } footer { background: @color5; text-transform: uppercase; color: @color4; margin-top: 20px; padding: 10px 0px 20px 0; font-size: 0.9em; .footer-nav { margin: 30px 0px; font-size: 0.9em; } .footer-contact { margin-bottom: 30px; font-size: 1.2em; color: @color4; } .footer-logo { margin-top: 10px; } .footer-nav-products { margin-bottom: 10px; .cms39-header-nav { text-align: center; ul { li { a { font-size: 0.9em; &.active { color: @color4; } } } } } } a { color: @color4; } a:hover{ color:@color2; } .copyright { font-size: 0.9em; } .foot_1 { text-align: left; } .foot_2 { text-align: right; } } /* ========================================================================== Helper classes ========================================================================== */ .list-inline { padding-left: 0; list-style: none; margin-left: -5px; li { display: inline-block; padding-left: 5px; padding-right: 5px; text-align: -webkit-match-parent; } } .mtable { height: 100%; width: 100%; display: table; .mcell { display: table-cell; vertical-align: middle; } } .text-hide { overflow: hidden; text-indent: -1500px; white-space: nowrap; } .text-right { text-align: right } .text-left { text-align: left } .text-center { text-align: center } .text-justify { text-align: justify } .relative { position: relative; } img { vertical-align: middle; } .img-full { max-width: 100%; height: auto } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } input:focus, select:focus, textarea:focus, button:focus { outline: none; } .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* #Media Queries ================================================== */ @screen-xs-min: 480px; @screen-sm-min: 767px; @screen-md-min: 992px; @screen-lg-min: 1200px; /* Large devices (large desktops, 1200px and up) */ @media only screen and (min-width: @screen-lg-min) { } /* Medium devices (desktops, 992px and up) */ @media only screen and (max-width: @screen-lg-min) { .col-search { margin: 0 200px; } } /* Small devices (tablets, 768px and up) */ @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-min) { .col-search { margin: 0 100px; } } /* X Small devices (tablets, 480px and up) */ @media only screen and (max-width: @screen-sm-min) { .col-search { margin: 0 30px; } .cms39-top { margin-bottom: 10px; ul { text-align: center; font-size: 0.8em; } } .cms39-header-nav { margin-bottom: 20px; clear: both; li { width: 33%; margin-bottom: 10px; float: left; } } .searchform { margin-top: 0px; } footer { .foot_1 { text-align: center; margin-bottom: 10px; } .foot_2 { text-align: center; } } } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } #slides { width: 100%; margin-bottom: 30px; } #slides .item img { display: block; width: 100%; height: auto; } /** #slides { display: none; margin-bottom: 30px; } #slides .slidesjs-navigation { margin-top: 3px; } #slides .slidesjs-previous { margin-right: 5px; float: left; } #slides .slidesjs-next { margin-right: 5px; float: left; } .slidesjs-pagination { margin: 6px 0 0; float: right; list-style: none; } .slidesjs-pagination li { float: left; margin: 0 1px; } .slidesjs-pagination li a { display: block; width: 13px; height: 0; padding-top: 13px; background-image: url(img/pagination.png); background-position: 0 0; float: left; overflow: hidden; } .slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px } .slidesjs-pagination li a:hover { background-position: 0 -26px } #slides a:link, #slides a:visited { color: #333 } #slides a:hover, #slides a:active { color: #9e2020 } **/