make google font requests use same scheme as server

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/uYECMKoHcO9x1wdmbyHIm3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/tnj4SB6DNbdaQnsM8CFqBX-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/_VYFx-s824kXq_Ul2BHqYH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/NJ4vxlgWwWbEsv18dAhqnn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/Ks_cVxiCiwUWVsFWFA3Bjn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/ZLqKeelYbATG60EpZBSDy4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/oHi30kwQWvpCWqAhzHcCSIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/rGvHdJnr2l75qb0YND9NyIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/mx9Uck6uB63VIKFYnEMXrYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/77FXFjRbGzN4aCrSFhlh3oX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/isZ-wbCXNKAbnjo6_TwHToX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/UX6i4JxQDm3fVTc1CPuwqoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/jSN2CGVDbcVyCnfJfjSdfIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/PwZc-YbIL414wB9rB1IAPYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/97uahxiqZRoncBaCEI3aW4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0atwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v15/OpXUqTo0UgQQhGj_SFdLWBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v15/1hZf02POANh32k2VkgEoUBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v15/cDKhRaXnQTOVbaoxwdOr9xkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v15/K23cxWVTrIFD6DJsEVi07RkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v15/vSzulfKSK0LLjjfeaxcREhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0fZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0V4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0VBW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Qt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0dDiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0aE8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Ygp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcCwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/uYECMKoHcO9x1wdmbyHIm3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/tnj4SB6DNbdaQnsM8CFqBX-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/_VYFx-s824kXq_Ul2BHqYH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/NJ4vxlgWwWbEsv18dAhqnn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/Ks_cVxiCiwUWVsFWFA3Bjn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/ZLqKeelYbATG60EpZBSDy4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/oHi30kwQWvpCWqAhzHcCSIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/rGvHdJnr2l75qb0YND9NyIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/mx9Uck6uB63VIKFYnEMXrYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/77FXFjRbGzN4aCrSFhlh3oX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/isZ-wbCXNKAbnjo6_TwHToX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/UX6i4JxQDm3fVTc1CPuwqoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/jSN2CGVDbcVyCnfJfjSdfIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/PwZc-YbIL414wB9rB1IAPYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/97uahxiqZRoncBaCEI3aW4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0atwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(http://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(http://fonts.gstatic.com/s/roboto/v15/OpXUqTo0UgQQhGj_SFdLWBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(http://fonts.gstatic.com/s/roboto/v15/1hZf02POANh32k2VkgEoUBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(http://fonts.gstatic.com/s/roboto/v15/cDKhRaXnQTOVbaoxwdOr9xkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(http://fonts.gstatic.com/s/roboto/v15/K23cxWVTrIFD6DJsEVi07RkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(http://fonts.gstatic.com/s/roboto/v15/vSzulfKSK0LLjjfeaxcREhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(http://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(http://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0fZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(http://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0V4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(http://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0VBW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(http://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Qt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(http://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0dDiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(http://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0aE8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(http://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Ygp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(http://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(http://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(http://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(http://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcCwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(http://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(http://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(http://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


Fix spacing

Fix spacing

/* =============
 * Help Menu
 * =============
 */
.help-menu {
  float: left;
  margin: @base-spacing-unit*2.5 @base-spacing-unit;
  width: @base-spacing-unit*2.5;
  padding: 0 @base-spacing-unit*2.5;
  cursor: pointer;
  color: @manatee;
  background-position: center left;

  &.active {
    color: @white;
  }

  &-dropdown.popover.bottom {
    margin: 0;

    .content {
      background-color: transparent;
      border-radius: 0;
      min-width: auto;
      padding: 0;
      left: 100%;
      transform: translate(-110%, 50%);

      &:before, &:after {
        display: none;
      }
    }

    .dropdown-menu {
      left: auto;
      transform: none;
      position: relative;
      border-color: @white;
      border-radius: 2px;
      display: block;
    }
  }
}

/* =============
 * Help Menu
 * =============
 */
.help-menu {
  float: left;
  margin: @base-spacing-unit * 2.5 @base-spacing-unit;
  width: @base-spacing-unit * 2.5;
  padding: 0 @base-spacing-unit * 2.5;
  cursor: pointer;
  color: @manatee;
  background-position: center left;
  &.active {
    color: @white;
  }
  &-dropdown.popover.bottom {
    margin: 0;

    .content {
      background-color: transparent;
      border-radius: 0;
      min-width: auto;
      padding: 0;
      left: 100%;
      transform: translate(-110%, 50%);

      &:before, &:after {
        display: none;
      }
    }

    .dropdown-menu {
      left: auto;
      transform: none;
      position: relative;
      border-color: @white;
      border-radius: 2px;
      display: block;
    }
  }
}


CCE-459 update examples and remove inline styling

// Localization Editor
//
//

//
Case description:

//
The localization tooling will present tabs for each localization language supported. The first and fall back language will be the first tab and will auto-selected. The selected tab is presented with a blue background. The non-selected tabs are presented with white background. The start informs if language is mandatory.

//

//
// Markup:
//    Headline
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 PL

//
 DA

//

//                  MORE
//
//
//

//

//                        IT
//

//

//

//

//

//

//

//                <input name="lastName" type="text" class="form-control input-lg" value="Men Walk On Moon"/>
//

//

//

//
// Pattern 8.1

// Localization editor when selecting item from More menu
//
//

//
More menu:

//
The more Menu dropdown lists more available localization languages. When user selects an item from the More Menu the hidden tab gets highlighted in blue and replaces the MORE label. The arrow is kept next to it to remind user that the selected options is part of the More menu. If there are mandatory fields inside the "More" menu, the label “More” is followed by a star.

//

//
// Markup:
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 DA

//
 NL

//

//                    IT
//
//
//

//

//                            IT
//

//

//                            PL
//

//

//

//

//

//

//

//                <input name="lastName" type="text" class="form-control input-lg" value="Gli uomini camminare sulla Luna">
//

//

//

//
// Pattern 8.2

// Localization editor tabs with error
//
//

//
Error handling Scenario (1):

//
When validation errors happen the content of the tab will show an exclamation mark (!). The outcome of a validation error on the tabs considers:

//
Last selected tab contains error >> display the selected tab in red background and add the exclamation mark.

//
Non-selected tabs contains error >> present the word on the tab in red and add the exclamation mark (this is also valid for the MORE menu).

//

//
// Markup:
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 PL

//
 DA

//

//                  MORE
//
//
//

//

//                        IT
//

//

//

//

//

//

//

//            <input name="lastName" type="text" class="form-control input-lg has-error">
//            This field is required
//

//

//

//
// Pattern 8.3

// Localization editor tabs with error on a selected item from More menu
//
//

//
Error handling Scenario (2):

//
Suppose the last selected tab was an option from the more menu. The recommendation is:

//
If only the selected tab contains error >> display the selected tab in red background

//
If more than one tab from More menu contains error >> reset tab selection and make the primary (first) tab selected. The More menu appears in red to show that there are 2 or more tabs with errors under it.

//

//
// Markup:
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 DA

//
 NL

//

//                    MORE
//
//
//

//

//                            IT
//

//

//

//

//

//

//

//                <input name="lastName" type="text" class="form-control input-lg has-error" value="">
//                  This field is required
//

//

//

//
// Pattern 8.4

// LocalizationExample
//
//
Visual Guidelines

//
// Markup:
//

//

//
//
//
Page level

//
//
//
//
Field level

//
//

//

//

//

//

//

//
//

//

//

//

//
// Pattern 8.5

// Core Navigation stylings
.nav {
	a {
		color: @navigation-links-color;
		&:hover {
			color: @navbar-default-bg
		}
	}
}

.locals-tabs .active :not(.has-error) {
    background-color: @default-blue;
    border-color: @default-blue;
    color: @navbar-default-bg;
}

.locals-tabs .active .has-error,
.locals-tabs .active .has-error .caret {
    background-color: @default-red;
    border-color: @default-red;

}

.locals-tabs__more-tabs{
    border-color: @default-grey-700;
    background-color:  @navbar-default-bg;
}

.locals-tabs__more-menu{
    cursor: pointer;
}

.locals-editor .locals-tabs a{
    width: 100%;
}

.locals-editor .locals-tabs{
    border-bottom-color: @default-grey-700;
}

.locals-editor .locals-tabs .active a,
.locals-editor .locals-tabs .active a:hover,
.locals-editor .locals-tabs .active a:focus{
    font-weight: bold;
}

.locals-editor .locals-tabs li:not(.active){
    border-color: @default-grey-700;
}

.locals-editor .locals-tabs li:last-of-type {
    border-right: 1px solid @default-grey-700;
}

.locals-editor .locals-tabs .locals-tabs__more-tabs li:last-of-type{
    border-right: none;
}

.locals-editor .locals-tabs > li{
    border-top: 1px solid @default-grey-700;
    border-left: 1px solid @default-grey-700;
    border-bottom: 1px solid @default-grey-700;
}

.locals-header .locals-tabs{
    margin-bottom: 0;
}

.locals-editor .locals-tabs .active a.has-error,
.locals-editor .locals-tabs .active a:hover .has-error,
.locals-editor .locals-tabs .active a:focus .has-error{
    background-color: @default-red;
    border-color: @default-red;
    color:  @navbar-default-bg;
}

.locals-tabs .has-error:before{
    content: "! ";
}

.locals-tabs :not(.locals-tabs__more-menu) .is-required:after,
.locals-tabs__more-menu.is-required .locals-tabs__more-span:after{
    content: "*";
}

.locals-header .locals-tabs > :not(.active) > a.has-error:not(:hover){
    background-color: transparent;
    color: @state-danger-text;
}

.locals-editor .form-group{
    margin-top: -1px;
}

.locals-tabs .locals-tabs__more-menu.active .caret,
.locals-tabs .locals-tabs__more-menu.active .has-error .caret{
    border-top-color: @navbar-default-bg;
}

.has-error{
    border-color: @state-danger-border;
}

.locals-editor .inline-hint-text__error,
.locals-tabs .active a.locals-tabs__more-tab.has-error,
.locals-tabs a.locals-tabs__more-tab.has-error{
    color: @state-danger-text;
}

.locals-tabs .locals-tabs__more-menu .locals-tabs__more-tabs{
    background-color: @navbar-default-bg;
    border-color: @default-grey-700;
}

.locals-editor .locals-tabs > li.locals-tabs__more-menu{
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.locals-editor .locals-tabs > li.locals-tabs__more-menu.open{
    border-top-color: @default-grey-700;
    border-right-color: @default-grey-700;
    border-bottom-color: @default-grey-700;
}

.locals-tabs .active .locals-tabs__more-tab:not(.has-error),
.locals-tabs .active a.locals-tabs__more-tab.has-error,
.locals-tabs .active .locals-tabs__more-tab:not(.has-error):hover,
.locals-tabs .active a.locals-tabs__more-tab.has-error:hover  {
    background-color:  @navbar-default-bg;
    font-weight: normal;
}

.locals-tabs .active .locals-tabs__more-tab:not(.has-error),
.locals-tabs .locals-tabs__more-tab:not(.has-error){
    color: @grayish;
}

.locals-tabs .locals-tabs__more-tabs .active .locals-tabs__more-tab:not(.has-error){
    color: @default-blue;
}

// Localization Editor
//
//

//
Case description:

//
The localization tooling will present tabs for each localization language supported. The first and fall back language will be the first tab and will auto-selected. The selected tab is presented with a blue background. The non-selected tabs are presented with white background. The start informs if language is mandatory.

//

//
// Markup:
//    Headline
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 PL

//
 DA

//

//                  MORE
//
//
//

//

//                        IT
//

//

//

//

//

//

//

//                <input name="lastName" type="text" class="form-control input-lg" value="Men Walk On Moon"/>
//

//

//

//
// Pattern 8.1

// Localization editor when selecting item from More menu
//
//

//
More menu:

//
The more Menu dropdown lists more available localization languages. When user selects an item from the More Menu the hidden tab gets highlighted in blue and replaces the MORE label. The arrow is kept next to it to remind user that the selected options is part of the More menu. If there are mandatory fields inside the "More" menu, the label “More” is followed by a star.

//

//
// Markup:
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 DA

//
 NL

//

//                    IT
//
//
//

//

//                            IT
//

//

//                            PL
//

//

//

//

//

//

//

//                <input name="lastName" type="text" class="form-control input-lg" value="Gli uomini camminare sulla Luna">
//

//

//

//
// Pattern 8.2

// Localization editor tabs with error
//
//

//
Error handling Scenario (1):

//
When validation errors happen the content of the tab will show an exclamation mark (!). The outcome of a validation error on the tabs considers:

//
Last selected tab contains error >> display the selected tab in red background and add the exclamation mark.

//
Non-selected tabs contains error >> present the word on the tab in red and add the exclamation mark (this is also valid for the MORE menu).

//

//
// Markup:
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 PL

//
 DA

//

//                  MORE
//
//
//

//

//                        IT
//

//

//

//

//

//

//

//            <input name="lastName" type="text" class="form-control input-lg has-error">
//            This field is required
//

//

//

//
// Pattern 8.3

// Localization editor tabs with error on a selected item from More menu
//
//

//
Error handling Scenario (2):

//
Suppose the last selected tab was an option from the more menu. The recommendation is:

//
If only the selected tab contains error >> display the selected tab in red background

//
If more than one tab from More menu contains error >> reset tab selection and make the primary (first) tab selected. The More menu appears in red to show that there are 2 or more tabs with errors under it.

//

//
// Markup:
//

//

//

//
 EN

//
 BG

//
 DE

//
 FR

//
 DA

//
 NL

//

//                    IT
//
//
//

//

//                            IT
//

//

//

//

//

//

//

//                <input name="lastName" type="text" class="form-control input-lg has-error" value="">
//                  This field is required
//

//

//

//
// Pattern 8.4

// LocalizationExample
//
//
Visual Guidelines

//
// Markup:
//

//

//
//
//
Page level

//
//
//
//
Field level

//
//

//

//

//

//

//

//
//

//

//

//

//
// Pattern 8.5

// Core Navigation stylings
.nav {
	a {
		color: @navigation-links-color;
		&:hover {
			color: @navbar-default-bg
		}
	}
}

.locals-tabs .active :not(.has-error) {
    background-color: @default-blue;
    border-color: @default-blue;
    color: @navbar-default-bg;
}

.locals-tabs .active .has-error,
.locals-tabs .active .has-error .caret {
    background-color: @default-red;
    border-color: @default-red;

}

.locals-tabs__more-tabs{
    border-color: @default-grey-700;
    background-color:  @navbar-default-bg;
}

.locals-tabs__more-menu{
    cursor: pointer;
}

.locals-editor .locals-tabs a{
    width: 100%;
}

.locals-editor .locals-tabs{
    border-bottom-color: @default-grey-700;
}

.locals-editor .locals-tabs .active a,
.locals-editor .locals-tabs .active a:hover,
.locals-editor .locals-tabs .active a:focus{
    font-weight: bold;
}

.locals-editor .locals-tabs li:not(.active){
    border-color: @default-grey-700;
}

.locals-editor .locals-tabs li:last-of-type {
    border-right: 1px solid @default-grey-700;
}

.locals-editor .locals-tabs .locals-tabs__more-tabs li:last-of-type{
    border-right: none;
}

.locals-editor .locals-tabs > li{
    border-top: 1px solid @default-grey-700;
    border-left: 1px solid @default-grey-700;
    border-bottom: 1px solid @default-grey-700;
}

.locals-header .locals-tabs{
    margin-bottom: 0;
}

.locals-editor .locals-tabs .active a.has-error,
.locals-editor .locals-tabs .active a:hover .has-error,
.locals-editor .locals-tabs .active a:focus .has-error{
    background-color: @default-red;
    border-color: @default-red;
    color:  @navbar-default-bg;
}

.locals-tabs .has-error:before{
    content: "! ";
}

.locals-tabs :not(.locals-tabs__more-menu) .is-required:after,
.locals-tabs__more-menu.is-required .locals-tabs__more-span:after{
    content: "*";
}

.locals-header .locals-tabs > :not(.active) > a.has-error:not(:hover){
    background-color: transparent;
    color: @state-danger-text;
}

.locals-editor .form-group{
    margin-top: -1px;
}

.locals-tabs .locals-tabs__more-menu.active .caret,
.locals-tabs .locals-tabs__more-menu.active .has-error .caret{
    border-top-color: @navbar-default-bg;
}

.has-error{
    border-color: @state-danger-border;
}

.locals-editor .inline-hint-text__error,
.locals-tabs .active a.locals-tabs__more-tab.has-error,
.locals-tabs a.locals-tabs__more-tab.has-error{
    color: @state-danger-text;
}

.locals-tabs .locals-tabs__more-menu .locals-tabs__more-tabs{
    background-color: @navbar-default-bg;
    border-color: @default-grey-700;
}

.locals-editor .locals-tabs > li.locals-tabs__more-menu{
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.locals-editor .locals-tabs > li.locals-tabs__more-menu.open{
    border-top-color: @default-grey-700;
    border-right-color: @default-grey-700;
    border-bottom-color: @default-grey-700;
}

.locals-tabs .active .locals-tabs__more-tab:not(.has-error),
.locals-tabs .active a.locals-tabs__more-tab.has-error,
.locals-tabs .active .locals-tabs__more-tab:not(.has-error):hover,
.locals-tabs .active a.locals-tabs__more-tab.has-error:hover  {
    background-color:  @navbar-default-bg;
    font-weight: normal;
}

.locals-tabs .active .locals-tabs__more-tab:not(.has-error),
.locals-tabs .locals-tabs__more-tab:not(.has-error){
    color: @grayish;
}

.locals-tabs .locals-tabs__more-tabs .active .locals-tabs__more-tab:not(.has-error){
    color: @default-blue;
}


CCE-615: align checkbox

CCE-615: align checkbox

// Custom Checkboxes
//
// Checkboxes adhere to typical use; when multiple selections for an item are available. Check Boxes should be placed in proximity to the value needing selection(s).
//
// Markup:
//

//  <input type="checkbox" id="optionsCheck1" value="optionc1" checked>
//  Check me out
//

//
// Component 4.3

@checkbox-size: 23px;
@checkbox-border-width: 4.5px;

.checkbox{
    position: relative;
    padding-left: @checkbox-size + 10;
    line-height: @checkbox-size;
    margin-bottom: 14px;
    min-height: @checkbox-size;

    input{
        opacity: 0;
        position: absolute!important;
        height: 0;
        width: 0;
        border: 0;
        padding: 0;
        margin: 0;

        &:checked + label{

            &:before{
                position: absolute;
                top: 0;
                left: 0;
                width: @checkbox-size;
                height: @checkbox-size ;
                background:  @default-blue;
                border-radius: 0px;
                content: "";
                display: inline-block;
                font-family: 'Glyphicons Halflings';
                color: #fff;
                line-height: 13px;
                border: @checkbox-border-width solid @default-blue;
            }
        }

        &:disabled + label{

            &:before{
                opacity: 0.3;
            }
        }

        &:active + label,
        &:focus + label {
            &:before {
                box-shadow: 0 0 10px @default-blue;
                border-color:  @default-blue;
            }
        }

        &:active:checked + label,
        &:focus:checked + label {
            &:before {
                box-shadow: 0 0 10px @default-blue;
            }
        }

    }

    label{
        &:before{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            display: block;
            width: @checkbox-size;
            height: @checkbox-size ;
            background: #fff;
            border-radius: 0px;
            border: @checkbox-border-width solid @dark-blue;
        }

    }

    .note {
        font-size: 12px;
    }
}

//Checkbox label <- Needs to be merged into the code ontop
.checkbox{

    input[type=checkbox]{
        margin-left: 0;
        position: relative;
        width: 10%
    }

    label{
        display:inline-block;
        padding-left: 0;
        width: auto;
    }

    .note{ // - What's that? Required?
        font-size: 10px;
        margin-top: 5px;
        color:@dark-grey;
    }

}

// Custom Checkboxes
//
// Checkboxes adhere to typical use; when multiple selections for an item are available. Check Boxes should be placed in proximity to the value needing selection(s).
//
// Markup:
//

//  <input type="checkbox" id="optionsCheck1" value="optionc1" checked>
//  Check me out
//

//
// Component 4.3

@checkbox-size: 23px;
@checkbox-border-width: 3px;

.checkbox{
    position: relative;
    padding-left: @checkbox-size + 10;
    line-height: @checkbox-size;
    margin-bottom: 14px;
    min-height: @checkbox-size;

    input{
        opacity: 0;
        position: absolute!important;
        height: 0;
        width: 0;
        border: 0;
        padding: 0;
        margin: 0;

        &:checked + label{

            &:before{
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                display: block;
                width: @checkbox-size;
                height: @checkbox-size ;
                background:  @default-blue;
                border-radius: 0px;
                content: "";
                display: inline-block;
                font-family: 'Glyphicons Halflings';
                color: #fff;
                line-height: 18px;
                border: @checkbox-border-width solid @default-blue;
            }
        }

        &:disabled + label{

            &:before{
                opacity: 0.3;
            }
        }

        &:active + label,
        &:focus + label {
            &:before {
                box-shadow: 0 0 10px @default-blue;
                border-color:  @default-blue;
            }
        }

        &:active:checked + label,
        &:focus:checked + label {
            &:before {
                box-shadow: 0 0 10px @default-blue;
            }
        }

    }

    label{
        &:before{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            display: block;
            width: @checkbox-size;
            height: @checkbox-size ;
            background: #fff;
            border-radius: 0px;
            border: @checkbox-border-width solid @dark-blue;
        }

    }

    .note {
        font-size: 12px;
    }
}

//Checkbox label <- Needs to be merged into the code ontop
.checkbox{

    input[type=checkbox]{
        margin-left: 0;
        position: relative;
        width: 10%
    }

    label{
        display:inline-block;
        padding-left: 0;
        width: auto;
    }

    .note{ // - What's that? Required?
        font-size: 10px;
        margin-top: 5px;
        color:@dark-grey;
    }

}


Remove useless comment bloack

Remove useless comment bloack

/*!
  Path 2.0 Flyout Menu using CSS
  Contributed to Path by Tunghsiao Liu
  sparanoid.com
*/
/*!
*/

// Basic reset
p, hr, pre, blockquote,
ol, ul, li, dl, dt, dd,
a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, i, b, u, span, br, wbr,
h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}

:root {
  padding: 60px;
  font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #f9f4f0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@rate: 18deg;

@d1: (@rate * 0);
@d2: (@rate * 1);
@d3: (@rate * 2);
@d4: (@rate * 3);
@d5: (@rate * 4);
@d6: (@rate * 5);

.animation (@var) {
  -webkit-animation: @arguments;
     -moz-animation: @arguments;
      -ms-animation: @arguments;
       -o-animation: @arguments;
          animation: @arguments;
}

.animation-delay (@var) {
  -webkit-animation-delay: @arguments;
     -moz-animation-delay: @arguments;
      -ms-animation-delay: @arguments;
       -o-animation-delay: @arguments;
          animation-delay: @arguments;
}

.transform (@var) {
  -webkit-transform: @arguments;
     -moz-transform: @arguments;
      -ms-transform: @arguments;
       -o-transform: @arguments;
          transform: @arguments;
}

.transition (@var) {
  -webkit-transition: @arguments;
     -moz-transition: @arguments;
      -ms-transition: @arguments;
       -o-transition: @arguments;
          transition: @arguments;
}

.testfield {
  width: 210px;
  margin: 0 auto;
  //background: #fff;

  h1 {
    padding: 7px 10px;
    margin: 20px 0 10px;
    font-size: 12px;
    line-height: 1.6;
    @color: #6d492a;
    color: fade(@color, 80%);
    text-shadow: #fff 0 1px 1px;
    background: #f1e7de;
    border: 1px solid #d3bfae;
    border-radius: 3px;
    box-shadow: inset #fff 0 1px 0 0;

    a {
      color: #6d492a;
      text-decoration: none;
      border-bottom: 1px dotted #d3bfae;

      &:hover {
        border-color: #6d492a;
      }
    }
  }

  .flyout-wrap {
    position: relative;
    height: 191px;

    .flyout {
      position: relative;
      margin: 0 0 1px 6px;
      line-height: 0;

      & > li {
        position: absolute;
        display: block;
        height: 170px;
        background: yellow;
        -webkit-transform-origin: (25px / 2) bottom;
           -moz-transform-origin: (25px / 2) bottom;
                transform-origin: (25px / 2) bottom;
        &:nth-of-type(1) { .transform(rotate(@d1)); }
        &:nth-of-type(2) { .transform(rotate(@d2)); }
        &:nth-of-type(3) { .transform(rotate(@d3)); }
        &:nth-of-type(4) { .transform(rotate(@d4)); }
        &:nth-of-type(5) { .transform(rotate(@d5)); }
        &:nth-of-type(6) { .transform(rotate(@d6)); }

        a {
          position: absolute;
          display: block;
          width:  26px;
          height: 26px;
          overflow: hidden;
          text-indent: -99999px;
          background: #444;
          border: 3px solid #fff;
          border-radius: 50%;
          box-shadow: rgba(0, 0, 0, .4) 0 0 5px 0, rgba(0, 0, 0, .2) 0 0 0 1px, inset rgba(0, 0, 0, .5) 0 0 2px 0;
          -webkit-backface-visibility: hidden;

          &:active {
            background: #000;
            border-color: #555;

            span {
              opacity: .3;
            }
          }

          span {
            display: block;
            width:  26px;
            height: 26px;
            background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'><path fill='#fff' d='M11.045,9.879l1.906,6.114l-4.949-3.791L3.059,16l1.9-6.117L0,6.114l6.123,0.013L7.998,0l1.879,6.12L16,6.104L11.045,9.879z'/></svg>") no-repeat center center;
            background-size: 16px 16px;
            // -webkit-mask-image: url(star.svg);
          }
        }
      }
    }

    // triggers
    // LESS doesn't support loops and parametric mixins very well,
    // a workaround solution: use Textmate
    .flyout-init li                                 { display: none; }
    .flyout.expand li a                             { top: 10px;  .animation(expand .6s ease 1 backwards);         }
    .flyout li a                                    { top: 150px; .animation(contract .35s ease-out 1 backwards); }
    .flyout.fade li a.clicked                       { top: 10px;  .animation(clicked .5s ease-out 1 forwards);    }
    .flyout.fade li a:not(.clicked)                 { top: 10px;  .animation(fade .5s ease-out 1 forwards);
                                                      span { opacity: .1; .transition(opacity .3s ease); }
                                                    }

    .flyout.fade li a:not(.clicked) span            { opacity: .1; -webkit-transition: opacity 1.5s ease; }
    .flyout li:nth-of-type(1) a                     { .animation-delay(.20s); }
    .flyout li:nth-of-type(2) a                     { .animation-delay(.16s); }
    .flyout li:nth-of-type(3) a                     { .animation-delay(.12s); }
    .flyout li:nth-of-type(4) a                     { .animation-delay(.08s); }
    .flyout li:nth-of-type(5) a                     { .animation-delay(.04s); }
    .flyout li:nth-of-type(6) a                     { .animation-delay(.00s); }
    .flyout li:nth-of-type(1) a:not(.clicked) span  { .animation(spin1-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(2) a:not(.clicked) span  { .animation(spin2-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(3) a:not(.clicked) span  { .animation(spin3-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(4) a:not(.clicked) span  { .animation(spin4-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(5) a:not(.clicked) span  { .animation(spin5-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(6) a:not(.clicked) span  { .animation(spin6-contract .9s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(1) a              { .animation-delay(.00s); }
    .flyout.expand li:nth-of-type(2) a              { .animation-delay(.04s); }
    .flyout.expand li:nth-of-type(3) a              { .animation-delay(.08s); }
    .flyout.expand li:nth-of-type(4) a              { .animation-delay(.12s); }
    .flyout.expand li:nth-of-type(5) a              { .animation-delay(.16s); }
    .flyout.expand li:nth-of-type(6) a              { .animation-delay(.20s); }
    .flyout.expand li:nth-of-type(1) a span         { .transform(rotate(-@d1)); .animation(spin1-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(2) a span         { .transform(rotate(-@d2)); .animation(spin2-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(3) a span         { .transform(rotate(-@d3)); .animation(spin3-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(4) a span         { .transform(rotate(-@d4)); .animation(spin4-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(5) a span         { .transform(rotate(-@d5)); .animation(spin5-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(6) a span         { .transform(rotate(-@d6)); .animation(spin6-expand .6s ease-out 1 backwards); }
    .flyout.fade li:nth-of-type(1) a.clicked span   { .transform(rotate(-@d1)); }
    .flyout.fade li:nth-of-type(2) a.clicked span   { .transform(rotate(-@d2)); }
    .flyout.fade li:nth-of-type(3) a.clicked span   { .transform(rotate(-@d3)); }
    .flyout.fade li:nth-of-type(4) a.clicked span   { .transform(rotate(-@d4)); }
    .flyout.fade li:nth-of-type(5) a.clicked span   { .transform(rotate(-@d5)); }
    .flyout.fade li:nth-of-type(6) a.clicked span   { .transform(rotate(-@d6)); }

    .flyout-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 9999;
      width:  36px;
      height: 36px;
      overflow: hidden;
      text-indent: -99999px;
      background: #f76f54;
      background: -webkit-linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
      background:    -moz-linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
      background:     -ms-linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
      background:      -o-linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
      background:         linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
      border: 4px solid #fff;
      border-radius: 50%;
      outline: none;
      box-shadow: rgba(0, 0, 0, .3) 0 3px 8px 0, rgba(0, 0, 0, .2) 0 0 0 1px, inset rgba(0, 0, 0, .3) 0 0 0 1px, inset rgba(255, 255, 255, .3) 0 1px 0 1px;

      &:hover {
        // never mind
      }

      span {
        display: block;
        width:  36px;
        height: 36px;
        // background: url(cross.svg) no-repeat center center;
        background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px'><g><path fill='#fff' d='M20,11.402c0,0.453-0.367,0.82-0.822,0.82H0.82c-0.453,0-0.82-0.367-0.82-0.82V8.598 c0-0.454,0.367-0.821,0.82-0.821h18.357C19.633,7.776,20,8.144,20,8.598V11.402z'/><path fill='#fff' d='M8.598,20c-0.453,0-0.821-0.367-0.821-0.82V0.821c0-0.452,0.368-0.82,0.821-0.82h2.804 c0.453,0,0.82,0.368,0.82,0.82V19.18c0,0.453-0.367,0.82-0.82,0.82H8.598z'/></g></svg>") no-repeat center center;
        -webkit-transition: -webkit-transform .4s ease;
           -moz-transition:    -moz-transform .4s ease;
                transition:         transform .4s ease;
      }
    }
      .flyout-btn.btn-rotate span {
        .transform(rotate(-135deg));
      }

    .ani-expand {
      0%   { top: 150px; }
      50%  { top: -10px; }
      70%  { top: 15px; }
      100% { top: 10px; }
    }
    .ani-contract {
      0%   { top: 10px; }
      40%  { top: -25px; }
      100% { top: 150px; }
    }
    .ani-clicked {
      0%   { opacity: 1; -webkit-transform: scale(1); }
      100% { opacity: 0; -webkit-transform: scale(5); }
    }
    @-webkit-keyframes expand   { .ani-expand }
       @-moz-keyframes expand   { .ani-expand }
    @-webkit-keyframes contract { .ani-contract }
       @-moz-keyframes contract { .ani-contract }

    // a small trick
    @-webkit-keyframes clicked  {
      0%   { -webkit-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                                          top: 10px; }
      99%  { -webkit-transform: scale(6); opacity: 0; top: 150px; }
      100% { -webkit-transform: scale(0); }
    }
    @-moz-keyframes clicked  {
      0%   { -moz-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                                       top: 10px; }
      99%  { -moz-transform: scale(6); opacity: 0; top: 150px; }
      100% { -moz-transform: scale(0); }
    }

    @-webkit-keyframes fade  {
      0%   { -webkit-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                              opacity: 0; top: 10px; }
      99%  { -webkit-transform: scale(0);             top: 150px; }
      100% { -webkit-transform: scale(0); }
    }
    @-moz-keyframes fade  {
      0%   { -moz-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                           opacity: 0; top: 10px; }
      99%  { -moz-transform: scale(0);             top: 150px; }
      100% { -moz-transform: scale(0); }
    }

    .ani-spin1-expand   { 0% { .transform(rotate((0 - @d1))); } 60% { .transform(rotate((-360deg - @d1))); } 100% { .transform(rotate((-360deg - @d1))); } }
    .ani-spin2-expand   { 0% { .transform(rotate((0 - @d2))); } 60% { .transform(rotate((-360deg - @d2))); } 100% { .transform(rotate((-360deg - @d2))); } }
    .ani-spin3-expand   { 0% { .transform(rotate((0 - @d3))); } 60% { .transform(rotate((-360deg - @d3))); } 100% { .transform(rotate((-360deg - @d3))); } }
    .ani-spin4-expand   { 0% { .transform(rotate((0 - @d4))); } 60% { .transform(rotate((-360deg - @d4))); } 100% { .transform(rotate((-360deg - @d4))); } }
    .ani-spin5-expand   { 0% { .transform(rotate((0 - @d5))); } 60% { .transform(rotate((-360deg - @d5))); } 100% { .transform(rotate((-360deg - @d5))); } }
    .ani-spin6-expand   { 0% { .transform(rotate((0 - @d6))); } 60% { .transform(rotate((-360deg - @d6))); } 100% { .transform(rotate((-360deg - @d6))); } }
    .ani-spin1-contract { 0% { .transform(rotate((0 - @d1))); } 50% { .transform(rotate( 360deg)); }         100% { .transform(rotate( 360deg)); } }
    .ani-spin2-contract { 0% { .transform(rotate((0 - @d2))); } 50% { .transform(rotate( 360deg)); }         100% { .transform(rotate( 360deg)); } }
    .ani-spin3-contract { 0% { .transform(rotate((0 - @d3))); } 50% { .transform(rotate( 360deg)); }         100% { .transform(rotate( 360deg)); } }
    .ani-spin4-contract { 0% { .transform(rotate((0 - @d4))); } 50% { .transform(rotate( 360deg)); }         100% { .transform(rotate( 360deg)); } }
    .ani-spin5-contract { 0% { .transform(rotate((0 - @d5))); } 50% { .transform(rotate( 360deg)); }         100% { .transform(rotate( 360deg)); } }
    .ani-spin6-contract { 0% { .transform(rotate((0 - @d6))); } 50% { .transform(rotate( 360deg)); }         100% { .transform(rotate( 360deg)); } }

    @-webkit-keyframes spin1-expand   { .ani-spin1-expand }
    @-webkit-keyframes spin2-expand   { .ani-spin2-expand }
    @-webkit-keyframes spin3-expand   { .ani-spin3-expand }
    @-webkit-keyframes spin4-expand   { .ani-spin4-expand }
    @-webkit-keyframes spin5-expand   { .ani-spin5-expand }
    @-webkit-keyframes spin6-expand   { .ani-spin6-expand }
       @-moz-keyframes spin1-expand   { .ani-spin1-expand }
       @-moz-keyframes spin2-expand   { .ani-spin2-expand }
       @-moz-keyframes spin3-expand   { .ani-spin3-expand }
       @-moz-keyframes spin4-expand   { .ani-spin4-expand }
       @-moz-keyframes spin5-expand   { .ani-spin5-expand }
       @-moz-keyframes spin6-expand   { .ani-spin6-expand }
    @-webkit-keyframes spin1-contract { .ani-spin1-contract }
    @-webkit-keyframes spin2-contract { .ani-spin2-contract }
    @-webkit-keyframes spin3-contract { .ani-spin3-contract }
    @-webkit-keyframes spin4-contract { .ani-spin4-contract }
    @-webkit-keyframes spin5-contract { .ani-spin5-contract }
    @-webkit-keyframes spin6-contract { .ani-spin6-contract }
       @-moz-keyframes spin1-contract { .ani-spin1-contract }
       @-moz-keyframes spin2-contract { .ani-spin2-contract }
       @-moz-keyframes spin3-contract { .ani-spin3-contract }
       @-moz-keyframes spin4-contract { .ani-spin4-contract }
       @-moz-keyframes spin5-contract { .ani-spin5-contract }
       @-moz-keyframes spin6-contract { .ani-spin6-contract }
  }
}


lined up the templates header with the search bar. Need to kill big space bellow it next