@font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51S7ACc3CsTKlA.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51S7ACc-CsTKlA.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51S7ACc2CsTKlA.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51S7ACc5CsTKlA.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51S7ACc1CsTKlA.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51S7ACc0CsTKlA.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51S7ACc6CsQ.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic3CsTKlA.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic-CsTKlA.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic2CsTKlA.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic5CsTKlA.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic1CsTKlA.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic0CsTKlA.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format("woff2");
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format("woff2");
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format("woff2");
        unicode-range: U+1F00-1FFF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format("woff2");
        unicode-range: U+0370-03FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format("woff2");
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    /*-- Material Icons Font --*/
    @font-face {
        font-family: "Material Icons Round";
        font-display: swap;
        font-style: normal;
        font-weight: 400;
        src: url(https://fonts.gstatic.com/s/materialiconsround/v65/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format("woff2")
    }

    .mir {
        font-family: "Material Icons Round";
        font-weight: 400;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: liga;
        -webkit-font-smoothing: antialiased
    }

    @font-face {
        font-family: "PBT Icons";
        font-display: block;
        font-style: normal;
        font-weight: 400;
        src: url(https://fonts.gstatic.com/s/materialiconsround/v65/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format("woff2")
    }

    /*-- CSS Variables --*/
    :root {
        --body-font: 'Roboto', Arial, sans-serif;
        --menu-font: 'Roboto', Arial, sans-serif;
        --title-font: 'Roboto', Arial, sans-serif;
        --text-font: 'Roboto', Arial, sans-serif;
        --body-bg-color: #f5f6f7;
        --body-bg: #f5f6f7 none repeat fixed top left;
        --outer-bg: #f5f6f7;
        --main-color: #fd3a13;
        --title-color: #16161a;
        --title-hover-color: #fd3a13;
        --meta-color: #97979d;
        --text-color: #626262;
        --tag-bg: #fd3a13;
        --tag-color: #ffffff;
        --topbar-bg: #16161a;
        --topbar-color: #ffffff;
        --topbar-hover-color: #fd3a13;
        --header-bg: #ffffff;
        --header-color: #16161a;
        --header-hover-color: #fd3a13;
        --submenu-bg: #ffffff;
        --submenu-color: #16161a;
        --submenu-hover-color: #fd3a13;
        --mega-bg: #ffffff;
        --mega-color: #16161a;
        --mega-hover-color: #fd3a13;
        --mega-meta-color: #97979d;
        --mobilemenu-bg: #ffffff;
        --mobilemenu-color: #16161a;
        --mobilemenu-hover-color: #fd3a13;
        --ticker-title-color: #fd3a13;
        --ticker-color: #16161a;
        --ticker-hover-color: #fd3a13;
        --widget-bg: #ffffff;
        --widget-title-color: #16161a;
        --widget-dash-color: #fd3a13;
        --video-widget-bg: #16161a;
        --video-widget-color: #ffffff;
        --video-widget-hover-color: #fd3a13;
        --video-widget-meta-color: #AAAAAA;
        --footer-bg: #16161a;
        --footer-color: #ffffff;
        --footer-hover-color: #fd3a13;
        --footer-meta-color: #AAAAAA;
        --footer-text-color: #AAAAAA;
        --footerbar-bg: #09090a;
        --footerbar-color: #ffffff;
        --footerbar-hover-color: #fd3a13;
        --cookie-bg: #ffffff;
        --cookie-color: #626262;
        --button-bg: #fd3a13;
        --button-color: #ffffff;
        --button-hover-bg: #e33411;
        --button-hover-color: #ffffff;
        --light-weight: 400;
        --title-weight: 700;
        --gray-bg: rgba(155, 155, 155, 0.05);
        --border-color: rgba(155, 155, 155, 0.1);
        --radius: 2px;
        --widget-shadow: 0 0 5px rgba(0, 0, 0, 0.01);
        --avatar-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
    }

    html.is-dark {
        --body-bg-color: #27272b;
        --body-bg: #f5f6f7 none repeat fixed top left;
        --outer-bg: #16161a;
        --title-color: #f8f8fb;
        --title-hover-color: #fd3a13;
        --meta-color: #aaa;
        --text-color: #c5c5c8;
        --tag-bg: #fd3a13;
        --tag-color: #ffffff;
        --topbar-bg: #16161a;
        --topbar-color: #f8f8fb;
        --topbar-hover-color: #fd3a13;
        --header-bg: #202024;
        --header-color: #f8f8fb;
        --header-hover-color: #fd3a13;
        --submenu-bg: #252529;
        --submenu-color: #f8f8fb;
        --submenu-hover-color: #fd3a13;
        --mega-bg: #252529;
        --mega-color: #f8f8fb;
        --mega-hover-color: #fd3a13;
        --mega-meta-color: #aaa;
        --mobilemenu-bg: #16161a;
        --mobilemenu-color: #f8f8fb;
        --mobilemenu-hover-color: #fd3a13;
        --ticker-title-color: #fd3a13;
        --ticker-color: #f8f8fb;
        --ticker-hover-color: #fd3a13;
        --widget-bg: #202024;
        --widget-title-color: #f8f8fb;
        --widget-dash-color: #fd3a13;
        --footer-bg: #202024;
        --footer-color: #f8f8fb;
        --footer-hover-color: #fd3a13;
        --footer-meta-color: #aaa;
        --footer-text-color: #c5c5c8;
        --footerbar-bg: #16161a;
        --footerbar-color: #f8f8fb;
        --footerbar-hover-color: #fd3a13;
        --cookie-bg: #202024;
        --cookie-color: #c5c5c8;
        --button-bg: #fd3a13;
        --button-color: #fff;
        --button-hover-bg: #e33411;
        --button-hover-color: #ffffff;
        --gray-bg: rgba(255, 255, 255, 0.03);
        --border-color: rgba(255, 255, 255, 0.05);
    }

    html.rtl {
        --body-font: 'Cairo', Arial, sans-serif;
        --menu-font: 'Cairo', Arial, sans-serif;
        --title-font: 'Cairo', Arial, sans-serif;
        --text-font: 'Cairo', Arial, sans-serif;
    }

    /*-- Reset CSS --*/
    html,
    body,
    a,
    abbr,
    acronym,
    address,
    applet,
    b,
    big,
    blockquote,
    caption,
    center,
    cite,
    code,
    dd,
    del,
    dfn,
    div,
    dl,
    dt,
    em,
    fieldset,
    font,
    form,
    input,
    button,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    i,
    iframe,
    img,
    ins,
    kbd,
    label,
    legend,
    li,
    object,
    p,
    pre,
    q,
    s,
    samp,
    small,
    span,
    strike,
    strong,
    sub,
    sup,
    table,
    tbody,
    td,
    tfoot,
    th,
    thead,
    tr,
    tt,
    u,
    ul,
    var {
        padding: 0;
        margin: 0;
        border: 0;
        outline: none;
        vertical-align: baseline;
        background: 0 0;
        text-decoration: none
    }

    dl,
    ul {
        list-style-position: inside;
        list-style: none
    }

    ul li {
        list-style: none
    }

    caption {
        text-align: center
    }

    img {
        border: none;
        position: relative
    }

    a,
    a:visited {
        text-decoration: none
    }

    .clearfix {
        clear: both
    }

    .section,
    .widget,
    .widget ul {
        margin: 0;
        padding: 0
    }

    a {
        color: #626262;
    }

    a img {
        border: 0
    }

    abbr {
        text-decoration: none
    }

    .separator a {
        text-decoration: none !important;
        clear: none !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    #Navbar1,
    #navbar-iframe,
    .widget-item-control,
    a.quickedit,
    .home-link,
    .feed-links {
        display: none !important
    }

    .center {
        display: table;
        margin: 0 auto;
        position: relative
    }

    .widget>h2,
    .widget>h3 {
        display: none
    }

    .widget iframe,
    .widget img {
        max-width: 100%
    }

    button,
    input,
    select,
    textarea {
        background: transparent;
        font-family: var(--body-font);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        border-radius: 0
    }

    button {
        cursor: pointer
    }

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none
    }

    /*-- Main CSS --*/
    * {
        box-sizing: border-box
    }

    html {
        position: relative;
        word-break: break-word;
        word-wrap: break-word;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%
    }

    body {
        position: relative;
        background: var(--body-bg);
        background-color: var(--body-bg-color);
        font-family: var(--body-font);
        font-size: 14px;
        color: var(--text-color);
        font-weight: 400;
        font-style: normal;
        line-height: 1.4em
    }

    .rtl {
        direction: rtl
    }

    .is-roboto {
        --light-weight: 300
    }

    .rtl .is-roboto {
        --light-weight: 400
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--title-font);
        font-weight: 700
    }

    a,
    input,
    button {
        transition: all .0s ease
    }

    #outer-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        background-color: var(--outer-bg);
        margin: 0 auto;
        padding: 0
    }

    .is-boxed #outer-wrapper {
        width: 1123px;
        max-width: 100%;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05)
    }

    .is-dark .is-boxed #outer-wrapper {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2)
    }

    .container {
        position: relative
    }

    .row-x1 {
        width: 1073px;
        max-width: 100%
    }

    .row-x2 {
        width: 100%
    }

    .flex-c {
        display: flex;
        justify-content: center
    }

    .flex-col {
        display: flex;
        flex-direction: column
    }

    .flex-sb {
        display: flex;
        justify-content: space-between
    }

    #content-wrapper {
        float: left;
        width: 100%;
        overflow: hidden;
        padding: 25px 0
    }

    .is-left #content-wrapper>.container,
    .rtl .is-right #content-wrapper>.container {
        flex-direction: row-reverse
    }

    .rtl .is-left #content-wrapper>.container {
        flex-direction: row
    }

    .theiaStickySidebar:before,
    .theiaStickySidebar:after {
        content: '';
        display: table;
        clear: both
    }

    #main-wrapper {
        position: relative;
        width: calc(100% - 345px)
    }

    .no-sidebar #main-wrapper {
        width: 100%
    }

    #sidebar-wrapper {
        position: relative;
        width: 320px
    }

    .no-sidebar #sidebar-wrapper {
        display: none
    }

    .entry-image-wrap,
    .author-avatar-wrap,
    .comments .avatar-image-container {
        display: block;
        position: relative;
        overflow: hidden;
        background-color: var(--gray-bg);
        z-index: 5;
        color: transparent
    }

    .entry-image,
    .author-avatar {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 1;
        transform-origin: center;
        opacity: 0;
        transition: opacity .35s ease, transform .35s ease
    }

    .entry-image.pbt-lazy,
    .author-avatar.pbt-lazy {
        opacity: 1
    }

    .entry-image-wrap:hover .entry-image,
    .cs:hover .entry-image-wrap .entry-image {
        transform: scale(1.05)
    }

    .is-video:after {
        display: flex;
        position: absolute;
        content: '\e037';
        top: 50%;
        right: 50%;
        width: 34px;
        height: 34px;
        background-color: rgba(0, 0, 0, 0.5);
        font-family: 'Material Icons Round';
        font-size: 25px;
        color: #fff;
        font-weight: 400;
        align-items: center;
        justify-content: center;
        z-index: 5;
        transform: translate(50%, -50%);
        box-sizing: border-box;
        padding: 0 0 0 1px;
        border-radius: 50%;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
    }

    .sz-1.is-video:after {
        transform: translate(50%, -50%) scale(.7)
    }

    .sz-2.is-video:after {
        transform: translate(50%, -50%) scale(.85)
    }

    .is-video:hover:after,
    .cs:hover .is-video:after {
        background-color: var(--main-color)
    }

    .cs .is-video:after {
        top: 15px;
        right: 15px;
        transform: translate(0)
    }

    .rtl .cs .is-video:after {
        left: 15px;
        right: unset
    }

    .entry-header {
        display: flex;
        flex-direction: column
    }

    .entry-category {
        display: flex;
        align-items: center;
        height: 17px;
        background-color: var(--tag-bg);
        font-size: 10px;
        color: var(--tag-color);
        font-weight: 500;
        text-transform: uppercase;
        line-height: 0;
        padding: 1px 7px 0;
        border-radius: var(--radius)
    }

    .entry-image-wrap .entry-category {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        border-radius: 0 var(--radius) 0 0
    }

    .rtl .entry-image-wrap .entry-category {
        left: unset;
        right: 0;
        border-radius: var(--radius) 0 0 0
    }

    .entry-title {
        color: var(--title-color);
        font-weight: var(--title-weight);
        line-height: 1.35em
    }

    .entry-title a {
        display: block;
        color: var(--title-color)
    }

    .entry-title a:hover {
        color: var(--title-hover-color)
    }

    .entry-meta {
        display: flex;
        font-size: 12px;
        color: var(--meta-color);
        font-weight: var(--light-weight);
        margin: 4px 0 0
    }

    .entry-meta .mi {
        display: flex
    }

    .entry-meta .mi,
    .entry-meta .sp {
        margin: 0 4px 0 0
    }

    .rtl .entry-meta .mi,
    .rtl .entry-meta .sp {
        margin: 0 0 0 4px
    }

    .entry-meta .author-name {
        color: var(--main-color);
        font-weight: 500
    }

    .excerpt {
        font-family: var(--text-font);
        line-height: 1.5em;
        font-weight: var(--light-weight)
    }

    .cs .entry-inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden
    }

    .before-mask:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80%;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.5));
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 2;
        opacity: 1;
        margin: 0;
        transition: opacity .25s ease
    }

    .entry-info {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
        overflow: hidden;
        z-index: 10;
        padding: 15px
    }

    .entry-info .entry-title {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
    }

    .entry-info .entry-meta {
        color: #c5c5ca;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
    }

    .entry-info .entry-meta .author-name {
        color: #d5d5da
    }

    .entry-info .entry-category {
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 0 10px
    }

    .btn {
        position: relative;
        border-radius: var(--radius)
    }

    .error-msg {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--meta-color);
        padding: 20px 0;
        font-weight: 400
    }

    .loader {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0
    }

    .loader:after {
        content: '';
        display: block;
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        margin: 0;
        border: 2px solid var(--main-color);
        border-right-color: var(--border-color);
        border-radius: 100%;
        animation: spinner .65s infinite linear;
        transform-origin: center
    }

    @keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }

        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn)
        }
    }

    .social a:before {
        display: block;
        font-family: 'Font Awesome 6 Brands';
        font-style: normal;
        font-weight: 400
    }

    .social .twitter a:before {
        content: '\e61b'
    }

    .social .rss a:before,
    .social .share a:before,
    .social .email a:before,
    .social .external-link a:before {
        content: '\e0e5';
        font-family: 'Material Icons Round'
    }

    .social .share a:before {
        content: '\e80d'
    }

    .social .email a:before {
        content: '\e0be'
    }

    .social .external-link a:before {
        content: '\e89e'
    }

    .sb-a .google a,
    .sb-h .google a:hover {
        background-color: #1a73e8
    }

    .sb-a .blogger a,
    .sb-h .blogger a:hover {
        background-color: #ff5722
    }

    .sb-a .apple a,
    .sb-h .apple a:hover {
        background-color: #333
    }

    .sb-a .amazon a,
    .sb-h .amazon a:hover {
        background-color: #fe9800
    }

    .sb-a .microsoft a,
    .sb-h .microsoft a:hover {
        background-color: #0067B8
    }

    .sb-a .facebook a,
    .sb-a .facebook-f a,
    .sb-h .facebook a:hover,
    .sb-h .facebook-f a:hover {
        background-color: #3b5999
    }

    .sb-a .twitter a,
    .sb-a .x-twitter a,
    .sb-h .twitter a:hover,
    .sb-h .x-twitter a:hover {
        background-color: #00acee
    }

    .sb-a .youtube a,
    .sb-h .youtube a:hover {
        background-color: #f50000
    }

    .sb-a .instagram a,
    .sb-h .instagram a:hover {
        background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4)
    }

    .sb-a .pinterest a,
    .sb-a .pinterest-p a,
    .sb-h .pinterest a:hover,
    .sb-h .pinterest-p a:hover {
        background-color: #ca2127
    }

    .sb-a .dribbble a,
    .sb-h .dribbble a:hover {
        background-color: #ea4c89
    }

    .sb-a .linkedin a,
    .sb-h .linkedin a:hover {
        background-color: #0077b5
    }

    .sb-a .tumblr a,
    .sb-h .tumblr a:hover {
        background-color: #365069
    }

    .sb-a .twitch a,
    .sb-h .twitch a:hover {
        background-color: #6441a5
    }

    .sb-a .rss a,
    .sb-h .rss a:hover {
        background-color: #ffc200
    }

    .sb-a .skype a,
    .sb-h .skype a:hover {
        background-color: #00aff0
    }

    .sb-a .stumbleupon a,
    .sb-h .stumbleupon a:hover {
        background-color: #eb4823
    }

    .sb-a .vk a,
    .sb-h .vk a:hover {
        background-color: #4a76a8
    }

    .sb-a .stack-overflow a,
    .sb-h .stack-overflow a:hover {
        background-color: #f48024
    }

    .sb-a .github a,
    .sb-h .github a:hover {
        background-color: #24292e
    }

    .sb-a .soundcloud a,
    .sb-h .soundcloud a:hover {
        background: linear-gradient(#ff7400, #ff3400)
    }

    .sb-a .behance a,
    .sb-h .behance a:hover {
        background-color: #191919
    }

    .sb-a .digg a,
    .sb-h .digg a:hover {
        background-color: #1b1a19
    }

    .sb-a .delicious a,
    .sb-h .delicious a:hover {
        background-color: #0076e8
    }

    .sb-a .codepen a,
    .sb-h .codepen a:hover {
        background-color: #000
    }

    .sb-a .flipboard a,
    .sb-h .flipboard a:hover {
        background-color: #f52828
    }

    .sb-a .reddit a,
    .sb-h .reddit a:hover {
        background-color: #ff4500
    }

    .sb-a .whatsapp a,
    .sb-h .whatsapp a:hover {
        background-color: #3fbb50
    }

    .sb-a .messenger a,
    .sb-h .messenger a:hover {
        background-color: #0084ff
    }

    .sb-a .snapchat a,
    .sb-h .snapchat a:hover {
        background-color: #ffe700
    }

    .sb-a .telegram a,
    .sb-h .telegram a:hover {
        background-color: #179cde
    }

    .sb-a .steam a,
    .sb-h .steam a:hover {
        background: linear-gradient(5deg, #0d89bc, #112c5b, #0d1c47)
    }

    .sb-a .discord a,
    .sb-h .discord a:hover {
        background-color: #7289da
    }

    .sb-a .quora a,
    .sb-h .quora a:hover {
        background-color: #b92b27
    }

    .sb-a .tiktok a,
    .sb-h .tiktok a:hover {
        background-color: #fe2c55
    }

    .sb-a .share a,
    .sb-h .share a:hover {
        background-color: var(--meta-color)
    }

    .sb-a .email a,
    .sb-h .email a:hover {
        background-color: #888
    }

    .sb-a .external-link a,
    .sb-h .external-link a:hover {
        background-color: var(--title-color)
    }

    .sc-a .blogger a,
    .sc-h .blogger a:hover {
        color: #1a73e8
    }

    .sc-a .blogger a,
    .sc-h .blogger a:hover {
        color: #ff5722
    }

    .sc-a .apple a,
    .sc-h .apple a:hover {
        color: #333
    }

    .sc-a .amazon a,
    .sc-h .amazon a:hover {
        color: #fe9800
    }

    .sc-a .microsoft a,
    .sc-h .microsoft a:hover {
        color: #0067B8
    }

    .sc-a .facebook a,
    .sc-a .facebook-f a,
    .sc-h .facebook a:hover,
    .sc-h .facebook-f a:hover {
        color: #3b5999
    }

    .sc-a .twitter a,
    .sc-a .x-twitter a,
    .sc-h .twitter a:hover,
    .sc-h .x-twitter a:hover {
        color: #00acee
    }

    .sc-a .youtube a,
    .sc-h .youtube a:hover {
        color: #f50000
    }

    .sc-a .instagram a,
    .sc-h .instagram a:hover {
        color: #dd277b
    }

    .sc-a .pinterest a,
    .sc-a .pinterest-p a,
    .sc-h .pinterest a:hover,
    .sc-h .pinterest-p a:hover {
        color: #ca2127
    }

    .sc-a .dribbble a,
    .sc-h .dribbble a:hover {
        color: #ea4c89
    }

    .sc-a .linkedin a,
    .sc-h .linkedin a:hover {
        color: #0077b5
    }

    .sc-a .tumblr a,
    .sc-h .tumblr a:hover {
        color: #365069
    }

    .sc-a .twitch a,
    .sc-h .twitch a:hover {
        color: #6441a5
    }

    .sc-a .rss a,
    .sc-h .rss a:hover {
        color: #ffc200
    }

    .sc-a .skype a,
    .sc-h .skype a:hover {
        color: #00aff0
    }

    .sc-a .stumbleupon a,
    .sc-h .stumbleupon a:hover {
        color: #eb4823
    }

    .sc-a .vk a,
    .sc-h .vk a:hover {
        color: #4a76a8
    }

    .sc-a .stack-overflow a,
    .sc-h .stack-overflow a:hover {
        color: #f48024
    }

    .sc-a .github a,
    .sc-h .github a:hover {
        color: #24292e
    }

    .sc-a .soundcloud a,
    .sc-h .soundcloud a:hover {
        color: #ff7400
    }

    .sc-a .behance a,
    .sc-h .behance a:hover {
        color: #191919
    }

    .sc-a .digg a,
    .sc-h .digg a:hover {
        color: #1b1a19
    }

    .sc-a .delicious a,
    .sc-h .delicious a:hover {
        color: #0076e8
    }

    .sc-a .codepen a,
    .sc-h .codepen a:hover {
        color: #000
    }

    .sc-a .flipboard a,
    .sc-h .flipboard a:hover {
        color: #f52828
    }

    .sc-a .reddit a,
    .sc-h .reddit a:hover {
        color: #ff4500
    }

    .sc-a .whatsapp a,
    .sc-h .whatsapp a:hover {
        color: #3fbb50
    }

    .sc-a .messenger a,
    .sc-h .messenger a:hover {
        color: #0084ff
    }

    .sc-a .snapchat a,
    .sc-h .snapchat a:hover {
        color: #ffe700
    }

    .sc-a .telegram a,
    .sc-h .telegram a:hover {
        color: #179cde
    }

    .sc-a .steam a,
    .sc-h .steam a:hover {
        color: #112c5b
    }

    .sc-a .discord a,
    .sc-h .discord a:hover {
        color: #7289da
    }

    .sc-a .quora a,
    .sc-h .quora a:hover {
        color: #b92b27
    }

    .sc-a .tiktok a,
    .sc-h .tiktok a:hover {
        color: #fe2c55
    }

    .sc-a .share a,
    .sc-h .share a:hover {
        color: var(--meta-color)
    }

    .sc-a .email a,
    .sc-h .email a:hover {
        color: #888
    }

    .sc-a .external-link a,
    .sc-h .external-link a:hover {
        color: var(--title-color)
    }

    #header-wrapper {
        float: left;
        width: 100%;
        z-index: 50
    }

    .topbar-wrap {
        position: relative;
        float: left;
        width: 100%;
        height: 30px;
        background-color: var(--topbar-bg);
        z-index: 1
    }

    .topbar-wrap.has-border {
        border-bottom: 1px solid var(--border-color)
    }

    .is-dark .topbar-wrap.has-border {
        border: 0
    }

    .no-topbar-menu .flex-sb {
        justify-content: flex-end
    }

    .topbar ul {
        display: flex;
        flex-wrap: wrap
    }

    .topbar ul li+li {
        margin: 0 0 0 18px
    }

    .rtl .topbar ul li+li {
        margin: 0 18px 0 0
    }

    .topbar li a {
        display: block;
        font-size: 12px;
        color: var(--topbar-color);
        line-height: 30px
    }

    .topbar li a:hover {
        color: var(--topbar-hover-color)
    }

    .topbar li.rss a,
    .topbar li.email a,
    .topbar li.external-link a {
        font-size: 15px
    }

    .main-header,
    .header-inner,
    .header-header {
        float: left;
        width: 100%;
        height: 62px;
        background-color: var(--header-bg)
    }

    .header-inner {
        background-color: rgba(0, 0, 0, 0)
    }

    .header-header {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.03)
    }

    .header-inner.is-fixed .header-header {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
    }

    .header-inner.is-fixed {
        position: fixed;
        top: -62px;
        left: 0;
        width: 100%;
        z-index: 990;
        backface-visibility: hidden;
        visibility: hidden;
        opacity: 0;
        transform: translate3d(0, 0, 0);
        transition: all .25s ease
    }

    .header-inner.is-fixed.show {
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 62px, 0)
    }

    .is-boxed .header-header {
        float: none;
        width: 1123px;
        max-width: 100%;
        margin: 0 auto;
        padding: 0
    }

    .header-items {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .flex-left {
        display: flex;
        align-items: center;
        z-index: 15
    }

    .flex-right {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        height: 62px;
        z-index: 15
    }

    .rtl .flex-right {
        left: 0;
        right: unset
    }

    .main-logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: 62px;
        overflow: hidden;
        margin: 0 14px 0 0
    }

    .rtl .main-logo {
        margin: 0 0 0 14px
    }

    .main-logo img {
        display: block;
        width: auto;
        height: auto;
        max-height: 40px
    }

    .main-logo .title {
        max-width: 100%;
        font-size: 25px;
        color: var(--header-color);
        line-height: 40px;
        font-weight: 700;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .main-logo .title a {
        color: var(--header-color)
    }

    .main-logo .title a:hover {
        color: var(--header-hover-color)
    }

    .main-logo #h1-off {
        display: none;
        visibility: hidden
    }

    #magspot-main-menu {
        z-index: 10
    }

    #magspot-main-menu .widget,
    #magspot-main-menu .widget>.widget-title {
        display: none
    }

    #magspot-main-menu .show-menu {
        display: block
    }

    .main-nav {
        display: flex;
        height: 62px
    }

    .main-nav>li {
        position: relative;
        display: flex;
        flex-shrink: 0
    }

    .main-nav>li>a {
        display: flex;
        font-family: var(--menu-font);
        font-size: 14px;
        color: var(--header-color);
        font-weight: 700;
        align-items: center;
        text-transform: uppercase;
        padding: 0 14px
    }

    .main-nav>li:hover>a {
        color: var(--header-hover-color)
    }

    .main-nav .has-sub>a:after {
        display: inline-block;
        content: '\e5cf';
        font-family: 'Material Icons Round';
        font-size: 16px;
        font-weight: 400;
        margin: -4px 0 0 2px
    }

    .rtl .main-nav .has-sub>a:after {
        margin: -4px 2px 0 0
    }

    .main-nav .sub-menu,
    .main-nav .ul {
        position: absolute;
        left: 0;
        top: 62px;
        width: 180px;
        background-color: var(--submenu-bg);
        z-index: 99999;
        padding: 6px 0;
        backface-visibility: hidden;
        visibility: hidden;
        opacity: 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 5px 10px 0 rgba(0, 0, 0, 0.05)
    }

    .rtl .main-nav .sub-menu,
    .rtl .main-nav .ul {
        left: auto;
        right: 0
    }

    .main-nav .sub-menu.sm-2 {
        top: -6px;
        left: 100%
    }

    .rtl .main-nav .sub-menu.sm-2 {
        left: unset;
        right: 100%
    }

    .main-nav .sub-menu li {
        position: relative;
        display: block
    }

    .main-nav .sub-menu li a {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: var(--submenu-color);
        padding: 8px 15px
    }

    .main-nav .sub-menu li:hover>a {
        color: var(--submenu-hover-color)
    }

    .main-nav .sub-menu>.has-sub>a:after {
        content: '\e5cc';
        margin: 0 -5px
    }

    .rtl .main-nav .sub-menu>.has-sub>a:after {
        content: '\e5cb'
    }

    .main-nav .sub-menu,
    .main-nav .ul {
        transition: all .17s ease
    }

    .main-nav li:hover>.sub-menu,
    .main-nav li:hover .ul {
        backface-visibility: inherit;
        visibility: visible;
        opacity: 1
    }

    .main-nav .mega-menu {
        position: static !important
    }

    .main-nav .mega-menu>.ul {
        width: 100%;
        background-color: var(--mega-bg);
        overflow: hidden
    }

    .mega-menu .mega-items {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: 20px;
        padding: 20px
    }

    .mega-items .mega-item {
        --title-color: var(--mega-color);
        --title-hover-color: var(--mega-hover-color);
        --meta-color: var(--mega-meta-color);
        width: 100%;
        display: flex;
        flex-direction: column
    }

    .mega-item .entry-image-wrap {
        width: 100%;
        height: 125px;
        z-index: 1;
        margin: 0 0 8px
    }

    .mega-item .entry-title {
        font-size: 14px
    }

    .mega-menu .mega-tabs {
        display: grid;
        grid-template-columns: calc(1053px / 5) 1fr;
        padding: 0
    }

    .mega-menu .mega-tabs .tab-items {
        background-color: var(--gray-bg);
        padding: 20px 0
    }

    .mega-menu .mega-tabs li a {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: var(--mega-color);
        padding: 8px 20px;
        transition: background .17s ease
    }

    .mega-menu .mega-tabs li.active a:after {
        content: '\e5cc';
        font-family: 'Material Icons Round';
        font-weight: 400;
        font-size: 16px;
        margin: 0 -5px
    }

    .rtl .mega-menu .mega-tabs li.active a:after {
        content: '\e5cb'
    }

    .mega-menu .mega-tabs li.active a {
        background-color: var(--mega-bg);
        color: var(--mega-hover-color)
    }

    .mega-tab {
        display: none;
        position: relative;
        padding: 20px
    }

    .mega-tab.active {
        display: block
    }

    @keyframes megaFadeIn {
        0% {
            opacity: .1
        }

        100% {
            opacity: 1
        }
    }

    .mega-tab.fadeIn {
        animation: megaFadeIn .5s ease
    }

    .mega-menu .mega-tabs .mega-items {
        grid-template-columns: repeat(4, 1fr);
        padding: 0
    }

    .mega-tabs .mega-item .entry-image {
        width: calc(953px / 5);
        height: 125px
    }

    .mega-menu .mega-items.on-load,
    .mega-menu .mega-items.no-items {
        grid-template-columns: 1fr
    }

    .mega-tab .mega-items.on-load,
    .mega-tab .mega-items.no-items {
        height: 100%;
        padding: 0
    }

    .mega-menu .error-msg {
        justify-content: center;
        padding: 40px 0
    }

    .mega-menu .loader {
        height: 120px
    }

    .mega-tab .loader {
        height: 100%
    }

    .mobile-menu-toggle {
        display: none;
        height: 34px;
        font-size: 26px;
        color: var(--header-color);
        align-items: center;
        padding: 0 13px 0 16px
    }

    .rtl .mobile-menu-toggle {
        padding: 0 16px 0 13px
    }

    .mobile-menu-toggle:after {
        content: '\e5d2';
        font-family: 'Material Icons Round';
        font-weight: 400
    }

    .mobile-menu-toggle:hover {
        color: var(--header-hover-color)
    }

    .toggle-wrap {
        background-color: var(--header-bg);
        display: flex;
        align-items: center;
        z-index: 20
    }

    .darkmode-toggle {
        display: flex;
        align-items: center;
        position: relative;
        width: 34px;
        height: 20px;
        background-color: var(--gray-bg);
        font-size: 12px;
        color: var(--header-color);
        margin: 0 15px 0 0;
        border-radius: 20px
    }

    .rtl .darkmode-toggle {
        margin: 0 0 0 15px
    }

    .darkmode-toggle:before {
        position: absolute;
        left: 2px;
        content: '\e518';
        font-family: 'PBT Icons';
        width: 16px;
        height: 16px;
        background-color: var(--header-bg);
        flex-shrink: 0;
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        z-index: 2;
        border-radius: 50%;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
        transition: left .17s ease
    }

    .is-dark .darkmode-toggle:before {
        content: '\ea46';
        left: 16px
    }

    .rtl .darkmode-toggle:before {
        left: 16px
    }

    .rtl.is-dark .darkmode-toggle:before {
        left: 2px
    }

    .darkmode-toggle:after {
        position: absolute;
        right: 4px;
        content: '\ea46';
        font-family: 'Material Icons Round';
        width: 10px;
        flex-shrink: 0;
        font-size: 8px;
        font-weight: 400;
        line-height: 1;
        text-align: center;
        opacity: .5;
        transition: right .17s ease
    }

    .is-dark .darkmode-toggle:after {
        content: '\e518';
        right: 20px
    }

    .rtl .darkmode-toggle:after {
        right: 20px
    }

    .rtl.is-dark .darkmode-toggle:after {
        right: 4px
    }

    .darkmode-toggle:hover:before {
        color: var(--header-hover-color)
    }

    .search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background-color: var(--gray-bg);
        color: var(--header-color);
        font-size: 24px;
        cursor: pointer;
        border-radius: var(--radius)
    }

    .search-toggle:before {
        display: block;
        content: '\e8b6';
        font-family: 'Material Icons Round';
        font-weight: 400
    }

    .search-toggle:hover {
        color: var(--header-hover-color)
    }

    #main-search-wrap {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 62px;
        background-color: var(--header-bg);
        z-index: 25
    }

    .rtl #main-search-wrap {
        left: 0;
        right: unset
    }

    .main-search {
        position: relative;
        float: right;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center
    }

    .rtl .main-search {
        float: left
    }

    .main-search .search-form {
        display: flex;
        flex: 1;
        height: 34px
    }

    .main-search .search-input {
        width: 100%;
        flex: 1;
        font-family: inherit;
        font-size: 16px;
        color: var(--header-color);
        font-weight: var(--light-weight);
        text-align: left
    }

    .rtl .main-search .search-input {
        text-align: right
    }

    .main-search .search-input::placeholder {
        color: var(--header-color);
        opacity: .65;
        outline: none
    }

    .main-search .search-toggle:before {
        content: '\e5cd'
    }

    .overlay {
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(22, 22, 26, .5);
        z-index: 1000;
        -webkit-backdrop-filter: saturate(100%) blur(3px);
        -ms-backdrop-filter: saturate(100%) blur(3px);
        -o-backdrop-filter: saturate(100%) blur(3px);
        backdrop-filter: saturate(100%) blur(3px);
        margin: 0;
        transition: all .25s ease
    }

    #slide-menu {
        display: none;
        position: fixed;
        width: 300px;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: var(--mobilemenu-bg);
        overflow: hidden;
        z-index: 1010;
        left: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: hidden;
        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
        transition: all .25s ease
    }

    .rtl #slide-menu {
        left: unset;
        right: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    .nav-active #slide-menu,
    .rtl .nav-active #slide-menu {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible
    }

    .slide-menu-header {
        height: 62px;
        background-color: var(--header-bg);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
    }

    .is-dark .slide-menu-header {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.03)
    }

    .mobile-logo {
        display: flex;
        flex: 1;
        width: 100%;
        overflow: hidden;
        padding: 0 0 0 20px
    }

    .rtl .mobile-logo {
        padding: 0 20px 0 0
    }

    .mobile-logo .homepage {
        max-width: 100%;
        font-size: 25px;
        color: var(--header-color);
        line-height: 40px;
        font-weight: 700;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .mobile-logo .homepage:hover {
        color: var(--header-hover-color)
    }

    .mobile-logo .logo-img img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 40px
    }

    .hide-mobile-menu {
        display: flex;
        height: 100%;
        color: var(--header-color);
        font-size: 26px;
        align-items: center;
        z-index: 20;
        padding: 0 15px
    }

    .hide-mobile-menu:before {
        content: '\e5cd';
        font-family: 'Material Icons Round';
        font-weight: 400
    }

    .hide-mobile-menu:hover {
        color: var(--header-hover-color)
    }

    .slide-menu-flex {
        display: flex;
        height: calc(100% - 62px);
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    .mobile-menu {
        padding: 20px
    }

    .mobile-menu .sub-menu {
        display: none;
        grid-column: 1/3;
        overflow: hidden
    }

    .mobile-menu ul li a {
        display: block;
        font-size: 14px;
        color: var(--mobilemenu-color);
        font-weight: 400;
        padding: 10px 0
    }

    .mobile-menu>ul>li>a {
        font-family: var(--menu-font);
        font-weight: 700;
        text-transform: uppercase
    }

    .mobile-menu li.has-sub {
        display: grid;
        grid-template-columns: 1fr 34px
    }

    .mobile-menu .submenu-toggle {
        display: flex;
        align-self: center;
        justify-content: flex-end;
        font-size: 24px;
        color: var(--mobilemenu-color)
    }

    .mobile-menu .submenu-toggle:before {
        content: '\e5cf';
        font-family: 'Material Icons Round';
        font-weight: 400
    }

    .mobile-menu .expanded>.submenu-toggle:before {
        content: '\e5ce'
    }

    .mobile-menu ul li a:hover,
    .mobile-menu .submenu-toggle:hover {
        color: var(--mobilemenu-hover-color)
    }

    .mobile-menu li.has-sub li a {
        font-size: 14px;
        opacity: .75;
        padding: 10px 13px
    }

    .mobile-menu li.has-sub li li a {
        padding: 10px 23px
    }

    .mm-footer {
        padding: 20px
    }

    .mm-footer ul {
        display: flex;
        flex-wrap: wrap
    }

    .mm-footer li {
        margin: 0 15px 0 0
    }

    .rtl .mm-footer li {
        margin: 0 0 0 15px
    }

    .mm-footer li:last-child {
        margin: 0
    }

    .mm-footer .link-list {
        margin: 10px 0 0
    }

    .mm-footer .link-list li {
        margin-top: 5px
    }

    .mm-footer a {
        display: block;
        font-size: 14px;
        color: var(--mobilemenu-color)
    }

    .mm-footer .rss a,
    .mm-footer .email a,
    .mm-footer .external-link a {
        font-size: 18px
    }

    .mm-footer a:hover {
        color: var(--mobilemenu-hover-color)
    }

    #header-ads-wrap {
        float: left;
        width: 100%
    }

    .header-ads .widget {
        position: relative;
        margin: 25px 0 0
    }

    #ticker-wrapper,
    #ticker .widget {
        float: left;
        width: 100%
    }

    #ticker .widget {
        --title-color: var(--ticker-color);
        --title-hover-color: var(--ticker-hover-color);
        display: none;
        align-items: flex-start;
        background-color: var(--widget-bg);
        padding: 10px 13px 10px 20px;
        margin: 25px 0 0;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    .rtl #ticker .widget {
        padding: 10px 20px 10px 13px
    }

    #ticker .widget.is-visible,
    #ticker .widget.PopularPosts {
        display: flex
    }

    .ticker .widget-title {
        display: flex;
        align-items: center;
        position: relative;
        height: 20px;
        color: var(--ticker-title-color);
        padding: 0 6px 0 12px
    }

    .rtl .ticker .widget-title {
        padding: 0 12px 0 6px
    }

    @keyframes pulse {
        0% {
            opacity: .8;
            transform: scale(0.8)
        }

        100% {
            opacity: 0;
            transform: scale(4)
        }
    }

    .ticker .widget-title:before,
    .ticker .widget-title:after {
        content: '';
        position: absolute;
        left: 0;
        width: 4px;
        height: 4px;
        background-color: currentColor;
        border-radius: 50%
    }

    .ticker .widget-title:before {
        animation: pulse 2s infinite
    }

    .rtl .ticker .widget-title:before,
    .rtl .ticker .widget-title:after {
        left: unset;
        right: 0
    }

    .ticker .widget-title .title {
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase
    }

    .ticker .widget-title .title:after {
        content: '\e5cc';
        font-family: 'Material Icons Round';
        font-weight: 400;
        font-size: 16px;
        margin: 0 -2px
    }

    .rtl .ticker .widget-title .title:after {
        content: '\e5cb'
    }

    .ticker .widget-content {
        display: flex;
        justify-content: space-between;
        flex: 1;
        height: 20px
    }

    .ticker .loader {
        justify-content: flex-start;
        padding: 0 1px
    }

    .ticker .loader:after {
        width: 14px;
        height: 14px;
        border-width: 1.5px
    }

    .ticker .error-msg {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0
    }

    .ticker-items {
        position: relative;
        flex: 1;
        overflow: hidden
    }

    .ticker-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(5px, 0, 0);
        pointer-events: none;
        transition: all .85s ease
    }

    .rtl .ticker-item {
        left: unset;
        right: 0;
        transform: translate3d(-10px, 0, 0)
    }

    .ticker-item.active {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
        pointer-events: initial
    }

    .ticker-item .entry-title {
        display: flex;
        align-items: center;
        height: 20px;
        font-size: 14px;
        font-weight: 400
    }

    .ticker-item .entry-title a {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .ticker-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
        padding: 0 0 0 10px
    }

    .rtl .ticker-nav {
        padding: 0 10px 0 0
    }

    .ticker-nav button {
        display: flex;
        width: 20px;
        height: 20px;
        background-color: var(--gray-bg);
        font-size: 18px;
        color: var(--title-color);
        align-items: center;
        justify-content: center;
        border-radius: var(--radius)
    }

    .ticker-nav button:hover {
        color: var(--title-hover-color)
    }

    .ticker-nav button:before {
        display: block;
        font-family: 'Material Icons Round'
    }

    .ticker-nav .tn-prev:before,
    .rtl .ticker-nav .tn-next:before {
        content: '\e5cb'
    }

    .ticker-nav .tn-next:before,
    .rtl .ticker-nav .tn-prev:before {
        content: '\e5cc'
    }

    #featured-wrapper,
    #featured .widget,
    #featured .widget-content {
        float: left;
        width: 100%;
        margin: 0
    }

    #featured .widget {
        display: none;
        background-color: var(--widget-bg);
        padding: 20px;
        margin: 25px 0 0;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    #featured .widget.is-visible,
    #featured .widget.PopularPosts {
        display: block
    }

    #featured .widget-content {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 402px;
        margin: 0
    }

    #featured .error-msg {
        padding: 0
    }

    .featured-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2px
    }

    .featured-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2px
    }

    .featured-item {
        width: 100%;
        height: 200px
    }

    .featured-item.item-0 {
        height: 100%
    }

    .featured-item .entry-image-wrap {
        width: 100%;
        height: 100%
    }

    .featured-item.item-0 .entry-info {
        padding: 20px
    }

    .featured-item .entry-title {
        font-size: 15px
    }

    .featured-item.item-0 .entry-title {
        font-size: 25px
    }

    .featured-item .entry-meta {
        flex-wrap: wrap
    }

    .featured-items .cs.item-0 .entry-image-wrap.is-video:after {
        top: 20px;
        right: 20px
    }

    .rtl .featured-items .cs.item-0 .entry-image-wrap.is-video:after {
        left: 20px;
        right: unset
    }

    .type-feat1 .featured-item.item-1 {
        grid-column: 1/3
    }

    .type-feat1 .featured-item.item-1 .entry-title {
        font-size: 19px
    }

    .type-feat3 .featured-grid {
        grid-template-columns: 1fr
    }

    .type-feat3 .featured-item.item-0 .entry-info {
        padding: 20px
    }

    .type-feat3 .featured-item .entry-title {
        font-size: 19px
    }

    .type-feat3 .featured-item.item-0 .entry-title {
        font-size: 25px
    }

    .type-feat4 .featured-items {
        grid-template-columns: repeat(3, 1fr)
    }

    .type-feat4 .featured-grid {
        grid-column: 2/4
    }

    .type-feat4 .featured-item.item-0 .entry-info {
        padding: 15px
    }

    .type-feat4 .featured-item .entry-title {
        font-size: 17px
    }

    .type-feat4 .featured-item.item-0 .entry-title {
        font-size: 21px
    }

    .type-feat5 .featured-items {
        grid-template-columns: repeat(3, 1fr)
    }

    .type-feat5 .featured-grid {
        grid-column: 2/4
    }

    .type-feat5 .featured-item {
        height: 402px
    }

    .type-feat5 .featured-item .entry-title {
        font-size: 21px
    }

    .title-wrap {
        display: flex;
        justify-content: space-between;
        height: 30px;
        margin: 0 0 20px;
        border-bottom: 2px solid var(--border-color)
    }

    .title-wrap>* {
        display: flex;
        align-items: flex-start
    }

    .title-wrap>.title {
        position: relative;
        height: 30px;
        font-size: 15px;
        color: var(--widget-title-color);
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1;
        margin: 0
    }

    .title-wrap>.title:after {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        width: 30px;
        height: 2px;
        background-color: var(--widget-dash-color);
        margin: 0
    }

    .rtl .title-wrap>.title:after {
        left: unset;
        right: 0
    }

    .title-wrap>.title-link {
        font-size: 13px;
        color: var(--meta-color);
        line-height: 1;
        font-weight: var(--light-weight)
    }

    .title-wrap>.title-link:hover {
        color: var(--main-color)
    }

    .content-section,
    .content-section .content-block {
        float: left;
        width: 100%
    }

    .content-section .widget {
        display: none;
        float: left;
        width: 100%;
        background-color: var(--widget-bg);
        padding: 20px;
        margin: 0 0 25px;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    .content-section .widget.column-style {
        width: calc((100% - 25px) / 2)
    }

    .content-section .widget[data-align="right"] {
        float: right
    }

    .content-section .widget.is-visible {
        display: flex;
        flex-direction: column
    }

    .content-section .widget.is-ad {
        display: flex;
        justify-content: center;
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        box-shadow: none
    }

    #content-section-2 .widget:last-child {
        margin: 0
    }

    .content-section .loader {
        height: 180px
    }

    .list1-items {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 25px
    }

    .list1-item {
        display: flex
    }

    .list1-item .entry-image-wrap {
        width: 235px;
        height: 150px;
        margin: 0 18px 0 0
    }

    .rtl .list1-item .entry-image-wrap {
        margin: 0 0 0 18px
    }

    .list1-item .entry-header {
        flex: 1
    }

    .list1-item .entry-title {
        font-size: 21px
    }

    .list1-item .entry-excerpt {
        font-size: 14px;
        margin: 10px 0 0
    }

    .list1-item .entry-meta {
        flex-wrap: wrap;
        margin: 10px 0 0
    }

    .block1-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        grid-gap: 25px
    }

    .block1-items .cs .entry-inner {
        height: 335px
    }

    .block1-items .cs .entry-image-wrap {
        width: 100%;
        height: 100%
    }

    .block1-items .cs .entry-title {
        font-size: 21px
    }

    .block1-items .cs .entry-meta {
        flex-wrap: wrap
    }

    .block1-list {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 25px
    }

    .block1-list .block1-item {
        display: flex
    }

    .block1-list .entry-header {
        flex: 1
    }

    .block1-list .entry-image-wrap {
        width: 98px;
        height: 65px;
        margin: 0 13px 0 0
    }

    .rtl .block1-list .entry-image-wrap {
        margin: 0 0 0 13px
    }

    .block1-list .entry-title {
        font-size: 14px
    }

    .block2-items {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        grid-gap: 25px
    }

    .block2-items .cs .entry-inner {
        height: 320px
    }

    .block2-items .cs .entry-image-wrap {
        width: 100%;
        height: 100%
    }

    .block2-items .cs .entry-title {
        font-size: 23px
    }

    .block2-items .cs .entry-meta {
        flex-wrap: wrap
    }

    .block2-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 25px
    }

    .block2-grid .block2-item {
        display: flex;
        flex-direction: column
    }

    .block2-grid .entry-image-wrap {
        width: 100%;
        height: 135px;
        margin: 0 0 10px
    }

    .block2-grid .entry-title {
        font-size: 15px
    }

    .grid1-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 25px
    }

    .grid1-item {
        display: flex;
        flex-direction: column
    }

    .grid1-item .entry-image-wrap {
        width: 100%;
        height: 180px;
        margin: 0 0 12px
    }

    .grid1-item .entry-title {
        font-size: 19px
    }

    .grid1-item .entry-excerpt {
        font-size: 14px;
        margin: 7px 0 0
    }

    .grid1-item .entry-meta {
        flex-wrap: wrap;
        margin: 5px 0 0
    }

    .grid1-item .entry-meta.has-snip {
        margin: 8px 0 0
    }

    .grid2-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 25px
    }

    .grid2-item {
        display: flex;
        flex-direction: column
    }

    .grid2-item .entry-image-wrap {
        width: 100%;
        height: 135px;
        margin: 0 0 10px
    }

    .grid2-item .entry-title {
        font-size: 15px
    }

    .column-items {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 25px
    }

    .col-item {
        display: flex
    }

    .col-item .entry-inner {
        height: 180px
    }

    .col-item .entry-image-wrap {
        width: 98px;
        height: 65px;
        margin: 0 13px 0 0
    }

    .rtl .col-item .entry-image-wrap {
        margin: 0 0 0 13px
    }

    .col-item .entry-inner .entry-image-wrap {
        width: 100%;
        height: 100%;
        margin: 0
    }

    .col-item .entry-header:not(.entry-info) {
        flex: 1
    }

    .col-item .entry-title {
        font-size: 14px
    }

    .col-item .entry-inner .entry-title {
        font-size: 19px
    }

    .col-item .entry-inner .entry-meta {
        flex-wrap: wrap
    }

    html:not(.is-dark) .content-section .video-style {
        --widget-bg: var(--video-widget-bg);
        --widget-title-color: var(--video-widget-color);
        --title-color: var(--video-widget-color);
        --title-hover-color: var(--video-widget-hover-color);
        --meta-color: var(--video-widget-meta-color)
    }

    .video-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        grid-gap: 25px
    }

    .video-items .cs .entry-inner {
        height: 413px
    }

    .video-items .cs .entry-image-wrap {
        width: 100%;
        height: 100%
    }

    .video-items .cs .is-video:after {
        top: 50%;
        left: unset;
        right: 50%;
        transform: translate(50%, -50%) scale(1.25)
    }

    .video-items .cs .entry-title {
        font-size: 21px
    }

    .video-items .cs .entry-meta {
        flex-wrap: wrap
    }

    .video-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 25px 20px
    }

    .video-grid .video-item {
        display: flex;
        flex-direction: column
    }

    .video-grid .entry-image-wrap {
        width: 100%;
        height: 105px;
        margin: 0 0 10px
    }

    .video-grid .entry-title {
        font-size: 14px
    }

    .video-items .is-video:after {
        background-color: var(--main-color) !important
    }

    #main {
        float: left;
        width: 100%
    }

    .is-home .has-margin #main {
        margin: 0 0 25px
    }

    .index-blog {
        background-color: var(--widget-bg);
        padding: 20px;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    .queryMessage .query-info {
        display: flex;
        align-items: center;
        font-family: var(--title-font);
        font-size: 15px;
        color: var(--title-color);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 20px
    }

    .no-posts .queryMessage .query-info {
        margin: 0
    }

    .queryMessage .query-info:after {
        display: inline-block;
        content: '\e5cc';
        font-family: 'Material Icons Round';
        font-size: 20px;
        color: var(--main-color);
        font-weight: 400;
        margin: 0 0 0 -3px
    }

    .rtl .queryMessage .query-info:after {
        content: '\e5cb';
        margin: 0 -4px 0 0
    }

    .queryEmpty {
        font-size: 14px;
        color: var(--meta-color);
        text-align: center;
        margin: 50px 0
    }

    .index-post.ad-type {
        display: block
    }

    @keyframes postFadeInUp {
        0% {
            opacity: 0;
            transform: translate3d(0, 10px, 0)
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0)
        }
    }

    .index-post.fadeInUp {
        animation: postFadeInUp .5s ease
    }

    .item-post-inner {
        background-color: var(--widget-bg);
        padding: 20px;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    #breadcrumb {
        display: flex;
        font-size: 14px;
        color: var(--meta-color);
        font-weight: var(--light-weight);
        line-height: 1;
        margin: 0 0 10px
    }

    #breadcrumb a {
        color: var(--meta-color)
    }

    #breadcrumb a.home,
    #breadcrumb a:hover {
        color: var(--main-color)
    }

    #breadcrumb .separator:after {
        content: '\e5cc';
        font-family: 'Material Icons Round';
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        vertical-align: middle
    }

    .rtl #breadcrumb .separator:after {
        content: '\e5cb'
    }

    .item-post h1.entry-title {
        font-size: 34px;
        font-weight: 700
    }

    .p-eh .entry-meta {
        flex-wrap: wrap;
        justify-content: space-between;
        font-size: 14px;
        margin: 13px 0 0
    }

    .p-eh .entry-meta .align-left,
    .p-eh .entry-meta .align-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

    .p-eh .entry-meta .mi,
    .p-eh .entry-meta .sp {
        margin: 0 4px 0 0
    }

    .rtl .p-eh .entry-meta .mi,
    .rtl .p-eh .entry-meta .sp {
        margin: 0 0 0 4px
    }

    .p-eh .entry-meta .entry-author {
        align-items: center
    }

    .p-eh .entry-meta .entry-author:before {
        display: none
    }

    .p-eh .entry-meta .author-avatar-wrap {
        overflow: visible;
        width: 30px;
        height: 30px;
        background-color: var(--widget-bg);
        padding: 1px;
        margin: 0 5px 0 0;
        border: 1px solid var(--main-color);
        border-radius: 100%
    }

    .rtl .p-eh .entry-meta .author-avatar-wrap {
        margin: 0 0 0 5px
    }

    .p-eh .entry-meta .author-avatar-wrap:before {
        content: '';
        position: absolute;
        display: block;
        top: calc(50% - 6px);
        left: -1px;
        width: calc(100% + 2px);
        height: 12px;
        background-color: var(--widget-bg);
        z-index: 1;
        margin: 0
    }

    .p-eh .entry-meta .author-avatar {
        z-index: 2;
        border-radius: 50%
    }

    .entry-meta .entry-comments-link {
        display: none;
        margin: 0 0 0 10px
    }

    .rlt .entry-meta .entry-comments-link {
        margin: 0 10px 0 0
    }

    .entry-meta .entry-comments-link:before {
        display: inline-block;
        content: '\e8af';
        font-family: 'Material Icons Round';
        font-size: 16px;
        color: var(--main-color);
        font-weight: 400;
        margin: 0 4px 0 0
    }

    .rtl .entry-meta .entry-comments-link:before {
        margin: 0 0 0 4px
    }

    .entry-meta .entry-comments-link.show {
        display: flex
    }

    #post-body {
        position: relative;
        float: left;
        width: 100%;
        font-family: var(--text-font);
        font-size: 15px;
        color: var(--text-color);
        line-height: 1.6em;
        margin: 25px 0 0
    }

    .post-body p {
        margin-bottom: 25px
    }

    .post-body h1,
    .post-body h2,
    .post-body h3,
    .post-body h4,
    .post-body h5,
    .post-body h6 {
        font-size: 17px;
        color: var(--title-color);
        line-height: 1.3em;
        margin: 0 0 20px
    }

    .post-body h1 {
        font-size: 26px
    }

    .post-body h2 {
        font-size: 23px
    }

    .post-body h3 {
        font-size: 20px
    }

    .post-body img {
        height: auto !important
    }

    blockquote {
        position: relative;
        background-color: var(--gray-bg);
        color: var(--title-color);
        font-style: normal;
        padding: 20px;
        margin: 0;
        border-radius: var(--radius)
    }

    blockquote:before {
        position: absolute;
        top: 0;
        left: 5px;
        content: '\e244';
        font-family: 'Material Icons Round';
        font-size: 60px;
        color: var(--title-color);
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        opacity: .05;
        margin: 0
    }

    .rtl blockquote:before {
        left: unset;
        right: 5px
    }

    .post-body ul {
        padding: 0 0 0 20px;
        margin: 10px 0
    }

    .rtl .post-body ul {
        padding: 0 20px 0 0
    }

    .post-body li {
        margin: 8px 0;
        padding: 0
    }

    .post-body ul li,
    .post-body ol ul li {
        list-style: none
    }

    .post-body ul li:before,
    .post-body ul li ul li ul li:before {
        display: inline-block;
        content: '\ef4a';
        font-family: 'Material Icons Round';
        font-size: 5px;
        line-height: 1;
        vertical-align: middle;
        margin: 0 5px 0 0
    }

    .post-body ul li ul li:before {
        content: '\e57b'
    }

    .rtl .post-body ul li:before {
        margin: 0 0 0 5px
    }

    .post-body ol {
        counter-reset: pbt;
        padding: 0 0 0 20px;
        margin: 10px 0
    }

    .rtl .post-body ol {
        padding: 0 20px 0 0
    }

    .post-body ol>li {
        counter-increment: pbt;
        list-style: none
    }

    .post-body ol>li:before {
        display: inline-block;
        content: counters(pbt, '.')'.';
        margin: 0 5px 0 0
    }

    .rtl .post-body ol>li:before {
        margin: 0 0 0 5px
    }

    .post-body ol ol {
        counter-reset: pbt2
    }

    .post-body ol ol>li {
        counter-increment: pbt2
    }

    .post-body ol ol>li:before {
        content: counters(pbt2, '.')'.'
    }

    .post-body ol ol ol {
        counter-reset: pbt3
    }

    .post-body ol ol>li ol>li {
        counter-increment: pbt3
    }

    .post-body ol ol>li ol>li:before {
        content: counters(pbt3, '.')'.'
    }

    .post-body u {
        text-decoration: underline
    }

    .post-body strike {
        text-decoration: line-through
    }

    .post-body sup {
        vertical-align: super
    }

    .post-body a {
        color: #626262;
    }

    .post-body a:hover {
        text-decoration: underline
    }

    .post-body a.button {
        display: inline-block;
        height: 34px;
        background-color: var(--button-bg);
        font-family: var(--body-font);
        font-size: 15px;
        color: var(--button-color);
        font-weight: 400;
        line-height: 34px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        padding: 0 20px;
        margin: 0 6px 8px 0
    }

    .rtl .post-body a.button {
        margin: 0 0 8px 6px
    }

    .post-body a.button.x2 {
        height: 46px;
        font-size: 18px;
        line-height: 46px
    }

    .post-body a.button.is-c,
    .rtl.post-body a.button.is-c {
        margin: 0 3px 8px
    }

    .post-body a.button.x2 span {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.1);
        font-size: 14px;
        line-height: 14px;
        padding: 6px;
        margin: 0 0 0 20px;
        border-radius: var(--radius)
    }

    .rtl .post-body a.button.x2 span {
        margin: 0 20px 0 0
    }

    .post-body .button:before {
        display: inline-block;
        font-family: 'Material Icons Round';
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        vertical-align: middle;
        margin: -1px 6px 0 0
    }

    .rtl .post-body .button:before {
        margin: -1px 0 0 6px
    }

    .post-body a.btn.x2:before {
        font-size: 20px;
        margin: -2px 6px 0 0
    }

    .rtl .post-body a.btn.x2:before {
        margin: -2px 0 0 6px
    }

    .post-body .btn.preview:before {
        content: '\e8f4'
    }

    .post-body .btn.download:before {
        content: '\f090'
    }

    .post-body .btn.link:before {
        content: '\e157'
    }

    .post-body .btn.cart:before {
        content: '\e8cc'
    }

    .post-body .btn.info:before {
        content: '\e88e'
    }

    .post-body .btn.share:before {
        content: '\e80d'
    }

    .post-body .btn.contact:before {
        content: '\e0e1'
    }

    .post-body a.button:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-color)
    }

    .post-body a.color {
        color: #fff
    }

    .post-body a.color:hover {
        opacity: .9
    }

    .alert-message {
        display: block;
        background-color: var(--gray-bg);
        padding: 20px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius)
    }

    .alert-message.alert-success {
        background-color: rgba(39, 174, 96, 0.1);
        color: rgba(39, 174, 96, 1);
        border-color: rgba(39, 174, 96, 0.1)
    }

    .alert-message.alert-info {
        background-color: rgba(41, 128, 185, 0.1);
        color: rgba(41, 128, 185, 1);
        border-color: rgba(41, 128, 185, 0.1)
    }

    .alert-message.alert-warning {
        background-color: rgba(243, 156, 18, 0.1);
        color: rgba(243, 156, 18, 1);
        border-color: rgba(243, 156, 18, 0.1)
    }

    .alert-message.alert-error {
        background-color: rgba(231, 76, 60, 0.1);
        color: rgba(231, 76, 60, 1);
        border-color: rgba(231, 76, 60, 0.1)
    }

    .alert-message:before {
        display: inline-block;
        font-family: 'Material Icons Round';
        font-size: 18px;
        line-height: 1;
        font-weight: 400;
        vertical-align: middle;
        margin: 0 5px 0 0
    }

    .rtl .alert-message:before {
        margin: 0 0 0 5px
    }

    .alert-message.alert-success:before {
        content: '\e86c'
    }

    .alert-message.alert-info:before {
        content: '\e88e'
    }

    .alert-message.alert-warning:before {
        content: '\e000'
    }

    .alert-message.alert-error:before {
        content: '\e5c9'
    }

    .post-body table {
        width: 100%;
        overflow-x: auto;
        text-align: left;
        margin: 0;
        border-collapse: collapse;
        border: 1px solid var(--border-color)
    }

    .rtl .post-body table {
        text-align: right
    }

    .post-body table td,
    .post-body table th {
        padding: 6px 12px;
        border: 1px solid var(--border-color)
    }

    .post-body table thead th {
        color: var(--title-color);
        vertical-align: bottom
    }

    table.tr-caption-container,
    table.tr-caption-container td,
    table.tr-caption-container th {
        line-height: 1;
        padding: 0;
        border: 0
    }

    table.tr-caption-container td.tr-caption {
        font-size: 12px;
        color: var(--meta-color);
        font-style: italic;
        padding: 6px 0 0
    }

    .pbt-toc-wrap {
        display: flex;
        width: 100%;
        clear: both;
        margin: 0
    }

    .pbt-toc-inner {
        position: relative;
        max-width: 100%;
        background-color: var(--gray-bg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        font-size: 14px;
        color: var(--title-color);
        line-height: 1.6em;
        border: 1px solid var(--border-color);
        border-radius: var(--radius)
    }

    a.pbt-toc-title {
        position: relative;
        height: 40px;
        font-size: 16px;
        color: var(--title-color);
        font-weight: var(--title-weight);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 13px 0 18px
    }

    .rtl a.pbt-toc-title {
        padding: 0 18px 0 13px
    }

    .pbt-toc-title-text {
        display: flex
    }

    .pbt-toc-title-text:before {
        content: '\e242';
        font-family: 'Material Icons Round';
        font-size: 20px;
        font-weight: 400;
        margin: 0 6px 0 0
    }

    .rtl .pbt-toc-title-text:before {
        margin: 0 0 0 6px
    }

    .pbt-toc-title:after {
        content: '\e5cf';
        font-family: 'Material Icons Round';
        font-size: 24px;
        font-weight: 400;
        margin: 0 0 0 20px
    }

    .rtl .pbt-toc-title:after {
        margin: 0 20px 0 0
    }

    .pbt-toc-title.is-expanded:after {
        content: '\e5ce'
    }

    a.pbt-toc-title:hover {
        text-decoration: none
    }

    #pbt-toc {
        display: none;
        padding: 0 20px 10px;
        margin: 0
    }

    #pbt-toc ol {
        counter-reset: pbtToc;
        padding: 0 0 0 20px
    }

    .rtl #pbt-toc ol {
        padding: 0 20px 0 0
    }

    #pbt-toc li {
        counter-increment: pbtToc;
        font-size: 14px;
        margin: 10px 0
    }

    #pbt-toc li:before {
        content: counters(pbtToc, '.')'.'
    }

    #pbt-toc li a {
        color: var(--main-color)
    }

    #pbt-toc li a:hover {
        color: var(--main-color);
        text-decoration: underline
    }

    .post-body .contact-form-widget {
        display: table;
        width: 100%;
        font-family: var(--body-font)
    }

    .post-body .contact-form-widget .cf-s {
        font-size: 15px
    }

    .post-body .contact-form-name.cf-s {
        width: calc(50% - 5px)
    }

    .rtl .post-body .contact-form-name {
        float: right
    }

    .post-body .contact-form-email.cf-s {
        float: right;
        width: calc(50% - 5px)
    }

    .rtl .post-body .contact-form-email {
        float: left
    }

    .post-body .contact-form-button-submit {
        font-size: 15px
    }

    .post-body pre,
    pre.code-box {
        display: block;
        background-color: var(--gray-bg);
        font-family: Monospace;
        font-size: 13px;
        color: var(--title-color);
        white-space: pre-wrap;
        line-height: 1.4em;
        padding: 20px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius)
    }

    .post-body .google-auto-placed {
        margin: 25px 0
    }

    .youtube-video {
        position: relative;
        width: 100%;
        padding: 0;
        padding-top: 56%
    }

    .youtube-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .entry-labels {
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0 0
    }

    .entry-labels>* {
        display: flex;
        align-items: center;
        height: 20px;
        background-color: var(--gray-bg);
        font-size: 12px;
        color: var(--title-color);
        padding: 0 6px;
        margin: 5px 5px 0 0
    }

    .rtl .entry-labels>* {
        margin: 5px 0 0 5px
    }

    .entry-labels span {
        background-color: var(--title-color);
        color: var(--widget-bg)
    }

    .is-dark .entry-labels span {
        background-color: var(--outer-bg);
        color: var(--title-color)
    }

    .entry-labels a:hover {
        color: var(--title-hover-color)
    }

    .post-share {
        margin: 20px 0 0
    }

    .share-links {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start
    }

    .share-links li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        font-size: 16px;
        color: #fff;
        font-weight: 400;
        overflow: hidden;
        margin: 5px 5px 0 0
    }

    .rtl .share-links li a {
        margin: 5px 0 0 5px
    }

    .share-links .email a {
        font-size: 20px
    }

    .share-links .has-span a {
        width: auto;
        justify-content: space-between
    }

    .share-links .has-span a:before {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 100%;
        width: 34px;
        background-color: rgba(255, 255, 255, 0.08)
    }

    .share-links span {
        font-size: 14px;
        padding: 0 20px
    }

    .share-links li a:hover {
        opacity: .9
    }

    .share-links .show-hid a {
        background-color: var(--gray-bg);
        font-size: 28px;
        color: rgba(155, 155, 155, 0.8)
    }

    .share-links .show-hid a:before {
        content: '\e145';
        font-family: 'Material Icons Round';
        font-weight: 400
    }

    .post-share .expanded .show-hid a:before {
        content: '\e15b'
    }

    .share-links .reddit,
    .share-links .linkedin,
    .share-links .tumblr,
    .share-links .telegram {
        display: none
    }

    .post-share .expanded li[class] {
        display: inline-block
    }

    .post-widget {
        margin: 25px 0 0
    }

    .about-author {
        display: flex;
        background-color: var(--widget-bg);
        padding: 20px;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    .about-author .author-avatar-wrap {
        width: 60px;
        height: 60px;
        margin: 0 15px 0 0;
        border-radius: 50%;
        box-shadow: var(--avatar-shadow)
    }

    .rtl .about-author .author-avatar-wrap {
        margin: 0 0 0 15px
    }

    .about-author .author-title {
        font-size: 18px;
        color: var(--title-color);
        font-weight: var(--title-weight);
        margin: 0 0 10px
    }

    .about-author .author-title a {
        color: var(--title-color)
    }

    .about-author .author-title a:hover {
        color: var(--title-hover-color)
    }

    .author-description {
        flex: 1
    }

    .author-description .author-text {
        display: block;
        font-size: 14px;
        font-weight: 400
    }

    .author-description .author-text br,
    .author-description .author-text a {
        display: none
    }

    ul.author-links {
        display: flex;
        flex-wrap: wrap;
        padding: 0
    }

    .author-links li {
        margin: 10px 12px 0 0
    }

    .rtl .author-links li {
        margin: 10px 0 0 12px
    }

    .author-links li a {
        display: block;
        font-size: 14px;
        color: var(--text-color);
        padding: 0
    }

    .author-links li.email a,
    .author-links li.external-link a {
        font-size: 16px
    }

    .author-links li a:hover {
        opacity: .9
    }

    #magspot-related-posts {
        display: none
    }

    #related-wrap {
        background-color: var(--widget-bg);
        padding: 20px;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    .related-content .loader {
        height: 180px
    }

    .magspot-blog-post-comments {
        display: none;
        flex-direction: column;
        background-color: var(--widget-bg);
        padding: 20px;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    .magspot-blog-post-comments.is-visible {
        display: flex
    }

    .magspot-blog-post-comments:not(.comments-system-blogger) {
        padding: 10px 20px
    }

    .magspot-blog-post-comments .fb_iframe_widget_fluid_desktop {
        float: left;
        display: block !important;
        width: calc(100% + 16px) !important;
        max-width: calc(100% + 16px) !important;
        margin: 0 -8px
    }

    .magspot-blog-post-comments .fb_iframe_widget_fluid_desktop span,
    .magspot-blog-post-comments .fb_iframe_widget_fluid_desktop iframe {
        float: left;
        display: block !important;
        width: 100% !important
    }

    #disqus_thread,
    .fb-comments {
        clear: both;
        padding: 0
    }

    #comments h4#comment-post-message {
        display: none;
        float: none
    }

    .comments-title {
        margin: 0
    }

    .has-comments .comments-title.no-message {
        margin: 0 0 5px
    }

    .comments .comment-content {
        display: block;
        font-family: var(--text-font);
        font-size: 14px;
        color: var(--text-color);
        line-height: 1.5em;
        margin: 10px 0 0
    }

    .comments .comment-content>a:hover {
        text-decoration: underline
    }

    .comment-thread .comment {
        position: relative;
        list-style: none;
        padding: 20px 0 0;
        margin: 20px 0 0;
        border-top: 1px solid var(--border-color)
    }

    .comment-thread .comment .comment {
        background-color: var(--gray-bg);
        border: 0
    }

    .comment-thread ol {
        padding: 0;
        margin: 0
    }

    .comment-thread .comment-replies ol {
        padding: 0 0 4px
    }

    .toplevel-thread ol>li:first-child {
        margin: 0;
        border: 0
    }

    .toplevel-thread ol>li:first-child>.comment-block {
        padding-top: 0;
        margin: 0;
        border: 0
    }

    .comment-thread ol ol .comment:before {
        position: absolute;
        content: '\f060';
        left: -30px;
        top: -5px;
        font-family: 'Material Icons Round';
        font-size: 20px;
        color: var(--border-color);
        font-weight: 400
    }

    .rtl .comment-thread ol ol .comment:before {
        left: unset;
        right: -30px;
        transform: rotate(-180deg)
    }

    .comments .comment-replybox-single iframe {
        padding: 0 0 0 48px;
        margin: 10px 0 -5px
    }

    .rtl .comments .comment-replybox-single iframe {
        padding: 0 48px 0 0
    }

    .comment-thread .avatar-image-container {
        position: absolute;
        top: 20px;
        left: 0;
        width: 35px;
        height: 35px;
        overflow: hidden;
        border-radius: 50%;
        box-shadow: var(--avatar-shadow)
    }

    .rtl .comment-thread .avatar-image-container {
        left: auto;
        right: 0
    }

    .avatar-image-container img {
        display: block;
        width: 100%;
        height: 100%
    }

    .comments .comment-header {
        padding: 0 0 0 48px
    }

    .rtl .comments .comment-header {
        padding: 0 48px 0 0
    }

    .comments .comment-header .user {
        display: inline-block;
        font-family: var(--title-font);
        font-size: 16px;
        color: var(--title-color);
        font-weight: var(--title-weight);
        font-style: normal
    }

    .comments .comment-header .user a {
        color: var(--title-color)
    }

    .comments .comment-header .user a:hover {
        color: var(--title-hover-color)
    }

    .comments .comment-header .icon.user {
        display: none
    }

    .comments .comment-header .icon.blog-author {
        display: inline-block;
        font-size: 14px;
        color: var(--main-color);
        vertical-align: top;
        margin: -5px 0 0 4px
    }

    .rtl .comments .comment-header .icon.blog-author {
        margin: -5px 4px 0 0
    }

    .comments .comment-header .icon.blog-author:before {
        content: '\ef76';
        font-family: 'Material Icons Round';
        font-weight: 400
    }

    .comments .comment-header .datetime {
        display: block;
        font-size: 12px;
        font-weight: var(--light-weight);
        margin: 1px 0 0
    }

    .comment-header .datetime a {
        color: var(--meta-color)
    }

    .comments .comment-actions {
        display: block;
        margin: 10px 0 0
    }

    .comments .comment-actions a {
        display: inline-block;
        font-size: 14px;
        color: var(--main-color);
        font-weight: 400;
        font-style: normal;
        margin: 0 15px 0 0
    }

    .rtl .comments .comment-actions a {
        margin: 0 0 0 15px
    }

    .comments .comment-actions a:hover {
        text-decoration: underline
    }

    .item-control {
        display: none
    }

    .loadmore.loaded a {
        display: inline-block;
        border-bottom: 1px solid rgba(155, 155, 155, .51);
        text-decoration: none;
        margin-top: 15px
    }

    .comments .continue {
        display: none
    }

    .comments .comment-replies {
        padding: 0 0 0 48px
    }

    .rtl .comments .comment-replies {
        padding: 0 48px 0 0
    }

    .thread-expanded .thread-count a,
    .loadmore {
        display: none
    }

    .comments .footer {
        float: left;
        width: 100%;
        font-size: 13px;
        margin: 0
    }

    p.comments-message {
        font-size: 14px;
        color: var(--meta-color);
        font-style: italic;
        padding: 0 0 15px;
        margin: 15px 0 0;
        border-bottom: 1px solid var(--border-color)
    }

    p.comments-message.no-new-comments {
        padding: 0;
        border: 0
    }

    p.comments-message>a {
        color: var(--main-color)
    }

    p.comments-message>a:hover {
        color: var(--title-color)
    }

    p.comments-message>em {
        color: #ff3f34;
        font-style: normal;
        margin: 0 3px
    }

    #comments[data-embed='false'] p.comments-message>i {
        color: var(--main-color);
        font-style: normal
    }

    .comment-form>p {
        display: none
    }

    .comments #top-ce.comment-replybox-thread,
    .no-comments .comment-form {
        padding: 15px 0 0;
        margin: 20px 0 -5px;
        border-top: 1px solid var(--border-color)
    }

    .no-comments .comment-form {
        margin-top: 0;
        border: 0
    }

    .comments #top-continue a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 34px;
        font-size: 14px;
        color: var(--title-color);
        font-weight: 500;
        margin: 25px 0 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius)
    }

    .comments #top-continue a:hover {
        color: var(--title-hover-color)
    }

    #custom-ads,
    #magspot-post-footer-ads {
        position: relative;
        float: left;
        width: 100%;
        opacity: 0;
        visibility: hidden
    }

    #custom-ads {
        padding: 0 20px
    }

    #before-ad .widget-title,
    #after-ad .widget-title {
        display: block
    }

    #before-ad .widget-title>.title,
    #after-ad .widget-title>.title {
        font-size: 10px;
        color: var(--meta-color);
        font-weight: 400;
        line-height: 1;
        margin: 0 0 6px
    }

    #before-ad .widget,
    #after-ad .widget {
        position: relative;
        margin: 25px 0 0
    }

    #magspot-new-before-ad #before-ad,
    #magspot-new-after-ad #after-ad {
        display: block
    }

    #magspot-new-before-ad #before-ad .widget,
    #magspot-new-after-ad #after-ad .widget {
        margin: 0
    }

    #post-footer-ads .widget {
        position: relative
    }

    .post-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-size: 14px;
        font-weight: var(--light-weight)
    }

    .post-nav>* {
        display: flex;
        align-items: center;
        color: var(--meta-color);
        margin: 0 -4px
    }

    .post-nav a:hover {
        color: var(--main-color)
    }

    .post-nav span {
        color: var(--meta-color);
        cursor: no-drop;
        opacity: .65
    }

    .post-nav .post-nav-link:before,
    .post-nav .post-nav-link:after {
        font-family: 'Material Icons Round';
        font-size: 16px;
        line-height: 1;
        font-weight: 400
    }

    .post-nav-newer-link:before,
    .rtl .post-nav-older-link:after {
        content: '\e5cb'
    }

    .post-nav-older-link:after,
    .rtl .post-nav-newer-link:before {
        content: '\e5cc'
    }

    #blog-pager {
        display: flex;
        justify-content: center;
        margin: 25px 0 0
    }

    #blog-pager .load-more {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 34px;
        font-size: 14px;
        color: var(--title-color);
        font-weight: 500;
        padding: 0 20px;
        border: 1px solid var(--border-color)
    }

    #blog-pager #magspot-load-more-link:after {
        content: '\e5cf';
        display: inline-block;
        font-family: 'Material Icons Round';
        font-size: 20px;
        font-weight: 400;
        margin: -1px 0 0
    }

    #blog-pager #magspot-load-more-link:hover {
        color: var(--title-hover-color)
    }

    #blog-pager .no-more.show {
        display: flex;
        background-color: var(--gray-bg);
        color: var(--meta-color);
        font-weight: 400;
        cursor: not-allowed;
        padding: 0 25px;
        border: 0
    }

    #blog-pager .loading,
    #blog-pager .no-more {
        display: none
    }

    #blog-pager .loading .loader {
        height: 34px
    }

    #blog-pager .loader:after {
        width: 28px;
        height: 28px
    }

    .sidebar {
        position: relative;
        float: left;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 25px
    }

    .sidebar>.widget {
        display: flex;
        flex-direction: column;
        background-color: var(--widget-bg);
        padding: 20px;
        border-radius: var(--radius);
        box-shadow: var(--widget-shadow)
    }

    .sidebar .widget.is-ad {
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        box-shadow: none
    }

    .sidebar .widget.is-ad>.widget-title {
        display: none
    }

    .sidebar ul.social-icons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px
    }

    .sidebar .social-icons li {
        display: block;
        margin: 0
    }

    .sidebar .social-icons a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 34px;
        font-size: 16px;
        color: #fff;
        font-weight: 400;
        overflow: hidden
    }

    .sidebar .social-icons .rss a,
    .sidebar .social-icons .email a,
    .sidebar .social-icons .external-link a {
        font-size: 18px
    }

    .sidebar .social-icons a:before {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 100%;
        width: 34px;
        background-color: rgba(255, 255, 255, 0.08)
    }

    .sidebar .social-icons span {
        font-size: 14px;
        padding: 0 10px
    }

    .sidebar .social-icons a:hover {
        opacity: .9
    }

    .pbt-section .loader {
        height: 180px
    }

    .side-items {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 25px
    }

    .side-item {
        display: flex
    }

    .side-item .entry-inner {
        height: 180px
    }

    .side-item .entry-image-wrap {
        width: 98px;
        height: 65px;
        margin: 0 13px 0 0
    }

    .rtl .side-item .entry-image-wrap {
        margin: 0 0 0 13px
    }

    .side-item .entry-inner .entry-image-wrap {
        width: 100%;
        height: 100%;
        margin: 0
    }

    .side-item .entry-header:not(.entry-info) {
        flex: 1
    }

    .side-item .entry-title {
        font-size: 14px
    }

    .side-item .entry-inner .entry-title {
        font-size: 19px
    }

    .side-item .entry-inner .entry-meta {
        flex-wrap: wrap
    }

    .side3-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px
    }

    .side3-item {
        display: flex;
        flex-direction: column
    }

    .side3-item .entry-image-wrap {
        width: 100%;
        height: 90px;
        margin: 0 0 10px
    }

    .side3-item .entry-title {
        font-size: 14px
    }

    .cmm1-items {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 25px
    }

    .cmm1-items .entry-inner {
        display: flex;
        align-items: center
    }

    .cmm1-items .entry-image-wrap {
        width: 45px;
        height: 45px;
        z-index: 1;
        margin: 0 13px 0 0;
        border-radius: 50%;
        box-shadow: var(--avatar-shadow)
    }

    .rtl .cmm1-items .entry-image-wrap {
        margin: 0 0 0 13px
    }

    .cmm1-items .entry-header {
        flex: 1
    }

    .cmm1-items .entry-title {
        font-size: 14px
    }

    .cmm1-items .entry-inner:hover .entry-title {
        color: var(--title-hover-color)
    }

    .cmm1-items .cmm-snippet {
        font-size: 12px;
        color: var(--text-color);
        line-height: 1.3em;
        margin: 4px 0 0
    }

    .FeaturedPost .entry-inner {
        height: 180px
    }

    .featured-post .entry-image-wrap {
        width: 100%;
        height: 100%
    }

    .featured-post .entry-title {
        font-size: 19px
    }

    .featured-post .entry-meta {
        flex-wrap: wrap
    }

    .pbt-section .list-style li {
        font-size: 14px
    }

    .pbt-section .list-style li a,
    .pbt-section .text-list li {
        display: block;
        color: var(--title-color);
        padding: 8px 0
    }

    .pbt-section .list-style li a.has-count {
        display: flex;
        justify-content: space-between
    }

    .pbt-section .list-style li:first-child a,
    .pbt-section .text-list li:first-child {
        padding: 0 0 8px
    }

    .pbt-section .list-style li:last-child a,
    .pbt-section .text-list li:last-child {
        padding: 8px 0 0
    }

    .pbt-section .list-style li a:hover {
        color: var(--title-hover-color)
    }

    .pbt-section .list-style .count-style {
        display: inline-block;
        color: var(--meta-color)
    }

    .cloud-label ul {
        display: flex;
        flex-wrap: wrap;
        margin: -6px 0 0
    }

    .cloud-label li {
        margin: 6px 5px 0 0
    }

    .rtl .cloud-label li {
        margin: 6px 0 0 5px
    }

    .cloud-label li a {
        display: flex;
        height: 28px;
        background-color: var(--gray-bg);
        color: var(--title-color);
        font-size: 14px;
        font-weight: 400;
        align-items: center;
        padding: 0 12px
    }

    .cloud-label li a:hover {
        color: var(--title-hover-color)
    }

    .cloud-label .label-count {
        display: inline-block;
        margin: 0 0 0 6px
    }

    .rtl .cloud-label .label-count {
        margin: 0 6px 0 0
    }

    .BlogSearch .search-form {
        display: flex;
        height: 36px;
        overflow: hidden;
        padding: 2px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius)
    }

    .is-dark .BlogSearch .search-form {
        background-color: var(--gray-bg)
    }

    .BlogSearch .search-input {
        width: 100%;
        flex: 1;
        font-size: 14px;
        color: var(--text-color);
        padding: 0 8px
    }

    .BlogSearch .search-input::placeholder {
        color: var(--text-color);
        opacity: .65
    }

    .BlogSearch .search-action {
        background-color: var(--button-bg);
        font-size: 14px;
        color: var(--button-color);
        cursor: pointer;
        padding: 0 13px;
        border-radius: var(--radius)
    }

    .BlogSearch .search-action:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-color)
    }

    .widget.MailChimp {
        position: relative;
        overflow: hidden;
        padding: 3px 0 0
    }

    .widget.MailChimp:before {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        right: 0;
        background-color: var(--widget-title-color);
        height: 4px;
        z-index: 2;
        margin: -1px
    }

    .is-dark .widget.MailChimp:before {
        background-color: var(--border-color)
    }

    .MailChimp .widget-content {
        position: relative;
        overflow: hidden;
        padding: 20px
    }

    .MailChimp .widget-content:before {
        display: block;
        position: absolute;
        content: '\e0e1';
        font-family: 'Material Icons Round';
        top: 0;
        right: 0;
        font-size: 48px;
        color: var(--border-color);
        font-weight: 400;
        line-height: 1;
        z-index: 1;
        margin: 8px;
        transform: rotate(35deg)
    }

    .rtl .MailChimp .widget-content:before {
        left: 0;
        right: unset;
        transform: rotate(-35deg)
    }

    .MailChimp .mailchimp-title {
        font-size: 18px;
        color: var(--title-color);
        font-weight: var(--title-weight);
        margin: 0 0 15px
    }

    .MailChimp .mailchimp-text {
        font-size: 14px;
        color: var(--text-color);
        margin: 0 0 15px
    }

    .MailChimp .mailchimp-email-address {
        width: 100%;
        height: 34px;
        font-size: 14px;
        color: var(--text-color);
        padding: 0 10px;
        margin: 0 0 10px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius)
    }

    .is-dark .MailChimp .mailchimp-email-address {
        background-color: var(--gray-bg)
    }

    .MailChimp .mailchimp-email-address::placeholder {
        color: var(--text-color);
        opacity: .65
    }

    .MailChimp .mailchimp-email-address:focus {
        border-color: var(--main-color)
    }

    .MailChimp .mailchimp-submit {
        width: 100%;
        height: 34px;
        background-color: var(--button-bg);
        font-size: 14px;
        color: var(--button-color);
        font-weight: 400;
        cursor: pointer;
        padding: 0 20px
    }

    .MailChimp .mailchimp-submit:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-color)
    }

    .Profile ul li {
        float: left;
        width: 100%;
        padding: 20px 0 0;
        margin: 20px 0 0;
        border-top: 1px solid var(--border-color)
    }

    .Profile ul li:first-child {
        padding: 0;
        margin: 0;
        border: 0
    }

    .Profile .individual,
    .Profile .team-member {
        display: flex;
        align-items: center
    }

    .Profile .profile-img {
        width: 45px;
        height: 45px;
        background-color: var(--gray-bg);
        overflow: hidden;
        color: transparent !important;
        margin: 0 13px 0 0;
        border-radius: 50%;
        box-shadow: var(--avatar-shadow)
    }

    .rtl .Profile .profile-img {
        margin: 0 0 0 13px
    }

    .Profile .profile-info {
        flex: 1
    }

    .Profile .profile-name {
        display: block;
        font-family: var(--title-font);
        font-size: 15px;
        color: var(--title-color);
        font-weight: var(--title-weight)
    }

    .Profile .profile-name:hover {
        color: var(--title-hover-color)
    }

    .Profile .profile-link {
        display: block;
        font-size: 12px;
        color: var(--meta-color)
    }

    .Profile .profile-link:hover {
        color: var(--main-color)
    }

    .Text .widget-content {
        font-family: var(--text-font);
        font-size: 14px;
        color: var(--text-color)
    }

    .Image .image-caption {
        font-family: var(--text-font);
        font-size: 14px;
        margin: 6px 0 0
    }

    .contact-form-widget .cf-s {
        float: left;
        width: 100%;
        height: 34px;
        font-size: 14px;
        color: var(--text-color);
        padding: 0 10px;
        margin: 0 0 10px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius)
    }

    .is-dark .contact-form-widget .cf-s {
        background-color: var(--gray-bg)
    }

    .contact-form-email-message.cf-s {
        float: left;
        width: 100%;
        height: auto;
        resize: vertical;
        padding: 10px
    }

    .contact-form-widget .cf-s::placeholder {
        color: var(--text-color);
        opacity: .9
    }

    .contact-form-widget .cf-s:focus {
        border-color: var(--main-color)
    }

    .contact-form-button-submit {
        float: left;
        width: 100%;
        height: 34px;
        background-color: var(--button-bg);
        font-family: inherit;
        font-size: 14px;
        color: var(--button-color);
        font-weight: 400;
        cursor: pointer;
        padding: 0 20px;
        border: 0;
        border-radius: var(--radius)
    }

    .contact-form-button-submit:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-color)
    }

    .contact-form-widget p {
        margin: 0
    }

    .contact-form-widget .contact-form-error-message-with-border,
    .contact-form-widget .contact-form-success-message-with-border {
        float: left;
        width: 100%;
        background-color: rgba(0, 0, 0, 0);
        font-size: 13px;
        color: #e74c3c;
        text-align: left;
        line-height: 1;
        margin: 10px 0 0;
        border: 0
    }

    .contact-form-widget .contact-form-success-message-with-border {
        color: #27ae60
    }

    .rtl .contact-form-error-message-with-border,
    .rtl .contact-form-success-message-with-border {
        text-align: right
    }

    .contact-form-cross {
        cursor: pointer;
        margin: 0 0 0 3px
    }

    .rtl .contact-form-cross {
        margin: 0 3px 0 0
    }

    .Attribution a {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--title-color);
        font-weight: var(--title-weight)
    }

    .Attribution a>svg {
        width: 16px;
        height: 16px;
        fill: var(--main-color);
        margin: 0 4px 0 0
    }

    .rtl .Attribution a>svg {
        margin: 0 0 0 4px
    }

    .Attribution a:hover {
        color: var(--title-hover-color)
    }

    .Attribution .copyright {
        font-size: 12px;
        color: var(--meta-color);
        padding: 0 20px;
        margin: 2px 0 0
    }

    #google_translate_element {
        position: relative;
        overflow: hidden
    }

    .Stats .text-counter-wrapper {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: var(--meta-color);
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1;
        margin: 0
    }

    .Stats .text-counter-wrapper:before {
        content: '\e202';
        font-family: 'Material Icons Round';
        font-size: 22px;
        color: var(--title-color);
        font-weight: 400;
        margin: 0 4px 0 0
    }

    .rtl .Stats .text-counter-wrapper:before {
        margin: 0 0 0 4px
    }

    .ReportAbuse>h3 {
        display: flex;
        font-size: 14px;
        font-weight: 400
    }

    .ReportAbuse>h3:before {
        content: '\e002';
        font-family: 'Material Icons Round';
        font-size: 18px;
        color: var(--main-color);
        margin: 0 3px 0 0
    }

    .rtl .ReportAbuse>h3:before {
        margin: 0 0 0 3px
    }

    .ReportAbuse>h3 a:hover {
        text-decoration: underline
    }

    #footer-ads-wrap {
        float: left;
        width: 100%
    }

    .footer-ads .widget {
        position: relative;
        margin: 0 0 25px
    }

    #footer-wrapper {
        position: relative;
        float: left;
        width: 100%;
        background-color: var(--footer-bg);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.01)
    }

    .primary-footer {
        --title-color: var(--footer-color);
        --title-hover-color: var(--footer-hover-color);
        --meta-color: var(--footer-meta-color);
        --text-color: var(--footer-text-color)
    }

    .footer-widgets {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 30px;
        padding: 40px 0
    }

    .footer-widgets.has-border {
        border-bottom: 1px solid var(--border-color)
    }

    .footer-section {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        grid-gap: 30px
    }

    .footer-section>.widget {
        display: flex;
        flex-direction: column
    }

    .footer-section>.widget.MailChimp {
        border: 1px solid var(--border-color);
        border-top: 0;
        border-radius: var(--radius)
    }

    .footer-section .widget>.widget-title {
        margin: 0 0 20px
    }

    .footer-section .widget-title>.title {
        font-size: 15px;
        color: var(--title-color);
        font-weight: 700;
        text-transform: uppercase
    }

    .primary-footer .contact-form-widget .cf-s,
    .primary-footer .BlogSearch .search-form,
    .primary-footer .MailChimp .mailchimp-email-address {
        background-color: var(--gray-bg)
    }

    .primary-footer .widget.MailChimp:before {
        background-color: var(--border-color)
    }

    #magspot-about-section {
        flex-wrap: wrap;
        padding: 40px 0
    }

    .about-section .Image {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 350px)
    }

    .footer-info {
        flex: 1
    }

    .footer-info .title {
        font-size: 15px;
        color: var(--title-color);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 10px
    }

    .footer-logo {
        padding: 0 30px 0 0
    }

    .rtl .footer-logo {
        padding: 0 0 0 30px
    }

    .footer-logo img {
        display: block;
        width: auto;
        height: auto;
        max-height: 40px
    }

    .footer-info .image-caption {
        font-size: 14px;
        color: var(--text-color);
        margin: 0
    }

    .footer-info .image-caption a {
        color: var(--ftitle-color)
    }

    .footer-info .image-caption a:hover {
        color: var(--title-hover-color)
    }

    .about-section .LinkList {
        width: 320px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0
    }

    .about-section ul.social-icons {
        display: flex;
        flex-wrap: wrap
    }

    .about-section .social-icons li {
        margin: 0 0 0 10px
    }

    .rtl .about-section .social-icons li {
        margin: 0 10px 0 0
    }

    .about-section .social-icons a {
        display: flex;
        width: 34px;
        height: 34px;
        background-color: var(--gray-bg);
        font-size: 16px;
        color: var(--title-color);
        align-items: center;
        justify-content: center
    }

    .about-section .social-icons .rss a,
    .about-section .social-icons .email a,
    .about-section .social-icons .external-link a {
        font-size: 20px
    }

    .about-section .social-icons a:hover {
        color: #fff
    }

    .footer-bar {
        background-color: var(--footerbar-bg);
        color: var(--footerbar-color);
        padding: 20px 0
    }

    .footer-bar.has-border {
        border-top: 1px solid var(--border-color)
    }

    .footer-bar .footer-copyright {
        font-size: 14px;
        font-weight: 400;
        margin: 0
    }

    .footer-bar .footer-copyright a {
        color: var(--footerbar-color)
    }

    .footer-bar .footer-copyright a:hover {
        color: var(--footerbar-hover-color)
    }

    #footer-menu {
        position: relative;
        display: block;
        margin: 0
    }

    .footer-menu ul {
        display: flex;
        flex-wrap: wrap
    }

    .footer-menu ul li a {
        font-size: 14px;
        color: var(--footerbar-color);
        padding: 0;
        margin: 0 0 0 25px
    }

    .rtl .footer-menu ul li a {
        margin: 0 25px 0 0
    }

    #footer-menu ul li a:hover {
        color: var(--footerbar-hover-color)
    }

    .is-error #main-wrapper {
        width: 100%
    }

    .is-error #sidebar-wrapper {
        display: none
    }

    .errorWrap {
        color: var(--title-color);
        text-align: center;
        padding: 60px 0
    }

    .errorWrap h3 {
        font-size: 160px;
        color: var(--title-color);
        line-height: 1;
        margin: 0 0 25px
    }

    .errorWrap h4 {
        font-size: 27px;
        color: var(--title-color);
        margin: 0 0 25px
    }

    .errorWrap p {
        color: var(--text-color);
        font-size: 15px;
        margin: 0 0 15px
    }

    .errorWrap a {
        display: inline-block;
        height: 34px;
        background-color: var(--button-bg);
        font-size: 14px;
        color: var(--button-color);
        font-weight: 400;
        line-height: 34px;
        padding: 0 30px;
        margin: 15px 0 0
    }

    .errorWrap a:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-color)
    }

    .cookie-choices-info {
        display: none;
        visibility: hidden;
        opacity: 0
    }

    .cookie-consent {
        display: none;
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 300px;
        background-color: var(--cookie-bg);
        z-index: 1020;
        padding: 20px;
        visibility: hidden;
        opacity: 0;
        border-radius: var(--radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        transition: visibility .35s ease, opacity .35s ease, transform .35s ease
    }

    .rtl .cookie-consent {
        left: unset;
        right: 20px
    }

    .cookie-consent.is-visible {
        visibility: visible;
        opacity: 1
    }

    .consent-text {
        font-size: 14px;
        color: var(--cookie-color);
        margin: 0 0 15px
    }

    .consent-text a {
        color: var(--main-color);
        text-decoration: underline
    }

    .consent-button {
        display: inline-block;
        height: 34px;
        background-color: var(--button-bg);
        font-size: 14px;
        color: var(--button-color);
        font-weight: 400;
        line-height: 34px;
        padding: 0 20px
    }

    .consent-button:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-color)
    }

    #back-top {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 34px;
        height: 34px;
        background-color: var(--button-bg);
        font-size: 24px;
        color: var(--button-color);
        z-index: 50;
        opacity: 0;
        visibility: hidden;
        transition: visibility .17s ease, opacity .17s ease
    }

    .rtl #back-top {
        right: auto;
        left: 20px
    }

    #back-top:before {
        content: '\e5ce';
        font-family: 'Material Icons Round';
        font-weight: 400
    }

    #back-top.show {
        opacity: 1;
        visibility: visible
    }

    #back-top:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-color)
    }

    ins.adsbygoogle-noablate[data-anchor-shown="true"] {
        z-index: 990 !important
    }

    #hidden-widgets {
        display: none;
        visibility: hidden
    }

    .CSS_LIGHTBOX {
        z-index: 999999 !important
    }

    .CSS_LIGHTBOX_BG_MASK {
        background-color: rgba(0, 0, 0, 0.9) !important;
        opacity: 1 !important;
        backdrop-filter: blur(1px)
    }

    .CSS_LIGHTBOX_BTN_CLOSE {
        background: transparent !important;
        top: 10px !important;
        right: 15px !important
    }

    .CSS_LIGHTBOX_BTN_CLOSE:before {
        content: '\e5cd';
        font-family: 'Material Icons Round';
        color: #fff;
        font-size: 24px;
        font-weight: 400
    }

    .CSS_LIGHTBOX_BTN_CLOSE:hover:before {
        opacity: .85
    }

    .rtl .CSS_LIGHTBOX_BTN_CLOSE {
        right: unset !important;
        left: 15px
    }

    .CSS_LIGHTBOX_ATTRIBUTION_INDEX_CONTAINER .CSS_HCONT_CHILDREN_HOLDER>.CSS_LAYOUT_COMPONENT.CSS_HCONT_CHILD:first-child>.CSS_LAYOUT_COMPONENT {
        opacity: 0
    }

    .pbt-ad {
        display: flex;
        align-items: center;
        justify-content: center
    }

    @media only screen and (max-width: 1123px) {

        #outer-wrapper,
        .is-boxed #outer-wrapper,
        .is-boxed .header-header {
            width: 100%;
            max-width: 100%;
            margin: 0
        }

        .row-x1 {
            width: 100%
        }

        #header-wrapper .container,
        #header-ads-wrap .container,
        #ticker-wrapper .container,
        #featured-wrapper .container,
        #content-wrapper .container,
        #footer-ads-wrap .container,
        #footer-wrapper .container {
            padding: 0 20px
        }

        #main-wrapper {
            width: calc(70% - 30px)
        }

        #sidebar-wrapper {
            width: 30%
        }
    }

    @media only screen and (max-width: 880px) {
        #header-wrapper .container {
            padding: 0
        }

        .topbar-wrap {
            display: none
        }

        .header-items {
            flex-wrap: nowrap
        }

        .mobile-menu-toggle {
            display: flex
        }

        #magspot-main-menu {
            display: none
        }

        #slide-menu,
        .overlay {
            display: block
        }

        .nav-active .overlay {
            visibility: visible;
            opacity: 1
        }

        .flex-left {
            overflow: hidden
        }

        .main-logo {
            flex-shrink: 1
        }

        .flex-right {
            padding: 0 0 0 10px
        }

        .rtl .flex-right {
            padding: 0 10px 0 0
        }

        .flex-right,
        .rtl .flex-right {
            position: relative;
            top: unset;
            left: unset;
            right: unset
        }

        .darkmode-toggle {
            margin: 0 !important
        }

        .search-toggle {
            width: auto;
            background-color: var(--header-bg);
            font-size: 26px;
            padding: 0 16px
        }

        #main-search-wrap {
            padding: 0 0 0 20px
        }

        .rtl #main-search-wrap {
            padding: 0 20px 0 0
        }

        #content-wrapper>.container,
        .is-left #content-wrapper>.container {
            flex-direction: column !important;
            justify-content: flex-start
        }

        #main-wrapper,
        #sidebar-wrapper {
            width: 100%
        }

        #sidebar-wrapper {
            margin: 25px 0 0
        }

        .sidebar ul.social-icons {
            grid-template-columns: repeat(4, 1fr)
        }

        .footer-widgets {
            grid-template-columns: 1fr;
            grid-gap: 40px
        }

        #magspot-about-section {
            flex-wrap: wrap;
            flex-direction: column
        }

        .about-section .Image {
            width: 100%;
            flex-direction: column;
            justify-content: center;
            text-align: center
        }

        .footer-info {
            text-align: center;
            margin: 25px 0 0
        }

        .footer-info .title {
            display: none
        }

        .footer-logo {
            padding: 0 !important
        }

        .about-section .LinkList {
            width: 100%;
            justify-content: center;
            margin: 20px 0 0
        }

        .about-section ul.social-icons {
            justify-content: center
        }

        .about-section .social-icons li {
            margin: 10px 5px 0 !important
        }

        .footer-bar {
            height: auto;
            line-height: inherit;
            padding: 25px 0
        }

        .footer-bar .container {
            flex-direction: column-reverse;
            justify-content: center
        }

        .footer-bar .footer-copyright,
        #footer-menu {
            width: 100%;
            text-align: center
        }

        #footer-menu {
            padding: 0 0 15px
        }

        .footer-menu ul {
            justify-content: center
        }

        .footer-menu ul li a {
            display: block;
            margin: 5px 10px 0 !important
        }

        .nav-active #back-top {
            opacity: 0 !important
        }
    }

    @media only screen and (max-width: 680px) {
        .sz-2.is-video:after {
            transform: translate(50%, -50%) scale(1)
        }

        #header-ads-wrap .container,
        #ticker-wrapper .container,
        #content-wrapper .container,
        #footer-ads-wrap .container {
            padding: 0 10px
        }

        .ticker .widget-title .title {
            display: none
        }

        #ticker-wrapper.has-feat .container {
            padding: 0
        }

        .has-feat #ticker .widget {
            padding: 10px 20px;
            border-radius: 0
        }

        #featured-wrapper .container {
            padding: 0
        }

        #featured .widget {
            padding: 0;
            border-radius: 0
        }

        .has-ticker #featured .widget {
            margin: 0
        }

        #featured .widget-content {
            min-height: 220px
        }

        .featured-items {
            grid-template-columns: 1fr !important
        }

        .featured-item.item-0 {
            height: 220px
        }

        .featured-item.item-0 .entry-info {
            padding: 15px !important
        }

        .featured-grid {
            display: flex;
            grid-template-columns: unset;
            grid-gap: 0;
            grid-column: unset !important;
            width: 100%;
            height: 140px;
            overflow: hidden;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch
        }

        .featured-grid .featured-item {
            width: 70%;
            height: 100%;
            flex-shrink: 0
        }

        .featured-grid>div+div {
            margin: 0 0 0 2px
        }

        .rtl .featured-grid>div+div {
            margin: 0 2px 0 0
        }

        .type-feat1 .featured-item.item-1 {
            grid-column: unset
        }

        .featured-items .cs .entry-inner,
        .featured-item .entry-image-wrap {
            border-radius: 0
        }

        .featured-item .entry-title {
            font-size: 15px !important
        }

        .featured-item.item-0 .entry-title {
            font-size: 25px !important
        }

        .featured-grid .entry-meta {
            display: none
        }

        @keyframes slideToLeft {
            0% {
                transform: translate3d(10px, 0, 0)
            }

            100% {
                transform: translate3d(0, 0, 0)
            }
        }

        @keyframes slideToRight {
            0% {
                transform: translate3d(-10px, 0, 0)
            }

            100% {
                transform: translate3d(0, 0, 0)
            }
        }

        .featured-grid .featured-item {
            animation: slideToLeft .5s ease
        }

        .rtl .featured-grid .featured-item {
            animation: slideToRight .5s ease
        }

        .content-section .widget.column-style {
            width: 100%
        }

        .list1-item {
            flex-direction: column
        }

        .list1-item .entry-image-wrap {
            width: 100%;
            height: 200px;
            margin: 0 0 12px !important
        }

        .list1-item .entry-header {
            flex: unset
        }

        .list1-item .entry-excerpt {
            margin: 7px 0 0
        }

        .list1-item .entry-meta {
            margin: 8px 0 0
        }

        .block1-items {
            grid-template-columns: 1fr
        }

        .block1-items .cs .entry-inner {
            height: 200px
        }

        .block1-items .cs .entry-title {
            font-size: 19px
        }

        .block1-list .entry-image-wrap {
            width: 118px;
            height: 78px
        }

        .block2-items {
            grid-template-columns: 1f
        }

        .block2-items .cs .entry-inner {
            height: 200px
        }

        .block2-items .cs .entry-title {
            font-size: 19px
        }

        .block2-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 25px 20px
        }

        .block2-grid .entry-image-wrap {
            height: 130px
        }

        .grid1-items {
            grid-template-columns: 1fr
        }

        .grid1-item .entry-image-wrap {
            height: 200px
        }

        .grid1-item .entry-title {
            font-size: 21px
        }

        .grid2-items {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 25px 20px
        }

        .grid2-item .entry-image-wrap {
            height: 130px;
            margin: 0 0 10px
        }

        .col-item .entry-inner {
            height: 200px
        }

        .col-item:not(.cs) .entry-image-wrap {
            width: 118px;
            height: 78px
        }

        .video-items {
            grid-template-columns: 1fr
        }

        .video-items .cs .entry-inner {
            height: 200px
        }

        .video-items .cs .entry-title {
            font-size: 19px
        }

        .video-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 25px 20px
        }

        .video-grid .entry-image-wrap {
            height: 130px
        }

        .type-video:not(.video-style) .video-grid .entry-title {
            font-size: 15px
        }

        .video-items .cs .is-video:after {
            top: 15px;
            right: 15px;
            transform: scale(1)
        }

        .rtl .video-items .cs .is-video:after {
            left: 15px;
            right: unset
        }

        .p-eh .entry-meta {
            margin: 15px 0 0
        }

        .item-post h1.entry-title {
            font-size: 31px
        }

        .post-body table {
            display: block
        }

        .share-links li:not(.has-span) a,
        .share-links .has-span a:before {
            width: 40px
        }

        .share-links .twitter.has-span a {
            width: 40px;
            justify-content: center
        }

        .share-links .twitter.has-span a:before {
            width: 100%;
            background-color: transparent
        }

        .share-links .twitter span {
            display: none
        }

        .share-links .pinterest-p {
            display: none
        }

        .author-description .author-text,
        .comments .comment-content {
            font-size: 15px
        }

        #blog-pager {
            margin: 25px 0 2px
        }

        .sidebar ul.social-icons {
            grid-template-columns: repeat(2, 1fr)
        }

        .FeaturedPost .entry-inner {
            height: 200px
        }

        .side-item .entry-inner {
            height: 200px
        }

        .side-item:not(.cs) .entry-image-wrap {
            width: 118px;
            height: 78px
        }

        .side3-items {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 25px 20px
        }

        .side3-item .entry-image-wrap {
            height: 130px
        }

        .side3-item .entry-title {
            font-size: 15px
        }

        .errorWrap {
            padding: 15px 15px 30px
        }

        .errorWrap h3 {
            font-size: 130px
        }

        .errorWrap h4 {
            line-height: initial
        }

        .cookie-consent {
            right: 0 !important;
            left: 0 !important;
            bottom: 0;
            width: 100%;
            padding: 20px;
            border-radius: 0
        }

        a.ads-here {
            height: 65px
        }

        .sidebar a.ads-here {
            height: 180px
        }
    }

    @media only screen and (max-width: 480px) {
        .block2-grid .entry-image-wrap {
            height: 115px
        }

        .block2-grid .entry-title {
            font-size: 14px
        }

        .grid2-item .entry-image-wrap {
            height: 115px
        }

        .grid2-item .entry-title {
            font-size: 14px
        }

        .video-grid .entry-image-wrap {
            height: 115px
        }

        .type-video:not(.video-style) .video-grid .entry-title {
            font-size: 14px
        }

        .item-post h1.entry-title {
            font-size: 28px
        }

        .side3-item .entry-title {
            font-size: 14px
        }

        .side3-item .entry-image-wrap {
            height: 115px
        }

        .side3-item .entry-title {
            font-size: 14px
        }
    }

    @media only screen and (max-width: 380px) {
        #featured .widget-content {
            min-height: 220px
        }

        .featured-item.item-0 {
            height: 200px
        }

        .featured-item .entry-title {
            font-size: 14px !important
        }

        .featured-item.item-0 .entry-title {
            font-size: 21px !important
        }

        .featured-grid {
            height: 130px
        }

        .list1-item .entry-image-wrap {
            height: 180px
        }

        .block1-items .cs .entry-inner {
            height: 180px
        }

        .block2-items .cs .entry-inner {
            height: 180px
        }

        .block2-grid .entry-image-wrap {
            height: 100px
        }

        .grid1-item .entry-image-wrap {
            height: 180px
        }

        .grid2-item .entry-image-wrap {
            height: 100px
        }

        .col-item .entry-inner {
            height: 180px
        }

        .video-items .cs .entry-inner {
            height: 180px
        }

        .video-grid .entry-image-wrap {
            height: 100px
        }

        .item-post h1.entry-title {
            font-size: 26px
        }

        .item-post .entry-meta .align-right {
            display: none
        }

        .pbt-toc-inner {
            min-width: 100%
        }

        .share-links span {
            display: none
        }

        .share-links .has-span a {
            width: 40px;
            justify-content: center
        }

        .share-links .has-span a:before {
            width: 100%;
            background-color: transparent
        }

        .FeaturedPost .entry-inner {
            height: 180px
        }

        .side-item .entry-inner {
            height: 180px
        }

        .side3-item .entry-image-wrap {
            height: 100px
        }

        .share-links .pinterest-p {
            display: block
        }
    }

    @media only screen and (max-width: 340px) {
        .featured-grid .featured-item {
            width: 75%
        }

        #slide-menu {
            width: 100%
        }

        .errorWrap h3 {
            font-size: 110px
        }

        .errorWrap h4 {
            font-size: 27px
        }
    }