/* LESS CMS39 compiler lessc -x style.less > style.css */ @placeholder-color: #282829; @placeholder-color-selection: #b3d4fc; @border-color: #282829; @text-color: @color1; @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/normalize.css'); @import url('css/hover-min.css'); @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'); @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css'); @import url('//maxcdn.bootstrapcdn.com/font-awesome/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: #344B62; @color2: #C64E58; @color3: #FFFFFF; @color4: #B0C9D9; @color5: #FFB900; @color6: #E9E9E9; .social_section { margin: 0 0 20px 0px; .socialtitle { display: none } } blockquote { border: 0px; background: @color5; color: @color3; display: inline-block; } .subscribe_area { padding: 40px 0px; background: @color6; #subscribe_form { legend { font-weight: 700; color: @color1; font-size: 4em; border-bottom: 0px; line-height: 40px; } p { font-size: 1.3em; color: @color4; margin-bottom: 20px; } input, textarea, button { height: auto; padding: 20px 30px; font-weight: 600; font-size: 1.3em; } input, textarea { color: @color4; border: 1px solid @color6; } button { background: @color5; color: @color3; border: 0px; display: inline-block; width: auto; } } } .promo_area { position: relative; background: @color6; padding: 50px 0px; text-align: left; color: @color1; .promo_arrow { display: inline-block; background: url("img/arrow.png"); width: 36px; height: 19px; position: absolute; bottom: -18px; left: 0; right: 0; margin: 0 auto; } .promo_data { .promo_data_ico { margin-bottom: 20px; } .promo_data_title { font-weight: 800; font-size: 2em; margin-bottom: 10px; } .promo_data_post { font-size: 1.2em; font-weight: 400; } } } #wrapper { min-height: 0px; } .theme_menu { .rounded(0px); border: 0px; padding: 10px 0 0 0; background:@color6; h2 { color: @color1; margin-bottom: 0px; margin-top: 5px; font-weight: 800; font-size: 1.4em; border-bottom: 1px solid #DED9D9; 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: @color1; &::before { color: @color1; } } .sidebar_menus, .sidebar_menus * { padding: 0px; margin: 0px; list-style: none; li { display: block; a { margin-bottom: 0px; font-size: 1.2em; display: block; padding: 10px 10px; color: @color1; border-bottom:1px solid #DED9D9; &:hover { color: @color1; background-color: @color3; } .active, &.active { .shadow_box_inner; background-color: @color5; color: @color3; } } } } } } .FormMsg:empty { display: none; } .post { font-size: 1.3em; ol ol, ul ul { margin-left:20px; } } .bread { background: transparent; margin: 10px 0 0 0; padding: 4px 0px; .breadcrumb { background: transparent; margin: 0 0 0px 0; text-align: right; text-transform: uppercase; font-size: 0.9em; li a { color: @color6; } & > li + li:before { color: @color6 } } } .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: 1224px; margin: 0 auto; position: relative; padding: 0px; max-height: 357px; 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 { color: @color3; font-size: 65px; line-height: 65px; font-weight: 800; text-decoration: none; background-color: transparent; text-align: left; } .sl-font-2 { color: @color4; width: 40%; font-weight: 400; font-size: 20px; line-height: 20px; white-space: normal !important; } .sl-font-dark { color: @color3; } .sl-font-link { background: @color2; color: @color3; padding: 25px 30px; .font_script; font-size: 15px; 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; } } h1 { .font_script; color: @color1; font-weight: 900; margin: 0 0 30px 0px; padding: 0px; font-size: 2em; } h3, h2 { .font_script; color: @color1; font-weight: 100; margin: 0 0 10px 0px; padding: 0px; font-size: 1.3em; } div.blockMsg { width: 40%; top: 30%; left: 30%; text-align: center; background-color: @color5; border: 1px solid @color5; .rounded(5px); .opacity(0.9); padding: 30px 10px; h1 { color: @color3; font-size: 1.8em; .font_script; margin: 0px; padding: 0px; } } .contentMaster { .contentArticle { padding: 10px 0 40px 0px; } } .has_submenu { article { margin-left: 20px; ol, ul { list-style-position: inside; padding-left: 0px; } } .contact_interest { width: 100%; } .wr { margin-top: 10px; } } .no_submenu { .wr { margin: 0px 80px; text-align: center; blockquote { text-align: left; } ul, li, ol { text-align: left; } } } .contact_interest { .font_script; width: 90%; font-size: 1.3em; text-align: center; font-weight: 100; margin: 60px auto 60px auto; line-height: 40px; border: 1px solid @color1; padding: 20px; .rounded(5px); .shadow_box_inner; .tel_interest, .btn_interest { padding: 5px 20px; margin: 0px 3px; font-size: 1em; font-weight: 800; background: @color5; color: @color6; i { margin-right: 10px; } } } header { margin: 20px 0px; .cms39-navbar { .cms39-navbar-header { text-align: center; position: relative; .cms39-navbar-brand { margin-top: 15px; text-align: center; } } .cms39-header-nav { margin: 40px 0 0 0; text-align: right; font-size: 1.0em; padding: 0px; li { display: inline-block; a { text-transform: uppercase; text-align: center; display: block; padding: 14px 6px; margin: 0 0 0 6px; color: @color1; font-weight: 600; &.active, &:hover { color: @color4; } &.active, { color: @color3; background: @color1; } } } } } } footer { position: relative; text-transform: uppercase; color: @color4; margin-top: 0px; padding: 0 0 10px 0px; .footer-inner { text-align: center; background: @color1; padding: 110px 0 5px 0px; } a { color: @color4; } .copyright { font-size: 1em; padding: 10px 0px; text-align: center; a { color: @color4 !important; } } .cms39-navbar-nav-footer { li { a { font-size: 1.1em; } } } .footer_logo { position: relative; background: url(img/logo_small.png); width: 198px; height: 169px; display: block; margin: 0 auto; top: 50px; } .foot_1 { text-align: center; } .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: -1200px; 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 { 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: 768px; @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) { } /* Small devices (tablets, 768px and up) */ @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-min) { } /* X Small devices (tablets, 480px and up) */ @media only screen and (max-width: @screen-sm-min) { header .cms39-navbar .cms39-navbar-header { text-align: center; } header .cms39-navbar .cms39-header-nav { margin: 30px 0 0 0; } #cms39-header-nav { padding: 0px; } header .cms39-navbar .cms39-header-nav li { display: block; } header .cms39-navbar .cms39-header-nav li a { padding: 2px; margin: 1px 0px; } footer { .foot_1, .foot_2 { text-align: center; } .foot_1 { margin: 20px 0px; } } .contact_interest { width: 100%; font-size: 1.2em; line-height: 30px; } .contact_interest .tel_interest, .contact_interest .btn_interest { padding: 4px 10px; } .theme_menu .submenus { margin-top: 10px; margin-bottom: 10px; } .no_submenu { .wr { margin: 0px; text-align: left; } } } /* ========================================================================== 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; } }