/*GENERAL*/ @lightgray: #eeeee2; @black: #2b2b2b; @gold: /*#c6ad6a*/#DAA520; @darkgold: #B1861A; @gray: #747474; @darkergray: #e8e8dc; @shadowcolor: #C0C0BA; body { font-family: 'Montserrat', sans-serif; background: @lightgray; } @media (min-width: 1400px) { .container { max-width: 1140px; } } @media (min-width: 1500px) { .container { max-width: 1230px; } } @media (min-width: 1600px) { .container { max-width: 1330px; } } @media (min-width: 1700px) { .container { max-width: 1430px; } } @media (min-width: 1800px) { .container { max-width: 1530px; } } @media (min-width: 1920px) { .container { max-width: 1630px; } } /*HEADER*/ header { .header-top { background: @black; .callback { text-align: right; padding: 34px 0; a { color: @black; font-size: 18px; font-weight: 600; text-transform: uppercase; background: @lightgray; padding: 15px 30px; border-bottom: 10px solid @shadowcolor; position: relative; &:hover, &:focus { text-decoration: none; } &:after { content: " "; position: absolute; width: 54px; height: 54px; background-image: url(../img/triangle1.svg); background-size: cover; background-repeat: no-repeat; top: -15px; left: -35px; transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; border-left: none; border-right: none; border-top: none; &:hover, &:focus { background: @gold; color: @lightgray; border-bottom: 10px solid #B1861A; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; &:after { background-image: url(../img/triangle3.svg); transform: rotate(360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } } } .site-logo { position: relative; img{ position: absolute; bottom: -20px; max-width: 90%; } } } .header-bottom { .site-menu { ul { list-style: none; padding-top: 20px; padding-left: 100px; li { display: inline-block; margin-left: 20px; a { color: @gray; font-size: 20px; font-weight: 600; &:hover, &:focus { color: @black; text-decoration: none; } } } } } } } /*PAGE*/ .page { .first { padding-top: 100px; position: relative; .inner { position: relative; .cart { position: absolute; top: -50px; left: 1030px; } } h1 { font-size: 72px; font-weight: 600; text-align: left; position: relative; color: @black; margin-bottom: 40px; } .subtitle { font-size: 40px; font-weight: 400; color: @black; text-align: left; position: relative; } .link { text-align: left; position: relative; padding-top: 120px; padding-bottom: 170px; padding-left: 40px; a { color: @black; font-size: 20px; font-weight: 600; background: @gold; border-bottom: 10px solid @darkgold; padding: 15px 30px; outline: none; text-transform: uppercase; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; &:hover, &:focus { background: @black; color: @gold; border-bottom: 10px solid @darkgold; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; &:after { background-image: url(../img/triangle1.svg); transform: rotate(360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } &:after { content: " "; position: absolute; width: 54px; height: 54px; background-image: url(../img/triangle2.svg); background-size: cover; background-repeat: no-repeat; top: -15px; left: -35px; transform: rotate(-360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } } .scroll { text-align: center; padding: 50px 0; } } section.services { background: @darkergray; overflow: hidden; border-bottom: 1px solid @shadowcolor; padding-bottom: 40px; .title { padding: 80px 0 148px; position: relative; p { font-size: 28px; letter-spacing: 0.8em; text-transform: uppercase; font-weight: 700; margin-bottom: 0; padding-left: 75px; position: relative; &:before { content: " "; position: absolute; background: @gold; width: 640px; height: 52px; top: 50%; transform: translateY(-50%); left: -85px; box-shadow: 0px 4px 4px @gray; } span { position: relative; } } &:before { content: " "; position: absolute; height: 268px; width: 24px; background: @black; top: 0; left: 24px; } } .services-row { padding-top: 50px; .block { text-align: center; margin-bottom: 100px; position: relative; .block-title { font-weight: bold; font-size: 24px; letter-spacing: 0.5em; text-transform: uppercase; color: @black; position: relative; &:after { content: " "; position: absolute; width: 287px; height: 0px; border: 1px solid @gold; bottom: -15px; left: 50%; transform: translateX(-50%); } } p.block-text { font-weight: 500; font-size: 20px; line-height: 42px; width: 300px; margin: 30px auto; } .figure { position: absolute; left: 50%; transform: translateX(-50%); top: -125px; max-width: 100%; } } .offer-desc { margin-top: 40px; .inner { background: @lightgray; padding: 60px 60px 40px; .offer-title { font-weight: bold; font-size: 24px; line-height: 42px; letter-spacing: 0.5em; text-transform: uppercase; color: @black; margin-bottom: 0; } .species-row { padding-top: 60px; ul { padding-left: 20px; li { font-weight: 500; font-size: 18px; line-height: 38px; } } .species-link { padding-top: 70px; padding-bottom: 30px; padding-left: 60px; position: relative; a { color: @black; font-size: 20px; font-weight: 600; background: @gold; border-bottom: 10px solid @darkgold; padding: 15px 30px; outline: none; text-transform: uppercase; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; &:hover, &:focus { background: @black; color: @gold; border-bottom: 10px solid @darkgold; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; &:after { background-image: url(../img/triangle1.svg); transform: rotate(360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } &:after { content: " "; position: absolute; width: 54px; height: 54px; background-image: url(../img/triangle2.svg); background-size: cover; background-repeat: no-repeat; top: -15px; left: -35px; transform: rotate(-360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } p { font-weight: 500; font-size: 18px; position: absolute; top: 75px; left: 365px; margin-bottom: 0; } } } } } } } .second { padding: 100px 0 150px; position: relative; .inner { width: 1200px; margin: 0 auto; padding: 0 45px; .title { color: @black; font-weight: 700; font-size: 24px; line-height: 175%; text-align: center; letter-spacing: 0.5em; text-transform: uppercase; } } form { width: 610px; margin: 60px auto; p.form-label { color: @black; font-weight: bold; font-size: 20px; text-align: center; letter-spacing: 0.5em; text-transform: uppercase; } input { background: transparent; border: 1px solid @black; color: @black; width: 100%; padding: 10px; margin-bottom: 70px; outline: none; font-weight: 500; font-size: 20px; } .form-submit { text-align: right; padding-top: 30px; position: relative; button { color: @black; font-size: 20px; font-weight: 600; background: @gold; border-bottom: 10px solid @darkgold; padding: 15px 30px; outline: none; text-transform: uppercase; position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; border-left: none; border-right: none; border-top: none; &:hover, &:focus { background: @black; color: @gold; border-bottom: 10px solid @darkgold; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; &:before { background-image: url(../img/triangle1.svg); transform: rotate(360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } &:before { content: " "; position: absolute; width: 54px; height: 54px; background-image: url(../img/triangle2.svg); background-size: cover; background-repeat: no-repeat; top: -15px; left: -35px; transform: rotate(-360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } } .form-alert { position: absolute; font-size: 14px; color: @black; font-weight: 500; width: 280px; bottom: 4px; margin-bottom: 0; left: 0; a { color: @black; text-decoration: underline; &:hover, &:focus { color: @gold; } } } .input_block { position: relative; padding-top: 30px; } } .decor { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 104px; height: 24px; background: url(../img/decor.svg); background-repeat: no-repeat; background-size: cover; } } } /*FOOTER*/ footer { padding: 100px 0 50px; .inner { width: 100%; margin: 0 auto; padding: 0 45px; .footer-social { text-align: center; margin-bottom: 20px; a { margin: 0 20px; color: @black; &:hover, &:focus { text-decoration: none; } div { width: 60px; height: 32px; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; display: inline-block; &#instagram { background-image: url(../img/instagram.svg); } &#facebook { background-image: url(../img/facebook.svg); } &#zen { background-image: url(../img/zen.svg); } &#twitter { background-image: url(../img/twitter.svg); } &#vk { background-image: url(../img/vk.svg); } } } } .footer-mail, .footer-policy { text-align: center; padding: 20px 0; a { font-size: 16px; color: @black; text-decoration: underline; font-weight: normal; &:hover, &:focus { color: @gold; } } } .footer-copy { text-align: center; padding: 20px 0; font-size: 16px; font-weight: normal; color: @black; p { margin-bottom: 0; } } } } /*MODAL*/ .modal { .modal-dialog { max-width: 700px; } .modal-content { background: @lightgray; border-radius: 0; .modal-header { padding: 0 10px; button.close { font-size: 40px; outline: none; } } .modal-body { .modal-title { font-size: 30px; font-weight: 600; color: @black; text-align: center; text-transform: uppercase; } form { padding: 50px; p.form-label { font-size: 20px; font-weight: 600; color: @black; text-transform: uppercase; } input { background: transparent; border: 1px solid @black; font-size: 16px; color: @black; width: 100%; padding: 10px; margin-bottom: 50px; outline: none; } .form-submit { text-align: center; button { color: @black; font-size: 20px; font-weight: 600; background: @gold; border-bottom: 10px solid @darkgold; padding: 15px 30px; outline: none; text-transform: uppercase; position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; border-left: none; border-right: none; border-top: none; &:hover, &:focus { background: @black; color: @gold; border-bottom: 10px solid @darkgold; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; &:before { background-image: url(../img/triangle1.svg); transform: rotate(360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } &:before { content: " "; position: absolute; width: 54px; height: 54px; background-image: url(../img/triangle2.svg); background-size: cover; background-repeat: no-repeat; top: -15px; left: -35px; transform: rotate(-360deg); transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.8, 0, 1, 1) 0s; } } } .form-alert { font-size: 16px; color: @black; font-weight: 400; width: 70%; margin-left: 15%; padding-top: 15px; } } } } } .modal-sent-overlay { width: 100%; height: 100%; position: fixed; background: rgba(43, 43, 43, 0.5); z-index: 1000; top: 0; left: 0; display: none; } .modal-sent-overlay.show { display: block; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; } .modal-sent { position: fixed; width: 700px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: @lightgray; border: 5px solid @gold; z-index: 1500; color: @black; padding: 30px; text-align: center; font-size: 24px; font-weight: 400; display: none; .modal-sent-close { font-weight: 600; color: @gold; cursor: pointer; } } .modal-sent.show { display: block; } .mobile-callback-link { position: fixed; z-index: 500; bottom: 0; display: none; background: @gold; text-align: center; width: 100%; padding: 15px 0; a { color: @black; font-size: 20px; font-weight: 600; text-transform: uppercase; } } .callback-first-step.closed { display: none; } .callback-second-step { display: none; text-align: center; color: @black; font-size: 24px; font-weight: 400; } .callback-second-step.show { display: block; } /*ADAPTIVE*/ @media (max-width: 1899px) { .page .first .subtitle { font-size: 38px; } .page .first .link { padding-top: 100px; padding-bottom: 150px; } .page .first .inner .cart { top: -50px; left: 990px; } } @media (max-width: 1799px) { .page .first .subtitle { font-size: 36px; } .page .first .link { padding-top: 80px; padding-bottom: 130px; } } @media (max-width: 1699px) { .page .first h1 { font-size: 58px; } .page .first .subtitle { font-size: 32px; } .page .first .inner .cart { top: -50px; left: 850px; width: 450px; } .page section.services .services-row .offer-desc .inner .species-row .species-link p { font-size: 16px; } } @media (max-width: 1599px) { .page .first .subtitle { font-size: 30px; } .page section.services .services-row .offer-desc .inner .species-row .species-link p { font-size: 14px; } .page section.services .services-row .offer-desc .inner .species-row ul li { font-size: 16px; line-height: 30px; } } @media (max-width: 1499px) { .page .first h1 { font-size: 50px; } .page .first .subtitle { font-size: 24px; } .page .first .inner .cart { top: -50px; left: 720px; width: 400px; } .page section.services .services-row .offer-desc .inner .species-row ul li { font-size: 14px; line-height: 28px; } .page section.services .services-row .offer-desc .inner .species-row .species-link p { font-size: 12px; } .page .second .inner { width: 1020px; } } @media (max-width: 1399px) { header .header-bottom .site-menu ul { padding-left: 90px; } } @media (max-width: 1299px) { header .header-top .callback a { font-size: 16px; padding: 10px 30px; border-bottom: 5px solid @shadowcolor; &:after { width: 40px; height: 40px; top: -11px; left: -25px; } } header .header-top .callback { padding: 26px 0; } header .header-bottom .site-menu ul { padding-left: 200px; } } @media (max-width: 1199px) { header .header-bottom .site-menu ul { padding-left: 100px; } .page .first h1 { font-size: 44px; } .page .first .subtitle { font-size: 22px; } .page .first .inner .cart { top: -50px; left: 600px; width: 350px; } .page section.services .services-row .block .block-title { letter-spacing: 0.2em; } .page section.services .services-row .offer-desc .inner .species-row { padding-top: 40px; } .page section.services .services-row .offer-desc .inner .species-row ul { margin-bottom: 0; } .page section.services .services-row .offer-desc .inner .species-row .species-link p { font-size: 14px; top: 65px; } .page .second .inner .title { letter-spacing: 0.2em; } .page .second .inner { width: 790px; } } @media (max-width: 991px) { header .header-top .callback a { font-size: 14px; padding: 10px 20px; } header .header-top .callback { padding: 20px 0; } header .header-top .site-logo img { bottom: -13px; } header .header-bottom .site-menu ul li a { font-size: 16px; } header .header-bottom .site-menu ul { padding-left: 80px; padding-top: 15px; } .page .first h1 { font-size: 34px; } .page .first .subtitle { font-size: 18px; } .page .first .link { padding-top: 50px; padding-bottom: 100px; padding-left: 25px; a { font-size: 14px; padding: 10px 20px; &:after { width: 40px; height: 40px; top: -11px; left: -25px; } } } .page .first .inner .cart { top: -50px; left: 450px; width: 280px; } .page .second .inner { width: 650px; } footer .inner { width: 700px; } .page .second .inner .title { font-size: 20px; } .page .second form { width: 560px; margin: 40px auto; } .page .second form p.form-label { font-size: 18px; } .page .second form .form-submit button { font-size: 16px; padding: 10px 20px; &:before { width: 40px; height: 40px; top: -11px; left: -25px; } } .page .second form .form-submit { padding-top: 0px; } .page .second form .form-alert { font-size: 12px; } footer .inner .footer-copy { font-size: 18px; } footer .inner .footer-mail a, footer .inner .footer-policy a { font-size: 18px; } .page section.services .title p { letter-spacing: 0.5em; } .page section.services .services-row .offer-desc .inner .species-row .species-link a { font-size: 14px; padding: 10px 20px; &:after { width: 40px; height: 40px; top: -11px; left: -25px; } } .page section.services .services-row .offer-desc .inner .species-row .species-link p { font-size: 12px; top: 65px; left: 260px; } } @media (max-width: 767px) { header .header-top .callback a { font-size: 14px; padding: 5px 15px; } header .header-top .callback { padding: 16px 0; } header .header-top .site-logo img { bottom: -10px; max-width: 285px; &:after { width: 30px; height: 30px; top: -9px; left: -20px; } } header .header-bottom .site-menu ul li a { font-size: 14px; } .page .first { padding-top: 50px; overflow: hidden; } .page .first h1 { font-size: 28px; } .page .first .subtitle { font-size: 16px; } .page .first .link { padding-top: 50px; padding-bottom: 80px; padding-left: 25px; a { font-size: 14px; padding: 10px 15px; &:after { width: 40px; height: 40px; top: -11px; left: -25px; } } } .page .first .inner .cart { top: -50px; left: 380px; width: 270px; } .page .second .inner, footer .inner { width: 540px; } .page .second .inner .title { font-size: 20px; } .page .second form { width: 450px; } .page .second form input { font-size: 20px; margin-bottom: 30px; } .page .second form .form-alert { position: relative; bottom: auto; left: auto; width: 100%; margin-top: 15px; text-align: center; } .page .second form .form-submit { padding-top: 20px; } .page .second { padding: 80px 0; } .page .second form p.form-label { font-size: 20px; letter-spacing: 0.2em; } .page .second form .form-submit { text-align: center; } footer .inner .footer-copy { font-size: 14px; } footer .inner .footer-mail a, footer .inner .footer-policy a { font-size: 14px; } footer .inner .footer-social a div { width: 40px; } footer .inner { padding: 0 15px; } .modal-sent { width: 500px; font-size: 20px; } .page section.services .title p { letter-spacing: 0.2em; font-size: 24px; } .page section.services .services-row .block .block-title { letter-spacing: 0.2em; font-size: 20px; } .page section.services .services-row .block p.block-text { font-size: 20px; line-height: 32px; width: 100%; margin: 30px auto 0; } .page section.services .services-row .block .block-title:after { width: 207px; } .page section.services .services-row .block .figure { top: -105px; } .page section.services .title { padding: 50px 0 108px; } .page section.services .title:before { height: 208px; } .page section.services .services-row .block { margin-bottom: 80px; } .page section.services .services-row .offer-desc .inner .offer-title { letter-spacing: 0.2em; } .page section.services .services-row .offer-desc .inner .species-row .species-link a { font-size: 14px; padding: 10px 15px; &:after { width: 40px; height: 40px; top: -11px; left: -25px; } } .page section.services .services-row .offer-desc .inner { padding: 30px; } .page section.services .services-row .offer-desc .inner .species-row .species-link { padding-top: 50px; padding-left: 40px; } .page section.services .services-row .offer-desc .inner .species-row .species-link p { font-size: 12px; top: 40px; left: 235px; } .modal .modal-content .modal-body .modal-title { font-size: 24px; } .modal .modal-content .modal-body form .form-submit button { font-size: 14px; padding: 10px 15px; &:before { width: 40px; height: 40px; top: -11px; left: -25px; } } .modal .modal-content .modal-body form p.form-label { font-size: 18px; } } @media (max-width: 575px) { .container { max-width: 320px; } header .header-top .site-logo img { bottom: -8px; max-width: 290px; } header .header-top .site-logo { height: 45px; } header .header-top .callback { display: none; } header .header-bottom .site-menu ul { display: none; } .site-menu { height: 15px; } .page .first h1 { font-size: 24px; } .page .first { padding-top: 65px; } .page .first .subtitle { font-size: 18px; } .page .first .link a { font-size: 20px; } .page .first .inner .cart { display: none; } .page .second .inner, footer .inner { width: 290px; padding: 0; } .page .second .inner .title { font-size: 18px; } .page .second form { width: 100%; } .page .second form p.form-label { font-size: 16px; } .page .second form input { font-size: 16px; } footer .inner .footer-copy { font-size: 12px; } footer .inner .footer-mail a, footer .inner .footer-policy a { font-size: 12px; } footer .inner .footer-social a div { width: 30px; } footer .inner .footer-social a { margin: 0 10px; } .modal-sent { width: 90%; padding: 15px; font-size: 16px; } .modal .modal-content .modal-body .modal-title { font-size: 18px; } .modal .modal-content .modal-body form { padding: 20px 0 0 0; } .modal .modal-content .modal-body form input { margin-bottom: 30px; } .modal .modal-content .modal-body form .form-submit button { font-size: 22px; } .modal .modal-content .modal-body form .form-alert { font-size: 12px; width: 100%; margin-left: 0; } .mobile-callback-link { display: block; } .callback-second-step { font-size: 20px; } .page section.services .title p { letter-spacing: 0.1em; font-size: 24px; padding-left: 30px; } .page section.services .title { padding: 30px 0 60px; } .page section.services .title:before { height: 128px; } .page section.services .services-row { padding-top: 20px; } .page section.services .services-row .block { margin-bottom: 50px; } .page section.services .services-row .block.with-figure { height: 200px; } .page section.services .services-row .block .figure { top: -30px; width: 200px; height: 200px; left: 50px; transform: none; } .page section.services .services-row .block p.block-text { font-size: 14px; } .page section.services .services-row .offer-desc .inner .offer-title { letter-spacing: 0.2em; line-height: 32px; } .page section.services .services-row .offer-desc .inner { padding: 30px 15px; } .page section.services .services-row .offer-desc .inner .species-row .species-link a { font-size: 20px; } .page section.services .services-row .offer-desc .inner .species-row .species-link { padding-left: 35px; } .page section.services .services-row .offer-desc .inner .species-row .species-link p { font-size: 12px; position: relative; top: auto; left: auto; margin-top: 40px; } .modal .modal-content .modal-body form .form-submit button { font-size: 14px; padding: 10px 15px; &:before { width: 40px; height: 40px; top: -11px; left: -25px; } } .modal .modal-content .modal-body form p.form-label { font-size: 14px; } }