{"version":3,"sources":["webpack:///./src/components/shared/form/form.stc.js","webpack:///./src/components/shared/form/input/input.stc.js","webpack:///./src/components/shared/form/input/index.js","webpack:///./src/components/shared/form/textarea/textarea.stc.js","webpack:///./src/components/shared/form/textarea/index.js","webpack:///./src/components/shared/form/index.js","webpack:///./src/containers/contact/contact-form/contact-form.stc.js","webpack:///./src/containers/contact/contact-form/index.js","webpack:///./src/components/shared/button/button.stc.js","webpack:///./src/components/shared/button/index.js","webpack:///./src/templates/services-template/services-template.stc.js","webpack:///./src/templates/services-template/services-template.js"],"names":["FormWrap","styled","form","InputWrap","input","props","theme","colors","headingColor","halfwidth","css","device","xsmall","responsive","mt","mb","Input","type","value","placeholder","name","id","onChange","restProps","TextareaWrap","textarea","Textarea","Form","method","action","children","onSubmit","ContactSectionWrap","div","medium","BannerArea","large","ContactFormWrap","small","ContactForm","ContactFormSection","headingStyle","textStyle","inputStyle","textareaStyle","bannerQueryData","useStaticQuery","useState","setName","phone","setPhone","message","setMessage","location","useLocation","pagedataJson","title","subtitle","imageData","banner_img","childImageSharp","fluid","handleChange","event","target","className","alt","layout","onClick","e","preventDefault","window","ym","pathname","slice","fetch","url","href","redirect","then","response","text","navigate","state","modal","noScroll","catch","error","console","log","to","defaultProps","fontSize","lineHeight","color","fontweight","as","texttransform","letterspacing","display","Button","ButtonWrap","button","bodyColor","baseTransition","xlarge","BlogDetailsWrap","BlogDetailsHeader","BackgroundImage","BlogDetailsContent","pt","pb","xsmallOnly","smallOnly","mediumOnly","largeOnly","primary","ServicesTemplate","data","titleStyle","metaTextStyle","post","markdownRemark","frontmatter","image","titleSEO","description","descSEO","dangerouslySetInnerHTML","__html","desc","html","metaBoxStyle","metaHeadingStyle","m"],"mappings":"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","file":"component---src-templates-services-template-services-template-js-6cd1ec3797e75291fcf2.js","sourcesContent":["import styled from 'styled-components';\r\n\r\nexport const FormWrap = styled.form `\r\n\r\n`;","import styled, {css} from 'styled-components';\r\nimport {device} from '../../../../theme'\r\n\r\nexport const InputWrap = styled.input `\r\n    color: ${props => props.theme.colors.headingColor};\r\n    font-size: 18px;\r\n    font-weight: 300;\r\n    border: 0 none;\r\n    border-bottom: 1px solid #ebebec;\r\n    padding: 0;\r\n    height: 50px;\r\n    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */\r\n        color: #7c7d7e;\r\n    }\r\n    &::-moz-placeholder { /* Firefox 19+ */\r\n        color: #7c7d7e;\r\n    }\r\n    &:-ms-input-placeholder { /* IE 10+ */\r\n        color: #7c7d7e;\r\n    }\r\n    &:-moz-placeholder { /* Firefox 18- */\r\n        color: #7c7d7e;\r\n    }\r\n    ${props => props.halfwidth && css `\r\n        width: 50%;\r\n        float: left;\r\n        @media ${device.xsmall}{\r\n            width: 100%;\r\n            float: none;\r\n        }\r\n    `}\r\n    ${props => props.responsive && css `\r\n        ${props => props.responsive.xsmall && css `\r\n            @media ${device.xsmall}{\r\n                margin-top: ${props => props.responsive.xsmall.mt};\r\n                margin-bottom: ${props => props.responsive.xsmall.mb};\r\n            }\r\n        `}\r\n    `}\r\n`;","import React from 'react';\r\nimport {InputWrap} from './input.stc'\r\n\r\nexport const Input = (props) => {\r\n    const {type, value, placeholder, name, id, onChange, ...restProps} = props;    \r\n    return(\r\n        <InputWrap\r\n            type={type}\r\n            value={value}\r\n            placeholder={placeholder}\r\n            name={name}\r\n            id={id}\r\n            onChange={onChange}\r\n            {...restProps}\r\n        />\r\n    )\r\n}\r\n","import styled, {css} from 'styled-components';\r\nimport {device} from '../../../../theme'\r\n\r\nexport const TextareaWrap = styled.textarea `\r\n    color: ${props => props.theme.colors.headingColor};\r\n    font-size: 18px;\r\n    border: 0 none;\r\n    font-weight: 300;\r\n    border-bottom: 1px solid #ebebec;\r\n    min-height: 100px;\r\n    margin-top: ${props => props.mt};\r\n    margin-bottom: ${props => props.mb};\r\n    width: 100%;\r\n    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */\r\n        color: #7c7d7e;\r\n    }\r\n    &::-moz-placeholder { /* Firefox 19+ */\r\n        color: #7c7d7e;\r\n    }\r\n    &:-ms-input-placeholder { /* IE 10+ */\r\n        color: #7c7d7e;\r\n    }\r\n    &:-moz-placeholder { /* Firefox 18- */\r\n        color: #7c7d7e;\r\n    }\r\n    ${props => props.halfwidth && css `\r\n        width: 50%;\r\n        float: left;\r\n    `}\r\n    ${props => props.responsive && css `\r\n        ${props => props.responsive.xsmall && css `\r\n            @media ${device.xsmall}{\r\n                margin-top: ${props => props.responsive.xsmall.mt};\r\n                margin-bottom: ${props => props.responsive.xsmall.mb};\r\n            }\r\n        `}\r\n    `}\r\n`;","import React from 'react';\r\nimport {TextareaWrap} from './textarea.stc'\r\n\r\nexport const Textarea = (props) => {\r\n    const {type, value, placeholder, name, id, onChange, ...restProps} = props;    \r\n    return(\r\n        <TextareaWrap\r\n            type={type}\r\n            value={value}\r\n            placeholder={placeholder}\r\n            name={name}\r\n            id={id}\r\n            onChange={onChange}\r\n            {...restProps}\r\n        ></TextareaWrap>\r\n    )\r\n}\r\n","import React from 'react';\r\nimport {FormWrap} from './form.stc'\r\nimport {Input} from './input'\r\nimport {Textarea} from './textarea'\r\n\r\nconst Form = (props) => {\r\n    const {method, action, children, onSubmit, ...restProps} = props;\r\n    return(\r\n        <FormWrap onSubmit={onSubmit} {...restProps}>\r\n            {children}\r\n        </FormWrap>\r\n    )\r\n}\r\n\r\nexport {Input, Textarea}\r\n\r\nexport default Form;","import styled from 'styled-components';\r\nimport {device} from '../../../theme'\r\n\r\nexport const ContactSectionWrap = styled.div `\r\n    background: #f8f8f8;\r\n    @media ${device.medium}{\r\n        .col-2{\r\n            flex-basis: 100vw;\r\n            max-width: 100vw;\r\n        }\r\n        .col-2.offset-1{\r\n            flex-basis: 80vw;\r\n            max-width: 80vw;\r\n        }\r\n    }\r\n`;\r\n\r\nexport const BannerArea = styled.div `\r\n    height: 100%;\r\n    @media ${device.large}{\r\n        max-height: 710px;\r\n    }\r\n    @media ${device.medium}{\r\n        max-height: 100%;\r\n        .gatsby-image-wrapper{\r\n            max-width: 100% !important;\r\n        }\r\n    }\r\n    img{\r\n        height: 100%;\r\n        width: 100%;\r\n        object-fit: cover;\r\n    }\r\n`;\r\n\r\nexport const ContactFormWrap = styled.div `\r\n    padding: 40px;\r\n    background-color: white;\r\n    @media ${device.large}{\r\n        padding: 90px 15px;\r\n    }\r\n    @media ${device.medium}{\r\n        padding: 70px 15px;\r\n    }\r\n    @media ${device.small}{\r\n        padding: 10vw 15px;\r\n    }\r\n`;\r\n\r\nexport const ContactForm = styled.div `\r\n    margin-top: 70px;\r\n    @media ${device.medium}{\r\n        margin-top: 50px;\r\n    }\r\n`;","import React, { useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { useStaticQuery, graphql, Link } from \"gatsby\";\r\nimport Heading from \"../../../components/shared/heading\";\r\nimport Text from \"../../../components/shared/text\";\r\nimport Button from \"../../../components/shared/button\";\r\nimport Form, { Input, Textarea } from \"../../../components/shared/form\";\r\nimport Image from \"../../../components/image\";\r\nimport { navigate, useLocation } from \"@reach/router\";\r\nimport {\r\n  ContactSectionWrap,\r\n  BannerArea,\r\n  ContactFormWrap,\r\n  ContactForm,\r\n} from \"./contact-form.stc\";\r\n\r\nconst ContactFormSection = ({\r\n  headingStyle,\r\n  textStyle,\r\n  inputStyle,\r\n  textareaStyle,\r\n}) => {\r\n  const bannerQueryData = useStaticQuery(graphql`\r\n    query ContactBannerQuery {\r\n      pagedataJson(id: { eq: \"contact_page_data\" }) {\r\n        title\r\n        subtitle\r\n        banner_img {\r\n          childImageSharp {\r\n            fluid(maxWidth: 700, maxHeight: 1000, quality: 100) {\r\n              ...GatsbyImageSharpFluid_withWebp\r\n              presentationWidth\r\n              presentationHeight\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  `);\r\n\r\n  const [name, setName] = useState(\"\");\r\n  const [phone, setPhone] = useState(\"\");\r\n  const [message, setMessage] = useState(\"\");\r\n  const location = useLocation();\r\n\r\n  const { title, subtitle } = bannerQueryData.pagedataJson;\r\n  const imageData =\r\n    bannerQueryData.pagedataJson.banner_img.childImageSharp.fluid;\r\n\r\n  const handleChange = (event) => {\r\n    switch (event.target.name) {\r\n      case \"Name\":\r\n        setName(event.target.value);\r\n        break;\r\n      case \"Phone\":\r\n        setPhone(event.target.value);\r\n        break;\r\n      case \"Message\":\r\n        setMessage(event.target.value);\r\n        break;\r\n      default:\r\n    }\r\n  };\r\n\r\n  const sendEmail = (e) => {\r\n    e.preventDefault();\r\n    if (window.ym) {\r\n      window.ym(64608949, \"reachGoal\", location.pathname === \"/\" ? \"home\" : location.pathname.slice(1));\r\n    }\r\n\r\n    let requestOptions = {\r\n      method: \"POST\",\r\n      redirect: \"follow\",\r\n    };\r\n    let url = \"https://functions.yandexcloud.net/d4e7pot8921d86r2he62\";\r\n    fetch(\r\n      `${url}?name=${name}&message=${message}&phone=${phone}&email=${location.href}`,\r\n      requestOptions\r\n    )\r\n      .then((response) => {\r\n        response.text();\r\n        navigate(\"/modal/\", { state: { modal: true, noScroll: true } });\r\n        setName(\"\");\r\n        setPhone(\"\");\r\n        setMessage(\"\");\r\n      })\r\n      .catch((error) => {\r\n        console.log(\"error\", error);\r\n      });\r\n  };\r\n\r\n  return (\r\n    <ContactSectionWrap>\r\n      <div className=\"row align-items-center\">\r\n        <div className=\"col-2\">\r\n          <BannerArea id=\"contact-form-banner\">\r\n            <Image fluid={imageData} alt=\"Contact\" />\r\n          </BannerArea>\r\n        </div>\r\n        <div className=\"col-2 offset-1\">\r\n          <ContactFormWrap>\r\n            <div className=\"rn-project-meta-inner\">\r\n              {title && <Text {...textStyle}>{title}</Text>}\r\n              {subtitle && <Heading {...headingStyle}>{subtitle}</Heading>}\r\n            </div>\r\n            <ContactForm>\r\n              <Form>\r\n                <Input\r\n                  type=\"text\"\r\n                  name=\"Name\"\r\n                  id=\"name\"\r\n                  placeholder=\"Ваше имя\"\r\n                  {...inputStyle}\r\n                  value={name}\r\n                  onChange={handleChange}\r\n                />\r\n                <Input\r\n                  type=\"phone\"\r\n                  name=\"Phone\"\r\n                  id=\"phone\"\r\n                  placeholder=\"Телефон\"\r\n                  value={phone}\r\n                  onChange={handleChange}\r\n                />\r\n                <Textarea\r\n                  name=\"Message\"\r\n                  placeholder=\"Комментарий\"\r\n                  {...textareaStyle}\r\n                  value={message}\r\n                  onChange={handleChange}\r\n                />\r\n                <Button type=\"submit\" layout={2} onClick={sendEmail}>\r\n                  ЗАКАЗАТЬ ЗВОНОК\r\n                </Button>\r\n                <p>\r\n                  Нажимая кнопку, вы даете согласие c{\" \"}\r\n                  <Link to=\"/privacy\">\r\n                    <b>политикой конфиденциальности</b>\r\n                  </Link>{\" \"}\r\n                  на обработку ваших личных данных в соответствии с ФЗ РФ №\r\n                  152-ФЗ «О персональных данных»\r\n                </p>\r\n              </Form>\r\n            </ContactForm>\r\n          </ContactFormWrap>\r\n        </div>\r\n      </div>\r\n    </ContactSectionWrap>\r\n  );\r\n};\r\n\r\nContactFormSection.propTypes = {\r\n  headingStyle: PropTypes.object,\r\n  textStyle: PropTypes.object,\r\n  textareaStyle: PropTypes.object,\r\n};\r\n\r\nContactFormSection.defaultProps = {\r\n  headingStyle: {\r\n    fontSize: \"40px\",\r\n    lineHeight: \"55px\",\r\n    color: \"primary\",\r\n    fontweight: 600,\r\n    responsive: {\r\n      medium: {\r\n        fontSize: \"24px\",\r\n        lineHeight: \"initial\",\r\n      },\r\n    },\r\n  },\r\n  textStyle: {\r\n    as: \"span\",\r\n    color: \"#000000\",\r\n    fontweight: 500,\r\n    fontSize: \"16px\",\r\n    texttransform: \"uppercase\",\r\n    letterspacing: \"1px\",\r\n    display: \"inline-block\",\r\n    mb: \"17px\",\r\n    lineHeight: 1,\r\n    responsive: {\r\n      medium: {\r\n        fontSize: \"12px\",\r\n        mb: \"10px\",\r\n      },\r\n    },\r\n  },\r\n  inputStyle: {\r\n    responsive: {\r\n      xsmall: {\r\n        mb: \"20px\",\r\n      },\r\n    },\r\n  },\r\n  textareaStyle: {\r\n    mt: \"40px\",\r\n    mb: \"40px\",\r\n    responsive: {\r\n      xsmall: {\r\n        mt: \"25px\",\r\n        mb: \"25px\",\r\n      },\r\n    },\r\n  },\r\n};\r\nButton.defaultProps = {\r\n  fontSize: \"16px\",\r\n};\r\nexport default ContactFormSection;\r\n","import styled, {css} from 'styled-components'\r\nimport {device, theme} from '../../../theme'\r\n\r\nconst ButtonWrap = styled.button`\r\n    display: inline-block;\r\n    color: ${props => props.theme.colors.bodyColor};\r\n    font-size: ${props => props.fontSize};\r\n    margin-top: ${props => props.mt};\r\n    font-weight: 500;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    padding-right: 80px;\r\n    position: relative;\r\n    border: none;\r\n    padding-left: 0;\r\n    &:before{\r\n        position: absolute;\r\n        content: \"\";\r\n        width: 53px;\r\n        height: 1px;\r\n        background: #dddddd;\r\n        right: 0;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        transition: 0.5s;\r\n    }\r\n    &:after{\r\n        position: absolute;\r\n        content: \"\";\r\n        width: 0;\r\n        height: 1px;\r\n        background: rgba(0, 0, 0, 0.5);\r\n        right: 0;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        transition: 0.5s;\r\n    }\r\n    &:hover{\r\n        &:before{\r\n            width: 0px;\r\n        }\r\n        &:after{\r\n            width: 53px;\r\n        }\r\n    }\r\n    ${props => props.layout === 2 && css `\r\n        background: ${theme.colors.button};\r\n        color: #333;\r\n        line-height: 1;\r\n        font-weight: 700;\r\n        padding: 27px 25px;\r\n        padding-right: 45px;\r\n        min-height: 66px;\r\n        transition: ${props => props.theme.baseTransition};\r\n        i{\r\n            transition: ${props => props.theme.baseTransition};\r\n            position: absolute;\r\n            right: 25px;\r\n        }\r\n        @media ${device.xlarge}{\r\n            padding: 20px 22px;\r\n            padding-right: 45px;\r\n            min-height: 53px;\r\n        }\r\n        &:hover{\r\n            opacity: .8;\r\n            i{\r\n                right: 20px;\r\n            }\r\n        }\r\n        &:hover,\r\n        &:focus,\r\n        &:visited{\r\n            color: #333;\r\n        }\r\n        &:before,\r\n        &:after{\r\n            display: none;\r\n        }\r\n    `}\r\n    ${props => props.layout === 3 && css `\r\n        background: ${theme.colors.button};\r\n        color: #333;\r\n        font-weight: 700;\r\n        line-height: 1;\r\n        padding: 27px 25px;\r\n        padding-right: 45px;\r\n        padding-left: 45px;\r\n        min-height: 66px;\r\n        transition: ${props => props.theme.baseTransition};\r\n        i{\r\n            transition: ${props => props.theme.baseTransition};\r\n            position: absolute;\r\n            right: 25px;\r\n        }\r\n        @media ${device.xlarge}{\r\n            padding: 20px 22px;\r\n            padding-right: 45px;\r\n            padding-left: 45px;\r\n            min-height: 53px;\r\n        }\r\n        &:hover{\r\n            opacity: .8;\r\n            i{\r\n                right: 20px;\r\n            }\r\n        }\r\n        &:hover,\r\n        &:focus,\r\n        &:visited{\r\n            color: #333;\r\n        }\r\n        &:before,\r\n        &:after{\r\n            display: none;\r\n        }\r\n    `}\r\n `\r\n\r\n export default ButtonWrap","import React from 'react'\r\nimport PropTypes from 'prop-types';\r\nimport ButtonWrap from './button.stc';\r\n\r\nconst Button = ({children, ...props}) => {\r\n    return(\r\n        <ButtonWrap {...props}>{children}</ButtonWrap>\r\n    )\r\n}\r\n \r\nButton.propTypes = {\r\n    children: PropTypes.node.isRequired,\r\n    href: PropTypes.string,\r\n    type: PropTypes.oneOf(['button', 'submit', 'reset']),\r\n    onClick: PropTypes.func,\r\n    fontSize: PropTypes.string,\r\n    fontWeight: PropTypes.oneOfType([\r\n        PropTypes.string,\r\n        PropTypes.number\r\n    ]),\r\n    color: PropTypes.string,\r\n    borderwidth: PropTypes.string,\r\n    hover: PropTypes.oneOfType([\r\n        PropTypes.string,\r\n        PropTypes.bool\r\n    ]),\r\n    spacer: PropTypes.object\r\n};\r\n\r\nButton.defaultProps = {\r\n    fontSize: '14px'\r\n}\r\n\r\n\r\nexport default Button\r\n","import styled, {css} from 'styled-components'\r\nimport BackgroundImage from 'gatsby-background-image'\r\nimport {device} from '../../theme';\r\n\r\nexport const BlogDetailsWrap = styled.div `\r\n    \r\n`\r\nexport const BlogDetailsHeader = styled(BackgroundImage) `\r\n    background-repeat: no-repeat !important;\r\n    background-size: cover !important;\r\n    background-position: center center !important;\r\n    min-height: 70vh;\r\n    padding: 130px 0;\r\n    display: flex;\r\n    align-items: center;\r\n    & > .row{\r\n        flex-wrap: nowrap;\r\n        @media ${device.small}{\r\n            flex-wrap: wrap;\r\n        }\r\n    }\r\n    @media ${device.xlarge}{\r\n        .col-1.offset-1 {\r\n            margin-left: 0;\r\n        }\r\n    }\r\n    @media ${device.medium}{\r\n        .col-1.offset-1 {\r\n            margin-left: 20vw;\r\n        }\r\n    }\r\n    @media ${device.small}{\r\n        min-height: 450px;\r\n        padding-top: 150px;\r\n        .col-1.offset-1 {\r\n            margin-left: 10vw;\r\n        }\r\n    }\r\n    &.gatsby-image-wrapper{\r\n        z-index: -1;\r\n    }\r\n`;\r\n\r\nexport const BlogDetailsMetaWrap = styled.div ``;\r\n\r\nexport const BlogDetailsMeta = styled.div `\r\n    margin-bottom: ${props => props.mb};\r\n    ${props => props.responsive && css `\r\n        ${props => props.responsive.small && css `\r\n            @media ${device.small}{\r\n                margin-bottom: ${props => props.responsive.small.mb};\r\n                padding-top: ${props => props.responsive.small.pt};\r\n                padding-bottom: ${props => props.responsive.small.pb};\r\n            }\r\n        `}\r\n    `}\r\n`;\r\n\r\nexport const BlogDetailsContent = styled.div `\r\n    background: #f8f8f8;\r\n    z-index: -1 !important;\r\n    .gatsby-image-wrapper{\r\n        z-index: 2;\r\n    }\r\n    padding-top: 130px;\r\n    @media ${device.medium}{\r\n        padding-top: 70px;\r\n    }\r\n    @media ${device.small}{\r\n        padding-top: 10vw;\r\n    }    \r\n    .container{\r\n        width: 100%;\r\n        padding-right: 15px;\r\n        padding-left: 15px;\r\n        margin-right: auto;\r\n        margin-left: auto;\r\n        @media ${device.xsmallOnly}{\r\n            max-width: 540px;\r\n        }\r\n        @media ${device.smallOnly}{\r\n            max-width: 720px;\r\n        }\r\n        @media ${device.mediumOnly}{\r\n            max-width: 960px;\r\n        }\r\n        @media ${device.largeOnly}{\r\n            max-width: 1200px;\r\n        }\r\n    }\r\n    .row{\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        margin-right: -15px;\r\n        margin-left: -15px;\r\n        [class^=\"col\"]{\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 1px;\r\n            padding-right: 15px;\r\n            padding-left: 15px;\r\n        }\r\n    }\r\n    .col{\r\n        &-12{\r\n            flex: 0 0 100%;\r\n            max-width: 100%;\r\n        }\r\n        &-lg{\r\n            &-4{\r\n                @media ${device.mediumOnly}{\r\n                    flex: 0 0 33.333333%;\r\n                    max-width: 33.333333%;\r\n                }\r\n            }\r\n            &-6{\r\n                @media ${device.mediumOnly}{\r\n                    flex: 0 0 50%;\r\n                    max-width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .offset{\r\n        &-lg{\r\n            &-2{\r\n                @media ${device.mediumOnly}{\r\n                    margin-left: 16.666667%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .rn-blog-meta-area{\r\n        @media ${device.xlarge}{\r\n            .col-2.offset-1{\r\n                margin-left: 20vw;\r\n            }\r\n        }\r\n        @media ${device.small}{\r\n            .col-2.offset-1{\r\n                margin-left: 10vw;\r\n            }\r\n        }\r\n    }\r\n    .rn-blog-content{\r\n        margin-top: -7px;\r\n        margin-bottom: -18px;\r\n    }\r\n    .span{\r\n        font-size: 48px;\r\n        line-height: 55px;\r\n        font-style: normal;\r\n        font-weight: 500;\r\n        color: ${props => props.theme.colors.primary};\r\n        @media ${device.medium}{\r\n            font-size: 32px;\r\n            line-height: initial;\r\n        }\r\n    }\r\n    .h2{\r\n        font-size: 36px;\r\n        line-height: 46px;\r\n        font-style: normal;\r\n        font-weight: normal;\r\n        color: ${props => props.theme.colors.primary};\r\n        @media ${device.medium}{\r\n            font-size: 22px;\r\n            line-height: initial;\r\n        }\r\n    }\r\n    .section-ptb-xl{\r\n        padding: 130px 0;\r\n        @media ${device.medium}{\r\n            padding: 70px 0;\r\n        }\r\n        @media ${device.small}{\r\n            padding: 10vw 0;\r\n        }\r\n    }\r\n    .section-pb-xl{\r\n        padding-bottom: 130px;\r\n        @media ${device.medium}{\r\n            padding-bottom: 70px;\r\n        }\r\n        @media ${device.small}{\r\n            padding-bottom: 10vw;\r\n        } \r\n    }\r\n    .full-width-box{\r\n        padding-left: 80px;\r\n        padding-right: 80px;\r\n        @media ${device.xlarge}{\r\n            padding-left: 10vw;\r\n            padding-right: 10vw;\r\n        }\r\n    }\r\n`;\r\n\r\nexport const CommentWrap = styled.div `\r\n    padding-top: 70px;\r\n    padding-bottom: 70px;\r\n    background: #f8f8f8;\r\n    padding-right: 10vw;\r\n    padding-left: 10vw;\r\n`;\r\n\r\nexport const CommentFormWrap = styled.div `\r\n    max-width: 700px;\r\n    margin: 0 auto;\r\n`; ","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport ContactFormSection from '../../containers/contact/contact-form'\r\n\r\nimport {graphql} from 'gatsby'\r\nimport SEO from '../../components/seo';\r\nimport Layout from '../../containers/layout/layout'\r\nimport Heading from '../../components/shared/heading'\r\nimport Text from '../../components/shared/text'\r\nimport {\r\n    BlogDetailsWrap,\r\n    BlogDetailsHeader,\r\n    BlogDetailsContent,\r\n} from './services-template.stc'\r\n \r\nfunction ServicesTemplate({data, ...restProps}) {\r\n    const {\r\n        titleStyle, \r\n        metaTextStyle\r\n    } = restProps;\r\n    const post = data.markdownRemark.frontmatter;\r\n    const imageData = post.image.childImageSharp.fluid;\r\n\r\n    return (\r\n        <Layout>\r\n            <SEO title={post.titleSEO} description={post.descSEO}/>\r\n            <BlogDetailsWrap>\r\n                <BlogDetailsHeader fluid={imageData}>\r\n                    <div className=\"row align-items-center\">\r\n                        <div className=\"col-3 offset-1\">\r\n                            <div className=\"rn-blog-details-meta-inner\">\r\n                                <Text {...metaTextStyle}>Услуги</Text>\r\n                                <Heading {...titleStyle}>{post.title}</Heading>\r\n                                <Text {...metaTextStyle}><span dangerouslySetInnerHTML={{__html: post.desc}}/></Text>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </BlogDetailsHeader>\r\n                <BlogDetailsContent>\r\n                    <div dangerouslySetInnerHTML={{__html: data.markdownRemark.html}}/>\r\n                </BlogDetailsContent>\r\n            </BlogDetailsWrap>\r\n            <ContactFormSection/>\r\n        </Layout>\r\n    )\r\n}\r\n\r\nexport const query = graphql `\r\n    query($slug: String!){\r\n        markdownRemark(fields: {slug: {eq: $slug}}){\r\n            frontmatter {\r\n                id\r\n                title\r\n                desc\r\n                titleSEO\r\n                descSEO\r\n                date(formatString: \"MMM Do, YYYY\")\r\n                author\r\n                image {\r\n                    childImageSharp {\r\n                      fluid(maxWidth: 1920, maxHeight: 800, quality: 100) {\r\n                        ...GatsbyImageSharpFluid_withWebp\r\n                        presentationWidth\r\n                        presentationHeight\r\n                      }\r\n                    }\r\n                }\r\n            }  \r\n            html \r\n        }\r\n    }\r\n`;\r\n\r\nServicesTemplate.propTypes = {\r\n    metaHeadingStyle: PropTypes.object,\r\n    metaTextStyle: PropTypes.object,\r\n    titleStyle: PropTypes.object\r\n}\r\n\r\nServicesTemplate.defaultProps = {\r\n    titleStyle: {\r\n        as: 'h1',\r\n        color: '#fff',\r\n        responsive: {\r\n            small:{\r\n                mb: '22px'\r\n            }\r\n        }\r\n    },\r\n    metaBoxStyle: {\r\n        mb: '30px',\r\n        responsive: {\r\n            small: {\r\n                mb: 0,\r\n                pt: '11px',\r\n                pb: '11px'\r\n            }\r\n        }\r\n    },\r\n    metaHeadingStyle: {\r\n        as: 'h6',\r\n        color: '#fff',\r\n        fontSize: '12px',\r\n        fontweight: 700,\r\n        letterspacing: '2px',\r\n        mb: '12px'\r\n    },\r\n    metaTextStyle: {\r\n        m: 0,\r\n        fontSize: '16px',\r\n        color: '#fff',\r\n        letterspacing: '1px'\r\n    }\r\n}\r\n\r\nexport default ServicesTemplate\r\n"],"sourceRoot":""}