HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<style>
body {
font-family: Roboto, sans-serif;
/*color: transparent;*/
background-color: #F0F0F0;
margin: 0;
}
[hidden],
button,
canvas,
img,
input[type^=text],
select,
svg,
template {
display: none;
}
html,
body {
height: 100%;
}
html {
font-size: 15px;
line-height: 20px;
}
body {
font-size: 1.000rem;
line-height: 1.333rem;
margin: 0;
}
/*.page {
visibility: hidden;
opacity: 0;
}*/
@media only screen {
html {
font-size: 12px;
}
}
@media only screen and (max-width:40em) {
html {
font-size: 12px;
}
}
@media only screen and (min-width:40.063em) {
html {
font-size: 12px;
}
}
@media only screen and (min-width:40.063em) and (max-width:64em) {
html {
font-size: 15px;
}
}
@media only screen and (min-width:64.063em) {
html {
font-size: 15px;
}
}
@media only screen and (min-width:64.063em) and (max-width:90em) {
html {
font-size: 15px;
}
}
@media only screen and (min-width:90.063em) {
html {
font-size: 15px;
}
}
@media only screen and (min-width:90.063em) and (max-width:120em) {
html {
font-size: 18px;
}
}
@media only screen and (min-width:120.063em) {
html {
font-size: 18px;
}
}
</style>
<noscript>
<link rel="stylesheet" href="https://englishextra.github.io/libs/sitemap/css/bundle.min.css" />
<style>
.page {
visibility: visible;
opacity: 1;
}
</style>
</noscript>
</head>
<body>
<!-- https://haltersweb.github.io/Accessibility/svg.html --><svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" focusable="false">
<defs>
<symbol id="ui-icon-Up" viewBox="0 0 96 96">
<path d="M66.5,46.4l-1.8,1.8L49.3,32.8V68h-2.5V32.8L31.3,48.2l-1.8-1.8L48,28L66.5,46.4z"></path>
</symbol>
<symbol id="ui-icon-Like" viewBox="0 0 96 96">
<path d="M64.3,42.9c0.5,0,1,0.1,1.4,0.3c0.5,0.2,0.9,0.5,1.2,0.8c0.3,0.3,0.6,0.8,0.8,1.2c0.2,0.5,0.3,1,0.3,1.5 c0,0.4-0.1,0.8-0.2,1.2l-5,15.4c-0.1,0.4-0.3,0.7-0.5,1.1s-0.5,0.6-0.8,0.8c-0.3,0.2-0.7,0.4-1,0.5C60,65.9,59.7,66,59.3,66h-10 c-2.3,0-4.6-0.5-6.7-1.4c-0.9-0.4-1.9-0.7-2.8-0.9c-0.9-0.2-1.9-0.3-2.9-0.3H28v-18h8.1c0.8,0,1.6-0.2,2.4-0.5 c0.7-0.3,1.4-0.8,2-1.4l12.1-12.5c0.3-0.3,0.7-0.6,1-0.8c0.3-0.2,0.7-0.3,1.2-0.3c0.4,0,0.8,0.1,1.2,0.3s0.7,0.4,1,0.7 c0.3,0.3,0.5,0.6,0.7,1c0.2,0.4,0.2,0.8,0.2,1.2c0,1.1-0.1,2.1-0.4,3.1c-0.2,1-0.6,2-1,2.9c-0.3,0.6-0.5,1.2-0.7,1.8 s-0.3,1.2-0.4,1.9L64.3,42.9L64.3,42.9z M59.3,63.4c0.3,0,0.5-0.1,0.7-0.2c0.2-0.2,0.4-0.4,0.5-0.6c0.1-0.2,0.2-0.5,0.4-1.1 c0.2-0.5,0.4-1.2,0.6-1.9c0.2-0.8,0.5-1.6,0.8-2.5c0.3-0.9,0.6-1.8,0.9-2.7c0.3-0.9,0.6-1.8,0.9-2.7c0.3-0.9,0.5-1.7,0.8-2.4 c0.2-0.7,0.4-1.3,0.5-1.7c0.1-0.4,0.2-0.7,0.2-0.8c0-0.3-0.1-0.6-0.4-0.9c-0.2-0.3-0.5-0.4-0.9-0.4H53c0-0.7,0-1.4,0-2 s0.1-1.2,0.2-1.8s0.2-1.2,0.4-1.7c0.2-0.6,0.4-1.2,0.7-1.8c0.4-0.8,0.6-1.6,0.8-2.4c0.2-0.8,0.3-1.7,0.3-2.5c0-0.2-0.1-0.3-0.2-0.5 c-0.1-0.1-0.3-0.2-0.4-0.2c-0.1,0-0.1,0-0.2,0.1l-0.2,0.2L42.3,45.4c-0.4,0.4-0.9,0.8-1.3,1.1c-0.5,0.3-1,0.6-1.5,0.8 c-1,0.5-2.2,0.7-3.3,0.7h-5.6v12.9h6.2c2.3,0,4.6,0.5,6.7,1.4c1.9,0.8,3.8,1.2,5.8,1.2L59.3,63.4L59.3,63.4z"></path>
</symbol>
<symbol id="ui-icon-Share" viewBox="0 0 96 96">
<path d="M65.1,54c0.4,0.3,0.8,0.6,1.2,1c0.4,0.4,0.7,0.8,0.9,1.3c0.2,0.5,0.4,0.9,0.6,1.4c0.1,0.5,0.2,1,0.2,1.5 c0,0.9-0.2,1.7-0.5,2.4c-0.3,0.8-0.8,1.4-1.3,2c-0.6,0.6-1.2,1-2,1.3c-0.8,0.3-1.6,0.5-2.4,0.5c-1.2,0-2.3-0.3-3.3-1 c-1.5,1.1-3.1,2-4.9,2.6S49.9,68,48,68c-1.9,0-3.7-0.3-5.5-0.9s-3.4-1.4-4.9-2.6c-1,0.6-2.1,1-3.3,1c-0.9,0-1.7-0.2-2.4-0.5 s-1.4-0.8-2-1.3c-0.6-0.6-1-1.2-1.3-2c-0.3-0.8-0.5-1.6-0.5-2.4c0-0.5,0.1-1,0.2-1.5c0.1-0.5,0.3-1,0.6-1.4c0.2-0.5,0.6-0.9,0.9-1.3 c0.4-0.4,0.8-0.7,1.2-1c-0.1-0.6-0.2-1.2-0.3-1.7c-0.1-0.6-0.1-1.2-0.1-1.7c0-1.8,0.3-3.5,0.8-5.2c0.5-1.7,1.3-3.2,2.3-4.7 c1-1.4,2.2-2.7,3.5-3.8c1.4-1.1,2.9-2,4.6-2.6c0-0.8,0.2-1.6,0.5-2.4s0.8-1.4,1.3-2c0.6-0.6,1.2-1,2-1.3c0.8-0.3,1.6-0.5,2.4-0.5 c0.8,0,1.6,0.2,2.4,0.5s1.4,0.8,2,1.3c0.6,0.6,1,1.2,1.3,2s0.5,1.5,0.5,2.4c1.7,0.6,3.2,1.5,4.6,2.6c1.4,1.1,2.6,2.4,3.5,3.8 c1,1.4,1.7,3,2.3,4.7c0.5,1.7,0.8,3.4,0.8,5.2c0,0.6,0,1.2-0.1,1.7C65.4,52.8,65.3,53.4,65.1,54L65.1,54z M48,30.5 c-0.5,0-1,0.1-1.5,0.3s-0.9,0.5-1.2,0.8c-0.3,0.3-0.6,0.7-0.8,1.2c-0.2,0.5-0.3,0.9-0.3,1.5c0,0.5,0.1,1,0.3,1.5 c0.2,0.5,0.5,0.9,0.8,1.2c0.3,0.3,0.7,0.6,1.2,0.8S47.5,38,48,38s1-0.1,1.5-0.3c0.5-0.2,0.9-0.5,1.2-0.8c0.3-0.3,0.6-0.7,0.8-1.2 c0.2-0.5,0.3-0.9,0.3-1.5c0-0.5-0.1-1-0.3-1.5c-0.2-0.5-0.5-0.9-0.8-1.2c-0.3-0.3-0.7-0.6-1.2-0.8S48.5,30.5,48,30.5z M30.5,59.3 c0,0.5,0.1,1,0.3,1.5c0.2,0.5,0.5,0.9,0.8,1.2c0.3,0.3,0.7,0.6,1.2,0.8c0.5,0.2,0.9,0.3,1.5,0.3c0.5,0,1-0.1,1.5-0.3 s0.9-0.5,1.2-0.8s0.6-0.7,0.8-1.2s0.3-0.9,0.3-1.5s-0.1-1-0.3-1.5s-0.5-0.9-0.8-1.2s-0.7-0.6-1.2-0.8s-0.9-0.3-1.5-0.3 c-0.5,0-1,0.1-1.5,0.3c-0.5,0.2-0.9,0.5-1.2,0.8c-0.3,0.3-0.6,0.7-0.8,1.2C30.6,58.2,30.5,58.7,30.5,59.3z M48,65.5 c1.5,0,3-0.2,4.5-0.7s2.8-1.1,4.1-2c-0.4-0.5-0.6-1.1-0.8-1.7c-0.2-0.6-0.3-1.2-0.3-1.8c0-0.9,0.2-1.7,0.5-2.4 c0.3-0.8,0.8-1.4,1.3-2c0.6-0.6,1.2-1,2-1.3c0.8-0.3,1.6-0.5,2.4-0.5c0.2,0,0.3,0,0.5,0c0.2,0,0.3,0,0.5,0.1 c0.2-0.9,0.2-1.7,0.2-2.6c0-1.5-0.2-3-0.7-4.4c-0.4-1.4-1.1-2.7-1.9-3.9c-0.8-1.2-1.8-2.3-2.9-3.2c-1.1-0.9-2.4-1.7-3.8-2.3 c-0.2,0.6-0.6,1.1-0.9,1.6c-0.4,0.5-0.9,0.9-1.4,1.2s-1.1,0.6-1.6,0.8c-0.6,0.2-1.2,0.3-1.8,0.3c-0.6,0-1.2-0.1-1.8-0.3 c-0.6-0.2-1.1-0.4-1.6-0.8c-0.5-0.3-1-0.7-1.4-1.2c-0.4-0.5-0.7-1-0.9-1.6c-1.4,0.6-2.7,1.4-3.8,2.3c-1.1,0.9-2.1,2-2.9,3.2 s-1.4,2.5-1.9,3.9C33.2,47.5,33,49,33,50.5c0,0.9,0.1,1.7,0.2,2.6c0.9-0.2,1.8-0.1,2.7,0.2c0.9,0.3,1.7,0.7,2.3,1.3 c0.7,0.6,1.2,1.3,1.6,2.1s0.6,1.7,0.6,2.7c0,0.6-0.1,1.2-0.3,1.8c-0.2,0.6-0.5,1.2-0.8,1.7c1.3,0.9,2.6,1.6,4.1,2 C45,65.3,46.5,65.5,48,65.5L48,65.5z M61.7,63c0.5,0,1-0.1,1.5-0.3c0.5-0.2,0.9-0.5,1.2-0.8s0.6-0.7,0.8-1.2 c0.2-0.5,0.3-0.9,0.3-1.5s-0.1-1-0.3-1.5c-0.2-0.5-0.5-0.9-0.8-1.2s-0.7-0.6-1.2-0.8c-0.5-0.2-0.9-0.3-1.5-0.3c-0.5,0-1,0.1-1.5,0.3 c-0.5,0.2-0.9,0.5-1.2,0.8c-0.3,0.3-0.6,0.7-0.8,1.2c-0.2,0.5-0.3,0.9-0.3,1.5c0,0.5,0.1,1,0.3,1.5c0.2,0.5,0.5,0.9,0.8,1.2 c0.3,0.3,0.7,0.6,1.2,0.8C60.7,62.9,61.2,63,61.7,63z"></path>
</symbol>
<symbol id="ui-icon-Search" viewBox="0 0 32 32">
<path d="M21 0q1.516 0 2.922 0.391t2.625 1.109 2.227 1.727 1.727 2.227 1.109 2.625 0.391 2.922-0.391 2.922-1.109 2.625-1.727 2.227-2.227 1.727-2.625 1.109-2.922 0.391q-1.953 0-3.742-0.656t-3.289-1.891l-12.266 12.25q-0.297 0.297-0.703 0.297t-0.703-0.297-0.297-0.703 0.297-0.703l12.25-12.266q-1.234-1.5-1.891-3.289t-0.656-3.742q0-1.516 0.391-2.922t1.109-2.625 1.727-2.227 2.227-1.727 2.625-1.109 2.922-0.391zM21 20q1.859 0 3.5-0.711t2.859-1.93 1.93-2.859 0.711-3.5-0.711-3.5-1.93-2.859-2.859-1.93-3.5-0.711-3.5 0.711-2.859 1.93-1.93 2.859-0.711 3.5 0.711 3.5 1.93 2.859 2.859 1.93 3.5 0.711z"></path>
</symbol>
<symbol id="ui-icon-ChevronDown" viewBox="0 0 32 32">
<path d="M16 21.85l14.568-14.564 1.432 1.432-16 15.996-16-15.996 1.432-1.432 14.568 14.564z"></path>
</symbol>
<symbol id="ui-icon-ChevronDownSmall" viewBox="0 0 32 32">
<path d="M28.191 6.107l3.809 3.791-16 15.995-16-15.995 3.809-3.791 12.191 12.189 12.191-12.189z"></path>
</symbol>
<symbol id="ui-icon-GlobalNavButton" viewBox="0 0 96 96">
<path d="M68,39.4H28V37h40V39.4z M68,59H28v-2.4h40V59z M68,49.2H28v-2.4h40V49.2z"></path>
</symbol>
<symbol id="ui-icon-More" viewBox="0 0 96 96">
<path d="M30.9,45.1c0.4,0,0.8,0.1,1.1,0.2c0.3,0.1,0.6,0.4,0.9,0.6s0.5,0.6,0.6,0.9s0.2,0.7,0.2,1.1s-0.1,0.8-0.2,1.1 c-0.1,0.3-0.4,0.6-0.6,0.9s-0.6,0.5-0.9,0.6c-0.3,0.1-0.7,0.2-1.1,0.2s-0.8-0.1-1.1-0.2c-0.3-0.1-0.6-0.4-0.9-0.6s-0.5-0.6-0.6-0.9 S28,48.4,28,48s0.1-0.8,0.2-1.1c0.1-0.3,0.4-0.6,0.6-0.9c0.3-0.3,0.6-0.5,0.9-0.6S30.5,45.1,30.9,45.1z M48,45.1 c0.4,0,0.8,0.1,1.1,0.2c0.3,0.1,0.6,0.4,0.9,0.6s0.5,0.6,0.6,0.9s0.2,0.7,0.2,1.1s-0.1,0.8-0.2,1.1c-0.1,0.3-0.4,0.6-0.6,0.9 s-0.6,0.5-0.9,0.6c-0.3,0.1-0.7,0.2-1.1,0.2s-0.8-0.1-1.1-0.2c-0.3-0.1-0.6-0.4-0.9-0.6c-0.3-0.3-0.5-0.6-0.6-0.9s-0.2-0.7-0.2-1.1 s0.1-0.8,0.2-1.1c0.1-0.3,0.4-0.6,0.6-0.9c0.3-0.3,0.6-0.5,0.9-0.6S47.6,45.1,48,45.1z M65.1,45.1c0.4,0,0.8,0.1,1.1,0.2 c0.3,0.1,0.6,0.4,0.9,0.6c0.3,0.3,0.5,0.6,0.6,0.9c0.1,0.3,0.2,0.7,0.2,1.1s-0.1,0.8-0.2,1.1c-0.1,0.3-0.4,0.6-0.6,0.9 c-0.3,0.3-0.6,0.5-0.9,0.6c-0.3,0.1-0.7,0.2-1.1,0.2c-0.4,0-0.8-0.1-1.1-0.2c-0.3-0.1-0.6-0.4-0.9-0.6c-0.3-0.3-0.5-0.6-0.6-0.9 c-0.1-0.3-0.2-0.7-0.2-1.1s0.1-0.8,0.2-1.1c0.1-0.3,0.4-0.6,0.6-0.9s0.6-0.5,0.9-0.6C64.4,45.2,64.7,45.1,65.1,45.1z"></path>
</symbol>
<symbol id="ui-icon-Vk" viewBox="0 0 96 96">
<path d="M67.079,37.611c0.281-0.947,0-1.611-1.313-1.611h-4.377c-1.125,0-1.626,0.6-1.907,1.263c0,0-2.22,5.495-5.377,9.032c-1.032,1.042-1.469,1.358-2.032,1.358c-0.281,0-0.688-0.316-0.688-1.263v-8.779c0-1.137-0.313-1.611-1.251-1.611h-6.878c-0.688,0-1.125,0.537-1.125,1.011c0,1.074,1.563,1.326,1.751,4.295v6.505c0,1.421-0.25,1.674-0.813,1.674c-1.469,0-5.096-5.495-7.222-11.811C35.409,36.505,35.003,36,33.877,36h-4.377C28.25,36,28,36.6,28,37.263c0,1.168,1.469,6.979,6.909,14.653C38.536,57.158,43.632,60,48.259,60c2.782,0,3.126-0.632,3.126-1.705v-3.979c0-1.263,0.25-1.516,1.157-1.516c0.657,0,1.751,0.316,4.346,2.842c2.97,3,3.47,4.358,5.127,4.358h4.377c1.251,0,1.876-0.632,1.501-1.863c-0.406-1.232-1.813-3.032-3.689-5.179c-1.032-1.232-2.564-2.526-3.001-3.189c-0.657-0.853-0.469-1.232,0-1.958C61.202,47.779,66.548,40.2,67.079,37.611z"></path>
</symbol>
<symbol id="ui-icon-Cancel" viewBox="0 0 32 32">
<path d="M28.203 5.203l-10.781 10.797 10.781 10.797-1.406 1.406-10.797-10.781-10.797 10.781-1.406-1.406 10.781-10.797-10.781-10.797 1.406-1.406 10.797 10.781 10.797-10.781 1.406 1.406z"></path>
</symbol>
<symbol id="ui-icon-Back" viewBox="0 0 96 96">
<path d="M69,46.742v2.516H33.78l15.416,15.472L47.433,66.5L29,48l18.433-18.5l1.763,1.769L33.78,46.742H69z"></path>
</symbol>
<symbol id="ui-icon-ChevronRightSmall" viewBox="0 0 96 96">
<path d="M41.8,32L58,48L41.8,64L38,60.2L50.3,48L38,35.8C38,35.8,41.8,32,41.8,32z"></path>
</symbol>
<symbol id="ui-icon-ChevronLeftSmall" viewBox="0 0 96 96">
<path d="M58,35.8L45.7,48L58,60.2L54.2,64L38,48l16.2-16C54.2,32,58,35.8,58,35.8z"></path>
</symbol>
</defs>
</svg>
<div class="page" id="page" role="document">
<div class="container" id="container" role="main">
<div class="masonry-grid-wrapper">
<h1 id="h1">Карта сайта <a href="javascript:void(0);">englishextra.github.io</a></h1>
<div class="holder-filter-controls">
<ul class="holder-filter-buttons">
<li data-filter="*">Все</li>
<li data-filter=".pages-aids">Пособия</li>
<li data-filter=".pages-articles">Статьи</li>
<li data-filter=".pages-grammar">Грамматика</li>
<li data-filter=".pages-more">Еще!</li>
<li data-filter=".pages-reading">Чтение</li>
<li data-filter=".pages-tests">Тесты</li>
<li data-filter=".pages-transcripts">Транскрипты</li>
</ul>
<p class="holder-filter-select"><label for="filter-select" class="filter-select-label">Фильтровать</label><select id="filter-select" class="filter-select">
<option value="*" selected="selected">Все</option>
<option value=".pages-aids">Пособия</option>
<option value=".pages-articles">Статьи</option>
<option value=".pages-grammar">Грамматика</option>
<option value=".pages-more">Еще!</option>
<option value=".pages-reading">Чтение</option>
<option value=".pages-tests">Тесты</option>
<option value=".pages-transcripts">Транскрипты</option></select></p>
</div>
<div class="masonry-grid">
<div class="masonry-grid-sizer"></div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-serguei-640x336.jpg" class="data-src-img" alt="Репетитор английского в Тушино" />
<h2>Репетитор английского в Тушино</h2>
<p>«С нуля», подтянуть, улучшить, подготовка к ЕГЭ, PET, FCE, IELTS. Школьникам, студентам и взрослым в частном порядке.</p>
</a>
</div>
<div class="masonry-grid-item pages-more">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-irrverbsscr-640x336.jpg" class="data-src-img" alt="Неправильные глаголы" />
<h2>Неправильные глаголы</h2>
<p>Английские неправильные глаголы с транскрипцией и переводом на русский. Скачать заставку для Windows, таблицу, озвучку.</p>
</a>
</div>
<div class="masonry-grid-item pages-more">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-english4free-640x336.jpg" class="data-src-img" alt="Бесплатный английский в сети" />
<h2>Бесплатный английский в сети</h2>
<p>В сети полно «портянок» со списками «полезных» сайтов по английскому. Переходя по ссылкам, мы разочаровываемся: сколько мусора и обмана!</p>
</a>
</div>
<div class="masonry-grid-item pages-more">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-englishextra-app-640x336.jpg" class="data-src-img" alt="Скачать e-book, приложение, заставку" />
<h2>Скачать e-book, приложение, заставку</h2>
<p>Приложение для смартфонов на платформе Android / Windows Phone. Фактически является оффлайн версией образовательного ресурса «Английский без регистрации / No Sign-up English»</p>
</a>
</div>
<div class="masonry-grid-item pages-aids">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/aids_most_commonly_used_idioms.jpg" class="data-src-img" alt="Пособия - Most Commonly Used Idioms" />
<h2>Пособия - Most Commonly Used Idioms</h2>
<p>‘You’ll find that if you hang in, and knock yourself out with hard work, before you know it, you will have mastered these hip expressions and come through with flying colors.’</p>
</a>
</div>
<div class="masonry-grid-item pages-aids">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-aids-640x336.jpg" class="data-src-img" alt="Пособия - Teaching Pronunciation" />
<h2>Пособия - Teaching Pronunciation</h2>
<p>Using the Prosody Pyramid by Judy B. Gilbert.</p>
</a>
</div>
<div class="masonry-grid-item pages-aids">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/aids_topics.jpg" class="data-src-img" alt="Пособия - Топики на английском" />
<h2>Пособия - Топики на английском</h2>
<p>Около сотни кратких сочинений на английском с переводом на русский. Рекомендуется изучить для подготовки к заданию ГИА-9 АЯ — «Говорение. Монологическая речь».</p>
</a>
</div>
<div class="masonry-grid-item pages-articles">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/articles_reading_rules_utf.jpg" class="data-src-img" alt="Статьи - Правила чтения" />
<h2>Статьи - Правила чтения</h2>
<p>В английском языке звуков больше, чем букв. Звуки имеют различное выражение на письме. Один и тот же звук может выражаться разными буквами или буквосочетаниями. Для распознания звуков используются транскрипционные знаки. По транскрипции в словаре можно понять, как произносится слово.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-gg-640x336.jpg" class="data-src-img" alt="Грамматика - Quick and Dirty Grammar" />
<h2>Грамматика - Quick and Dirty Grammar</h2>
<p>Grammar Girl’s Quick and Dirty Grammar at a Glance — американский «Как правильно?». Краткий обзор распространенных ошибок.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img" alt="Грамматика - All / the whole / the entire" />
<h2>Грамматика - All / the whole / the entire</h2>
<p>«All» — все и весь, «the whole» — весь (одним цельным куском), «the entire» — весь (со всеми частями).</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_alone_by_myself_and_on_my_own.jpg" class="data-src-img" alt="Грамматика - Alone / by myself / on my own" />
<h2>Грамматика - Alone / by myself / on my own</h2>
<p>Alone — «один (в одиночестве, одинокий)»; by myself — «один (в одиночестве, без чьего-либо участия)»; on my own — «один (сам по себе, без чьей-либо помощи)».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Порядок определений" />
<h2>Грамматика - Порядок определений</h2>
<p>Ставьте атрибуты в следующем порядке: 1) артикль / указательное местоимение / существительное в притяжательном падеже, 2) порядковое числительное / only, 3) количественное числительное / other / many, 4) прилагательное в функции описательного определения (качество), 5) little / old / new, 6) цвет, 7) прилагательное в функции классифицирующего определения (происхождение), 8) существительное в функции препозитивного определения (материал), 9) и уже последним определяемое существительное.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_can_could_be_able_to.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Can / could / be able to" />
<h2>Грамматика - Can / could / be able to</h2>
<p>Одно дело «уметь», другое — «суметь». Одно дело «мочь», другое — «быть в стостоянии».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - С большой или с маленькой" />
<h2>Грамматика - С большой или с маленькой</h2>
<p>Мы знаем, что первое слово предложения пишется с заглавной, что местоимение «I» тоже всегда с прописной в любом месте предложения. Какие еще моменты следует помнить?</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Who / which / that и запятые" />
<h2>Грамматика - Who / which / that и запятые</h2>
<p>Придаточные предложения выделяются запятыми в том случае, когда оборот содержит дополнительную информацию о субъекте / объекте.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Нарицательное / собственное" />
<h2>Грамматика - Нарицательное / собственное</h2>
<p>Существительные, классифицирующие объекты, например, «building» (здание) являются именами нарицательными и пишутся с прописной буквы. Если Вы говорите о конкретном здании, например, «Glazier Building», то такое существительное является именем собственным и пишется с заглавной буквы.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_conditionals.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Согласование времен" />
<h2>Грамматика - Согласование времен</h2>
<p>Время глагола придаточного предложения зависит от времени главного предложения. Когда сказуемое главного предложения выражено глаголом в одной из форм прошедшего времени, в придаточных предложениях не могут употребляться формы настоящего и будущего, хотя речь идет о действиях, которые совершаются в настоящем или будущем.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Степени сравнения" />
<h2>Грамматика - Степени сравнения</h2>
<p>Правильно: «greener, funnier, happier, nearer, wickeder / more wicked, cleverer / more clever, commoner / more common, handsomer / more handsome, narrower / more narrow, quieter / more quiet, shallower / more shallow, simpler / more simple, stupider / more stupid, more fun, more quickly, more crowded, more boring, more careful, more often».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - «Ex-» и «former», или Осторожно: морпехи" />
<h2>Грамматика - «Ex-» и «former», или Осторожно: морпехи</h2>
<p>«Ex-» и «former» — синонимы, но части речи — разные. Оба означают «бывший». «Ex-» — необязательно «предыдущий» и вовсе не имеет негативного подтекста. «Former» ставится перед званиями и титулами, но для краткости и экономии места в заголовках традиционно используется «ex-», а в основном тексте — и «ex-», и «former». «Ex-» не используют с неодушевленными объектами. «Ex-» используют во избежание путанницы: «former» — это также «второй из двух». В употреблении «ex-» или «former» с различными словами сложились предпочтения.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Заимствованные слова" />
<h2>Грамматика - Заимствованные слова</h2>
<p>Слова заимствованные и знакомые англоязычным читателям, представленные в словаре «Webster’s», отображаются латиницей (не наклонным шрифтом), если используются в английском контексте, с соблюдением орфографии по словарю «Webster’s».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Glossary of Grammatical Terms" />
<h2>Грамматика - Glossary of Grammatical Terms</h2>
<p>Мини-словарь специальных терминов английской грамматики. Полезен для понимания правил, которые неизбежно используют профессиональную лексику.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_in_at_on.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - In / at / on" />
<h2>Грамматика - In / at / on</h2>
<p>Предлог «at», как правило, связан с объектами, при которых люди занимаются деятельностью, связанную с этими объектами: на светофоре ждать разрешения двигаться дальше, на свадьбе праздновать рождение новой семейной ячейки. «At» означает «при (перед, у) каком-то объекте». «On» — на поверхности находимся или на поверхность движемся какого-то объекта. «In» означает «внутри ограниченного 2D / 3D пространства», а также «написано, изображено».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_in_hospital_at_work.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - In hospital / at work etc." />
<h2>Грамматика - In hospital / at work etc.</h2>
<p>«In hospital / in prison / in jail», но: «at work / at school / at university / at college» — означает не сколько нахождение в помещении, сколько деятельность, связанную с этими объектами, то есть «отбывать наказание, отправлять религиозные культы, учиться» и тд. Однако «In the hospital / in the prison / in the jail», а также: «in the school / in the university / in the college» — означает, наоборот, внутри объекта, а не деятельность, связанную с ним.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_irregular_verbs.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Неправильные глаголы (таблица)" />
<h2>Грамматика - Неправильные глаголы (таблица)</h2>
<p>Часть английских глаголов образуют вторую (причастие 1) и третью (причастие 2) форму не по правилам.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - May / might / be allowed to" />
<h2>Грамматика - May / might / be allowed to</h2>
<p>May — вероятность и разрешение, might — вероятность, be allowed to — разрешение.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Модальные глаголы" />
<h2>Грамматика - Модальные глаголы</h2>
<p>Модальный глагол указывает, в каком режиме производится действие, cуть же действия передается следующим за модальным смысловым глаголом.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_much_many_little_few.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Much / many / little / few" />
<h2>Грамматика - Much / many / little / few</h2>
<p>Не ставьте «much» в утвердительных предложениях, если перед ним не стоит «so / very / too». Действия, а не предметы характеризуйте, используя «a lot / much / little / a little».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Or / nor / neither" />
<h2>Грамматика - Or / nor / neither</h2>
<p>«Nor» не привязан к «neither». В отрицательных перечислениях используйте «or», если второй участник существительное, прилагательное или наречие; если же глагольная конструкция — «nor» либо «or». Если не уверены, разделяйте перечисления союзом «and» и повторно используйте отрицание в сказуемом.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_phrasal_verbs.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Фразовые глаголы" />
<h2>Грамматика - Фразовые глаголы</h2>
<p>Значение фразового глагола отличается от значения глагола без послелога, например, «look» — «глядеть», но «look up» — «просматривать».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Косвенная речь" />
<h2>Грамматика - Косвенная речь</h2>
<p>При конвертации прямой речи в косвенную (Reported Speech) необходимо сделать несколько преобразований: соотнести лица, времена и обстоятельства. Золотое правило: если главное предложение в прошедшем, то и придаточное запрошедшивается в соответствии с правилами согласования времен.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Числа по-английски" />
<h2>Грамматика - Числа по-английски</h2>
<p>Английские числительные не склоняются по родам и не имеют падежных окончаний. Вместо «пятьсот» говорят: «пять сто».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Неконтиниусные глаголы" />
<h2>Грамматика - Неконтиниусные глаголы</h2>
<p>Глаголы состояния, или статальные глаголы (statal / stative verbs), обозначают состояния или отношения.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Серийная запятая" />
<h2>Грамматика - Серийная запятая</h2>
<p>Используйте серийную запятую, которую можно заменить на союзы «и / или» в перечислениях. Ставьте серийную запятую перед «и / или», когда нужно устранить двусмысленность.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_too_enough_so_such.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Too / enough и so / such" />
<h2>Грамматика - Too / enough и so / such</h2>
<p>Наречие «too» употребляется перед прилагательным или наречием, и означает «слишком». Наречие «enough» употребляется, как правило, перед существительным, но после прилагательного или наречия, и означает «достаточно». Местоимение «such» употребляется с существительным (перед которым может стоять прилагательное) и означает «такой». Местоимение «so» употребляется с прилагательным (после которого нет существительного) или наречием и означает «такой / так».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - To me / for me, или Надуманная проблема" />
<h2>Грамматика - To me / for me, или Надуманная проблема</h2>
<p>«To me» — «мне», дательный падеж. «For me» — «для меня», родительный падеж; или «за (вместо) меня», винительный падеж.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Перевод причастий и деепричастий" />
<h2>Грамматика - Перевод причастий и деепричастий</h2>
<p>Как глагольная форма, причастие в английском языке имеет формы времени. Причастие («Participle») в английском языке является неличной формой глагола и сочетает в себе признаки прилагательного, глагола и наречия. Английское причастие настоящего времени («Participle I / Present Participle») и причастие прошедшего времени («Participle II / Past Participle») соответствует и причастию, и деепричастию в русском языке.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/grammar_usage_of_articles_a_the.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Артикли a / an и the" />
<h2>Грамматика - Артикли a / an и the</h2>
<p>Артикль — служебное слово, которое отсутствует в русском языке. Артикли помогают отличить предмет от действия; выделяют или, наоборот, объединяют с другими предметами; меняют контекст.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Расстановка дефисов" />
<h2>Грамматика - Расстановка дефисов</h2>
<p>Числа с 21 по 99 пишутся через дефис: «forty-five». Заимствованные фразы пишутся без дефиса или так, как в оригинале: «an a priori argument, a Sturm und Drang drama, Sturm und Drang drama, a tête-à-tête approach».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Употребление времен" />
<h2>Грамматика - Употребление времен</h2>
<p>В английском языке шестнадцать времен в активном залоге, в пассивном залоге — десять. Точнее было бы назвать их конструкциями, которых в сумме двадцать шесть. Не стоит сравнивать русские времена с английскими. Лучше запомнить значение каждой конструкции и обстоятельства ее применения.</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Когда must = «должно быть»" />
<h2>Грамматика - Когда must = «должно быть»</h2>
<p>Помимо «должен / обязан» «must» может означать «должно быть».</p>
</a>
</div>
<div class="masonry-grid-item pages-grammar">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-grammar-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Грамматика - Порядок слов в предложении" />
<h2>Грамматика - Порядок слов в предложении</h2>
<p>В английском предложении жесткий порядок слов: подлежащие — сказуемое — дополнение — обстоятельство.</p>
</a>
</div>
<div class="masonry-grid-item pages-reading">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-reading-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Чтение - Country, Language, People, Person, Capital" />
<h2>Чтение - Country, Language, People, Person, Capital</h2>
<p>«Russians» или «the Russians», «Italian» или «Italians», а как будет «испанец» — «a Spanish» или как-то иначе?</p>
</a>
</div>
<div class="masonry-grid-item pages-reading">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/reading_russia_ukraine_war_conflict_vocabulary.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Чтение - Russia-Ukraine War Conflict" />
<h2>Чтение - Russia-Ukraine War Conflict</h2>
<p>“My definition of a free society is a society where it is safe to be unpopular.” (Adlai Stevenson, United Nations ambassador 1961—1965)</p>
</a>
</div>
<div class="masonry-grid-item pages-reading">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/reading_the_man_with_the_scar.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Чтение - The Man with the Scar" />
<h2>Чтение - The Man with the Scar</h2>
<p>Да, это тот «Человек со шрамом» Сомерсета Моэма (адресовано учащимся 10—11 классов школ, лицеев и гимназий). Есть еще двойник от Джека Лондона (алчность героя превзошла все мыслимые и немыслимые пределы и в конце концов свела его с ума), Ежи Эдигея (посвящен работе следственных органов и милиции народной Польши). Есть еще «Девушка со шрамом. История неправильного человека».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/tests_gia_ege_get_ready_for_a_run.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - ОГЭ / ЕГЭ: демоверсии, сроки, консультации" />
<h2>Тесты - ОГЭ / ЕГЭ: демоверсии, сроки, консультации</h2>
<p>Материалы, новости, рекомендации только из первых рук, только из официальных источников.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-cup-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Advanced Grammar in Use Level Test" />
<h2>Тесты - Advanced Grammar in Use Level Test</h2>
<p>Advanced Grammar in Use Second Edition Level Test с ответами. Cambridge University Press.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-cup-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - English Grammar in Use Level Test" />
<h2>Тесты - English Grammar in Use Level Test</h2>
<p>English Grammar in Use Third Edition Level Test с ответами. Cambridge University Press.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-cup-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Essential Grammar in Use Level Test" />
<h2>Тесты - Essential Grammar in Use Level Test</h2>
<p>Essential Grammar in Use Level Test с ответами. Cambridge University Press.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-ege-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Демо-вариант ЕГЭ-11 АЯ (ПЧ)" />
<h2>Тесты - Демо-вариант ЕГЭ-11 АЯ (ПЧ)</h2>
<p>«Демонстрационный вариант контрольных измерительных материалов единого государственного экзамена 2016 года по английскому языку с ответами» подготовлен Федеральным государственным бюджетным научным учреждением «Федеральный институт педагогических измерений».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-ege-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Демо-вариант ЕГЭ-11 АЯ (УЧ)" />
<h2>Тесты - Демо-вариант ЕГЭ-11 АЯ (УЧ)</h2>
<p>«Демонстрационный вариант контрольных измерительных материалов единого государственного экзамена 2016 года по английскому языку с ответами» подготовлен Федеральным государственным бюджетным научным учреждением «Федеральный институт педагогических измерений».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/tests_ege_essay_sample.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - ЕГЭ: Задание 40" />
<h2>Тесты - ЕГЭ: Задание 40</h2>
<p>Подготовка к заданию ЕГЭ-11 АЯ 40 — «письменное высказывание с элементами рассуждения».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/tests_gia_ege_letter_sample.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - ГИА / ЕГЭ: Задания 33, 39, 40" />
<h2>Тесты - ГИА / ЕГЭ: Задания 33, 39, 40</h2>
<p>Подготовка к заданиям ГИА-9 (ОГЭ) АЯ 33 — «личное письмо», ЕГЭ-11 АЯ 39 — «личное письмо», ЕГЭ-11 АЯ 40 — «письменное высказывание с элементами рассуждения».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-gia-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Демо-вариант ГИА-9 (ОГЭ) АЯ (ПЧ)" />
<h2>Тесты - Демо-вариант ГИА-9 (ОГЭ) АЯ (ПЧ)</h2>
<p>«Демонстрационный вариант контрольных измерительных материалов для проведения в 2016 году государственной (итоговой) аттестации (в новой форме) по английскому языку с ответами» подготовлен Федеральным государственным бюджетным научным учреждением «Федеральный институт педагогических измерений».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-gia-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Демо-вариант ГИА-9 (ОГЭ) АЯ (УЧ)" />
<h2>Тесты - Демо-вариант ГИА-9 (ОГЭ) АЯ (УЧ)</h2>
<p>«Демонстрационный вариант контрольных измерительных материалов для проведения в 2016 году государственной (итоговой) аттестации (в новой форме) по английскому языку с ответами» подготовлен Федеральным государственным бюджетным научным учреждением «Федеральный институт педагогических измерений».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-languagelink-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Уровневый тест" />
<h2>Тесты - Уровневый тест</h2>
<p>«Уровневый тест» с ответами по материалам languagelink.ru.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-macmillan-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Macmillan Practice Tests. Test 20" />
<h2>Тесты - Macmillan Practice Tests. Test 20</h2>
<p>Macmillan Practice Tests for the Russian State Exam. Издание второе. Test 20. По материалам учебных пособий «Grammar and Vocabulary Pre-Intermediate to Intermediate» и «Macmillan Exam Skills for Russia Speaking and Listening».</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-macmillan-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Ответы к Macmillan Practice Tests (1-е изд.)" />
<h2>Тесты - Ответы к Macmillan Practice Tests (1-е изд.)</h2>
<p>Ответы к Macmillan Practice Tests по аудированию и чтению к изданию первому (Клековкиной, 2006), не ко второму (Вербицкой, 2009). Ответы разных изданий отличаются — чуда не будет.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-macmillan-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Ответы к Macmillan Practice Tests (2-е изд.)" />
<h2>Тесты - Ответы к Macmillan Practice Tests (2-е изд.)</h2>
<p>Этот документ не закончен. Ответы к Macmillan Practice Tests по аудированию и чтению к изданию второму (Вербицкой, 2009), не к первому (Клековкиной, 2006). Ответы разных изданий отличаются — чуда не будет.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/tests_common_mistakes_test_advanced.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Common Mistakes Test Advanced" />
<h2>Тесты - Common Mistakes Test Advanced</h2>
<p>All the sentences contain common mistakes. Write the corrections.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-rosolymp-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - XIV Олимпиада по английскому" />
<h2>Тесты - XIV Олимпиада по английскому</h2>
<p>XIV Всероссийская олимпиада по английскому языку 2013 г., региональный этап.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20810%27%2F%3E" data-src="https://englishextra.github.io/libs/paper/img/gallery/@1x/tests_grammar_tests_with_answers.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - Тесты по грамматике" />
<h2>Тесты - Тесты по грамматике</h2>
<p>Тесты по грамматике английского языка базово-повышенного уровня.</p>
</a>
</div>
<div class="masonry-grid-item pages-tests">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-ege-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Тесты - ЕГЭ 2015: разбор ошибок" />
<h2>Тесты - ЕГЭ 2015: разбор ошибок</h2>
<p>Методические рекомендации для учителей, подготовленные на основе анализа типичных ошибок участников ЕГЭ 2015 года по иностранным языкам. Москва, 2015.</p>
</a>
</div>
<div class="masonry-grid-item pages-transcripts">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-transcripts-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Транскрипты - All train compartments smell vaguely of shit" />
<h2>Транскрипты - All train compartments smell vaguely of shit</h2>
<p>From original movie ‘Glengarry Glen Ross’ by David Mamet transcript extract.</p>
</a>
</div>
<div class="masonry-grid-item pages-transcripts">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-transcripts-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Транскрипты - Cousins?" />
<h2>Транскрипты - Cousins?</h2>
<p>From original movie ‘Coffee and Cigarettes’ by Jim Jarmusch transcript extract.</p>
</a>
</div>
<div class="masonry-grid-item pages-transcripts">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-transcripts-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Транскрипты - Stop swinging the bat" />
<h2>Транскрипты - Stop swinging the bat</h2>
<p>From original movie ‘The Shining’ by Stanley Kubrick transcript extract.</p>
</a>
</div>
<div class="masonry-grid-item pages-transcripts">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-transcripts-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Транскрипты - Essential British English Expressions" />
<h2>Транскрипты - Essential British English Expressions</h2>
<p>Inspired by the series of videos by Linguaspectrum. Please see credits at the bottom of the page.</p>
</a>
</div>
<div class="masonry-grid-item pages-transcripts">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-transcripts-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Транскрипты - 44 Most Often Misspelled Words" />
<h2>Транскрипты - 44 Most Often Misspelled Words</h2>
<p>From original video ‘Spell’ by Linguaspectrum transcript extract.</p>
</a>
</div>
<div class="masonry-grid-item pages-transcripts">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-transcripts-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Транскрипты - English Vocabulary for Business" />
<h2>Транскрипты - English Vocabulary for Business</h2>
<p>Пособие составлено на основе оригинальных транскриптов обучающих видеороликов от Video Vocab о современной деловой лексике.</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-englishgrammartips-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Подсказки по грамматике" />
<h2>Подсказки по грамматике</h2>
<p>Сборник кратких подсказок по употреблению грамматики английского языка.</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-vimeo-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Киноэпизоды" />
<h2>Киноэпизоды</h2>
<p>Киноэпизоды художественных фильмов, специально подобранных для тренировки по аудированию. Имейте в виду, что реальная речь необязательно исключительно правильная и грамотная.</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-vk-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Паблик ресурса" />
<h2>Паблик ресурса</h2>
<p>О новых статьях, документах для свободного скачивания, новостях Государственной итоговой аттестации и ЕГЭ читайте в паблике ресурса.</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-rss-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Новые статьи" />
<h2>Новые статьи</h2>
<p>RSS поток (лента / фид) ресурса — эще один метод оставаться в курсе новых публикаций.</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-portfolio-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Портфолио Сергея Шиманского" />
<h2>Портфолио Сергея Шиманского</h2>
<p>Об авторе некоммерческого образовательного веб-ресурса «Английский без регистрации».</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-home-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Начало" />
<h2>Начало</h2>
<p>Обычно на ней размещаются анонсы чего-нибудь новенького. Самая бесполезная страница, на которой вы побываете максимум один раз, ну или два, по ошибке.</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-contents-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="Содержание" />
<h2>Содержание</h2>
<p>Плитки-карточки с кратким описанием каждой страницы и ссылкой на нее. Перейти к желаемому материалу можно щелкнув по самофиксирующейся планке с заголовком текущей страницы.</p>
</a>
</div>
<div class="masonry-grid-item">
<a href="javascript:void(0);">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20336%27%2F%3E" data-src="https://englishextra.github.io/libs/contents-cards/img/sprite-contents-banner/@1x/contents-banner-about-640x336.jpg" class="data-src-img data-src-img--is-binded is-active" alt="О сайте (приложении)" />
<h2>О сайте (приложении)</h2>
<p>О чем и для кого этот ресурс, кто его делает и на какие средства, можно ли копировать материалы, собираются ли ваши персональные данные.</p>
</a>
</div>
</div>
<div class="footer">
<p class="mui--text-caption">
<a href="javascript:void(0);">Соглашение</a>
   <a href="javascript:void(0);">Политика</a>
   <a href="javascript:void(0);">© 2021 englishextra</a>
