/* RESPONSIVE */ @mobile-p: ~"(max-width: 480px) and (orientation: portrait)"; @mobile-l: ~"(max-width: 640px) and (orientation: landscape)"; @mobile: ~"(max-width: 480px) and (orientation: portrait), (max-width: 640px) and (orientation: landscape), (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"; @pad: ~"(min-width: 480px) and (max-width: 768px)"; @pad-p: ~"(min-width: 480px) and (max-width: 768px) and (orientation: portrait)"; @pad-l: ~"(min-width: 480px) and (max-width: 768px) and (orientation: landscape)"; @ipad: ~"(min-width: 768px) and (max-width: 1024px)"; @ipad-p: ~"(min-width: 768px) and (max-width: 1024px) and (orientation: portrait)"; @ipad-l: ~"(min-width: 768px) and (max-width: 1024px) and (orientation: landscape)"; @laptop: ~"(max-width: 1280px)"; @desktop: ~"(max-width: 1650px)"; @huge: ~"(min-width: 1650px)"; /* COLORS */ @light: #6EB5B8; @blue: #0070BA; @grey: #CCC; @lightgrey: #E8E8E8; @dark: #001f48; /* GENERAL */ .font(@size:17px, @weight:400, @line-height:@size) { // 100, 300, 400, 700 font-family: 'Roboto', sans-serif; font-size: @size; line-height: @line-height; font-weight: @weight; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slab(@size:17px, @line-height:@size) { font-family: 'Roboto Slab', serif; font-size: @size; line-height: @line-height; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .clear { clear:both; height: 0; } .transition(@props: all 0.2s ease 0s) { -webkit-transition: @props; -moz-transition: @props; -ms-transition: @props; -o-transition: @props; transition: @props; } .transitions(@prop1, @prop2) { -webkit-transition: @prop1, @prop2; -moz-transition: @prop1, @prop2; -ms-transition: @prop1, @prop2; -o-transition: @prop1, @prop2; transition: @prop1, @prop2; } .rotate(@radius) { -moz-transform: rotate(@radius); -webkit-transform: rotate(@radius); -o-transform: rotate(@radius); -ms-transform: rotate(@radius); transform: rotate(@radius); } .scale(@factor, @y:@factor) { -moz-transform: scale(@factor, @y); -webkit-transform: scale(@factor, @y); -o-transform: scale(@factor, @y); -ms-transform: scale(@factor, @y); transform: scale(@factor, @y); } .scale3d(@factor, @y:@factor, @z:@factor) { -moz-transform: scale3d(@factor, @y, @z); -webkit-transform: scale3d(@factor, @z); -o-transform: scale(@factor, @y, @z); -ms-transform: scale3d(@factor, @y, @z); transform: scale3d(@factor, @y, @z); } .cover() { background-position: center; background-repeat: no-repeat; background-size: cover; } .contain() { background-position: center; background-repeat: no-repeat; background-size: contain; } .shadow(@props: 2px 2px 5px 1px rgba(0,0,0,0.6)) { -webkit-box-shadow: @props; box-shadow: @props; } .radius(@rad) { -webkit-border-radius: @rad; border-radius: @rad; } .alpha(@a:50, @r:255, @g:255, @b:255) { @ccc: "rgba.php?r=@{r}&g=@{g}&b=@{b}&a=@{a}"; background: url(@ccc) repeat; background: rgba(@r,@g,@b,@a/100); } .menubutton(@size, @color, @hover) { display: inline-block; .transition; cursor: pointer; @rad:@size/10; width:@rad*12; height:@rad*10; position:relative; & .lines { .radius(1px); height:2px; width:12*@rad; background:@color; .transition; position:absolute; top:4*@rad; right:0; &:after, &:before { .radius(1px); height:2px; width:12*@rad; background:@color; .transition; position:absolute; right:0; content:''; } &:before { top:-4*@rad; } &:after { top:4*@rad; } } } .translate(@x,@y,@z) { -ms-transform: translate(@x, @y); -webkit-transform: translate3d(@x, @y, @z); -moz-transform: translate3d(@x, @y, @z); -ms-transform: translate3d(@x, @y, @z); -o-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } .circle(@size) { width:@size; height:@size; .radius(@size / 2); } .origin(@x,@y) { -ms-transform-origin: @x @y; -webkit-transform-origin: @x @y; transform-origin: @x @y; } .noselect() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .appearL() { opacity: 0; .translate(-100px,0,0); .transition(all 0.5s ease); &.active { opacity: 1; .translate(0,0,0); } } .appearR() { opacity: 0; .translate(100px,0,0); .transition(all 0.5s ease); &.active { opacity: 1; .translate(0,0,0); } } .adminbutton() { background: @blue; color: white; padding: 10px 20px; .font(15px, 400); margin-bottom: 0; margin-left: 10px; &:hover { background: black; } } .noshadow() { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .grad() { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0.6+0,0+100 */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */ } // ARROWS @arrowDelay: 1s; .arrowNav(@size:40px, @background:#000, @color:#fff, @hoverbackground:#fff, @hovercolor:#000, @thick: 1px) { background-color: @background; .circle(@size); -webkit-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease; -moz-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease; -ms-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease; -o-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease; transition: all 0.3s ease, left 0.5s ease, right 0.5s ease; cursor: pointer; &.active { -webkit-transition: all 0.3s ease, left 0.5s ease @arrowDelay, right 0.5s ease @arrowDelay; -moz-transition: all 0.3s ease, left 0.5s ease @arrowDelay, right 0.5s ease @arrowDelay; -ms-transition: all 0.3s ease, left 0.5s ease @arrowDelay, right 0.5s ease @arrowDelay; -o-transition: all 0.3s ease, left 0.5s ease @arrowDelay, right 0.5s ease @arrowDelay; transition: all 0.3s ease, left 0.5s ease @arrowDelay, right 0.5s ease @arrowDelay; } &:hover { background-color: @hoverbackground; &:before, &:after { background: @hovercolor; } } &:before, &:after { width: 30%; height: @thick; content: ''; position: absolute; top: @size/2 - 1px; left: @size / 2 - 0.25 * @size / 2; background: @color; .rotate(45deg); .origin(0, 50%); .transition; } &:after { .rotate(-45deg); top: @size/2; } } .arrowbutton() { width: 30px; height: 30px; padding: 0; margin: 0; background: url(../images/arrows.png) top center no-repeat; display: block; &:before, &:after { display: none; } } .inner() { width: 1000px; @media @pad { width: 100%; } @media @mobile { width: 100%; } } .p() { .font(15px, 400, 19px); margin-bottom: 7px; letter-spacing: 0.5px; @media @desktop { .font(13px, 400, 18px); } @media @laptop { .font(12px, 400, 16px); } @media @pad { .font(11.5px, 400, 14px); } } .pfont() { .font(15px, 400, 19px); letter-spacing: 0.5px; } .h1() { color: @blue; text-align: center; .font(25px, 300); letter-spacing: 3px; margin-top: 40px; margin-bottom: 30px; @media @desktop { margin-top: 35px; margin-bottom: 25px; } @media @laptop { .font(22px, 300); letter-spacing: 2px; margin-top: 30px; margin-bottom: 20px; } } .h2() { color: @dark; text-align: left; margin-top: 35px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: thin solid; .font(20px, 700); letter-spacing: 3px; } .product-list() { .inner; & .product { & .image { height: 150px; & .wrap { &:after { content: '+'; position: absolute; .circle(40px); text-align: center; .font(30px, 700, 40px); left: 50%; top: 50%; margin-top: -20px; margin-left: -19px; padding-left: 1px; background: rgba(0, 0, 0, 0.56); color: white!important; .transition(all 0.3s ease); opacity: 0; } & .image-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; .contain; .transition; } } } & h2 { .font(18px, 700); letter-spacing: 2px; color: @dark; text-align: center; margin: 0; padding: 15px 0; border-top: thin solid; .transition; @media @desktop { .font(17px, 700); } } & p { .p; text-align: center; color: dimgrey; font-size: 80%; .transition; } &:hover { & .image-inner { .scale3d(1.1); } & p { color: black; .translate(0px, -5px, 0px); } & h2 { background: @dark; color: white; .translate(0px, -15px, 0px); } & .wrap { &:after { opacity: 1; } } } } } .edit-article-button() { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; .radius(15px); background: grey url(../images/edit-article.png) center center no-repeat; } .main-table { width: 100%; border-spacing: 0; border-collapse: collapse; margin-top: 20px; & thead { & tr { & td { background: @blue; color: white; .font(14px, 700); letter-spacing: 1px; text-align: center; padding: 8px 5px; } } } & tr { & td { border: thin solid; padding: 5px; text-align: center; .pfont; } } } .common-ul { margin: 0; padding: 0; list-style: none; & li { .p; position: relative; padding-left: 25px; &:after { .circle(8px); background: @blue; content: ''; position: absolute; left: 0; top: 6px; } } } /* GENERAL CSS */ #responsiveIndicator { color: darkgrey; } .wrap { position:relative; width:100%; height:100%; } html, body { background-color: @dark; margin:0; padding:0; height:100%; .font; & h1, & h2, & h3, & h4, & h5, & h6, p { .font; } } .wrapper { min-height: 100%; position: relative; .transition(all 0.5s ease); &.offset { @media @ipad { .translate(-170px, 0, 0); } @media @pad { .translate(-140px, 0, 0); } @media @mobile { .translate(-140px, 0, 0); } & .menu-block { @media @ipad { display: block; } @media @pad { display: block; } @media @mobile { display: block; } } } & .off-menu { position: absolute; top: 0; right: -170px; width: 170px; height: 100%; background: @dark; box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.8); padding: 20px 15px; @media @pad { right: -140px; width: 140px; } @media @mobile { right: -140px; width: 140px; } & > ul { margin: 0; padding: 0; list-style: none; & > li { .font(14px, 400, 32px); letter-spacing: 0.5px; @media @pad { .font(13px, 400, 30px); letter-spacing: 0.3px; } @media @mobile { .font(12px, 400, 25px); letter-spacing: 0.1px; } & > a { color: white; display: block; border-bottom: thin solid @blue; .transition; &:hover { background: @blue; padding-left: 5px; } } & > ul { margin-top: 10px; padding-left: 10px; margin-left: 0; margin-bottom: 8px; & > li { .font(14px, 400, 25px); @media @pad { .font(13px, 400, 30px); letter-spacing: 0.3px; } @media @mobile { .font(11px, 400, 25px); letter-spacing: 0.3px; } & > a { color: @light; display: block; .transition; &:hover { color: white; } } } } } } } & .menu-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; .alpha(60,0,0,0); display: none; } } /* CSS TREE */ body { background-image: url(../images/azure-back.jpg), url(../images/azure-repeat.jpg); background-repeat: no-repeat, repeat-x; background-position: right top, left top; background-attachment: fixed; background-color: @dark; overflow-x: hidden; &.form { & #content { padding-top: 200px; background:none; & .form-responce { width:967px; margin: 0 auto 30px; .alpha(50,0,0,0); .shadow; padding: 30px; margin-bottom: 60px; & p { color:white; } } & form { width:967px; margin: 0 auto 30px; .alpha(50,0,0,0); .shadow; padding: 30px; margin-bottom: 60px; & h2 { color:white; .font(25px, 100); text-align:center; letter-spacing: 3px; margin-bottom: 20px; } & .rsform-block { display:inline-block; padding:0 10px; vertical-align: top; width:49%; & .formControlLabel { float: none; color: white; .font(12px, 400); letter-spacing: 2px; text-align: left; width: auto; margin-bottom: 10px; } & .formControls { margin:0; & input { width:100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; .font(14px, 400); height: auto; padding: 11px; color:black; .radius(0); border:none; margin-bottom:0; } & textarea { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; .font(14px, 400); .radius(0); border:none; resize: none; } & select { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; .font(14px, 400); .radius(0); border:none; padding: 13px; height: auto; } & button { .radius(0); border:none; .font(25px, 100); color:white; background:@blue; padding: 15px 40px; letter-spacing: 3px; float: right; .noshadow; text-shadow:none; } } &.rsform-block-question, &.rsform-block-serial { width:100%; } &.rsform-block-agree-text { color:white; } &.rsform-block-agree { width:15%; & input { width:auto; } & label { color:white; margin-top: -3px; } } } } } } &.stop-scroll { height: 100%; overflow: hidden; } & .row { max-width: 1000px; @media @laptop { max-width: 900px; } } // JCE EDITOR &.mceContentBody { background: white!important; & p { .p; } & h1 { .h1; } & table { .main-table; } } // ADMIN PAGES & .editor-only { display: none; } &.editor { & .header, & .fixed-header { display: none; } & .admin-menu { display: none; } & .editor-only { display: block; &.home-link { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background-image: url(../images/home.png); .contain; & a { display: block; width: 100%; height: 100%; } } } } // ADMINISTRATOR .administrator { position: absolute; width: 200px; top: 0; right: 0; text-align: left; z-index: 9999; @media @laptop { display: none; } & .inner { max-height: 0; overflow: hidden; .transition(all 0.3s ease); text-align: left; background: black; padding: 0 20px; & h1 { display: none; } & label { .font(11px); text-transform: uppercase; letter-spacing: 1px; color: @grey; margin-bottom: 5px; } & input[type="text"], input[type="password"] { border: thin solid @grey; padding: 5px; .font(12px); letter-spacing: 1px; height: auto; } #form-login-remember { display: none; } & button { .font(11px); text-transform: uppercase; letter-spacing: 1px; padding: 10px; margin-bottom: 7px; } & .login-greeting { color: white; .font(12px, 400); margin-bottom: 10px; } & .logout-button { & input[type="submit"] { border: none; background: #0070BA; color: #FFF; padding: 7px 20px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; &:hover { background: @dark; } } } & ul { list-style: none; margin: 0; padding: 0; & > li { .font(11px, 400, 20px); letter-spacing: 1px; & > a { color: @grey; .transition; &:hover { color: @light; } } } } &.active { max-height: 400px; padding: 20px; } } & a.login-trigger { background: black; .font(12px); padding: 7px 15px 7px 25px; border-bottom-left-radius: 20px; letter-spacing: 1px; color: @grey; .transition; display: block; width: 100%; &:hover { background: @dark; color: white; } &.active { background: @dark; color: white; } } } .admin-menu { background: black; position: absolute; top: 0; left: 0; z-index: 10000; & > #cssmenu { & a, & span { background: black; .font(12px, 400); letter-spacing: 1px; color: white; text-align: center; display: block; padding: 10px; cursor: pointer; width: 100%; &:hover { background: @blue; } } & > ul.nav.menu { padding: 0; font-size: 0; background: black; & > li { width: 140px; float: none; & > ul { width: 100%; background: black; top: 32px!important; padding: 0; & > li { & > ul { padding: 0; width: 100%; left: 140px; } } } } } } } // COMMON ARTICLE EDITOR & .common-article-editor { padding-top: 0; padding-bottom: 60px; & h1 { .h1; border-bottom: thin solid; padding-bottom: 15px; margin-bottom: 0; } & button { .adminbutton; } & textarea { resize: none; width: 100%!important; } & .f2c_field_label { & label { text-transform: uppercase; margin-top: 10px; & .star { font-weight: 700; color: @blue; } } } & .image-field { height: 300px; position: relative; & > div.control-group { border: thin solid @lightgrey; background: @lightgrey; padding: 20px; height: 100%; position: relative; & .control-label { position: absolute; top: 0; left: 0; z-index: 100; & label { background: black; color: white; .font(12px, 400); letter-spacing: 1px; padding: 7px 10px; text-transform: uppercase; margin-top: 0!important; } } & table { & > tbody { & tr { &:first-child { & td { position: absolute; top: 7px; right: 7px; width: 100%; height: 30px; text-align: right; padding: 0; z-index: 100; & .f2c_select_file { color: transparent; padding: 0; background: url(../images/file-upload.png) center center no-repeat; background-size: contain; width: 25px; height: 25px; position: absolute; top: 0; right: 80px; .transition; &:hover { .scale(1.1); } &:focus { outline:none; } } & input[type="button"] { color: transparent; padding: 0; background: url(../images/file-delete.png) center center no-repeat; background-size: contain; width: 25px; height: 25px; border: none; display: inline-block; position: absolute; top: 0; right: 40px; cursor: pointer; .transition; &:hover { .scale(1.1); } &:focus { outline:none; } } & a.btn { color: transparent; padding: 0; background: url(../images/file-crop.png) center center no-repeat; background-size: contain; width: 23px; height: 25px; border: none; position: absolute; top: 0; right: 0px; .transition; &:hover { .scale(1.1); } &:focus { outline:none; } } } } &:nth-child(2) { & td { &:first-child { position: absolute; left: 0; bottom: 0; } &:nth-child(2) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; text-align: center; padding-top: 40px; padding-bottom: 30px; & span { display: inline-block; height: 100%; } & img { border: none!important; max-height: 100%; } } } } } } } } } & .editor-field { margin-top: 20px; & .wf_editor_toggle { display: none; } & label { margin-bottom: 10px; } & #editor-xtd-buttons { display: none; } } & .tag-field { & .chzn-choices { padding: 10px; height: 80px; } } & .f2c_button_bar { margin-top: 20px; margin-bottom: 20px; } & .gallery-field { & .f2c_field_value { padding: 20px; background: @lightgrey; } & img { max-width: 200px; } & .f2c_image_gallery_tbl { & a { display: inline-block; } & tr { display: inline-block; } } & .f2c_row_button { .arrowbutton; &.icon-f2carrow-up { background-position: top center; &:hover { background-position: center -30px ; } } &.icon-f2carrow-down { background-position: center -60px ; &:hover { background-position: center -90px ; } } &.icon-f2cminus { background-position: center -120px; &:hover { background-position: center -150px ; } } } } & .caption-field { & p { color: @blue; text-transform: uppercase; margin-top: 15px; border-bottom: thin solid; padding-bottom: 10px; margin-bottom: 0px; } } } & .f2c-articleeditor { & h1 { .h1; border-bottom: thin solid; padding-bottom: 15px; margin-bottom: 0; } } // MENU .first-level-menu() { .font(14px, 400); padding: 10px 15px; @media @desktop { .font(13px, 400); padding: 10px 20px; } @media @laptop { .font(12px, 400); padding: 8px 15px; } } & .header #cssmenu, & .fixed-header #cssmenu { float: left; background: none; & > ul.nav.menu { padding-top: 47px; @media @desktop { padding-top: 40px; } & > li { letter-spacing: 1px; & > a { color: white; .first-level-menu; &:hover { background: @blue; } @media @desktop { .first-level-menu; } } & span { display: block; .first-level-menu; color: white; .noselect; cursor: pointer; .transition(all 0.3s ease-in); &:hover { background: @blue; } } & > ul { top: 60px; padding: 0; background-color: @blue; width: 100%; & > li { & > a { .font(11px, 400, 13px); color: white; padding: 16px 15px; width: 100%; .transition(all 0.2s ease); @media @desktop { padding: 13px 15px; } @media @laptop { padding: 10px 12px; } &:hover { background: @dark; } } } } &:hover { & > span { background: @blue; } & > ul { top: 34px; @media @desktop { top: 32px; } @media @laptop { top: 27px; } } } } } } & .fixed-header { position: fixed; top: 0; left: 0; width: 100%; //height: 0px; .alpha(50,0,0,0); overflow: hidden; .transition(all 0.6s ease); z-index: 1001; height: 80px; .translate(0,-200px,0); @media @desktop { height: 60px; } @media @ipad { display: none; } @media @pad { display: none; } @media @mobile { display: none; } & #cssmenu { float: right; & > ul.nav.menu > li { & > a { .font(13px); color: @grey; } & > span { .font(13px); color: @grey; } } } &.active { //height: 80px; .translate(0,0,0); } & img { height: 100%; width: auto; } & ul.nav.menu { float: right; margin: 0; padding: 40px 20px 0 0; list-style: none; @media @desktop { padding-top: 28px!important; } & li { display: inline-block; margin: 0 10px; .font(14px); @media @desktop { font-size: 12px!important; margin: 0!important; } & a { color: white; .transition; @media @desktop { font-size: 12px!important; padding: 10px 15px!important; } &:hover { color: @blue; } } } } } // HEADER & .header { text-align: left; padding-top: 40px; padding-bottom: 10px; position: absolute; width: 100%; z-index: 1000; .transition(all 0.5s ease); @media @mobile { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#206ea3+0,ffffff+100 */ background: rgb(32,110,163); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwNmVhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(32,110,163,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(32,110,163,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(32,110,163,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#206ea3', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ } @media @desktop { padding-top: 20px; } @media @laptop { padding-top: 10px; } @media @ipad { padding-top: 20px; } & .menu-button { position: absolute; top: 0px; right: 20px; width: 35px; height: 35px; background-image: url(../images/menu-button.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; cursor: pointer; &:hover { background-position: center bottom; } } & a { display: block; float: left; @media @mobile { float: none; text-align: center; } & > img { margin-right: 30px; @media @desktop { width: 110px; height: auto; } @media @laptop { width: 75px; height: auto; } @media @ipad { width: 100px; height: auto; } @media @mobile { width: 120px; margin: 0; } } } &.hidden { .translate(0,-300px,0); @media @mobile { .translate(0,0,0); } } } // SLIDESHOW & .slideshow { @media @pad { height: 350px!important; } @media @mobile { display: none; } .transition(height 0.3s ease); height: 500px; -moz-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.4), inset 0 -8px 8px -8px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.4), inset 0 -8px 8px -8px rgba(0,0,0,0.4); box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.4), inset 0 -8px 8px -8px rgba(0,0,0,0.4); overflow: hidden; & .hero-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; .cover; display: none; & #video-placeholder { position: absolute; top: 0; left: 0; //width: 100%; //height: 100%; opacity: 0; .transition(opacity 0.5s ease); &.active { opacity: 1; } } & .details { position: absolute; left: 0; bottom: -500px; width: 100%; .transition(all 1s ease); .alpha(65,0,0,0); & h1 { .font(28px, 100); color: white; text-align: center; letter-spacing: 2px; padding: 30px 0 15px; margin: 0; text-shadow: 0 0 3px #000000; .noselect; @media @desktop { .font(24px, 100); padding-top: 25px; letter-spacing: 1.5px; } @media @laptop { .font(20px, 100); padding-top: 15px; letter-spacing: 1px; } @media @pad { .font(18px, 100); padding-top: 12px; letter-spacing: 1px; } } & p { .font(14px, 300, 20px); letter-spacing: 1px; color: @light; text-align: center; margin-bottom: 0; padding: 0 0 30px; text-shadow: 0 0 3px #000000; .noselect; @media @desktop { padding-bottom: 25px; } @media @laptop { padding-bottom: 15px; } @media @pad { padding-bottom: 12px; } } } &.active { & .details { bottom: 0; } } } & .preloader { width: 50px; height: 51px; border-radius: 100%; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; -webkit-animation: spin 5s infinite linear; animation: spin 5s infinite linear; & .circle { width: 100%; height: 100%; position: absolute; & .inner { width: 100%; height: 100%; border-radius: 100%; border: 5px solid rgba(255, 255, 255, 0.3); border-right: none; border-top: none; backgroudn-clip: padding; box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.10); } &:nth-of-type(0) { -webkit-transform: rotate(0deg); transform: rotate(0deg); & .inner { -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } } &:nth-of-type(1) { -webkit-transform: rotate(70deg); transform: rotate(70deg); & .inner { -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } } &:nth-of-type(2) { -webkit-transform: rotate(140deg); transform: rotate(140deg); & .inner { -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } } } } & .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: none; &.active { background: url(../images/mask1.png) top left repeat; } } & .arrow { position: absolute; width: 40px; height: 40px; top: 50%; margin-top: -40px; .origin(50%, 50%); cursor: pointer; @media @ipad { width: 20px; height: 20px; margin-top: -20px; } @media @pad { width: 20px; height: 20px; margin-top: -20px; } .transition(all 0.5s ease); &:before, &:after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: @light; .origin(0, 50%); .rotate(45deg); .transition; } &:after { .rotate(-45deg); } &.left { left: -100px; &.active { .transition(all 0.5s ease 0.5s); left: 50px; } } &.right { .rotate(180deg); right: -100px; &.active { .transition(all 0.5s ease 0.5s); right: 50px; } } &:hover { &:before, &:after { background: white; height: 2px; } } } } & #content { //height: 3000px; background: white; .shadow(0px 0px 5px 1px rgba(0,0,0,0.6)); @media @mobile { padding-top: 150px; } } & div.article { padding-bottom: 100px; @media @pad { padding-bottom: 50px; } @media @mobile { padding-bottom: 20px; } & .article-image { @media @pad { display: none; } @media @mobile { display: none; } } & .contentimage { @media @laptop { max-width: 250px; } @media @mobile-p { float: none!important; margin: 20px auto!important; display: block; } } & h1 { .h1; clear: both; } & p { .p; margin-bottom: 10px; } & ul { .common-ul; padding-left: 20px; margin-top: 10px; margin-bottom: 20px; } & h2 { .h2; clear: both; } & .edit-article-button { .edit-article-button(); } & a.pdf { display: inline-block; padding: 20px 20px 20px 65px; background: url(../images/pdf.png) left center no-repeat; background-size: auto 100%; margin-right: 20px; margin-top: 14px; color: black; @media @desktop { padding: 5px 15px 15px 50px; margin-right: 15px; } @media @ipad { padding: 5px 15px 15px 50px; margin-right: 15px; } @media @mobile { padding: 5px 15px 15px 50px; margin-right: 15px; text-overflow: ellipsis; white-space: nowrap; } } & .MZgallery { padding: 0; margin: 0; & li.gallery-image { height: 175px; padding: 10px; margin-bottom: 0; border: thin solid @lightgrey; &:after { display: none; } & .inner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; .transition(all .2s ease-out); } @media @mobile-p { width: 100%; float: none; } } } } // FIRST PAGE PRODUCTS & .fp-product { height: 380px; position: relative; @media @laptop { height: 300px; } @media @pad { height: 150px; } @media @mobile { height: 150px; text-align: center; } & h1 { .h1; margin-top: 50px; margin-bottom: 20px; text-align: left; text-transform: uppercase; @media @desktop { .font(22px, 300); margin-top: 35px; margin-bottom: 15px; } @media @pad { width: 50%; .font(17px, 300); margin-top: 25px; margin-bottom: 5px; } @media @mobile { display: none; } } & p { width: 50%; .p; padding-right: 20%; color: #696868; margin-bottom: 8px; @media @desktop { padding-right: 10%; } @media @pad { display: none; } @media @mobile { display: none; } } & ul { @media @pad { display: none; } @media @mobile { display: none; } } & .inner { position: absolute; z-index: 9; width: 100%; @media @mobile { text-align: center; padding-top: 50px; } & a { .transition; .slab(14px); letter-spacing: 2px; color: @dark; text-transform: uppercase; background: @light; padding: 10px 10px; margin-top: 10px; display: inline-block; &:hover { background: @dark; color: white; } & span { @media @mobile { display: none; } } @media @desktop { .slab(12px); letter-spacing: 1px; padding: 8px 10px; margin-top: 8px; } } } &:nth-child(even) { background-repeat: no-repeat; background-position: right center; background-size: auto 100%; @media @mobile { background-size: auto 100%; } & .inner { .appearL; left: 0; @media @ipad-p { left: 30px; } @media @pad { left: 30px; } @media @mobile { left: 0px; } } &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.4), inset 0 -8px 8px -8px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.4), inset 0 -8px 8px -8px rgba(0,0,0,0.4); box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.4), inset 0 -8px 8px -8px rgba(0,0,0,0.4); } & .mask { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+70,ffffff+100&1+0,1+70,0+100 */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */ position: absolute; top: 0; left: 0; width: 50%; height: 100%; } } &:nth-child(odd) { background-repeat: no-repeat; background-position: left center; background-size: auto 100%; @media @mobile { background-size: auto 100%; } & .mask { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#001f48+0,001f48+40,001f48+99&0+0,1+40,1+100 */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMWY0OCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMWY0OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzAwMWY0OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDFmNDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(0,31,72,0) 0%, rgba(0,31,72,1) 40%, rgba(0,31,72,1) 99%, rgba(0,31,72,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,31,72,0) 0%,rgba(0,31,72,1) 40%,rgba(0,31,72,1) 99%,rgba(0,31,72,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,31,72,0) 0%,rgba(0,31,72,1) 40%,rgba(0,31,72,1) 99%,rgba(0,31,72,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00001f48', endColorstr='#001f48',GradientType=1 ); /* IE6-8 */ position: absolute; top: 0; right: 0; width: 70%; height: 100%; } & .inner { .appearR; text-align: right; @media @mobile { text-align: center; } & h1 { text-align: right; color: @light; @media @pad { width: 100%; } } & p { text-align: right; padding-left: 70%; padding-right: 0; width: 100%; color: white; @media @desktop { padding-left: 60%; } } & a { color: white; &:hover { background: black; color: white; } } & ul { padding-left: 70%; padding-right: 0; text-align: right; list-style: none; & li { color: @light; .p; margin-bottom: 5px; } } right: 0; @media @ipad-p { right: 30px; } @media @pad { right: 30px; } @media @mobile { right: 0px; } } } } // TOP IMAGE & .top-image { height: 500px; .cover; position: relative; @media @desktop { height: 400px; } @media @laptop { height: 350px; } @media @mobile { display: none; } & div.edit-article-button { top: auto; left: auto; right: 20px; bottom: 20px; & a { .edit-article-button; display: block; width: 100%; height: 100%; } } &.speargun { height: 700px; background-size: 90% auto; & h1 { & span { &:after { content: '-'; padding-left: 4px; } &:last-child { &:after { content: ''; display: none; } } } } & h2 { text-align: center; .font(17px, 700, 22px); color: dimgray; padding: 0 20%; margin: 0; letter-spacing: 0.5px; } } &:after { .grad; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 30%; } & .details { position: absolute; bottom: 0; background: rgba(255, 255, 255, 0.72); width: 100%; & h1 { .font(30px, 300); margin: 0; padding: 20px; text-align: center; background: rgba(0, 31, 72, 0.8); color: white; text-transform: uppercase; letter-spacing: 3px; @media @desktop { .font(25px, 300); letter-spacing: 2px; padding: 15px; } @media @desktop { .font(20px, 300); letter-spacing: 1px; padding: 10px; } } & .inner { .inner; margin: 25px auto; padding-bottom: 20px; @media @desktop { margin: 20px auto; padding-bottom: 0px; } @media @laptop { margin: 10px auto; padding-bottom: 15px; text-align: center; } & p { .p; } & li { .p; } } } & .mask { position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; opacity: 0.5; .grad; .rotate(180deg); } } // SPEARGUNS LIST & .row.content.spearguns { max-width: none; & .products-list { margin: 20px auto; .product-list; } } // LISTS & .f2c-articlemanagereditor { & h1 { .h1; } & button { .adminbutton; } & #filter-bar { & .filter-search { width: 45%; & input[type="text"] { display: inline-block; width: 50%; } & button { display: inline-block; } } & .filter-select { width: 45%; } } & td.f2c_ordering { vertical-align: middle; & > span { .arrowbutton; background: none; margin-right: 5px; margin-top: 5px; & a { display: inline-block; & span { .arrowbutton; float: none; &.icon-uparrow { background-position: top center; &:hover { background-position: center -30px ; } } &.icon-downarrow { background-position: center -60px ; &:hover { background-position: center -90px ; } } } } } & input { display: inline-block; width: 50px; } } } // SPEARGUN PAGE & .product-page { & h2 { .h1; border-bottom: thin solid; margin-top: 20px; padding-bottom: 15px; margin-bottom: 15px; } & table { .main-table; } & > .row { .inner; margin: 20px auto; } & .gun-specs { background: @lightgrey; & h2 { background: @dark; text-align: center; color: white; .font(13px, 700); margin: 0; padding: 10px; letter-spacing: 1px; } & .spec-triggers { display: inline-flex; width: 100%; border-bottom: thin solid @dark; & .spec-trigger { flex-grow: 1; text-align: center; background: white; .font(16px, 700); letter-spacing: 1px; background: #BEC1CC; padding: 5px; border-right: thin solid @dark; cursor: pointer; &:last-child { border-right: none; } .transition; &:hover, &.active { background: @blue; color: white; } } } & .spec-container { padding: 10px 10px 5px; & .spec-label { .font(10px, 400, 19px); padding: 0 0 0 15px; } & .indicator { padding: 0 15px 0 7px; & .spec-indicator { width: 100%; height: 20px; margin-bottom: 4px; background: #D6DBDE; position: relative; & .inner-ind { position: absolute; top: 0; left: 0; width: 0; height: 100%; .transition(all 0.5s ease); background: @blue; } & .inner-label { color: white; text-align: center; position: absolute; top: 0; left: 0; width: 100%; .font(12px, 400, 19px); } } } } } & .description { border-left: thin solid @lightgrey; & p { .p; } & ul.breadcrumb { list-style: none; margin: 0; padding: 0; margin-bottom: 5px; & li { .font(12px, 400); letter-spacing: 0.5px; &:first-child { display: none; } &:after { display: none; } display: inline-block; padding: 0 15px 0 0; position: relative; &:before { content: '>'; position: absolute; color: black; right: 4px; top: -1px; } &:last-child { &:before { display: none; } } & a { color: black; .transition; &:hover { color: @blue; text-decoration: underline; } } } } } & .gun-icons { margin-top: 10px; & li { &:after { display: none; padding-left: 0; } height: 80px; .contain; background-size: 90% auto; padding: 0 5px; } } & .rate { & .rating-text { margin-top: 9px; color: gray; .font(12px, 400); } & .rating-indicator { position: relative; & .rating-top { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/rate-top.png) center center no-repeat; background-size: cover; } & .indicator { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: url(../images/rate-bar.png) left center no-repeat; background-size: cover; .transition(all 1s ease 1s); } } } & .share { & .fb-share-btn { width: 100%; height: 30px; background: url(../images/facebook-share.jpg) left center no-repeat; display: block; background-size: contain; margin-top: 10px; .transition; &:hover { .scale(1.05); } } & .tw-share-btn { width: 100%; height: 30px; background: url(../images/twitter-tweet.jpg) left center no-repeat; display: block; background-size: contain; margin-top: 10px; .transition; &:hover { .scale(1.05); } } } & .tags { & ul { margin: 0; padding: 0; margin-top: 20px; & li { display: block; width: 100%; text-align: center; .font(11px,400); padding: 7px; background: @blue; margin: 0 5px 5px 0; &:after { display: none; } .transition; &:hover { background: @dark; } & a { color: white; } } } } & ul { .common-ul; } & .setups { width: 100%; border-collapse: collapse; & th { vertical-align: middle; background: @dark; text-align: center; color: white; .font(14px, 700); letter-spacing: 2px; height: 40px; border: thin solid white; border-top: none; } & tr { background: none!important; border: none!important; & td { vertical-align: middle; text-align: center; border: thin solid #DCDCDC; .p; margin-bottom: 0; &.first { background: @blue; color: white; font-weight: 700; } } } } & .explain { .p; margin-bottom: 0; } } // RATINGS & .row.ratings { max-width: none; background: black; padding-bottom: 25px; overflow: hidden; @media @desktop { padding-bottom: 0; } @media @laptop { height: 250px; } @media @ipad-p { height: 200px; } @media @pad { display: none; } @media @mobile { display: none; } & h1 { .font(30px, 100); color: @lightgrey; text-align: center; margin-top: 20px; letter-spacing: 2px; margin-bottom: 15px; @media @desktop { .font(25px, 100); } @media @laptop { .font(20px, 100); } } & .moduletable.ratings { & .ratings { width: 100%; display: table; .origin(0,0); @media @desktop { .scale(0.87); } @media @laptop { .scale(0.76); } @media @ipad { .scale(0.74); } @media @ipad-p { .scale(0.65); } & .rating-group { display: table-cell; text-align: center; & h2 { .font(15px, 700); letter-spacing: 2px; margin-bottom: 20px; } & .ratings { width: 100%; display: table; & .circliful { display: table-cell; } } } } } } & ul.nav.menubottom-links { margin:0; padding:0; list-style:none; display:table; width:100%; & li { display: table-cell; border-right: thin solid #000; &:last-child { border-right:none; } & a { display: block; text-align: center; .font(16px, 700, 80px); letter-spacing: 2px; .transition; background: #0070ba; color: #fff; &:hover { background:black; } } } } // BOTTOM MENU & .row.bottom-menu { padding-top: 20px; padding-bottom: 20px; max-width: none; background:white; & .info { border-right: thin solid @grey; text-align: center; @media @pad { border: none; } @media @mobile { border: none; } & img.logo { @media @desktop { width: 100px; height: auto; } @media @laptop { width: 80px; height: auto; } @media @pad { width: 100px; height: auto; } } & .col1 { @media @laptop { width: 100%; } } & .col2 { @media @laptop { width: 100%; } @media @pad { padding-bottom: 30px; } @media @mobile { padding-bottom: 30px; & .click-to-call { width: 100%; margin-top: 25px; background-color: forestgreen; background-image: url(../images/click-to-call.png); background-repeat: no-repeat; background-size: auto 30px; background-position: 10px 5px; color: white; padding: 10px; .font(20px, 300); } } } & h2 { color: @blue; .font(17px,700); letter-spacing: 1px; margin-top: 25px; margin-bottom: 10px; @media @desktop { .font(15px,700); letter-spacing: 0.5px; margin-top: 20px; margin-bottom: 7px; } } & p { .font(14px,400); margin-bottom: 5px; @media @desktop { .font(12px,400); margin-bottom: 3px; } } } & .delivery { text-align: center; width: 100%; margin-top: 25px; @media @desktop { margin-top: 20px; } & img { height: 80px; float: none!important; display: inline-block; @media @desktop { height: 70px; } @media @laptop { height: 60px; } @media @mobile { margin-bottom: 15px; } } } & .columns.menu { border-right: thin solid @grey; @media @pad { border: none; } @media @mobile { border: none; } & ul { margin: 0; padding: 0; list-style: none; display: table; width: 100%; & li { display: table-cell; text-align: center; @media @mobile { display: block; background: @dark; color: white; margin-bottom: 1px; padding: 0; } & a, span { .font(15px, 700); color: black; @media @desktop { .font(13px, 700); color: black; } @media @mobile { color: white; display: block; padding: 10px 10px; } } & a { .transition; &:hover { color: @blue; } } & ul { display: block; @media @mobile { display: none; } & li { display: block; & a, span { cursor: pointer; .font(14px, 400); color: black; @media @desktop { .font(12px, 400); } @media @laptop { .font(11px, 400); } } } } } } } & .cw-social-mod-title-al { color: @blue!important; .font(17px,700); letter-spacing: 1px; text-transform: uppercase; margin-top: 18px!important; @media @desktop { .font(15px,700); letter-spacing: 0.5px; margin-top: 14px!important; } @media @laptop { .font(13px,700); letter-spacing: 0.5px; margin-top: 12px!important; } } & .moduletable.newsletter { @media @ipad { background: @dark; padding: 20px; margin-top: 20px; } @media @pad { background: @dark; padding: 20px; margin-top: 20px; } @media @mobile { background: @dark; padding: 20px; margin-top: 20px; } padding: 0px; & h3 { color: @blue; @media @ipad { color: white; } @media @pad { color: white; } @media @mobile { color: white; } .font(17px,700); letter-spacing: 1px; @media @desktop { .font(15px,700); letter-spacing: 0.5px; } @media @laptop { .font(13px,700, 15px); letter-spacing: 0.5px; } } & div.acymailing_form { width: 100%; & p { padding-right: 10px; vertical-align: top; margin-bottom: 0; height: auto; &:last-child { padding-right: 0; } & input { .font(14px, 400); padding: 6px 10px; height: auto; margin-bottom: 10px; @media @desktop { .font(13px, 400); padding: 4px 8px; } } &.fieldacyemail { width: 100%; @media @ipad { width: 50%; float: left; margin-right: 20px; } @media @pad { width: 50%; float: left; margin-right: 20px; } } &.acysubbuttons { width: 30%; @media @laptop { width: 60%; } @media @ipad { width: 150px; float: left; } @media @pad { width: 150px; float: left; } & .button { padding: 9px 10px; background: @blue; .font(14px, 700); letter-spacing: 1px; width: 100%; color: white; @media @desktop { .font(12px, 700); letter-spacing: 0.5px; } &:hover { background: black; } } } } } & .acymailing_finaltext { .font(12px, 400, 15px); @media @laptop { .font(10px, 400, 13px); } @media @ipad { color: white; width: 100%; clear: both; } @media @pad { color: white; width: 100%; clear: both; } @media @mobile { color: white; width: 100%; clear: both; } } } } & .bottom-buttons { display: table; width: 100%; @media @mobile { display: block; } & p { margin-bottom: 0; } & .col { display: table-cell; border-right: thin solid black; &:last-child { border: none; } @media @mobile { width: 100%; display: block; border: none; margin-bottom: 1px; height: 43px; } & a { display: block; text-align: center; .font(16px,700,80px); letter-spacing: 2px; .transition; background: @blue; color: white; &:hover { background: black; } @media @desktop { .font(14px,700,60px); letter-spacing: 1px; } @media @laptop { .font(12px,700,40px); letter-spacing: 1px; } @media @pad { .font(12px,700,14px); letter-spacing: 1px; padding: 10px 0; min-height: 48px; } } } } // MODALS & .reveal-modal { & .custom { max-height: 400px; overflow-y: scroll; } @media @desktop { padding: 20px; } @media @laptop { width: 60%!important; } @media @pad { width: 80%!important; margin-top: -50px!important; } @media @pad-p { margin-top: 0!important; width: 100%!important; } @media @mobile { margin-top: 0!important; width: 100%!important; } & h1 { .h1; } & p { .p; } & ul { & li { .p; } } & form { &.formResponsive { padding-bottom: 0!important; margin-bottom: 0!important; } & h2 { .font(25px, 100); color: @blue; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-top: 0; margin-bottom: 25px; @media @desktop { .font(20px, 300); letter-spacing: 1px; margin-bottom: 10px; } @media @pad { .font(18px, 300); letter-spacing: 1px; margin-bottom: 7px; } } & fieldset { //background: @lightgrey; .radius(20px); padding: 0; & .rsform-block { margin-bottom: 0!important; &:before { clear: both; } &.rsform-block-captcha { clear: both; padding-top: 10px; @media @pad { height: 63px; } & .formBody { height: auto!important; @media @pad { .origin(0,0); .scale(0.7); } } & #rc-imageselect { .scale(0.7); } } &.rsform-block-submit { & .formBody { padding-right: 0!important; height: auto!important; } text-align: right; } &.rsform-block-date { & .formBody { padding-right: 0!important; } & .rsform-calendar-button { float: right; } & .rsform-calendar-box { width: 89%; } } & .formControlLabel { float: none; width: 100%; text-align: left; .font(13px, 400); @media @desktop { .font(12px, 400); } @media @pad { .font(10px, 400); } & .formRequired { color: @blue; } } & .formControls { float: none; width: 100%; margin: 0; & .formBody { padding-right: 20px; height: 50px; @media @desktop { height: 40px; } @media @pad { height: 35px; } @media @pad-p { height: auto!important; } } & input { max-width: 100%; margin-top: 6px; margin-bottom: 0px; .font(15px,400); padding: 9px; .radius(5px); @media @desktop { .font(13px,400); padding: 6px; } @media @pad { .font(11px,400); padding: 4px; } } & .formDescription { margin-top: 0!important; } & select { max-width: 100%; width: 100%; margin-top: 6px; margin-bottom: 0px; .font(15px,400); padding: 4px 9px; .radius(5px); @media @desktop { .font(13px,400); padding: 6px; height: 19px; margin-bottom: 5px; } @media @pad { .font(11px,400); padding: 4px; } } & textarea { width: 100%; margin-top: 6px; margin-bottom: 0px; .font(15px,400); padding: 9px; .radius(5px); resize: none; @media @desktop { .font(13px,400); padding: 6px; } } & button { background: @blue; .radius(5px); border: none; .font(15px,400); letter-spacing: 1px; color: white; padding: 15px 35px; height: auto; .transition; &:hover { background: black; } @media @desktop { .font(13px,400); letter-spacing: 0.5px; padding: 10px 25px; } } } &.rsform-block-agree { float: left; & label { display: none; } } &.rsform-block-agree-text { float: left; width: 85%; margin-top: 9px; .font(13px, 400, 16px); } } } } } & #questionModal { & .rsform-block-email { width: 50%; padding-right: 10px!important; float: left; } & .rsform-block-telephone { width: 50%; float: left; } & .rsform-block-question { & .formBody { height: auto!important; } } } & #contactModal { & .rsform-block-email { width: 50%; padding-right: 10px!important; float: left; } & .rsform-block-telephone { width: 50%; float: left; } & .rsform-block-question { & .formBody { height: auto!important; } } } // TAGS &.tag-page { max-width: none; background-image: url(../images/azure-back.jpg), url(../images/azure-repeat.jpg); background-repeat: no-repeat, repeat-x; background-position: right top, left top; background-attachment: fixed; background-color: #001f48; & .tag-category { background: white; padding: 40px 0; .shadow; & .row.inner { max-width: 1000px; margin: 0 auto; } & h1 { .h1; text-transform: uppercase; margin-top: 0; } & ul.products-list { .product-list; } } } & .footer { position: absolute; width: 100%; left: 0; bottom: 0; background: black; color: white; .font(12px, 400); @media @desktop { .font(10px, 400); } & .credits { padding: 10px 20px 15px; @media @mobile { text-align: center; } } & .design { position: absolute; right: 20px; bottom: 15px; @media @mobile { position: static; text-align: right; padding-bottom: 10px; padding-right: 10px; } } } // PAGE SHARE & .article-rate-share { & .rate { margin-bottom: 20px; @media @laptop { margin-bottom: 10px; } & .rating-text { margin-top: 9px; color: gray; .font(12px, 400); } & .rating-indicator { position: relative; & .rating-top { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/rate-top.png) center center no-repeat; background-size: cover; } & .indicator { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: url(../images/rate-bar.png) left center no-repeat; background-size: cover; .transition(all 1s ease 1s); } } } float: right; margin-left: 20px; margin-bottom: 20px; border-left: thin solid grey; border-bottom: thin solid grey; width: 160px; padding: 0 20px 10px; @media @desktop { width: 155px; } @media @laptop { width: 155px; } & a { width: 100%; height: 30px; display: block; margin-bottom: 10px; .transition; &:hover { .scale(1.05); @media @desktop { .scale(1); .translate(-1px,-1px,0); } } @media @desktop { display: inline-block; width: 47%; margin-bottom: 0; } @media @laptop { display: inline-block; width: 47%; margin-bottom: 0; } &.fb-share-btn { background: url(../images/facebook-share.jpg) center center no-repeat; background-size: contain; } &.tw-share-btn { background: url(../images/twitter-tweet.jpg) center center no-repeat; background-size: contain; } } } // PRODUCT CATEGORIES & .product-categories { height: 200px; @media @laptop { height: 160px; } @media @pad { height: 140px; } @media @mobile { display: none; } & .product-category { display: inline-block; height: 100%; width: 25%; .cover; float: left; -webkit-box-shadow:inset 0 0 8px 2px rgba(0,0,0,0.6); box-shadow:inset 0 0 8px 2px rgba(0,0,0,0.6); & .title { text-align: center; position: absolute; background: @dark; color: white; bottom: 10%; left: 10%; width: 80%; padding: 10px; .font(17px, 300); letter-spacing: 2px; text-transform: uppercase; .transition; @media @laptop { .font(13px, 300); letter-spacing: 1px; } } .transition(all 0.4s ease); &:hover { -webkit-box-shadow:inset 0 0 8px 2px rgba(0,0,0,0); box-shadow:inset 0 0 8px 2px rgba(0,0,0,0); & .title { bottom: 15%; } } } } // SPECIAL OFFERS & .fp-special-offer { display: block; text-align: center; background: red; color: white; padding: 20px; .font(20px, 700); letter-spacing: 3px; text-shadow: 0 0 5px #000000; @media @laptop { .font(18px, 700); letter-spacing: 3px; padding: 15px; } @media @mobile { .font(15px, 700); letter-spacing: 1px; text-shadow: none; } } } // ANIMATION @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .circliful { position: relative; } .circle-text, .circle-info, .circle-text-half, .circle-info-half { width: 100%; position: absolute; text-align: center; display: inline-block; top: -10px; } .circle-info, .circle-info-half { color: black; .font(12px,700); width: 56%; left: 22%; line-height: 14px !important; top: 54%; } .circliful .fa { margin: -10px 3px 0 3px; position: relative; bottom: 4px; } // GALLERY .modalblocker { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; z-index: 9998; } .mzmodal { background: #FFF; -webkit-box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.5); position: fixed; z-index: 999999999; top: 50%; left: 50%; opcity: 0; .transition(opacity 0.2s 0.5s ease); & .wrap img { position:absolute; width:100%; height:100%; top:0; left:0; } } .modaldetails { position: absolute; bottom: 5px; background: #FFF; padding: 10px 20px; font-size: 13px; font-weight: 700; left: 5px; &:empty { display:none; } } .closebtn { position: absolute; background: url(../images/close9.png) center center no-repeat; .contain; width: 24px; height: 24px; cursor:pointer; right:10px; top:10px; opacity:0.6; .transition(all 0.3s ease); &:hover { opacity:1; } @media @desktop { width: 20px; height: 20px; } } .MZarrow { position:absolute; top:50%; margin-top:-32px; width:33px; height:64px; background-image: url(../images/MZarrows.png); background-repeat:no-repeat; cursor:pointer; &.MZarrowLeft { left:20px; background-position:center -128px; &:hover { background-position:center -192px; } } &.MZarrowRight { right:20px; background-position:center top; &:hover { background-position:center -64px; } } } .MZpop { cursor:pointer; overflow:hidden; &:after { content: ''; position: absolute; width: 100px; height: 100px; background: url(../images/zoom.png) center center no-repeat; width: 100%; height: 100%; top: 0; background-size: 35px; opacity: 0; .transition(opacity 0.2s ease); } &:hover:after { opacity:0.7; } & img, & .inner-image { .transition(all 0.2s ease); } &:hover img, &:hover .inner-image { .scale(1.1); } } .mzPopGallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(../images/495.gif) center center no-repeat; -webkit-animation: fadeIn 1.0s ease; -moz-animation: fadeIn 1.0s ease; -ms-animation: fadeIn 1.0s ease; -o-animation: fadeIn 1.0s ease; animation: fadeIn 1.0s ease; z-index: 10000; & > .wrap { overflow: hidden; & .close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; cursor: pointer; .transition; background: url(../images/close.png) center center no-repeat; background-size: 100%; &:hover { .scale(1.4); } @media @desktop { width: 20px; height: 20px; } } & .preloader { position: absolute; width: 60px; height: 60px; left: 50%; margin-left: -30px; top: 50%; margin-top: -30px; animation: preloader 1.5s linear infinite; -webkit-animation: preloader 1.5s linear infinite; -moz-animation: preloader 1.5s linear infinite; -ms-animation: preloader 1.5s linear infinite; -o-animation: preloader 1.5s linear infinite; animation: preloader 1.5s linear infinite; clip: rect(0, 60px, 60px, 30px); opacity: 0; .transition(); &.active { opacity: 1; } &:after { animation: preloader2 1.5s linear infinite; -webkit-animation: preloader2 1.5s linear infinite; -moz-animation: preloader2 1.5s linear infinite; -ms-animation: preloader2 1.5s linear infinite; -o-animation: preloader2 1.5s linear infinite; animation: preloader2 1.5s linear infinite; clip: rect(0, 60px, 60px, 30px); content: ''; border-radius: 50%; height: 60px; width: 60px; position: absolute; } } & .MZarrow2 { position: absolute; .arrowNav(70px, rgba(0,0,0,0.3), #fff, @blue); top: 50%; left: -100px; margin-top: -35px; @media @desktop { .arrowNav(40px, rgba(0,0,0,0.3), #fff, @blue); } &.MZarrowRight { left: auto; right: -100px; .rotate(180deg); &.active { right: 30px; } } &.MZarrowLeft { &.active { left: 30px; } } } & .image { .contain; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; opacity: 0; .transition(all 0.5s ease 0.5s); &.active { opacity: 1; } &:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; //.maskB; } & .title { .font(40px, 100); position: absolute; left: 50px; bottom: 50px; color: white; text-shadow: 0 0 3px #000000; z-index: 10001; letter-spacing: 3px; .translate(0,200px,0); .transition(all 0.8s ease 0s); display: none; &.active { .translate(0,0,0); .transition(all 0.8s ease @arrowDelay); } } } } } .adminformsresults { background: @lightgrey; & div.moduletable { border-top: thin solid black; border-bottom: thin solid black; margin-bottom: 20px; & h3 { .h1; } & table { background: none; border-collapse: collapse; width: 80%; margin: 0 auto; & tr { & th { background: black; color: white; text-align: center; border: thin solid black; .font(14px, 700); letter-spacing: 1px; } & td { border: thin solid black; .font(14px, 300, 17px); } } } } } & .plg_system_eprivacy_module { & div.plg_system_eprivacy_message { left: 10px; bottom: 10px; width: 250px; position: fixed; z-index: 99999999; border: none; padding: 0; overflow: visible; background: @blue; & .inner { padding: 10px; & p { text-align: left; color: white; .font(12px,400,15px); width: 100%; margin: 0; } & .buttons { display: flex; align-items: center; justify-content: flex-end; margin-top: 20px; & button { float: none; border: none; .noshadow; .font(13px,400); background: black; color: white; padding: 6px 10px; cursor: pointer; .transition; white-space: nowrap; border: thin solid grey; margin-left: 5px; margin-bottom: 0; &:hover { border: thin solid @blue; background: @blue; } } } } } & div.plg_system_eprivacy_accepted, & div.plg_system_eprivacy_declined { position: fixed; bottom: 0px; left: 0px; z-index: 99999999; border: none; padding: 0; width: 100%; overflow: visible; & .inner { padding: 5px 10px; background: @blue; .shadow; display: flex; align-items: center; & p { text-align: left; color: white; .font(12px,400); width: 100%; margin: 0; } & button { float: none; border: none; .noshadow; .font(13px,400); background: black; color: white; padding: 6px 10px; cursor: pointer; .transition; white-space: nowrap; border: thin solid grey; margin-left: 5px; &:hover { border: thin solid @blue; background: @blue; } } } } & div.plg_system_eprivacy_accepted, & div.plg_system_eprivacy_declined { position: static; & .inner { background: @blue; & button { margin-bottom: 0; margin-left: 5px; } } } }