@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic-ext); @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700&subset=latin,cyrillic-ext); // variables @colP:#333; @colH:#1a1a1a; @colA:#e94e30; @colPlac:#7c7c7c; @colB:#1e294e; @fs:14px; @ff:'Open Sans', sans-serif; @f:'Roboto Condensed', sans-serif; // mixins .br(@r){ -moz-border-radius:@r; -webkit-border-radius:@r; -o-border-radius:@r; border-radius:@r; } .bs(@s){ -moz-box-shadow:@s; -webkit-box-shadow:@s; -o-box-shadow:@s; box-shadow:@s; } .t(@s){ -moz-transition:@s; -webkit-transition:@s; -o-transition:@s; transition:@s; } .lg(@from,@col1,@col2){ background-color:@col2; background-image: -o-linear-gradient(@from,@col1,@col2); background-image: -moz-linear-gradient(@from,@col1,@col2); background-image: -webkit-linear-gradient(@from,@col1,@col2); background-image: -ms-linear-gradient(@from,@col1,@col2); background-image: linear-gradient(@from,@col1,@col2); } /* all */ *{ margin:0; padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; &:after, &:before{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } } html{ overflow-x:auto; } body{ font-family:@ff; color:@colP; font-size:@fs; -webkit-font-smoothing:subpixel-antialiased; background:#fff; overflow:hidden; min-width:1000px; line-height:1.3; } a{ color:@colA; text-decoration:none; &:focus, &:active{ outline:none; } } h1,h2,h3,h4,h5,h6{ font-weight:normal; } input, button, textarea{ font-family:@ff; font-size:@fs; &:focus{ outline:none; } } input{ padding-top:0; padding-bottom:0; } ::-moz-placeholder{ font-family:@ff; font-size:@fs; overflow:visible; color:@colPlac; text-transform:uppercase; } :-ms-input-placeholder{ font-family:@ff; font-size:@fs; overflow:visible; color:@colPlac; text-transform:uppercase; } ::-webkit-input-placeholder{ font-family:@ff; font-size:@fs; overflow:visible; color:@colPlac; text-transform:uppercase; } table{ border-collapse:collapse; border-spacing:0; } button, input[type="submit"], input[type="button"]{ cursor:pointer; } img{ border:none; max-width:100%; } ul{ list-style:none; } .container{ width:1000px; margin:0 auto; position:relative; } .row:after{ display:table; line-height:0; content:''; clear:both; } /* header */ .header{ background:@colB url(../img/header.jpg) center top no-repeat; min-height:720px; } .head{ padding:11px 0 68px; } .logo{ display:inline-block; float:left; } .head-contacts{ display:inline-block; width:27.6%; float:right; padding:5px 25px; border-left:solid 6px @colA; color:#fff; line-height:1; p+p{ margin-top:8px; } span{ font-weight:700; font-size:20px; } .regime{ font-size:12px; } } .header-content{ padding-bottom:5px; } .header-text{ display:inline-block; float:left; width:50%; color:#fff; } .main-title{ font-family:@f; font-size:48px; margin-bottom:20px; text-transform:uppercase; line-height:1.1; } .header-text-block{ font-family:arial,helvetica,sans-serif; line-height:1.6; &+&{ margin-top:25px; } } .header-text-list{ li{ &:before{ content:''; width:18px; height:15px; display:inline-block; margin:2px 7px 0 5px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0MwMkMwNUMzNkFCMTFFNUEzMTk5NUY5MEU2NDI5QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0MwMkMwNUQzNkFCMTFFNUEzMTk5NUY5MEU2NDI5QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQzAyQzA1QTM2QUIxMUU1QTMxOTk1RjkwRTY0MjlDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQzAyQzA1QjM2QUIxMUU1QTMxOTk1RjkwRTY0MjlDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiPvi2QAAADdSURBVHjaYvn06dMEBgaGs0C8Eoh/MZAJmKCGLALi50DcBcRy5BjECHQRG5B+CMQSSOJbgXgKEO8gxUUg78xCE/cG4u1AfBuIS4FYiBgXMUBdA3IVGw5134F4GdTCU7hcBAIvoIGNC3ACcTIQn4TiWHRLYS4CAUsgPkZC+L4D4rnQsHyEbBAD1HvkxFouCxLHjERDYC4ChdsdZINyiDQAlO6mQwP/O6mx9gsaGVNwxRrMRWk4DHkE1TwX6hWSU/YOqAFbiQ0wkItCoIagBB6p0cYCja0U9MAjFQAEGAD1Q0UmbOFiVAAAAABJRU5ErkJggg=='); } } } .form-block{ position:relative; padding-bottom:20px; } .alert{ position:absolute; height:20px; padding:0 10px; background:red; color:#fff; font-size:12px; line-height:20px; top:0; right:0; font-style:normal; .br(4px); .t(all .3s); opacity:0; z-index:-2; white-space:nowrap; &:after{ content:''; position:absolute; width:0; height:0; border-top:solid 8px red; border-left:solid 5px transparent; border-right:solid 5px transparent; bottom:-8px; right:20px; } &.active{ opacity:1; z-index:2; top:-19px; } } .send{ text-align:center; padding:50px 20px; font-size:30px; width:600px; -webkit-transform:translateZ(0); } .form-header{ display:inline-block; float:right; width:28.5%; background:rgba(255,255,255,.77); .br(13px); border:solid 2px #fff; padding:30px 0 38px; } .form-header-title{ color:@colH; font-size:28px; font-weight:300; padding:0 10px 24px; text-transform:uppercase; } .form-header-body{ padding:0 22px; } .form-header-body-text{ margin-bottom:22px; } .input{ display:block; width:100%; height:44px; border:solid 2px #e24e32; background:#f2f2f2; text-transform:uppercase; padding:0 11px; } .submit{ height:50px; width:100%; .br(4px); border:0; background:@colB; .t(.2s); font-size:24px; font-weight:700; text-transform:uppercase; color:#fff; margin-top:2px; &:hover{ background:@colA; } } /* equipment */ .equipment{ background:url(../img/equipment.jpg) center top repeat-y; padding:50px 0 20px; } .section-title{ text-transform:uppercase; text-align:center; margin-bottom:65px; color:@colH; font-size:37px; line-height:1.15; } .equipment-row{ padding-bottom:10px; &+&{ padding-top:40px; border-top:dotted 1px @colB; } } .equipment-imgs{ display:inline-block; width:57%; text-align:center; } .equipment-imgs-title{ text-align:center; margin-bottom:@colH; margin-bottom:10px; } .equipment-img{ display:inline-block; &+&{ margin-top:10px; } } .fancybox-skin{ background:#fff; color:@colP; } .equipment-desc{ display:inline-block; float:right; width:40%; } .equipment-title{ text-transform:uppercase; font-weight:700; font-size:20px; text-transform:uppercase; margin-bottom:35px; color:@colH; } .equipment-text{ padding-bottom:25px; line-height:1.5; p+p{ margin-top:10px; } .title{ font-weight:700; } } .btn{ display:inline-block; padding:12px 34px; .br(4px); .t(.2s); background:@colB; color:#fff; font-weight:700; text-transform:uppercase; &:hover{ background:@colA; } } .read-more{ margin-top:10px; } .modal{ display:none; width:400px; } .modal-title{ text-align:center; padding:10px 0 20px; } .form-modal{ padding-bottom:25px; } /* choice */ .choice{ padding:75px 0 40px; background:@colB url(../img/choice.jpg) center top repeat-y; color:#fff; .section-title{ color:#fff; font-weight:300; } } .choice-selects{ padding-bottom:20px; } .choice-selects-row{ padding-bottom:25px; } .choice-select-wrapp{ display:inline-block; float:left; width:48%; margin-right:4%; &:last-child{ margin-right:0; } } .select-title{ margin-bottom:10px; } .select{ position:relative; } .slct{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; cursor:pointer; position:relative; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none; user-select:none; text-align:left; border:solid 3px #e6e6e6; padding:0 35px 0 8px; height:44px; line-height:38px; font-weight:300; color:#fff; cursor:pointer; .t(.2s); &:before{ content:''; position:absolute; width:19px; height:13px; right:10px; top:14px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAANCAYAAABLjFUnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkZENkVDQTQzNkMyMTFFNUExQjlGNkVDRDQ0MDY4RDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkZENkVDQTUzNkMyMTFFNUExQjlGNkVDRDQ0MDY4RDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RkQ2RUNBMjM2QzIxMUU1QTFCOUY2RUNENDQwNjhEOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RkQ2RUNBMzM2QzIxMUU1QTFCOUY2RUNENDQwNjhEOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlXADuEAAAC8SURBVHjaYnz27BkDFLABsRAQv2AgHkgA8Tsg/gXiMCEZtAKIDwOxNJEGSUPVr4DqZ2AEugzEWArEIVBFd4DYAYifEjDoABCrQPlrgDgaZFgRkNGLphifgegGwUAxNpfBwE0gdkYzEJdBcJfBwoyQgXgNAkUCI1ps4jIwGhrQOA2CRQCyJC4DsQEUg7AZRqyBGAbhMgw53QUSaxA+w2AGrgZiP2IMImQYugvxGkSMYTADM4F4Oj6DQAAgwACvoVD9vGhI3wAAAABJRU5ErkJggg=='); } } .slct-list{ position:absolute; top:100%; left:0; right:0; display:none; max-height:300px; overflow:auto; z-index:100; line-height:1; text-align:left; border:solid 1px #e6e6e6; margin-top:-1px; li{ cursor:pointer; line-height:1; padding:5px 8px; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none; user-select:none; color:@colP; .t(.15s); background:#e6e6e6; &:hover{ background:darken(#e6e6e6,5%); } } } .choice-btn-wrapp{ text-align:center; margin-bottom:75px; } .choice-btn{ font-size:24px; text-transform:uppercase; font-weight:700; color:#fff; padding:20px 50px; .br(4px); background:@colA; .t(.2s); display:inline-block; &:hover{ -webkit-transform:scale(.97); } } .down{ text-align:center; } .down-title{ margin-bottom:25px; text-transform:uppercase; } .down-link{ position:relative; padding-left:34px; font-weight:700; text-transform:uppercase; text-decoration:underline; &:hover{ text-decoration:none; } &:before{ content:''; position:absolute; width:23px; height:23px; left:0; top:50%; margin-top:-12px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjgwM0JEMTQzNkM0MTFFNTk1MkNENjMxMTg4ODRDQzYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjgwM0JEMTUzNkM0MTFFNTk1MkNENjMxMTg4ODRDQzYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2ODAzQkQxMjM2QzQxMUU1OTUyQ0Q2MzExODg4NENDNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2ODAzQkQxMzM2QzQxMUU1OTUyQ0Q2MzExODg4NENDNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgFimxwAAAF/SURBVHjaYvz//z8DHmAAxOFA7ATEEkAsB8SPgPgFEB8E4mVAfAGnbpDhWLANEC/9TxxYDcRO2MzBZnAXksbzQFwBxGZALAeVl4PyS6HyMNBOyPDJSIpLcfgKHZci6ZmMy/AWJEV+RBoMw37YfIAcxjAQQqLB2CxwQjYcFnkVWDShgzo8FhQhRTLYcHUkjcxEGE7IgqtQNVpMwNQYCE2VHUD8l4E40AjEdTjkFkPpWJBNB6A22eNwCT6ATb0xVO4MI5B4BbRFFIjFgPg1tnyGxweMWMSEgPgtEL8DBQsbVPAXA3XAO5glTEiGslHJcCGYJSDDb0I56lQyXBFK3wcZvhXK8aaS4a5QejcodrWgsXuVSqnlDFTOGCawEU9hRYrhsBy6Fzn7eyBpCCSzbPFGL5+QJdtpVSpSUp7nE1Oe46qJSqE1jwRUXhSaxUHiJ5HUdhFTzYGwKxCvI7IO3QiNMwxzGImo/aOA2B5a80tAyx9QC2AfEK8B4lO4NAMEGADtZKY65UThwQAAAABJRU5ErkJggg=='); } } /* about */ .about{ padding:80px 0 70px; .section-title{ font-weight:300; margin-bottom:50px; } } .about-text{ line-height:1.5; color:@colH; p{ margin-bottom:30px; } } /* clients */ .clients{ padding-bottom:80px; } .clients-title{ margin-bottom:30px; text-align:center; font-size:24px; color:#383838; text-transform:uppercase; } .clients-row{ font-size:0; margin:0 -15px; } .clients-block{ width:16.5%; display:inline-block; vertical-align:middle; padding:0 15px; img{ display:block; margin:auto; } } /* also */ .also{ position:relative; padding:90px 0 175px; background:@colB; &:before{ content:''; position:absolute; width:100%; height:6px; background:url(../img/also.png) center top repeat-x; left:0; top:-6px; } .section-title{ color:#fff; font-weight:300; margin-bottom:110px; } } .also-block{ display:inline-block; float:left; width:25%; padding:0 20px 0 40px; color:#fff; } .also-title{ margin-bottom:17px; font-family:@f; font-size:20px; text-transform:uppercase; } .also-text{ line-height:1.5; p+p{ margin-top:5px; } } /* question */ .question{ background:url(../img/question.jpg) center center no-repeat; background-size:cover; .container{ min-height:193px; } } .question-img{ position:absolute; left:14px; bottom:0; } .question-content{ padding:30px 0 15px 250px; } .question-text{ margin-bottom:30px; font-size:26px; font-weight:300; color:#000; p+p{ margin-top:5px; } } .form-question-row{ .form-block{ display:inline-block; float:left; margin:0 2.4% 0 0; padding-bottom:0; width:36.6%; } .submit{ display:inline-block; float:left; width:22%; margin:0; height:44px; font-size:14px; } .input{ background:rgba(255,255,255,.77); } } .contacts{ padding:100px 0 65px; } .contacts-title{ padding-bottom:24px; margin-bottom:60px; position:relative; font-weight:300; &:before{ content:''; position:absolute; width:194px; height:5px; left:50%; bottom:0; margin-left:-97px; background:#e23f3f; } } .contacts-block{ display:inline-block; float:left; width:33.333%; padding:0 20px 0 30px; } .contacts-block-body{ position:relative; padding-left:48px; line-height:1.5; .title{ font-weight:700; } &:before{ content:''; position:absolute; width:31px; height:31px; left:0; top:0px; background:url(../img/contacts-icon.png); } a{ color:inherit; &:hover{ text-decoration:underline; } } } /* map */ .map{ height:530px; } /* footer */ .footer{ padding:27px 17px; background:@colB; color:#fff; } .footer-contacts{ display:inline-block; float:left; width:50%; padding:0 20px; .title{ font-weight:700; } p+p{ margin-top:7px; } a{ color:inherit; &:hover{ text-decoration:underline; } } } .footer-contant{ display:inline-block; float:right; padding:35px 10px 0 20px; } .counter-wrapp{ margin-bottom:20px; text-align:right; } .developer{ text-transform:uppercase; text-align:right; font-size:12px; a{ color:inherit; &:hover{ text-decoration:underline; } } }