</p>
</div>
</div>
</div>
</div>
<a class="github-fork-ribbon right-top" href="https://github.com/englishextra/englishextra.github.io" target="_blank" rel="noopener" title="Fork me on GitHub" data-ribbon="Fork me on GitHub">Fork me on GitHub</a>
/*! libs\sitemap\scss\bundle.scss */
/*! @import "englishextra-ui-colors" */
/*!
* englishextra-ui colors
* use microsoft.com/en-us/design/color
* localhost/tools/Tinter-Shader/index.html
* localhost/tools/perfect_colors/
* localhost/tools/TinyColor/index.html
* localhost/tools/color-palette-generator/index.html
* localhost/tools/hexcolortool/index.html
* localhost/tools/css3-playground/
*/
/* 0073D2
007DD1
5E308F
9C0087
D13636
F23819
FF4141
00AC54
547E71
8C582C
F5630E
FDE000
C3C3C3
D54848
2D7C9A
2F79B6
EF6B50
EB5262
706D6A
60867B
615FC8
744DA5
3087CD */
/* \$(.*?)\: (.*?)\;
\t\t\t\t\t\t\t\t\t\t<div class="masonry-grid-item"><div class="bg-\1"><span class="color-variable-name">$\1</span></div></div>
\$(.*?)\: (.*?)\;
.bg-\1 {
background-color: $\1;
} */
/*! @import "englishextra-variables"; */
/*! @import "font-face"; */
/* @font-face {
font-family: "Source Sans Pro";
src: url(https://englishextra.github.io/fonts/source-sans-pro-fontfacekit/SourceSansPro-Light.otf.woff2) format("woff2"), url(https://englishextra.github.io/fonts/source-sans-pro-fontfacekit/SourceSansPro-Light.otf.woff) format("woff"), url(https://englishextra.github.io/fonts/source-sans-pro-fontfacekit/SourceSansPro-Light.ttf) format("truetype");
font-weight: 300;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans Pro";
src: url(https://englishextra.github.io/fonts/source-sans-pro-fontfacekit/SourceSansPro-Regular.otf.woff2) format("woff2"), url(https://englishextra.github.io/fonts/source-sans-pro-fontfacekit/SourceSansPro-Regular.otf.woff) format("woff"), url(https://englishextra.github.io/fonts/source-sans-pro-fontfacekit/SourceSansPro-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
} */
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Thin.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Thin.woff?v=2.137)
format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-ThinItalic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-ThinItalic.woff?v=2.137)
format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Light.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Light.woff?v=2.137)
format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-LightItalic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-LightItalic.woff?v=2.137)
format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff?v=2.137)
format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff?v=2.137)
format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff?v=2.137)
format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff?v=2.137)
format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Medium.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Medium.woff?v=2.137)
format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-MediumItalic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-MediumItalic.woff?v=2.137)
format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff?v=2.137)
format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff?v=2.137)
format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff?v=2.137)
format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff?v=2.137)
format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Black.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-Black.woff?v=2.137)
format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-BlackItalic.woff2?v=2.137)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-fontfacekit/2.137/Roboto-BlackItalic.woff?v=2.137)
format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.svg#RobotoMonoThin)
format("svg");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.svg#RobotoMonoThinItalic)
format("svg");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.svg#RobotoMonoLight)
format("svg");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.svg#RobotoMonoLightItalic)
format("svg");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.svg#RobotoMonoRegular)
format("svg");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.svg#RobotoMonoRegular)
format("svg");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.svg#RobotoMonoItalic)
format("svg");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.svg#RobotoMonoItalic)
format("svg");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.svg#RobotoMonoMedium)
format("svg");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.svg#RobotoMonoMediumItalic)
format("svg");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.svg#RobotoMonoBold)
format("svg");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.svg#RobotoMonoBold)
format("svg");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.svg#RobotoMonoBoldItalic)
format("svg");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono";
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot);
src: url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot?#iefix)
format("embedded-opentype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff2?v=2.0.986)
format("woff2"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff?v=2.0.986)
format("woff"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.ttf)
format("truetype"),
url(https://englishextra.github.io/fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.svg#RobotoMonoBoldItalic)
format("svg");
font-weight: 700;
font-style: italic;
font-display: swap;
}
/*! @import "normalize"; */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/*!
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif;
/* 1 */
line-height: 1.15;
/* 2 */
-ms-text-size-adjust: 100%;
/* 3 */
-webkit-text-size-adjust: 100%;
/* 3 */
}
/* Sections
========================================================================== */
/*!
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/*!
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/*!
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/*!
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block;
}
/*!
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/*!
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/*!
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/*!
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
/*!
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/*!
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/*!
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/*!
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*!
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/*!
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/*!
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000000;
}
/*!
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*!
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/*!
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/*!
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*!
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/*!
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/*!
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/*!
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/*!
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/*!
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
/*!
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/*!
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/*!
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*!
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/*!
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/*!
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/*!
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/*!
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/*!
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*!
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*!
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/*!
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/*!
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/*!
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/*! @import "sitemap-masonry-grid"; */
/*!
* masonry grid wrapper
*/
.masonry-grid-wrapper {
width: 92%;
height: 100%;
max-width: 74.667rem;
padding-top: 1.333rem;
padding-bottom: 1.333rem;
margin: 0 auto;
}
.masonry-grid-wrapper #h1,
.masonry-grid-wrapper h1 {
font-family: "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", "Segoe UI", "Segoe WP", "HelveticaNeue-Light", sans-serif-light, sans-serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.6rem;
text-align: center;
margin: 0.267rem 1% 1.733rem 1%;
}
.masonry-grid-wrapper h1 a {
text-decoration: none;
color: inherit;
}
.masonry-grid-wrapper h1 a:hover {
background-color: #f2f2f2;
}
.masonry-grid {
display: block;
width: 100%;
background: transparent;
padding: 0;
margin: 0 auto 1.333rem auto;
}
.masonry-grid:after {
display: block;
content: "";
clear: both;
}
.masonry-grid-item {
display: block;
float: left;
font-size: 1.000rem;
font-weight: 300;
color: inherit;
background-color: #FFFFFF;
-webkit-box-shadow: 0 0.267rem 0.267rem 0 rgba(150, 150, 150, 0.2);
box-shadow: 0 0.267rem 0.267rem 0 rgba(150, 150, 150, 0.2);
margin: 2% 1% 0 1%;
}
.masonry-grid-item:hover {
opacity: 0.9;
}
.masonry-grid-sizer {
width: 25%;
}
.masonry-grid-item {
width: 23%;
}
.masonry-grid-item a {
display: block;
text-decoration: none;
color: inherit;
}
.masonry-grid-item img {
display: block;
width: 100%;
}
.masonry-grid-item h2 {
font-weight: 400;
font-size: 1.250rem;
color: inherit;
padding: 1.000rem 1.000rem 0.250rem 1.000rem;
margin: 0;
}
.masonry-grid-item p {
color: inherit;
padding: 0 1.000rem 1.000rem 1.000rem;
margin: 0;
}
@media only screen and (max-width: 1080px) {
.masonry-grid-wrapper {
width: 100%;
padding-left: 1.000rem;
padding-right: 1.000rem;
}
.masonry-grid-sizer {
width: 50%;
}
.masonry-grid-item {
width: 48%;
}
}
@media only screen and (max-width: 640px) {
.masonry-grid-wrapper {
width: 100%;
}
}
@media only screen and (max-width: 360px) {
.masonry-grid-item {
float: none;
}
.masonry-grid-sizer {
width: 100%;
}
.masonry-grid-item {
width: 98%;
}
}
/*! @import "main"; */
/*!
* main
*/
/*!
* Default CSS Values for HTML Elements
* @see {@link https://www.w3schools.com/cssref/css_default_values.asp}
*/
html,
body {
height: 100%;
}
html {
font-size: 15px;
line-height: 20px;
/**
* set the parent to background transparent
* and position relative to parent, absolute for child
*/
background-color: transparent;
}
body {
font-family: "Roboto", "Segoe UI", "Segoe WP", "HelveticaNeue", "Roboto", "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif;
font-weight: 400;
font-size: 1.000rem;
line-height: 1.333rem;
width: 100%;
color: #191919;
background-color: #f0f0f0;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga", "kern";
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
outline: none;
overflow-x: hidden;
margin: 0;
padding: 0;
}
/*!
* englishextra specific rules
*/
a {
color: inherit;
text-decoration: none;
}
a:focus,
a:active,
button:focus,
button:active,
select:focus,
select:active {
-webkit-tap-highlight-color: transparent;
outline: none;
}
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: bottom;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
b,
strong,
.bolder {
font-weight: bold;
}
i,
em,
.italic {
font-style: italic;
}
u,
.underline {
text-decoration: underline;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(58, 150, 221, 0.9);
}
::selection {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(58, 150, 221, 0.9);
}
::-webkit-input-placeholder {
color: #878787 !important;
opacity: 1;
}
::-moz-placeholder {
color: #878787 !important;
opacity: 1;
}
:-ms-input-placeholder {
color: #878787 !important;
opacity: 1;
}
::-ms-input-placeholder {
color: #878787 !important;
opacity: 1;
}
::placeholder {
color: #878787 !important;
opacity: 1;
}
/*!
* clearfix css-tricks.com/snippets/css/clear-fix/
*/
.cf:after {
content: "";
display: table;
clear: both;
}
/*!
* fit width
*/
.fit-width {
min-width: 100%;
}
/*!
* fit half width
*/
.fit-half-width {
min-width: 50%;
}
/*!
* hide and show on mobile
*/
.page .show-inline-on-mobile,
.page .show-block-on-mobile {
display: none;
}
@media only screen and (max-width: 800px) {
.page .hide-on-mobile {
display: none;
width: 0;
height: 0;
}
.page .show-inline-on-mobile {
display: inline;
}
.page .show-block-on-mobile {
display: block;
}
}
.page .hide {
display: none;
}
.page .show-inline {
display: inline;
}
.page .show-inline-block {
display: inline-block;
}
.page .show-block {
display: block;
}
/*!
* other
*/
.page {
width: 100%;
/**
* set the parent to min height 100%, not just height
* and position relative to parent, absolute for child
*/
min-height: 100%;
position: relative;
top: 0;
/* left: 18.133rem; */
left: 0;
visibility: visible;
opacity: 1;
-webkit-transition: left 0.2s linear, opacity 0.2s ease;
transition: left 0.2s linear, opacity 0.2s ease;
background-color: #f0f0f0;
}
.page img,
.masonry-grid img {
display: block;
}
.container {
width: 100%;
height: 100%;
padding: 0;
margin: 0 auto;
}
/*!
* filtering controls
*/
.holder-filter-controls {
width: 98%;
height: 0;
visibility: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0 auto -2% auto;
}
.holder-filter-controls.visible {
height: auto;
visibility: visible;
margin-bottom: 0;
}
.holder-filter-buttons {
/**
* @see {@link https://stackoverflow.com/questions/8543859/css-vertical-alignment-text-inside-li}
*/
display: table;
width: 100%;
/**
* @see {@link https://css-tricks.com/fighting-the-space-between-inline-block-elements/}
*/
font-size: 0;
text-align: center;
background-color: #373737;
padding: 0;
margin: 0;
}
.holder-filter-buttons li,
.holder-filter-buttons li:active,
.holder-filter-buttons li:focus {
display: table-cell;
min-width: 7.500rem;
height: 3.200rem;
font-family: "Roboto", "Segoe UI", "Segoe WP", "HelveticaNeue", "Roboto", "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif;
font-weight: 400;
font-size: 0.875rem;
vertical-align: middle;
color: #FFFFFF;
background-color: #373737;
border: 0.067rem solid #373737;
-webkit-tap-highlight-color: transparent;
outline: none;
cursor: pointer;
padding: 0;
margin: 0;
}
.holder-filter-buttons li:hover,
.holder-filter-buttons li.is-active {
background-color: #5f5f5f;
border: 0.067rem solid #5f5f5f;
}
/* .holder-filter-buttons li:first-child {
border-radius: 0.313rem 0 0 0.313rem;
}
.holder-filter-buttons li:last-child {
border-radius: 0 0.313rem 0.313rem 0;
} */
.holder-filter-select {
display: none;
padding: 0;
margin: 0;
}
.filter-select-label {
position: absolute;
top: -1000px;
left: -1000px;
}
.filter-select,
.filter-select:active,
.filter-select:focus {
font-family: "Roboto", "Segoe UI", "Segoe WP", "HelveticaNeue", "Roboto", "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif;
font-weight: 400;
font-size: 0.933rem;
display: block;
width: 100%;
height: 3.200rem;
text-align: center;
color: #FFFFFF;
background-color: #373737;
border: 0.067rem solid #373737;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
outline: none;
cursor: pointer;
padding: 0;
margin: 0;
}
.filter-select option {
padding: 0.533rem;
}
.filter-select option:hover,
.filter-select option:active,
.filter-select option:focus,
.filter-select option:checked {
-webkit-box-shadow: inset 3.200rem 3.200rem #5F5F5F;
box-shadow: inset 3.200rem 3.200rem #5f5f5f;
}
@media only screen and (max-width: 1080px) {
.holder-filter-buttons {
display: none;
}
.holder-filter-select {
display: block;
}
}
.footer {
font-size: 0.933rem;
line-height: 1.333rem;
font-weight: 400;
text-align: center;
/* padding: 0 1.000rem; */
padding: 0 1%;
}
.footer a {
color: inherit;
text-decoration: underline;
}
/*!
* @see {@link https://github.com/sksmatt/UItoTop-jQuery-Plugin/}
*/
.btn-totop {
display: none;
width: 3.200rem;
height: 3.200rem;
position: fixed;
bottom: 0;
right: 0;
background-color: #e6e6e6;
outline: none;
cursor: pointer;
border: 0;
}
.btn-totop .ui-icon {
display: block;
width: 3.200rem;
height: 3.200rem;
/*! @see {@link https://www.w3.org/Style/Examples/007/center.en.html#hv3} */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.btn-totop.is-active {
display: block;
}
.btn-totop .ui-icon > * {
fill: #767676;
}
/*!
* @see {@link https://gist.github.com/englishextra/40b7c4ffde33bfb58aff259afe229d6a}
*/
/*------------------------------------------
Foundation Media Queries
http://foundation.zurb.com/docs/media-queries.html
--------------------------------------------*/
/* Small screens - MOBILE */
@media only screen {
html {
font-size: 12px;
}
}
/* Define mobile styles - Mobile First */
@media only screen and (max-width: 40em) {
html {
font-size: 13px;
}
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
/* Medium screens - TABLET */
@media only screen and (min-width: 40.063em) {
html {
font-size: 13px;
}
}
/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
html {
font-size: 15px;
}
}
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
/* Large screens - DESKTOP */
@media only screen and (min-width: 64.063em) {
html {
font-size: 15px;
}
}
/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
html {
font-size: 15px;
}
}
/* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
/* XLarge screens */
@media only screen and (min-width: 90.063em) {
html {
font-size: 15px;
}
}
/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
html {
font-size: 18px;
}
}
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
/* XXLarge screens */
@media only screen and (min-width: 120.063em) {
html {
font-size: 19px;
}
}
/* min-width 1921px, xlarge screens */
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function _typeof(obj) {
return typeof obj;
};
} else {
_typeof = function _typeof(obj) {
return obj &&
typeof Symbol === "function" &&
obj.constructor === Symbol &&
obj !== Symbol.prototype
? "symbol"
: typeof obj;
};
}
return _typeof(obj);
}
/*jslint browser: true */
/*jslint node: true */
/*global global, ActiveXObject, define, escape, module, pnotify, Proxy, jQuery, require, self, setImmediate, window */
/*!
* modified Isotope PACKAGED v3.0.1
* @see {@link https://github.com/metafizzy/isotope}
* Licensed GPLv3 for open source use
* or Isotope Commercial License for commercial use
* @see {@link http://isotope.metafizzy.co}
* Copyright 2016 Metafizzy
* @see {@link https://github.com/metafizzy/isotope/blob/master/dist/isotope.pkgd.js}
* passes jshint with suppressing comments
*/
/*jshint forin: false */
(function(root, factory) {
root.EvEmitter = factory();
})("undefined" !== typeof window ? window : this, function () {
function EvEmitter() {}
var proto = EvEmitter.prototype;
proto.on = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
var events = (this._events = this._events || {});
var listeners = (events[eventName] = events[eventName] || []);
if (listeners.indexOf(listener) === -1) {
listeners.push(listener);
}
return this;
};
proto.once = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
this.on(eventName, listener);
var onceEvents = (this._onceEvents = this._onceEvents || {});
var onceListeners = (onceEvents[eventName] =
onceEvents[eventName] || {});
onceListeners[listener] = true;
return this;
};
proto.off = function (eventName, listener) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
var index = listeners.indexOf(listener);
if (index !== -1) {
listeners.splice(index, 1);
}
return this;
};
proto.emitEvent = function (eventName, args) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
var i = 0;
var listener = listeners[i];
args = args || [];
var onceListeners = this._onceEvents && this._onceEvents[eventName];
while (listener) {
var isOnce = onceListeners && onceListeners[listener];
if (isOnce) {
this.off(eventName, listener);
delete onceListeners[listener];
}
listener.apply(this, args);
i += isOnce ? 0 : 1;
listener = listeners[i];
}
return this;
};
return EvEmitter;
});
(function(root, factory) {
"use strict";
root.getSize = factory();
})("undefined" !== typeof window ? window : this, function factory() {
"use strict";
function getStyleSize(value) {
var num = parseFloat(value);
var isValid = value.indexOf("%") === -1 && !isNaN(num);
return isValid && num;
}
function noop() {}
var logError =
typeof console === "undefined"
? noop
: function(message) {
console.error(message);
};
var measurements = [
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingBottom",
"marginLeft",
"marginRight",
"marginTop",
"marginBottom",
"borderLeftWidth",
"borderRightWidth",
"borderTopWidth",
"borderBottomWidth"
];
var measurementsLength = measurements.length;
function getZeroSize() {
var size = {
width: 0,
height: 0,
innerWidth: 0,
innerHeight: 0,
outerWidth: 0,
outerHeight: 0
};
for (var i = 0; i < measurementsLength; i++) {
var measurement = measurements[i];
size[measurement] = 0;
}
return size;
}
function getStyle(elem) {
var style = getComputedStyle(elem);
if (!style) {
logError(
"Style returned " +
style +
". Are you running this code in a hidden iframe on Firefox? " +
"See http://bit.ly/getsizebug1"
);
}
return style;
}
var isSetup = false;
var isBoxSizeOuter;
function setup() {
if (isSetup) {
return;
}
isSetup = true;
var div = document.createElement("div");
div.style.width = "200px";
div.style.padding = "1px 2px 3px 4px";
div.style.borderStyle = "solid";
div.style.borderWidth = "1px 2px 3px 4px";
div.style.boxSizing = "border-box";
var body = document.body || document.documentElement;
body.appendChild(div);
var style = getStyle(div);
getSize.isBoxSizeOuter = isBoxSizeOuter =
getStyleSize(style.width) === 200;
body.removeChild(div);
}
function getSize(elem) {
setup();
if (typeof elem === "string") {
elem = document.querySelector(elem);
}
if (!elem || _typeof(elem) !== "object" || !elem.nodeType) {
return;
}
var style = getStyle(elem);
if (style.display === "none") {
return getZeroSize();
}
var size = {};
size.width = elem.offsetWidth;
size.height = elem.offsetHeight;
var isBorderBox = (size.isBorderBox = style.boxSizing === "border-box");
for (var i = 0; i < measurementsLength; i++) {
var measurement = measurements[i];
var value = style[measurement];
var num = parseFloat(value);
size[measurement] = !isNaN(num) ? num : 0;
}
var paddingWidth = size.paddingLeft + size.paddingRight;
var paddingHeight = size.paddingTop + size.paddingBottom;
var marginWidth = size.marginLeft + size.marginRight;
var marginHeight = size.marginTop + size.marginBottom;
var borderWidth = size.borderLeftWidth + size.borderRightWidth;
var borderHeight = size.borderTopWidth + size.borderBottomWidth;
var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
var styleWidth = getStyleSize(style.width);
if (styleWidth !== false) {
size.width =
styleWidth +
(isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth);
}
var styleHeight = getStyleSize(style.height);
if (styleHeight !== false) {
size.height =
styleHeight +
(isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight);
}
size.innerWidth = size.width - (paddingWidth + borderWidth);
size.innerHeight = size.height - (paddingHeight + borderHeight);
size.outerWidth = size.width + marginWidth;
size.outerHeight = size.height + marginHeight;
return size;
}
return getSize;
});
(function(window, factory) {
"use strict";
window.matchesSelector = factory();
})("undefined" !== typeof window ? window : this, function factory() {
"use strict";
var matchesMethod = (function () {
var ElemProto = Element.prototype;
if (ElemProto.matches) {
return "matches";
}
if (ElemProto.matchesSelector) {
return "matchesSelector";
}
var prefixes = ["webkit", "moz", "ms", "o"];
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
var method = prefix + "MatchesSelector";
if (ElemProto[method]) {
return method;
}
}
})();
return function matchesSelector(elem, selector) {
return elem[matchesMethod](selector);
};
});
(function(window, factory) {
window.fizzyUIUtils = factory(window, window.matchesSelector);
})("undefined" !== typeof window ? window : this, function factory(
window,
matchesSelector
) {
var utils = {};
utils.extend = function (a, b) {
for (var prop in b) {
a[prop] = b[prop];
}
return a;
};
utils.modulo = function (num, div) {
return ((num % div) + div) % div;
};
utils.makeArray = function (obj) {
var ary = [];
if (Array.isArray(obj)) {
ary = obj;
} else if (obj && typeof obj.length === "number") {
for (var i = 0; i < obj.length; i++) {
ary.push(obj[i]);
}
} else {
ary.push(obj);
}
return ary;
};
utils.removeFrom = function (ary, obj) {
var index = ary.indexOf(obj);
if (index !== -1) {
ary.splice(index, 1);
}
};
utils.getParent = function (elem, selector) {
while (elem !== document.body) {
elem = elem.parentNode;
if (matchesSelector(elem, selector)) {
return elem;
}
}
};
utils.getQueryElement = function (elem) {
if (typeof elem === "string") {
return document.querySelector(elem);
}
return elem;
};
utils.handleEvent = function (event) {
var method = "on" + event.type;
if (this[method]) {
this[method](event);
}
};
utils.filterFindElements = function (elems, selector) {
elems = utils.makeArray(elems);
var ffElems = [];
elems.forEach(function(elem) {
if (!(elem instanceof HTMLElement)) {
return;
}
if (!selector) {
ffElems.push(elem);
return;
}
if (matchesSelector(elem, selector)) {
ffElems.push(elem);
}
var childElems = elem.querySelectorAll(selector);
for (var i = 0; i < childElems.length; i++) {
ffElems.push(childElems[i]);
}
});
return ffElems;
};
utils.debounceMethod = function (_class, methodName, threshold) {
var method = _class.prototype[methodName];
var timeoutName = methodName + "Timeout";
_class.prototype[methodName] = function () {
var timeout = this[timeoutName];
if (timeout) {
clearTimeout(timeout);
}
var args = arguments;
var _this = this;
this[timeoutName] = setTimeout(function () {
method.apply(_this, args);
delete _this[timeoutName];
}, threshold || 100);
};
};
utils.docReady = function (callback) {
var readyState = document.readyState;
if (readyState === "complete" || readyState === "interactive") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
};
utils.toDashed = function (str) {
return str
.replace(/(.)([A-Z])/g, function(match, $1, $2) {
return $1 + "-" + $2;
})
.toLowerCase();
};
var console = window.console;
utils.htmlInit = function (WidgetClass, namespace) {
utils.docReady(function () {
var dashedNamespace = utils.toDashed(namespace);
var dataAttr = "data-" + dashedNamespace;
var dataAttrElems = document.querySelectorAll("[" + dataAttr + "]");
var jsDashElems = document.querySelectorAll(
".js-" + dashedNamespace
);
var elems = utils
.makeArray(dataAttrElems)
.concat(utils.makeArray(jsDashElems));
var dataOptionsAttr = dataAttr + "-options";
var jQuery = window.jQuery;
elems.forEach(function(elem) {
var attr =
elem.getAttribute(dataAttr) ||
elem.getAttribute(dataOptionsAttr);
var options;
try {
options = attr && JSON.parse(attr);
} catch (error) {
if (console) {
console.error(
"Error parsing " +
dataAttr +
" on " +
elem.className +
": " +
error
);
}
return;
}
var instance = new WidgetClass(elem, options);
if (jQuery) {
jQuery.data(elem, namespace, instance);
}
});
});
};
return utils;
});
(function(window, factory) {
window.Outlayer = {};
window.Outlayer.Item = factory(window.EvEmitter, window.getSize);
})("undefined" !== typeof window ? window : this, function factory(
EvEmitter,
getSize
) {
"use strict";
function isEmptyObj(obj) {
for (var prop in obj) {
return false;
}
prop = null;
return true;
}
var docElemStyle = document.documentElement.style;
var transitionProperty =
typeof docElemStyle.transition === "string"
? "transition"
: "WebkitTransition";
var transformProperty =
typeof docElemStyle.transform === "string"
? "transform"
: "WebkitTransform";
var transitionEndEvent = {
WebkitTransition: "webkitTransitionEnd",
transition: "transitionend"
}[transitionProperty];
var vendorProperties = {
transform: transformProperty,
transition: transitionProperty,
transitionDuration: transitionProperty + "Duration",
transitionProperty: transitionProperty + "Property",
transitionDelay: transitionProperty + "Delay"
};
function Item(element, layout) {
if (!element) {
return;
}
this.element = element;
this.layout = layout;
this.position = {
x: 0,
y: 0
};
this._create();
}
var proto = (Item.prototype = Object.create(EvEmitter.prototype));
proto.constructor = Item;
proto._create = function () {
this._transn = {
ingProperties: {},
clean: {},
onEnd: {}
};
this.css({
position: "absolute"
});
};
proto.handleEvent = function (event) {
var method = "on" + event.type;
if (this[method]) {
this[method](event);
}
};
proto.getSize = function () {
this.size = getSize(this.element);
};
proto.css = function (style) {
var elemStyle = this.element.style;
for (var prop in style) {
var supportedProp = vendorProperties[prop] || prop;
elemStyle[supportedProp] = style[prop];
}
};
proto.getPosition = function () {
var style = getComputedStyle(this.element);
var isOriginLeft = this.layout._getOption("originLeft");
var isOriginTop = this.layout._getOption("originTop");
var xValue = style[isOriginLeft ? "left" : "right"];
var yValue = style[isOriginTop ? "top" : "bottom"];
var layoutSize = this.layout.size;
var x =
xValue.indexOf("%") !== -1
? (parseFloat(xValue) / 100) * layoutSize.width
: parseInt(xValue, 10);
var y =
yValue.indexOf("%") !== -1
? (parseFloat(yValue) / 100) * layoutSize.height
: parseInt(yValue, 10);
x = isNaN(x) ? 0 : x;
y = isNaN(y) ? 0 : y;
x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
this.position.x = x;
this.position.y = y;
};
proto.layoutPosition = function () {
var layoutSize = this.layout.size;
var style = {};
var isOriginLeft = this.layout._getOption("originLeft");
var isOriginTop = this.layout._getOption("originTop");
var xPadding = isOriginLeft ? "paddingLeft" : "paddingRight";
var xProperty = isOriginLeft ? "left" : "right";
var xResetProperty = isOriginLeft ? "right" : "left";
var x = this.position.x + layoutSize[xPadding];
style[xProperty] = this.getXValue(x);
style[xResetProperty] = "";
var yPadding = isOriginTop ? "paddingTop" : "paddingBottom";
var yProperty = isOriginTop ? "top" : "bottom";
var yResetProperty = isOriginTop ? "bottom" : "top";
var y = this.position.y + layoutSize[yPadding];
style[yProperty] = this.getYValue(y);
style[yResetProperty] = "";
this.css(style);
this.emitEvent("layout", [this]);
};
proto.getXValue = function (x) {
var isHorizontal = this.layout._getOption("horizontal");
return this.layout.options.percentPosition && !isHorizontal
? (x / this.layout.size.width) * 100 + "%"
: x + "px";
};
proto.getYValue = function (y) {
var isHorizontal = this.layout._getOption("horizontal");
return this.layout.options.percentPosition && isHorizontal
? (y / this.layout.size.height) * 100 + "%"
: y + "px";
};
proto._transitionTo = function (x, y) {
this.getPosition();
var curX = this.position.x;
var curY = this.position.y;
var compareX = parseInt(x, 10);
var compareY = parseInt(y, 10);
var didNotMove =
compareX === this.position.x && compareY === this.position.y;
this.setPosition(x, y);
if (didNotMove && !this.isTransitioning) {
this.layoutPosition();
return;
}
var transX = x - curX;
var transY = y - curY;
var transitionStyle = {};
transitionStyle.transform = this.getTranslate(transX, transY);
this.transition({
to: transitionStyle,
onTransitionEnd: {
transform: this.layoutPosition
},
isCleaning: true
});
};
proto.getTranslate = function (x, y) {
var isOriginLeft = this.layout._getOption("originLeft");
var isOriginTop = this.layout._getOption("originTop");
x = isOriginLeft ? x : -x;
y = isOriginTop ? y : -y;
return "translate3d(" + x + "px, " + y + "px, 0)";
};
proto.goTo = function (x, y) {
this.setPosition(x, y);
this.layoutPosition();
};
proto.moveTo = proto._transitionTo;
proto.setPosition = function (x, y) {
this.position.x = parseInt(x, 10);
this.position.y = parseInt(y, 10);
};
proto._nonTransition = function (args) {
this.css(args.to);
if (args.isCleaning) {
this._removeStyles(args.to);
}
for (var prop in args.onTransitionEnd) {
args.onTransitionEnd[prop].call(this);
}
};
proto.transition = function (args) {
if (!parseFloat(this.layout.options.transitionDuration)) {
this._nonTransition(args);
return;
}
var _transition = this._transn;
for (var prop in args.onTransitionEnd) {
_transition.onEnd[prop] = args.onTransitionEnd[prop];
}
for (prop in args.to) {
_transition.ingProperties[prop] = true;
if (args.isCleaning) {
_transition.clean[prop] = true;
}
}
if (args.from) {
this.css(args.from);
var h = this.element.offsetHeight;
h = null;
}
this.enableTransition(args.to);
this.css(args.to);
this.isTransitioning = true;
};
function toDashedAll(str) {
return str.replace(/([A-Z])/g, function($1) {
return "-" + $1.toLowerCase();
});
}
var transitionProps = "opacity," + toDashedAll(transformProperty);
proto.enableTransition = function () {
if (this.isTransitioning) {
return;
}
var duration = this.layout.options.transitionDuration;
duration = typeof duration === "number" ? duration + "ms" : duration;
this.css({
transitionProperty: transitionProps,
transitionDuration: duration,
transitionDelay: this.staggerDelay || 0
});
this.element.addEventListener(transitionEndEvent, this, false);
};
proto.onwebkitTransitionEnd = function (event) {
this.ontransitionend(event);
};
proto.onotransitionend = function (event) {
this.ontransitionend(event);
};
var dashedVendorProperties = {
"-webkit-transform": "transform"
};
proto.ontransitionend = function (event) {
if (event.target !== this.element) {
return;
}
var _transition = this._transn;
var propertyName =
dashedVendorProperties[event.propertyName] || event.propertyName;
delete _transition.ingProperties[propertyName];
if (isEmptyObj(_transition.ingProperties)) {
this.disableTransition();
}
if (propertyName in _transition.clean) {
this.element.style[event.propertyName] = "";
delete _transition.clean[propertyName];
}
if (propertyName in _transition.onEnd) {
var onTransitionEnd = _transition.onEnd[propertyName];
onTransitionEnd.call(this);
delete _transition.onEnd[propertyName];
}
this.emitEvent("transitionEnd", [this]);
};
proto.disableTransition = function () {
this.removeTransitionStyles();
this.element.removeEventListener(transitionEndEvent, this, false);
this.isTransitioning = false;
};
proto._removeStyles = function (style) {
var cleanStyle = {};
for (var prop in style) {
cleanStyle[prop] = "";
}
this.css(cleanStyle);
};
var cleanTransitionStyle = {
transitionProperty: "",
transitionDuration: "",
transitionDelay: ""
};
proto.removeTransitionStyles = function () {
this.css(cleanTransitionStyle);
};
proto.stagger = function (delay) {
delay = isNaN(delay) ? 0 : delay;
this.staggerDelay = delay + "ms";
};
proto.removeElem = function () {
this.element.parentNode.removeChild(this.element);
this.css({
display: ""
});
this.emitEvent("remove", [this]);
};
proto.remove = function () {
if (
!transitionProperty ||
!parseFloat(this.layout.options.transitionDuration)
) {
this.removeElem();
return;
}
this.once("transitionEnd", function () {
this.removeElem();
});
this.hide();
};
proto.reveal = function () {
delete this.isHidden;
this.css({
display: ""
});
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty(
"visibleStyle"
);
onTransitionEnd[transitionEndProperty] = this.onRevealTransitionEnd;
this.transition({
from: options.hiddenStyle,
to: options.visibleStyle,
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onRevealTransitionEnd = function () {
if (!this.isHidden) {
this.emitEvent("reveal");
}
};
proto.getHideRevealTransitionEndProperty = function (styleProperty) {
var optionStyle = this.layout.options[styleProperty];
if (optionStyle.opacity) {
return "opacity";
}
for (var prop in optionStyle) {
return prop;
}
};
proto.hide = function () {
this.isHidden = true;
this.css({
display: ""
});
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty(
"hiddenStyle"
);
onTransitionEnd[transitionEndProperty] = this.onHideTransitionEnd;
this.transition({
from: options.visibleStyle,
to: options.hiddenStyle,
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onHideTransitionEnd = function () {
if (this.isHidden) {
this.css({
display: "none"
});
this.emitEvent("hide");
}
};
proto.destroy = function () {
this.css({
position: "",
left: "",
right: "",
top: "",
bottom: "",
transition: "",
transform: ""
});
};
return Item;
});
(function(window, factory) {
"use strict";
window.Outlayer = factory(
window,
window.EvEmitter,
window.getSize,
window.fizzyUIUtils,
window.Outlayer.Item
);
})("undefined" !== typeof window ? window : this, function factory(
window,
EvEmitter,
getSize,
utils,
Item
) {
"use strict";
var console = window.console;
var jQuery = window.jQuery;
var noop = function noop() {};
var GUID = 0;
var instances = {};
function Outlayer(element, options) {
var queryElement = utils.getQueryElement(element);
if (!queryElement) {
if (console) {
console.error(
"Bad element for " +
this.constructor.namespace +
": " +
(queryElement || element)
);
}
return;
}
this.element = queryElement;
if (jQuery) {
this.$element = jQuery(this.element);
}
this.options = utils.extend({}, this.constructor.defaults);
this.option(options);
var id = ++GUID;
this.element.outlayerGUID = id;
instances[id] = this;
this._create();
var isInitLayout = this._getOption("initLayout");
if (isInitLayout) {
this.layout();
}
}
Outlayer.namespace = "outlayer";
Outlayer.Item = Item;
Outlayer.defaults = {
containerStyle: {
position: "relative"
},
initLayout: true,
originLeft: true,
originTop: true,
resize: true,
resizeContainer: true,
transitionDuration: "0.4s",
hiddenStyle: {
opacity: 0,
transform: "scale(0.001)"
},
visibleStyle: {
opacity: 1,
transform: "scale(1)"
}
};
var proto = Outlayer.prototype;
utils.extend(proto, EvEmitter.prototype);
proto.option = function (opts) {
utils.extend(this.options, opts);
};
proto._getOption = function (option) {
var oldOption = this.constructor.compatOptions[option];
return oldOption && this.options[oldOption] !== undefined
? this.options[oldOption]
: this.options[option];
};
Outlayer.compatOptions = {
initLayout: "isInitLayout",
horizontal: "isHorizontal",
layoutInstant: "isLayoutInstant",
originLeft: "isOriginLeft",
originTop: "isOriginTop",
resize: "isResizeBound",
resizeContainer: "isResizingContainer"
};
proto._create = function () {
this.reloadItems();
this.stamps = [];
this.stamp(this.options.stamp);
utils.extend(this.element.style, this.options.containerStyle);
var canBindResize = this._getOption("resize");
if (canBindResize) {
this.bindResize();
}
};
proto.reloadItems = function () {
this.items = this._itemize(this.element.children);
};
proto._itemize = function (elems) {
var itemElems = this._filterFindItemElements(elems);
var Item = this.constructor.Item;
var items = [];
for (var i = 0; i < itemElems.length; i++) {
var elem = itemElems[i];
var item = new Item(elem, this);
items.push(item);
}
return items;
};
proto._filterFindItemElements = function (elems) {
return utils.filterFindElements(elems, this.options.itemSelector);
};
proto.getItemElements = function () {
return this.items.map(function(item) {
return item.element;
});
};
proto.layout = function () {
this._resetLayout();
this._manageStamps();
var layoutInstant = this._getOption("layoutInstant");
var isInstant =
layoutInstant !== undefined ? layoutInstant : !this._isLayoutInited;
this.layoutItems(this.items, isInstant);
this._isLayoutInited = true;
};
proto._init = proto.layout;
proto._resetLayout = function () {
this.getSize();
};
proto.getSize = function () {
this.size = getSize(this.element);
};
proto._getMeasurement = function (measurement, size) {
var option = this.options[measurement];
var elem;
if (!option) {
this[measurement] = 0;
} else {
if (typeof option === "string") {
elem = this.element.querySelector(option);
} else if (option instanceof HTMLElement) {
elem = option;
}
this[measurement] = elem ? getSize(elem)[size] : option;
}
};
proto.layoutItems = function (items, isInstant) {
items = this._getItemsForLayout(items);
this._layoutItems(items, isInstant);
this._postLayout();
};
proto._getItemsForLayout = function (items) {
return items.filter(function(item) {
return !item.isIgnored;
});
};
proto._layoutItems = function (items, isInstant) {
this._emitCompleteOnItems("layout", items);
if (!items || !items.length) {
return;
}
var queue = [];
items.forEach(function(item) {
var position = this._getItemLayoutPosition(item);
position.item = item;
position.isInstant = isInstant || item.isLayoutInstant;
queue.push(position);
}, this);
this._processLayoutQueue(queue);
};
proto._getItemLayoutPosition = function () {
return {
x: 0,
y: 0
};
};
proto._processLayoutQueue = function (queue) {
this.updateStagger();
queue.forEach(function(obj, i) {
this._positionItem(obj.item, obj.x, obj.y, obj.isInstant, i);
}, this);
};
proto.updateStagger = function () {
var stagger = this.options.stagger;
if (stagger === null || stagger === undefined) {
this.stagger = 0;
return;
}
this.stagger = getMilliseconds(stagger);
return this.stagger;
};
proto._positionItem = function (item, x, y, isInstant, i) {
if (isInstant) {
item.goTo(x, y);
} else {
item.stagger(i * this.stagger);
item.moveTo(x, y);
}
};
proto._postLayout = function () {
this.resizeContainer();
};
proto.resizeContainer = function () {
var isResizingContainer = this._getOption("resizeContainer");
if (!isResizingContainer) {
return;
}
var size = this._getContainerSize();
if (size) {
this._setContainerMeasure(size.width, true);
this._setContainerMeasure(size.height, false);
}
};
proto._getContainerSize = noop;
proto._setContainerMeasure = function (measure, isWidth) {
if (measure === undefined) {
return;
}
var elemSize = this.size;
if (elemSize.isBorderBox) {
measure += isWidth
? elemSize.paddingLeft +
elemSize.paddingRight +
elemSize.borderLeftWidth +
elemSize.borderRightWidth
: elemSize.paddingBottom +
elemSize.paddingTop +
elemSize.borderTopWidth +
elemSize.borderBottomWidth;
}
measure = Math.max(measure, 0);
this.element.style[isWidth ? "width" : "height"] = measure + "px";
};
proto._emitCompleteOnItems = function (eventName, items) {
var _this = this;
function onComplete() {
_this.dispatchEvent(eventName + "Complete", null, [items]);
}
var count = items.length;
if (!items || !count) {
onComplete();
return;
}
var doneCount = 0;
function tick() {
doneCount++;
if (doneCount === count) {
onComplete();
}
}
items.forEach(function(item) {
item.once(eventName, tick);
});
};
proto.dispatchEvent = function (type, event, args) {
var emitArgs = event ? [event].concat(args) : args;
this.emitEvent(type, emitArgs);
if (jQuery) {
this.$element = this.$element || jQuery(this.element);
if (event) {
var $event = jQuery.Event(event);
$event.type = type;
this.$element.trigger($event, args);
} else {
this.$element.trigger(type, args);
}
}
};
proto.ignore = function (elem) {
var item = this.getItem(elem);
if (item) {
item.isIgnored = true;
}
};
proto.unignore = function (elem) {
var item = this.getItem(elem);
if (item) {
delete item.isIgnored;
}
};
proto.stamp = function (elems) {
elems = this._find(elems);
if (!elems) {
return;
}
this.stamps = this.stamps.concat(elems);
elems.forEach(this.ignore, this);
};
proto.unstamp = function (elems) {
elems = this._find(elems);
if (!elems) {
return;
}
elems.forEach(function(elem) {
utils.removeFrom(this.stamps, elem);
this.unignore(elem);
}, this);
};
proto._find = function (elems) {
if (!elems) {
return;
}
if (typeof elems === "string") {
elems = this.element.querySelectorAll(elems);
}
elems = utils.makeArray(elems);
return elems;
};
proto._manageStamps = function () {
if (!this.stamps || !this.stamps.length) {
return;
}
this._getBoundingRect();
this.stamps.forEach(this._manageStamp, this);
};
proto._getBoundingRect = function () {
var boundingRect = this.element.getBoundingClientRect();
var size = this.size;
this._boundingRect = {
left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
top: boundingRect.top + size.paddingTop + size.borderTopWidth,
right:
boundingRect.right -
(size.paddingRight + size.borderRightWidth),
bottom:
boundingRect.bottom -
(size.paddingBottom + size.borderBottomWidth)
};
};
proto._manageStamp = noop;
proto._getElementOffset = function (elem) {
var boundingRect = elem.getBoundingClientRect();
var thisRect = this._boundingRect;
var size = getSize(elem);
var offset = {
left: boundingRect.left - thisRect.left - size.marginLeft,
top: boundingRect.top - thisRect.top - size.marginTop,
right: thisRect.right - boundingRect.right - size.marginRight,
bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
};
return offset;
};
proto.handleEvent = utils.handleEvent;
proto.bindResize = function () {
window.addEventListener("resize", this);
this.isResizeBound = true;
};
proto.unbindResize = function () {
window.removeEventListener("resize", this);
this.isResizeBound = false;
};
proto.onresize = function () {
this.resize();
};
utils.debounceMethod(Outlayer, "onresize", 100);
proto.resize = function () {
if (!this.isResizeBound || !this.needsResizeLayout()) {
return;
}
this.layout();
};
proto.needsResizeLayout = function () {
var size = getSize(this.element);
var hasSizes = this.size && size;
return hasSizes && size.innerWidth !== this.size.innerWidth;
};
proto.addItems = function (elems) {
var items = this._itemize(elems);
if (items.length) {
this.items = this.items.concat(items);
}
return items;
};
proto.appended = function (elems) {
var items = this.addItems(elems);
if (!items.length) {
return;
}
this.layoutItems(items, true);
this.reveal(items);
};
proto.prepended = function (elems) {
var items = this._itemize(elems);
if (!items.length) {
return;
}
var previousItems = this.items.slice(0);
this.items = items.concat(previousItems);
this._resetLayout();
this._manageStamps();
this.layoutItems(items, true);
this.reveal(items);
this.layoutItems(previousItems);
};
proto.reveal = function (items) {
this._emitCompleteOnItems("reveal", items);
if (!items || !items.length) {
return;
}
var stagger = this.updateStagger();
items.forEach(function(item, i) {
item.stagger(i * stagger);
item.reveal();
});
};
proto.hide = function (items) {
this._emitCompleteOnItems("hide", items);
if (!items || !items.length) {
return;
}
var stagger = this.updateStagger();
items.forEach(function(item, i) {
item.stagger(i * stagger);
item.hide();
});
};
proto.revealItemElements = function (elems) {
var items = this.getItems(elems);
this.reveal(items);
};
proto.hideItemElements = function (elems) {
var items = this.getItems(elems);
this.hide(items);
};
proto.getItem = function (elem) {
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
if (item.element === elem) {
return item;
}
}
};
proto.getItems = function (elems) {
elems = utils.makeArray(elems);
var items = [];
elems.forEach(function(elem) {
var item = this.getItem(elem);
if (item) {
items.push(item);
}
}, this);
return items;
};
proto.remove = function (elems) {
var removeItems = this.getItems(elems);
this._emitCompleteOnItems("remove", removeItems);
if (!removeItems || !removeItems.length) {
return;
}
removeItems.forEach(function(item) {
item.remove();
utils.removeFrom(this.items, item);
}, this);
};
proto.destroy = function () {
var style = this.element.style;
style.height = "";
style.position = "";
style.width = "";
this.items.forEach(function(item) {
item.destroy();
});
this.unbindResize();
var id = this.element.outlayerGUID;
delete instances[id];
delete this.element.outlayerGUID;
if (jQuery) {
jQuery.removeData(this.element, this.constructor.namespace);
}
};
Outlayer.data = function (elem) {
elem = utils.getQueryElement(elem);
var id = elem && elem.outlayerGUID;
return id && instances[id];
};
Outlayer.create = function (namespace, options) {
var Layout = subclass(Outlayer);
Layout.defaults = utils.extend({}, Outlayer.defaults);
utils.extend(Layout.defaults, options);
Layout.compatOptions = utils.extend({}, Outlayer.compatOptions);
Layout.namespace = namespace;
Layout.data = Outlayer.data;
Layout.Item = subclass(Item);
utils.htmlInit(Layout, namespace);
if (jQuery && jQuery.bridget) {
jQuery.bridget(namespace, Layout);
}
return Layout;
};
function subclass(Parent) {
function SubClass() {
Parent.apply(this, arguments);
}
SubClass.prototype = Object.create(Parent.prototype);
SubClass.prototype.constructor = SubClass;
return SubClass;
}
var msUnits = {
ms: 1,
s: 1000
};
function getMilliseconds(time) {
if (typeof time === "number") {
return time;
}
var matches = time.match(/(^\d*\.?\d*)(\w*)/);
var num = matches && matches[1];
var unit = matches && matches[2];
if (!num.length) {
return 0;
}
num = parseFloat(num);
var mult = msUnits[unit] || 1;
return num * mult;
}
Outlayer.Item = Item;
return Outlayer;
});
(function(window, factory) {
window.Isotope = window.Isotope || {};
window.Isotope.Item = factory(window.Outlayer);
})("undefined" !== typeof window ? window : this, function factory(Outlayer) {
"use strict";
function Item() {
Outlayer.Item.apply(this, arguments);
}
var proto = (Item.prototype = Object.create(Outlayer.Item.prototype));
var _create = proto._create;
proto._create = function () {
this.id = this.layout.itemGUID++;
_create.call(this);
this.sortData = {};
};
proto.updateSortData = function () {
if (this.isIgnored) {
return;
}
this.sortData.id = this.id;
this.sortData["original-order"] = this.id;
this.sortData.random = Math.random();
var getSortData = this.layout.options.getSortData;
var sorters = this.layout._sorters;
for (var key in getSortData) {
var sorter = sorters[key];
this.sortData[key] = sorter(this.element, this);
}
};
var _destroy = proto.destroy;
proto.destroy = function () {
_destroy.apply(this, arguments);
this.css({
display: ""
});
};
return Item;
});
(function(window, factory) {
window.Isotope = window.Isotope || {};
window.Isotope.LayoutMode = factory(window.getSize, window.Outlayer);
})("undefined" !== typeof window ? window : this, function factory(
getSize,
Outlayer
) {
"use strict";
function LayoutMode(isotope) {
this.isotope = isotope;
if (isotope) {
this.options = isotope.options[this.namespace];
this.element = isotope.element;
this.items = isotope.filteredItems;
this.size = isotope.size;
}
}
var proto = LayoutMode.prototype;
var facadeMethods = [
"_resetLayout",
"_getItemLayoutPosition",
"_manageStamp",
"_getContainerSize",
"_getElementOffset",
"needsResizeLayout",
"_getOption"
];
facadeMethods.forEach(function(methodName) {
proto[methodName] = function () {
return Outlayer.prototype[methodName].apply(
this.isotope,
arguments
);
};
});
proto.needsVerticalResizeLayout = function () {
var size = getSize(this.isotope.element);
var hasSizes = this.isotope.size && size;
return hasSizes && size.innerHeight != this.isotope.size.innerHeight;
};
proto._getMeasurement = function () {
this.isotope._getMeasurement.apply(this, arguments);
};
proto.getColumnWidth = function () {
this.getSegmentSize("column", "Width");
};
proto.getRowHeight = function () {
this.getSegmentSize("row", "Height");
};
proto.getSegmentSize = function (segment, size) {
var segmentName = segment + size;
var outerSize = "outer" + size;
this._getMeasurement(segmentName, outerSize);
if (this[segmentName]) {
return;
}
var firstItemSize = this.getFirstItemSize();
this[segmentName] =
(firstItemSize && firstItemSize[outerSize]) ||
this.isotope.size["inner" + size];
};
proto.getFirstItemSize = function () {
var firstItem = this.isotope.filteredItems[0];
return firstItem && firstItem.element && getSize(firstItem.element);
};
proto.layout = function () {
this.isotope.layout.apply(this.isotope, arguments);
};
proto.getSize = function () {
this.isotope.getSize();
this.size = this.isotope.size;
};
LayoutMode.modes = {};
LayoutMode.create = function (namespace, options) {
function Mode() {
LayoutMode.apply(this, arguments);
}
Mode.prototype = Object.create(proto);
Mode.prototype.constructor = Mode;
if (options) {
Mode.options = options;
}
Mode.prototype.namespace = namespace;
LayoutMode.modes[namespace] = Mode;
return Mode;
};
return LayoutMode;
});
(function(window, factory) {
window.Masonry = factory(window.Outlayer, window.getSize);
})("undefined" !== typeof window ? window : this, function factory(
Outlayer,
getSize
) {
var Masonry = Outlayer.create("masonry");
Masonry.compatOptions.fitWidth = "isFitWidth";
Masonry.prototype._resetLayout = function () {
this.getSize();
this._getMeasurement("columnWidth", "outerWidth");
this._getMeasurement("gutter", "outerWidth");
this.measureColumns();
this.colYs = [];
for (var i = 0; i < this.cols; i++) {
this.colYs.push(0);
}
this.maxY = 0;
};
Masonry.prototype.measureColumns = function () {
this.getContainerWidth();
if (!this.columnWidth) {
var firstItem = this.items[0];
var firstItemElem = firstItem && firstItem.element;
this.columnWidth =
(firstItemElem && getSize(firstItemElem).outerWidth) ||
this.containerWidth;
}
var columnWidth = (this.columnWidth += this.gutter);
var containerWidth = this.containerWidth + this.gutter;
var cols = containerWidth / columnWidth;
var excess = columnWidth - (containerWidth % columnWidth);
var mathMethod = excess && excess < 1 ? "round" : "floor";
cols = Math[mathMethod](cols);
this.cols = Math.max(cols, 1);
};
Masonry.prototype.getContainerWidth = function () {
var isFitWidth = this._getOption("fitWidth");
var container = isFitWidth ? this.element.parentNode : this.element;
var size = getSize(container);
this.containerWidth = size && size.innerWidth;
};
Masonry.prototype._getItemLayoutPosition = function (item) {
item.getSize();
var remainder = item.size.outerWidth % this.columnWidth;
var mathMethod = remainder && remainder < 1 ? "round" : "ceil";
var colSpan = Math[mathMethod](item.size.outerWidth / this.columnWidth);
colSpan = Math.min(colSpan, this.cols);
var colGroup = this._getColGroup(colSpan);
var minimumY = Math.min.apply(Math, colGroup);
var shortColIndex = colGroup.indexOf(minimumY);
var position = {
x: this.columnWidth * shortColIndex,
y: minimumY
};
var setHeight = minimumY + item.size.outerHeight;
var setSpan = this.cols + 1 - colGroup.length;
for (var i = 0; i < setSpan; i++) {
this.colYs[shortColIndex + i] = setHeight;
}
return position;
};
Masonry.prototype._getColGroup = function (colSpan) {
if (colSpan < 2) {
return this.colYs;
}
var colGroup = [];
var groupCount = this.cols + 1 - colSpan;
for (var i = 0; i < groupCount; i++) {
var groupColYs = this.colYs.slice(i, i + colSpan);
colGroup[i] = Math.max.apply(Math, groupColYs);
}
return colGroup;
};
Masonry.prototype._manageStamp = function (stamp) {
var stampSize = getSize(stamp);
var offset = this._getElementOffset(stamp);
var isOriginLeft = this._getOption("originLeft");
var firstX = isOriginLeft ? offset.left : offset.right;
var lastX = firstX + stampSize.outerWidth;
var firstCol = Math.floor(firstX / this.columnWidth);
firstCol = Math.max(0, firstCol);
var lastCol = Math.floor(lastX / this.columnWidth);
lastCol -= lastX % this.columnWidth ? 0 : 1;
lastCol = Math.min(this.cols - 1, lastCol);
var isOriginTop = this._getOption("originTop");
var stampMaxY =
(isOriginTop ? offset.top : offset.bottom) + stampSize.outerHeight;
for (var i = firstCol; i <= lastCol; i++) {
this.colYs[i] = Math.max(stampMaxY, this.colYs[i]);
}
};
Masonry.prototype._getContainerSize = function () {
this.maxY = Math.max.apply(Math, this.colYs);
var size = {
height: this.maxY
};
if (this._getOption("fitWidth")) {
size.width = this._getContainerFitWidth();
}
return size;
};
Masonry.prototype._getContainerFitWidth = function () {
var unusedCols = 0;
var i = this.cols;
while (--i) {
if (this.colYs[i] !== 0) {
break;
}
unusedCols++;
}
return (this.cols - unusedCols) * this.columnWidth - this.gutter;
};
Masonry.prototype.needsResizeLayout = function () {
var previousWidth = this.containerWidth;
this.getContainerWidth();
return previousWidth !== this.containerWidth;
};
return Masonry;
});
(function(window, factory) {
factory(window.Isotope.LayoutMode, window.Masonry);
})("undefined" !== typeof window ? window : this, function factory(
LayoutMode,
Masonry
) {
"use strict";
var MasonryMode = LayoutMode.create("masonry");
var proto = MasonryMode.prototype;
var keepModeMethods = {
_getElementOffset: true,
layout: true,
_getMeasurement: true
};
for (var method in Masonry.prototype) {
if (!keepModeMethods[method]) {
proto[method] = Masonry.prototype[method];
}
}
var measureColumns = proto.measureColumns;
proto.measureColumns = function () {
this.items = this.isotope.filteredItems;
measureColumns.call(this);
};
var _getOption = proto._getOption;
proto._getOption = function (option) {
if (option == "fitWidth") {
return this.options.isFitWidth !== undefined
? this.options.isFitWidth
: this.options.fitWidth;
}
return _getOption.apply(this.isotope, arguments);
};
return MasonryMode;
});
(function(window, factory) {
factory(window.Isotope.LayoutMode);
})("undefined" !== typeof window ? window : this, function factory(LayoutMode) {
"use strict";
var FitRows = LayoutMode.create("fitRows");
var proto = FitRows.prototype;
proto._resetLayout = function () {
this.x = 0;
this.y = 0;
this.maxY = 0;
this._getMeasurement("gutter", "outerWidth");
};
proto._getItemLayoutPosition = function (item) {
item.getSize();
var itemWidth = item.size.outerWidth + this.gutter;
var containerWidth = this.isotope.size.innerWidth + this.gutter;
if (this.x !== 0 && itemWidth + this.x > containerWidth) {
this.x = 0;
this.y = this.maxY;
}
var position = {
x: this.x,
y: this.y
};
this.maxY = Math.max(this.maxY, this.y + item.size.outerHeight);
this.x += itemWidth;
return position;
};
proto._getContainerSize = function () {
return {
height: this.maxY
};
};
return FitRows;
});
(function(window, factory) {
factory(window.Isotope.LayoutMode);
})("undefined" !== typeof window ? window : this, function factory(LayoutMode) {
"use strict";
var Vertical = LayoutMode.create("vertical", {
horizontalAlignment: 0
});
var proto = Vertical.prototype;
proto._resetLayout = function () {
this.y = 0;
};
proto._getItemLayoutPosition = function (item) {
item.getSize();
var x =
(this.isotope.size.innerWidth - item.size.outerWidth) *
this.options.horizontalAlignment;
var y = this.y;
this.y += item.size.outerHeight;
return {
x: x,
y: y
};
};
proto._getContainerSize = function () {
return {
height: this.y
};
};
return Vertical;
});
(function(window, factory) {
window.Isotope = factory(
window,
window.Outlayer,
window.getSize,
window.matchesSelector,
window.fizzyUIUtils,
window.Isotope.Item,
window.Isotope.LayoutMode
);
})("undefined" !== typeof window ? window : this, function factory(
window,
Outlayer,
getSize,
matchesSelector,
utils,
Item,
LayoutMode
) {
var jQuery = window.jQuery;
var trim = String.prototype.trim
? function(str) {
return str.trim();
}
: function(str) {
return str.replace(/^\s+|\s+$/g, "");
};
var Isotope = Outlayer.create("isotope", {
layoutMode: "masonry",
isJQueryFiltering: true,
sortAscending: true
});
Isotope.Item = Item;
Isotope.LayoutMode = LayoutMode;
var proto = Isotope.prototype;
proto._create = function () {
this.itemGUID = 0;
this._sorters = {};
this._getSorters();
Outlayer.prototype._create.call(this);
this.modes = {};
this.filteredItems = this.items;
this.sortHistory = ["original-order"];
for (var name in LayoutMode.modes) {
this._initLayoutMode(name);
}
};
proto.reloadItems = function () {
this.itemGUID = 0;
Outlayer.prototype.reloadItems.call(this);
};
proto._itemize = function () {
var items = Outlayer.prototype._itemize.apply(this, arguments);
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.id = this.itemGUID++;
}
this._updateItemsSortData(items);
return items;
};
proto._initLayoutMode = function (name) {
var Mode = LayoutMode.modes[name];
var initialOpts = this.options[name] || {};
this.options[name] = Mode.options
? utils.extend(Mode.options, initialOpts)
: initialOpts;
this.modes[name] = new Mode(this);
};
proto.layout = function () {
if (!this._isLayoutInited && this._getOption("initLayout")) {
this.arrange();
return;
}
this._layout();
};
proto._layout = function () {
var isInstant = this._getIsInstant();
this._resetLayout();
this._manageStamps();
this.layoutItems(this.filteredItems, isInstant);
this._isLayoutInited = true;
};
proto.arrange = function (opts) {
this.option(opts);
this._getIsInstant();
var filtered = this._filter(this.items);
this.filteredItems = filtered.matches;
this._bindArrangeComplete();
if (this._isInstant) {
this._noTransition(this._hideReveal, [filtered]);
} else {
this._hideReveal(filtered);
}
this._sort();
this._layout();
};
proto._init = proto.arrange;
proto._hideReveal = function (filtered) {
this.reveal(filtered.needReveal);
this.hide(filtered.needHide);
};
proto._getIsInstant = function () {
var isLayoutInstant = this._getOption("layoutInstant");
var isInstant =
isLayoutInstant !== undefined
? isLayoutInstant
: !this._isLayoutInited;
this._isInstant = isInstant;
return isInstant;
};
proto._bindArrangeComplete = function () {
var isLayoutComplete, isHideComplete, isRevealComplete;
var _this = this;
function arrangeParallelCallback() {
if (isLayoutComplete && isHideComplete && isRevealComplete) {
_this.dispatchEvent("arrangeComplete", null, [
_this.filteredItems
]);
}
}
this.once("layoutComplete", function () {
isLayoutComplete = true;
arrangeParallelCallback();
});
this.once("hideComplete", function () {
isHideComplete = true;
arrangeParallelCallback();
});
this.once("revealComplete", function () {
isRevealComplete = true;
arrangeParallelCallback();
});
};
proto._filter = function (items) {
var filter = this.options.filter;
filter = filter || "*";
var matches = [];
var hiddenMatched = [];
var visibleUnmatched = [];
var test = this._getFilterTest(filter);
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.isIgnored) {
continue;
}
var isMatched = test(item);
if (isMatched) {
matches.push(item);
}
if (isMatched && item.isHidden) {
hiddenMatched.push(item);
} else if (!isMatched && !item.isHidden) {
visibleUnmatched.push(item);
}
}
return {
matches: matches,
needReveal: hiddenMatched,
needHide: visibleUnmatched
};
};
proto._getFilterTest = function (filter) {
if (jQuery && this.options.isJQueryFiltering) {
return function (item) {
return jQuery(item.element).is(filter);
};
}
if (typeof filter == "function") {
return function (item) {
return filter(item.element);
};
}
return function (item) {
return matchesSelector(item.element, filter);
};
};
proto.updateSortData = function (elems) {
var items;
if (elems) {
elems = utils.makeArray(elems);
items = this.getItems(elems);
} else {
items = this.items;
}
this._getSorters();
this._updateItemsSortData(items);
};
proto._getSorters = function () {
var getSortData = this.options.getSortData;
for (var key in getSortData) {
var sorter = getSortData[key];
this._sorters[key] = mungeSorter(sorter);
}
};
proto._updateItemsSortData = function (items) {
var len = items && items.length;
for (var i = 0; len && i < len; i++) {
var item = items[i];
item.updateSortData();
}
};
var mungeSorter = (function () {
function mungeSorter(sorter) {
if (typeof sorter != "string") {
return sorter;
}
var args = trim(sorter).split(" ");
var query = args[0];
var attrMatch = query.match(/^\[(.+)\]$/);
var attr = attrMatch && attrMatch[1];
var getValue = getValueGetter(attr, query);
var parser = Isotope.sortDataParsers[args[1]];
sorter = parser
? function(elem) {
return elem && parser(getValue(elem));
}
: function(elem) {
return elem && getValue(elem);
};
return sorter;
}
function getValueGetter(attr, query) {
if (attr) {
return function getAttribute(elem) {
return elem.getAttribute(attr);
};
}
return function getChildText(elem) {
var child = elem.querySelector(query);
return child && child.textContent;
};
}
return mungeSorter;
})();
Isotope.sortDataParsers = {
parseInt: (function(_parseInt) {
function parseInt(_x) {
return _parseInt.apply(this, arguments);
}
parseInt.toString = function () {
return _parseInt.toString();
};
return parseInt;
})(function(val) {
return parseInt(val, 10);
}),
parseFloat: (function(_parseFloat) {
function parseFloat(_x2) {
return _parseFloat.apply(this, arguments);
}
parseFloat.toString = function () {
return _parseFloat.toString();
};
return parseFloat;
})(function(val) {
return parseFloat(val);
})
};
proto._sort = function () {
var sortByOpt = this.options.sortBy;
if (!sortByOpt) {
return;
}
var sortBys = [].concat.apply(sortByOpt, this.sortHistory);
var itemSorter = getItemSorter(sortBys, this.options.sortAscending);
this.filteredItems.sort(itemSorter);
if (sortByOpt != this.sortHistory[0]) {
this.sortHistory.unshift(sortByOpt);
}
};
function getItemSorter(sortBys, sortAsc) {
return function sorter(itemA, itemB) {
for (var i = 0; i < sortBys.length; i++) {
var sortBy = sortBys[i];
var a = itemA.sortData[sortBy];
var b = itemB.sortData[sortBy];
if (a > b || a < b) {
var isAscending =
sortAsc[sortBy] !== undefined
? sortAsc[sortBy]
: sortAsc;
var direction = isAscending ? 1 : -1;
return (a > b ? 1 : -1) * direction;
}
}
return 0;
};
}
proto._mode = function () {
var layoutMode = this.options.layoutMode;
var mode = this.modes[layoutMode];
if (!mode) {
throw new Error("No layout mode: " + layoutMode);
}
mode.options = this.options[layoutMode];
return mode;
};
proto._resetLayout = function () {
Outlayer.prototype._resetLayout.call(this);
this._mode()._resetLayout();
};
proto._getItemLayoutPosition = function (item) {
return this._mode()._getItemLayoutPosition(item);
};
proto._manageStamp = function (stamp) {
this._mode()._manageStamp(stamp);
};
proto._getContainerSize = function () {
return this._mode()._getContainerSize();
};
proto.needsResizeLayout = function () {
return this._mode().needsResizeLayout();
};
proto.appended = function (elems) {
var items = this.addItems(elems);
if (!items.length) {
return;
}
var filteredItems = this._filterRevealAdded(items);
this.filteredItems = this.filteredItems.concat(filteredItems);
};
proto.prepended = function (elems) {
var items = this._itemize(elems);
if (!items.length) {
return;
}
this._resetLayout();
this._manageStamps();
var filteredItems = this._filterRevealAdded(items);
this.layoutItems(this.filteredItems);
this.filteredItems = filteredItems.concat(this.filteredItems);
this.items = items.concat(this.items);
};
proto._filterRevealAdded = function (items) {
var filtered = this._filter(items);
this.hide(filtered.needHide);
this.reveal(filtered.matches);
this.layoutItems(filtered.matches, true);
return filtered.matches;
};
proto.insert = function (elems) {
var items = this.addItems(elems);
if (!items.length) {
return;
}
var i, item;
var len = items.length;
for (i = 0; i < len; i++) {
item = items[i];
this.element.appendChild(item.element);
}
var filteredInsertItems = this._filter(items).matches;
for (i = 0; i < len; i++) {
items[i].isLayoutInstant = true;
}
this.arrange();
for (i = 0; i < len; i++) {
delete items[i].isLayoutInstant;
}
this.reveal(filteredInsertItems);
};
var _remove = proto.remove;
proto.remove = function (elems) {
elems = utils.makeArray(elems);
var removeItems = this.getItems(elems);
_remove.call(this, elems);
var len = removeItems && removeItems.length;
for (var i = 0; len && i < len; i++) {
var item = removeItems[i];
utils.removeFrom(this.filteredItems, item);
}
};
proto.shuffle = function () {
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
item.sortData.random = Math.random();
}
this.options.sortBy = "random";
this._sort();
this._layout();
};
proto._noTransition = function (fn, args) {
var transitionDuration = this.options.transitionDuration;
this.options.transitionDuration = 0;
var returnValue = fn.apply(this, args);
this.options.transitionDuration = transitionDuration;
return returnValue;
};
proto.getFilteredItemElements = function () {
return this.filteredItems.map(function(item) {
return item.element;
});
};
return Isotope;
});
/*jshint forin: true */
/*!
* modified imagesLoaded PACKAGED v4.1.1
* JavaScript is all like "You images are done yet or what?"
* MIT License
* removed module check
* exposed as window property
* passes jshint
*/
(function(root, factory) {
root.EvEmitter = factory();
})("undefined" !== typeof window ? window : this, function () {
function EvEmitter() {}
var proto = EvEmitter.prototype;
proto.on = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
var events = (this._events = this._events || {});
var listeners = (events[eventName] = events[eventName] || []);
if (listeners.indexOf(listener) === -1) {
listeners.push(listener);
}
return this;
};
proto.once = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
this.on(eventName, listener);
var onceEvents = (this._onceEvents = this._onceEvents || {});
var onceListeners = (onceEvents[eventName] =
onceEvents[eventName] || {});
onceListeners[listener] = true;
return this;
};
proto.off = function (eventName, listener) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
var index = listeners.indexOf(listener);
if (index !== -1) {
listeners.splice(index, 1);
}
return this;
};
proto.emitEvent = function (eventName, args) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
var i = 0;
var listener = listeners[i];
args = args || [];
var onceListeners = this._onceEvents && this._onceEvents[eventName];
while (listener) {
var isOnce = onceListeners && onceListeners[listener];
if (isOnce) {
this.off(eventName, listener);
delete onceListeners[listener];
}
listener.apply(this, args);
i += isOnce ? 0 : 1;
listener = listeners[i];
}
return this;
};
return EvEmitter;
});
(function(window, factory) {
"use strict";
window.imagesLoaded = factory(window, window.EvEmitter);
})("undefined" !== typeof window ? window : this, function factory(
window,
EvEmitter
) {
var $ = window.jQuery;
var console = window.console;
function extend(a, b) {
for (var prop in b) {
if (b.hasOwnProperty(prop)) {
a[prop] = b[prop];
}
}
return a;
}
function makeArray(obj) {
var ary = [];
if (Array.isArray(obj)) {
ary = obj;
} else if (typeof obj.length === "number") {
for (var i = 0; i < obj.length; i++) {
ary.push(obj[i]);
}
} else {
ary.push(obj);
}
return ary;
}
function ImagesLoaded(elem, options, onAlways) {
if (!(this instanceof ImagesLoaded)) {
return new ImagesLoaded(elem, options, onAlways);
}
if (typeof elem === "string") {
elem = document.querySelectorAll(elem);
}
this.elements = makeArray(elem);
this.options = extend({}, this.options);
if (typeof options === "function") {
onAlways = options;
} else {
extend(this.options, options);
}
if (onAlways) {
this.on("always", onAlways);
}
this.getImages();
if ($) {
this.jqDeferred = new $.Deferred();
}
setTimeout(
function() {
this.check();
}.bind(this)
);
}
ImagesLoaded.prototype = Object.create(EvEmitter.prototype);
ImagesLoaded.prototype.options = {};
ImagesLoaded.prototype.getImages = function () {
this.images = [];
this.elements.forEach(this.addElementImages, this);
};
ImagesLoaded.prototype.addElementImages = function (elem) {
if (elem.nodeName === "img") {
this.addImage(elem);
}
if (this.options.background === true) {
this.addElementBackgroundImages(elem);
}
var nodeType = elem.nodeType;
if (!nodeType || !elementNodeTypes[nodeType]) {
return;
}
var childImgs = elem.querySelectorAll("img");
for (var i = 0; i < childImgs.length; i++) {
var img = childImgs[i];
this.addImage(img);
}
if (typeof this.options.background === "string") {
var children = elem.querySelectorAll(this.options.background);
for (i = 0; i < children.length; i++) {
var child = children[i];
this.addElementBackgroundImages(child);
}
}
};
var elementNodeTypes = {
1: true,
9: true,
11: true
};
ImagesLoaded.prototype.addElementBackgroundImages = function (elem) {
var style = getComputedStyle(elem);
if (!style) {
return;
}
var reURL = /url\((['"])?(.*?)\1\)/gi;
var matches = reURL.exec(style.backgroundImage);
while (matches !== null) {
var url = matches && matches[2];
if (url) {
this.addBackground(url, elem);
}
matches = reURL.exec(style.backgroundImage);
}
};
ImagesLoaded.prototype.addImage = function (img) {
var loadingImage = new LoadingImage(img);
this.images.push(loadingImage);
};
ImagesLoaded.prototype.addBackground = function (url, elem) {
var background = new Background(url, elem);
this.images.push(background);
};
ImagesLoaded.prototype.check = function () {
var _this = this;
this.progressedCount = 0;
this.hasAnyBroken = false;
if (!this.images.length) {
this.complete();
return;
}
function onProgress(image, elem, message) {
setTimeout(function () {
_this.progress(image, elem, message);
});
}
this.images.forEach(function(loadingImage) {
loadingImage.once("progress", onProgress);
loadingImage.check();
});
};
ImagesLoaded.prototype.progress = function (image, elem, message) {
this.progressedCount++;
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
this.emitEvent("progress", [this, image, elem]);
if (this.jqDeferred && this.jqDeferred.notify) {
this.jqDeferred.notify(this, image);
}
if (this.progressedCount === this.images.length) {
this.complete();
}
if (this.options.debug && console) {
console.log("progress: " + message, image, elem);
}
};
ImagesLoaded.prototype.complete = function () {
var eventName = this.hasAnyBroken ? "fail" : "done";
this.isComplete = true;
this.emitEvent(eventName, [this]);
this.emitEvent("always", [this]);
if (this.jqDeferred) {
var jqMethod = this.hasAnyBroken ? "reject" : "resolve";
this.jqDeferred[jqMethod](this);
}
};
function LoadingImage(img) {
this.img = img;
}
LoadingImage.prototype = Object.create(EvEmitter.prototype);
LoadingImage.prototype.check = function () {
var isComplete = this.getIsImageComplete();
if (isComplete) {
this.confirm(this.img.naturalWidth !== 0, "naturalWidth");
return;
}
this.proxyImage = new Image();
this.proxyImage.addEventListener("load", this);
this.proxyImage.addEventListener("error", this);
this.img.addEventListener("load", this);
this.img.addEventListener("error", this);
this.proxyImage.src = this.img.src;
};
LoadingImage.prototype.getIsImageComplete = function () {
return this.img.complete && this.img.naturalWidth !== undefined;
};
LoadingImage.prototype.confirm = function (isLoaded, message) {
this.isLoaded = isLoaded;
this.emitEvent("progress", [this, this.img, message]);
};
LoadingImage.prototype.handleEvent = function (event) {
var method = "on" + event.type;
if (this[method]) {
this[method](event);
}
};
LoadingImage.prototype.onload = function () {
this.confirm(true, "onload");
this.unbindEvents();
};
LoadingImage.prototype.onerror = function () {
this.confirm(false, "onerror");
this.unbindEvents();
};
LoadingImage.prototype.unbindEvents = function () {
this.proxyImage.removeEventListener("load", this);
this.proxyImage.removeEventListener("error", this);
this.img.removeEventListener("load", this);
this.img.removeEventListener("error", this);
};
function Background(url, element) {
this.url = url;
this.element = element;
this.img = new Image();
}
Background.prototype = Object.create(LoadingImage.prototype);
Background.prototype.check = function () {
this.img.addEventListener("load", this);
this.img.addEventListener("error", this);
this.img.src = this.url;
var isComplete = this.getIsImageComplete();
if (isComplete) {
this.confirm(this.img.naturalWidth !== 0, "naturalWidth");
this.unbindEvents();
}
};
Background.prototype.unbindEvents = function () {
this.img.removeEventListener("load", this);
this.img.removeEventListener("error", this);
};
Background.prototype.confirm = function (isLoaded, message) {
this.isLoaded = isLoaded;
this.emitEvent("progress", [this, this.element, message]);
};
ImagesLoaded.makeJQueryPlugin = function (jQuery) {
jQuery = jQuery || window.jQuery;
if (!jQuery) {
return;
}
$ = jQuery;
$.fn.imagesLoaded = function (options, callback) {
var instance = new ImagesLoaded(this, options, callback);
return instance.jqDeferred.promise($(this));
};
};
ImagesLoaded.makeJQueryPlugin();
return ImagesLoaded;
});
var _extends =
Object.assign ||
function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var LazyLoad = (function () {
"use strict";
var defaultSettings = {
elements_selector: "img",
container: document,
threshold: 300,
thresholds: null,
data_src: "src",
data_srcset: "srcset",
data_sizes: "sizes",
data_bg: "bg",
class_loading: "loading",
class_loaded: "loaded",
class_error: "error",
load_delay: 0,
callback_load: null,
callback_error: null,
callback_set: null,
callback_enter: null,
callback_finish: null,
to_webp: false
};
var getInstanceSettings = function getInstanceSettings(customSettings) {
return _extends({}, defaultSettings, customSettings);
};
var dataPrefix = "data-";
var processedDataName = "was-processed";
var timeoutDataName = "ll-timeout";
var trueString = "true";
var getData = function getData(element, attribute) {
return element.getAttribute(dataPrefix + attribute);
};
var setData = function setData(element, attribute, value) {
var attrName = dataPrefix + attribute;
if (value === null) {
element.removeAttribute(attrName);
return;
}
element.setAttribute(attrName, value);
};
var setWasProcessedData = function setWasProcessedData(element) {
return setData(element, processedDataName, trueString);
};
var getWasProcessedData = function getWasProcessedData(element) {
return getData(element, processedDataName) === trueString;
};
var setTimeoutData = function setTimeoutData(element, value) {
return setData(element, timeoutDataName, value);
};
var getTimeoutData = function getTimeoutData(element) {
return getData(element, timeoutDataName);
};
var purgeProcessedElements = function purgeProcessedElements(elements) {
return elements.filter(function(element) {
return !getWasProcessedData(element);
});
};
var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
return elements.filter(function(element) {
return element !== elementToPurge;
});
};
/* Creates instance and notifies it through the window element */
var createInstance = function createInstance(classObj, options) {
var event;
var eventString = "LazyLoad::Initialized";
var instance = new classObj(options);
try {
// Works in modern browsers
event = new CustomEvent(eventString, {
detail: {
instance: instance
}
});
} catch (err) {
// Works in Internet Explorer (all versions)
event = document.createEvent("CustomEvent");
event.initCustomEvent(eventString, false, false, {
instance: instance
});
}
window.dispatchEvent(event);
};
/* Auto initialization of one or more instances of lazyload, depending on the
options passed in (plain object or an array) */
function autoInitialize(classObj, options) {
if (!options) {
return;
}
if (!options.length) {
// Plain object
createInstance(classObj, options);
} else {
// Array of objects
for (var i = 0, optionsItem; (optionsItem = options[i]); i += 1) {
createInstance(classObj, optionsItem);
}
}
}
var replaceExtToWebp = function replaceExtToWebp(value, condition) {
return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
};
var detectWebp = function detectWebp() {
var webpString = "image/webp";
var canvas = document.createElement("canvas");
if (canvas.getContext && canvas.getContext("2d")) {
return (
canvas.toDataURL(webpString).indexOf("data:" + webpString) === 0
);
}
return false;
};
var runningOnBrowser = typeof window !== "undefined";
var isBot =
(runningOnBrowser && !("onscroll" in window)) ||
/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
var supportsIntersectionObserver =
runningOnBrowser && "IntersectionObserver" in window;
var supportsClassList =
runningOnBrowser && "classList" in document.createElement("p");
var supportsWebp = runningOnBrowser && detectWebp();
var setSourcesInChildren = function setSourcesInChildren(
parentTag,
attrName,
dataAttrName,
toWebpFlag
) {
for (var i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
if (childTag.tagName === "SOURCE") {
var attrValue = getData(childTag, dataAttrName);
setAttributeIfValue(childTag, attrName, attrValue, toWebpFlag);
}
}
};
var setAttributeIfValue = function setAttributeIfValue(
element,
attrName,
value,
toWebpFlag
) {
if (!value) {
return;
}
element.setAttribute(attrName, replaceExtToWebp(value, toWebpFlag));
};
var setSourcesImg = function setSourcesImg(element, settings) {
var toWebpFlag = supportsWebp && settings.to_webp;
var srcsetDataName = settings.data_srcset;
var parent = element.parentNode;
if (parent && parent.tagName === "PICTURE") {
setSourcesInChildren(parent, "srcset", srcsetDataName, toWebpFlag);
}
var sizesDataValue = getData(element, settings.data_sizes);
setAttributeIfValue(element, "sizes", sizesDataValue);
var srcsetDataValue = getData(element, srcsetDataName);
setAttributeIfValue(element, "srcset", srcsetDataValue, toWebpFlag);
var srcDataValue = getData(element, settings.data_src);
setAttributeIfValue(element, "src", srcDataValue, toWebpFlag);
};
var setSourcesIframe = function setSourcesIframe(element, settings) {
var srcDataValue = getData(element, settings.data_src);
setAttributeIfValue(element, "src", srcDataValue);
};
var setSourcesVideo = function setSourcesVideo(element, settings) {
var srcDataName = settings.data_src;
var srcDataValue = getData(element, srcDataName);
setSourcesInChildren(element, "src", srcDataName);
setAttributeIfValue(element, "src", srcDataValue);
element.load();
};
var setSourcesBgImage = function setSourcesBgImage(element, settings) {
var toWebpFlag = supportsWebp && settings.to_webp;
var srcDataValue = getData(element, settings.data_src);
var bgDataValue = getData(element, settings.data_bg);
if (srcDataValue) {
var setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
element.style.backgroundImage = 'url("' + setValue + '")';
}
if (bgDataValue) {
var _setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
element.style.backgroundImage = _setValue;
}
};
var setSourcesFunctions = {
IMG: setSourcesImg,
IFRAME: setSourcesIframe,
VIDEO: setSourcesVideo
};
var setSources = function setSources(element, instance) {
var settings = instance._settings;
var tagName = element.tagName;
var setSourcesFunction = setSourcesFunctions[tagName];
if (setSourcesFunction) {
setSourcesFunction(element, settings);
instance._updateLoadingCount(1);
instance._elements = purgeOneElement(instance._elements, element);
return;
}
setSourcesBgImage(element, settings);
};
var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className
.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ")
.replace(/^\s+/, "")
.replace(/\s+$/, "");
};
var callbackIfSet = function callbackIfSet(callback, argument) {
if (callback) {
callback(argument);
}
};
var genericLoadEventName = "load";
var mediaLoadEventName = "loadeddata";
var errorEventName = "error";
var addEventListener = function addEventListener(
element,
eventName,
handler
) {
element.addEventListener(eventName, handler);
};
var removeEventListener = function removeEventListener(
element,
eventName,
handler
) {
element.removeEventListener(eventName, handler);
};
var addEventListeners = function addEventListeners(
element,
loadHandler,
errorHandler
) {
addEventListener(element, genericLoadEventName, loadHandler);
addEventListener(element, mediaLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
};
var removeEventListeners = function removeEventListeners(
element,
loadHandler,
errorHandler
) {
removeEventListener(element, genericLoadEventName, loadHandler);
removeEventListener(element, mediaLoadEventName, loadHandler);
removeEventListener(element, errorEventName, errorHandler);
};
var eventHandler = function eventHandler(event, success, instance) {
var settings = instance._settings;
var className = success ? settings.class_loaded : settings.class_error;
var callback = success
? settings.callback_load
: settings.callback_error;
var element = event.target;
removeClass(element, settings.class_loading);
addClass(element, className);
callbackIfSet(callback, element);
instance._updateLoadingCount(-1);
};
var addOneShotEventListeners = function addOneShotEventListeners(
element,
instance
) {
var loadHandler = function loadHandler(event) {
eventHandler(event, true, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
var errorHandler = function errorHandler(event) {
eventHandler(event, false, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
addEventListeners(element, loadHandler, errorHandler);
};
var managedTags = ["IMG", "IFRAME", "VIDEO"];
var loadAndUnobserve = function loadAndUnobserve(
element,
observer,
instance
) {
revealElement(element, instance);
observer.unobserve(element);
};
var cancelDelayLoad = function cancelDelayLoad(element) {
var timeoutId = getTimeoutData(element);
if (!timeoutId) {
return; // do nothing if timeout doesn't exist
}
clearTimeout(timeoutId);
setTimeoutData(element, null);
};
var delayLoad = function delayLoad(element, observer, instance) {
var loadDelay = instance._settings.load_delay;
var timeoutId = getTimeoutData(element);
if (timeoutId) {
return; // do nothing if timeout already set
}
timeoutId = setTimeout(function () {
loadAndUnobserve(element, observer, instance);
cancelDelayLoad(element);
}, loadDelay);
setTimeoutData(element, timeoutId);
};
function revealElement(element, instance, force) {
var settings = instance._settings;
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true
}
callbackIfSet(settings.callback_enter, element);
if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, instance);
addClass(element, settings.class_loading);
}
setSources(element, instance);
setWasProcessedData(element);
callbackIfSet(settings.callback_set, element);
}
/* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and
entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
var isIntersecting = function isIntersecting(entry) {
return entry.isIntersecting || entry.intersectionRatio > 0;
};
var getObserverSettings = function getObserverSettings(settings) {
return {
root: settings.container === document ? null : settings.container,
rootMargin: settings.thresholds || settings.threshold + "px"
};
};
var LazyLoad = function LazyLoad(customSettings, elements) {
this._settings = getInstanceSettings(customSettings);
this._setObserver();
this._loadingCount = 0;
this.update(elements);
};
LazyLoad.prototype = {
_manageIntersection: function _manageIntersection(entry) {
var observer = this._observer;
var loadDelay = this._settings.load_delay;
var element = entry.target; // WITHOUT LOAD DELAY
if (!loadDelay) {
if (isIntersecting(entry)) {
loadAndUnobserve(element, observer, this);
}
return;
} // WITH LOAD DELAY
if (isIntersecting(entry)) {
delayLoad(element, observer, this);
} else {
cancelDelayLoad(element);
}
},
_onIntersection: function _onIntersection(entries) {
entries.forEach(this._manageIntersection.bind(this));
},
_setObserver: function _setObserver() {
if (!supportsIntersectionObserver) {
return;
}
this._observer = new IntersectionObserver(
this._onIntersection.bind(this),
getObserverSettings(this._settings)
);
},
_updateLoadingCount: function _updateLoadingCount(plusMinus) {
this._loadingCount += plusMinus;
if (this._elements.length === 0 && this._loadingCount === 0) {
callbackIfSet(this._settings.callback_finish);
}
},
update: function update(elements) {
var _this = this;
var settings = this._settings;
var nodeSet =
elements ||
settings.container.querySelectorAll(settings.elements_selector);
this._elements = purgeProcessedElements(
Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
);
if (isBot || !this._observer) {
this.loadAll();
return;
}
this._elements.forEach(function(element) {
_this._observer.observe(element);
});
},
destroy: function destroy() {
var _this2 = this;
if (this._observer) {
this._elements.forEach(function(element) {
_this2._observer.unobserve(element);
});
this._observer = null;
}
this._elements = null;
this._settings = null;
},
load: function load(element, force) {
revealElement(element, this, force);
},
loadAll: function loadAll() {
var _this3 = this;
var elements = this._elements;
elements.forEach(function(element) {
_this3.load(element);
});
}
};
/* Automatic instances creation if required (useful for async script loading) */
if (runningOnBrowser) {
autoInitialize(LazyLoad, window.lazyLoadOptions);
}
return LazyLoad;
})();
/*jslint browser: true */
/*jslint node: true */
/*global addClass, addListener, ajaxGet, dataSrcIframeClass, dataSrcImgClass,
debounce, doesFontExist, earlySvgSupport, earlySvgasimgSupport, earlyHasTouch,
earlyDeviceType, earlyDeviceFormfactor, Draggabilly, getByClass, getHumanDate,
hasClass, imagesLoaded, isNodejs, isElectron, isNwjs, Isotope, LazyLoad,
loadDeferred, loadJsCss, manageDataSrcIframeAll, manageDataSrcImgAll,
manageExternalLinkAll, Masonry, needsPolyfills, openDeviceBrowser, Packery,
parseLink, removeClass, require, scroll2Top, supportsCanvas, supportsPassive,
supportsSvgSmilAnimation, throttle, ToProgress*/
/*property console, split */
(function(root, document) {
"use strict";
/*!
* safe way to handle console.log
* @see {@link https://github.com/paulmillr/console-polyfill}
*/
(function() {
if (!root.console) {
root.console = {};
}
var con = root.console;
var prop;
var method;
var dummy = function() {};
var properties = ["memory"];
var methods = ["assert,clear,count,debug,dir,dirxml,error,exception,group,",
"groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,",
"show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn"
];
methods.join("").split(",");
for (;
(prop = properties.pop());) {
if (!con[prop]) {
con[prop] = {};
}
}
for (;
(method = methods.pop());) {
if (!con[method]) {
con[method] = dummy;
}
}
prop = method = dummy = properties = methods = null;
})();
/*!
* supportsPassive
*/
root.supportsPassive = (function() {
var support = false;
try {
var options = Object.defineProperty && Object.defineProperty({}, "passive", {
get: function() {
support = true;
}
});
root.addEventListener("test", function() {}, options);
} catch (err) {}
return support;
})();
/*!
* supportsSvgSmilAnimation
*/
root.supportsSvgSmilAnimation = (function() {
var fn = {}.toString;
return !!document.createElementNS &&
(/SVGAnimate/).test(fn.call(document.createElementNS("http://www.w3.org/2000/svg", "animate"))) || "";
})();
/*!
* supportsCanvas
*/
root.supportsCanvas = (function() {
var canvas = document.createElement("canvas");
return !!(canvas.getContext && canvas.getContext("2d"));
})();
/*!
* needsPolyfills
*/
root.needsPolyfills = (function() {
return !String.prototype.startsWith ||
!supportsPassive ||
!root.requestAnimationFrame ||
!root.matchMedia ||
("undefined" === typeof root.Element && !("dataset" in document.documentElement)) ||
!("classList" in document.createElement("_")) ||
(document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) ||
(root.attachEvent && !root.addEventListener) ||
!("onhashchange" in root) ||
!Array.prototype.indexOf ||
!root.Promise ||
!root.fetch ||
!document.querySelectorAll ||
!document.querySelector ||
!Function.prototype.bind ||
(Object.defineProperty &&
Object.getOwnPropertyDescriptor &&
Object.getOwnPropertyDescriptor(Element.prototype, "textContent") &&
!Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) ||
!("undefined" !== typeof root.localStorage && "undefined" !== typeof root.sessionStorage) ||
!root.WeakMap ||
!root.MutationObserver;
})();
/*!
* getHumanDate
*/
root.getHumanDate = (function() {
var newDate = (new Date());
var newDay = newDate.getDate();
var newYear = newDate.getFullYear();
var newMonth = newDate.getMonth();
(newMonth += 1);
if (10 > newDay) {
newDay = "0" + newDay;
}
if (10 > newMonth) {
newMonth = "0" + newMonth;
}
return "".concat(newYear, "-", newMonth, "-", newDay);
})();
/*!
* Super-simple wrapper around addEventListener and attachEvent (old IE).
* Does not handle differences in the Event-objects.
* @see {@link https://github.com/finn-no/eventlistener}
*/
(function() {
var setListener = function(standard, fallback) {
return function(el, type, listener, useCapture) {
if (el[standard]) {
el[standard](type, listener, useCapture);
} else {
if (el[fallback]) {
el[fallback]("on" + type, listener);
}
}
};
};
root.addListener = setListener("addEventListener", "attachEvent");
root.removeListener = setListener("removeEventListener", "detachEvent");
})();
/*!
* get elements by class name wrapper
*/
root.getByClass = function(parent, name) {
if (!document.getElementsByClassName) {
var children = (parent || document.body).getElementsByTagName("*"),
elements = [],
regx = new RegExp("\\b" + name + "\\b"),
child;
var i,
l;
for (i = 0, l = children.length; i < l; i += 1) {
child = children[i];
if (regx.test(child.className)) {
elements.push(child);
}
}
i = l = null;
return elements;
} else {
return parent ? parent.getElementsByClassName(name) : "";
}
};
/*!
* class list wrapper
*/
(function() {
var hasClass;
var addClass;
var removeClass;
if ("classList" in document.documentElement) {
hasClass = function(el, name) {
return el.classList.contains(name);
};
addClass = function(el, name) {
el.classList.add(name);
};
removeClass = function(el, name) {
el.classList.remove(name);
};
} else {
hasClass = function(el, name) {
return new RegExp("\\b" + name + "\\b").test(el.className);
};
addClass = function(el, name) {
if (!hasClass(el, name)) {
el.className += " " + name;
}
};
removeClass = function(el, name) {
el.className = el.className.replace(new RegExp("\\b" + name + "\\b", "g"), "");
};
}
root.hasClass = hasClass;
root.addClass = addClass;
root.removeClass = removeClass;
root.toggleClass = function(el, name) {
if (hasClass(el, name)) {
removeClass(el, name);
} else {
addClass(el, name);
}
};
})();
/*!
* parseLink
*/
/*jshint bitwise: false */
root.parseLink = function(url, full) {
var _full = full || "";
var _url = encodeURI(url);
return (function() {
var _replace = function(s) {
return s.replace(/^(#|\?)/, "").replace(/\:$/, "");
};
var _location = location || "";
var _protocol = function(protocol) {
switch (protocol) {
case "http:":
return _full ? ":" + 80 : 80;
case "https:":
return _full ? ":" + 443 : 443;
default:
return _full ? ":" + _location.port : _location.port;
}
};
var _isAbsolute = (0 === url.indexOf("//") || !!~url.indexOf("://"));
var _origin = function() {
var c = document.createElement("a");
c.href = _url;
var o = c.protocol + "//" + c.hostname + (c.port ? ":" + c.port : "");
return o || "";
};
var _isCrossDomain = function() {
var _locationHref = window.location || "";
var v = _locationHref.protocol + "//" + _locationHref.hostname + (_locationHref.port ? ":" + _locationHref.port : "");
return v !== _origin();
};
var _link = document.createElement("a");
_link.href = _url;
return {
href: _link.href,
origin: _origin(),
host: _link.host || _location.host,
port: ("0" === _link.port || "" === _link.port) ?
_protocol(_link.protocol) :
(_full ? _link.port : _replace(_link.port)),
hash: _full ? _link.hash : _replace(_link.hash),
hostname: _link.hostname || _location.hostname,
pathname: _link.pathname.charAt(0) !== "/" ?
(_full ? "/" + _link.pathname : _link.pathname) :
(_full ? _link.pathname : _link.pathname.slice(1)),
protocol: !_link.protocol ||
":" === _link.protocol ?
(_full ? _location.protocol : _replace(_location.protocol)) :
(_full ? _link.protocol : _replace(_link.protocol)),
search: _full ? _link.search : _replace(_link.search),
query: _full ? _link.search : _replace(_link.search),
isAbsolute: _isAbsolute,
isRelative: !_isAbsolute,
isCrossDomain: _isCrossDomain(),
hasHTTP: (/^(http|https):\/\//i).test(url) ? true : false
};
})();
};
/*jshint bitwise: true */
/*!
* getHttp
*/
root.getHttp = (function() {
var prot = root.location.protocol || "";
return "http:" === prot ? "http" : "https:" === prot ? "https" : "";
})();
/*!
* throttle
*/
root.throttle = function(func, wait) {
var context;
var args;
var fn;
var timer;
var last = 0;
function call() {
timer = 0;
last = +new Date();
fn = func.apply(context, args);
context = null;
args = null;
}
return function throttled() {
context = this;
args = arguments;
var delta = new Date() - last;
if (!timer) {
if (delta >= wait) {
call();
} else {
timer = setTimeout(call, wait - delta);
}
}
return fn;
};
};
/*!
* debounce
*/
root.debounce = function(func, wait) {
var timer;
var args;
var context;
var timestamp;
return function debounced() {
context = this;
args = [].slice.call(arguments, 0);
timestamp = new Date();
var later = function() {
var last = (new Date()) - timestamp;
if (last < wait) {
timer = setTimeout(later, wait - last);
} else {
timer = null;
func.apply(context, args);
}
};
if (!timer) {
timer = setTimeout(later, wait);
}
};
};
/*!
* isNodejs isElectron isNwjs;
*/
root.isNodejs = "undefined" !== typeof process && "undefined" !== typeof require || "";
root.isElectron = (function() {
if (typeof root !== "undefined" &&
typeof root.process === "object" &&
root.process.type === "renderer") {
return true;
}
if (typeof root !== "undefined" &&
typeof root.process !== "undefined" &&
typeof root.process.versions === "object" &&
!!root.process.versions.electron) {
return true;
}
if (typeof navigator === "object" &&
typeof navigator.userAgent === "string" &&
navigator.userAgent.indexOf("Electron") >= 0) {
return true;
}
return false;
})();
root.isNwjs = (function() {
if ("undefined" !== typeof isNodejs && isNodejs) {
try {
if ("undefined" !== typeof require("nw.gui")) {
return true;
}
} catch (err) {
return false;
}
}
return false;
})();
/*!
* openDeviceBrowser
*/
root.openDeviceBrowser = function(url) {
var onElectron = function() {
var es = isElectron ? require("electron").shell : "";
return es ? es.openExternal(url) : "";
};
var onNwjs = function() {
var ns = isNwjs ? require("nw.gui").Shell : "";
return ns ? ns.openExternal(url) : "";
};
var onLocal = function() {
return root.open(url, "_system", "scrollbars=1,location=no");
};
if (isElectron) {
onElectron();
} else if (isNwjs) {
onNwjs();
} else {
if (root.getHttp) {
return true;
} else {
onLocal();
}
}
};
/*!
* scroll2Top
*/
root.scroll2Top = function(scrollTargetY, speed, easing) {
var scrollY = root.scrollY || document.documentElement.scrollTop;
var posY = scrollTargetY || 0;
var rate = speed || 2000;
var soothing = easing || "easeOutSine";
var currentTime = 0;
var time = Math.max(0.1, Math.min(Math.abs(scrollY - posY) / rate, 0.8));
var easingEquations = {
easeOutSine: function(pos) {
return Math.sin(pos * (Math.PI / 2));
},
easeInOutSine: function(pos) {
return (-0.5 * (Math.cos(Math.PI * pos) - 1));
},
easeInOutQuint: function(pos) {
if ((pos /= 0.5) < 1) {
return 0.5 * Math.pow(pos, 5);
}
return 0.5 * (Math.pow((pos - 2), 5) + 2);
}
};
function tick() {
currentTime += 1 / 60;
var p = currentTime / time;
var t = easingEquations[soothing](p);
if (p < 1) {
requestAnimationFrame(tick);
root.scrollTo(0, scrollY + ((posY - scrollY) * t));
} else {
root.scrollTo(0, posY);
}
}
tick();
};
/*!
* setVisible
*/
root.setVisible = function(elem) {
return elem && (elem.style.visibility = "visible", elem.style.opacity = 1);
};
/*!
* removeElement
*/
root.removeElement = function(elem) {
if (elem) {
if ("undefined" !== typeof elem.remove) {
return elem.remove();
} else {
return elem.parentNode && elem.parentNode.removeChild(elem);
}
}
};
/*!
* modified ToProgress v0.1.1
* arguments.callee changed to TP, a local wrapper function,
* so that public function name is now customizable;
* wrapped in curly brackets:
* else{document.body.appendChild(this.progressBar);};
* removed module check
* @see {@link http://github.com/djyde/ToProgress}
* @see {@link https://github.com/djyde/ToProgress/blob/master/ToProgress.js}
* @see {@link https://gist.github.com/englishextra/6a8c79c9efbf1f2f50523d46a918b785}
* @see {@link https://jsfiddle.net/englishextra/z5xhjde8/}
* passes jshint
*/
root.ToProgress = (function() {
var TP = function() {
var whichTransitionEvent = function() {
var el = document.createElement("fakeelement");
var transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
var t;
for (t in transitions) {
if (transitions.hasOwnProperty(t)) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
t = null;
};
var transitionEvent = whichTransitionEvent();
var ToProgress = function(opt, selector) {
this.progress = 0;
this.options = {
id: "top-progress-bar",
color: "#F44336",
height: "2px",
duration: 0.2,
zIndex: "auto"
};
if (opt && typeof opt === "object") {
var key;
for (key in opt) {
if (opt.hasOwnProperty(key)) {
this.options[key] = opt[key];
}
}
key = null;
}
this.options.opacityDuration = this.options.duration * 3;
this.progressBar = document.createElement("div");
this.progressBar.id = this.options.id;
this.progressBar.setCSS = function(style) {
var property;
for (property in style) {
if (style.hasOwnProperty(property)) {
this.style[property] = style[property];
}
}
property = null;
};
this.progressBar.setCSS({
"position": selector ? "relative" : "fixed",
"top": "0",
"left": "0",
"right": "0",
"background-color": this.options.color,
"height": this.options.height,
"width": "0%",
"transition": "width " + this.options.duration + "s" + ", opacity " + this.options.opacityDuration + "s",
"-moz-transition": "width " + this.options.duration + "s" + ", opacity " + this.options.opacityDuration + "s",
"-webkit-transition": "width " + this.options.duration + "s" + ", opacity " + this.options.opacityDuration + "s",
"z-index": this.options.zIndex
});
if (selector) {
var el;
if (selector.indexOf("#", 0) !== -1) {
el = document.getElementById(selector) || "";
} else {
if (selector.indexOf(".", 0) !== -1) {
el = document.getElementsByClassName(selector)[0] || "";
}
}
if (el) {
if (el.hasChildNodes()) {
el.insertBefore(this.progressBar, el.firstChild);
} else {
el.appendChild(this.progressBar);
}
}
} else {
document.body.appendChild(this.progressBar);
}
};
ToProgress.prototype.transit = function() {
this.progressBar.style.width = this.progress + "%";
};
ToProgress.prototype.getProgress = function() {
return this.progress;
};
ToProgress.prototype.setProgress = function(progress, callback) {
this.show();
if (progress > 100) {
this.progress = 100;
} else if (progress < 0) {
this.progress = 0;
} else {
this.progress = progress;
}
this.transit();
if (callback) {
callback();
}
};
ToProgress.prototype.increase = function(toBeIncreasedProgress, callback) {
this.show();
this.setProgress(this.progress + toBeIncreasedProgress, callback);
};
ToProgress.prototype.decrease = function(toBeDecreasedProgress, callback) {
this.show();
this.setProgress(this.progress - toBeDecreasedProgress, callback);
};
ToProgress.prototype.finish = function(callback) {
var that = this;
this.setProgress(100, callback);
this.hide();
if (transitionEvent) {
this.progressBar.addEventListener(transitionEvent, function(e) {
that.reset();
that.progressBar.removeEventListener(e.type, TP);
});
}
};
ToProgress.prototype.reset = function(callback) {
this.progress = 0;
this.transit();
if (callback) {
callback();
}
};
ToProgress.prototype.hide = function() {
this.progressBar.style.opacity = "0";
};
ToProgress.prototype.show = function() {
this.progressBar.style.opacity = "1";
};
return ToProgress;
};
return TP();
})();
/*!
* manageExternalLinkAll
*/
root.manageExternalLinkAll = function() {
var link = document.getElementsByTagName("a") || "";
var arrange = function(e) {
var handle = function(url, ev) {
ev.stopPropagation();
ev.preventDefault();
var logic = function() {
openDeviceBrowser(url);
};
debounce(logic, 200).call(root);
};
var externalLinkIsBindedClass = "external-link--is-binded";
if (!hasClass(e, externalLinkIsBindedClass)) {
var url = e.getAttribute("href") || "";
if (url && parseLink(url).isCrossDomain && parseLink(url).hasHTTP) {
e.title = "" + (parseLink(url).hostname || "") + " откроется в новой вкладке";
if (root.getHttp) {
e.target = "_blank";
e.setAttribute("rel", "noopener noreferrer");
} else {
addListener(e, "click", handle.bind(null, url));
}
addClass(e, externalLinkIsBindedClass);
}
}
};
if (link) {
var i,
l;
for (i = 0, l = link.length; i < l; i += 1) {
arrange(link[i]);
}
i = l = null;
}
};
/*!
* manageDataSrcImgAll
* @see {@link https://github.com/verlok/lazyload}
*/
root.dataSrcImgClass = "data-src-img";
root.lazyLoadDataSrcImgInstance = null;
root.manageDataSrcImgAll = function(callback) {
var _callback = function() {
return callback && "function" === typeof callback && callback();
};
var isActiveClass = "is-active";
var dataSrcImgIsBindedClass = "data-src-img--is-binded";
var images = getByClass(document, dataSrcImgClass) || "";
var i = images.length;
while (i--) {
if (!hasClass(images[i], dataSrcImgIsBindedClass)) {
addClass(images[i], dataSrcImgIsBindedClass);
addClass(images[i], isActiveClass);
addListener(images[i], "load", _callback);
}
}
i = null;
if (root.LazyLoad) {
if (root.lazyLoadDataSrcImgInstance) {
root.lazyLoadDataSrcImgInstance.destroy();
}
root.lazyLoadDataSrcImgInstance = new LazyLoad({
elements_selector: "." + dataSrcImgClass
});
}
};
/*!
* manageDataSrcIframeAll
* @see {@link https://github.com/verlok/lazyload}
*/
root.dataSrcIframeClass = "data-src-iframe";
root.lazyLoadDataSrcIframeInstance = null;
root.manageDataSrcIframeAll = function(callback) {
var _callback = function() {
return callback && "function" === typeof callback && callback();
};
var isActiveClass = "is-active";
var dataSrcIframeIsBindedClass = "data-src-iframe--is-binded";
var iframes = getByClass(document, dataSrcIframeClass) || "";
var i = iframes.length;
while (i--) {
if (!hasClass(iframes[i], dataSrcIframeIsBindedClass)) {
addClass(iframes[i], dataSrcIframeIsBindedClass);
addClass(iframes[i], isActiveClass);
addListener(iframes[i], "load", _callback);
var attributes = {
"frameborder": "no",
"style": "border:none;",
"webkitallowfullscreen": "true",
"mozallowfullscreen": "true",
"scrolling": "no",
"allowfullscreen": "true"
};
var key;
for (key in attributes) {
if (attributes.hasOwnProperty(key)) {
iframes[i].setAttribute(key, attributes[key]);
}
}
key = attributes = null;
}
}
i = null;
if (root.LazyLoad) {
if (root.lazyLoadDataSrcIframeInstance) {
root.lazyLoadDataSrcIframeInstance.destroy();
}
root.lazyLoadDataSrcIframeInstance = new LazyLoad({
elements_selector: "." + dataSrcIframeClass
});
}
};
/*!
* modified Detect Whether a Font is Installed
* @param {String} fontName The name of the font to check
* @return {Boolean}
* @author Kirupa <sam@samclarke.com>
* @see {@link https://www.kirupa.com/html5/detect_whether_font_is_installed.htm}
* passes jshint
*/
root.doesFontExist = function(fontName) {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var text = "abcdefghijklmnopqrstuvwxyz0123456789";
context.font = "72px monospace";
var baselineSize = context.measureText(text).width;
context.font = "72px '" + fontName + "', monospace";
var newSize = context.measureText(text).width;
canvas = null;
if (newSize === baselineSize) {
return false;
} else {
return true;
}
};
/*!
* modified loadExt
* @see {@link https://gist.github.com/englishextra/ff9dc7ab002312568742861cb80865c9}
* passes jshint
*/
root.loadJsCss = function(files, callback, type) {
var _this = this;
_this.files = files;
_this.js = [];
_this.head = document.getElementsByTagName("head")[0] || "";
_this.body = document.body || "";
_this.ref = document.getElementsByTagName("script")[0] || "";
_this.callback = callback || function() {};
_this.type = type ? type.toLowerCase() : "";
_this.loadStyle = function(file) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = file;
link.media = "only x";
link.onload = function() {
this.onload = null;
this.media = "all";
};
link.setAttribute("property", "stylesheet");
/* _this.head.appendChild(link); */
(_this.body || _this.head).appendChild(link);
};
_this.loadScript = function(i) {
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = _this.js[i];
var loadNextScript = function() {
if (++i < _this.js.length) {
_this.loadScript(i);
} else {
_this.callback();
}
};
script.onload = function() {
loadNextScript();
};
_this.head.appendChild(script);
/* if (_this.ref.parentNode) {
_this.ref.parentNode[insertBefore](script, _this.ref);
} else {
(_this.body || _this.head).appendChild(script);
} */
(_this.body || _this.head).appendChild(script);
};
var i,
l;
for (i = 0, l = _this.files.length; i < l; i += 1) {
if ((/\.js$|\.js\?/).test(_this.files[i]) || _this.type === "js") {
_this.js.push(_this.files[i]);
}
if ((/\.css$|\.css\?|\/css\?/).test(_this.files[i]) || _this.type === "css") {
_this.loadStyle(_this.files[i]);
}
}
i = l = null;
if (_this.js.length > 0) {
_this.loadScript(0);
} else {
_this.callback();
}
};
/*!
* loadDeferred
*/
root.loadDeferred = function(urlArray, callback) {
var timer;
var handle = function() {
clearTimeout(timer);
timer = null;
var load;
load = new loadJsCss(urlArray, callback);
};
var req;
var raf = function() {
cancelAnimationFrame(req);
timer = setTimeout(handle, 0);
};
if (root.requestAnimationFrame) {
req = requestAnimationFrame(raf);
} else {
addListener(root, "load", handle);
}
};
/*!
* early utility classes
*/
root.earlyDeviceFormfactor = (function(selectors) {
var orientation;
var size;
var addClasses = function(e) {
var classesList = e.split(" ");
if (selectors) {
var i;
for (i = 0; i < classesList.length; i += 1) {
e = classesList[i];
selectors.add(e);
}
i = null;
}
};
var removeClasses = function(e) {
var classesList = e.split(" ");
if (selectors) {
var i;
for (i = 0; i < classesList.length; i += 1) {
e = classesList[i];
selectors.remove(e);
}
i = null;
}
};
var orientationMq = {
landscape: "all and (orientation:landscape)",
portrait: "all and (orientation:portrait)"
};
var sizeMq = {
small: "all and (max-width:768px)",
medium: "all and (min-width:768px) and (max-width:991px)",
large: "all and (min-width:992px)"
};
var matchMedia = "matchMedia";
var matches = "matches";
var toggleOrientationClasses = function(mqList, classText) {
var handleMq = function(mqList) {
if (mqList[matches]) {
addClasses(classText);
orientation = classText;
} else {
removeClasses(classText);
}
};
handleMq(mqList);
mqList.addListener(handleMq);
};
var toggleSizeClasses = function(mqList, classText) {
var handleMq = function(mqList) {
if (mqList[matches]) {
addClasses(classText);
size = classText;
} else {
removeClasses(classText);
}
};
handleMq(mqList);
mqList.addListener(handleMq);
};
var key;
for (key in orientationMq) {
if (orientationMq.hasOwnProperty(key)) {
toggleOrientationClasses(root[matchMedia](orientationMq[key]), key);
}
}
for (key in sizeMq) {
if (sizeMq.hasOwnProperty(key)) {
toggleSizeClasses(root[matchMedia](sizeMq[key]), key);
}
}
key = null;
return {
orientation: orientation || "",
size: size || ""
};
})(document.documentElement.classList || "");
root.earlyDeviceType = (function(mobile, desktop, opera) {
var selector = (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i).test(opera) ||
(/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i).test(opera.substr(0, 4)) ?
mobile :
desktop;
addClass(document.documentElement, selector);
return selector;
})("mobile", "desktop", navigator.userAgent || navigator.vendor || (root).opera);
root.earlySvgSupport = (function(selector) {
selector = document.implementation.hasFeature("http://www.w3.org/2000/svg", "1.1") ? selector : "no-" + selector;
addClass(document.documentElement, selector);
return selector;
})("svg");
root.earlySvgasimgSupport = (function(selector) {
selector = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1") ? selector : "no-" + selector;
addClass(document.documentElement, selector);
return selector;
})("svgasimg");
root.earlyHasTouch = (function(selector) {
selector = "ontouchstart" in document.documentElement ? selector : "no-" + selector;
addClass(document.documentElement, selector);
return selector;
})("touch");
})("undefined" !== typeof window ? window : this, document);
/*!
* app logic
*/
(function(root, document) {
"use strict";
var docElem = document.documentElement || "";
var docBody = document.body || "";
var progressBar = new ToProgress({
id: "top-progress-bar",
color: "#FF2C40",
height: "0.200rem",
duration: 0.2,
zIndex: 999
});
var hideProgressBar = function() {
progressBar.finish();
progressBar.hide();
};
progressBar.increase(20);
if (supportsSvgSmilAnimation) {
addClass(docElem, "svganimate");
}
var run = function() {
var isActiveClass = "is-active";
var isBindedClass = "is-binded";
removeClass(docElem, "no-js");
addClass(docElem, "js");
progressBar.increase(20);
var userBrowser = " [" +
(getHumanDate ? getHumanDate : "") +
(earlyDeviceType ? " " + earlyDeviceType : "") +
(earlyDeviceFormfactor.orientation ? " " + earlyDeviceFormfactor.orientation : "") +
(earlyDeviceFormfactor.size ? " " + earlyDeviceFormfactor.size : "") +
(earlySvgSupport ? " " + earlySvgSupport : "") +
(earlySvgasimgSupport ? " " + earlySvgasimgSupport : "") +
(earlyHasTouch ? " " + earlyHasTouch : "") +
"]";
if (document.title) {
document.title = document.title + userBrowser;
}
manageExternalLinkAll();
manageDataSrcImgAll();
manageDataSrcIframeAll();
root.imagesLoadedInstance = null;
root.draggabillyInstance = null;
root.isotopeInstance = null;
root.masonryInstance = null;
root.packeryInstance = null;
var initMasonry = function() {
var gridItemClass = "masonry-grid-item";
var gridItemSelector = ".masonry-grid-item";
var gridSizerSelector = ".masonry-grid-sizer";
var grid = getByClass(document, "masonry-grid")[0] || "";
var gridItem = getByClass(document, gridItemClass) || "";
var holder = getByClass(document, "holder-filter-buttons")[0] || "";
var btn = holder ? holder.getElementsByTagName("li") || "" : "";
var sel = getByClass(document, "filter-select")[0] || "";
var controls = getByClass(document, "holder-filter-controls")[0] || "";
var initScript = function() {
if (root.Masonry && root.Isotope) {
root.isotopeInstance = new Isotope(grid, {
itemSelector: gridItemSelector,
layoutMode: "masonry",
masonry: {
columnWidth: gridSizerSelector,
gutter: 0
},
percentPosition: true,
});
if (root.imagesLoaded) {
root.imagesLoadedInstance = imagesLoaded(grid);
root.imagesLoadedInstance.on("progress", function() {
root.isotopeInstance.layout();
});
}
var handleFilterButtonAll = function() {
var _this = this;
root.isotopeInstance.arrange({
filter: _this.dataset.filter
});
var i,
l;
for (i = 0, l = btn.length; i < l; i += 1) {
btn[i].classList.remove(isActiveClass);
}
_this.classList.add(isActiveClass);
i = l = null;
var j,
m;
for (j = 0, m = sel.options.length; j < m; j += 1) {
if (sel.options[j].value === _this.dataset.filter) {
sel.selectedIndex = j;
break;
}
}
j = m = null;
/* var timer = setTimeout(function () {
clearTimeout(timer);
timer = null;
manageDataSrcImgAll();
manageDataSrcIframeAll();
}, 500); */
};
if (btn) {
var i,
l;
for (i = 0, l = btn.length; i < l; i += 1) {
if (!btn[i].classList.contains(isBindedClass)) {
btn[i].addEventListener("click", handleFilterButtonAll);
btn[i].classList.add(isBindedClass);
}
}
i = l = null;
}
var handleFilterSelect = function() {
var _this = this;
root.isotopeInstance.arrange({
filter: _this.options[_this.selectedIndex].value
});
var i,
l;
for (i = 0, l = btn.length; i < l; i += 1) {
btn[i].classList.remove(isActiveClass);
}
i = l = null;
var j,
m;
for (j = 0, m = btn.length; j < m; j += 1) {
if (btn[j].dataset.filter === _this.options[_this.selectedIndex].value) {
btn[j].classList.add(isActiveClass);
break;
}
}
j = m = null;
/* var timer = setTimeout(function () {
clearTimeout(timer);
timer = null;
manageDataSrcImgAll();
manageDataSrcIframeAll();
}, 500); */
};
if (sel) {
if (!sel.classList.contains(isBindedClass)) {
sel.addEventListener("change", handleFilterSelect);
sel.classList.add(isBindedClass);
}
}
if (controls) {
controls.classList.add("visible");
}
} else if (root.Masonry) {
root.masonryInstance = new Masonry(grid, {
itemSelector: gridItemSelector,
columnWidth: gridSizerSelector,
gutter: 0,
percentPosition: true
});
if (root.imagesLoaded) {
root.imagesLoadedInstance = imagesLoaded(grid);
root.imagesLoadedInstance.on("progress", function() {
root.masonryInstance.layout();
});
}
if (controls) {
controls.classList.remove("visible");
}
} else {
if (root.Packery) {
root.packeryInstance = new Packery(grid, {
itemSelector: gridItemSelector,
columnWidth: gridSizerSelector,
gutter: 0,
percentPosition: true
});
if (root.imagesLoaded) {
root.imagesLoadedInstance = imagesLoaded(grid);
root.imagesLoadedInstance.on("progress", function() {
root.packeryInstance.layout();
});
}
if (gridItem) {
if (root.Draggabilly) {
var draggies = [];
var initDraggie = function(e) {
var draggableElem = e;
root.draggabillyInstance = new Draggabilly(draggableElem, {});
draggies.push(root.draggabillyInstance);
};
var j,
m;
for (j = 0, m = gridItem.length; j < m; j += 1) {
initDraggie(gridItem[j]);
}
j = m = null;
if (root.packeryInstance && root.draggabillyInstance) {
root.packeryInstance.bindDraggabillyEvents(root.draggabillyInstance);
}
}
}
if (controls) {
controls.classList.remove("visible");
}
}
}
var timer = setTimeout(function() {
clearTimeout(timer);
timer = null;
if (root.isotopeInstance) {
root.isotopeInstance.layout();
} else if (root.masonryInstance) {
root.masonryInstance.layout();
} else {
if (root.packeryInstance) {
root.packeryInstance.layout();
}
}
}, 500);
};
if (grid && gridItem) {
/* var jsUrl = "./cdn/masonry/4.1.1/js/masonry.imagesloaded.pkgd.fixed.min.js"; */
/* var jsUrl = "./cdn/packery/2.1.1/js/packery.imagesloaded.pkgd.fixed.js"; */
/* var jsUrl = "./cdn/packery/2.1.1/js/packery.imagesloaded.draggabilly.pkgd.fixed.min.js"; */
/* var jsUrl = "./cdn/isotope/3.0.1/js/isotope.imagesloaded.pkgd.fixed.js"; */
initScript();
}
};
initMasonry();
var manageTotopBtn = function() {
var btnClass = "btn-totop";
var btn = getByClass(document, btnClass)[0] || "";
var insertUpSvg = function(e) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
svg.setAttribute("class", "ui-icon");
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#ui-icon-Up");
svg.appendChild(use);
e.appendChild(svg);
};
if (!btn) {
btn = document.createElement("button");
addClass(btn, btnClass);
btn.title = "Наверх";
insertUpSvg(btn);
docBody.appendChild(btn);
}
var handleBtn = function(ev) {
ev.stopPropagation();
ev.preventDefault();
scroll2Top(0, 20000);
};
var handleRoot = function(_this) {
var logic = function() {
var scrollPosition = _this.pageYOffset || docElem.scrollTop || docBody.scrollTop || "";
var windowHeight = _this.innerHeight || docElem.clientHeight || docBody.clientHeight || "";
if (scrollPosition && windowHeight && btn) {
if (scrollPosition > windowHeight) {
addClass(btn, isActiveClass);
} else {
removeClass(btn, isActiveClass);
}
}
};
throttle(logic, 100).call(root);
};
if (docBody) {
addListener(btn, "click", handleBtn);
addListener(root, "scroll", handleRoot, { passive: true });
}
};
manageTotopBtn();
hideProgressBar();
};
var onFontReady = function(bodyFontFamily, scripts, useCheck) {
var _useCheck = useCheck || "";
var slot;
var init = function() {
clearInterval(slot);
slot = null;
if (!supportsSvgSmilAnimation && "undefined" !== typeof progressBar) {
progressBar.increase(20);
}
/* var load;
load = new loadJsCss(scripts, run); */
run();
};
var check = function() {
if (doesFontExist(bodyFontFamily)) {
init();
}
};
if (_useCheck && supportsCanvas) {
slot = setInterval(check, 100);
} else {
slot = null;
init();
}
};
var scripts = [];
/* if (needsPolyfills) {
scripts.push("./cdn/polyfills/js/polyfills.fixed.min.js");
}
scripts.push("./libs/sitemap/js/vendors.min.js"); */
var bodyFontFamily = "Roboto";
/* var urlArray = ["./libs/sitemap/css/bundle.min.css"]; */
var urlArray = [];
loadDeferred(urlArray, onFontReady.bind(null, bodyFontFamily, scripts, false));
})("undefined" !== typeof window ? window : this, document);
Also see: Tab Triggers